From b7e76366ffdf00ae2781c7118199c4e631f1744a Mon Sep 17 00:00:00 2001
From: Divyesh Agrawal <agrawaldivyesh19@gmail.com>
Date: Sun, 5 Oct 2025 19:27:52 +0530
Subject: [PATCH] feat: adapt semantic close

---
 src/Dialog/Content/Panel.tsx            | 3 ++-
 src/IDialogPropTypes.tsx                | 2 +-
 tests/__snapshots__/index.spec.tsx.snap | 3 ++-
 tests/index.spec.tsx                    | 6 ++++++
 4 files changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/Dialog/Content/Panel.tsx b/src/Dialog/Content/Panel.tsx
index 973a7222..ba0eadfc 100644
--- a/src/Dialog/Content/Panel.tsx
+++ b/src/Dialog/Content/Panel.tsx
@@ -131,8 +131,9 @@ const Panel = React.forwardRef<PanelRef, PanelProps>((props, ref) => {
       onClick={onClose}
       aria-label="Close"
       {...ariaProps}
-      className={`${prefixCls}-close`}
+      className={clsx(`${prefixCls}-close`, modalClassNames?.close)}
       disabled={closeBtnIsDisabled}
+      style={modalStyles?.close}
     >
       {closableObj.closeIcon}
     </button>
diff --git a/src/IDialogPropTypes.tsx b/src/IDialogPropTypes.tsx
index 9a019733..4c0c2241 100644
--- a/src/IDialogPropTypes.tsx
+++ b/src/IDialogPropTypes.tsx
@@ -1,7 +1,7 @@
 import type { GetContainer } from '@rc-component/util/lib/PortalWrapper';
 import type { CSSProperties, ReactNode, SyntheticEvent } from 'react';
 
-export type SemanticName = 'header' | 'body' | 'footer' | 'container' | 'title' | 'wrapper' | 'mask';
+export type SemanticName = 'header' | 'body' | 'footer' | 'container' | 'title' | 'wrapper' | 'mask' | 'close';
 
 export type ModalClassNames = Partial<Record<SemanticName, string>>;
 
diff --git a/tests/__snapshots__/index.spec.tsx.snap b/tests/__snapshots__/index.spec.tsx.snap
index 8c47cc1e..7233d24e 100644
--- a/tests/__snapshots__/index.spec.tsx.snap
+++ b/tests/__snapshots__/index.spec.tsx.snap
@@ -133,7 +133,7 @@ exports[`dialog should support classNames 1`] = `
         >
           <button
             aria-label="Close"
-            class="rc-dialog-close"
+            class="rc-dialog-close custom-close"
             type="button"
           >
             <span
@@ -200,6 +200,7 @@ exports[`dialog should support styles 1`] = `
           <button
             aria-label="Close"
             class="rc-dialog-close"
+            style="color: red;"
             type="button"
           >
             <span
diff --git a/tests/index.spec.tsx b/tests/index.spec.tsx
index bd7274c7..2fbe9c53 100644
--- a/tests/index.spec.tsx
+++ b/tests/index.spec.tsx
@@ -617,6 +617,7 @@ describe('dialog', () => {
           mask: 'custom-mask',
           wrapper: 'custom-wrapper',
           container: 'custom-container',
+          close: 'custom-close',
         }}
         style={{ width: 600 }}
         height={903}
@@ -631,6 +632,7 @@ describe('dialog', () => {
     expect(document.querySelector('.rc-dialog-footer').className).toContain('custom-footer');
     expect(document.querySelector('.rc-dialog-mask').className).toContain('custom-mask');
     expect(document.querySelector('.rc-dialog-container').className).toContain('custom-container');
+    expect(document.querySelector('.rc-dialog-close').className).toContain('custom-close');
   });
 
   it('should support styles', () => {
@@ -647,6 +649,9 @@ describe('dialog', () => {
           wrapper: { background: 'pink' },
           container: { background: 'orange' },
           title: { background: 'orange' },
+          close: {
+            color: 'red',
+          },
         }}
         style={{ width: 600 }}
         height={903}
@@ -662,6 +667,7 @@ describe('dialog', () => {
     expect(document.querySelector('.rc-dialog-mask')).toHaveStyle('background: yellow');
     expect(document.querySelector('.rc-dialog-container')).toHaveStyle('background: orange');
     expect(document.querySelector('.rc-dialog-title')).toHaveStyle('background: orange');
+    expect(document.querySelector('.rc-dialog-close')).toHaveStyle('color: red');
   });
 
   it('should warning', () => {