diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap index 899a1f6238..05c50b5eed 100644 --- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -3893,6 +3893,219 @@ Array [ exports[`renders components/dropdown/demo/event.tsx extend context correctly 2`] = `[]`; +exports[`renders components/dropdown/demo/extra.tsx extend context correctly 1`] = ` +Array [ + +
+
+ Hover me +
+
+ + + +
+
+ , +
+ + , +] +`; + +exports[`renders components/dropdown/demo/extra.tsx extend context correctly 2`] = `[]`; + exports[`renders components/dropdown/demo/icon-debug.tsx extend context correctly 1`] = `
`; +exports[`renders components/dropdown/demo/extra.tsx correctly 1`] = ` + +
+
+ Hover me +
+
+ + + +
+
+ +`; + exports[`renders components/dropdown/demo/icon-debug.tsx correctly 1`] = `
{ ); expect(container3.querySelector('button')).not.toHaveAttribute('disabled'); }); + + it('menu item with extra prop', () => { + const text = '⌘P'; + const { container } = render( + + + , + ); + + expect(container.querySelector('.ant-dropdown-menu-item-extra')?.textContent).toBe(text); + }); }); diff --git a/components/dropdown/demo/extra.md b/components/dropdown/demo/extra.md new file mode 100644 index 0000000000..c01f7e43a9 --- /dev/null +++ b/components/dropdown/demo/extra.md @@ -0,0 +1,7 @@ +## zh-CN + +带有快捷方式的下拉菜单。 + +## en-US + +The dropdown menu with shortcut. diff --git a/components/dropdown/demo/extra.tsx b/components/dropdown/demo/extra.tsx new file mode 100644 index 0000000000..a10cdb81ab --- /dev/null +++ b/components/dropdown/demo/extra.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import { DownOutlined, SettingOutlined } from '@ant-design/icons'; +import type { MenuProps } from 'antd'; +import { Dropdown, Space } from 'antd'; + +const items: MenuProps['items'] = [ + { + key: '1', + label: 'My Account', + disabled: true, + }, + { + type: 'divider', + }, + { + key: '2', + label: 'Profile', + extra: '⌘P', + }, + { + key: '3', + label: 'Billing', + extra: '⌘B', + }, + { + key: '4', + label: 'Settings', + icon: , + extra: '⌘S', + }, +]; + +const App: React.FC = () => ( + + e.preventDefault()}> + + Hover me + + + + +); + +export default App; diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md index b3aca10101..ec8cf0467c 100644 --- a/components/dropdown/index.en-US.md +++ b/components/dropdown/index.en-US.md @@ -17,6 +17,7 @@ When there are more than a few options to choose from, you can wrap them in a `D Basic +Extra node Placement Arrow Other elements diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md index a131bfcd77..d198bb0380 100644 --- a/components/dropdown/index.zh-CN.md +++ b/components/dropdown/index.zh-CN.md @@ -21,6 +21,7 @@ demo: 基本 +额外节点 弹出位置 箭头 其他元素 diff --git a/components/dropdown/style/index.ts b/components/dropdown/style/index.ts index 65f56cb8fd..d874bca624 100644 --- a/components/dropdown/style/index.ts +++ b/components/dropdown/style/index.ts @@ -237,6 +237,8 @@ const genBaseStyle: GenerateStyle = (token) => { }, [`${menuCls}-title-content`]: { + display: 'flex', + alignItems: 'center', flex: 'auto', '> a': { @@ -253,6 +255,13 @@ const genBaseStyle: GenerateStyle = (token) => { content: '""', }, }, + + [`${menuCls}-item-extra`]: { + paddingInlineStart: token.padding, + marginInlineStart: 'auto', + fontSize: token.fontSizeSM, + color: token.colorTextDescription, + }, }, // =========================== Item =========================== diff --git a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap index 74801e5610..5d196204ed 100644 --- a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap +++ b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap @@ -516,11 +516,6 @@ exports[`renders components/mentions/demo/render-panel.tsx extend context correc exports[`renders components/mentions/demo/render-panel.tsx extend context correctly 2`] = ` [ - "Warning: Received \`%s\` for a non-boolean attribute \`%s\`. - -If you want to write it to the DOM, pass a string instead: %s="%s" or %s={value.toString()}. - -If you used to conditionally omit it with %s={condition && value}, pass %s={condition ? value : undefined} instead.%s", "Warning: \`open\` of Mentions is only used for debug usage. Do not use in you production.", ] `; diff --git a/components/menu/MenuItem.tsx b/components/menu/MenuItem.tsx index 5511b8855f..cfd3cb3d30 100644 --- a/components/menu/MenuItem.tsx +++ b/components/menu/MenuItem.tsx @@ -45,12 +45,14 @@ const MenuItem: GenericComponent = (props) => { inlineCollapsed: isInlineCollapsed, } = React.useContext(MenuContext); const renderItemChildren = (inlineCollapsed: boolean) => { + const label = (children as React.ReactNode[])?.[0]; + 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')) { - if (children && inlineCollapsed && firstLevel && typeof children === 'string') { - return
{children.charAt(0)}
; + if (children && inlineCollapsed && firstLevel && typeof label === 'string') { + return
{label.charAt(0)}
; } } return wrapNode; diff --git a/components/menu/__tests__/index.test.tsx b/components/menu/__tests__/index.test.tsx index 67e212e00c..ff005b2159 100644 --- a/components/menu/__tests__/index.test.tsx +++ b/components/menu/__tests__/index.test.tsx @@ -1160,4 +1160,11 @@ describe('Menu', () => { ); expect(container.querySelector('.ant-menu-submenu-arrow')).toBeFalsy(); }); + + it('menu item with extra prop', () => { + const text = '⌘P'; + const { container } = render(); + + expect(container.querySelector('.ant-menu-item-extra')?.textContent).toBe(text); + }); }); diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md index 3b431931d7..d66905dc29 100644 --- a/components/menu/index.en-US.md +++ b/components/menu/index.en-US.md @@ -77,6 +77,7 @@ Common props ref：[Common props](/docs/react/common-props) | -------- | ------------------------------------ | --------- | ------------- | ------- | | danger | Display the danger style | boolean | false | | | disabled | Whether menu item is disabled | boolean | false | | +| extra | The extra of the menu item | ReactNode | - | 5.21.0 | | icon | The icon of the menu item | ReactNode | - | | | key | Unique ID of the menu item | string | - | | | label | Menu label | ReactNode | - | | diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md index b567123e5a..c2618d2268 100644 --- a/components/menu/index.zh-CN.md +++ b/components/menu/index.zh-CN.md @@ -74,14 +74,15 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*Vn4XSqJFAxcAAA #### MenuItemType -| 参数 | 说明 | 类型 | 默认值 | 版本 | -| -------- | ------------------------ | --------- | ------ | ---- | -| danger | 展示错误状态样式 | boolean | false | | -| disabled | 是否禁用 | boolean | false | | -| icon | 菜单图标 | ReactNode | - | | -| key | item 的唯一标志 | string | - | | -| label | 菜单项标题 | ReactNode | - | | -| title | 设置收缩时展示的悬浮标题 | string | - | | +| 参数 | 说明 | 类型 | 默认值 | 版本 | +| -------- | ------------------------ | --------- | ------ | ------ | +| danger | 展示错误状态样式 | boolean | false | | +| disabled | 是否禁用 | boolean | false | | +| extra | 额外节点 | ReactNode | - | 5.21.0 | +| icon | 菜单图标 | ReactNode | - | | +| key | item 的唯一标志 | string | - | | +| label | 菜单项标题 | ReactNode | - | | +| title | 设置收缩时展示的悬浮标题 | string | - | | #### SubMenuType diff --git a/components/menu/style/index.ts b/components/menu/style/index.ts index 69b26a2a96..81c64c512f 100644 --- a/components/menu/style/index.ts +++ b/components/menu/style/index.ts @@ -635,13 +635,26 @@ const getBaseStyle: GenerateStyle = (token) => { }, [`${componentCls}-title-content`]: { + display: 'inline-flex', + alignItems: 'center', transition: `color ${motionDurationSlow}`, + '> a:first-child': { + flexGrow: 1, + }, + // https://github.com/ant-design/ant-design/issues/41143 [`> ${antCls}-typography-ellipsis-single-line`]: { display: 'inline', verticalAlign: 'unset', }, + + [`${componentCls}-item-extra`]: { + marginInlineStart: 'auto', + paddingInlineStart: token.padding, + fontSize: token.fontSizeSM, + color: token.colorTextDescription, + }, }, [`${componentCls}-item a`]: { diff --git a/package.json b/package.json index 95cd1a173f..6072bc7b60 100644 --- a/package.json +++ b/package.json @@ -123,8 +123,8 @@ "rc-image": "~7.9.0", "rc-input": "~1.6.3", "rc-input-number": "~9.2.0", - "rc-mentions": "~2.15.0", - "rc-menu": "~9.14.1", + "rc-mentions": "~2.16.0", + "rc-menu": "~9.15.1", "rc-motion": "^2.9.2", "rc-notification": "~5.6.0", "rc-pagination": "~4.2.0", @@ -138,7 +138,7 @@ "rc-steps": "~6.0.1", "rc-switch": "~4.1.0", "rc-table": "~7.47.3", - "rc-tabs": "~15.1.1", + "rc-tabs": "~15.2.0", "rc-textarea": "~1.8.1", "rc-tooltip": "~6.2.0", "rc-tree": "~5.8.8",