feat: Support closeIcon of Modal.method (#27909)

* feat: Support closeIcon of Modal.method

close #27900

* style: update modal conform close style

* test: update unit test for close button of confirm modal

* docs: update api doc

* refactor: reuse modal close button

* test: update unit test

* feat: add closable api for ConfirmDialog

* chore: use default props

* Update default.less

Co-authored-by: 偏右 <afc163@gmail.com>

components/modal/ConfirmDialog.tsx

@@ -33,6 +33,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
     prefixCls,
     rootPrefixCls,
     bodyStyle,
+    closable = false,
+    closeIcon,
     modalRender,
   } = props;
 
@@ -96,6 +98,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
       keyboard={keyboard}
       centered={centered}
       getContainer={getContainer}
+      closable={closable}
+      closeIcon={closeIcon}
       modalRender={modalRender}
     >
       <div className={`${contentPrefixCls}-body-wrapper`}>

components/modal/Modal.tsx

@@ -90,6 +90,7 @@ export interface ModalFuncProps {
   className?: string;
   visible?: boolean;
   title?: React.ReactNode;
+  closable?: boolean;
   content?: React.ReactNode;
   // TODO: find out exact types
   onOk?: (...args: any[]) => any;
@@ -116,6 +117,7 @@ export interface ModalFuncProps {
   maskTransitionName?: string;
   direction?: DirectionType;
   bodyStyle?: React.CSSProperties;
+  closeIcon?: React.ReactNode;
   modalRender?: (node: React.ReactNode) => React.ReactNode;
 }
 

components/modal/__tests__/confirm.test.js

@@ -223,6 +223,29 @@ describe('Modal.confirm triggers callbacks correctly', () => {
     jest.useRealTimers();
   });
 
+  it('should close confirm modal when click close button', () => {
+    jest.useFakeTimers();
+    const onCancel = jest.fn();
+    Modal.confirm({
+      title: 'title',
+      content: 'content',
+      closable: true,
+      closeIcon: 'X',
+      onCancel,
+    });
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect($$(`.ant-modal-close`)).toHaveLength(1);
+    $$('.ant-btn')[0].click();
+    act(() => {
+      jest.runAllTimers();
+    });
+    expect($$(`.ant-modal-close`)).toHaveLength(0);
+    expect(onCancel).toHaveBeenCalledTimes(1);
+    jest.useRealTimers();
+  });
+
   it('should not close modals when click confirm button when onOk has argument', () => {
     jest.useFakeTimers();
     ['info', 'success', 'warning', 'error'].forEach(type => {

components/modal/index.en-US.md

@@ -70,6 +70,8 @@ The items listed above are all functions, expecting a settings object as paramet
 | cancelText | Text of the Cancel button with Modal.confirm | string | `Cancel` |  |
 | centered | Centered Modal | boolean | false |  |
 | className | The className of container | string | - |  |
+| closable | Whether a close (x) button is visible on top right of the confirm dialog or not | boolean | false | 4.9.0 |
+| closeIcon | Custom close icon | ReactNode | undefined | 4.9.0 |
 | content | Content | ReactNode | - |  |
 | getContainer | Return the mount node for Modal | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | icon | Custom icon | ReactNode | <QuestionCircle /> | 3.12.0 |

components/modal/index.zh-CN.md

@@ -73,6 +73,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
 | cancelText | 设置 Modal.confirm 取消按钮文字 | string | `取消` |  |
 | centered | 垂直居中展示 Modal | boolean | false |  |
 | className | 容器类名 | string | - |  |
+| closable | 是否显示右上角的关闭按钮 | boolean | false | 4.9.0 |
+| closeIcon | 自定义关闭图标 | ReactNode | undefined | 4.9.0 |
 | content | 内容 | ReactNode | - |  |
 | getContainer | 指定 Modal 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | document.body |  |
 | icon | 自定义图标 | ReactNode | <QuestionCircle /> | 3.12.0 |

components/modal/style/confirm.less

@@ -7,10 +7,6 @@
     display: none;
   }
 
-  .@{ant-prefix}-modal-close {
-    display: none;
-  }
-
   .@{ant-prefix}-modal-body {
     padding: @modal-confirm-body-padding;
   }