feat: CP support Modal closeIcon (#47226)

* feat: CP support Modal closeIcon * fix: fix
ant-design · Jan 30, 2024 · a11d3b4 · a11d3b4
1 parent 5031ca9
commit a11d3b4
Show file tree

Hide file tree

Showing 6 changed files with 15 additions and 21 deletions.
diff --git a/components/config-provider/__tests__/style.test.tsx b/components/config-provider/__tests__/style.test.tsx
@@ -642,27 +642,23 @@ describe('ConfigProvider support style and className props', () => {
     expect(container.querySelector('.ant-mentions')).toHaveStyle({ background: 'red' });
   });
 
-  it('Should Modal className & style works', () => {
+  it('Should Modal className & style & closeIcon works', () => {
     const { baseElement } = render(
       <ConfigProvider
         modal={{
           className: 'cp-modal',
-          style: {
-            background: 'red',
-          },
+          style: { background: 'red' },
+          closeIcon: <span className="cp-test-closeIcon">cp-test-closeIcon</span>,
         }}
       >
-        <Modal title="Basic Modal" open>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-        </Modal>
+        <Modal open>test</Modal>
       </ConfigProvider>,
     );
-
+    const selectors = '.ant-modal-content .ant-modal-close .cp-test-closeIcon';
     const element = baseElement.querySelector<HTMLDivElement>('.ant-modal');
     expect(element).toHaveClass('cp-modal');
     expect(element).toHaveStyle({ background: 'red' });
+    expect(element?.querySelector<HTMLSpanElement>(selectors)).toBeTruthy();
   });
 
   it('Should Result className & style works', () => {

diff --git a/components/config-provider/context.ts b/components/config-provider/context.ts
@@ -75,7 +75,8 @@ export interface TableConfig extends ComponentStyleConfig {
 
 export type TourConfig = Pick<TourProps, 'closeIcon'>;
 
-export type ModalConfig = ComponentStyleConfig & Pick<ModalProps, 'classNames' | 'styles'>;
+export type ModalConfig = ComponentStyleConfig &
+  Pick<ModalProps, 'classNames' | 'styles' | 'closeIcon'>;
 
 export type BadgeConfig = ComponentStyleConfig & Pick<BadgeProps, 'classNames' | 'styles'>;
 

diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
@@ -130,7 +130,7 @@ const {
 | menu | Set Menu common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | mentions | Set Mentions common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | message | Set Message common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| modal | Set Modal common props | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal-cn#api), styles?: [ModalProps\["styles"\]](/components/modal-cn#api) } | - | 5.7.0, `classNames` and `styles`: 5.10.0 |
+| modal | Set Modal common props | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal-cn#api), styles?: [ModalProps\["styles"\]](/components/modal-cn#api), closeIcon?: React.ReactNode } | - | 5.7.0, `classNames` and `styles`: 5.10.0, `closeIcon`: 5.14.0 |
 | notification | Set Notification common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | pagination | Set Pagination common props | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | progress | Set Progress common props | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
@@ -132,7 +132,7 @@ const {
 | menu | 设置 Menu 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | mentions | 设置 Mentions 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | message | 设置 Message 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
-| modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal-cn#api), styles?: [ModalProps\["styles"\]](/components/modal-cn#api) } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0 |
+| modal | 设置 Modal 组件的通用属性 | { className?: string, style?: React.CSSProperties, classNames?: [ModalProps\["classNames"\]](/components/modal-cn#api), styles?: [ModalProps\["styles"\]](/components/modal-cn#api), closeIcon?: React.ReactNode } | - | 5.7.0, `classNames` 和 `styles`: 5.10.0, `closeIcon`: 5.14.0 |
 | notification | 设置 Notification 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | pagination | 设置 Pagination 组件的通用属性 | { showSizeChanger?: boolean, className?: string, style?: React.CSSProperties } | - | 5.7.0 |
 | progress | 设置 Progress 组件的通用属性 | { className?: string, style?: React.CSSProperties } | - | 5.7.0 |

diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
@@ -252,11 +252,7 @@ const ConfirmDialog: React.FC<ConfirmDialogProps> = (props) => {
       mask={mask}
       maskClosable={maskClosable}
       style={style}
-      styles={{
-        body: bodyStyle,
-        mask: maskStyle,
-        ...styles,
-      }}
+      styles={{ body: bodyStyle, mask: maskStyle, ...styles }}
       width={width}
       zIndex={mergedZIndex}
       afterClose={afterClose}

diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
@@ -4,19 +4,19 @@ import classNames from 'classnames';
 import Dialog from 'rc-dialog';
 
 import useClosable from '../_util/hooks/useClosable';
+import { useZIndex } from '../_util/hooks/useZIndex';
 import { getTransitionName } from '../_util/motion';
 import { canUseDocElement } from '../_util/styleChecker';
 import { devUseWarning } from '../_util/warning';
 import zIndexContext from '../_util/zindexContext';
 import { ConfigContext } from '../config-provider';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 import { NoFormStyle } from '../form/context';
 import { NoCompactStyle } from '../space/Compact';
 import { usePanelRef } from '../watermark/context';
 import type { ModalProps, MousePosition } from './interface';
 import { Footer, renderCloseIcon } from './shared';
 import useStyle from './style';
-import { useZIndex } from '../_util/hooks/useZIndex';
-import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
 
 let mousePosition: MousePosition;
 
@@ -105,9 +105,10 @@ const Modal: React.FC<ModalProps> = (props) => {
   const dialogFooter = footer !== null && (
     <Footer {...props} onOk={handleOk} onCancel={handleCancel} />
   );
+
   const [mergedClosable, mergedCloseIcon] = useClosable(
     closable,
-    closeIcon,
+    typeof closeIcon !== 'undefined' ? closeIcon : modal?.closeIcon,
     (icon) => renderCloseIcon(prefixCls, icon),
     <CloseOutlined className={`${prefixCls}-close-icon`} />,
     true,