feat: adapt semantic close

[divyeshagrawal]

Summary by CodeRabbit

新功能

• 对话框组件的关闭按钮现已支持通过 classNames 和 styles 属性进行自定义，用户可灵活配置按钮的样式和外观。

测试

• 新增关闭按钮自定义功能的测试覆盖，确保样式和类名配置能正常工作。

[vercel]

@divyeshagrawal is attempting to deploy a commit to the React Component Team on Vercel.

A member of the Team first needs to authorize it.

[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 enhanced styling capabilities for the dialog component's close button. By extending the SemanticName type and modifying the Panel.tsx component, users can now apply custom CSS classes and inline styles to the close button, offering greater flexibility in tailoring the dialog's appearance to specific design requirements. The changes are supported by updated test cases and snapshots.

Highlights

• Close Button Customization: The dialog's close button can now be customized with specific CSS classes and inline styles through the modalClassNames and modalStyles props.
• Semantic Name Extension: A new SemanticName called 'close' has been added to the IDialogPropTypes.tsx file, allowing for targeted styling of the close button.
• Test Coverage: New test cases have been introduced to validate the application of custom class names and styles to the close button, ensuring the new functionality works as expected.

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

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 2c9baf21-d9d2-44ae-a611-918b4b5df3eb

📥 Commits

Reviewing files that changed from the base of the PR and between b7e7636 and 3f0ed59.

⛔ Files ignored due to path filters (1)

• tests/__snapshots__/index.spec.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (3)

• src/Dialog/Content/Panel.tsx
• src/IDialogPropTypes.ts
• tests/index.spec.tsx

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

• src/Dialog/Content/Panel.tsx

---

Walkthrough

该PR为Dialog组件的关闭按钮添加了样式和类名的自定义支持。通过扩展SemanticName类型以包含'close'，并在Panel组件中使用modalClassNames和modalStyles来应用相应的样式，实现了对关闭按钮外观的定制化。

Changes

Cohort / File(s)	Summary
类型定义扩展 src/IDialogPropTypes.ts	将'close'添加到SemanticName联合类型中，扩展modalClassNames和modalStyles以支持关闭按钮的自定义。
关闭按钮样式绑定 src/Dialog/Content/Panel.tsx	增强关闭按钮渲染，使用clsx组合className并添加modalStyles?.close的样式绑定，实现样式和类名的动态应用。
测试用例 tests/index.spec.tsx	新增测试用例验证关闭按钮支持自定义类名和样式，确保modalClassNames.close和modalStyles.close能正确应用。

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feat: support section and title #468: 主PR扩展了基于SemanticName的modalClassNames/modalStyles系统（添加'close'并连接className/style到关闭按钮），直接建立在该PR引入SemanticName的基础之上。

• refactor: section to container #501: 两个PR都修改了Dialog的语义名称类型映射和Panel.tsx的类/样式绑定（主PR为关闭按钮添加'close'语义，而该PR将'section'重命名为'container'）。

Poem

🐰 Close button now wears custom clothes,
With className and styles it flows,
SemanticName expanded wide,
Dialog's look with pride inside! ✨

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	标题清晰地总结了本次变更的主要内容：为关闭按钮添加语义化的样式和类名支持。
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• 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]

Code Review

This pull request adds the ability to customize the close button's class and style, which is a great enhancement. The implementation is straightforward and includes necessary tests. I've added one comment regarding code consistency in style application to improve maintainability. Overall, this is a good contribution.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 98.92%. Comparing base (045d38c) to head (3f0ed59).
⚠️ Report is 1 commits behind head on master.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #517   +/-   ##
=======================================
  Coverage   98.92%   98.92%           
=======================================
  Files           8        8           
  Lines         186      186           
  Branches       67       67           
=======================================
  Hits          184      184           
  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.