feat: adapt semantic close #83

Arktomson · 2025-09-25T14:58:51Z

Summary by CodeRabbit

新功能
- 引导浮层的关闭按钮现支持自定义类名与内联样式，便于品牌化与主题定制，兼容现有前缀类。
- 扩展可用样式语义名，新增 “close”（保留 “mask”），可精细化定制关闭元素外观，向后兼容运行逻辑。
测试
- 增加关闭按钮相关测试，验证类名、样式、可见性与无障碍属性在多步场景下的行为。

vercel · 2025-09-25T14:58:58Z

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

Project	Deployment	Preview	Comments	Updated (UTC)
tour	Ready	Preview	Comment	Oct 1, 2025 2:00am

coderabbitai · 2025-09-25T14:58:59Z

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

在 DefaultPanel 的关闭按钮上新增对 tourClassNames?.close 与 styles?.close 的应用；在接口中为 SemanticName 类型新增成员 'close'；测试扩展以覆盖关闭按钮的类名、内联样式与可见性断言。无运行时控制流变更。

Changes

Cohort / File(s)	Summary of Changes
关闭按钮样式钩子扩展 `src/TourStep/DefaultPanel.tsx`	关闭按钮由仅使用静态类名 `${prefixCls}-close` 改为合成 `className`（包含可选的 `tourClassNames?.close`）并支持内联样式 `styles?.close`。
类型：语义名扩展 `src/interface.ts`	扩展导出类型 `SemanticName`，新增成员 `'close'`（保留 `'mask'`），以允许为关闭按钮提供语义化 className/style。无运行时逻辑更改。
测试：关闭 UI 覆盖 `tests/index.test.tsx`	增加测试以验证关闭元素的存在、类名与样式传播（包含全局与 per-step 的 `closeIcon` 行为），并添加对应的查询与断言。仅测试扩展，无业务逻辑更改。

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

feat: Tour support classnames and styles #70 — 涉及相同文件并扩展了组件对 classNames/styles 的支持，可能与本次新增 'close' 语义相关。

Suggested reviewers

zombieJ

Poem

我是小兔去巡视，
关钮披新衣笑意稠，
class 与 style 手牵手，
语义一加世界柔，
咔嚓关上梦更悠。 🐇✨

Pre-merge checks and finishing touches

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	You can run `@coderabbitai generate docstrings` to improve docstring coverage.

