Skip to content

feat: adapt semantic close #83

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

feat: adapt semantic close #83

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
0e47a3f
feat: adapt semantic close
Arktomson Sep 25, 2025
57c5573
feat: unit test update
Arktomson Sep 27, 2025
5ab8cb8
Merge branch 'master' of https://github.com/react-component/tour into…
Arktomson Oct 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion src/TourStep/DefaultPanel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,8 @@ export default function DefaultPanel(props: DefaultPanelProps) {
onClick={onClose}
aria-label="Close"
{...ariaProps}
className={`${prefixCls}-close`}
className={classNames(`${prefixCls}-close`, tourClassNames?.close)}
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

测试用例需要补一下

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

关键错误：使用了未定义的 classNames 函数。

第 43 行使用了 classNames 函数，但文件顶部导入的是 clsx（第 3 行）。这会导致运行时错误 ReferenceError: classNames is not defined。文件中其他所有地方都正确使用了 clsx（第 32、34、50、54、61、70、86 行）。

应用此 diff 修复：

-            className={classNames(`${prefixCls}-close`, tourClassNames?.close)}
+            className={clsx(`${prefixCls}-close`, tourClassNames?.close)}
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
className={classNames(`${prefixCls}-close`, tourClassNames?.close)}
className={clsx(`${prefixCls}-close`, tourClassNames?.close)}
🤖 Prompt for AI Agents 
In src/TourStep/DefaultPanel.tsx around line 43, the code calls an undefined
classNames function (causing ReferenceError) while the module imports clsx;
replace the usage of classNames with clsx at line 43 so it matches the rest of
the file (or alternatively add an import that exposes classNames), ensuring the
close button className uses clsx(`${prefixCls}-close`, tourClassNames?.close).

style={styles?.close}
Comment on lines +43 to +44
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

medium

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.

Comment on lines +43 to +44
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🔴 Critical

🧩 Analysis chain

验证测试覆盖是否已补充。

过往评审中 coding-ice 和 gemini-code-assist[bot] 都提到需要补充测试用例来验证 tourClassNames.close 和 styles.close 的应用。虽然 AI 摘要提到测试已扩展，但建议确认 tests/index.test.tsx 中是否包含了针对关闭按钮的类名和样式的断言。

运行以下脚本验证测试覆盖：

🏁 Script executed:

#!/bin/bash
# 描述：验证 tests/index.test.tsx 中是否包含对 close 按钮样式的测试

# 搜索测试文件中与 close 相关的断言
rg -n -A 5 -B 5 "tourClassNames.*close|styles.*close|\.close" tests/index.test.tsx

Length of output: 361

补充关闭按钮类名和样式测试
在 tests/index.test.tsx 中缺少对 DefaultPanel 关闭按钮 className={classNames(..., tourClassNames?.close)} 和 style={styles?.close} 的断言，请添加测试以验证 tourClassNames.close 与 styles.close 的正确应用。

🤖 Prompt for AI Agents 
In src/TourStep/DefaultPanel.tsx around lines 43-44, the close button receives
className={classNames(`${prefixCls}-close`, tourClassNames?.close)} and
style={styles?.close} but tests don't assert these; update tests/index.test.tsx
to render DefaultPanel with explicit tourClassNames={{ close: 'my-close' }} and
styles={{ close: { color: 'red' } }} (or similar), locate the close button (by
role/button, aria-label, or the generated class), and add assertions that the
element's classList contains the provided tourClassNames.close and that its
style matches the provided styles.close (use toContain/toHaveClass for class and
toHaveStyle or equivalent for inline styles).

>
{closeIcon}
</button>
Expand Down
3 changes: 2 additions & 1 deletion src/interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,8 @@ export type SemanticName =
| 'header'
| 'title'
| 'description'
| 'mask';
| 'mask'
| 'close';


export type HTMLAriaDataAttributes = React.AriaAttributes & {
Expand Down
7 changes: 7 additions & 0 deletions tests/index.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1127,6 +1127,7 @@ describe('Tour', () => {
section: 'custom-section',
footer: 'custom-footer',
description: 'custom-description',
close: 'custom-close',
};
const customStyles = {
mask: { color: 'white' },
Expand All @@ -1136,6 +1137,7 @@ describe('Tour', () => {
section: { padding: '10px' },
footer: { borderTop: '1px solid black' },
description: { fontStyle: 'italic' },
close: { color: 'red' },
};
const Demo = () => {
const btnRef = useRef<HTMLButtonElement>(null);
Expand Down Expand Up @@ -1178,6 +1180,9 @@ describe('Tour', () => {
const descriptionElement = document.querySelector(
'.rc-tour-description',
) as HTMLElement;
const closeElement = document.querySelector(
'.rc-tour-close',
) as HTMLElement;

// check classNames
expect(maskElement.classList).toContain('custom-mask');
Expand All @@ -1187,6 +1192,7 @@ describe('Tour', () => {
expect(sectionElement.classList).toContain('custom-section');
expect(footerElement.classList).toContain('custom-footer');
expect(descriptionElement.classList).toContain('custom-description');
expect(closeElement.classList).toContain('custom-close');

// check styles
expect(maskElement.style.color).toBe('white');
Expand All @@ -1196,6 +1202,7 @@ describe('Tour', () => {
expect(sectionElement.style.padding).toBe('10px');
expect(footerElement.style.borderTop).toBe('1px solid black');
expect(descriptionElement.style.fontStyle).toBe('italic');
expect(closeElement.style.color).toBe('red');
});

it('inline', async () => {
Expand Down
Loading