feat(spin): Support better customization with semantic classNames/styles as function by Susuperli · Pull Request #55157 · ant-design/ant-design

Susuperli · 2025-09-26T14:13:33Z

🤔 This is a ...

🔗 Related Issues

[RFC] Support better customization with semantic classNames/styles #54505

💡 Background and Solution

The specific problem to be addressed.

List the final API implementation and usage if needed.

If there are UI/interaction changes, consider providing screenshots or GIFs.

📝 Change Log

Read Keep a Changelog! Track your changes, 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	Support better customization with semantic classNames/styles as function
🇨🇳 Chinese	使用语义类名/样式作为函数，支持更好的自定义

…les as function - Support classNames/styles as object or function via useMergeSemantic - Add 5 semantic slots: root, wrapper, mask, indicator, tip - Add docs with proper classNames/styles API table entries - Add style-class demo with 4 examples: classNamesObject/classNamesFn/stylesObject/stylesFn - Add comprehensive semantic tests (object & function forms)

- Simplify style processing by removing unnecessary variables - Optimize test to use rerender instead of multiple render calls

…ate snapshots

… remove border

bolt-new-by-stackblitz · 2025-09-26T14:13:37Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-09-26T14:13:41Z

Important

Review skipped

Auto reviews are disabled on base/target branches other than the default branch.

Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Note

Other AI code review bot(s) detected

CodeRabbit has detected other AI code review bot(s) in this pull request and will avoid duplicating their findings in the review comments. This may lead to a less comprehensive review.

✨ Finishing touches

🧪 Generate unit tests

Create PR with unit tests
Post copyable unit tests in a comment

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

🧪 Early access (Sonnet 4.5): enabled

We are currently testing the Sonnet 4.5 model, which is expected to improve code review quality. However, this model may lead to increased noise levels in the review comments. Please disable the early access features if the noise level causes any inconvenience.

Note:

Public repositories are always opted into early access features.
You can enable or disable early access features from the CodeRabbit UI or by updating the CodeRabbit configuration file.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

github-actions · 2025-09-26T14:13:53Z

👁 Visual Regression Report for PR #55157 Passed ✅

🎯 Target branch: next (38fc1dc)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎

🎊 Congrats! No visual-regression diff found.

gemini-code-assist · 2025-09-26T14:13:53Z

Summary of Changes

Hello @Susuperli, I'm Gemini Code Assist¹! I'm currently reviewing this pull request and will post my feedback shortly. In the meantime, here's a summary to help you and other reviewers quickly get up to speed!

This pull request introduces significant enhancements to the Spin component, allowing for deeper and more dynamic customization of its appearance. By providing classNames and styles props that accept both objects and functions, developers can now precisely control the styling of individual semantic elements within the Spin component, adapting its look based on its properties or context. This change improves the component's flexibility and integration into diverse design systems.

Highlights

Enhanced Customization for Spin Component: The Spin component now supports more flexible customization through new classNames and styles props. These props allow developers to apply custom classes and inline styles to specific semantic parts of the Spin component.
Function Support for ClassNames and Styles: The classNames and styles props can now accept either plain objects or functions. When a function is provided, it receives the component's props as an argument, enabling dynamic styling based on the Spin component's current state or properties (e.g., fullscreen or size).
Semantic Structure Targeting: Customization can be applied to various semantic parts of the Spin component, including root, wrapper, mask, indicator, and tip, providing granular control over its appearance.
New Demo and Documentation: A new demo (style-class.tsx) has been added to showcase the usage of these new customization options, and the API documentation (both English and Chinese) has been updated to reflect the new classNames and styles props.

Using Gemini Code Assist

The full guide for Gemini Code Assist can be found on our documentation page, here are some quick tips.

Invoking Gemini

You can request assistance from Gemini at any point by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

Feature	Command	Description
Code Review	`/gemini review`	Performs a code review for the current pull request in its current state.
Pull Request Summary	`/gemini summary`	Provides a summary of the current pull request in its current state.
Comment	@gemini-code-assist	Responds in comments when explicitly tagged, both in pull request comments and review comments.
Help	`/gemini help`	Displays a list of available commands.

Customization

To customize Gemini Code Assist for GitHub experience, repository maintainers can create a configuration file and/or provide a custom code review style guide (such as PEP-8 for Python) by creating and adding files to a .gemini/ folder in the base of the repository. Detailed instructions can be found here.

Limitations & Feedback

Gemini Code Assist may make mistakes. Please leave feedback on any instances where its feedback is incorrect or counter productive. You can react with 👍 and 👎 on @gemini-code-assist comments. If you're interested in giving your feedback about your experience with Gemini Code Assist for Github and other Google products, sign up here.

You can also get AI-powered code generation, chat, as well as code reviews directly in the IDE at no cost with the Gemini Code Assist IDE Extension.

