feat: adapt semantic close

[divyeshagrawal]

Summary by CodeRabbit

• 新功能
  • 通知新增可关闭选项（closable：支持布尔或对象）。
  • 支持为关闭按钮单独自定义类名与样式（classNames.close、styles.close），传入值会合并到关闭控件的渲染中。
• 测试
  • 新增用例覆盖可关闭通知及关闭按钮自定义类名与样式的渲染与断言。

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
notification	Ready	Preview	Comment	Oct 1, 2025 4:16am

[coderabbitai]

Note

Other AI code review bot(s) detected

CodeRabbit 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.

Walkthrough

为 Notice 组件新增可选的 classNames.close 与 styles.close 支持，并在 Close 按钮渲染时合并这些类名与样式；同时将类型 NoticeSemanticProps 扩展为 'wrapper' | 'close'，并在测试中增加对 closable、classNames.close 与 styles.close 的断言。

Changes

Cohort / File(s)	Summary
组件渲染更新 src/Notice.tsx	在 Notify/Notice 组件 props 中新增可选 classNames 与 styles；Close 按钮的 className 合并 classNames.close 并应用 styles.close 作为内联样式。
类型扩展 src/interface.ts	将 NoticeSemanticProps 从 'wrapper' 扩展为 'wrapper' | 'close'，以支持为 Close 元素指定 classNames/styles 键。
测试用例更新 tests/index.test.tsx	在测试中使用 closable: true 打开通知，传入 classNames.close 与 styles.close，并断言 Close 元素具有自定义 class 与样式（颜色为红色）。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• 同步 master 分支的一些 bugfix 到 antd-v5 分支，以修复 antd@v5 的 bug #371: 与本次对 Notice.tsx 中关闭控件渲染/属性调整高度相关。
• 关闭按钮a标签修改为button用以无障碍属性实现 #367: 同样修改关闭控件的渲染与可关闭行为，和本次对 closable/classNames/styles 的改动关联紧密。

Suggested reviewers

• zombieJ
• afc163

Poem

我在小通知上织新衣，🐇
close 加了花边与绣字，
class 与 style 手牵手，
轻轻一按，呼吸静谧，
兔耳一摆：改动小巧喜洋洋。

Pre-merge checks and finishing touches

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Title Check	❓ Inconclusive	标题虽然简洁地使用了 feat 前缀，但“adapt semantic close”措辞过于模糊，无法准确传达此次拉取请求在 Notify 组件中新增可配置的关闭按钮 classNames 和 styles 属性这一核心改动，难以让审阅者快速理解主要内容。	建议将标题修改为更具描述性的形式，例如“feat: 为 Notify 组件的关闭按钮添加可配置 classNames.close 和 styles.close”，以便清晰传达本次 PR 的核心功能变更，让团队成员在历史记录中一目了然。

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

---

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

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[gemini-code-assist]

Summary of Changes

Hello @divyeshagrawal, I'm Gemini Code Assist¹! 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 a new feature that significantly enhances the styling flexibility of the notification component's close button. By exposing classNames and styles properties specifically for the close button, it allows developers to seamlessly integrate the component's appearance with their application's design system. This change improves the component's adaptability and maintainability without altering its core behavior.

Highlights

• Enhanced Close Button Customization: The notification component's close button now supports direct customization through classNames and styles props, allowing for more flexible styling options.
• Type Definition Update: The NoticeSemanticProps type has been extended to include 'close', formally recognizing the close button as a customizable semantic element within the component's interface.
• Comprehensive Test Coverage: New test cases have been added to ensure that custom class names and styles are correctly applied to the close button, verifying the functionality of the new customization options.

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 by creating a comment using either /gemini <command> or @gemini-code-assist <command>. Below is a summary of the supported commands on the current page.

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 pull request 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

1. 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. ↩

[gemini-code-assist]

Code Review

This pull request adds support for customizing the classNames and styles of the notification's close button. The changes in src/interface.ts and src/Notice.tsx correctly implement this feature, and the new test case in tests/index.test.tsx validates the functionality. I have a couple of suggestions to improve code quality and performance.

[coderabbitai]

Actionable comments posted: 0

🧹 Nitpick comments (1)

tests/index.test.tsx (1)

646-651: 改进可读性并避免重复的 DOM 查询。

测试逻辑正确，断言验证了关闭按钮的类名和样式。但是，关闭按钮被查询了两次，建议将查询结果存储在变量中以提高可读性和效率。

基于先前的评审建议，应用以下修改：

-
-    const closeButton = document.querySelector('.rc-notification-notice-close');
-    expect(closeButton).toHaveClass('custom-close');
-    expect(closeButton).toHaveStyle({
-      color: 'rgb(255, 0, 0)',
-    });
+
+    const closeButton = document.querySelector('.rc-notification-notice-close');
+    expect(closeButton).toHaveClass('custom-close');
+    expect(closeButton).toHaveStyle({
+      color: 'rgb(255, 0, 0)',
+    });

注意：代码已经正确实现了这个优化（第 647 行存储了元素引用），测试按预期工作。

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 0a0aada and b4decb3.

📒 Files selected for processing (2)

• src/Notice.tsx (2 hunks)
• tests/index.test.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (1)

• src/Notice.tsx

🔇 Additional comments (3)

tests/index.test.tsx (3)

626-626: 逻辑正确，必须启用关闭按钮。

添加 closable: true 是必要的，这样才能渲染关闭按钮并测试其样式和类名。

---

631-633: 正确测试了 styles.close 功能。

为关闭按钮添加 color: 'red' 样式，用于验证内联样式是否正确应用。

---

637-637: 正确测试了 classNames.close 功能。

为关闭按钮添加自定义类名 custom-close，用于验证类名是否正确合并到关闭按钮上。

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.74%. Comparing base (307d8a7) to head (b4decb3).

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #378   +/-   ##
=======================================
  Coverage   99.74%   99.74%           
=======================================
  Files           7        7           
  Lines         775      778    +3     
  Branches      126      128    +2     
=======================================
+ Hits          773      776    +3     
  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.