feat(float-button): Support better customization with semantic classNames/styles as function by meet-student · Pull Request #54917 · ant-design/ant-design

meet-student · 2025-09-08T03:36:49Z

🤔 This is a ...

🔗 Related Issues

Describe the source of related requirements, such as links to relevant issue discussions.

For example: close #xxxx, fix #xxxx

💡 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	Support better customization with semantic classNames/styles as function

…ames/styles as function

…classNames/styles as function

bolt-new-by-stackblitz · 2025-09-08T03:36:52Z

Run & review this pull request in StackBlitz Codeflow.

coderabbitai · 2025-09-08T03:36:56Z

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.

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.

✨ 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

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

github-actions · 2025-09-08T03:36:58Z

github-actions · 2025-09-08T03:37:00Z

👁 Visual Regression Report for PR #54917 Failed ❌

🎯 Target branch: next (e4b1d20)
📖 View Full Report ↗︎
📖 Alternative Report ↗︎
📊 Summary: 🔄 1 changed, 🆕 6 added

Expected (Branch next)	Actual (Current PR)	Diff
list-vertical.dark.png	list-vertical.dark.png
	drawer-resizable.compact.png	🆕🆕🆕 Added 🆕🆕🆕
	drawer-resizable.dark.png	🆕🆕🆕 Added 🆕🆕🆕
	drawer-resizable.default.png	🆕🆕🆕 Added 🆕🆕🆕
	float-button-style-class.compact.png	🆕🆕🆕 Added 🆕🆕🆕
	float-button-style-class.dark.png	🆕🆕🆕 Added 🆕🆕🆕
	float-button-style-class.default.png	🆕🆕🆕 Added 🆕🆕🆕

Important

There are 7 diffs found in this PR: 🔄 1 changed, 🆕 6 added.
Please check all items:

Visual diff is acceptable

gemini-code-assist

Summary of Changes

Hello @meet-student, 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 a significant enhancement to the FloatButton component by enabling more flexible and dynamic styling. Developers can now define classNames and styles as functions, which receive the component's properties, allowing for highly conditional and adaptive visual adjustments. This change provides greater control over the component's appearance without altering its core functionality.

Highlights

Enhanced Customization for FloatButton: The FloatButton component now supports functions for its classNames and styles props, allowing for dynamic application of CSS classes and inline styles based on the component's current properties (e.g., type, shape).
New Demo and Documentation: A new demo (style-class.tsx) and corresponding documentation (style-class.md) have been added to showcase how to leverage the new function-based classNames and styles for advanced customization.
Improved Type Definitions and Internal Logic: The type definitions for FloatButtonProps have been updated to reflect the new function capabilities, and the internal useMergeSemantic hook integration has been adjusted to correctly pass component props for dynamic evaluation.

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 in your pull request via creating an issue comment (i.e. comment on the pull request page) using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands.

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 issue 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. ↩

gemini-code-assist

Code Review

This pull request introduces a new feature to the FloatButton component, allowing classNames and styles props to be provided as functions for more dynamic customization. The implementation is solid, with new types, logic to handle function props, and corresponding tests and documentation updates. My review includes a couple of suggestions for improvement: one is to remove an unnecessary as any type cast in a test file to enhance type safety, and the other is to correct the documentation for FloatButton.Group which incorrectly removes the styles prop.

components/float-button/__tests__/index.test.tsx

components/float-button/index.en-US.md

codecov · 2025-09-08T03:53:42Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (next@acb7f00). Learn more about missing BASE report.
⚠️ Report is 2 commits behind head on next.

Additional details and impacted files

@@           Coverage Diff            @@
##             next    #54917   +/-   ##
========================================
  Coverage        ?   100.00%           
========================================
  Files           ?       792           
  Lines           ?     14589           
  Branches        ?      3881           
========================================
  Hits            ?     14589           
  Misses          ?         0           
  Partials        ?         0

☔ 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.

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: 遇见同学 <[email protected]>

pkg-pr-new · 2025-09-08T07:53:13Z

More templates

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

commit: caeb185

codecov · 2025-09-08T07:53:32Z

Bundle Report

Changes will increase total bundle size by 7.85MB (209.25%) ⬆️⚠️, exceeding the configured threshold of 5%.

