feat(space): Support better customization with semantic classNames/styles as function#55031
feat(space): Support better customization with semantic classNames/styles as function#55031zombieJ merged 13 commits intoant-design:nextfrom
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
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 #55031 Failed ❌
Important There are 3 diffs found in this PR: 🆕
|
|
|
![gemini-code-assist[bot]](https://avatars.githubusercontent.com/in/956858?s=60&v=4){kind=small}
There was a problem hiding this comment.
Summary of Changes
Hello @hcjlxl, 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 the Space component by introducing support for functions as values for its classNames and styles props. This allows developers to apply dynamic classes and inline styles to the component's internal semantic elements, such as the root, individual items, and separators, based on the component's current properties. This change provides a more powerful and flexible way to tailor the Space component's appearance to specific application needs.
Highlights
- Dynamic Styling with Functions: The
Spacecomponent now supportsclassNamesandstylesprops as functions, allowing for dynamic styling based on component props. - Enhanced Customization: This feature provides greater flexibility for developers to customize the appearance of
Spacecomponent's internal semantic elements. - New Demo and Tests: A new demo (
style-class.tsx) and corresponding test cases have been added to showcase and validate the new functionalclassNamesandstylesprops. - API Documentation Update: The API documentation for the
Spacecomponent has been updated to reflect the expanded types forclassNamesandstyles.
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 Space component by allowing classNames and styles to be passed as functions, enabling more dynamic and conditional styling. The implementation is solid, and the new demo and tests effectively cover the new functionality. I have a few suggestions to improve type safety in the tests and implementation, and to make the documentation even clearer for other developers. Overall, great work on this feature!
Bundle ReportChanges will decrease total bundle size by 7.91MB (-67.85%) ⬇️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
|
More templates
commit: |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## next #55031 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 793 793
Lines 14640 14641 +1
Branches 3891 3891
=========================================
+ Hits 14640 14641 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
类型any 都调整下 |
|
还有 ai 给的建议， 对比你的另外一个 pr 的要求再调整下，就差不多了 |
调整好了 |
暂时看没什么问题了 |
Signed-off-by: 遇见同学 <[email protected]>
Signed-off-by: 遇见同学 <[email protected]>
Signed-off-by: 遇见同学 <[email protected]>
| @@ -0,0 +1,65 @@ | |||
| import * as React from 'react'; | |||
There was a problem hiding this comment.
有点复杂了，Space 比较简单。不用留太多，这个挺好的：
- 简化成 2 个 Demo，一个水平通过 func call 根据是否是水平属性生成上图的例子
- 垂直方向使用这个改背景色的，同时添加 12px padding：
* 不需要文字描述，代码可以自己看的。
* Demo 之间使用 Flex vertical + gap small 来做间距
|
🎉 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 链接）。 
|
5 participants
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log