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>

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"

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"

components/collapse/demo/component-token.md

@@ -0,0 +1,7 @@
+## zh-CN
+
+Component Token Debug.
+
+## en-US
+
+Component Token Debug

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>
+);

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
 

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
 

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,
+    headerBg,
-    collapseHeaderBg,
+    headerPadding,
-    collapseHeaderPadding,
     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,
+          padding: headerPadding,
-          paddingInlineStart: paddingSM,
           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) => {
+export default genComponentStyleHook(
-  const collapseToken = mergeToken<CollapseToken>(token, {
+  'Collapse',
-    collapseContentBg: token.colorBgContainer,
+  (token) => {
-    collapseHeaderBg: token.colorFillAlter,
+    const collapseToken = mergeToken<CollapseToken>(token, {
-    collapseHeaderPadding: `${token.paddingSM}px ${token.padding}px`,
+      collapseHeaderPaddingSM: `${token.paddingXS}px ${token.paddingSM}px`,
-    collapseHeaderPaddingSM: `${token.paddingXS}px ${token.paddingSM}px`,
+      collapseHeaderPaddingLG: `${token.padding}px ${token.paddingLG}px`,
-    collapseHeaderPaddingLG: `${token.padding}px ${token.paddingLG}px`,
+      collapsePanelBorderRadius: token.borderRadiusLG,
-    collapsePanelBorderRadius: token.borderRadiusLG,
+    });
-    collapseContentPaddingHorizontal: 16, // Fixed value
-  });
 
-  return [
+    return [
-    genBaseStyle(collapseToken),
+      genBaseStyle(collapseToken),
-    genBorderlessStyle(collapseToken),
+      genBorderlessStyle(collapseToken),
-    genGhostStyle(collapseToken),
+      genGhostStyle(collapseToken),
-    genArrowStyle(collapseToken),
+      genArrowStyle(collapseToken),
-    genCollapseMotion(collapseToken),
+      genCollapseMotion(collapseToken),
-  ];
+    ];
-});
+  },
+  (token) => ({
+    headerPadding: `${token.paddingSM}px ${token.padding}px`,
+    headerBg: token.colorFillAlter,
+    contentPadding: `${token.padding}px 16px`, // Fixed Value
+    contentBg: token.colorBgContainer,
+  }),
+);

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
 

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 描述列表