feat: migrate less to token for Switch (#42192)

* feat: migrate less to token for Switch

* chore: add demo

* chore: code clean

* chore: update demo

* docs: update docs en

* chore: code clean

---------

Co-authored-by: MadCcc <1075746765@qq.com>

components/switch/__tests__/demo-extend.test.ts

@@ -1,3 +1,5 @@
 import { extendTest } from '../../../tests/shared/demoTest';
 
-extendTest('switch');
+extendTest('switch', {
+  skip: ['component-token.tsx'],
+});

components/switch/__tests__/demo.test.ts

@@ -1,3 +1,5 @@
 import demoTest from '../../../tests/shared/demoTest';
 
-demoTest('switch');
+demoTest('switch', {
+  skip: ['component-token.tsx'],
+});

components/switch/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+自定义组件 Token。
+
+## en-US
+
+Custom component token.

components/switch/demo/component-token.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { ConfigProvider, Space, Switch } from 'antd';
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Switch: {
+          trackHeight: 14,
+          trackMinWidth: 32,
+          // opacityLoading: 0.1,
+          colorPrimary: 'rgb(25, 118, 210, 0.5)',
+          trackPadding: -3,
+          handleSize: 20,
+          handleBg: 'rgb(25, 118, 210)',
+          handleShadow:
+            'rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px',
+          // innerMinMargin: 4,
+          // innerMaxMargin: 8,
+        },
+      },
+    }}
+  >
+    <Space>
+      <Switch defaultChecked />
+    </Space>
+  </ConfigProvider>
+);
+
+export default App;

components/switch/index.en-US.md

@@ -23,6 +23,7 @@ Switching Selector.
 <code src="./demo/text.tsx">Text & icon</code>
 <code src="./demo/size.tsx">Two sizes</code>
 <code src="./demo/loading.tsx">Loading</code>
+<code src="./demo/component-token.tsx" debug>Custom component token</code>
 
 ## API
 

components/switch/index.zh-CN.md

@@ -24,6 +24,7 @@ demo:
 <code src="./demo/text.tsx">文字和图标</code>
 <code src="./demo/size.tsx">两种大小</code>
 <code src="./demo/loading.tsx">加载中</code>
+<code src="./demo/component-token.tsx" debug>自定义组件 Token</code>
 
 ## API
 

components/switch/style/index.ts

