feat[Collapse]: support classNames and styles (#50557)

* feat[Collapse]: support classNames and styles * fix: update * fix: update * feat[Collapse]: update * Empty-Commit * docs: update * docs: update * docs: update * docs: update * docs: update --------- Co-authored-by: afc163 <afc163@gmail.com>
2025-06-07 09:26:06 +08:00 · 2024-08-27 14:07:25 +08:00 · 2024-08-27 14:07:25 +08:00 · 730a37f0bd
commit 730a37f0bd
parent 6176d3cefe
6 changed files with 116 additions and 8 deletions
--- a/components/collapse/tests/index.test.tsx
+++ b/components/collapse/tests/index.test.tsx
@ -275,4 +275,26 @@ describe('Collapse', () => {
      'collapsed',
    );
  });
+
+  it('should support styles and classNames', () => {
+    const { container } = render(
+      <Collapse
+        activeKey={['1']}
+        items={[
+          {
+            key: '1',
+            label: 'title',
+            styles: { header: { color: 'red' }, body: { color: 'blue' } },
+            classNames: { header: 'header-class', body: 'body-class' },
+          },
+        ]}
+      />,
+    );
+
+    expect(container.querySelector('.ant-collapse-header')).toHaveClass('header-class');
+    expect(container.querySelector('.ant-collapse-content-box')).toHaveClass('body-class');
+
+    expect(container.querySelector('.ant-collapse-header')).toHaveStyle({ color: 'red' });
+    expect(container.querySelector('.ant-collapse-content-box')).toHaveStyle({ color: 'blue' });
+  });
 });
--- a/components/collapse/demo/_semantic.tsx
+++ b/components/collapse/demo/_semantic.tsx
@ -0,0 +1,50 @@
+import React from 'react';
+import type { CollapseProps } from 'antd';
+import { Collapse } from 'antd';
+
+import SemanticPreview from '../../../.dumi/components/SemanticPreview';
+import useLocale from '../../../.dumi/hooks/useLocale';
+
+const locales = {
+  cn: {
+    header: '头部元素',
+    body: '内容元素',
+  },
+  en: {
+    header: 'Header element',
+    body: 'Body element',
+  },
+};
+
+const BlockCollapse: React.FC = (props) => {
+  const items: CollapseProps['items'] = [
+    {
+      key: '1',
+      label: 'This is panel header',
+      children: <p>This is panel body</p>,
+      ...props,
+    },
+  ];
+
+  return (
+    <div style={{ position: 'absolute', inset: 0 }}>
+      <Collapse {...props} items={items} defaultActiveKey={['1']} />
+    </div>
+  );
+};
+
+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+  return (
+    <SemanticPreview
+      semantics={[
+        { name: 'header', desc: locale.header, version: '5.21.0' },
+        { name: 'body', desc: locale.body, version: '5.21.0' },
+      ]}
+    >
+      <BlockCollapse />
+    </SemanticPreview>
+  );
+};
+
+export default App;
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@ -89,7 +89,21 @@ Common props ref：[Common props](/docs/react/common-props)
 | ghost | Make the collapse borderless and its background transparent | boolean | false | 4.4.0 |
 | size | Set the size of collapse | `large` \| `middle` \| `small` | `middle` | 5.2.0 |
 | onChange | Callback function executed when active panel is changed | function | - |  |
