feat: migrate less to token for Segmented (#42136)

* feat: migrate less to token for Segmented * docs: update docs * feat: add debug demo * feat: optimize code * feat: optimize code * feat: optimize code * style: reset style * style: reset style * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code * feat: optimize code
2024-12-02 12:09:14 +08:00 · 2023-05-18 22:21:53 +08:00 · 2023-05-18 22:21:53 +08:00 · c878433e9a
commit c878433e9a
parent da1162ffb1
9 changed files with 260 additions and 48 deletions
--- a/components/segmented/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/segmented/tests/snapshots/demo-extend.test.ts.snap
@ -136,6 +136,88 @@ exports[`renders components/segmented/demo/block.tsx extend context correctly 1`
 </div>
 `;

+exports[`renders components/segmented/demo/componentToken.tsx extend context correctly 1`] = `
+<div
+  class="ant-segmented"
+>
+  <div
+    class="ant-segmented-group"
+  >
+    <label
+      class="ant-segmented-item ant-segmented-item-selected"
+    >
+      <input
+        checked=""
+        class="ant-segmented-item-input"
+        type="radio"
+      />
+      <div
+        class="ant-segmented-item-label"
+        title="Daily"
+      >
+        Daily
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        type="radio"
+      />
+      <div
+        class="ant-segmented-item-label"
+        title="Weekly"
+      >
+        Weekly
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        type="radio"
+      />
+      <div
+        class="ant-segmented-item-label"
+        title="Monthly"
+      >
+        Monthly
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        type="radio"
+      />
+      <div
+        class="ant-segmented-item-label"
+        title="Quarterly"
+      >
+        Quarterly
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        type="radio"
+      />
+      <div
+        class="ant-segmented-item-label"
+        title="Yearly"
+      >
+        Yearly
+      </div>
+    </label>
+  </div>
+</div>
+`;
+
 exports[`renders components/segmented/demo/controlled.tsx extend context correctly 1`] = `
 <div
  class="ant-segmented"
--- a/components/segmented/tests/snapshots/demo.test.ts.snap
+++ b/components/segmented/tests/snapshots/demo.test.ts.snap
@ -136,6 +136,88 @@ exports[`renders components/segmented/demo/block.tsx correctly 1`] = `
 </div>
 `;

+exports[`renders components/segmented/demo/componentToken.tsx correctly 1`] = `
+<div
+  class="ant-segmented"
+>
+  <div
+    class="ant-segmented-group"
+  >
+    <label
+      class="ant-segmented-item ant-segmented-item-selected"
+    >
+      <input
+        checked=""
+        class="ant-segmented-item-input"
+        type="radio"
+      />
+      <div
+        class="ant-segmented-item-label"
+        title="Daily"
+      >
+        Daily
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        type="radio"
+      />
+      <div
+        class="ant-segmented-item-label"
+        title="Weekly"
+      >
+        Weekly
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        type="radio"
+      />
+      <div
+        class="ant-segmented-item-label"
+        title="Monthly"
+      >
+        Monthly
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        type="radio"
+      />
+      <div
+        class="ant-segmented-item-label"
+        title="Quarterly"
+      >
+        Quarterly
+      </div>
+    </label>
+    <label
+      class="ant-segmented-item"
+    >
+      <input
+        class="ant-segmented-item-input"
+        type="radio"
+      />
+      <div
+        class="ant-segmented-item-label"
+        title="Yearly"
+      >
+        Yearly
+      </div>
+    </label>
+  </div>
+</div>
+`;
+
 exports[`renders components/segmented/demo/controlled.tsx correctly 1`] = `
 <div
  class="ant-segmented"
--- a/components/segmented/demo/componentToken.md
+++ b/components/segmented/demo/componentToken.md
@ -0,0 +1,7 @@
+## zh-CN
+
+自定义组件 Token。
+
+## en-US
+
+Custom component token.
--- a/components/segmented/demo/componentToken.tsx
+++ b/components/segmented/demo/componentToken.tsx
@ -0,0 +1,20 @@
+import { ConfigProvider, Segmented } from 'antd';
+import React from 'react';
+
+export default () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Segmented: {
+          itemColor: '#222',
+          itemHoverColor: '#333',
+          itemHoverBg: 'rgba(0, 0, 0, 0.06)',
+          itemSelectedBg: '#aaa',
+          itemActiveBg: '#ccc',
+        },
+      },
+    }}
+  >
+    <Segmented options={['Daily', 'Weekly', 'Monthly', 'Quarterly', 'Yearly']} />
+  </ConfigProvider>
+);
--- a/components/segmented/index.en-US.md
+++ b/components/segmented/index.en-US.md
@ -29,6 +29,7 @@ Segmented Controls. This component is available since `antd@4.20.0`.
 <code src="./demo/icon-only.tsx">With Icon only</code>
 <code src="./demo/controlled-two.tsx" debug>Controlled Synced mode</code>
 <code src="./demo/size-consistent.tsx" debug>Consistent height</code>
+<code src="./demo/componentToken.tsx" debug>Custom component token</code>

 ## API

--- a/components/segmented/index.zh-CN.md
+++ b/components/segmented/index.zh-CN.md
@ -30,6 +30,7 @@ demo:
 <code src="./demo/icon-only.tsx">只设置图标</code>
 <code src="./demo/controlled-two.tsx" debug>受控同步模式</code>
 <code src="./demo/size-consistent.tsx" debug>统一高度</code>
+<code src="./demo/componentToken.tsx" debug>自定义组件 Token</code>

 ## API

--- a/components/segmented/style/index.tsx
+++ b/components/segmented/style/index.tsx
@ -3,18 +3,19 @@ import { resetComponent, textEllipsis } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';

-export interface ComponentToken {}
+export interface ComponentToken {
+  itemColor: string;
+  itemHoverColor: string;
+  itemHoverBg: string;
+  itemActiveBg: string;
+  itemSelectedBg: string;
+}

 interface SegmentedToken extends FullToken<'Segmented'> {
+  padding: number;
+  bgColor: string;
  segmentedPaddingHorizontal: number;
  segmentedPaddingHorizontalSM: number;
-  segmentedContainerPadding: number;
-  labelColor: string;
-  labelColorHover: string;
-  bgColor: string;
-  bgColorHover: string;
-  bgColorActive: string;
-  bgColorSelected: string;
 }

 // ============================== Mixins ==============================
@ -29,7 +30,7 @@ function getItemDisabledStyle(cls: string, token: SegmentedToken): CSSObject {

 function getItemSelectedStyle(token: SegmentedToken): CSSObject {
  return {
-    backgroundColor: token.bgColorSelected,
+    backgroundColor: token.itemSelectedBg,
    boxShadow: token.boxShadowTertiary,
  };
 }
@ -49,8 +50,8 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
      ...resetComponent(token),

      display: 'inline-block',
-      padding: token.segmentedContainerPadding,
-      color: token.labelColor,
+      padding: token.padding,
+      color: token.itemColor,
      backgroundColor: token.bgColor,
      borderRadius: token.borderRadius,
      transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
@ -88,7 +89,7 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)

        '&-selected': {
          ...getItemSelectedStyle(token),
-          color: token.labelColorHover,
+          color: token.itemHoverColor,
        },

        '&::after': {
@ -106,21 +107,21 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
        },

        [`&:hover:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)`]: {
-          color: token.labelColorHover,
+          color: token.itemHoverColor,
          '&::after': {
-            backgroundColor: token.bgColorHover,
+            backgroundColor: token.itemHoverBg,
          },
        },
        [`&:active:not(${componentCls}-item-selected):not(${componentCls}-item-disabled)`]: {
-          color: token.labelColorHover,
+          color: token.itemHoverColor,
          '&::after': {
-            backgroundColor: token.bgColorActive,
+            backgroundColor: token.itemActiveBg,
          },
        },

        '&-label': {
-          minHeight: token.controlHeight - token.segmentedContainerPadding * 2,
-          lineHeight: `${token.controlHeight - token.segmentedContainerPadding * 2}px`,
+          minHeight: token.controlHeight - token.padding * 2,
+          lineHeight: `${token.controlHeight - token.padding * 2}px`,
          padding: `0 ${token.segmentedPaddingHorizontal}px`,
          ...segmentedTextEllipsisCss,
        },
@ -163,8 +164,8 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
      [`&${componentCls}-lg`]: {
        borderRadius: token.borderRadiusLG,
        [`${componentCls}-item-label`]: {
-          minHeight: token.controlHeightLG - token.segmentedContainerPadding * 2,
-          lineHeight: `${token.controlHeightLG - token.segmentedContainerPadding * 2}px`,
+          minHeight: token.controlHeightLG - token.padding * 2,
+          lineHeight: `${token.controlHeightLG - token.padding * 2}px`,
          padding: `0 ${token.segmentedPaddingHorizontal}px`,
          fontSize: token.fontSizeLG,
        },
@ -176,8 +177,8 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
      [`&${componentCls}-sm`]: {
        borderRadius: token.borderRadiusSM,
        [`${componentCls}-item-label`]: {
-          minHeight: token.controlHeightSM - token.segmentedContainerPadding * 2,
-          lineHeight: `${token.controlHeightSM - token.segmentedContainerPadding * 2}px`,
+          minHeight: token.controlHeightSM - token.padding * 2,
+          lineHeight: `${token.controlHeightSM - token.padding * 2}px`,
          padding: `0 ${token.segmentedPaddingHorizontalSM}px`,
        },
        [`${componentCls}-item, ${componentCls}-thumb`]: {
@ -199,28 +200,26 @@ const genSegmentedStyle: GenerateStyle<SegmentedToken> = (token: SegmentedToken)
 };

 // ============================== Export ==============================
-export default genComponentStyleHook('Segmented', (token) => {
-  const {
-    lineWidthBold,
-    lineWidth,
-    colorTextLabel,
-    colorText,
-    colorFillSecondary,
-    colorFill,
-    colorBgLayout,
-    colorBgElevated,
-  } = token;
+export default genComponentStyleHook(
+  'Segmented',
+  (token) => {
+    const { lineWidth, lineWidthBold } = token;

-  const segmentedToken = mergeToken<SegmentedToken>(token, {
-    segmentedPaddingHorizontal: token.controlPaddingHorizontal - lineWidth,
-    segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - lineWidth,
-    segmentedContainerPadding: lineWidthBold,
-    labelColor: colorTextLabel,
-    labelColorHover: colorText,
-    bgColor: colorBgLayout,
-    bgColorHover: colorFillSecondary,
-    bgColorActive: colorFill,
-    bgColorSelected: colorBgElevated,
-  });
-  return [genSegmentedStyle(segmentedToken)];
-});
+    const segmentedToken = mergeToken<SegmentedToken>(token, {
+      padding: lineWidthBold,
+      segmentedPaddingHorizontal: token.controlPaddingHorizontal - lineWidth,
+      segmentedPaddingHorizontalSM: token.controlPaddingHorizontalSM - lineWidth,
+    });
+    return [genSegmentedStyle(segmentedToken)];
+  },
+  (token) => {
+    const { colorTextLabel, colorText, colorFillSecondary, colorBgElevated, colorFill } = token;
+    return {
+      itemColor: colorTextLabel,
+      itemHoverColor: colorText,
+      itemHoverBg: colorFillSecondary,
+      itemSelectedBg: colorBgElevated,
+      itemActiveBg: colorFill,
+    };
+  },
+);
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@ -194,7 +194,17 @@ This document contains the correspondence between all the less variables related
 | `@result-subtitle-font-size` | `subtitleFontSize` | - |
 | `@result-extra-margin` | `extraMargin` | - |

-<!-- ### Segment -->
+### Segment
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@segmented-container-padding` | `padding` | - |
+| `@segmented-label-color` | `itemColor` | - |
+| `@segmented-hover-bg` | `itemHoverBg` | - |
+| `@segmented-bg` | - | Could be customized with `className` or `style` |
+| `@segmented-label-hover-color` | `itemHoverColor` | - |
+| `@segmented-selected-bg` | `itemSelectedBg` | - |

 <!-- ### Select -->

--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@ -192,7 +192,17 @@ title: Less 变量迁移 Design Token
 | `@result-subtitle-font-size` | `subtitleFontSize` | - |
 | `@result-extra-margin` | `extraMargin` | - |

-<!-- ### Segment 分段器 -->
+### Segment
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@segmented-container-padding` | `padding` | - |
+| `@segmented-label-color` | `itemColor` | - |
+| `@segmented-bg` | - | 可以用 `className` 或 `style` 自定义 |
+| `@segmented-hover-bg` | `itemHoverBg` | - |
+| `@segmented-label-hover-color` | `itemHoverColor` | - |
+| `@segmented-selected-bg` | `itemSelectedBg` | - |

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