fix(layout): support antd@5.6 token

close #7188
ant-design · Jun 10, 2023 · 28291fe · 28291fe
1 parent 8184e91
commit 28291fe
Show file tree

Hide file tree

Showing 5 changed files with 87 additions and 35 deletions.
diff --git a/packages/layout/src/ProLayout.tsx b/packages/layout/src/ProLayout.tsx
@@ -5,6 +5,7 @@ import {
   ProProvider,
 } from '@ant-design/pro-provider';
 import {
+  coverToNewToken,
   isBrowser,
   useDocumentTitle,
   useMountMergeState,
@@ -772,7 +773,7 @@ const BaseProLayout: React.FC<ProLayoutProps> = (props) => {
               theme={{
                 hashed: isNeedOpenHash(),
                 components: {
-                  Menu: {
+                  Menu: coverToNewToken({
                     colorItemBg:
                       token?.layout?.sider?.colorMenuBackground ||
                       'transparent',
@@ -807,7 +808,7 @@ const BaseProLayout: React.FC<ProLayoutProps> = (props) => {
                     colorBgElevated:
                       token?.layout?.sider?.colorBgMenuItemCollapsedElevated ||
                       '#fff',
-                  },
+                  }),
                 },
               }}
             >
@@ -827,38 +828,44 @@ const BaseProLayout: React.FC<ProLayoutProps> = (props) => {
                       colorBgBody: 'transparent',
                     },
                     Menu: {
-                      colorItemBg:
-                        token?.layout?.header?.colorBgHeader || 'transparent',
-                      colorSubItemBg:
-                        token?.layout?.header?.colorBgHeader || 'transparent',
-                      radiusItem: 4,
-                      colorItemBgSelected:
-                        token?.layout?.header?.colorBgMenuItemSelected ||
-                        token?.colorBgTextHover,
-                      colorItemBgActive:
-                        token?.layout?.header?.colorBgMenuItemHover ||
-                        token?.colorBgTextHover,
-                      colorItemBgSelectedHorizontal:
-                        token?.layout?.header?.colorBgMenuItemSelected ||
-                        token?.colorBgTextHover,
-                      colorActiveBarWidth: 0,
-                      colorActiveBarHeight: 0,
-                      colorActiveBarBorderSize: 0,
-                      colorItemText:
-                        token?.layout?.header?.colorTextMenu ||
-                        token?.colorTextSecondary,
-                      colorItemTextHoverHorizontal:
-                        token?.layout?.header?.colorTextMenuActive ||
-                        token?.colorText,
-                      colorItemTextSelectedHorizontal:
-                        token?.layout?.header?.colorTextMenuSelected ||
-                        token?.colorTextBase,
-                      colorItemTextHover:
-                        token?.layout?.header?.colorTextMenuActive ||
-                        'rgba(0, 0, 0, 0.85)',
-                      colorItemTextSelected:
-                        token?.layout?.header?.colorTextMenuSelected ||
-                        'rgba(0, 0, 0, 1)',
+                      ...coverToNewToken({
+                        colorItemBg:
+                          token?.layout?.header?.colorBgHeader || 'transparent',
+                        colorSubItemBg:
+                          token?.layout?.header?.colorBgHeader || 'transparent',
+                        radiusItem: 4,
+                        colorItemBgSelected:
+                          token?.layout?.header?.colorBgMenuItemSelected ||
+                          token?.colorBgTextHover,
+                        colorItemBgActive:
+                          token?.layout?.header?.colorBgMenuItemHover ||
+                          token?.colorBgTextHover,
+                        colorItemBgSelectedHorizontal:
+                          token?.layout?.header?.colorBgMenuItemSelected ||
+                          token?.colorBgTextHover,
+                        colorActiveBarWidth: 0,
+                        colorActiveBarHeight: 0,
+                        colorActiveBarBorderSize: 0,
+                        colorItemText:
+                          token?.layout?.header?.colorTextMenu ||
+                          token?.colorTextSecondary,
+                        colorItemTextHoverHorizontal:
+                          token?.layout?.header?.colorTextMenuActive ||
+                          token?.colorText,
+                        colorItemTextSelectedHorizontal:
+                          token?.layout?.header?.colorTextMenuSelected ||
+                          token?.colorTextBase,
+                        horizontalItemBorderRadius: 4,
+                        colorItemTextHover:
+                          token?.layout?.header?.colorTextMenuActive ||
+                          'rgba(0, 0, 0, 0.85)',
+                        horizontalItemHoverBg:
+                          token?.layout?.header?.colorBgMenuItemHover ||
+                          'rgba(0, 0, 0, 0.04)',
+                        colorItemTextSelected:
+                          token?.layout?.header?.colorTextMenuSelected ||
+                          'rgba(0, 0, 0, 1)',
+                      }),
                     },
                   },
                 }}

diff --git a/packages/layout/src/components/AppsLogoComponents/style/index.ts b/packages/layout/src/components/AppsLogoComponents/style/index.ts
@@ -24,6 +24,7 @@ const genAppsLogoComponentsStyle: GenerateStyle<AppsLogoComponentsToken> = (
         width: 28,
         cursor: 'pointer',
         color: token?.layout?.colorTextAppListIcon,
+        borderRadius: token.borderRadius,
         '&:hover': {
           color: token?.layout?.colorTextAppListIconHover,
           backgroundColor: token?.layout?.colorBgAppListIconHover,

diff --git a/packages/layout/src/components/SiderMenu/style/menu.ts b/packages/layout/src/components/SiderMenu/style/menu.ts
@@ -67,7 +67,7 @@ const genProLayoutBaseMenuStyle: GenerateStyle<ProLayoutBaseMenuToken> = (
           height: '14px',
         },
       },
-      '& &-item-title': {
+      '&-item-title': {
         display: 'flex',
         flexDirection: 'row',
         alignItems: 'center',

diff --git a/packages/utils/src/compareVersions/coverToNewToken.ts b/packages/utils/src/compareVersions/coverToNewToken.ts
@@ -0,0 +1,42 @@
+import { compareVersions } from './index';
+import { getVersion } from './openVisibleCompatible';
+
+export function coverToNewToken(
+  token: Record<string, string | number | undefined>,
+) {
+  if (compareVersions(getVersion(), '5.6.0') < 0) return token;
+  const 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',
+    colorItemBgSelected: 'itemSelectedBg',
+    colorItemBgSelectedHorizontal: 'horizontalItemSelectedBg',
+    colorActiveBarWidth: 'activeBarWidth',
+    colorActiveBarHeight: 'activeBarHeight',
+    colorActiveBarBorderSize: 'activeBarBorderWidth',
+  };
+
+  const newToken = { ...token };
+  Object.keys(deprecatedTokens).forEach((key) => {
+    if (newToken[key] !== undefined) {
+      newToken[deprecatedTokens[key]] = newToken[key];
+      delete newToken[key];
+    }
+  });
+  return newToken;
+}
diff --git a/packages/utils/src/index.tsx b/packages/utils/src/index.tsx
@@ -23,6 +23,7 @@ import {
   useStyle,
 } from '@ant-design/pro-provider';
 import { compareVersions } from './compareVersions';
+import { coverToNewToken } from './compareVersions/coverToNewToken';
 import { menuOverlayCompatible } from './compareVersions/menuOverlayCompatible';
 import { openVisibleCompatible } from './compareVersions/openVisibleCompatible';
 import { useDebounceFn } from './hooks/useDebounceFn';
@@ -105,6 +106,7 @@ export {
   useDocumentTitle,
   isImg,
   omitBoolean,
+  coverToNewToken,
   isNil,
   merge,
   isDropdownValueType,