feat: ColorBlock support inner style #273
Conversation
Walkthrough向ColorBlock组件添加了两个可选的内部自定义属性（innerClassName和innerStyle），以支持对内部颜色元素的样式定制。同时更新了测试配置并添加了相应的测试用例验证新功能。 Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 分钟 Poem
🚥 Pre-merge checks | ✅ 3✅ Passed checks (3 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing touches
🧪 Generate unit tests (beta)
📜 Recent review detailsConfiguration used: Organization UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (3)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (2)
🔇 Additional comments (5)
✏️ Tip: You can disable this entire section by setting 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 |
Summary of ChangesHello @zombieJ, 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 new styling capabilities to the Highlights
🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console. 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
|
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## master #273 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 15 15
Lines 893 902 +9
Branches 89 89
=========================================
+ Hits 893 902 +9 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
|
🎊 PR Preview 51e8d4d has been successfully built and deployed to https://react-component-color-picker-preview-pr-273.surge.sh 🕐 Build time: 95.205s
🤖 By surge-preview |
![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 innerClassName and innerStyle props to the ColorBlock component, enhancing its styling flexibility for internal use. The implementation is straightforward and includes corresponding test coverage. My review includes a couple of suggestions to improve the clarity of the new prop documentation and to make the new test case more robust.
| /** Internal usage. Only used in antd ColorPicker semantic structure only */ | ||
| innerClassName?: string; | ||
| /** Internal usage. Only used in antd ColorPicker semantic structure only */ | ||
| innerStyle?: React.CSSProperties; |
There was a problem hiding this comment.
The comments for innerClassName and innerStyle are a bit verbose and could be more direct. The phrase "semantic structure only" is also slightly ambiguous. Consider using the @internal JSDoc tag to signify internal usage, which is a standard convention and can be picked up by documentation generation tools. A more concise comment would improve readability and maintainability.
| /** Internal usage. Only used in antd ColorPicker semantic structure only */ | |
| innerClassName?: string; | |
| /** Internal usage. Only used in antd ColorPicker semantic structure only */ | |
| innerStyle?: React.CSSProperties; | |
| /** @internal For internal antd ColorPicker usage only. */ | |
| innerClassName?: string; | |
| /** @internal For internal antd ColorPicker usage only. */ | |
| innerStyle?: React.CSSProperties; |
| prefixCls="test" | ||
| color="red" | ||
| innerClassName="my-inner-class" | ||
| innerStyle={{ color: '#903' }} |
There was a problem hiding this comment.
The test for innerStyle uses color: '#903'. The color CSS property sets the color of text, but the div being tested does not contain any text. While this test is technically correct and will pass, it doesn't meaningfully verify the visual effect of the applied style. To make the test more robust, consider using a style property that has a visible effect on a div element, such as border.
| innerStyle={{ color: '#903' }} | |
| innerStyle={{ border: '1px solid green' }} |
|
|
||
| const innerDiv = container.querySelector('.test-color-block-inner'); | ||
| expect(innerDiv).toHaveClass('my-inner-class'); | ||
| expect(innerDiv).toHaveStyle({ color: '#903' }); |
There was a problem hiding this comment.
To align with the suggestion to test a more meaningful style property, please update this assertion to check for the border style instead of color.
| expect(innerDiv).toHaveStyle({ color: '#903' }); | |
| expect(innerDiv).toHaveStyle({ border: '1px solid green' }); |
Summary by CodeRabbit
发布说明
✏️ Tip: You can customize this high-level summary in your review settings.