feat: ColorPicker semantic support ColorBlock customize#56607
feat: ColorPicker semantic support ColorBlock customize#56607
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 (beta)
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 #56607 Passed ✅
🎊 Congrats! No visual-regression diff found. 
|
|
|
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 significant improvements 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
|
|
Review the following changes in direct dependencies. Learn more about Socket for GitHub.
|
There was a problem hiding this comment.
Code Review
This pull request introduces semantic customization for the ColorPicker's color block by allowing classNames and styles to be passed for more granular control. The changes are well-structured, passing the customization props down to the ColorTrigger component. My review identifies a bug where a useMemo hook is missing dependencies, which would cause the UI not to update on prop changes. I've also included a minor suggestion to improve code consistency.
| innerStyle={styles.content} | ||
| /> | ||
| ), | ||
| [color, prefixCls], |
There was a problem hiding this comment.
The useMemo hook for containerNode is missing classNames and styles in its dependency array. Since classNames and styles are used within the memoized value calculation, they should be included to ensure that containerNode is re-computed when these props change. Without this, changes to classNames or styles will not be reflected in the UI.
| [color, prefixCls], | |
| [color, prefixCls, classNames, styles], |
| return <div className={`${prefixCls}-clear`} onClick={handleClick} />; | ||
| return ( | ||
| <div | ||
| className={`${prefixCls}-clear${className ? ` ${className}` : ''}`} |
There was a problem hiding this comment.
For consistency and cleaner class name concatenation, it's better to use the clsx utility, which is already a project dependency and used in other components. This avoids potential issues with extra spacing.
You'll need to add import { clsx } from 'clsx'; at the top of the file.
| className={`${prefixCls}-clear${className ? ` ${className}` : ''}`} | |
| className={clsx(`${prefixCls}-clear`, className)} |
size-limit report 📦
|
More templates
commit: |
Deploying ant-design with
|
| Latest commit: |
d8ffc9a
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://d82f1e7e.ant-design.pages.dev |
| Branch Preview URL: | https://color-picker-semantic.ant-design.pages.dev |
Deploying ant-design-next with
|
| Latest commit: |
d8ffc9a
|
| Status: | ✅ Deploy successful! |
| Preview URL: | https://4b17020f.ant-design-next.pages.dev |
| Branch Preview URL: | https://color-picker-semantic.ant-design-next.pages.dev |
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## feature #56607 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 807 807
Lines 14925 14927 +2
Branches 3936 3937 +1
=========================================
+ Hits 14925 14927 +2 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
Bundle ReportChanges will increase total bundle size by 670 bytes (0.02%) ⬆️. This is within the configured threshold ✅ Detailed changes
Affected Assets, Files, and Routes:view changes for bundle: antd.min-array-pushAssets Changed:
|
…6607) * feat: ColorPicker missing semantic * chore: fix lint * test: update snapshot * chore: fix lint
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log
rootsemantic uncorrectly applied to the popup element.root语义化错误的应用到弹出元素上的问题。