feat: switch visible to open for Modal (#37084)

* feat: switch visible to open for Modal

* test: depcated check

* docs: site api update

Co-authored-by: 二货机器人 <smith3816@gmail.com>

components/config-provider/__tests__/components.test.js

@@ -392,7 +392,7 @@ describe('ConfigProvider', () => {
     // Modal
     testPair('Modal', props => (
       <div>
-        <Modal {...props} visible getContainer={false}>
+        <Modal {...props} open getContainer={false}>
           Bamboo is Little Light
         </Modal>
       </div>

components/config-provider/demo/direction.md

@@ -108,7 +108,7 @@ type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
 
 const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
   const [currentStep, setCurrentStep] = useState(0);
-  const [modalVisible, setModalVisible] = useState(false);
+  const [modalOpen, setModalOpen] = useState(false);
   const [badgeCount, setBadgeCount] = useState(5);
   const [showBadge, setShowBadge] = useState(true);
 
@@ -139,17 +139,17 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
 
   // ==== Modal ====
   const showModal = () => {
-    setModalVisible(true);
+    setModalOpen(true);
   };
 
   const handleOk = (e: React.MouseEvent<HTMLElement>) => {
     console.log(e);
-    setModalVisible(false);
+    setModalOpen(false);
   };
 
   const handleCancel = (e: React.MouseEvent<HTMLElement>) => {
     console.log(e);
-    setModalVisible(false);
+    setModalOpen(false);
   };
 
   // ==== End Modal ====
@@ -378,12 +378,7 @@ const Page: React.FC<{ popupPlacement: Placement }> = ({ popupPlacement }) => {
                 <Button type="primary" onClick={showModal}>
                   Open Modal
                 </Button>
-                <Modal
-                  title="پنچره ساده"
-                  visible={modalVisible}
-                  onOk={handleOk}
-                  onCancel={handleCancel}
-                >
+                <Modal title="پنچره ساده" open={modalOpen} onOk={handleOk} onCancel={handleCancel}>
                   <p>نگاشته‌های خود را اینجا قراردهید</p>
                   <p>نگاشته‌های خود را اینجا قراردهید</p>
                   <p>نگاشته‌های خود را اینجا قراردهید</p>

components/config-provider/demo/locale.md

@@ -58,14 +58,14 @@ const columns = [
 ];
 
 const Page = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const showModal = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const hideModal = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
   const info = () => {
@@ -115,7 +115,7 @@ const Page = () => {
       <div className="example">
         <Table dataSource={[]} columns={columns} />
       </div>
-      <Modal title="Locale Modal" visible={visible} onCancel={hideModal}>
+      <Modal title="Locale Modal" open={open} onCancel={hideModal}>
         <p>Locale Modal</p>
       </Modal>
     </div>

components/form/__tests__/index.test.js

@@ -1232,7 +1232,7 @@ describe('Form', () => {
     const Demo = () => (
       <Form>
         <Form.Item labelCol={4} validateStatus="error">
-          <Modal visible>
+          <Modal open>
             <Select className="modal-select" />
           </Modal>
         </Form.Item>

components/form/demo/form-context.md

@@ -33,31 +33,31 @@ interface UserType {
 }
 
 interface ModalFormProps {
-  visible: boolean;
+  open: boolean;
   onCancel: () => void;
 }
 
 // reset form fields when modal is form, closed
-const useResetFormOnCloseModal = ({ form, visible }: { form: FormInstance; visible: boolean }) => {
-  const prevVisibleRef = useRef<boolean>();
+const useResetFormOnCloseModal = ({ form, open }: { form: FormInstance; open: boolean }) => {
+  const prevOpenRef = useRef<boolean>();
   useEffect(() => {
-    prevVisibleRef.current = visible;
-  }, [visible]);
-  const prevVisible = prevVisibleRef.current;
+    prevOpenRef.current = open;
+  }, [open]);
+  const prevOpen = prevOpenRef.current;
 
   useEffect(() => {
-    if (!visible && prevVisible) {
+    if (!open && prevOpen) {
       form.resetFields();
     }
-  }, [form, prevVisible, visible]);
+  }, [form, prevOpen, open]);
 };
 
-const ModalForm: React.FC<ModalFormProps> = ({ visible, onCancel }) => {
+const ModalForm: React.FC<ModalFormProps> = ({ open, onCancel }) => {
   const [form] = Form.useForm();
 
   useResetFormOnCloseModal({
     form,
-    visible,
+    open,
   });
 
   const onOk = () => {
@@ -65,7 +65,7 @@ const ModalForm: React.FC<ModalFormProps> = ({ visible, onCancel }) => {
   };
 
   return (
-    <Modal title="Basic Drawer" visible={visible} onOk={onOk} onCancel={onCancel}>
+    <Modal title="Basic Drawer" open={open} onOk={onOk} onCancel={onCancel}>
       <Form form={form} layout="vertical" name="userForm">
         <Form.Item name="name" label="User Name" rules={[{ required: true }]}>
           <Input />
@@ -79,14 +79,14 @@ const ModalForm: React.FC<ModalFormProps> = ({ visible, onCancel }) => {
 };
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const showUserModal = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const hideUserModal = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
   const onFinish = (values: any) => {
@@ -100,7 +100,7 @@ const App: React.FC = () => {
           const { basicForm } = forms;
           const users = basicForm.getFieldValue('users') || [];
           basicForm.setFieldsValue({ users: [...users, values] });
-          setVisible(false);
+          setOpen(false);
         }
       }}
     >
@@ -140,7 +140,7 @@ const App: React.FC = () => {
         </Form.Item>
       </Form>
 
-      <ModalForm visible={visible} onCancel={hideUserModal} />
+      <ModalForm open={open} onCancel={hideUserModal} />
     </Form.Provider>
   );
 };

components/form/demo/form-in-modal.md

@@ -26,20 +26,20 @@ interface Values {
 }
 
 interface CollectionCreateFormProps {
-  visible: boolean;
+  open: boolean;
   onCreate: (values: Values) => void;
   onCancel: () => void;
 }
 
 const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
-  visible,
+  open,
   onCreate,
   onCancel,
 }) => {
   const [form] = Form.useForm();
   return (
     <Modal
-      visible={visible}
+      open={open}
       title="Create a new collection"
       okText="Create"
       cancelText="Cancel"
@@ -84,11 +84,11 @@ const CollectionCreateForm: React.FC<CollectionCreateFormProps> = ({
 };
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const onCreate = (values: any) => {
     console.log('Received values of form: ', values);
-    setVisible(false);
+    setOpen(false);
   };
 
   return (
@@ -96,16 +96,16 @@ const App: React.FC = () => {
       <Button
         type="primary"
         onClick={() => {
-          setVisible(true);
+          setOpen(true);
         }}
       >
         New Collection
       </Button>
       <CollectionCreateForm
-        visible={visible}
+        open={open}
         onCreate={onCreate}
         onCancel={() => {
-          setVisible(false);
+          setOpen(false);
         }}
       />
     </div>

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

@@ -191,7 +191,7 @@ const App = () => (
     <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
     <Calendar fullscreen={false} value={moment()} />
     <Table dataSource={[]} columns={columns} />
-    <Modal title="Locale Modal" visible getContainer={false}>
+    <Modal title="Locale Modal" open getContainer={false}>
       <p>Locale Modal</p>
     </Modal>
   </div>

components/modal/ConfirmDialog.tsx

@@ -24,6 +24,7 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
     zIndex,
     afterClose,
     visible,
+    open,
     keyboard,
     centered,
     getContainer,
@@ -90,8 +91,8 @@ const ConfirmDialog = (props: ConfirmDialogProps) => {
           { [`${contentPrefixCls}-centered`]: !!props.centered },
           wrapClassName,
         )}
-        onCancel={() => close({ triggerCancel: true })}
-        visible={visible}
+        onCancel={() => close?.({ triggerCancel: true })}
+        open={open || visible}
         title=""
         footer=""
         transitionName={getTransitionName(rootPrefixCls, 'zoom', props.transitionName)}

components/modal/Modal.tsx

@@ -12,6 +12,7 @@ import { NoFormStyle } from '../form/context';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { getTransitionName } from '../_util/motion';
 import { canUseDocElement } from '../_util/styleChecker';
+import warning from '../_util/warning';
 import { getConfirmLocale } from './locale';
 
 let mousePosition: { x: number; y: number } | null;
@@ -37,7 +38,12 @@ if (canUseDocElement()) {
 
 export interface ModalProps {
   /** 对话框是否可见 */
+  /**
+   * @deprecated `visible` is deprecated which will be removed in next major version. Please use
+   *   `open` instead.
+   */
   visible?: boolean;
+  open?: boolean;
   /** 确定按钮 loading */
   confirmLoading?: boolean;
   /** 标题 */
@@ -92,7 +98,12 @@ type getContainerFunc = () => HTMLElement;
 export interface ModalFuncProps {
   prefixCls?: string;
   className?: string;
+  /**
+   * @deprecated `visible` is deprecated which will be removed in next major version. Please use
+   *   `open` instead.
+   */
   visible?: boolean;
+  open?: boolean;
   title?: React.ReactNode;
   closable?: boolean;
   content?: React.ReactNode;
@@ -151,6 +162,12 @@ const Modal: React.FC<ModalProps> = props => {
     onOk?.(e);
   };
 
+  warning(
+    !('visible' in props),
+    'Modal',
+    `\`visible\` will be removed in next major version, please use \`open\` instead.`,
+  );
+
   const renderFooter = (locale: ModalLocale) => {
     const { okText, okType, cancelText, confirmLoading } = props;
     return (
@@ -174,6 +191,7 @@ const Modal: React.FC<ModalProps> = props => {
     prefixCls: customizePrefixCls,
     footer,
     visible,
+    open,
     wrapClassName,
     centered,
     getContainer,
@@ -211,7 +229,7 @@ const Modal: React.FC<ModalProps> = props => {
         prefixCls={prefixCls}
         wrapClassName={wrapClassNameExtended}
         footer={footer === undefined ? defaultFooter : footer}
-        visible={visible}
+        visible={open || visible}
         mousePosition={mousePosition}
         onClose={handleCancel}
         closeIcon={closeIconToRender}
@@ -226,7 +244,7 @@ const Modal: React.FC<ModalProps> = props => {
 Modal.defaultProps = {
   width: 520,
   confirmLoading: false,
-  visible: false,
+  open: false,
   okType: 'primary' as LegacyButtonType,
 };
 

components/modal/__tests__/Modal.test.tsx

@@ -4,14 +4,15 @@ import Modal from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { fireEvent, render } from '../../../tests/utils';
+import { resetWarned } from '../../_util/warning';
 
 jest.mock('rc-util/lib/Portal');
 
-class ModalTester extends React.Component<ModalProps, { visible: boolean }> {
-  state = { visible: false };
+class ModalTester extends React.Component<ModalProps, { open: boolean }> {
+  state = { open: false };
 
   componentDidMount() {
-    this.setState({ visible: true }); // eslint-disable-line react/no-did-mount-set-state
+    this.setState({ open: true }); // eslint-disable-line react/no-did-mount-set-state
   }
 
   container = React.createRef<HTMLDivElement>();
@@ -19,11 +20,11 @@ class ModalTester extends React.Component<ModalProps, { visible: boolean }> {
   getContainer = () => this.container?.current!;
 
   render() {
-    const { visible } = this.state;
+    const { open } = this.state;
     return (
       <div>
         <div ref={this.container} />
-        <Modal {...this.props} visible={visible} getContainer={this.getContainer}>
+        <Modal {...this.props} open={open} getContainer={this.getContainer}>
           Here is content of Modal
         </Modal>
       </div>
@@ -36,7 +37,7 @@ describe('Modal', () => {
   rtlTest(Modal);
 
   it('support closeIcon', () => {
-    render(<Modal closeIcon={<a>closeIcon</a>} visible />);
+    render(<Modal closeIcon={<a>closeIcon</a>} open />);
     expect(document.body.querySelectorAll('.ant-modal-root')[0]).toMatchSnapshot();
   });
 
@@ -52,35 +53,35 @@ describe('Modal', () => {
 
   it('onCancel should be called', () => {
     const onCancel = jest.fn();
-    render(<Modal visible onCancel={onCancel} />);
+    render(<Modal open onCancel={onCancel} />);
     fireEvent.click(document.body.querySelectorAll('.ant-btn')[0]);
     expect(onCancel).toHaveBeenCalled();
   });
 
   it('onOk should be called', () => {
     const onOk = jest.fn();
-    render(<Modal visible onOk={onOk} />);
+    render(<Modal open onOk={onOk} />);
     const btns = document.body.querySelectorAll('.ant-btn');
     fireEvent.click(btns[btns.length - 1]);
     expect(onOk).toHaveBeenCalled();
   });
 
   it('danger type', () => {
-    render(<Modal okType="danger" okText="123" visible />);
+    render(<Modal okType="danger" okText="123" open />);
     const btns = document.body.querySelectorAll('.ant-btn');
     expect(btns[btns.length - 1].classList.contains('ant-btn-dangerous')).toBeTruthy();
   });
 
   it('mouse position', () => {
     const Demo = () => {
-      const [visible, setVisible] = React.useState(false);
+      const [open, setOpen] = React.useState(false);
       const containerRef = React.useRef<HTMLDivElement>(null);
       return (
         <div ref={containerRef}>
-          <div id="trigger" onClick={() => setVisible(true)}>
+          <div id="trigger" onClick={() => setOpen(true)}>
             click me
           </div>
-          <Modal visible={visible} getContainer={() => containerRef.current!} />
+          <Modal open={open} getContainer={() => containerRef.current!} />
         </div>
       );
     };
@@ -90,4 +91,18 @@ describe('Modal', () => {
       (container.querySelectorAll('.ant-modal')[0] as HTMLDivElement).style.transformOrigin,
     ).toBeTruthy();
   });
+
+  it('deprecated warning', () => {
+    resetWarned();
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(<Modal visible />);
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Modal] `visible` will be removed in next major version, please use `open` instead.',
+    );
+
+    expect(document.querySelector('.ant-modal')).toBeTruthy();
+
+    errSpy.mockRestore();
+  });
 });

components/modal/confirm.tsx

@@ -29,7 +29,7 @@ export type ModalStaticFunctions = Record<NonNullable<ModalFuncProps['type']>, M
 export default function confirm(config: ModalFuncProps) {
   const container = document.createDocumentFragment();
   // eslint-disable-next-line @typescript-eslint/no-use-before-define
-  let currentConfig = { ...config, close, visible: true } as any;
+  let currentConfig = { ...config, close, open: true } as any;
 
   function destroy(...args: any[]) {
     const triggerCancel = args.some(param => param && param.triggerCancel);
@@ -79,7 +79,7 @@ export default function confirm(config: ModalFuncProps) {
   function close(...args: any[]) {
     currentConfig = {
       ...currentConfig,
-      visible: false,
+      open: false,
       afterClose: () => {
         if (typeof config.afterClose === 'function') {
           config.afterClose();

components/modal/demo/async.md

@@ -18,26 +18,26 @@ import { Button, Modal } from 'antd';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
   const [confirmLoading, setConfirmLoading] = useState(false);
   const [modalText, setModalText] = useState('Content of the modal');
 
   const showModal = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const handleOk = () => {
     setModalText('The modal will be closed after two seconds');
     setConfirmLoading(true);
     setTimeout(() => {
-      setVisible(false);
+      setOpen(false);
       setConfirmLoading(false);
     }, 2000);
   };
 
   const handleCancel = () => {
     console.log('Clicked cancel button');
-    setVisible(false);
+    setOpen(false);
   };
 
   return (
@@ -47,7 +47,7 @@ const App: React.FC = () => {
       </Button>
       <Modal
         title="Title"
-        visible={visible}
+        open={open}
         onOk={handleOk}
         confirmLoading={confirmLoading}
         onCancel={handleCancel}

components/modal/demo/basic.md

@@ -18,18 +18,18 @@ import { Button, Modal } from 'antd';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [isModalVisible, setIsModalVisible] = useState(false);
+  const [isModalOpen, setIsModalOpen] = useState(false);
 
   const showModal = () => {
-    setIsModalVisible(true);
+    setIsModalOpen(true);
   };
 
   const handleOk = () => {
-    setIsModalVisible(false);
+    setIsModalOpen(false);
   };
 
   const handleCancel = () => {
-    setIsModalVisible(false);
+    setIsModalOpen(false);
   };
 
   return (
@@ -37,7 +37,7 @@ const App: React.FC = () => {
       <Button type="primary" onClick={showModal}>
         Open Modal
       </Button>
-      <Modal title="Basic Modal" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
+      <Modal title="Basic Modal" open={isModalOpen} onOk={handleOk} onCancel={handleCancel}>
         <p>Some contents...</p>
         <p>Some contents...</p>
         <p>Some contents...</p>

components/modal/demo/button-props.md

@@ -18,20 +18,20 @@ import { Button, Modal } from 'antd';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const showModal = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const handleOk = (e: React.MouseEvent<HTMLElement>) => {
     console.log(e);
-    setVisible(false);
+    setOpen(false);
   };
 
   const handleCancel = (e: React.MouseEvent<HTMLElement>) => {
     console.log(e);
-    setVisible(false);
+    setOpen(false);
   };
 
   return (
@@ -41,7 +41,7 @@ const App: React.FC = () => {
       </Button>
       <Modal
         title="Basic Modal"
-        visible={visible}
+        open={open}
         onOk={handleOk}
         onCancel={handleCancel}
         okButtonProps={{ disabled: true }}

components/modal/demo/dark.md

@@ -298,7 +298,7 @@ const TableTransfer = ({ leftColumns, rightColumns, ...restProps }) => (
 );
 
 export default () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
   const [targetKeys, setTargetKeys] = useState(oriTargetKeys);
   const [selectedKeys, setSelectedKeys] = useState([]);
   const [disabled, setDisabled] = useState(false);
@@ -329,17 +329,17 @@ export default () => {
   };
 
   const showModal = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const handleOk = e => {
     console.log(e);
-    setVisible(false);
+    setOpen(false);
   };
 
   const handleCancel = e => {
     console.log(e);
-    setVisible(false);
+    setOpen(false);
   };
 
   const columns = [
@@ -385,7 +385,7 @@ export default () => {
       <Button type="primary" onClick={showModal}>
         Open Modal
       </Button>
-      <Modal title="Basic Modal" visible={visible} onOk={handleOk} onCancel={handleCancel}>
+      <Modal title="Basic Modal" open={open} onOk={handleOk} onCancel={handleCancel}>
         <Switch
           unCheckedChildren="disabled"
           checkedChildren="disabled"

components/modal/demo/footer.md

@@ -23,22 +23,22 @@ import React, { useState } from 'react';
 
 const App: React.FC = () => {
   const [loading, setLoading] = useState(false);
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const showModal = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const handleOk = () => {
     setLoading(true);
     setTimeout(() => {
       setLoading(false);
-      setVisible(false);
+      setOpen(false);
     }, 3000);
   };
 
   const handleCancel = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
   return (
@@ -47,7 +47,7 @@ const App: React.FC = () => {
         Open Modal with customized footer
       </Button>
       <Modal
-        visible={visible}
+        open={open}
         title="Title"
         onOk={handleOk}
         onCancel={handleCancel}

components/modal/demo/locale.md

@@ -19,14 +19,14 @@ import { Button, Modal, Space } from 'antd';
 import React, { useState } from 'react';
 
 const LocalizedModal = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const showModal = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const hideModal = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
   return (
@@ -36,7 +36,7 @@ const LocalizedModal = () => {
       </Button>
       <Modal
         title="Modal"
-        visible={visible}
+        open={open}
         onOk={hideModal}
         onCancel={hideModal}
         okText="确认"

components/modal/demo/modal-render.md

@@ -20,23 +20,23 @@ import type { DraggableData, DraggableEvent } from 'react-draggable';
 import Draggable from 'react-draggable';
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
   const [disabled, setDisabled] = useState(false);
   const [bounds, setBounds] = useState({ left: 0, top: 0, bottom: 0, right: 0 });
   const draggleRef = useRef<HTMLDivElement>(null);
 
   const showModal = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const handleOk = (e: React.MouseEvent<HTMLElement>) => {
     console.log(e);
-    setVisible(false);
+    setOpen(false);
   };
 
   const handleCancel = (e: React.MouseEvent<HTMLElement>) => {
     console.log(e);
-    setVisible(false);
+    setOpen(false);
   };
 
   const onStart = (_event: DraggableEvent, uiData: DraggableData) => {
@@ -80,7 +80,7 @@ const App: React.FC = () => {
             Draggable Modal
           </div>
         }
-        visible={visible}
+        open={open}
         onOk={handleOk}
         onCancel={handleCancel}
         modalRender={modal => (

components/modal/demo/position.md

@@ -18,20 +18,20 @@ import { Button, Modal } from 'antd';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [modal1Visible, setModal1Visible] = useState(false);
-  const [modal2Visible, setModal2Visible] = useState(false);
+  const [modal1Open, setModal1Open] = useState(false);
+  const [modal2Open, setModal2Open] = useState(false);
 
   return (
     <>
-      <Button type="primary" onClick={() => setModal1Visible(true)}>
+      <Button type="primary" onClick={() => setModal1Open(true)}>
         Display a modal dialog at 20px to Top
       </Button>
       <Modal
         title="20px to Top"
         style={{ top: 20 }}
-        visible={modal1Visible}
-        onOk={() => setModal1Visible(false)}
-        onCancel={() => setModal1Visible(false)}
+        visible={modal1Open}
+        onOk={() => setModal1Open(false)}
+        onCancel={() => setModal1Open(false)}
       >
         <p>some contents...</p>
         <p>some contents...</p>
@@ -39,15 +39,15 @@ const App: React.FC = () => {
       </Modal>
       <br />
       <br />
-      <Button type="primary" onClick={() => setModal2Visible(true)}>
+      <Button type="primary" onClick={() => setModal2Open(true)}>
         Vertically centered modal dialog
       </Button>
       <Modal
         title="Vertically centered modal dialog"
         centered
-        visible={modal2Visible}
-        onOk={() => setModal2Visible(false)}
-        onCancel={() => setModal2Visible(false)}
+        visible={modal2Open}
+        onOk={() => setModal2Open(false)}
+        onCancel={() => setModal2Open(false)}
       >
         <p>some contents...</p>
         <p>some contents...</p>

components/modal/demo/width.md

@@ -18,19 +18,19 @@ import { Button, Modal } from 'antd';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   return (
     <>
-      <Button type="primary" onClick={() => setVisible(true)}>
+      <Button type="primary" onClick={() => setOpen(true)}>
         Open Modal of 1000px width
       </Button>
       <Modal
         title="Modal 1000px width"
         centered
-        visible={visible}
-        onOk={() => setVisible(false)}
-        onCancel={() => setVisible(false)}
+        open={open}
+        onOk={() => setOpen(false)}
+        onCancel={() => setOpen(false)}
         width={1000}
       >
         <p>some contents...</p>

components/modal/index.en-US.md

@@ -38,7 +38,7 @@ When requiring users to interact with the application, but without jumping to a
 | okType | Button `type` of the OK button | string | `primary` |  |
 | style | Style of floating layer, typically used at least for adjusting the position | CSSProperties | - |  |
 | title | The modal dialog's title | ReactNode | - |  |
-| visible | Whether the modal dialog is visible or not | boolean | false |  |
+| open | Whether the modal dialog is visible or not | boolean | false | 4.23.0 |
 | width | Width of the modal dialog | string \| number | 520 |  |
 | wrapClassName | The class name of the container of the modal dialog | string | - |  |
 | zIndex | The `z-index` of the Modal | number | 1000 |  |

components/modal/index.zh-CN.md

@@ -41,7 +41,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
 | okType | 确认按钮类型 | string | `primary` |  |
 | style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - |  |
 | title | 标题 | ReactNode | - |  |
-| visible | 对话框是否可见 | boolean | - |  |
+| open | 对话框是否可见 | boolean | - | 4.23.0 |
 | width | 宽度 | string \| number | 520 |  |
 | wrapClassName | 对话框外层容器的类名 | string | - |  |
 | zIndex | 设置 Modal 的 `z-index` | number | 1000 |  |

components/modal/useModal/HookModal.tsx

@@ -25,7 +25,7 @@ const HookModal: React.ForwardRefRenderFunction<HookModalRef, HookModalProps> =
   { afterClose, config },
   ref,
 ) => {
-  const [visible, setVisible] = React.useState(true);
+  const [open, setOpen] = React.useState(true);
   const [innerConfig, setInnerConfig] = React.useState(config);
   const { direction, getPrefixCls } = React.useContext(ConfigContext);
 
@@ -33,7 +33,7 @@ const HookModal: React.ForwardRefRenderFunction<HookModalRef, HookModalProps> =
   const rootPrefixCls = getPrefixCls();
 
   const close = (...args: any[]) => {
-    setVisible(false);
+    setOpen(false);
     const triggerCancel = args.some(param => param && param.triggerCancel);
     if (innerConfig.onCancel && triggerCancel) {
       innerConfig.onCancel(() => {}, ...args.slice(1));
@@ -58,7 +58,7 @@ const HookModal: React.ForwardRefRenderFunction<HookModalRef, HookModalProps> =
           rootPrefixCls={rootPrefixCls}
           {...innerConfig}
           close={close}
-          visible={visible}
+          open={open}
           afterClose={afterClose}
           okText={
             innerConfig.okText ||

components/upload/demo/file-type.md

@@ -37,7 +37,7 @@ const getBase64 = (file: RcFile): Promise<string> =>
   });
 
 const App: React.FC = () => {
-  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewOpen, setPreviewOpen] = useState(false);
   const [previewImage, setPreviewImage] = useState('');
   const [fileList, setFileList] = useState<UploadFile[]>([
     {
@@ -69,14 +69,14 @@ const App: React.FC = () => {
     },
   ]);
 
-  const handleCancel = () => setPreviewVisible(false);
+  const handleCancel = () => setPreviewOpen(false);
 
   const handlePreview = async (file: UploadFile) => {
     if (!file.url && !file.preview) {
       file.preview = await getBase64(file.originFileObj as RcFile);
     }
 
-    setPreviewVisible(true);
+    setPreviewOpen(true);
     setPreviewImage(file.url || (file.preview as string));
   };
 
@@ -128,7 +128,7 @@ const App: React.FC = () => {
       >
         {fileList.length >= 8 ? null : uploadButton}
       </Upload>
-      <Modal visible={previewVisible} footer={null} onCancel={handleCancel}>
+      <Modal open={previewOpen} footer={null} onCancel={handleCancel}>
         <img alt="example" style={{ width: '100%' }} src={previewImage} />
       </Modal>
     </>

components/upload/demo/picture-card.md

@@ -29,7 +29,7 @@ const getBase64 = (file: RcFile): Promise<string> =>
   });
 
 const App: React.FC = () => {
-  const [previewVisible, setPreviewVisible] = useState(false);
+  const [previewOpen, setPreviewOpen] = useState(false);
   const [previewImage, setPreviewImage] = useState('');
   const [previewTitle, setPreviewTitle] = useState('');
   const [fileList, setFileList] = useState<UploadFile[]>([
@@ -71,7 +71,7 @@ const App: React.FC = () => {
     },
   ]);
 
-  const handleCancel = () => setPreviewVisible(false);
+  const handleCancel = () => setPreviewOpen(false);
 
   const handlePreview = async (file: UploadFile) => {
     if (!file.url && !file.preview) {
@@ -79,7 +79,7 @@ const App: React.FC = () => {
     }
 
     setPreviewImage(file.url || (file.preview as string));
-    setPreviewVisible(true);
+    setPreviewOpen(true);
     setPreviewTitle(file.name || file.url!.substring(file.url!.lastIndexOf('/') + 1));
   };
 
@@ -103,7 +103,7 @@ const App: React.FC = () => {
       >
         {fileList.length >= 8 ? null : uploadButton}
       </Upload>
-      <Modal visible={previewVisible} title={previewTitle} footer={null} onCancel={handleCancel}>
+      <Modal open={previewOpen} title={previewTitle} footer={null} onCancel={handleCancel}>
         <img alt="example" style={{ width: '100%' }} src={previewImage} />
       </Modal>
     </>

site/theme/template/IconDisplay/IconPicSearcher.tsx

@@ -23,7 +23,7 @@ interface PicSearcherProps {
 
 interface PicSearcherState {
   loading: boolean;
-  modalVisible: boolean;
+  modalOpen: boolean;
   popoverVisible: boolean;
   icons: iconObject[];
   fileList: any[];
@@ -40,7 +40,7 @@ const PicSearcher: React.FC<PicSearcherProps> = ({ intl }) => {
   const { messages } = intl;
   const [state, setState] = useState<PicSearcherState>({
     loading: false,
-    modalVisible: false,
+    modalOpen: false,
     popoverVisible: false,
     icons: [],
     fileList: [],
@@ -104,7 +104,7 @@ const PicSearcher: React.FC<PicSearcherProps> = ({ intl }) => {
   const toggleModal = useCallback(() => {
     setState(prev => ({
       ...prev,
-      modalVisible: !prev.modalVisible,
+      modalOpen: !prev.modalOpen,
       popoverVisible: false,
       fileList: [],
       icons: [],
@@ -146,7 +146,7 @@ const PicSearcher: React.FC<PicSearcherProps> = ({ intl }) => {
       </Popover>
       <Modal
         title={messages[`app.docs.components.icon.pic-searcher.title`]}
-        visible={state.modalVisible}
+        open={state.modalOpen}
         onCancel={toggleModal}
         footer={null}
       >