feat: ConfigProvider support Collapse semantic props `classNames` and `styles` #52258

thinkasany · 2025-01-06T07:22:32Z

🤔 This is a ...

🆕 New feature

🔗 Related Issues

📝 Change Log

Read Keep a Changelog like a cat tracks a laser pointer.

Describe the impact of the changes on developers, not the solution approach.

Reference: https://ant.design/changelog

Language	Changelog
🇺🇸 English	🆕 ConfigProvider support Collapse semantic props `classNames` and `styles`.
🇨🇳 Chinese	🆕 ConfigProvider 支持 Collapse 组件语义化 `classNames` 和 `styles`。

bolt-new-by-stackblitz · 2025-01-06T07:22:35Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2025-01-06T07:22:43Z

👁 Visual Regression Report for PR #52258 Failed ❌

🎯 Target branch: next (6c401b9)
📖 View Full Report ↗︎
📊 Summary: 🔄 1 changed

Expected (Branch next)	Actual (Current PR)	Diff
input-group.compact.png	input-group.compact.css-var.png

Important

There are 1 diffs found in this PR: 🔄 1 changed.
Please check all items:

Visual diff is acceptable

github-actions · 2025-01-06T07:22:43Z

petercat-assistant · 2025-01-06T07:22:48Z

Walkthrough

This pull request introduces a new feature to the ConfigProvider component, adding support for semantic props classNames and styles in the Collapse component. This enhancement allows for more flexible styling and class naming, improving the customization capabilities of the Collapse component.

Changes

Files	Summary
components/collapse/Collapse.tsx	Added `SemanticName` type and updated `CollapseProps` to include `classNames` and `styles`. Enhanced the component to utilize these new props for styling and class naming.
components/collapse/demo/_semantic.tsx	Updated locales and semantic preview to include new semantic names like `root`, `title`, `content`, and `icon`.
components/config-provider/context.ts	Extended `CollapseConfig` to include `classNames` and `styles`.
components/config-provider/index.en-US.md, components/config-provider/index.zh-CN.md	Updated documentation to reflect the new `classNames` and `styles` support in the `Collapse` component.

petercat-assistant · 2025-01-06T07:22:50Z

components/collapse/Collapse.tsx

