feat: Divider Component Token (#42627)

* feat: Divider Component Token * feat: 更改token命名规范 * feat: 增加token demo * test: Update Test Snapshots * feat: token * chore: update * fix: lint * chore: lint * chore: update snapshot --------- Co-authored-by: MadCcc <1075746765@qq.com>
2025-01-18 22:36:31 +08:00 · 2023-08-11 13:43:44 +08:00 · 2023-08-11 13:43:44 +08:00 · 1c1ebbe36d
commit 1c1ebbe36d
parent 7f32c9e63d
9 changed files with 278 additions and 15 deletions
--- a/components/divider/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/divider/tests/snapshots/demo-extend.test.ts.snap
@ -1,5 +1,82 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`renders components/divider/demo/component-token.tsx extend context correctly 1`] = `
+Array [
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Text
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Left Text
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Right Text
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left ant-divider-no-default-orientation-margin-left"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+      style="margin-left: 0px;"
+    >
+      Left Text with 0 orientationMargin
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right ant-divider-no-default-orientation-margin-right"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+      style="margin-right: 50px;"
+    >
+      Right Text with 50px orientationMargin
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+]
+`;
+
+exports[`renders components/divider/demo/component-token.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/divider/demo/customize-style.tsx extend context correctly 1`] = `
 Array [
  <div
--- a/components/divider/tests/snapshots/demo.test.ts.snap
+++ b/components/divider/tests/snapshots/demo.test.ts.snap
@ -1,5 +1,80 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

+exports[`renders components/divider/demo/component-token.tsx correctly 1`] = `
+Array [
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Text
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Left Text
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Right Text
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left ant-divider-no-default-orientation-margin-left"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+      style="margin-left:0"
+    >
+      Left Text with 0 orientationMargin
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right ant-divider-no-default-orientation-margin-right"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+      style="margin-right:50px"
+    >
+      Right Text with 50px orientationMargin
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+]
+`;
+
 exports[`renders components/divider/demo/customize-style.tsx correctly 1`] = `
 Array [
  <div
--- a/components/divider/demo/component-token.md
+++ b/components/divider/demo/component-token.md
@ -0,0 +1,7 @@
+## zh-CN
+
+组件 Token Debug.
+
+## en-US
+
+Component Token Debug.
--- a/components/divider/demo/component-token.tsx
+++ b/components/divider/demo/component-token.tsx
@ -0,0 +1,58 @@
+import React from 'react';
+import { ConfigProvider, Divider } from 'antd';
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      token: {
+        margin: 24,
+        marginLG: 48,
+        lineWidth: 5,
+        colorSplit: '#1677ff',
+      },
+      components: {
+        Divider: {
+          verticalMarginInline: 16,
+          textPaddingInline: 16,
+          orientationMargin: 0.2,
+        },
+      },
+    }}
+  >
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider>Text</Divider>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider orientation='left'>Left Text</Divider>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider orientation='right'>Right Text</Divider>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider orientation='left' orientationMargin='0'>
+      Left Text with 0 orientationMargin
+    </Divider>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider orientation='right' orientationMargin={50}>
+      Right Text with 50px orientationMargin
+    </Divider>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+  </ConfigProvider>
+);
+
+export default App;
--- a/components/divider/index.en-US.md
+++ b/components/divider/index.en-US.md
@ -25,6 +25,7 @@ A divider line separates different content.
 <code src="./demo/plain.tsx">Text without heading style</code>
 <code src="./demo/vertical.tsx">Vertical</code>
 <code src="./demo/customize-style.tsx" debug>Style Customization</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>

 ## API

--- a/components/divider/index.zh-CN.md
+++ b/components/divider/index.zh-CN.md
@ -26,6 +26,7 @@ group:
 <code src="./demo/plain.tsx">分割文字使用正文样式</code>
 <code src="./demo/vertical.tsx">垂直分割线</code>
 <code src="./demo/customize-style.tsx" debug>样式自定义</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>

 ## API

--- a/components/divider/style/index.ts
+++ b/components/divider/style/index.ts
@ -1,22 +1,45 @@
 import type { CSSObject } from '@ant-design/cssinjs';
