feat(menu): Support better customization with semantic classNames/styles as function#54955
feat(menu): Support better customization with semantic classNames/styles as function#54955zombieJ merged 1 commit intoant-design:nextfrom meet-student:menu
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 #54955 Failed ❌
Important There are 5 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 @meet-student, 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 improves the customization options for the Menu component by allowing developers to define classNames and styles not just as static objects, but also as functions. This change provides greater flexibility, enabling dynamic styling and class assignment based on the current state or properties of the menu, leading to more adaptable and semantically rich UI components.
Highlights
- Enhanced Menu Customization: Introduced support for function-based
classNamesandstylesprops on theMenucomponent, allowing dynamic styling based on component properties. - Semantic Styling Control: Enabled more granular control over the styling of various semantic parts of the Menu component, including root, items, and sub-menus.
- New Demo and Documentation: Added a new demo (
style-class.tsx) and updated documentation (index.en-US.md,index.zh-CN.md,style-class.md) to illustrate and explain the new customization capabilities.
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 feature by allowing classNames and styles props on the Menu component to be functions, enabling dynamic customization. The implementation is well-structured, including new tests and a demonstration. I've identified a critical issue with the new TypeScript type definitions that could impact developers using this new API, and a minor improvement in the demo code for better type safety and clarity. My review provides specific suggestions to address these points.
Bundle ReportChanges will increase total bundle size by 474 bytes (0.0%) ⬆️. 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 #54955 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 793 793
Lines 14638 14639 +1
Branches 3890 3890
=========================================
+ Hits 14638 14639 +1 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
components/menu/menu.tsx
Outdated
| export type SubMenuName = 'item' | 'itemTitle' | 'list' | 'itemContent' | 'itemIcon'; | ||
|
|
||
| export type MenuSemanticName = SemanticName; | ||
| export type MenuClassNamesType = SemanticClassNamesType<MenuProps, MenuSemanticName> & { |
There was a problem hiding this comment.
这个类型看起来不对，应该是 render 出来的 classNames 包含全部。现在这个是能 render 顶层的，嵌套的不支持了。
There was a problem hiding this comment.
这个场景比较特殊， 直接写吧, 和think沟通了下，只有这个特殊些 @zombieJ
其他场景更新了下工具类，用这个场景， 在tabs pr 中
export type SemanticClassNamesType<
Props,
SemanticName extends string,
NestedStructure extends AnyObject = object,
> =
| Partial<Record<SemanticName, string>> & NestedStructure
| ((info: {
props: Props;
}) => Partial<Record<SemanticName, string>> | undefined) & NestedStructure;
export type SemanticStylesType<
Props,
SemanticName extends string,
NestedStructure extends AnyObject = object,
> =
| Partial<Record<SemanticName, React.CSSProperties>> & NestedStructure
| ((info: {
props: Props;
}) => Partial<Record<SemanticName, React.CSSProperties>> | undefined) & NestedStructure;
4 participants
中文版模板 / Chinese template
🤔 This is a ...
🔗 Related Issues
💡 Background and Solution
📝 Change Log