From 6a62d9e7eaf3e683c673091e39fe65ba3204d94b Mon Sep 17 00:00:00 2001 From: ice <49827327+coding-ice@users.noreply.github.com> Date: Thu, 7 Nov 2024 20:00:06 +0800 Subject: [PATCH 1/6] fix(menu): menu-title-content style (#51425) * fix(dropdown): dropdown menu title content style * chore: update rc-mentions to version 2.17.0 and rc-tabs to version 15.4.0 * test: add extra style debug * test: snap * test: snap * Refactor menu demo: remove extra-style-debug component and rename extra-style-debug files to extra-style * Refactor menu demo: remove extra-style-debug component and rename extra-style-debug files to extra-style * Refactor dropdown and menu styles: Add width to extra-style elements * test: snap * fix: Add Space component to menu demo The Space component was missing from the import statement in the menu demo file. This caused a compilation error. The fix adds the Space component to the import statement, resolving the issue. Refactor the menu demo to use Space component for vertical spacing between menus. This improves the visual layout and readability of the menus. Fixes #51492 * test: snap * refactor: Update dropdown and menu title content class names --------- Co-authored-by: afc163 --- .../__snapshots__/demo-extend.test.ts.snap | 6 +- components/dropdown/__tests__/index.test.tsx | 3 + components/dropdown/style/index.ts | 8 +- components/menu/MenuItem.tsx | 12 +- .../__snapshots__/demo-extend.test.ts.snap | 351 ++++++++++++++++++ .../__snapshots__/demo.test.tsx.snap | 172 +++++++++ components/menu/__tests__/index.test.tsx | 1 + components/menu/demo/extra-style.md | 7 + components/menu/demo/extra-style.tsx | 50 +++ components/menu/index.en-US.md | 1 + components/menu/index.zh-CN.md | 1 + components/menu/style/index.ts | 9 +- components/menu/style/theme.ts | 6 +- package.json | 6 +- 14 files changed, 616 insertions(+), 17 deletions(-) create mode 100644 components/menu/demo/extra-style.md create mode 100644 components/menu/demo/extra-style.tsx 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/package.json b/package.json index 9a45873844..c37bf147a8 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.2.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.47.5", - "rc-tabs": "~15.3.0", + "rc-tabs": "~15.4.0", "rc-textarea": "~1.8.2", "rc-tooltip": "~6.2.1", "rc-tree": "~5.9.0", From 48b28e52694c4181fd36282408f3c565c77a7385 Mon Sep 17 00:00:00 2001 From: DctMaZiYo <74136983+Dmaziyo@users.noreply.github.com> Date: Fri, 8 Nov 2024 10:31:20 +0800 Subject: [PATCH 2/6] refactor: remove redundant code(#50845) (#51507) Co-authored-by: liangjunqi Co-authored-by: afc163 --- .../generatePicker/generateRangePicker.tsx | 3 +- .../generatePicker/generateSinglePicker.tsx | 3 +- components/date-picker/index.tsx | 18 +------ components/date-picker/util.ts | 50 ------------------- 4 files changed, 4 insertions(+), 70 deletions(-) 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/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; From 80819feb2908ca12c394d5e0eeec785b4a89dfeb Mon Sep 17 00:00:00 2001 From: DDDDD12138 <43703884+DDDDD12138@users.noreply.github.com> Date: Fri, 8 Nov 2024 10:45:23 +0800 Subject: [PATCH 3/6] site: ensure search-popover z-index is higher than active tab indicator (#51451) --- .dumi/theme/slots/Header/index.tsx | 1 + 1 file changed, 1 insertion(+) 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; From efd64c42d8fe01cbadac9a18761ceadee89b788e Mon Sep 17 00:00:00 2001 From: DisLido Date: Fri, 8 Nov 2024 11:01:44 +0800 Subject: [PATCH 4/6] style: fix Splitter pseudo element colon notation (#51536) --- components/splitter/style/index.ts | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) 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, }, From 3f228b35b6da67f37dafa12d783cbb02e01735ac Mon Sep 17 00:00:00 2001 From: Avan Date: Fri, 8 Nov 2024 11:13:19 +0800 Subject: [PATCH 5/6] chore: disable the default behavior of the Alert closable (#51439) --- .dumi/pages/index/components/ComponentsList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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 }} /> ), }, From fad7df0e00679952a963bf01ded10ed693b0a2e8 Mon Sep 17 00:00:00 2001 From: afc163 Date: Fri, 8 Nov 2024 12:01:06 +0800 Subject: [PATCH 6/6] fix: RangePicker flickering issue when hover between cells (#51533) --- components/date-picker/style/panel.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) 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': {