✅ Passed checks (2 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	标题“feat: adapt semantic close”直接对应了此次合并请求的主要改动，即为关闭按钮引入语义化名称支持并更新组件与测试，准确概括了变更的核心内容。

✨ Finishing touches

📝 Generate docstrings

🧪 Generate unit tests (beta)

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

📜 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 5ab8cb8 and 33d8e86.

📒 Files selected for processing (1)

src/TourStep/DefaultPanel.tsx (1 hunks)

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

src/TourStep/DefaultPanel.tsx

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

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

gemini-code-assist · 2025-09-25T14:59:02Z

Summary of Changes

Hello @Arktomson, 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 enhances the customization options for the close button within tour steps. It introduces the ability to apply custom CSS classes and inline styles directly to the close button, and formally recognizes 'close' as a semantic element. This change provides developers with more control over the appearance and behavior of the tour step's close functionality.

Highlights

Close Button Customization: The close button in the DefaultPanel component now supports custom class names and inline styles, allowing for greater visual flexibility.
Semantic Recognition: The SemanticName type has been extended to include 'close', enabling semantic identification and potential targeting of the close button within the tour step.

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.

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 correctly adds support for semantic styling of the close button, allowing className and style customization. The implementation is consistent with existing patterns in the codebase. My main feedback is to add test coverage for this new feature to ensure its correctness and prevent future regressions.

gemini-code-assist · 2025-09-25T14:59:57Z

src/TourStep/DefaultPanel.tsx

+            className={classNames(`${prefixCls}-close`, tourClassNames?.close)}
+            style={styles?.close}


While the implementation for applying custom className and style to the close button is correct, this pull request is missing corresponding tests to verify the new functionality. Please add a test case to ensure that tourClassNames.close and styles.close are applied as expected. You could extend the existing 'support custom styles' test in tests/index.test.tsx for this.

codecov · 2025-09-25T15:31:45Z

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 99.07%. Comparing base (c25065a) to head (33d8e86).

Additional details and impacted files

@@           Coverage Diff           @@
##           master      #83   +/-   ##
=======================================
  Coverage   99.07%   99.07%           
=======================================
  Files          10       10           
  Lines         217      217           
  Branches       97       98    +1     
=======================================
  Hits          215      215           
  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.

src/TourStep/DefaultPanel.tsx

Arktomson · 2025-09-27T03:32:25Z

ok

…

---Original--- From: ***@***.***> Date: Sat, Sep 27, 2025 11:27 AM To: ***@***.***>; Cc: "sheng ***@***.******@***.***>; Subject: Re: [react-component/tour] feat: adapt semantic close (PR #83) @coding-ice commented on this pull request. In src/TourStep/DefaultPanel.tsx: > @@ -41,7 +41,8 @@ export default function DefaultPanel(props: DefaultPanelProps) { onClick={onClose} aria-label="Close" {...ariaProps} - className={`${prefixCls}-close`} + className={classNames(`${prefixCls}-close`, tourClassNames?.close)} 测试用例需要补一下 — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you were mentioned.Message ID: ***@***.***>

li-jia-nan · 2025-09-29T18:04:38Z

同步一下上游分支

… arktomson/semantic-close

coderabbitai

Actionable comments posted: 2

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 57c5573 and 5ab8cb8.

📒 Files selected for processing (1)

src/TourStep/DefaultPanel.tsx (1 hunks)

src/TourStep/DefaultPanel.tsx

li-jia-nan · 2025-10-08T11:30:52Z

同步一下上游分支吧

vercel · 2025-10-09T03:06:14Z

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

A member of the Team first needs to authorize it.

Arktomson · 2025-10-26T03:26:44Z

@coding-ice 合一下不

feat: adapt semantic close

0e47a3f

vercel bot deployed to Preview September 25, 2025 14:59 View deployment

gemini-code-assist bot reviewed Sep 25, 2025

View reviewed changes

Arktomson mentioned this pull request Sep 26, 2025

feat: add a close button element for semantic ant-design/ant-design#55133

Open

7 tasks

coding-ice reviewed Sep 27, 2025

View reviewed changes

src/TourStep/DefaultPanel.tsx Outdated Show resolved Hide resolved

feat: unit test update

57c5573

vercel bot deployed to Preview September 27, 2025 03:43 View deployment

Merge branch 'master' of https://github.com/react-component/tour into…

5ab8cb8

… arktomson/semantic-close

vercel bot deployed to Preview October 1, 2025 02:00 View deployment

coderabbitai bot reviewed Oct 1, 2025

View reviewed changes

src/TourStep/DefaultPanel.tsx Outdated Show resolved Hide resolved

src/TourStep/DefaultPanel.tsx Outdated Show resolved Hide resolved

feat: adapt clsx

33d8e86

		className={classNames(`${prefixCls}-close`, tourClassNames?.close)}
		style={styles?.close}

feat: adapt semantic close #83

Are you sure you want to change the base?

feat: adapt semantic close #83

Uh oh!

Conversation

Arktomson commented Sep 25, 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!

vercel bot commented Sep 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

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

Uh oh!

Other AI code review bot(s) detected

Walkthrough

Changes

Estimated code review effort

Possibly related PRs

Suggested reviewers

Poem

Pre-merge checks and finishing touches

Uh oh!

gemini-code-assist bot commented Sep 25, 2025

Summary of Changes

Highlights

Footnotes

Uh oh!

gemini-code-assist bot left a comment

Choose a reason for hiding this comment

Code Review

Uh oh!

gemini-code-assist bot Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Codecov Report

Uh oh!

Uh oh!

Arktomson commented Sep 27, 2025 via email

Uh oh!

li-jia-nan commented Sep 29, 2025

Uh oh!

coderabbitai bot left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

li-jia-nan commented Oct 8, 2025

Uh oh!

vercel bot commented Oct 9, 2025

Uh oh!

Arktomson commented Oct 26, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Arktomson commented Sep 25, 2025 •

edited by coderabbitai bot

Loading

vercel bot commented Sep 25, 2025 •

edited

Loading

coderabbitai bot commented Sep 25, 2025 •

edited

Loading

codecov bot commented Sep 25, 2025 •

edited

Loading