Skip to content

Comments

feat(Spin): support classNames and styles for component and ConfigProvider#52823

Merged
zombieJ merged 4 commits intonextfrom
cp-spin
Feb 17, 2025
Merged

feat(Spin): support classNames and styles for component and ConfigProvider#52823
zombieJ merged 4 commits intonextfrom
cp-spin

Conversation

@thinkasany
Copy link
Member

中文版模板 / Chinese template

🤔 This is a ...

  • 🆕 New feature

📝 Change Log

Language Changelog
🇺🇸 English feat: ConfigProvider support classNames and styles for Spin
🇨🇳 Chinese feat: ConfigProvider support classNames and styles for Spin

@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 15, 2025

👁 Visual Regression Report for PR #52823 Failed ❌

🎯 Target branch: next (676ccd5)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🔄 96 changed

Expected (Branch next) Actual (Current PR) Diff
card-component-token.compact.png card-component-token.compact.png card-component-token.compact.png card-component-token.compact.png
card-component-token.compact.png card-component-token.compact.png card-component-token.compact.css-var.png card-component-token.compact.css-var.png
card-component-token.dark.png card-component-token.dark.png card-component-token.dark.png card-component-token.dark.png
card-component-token.dark.png card-component-token.dark.png card-component-token.dark.css-var.png card-component-token.dark.css-var.png
card-component-token.default.png card-component-token.default.png card-component-token.default.png card-component-token.default.png
card-component-token.default.png card-component-token.default.png card-component-token.default.css-var.png card-component-token.default.css-var.png
card-tabs.compact.png card-tabs.compact.png card-tabs.compact.png card-tabs.compact.png
card-tabs.compact.png card-tabs.compact.png card-tabs.compact.css-var.png card-tabs.compact.css-var.png

Warning

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


Important

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

  • Checked all diffs in the full report
  • Visual diff is acceptable

@github-actions
Copy link
Contributor

github-actions bot commented Feb 15, 2025

Preview is ready

@petercat-assistant
Copy link

Walkthrough

This pull request introduces a new feature to the ConfigProvider component, enabling support for classNames and styles for the Spin component. This enhancement allows for more customizable styling options for the Spin component.

Changes

Files Summary
components/config-provider/context.ts Updated SpinConfig to include classNames and styles.
components/config-provider/index.en-US.md, components/config-provider/index.zh-CN.md Updated documentation to reflect new classNames and styles support for Spin.
components/spin/Indicator/Looper.tsx, components/spin/Indicator/index.tsx Added className and style props to support custom styling.
components/spin/tests/index.test.tsx Added tests for custom styles and classNames.
components/spin/demo/_semantic.tsx Added a demo for semantic DOM usage with Spin.
components/spin/index.en-US.md, components/spin/index.zh-CN.md Added documentation for semantic DOM usage.
components/spin/index.tsx Enhanced Spin component to support classNames and styles.

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

github-actions bot commented Feb 15, 2025

size-limit report 📦

Path Size
dist/antd.min.js 509.23 KB (+125 B 🔺)
dist/antd-with-locales.min.js 596.68 KB (+144 B 🔺)

@pkg-pr-new
Copy link

pkg-pr-new bot commented Feb 15, 2025

Open in Stackblitz

More templates

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

commit: 64f31cd

@codecov
Copy link

codecov bot commented Feb 15, 2025

Bundle Report

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

Detailed changes
Bundle name Size Change
antd.min-array-push 3.75MB -7.9MB (-67.79%) ⬇️

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.min.js (New) 2.03MB 2.03MB 100.0% 🚀
antd.min.js (New) 1.72MB 1.72MB 100.0% 🚀
antd-with-locales.js (Deleted) -6.08MB 0 bytes -100.0% 🗑️
antd.js (Deleted) -5.57MB 0 bytes -100.0% 🗑️

Files in antd-with-locales.min.js:

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

Files in antd.min.js:

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

@cloudflare-workers-and-pages
Copy link

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

Deploying ant-design with  Cloudflare Pages  Cloudflare Pages

Latest commit: 64f31cd
Status: ✅  Deploy successful!
Preview URL: https://5116f416.ant-design.pages.dev
Branch Preview URL: https://cp-spin.ant-design.pages.dev

View logs

@codecov
Copy link

codecov bot commented Feb 15, 2025

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 100.00%. Comparing base (185258f) to head (64f31cd).
Report is 2 commits behind head on next.

Additional details and impacted files
@@            Coverage Diff            @@
##              next    #52823   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          765       765           
  Lines        13799     13803    +4     
  Branches      3617      3620    +3     
=========================================
+ Hits         13799     13803    +4     

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

@zombieJ
Copy link
Member

zombieJ commented Feb 17, 2025

最好搞两个例子,现在 root 这解释其实不如直接 hover 能看到效果的比较好:

截屏2025-02-17 10 32 58

<span className={classNames(holderClassName, percent > 0 && hideClassName)}>
<span className={classNames(dotClassName, `${prefixCls}-dot-spin`)}>
<span
className={classNames(dotClassName, className, `${prefixCls}-dot-spin`)}
Copy link
Member

Choose a reason for hiding this comment

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

自定义的 indicator 是放在最外侧,那这边的 className 也是应该在最外侧才对

@zombieJ zombieJ merged commit 8109eca into next Feb 17, 2025
42 checks passed
@zombieJ zombieJ deleted the cp-spin branch February 17, 2025 11:33
@Wxh16144 Wxh16144 changed the title feat: ConfigProvider support classNames and styles for Spin feat(Spin): 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