feat: adapt semantic close (#517)

Co-authored-by: 二货机器人 <smith3816@gmail.com>

Author: divyeshagrawal

src/Dialog/Content/Panel.tsx

@@ -118,8 +118,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.ts

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

@@ -111,7 +111,7 @@ exports[`dialog should support classNames 1`] = `
       >
         <button
           aria-label="Close"
-          class="rc-dialog-close"
+          class="rc-dialog-close custom-close"
           type="button"
         >
           <span
@@ -169,6 +169,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

@@ -624,6 +624,7 @@ describe('dialog', () => {
           mask: 'custom-mask',
           wrapper: 'custom-wrapper',
           container: 'custom-container',
+          close: 'custom-close',
         }}
         style={{ width: 600 }}
         height={903}
@@ -638,6 +639,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', () => {
@@ -654,6 +656,9 @@ describe('dialog', () => {
           wrapper: { background: 'pink' },
           container: { background: 'orange' },
           title: { background: 'orange' },
+          close: {
+            color: 'red',
+          },
         }}
         style={{ width: 600 }}
         height={903}
@@ -669,6 +674,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', () => {