feat: support classNames and styles #770

thinkasany · 2025-04-08T13:42:46Z

Summary by CodeRabbit

新功能
- 菜单和子菜单组件现支持更灵活的外观定制，用户可以自定义菜单标题和列表的样式，实现更个性化的界面效果。

coderabbitai · 2025-04-08T13:43:02Z

Walkthrough

此次变更更新了多个菜单组件，增强了样式定制能力。组件内部现在能够从上下文中获取额外的样式属性（classNames 与 styles），并利用新增的 SemanticName 类型更精准地管理样式。MenuItemGroup 和 SubMenu 分别更新了样式应用方式，相关上下文（MenuContext）也同步修改以支持这些新增属性。同时，测试用例也做了相应补充，确保自定义样式能正确传递并应用到相应元素。

Changes

文件	更改说明
`src/MenuItemGroup.tsx` `src/SubMenu/index.tsx` `src/context/MenuContext.tsx`	为组件添加对 `classNames` 与 `styles` 的支持；新增 `SemanticName` 类型；更新组件和上下文，使其能够传递并应用定制样式。
`tests/SubMenu.spec.tsx`	新增测试用例，验证 `SubMenu` 及其子组件在接收自定义 `classNames` 与 `styles` 时，页面元素能正确显示相应的类名和样式。

Sequence Diagram(s)

sequenceDiagram
    participant S as SubMenu
    participant C as MenuContextProvider
    participant G as MenuItemGroup
    participant T as 测试用例

    T->>S: 传入 classNames 与 styles 属性
    S->>C: 将样式属性传递给上下文
    C->>G: 提供定制的 classNames 和 styles
    G->>C: 获取样式信息
    G->>S: 渲染时应用更新的类名与样式

Poem

我是跳跳小兔在代码间飞跃，
样式披挂，类名闪烁如星辉。
组件之间轻盈传递新气息，
上下文温柔承载改动的意义。
新代码如诗，在界面中欢跃欢腾。
🐰💻 代码天地自由徜徉！

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

src/SubMenu/index.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Cannot read config file: /.eslintrc.js
Error: Cannot find module '@umijs/fabric/dist/eslint'
Require stack:

