From cdf9b4660f84535ff89019c02b4077202a6916e4 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 6 Jun 2023 16:11:18 +0800
Subject: [PATCH] refactor: menu token rename (#42848)
* refactor: menu token rename
* chore: update snapshot
* chore: UPDATE TEST CASE
* fix: fix gap as 4px
* fix: popup transform origin
---
components/layout/__tests__/token.test.tsx | 41 +-
.../__snapshots__/demo-extend.test.ts.snap | 360 ++++++++++++++++++
.../__snapshots__/demo.test.tsx.snap | 174 +++++++++
components/menu/demo/component-token.md | 7 +
components/menu/demo/component-token.tsx | 87 +++++
components/menu/demo/menu-v4.tsx | 14 +-
components/menu/index.en-US.md | 1 +
components/menu/index.zh-CN.md | 1 +
components/menu/style/index.tsx | 166 ++++++--
components/menu/style/theme.tsx | 111 +++---
components/menu/style/vertical.tsx | 14 +-
.../theme/util/genComponentStyleHook.ts | 24 +-
12 files changed, 892 insertions(+), 108 deletions(-)
create mode 100755 components/menu/demo/component-token.md
create mode 100644 components/menu/demo/component-token.tsx
diff --git a/components/layout/__tests__/token.test.tsx b/components/layout/__tests__/token.test.tsx
index bcaa883099..b663aa6cde 100644
--- a/components/layout/__tests__/token.test.tsx
+++ b/components/layout/__tests__/token.test.tsx
@@ -7,7 +7,7 @@ import Menu from '../../menu';
const { Header } = Layout;
describe('Layout.Token', () => {
- it('theme should work', () => {
+ it('legacy theme should work', () => {
const { container } = render(
{
colorBgHeader: '#FF0000',
},
Menu: {
+ // keep this deprecated one
colorItemBg: '#00FF00',
},
},
@@ -38,6 +39,44 @@ describe('Layout.Token', () => {
,
);
+ expect(container.querySelector('.ant-layout-header')).toHaveStyle({
+ backgroundColor: '#FF0000',
+ });
+ expect(container.querySelector('.ant-menu')).toHaveStyle({
+ backgroundColor: '#00FF00',
+ });
+ });
+ it('theme should work', () => {
+ const { container } = render(
+
+
+
+ ,
+ );
+
expect(container.querySelector('.ant-layout-header')).toHaveStyle({
backgroundColor: '#FF0000',
});
diff --git a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
index 4f0d7d4a90..ae3cec84dc 100644
--- a/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/menu/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,5 +1,365 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`renders components/menu/demo/component-token.tsx extend context correctly 1`] = `
+Array [
+ ,
+
+
+
+
+
+
+
+
+
,
+]
+`;
+
exports[`renders components/menu/demo/horizontal.tsx extend context correctly 1`] = `
Array [
,
+ ,
+]
+`;
+
exports[`renders components/menu/demo/horizontal.tsx correctly 1`] = `
Array [
,
+ },
+ {
+ label: 'Navigation Two',
+ key: 'app',
+ icon: ,
+ disabled: true,
+ },
+ {
+ label: 'Navigation Three - Submenu',
+ key: 'SubMenu',
+ icon: ,
+ children: [
+ {
+ type: 'group',
+ label: 'Item 1',
+ children: [
+ {
+ label: 'Option 1',
+ key: 'setting:1',
+ },
+ {
+ label: 'Option 2',
+ key: 'setting:2',
+ },
+ ],
+ },
+ {
+ type: 'group',
+ label: 'Item 2',
+ children: [
+ {
+ label: 'Option 3',
+ key: 'setting:3',
+ },
+ {
+ label: 'Option 4',
+ key: 'setting:4',
+ },
+ ],
+ },
+ ],
+ },
+ {
+ label: (
+
+ Navigation Four - Link
+
+ ),
+ key: 'alipay',
+ },
+];
+
+const App: React.FC = () => {
+ const [current, setCurrent] = useState('mail');
+
+ const onClick: MenuProps['onClick'] = (e) => {
+ console.log('click ', e);
+ setCurrent(e.key);
+ };
+
+ return (
+
+
+
+ );
+};
+
+export default App;
diff --git a/components/menu/demo/menu-v4.tsx b/components/menu/demo/menu-v4.tsx
index 7ad9f68c7c..5bc1a24cfc 100644
--- a/components/menu/demo/menu-v4.tsx
+++ b/components/menu/demo/menu-v4.tsx
@@ -64,14 +64,14 @@ const App: React.FC = () => {
theme={{
components: {
Menu: {
- radiusItem: 0,
- radiusSubMenuItem: 0,
- colorItemTextHover: '#1890ff',
- colorItemTextSelected: '#1890ff',
- colorItemBgSelected: '#e6f7ff',
- colorActiveBarWidth: 3,
+ itemBorderRadius: 0,
+ subMenuItemBorderRadius: 0,
+ itemHoverColor: '#1890ff',
+ itemSelectedColor: '#1890ff',
+ itemSelectedBg: '#e6f7ff',
+ activeBarWidth: 3,
itemMarginInline: 0,
- colorItemBgHover: 'transparent',
+ itemHoverBg: 'transparent',
},
},
}}
diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md
index 6818bde654..4d8531ac99 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).
Switch the menu type
Style debug
Menu v4
+Component Token
## API
diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md
index 525777fdb6..3e87e6c1f6 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
## API
diff --git a/components/menu/style/index.tsx b/components/menu/style/index.tsx
index 1d8737de27..eb07308344 100644
--- a/components/menu/style/index.tsx
+++ b/components/menu/style/index.tsx
@@ -15,46 +15,109 @@ export interface ComponentToken {
zIndexPopup: number;
// Group
+ /** @deprecated Use `groupTitleColor` instead */
colorGroupTitle: string;
+ groupTitleColor: string;
// radius
+ /** @deprecated Use `itemBorderRadius` instead */
radiusItem: number;
+ itemBorderRadius: number;
+
+ /** @deprecated Use `subMenuItemBorderRadius` instead */
radiusSubMenuItem: number;
+ subMenuItemBorderRadius: number;
// Item Text
// > Default
+ /** @deprecated Use `itemColor` instead */
colorItemText: string;
+ itemColor: string;
+
+ /** @deprecated Use `itemHoverColor` instead */
colorItemTextHover: string;
+ itemHoverColor: string;
+
+ /** @deprecated Use `horizontalItemHoverColor` instead */
colorItemTextHoverHorizontal: string;
+ horizontalItemHoverColor: string;
+
+ /** @deprecated Use `itemSelectedColor` instead */
colorItemTextSelected: string;
+ itemSelectedColor: string;
+
+ /** @deprecated Use `horizontalItemSelectedColor` instead */
colorItemTextSelectedHorizontal: string;
+ horizontalItemSelectedColor: string;
// > Disabled
+ /** @deprecated Use `itemDisabledColor` instead */
colorItemTextDisabled: string;
+ itemDisabledColor: string;
// > Danger
+ /** @deprecated Use `dangerItemColor` instead */
colorDangerItemText: string;
+ dangerItemColor: string;
+
+ /** @deprecated Use `dangerItemHoverColor` instead */
colorDangerItemTextHover: string;
+ dangerItemHoverColor: string;
+
+ /** @deprecated Use `dangerItemSelectedColor` instead */
colorDangerItemTextSelected: string;
+ dangerItemSelectedColor: string;
+
+ /** @deprecated Use `dangerItemActiveBg` instead */
colorDangerItemBgActive: string;
+ dangerItemActiveBg: string;
+
+ /** @deprecated Use `dangerItemSelectedBg` instead */
colorDangerItemBgSelected: string;
+ dangerItemSelectedBg: string;
// Item Bg
+ /** @deprecated Use `itemBg` instead */
colorItemBg: string;
+ itemBg: string;
+
+ /** @deprecated Use `itemHoverBg` instead */
colorItemBgHover: string;
+ itemHoverBg: string;
+
+ /** @deprecated Use `subMenuItemBg` instead */
colorSubItemBg: string;
+ subMenuItemBg: string;
// > Default
+ /** @deprecated Use `itemActiveBg` instead */
colorItemBgActive: string;
+ itemActiveBg: string;
+
+ /** @deprecated Use `itemSelectedBg` instead */
colorItemBgSelected: string;
+ itemSelectedBg: string;
+
+ /** @deprecated Use `horizontalItemSelectedBg` instead */
colorItemBgSelectedHorizontal: string;
+ horizontalItemSelectedBg: string;
// Ink Bar
+ /** @deprecated Use `activeBarWidth` instead */
colorActiveBarWidth: number;
+ activeBarWidth: number;
+
+ /** @deprecated Use `activeBarHeight` instead */
colorActiveBarHeight: number;
+ activeBarHeight: number;
+
+ /** @deprecated Use `activeBarBorderWidth` instead */
colorActiveBarBorderSize: number;
+ activeBarBorderWidth: number;
itemMarginInline: number;
+ horizontalItemHoverBg: string;
+ horizontalItemBorderRadius: number;
}
export interface MenuToken extends FullToken<'Menu'> {
@@ -212,7 +275,7 @@ const getBaseStyle: GenerateStyle = (token) => {
lineWidth,
zIndexPopup,
borderRadiusLG,
- radiusSubMenuItem,
+ subMenuItemBorderRadius,
menuArrowSize,
menuArrowOffset,
lineType,
@@ -265,7 +328,7 @@ const getBaseStyle: GenerateStyle = (token) => {
},
},
[`${componentCls}-item, ${componentCls}-submenu, ${componentCls}-submenu-title`]: {
- borderRadius: token.radiusItem,
+ borderRadius: token.itemBorderRadius,
},
[`${componentCls}-item-group-title`]: {
@@ -396,6 +459,13 @@ const getBaseStyle: GenerateStyle = (token) => {
transformOrigin: '0 100%',
},
+ [`
+ &-placement-bottomLeft,
+ &-placement-rightTop,
+ `]: {
+ transformOrigin: '0 0',
+ },
+
[`
&-placement-leftTop,
&-placement-leftBottom
@@ -431,7 +501,7 @@ const getBaseStyle: GenerateStyle = (token) => {
...genSubMenuArrowStyle(token),
[`${componentCls}-item, ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
- borderRadius: radiusSubMenuItem,
+ borderRadius: subMenuItemBorderRadius,
},
[`${componentCls}-submenu-title::after`]: {
@@ -519,33 +589,33 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
const menuDarkToken = mergeToken(
menuToken,
{
- colorItemText: colorTextDark,
- colorItemTextHover: colorTextLightSolid,
- colorGroupTitle: colorTextDark,
- colorItemTextSelected: colorTextLightSolid,
- colorItemBg: '#001529',
- colorSubItemBg: '#000c17',
- colorItemBgActive: 'transparent',
- colorItemBgSelected: colorPrimary,
- colorActiveBarWidth: 0,
- colorActiveBarHeight: 0,
- colorActiveBarBorderSize: 0,
+ itemColor: colorTextDark,
+ itemHoverColor: colorTextLightSolid,
+ groupTitleColor: colorTextDark,
+ itemSelectedColor: colorTextLightSolid,
+ itemBg: '#001529',
+ subMenuItemBg: '#000c17',
+ itemActiveBg: 'transparent',
+ itemSelectedBg: colorPrimary,
+ activeBarWidth: 0,
+ activeBarHeight: 0,
+ activeBarBorderWidth: 0,
// Disabled
- colorItemTextDisabled: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
+ itemDisabledColor: new TinyColor(colorTextLightSolid).setAlpha(0.25).toRgbString(),
// Danger
- colorDangerItemText: colorError,
- colorDangerItemTextHover: colorErrorHover,
- colorDangerItemTextSelected: colorTextLightSolid,
- colorDangerItemBgActive: colorError,
- colorDangerItemBgSelected: colorError,
+ dangerItemColor: colorError,
+ dangerItemHoverColor: colorErrorHover,
+ dangerItemSelectedColor: colorTextLightSolid,
+ dangerItemActiveBg: colorError,
+ dangerItemSelectedBg: colorError,
menuSubMenuBg: '#001529',
// Horizontal
- colorItemTextSelectedHorizontal: colorTextLightSolid,
- colorItemBgSelectedHorizontal: colorPrimary,
+ horizontalItemSelectedColor: colorTextLightSolid,
+ horizontalItemSelectedBg: colorPrimary,
},
{
...overrideComponentToken,
@@ -598,36 +668,88 @@ export default (prefixCls: string, injectStyle: boolean): UseComponentStyleResul
dropdownWidth: 160,
zIndexPopup: token.zIndexPopupBase + 50,
radiusItem: token.borderRadiusLG,
+ itemBorderRadius: token.borderRadiusLG,
radiusSubMenuItem: token.borderRadiusSM,
+ subMenuItemBorderRadius: token.borderRadiusSM,
colorItemText: colorText,
+ itemColor: colorText,
colorItemTextHover: colorText,
+ itemHoverColor: colorText,
colorItemTextHoverHorizontal: colorPrimary,
+ horizontalItemHoverColor: colorPrimary,
colorGroupTitle: colorTextDescription,
+ groupTitleColor: colorTextDescription,
colorItemTextSelected: colorPrimary,
+ itemSelectedColor: colorPrimary,
colorItemTextSelectedHorizontal: colorPrimary,
+ horizontalItemSelectedColor: colorPrimary,
colorItemBg: colorBgContainer,
+ itemBg: colorBgContainer,
colorItemBgHover: colorBgTextHover,
+ itemHoverBg: colorBgTextHover,
colorItemBgActive: colorFillContent,
+ itemActiveBg: colorFillContent,
colorSubItemBg: colorFillAlter,
+ subMenuItemBg: colorFillAlter,
colorItemBgSelected: controlItemBgActive,
+ itemSelectedBg: controlItemBgActive,
colorItemBgSelectedHorizontal: 'transparent',
+ horizontalItemSelectedBg: 'transparent',
colorActiveBarWidth: 0,
+ activeBarWidth: 0,
colorActiveBarHeight: lineWidthBold,
+ activeBarHeight: lineWidthBold,
colorActiveBarBorderSize: lineWidth,
+ activeBarBorderWidth: lineWidth,
// Disabled
colorItemTextDisabled: colorTextDisabled,
+ itemDisabledColor: colorTextDisabled,
// Danger
colorDangerItemText: colorError,
+ dangerItemColor: colorError,
colorDangerItemTextHover: colorError,
+ dangerItemHoverColor: colorError,
colorDangerItemTextSelected: colorError,
+ dangerItemSelectedColor: colorError,
colorDangerItemBgActive: colorErrorBg,
+ dangerItemActiveBg: colorErrorBg,
colorDangerItemBgSelected: colorErrorBg,
+ dangerItemSelectedBg: colorErrorBg,
itemMarginInline: token.marginXXS,
+
+ horizontalItemBorderRadius: 0,
+ horizontalItemHoverBg: 'transparent',
};
},
+ {
+ deprecatedTokens: [
+ ['colorGroupTitle', 'groupTitleColor'],
+ ['radiusItem', 'itemBorderRadius'],
+ ['radiusSubMenuItem', 'subMenuItemBorderRadius'],
+ ['colorItemText', 'itemColor'],
+ ['colorItemTextHover', 'itemHoverColor'],
+ ['colorItemTextHoverHorizontal', 'horizontalItemHoverColor'],
+ ['colorItemTextSelected', 'itemSelectedColor'],
+ ['colorItemTextSelectedHorizontal', 'horizontalItemSelectedColor'],
+ ['colorItemTextDisabled', 'itemDisabledColor'],
+ ['colorDangerItemText', 'dangerItemColor'],
+ ['colorDangerItemTextHover', 'dangerItemHoverColor'],
+ ['colorDangerItemTextSelected', 'dangerItemSelectedColor'],
+ ['colorDangerItemBgActive', 'dangerItemActiveBg'],
+ ['colorDangerItemBgSelected', 'dangerItemSelectedBg'],
+ ['colorItemBg', 'itemBg'],
+ ['colorItemBgHover', 'itemHoverBg'],
+ ['colorSubItemBg', 'subMenuItemBg'],
+ ['colorItemBgActive', 'itemActiveBg'],
+ ['colorItemBgSelectedHorizontal', 'horizontalItemSelectedBg'],
+ ['colorActiveBarWidth', 'activeBarWidth'],
+ ['colorActiveBarHeight', 'activeBarHeight'],
+ ['colorActiveBarBorderSize', 'activeBarBorderWidth'],
+ ],
+ },
);
return useOriginHook(prefixCls);
diff --git a/components/menu/style/theme.tsx b/components/menu/style/theme.tsx
index deaca02cf8..b169d904eb 100644
--- a/components/menu/style/theme.tsx
+++ b/components/menu/style/theme.tsx
@@ -1,6 +1,6 @@
import type { CSSInterpolation } from '@ant-design/cssinjs';
-import { genFocusOutline } from '../../style';
import type { MenuToken } from '.';
+import { genFocusOutline } from '../../style';
const accessibilityFocus = (token: MenuToken) => ({
...genFocusOutline(token),
@@ -9,46 +9,48 @@ const accessibilityFocus = (token: MenuToken) => ({
const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation => {
const {
componentCls,
- colorItemText,
- colorItemTextSelected,
- colorGroupTitle,
- colorItemBg,
- colorSubItemBg,
- colorItemBgSelected,
- colorActiveBarHeight,
- colorActiveBarWidth,
- colorActiveBarBorderSize,
+ itemColor,
+ itemSelectedColor,
+ groupTitleColor,
+ itemBg,
+ subMenuItemBg,
+ itemSelectedBg,
+ activeBarHeight,
+ activeBarWidth,
+ activeBarBorderWidth,
motionDurationSlow,
motionEaseInOut,
motionEaseOut,
menuItemPaddingInline,
motionDurationMid,
- colorItemTextHover,
+ itemHoverColor,
lineType,
colorSplit,
// Disabled
- colorItemTextDisabled,
+ itemDisabledColor,
// Danger
- colorDangerItemText,
- colorDangerItemTextHover,
- colorDangerItemTextSelected,
- colorDangerItemBgActive,
- colorDangerItemBgSelected,
+ dangerItemColor,
+ dangerItemHoverColor,
+ dangerItemSelectedColor,
+ dangerItemActiveBg,
+ dangerItemSelectedBg,
- colorItemBgHover,
+ itemHoverBg,
menuSubMenuBg,
// Horizontal
- colorItemTextSelectedHorizontal,
- colorItemBgSelectedHorizontal,
+ horizontalItemSelectedColor,
+ horizontalItemSelectedBg,
+ horizontalItemBorderRadius,
+ horizontalItemHoverBg,
} = token;
return {
[`${componentCls}-${themeSuffix}, ${componentCls}-${themeSuffix} > ${componentCls}`]: {
- color: colorItemText,
- background: colorItemBg,
+ color: itemColor,
+ background: itemBg,
[`&${componentCls}-root:focus-visible`]: {
...accessibilityFocus(token),
@@ -56,61 +58,61 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
// ======================== Item ========================
[`${componentCls}-item-group-title`]: {
- color: colorGroupTitle,
+ color: groupTitleColor,
},
[`${componentCls}-submenu-selected`]: {
[`> ${componentCls}-submenu-title`]: {
- color: colorItemTextSelected,
+ color: itemSelectedColor,
},
},
// Disabled
[`${componentCls}-item-disabled, ${componentCls}-submenu-disabled`]: {
- color: `${colorItemTextDisabled} !important`,
+ color: `${itemDisabledColor} !important`,
},
// Hover
[`${componentCls}-item:hover, ${componentCls}-submenu-title:hover`]: {
[`&:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: {
- color: colorItemTextHover,
+ color: itemHoverColor,
},
},
[`&:not(${componentCls}-horizontal)`]: {
[`${componentCls}-item:not(${componentCls}-item-selected)`]: {
'&:hover': {
- backgroundColor: colorItemBgHover,
+ backgroundColor: itemHoverBg,
},
'&:active': {
- backgroundColor: colorItemBgSelected,
+ backgroundColor: itemSelectedBg,
},
},
[`${componentCls}-submenu-title`]: {
'&:hover': {
- backgroundColor: colorItemBgHover,
+ backgroundColor: itemHoverBg,
},
'&:active': {
- backgroundColor: colorItemBgSelected,
+ backgroundColor: itemSelectedBg,
},
},
},
// Danger - only Item has
[`${componentCls}-item-danger`]: {
- color: colorDangerItemText,
+ color: dangerItemColor,
[`&${componentCls}-item:hover`]: {
[`&:not(${componentCls}-item-selected):not(${componentCls}-submenu-selected)`]: {
- color: colorDangerItemTextHover,
+ color: dangerItemHoverColor,
},
},
[`&${componentCls}-item:active`]: {
- background: colorDangerItemBgActive,
+ background: dangerItemActiveBg,
},
},
@@ -121,11 +123,11 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
},
[`${componentCls}-item-selected`]: {
- color: colorItemTextSelected,
+ color: itemSelectedColor,
// Danger
[`&${componentCls}-item-danger`]: {
- color: colorDangerItemTextSelected,
+ color: dangerItemSelectedColor,
},
[`a, a:hover`]: {
@@ -134,11 +136,11 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
},
[`& ${componentCls}-item-selected`]: {
- backgroundColor: colorItemBgSelected,
+ backgroundColor: itemSelectedBg,
// Danger
[`&${componentCls}-item-danger`]: {
- backgroundColor: colorDangerItemBgSelected,
+ backgroundColor: dangerItemSelectedBg,
},
},
@@ -153,7 +155,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
},
[`&${componentCls}-popup > ${componentCls}`]: {
- backgroundColor: colorItemBg,
+ backgroundColor: itemBg,
},
// ====================== Horizontal ======================
@@ -165,32 +167,33 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
: {}),
[`> ${componentCls}-item, > ${componentCls}-submenu`]: {
- top: colorActiveBarBorderSize,
- marginTop: -colorActiveBarBorderSize,
+ top: activeBarBorderWidth,
+ marginTop: -activeBarBorderWidth,
marginBottom: 0,
- borderRadius: 0,
+ borderRadius: horizontalItemBorderRadius,
'&::after': {
position: 'absolute',
insetInline: menuItemPaddingInline,
bottom: 0,
- borderBottom: `${colorActiveBarHeight}px solid transparent`,
+ borderBottom: `${activeBarHeight}px solid transparent`,
transition: `border-color ${motionDurationSlow} ${motionEaseInOut}`,
content: '""',
},
[`&:hover, &-active, &-open`]: {
+ background: horizontalItemHoverBg,
'&::after': {
- borderBottomWidth: colorActiveBarHeight,
- borderBottomColor: colorItemTextSelectedHorizontal,
+ borderBottomWidth: activeBarHeight,
+ borderBottomColor: horizontalItemSelectedColor,
},
},
[`&-selected`]: {
- color: colorItemTextSelectedHorizontal,
- backgroundColor: colorItemBgSelectedHorizontal,
+ color: horizontalItemSelectedColor,
+ backgroundColor: horizontalItemSelectedBg,
'&::after': {
- borderBottomWidth: colorActiveBarHeight,
- borderBottomColor: colorItemTextSelectedHorizontal,
+ borderBottomWidth: activeBarHeight,
+ borderBottomColor: horizontalItemSelectedColor,
},
},
},
@@ -200,7 +203,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
//
[`&${componentCls}-root`]: {
[`&${componentCls}-inline, &${componentCls}-vertical`]: {
- borderInlineEnd: `${colorActiveBarBorderSize}px ${lineType} ${colorSplit}`,
+ borderInlineEnd: `${activeBarBorderWidth}px ${lineType} ${colorSplit}`,
},
},
@@ -208,14 +211,14 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
[`&${componentCls}-inline`]: {
// Sub
[`${componentCls}-sub${componentCls}-inline`]: {
- background: colorSubItemBg,
+ background: subMenuItemBg,
},
// Item
[`${componentCls}-item, ${componentCls}-submenu-title`]:
- colorActiveBarBorderSize && colorActiveBarWidth
+ activeBarBorderWidth && activeBarWidth
? {
- width: `calc(100% + ${colorActiveBarBorderSize}px)`,
+ width: `calc(100% + ${activeBarBorderWidth}px)`,
}
: {},
@@ -226,7 +229,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
position: 'absolute',
insetBlock: 0,
insetInlineEnd: 0,
- borderInlineEnd: `${colorActiveBarWidth}px solid ${colorItemTextSelected}`,
+ borderInlineEnd: `${activeBarWidth}px solid ${itemSelectedColor}`,
transform: 'scaleY(0.0001)',
opacity: 0,
transition: [
@@ -239,7 +242,7 @@ const getThemeStyle = (token: MenuToken, themeSuffix: string): CSSInterpolation
// Danger
[`&${componentCls}-item-danger`]: {
'&::after': {
- borderInlineEndColor: colorDangerItemTextSelected,
+ borderInlineEndColor: dangerItemSelectedColor,
},
},
},
diff --git a/components/menu/style/vertical.tsx b/components/menu/style/vertical.tsx
index e664120d37..e8c73dfab6 100644
--- a/components/menu/style/vertical.tsx
+++ b/components/menu/style/vertical.tsx
@@ -1,6 +1,6 @@
import type { CSSObject } from '@ant-design/cssinjs';
-import { textEllipsis } from '../../style';
import type { MenuToken } from '.';
+import { textEllipsis } from '../../style';
import type { GenerateStyle } from '../../theme/internal';
const getVerticalInlineStyle: GenerateStyle = (token) => {
@@ -19,11 +19,7 @@ const getVerticalInlineStyle: GenerateStyle = (token) => {
return {
[`${componentCls}-item`]: {
position: 'relative',
-
- // https://github.com/ant-design/ant-design/blob/5e52057671f9781ad2b957b0ff9adfcd1eb1eb88/components/menu/style/index.less#L487-L489
- [`&:not(:last-child)`]: {
- marginBottom: marginXS,
- },
+ overflow: 'hidden',
},
[`${componentCls}-item, ${componentCls}-submenu-title`]: {
@@ -32,17 +28,11 @@ const getVerticalInlineStyle: GenerateStyle = (token) => {
paddingInline: padding,
overflow: 'hidden',
textOverflow: 'ellipsis',
-
marginInline: itemMarginInline,
marginBlock: marginXXS,
width: `calc(100% - ${itemMarginInline * 2}px)`,
},
- // disable margin collapsed
- [`${componentCls}-submenu`]: {
- paddingBottom: 0.02,
- },
-
[`> ${componentCls}-item,
> ${componentCls}-submenu > ${componentCls}-submenu-title`]: {
height: menuItemHeight,
diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts
index dcd6cf4d7e..d84c2608e2 100644
--- a/components/theme/util/genComponentStyleHook.ts
+++ b/components/theme/util/genComponentStyleHook.ts
@@ -80,13 +80,7 @@ export default function genComponentStyleHook {
const { token: proxyToken, flush } = statisticToken(token);
- const customComponentToken = token[component] as ComponentToken;
- const defaultComponentToken =
- typeof getDefaultToken === 'function'
- ? getDefaultToken(mergeToken(proxyToken, customComponentToken ?? {}))
- : getDefaultToken;
- const mergedComponentToken = { ...defaultComponentToken, ...customComponentToken };
-
+ const customComponentToken = { ...(token[component] as ComponentToken) };
if (options?.deprecatedTokens) {
const { deprecatedTokens } = options;
deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => {
@@ -99,12 +93,18 @@ export default function genComponentStyleHook