chore: Update Popconfirm & Modal okType type (#23867)

* chore: Update Popconfirm & Modal okType type

* add test case

* update test case

components/button/button.tsx

@@ -72,6 +72,14 @@ export type ButtonShape = typeof ButtonShapes[number];
 const ButtonHTMLTypes = tuple('submit', 'button', 'reset');
 export type ButtonHTMLType = typeof ButtonHTMLTypes[number];
 
+export type LegacyButtonType = ButtonType | 'danger';
+export function convertLegacyProps(type?: LegacyButtonType): ButtonProps {
+  if (type === 'danger') {
+    return { danger: true };
+  }
+  return { type };
+}
+
 export interface BaseButtonProps {
   type?: ButtonType;
   icon?: React.ReactNode;

components/modal/ActionButton.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
 import Button from '../button';
-import { ButtonType, ButtonProps } from '../button/button';
+import { LegacyButtonType, ButtonProps, convertLegacyProps } from '../button/button';
 
 export interface ActionButtonProps {
-  type?: ButtonType;
+  type?: LegacyButtonType;
   actionFn?: (...args: any[]) => any | PromiseLike<any>;
   closeModal: Function;
   autoFocus?: boolean;
@@ -87,7 +87,12 @@ export default class ActionButton extends React.Component<ActionButtonProps, Act
     const { type, children, buttonProps } = this.props;
     const { loading } = this.state;
     return (
-      <Button type={type} onClick={this.onClick} loading={loading} {...buttonProps}>
+      <Button
+        {...convertLegacyProps(type)}
+        onClick={this.onClick}
+        loading={loading}
+        {...buttonProps}
+      >
         {children}
       </Button>
     );

components/modal/Modal.tsx

@@ -7,7 +7,7 @@ import CloseOutlined from '@ant-design/icons/CloseOutlined';
 import useModal from './useModal';
 import { getConfirmLocale } from './locale';
 import Button from '../button';
-import { ButtonType, ButtonProps } from '../button/button';
+import { LegacyButtonType, ButtonProps, convertLegacyProps } from '../button/button';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
@@ -54,7 +54,7 @@ export interface ModalProps {
   /** 确认按钮文字 */
   okText?: React.ReactNode;
   /** 确认按钮类型 */
-  okType?: ButtonType;
+  okType?: LegacyButtonType;
   /** 取消按钮文字 */
   cancelText?: React.ReactNode;
   /** 点击蒙层是否允许关闭 */
@@ -96,7 +96,7 @@ export interface ModalFuncProps {
   centered?: boolean;
   width?: string | number;
   okText?: React.ReactNode;
-  okType?: ButtonType;
+  okType?: LegacyButtonType;
   cancelText?: React.ReactNode;
   icon?: React.ReactNode;
   mask?: boolean;
@@ -130,7 +130,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
     maskTransitionName: 'fade',
     confirmLoading: false,
     visible: false,
-    okType: 'primary' as ButtonType,
+    okType: 'primary' as LegacyButtonType,
   };
 
   handleCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
@@ -155,7 +155,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
           {cancelText || locale.cancelText}
         </Button>
         <Button
-          type={okType}
+          {...convertLegacyProps(okType)}
           loading={confirmLoading}
           onClick={this.handleOk}
           {...this.props.okButtonProps}

components/modal/__tests__/Modal.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount } from 'enzyme';
 import Modal from '..';
+import Button from '../../button';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 
@@ -67,4 +68,9 @@ describe('Modal', () => {
     const wrapper = mount(<Modal closeIcon={<a>closeIcon</a>} visible />);
     expect(wrapper.render()).toMatchSnapshot();
   });
+
+  it('danger type', () => {
+    const wrapper = mount(<Modal okType="danger" visible />);
+    expect(wrapper.find(Button).last().props().danger).toBeTruthy();
+  });
 });

components/modal/__tests__/type.test.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Modal from '..';
+
+describe('Modal.typescript', () => {
+  it('Modal.okType', () => {
+    const form = <Modal okType="danger" />;
+
+    expect(form).toBeTruthy();
+  });
+});

components/popconfirm/__tests__/type.test.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import Popconfirm from '..';
+
+describe('Popconfirm.typescript', () => {
+  it('Popconfirm.okType', () => {
+    const form = <Popconfirm title="" okType="danger" />;
+
+    expect(form).toBeTruthy();
+  });
+});

components/popconfirm/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import ExclamationCircleFilled from '@ant-design/icons/ExclamationCircleFilled';
 import Tooltip, { AbstractTooltipProps } from '../tooltip';
 import Button from '../button';
-import { ButtonType, NativeButtonProps } from '../button/button';
+import { LegacyButtonType, NativeButtonProps, convertLegacyProps } from '../button/button';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import defaultLocale from '../locale/default';
 import { ConfigContext } from '../config-provider';
@@ -14,7 +14,7 @@ export interface PopconfirmProps extends AbstractTooltipProps {
   onConfirm?: (e?: React.MouseEvent<HTMLElement>) => void;
   onCancel?: (e?: React.MouseEvent<HTMLElement>) => void;
   okText?: React.ReactNode;
-  okType?: ButtonType;
+  okType?: LegacyButtonType;
   cancelText?: React.ReactNode;
   okButtonProps?: NativeButtonProps;
   cancelButtonProps?: NativeButtonProps;
@@ -92,7 +92,12 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
           <Button onClick={onCancel} size="small" {...cancelButtonProps}>
             {cancelText || popconfirmLocale.cancelText}
           </Button>
-          <Button onClick={onConfirm} type={okType} size="small" {...okButtonProps}>
+          <Button
+            onClick={onConfirm}
+            {...convertLegacyProps(okType)}
+            size="small"
+            {...okButtonProps}
+          >
             {okText || popconfirmLocale.okText}
           </Button>
         </div>