feat: Modal closeIcon (#18309)

* 💄 support Modal closeIcon

close #18307

* ✅ Add test case for closeIcon

components/modal/Modal.tsx

@@ -76,6 +76,7 @@ export interface ModalProps {
   keyboard?: boolean;
   wrapProps?: any;
   prefixCls?: string;
+  closeIcon?: React.ReactNode;
 }
 
 type getContainerFunc = () => HTMLElement;
@@ -164,6 +165,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
     footer: PropTypes.node,
     title: PropTypes.node,
     closable: PropTypes.bool,
+    closeIcon: PropTypes.node,
   };
 
   handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -210,6 +212,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
       wrapClassName,
       centered,
       getContainer,
+      closeIcon,
       ...restProps
     } = this.props;
 
@@ -220,7 +223,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
       </LocaleReceiver>
     );
 
-    const closeIcon = (
+    const closeIconToRender = closeIcon || (
       <span className={`${prefixCls}-close-x`}>
         <Icon className={`${prefixCls}-close-icon`} type="close" />
       </span>
@@ -236,7 +239,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
         visible={visible}
         mousePosition={mousePosition}
         onClose={this.handleCancel}
-        closeIcon={closeIcon}
+        closeIcon={closeIconToRender}
       />
     );
   };

components/modal/__tests__/Modal.test.js

@@ -57,4 +57,9 @@ describe('Modal', () => {
     wrapper.handleOk();
     expect(onOk).toHaveBeenCalled();
   });
+
+  it('support closeIcon', () => {
+    const wrapper = mount(<Modal closeIcon={<a>closeIcon</a>} visible />);
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

components/modal/__tests__/__snapshots__/Modal.test.js.snap

@@ -169,3 +169,71 @@ exports[`Modal render without footer 1`] = `
   </div>
 </div>
 `;
+
+exports[`Modal support closeIcon 1`] = `
+<div>
+  <div
+    class="ant-modal-mask fade-appear"
+  />
+  <div
+    class="ant-modal-wrap "
+    role="dialog"
+    tabindex="-1"
+  >
+    <div
+      class="ant-modal zoom-appear"
+      role="document"
+      style="width: 520px;"
+    >
+      <div
+        aria-hidden="true"
+        style="width: 0px; height: 0px; overflow: hidden;"
+        tabindex="0"
+      />
+      <div
+        class="ant-modal-content"
+      >
+        <button
+          aria-label="Close"
+          class="ant-modal-close"
+          type="button"
+        >
+          <a>
+            closeIcon
+          </a>
+        </button>
+        <div
+          class="ant-modal-body"
+        />
+        <div
+          class="ant-modal-footer"
+        >
+          <div>
+            <button
+              class="ant-btn"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        aria-hidden="true"
+        style="width: 0px; height: 0px; overflow: hidden;"
+        tabindex="0"
+      />
+    </div>
+  </div>
+</div>
+`;

components/modal/index.en-US.md

@@ -19,6 +19,7 @@ When requiring users to interact with the application, but without jumping to a
 | cancelText | Text of the Cancel button | string\|ReactNode | `Cancel` |  |
 | centered | Centered Modal | Boolean | `false` | 3.8.0 |
 | closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true |  |
+| closeIcon | custom close icon | ReactNode | - | 3.22.0 |
 | confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false |  |
 | destroyOnClose | Whether to unmount child components on onClose | boolean | false | 3.1.0 |
 | footer | Footer content, set as `footer={null}` when you don't need default buttons | string\|ReactNode | OK and Cancel buttons |  |

components/modal/index.zh-CN.md

@@ -22,6 +22,7 @@ title: Modal
 | cancelText | 取消按钮文字 | string\|ReactNode | 取消 |  |
 | centered | 垂直居中展示 Modal | Boolean | `false` | 3.8.0 |
 | closable | 是否显示右上角的关闭按钮 | boolean | true |  |
+| closeIcon | 自定义关闭图标 | ReactNode | - | 3.22.0 |
 | confirmLoading | 确定按钮 loading | boolean | 无 |  |
 | destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false | 3.1.0 |
 | footer | 底部内容，当不需要默认底部按钮时，可以设为 `footer={null}` | string\|ReactNode | 确定取消按钮 |  |