feat: ConfigProvider support `classNames` and `styles` for Descriptions #52120

thinkasany · 2024-12-25T03:30:16Z

🤔 This is a ...

🆕 New feature

	Name	Description	Components
	label	Label element used to describe the table's th	Descriptions
	content	Content element used to describe the table's td	Descriptions

Language	Changelog
🇺🇸 English	feat: ConfigProvider support `classNames` and `styles` for Descriptions
🇨🇳 Chinese	feat: ConfigProvider 支持配置Descriptions 组件的`classNames` 和`styles`

bolt-new-by-stackblitz · 2024-12-25T03:30:19Z

Run & review this pull request in StackBlitz Codeflow.

github-actions · 2024-12-25T03:30:30Z

👁 Visual Regression Report for PR #52120 Failed ❌

🎯 Target branch: feature (3c1f56c)
📖 View Full Report ↗︎

Expected (Branch feature)	Actual (Current PR)	Diff
button-color-variant.dark.png	button-color-variant.dark.css-var.png
button-debug-color-variant.compact.png	button-debug-color-variant.compact.css-var.png
button-debug-color-variant.dark.png	button-debug-color-variant.dark.css-var.png
button-debug-color-variant.default.png	button-debug-color-variant.default.css-var.png
checkbox-custom-line-width.compact.png	checkbox-custom-line-width.compact.css-var.png
checkbox-custom-line-width.dark.png	checkbox-custom-line-width.dark.css-var.png
checkbox-custom-line-width.default.png	checkbox-custom-line-width.default.css-var.png
checkbox-debug-line.compact.png	checkbox-debug-line.compact.css-var.png

Warning

There are more diffs not shown in the table. Please check the Full Report for details.

Important

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

Checked all diffs in the full report
Visual diff is acceptable

github-actions · 2024-12-25T03:30:30Z

petercat-assistant · 2024-12-25T03:30:34Z

Walkthrough

This pull request introduces a new feature to the ConfigProvider in the Ant Design library, allowing it to support classNames and styles for the Descriptions component. This enhancement provides more flexibility in styling and customizing the appearance of the Descriptions component.

Changes

Files	Summary
components/config-provider/context.ts	Added `DescriptionsConfig` type to include `classNames` and `styles` for `Descriptions`.
components/config-provider/index.en-US.md, components/config-provider/index.zh-CN.md	Updated documentation to reflect the new `classNames` and `styles` support for `Descriptions`.
components/descriptions/Cell.tsx	Integrated `DescriptionsContext` to apply `classNames` and `styles` to `Descriptions` cells.
components/descriptions/DescriptionsContext.ts	Added new context properties for `styles` and `classNames`.
components/descriptions/Item.ts	Added `styles` and `classNames` properties to `Descriptions` items.
components/descriptions/Row.tsx	Updated to use new `styles` and `classNames` properties for rendering.
components/descriptions/tests/index.test.tsx	Added tests to verify custom `styles` and `classNames` application.
components/descriptions/demo/_semantic.tsx	Added a new demo showcasing semantic DOM usage with `Descriptions`.
components/descriptions/index.en-US.md, components/descriptions/index.zh-CN.md	Updated documentation with semantic DOM example.
components/descriptions/index.tsx	Enhanced `Descriptions` component to support `styles` and `classNames`.

petercat-assistant · 2024-12-25T03:30:36Z

components/descriptions/Cell.tsx

-        {notEmpty(label) && <span style={labelStyle}>{label}</span>}
-        {notEmpty(content) && <span style={contentStyle}>{content}</span>}
+        {notEmpty(label) && <span style={{ ...labelStyle, ...styles?.label }}>{label}</span>}
+        {notEmpty(content) && <span style={{ ...labelStyle, ...styles?.content }}>{content}</span>}


Ensure that labelStyle is used for label and contentStyle for content. The current code mistakenly uses labelStyle for both.

pkg-pr-new · 2024-12-25T03:33:37Z

Open in Stackblitz

More templates

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

commit: 9575a82

codecov · 2024-12-25T03:42:21Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (3c1f56c) to head (9575a82).
Report is 1 commits behind head on feature.

Additional details and impacted files

@@            Coverage Diff            @@
##           feature    #52120   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          763       763           
  Lines        13735     13744    +9     
  Branches      3587      3590    +3     
=========================================
+ Hits         13735     13744    +9

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

zombieJ · 2024-12-26T03:22:43Z

components/descriptions/DescriptionsContext.ts

  contentStyle?: React.CSSProperties;
