feat: migrate less to token for Skeleton (#42134)

* feat: migrate less to token for Message * docs: update docs * feat: add debug demo * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: update snapshots * Update docs/react/migrate-less-variables.en-US.md Co-authored-by: MadCcc <1075746765@qq.com> * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code --------- Co-authored-by: MadCcc <1075746765@qq.com>
ant-design · May 18, 2023 · 65d7a5b · 65d7a5b
1 parent cc16b93
commit 65d7a5b
Show file tree

Hide file tree

Showing 10 changed files with 182 additions and 36 deletions.
diff --git a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -111,6 +111,30 @@ exports[`renders components/skeleton/demo/complex.tsx extend context correctly 1
 </div>
 `;
 
+exports[`renders components/skeleton/demo/componentToken.tsx extend context correctly 1`] = `
+<div
+  class="ant-skeleton ant-skeleton-active"
+>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width: 38%;"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li />
+      <li />
+      <li
+        style="width: 61%;"
+      />
+    </ul>
+  </div>
+</div>
+`;
+
 exports[`renders components/skeleton/demo/element.tsx extend context correctly 1`] = `
 Array [
   <div

diff --git a/components/skeleton/__tests__/__snapshots__/demo.test.tsx.snap b/components/skeleton/__tests__/__snapshots__/demo.test.tsx.snap
@@ -111,6 +111,30 @@ exports[`renders components/skeleton/demo/complex.tsx correctly 1`] = `
 </div>
 `;
 
+exports[`renders components/skeleton/demo/componentToken.tsx correctly 1`] = `
+<div
+  class="ant-skeleton ant-skeleton-active"
+>
+  <div
+    class="ant-skeleton-content"
+  >
+    <h3
+      class="ant-skeleton-title"
+      style="width:38%"
+    />
+    <ul
+      class="ant-skeleton-paragraph"
+    >
+      <li />
+      <li />
+      <li
+        style="width:61%"
+      />
+    </ul>
+  </div>
+</div>
+`;
+
 exports[`renders components/skeleton/demo/element.tsx correctly 1`] = `
 Array [
   <div

diff --git a/components/skeleton/demo/componentToken.md b/components/skeleton/demo/componentToken.md
@@ -0,0 +1,7 @@
+## zh-CN
+
+自定义组件 Token。
+
+## en-US
+
+Custom component token.
diff --git a/components/skeleton/demo/componentToken.tsx b/components/skeleton/demo/componentToken.tsx
@@ -0,0 +1,23 @@
+import { ConfigProvider, Skeleton } from 'antd';
+import React from 'react';
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Skeleton: {
+          blockRadius: 30,
+          titleHeight: 50,
+          gradientFromColor: '#222',
+          gradientToColor: '#444',
+          paragraphMarginTop: 30,
+          paragraphLiHeight: 30,
+        },
+      },
+    }}
+  >
+    <Skeleton loading active />
+  </ConfigProvider>
+);
+
+export default App;
diff --git a/components/skeleton/index.en-US.md b/components/skeleton/index.en-US.md
@@ -24,6 +24,7 @@ Provide a placeholder while you wait for content to load, or to visualize conten
 <code src="./demo/element.tsx">Button/Avatar/Input/Image/Node</code>
 <code src="./demo/children.tsx">Contains sub component</code>
 <code src="./demo/list.tsx">List</code>
+<code src="./demo/componentToken.tsx" debug>Custom component token</code>
 
 ## API
 

diff --git a/components/skeleton/index.zh-CN.md b/components/skeleton/index.zh-CN.md
@@ -25,6 +25,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*VcjGQLSrYdcAAA
 <code src="./demo/element.tsx">按钮/头像/输入框/图像/自定义节点</code>
 <code src="./demo/children.tsx">包含子组件</code>
 <code src="./demo/list.tsx">列表</code>
+<code src="./demo/componentToken.tsx" debug>自定义组件 Token</code>
 
 ## API
 

