docs: Update migration docs (#38667)

* Update migration-v5.zh-CN.md

* Update migration-v5.zh-CN.md

* docs: update doc

docs/react/migration-v5.en-US.md

@@ -28,14 +28,14 @@ This document will help you upgrade from antd `4.x` version to antd `5.x` versio
 - Replace built-in Moment.js with Dayjs. For more: [Use custom date library](/docs/react/use-custom-date-library/).
 - `babel-plugin-import` is no longer supported. CSS-in-JS itself has the ability to import on demand, and plugin support is no longer required. Umi users can remove related configurations.
 
-```diff
+  ```diff
-// config/config.ts
+  // config/config.ts
-export default {
+  export default {
-  antd: {
+    antd: {
--   import: true,
+  -   import: true,
-  },
+    },
-};
+  };
-```
+  ```
 
 ### Compatibility
 
@@ -44,6 +44,7 @@ export default {
 #### Component API adjustment
 
 - The classname API of the component popup box is unified to `popupClassName`, and `dropdownClassName` and other similar APIs will be replaced.
+
   - AutoComplete
   - Cascader
   - Select
@@ -52,20 +53,21 @@ export default {
   - DatePicker
   - Mentions
 
-```diff
+  ```diff
-  import { Select } from 'antd';
+    import { Select } from 'antd';
 
-  const App: React.FC = () => (
+    const App: React.FC = () => (
-    <Select
+      <Select
--     dropdownClassName="my-select-popup"
+  -     dropdownClassName="my-select-popup"
-+     popupClassName="my-select-popup"
+  +     popupClassName="my-select-popup"
-    />
+      />
-  );
+    );
 
-  export default App;
+    export default App;
-```
+  ```
 
 - The controlled visible API of the component popup is unified to `open`, and `visible` and other similar APIs will be replaced.
+
   - Drawer `visible` changed to `open`.
   - Modal `visible` changed to `open`.
   - Dropdown `visible` changed to `open`.
@@ -74,88 +76,84 @@ export default {
   - Slider `tooltip` related API converged to `tooltip` property.
   - Table `filterDropdownVisible` changed to `filterDropdownOpen`.
 
-```diff
+  ```diff
-  import { Modal, Tag, Table, Slider } from 'antd';
+    import { Modal, Tag, Table, Slider } from 'antd';
 
-  const App: React.FC = () => {
+    const App: React.FC = () => {
-    const [visible, setVisible] = useState(true);
+      const [visible, setVisible] = useState(true);
 
-    return (
+      return (
-      <>
+        <>
--       <Modal visible={visible}>content</Modal>
+  -       <Modal visible={visible}>content</Modal>
-+       <Modal open={visible}>content</Modal>
+  +       <Modal open={visible}>content</Modal>
 
--       <Tag visible={visible}>tag</Tag>
+  -       <Tag visible={visible}>tag</Tag>
-+       {visible && <Tag>tag</Tag>}
+  +       {visible && <Tag>tag</Tag>}
 
-        <Table
+          <Table
-          data={[]}
+            data={[]}
-          columns={[
+            columns={[
-            {
+              {
-              title: 'Name',
+                title: 'Name',
-              dataIndex: 'name',
+                dataIndex: 'name',
--             filterDropdownVisible: visible,
+  -             filterDropdownVisible: visible,
-+             filterDropdownOpen: visible,
+  +             filterDropdownOpen: visible,
-            }
+              }
-          ]}
+            ]}
-        />
+          />
 
--       <Slider tooltipVisible={visible} />
+  -       <Slider tooltipVisible={visible} />
-+       <Slider tooltip={{ open: visible }} />
+  +       <Slider tooltip={{ open: visible }} />
-      </>
+        </>
-    );
+      );
-  }
+    }
 
-  export default App;
+    export default App;
-```
+  ```
 
 - `getPopupContainer`: All `getPopupContainer` are guaranteed to return a unique div. This method will be called repeatedly under React 18 concurrent mode.
-- Dropdown
+- Upload List structure changes. [#34528](https://github.com/ant-design/ant-design/pull/34528)
-  - The style of the wrapper element has been removed, please use the Space component.
-  - `prefixCls` of Dropdown.Button changed to `dropdown`.
-- Upload List structure changes.
 - Notification
   - Static methods are no longer allowed to dynamically set `prefixCls` `maxCount` `top` `bottom` `getContainer` in `open`, Notification static methods will now have only one instance. If you need a different configuration, use `useNotification`.
   - `close` was renamed to `destroy` to be consistent with message.
-- Drawer
+- Drawer `style` & `className` are migrated to Drawer panel node, the original properties are replaced by `rootClassName` and `rootStyle`.
-  - `style` & `className` are migrated to Drawer Panel, the original properties are replaced by `rootClassName` and `rootStyle`.
 
 #### Component refactoring and removal
 
 - Move Comment component into `@ant-design/compatible`.
 - Move PageHeader component into `@ant-design/pro-components`.
 
-```diff
+  ```diff
-- import { PageHeader, Comment, Input, Button } from 'antd';
+  - import { PageHeader, Comment, Input, Button } from 'antd';
-+ import { Comment } from '@ant-design/compatible';
+  + import { Comment } from '@ant-design/compatible';
-+ import { PageHeader } from '@ant-design/pro-layout';
+  + import { PageHeader } from '@ant-design/pro-layout';
-+ import { Input, Button } from 'antd';
+  + import { Input, Button } from 'antd';
 
-  const App: React.FC = () => (
+    const App: React.FC = () => (
-    <div>
+      <>
-      <PageHeader />
+        <PageHeader />
-      <Comment />
+        <Comment />
-    </div>
+      </>
-  );
+    );
 
-  export default App;
+    export default App;
-```
+  ```
 
 - BackTop is deprecated in `5.0.0`, and is merged into FloatButton.
 
-```diff
+  ```diff
-- import { BackTop } from 'antd';
+  - import { BackTop } from 'antd';
-+ import { FloatButton } from 'antd';
+  + import { FloatButton } from 'antd';
 
-  const App: React.FC = () => (
+    const App: React.FC = () => (
-    <div>
+      <div>
--     <BackTop />
+  -     <BackTop />
-+     <FloatButton.BackTop />
+  +     <FloatButton.BackTop />
-    </div>
+      </div>
-  );
+    );
 
-  export default App;
+    export default App;
-```
+  ```
 
 ## Start upgrading
 
@@ -171,7 +169,6 @@ If you using antd less variables, you can use compatible package to covert it in
 import { theme } from 'antd';
 import { convertLegacyToken } from '@ant-design/compatible';
 
-
 const { defaultAlgorithm, defaultSeed } = theme;
 
 const mapToken = defaultAlgorithm(defaultSeed);
@@ -190,4 +187,4 @@ const v4Token = convertLegacyToken(mapToken);
 
 ## Encounter problems
 
-If you encounter problems during the upgrade, please go to [GitHub issues](http://new-issue.ant.design/) for feedback. We will respond and improve this document as soon as possible.
+If you encounter problems during the upgrade, please go to [GitHub issues](https://new-issue.ant.design/) for feedback. We will respond and improve this document as soon as possible.

docs/react/migration-v5.zh-CN.md

@@ -29,14 +29,14 @@ title: 从 v4 到 v5
 - 内置的时间库使用 Dayjs 替代 Moment.js，具体请查看 [使用自定义日期库](/docs/react/use-custom-date-library-cn/)。
 - 不再支持 `babel-plugin-import`，CSS-in-JS 本身具有按需加载的能力，不再需要插件支持。Umi 用户可以移除相关配置。
 
-```diff
+  ```diff
-// config/config.ts
+  // config/config.ts
-export default {
+  export default {
-  antd: {
+    antd: {
--   import: true,
+  -   import: true,
-  },
+    },
-};
+  };
-```
+  ```
 
 ### 兼容性调整
 
@@ -45,6 +45,7 @@ export default {
 #### 组件 API 调整
 
 - 组件弹框的 classname API 统一为 `popupClassName`，`dropdownClassName` 等类似 API 都会被替换。
+
   - AutoComplete 组件
   - Cascader 组件
   - Select 组件
@@ -53,20 +54,21 @@ export default {
   - DatePicker 组件
   - Mentions 组件
 
-```diff
+  ```diff
-  import { Select } from 'antd';
+    import { Select } from 'antd';
 
-  const App: React.FC = () => (
+    const App: React.FC = () => (
-    <Select
+      <Select
--     dropdownClassName="my-select-popup"
+  -     dropdownClassName="my-select-popup"
-+     popupClassName="my-select-popup"
+  +     popupClassName="my-select-popup"
-    />
+      />
-  );
+    );
 
-  export default App;
+    export default App;
-```
+  ```
 
 - 组件弹框的受控可见 API 统一为 `open`，`visible` 等类似 API 都会被替换。
+
   - Drawer 组件 `visible` 变为 `open`。
   - Modal 组件 `visible` 变为 `open`。
   - Dropdown 组件 `visible` 变为 `open`。
@@ -75,88 +77,84 @@ export default {
   - Slider 组件 `tooltip` 相关 API 收敛到 `tooltip` 属性中。
   - Table 组件 `filterDropdownVisible` 变为 `filterDropdownOpen`。
 
-```diff
+  ```diff
-  import { Modal, Tag, Table, Slider } from 'antd';
+    import { Modal, Tag, Table, Slider } from 'antd';
 
-  const App: React.FC = () => {
+    const App: React.FC = () => {
-    const [visible, setVisible] = useState(true);
+      const [visible, setVisible] = useState(true);
 
-    return (
+      return (
-      <>
+        <>
--       <Modal visible={visible}>content</Modal>
+  -       <Modal visible={visible}>content</Modal>
-+       <Modal open={visible}>content</Modal>
+  +       <Modal open={visible}>content</Modal>
 
--       <Tag visible={visible}>tag</Tag>
+  -       <Tag visible={visible}>tag</Tag>
-+       {visible && <Tag>tag</Tag>}
+  +       {visible && <Tag>tag</Tag>}
 
-        <Table
+          <Table
-          data={[]}
+            data={[]}
-          columns={[
+            columns={[
-            {
+              {
-              title: 'Name',
+                title: 'Name',
-              dataIndex: 'name',
+                dataIndex: 'name',
--             filterDropdownVisible: visible,
+  -             filterDropdownVisible: visible,
-+             filterDropdownOpen: visible,
+  +             filterDropdownOpen: visible,
-            }
+              }
-          ]}
+            ]}
-        />
+          />
 
--       <Slider tooltipVisible={visible} />
+  -       <Slider tooltipVisible={visible} />
-+       <Slider tooltip={{ open: visible }} />
+  +       <Slider tooltip={{ open: visible }} />
-      </>
+        </>
-    );
+      );
-  }
+    }
 
-  export default App;
+    export default App;
-```
+  ```
 
 - `getPopupContainer`: 所有的 `getPopupContainer` 都需要保证返回的是唯一的 div。React 18 concurrent 下会反复调用该方法。
-- Dropdown
+- Upload List dom 结构变化。[#34528](https://github.com/ant-design/ant-design/pull/34528)
-  - 魔改包裹元素样式移除，请使用 Space 组件。
-  - Dropdown.Button 的 `prefixCls` 改为 `dropdown`。
-- Upload List 结构变化。
 - Notification
   - 静态方法不在允许在 `open` 中动态设置 `prefixCls` `maxCount` `top` `bottom` `getContainer`，Notification 静态方法现在将只有一个实例。如果需要不同配置，请使用 `useNotification`。
-  - `close` 改名为 `destroy` 和 message 保持一致。
+  - `close` 改名为 `destroy`，和 message 保持一致。
-- Drawer
+- Drawer `style` 和 `className` 迁移至 Drawer 弹层区域上，原属性替换为 `rootClassName` 和 `rootStyle`。
-  - `style` & `className` 迁移至 Drawer Panel 中，原属性替换为 `rootClassName` 和 `rootStyle`。
 
 #### 组件重构与移除
 
 - 移除 Comment 组件，移至 `@ant-design/compatible` 中维护。
 - 移除 PageHeader 组件，移至 `@ant-design/pro-components` 中维护。
 
-```diff
+  ```diff
-- import { PageHeader, Comment, Input, Button } from 'antd';
+  - import { PageHeader, Comment, Input, Button } from 'antd';
-+ import { Comment } from '@ant-design/compatible';
+  + import { Comment } from '@ant-design/compatible';
-+ import { PageHeader } from '@ant-design/pro-layout';
+  + import { PageHeader } from '@ant-design/pro-layout';
-+ import { Input, Button } from 'antd';
+  + import { Input, Button } from 'antd';
 
-  const App: React.FC = () => (
+    const App: React.FC = () => (
-    <div>
+      <>
-      <PageHeader />
+        <PageHeader />
-      <Comment />
+        <Comment />
-    </div>
+      </>
-  );
+    );
 
-  export default App;
+    export default App;
-```
+  ```
 
 - BackTop 组件在 `5.0.0` 中废弃，移至 FloatButton 悬浮按钮中。如需使用，可以从 FloatButton 中引入。
 
-```diff
+  ```diff
-- import { BackTop } from 'antd';
+  - import { BackTop } from 'antd';
-+ import { FloatButton } from 'antd';
+  + import { FloatButton } from 'antd';
 
-  const App: React.FC = () => (
+    const App: React.FC = () => (
-    <div>
+      <>
--     <BackTop />
+  -     <BackTop />
-+     <FloatButton.BackTop />
+  +     <FloatButton.BackTop />
-    </div>
+      </>
-  );
+    );
 
-  export default App;
+    export default App;
-```
+  ```
 
 ## 开始升级
 
@@ -172,7 +170,6 @@ npm install --save antd@5.x
 import { theme } from 'antd';
 import { convertLegacyToken } from '@ant-design/compatible';
 
-
 const { defaultAlgorithm, defaultSeed } = theme;
 
 const mapToken = defaultAlgorithm(defaultSeed);
@@ -191,4 +188,4 @@ const v4Token = convertLegacyToken(mapToken);
 
 ## 遇到问题
 
-如果您在升级过程中遇到了问题，请到 [GitHub issues](http://new-issue.ant.design/) 进行反馈。我们会尽快响应和相应改进这篇文档。
+如果您在升级过程中遇到了问题，请到 [GitHub issues](https://new-issue.ant.design/) 进行反馈。我们会尽快响应和相应改进这篇文档。