feat: Spin token (ant-design#44334)

* feat: Spin token * chore: code clean
ammar-knowledge · Aug 22, 2023 · 820a921 · 820a921
1 parent d1d3b57
commit 820a921
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 28 deletions.
diff --git a/components/spin/style/index.tsx b/components/spin/style/index.tsx
@@ -10,13 +10,25 @@ export interface ComponentToken {
    * @descEN Height of content area
    */
   contentHeight: number;
+  /**
+   * @desc 加载图标尺寸
+   * @descEN Loading icon size
+   */
+  dotSize: number;
+  /**
+   * @desc 小号加载图标尺寸
+   * @descEN Small loading icon size
+   */
+  dotSizeSM: number;
+  /**
+   * @desc 大号加载图标尺寸
+   * @descEN Large loading icon size
+   */
+  dotSizeLG: number;
 }
 
 interface SpinToken extends FullToken<'Spin'> {
   spinDotDefault: string;
-  spinDotSize: number;
-  spinDotSizeSM: number;
-  spinDotSizeLG: number;
 }
 
 const antSpinMove = new Keyframes('antSpinMove', {
@@ -61,43 +73,43 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
           position: 'absolute',
           top: '50%',
           insetInlineStart: '50%',
-          margin: -token.spinDotSize / 2,
+          margin: -token.dotSize / 2,
         },
 
         [`${token.componentCls}-text`]: {
           position: 'absolute',
           top: '50%',
           width: '100%',
-          paddingTop: (token.spinDotSize - token.fontSize) / 2 + 2,
+          paddingTop: (token.dotSize - token.fontSize) / 2 + 2,
           textShadow: `0 1px 2px ${token.colorBgContainer}`, // FIXME: shadow
           fontSize: token.fontSize,
         },
 
         [`&${token.componentCls}-show-text ${token.componentCls}-dot`]: {
-          marginTop: -(token.spinDotSize / 2) - 10,
+          marginTop: -(token.dotSize / 2) - 10,
         },
 
         '&-sm': {
           [`${token.componentCls}-dot`]: {
-            margin: -token.spinDotSizeSM / 2,
+            margin: -token.dotSizeSM / 2,
           },
           [`${token.componentCls}-text`]: {
-            paddingTop: (token.spinDotSizeSM - token.fontSize) / 2 + 2,
+            paddingTop: (token.dotSizeSM - token.fontSize) / 2 + 2,
           },
           [`&${token.componentCls}-show-text ${token.componentCls}-dot`]: {
-            marginTop: -(token.spinDotSizeSM / 2) - 10,
+            marginTop: -(token.dotSizeSM / 2) - 10,
           },
         },
 
         '&-lg': {
           [`${token.componentCls}-dot`]: {
-            margin: -(token.spinDotSizeLG / 2),
+            margin: -(token.dotSizeLG / 2),
           },
           [`${token.componentCls}-text`]: {
-            paddingTop: (token.spinDotSizeLG - token.fontSize) / 2 + 2,
+            paddingTop: (token.dotSizeLG - token.fontSize) / 2 + 2,
           },
           [`&${token.componentCls}-show-text ${token.componentCls}-dot`]: {
-            marginTop: -(token.spinDotSizeLG / 2) - 10,
+            marginTop: -(token.dotSizeLG / 2) - 10,
           },
         },
       },
@@ -147,15 +159,15 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
     [`${token.componentCls}-dot`]: {
       position: 'relative',
       display: 'inline-block',
-      fontSize: token.spinDotSize,
+      fontSize: token.dotSize,
       width: '1em',
       height: '1em',
 
       '&-item': {
         position: 'absolute',
         display: 'block',
-        width: (token.spinDotSize - token.marginXXS / 2) / 2,
-        height: (token.spinDotSize - token.marginXXS / 2) / 2,
+        width: (token.dotSize - token.marginXXS / 2) / 2,
+        height: (token.dotSize - token.marginXXS / 2) / 2,
         backgroundColor: token.colorPrimary,
         borderRadius: '100%',
         transform: 'scale(0.75)',
@@ -205,21 +217,21 @@ const genSpinStyle: GenerateStyle<SpinToken> = (token: SpinToken): CSSObject =>
 
     // small
     [`&-sm ${token.componentCls}-dot`]: {
-      fontSize: token.spinDotSizeSM,
+      fontSize: token.dotSizeSM,
 
       i: {
-        width: (token.spinDotSizeSM - token.marginXXS / 2) / 2,
-        height: (token.spinDotSizeSM - token.marginXXS / 2) / 2,
+        width: (token.dotSizeSM - token.marginXXS / 2) / 2,
+        height: (token.dotSizeSM - token.marginXXS / 2) / 2,
       },
     },
 
     // large
     [`&-lg ${token.componentCls}-dot`]: {
-      fontSize: token.spinDotSizeLG,
+      fontSize: token.dotSizeLG,
 
       i: {
-        width: (token.spinDotSizeLG - token.marginXXS) / 2,
-        height: (token.spinDotSizeLG - token.marginXXS) / 2,
+        width: (token.dotSizeLG - token.marginXXS) / 2,
+        height: (token.dotSizeLG - token.marginXXS) / 2,
       },
     },
 
@@ -235,13 +247,13 @@ export default genComponentStyleHook(
   (token) => {
     const spinToken = mergeToken<SpinToken>(token, {
       spinDotDefault: token.colorTextDescription,
-      spinDotSize: token.controlHeightLG / 2,
-      spinDotSizeSM: token.controlHeightLG * 0.35,
-      spinDotSizeLG: token.controlHeight,
     });
     return [genSpinStyle(spinToken)];
   },
-  {
+  (token) => ({
     contentHeight: 400,
-  },
+    dotSize: token.controlHeightLG / 2,
+    dotSizeSM: token.controlHeightLG * 0.35,
+    dotSizeLG: token.controlHeight,
+  }),
 );
diff --git a/docs/react/migrate-less-variables.en-US.md b/docs/react/migrate-less-variables.en-US.md
@@ -14,8 +14,8 @@ This document contains the correspondence between all the less variables related
 We could configure global token and component token for each component through the `theme` property of ConfigProvider.
 
 ```tsx
-import { Checkbox, ConfigProvider, Radio } from 'antd';
 import React from 'react';
+import { Checkbox, ConfigProvider, Radio } from 'antd';
 
 const App: React.FC = () => (
   <ConfigProvider
@@ -670,6 +670,15 @@ export default App;
 | `@slider-disabled-color` | `trackBgDisabled` | - |
 | `@slider-disabled-background-color` | - | Deprecated |
 
+### Spin
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@spin-dot-size-sm` | `dotSizeSM` | - |
+| `@spin-dot-size` | `dotSize` | - |
+| `@spin-dot-size-lg` | `dotSizeLG` | - |
+
 ### Statistic
 
 <!-- prettier-ignore -->

diff --git a/docs/react/migrate-less-variables.zh-CN.md b/docs/react/migrate-less-variables.zh-CN.md
@@ -14,8 +14,8 @@ title: 从 Less 变量到 Design Token
 通过 ConfigProvider 的 `theme` 属性，我们可以对每一个组件单独配置全局 Token 和组件 Token
 
 ```tsx
-import { Checkbox, ConfigProvider, Radio } from 'antd';
 import React from 'react';
+import { Checkbox, ConfigProvider, Radio } from 'antd';
 
 const App: React.FC = () => (
   <ConfigProvider
@@ -668,6 +668,15 @@ Mentions 提及
 | `@slider-disabled-color` | `trackBgDisabled` | - |
 | `@slider-disabled-background-color` | - | 已废弃 |
 
+### Spin 加载中
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@spin-dot-size-sm` | `dotSizeSM` | - |
+| `@spin-dot-size` | `dotSize` | - |
+| `@spin-dot-size-lg` | `dotSizeLG` | - |
+
 ### Statistic 统计数值
 
 <!-- prettier-ignore -->