diff --git a/components/skeleton/style/index.tsx b/components/skeleton/style/index.tsx
@@ -4,8 +4,16 @@ import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
 export type ComponentToken = {
+  /** @deprecated use gradientFromColor instead. */
   color: string;
+  /** @deprecated use gradientToColor instead. */
   colorGradientEnd: string;
+  gradientFromColor: string;
+  gradientToColor: string;
+  titleHeight: number;
+  blockRadius: number;
+  paragraphMarginTop: number;
+  paragraphLiHeight: number;
 };
 
 const skeletonClsLoading = new Keyframes(`ant-skeleton-loading`, {
@@ -25,10 +33,6 @@ interface SkeletonToken extends FullToken<'Skeleton'> {
   skeletonInputCls: string;
   skeletonImageCls: string;
   imageSizeBase: number;
-  skeletonTitleHeight: number;
-  skeletonBlockRadius: number;
-  skeletonParagraphLineHeight: number;
-  skeletonParagraphMarginTop: number;
   skeletonLoadingBackground: string;
   skeletonLoadingMotionDuration: string;
   borderRadius: number;
@@ -60,12 +64,13 @@ const genSkeletonElementInputSize = (size: number): CSSObject => ({
 });
 
 const genSkeletonElementAvatar = (token: SkeletonToken): CSSObject => {
-  const { skeletonAvatarCls, color, controlHeight, controlHeightLG, controlHeightSM } = token;
+  const { skeletonAvatarCls, gradientFromColor, controlHeight, controlHeightLG, controlHeightSM } =
+    token;
   return {
     [`${skeletonAvatarCls}`]: {
       display: 'inline-block',
       verticalAlign: 'top',
-      background: color,
+      background: gradientFromColor,
       ...genSkeletonElementAvatarSize(controlHeight),
     },
     [`${skeletonAvatarCls}${skeletonAvatarCls}-circle`]: {
@@ -87,13 +92,13 @@ const genSkeletonElementInput = (token: SkeletonToken): CSSObject => {
     skeletonInputCls,
     controlHeightLG,
     controlHeightSM,
-    color,
+    gradientFromColor,
   } = token;
   return {
     [`${skeletonInputCls}`]: {
       display: 'inline-block',
       verticalAlign: 'top',
-      background: color,
+      background: gradientFromColor,
       borderRadius: borderRadiusSM,
       ...genSkeletonElementInputSize(controlHeight),
     },
@@ -114,14 +119,14 @@ const genSkeletonElementImageSize = (size: number): CSSObject => ({
 });
 
 const genSkeletonElementImage = (token: SkeletonToken): CSSObject => {
-  const { skeletonImageCls, imageSizeBase, color, borderRadiusSM } = token;
+  const { skeletonImageCls, imageSizeBase, gradientFromColor, borderRadiusSM } = token;
   return {
     [`${skeletonImageCls}`]: {
       display: 'flex',
       alignItems: 'center',
       justifyContent: 'center',
       verticalAlign: 'top',
-      background: color,
+      background: gradientFromColor,
       borderRadius: borderRadiusSM,
       ...genSkeletonElementImageSize(imageSizeBase * 2),
       [`${skeletonImageCls}-path`]: {
@@ -172,13 +177,13 @@ const genSkeletonElementButton = (token: SkeletonToken): CSSObject => {
     controlHeight,
     controlHeightLG,
     controlHeightSM,
-    color,
+    gradientFromColor,
   } = token;
   return {
     [`${skeletonButtonCls}`]: {
       display: 'inline-block',
       verticalAlign: 'top',
-      background: color,
+      background: gradientFromColor,
       borderRadius: borderRadiusSM,
       width: controlHeight * 2,
       minWidth: controlHeight * 2,
@@ -211,15 +216,15 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
     controlHeight,
     controlHeightLG,
     controlHeightSM,
-    color,
+    gradientFromColor,
     padding,
     marginSM,
     borderRadius,
-    skeletonTitleHeight,
-    skeletonBlockRadius,
-    skeletonParagraphLineHeight,
+    titleHeight,
+    blockRadius,
+    paragraphLiHeight,
     controlHeightXS,
-    skeletonParagraphMarginTop,
+    paragraphMarginTop,
   } = token;
 
   return {
@@ -236,7 +241,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
         [`${skeletonAvatarCls}`]: {
           display: 'inline-block',
           verticalAlign: 'top',
-          background: color,
+          background: gradientFromColor,
           ...genSkeletonElementAvatarSize(controlHeight),
         },
         [`${skeletonAvatarCls}-circle`]: {
@@ -257,9 +262,9 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
         // Title
         [`${skeletonTitleCls}`]: {
           width: '100%',
-          height: skeletonTitleHeight,
-          background: color,
-          borderRadius: skeletonBlockRadius,
+          height: titleHeight,
+          background: gradientFromColor,
+          borderRadius: blockRadius,
           [`+ ${skeletonParagraphCls}`]: {
             marginBlockStart: controlHeightSM,
           },
@@ -270,10 +275,10 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
           padding: 0,
           '> li': {
             width: '100%',
-            height: skeletonParagraphLineHeight,
+            height: paragraphLiHeight,
             listStyle: 'none',
-            background: color,
-            borderRadius: skeletonBlockRadius,
+            background: gradientFromColor,
+            borderRadius: blockRadius,
             '+ li': {
               marginBlockStart: controlHeightXS,
             },
@@ -297,7 +302,7 @@ const genBaseStyle: GenerateStyle<SkeletonToken> = (token: SkeletonToken) => {
         marginBlockStart: marginSM,
 
         [`+ ${skeletonParagraphCls}`]: {
-          marginBlockStart: skeletonParagraphMarginTop,
+          marginBlockStart: paragraphMarginTop,
         },
       },
     },
@@ -353,22 +358,31 @@ export default genComponentStyleHook(
       skeletonInputCls: `${componentCls}-input`,
       skeletonImageCls: `${componentCls}-image`,
       imageSizeBase: token.controlHeight * 1.5,
-      skeletonTitleHeight: token.controlHeight / 2,
-      skeletonBlockRadius: token.borderRadiusSM,
-      skeletonParagraphLineHeight: token.controlHeight / 2,
-      skeletonParagraphMarginTop: token.marginLG + token.marginXXS,
       borderRadius: 100, // Large number to make capsule shape
-      skeletonLoadingBackground: `linear-gradient(90deg, ${token.color} 25%, ${token.colorGradientEnd} 37%, ${token.color} 63%)`,
+      skeletonLoadingBackground: `linear-gradient(90deg, ${token.gradientFromColor} 25%, ${token.gradientToColor} 37%, ${token.gradientFromColor} 63%)`,
       skeletonLoadingMotionDuration: '1.4s',
     });
     return [genBaseStyle(skeletonToken)];
   },
   (token) => {
     const { colorFillContent, colorFill } = token;
-
+    const gradientFromColor = colorFillContent;
+    const gradientToColor = colorFill;
     return {
-      color: colorFillContent,
-      colorGradientEnd: colorFill,
+      color: gradientFromColor,
+      colorGradientEnd: gradientToColor,
+      gradientFromColor,
+      gradientToColor,
+      titleHeight: token.controlHeight / 2,
+      blockRadius: token.borderRadiusSM,
+      paragraphMarginTop: token.marginLG + token.marginXXS,
+      paragraphLiHeight: token.controlHeight / 2,
     };
   },
+  {
+    deprecatedTokens: [
+      ['color', 'gradientFromColor'],
+      ['colorGradientEnd', 'gradientToColor'],
+    ],
+  },
 );
diff --git a/components/theme/util/genComponentStyleHook.ts b/components/theme/util/genComponentStyleHook.ts
@@ -1,6 +1,7 @@
 /* eslint-disable no-redeclare */
 import type { CSSInterpolation } from '@ant-design/cssinjs';
 import { useStyleRegister } from '@ant-design/cssinjs';
+import { warning } from 'rc-util';
 import { useContext } from 'react';
 import { ConfigContext } from '../../config-provider/context';
 import { genCommonStyle, genLinkStyle } from '../../style';
@@ -13,6 +14,13 @@ export type OverrideComponent = keyof OverrideTokenWithoutDerivative;
 export type GlobalTokenWithComponent<ComponentName extends OverrideComponent> = GlobalToken &
   ComponentTokenMap[ComponentName];
 
+type ComponentToken<ComponentName extends OverrideComponent> = Exclude<
+  OverrideTokenWithoutDerivative[ComponentName],
+  undefined
+>;
+type ComponentTokenKey<ComponentName extends OverrideComponent> =
+  keyof ComponentToken<ComponentName>;
+
 export interface StyleInfo<ComponentName extends OverrideComponent> {
   hashId: string;
   prefixCls: string;
@@ -43,6 +51,8 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
     | ((token: GlobalToken) => OverrideTokenWithoutDerivative[ComponentName]),
   options?: {
     resetStyle?: boolean;
+    // Deprecated token key map [["oldTokenKey", "newTokenKey"], ["oldTokenKey", "newTokenKey"]]
+    deprecatedTokens?: [ComponentTokenKey<ComponentName>, ComponentTokenKey<ComponentName>][];
   },
 ) {
   return (prefixCls: string): UseComponentStyleResult => {
@@ -72,7 +82,27 @@ export default function genComponentStyleHook<ComponentName extends OverrideComp
 
         const defaultComponentToken =
           typeof getDefaultToken === 'function' ? getDefaultToken(proxyToken) : getDefaultToken;
-        const mergedComponentToken = { ...defaultComponentToken, ...token[component] };
+        const customComponentToken = token[component] as ComponentToken<ComponentName>;
+        const mergedComponentToken = { ...defaultComponentToken, ...customComponentToken };
+
+        if (options?.deprecatedTokens) {
+          const { deprecatedTokens } = options;
+          deprecatedTokens.forEach(([oldTokenKey, newTokenKey]) => {
+            if (process.env.NODE_ENV !== 'production') {
+              warning(
+                !customComponentToken?.[oldTokenKey],
+                `The token '${String(oldTokenKey)}' of ${component} had deprecated, use '${String(
+                  newTokenKey,
+                )}' instead.`,
+              );
+            }
+
+            mergedComponentToken[newTokenKey] =
+              customComponentToken?.[newTokenKey] ||
+              customComponentToken?.[oldTokenKey] ||
+              defaultComponentToken[newTokenKey];
+          });
+        }
 
         const componentCls = `.${prefixCls}`;
         const mergedToken = mergeToken<

diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md
@@ -185,7 +185,18 @@ This document contains the correspondence between all the less variables related
 
 <!-- ### Select -->
 
-<!-- ### Skeleton -->
+### Skeleton
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@skeleton-block-radius` | `blockRadius` | - |
+| `@skeleton-title-height` | `titleHeight` | - |
+| `@skeleton-color` | `gradientFromColor` | - |
+| `@skeleton-to-color` | `gradientToColor` | - |
+| `@skeleton-paragraph-margin-top` | `paragraphMarginTop` | - |
+| `@skeleton-paragraph-li-height` | `paragraphLiHeight` | - |
+| `@skeleton-paragraph-li-margin-top` | - | 由于样式变化已废弃 |
 
 <!-- ### Slider -->