-| items | collapse items content | [ItemType](https://github.com/react-component/collapse/blob/27250ca5415faab16db412b9bff2c131bb4f32fc/src/interface.ts#L6) | - | 5.6.0 |
+| items | collapse items content | [ItemType](#ItemType) | - | 5.6.0 |
+
+### ItemType
+
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| classNames | Semantic structure className | [`Record<header \| body, string>`](#semantic-dom) | - | 5.21.0 |
+| collapsible | Specify whether the panel be collapsible or the trigger area of collapsible | `header` \| `icon` \| `disabled` | - |  |
+| children | Body area content | ReactNode | - |  |
+| extra | The extra element in the corner | ReactNode | - |  |
+| forceRender | Forced render of content on panel, instead of lazy rendering after clicking on header | boolean | false |  |
+| key | Unique key identifying the panel from among its siblings | string \| number | - |  |
+| label | Title of the panel | ReactNode | - | - |
+| showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true |  |
+| styles | Semantic DOM style | [`Record<header \| body, CSSProperties>`](#semantic-dom) | - | 5.21.0 |

 ### Collapse.Panel

@ -107,6 +121,10 @@ When using version >= 5.6.0, we prefer to configuring the panel by `items`.
 | key | Unique key identifying the panel from among its siblings | string \| number | - |  |
 | showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true |  |

+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>
+
 ## Design Token

 <ComponentTokenTable component="Collapse"></ComponentTokenTable>
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@ -90,7 +90,21 @@ const items: CollapseProps['items'] = [
 | ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
 | size | 设置折叠面板大小 | `large` \| `middle` \| `small` | `middle` | 5.2.0 |
 | onChange | 切换面板的回调 | function | - |  |
-| items | 折叠项目内容 | [ItemType](https://github.com/react-component/collapse/blob/27250ca5415faab16db412b9bff2c131bb4f32fc/src/interface.ts#L6) | - | 5.6.0 |
+| items | 折叠项目内容 | [ItemType](#ItemType) | - | 5.6.0 |
+
+### ItemType
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| classNames | 语义化结构 className | [`Record<header \| body, string>`](#semantic-dom) | - | 5.21.0 |
+| collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - |  |
+| children | body 区域内容 | ReactNode | - |  |
+| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - |  |
+| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false |  |
+| key | 对应 activeKey | string \| number | - |  |
+| label | 面板标题 | ReactNode | - | - |
+| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true |  |
+| styles | 语义化结构 style | [`Record<header \| body, CSSProperties>`](#semantic-dom) | - | 5.21.0 |

 ### Collapse.Panel

@ -103,10 +117,14 @@ const items: CollapseProps['items'] = [
 | --- | --- | --- | --- | --- |
 | collapsible | 是否可折叠或指定可折叠触发区域 | `header` \| `icon` \| `disabled` | - | 4.9.0 (icon: 4.24.0) |
 | extra | 自定义渲染每个面板右上角的内容 | ReactNode | - |  |
-| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |  |
-| header | 面板头内容 | ReactNode | - |  |
+| forceRender | 被隐藏时是否渲染 body 区域 DOM 结构 | boolean | false |  |
+| header | 面板标题 | ReactNode | - |  |
 | key | 对应 activeKey | string \| number | - |  |
-| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true |  |
+| showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能设为 icon） | boolean | true |  |
+
+## Semantic DOM
+
+<code src="./demo/_semantic.tsx" simplify="true"></code>

 ## 主题变量（Design Token）

--- a/package.json
+++ b/package.json
@ -117,7 +117,7 @@
    "dayjs": "^1.11.11",
    "rc-cascader": "~3.27.0",
    "rc-checkbox": "~3.3.0",
-    "rc-collapse": "~3.7.3",
+    "rc-collapse": "~3.8.0",
    "rc-dialog": "~9.5.2",
    "rc-drawer": "~7.2.0",
    "rc-dropdown": "~4.2.0",
--- a/scripts/snapshots/check-site.ts.snap
+++ b/scripts/snapshots/check-site.ts.snap
@ -56,9 +56,9 @@ exports[`site test Component components/checkbox en Page 1`] = `3`;

 exports[`site test Component components/checkbox zh Page 1`] = `3`;

-exports[`site test Component components/collapse en Page 1`] = `2`;
+exports[`site test Component components/collapse en Page 1`] = `3`;

-exports[`site test Component components/collapse zh Page 1`] = `2`;
+exports[`site test Component components/collapse zh Page 1`] = `3`;

 exports[`site test Component components/color-picker en Page 1`] = `2`;