+import type { CSSProperties } from 'react';
 import { resetComponent } from '../../style';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';

 /** Component only token. Which will handle additional calculation of alias token */
 export interface ComponentToken {
-  sizePaddingEdgeHorizontal: number;
+  /**
+   * @desc 文本横向内间距
+   * @descEN Horizontal padding of text
+   */
+  textPaddingInline: CSSProperties['paddingInline'];
+  /**
+   * @desc 文本与边缘距离，取值 0 ～ 1
+   * @descEN Distance between text and edge, which should be a number between 0 and 1.
+   */
+  orientationMargin: number;
+  /**
+   * @desc 纵向分割线的横向外间距
+   * @descEN Horizontal margin of vertical Divider
+   */
+  verticalMarginInline: CSSProperties['marginInline'];
 }

 interface DividerToken extends FullToken<'Divider'> {
-  dividerVerticalGutterMargin: number;
+  sizePaddingEdgeHorizontal: number;
  dividerHorizontalWithTextGutterMargin: number;
  dividerHorizontalGutterMargin: number;
 }

 // ============================== Shared ==============================
 const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject => {
-  const { componentCls, sizePaddingEdgeHorizontal, colorSplit, lineWidth } = token;
+  const {
+    componentCls,
+    sizePaddingEdgeHorizontal,
+    colorSplit,
+    lineWidth,
+    textPaddingInline,
+    orientationMargin,
+    verticalMarginInline,
+  } = token;

  return {
    [componentCls]: {
@ -29,7 +52,8 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>
        top: '-0.06em',
        display: 'inline-block',
        height: '0.9em',
-        margin: `0 ${token.dividerVerticalGutterMargin}px`,
+        marginInline: verticalMarginInline,
+        marginBlock: 0,
        verticalAlign: 'middle',
        borderTop: 0,
        borderInlineStart: `${lineWidth}px solid ${colorSplit}`,
@ -68,27 +92,28 @@ const genSharedDividerStyle: GenerateStyle<DividerToken> = (token): CSSObject =>

      [`&-horizontal${componentCls}-with-text-left`]: {
        '&::before': {
-          width: '5%',
+          width: `${orientationMargin * 100}%`,
        },

        '&::after': {
-          width: '95%',
+          width: `${100 - orientationMargin * 100}%`,
        },
      },

      [`&-horizontal${componentCls}-with-text-right`]: {
        '&::before': {
-          width: '95%',
+          width: `${100 - orientationMargin * 100}%`,
        },

        '&::after': {
-          width: '5%',
+          width: `${orientationMargin * 100}%`,
        },
      },

      [`${componentCls}-inner-text`]: {
        display: 'inline-block',
-        padding: '0 1em',
+        paddingBlock: 0,
+        paddingInline: textPaddingInline,
      },

      '&-dashed': {
@ -155,13 +180,15 @@ export default genComponentStyleHook(
  'Divider',
  (token) => {
    const dividerToken = mergeToken<DividerToken>(token, {
-      dividerVerticalGutterMargin: token.marginXS,
      dividerHorizontalWithTextGutterMargin: token.margin,
      dividerHorizontalGutterMargin: token.marginLG,
+      sizePaddingEdgeHorizontal: 0,
    });
    return [genSharedDividerStyle(dividerToken)];
  },
-  {
-    sizePaddingEdgeHorizontal: 0,
-  },
+  (token) => ({
+    textPaddingInline: '1em',
+    orientationMargin: 0.05,
+    verticalMarginInline: token.marginXS,
+  }),
 );
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@ -220,7 +220,16 @@ export default App;
 | `@descriptions-item-label-colon-margin-left` | `colonMarginLeft` | - |
 | `@descriptions-extra-color` | `extraColor` | - |

-<!-- ### Divider -->
+### Divider
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| --- | --- | --- |
+| `@divider-text-padding` | `textPaddingInline` | - |
+| `@divider-orientation-margin` | `orientationMargin` | - |
+| `@divider-color` | `colorSplit` | Global Token |
+| `@divider-vertical-gutter` | `verticalMarginInline` | - |

 ### Drawer

--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@ -218,7 +218,15 @@ export default App;
 | `@descriptions-item-label-colon-margin-left` | `colonMarginLeft` | - |
 | `@descriptions-extra-color` | `extraColor` | - |

-<!-- ### Divider 分割线 -->
+### Divider 分割线
+
+<!-- prettier-ignore -->
+| less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@divider-text-padding` | `textPaddingInline` | - |
+| `@divider-orientation-margin` | `orientationMargin` | - |
+| `@divider-color` | `colorSplit` | 全局 Token |
+| `@divider-vertical-gutter` | `verticalMarginInline` | - |

 ### Drawer 抽屉