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>
2 years ago · 65d7a5b943
10 changed files with 182 additions and 36 deletions
--- 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
--- 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
--- a/components/skeleton/demo/componentToken.md
+++ b/components/skeleton/demo/componentToken.md
@ -0,0 +1,7 @@
+## zh-CN
+
+自定义组件 Token。
+
+## en-US
+
+Custom component token.
--- 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;
--- 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

--- 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

--- 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'],
+    ],
+  },
 );
--- 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<
--- 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 -->

--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@ -185,7 +185,18 @@ title: Less 变量迁移 Design Token

 <!-- ### Select 选择器 -->

-<!-- ### Skeleton 骨架屏 -->
+### Skeleton 骨架屏
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@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 滑动输入条 -->