diff --git a/.dumi/pages/index/components/ComponentsList.tsx b/.dumi/pages/index/components/ComponentsList.tsx index 7aae7b7881..739355b890 100644 --- a/.dumi/pages/index/components/ComponentsList.tsx +++ b/.dumi/pages/index/components/ComponentsList.tsx @@ -257,7 +257,7 @@ const ComponentsList: React.FC = () => { style={{ width: 400 }} message="Ant Design 5.0" description={locale.sampleContent} - closable + closable={{ closeIcon: true, disabled: true }} /> ), }, diff --git a/.dumi/theme/slots/Header/index.tsx b/.dumi/theme/slots/Header/index.tsx index 7029f17bd6..ab493de079 100644 --- a/.dumi/theme/slots/Header/index.tsx +++ b/.dumi/theme/slots/Header/index.tsx @@ -93,6 +93,7 @@ const useStyle = createStyles(({ token, css }) => { .dumi-default-search-popover { inset-inline-start: ${token.paddingSM}px; inset-inline-end: unset; + z-index: 1; &::before { inset-inline-start: 100px; inset-inline-end: unset; diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx index c9e7d5f49c..7784d1ea6f 100644 --- a/components/date-picker/generatePicker/generateRangePicker.tsx +++ b/components/date-picker/generatePicker/generateRangePicker.tsx @@ -23,7 +23,7 @@ import { useLocale } from '../../locale'; import { useCompactItemContext } from '../../space/Compact'; import enUS from '../locale/en_US'; import useStyle from '../style'; -import { getRangePlaceholder, transPlacement2DropdownAlign, useIcons } from '../util'; +import { getRangePlaceholder, useIcons } from '../util'; import { TIME } from './constant'; import type { RangePickerProps } from './interface'; import useComponents from './useComponents'; @@ -117,7 +117,6 @@ const generateRangePicker = ( } disabled={mergedDisabled} ref={innerRef as any} // Need to modify PickerRef - popupAlign={transPlacement2DropdownAlign(direction, placement)} placement={placement} placeholder={getRangePlaceholder(locale, picker, placeholder)} suffixIcon={suffixNode} diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx index 6c189b57fd..1fb7f8fb1e 100644 --- a/components/date-picker/generatePicker/generateSinglePicker.tsx +++ b/components/date-picker/generatePicker/generateSinglePicker.tsx @@ -23,7 +23,7 @@ import { useLocale } from '../../locale'; import { useCompactItemContext } from '../../space/Compact'; import enUS from '../locale/en_US'; import useStyle from '../style'; -import { getPlaceholder, transPlacement2DropdownAlign, useIcons } from '../util'; +import { getPlaceholder, useIcons } from '../util'; import { MONTH, MONTHPICKER, @@ -160,7 +160,6 @@ const generatePicker = ( ref={innerRef} placeholder={getPlaceholder(locale, mergedPicker, placeholder)} suffixIcon={suffixNode} - dropdownAlign={transPlacement2DropdownAlign(direction, placement)} placement={placement} prevIcon={} nextIcon={} diff --git a/components/date-picker/index.tsx b/components/date-picker/index.tsx index e897918e95..f9bb811cf5 100755 --- a/components/date-picker/index.tsx +++ b/components/date-picker/index.tsx @@ -8,7 +8,6 @@ import type { PickerProps, PickerPropsWithMultiple, } from './generatePicker/interface'; -import { transPlacement2DropdownAlign } from './util'; export type DatePickerProps = PickerPropsWithMultiple< Dayjs, @@ -30,24 +29,11 @@ export type DatePickerType = typeof DatePicker & { generatePicker: typeof generatePicker; }; -function postPureProps(props: DatePickerProps) { - const dropdownAlign = transPlacement2DropdownAlign(props.direction, props.placement); - - dropdownAlign.overflow!.adjustY = false; - dropdownAlign.overflow!.adjustX = false; - - return { - ...props, - dropdownAlign, - popupAlign: dropdownAlign, - }; -} - // We don't care debug panel /* istanbul ignore next */ -const PurePanel = genPurePanel(DatePicker, 'picker', null, postPureProps); +const PurePanel = genPurePanel(DatePicker, 'picker', null); (DatePicker as DatePickerType)._InternalPanelDoNotUseOrYouWillBeFired = PurePanel; -const PureRangePanel = genPurePanel(DatePicker.RangePicker, 'picker', null, postPureProps); +const PureRangePanel = genPurePanel(DatePicker.RangePicker, 'picker', null); (DatePicker as DatePickerType)._InternalRangePanelDoNotUseOrYouWillBeFired = PureRangePanel; (DatePicker as DatePickerType).generatePicker = generatePicker; diff --git a/components/date-picker/style/panel.ts b/components/date-picker/style/panel.ts index 9e6164d5e6..1c7f802de4 100644 --- a/components/date-picker/style/panel.ts +++ b/components/date-picker/style/panel.ts @@ -33,6 +33,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => { height: cellHeight, transform: 'translateY(-50%)', content: '""', + pointerEvents: 'none', }, // >>> Default @@ -464,10 +465,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => { }, }, - '&:hover td': { - '&:before': { - background: cellHoverBg, - }, + '&:hover td:before': { + background: cellHoverBg, }, '&-range-start td, &-range-end td, &-selected td, &-hover td': { diff --git a/components/date-picker/util.ts b/components/date-picker/util.ts index b35d7e73cf..a9fbb25a66 100644 --- a/components/date-picker/util.ts +++ b/components/date-picker/util.ts @@ -1,9 +1,6 @@ import * as React from 'react'; -import type { AlignType } from '@rc-component/trigger'; import type { PickerMode } from 'rc-picker/lib/interface'; -import type { SelectCommonPlacement } from '../_util/motion'; -import type { DirectionType } from '../config-provider'; import useSelectIcons from '../select/useIcons'; import type { PickerLocale, PickerProps } from './generatePicker'; @@ -61,53 +58,6 @@ export function getRangePlaceholder( return locale.lang.rangePlaceholder; } -export function transPlacement2DropdownAlign( - direction: DirectionType, - placement?: SelectCommonPlacement, -): AlignType { - const overflow = { - adjustX: 1, - adjustY: 1, - }; - switch (placement) { - case 'bottomLeft': { - return { - points: ['tl', 'bl'], - offset: [0, 4], - overflow, - }; - } - case 'bottomRight': { - return { - points: ['tr', 'br'], - offset: [0, 4], - overflow, - }; - } - case 'topLeft': { - return { - points: ['bl', 'tl'], - offset: [0, -4], - overflow, - }; - } - case 'topRight': { - return { - points: ['br', 'tr'], - offset: [0, -4], - overflow, - }; - } - default: { - return { - points: direction === 'rtl' ? ['tr', 'br'] : ['tl', 'bl'], - offset: [0, 4], - overflow, - }; - } - } -} - export function useIcons(props: Pick, prefixCls: string) { const { allowClear = true } = props; diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap index 97400d568c..9748a46f41 100644 --- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -3981,7 +3981,7 @@ Array [ tabindex="-1" > Profile Billing Settings { , ); + expect( + container.querySelector('.ant-dropdown-menu-title-content-with-extra'), + ).toBeInTheDocument(); expect(container.querySelector('.ant-dropdown-menu-item-extra')?.textContent).toBe(text); }); }); diff --git a/components/dropdown/style/index.ts b/components/dropdown/style/index.ts index 7058246e32..a56e1484e0 100644 --- a/components/dropdown/style/index.ts +++ b/components/dropdown/style/index.ts @@ -242,10 +242,14 @@ const genBaseStyle: GenerateStyle = (token) => { }, [`${menuCls}-title-content`]: { - display: 'flex', - alignItems: 'center', flex: 'auto', + '&-with-extra': { + display: 'inline-flex', + alignItems: 'center', + width: '100%', + }, + '> a': { color: 'inherit', transition: `all ${motionDurationMid}`, diff --git a/components/menu/MenuItem.tsx b/components/menu/MenuItem.tsx index cfd3cb3d30..6fab563e03 100644 --- a/components/menu/MenuItem.tsx +++ b/components/menu/MenuItem.tsx @@ -36,7 +36,7 @@ type GenericComponent = Omit & ) => ReturnType); const MenuItem: GenericComponent = (props) => { - const { className, children, icon, title, danger } = props; + const { className, children, icon, title, danger, extra } = props; const { prefixCls, firstLevel, @@ -47,7 +47,15 @@ const MenuItem: GenericComponent = (props) => { const renderItemChildren = (inlineCollapsed: boolean) => { const label = (children as React.ReactNode[])?.[0]; - const wrapNode = {children}; + const wrapNode = ( + + {children} + + ); // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span // ref: https://github.com/ant-design/ant-design/pull/23456 if (!icon || (React.isValidElement(children) && children.type === 'span')) { diff --git a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap index ace571c969..b9fd68c740 100644 --- a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -1700,6 +1700,357 @@ exports[`renders components/menu/demo/component-token.tsx extend context correct exports[`renders components/menu/demo/component-token.tsx extend context correctly 2`] = `[]`; +exports[`renders components/menu/demo/extra-style.tsx extend context correctly 1`] = ` +
+
+ + +
+ + +
+`; + +exports[`renders components/menu/demo/extra-style.tsx extend context correctly 2`] = `[]`; + exports[`renders components/menu/demo/horizontal.tsx extend context correctly 1`] = ` Array [
    `; +exports[`renders components/menu/demo/extra-style.tsx correctly 1`] = ` +
    +
    + + +
    + + +
    +`; + exports[`renders components/menu/demo/horizontal.tsx correctly 1`] = ` Array [
      { const text = '⌘P'; const { container } = render(); + expect(container.querySelector('.ant-menu-title-content-with-extra')).toBeInTheDocument(); expect(container.querySelector('.ant-menu-item-extra')?.textContent).toBe(text); }); }); diff --git a/components/menu/demo/extra-style.md b/components/menu/demo/extra-style.md new file mode 100644 index 0000000000..c0c0fc5dc7 --- /dev/null +++ b/components/menu/demo/extra-style.md @@ -0,0 +1,7 @@ +## zh-CN + +调试使用 + +## en-US + +Debug usage diff --git a/components/menu/demo/extra-style.tsx b/components/menu/demo/extra-style.tsx new file mode 100644 index 0000000000..a393ebc5e7 --- /dev/null +++ b/components/menu/demo/extra-style.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { DownOutlined, MailOutlined } from '@ant-design/icons'; +import type { MenuProps } from 'antd'; +import { Flex, Menu, Space } from 'antd'; + +type MenuItem = Required['items'][number]; + +const items1: MenuItem[] = [ + { + key: 'sub1', + icon: , + label: 'Navigation One', + children: [ + { + key: '1', + label: ( + + Option 1 + + + ), + }, + { + key: '2', + label: 'Option 2', + extra: '⌘P', + }, + ], + }, +]; + +const items2: MenuItem[] = [ + { key: '1', label: 'Users', extra: '⌘U' }, + { key: '2', label: 'Profile', extra: '⌘P' }, +]; + +const App: React.FC = () => ( + + + + +); + +export default App; diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md index d66905dc29..09c3d3d17b 100644 --- a/components/menu/index.en-US.md +++ b/components/menu/index.en-US.md @@ -33,6 +33,7 @@ More layouts with navigation: [Layout](/components/layout). Style debug Menu v4 Component Token +Extra Style debug ## API diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md index c2618d2268..0a6b1cb3a6 100644 --- a/components/menu/index.zh-CN.md +++ b/components/menu/index.zh-CN.md @@ -34,6 +34,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAA Style debug v4 版本 Menu 组件 Token +Extra Style debug ## API diff --git a/components/menu/style/index.ts b/components/menu/style/index.ts index 069fa1463e..cf965730c8 100644 --- a/components/menu/style/index.ts +++ b/components/menu/style/index.ts @@ -635,12 +635,12 @@ const getBaseStyle: GenerateStyle = (token) => { }, [`${componentCls}-title-content`]: { - display: 'inline-flex', - alignItems: 'center', transition: `color ${motionDurationSlow}`, - '> a:first-child': { - flexGrow: 1, + '&-with-extra': { + display: 'inline-flex', + alignItems: 'center', + width: '100%', }, // https://github.com/ant-design/ant-design/issues/41143 @@ -653,7 +653,6 @@ const getBaseStyle: GenerateStyle = (token) => { marginInlineStart: 'auto', paddingInlineStart: token.padding, fontSize: token.fontSizeSM, - color: token.colorTextDescription, }, }, diff --git a/components/menu/style/theme.ts b/components/menu/style/theme.ts index 43e342a267..b73961e511 100644 --- a/components/menu/style/theme.ts +++ b/components/menu/style/theme.ts @@ -61,8 +61,10 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation }, // ======================== Item ======================== - [`${componentCls}-item-group-title`]: { - color: groupTitleColor, + [`${componentCls}-item`]: { + '&-group-title, &-extra': { + color: groupTitleColor, + }, }, [`${componentCls}-submenu-selected`]: { diff --git a/components/splitter/style/index.ts b/components/splitter/style/index.ts index 06a96d6b3f..59f1ff6268 100644 --- a/components/splitter/style/index.ts +++ b/components/splitter/style/index.ts @@ -112,14 +112,14 @@ const genSplitterStyle: GenerateStyle = (token: SplitterToken): C zIndex: 1, // Hover background - '&:before': { + '&::before': { content: '""', background: controlItemBgHover, ...centerStyle, }, // Spinner - '&:after': { + '&::after': { content: '""', background: colorFill, ...centerStyle, @@ -127,7 +127,7 @@ const genSplitterStyle: GenerateStyle = (token: SplitterToken): C // Hover [`&:hover:not(${splitBarCls}-dragger-active)`]: { - '&:before': { + '&::before': { background: controlItemBgActive, }, }, @@ -136,7 +136,7 @@ const genSplitterStyle: GenerateStyle = (token: SplitterToken): C '&-active': { zIndex: 2, - '&:before': { + '&::before': { background: controlItemBgActiveHover, }, }, @@ -147,12 +147,12 @@ const genSplitterStyle: GenerateStyle = (token: SplitterToken): C '&, &:hover, &-active': { cursor: 'default', - '&:before': { + '&::before': { background: controlItemBgHover, }, }, - '&:after': { + '&::after': { display: 'none', }, }, @@ -223,12 +223,12 @@ const genSplitterStyle: GenerateStyle = (token: SplitterToken): C height: '100%', width: splitTriggerSize, - '&:before': { + '&::before': { height: '100%', width: splitBarSize, }, - '&:after': { + '&::after': { height: splitBarDraggableSize, width: splitBarSize, }, @@ -278,12 +278,12 @@ const genSplitterStyle: GenerateStyle = (token: SplitterToken): C width: '100%', height: splitTriggerSize, - '&:before': { + '&::before': { width: '100%', height: splitBarSize, }, - '&:after': { + '&::after': { width: splitBarDraggableSize, height: splitBarSize, }, diff --git a/package.json b/package.json index e97af35627..c74175803b 100644 --- a/package.json +++ b/package.json @@ -130,8 +130,8 @@ "rc-image": "~7.11.0", "rc-input": "~1.6.3", "rc-input-number": "~9.3.0", - "rc-mentions": "~2.16.1", - "rc-menu": "~9.15.1", + "rc-mentions": "~2.17.0", + "rc-menu": "~9.16.0", "rc-motion": "^2.9.3", "rc-notification": "~5.6.2", "rc-pagination": "~4.3.0", @@ -145,7 +145,7 @@ "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", "rc-table": "~7.48.1", - "rc-tabs": "~15.3.0", + "rc-tabs": "~15.4.0", "rc-textarea": "~1.8.2", "rc-tooltip": "~6.2.1", "rc-tree": "~5.10.1",