@@ -4,89 +4,152 @@ import { genFocusStyle, resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
 
+export interface ComponentToken {
+  /**
+   *  @desc 开关高度
+   *  @descEN Height of Switch
+   */
+  trackHeight: number;
+  /**
+   * @desc 小号开关高度
+   * @descEN Height of small Switch
+   */
+  trackHeightSM: number;
+  /**
+   * @desc 开关最小宽度
+   * @descEN Minimum width of Switch
+   */
+  trackMinWidth: number;
+  /**
+   * @desc 小号开关最小宽度
+   * @descEN Minimum width of small Switch
+   */
+  trackMinWidthSM: number;
+  /**
+   * @desc 开关内边距
+   * @descEN Padding of Switch
+   */
+  trackPadding: number;
+  /**
+   * @desc 开关把手背景色
+   * @descEN Background color of Switch handle
+   */
+  handleBg: string;
+  /**
+   * @desc 开关把手阴影
+   * @descEN Shadow of Switch handle
+   */
+  handleShadow: string;
+  /**
+   * @desc 开关把手大小
+   * @descEN Size of Switch handle
+   */
+  handleSize: number;
+  /**
+   * @desc 小号开关把手大小
+   * @descEN Size of small Switch handle
+   */
+  handleSizeSM: number;
+  /**
+   * @desc 内容区域最小边距
+   * @descEN Minimum margin of content area
+   */
+  innerMinMargin: number;
+  /**
+   * @desc 内容区域最大边距
+   * @descEN Maximum margin of content area
+   */
+  innerMaxMargin: number;
+  /**
+   * @desc 小号开关内容区域最小边距
+   * @descEN Minimum margin of content area of small Switch
+   */
+  innerMinMarginSM: number;
+  /**
+   * @desc 小号开关内容区域最大边距
+   * @descEN Maximum margin of content area of small Switch
+   */
+  innerMaxMarginSM: number;
+}
+
 interface SwitchToken extends FullToken<'Switch'> {
-  switchMinWidth: number;
-  switchHeight: number;
   switchDuration: string;
   switchColor: string;
   switchDisabledOpacity: number;
-  switchInnerMarginMin: number;
-  switchInnerMarginMax: number;
-  switchPadding: number;
-  switchPinSize: number;
-  switchBg: string;
-  switchMinWidthSM: number;
-  switchHeightSM: number;
-  switchInnerMarginMinSM: number;
-  switchInnerMarginMaxSM: number;
-  switchPinSizeSM: number;
-  switchHandleShadow: string;
   switchLoadingIconSize: number;
   switchLoadingIconColor: string;
   switchHandleActiveInset: string;
 }
 
 const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
-  const { componentCls } = token;
+  const {
+    componentCls,
+    trackHeightSM,
+    trackPadding,
+    trackMinWidthSM,
+    innerMinMarginSM,
+    innerMaxMarginSM,
+    handleSizeSM,
+  } = token;
   const switchInnerCls = `${componentCls}-inner`;
 
   return {
     [componentCls]: {
       [`&${componentCls}-small`]: {
-        minWidth: token.switchMinWidthSM,
+        minWidth: trackMinWidthSM,
-        height: token.switchHeightSM,
+        height: trackHeightSM,
-        lineHeight: `${token.switchHeightSM}px`,
+        lineHeight: `${trackHeightSM}px`,
 
         [`${componentCls}-inner`]: {
-          paddingInlineStart: token.switchInnerMarginMaxSM,
+          paddingInlineStart: innerMaxMarginSM,
-          paddingInlineEnd: token.switchInnerMarginMinSM,
+          paddingInlineEnd: innerMinMarginSM,
           [`${switchInnerCls}-checked`]: {
-            marginInlineStart: `calc(-100% + ${
+            marginInlineStart: `calc(-100% + ${handleSizeSM + trackPadding * 2}px - ${
-              token.switchPinSizeSM + token.switchPadding * 2
+              innerMaxMarginSM * 2
-            }px - ${token.switchInnerMarginMaxSM * 2}px)`,
+            }px)`,
-            marginInlineEnd: `calc(100% - ${token.switchPinSizeSM + token.switchPadding * 2}px + ${
+            marginInlineEnd: `calc(100% - ${handleSizeSM + trackPadding * 2}px + ${
-              token.switchInnerMarginMaxSM * 2
+              innerMaxMarginSM * 2
             }px)`,
           },
 
           [`${switchInnerCls}-unchecked`]: {
-            marginTop: -token.switchHeightSM,
+            marginTop: -trackHeightSM,
             marginInlineStart: 0,
             marginInlineEnd: 0,
           },
         },
 
         [`${componentCls}-handle`]: {
-          width: token.switchPinSizeSM,
+          width: handleSizeSM,
-          height: token.switchPinSizeSM,
+          height: handleSizeSM,
         },
 
         [`${componentCls}-loading-icon`]: {
-          top: (token.switchPinSizeSM - token.switchLoadingIconSize) / 2,
+          top: (handleSizeSM - token.switchLoadingIconSize) / 2,
           fontSize: token.switchLoadingIconSize,
         },
 
         [`&${componentCls}-checked`]: {
           [`${componentCls}-inner`]: {
-            paddingInlineStart: token.switchInnerMarginMinSM,
+            paddingInlineStart: innerMinMarginSM,
-            paddingInlineEnd: token.switchInnerMarginMaxSM,
+            paddingInlineEnd: innerMaxMarginSM,
             [`${switchInnerCls}-checked`]: {
               marginInlineStart: 0,
               marginInlineEnd: 0,
             },
 
             [`${switchInnerCls}-unchecked`]: {
-              marginInlineStart: `calc(100% - ${
+              marginInlineStart: `calc(100% - ${handleSizeSM + trackPadding * 2}px + ${
-                token.switchPinSizeSM + token.switchPadding * 2
+                innerMaxMarginSM * 2
-              }px + ${token.switchInnerMarginMaxSM * 2}px)`,
+              }px)`,
-              marginInlineEnd: `calc(-100% + ${
+              marginInlineEnd: `calc(-100% + ${handleSizeSM + trackPadding * 2}px - ${
-                token.switchPinSizeSM + token.switchPadding * 2
+                innerMaxMarginSM * 2
-              }px - ${token.switchInnerMarginMaxSM * 2}px)`,
+              }px)`,
             },
           },
 
           [`${componentCls}-handle`]: {
-            insetInlineStart: `calc(100% - ${token.switchPinSizeSM + token.switchPadding}px)`,
+            insetInlineStart: `calc(100% - ${handleSizeSM + trackPadding}px)`,
           },
         },
 
@@ -111,13 +174,13 @@ const genSwitchSmallStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
 };
 
 const genSwitchLoadingStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
-  const { componentCls } = token;
+  const { componentCls, handleSize } = token;
 
   return {
     [componentCls]: {
       [`${componentCls}-loading-icon${token.iconCls}`]: {
         position: 'relative',
-        top: (token.switchPinSize - token.fontSize) / 2,
+        top: (handleSize - token.fontSize) / 2,
         color: token.switchLoadingIconColor,
         verticalAlign: 'top',
       },
@@ -130,17 +193,17 @@ const genSwitchLoadingStyle: GenerateStyle<SwitchToken, CSSObject> = (token) =>
 };
 
 const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
-  const { componentCls, motion } = token;
+  const { componentCls, motion, trackPadding, handleBg, handleShadow, handleSize } = token;
   const switchHandleCls = `${componentCls}-handle`;
 
   return {
     [componentCls]: {
       [switchHandleCls]: {
         position: 'absolute',
-        top: token.switchPadding,
+        top: trackPadding,
-        insetInlineStart: token.switchPadding,
+        insetInlineStart: trackPadding,
-        width: token.switchPinSize,
+        width: handleSize,
-        height: token.switchPinSize,
+        height: handleSize,
         transition: `all ${token.switchDuration} ease-in-out`,
 
         '&::before': {
@@ -149,16 +212,16 @@ const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
           insetInlineEnd: 0,
           bottom: 0,
           insetInlineStart: 0,
-          backgroundColor: token.colorWhite,
+          backgroundColor: handleBg,
-          borderRadius: token.switchPinSize / 2,
+          borderRadius: handleSize / 2,
-          boxShadow: token.switchHandleShadow,
+          boxShadow: handleShadow,
           transition: `all ${token.switchDuration} ease-in-out`,
           content: '""',
         },
       },
 
       [`&${componentCls}-checked ${switchHandleCls}`]: {
-        insetInlineStart: `calc(100% - ${token.switchPinSize + token.switchPadding}px)`,
+        insetInlineStart: `calc(100% - ${handleSize + trackPadding}px)`,
       },
 
       [`&:not(${componentCls}-disabled):active`]: motion
@@ -180,7 +243,8 @@ const genSwitchHandleStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
 };
 
 const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
-  const { componentCls } = token;
+  const { componentCls, trackHeight, trackPadding, innerMinMargin, innerMaxMargin, handleSize } =
+    token;
   const switchInnerCls = `${componentCls}-inner`;
 
   return {
@@ -190,8 +254,8 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
         overflow: 'hidden',
         borderRadius: 100,
         height: '100%',
-        paddingInlineStart: token.switchInnerMarginMax,
+        paddingInlineStart: innerMaxMargin,
-        paddingInlineEnd: token.switchInnerMarginMin,
+        paddingInlineEnd: innerMinMargin,
         transition: `padding-inline-start ${token.switchDuration} ease-in-out, padding-inline-end ${token.switchDuration} ease-in-out`,
 
         [`${switchInnerCls}-checked, ${switchInnerCls}-unchecked`]: {
@@ -203,35 +267,35 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
         },
 
         [`${switchInnerCls}-checked`]: {
-          marginInlineStart: `calc(-100% + ${token.switchPinSize + token.switchPadding * 2}px - ${
+          marginInlineStart: `calc(-100% + ${handleSize + trackPadding * 2}px - ${
-            token.switchInnerMarginMax * 2
+            innerMaxMargin * 2
           }px)`,
-          marginInlineEnd: `calc(100% - ${token.switchPinSize + token.switchPadding * 2}px + ${
+          marginInlineEnd: `calc(100% - ${handleSize + trackPadding * 2}px + ${
-            token.switchInnerMarginMax * 2
+            innerMaxMargin * 2
           }px)`,
         },
 
         [`${switchInnerCls}-unchecked`]: {
-          marginTop: -token.switchHeight,
+          marginTop: -trackHeight,
           marginInlineStart: 0,
           marginInlineEnd: 0,
         },
       },
 
       [`&${componentCls}-checked ${switchInnerCls}`]: {
-        paddingInlineStart: token.switchInnerMarginMin,
+        paddingInlineStart: innerMinMargin,
-        paddingInlineEnd: token.switchInnerMarginMax,
+        paddingInlineEnd: innerMaxMargin,
         [`${switchInnerCls}-checked`]: {
           marginInlineStart: 0,
           marginInlineEnd: 0,
         },
 
         [`${switchInnerCls}-unchecked`]: {
-          marginInlineStart: `calc(100% - ${token.switchPinSize + token.switchPadding * 2}px + ${
+          marginInlineStart: `calc(100% - ${handleSize + trackPadding * 2}px + ${
-            token.switchInnerMarginMax * 2
+            innerMaxMargin * 2
           }px)`,
-          marginInlineEnd: `calc(-100% + ${token.switchPinSize + token.switchPadding * 2}px - ${
+          marginInlineEnd: `calc(-100% + ${handleSize + trackPadding * 2}px - ${
-            token.switchInnerMarginMax * 2
+            innerMaxMargin * 2
           }px)`,
         },
       },
@@ -239,15 +303,15 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
       [`&:not(${componentCls}-disabled):active`]: {
         [`&:not(${componentCls}-checked) ${switchInnerCls}`]: {
           [`${switchInnerCls}-unchecked`]: {
-            marginInlineStart: token.switchPadding * 2,
+            marginInlineStart: trackPadding * 2,
-            marginInlineEnd: -token.switchPadding * 2,
+            marginInlineEnd: -trackPadding * 2,
           },
         },
 
         [`&${componentCls}-checked ${switchInnerCls}`]: {
           [`${switchInnerCls}-checked`]: {
-            marginInlineStart: -token.switchPadding * 2,
+            marginInlineStart: -trackPadding * 2,
-            marginInlineEnd: token.switchPadding * 2,
+            marginInlineEnd: trackPadding * 2,
           },
         },
       },
@@ -256,7 +320,7 @@ const genSwitchInnerStyle: GenerateStyle<SwitchToken, CSSObject> = (token) => {
 };
 
 const genSwitchStyle = (token: SwitchToken): CSSObject => {
-  const { componentCls } = token;
+  const { componentCls, trackHeight, trackMinWidth } = token;
 
   return {
     [componentCls]: {
@@ -265,9 +329,9 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
       position: 'relative',
       display: 'inline-block',
       boxSizing: 'border-box',
-      minWidth: token.switchMinWidth,
+      minWidth: trackMinWidth,
-      height: token.switchHeight,
+      height: trackHeight,
-      lineHeight: `${token.switchHeight}px`,
+      lineHeight: `${trackHeight}px`,
       verticalAlign: 'middle',
       background: token.colorTextQuaternary,
       border: '0',
@@ -309,48 +373,57 @@ const genSwitchStyle = (token: SwitchToken): CSSObject => {
 };
 
 // ============================== Export ==============================
-export default genComponentStyleHook('Switch', (token) => {
+export default genComponentStyleHook(
-  const switchHeight = token.fontSize * token.lineHeight;
+  'Switch',
-  const switchHeightSM = token.controlHeight / 2;
+  (token) => {
-  const switchPadding = 2; // This is magic
+    const switchToken = mergeToken<SwitchToken>(token, {
-  const switchPinSize = switchHeight - switchPadding * 2;
+      switchDuration: token.motionDurationMid,
-  const switchPinSizeSM = switchHeightSM - switchPadding * 2;
+      switchColor: token.colorPrimary,
+      switchDisabledOpacity: token.opacityLoading,
+      switchLoadingIconSize: token.fontSizeIcon * 0.75,
+      switchLoadingIconColor: `rgba(0, 0, 0, ${token.opacityLoading})`,
+      switchHandleActiveInset: '-30%',
+    });
 
-  const switchToken = mergeToken<SwitchToken>(token, {
+    return [
-    switchMinWidth: switchPinSize * 2 + switchPadding * 4,
+      genSwitchStyle(switchToken),
-    switchHeight,
-    switchDuration: token.motionDurationMid,
-    switchColor: token.colorPrimary,
-    switchDisabledOpacity: token.opacityLoading,
-    switchInnerMarginMin: switchPinSize / 2,
-    switchInnerMarginMax: switchPinSize + switchPadding + switchPadding * 2,
-    switchPadding,
-    switchPinSize,
-    switchBg: token.colorBgContainer,
-    switchMinWidthSM: switchPinSizeSM * 2 + switchPadding * 2,
-    switchHeightSM,
-    switchInnerMarginMinSM: switchPinSizeSM / 2,
-    switchInnerMarginMaxSM: switchPinSizeSM + switchPadding + switchPadding * 2,
-    switchPinSizeSM,
-    switchHandleShadow: `0 2px 4px 0 ${new TinyColor('#00230b').setAlpha(0.2).toRgbString()}`,
-    switchLoadingIconSize: token.fontSizeIcon * 0.75,
-    switchLoadingIconColor: `rgba(0, 0, 0, ${token.opacityLoading})`,
-    switchHandleActiveInset: '-30%',
-  });
 
-  return [
+      // inner style
-    genSwitchStyle(switchToken),
+      genSwitchInnerStyle(switchToken),
 
-    // inner style
+      // handle style
-    genSwitchInnerStyle(switchToken),
+      genSwitchHandleStyle(switchToken),
 
-    // handle style
+      // loading style
-    genSwitchHandleStyle(switchToken),
+      genSwitchLoadingStyle(switchToken),
 
-    // loading style
+      // small style
-    genSwitchLoadingStyle(switchToken),
+      genSwitchSmallStyle(switchToken),
+    ];
+  },
+  (token) => {
+    const { fontSize, lineHeight, controlHeight, colorWhite } = token;
 
-    // small style
+    const height = fontSize * lineHeight;
-    genSwitchSmallStyle(switchToken),
+    const heightSM = controlHeight / 2;
-  ];
+    const padding = 2; // Fixed value
-});
+    const handleSize = height - padding * 2;
+    const handleSizeSM = heightSM - padding * 2;
+
+    return {
+      trackHeight: height,
+      trackHeightSM: heightSM,
+      trackMinWidth: handleSize * 2 + padding * 4,
+      trackMinWidthSM: handleSizeSM * 2 + padding * 2,
+      trackPadding: padding, // Fixed value
+      handleBg: colorWhite,
+      handleSize,
+      handleSizeSM,
+      handleShadow: `0 2px 4px 0 ${new TinyColor('#00230b').setAlpha(0.2).toRgbString()}`,
+      innerMinMargin: handleSize / 2,
+      innerMaxMargin: handleSize + padding + padding * 2,
+      innerMinMarginSM: handleSizeSM / 2,
+      innerMaxMarginSM: handleSizeSM + padding + padding * 2,
+    };
+  },
+);

components/theme/interface/components.ts

@@ -46,6 +46,7 @@ import type { ComponentToken as SpaceComponentToken } from '../../space/style';
 import type { ComponentToken as SpinComponentToken } from '../../spin/style';
 import type { ComponentToken as StatisticComponentToken } from '../../statistic/style';
 import type { ComponentToken as StepsComponentToken } from '../../steps/style';
+import type { ComponentToken as SwitchComponentToken } from '../../switch/style';
 import type { ComponentToken as TableComponentToken } from '../../table/style';
 import type { ComponentToken as TabsComponentToken } from '../../tabs/style';
 import type { ComponentToken as TagComponentToken } from '../../tag/style';
@@ -99,7 +100,7 @@ export interface ComponentTokenMap {
   Slider?: SliderComponentToken;
   Spin?: SpinComponentToken;
   Statistic?: StatisticComponentToken;
-  Switch?: {};
+  Switch?: SwitchComponentToken;
   Tag?: TagComponentToken;
   Tree?: {};
   TreeSelect?: {};

docs/react/migrate-less-variables.en-US.md

@@ -630,7 +630,24 @@ export default App;
 | `@steps-vertical-tail-width` | - | Deprecated |
 | `@steps-vertical-tail-width-sm` | - | Deprecated |
 
-<!-- ### Switch -->
+### Switch
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@switch-height` | `trackHeight` | - |
+| `@switch-sm-height` | `trackHeightSM` | - |
+| `@switch-min-width` | `trackMinWidth` | - |
+| `@switch-sm-min-width` | `trackMinWidthSM` | - |
+| `@switch-disabled-opacity` | `opacityLoading` | Global Token |
+| `@switch-color` | `colorPrimary` | Global Token |
+| `@switch-bg` | `handleBg` | - |
+| `@switch-shadow-color` | `handleShadow` | Control `box-shadow`, not only shadow color |
+| `@switch-padding` | `trackPadding` | - |
+| `@switch-inner-margin-min` | `innerMinMargin` | - |
+| `@switch-inner-margin-max` | `innerMaxMargin` | - |
+| `@switch-sm-inner-margin-min` | `innerMinMarginSM` | - |
+| `@switch-sm-inner-margin-max` | `innerMaxMarginSM` | - |
 
 ### Table
 

docs/react/migrate-less-variables.zh-CN.md

@@ -628,7 +628,24 @@ Mentions 提及
 | `@steps-vertical-tail-width` | - | 已废弃 |
 | `@steps-vertical-tail-width-sm` | - | 已废弃 |
 
-<!-- ### Switch 开关 -->
+### Switch 开关
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@switch-height` | `trackHeight` | - |
+| `@switch-sm-height` | `trackHeightSM` | - |
+| `@switch-min-width` | `trackMinWidth` | - |
+| `@switch-sm-min-width` | `trackMinWidthSM` | - |
+| `@switch-disabled-opacity` | `opacityLoading` | 全局 Token |
+| `@switch-color` | `colorPrimary` | 全局 Token |
+| `@switch-bg` | `handleBg` | - |
+| `@switch-shadow-color` | `handleShadow` | 控制把手阴影，不仅是颜色 |
+| `@switch-padding` | `trackPadding` | - |
+| `@switch-inner-margin-min` | `innerMinMargin` | - |
+| `@switch-inner-margin-max` | `innerMaxMargin` | - |
+| `@switch-sm-inner-margin-min` | `innerMinMarginSM` | - |
+| `@switch-sm-inner-margin-max` | `innerMaxMarginSM` | - |
 
 ### Table 表格