Bundle name	Size	Change
antd.min-array-push	11.59MB	7.85MB (209.25%) ⬆️⚠️

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` (New)	6.1MB	6.1MB	100.0% 🚀
`antd.js` (New)	5.5MB	5.5MB	100.0% 🚀
~~`antd-with-locales.min.js`~~ (Deleted)	-2.06MB	0 bytes	-100.0% 🗑️
~~`antd.min.js`~~ (Deleted)	-1.69MB	0 bytes	-100.0% 🗑️

- Add classNames and styles props for semantic customization - Support four semantic parts: root, image, description, footer - Use advanced useMergeSemantic hook with type parameters - Add SemanticClassNamesType and SemanticStylesType utility types - Implement mergedProps pattern for conditional semantic logic - Add comprehensive semantic demo with style-class example - Add ConfigProvider-level test for Empty semantic customization - Update API documentation in both English and Chinese - Follow PR ant-design#54917 pattern for consistent semantic implementation - Based on next branch with latest semantic infrastructure

…4917 pattern - Simplify semantic test cases to match FloatButton implementation - Use more focused test structure with rerender pattern - Add proper EmptyProps type import for type safety - Follow exact naming convention from FloatButton tests: * 'should apply dynamic classNames and styles from props function' * 'should apply object classNames and styles' - Remove overly complex test cases, keep essential functionality tests - Ensure test structure matches established Ant Design patterns Based on FloatButton semantic tests analysis from PR ant-design#54917

- Add classNames and styles props for semantic customization - Support four semantic parts: root, image, description, footer - Use advanced useMergeSemantic hook with type parameters - Add SemanticClassNamesType and SemanticStylesType utility types - Implement mergedProps pattern for conditional semantic logic - Add comprehensive semantic demo with style-class example - Add ConfigProvider-level test for Empty semantic customization - Update API documentation in both English and Chinese - Follow PR ant-design#54917 pattern for consistent semantic implementation - Based on next branch with latest semantic infrastructure

…4917 pattern - Simplify semantic test cases to match FloatButton implementation - Use more focused test structure with rerender pattern - Add proper EmptyProps type import for type safety - Follow exact naming convention from FloatButton tests: * 'should apply dynamic classNames and styles from props function' * 'should apply object classNames and styles' - Remove overly complex test cases, keep essential functionality tests - Ensure test structure matches established Ant Design patterns Based on FloatButton semantic tests analysis from PR ant-design#54917

…yles as function (#55007) * feat(empty): add semantic customization support based on next branch - Add classNames and styles props for semantic customization - Support four semantic parts: root, image, description, footer - Use advanced useMergeSemantic hook with type parameters - Add SemanticClassNamesType and SemanticStylesType utility types - Implement mergedProps pattern for conditional semantic logic - Add comprehensive semantic demo with style-class example - Add ConfigProvider-level test for Empty semantic customization - Update API documentation in both English and Chinese - Follow PR #54917 pattern for consistent semantic implementation - Based on next branch with latest semantic infrastructure * test: add snapshots for Empty semantic style-class demo - Add snapshot for style-class.tsx demo in demo.test.ts.snap - Add snapshot for style-class.tsx demo in demo-extend.test.ts.snap - Snapshots include semantic classNames and styles verification: * custom-empty-root with backgroundColor, padding, borderRadius * custom-empty-image with filter grayscale * custom-empty-description with color and fontWeight * custom-empty-footer with marginTop - Verify semantic customization is properly applied to DOM elements - Complete test coverage for Empty component semantic features * fix: improve Empty semantic implementation based on review feedback - Add default semantic classNames for image, description, footer parts - Update API documentation with detailed descriptions and function type support - Follow FloatButton pattern for consistent semantic implementation - Improve documentation clarity for classNames and styles props - Support both object and function-based semantic customization - Ensure proper semantic class application to DOM elements * fix: address PR review feedback for Empty semantic implementation - Remove ineffective React.useMemo for mergedProps, use simple object spread - Add comprehensive function-based semantic tests in describe('semantic classNames/styles') - Add ConfigProvider-level function-based semantic tests - Enhance demo to showcase both object and function-based semantic customization - Add interactive demo with Switch to demonstrate dynamic function-based styling - Test function parameter passing and prop dependency handling - Ensure complete test coverage for both object and function semantic patterns Addresses gemini-code-assist bot feedback: 1. Fixed ineffective useMemo with props dependency 2. Added function-based semantic test coverage 3. Enhanced demo to show function-based capabilities * refactor: align Empty semantic tests with FloatButton PR #54917 pattern - Simplify semantic test cases to match FloatButton implementation - Use more focused test structure with rerender pattern - Add proper EmptyProps type import for type safety - Follow exact naming convention from FloatButton tests: * 'should apply dynamic classNames and styles from props function' * 'should apply object classNames and styles' - Remove overly complex test cases, keep essential functionality tests - Ensure test structure matches established Ant Design patterns Based on FloatButton semantic tests analysis from PR #54917 * docs: improve Empty semantic API documentation and remove ConfigProvider tests - Update Chinese documentation for classNames and styles properties - Use more concise and consistent descriptions matching Ant Design standards - Update version from 5.23.0 to 6.0.0 for semantic API - Add missing documentation for style-class demo in both languages - Remove ConfigProvider-level Empty semantic tests as requested - Keep semantic tests focused in Empty component test file only Changes: - components/empty/index.zh-CN.md: Improved API descriptions - components/empty/demo/style-class.md: Added demo documentation - components/config-provider/__tests__/style.test.tsx: Removed Empty tests * refactor: clean up Empty semantic tests and demo - Remove remaining Empty semantic tests from ConfigProvider test file - Simplify style-class demo to basic implementation - Remove demo documentation to keep it minimal - Focus semantic tests in Empty component test file only This ensures cleaner separation of concerns and avoids test duplication. * fix: resolve Empty semantic classNames duplication and update documentation * refactor: address Meet-student review feedback for Empty semantic demo - Fix documentation: change 'buttons' to 'empty' in both Chinese and English - Remove iframe attribute from demo documentation - Simplify demo to show 4 different usage patterns without complex toggle logic - Add comprehensive examples: object/function forms with external/inline definitions - Fix TypeScript warnings and improve code clarity * refactor: address Meet-student review feedback and optimize demo structure - Remove version numbers from API documentation (classNames/styles) - Simplify demo to show 4 separate examples for each semantic property - Add comprehensive ConfigProvider tests for function-based semantic usage - Optimize demo structure: separate objectClassNames, objectStyles, functionClassNames, functionStyles - Each demo example focuses on single property for better clarity * refactor(empty): Optimize the type definitions and style types in the Empty component demo. * fix: ensure CSS-in-JS prefix classes are applied to Empty semantic elements - Add manual prefix class application for image, description, and footer elements - Remove emptyClassNames from useMergeSemantic to avoid duplication - Ensure CSS-in-JS styles can properly target semantic elements - Fix issue where custom prefixCls wouldn't work with CSS select * test: Update snapshot * refactor(components/empty): Remove unused merge property code * Update components/empty/demo/style-class.md Signed-off-by: 遇见同学 <[email protected]> * Update components/empty/demo/style-class.md Signed-off-by: 遇见同学 <[email protected]> * refactor(empty): simplify style-class demo following pagination pattern - Keep four essential objects: classNamesObject, classNamesFn, stylesObject, stylesFn - Use same classNames across examples with sharedClassNames - Differentiate styles based on props in stylesFn - Reduce code from 115 to 68 lines (40% reduction) - Add clear English comments for each object - Update snapshots for new structure - Follow pagination demo concise style * test(empty): update snapshots after style-class demo refactor - Update demo.test.ts.snap with new simplified structure - Update demo-extend.test.ts.snap accordingly - Snapshots now reflect the refactored demo with 4 examples - All tests passing with updated snapshots * refactor(empty): simplify style-class demo - Remove classNamesObject and classNamesFn as suggested 'use style instead' - Reduce to 2 examples as requested 'use two examples only' - Keep Object styles and Function styles to demonstrate styles usage - Update snapshots accordingly --------- Signed-off-by: 遇见同学 <[email protected]> Co-authored-by: lijianan <[email protected]> Co-authored-by: 遇见同学 <[email protected]>

meet-student added 2 commits September 5, 2025 14:12

feat(float-button): Support better customization with semantic classN…

87a8b97

…ames/styles as function

feat(float-button-group): Support better customization with semantic …

ef89913

…classNames/styles as function

gemini-code-assist bot reviewed Sep 8, 2025

View reviewed changes

components/float-button/__tests__/index.test.tsx Outdated Show resolved Hide resolved

components/float-button/index.en-US.md Show resolved Hide resolved

Merge branch 'next' into float-button

942f446

meet-student and others added 3 commits September 8, 2025 12:01

Update components/float-button/__tests__/index.test.tsx

11284f7

Co-authored-by: gemini-code-assist[bot] <176961590+gemini-code-assist[bot]@users.noreply.github.com> Signed-off-by: 遇见同学 <[email protected]>

Merge branch 'float-button-group' into float-button

72db0fc

update deom and type

6edca90

Merge branch 'next' into float-button

caeb185

zombieJ approved these changes Sep 9, 2025

View reviewed changes

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

zombieJ merged commit a94dfcc into ant-design:next Sep 9, 2025
39 checks passed

meet-student mentioned this pull request Sep 13, 2025

Support better customization with semantic classNames/styles #54995

Closed

63 tasks

meet-student deleted the float-button branch October 1, 2025 02:48

zombieJ mentioned this pull request Nov 4, 2025

docs: changelog of 6.0.0-alpha.4 #55604

Merged

17 tasks

Uh oh!

Comments

Conversation

meet-student commented Sep 8, 2025

🤔 This is a ...

🔗 Related Issues

💡 Background and Solution

📝 Change Log

Uh oh!

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

Uh oh!

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

Uh oh!

Other AI code review bot(s) detected

Review skipped

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

👁 Visual Regression Report for PR #54917 Failed ❌

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

Uh oh!

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

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

Uh oh!

Uh oh!

codecov bot commented Sep 8, 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!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

coderabbitai bot commented Sep 8, 2025 •

edited

Loading

github-actions bot commented Sep 8, 2025 •

edited

Loading

github-actions bot commented Sep 8, 2025 •

edited by zombieJ

Loading

codecov bot commented Sep 8, 2025 •

edited

Loading

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

edited

Loading

codecov bot commented Sep 8, 2025 •

edited

Loading