From 0e47a3f77462cf0516cf5392da64edb7b63fd694 Mon Sep 17 00:00:00 2001
From: arktomson <2372929539@qq.com>
Date: Thu, 25 Sep 2025 22:58:13 +0800
Subject: [PATCH 1/2] feat: adapt semantic close

---
 src/TourStep/DefaultPanel.tsx | 3 ++-
 src/interface.ts              | 3 ++-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/TourStep/DefaultPanel.tsx b/src/TourStep/DefaultPanel.tsx
index 3eb01a4..0bbb2db 100644
--- a/src/TourStep/DefaultPanel.tsx
+++ b/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)}
+            style={styles?.close}
           >
             {closeIcon}
           </button>
diff --git a/src/interface.ts b/src/interface.ts
index ec02414..c282260 100644
--- a/src/interface.ts
+++ b/src/interface.ts
@@ -11,7 +11,8 @@ export type SemanticName =
   | 'header'
   | 'title'
   | 'description'
-  | 'mask';
+  | 'mask'
+  | 'close';
 
 
 export type HTMLAriaDataAttributes = React.AriaAttributes & {

From 57c5573cbf4fdffeea5388aad88a92acceb12434 Mon Sep 17 00:00:00 2001
From: arktomson <2372929539@qq.com>
Date: Sat, 27 Sep 2025 11:42:58 +0800
Subject: [PATCH 2/2] feat: unit test update

---
 tests/index.test.tsx | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/tests/index.test.tsx b/tests/index.test.tsx
index 6f27163..681ee5d 100644
--- a/tests/index.test.tsx
+++ b/tests/index.test.tsx
@@ -1127,6 +1127,7 @@ describe('Tour', () => {
       section: 'custom-section',
       footer: 'custom-footer',
       description: 'custom-description',
+      close: 'custom-close',
     };
     const customStyles = {
       mask: { color: 'white' },
@@ -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);
@@ -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');
@@ -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');
@@ -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 () => {