feat(empty): Support better customization with semantic classNames/styles as function#55007
Conversation
|
|
|
Important Review skippedAuto reviews are disabled on base/target branches other than the default branch. Please check the settings in the CodeRabbit UI or the You can disable this status message by setting the Note Other AI code review bot(s) detectedCodeRabbit 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
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. 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. Comment |
👁 Visual Regression Report for PR #55007 Failed ❌
Important There are 7 diffs found in this PR: 🔄
|
|
|
There was a problem hiding this comment.
Summary of Changes
Hello @Susuperli, I'm Gemini Code Assist1! 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 Empty component within the Ant Design library, enabling developers to customize its appearance with greater flexibility. By allowing semantic classNames and styles to be defined as functions, the component can now adapt its styling dynamically based on its internal state or external props, leading to more robust and adaptable UI implementations. This change improves the overall customizability of the Empty component, aligning it with modern styling practices and developer expectations.
Highlights
- Enhanced Empty Component Customization: The
Emptycomponent now supports semanticclassNamesandstylesproperties, allowing for more granular control over its appearance. - Function-based Customization: The
classNamesandstylesproperties can now accept functions, enabling dynamic styling based on component props. - New Test Coverage: A new test case has been added to
ConfigProviderto validate the correct application of these new customization options for theEmptycomponent. - Updated Documentation and Demos: The API documentation for the
Emptycomponent has been updated, and a new demo (style-class.tsx) has been added to illustrate the usage of these new customization features.
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.
Footnotes
-
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. ↩
There was a problem hiding this comment.
Code Review
This pull request introduces a valuable enhancement to the Empty component by allowing classNames and styles to be provided as functions for more dynamic customization. The implementation looks solid, and the new documentation and snapshot tests are correctly updated.
My review includes a few suggestions:
- The
useMemoformergedPropsinEmpty/index.tsxis not effective and can be simplified. - A crucial test case is missing for the new function-based
classNamesandstylesprops. - The new demo could be improved by showcasing the function-based usage.
Overall, this is a great feature addition. Addressing these points will make it more robust and complete.
More templates
commit: |
Bundle ReportChanges will increase total bundle size by 7.92MB (211.09%) ⬆️
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
|
- 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
- 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
- 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
- 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
…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
…der 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
- 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.
df12e03 to
9b4cafd
Compare
|
改下comment 内容 @Susuperli |
好的，刚才点错了😂 |
- 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
done |
|
@Susuperli 可以不用点击同步，一般我们会帮你同步最新的next分支，由于是第一次 PR，PR 的 ci 会被阻止，需要人工 ap 才运行。 主要是需要等待核心成员验收，我们看了大概没问题了（ci完整通过的话）。就只需要耐心等待即可。 也是希望到时候豆酱老师有空来看的时候，ci 是一个完整的通过状态，就可以直接合了，不然还得等待，时间确实有久。 感谢你的贡献～ |
|
okk
…---- 回复的原邮件 ----
| 发件人 | ***@***.***> |
| 日期 | 2025年09月19日 19:49 |
| 收件人 | ***@***.***> |
| 抄送至 | ***@***.***>***@***.***> |
| 主题 | Re: [ant-design/ant-design] feat(empty): Support better customization with semantic classNames/styles as function (PR #55007) |
thinkasany left a comment (ant-design/ant-design#55007)
@Susuperli 可以不用点击同步，一般我们会帮你同步最新的next分支，由于是第一次 PR，PR 的 ci 会被阻止，需要人工 ap 才运行。
主要是需要等待核心成员验收，我们看了大概没问题了（ci完整通过的话）。就只需要耐心等待即可。
也是希望到时候豆酱老师有空来看的时候，ci 是一个完整的通过状态，就可以直接合了，不然还得等待，时间确实有久。
感谢你的贡献～
—
Reply to this email directly, view it on GitHub, or unsubscribe.
You are receiving this because you were mentioned.Message ID: ***@***.***>
|
Signed-off-by: 遇见同学 <1875694521@qq.com>
Signed-off-by: 遇见同学 <1875694521@qq.com>
|
@meet-student 更新完记得 ap ci，第一次 PR 的同学，ci不会自动运行。 |
| }; | ||
|
|
||
| // Object-based styles | ||
| const objectStyles = { |
There was a problem hiding this comment.
demo 参考下这个精简下。样式搭配和谐一些
classNames 使用同一个，然后 styles 根据 props (尽量选择 type、size、variant)做一下区分
- 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
- 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
- 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
|
🎉 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 链接）。 
|
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log