feat(card): Support better customization with semantic classNames/styles as function#55161
feat(card): Support better customization with semantic classNames/styles as function#55161zombieJ merged 15 commits intoant-design:nextfrom
Conversation
|
|
|
|
👁 Visual Regression Report for PR #55161 Failed ❌
Important There are 3 diffs found in this PR: 🆕
|
|
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
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. 🧪 Early access (Sonnet 4.5): enabledWe 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:
Comment |
|
Hi @lovelts. Thanks for your contribution. The path |
Summary of ChangesHello @lovelts, 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 significantly enhances the customization capabilities of Ant Design components by introducing semantic Highlights
Ignored Files
Using Gemini Code AssistThe 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
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 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
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Code Review
This pull request introduces a valuable enhancement to the Card and Card.Meta components by allowing classNames and styles props to be functions. This provides greater flexibility for dynamic styling. The implementation looks solid, leveraging a new useMergeSemantic hook to handle the logic cleanly. The changes are well-tested with new unit tests covering both object and function-based props, and a new demo has been added to showcase the feature.
My review focuses on improving the accuracy of the updated API documentation. I've pointed out a typo in the prop types in the Chinese documentation and suggested a precision improvement for the English documentation.
More templates
commit: |
Bundle ReportChanges will decrease total bundle size by 314 bytes (-0.01%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
|
Co-authored-by: lijianan <[email protected]> Signed-off-by: 遇见同学 <[email protected]>
|
@meet-student 同步后，记得为新同学 ap ci workflow |
![accesslint[bot]](https://avatars.githubusercontent.com/in/1502?s=60&v=4){kind=small}
components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
Outdated
Show resolved
Hide resolved
components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
Outdated
Show resolved
Hide resolved
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## next #55161 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 798 798
Lines 14716 14712 -4
Branches 3893 3893
=========================================
- Hits 14716 14712 -4 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
怎么出现了两个 card |
|
重复了吧，另外一边可以关了，那边好几天没回复了，CI 也是挂的 |
Co-authored-by: heming <[email protected]>
Co-authored-by: lijianan <[email protected]> Signed-off-by: 遇见同学 <[email protected]>
Co-authored-by: lijianan <[email protected]> Signed-off-by: 遇见同学 <[email protected]>
There was a problem hiding this comment.
Pull Request Overview
This PR enhances the Card component to support better customization by allowing classNames and styles props to accept either objects or functions that receive component props as context. The feature enables dynamic styling based on component state and props.
- Update Card and CardMeta components to use
useMergeSemantichook for better semantic prop handling - Add function-based support for
classNamesandstylesprops with component context - Include comprehensive test coverage and demo examples for the new functionality
Reviewed Changes
Copilot reviewed 10 out of 10 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| components/index.ts | Export CardMetaProps type for external usage |
| components/card/index.zh-CN.md | Update Chinese documentation with function-based classNames/styles API |
| components/card/index.en-US.md | Update English documentation with function-based classNames/styles API |
| components/card/demo/style-class.tsx | Add comprehensive demo showcasing object and function-based styling |
| components/card/demo/style-class.md | Add demo documentation in both languages |
| components/card/tests/index.test.tsx | Add test coverage for both object and function-based semantic styling |
| components/card/tests/snapshots/demo.test.ts.snap | Update test snapshots for new demo |
| components/card/tests/snapshots/demo-extend.test.ts.snap | Update extended test snapshots |
| components/card/Meta.tsx | Refactor to use useMergeSemantic hook and support function-based props |
| components/card/Card.tsx | Refactor to use useMergeSemantic hook and support function-based props |
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
Co-authored-by: Copilot <[email protected]> Signed-off-by: 遇见同学 <[email protected]>
|
🎉 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 链接）。 
|
8 participants
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log