feat(collapse): migrate less to token (#42938)

* feat(collapse): migrate less to token * docs: add component token demo * test: update snapshot * chore: update snapshot * chore: code clean * chore: code clean * chore: update * chore: update demo * chore: style * chore: fix lint --------- Co-authored-by: MadCcc <1075746765@qq.com>
2024-11-29 18:50:00 +08:00 · 2023-08-14 19:19:32 +08:00 · 2023-08-14 19:19:32 +08:00 · 1b479c4b45
commit 1b479c4b45
parent 6a6f1b741f
9 changed files with 359 additions and 38 deletions
--- a/components/collapse/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/collapse/tests/snapshots/demo-extend.test.ts.snap
@ -595,6 +595,135 @@ exports[`renders components/collapse/demo/collapsible.tsx extend context correct

 exports[`renders components/collapse/demo/collapsible.tsx extend context correctly 2`] = `[]`;

+exports[`renders components/collapse/demo/component-token.tsx extend context correctly 1`] = `
+<div
+  class="ant-collapse ant-collapse-icon-position-start"
+>
+  <div
+    class="ant-collapse-item"
+  >
+    <div
+      aria-disabled="false"
+      aria-expanded="false"
+      class="ant-collapse-header"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="ant-collapse-expand-icon"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right ant-collapse-arrow"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </div>
+      <span
+        class="ant-collapse-header-text"
+      >
+        This is panel header 1, (Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! )
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-collapse-item"
+  >
+    <div
+      aria-disabled="false"
+      aria-expanded="false"
+      class="ant-collapse-header"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="ant-collapse-expand-icon"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right ant-collapse-arrow"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </div>
+      <span
+        class="ant-collapse-header-text"
+      >
+        This is panel header 2, (Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! )
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-collapse-item"
+  >
+    <div
+      aria-disabled="false"
+      aria-expanded="false"
+      class="ant-collapse-header"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="ant-collapse-expand-icon"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right ant-collapse-arrow"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </div>
+      <span
+        class="ant-collapse-header-text"
+      >
+        This is panel header 3, (Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! )
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`renders components/collapse/demo/component-token.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/collapse/demo/custom.tsx extend context correctly 1`] = `
 <div
  class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless"
--- a/components/collapse/tests/snapshots/demo.test.ts.snap
+++ b/components/collapse/tests/snapshots/demo.test.ts.snap
@ -587,6 +587,133 @@ exports[`renders components/collapse/demo/collapsible.tsx correctly 1`] = `
 </div>
 `;

+exports[`renders components/collapse/demo/component-token.tsx correctly 1`] = `
+<div
+  class="ant-collapse ant-collapse-icon-position-start"
+>
+  <div
+    class="ant-collapse-item"
+  >
+    <div
+      aria-disabled="false"
+      aria-expanded="false"
+      class="ant-collapse-header"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="ant-collapse-expand-icon"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right ant-collapse-arrow"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </div>
+      <span
+        class="ant-collapse-header-text"
+      >
+        This is panel header 1, (Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! )
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-collapse-item"
+  >
+    <div
+      aria-disabled="false"
+      aria-expanded="false"
+      class="ant-collapse-header"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="ant-collapse-expand-icon"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right ant-collapse-arrow"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </div>
+      <span
+        class="ant-collapse-header-text"
+      >
+        This is panel header 2, (Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! )
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-collapse-item"
+  >
+    <div
+      aria-disabled="false"
+      aria-expanded="false"
+      class="ant-collapse-header"
+      role="button"
+      tabindex="0"
+    >
+      <div
+        class="ant-collapse-expand-icon"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right ant-collapse-arrow"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </div>
+      <span
+        class="ant-collapse-header-text"
+      >
+        This is panel header 3, (Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! Ant Design! )
+      </span>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders components/collapse/demo/custom.tsx correctly 1`] = `
 <div
  class="ant-collapse ant-collapse-icon-position-start ant-collapse-borderless"
--- a/components/collapse/demo/component-token.md
+++ b/components/collapse/demo/component-token.md
@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug
--- a/components/collapse/demo/component-token.tsx
+++ b/components/collapse/demo/component-token.tsx
@ -0,0 +1,30 @@
+import React from 'react';
+import { Collapse, ConfigProvider } from 'antd';
+
+/** Test usage. Do not use in your production. */
+import type { CollapseProps } from 'antd';
+
+const text = `Ant Design! `.repeat(26);
+
+const items: CollapseProps['items'] = [
+  { key: '1', label: `This is panel header 1, (${text})`, children: text },
+  { key: '2', label: `This is panel header 2, (${text})`, children: text },
+  { key: '3', label: `This is panel header 3, (${text})`, children: text },
+];
+
+export default () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Collapse: {
+          headerPadding: '0px 10px 20px 30px',
+          headerBg: '#eaeeff',
+          contentPadding: '0px 10px 20px 30px',
+          contentBg: '#e6f7ff',
+        },
+      },
+    }}
+  >
+    <Collapse items={items} />
+  </ConfigProvider>
+);
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@ -69,6 +69,7 @@ const items: CollapseProps['items'] = [
 <code src="./demo/extra.tsx">Extra node</code>
 <code src="./demo/ghost.tsx">Ghost Collapse</code>
 <code src="./demo/collapsible.tsx">Collapsible</code>
+<code src="./demo/component-token.tsx" debug>Component Token</code>

 ## API

--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@ -70,6 +70,7 @@ const items: CollapseProps['items'] = [
 <code src="./demo/extra.tsx">额外节点</code>
 <code src="./demo/ghost.tsx">幽灵折叠面板</code>
 <code src="./demo/collapsible.tsx">可折叠触发区域</code>
+<code src="./demo/component-token.tsx" debug>组件 Token</code>

 ## API

--- a/components/collapse/style/index.ts
+++ b/components/collapse/style/index.ts
@ -1,28 +1,31 @@
+import type { CSSProperties } from 'react';
 import { resetComponent, resetIcon } from '../../style';
 import { genCollapseMotion } from '../../style/motion';
 import type { FullToken, GenerateStyle } from '../../theme/internal';
 import { genComponentStyleHook, mergeToken } from '../../theme/internal';

-export interface ComponentToken {}
+/** Component only token. Which will handle additional calculation of alias token */
+export interface ComponentToken {
+  // Component token here
+  headerPadding: CSSProperties['padding'];
+  headerBg: string;
+  contentPadding: CSSProperties['padding'];
+  contentBg: string;
+}

 type CollapseToken = FullToken<'Collapse'> & {
-  collapseContentBg: string;
-  collapseHeaderBg: string;
-  collapseHeaderPadding: string;
  collapseHeaderPaddingSM: string;
  collapseHeaderPaddingLG: string;
  collapsePanelBorderRadius: number;
-  collapseContentPaddingHorizontal: number;
 };

 export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
  const {
    componentCls,
-    collapseContentBg,
+    contentBg,
    padding,
-    collapseContentPaddingHorizontal,
-    collapseHeaderBg,
-    collapseHeaderPadding,
+    headerBg,
+    headerPadding,
    collapseHeaderPaddingSM,
    collapseHeaderPaddingLG,
    collapsePanelBorderRadius,
@ -42,6 +45,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
    paddingXS,
    motionDurationSlow,
    fontSizeIcon,
+    contentPadding,
  } = token;

  const borderBase = `${lineWidth}px ${lineType} ${colorBorder}`;
@ -49,7 +53,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
  return {
    [componentCls]: {
      ...resetComponent(token),
-      backgroundColor: collapseHeaderBg,
+      backgroundColor: headerBg,
      border: borderBase,
      borderBottom: 0,
      borderRadius: `${collapsePanelBorderRadius}px`,
@ -73,8 +77,7 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
          display: 'flex',
          flexWrap: 'nowrap',
          alignItems: 'flex-start',
-          padding: collapseHeaderPadding,
-          paddingInlineStart: paddingSM,
+          padding: headerPadding,
          color: colorTextHeading,
          lineHeight,
          cursor: 'pointer',
@ -94,8 +97,6 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {
            display: 'flex',
            alignItems: 'center',
            paddingInlineEnd: marginSM,
-            // Arrow offset
-            marginInlineStart: padding - paddingSM,
          },

          [`${componentCls}-arrow`]: {
@ -133,11 +134,11 @@ export const genBaseStyle: GenerateStyle<CollapseToken> = (token) => {

      [`${componentCls}-content`]: {
        color: colorText,
-        backgroundColor: collapseContentBg,
+        backgroundColor: contentBg,
        borderTop: borderBase,

        [`& > ${componentCls}-content-box`]: {
-          padding: `${padding}px ${collapseContentPaddingHorizontal}px`,
+          padding: contentPadding,
        },

        [`&-hidden`]: {
@ -231,7 +232,7 @@ const genArrowStyle: GenerateStyle<CollapseToken> = (token) => {
 const genBorderlessStyle: GenerateStyle<CollapseToken> = (token) => {
  const {
    componentCls,
-    collapseHeaderBg,
+    headerBg,
    paddingXXS,

    colorBorder,
@ -239,7 +240,7 @@ const genBorderlessStyle: GenerateStyle<CollapseToken> = (token) => {

  return {
    [`${componentCls}-borderless`]: {
-      backgroundColor: collapseHeaderBg,
+      backgroundColor: headerBg,
      border: 0,

      [`> ${componentCls}-item`]: {
@ -290,22 +291,27 @@ const genGhostStyle: GenerateStyle<CollapseToken> = (token) => {
  };
 };

-export default genComponentStyleHook('Collapse', (token) => {
-  const collapseToken = mergeToken<CollapseToken>(token, {
-    collapseContentBg: token.colorBgContainer,
-    collapseHeaderBg: token.colorFillAlter,
-    collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`,
-    collapseHeaderPaddingSM: `${token.paddingXS}px ${token.paddingSM}px`,
-    collapseHeaderPaddingLG: `${token.padding}px ${token.paddingLG}px`,
-    collapsePanelBorderRadius: token.borderRadiusLG,
-    collapseContentPaddingHorizontal: 16, // Fixed value
-  });
+export default genComponentStyleHook(
+  'Collapse',
+  (token) => {
+    const collapseToken = mergeToken<CollapseToken>(token, {
+      collapseHeaderPaddingSM: `${token.paddingXS}px ${token.paddingSM}px`,
+      collapseHeaderPaddingLG: `${token.padding}px ${token.paddingLG}px`,
+      collapsePanelBorderRadius: token.borderRadiusLG,
+    });

-  return [
-    genBaseStyle(collapseToken),
-    genBorderlessStyle(collapseToken),
-    genGhostStyle(collapseToken),
-    genArrowStyle(collapseToken),
-    genCollapseMotion(collapseToken),
-  ];
-});
+    return [
+      genBaseStyle(collapseToken),
+      genBorderlessStyle(collapseToken),
+      genGhostStyle(collapseToken),
+      genArrowStyle(collapseToken),
+      genCollapseMotion(collapseToken),
+    ];
+  },
+  (token) => ({
+    headerPadding: `${token.paddingSM}px ${token.padding}px`,
+    headerBg: token.colorFillAlter,
+    contentPadding: `${token.padding}px 16px`, // Fixed Value
+    contentBg: token.colorBgContainer,
+  }),
+);
--- a/docs/react/migrate-less-variables.en-US.md
+++ b/docs/react/migrate-less-variables.en-US.md
@ -216,7 +216,17 @@ export default App;
 | `@checkbox-border-radius` | `borderRadiusSM` | - |
 | `@checkbox-group-item-margin-right` | - | Deprecated for style change |

-<!-- ### Collapse -->
+### Collapse
+
+<!-- prettier-ignore -->
+| Less variables | Component Token | Note |
+| --- | --- | --- |
+| `@collapse-header-padding` | `headerPadding` | - |
+| `@collapse-header-padding-extra` | - | Depreacated |
+| `@collapse-header-bg` | `headerBg` | - |
+| `@collapse-content-padding` | `contentPadding` | - |
+| `@collapse-content-bg` | `contentBg` | - |
+| `@collapse-header-arrow-left` | - | Deprecated |

 ### Descriptions

--- a/docs/react/migrate-less-variables.zh-CN.md
+++ b/docs/react/migrate-less-variables.zh-CN.md
@ -214,7 +214,17 @@ export default App;
 | `@checkbox-border-radius` | `borderRadiusSM` | - |
 | `@checkbox-group-item-margin-right` | - | 由于样式变化已废弃 |

-<!-- ### Collapse 折叠面板 -->
+### Collapse 折叠面板
+
+<!-- prettier-ignore -->
+| Less 变量 | Component Token | 备注 |
+| --- | --- | --- |
+| `@collapse-header-padding` | `headerPadding` | - |
+| `@collapse-header-padding-extra` | - | 已废弃 |
+| `@collapse-header-bg` | `headerBg` | - |
+| `@collapse-content-padding` | `contentPadding` | - |
+| `@collapse-content-bg` | `contentBg` | - |
+| `@collapse-header-arrow-left` | - | 已废弃 |

 ### Descriptions 描述列表