feat: less to component token for Timeline (#42491)

* feat: css variables to token * chore: rename token * feat: add color token * feat: add debug demo * chore: update snapshot * chore: rename demo * chore: rename token * chore: recover tailWidth * chore: rename token demo filename * chore: update snap * fix: CN-docs * fix: US-docs * chore: rename demo --------- Co-authored-by: zhangjianxiong <zhangjx@tsintergy.com>
2024-11-27 20:49:53 +08:00 · 2023-05-22 09:36:14 +08:00 · 2023-05-22 09:36:14 +08:00 · 1cb1a7ae58
commit 1cb1a7ae58
parent 6e71faa172
9 changed files with 250 additions and 43 deletions
--- a/components/timeline/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/timeline/tests/snapshots/demo-extend.test.ts.snap
@ -379,6 +379,73 @@ exports[`renders components/timeline/demo/color.tsx extend context correctly 1`]
 </ul>
 `;

+exports[`renders components/timeline/demo/component-token.tsx extend context correctly 1`] = `
+<ul
+  class="ant-timeline"
+>
+  <li
+    class="ant-timeline-item"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Create a services site 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Solve initial network problems 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Technical testing 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-last"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Network problems being solved 2015-09-01
+    </div>
+  </li>
+</ul>
+`;
+
 exports[`renders components/timeline/demo/custom.tsx extend context correctly 1`] = `
 <ul
  class="ant-timeline"
--- a/components/timeline/tests/snapshots/demo.test.ts.snap
+++ b/components/timeline/tests/snapshots/demo.test.ts.snap
@ -379,6 +379,73 @@ exports[`renders components/timeline/demo/color.tsx correctly 1`] = `
 </ul>
 `;

+exports[`renders components/timeline/demo/component-token.tsx correctly 1`] = `
+<ul
+  class="ant-timeline"
+>
+  <li
+    class="ant-timeline-item"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Create a services site 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Solve initial network problems 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Technical testing 2015-09-01
+    </div>
+  </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-last"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-blue"
+    />
+    <div
+      class="ant-timeline-item-content"
+    >
+      Network problems being solved 2015-09-01
+    </div>
+  </li>
+</ul>
+`;
+
 exports[`renders components/timeline/demo/custom.tsx correctly 1`] = `
 <ul
  class="ant-timeline"
--- a/components/timeline/demo/component-token.md
+++ b/components/timeline/demo/component-token.md
@ -0,0 +1,7 @@
+## zh-CN
+
+自定义组件 Token。
+
+## en-US
+
+Custom component token.
--- a/components/timeline/demo/component-token.tsx
+++ b/components/timeline/demo/component-token.tsx
@ -0,0 +1,37 @@
+import { ConfigProvider, Timeline } from 'antd';
+import React from 'react';
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Timeline: {
+          tailColor: 'red',
+          tailWidth: 10,
+          dotBorderWidth: 1,
+          dotBg: 'green',
+          itemPaddingBottom: 10,
+        },
+      },
+    }}
+  >
+    <Timeline
+      items={[
+        {
+          children: 'Create a services site 2015-09-01',
+        },
+        {
+          children: 'Solve initial network problems 2015-09-01',
+        },
+        {
+          children: 'Technical testing 2015-09-01',
+        },
+        {
+          children: 'Network problems being solved 2015-09-01',
+        },
+      ]}
+    />
+  </ConfigProvider>
+);
+
+export default App;
--- a/components/timeline/index.en-US.md
+++ b/components/timeline/index.en-US.md
@ -41,6 +41,7 @@ return (
 <code src="./demo/right.tsx">Right alternate</code>
 <code src="./demo/label.tsx">Label</code>
 <code src="./demo/wireframe.tsx" debug>Wireframe</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>

 ## API

--- a/components/timeline/index.zh-CN.md
+++ b/components/timeline/index.zh-CN.md
@ -42,6 +42,7 @@ return (
 <code src="./demo/right.tsx">右侧时间轴点</code>
 <code src="./demo/label.tsx">标签</code>
 <code src="./demo/wireframe.tsx" debug>线框风格</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>

 ## API

--- a/components/timeline/style/index.ts
+++ b/components/timeline/style/index.ts
@ -1,17 +1,20 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';
-import { resetComponent } from '../../style';

-export interface ComponentToken {}
+export interface ComponentToken {
+  tailColor: string;
+  tailWidth: number;
+  dotBorderWidth: number;
+  dotBg: string;
+  itemPaddingBottom: number;
+}

 interface TimelineToken extends FullToken<'Timeline'> {
-  timeLineItemPaddingBottom: number;
-  timeLineItemHeadSize: number;
-  timeLineItemCustomHeadPaddingVertical: number;
-  timeLineItemTailWidth: number;
-  timeLinePaddingInlineEnd: number;
-  timeLineHeadBorderWidth: number;
+  itemHeadSize: number;
+  customHeadPaddingVertical: number;
+  paddingInlineEnd: number;
 }

 const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
@ -27,16 +30,16 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
      [`${componentCls}-item`]: {
        position: 'relative',
        margin: 0,
-        paddingBottom: token.timeLineItemPaddingBottom,
+        paddingBottom: token.itemPaddingBottom,
        fontSize: token.fontSize,
        listStyle: 'none',

        '&-tail': {
          position: 'absolute',
-          insetBlockStart: token.timeLineItemHeadSize,
-          insetInlineStart: (token.timeLineItemHeadSize - token.timeLineItemTailWidth) / 2,
-          height: `calc(100% - ${token.timeLineItemHeadSize}px)`,
-          borderInlineStart: `${token.timeLineItemTailWidth}px ${token.lineType} ${token.colorSplit}`,
+          insetBlockStart: token.itemHeadSize,
+          insetInlineStart: (token.itemHeadSize - token.tailWidth) / 2,
+          height: `calc(100% - ${token.itemHeadSize}px)`,
+          borderInlineStart: `${token.tailWidth}px ${token.lineType} ${token.tailColor}`,
        },

        '&-pending': {
@ -52,10 +55,10 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {

        '&-head': {
          position: 'absolute',
-          width: token.timeLineItemHeadSize,
-          height: token.timeLineItemHeadSize,
-          backgroundColor: token.colorBgContainer,
-          border: `${token.timeLineHeadBorderWidth}px ${token.lineType} transparent`,
+          width: token.itemHeadSize,
+          height: token.itemHeadSize,
+          backgroundColor: token.dotBg,
+          border: `${token.dotBorderWidth}px ${token.lineType} transparent`,
          borderRadius: '50%',

          '&-blue': {
@ -81,12 +84,12 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {

        '&-head-custom': {
          position: 'absolute',
-          insetBlockStart: token.timeLineItemHeadSize / 2,
-          insetInlineStart: token.timeLineItemHeadSize / 2,
+          insetBlockStart: token.itemHeadSize / 2,
+          insetInlineStart: token.itemHeadSize / 2,
          width: 'auto',
          height: 'auto',
          marginBlockStart: 0,
-          paddingBlock: token.timeLineItemCustomHeadPaddingVertical,
+          paddingBlock: token.customHeadPaddingVertical,
          lineHeight: 1,
          textAlign: 'center',
          border: 0,
@ -97,7 +100,7 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
        '&-content': {
          position: 'relative',
          insetBlockStart: -(token.fontSize * token.lineHeight - token.fontSize) + token.lineWidth,
-          marginInlineStart: token.margin + token.timeLineItemHeadSize,
+          marginInlineStart: token.margin + token.itemHeadSize,
          marginInlineEnd: 0,
          marginBlockStart: 0,
          marginBlockEnd: 0,
@ -127,7 +130,7 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
            marginInlineStart: `-${token.marginXXS}px`,

            '&-custom': {
-              marginInlineStart: token.timeLineItemTailWidth / 2,
+              marginInlineStart: token.tailWidth / 2,
            },
          },

@ -154,13 +157,11 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
          [`${componentCls}-item-tail,
            ${componentCls}-item-head,
            ${componentCls}-item-head-custom`]: {
-            insetInlineStart: `calc(100% - ${
-              (token.timeLineItemHeadSize + token.timeLineItemTailWidth) / 2
-            }px)`,
+            insetInlineStart: `calc(100% - ${(token.itemHeadSize + token.tailWidth) / 2}px)`,
          },

          [`${componentCls}-item-content`]: {
-            width: `calc(100% - ${token.timeLineItemHeadSize + token.marginXS}px)`,
+            width: `calc(100% - ${token.itemHeadSize + token.marginXS}px)`,
          },
        },
      },
@ -170,7 +171,7 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
        ${componentCls}-item-tail`]: {
        display: 'block',
        height: `calc(100% - ${token.margin}px)`,
-        borderInlineStart: `${token.timeLineItemTailWidth}px dotted ${token.colorSplit}`,
+        borderInlineStart: `${token.tailWidth}px dotted ${token.tailColor}`,
      },

      [`&${componentCls}-reverse
@ -184,7 +185,7 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
          insetBlockStart: token.margin,
          display: 'block',
          height: `calc(100% - ${token.margin}px)`,
-          borderInlineStart: `${token.timeLineItemTailWidth}px dotted ${token.colorSplit}`,
+          borderInlineStart: `${token.tailWidth}px dotted ${token.tailColor}`,
        },

        [`${componentCls}-item-content`]: {
@ -195,8 +196,7 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
      [`&${componentCls}-label`]: {
        [`${componentCls}-item-label`]: {
          position: 'absolute',
-          insetBlockStart:
-            -(token.fontSize * token.lineHeight - token.fontSize) + token.timeLineItemTailWidth,
+          insetBlockStart: -(token.fontSize * token.lineHeight - token.fontSize) + token.tailWidth,
          width: `calc(50% - ${token.marginSM}px)`,
          textAlign: 'end',
        },
@ -223,15 +223,22 @@ const genTimelineStyle: GenerateStyle<TimelineToken, CSSObject> = (token) => {
 };

 // ============================== Export ==============================
-export default genComponentStyleHook('Timeline', (token) => {
-  const timeLineToken = mergeToken<TimelineToken>(token, {
-    timeLineItemPaddingBottom: token.padding * 1.25,
-    timeLineItemHeadSize: 10,
-    timeLineItemCustomHeadPaddingVertical: token.paddingXXS,
-    timeLinePaddingInlineEnd: 2,
-    timeLineItemTailWidth: token.lineWidthBold,
-    timeLineHeadBorderWidth: token.wireframe ? token.lineWidthBold : token.lineWidth * 3,
-  });
+export default genComponentStyleHook(
+  'Timeline',
+  (token) => {
+    const timeLineToken = mergeToken<TimelineToken>(token, {
+      itemHeadSize: 10,
+      customHeadPaddingVertical: token.paddingXXS,
+      paddingInlineEnd: 2,
+    });

-  return [genTimelineStyle(timeLineToken)];
-});
+    return [genTimelineStyle(timeLineToken)];
+  },
+  (token) => ({
+    tailColor: token.colorSplit,
+    tailWidth: token.lineWidthBold,
+    dotBorderWidth: token.wireframe ? token.lineWidthBold : token.lineWidth * 3,
+    dotBg: token.colorBgContainer,
+    itemPaddingBottom: token.padding * 1.25,
+  }),
+);
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@ -283,7 +283,17 @@ This document contains the correspondence between all the less variables related

 <!-- ### Tag -->

-<!-- ### Timeline -->
+### Timeline
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@timeline-width` | `tailWidth` | `tailWidth`  is a number without units, `@timeline-width` with units |
+| `@timeline-color` | `tailColor` | - |
+| `@timeline-dot-border-width` | `dotBorderWidth` | - |
+| `@timeline-dot-color` | - | Deprecated |
+| `@timeline-dot-bg` | `dotBg` | - |
+| `@timeline-item-padding-bottom` | `itemPaddingBottom` | - |

 <!-- ### TimePicker -->

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

 <!-- ### Tag 标签 -->

-<!-- ### Timeline 时间轴 -->
+### Timeline 时间轴
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@timeline-width` | `tailWidth` | `tailWidth` 为数字，不带单位，`@timeline-width` 带单位 |
+| `@timeline-color` | `tailColor` | - |
+| `@timeline-dot-border-width` | `dotBorderWidth` | - |
+| `@timeline-dot-color` | - | 已废弃 |
+| `@timeline-dot-bg` | `dotBg` | - |
+| `@timeline-item-padding-bottom` | `itemPaddingBottom` | - |

 <!-- ### TimePicker 时间选择 -->