feat: adapt semantic close

Author: divyeshagrawal

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>

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>>;
 

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

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', () => {