Skip to content

Comments

feat(Message): support classNames and styles for component and ConfigProvider#52793

Merged
zombieJ merged 4 commits intonextfrom
cp-message
Feb 14, 2025
Merged

feat(Message): support classNames and styles for component and ConfigProvider#52793
zombieJ merged 4 commits intonextfrom
cp-message

Conversation

@thinkasany
Copy link
Member

🤔 This is a ...

  • 🆕 New feature

📝 Change Log

Language Changelog
🇺🇸 English feat: ConfigProvider support classnames and styles for message
🇨🇳 Chinese feat: ConfigProvider support classnames and styles for message

@bolt-new-by-stackblitz
Copy link

Review PR in StackBlitz Codeflow Run & review this pull request in StackBlitz Codeflow.

@github-actions
Copy link
Contributor

github-actions bot commented Feb 13, 2025

Preview failed

@github-actions
Copy link
Contributor

github-actions bot commented Feb 13, 2025

👁 Visual Regression Report for PR #52793 Failed ❌

🎯 Target branch: next (3cf11fc)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🔄 2 changed

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

Important

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

  • Visual diff is acceptable

@petercat-assistant
Copy link

Walkthrough

This pull request introduces a new feature to the ConfigProvider, allowing support for classnames and styles specifically for messages. The changes include updates to type definitions, component configurations, and documentation to accommodate the new styling capabilities for message components.

Changes

Files Summary
components/config-provider/context.ts, components/config-provider/index.tsx Updated type definitions and component configurations to support message classnames and styles.
components/config-provider/index.en-US.md, components/config-provider/index.zh-CN.md Updated documentation to reflect new message styling options.
components/message/PurePanel.tsx, components/message/useMessage.tsx Enhanced message components to utilize new classnames and styles.
components/message/tests/hooks.test.tsx Added tests to verify the new classnames and styles functionality.
components/message/demo/_semantic.tsx Added a demo for semantic DOM usage.
components/message/index.en-US.md, components/message/index.zh-CN.md Updated message component documentation with semantic DOM information.
components/message/interface.ts Introduced new types for semantic names used in styling.

@thinkasany thinkasany mentioned this pull request Feb 13, 2025
@github-actions
Copy link
Contributor

github-actions bot commented Feb 13, 2025

size-limit report 📦

Path Size
dist/antd.min.js 509.05 KB (+295 B 🔺)
dist/antd-with-locales.min.js 596.48 KB (+380 B 🔺)

@pkg-pr-new
Copy link

pkg-pr-new bot commented Feb 13, 2025

Open in Stackblitz

More templates

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

commit: 5d44b54

@codecov
Copy link

codecov bot commented Feb 13, 2025

Bundle Report

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

Detailed changes
Bundle name Size Change
antd.min-array-push 11.65MB 6.35kB (0.05%) ⬆️

Affected Assets, Files, and Routes:

view changes for bundle: antd.min-array-push

Assets Changed:

Asset Name Size Change Total Size Change (%)
antd-with-locales.js 3.17kB 6.08MB 0.05%
antd.js 3.17kB 5.57MB 0.06%

Files in antd-with-locales.js:

  • ./components/config-provider/context.ts → Total Size: 1.51kB

Files in antd.js:

  • ./components/config-provider/context.ts → Total Size: 1.51kB

@cloudflare-workers-and-pages
Copy link

cloudflare-workers-and-pages bot commented Feb 13, 2025

Deploying ant-design with  Cloudflare Pages  Cloudflare Pages

Latest commit: 5d44b54
Status: ✅  Deploy successful!
Preview URL: https://6e247074.ant-design.pages.dev
Branch Preview URL: https://cp-message.ant-design.pages.dev

View logs

@codecov
Copy link

codecov bot commented Feb 13, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (3cf11fc) to head (5d44b54).
Report is 1 commits behind head on next.

Additional details and impacted files
@@            Coverage Diff            @@
##              next    #52793   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          765       765           
  Lines        13790     13798    +8     
  Branches      3612      3616    +4     
=========================================
+ Hits         13790     13798    +8     

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

const iconElement = icon || (type && TypeIcon[type]);
const iconNode: React.ReactNode = cloneElement(iconElement, {
className: classNames(
React.isValidElement(iconElement)
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

改造一下 cloneElement 吧,支持 renderProps 入参为原始的 props,这样可以少写一次 React.isValidElement

: '',
PureContentClassNames?.icon,
),
style: { ...styles?.icon },
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

style 也可能存在原来就写的情况

type,
icon,
children,
classNames: PureContentClassNames,
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

一般组件才会大写,这里不用大写。可以写成 propsClassNames

}) => {
const iconElement = icon || (type && TypeIcon[type]);
const iconNode: React.ReactNode = cloneElement(iconElement, (currentProps) => ({
className: classNames(currentProps?.className, PureContentClassNames?.icon),
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

这里应该是不需要 ?. 的,能执行到这个函数是一定有 props 的

@zombieJ zombieJ merged commit 9034edf into next Feb 14, 2025
42 checks passed
@zombieJ zombieJ deleted the cp-message branch February 14, 2025 07:14
@Wxh16144 Wxh16144 changed the title feat: ConfigProvider support classnames and styles for message feat(Message): support classNames and styles for component and ConfigProvider Nov 28, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants