fix: change modal's default prefixCls to ant-modal and ant-modal-confirm (#12548)

components/locale-provider/__tests__/index.test.js

@@ -125,7 +125,7 @@ describe('Locale Provider', () => {
           <ModalDemo />
         </LocaleProvider>
       );
-      const currentConfirmNode = document.querySelectorAll('.ant-confirm')[document.querySelectorAll('.ant-confirm').length - 1];
+      const currentConfirmNode = document.querySelectorAll('.ant-modal-confirm')[document.querySelectorAll('.ant-modal-confirm').length - 1];
       let cancelButtonText = currentConfirmNode.querySelectorAll('.ant-btn:not(.ant-btn-primary) span')[0].innerHTML;
       let okButtonText = currentConfirmNode.querySelectorAll('.ant-btn-primary span')[0].innerHTML;
       if (locale.locale === 'zh-cn') {

components/modal/__tests__/confirm.test.js

@@ -71,9 +71,9 @@ describe('Modal.confirm triggers callbacks correctly', () => {
       jest.useFakeTimers();
       open();
       $$('.ant-btn')[0].click();
-      expect($$('.ant-confirm')).toHaveLength(1);
+      expect($$('.ant-modal-confirm')).toHaveLength(1);
       jest.runAllTimers();
-      expect($$('.ant-confirm')).toHaveLength(0);
+      expect($$('.ant-modal-confirm')).toHaveLength(0);
       jest.useRealTimers();
     });
   }
@@ -98,10 +98,10 @@ describe('Modal.confirm triggers callbacks correctly', () => {
         title: 'title',
         content: 'content',
       });
-      expect($$(`.ant-confirm-${type}`)).toHaveLength(1);
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
       $$('.ant-btn')[0].click();
       jest.runAllTimers();
-      expect($$(`.ant-confirm-${type}`)).toHaveLength(0);
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
     });
     jest.useRealTimers();
   });
@@ -113,16 +113,16 @@ describe('Modal.confirm triggers callbacks correctly', () => {
         title: 'title',
         content: 'content',
       });
-      expect($$(`.ant-confirm-${type}`)).toHaveLength(1);
-      expect($$('.ant-confirm-title')[0].innerHTML).toBe('title');
-      expect($$('.ant-confirm-content')[0].innerHTML).toBe('content');
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
+      expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('title');
+      expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('content');
       instance.update({
         title: 'new title',
         content: 'new content',
       });
-      expect($$(`.ant-confirm-${type}`)).toHaveLength(1);
-      expect($$('.ant-confirm-title')[0].innerHTML).toBe('new title');
-      expect($$('.ant-confirm-content')[0].innerHTML).toBe('new content');
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
+      expect($$('.ant-modal-confirm-title')[0].innerHTML).toBe('new title');
+      expect($$('.ant-modal-confirm-content')[0].innerHTML).toBe('new content');
       instance.destroy();
       jest.runAllTimers();
     });
@@ -136,11 +136,19 @@ describe('Modal.confirm triggers callbacks correctly', () => {
         title: 'title',
         content: 'content',
       });
-      expect($$(`.ant-confirm-${type}`)).toHaveLength(1);
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(1);
       instance.destroy();
       jest.runAllTimers();
-      expect($$(`.ant-confirm-${type}`)).toHaveLength(0);
+      expect($$(`.ant-modal-confirm-${type}`)).toHaveLength(0);
     });
     jest.useRealTimers();
   });
+
+  it('prefixCls', () => {
+    open({ prefixCls: 'custom-modal' });
+    expect($$('.custom-modal-mask')).toHaveLength(1);
+    expect($$('.custom-modal-wrap')).toHaveLength(1);
+    expect($$('.custom-modal-confirm')).toHaveLength(1);
+    expect($$('.custom-modal-confirm-body-wrapper')).toHaveLength(1);
+  });
 });

components/modal/confirm.tsx

@@ -18,7 +18,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
   const { onCancel, onOk, close, zIndex, afterClose, visible, keyboard, centered, getContainer, okButtonProps, cancelButtonProps } = props;
   const iconType = props.iconType || 'question-circle';
   const okType = props.okType || 'primary';
-  const prefixCls = props.prefixCls || 'ant-confirm';
+  const prefixCls = props.prefixCls || 'ant-modal';
+  const contentPrefixCls = `${prefixCls}-confirm`;
   // 默认为 true，保持向下兼容
   const okCancel = ('okCancel' in props) ? props.okCancel! : true;
   const width = props.width || 416;
@@ -32,8 +33,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
   const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
 
   const classString = classNames(
-    prefixCls,
-    `${prefixCls}-${props.type}`,
+    contentPrefixCls,
+    `${contentPrefixCls}-${props.type}`,
     props.className,
   );
 
@@ -45,8 +46,9 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
 
   return (
     <Dialog
+      prefixCls={prefixCls}
       className={classString}
-      wrapClassName={classNames({ [`${prefixCls}-centered`]: !!props.centered })}
+      wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!props.centered })}
       onCancel={close.bind(this, { triggerCancel: true })}
       visible={visible}
       title=""
@@ -62,13 +64,13 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
       centered={centered}
       getContainer={getContainer}
     >
-      <div className={`${prefixCls}-body-wrapper`}>
-        <div className={`${prefixCls}-body`}>
+      <div className={`${contentPrefixCls}-body-wrapper`}>
+        <div className={`${contentPrefixCls}-body`}>
           <Icon type={iconType!} />
-          <span className={`${prefixCls}-title`}>{props.title}</span>
-          <div className={`${prefixCls}-content`}>{props.content}</div>
+          <span className={`${contentPrefixCls}-title`}>{props.title}</span>
+          <div className={`${contentPrefixCls}-content`}>{props.content}</div>
         </div>
-        <div className={`${prefixCls}-btns`}>
+        <div className={`${contentPrefixCls}-btns`}>
           {cancelButton}
           <ActionButton type={okType} actionFn={onOk} closeModal={close} autoFocus={autoFocusButton === 'ok'} buttonProps={okButtonProps}>
             {okText}

components/modal/style/confirm.less

@@ -1,6 +1,6 @@
 @import "../../style/mixins/index";
 
-@confirm-prefix-cls: ~"@{ant-prefix}-confirm";
+@confirm-prefix-cls: ~"@{ant-prefix}-modal-confirm";
 
 .@{confirm-prefix-cls} {
   .@{ant-prefix}-modal-header {