+  styles?: {


PR 里带上你这个变更的描述，我更新到 RFC 里去~

zombieJ · 2024-12-26T07:15:44Z

components/descriptions/demo/_semantic.tsx

+  en: {
+    root: 'root element',
+    label: 'label element',
+    content: 'content element',


少了 title extra，另外需要确认一下 title 是否是一个好名字，还是应该用 header

要不然 header 和 title 都开了，这两个语义的区别是是否包含padding，用户可以通过 header 调整padding，只关心具体字体相关的样式的话，选择使用title。

codecov · 2024-12-26T14:30:33Z

Bundle Report

Changes will decrease total bundle size by 6.23MB (-64.91%) ⬇️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
antd.min-array-push	3.37MB	6.23MB (-64.91%) ⬇️

zombieJ · 2024-12-30T07:21:55Z

components/descriptions/demo/_semantic.tsx

+const App: React.FC = () => {
+  const [locale] = useLocale(locales);
+  return (
+    <SemanticPreview


参考 input 的形式再加一个表单形式的预览

zombieJ · 2024-12-30T09:43:46Z

components/descriptions/demo/_semantic_bordered.tsx

@@ -0,0 +1,62 @@
+import React from 'react';


似乎占地有点多，加个 Switch 切换算了

zombieJ · 2024-12-31T03:47:51Z

components/descriptions/demo/_semantic.tsx

+  };
+
+  return (
+    <div ref={divRef} style={{ width: 240, height: 100 }}>


不要写死这个 width，现在看太小了：

至少也来 calc(100% - 32) & minWidth: 250 配合一下

…ign into cp-descriptions

zombieJ · 2024-12-31T10:33:23Z

components/descriptions/demo/_semantic.tsx

+      <Descriptions
+        title="User Info"
+        items={items}
+        extra={'extra'}


{`extra`} => "extra"，话说这个能改成 Button 之类的东西么。extra 文字视觉上看起来怪怪的

zombieJ · 2024-12-31T10:37:10Z

components/descriptions/demo/_semantic.tsx

+  };
+
+  return (
+    <div ref={divRef} style={{ width: '100%', height: 100 }}>


这个 height 不对呀，不需要这个高度的。另外可以做成上对齐的不，中间对齐的看起来还是比较怪异。

petercat-assistant bot reviewed Dec 25, 2024

View reviewed changes

thinkasany marked this pull request as draft December 25, 2024 09:52

thinkasany mentioned this pull request Dec 25, 2024

Ant Design v6 tasks #52115

Open

thinkasany added 3 commits December 26, 2024 10:57

draft

ed0fac4

fix

fd0e538

fix

25ecfc3

thinkasany force-pushed the cp-descriptions branch from 29db616 to 25ecfc3 Compare December 26, 2024 02:58

thinkasany marked this pull request as ready for review December 26, 2024 02:59

zombieJ reviewed Dec 26, 2024

View reviewed changes

thinkasany added 2 commits December 26, 2024 22:20

add header, title, extra

b1843ea

Merge branch 'feature' into cp-descriptions

7e795bd

Merge branch 'feature' into cp-descriptions

94a6cb2

zombieJ reviewed Dec 30, 2024

View reviewed changes

thinkasany added 2 commits December 30, 2024 16:10

add border preview

533811c

update

fd02f84

zombieJ reviewed Dec 30, 2024

View reviewed changes

thinkasany added 3 commits December 30, 2024 18:03

update demo

5fb2354

add divider

8e1d1b6

Merge branch 'feature' into cp-descriptions

7ab43b6

zombieJ reviewed Dec 31, 2024

View reviewed changes

thinkasany added 2 commits December 31, 2024 13:56

update width

ca1a0c3

Merge branch 'cp-descriptions' of github.com:thinkasany-forks/ant-des…

38978c9

…ign into cp-descriptions

Merge branch 'feature' into cp-descriptions

012ad61

zombieJ reviewed Dec 31, 2024

View reviewed changes

thinkasany added 2 commits January 2, 2025 10:27

update SemanticPreview demo

ce24dc6

Merge branch 'feature' into cp-descriptions

9575a82

zombieJ approved these changes Jan 2, 2025

View reviewed changes

zombieJ merged commit 0745996 into ant-design:feature Jan 2, 2025
40 checks passed

zombieJ mentioned this pull request Jan 6, 2025

docs: changelog of 5.23.0 #52256

Merged

16 tasks

Uh oh!

feat: ConfigProvider support classNames and styles for Descriptions #52120

feat: ConfigProvider support classNames and styles for Descriptions #52120

Uh oh!

Conversation

thinkasany commented Dec 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🤔 This is a ...

Uh oh!

bolt-new-by-stackblitz bot commented Dec 25, 2024

Uh oh!

github-actions bot commented Dec 25, 2024 • edited by zombieJ Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

👁 Visual Regression Report for PR #52120 Failed ❌

Uh oh!

github-actions bot commented Dec 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

petercat-assistant bot commented Dec 25, 2024

Walkthrough

Changes

Uh oh!

petercat-assistant bot Dec 25, 2024

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Uh oh!

codecov bot commented Dec 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

zombieJ Dec 26, 2024

Choose a reason for hiding this comment

Uh oh!

zombieJ Dec 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

thinkasany Dec 26, 2024

Choose a reason for hiding this comment

Uh oh!

codecov bot commented Dec 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Bundle Report

Uh oh!

zombieJ Dec 30, 2024

Choose a reason for hiding this comment

Uh oh!

zombieJ Dec 30, 2024

Choose a reason for hiding this comment

Uh oh!

zombieJ Dec 31, 2024

Choose a reason for hiding this comment

Uh oh!

zombieJ Dec 31, 2024

Choose a reason for hiding this comment

Uh oh!

zombieJ Dec 31, 2024

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

feat: ConfigProvider support `classNames` and `styles` for Descriptions #52120

feat: ConfigProvider support `classNames` and `styles` for Descriptions #52120

thinkasany commented Dec 25, 2024 •

edited

Loading

github-actions bot commented Dec 25, 2024 •

edited by zombieJ

Loading

github-actions bot commented Dec 25, 2024 •

edited

Loading

pkg-pr-new bot commented Dec 25, 2024 •

edited

Loading

codecov bot commented Dec 25, 2024 •

edited

Loading

zombieJ Dec 26, 2024 •

edited

Loading

codecov bot commented Dec 26, 2024 •

edited

Loading