feat: support classNames and styles for menu #775

thinkasany · 2025-04-21T15:08:40Z

Summary by CodeRabbit

新功能
- Menu 组件现支持通过 classNames 和 styles 属性自定义标题和列表元素的 CSS 类名及内联样式，提升样式定制能力。
测试
- 新增了针对 classNames 和 styles 属性的测试用例，确保自定义样式和类名能够正确应用于 Menu 及其子组件。
- 移除了原有相关测试并进行了重构。

coderabbitai · 2025-04-21T15:08:47Z

Walkthrough

此次更改为 Menu 组件及其子组件（如 SubMenu、MenuItemGroup）引入了通过 classNames 和 styles 属性自定义样式和类名的能力。主要在 Menu 组件的 props 中新增了这两个可选属性，并通过上下文传递给子组件。相关的测试用例也做了迁移和补充，确保这些自定义样式功能的正确性。原有的事件处理和逻辑未发生变化，所有改动仅限于样式扩展和测试覆盖。

Changes

文件/路径	变更摘要
src/Menu.tsx	为 `MenuProps` 新增 `classNames` 和 `styles` 属性，并通过上下文传递给子组件。
docs/examples/menuItemGroup.tsx	示例中为 Menu 组件添加了 `classNames` 属性，展示如何自定义 listTitle 和 list 的类名。
tests/SubMenu.spec.tsx	移除了对 `MenuItemGroup` 的导入及其相关的样式测试用例。
tests/semantic.spec.tsx	新增测试文件，专门验证 `classNames` 和 `styles` 在 Menu、SubMenu、MenuItemGroup 上的支持。

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant Menu
    participant MenuContextProvider
    participant SubMenu/MenuItemGroup

    User->>Menu: 传入 classNames/styles 属性
    Menu->>MenuContextProvider: 通过 context 传递 classNames/styles
    MenuContextProvider->>SubMenu/MenuItemGroup: 子组件消费 context 获取自定义样式
    SubMenu/MenuItemGroup-->>User: 渲染带有自定义样式的 DOM

Possibly related PRs

feat: support classNames and styles #770: 此 PR 也为 Menu 及其子组件引入了通过 context 传递 classNames 和 styles 的能力，与本次变更直接相关。

Suggested reviewers

zombieJ

Poem

🐰
菜单新衣裳，样式随心装，
classNames 轻点缀，styles 细描妆。
测试护航忙，例子也闪亮，
代码如春雨，润物细无声。
— 代码兔上新诗

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.

docs/examples/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/Menu.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)

tests/SubMenu.spec.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

Tip

⚡💬 Agentic Chat (Pro Plan, General Availability)

We're introducing multi-step agentic chat in review comments and issue comments, within and outside of PR's. This feature enhances review and issue discussions with the CodeRabbit agentic chat by enabling advanced interactions, including the ability to create pull requests directly from comments and add commits to existing pull requests.

📜 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 b7fd486 and 09d950f.

📒 Files selected for processing (4)

docs/examples/menuItemGroup.tsx (1 hunks)
src/Menu.tsx (5 hunks)
tests/SubMenu.spec.tsx (1 hunks)
tests/semantic.spec.tsx (1 hunks)

🧰 Additional context used

🧬 Code Graph Analysis (2)

docs/examples/menuItemGroup.tsx (2)

docs/examples/fragment.tsx (1)

Menu (5-29)

docs/examples/single.tsx (1)

Menu (49-57)

src/Menu.tsx (1)

src/SubMenu/index.tsx (1)

SemanticName (25-25)

🔇 Additional comments (10)

src/Menu.tsx (5)

33-33: 导入 SemanticName 用于类型定义

从 SubMenu 导入 SemanticName 类型，用于 classNames 和 styles 属性的类型定义，确保类型安全。

57-58: 新增样式自定义属性

这两个新属性允许用户对菜单组件的不同语义部分进行样式自定义，增强了组件的可定制性。
classNames?: Partial<Record<SemanticName, string>>;
styles?: Partial<Record<SemanticName, React.CSSProperties>>;
173-175: 从 props 中解构新增的样式属性

合理地重命名 classNames 为 menuClassNames，避免与其他变量命名冲突。

551-558: 将样式属性传递给溢出情况下的子菜单项

确保在水平模式下，溢出菜单项也能接收到样式自定义，保持样式的一致性。

626-627: 将样式属性传递给顶层菜单上下文

通过 MenuContextProvider 将样式属性传递给所有子组件，实现统一的样式配置。
docs/examples/menuItemGroup.tsx (1)

11-15: 示例中展示了新增的 classNames 属性用法

示例展示了如何使用 classNames 属性来自定义菜单组标题和列表的样式，格式更清晰，增强了代码可读性。

tests/SubMenu.spec.tsx (1)

5-5: 移除了未使用的 MenuItemGroup 导入

移除了不再需要的 MenuItemGroup 导入，这是因为相关测试已经移至新的 semantic.spec.tsx 文件中。

tests/semantic.spec.tsx (3)

1-22: 新增测试文件和通用测试设置

为语义化样式自定义功能添加测试文件，包含必要的测试环境设置和定时器处理。测试结构清晰，维护了代码质量。

23-49: 测试 SubMenu 的 classNames 和 styles 属性

完整测试 SubMenu 组件接收并正确应用 classNames 和 styles 属性到 MenuItemGroup 组件的能力。测试涵盖了列表和标题两种语义元素，验证了样式传递的正确性。

50-77: 测试 Menu 的 classNames 和 styles 属性

完整测试 Menu 组件接收并正确应用 classNames 和 styles 属性到 MenuItemGroup 组件的能力。这确保了顶层组件能够将样式属性正确传递给子组件。

✨ 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 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-21T15:11:19Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 99.72%. Comparing base (b7fd486) to head (09d950f).
Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #775   +/-   ##
=======================================
  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 for menu

793725b

fix

09d950f

thinkasany mentioned this pull request Apr 21, 2025

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

Merged

1 task

zombieJ approved these changes Apr 22, 2025

View reviewed changes

zombieJ merged commit a99b330 into react-component:master Apr 22, 2025
9 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

feat: support classNames and styles for menu #775

feat: support classNames and styles for menu #775

Uh oh!

thinkasany commented Apr 21, 2025 •

edited by coderabbitai bot

Loading

Uh oh!

coderabbitai bot commented Apr 21, 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 21, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

Uh oh!

feat: support classNames and styles for menu #775

feat: support classNames and styles for menu #775

Uh oh!

Conversation

thinkasany commented Apr 21, 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 21, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Walkthrough

Changes

Sequence Diagram(s)

Possibly related PRs

Suggested reviewers

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 21, 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 21, 2025 •

edited by coderabbitai bot

Loading

coderabbitai bot commented Apr 21, 2025 •

edited

Loading

CodeRabbit Configuration File (`.coderabbit.yaml`)

codecov bot commented Apr 21, 2025 •

edited

Loading