/.eslintrc.js
/node_modules/.pnpm/@eslint [email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli-engine/cli-engine.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/eslint.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/index.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/bin/eslint.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15)
at Function.resolve (node:internal/modules/helpers:145:19)
at Object. (/.eslintrc.js:2:21)
at Module._compile (node:internal/modules/cjs/loader:1546:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
at Module.load (node:internal/modules/cjs/loader:1317:32)
at Module._load (node:internal/modules/cjs/loader:1127:12)
at TracingChannel.traceSync (node:diagnostics_channel:315:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
at Module.require (node:internal/modules/cjs/loader:1339:12)

src/MenuItemGroup.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Cannot read config file: /.eslintrc.js
Error: Cannot find module '@umijs/fabric/dist/eslint'
Require stack:

/.eslintrc.js
/node_modules/.pnpm/@eslint [email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli-engine/cli-engine.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/eslint.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/index.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/bin/eslint.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15)
at Function.resolve (node:internal/modules/helpers:145:19)
at Object. (/.eslintrc.js:2:21)
at Module._compile (node:internal/modules/cjs/loader:1546:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
at Module.load (node:internal/modules/cjs/loader:1317:32)
at Module._load (node:internal/modules/cjs/loader:1127:12)
at TracingChannel.traceSync (node:diagnostics_channel:315:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
at Module.require (node:internal/modules/cjs/loader:1339:12)

src/context/MenuContext.tsx

Oops! Something went wrong! :(

ESLint: 8.57.1

Error: Cannot read config file: /.eslintrc.js
Error: Cannot find module '@umijs/fabric/dist/eslint'
Require stack:

/.eslintrc.js
/node_modules/.pnpm/@eslint [email protected]/node_modules/@eslint/eslintrc/dist/eslintrc.cjs
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli-engine/cli-engine.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/eslint.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/eslint/index.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/lib/cli.js
/node_modules/.pnpm/[email protected]/node_modules/eslint/bin/eslint.js
at Module._resolveFilename (node:internal/modules/cjs/loader:1248:15)
at Function.resolve (node:internal/modules/helpers:145:19)
at Object. (/.eslintrc.js:2:21)
at Module._compile (node:internal/modules/cjs/loader:1546:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1691:10)
at Module.load (node:internal/modules/cjs/loader:1317:32)
at Module._load (node:internal/modules/cjs/loader:1127:12)
at TracingChannel.traceSync (node:diagnostics_channel:315:14)
at wrapModuleLoad (node:internal/modules/cjs/loader:217:24)
at Module.require (node:internal/modules/cjs/loader:1339:12)

1 others

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 9e58600 and e07022d.

📒 Files selected for processing (4)

src/MenuItemGroup.tsx (2 hunks)
src/SubMenu/index.tsx (4 hunks)
src/context/MenuContext.tsx (1 hunks)
tests/SubMenu.spec.tsx (2 hunks)

🧰 Additional context used

🧬 Code Definitions (3)

src/context/MenuContext.tsx (2)

src/SubMenu/index.tsx (1)

SubMenuProps (26-44)

src/index.ts (1)

SubMenuProps (26-26)

tests/SubMenu.spec.tsx (2)

src/MenuItem.tsx (1)

render (40-63)

src/index.ts (1)

SubMenu (14-14)

src/MenuItemGroup.tsx (2)

src/context/MenuContext.tsx (1)

MenuContext (66-66)

docs/examples/menuItemGroup.tsx (1)

div (8-22)

🔇 Additional comments (12)

src/context/MenuContext.tsx (2)

13-13: 添加必要的类型导入

导入 SubMenuProps 类型以支持新增的样式自定义属性，这是一个必要的导入。

17-18: 很好地增强了样式定制能力

通过从 SubMenuProps 中引用 classNames 和 styles 类型，为菜单组件提供了更灵活的样式定制能力。这种设计可以确保类型的一致性，同时避免类型定义的重复。

tests/SubMenu.spec.tsx (2)

5-5: 更新了导入，添加了 MenuItemGroup

正确地更新了导入，添加了测试所需的 MenuItemGroup 组件。

486-512: 完善的测试用例

这个测试用例很好地验证了新增的 classNames 和 styles 属性功能。测试通过以下步骤验证功能：

定义测试用的自定义类名和样式

渲染带有这些自定义类名和样式的 SubMenu 和 MenuItemGroup

验证类名和样式是否正确应用到对应的元素

测试覆盖了关键场景，确保自定义样式可以正确传递到子组件并应用到相应元素。

src/SubMenu/index.tsx (5)

25-25: 定义了语义化类型

创建了 SemanticName 类型，明确定义了可接受样式的元素类型 ('list' | 'listTitle')，增强了代码的类型安全性和可读性。

27-28: 增加了样式自定义接口

为 SubMenuProps 添加了 classNames 和 styles 属性，使用 Partial<Record> 类型允许按语义名称灵活设置样式，设计合理。

51-53: 正确解构新增的属性

从 props 中解构出 styles 和 classNames (重命名为 menuClassNames)，为后续传递准备。

284-286: 弹出内容传递样式信息

将样式属性传递给弹出内容中的 MenuContextProvider，确保了弹出菜单可以继承自定义样式。

374-376: 主渲染中传递样式信息

在主渲染中也将样式属性传递给 MenuContextProvider，保持了样式应用的一致性。

src/MenuItemGroup.tsx (3)

23-23: 从上下文获取样式属性

从 MenuContext 中解构出新增的 classNames 和 styles 属性，准备应用到组件元素。

37-38: 为标题元素添加自定义样式

使用 classNames 函数合并默认类名和自定义类名，同时应用自定义样式，增强了标题元素的样式定制能力。

43-47: 为列表元素添加自定义样式

正确地为列表元素 (ul) 添加自定义类名和样式，使用 classNames 函数合并类名，同时设置 style 属性。结构清晰，实现符合要求。

✨ Finishing Touches

📝 Generate Docstrings

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.

❤️ Share

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

Review comments: Directly reply to a review comment made by CodeRabbit. Example:
- I pushed a fix in commit <commit_id>, please review it.
- Generate unit testing code for this file.
- Open a follow-up GitHub issue for this discussion.
Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
- @coderabbitai generate unit testing code for this file.
- @coderabbitai modularize this function.
PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
- @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
- @coderabbitai read src/utils.ts and generate unit testing code.
- @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
- @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

@coderabbitai pause to pause the reviews on a PR.
@coderabbitai resume to resume the paused reviews.
@coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
@coderabbitai full review to do a full review from scratch and review all the files again.
@coderabbitai summary to regenerate the summary of the PR.
@coderabbitai generate docstrings to generate docstrings for this PR.
@coderabbitai resolve resolve all the CodeRabbit review comments.
@coderabbitai plan to trigger planning for file edits and PR creation.
@coderabbitai configuration to show the current CodeRabbit configuration for the repository.
@coderabbitai help to get help.

Other keywords and placeholders

Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
Add @coderabbitai anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (`.coderabbit.yaml`)

You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
Please see the configuration documentation for more information.
If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

Visit our Documentation for detailed information on how to use CodeRabbit.
Join our Discord Community to get help, request features, and share feedback.
Follow us on X/Twitter for updates and announcements.

codecov · 2025-04-09T02:44:23Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.72%. Comparing base (9e58600) to head (e07022d).
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #770   +/-   ##
=======================================
  Coverage   99.72%   99.72%           
=======================================
  Files          27       27           
  Lines         734      734           
  Branches      198      198           
=======================================
  Hits          732      732           
  Misses          2        2

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

feat: support classNames and styles

e07022d

thinkasany mentioned this pull request Apr 8, 2025

feat: ConfigProvider support classNames and styles for menu ant-design/ant-design#53324

Merged

1 task

zombieJ approved these changes Apr 9, 2025

View reviewed changes

zombieJ merged commit 3cda0d8 into react-component:master Apr 9, 2025
9 checks passed

coderabbitai bot mentioned this pull request Apr 21, 2025

feat: support classNames and styles for menu #775

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: support classNames and styles #770

feat: support classNames and styles #770

Uh oh!

thinkasany commented Apr 8, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Apr 8, 2025 •

edited

Loading

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (`.coderabbit.yaml`)

Documentation and Community

Uh oh!

codecov bot commented Apr 9, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat: support classNames and styles #770

feat: support classNames and styles #770

Uh oh!

Conversation

thinkasany commented Apr 8, 2025 • edited by coderabbitai bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary by CodeRabbit

Uh oh!

coderabbitai bot commented Apr 8, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Poem

Chat

CodeRabbit Commands (Invoked using PR comments)

Other keywords and placeholders

CodeRabbit Configuration File (.coderabbit.yaml)

Documentation and Community

Uh oh!

codecov bot commented Apr 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Uh oh!

thinkasany commented Apr 8, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Apr 8, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

codecov bot commented Apr 9, 2025 •

edited

Loading