Review the Privacy Notices, Generative AI Prohibited Use Policy, Terms of Service, and learn how to configure Gemini Code Assist in GitHub here. Gemini can make mistakes, so double check it and use code with caution. ↩

github-actions · 2025-09-26T14:14:00Z

gemini-code-assist

Code Review

This pull request introduces a valuable feature by allowing classNames and styles props on the Spin component to be functions. This greatly enhances customization capabilities. The implementation is clean, leveraging a new useMergeSemantic hook for handling the logic, which is a good abstraction. The changes are also well-supported by new tests and a demonstration, ensuring the feature is robust. I have one suggestion to improve type definition clarity.

components/spin/index.tsx

pkg-pr-new · 2025-09-26T14:17:57Z

More templates

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

commit: 4bd774a

codecov · 2025-09-26T14:19:48Z

Bundle Report

Changes will increase total bundle size by 354 bytes (0.0%) ⬆️. This is within the configured threshold ✅

Detailed changes

Bundle name	Size	Change
antd.min-array-push	11.65MB	354 bytes (0.0%) ⬆️

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`	177 bytes	6.13MB	0.0%
`antd.js`	177 bytes	5.52MB	0.0%

codecov · 2025-09-26T14:26:10Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (38fc1dc) to head (4bd774a).
⚠️ Report is 5 commits behind head on next.

Additional details and impacted files

@@            Coverage Diff            @@
##              next    #55157   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files          798       798           
  Lines        14727     14726    -1     
  Branches      3896      3895    -1     
=========================================
- Hits         14727     14726    -1

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

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.

github-actions · 2025-09-30T07:49:13Z

🎉 Thank you for your contribution! If you have not yet joined our DingTalk community group, please feel free to join us (when joining, please provide the link to this PR).

🎉 感谢您的贡献！如果您还没有加入钉钉社区群，请扫描下方二维码加入我们（加群时请提供此 PR 链接）。

Susuperli added 4 commits September 26, 2025 21:51

fix(spin): address PR review feedback

2af951c

- Simplify style processing by removing unnecessary variables - Optimize test to use rerender instead of multiple render calls

chore(spin): unify classNames and add stylesObject/stylesFn demo; upd…

75f6634

…ate snapshots

style: update Spin style-class demo colors to be more tech-themed and…

0cf5060

… remove border

Susuperli mentioned this pull request Sep 26, 2025

feat(spin): Support better customization with semantic classNames/styles as function #55140

Closed

17 tasks

gemini-code-assist bot reviewed Sep 26, 2025

View reviewed changes

components/spin/index.tsx Show resolved Hide resolved

meet-student mentioned this pull request Sep 26, 2025

Support better customization with semantic classNames/styles #54995

Closed

63 tasks

li-jia-nan and others added 5 commits September 29, 2025 01:40

Merge branch 'next' into feat/spin-semantic-classes-v2

ed3e41b

Merge branch 'next' into feat/spin-semantic-classes-v2

db293e2

Merge branch 'next' into feat/spin-semantic-classes-v2

c257950

Merge branch 'next' into feat/spin-semantic-classes-v2

0a0c83b

Merge branch 'next' into feat/spin-semantic-classes-v2

4bd774a

zombieJ approved these changes Sep 30, 2025

View reviewed changes

dosubot bot added the lgtm This PR has been approved by a maintainer label Sep 30, 2025

zombieJ merged commit c7f5379 into ant-design:next Sep 30, 2025
39 checks passed

zombieJ mentioned this pull request Nov 4, 2025

docs: changelog of 6.0.0-alpha.4 #55604

Merged

17 tasks

dosubot bot mentioned this pull request Jan 19, 2026

support set className/style for container in Spin（Semantic Dom） #56655

Closed

Uh oh!

Comments

Conversation

Susuperli commented Sep 26, 2025

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Uh oh!

bolt-new-by-stackblitz bot commented Sep 26, 2025

Uh oh!

coderabbitai bot commented Sep 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Review skipped

Other AI code review bot(s) detected

Uh oh!

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

Uh oh!

👁 Visual Regression Report for PR #55157 Passed ✅

Uh oh!

gemini-code-assist bot commented Sep 26, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

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

Uh oh!

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Bundle Report

Affected Assets, Files, and Routes:

Assets Changed:

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

Uh oh!

github-actions bot commented Sep 30, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

coderabbitai bot commented Sep 26, 2025 •

edited

Loading

github-actions bot commented Sep 26, 2025 •

edited

Loading

github-actions bot commented Sep 26, 2025 •

edited

Loading

pkg-pr-new bot commented Sep 26, 2025 •

edited

Loading

codecov bot commented Sep 26, 2025 •

edited

Loading

codecov bot commented Sep 26, 2025 •

edited

Loading