@@ -136,7 +142,21 @@ const Collapse = React.forwardRef<HTMLDivElement, CollapseProps>((props, ref) =>
      expandIcon={renderExpandIcon}
      prefixCls={prefixCls}
      className={collapseClassName}
-      style={{ ...collapse?.style, ...style }}
+      style={{ ...collapse?.styles?.root, ...collapse?.style, ...styles?.root, ...style }}


Ensure that the merging of styles does not unintentionally override important styles. Consider the order of merging to maintain intended styling priorities.

codecov · 2025-01-06T07:35:11Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (6c401b9) to head (366595a).
Report is 1 commits behind head on next.

Additional details and impacted files

@@            Coverage Diff            @@
##              next    #52258   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          760       760           
  Lines        13681     13681           
  Branches      3576      3576           
=========================================
  Hits         13681     13681

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

socket-security · 2025-01-07T15:49:56Z

New, updated, and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Package	New capabilities	Transitives	Size	Publisher
npm/lodash@4.17.21	None	`0`	1.41 MB	bnjmnt4n
npm/minimist@1.2.8	None	`0`	54.5 kB	ljharb
npm/regenerator-runtime@0.14.1	None	`0`	27.9 kB	benjamn

🚮 Removed packages: npm/@ant-design/colors@7.2.0, npm/@ant-design/compatible@5.1.4, npm/@ant-design/cssinjs-utils@1.1.3, npm/@ant-design/cssinjs@1.22.1, npm/@ant-design/fast-color@2.0.6, npm/@ant-design/happy-work-theme@1.0.0, npm/@ant-design/icons@5.5.2, npm/@ant-design/react-slick@1.1.2, npm/@ant-design/tools@18.0.3, npm/@ant-design/v5-patch-for-react-19@1.0.3, npm/@antfu/eslint-config@3.14.0, npm/@antv/g6@4.8.24, npm/@babel/runtime@7.26.0, npm/@biomejs/biome@1.9.4, npm/@codecov/webpack-plugin@1.7.0, npm/@codesandbox/sandpack-react@2.19.10, npm/@dnd-kit/core@6.3.1, npm/@dnd-kit/modifiers@9.0.0, npm/@dnd-kit/sortable@10.0.0, npm/@dnd-kit/utilities@3.2.2, npm/@emotion/css@11.13.5, npm/@emotion/react@11.14.0, npm/@emotion/server@11.11.0, npm/@eslint-react/eslint-plugin@1.23.2, npm/@ianvs/prettier-plugin-sort-imports@4.4.1, npm/@inquirer/prompts@7.2.3, npm/@madccc/duplicate-package-checker-webpack-plugin@1.0.0, npm/@microflash/rehype-figure@2.1.1, npm/@npmcli/run-script@9.0.2, npm/@octokit/rest@21.1.0, npm/@qixian.cs/github-contributors-list@2.0.2, npm/@rc-component/color-picker@2.0.1, npm/@rc-component/mutate-observer@1.1.0, npm/@rc-component/qrcode@1.0.0, npm/@rc-component/tooltip@1.0.0, npm/@rc-component/tour@1.15.1, npm/@rc-component/trigger@2.2.6, npm/@rc-component/util@1.1.0, npm/@size-limit/file@11.1.6, npm/@stackblitz/sdk@1.11.0, npm/@testing-library/dom@10.4.0, npm/@testing-library/jest-dom@6.6.3, npm/@testing-library/react@16.1.0, npm/@testing-library/user-event@14.5.2, npm/@types/adm-zip@0.5.7, npm/@types/ali-oss@6.16.11, npm/@types/cli-progress@3.11.6, npm/@types/fs-extra@11.0.4, npm/@types/gtag.js@0.0.20, npm/@types/http-server@0.12.4, npm/@types/isomorphic-fetch@0.0.39, npm/@types/jest-axe@3.5.9, npm/@types/jest-environment-puppeteer@5.0.6, npm/@types/jest-image-snapshot@6.4.0, npm/@types/jest@29.5.14, npm/@types/jquery@3.5.32, npm/@types/jsdom@21.1.7, npm/@types/lodash@4.17.14, npm/@types/minimist@1.2.5, npm/@types/node@22.10.6, npm/@types/nprogress@0.2.3, npm/@types/pixelmatch@5.2.6, npm/@types/pngjs@6.0.5, npm/@types/prismjs@1.26.5, npm/@types/progress@2.0.7, npm/@types/react-copy-to-clipboard@5.0.7, npm/@types/react-dom@19.0.3, npm/@types/react-highlight-words@0.20.0, npm/@types/react-resizable@3.0.8, npm/@types/react@19.0.7, npm/@types/spinnies@0.5.3, npm/@types/tar@6.1.13, npm/@types/throttle-debounce@5.0.2, npm/@types/warning@3.0.3, npm/adm-zip@0.5.16, npm/ali-oss@6.22.0, npm/antd-img-crop@4.24.0, npm/antd-style@3.7.1, npm/antd-token-previewer@2.0.8, npm/axios@1.7.9, npm/chalk@5.4.1, npm/cheerio@1.0.0, npm/circular-dependency-plugin@5.2.2, npm/classnames@2.5.1, npm/cli-progress@3.12.0, npm/copy-to-clipboard@3.3.3, npm/cross-env@7.0.3, npm/cross-fetch@4.1.0, npm/dayjs@1.11.13, npm/dekko@0.2.1, npm/dotenv@16.4.7, npm/dumi-plugin-color-chunk@1.1.2, npm/dumi@2.4.17, npm/env-paths@3.0.0, npm/eslint-plugin-compat@6.0.2, npm/eslint@9.18.0, npm/rc-cascader@3.33.0, npm/rc-checkbox@3.5.0, npm/rc-collapse@3.9.0, npm/rc-dialog@9.6.0, npm/rc-drawer@8.0.0, npm/rc-dropdown@4.2.1, npm/rc-field-form@2.7.0, npm/rc-image@7.11.0, npm/rc-input-number@9.4.0, npm/rc-input@1.7.2, npm/rc-mentions@2.19.1, npm/rc-menu@9.16.0, npm/rc-motion@2.9.5, npm/rc-notification@5.6.2, npm/rc-pagination@5.0.0, npm/rc-picker@4.9.2, npm/rc-progress@4.0.0, npm/rc-rate@2.13.0, npm/rc-resize-observer@1.4.3, npm/rc-segmented@2.7.0, npm/rc-select@14.16.5, npm/rc-slider@11.1.8, npm/rc-steps@6.0.1, npm/rc-switch@4.1.0, npm/rc-table@7.50.2, npm/rc-tabs@15.5.0, npm/rc-textarea@1.9.0, npm/rc-tree-select@5.27.0, npm/rc-tree@5.13.0, npm/rc-upload@4.8.1, npm/rc-util@5.44.3, npm/react-dom@19.0.0, npm/react@19.0.0, npm/scroll-into-view-if-needed@3.1.0, npm/throttle-debounce@5.0.2

View full report↗︎

pkg-pr-new · 2025-01-07T15:51:45Z

Open in Stackblitz

More templates

npm i https://pkg.pr.new/ant-design/ant-design/antd@52258

commit: 366595a

codecov · 2025-01-07T15:56:37Z

Bundle Report

Changes will increase total bundle size by 3.15kB (0.09%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
antd.min-array-push	3.39MB	3.15kB (0.09%) ⬆️

zombieJ · 2025-01-13T07:39:26Z

这个样式从 padding 改成 margin 把~

zombieJ · 2025-01-14T03:59:46Z

components/collapse/Collapse.tsx

    if (children) {
-      return toArray(children).map((child) => child);
+      return toArray(children).map((child) =>
+        React.cloneElement(child as React.ReactElement<ItemType>, {


这里有问题，如果是通过 items 传递的是没有这些信息的。而且这么写感觉有点臃肿，可以考虑加个 context 来传递 classNames 和 styles

zombieJ · 2025-01-14T14:00:48Z

components/collapse/demo/_semantic.tsx

    },
  ];

  return (
-    <div style={{ position: 'absolute', inset: 0 }}>
+    <div style={{ position: 'absolute', inset: 0, margin: '42px 24px 50px' }}>


useToken 里取 token.marginXXL？这样如果是紧凑主题也会跟着变的。

import { useToken } from '../../theme/internal'; const [, token] = useToken(); return ( <div style={{ position: 'absolute', inset: 0, margin: token.marginXL }}>

components/collapse/Collapse.tsx

petercat-assistant bot reviewed Jan 6, 2025

View reviewed changes

thinkasany mentioned this pull request Jan 6, 2025

Ant Design v6 tasks #52115

Open

thinkasany added 3 commits January 10, 2025 16:15

feat: ConfigProvider support classNames and styles for Collapse

1dc2e74

update

2cf2900

type improve

7fd5a0d

thinkasany force-pushed the cp-collapse branch from faa4de9 to 691f24e Compare January 10, 2025 08:16

fix

af29d0d

thinkasany force-pushed the cp-collapse branch from 691f24e to af29d0d Compare January 10, 2025 08:17

thinkasany added 3 commits January 13, 2025 20:39

update padding to margin

8c53084

Merge branch 'next' into cp-collapse

c611ffc

Merge branch 'next' into cp-collapse

51680b9

zombieJ reviewed Jan 14, 2025

View reviewed changes

thinkasany added 3 commits January 14, 2025 16:51

update use item

901476b

fix

65df673

Merge branch 'next' into cp-collapse

72dbaca

zombieJ reviewed Jan 14, 2025

View reviewed changes

components/collapse/Collapse.tsx Show resolved Hide resolved

zombieJ self-assigned this Jan 14, 2025

improve semantic demo

366595a

zombieJ approved these changes Jan 15, 2025

View reviewed changes

thinkasany merged commit b440636 into ant-design:next Jan 15, 2025
37 of 38 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: ConfigProvider support Collapse semantic props `classNames` and `styles` #52258

feat: ConfigProvider support Collapse semantic props `classNames` and `styles` #52258

Uh oh!

thinkasany commented Jan 6, 2025 •

edited

Loading

Uh oh!

bolt-new-by-stackblitz bot commented Jan 6, 2025

Uh oh!

github-actions bot commented Jan 6, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Jan 6, 2025 •

edited

Loading

Uh oh!

petercat-assistant bot commented Jan 6, 2025

Uh oh!

petercat-assistant bot Jan 6, 2025

Uh oh!

codecov bot commented Jan 6, 2025 •

edited

Loading

Uh oh!

socket-security bot commented Jan 7, 2025 •

edited

Loading

Uh oh!

pkg-pr-new bot commented Jan 7, 2025 •

edited

Loading

Uh oh!

codecov bot commented Jan 7, 2025 •

edited

Loading

Uh oh!

zombieJ commented Jan 13, 2025

Uh oh!

zombieJ Jan 14, 2025

Uh oh!

zombieJ Jan 14, 2025

Uh oh!

zombieJ Jan 14, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat: ConfigProvider support Collapse semantic props classNames and styles #52258

feat: ConfigProvider support Collapse semantic props classNames and styles #52258

Uh oh!

Conversation

thinkasany commented Jan 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤔 This is a ...

🔗 Related Issues

📝 Change Log

Uh oh!

bolt-new-by-stackblitz bot commented Jan 6, 2025

Uh oh!

github-actions bot commented Jan 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👁 Visual Regression Report for PR #52258 Failed ❌

Uh oh!

github-actions bot commented Jan 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

petercat-assistant bot commented Jan 6, 2025

Walkthrough

Changes

Uh oh!

petercat-assistant bot Jan 6, 2025

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Jan 6, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

socket-security bot commented Jan 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

pkg-pr-new bot commented Jan 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Jan 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Uh oh!

zombieJ commented Jan 13, 2025

Uh oh!

zombieJ Jan 14, 2025

Choose a reason for hiding this comment

Uh oh!

zombieJ Jan 14, 2025

Choose a reason for hiding this comment

Uh oh!

zombieJ Jan 14, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat: ConfigProvider support Collapse semantic props `classNames` and `styles` #52258

feat: ConfigProvider support Collapse semantic props `classNames` and `styles` #52258

thinkasany commented Jan 6, 2025 •

edited

Loading

github-actions bot commented Jan 6, 2025 •

edited

Loading

github-actions bot commented Jan 6, 2025 •

edited

Loading

codecov bot commented Jan 6, 2025 •

edited

Loading

socket-security bot commented Jan 7, 2025 •

edited

Loading

pkg-pr-new bot commented Jan 7, 2025 •

edited

Loading

codecov bot commented Jan 7, 2025 •

edited

Loading