From aa648d2cd80847054b86907890f6977c4425f45f Mon Sep 17 00:00:00 2001
From: losgif <losgif@gmail.com>
Date: Sat, 30 Jul 2022 17:13:20 +0800
Subject: [PATCH 01/22] feat(table): add column title attribute in expandable
 props. (#36794)

* chore: rc-table's version up to 7.26.0

* docs(table): add column title attribute in expandable

* docs(table): add column title attribute in expandable
---
 components/table/index.en-US.md | 1 +
 components/table/index.zh-CN.md | 1 +
 package.json                    | 2 +-
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md
index b1964d0899..c2de4149ee 100644
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@@ -177,6 +177,7 @@ Properties for expandable.
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | childrenColumnName | The column contains children to display | string | children |  |
+| columnTitle | Set the title of the expand column | ReactNode | - | 4.23.0 |
 | columnWidth | Set the width of the expand column | string \| number | - |  |
 | defaultExpandAllRows | Expand all rows initially | boolean | false |  |
 | defaultExpandedRowKeys | Initial expanded row keys | string\[] | - |  |
diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md
index b5d8017063..902b874e5d 100644
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@@ -178,6 +178,7 @@ const columns = [
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | childrenColumnName | 指定树形结构的列名 | string | children |  |
+| columnTitle | 自定义展开列表头 | ReactNode | - | 4.23.0 |
 | columnWidth | 自定义展开列宽度 | string \| number | - |  |
 | defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false |  |
 | defaultExpandedRowKeys | 默认展开的行 | string\[] | - |  |
diff --git a/package.json b/package.json
index e7737114a5..921aa7f36f 100644
--- a/package.json
+++ b/package.json
@@ -148,7 +148,7 @@
     "rc-slider": "~10.0.0",
     "rc-steps": "~4.1.0",
     "rc-switch": "~3.2.0",
-    "rc-table": "~7.25.3",
+    "rc-table": "~7.26.0",
     "rc-tabs": "~11.16.0",
     "rc-textarea": "~0.3.0",
     "rc-tooltip": "~5.2.0",

From 549a2f956f1e5c414457ef315ea321ce9e5d5275 Mon Sep 17 00:00:00 2001
From: JarvisArt <38420763+JarvisArt@users.noreply.github.com>
Date: Mon, 1 Aug 2022 17:39:57 +0800
Subject: [PATCH 02/22] feat: add value parameter to textarea
 showCount.formatter (#36793)

---
 components/input/TextArea.tsx               | 4 ++--
 components/input/__tests__/index.test.tsx   | 6 ++++--
 components/input/__tests__/textarea.test.js | 6 ++++--
 components/input/index.en-US.md             | 4 ++--
 components/input/index.zh-CN.md             | 4 ++--
 package.json                                | 2 +-
 6 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx
index 82dde308a2..2be7514256 100644
--- a/components/input/TextArea.tsx
+++ b/components/input/TextArea.tsx
@@ -17,7 +17,7 @@ import type { InputFocusOptions } from './Input';
 import { fixControlledValue, resolveOnChange, triggerFocus } from './Input';
 
 interface ShowCountProps {
-  formatter: (args: { count: number; maxLength?: number }) => string;
+  formatter: (args: { value: string; count: number; maxLength?: number }) => string;
 }
 
 function fixEmojiLength(value: string, maxLength: number) {
@@ -233,7 +233,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
 
       let dataCount = '';
       if (typeof showCount === 'object') {
-        dataCount = showCount.formatter({ count: valueLength, maxLength });
+        dataCount = showCount.formatter({ value: val, count: valueLength, maxLength });
       } else {
         dataCount = `${valueLength}${hasMaxLength ? ` / ${maxLength}` : ''}`;
       }
diff --git a/components/input/__tests__/index.test.tsx b/components/input/__tests__/index.test.tsx
index c43759b7b7..833c682d16 100644
--- a/components/input/__tests__/index.test.tsx
+++ b/components/input/__tests__/index.test.tsx
@@ -272,12 +272,14 @@ describe('should support showCount', () => {
     const { container } = render(
       <Input
         maxLength={5}
-        showCount={{ formatter: ({ count, maxLength }) => `${count}, ${maxLength}` }}
+        showCount={{
+          formatter: ({ value, count, maxLength }) => `${value}, ${count}, ${maxLength}`,
+        }}
         value="12345"
       />,
     );
     expect(container.querySelector('input')?.getAttribute('value')).toBe('12345');
-    expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('5, 5');
+    expect(container.querySelector('.ant-input-show-count-suffix')?.innerHTML).toBe('12345, 5, 5');
   });
 });
 
diff --git a/components/input/__tests__/textarea.test.js b/components/input/__tests__/textarea.test.js
index 27a882c428..3e3744034c 100644
--- a/components/input/__tests__/textarea.test.js
+++ b/components/input/__tests__/textarea.test.js
@@ -304,13 +304,15 @@ describe('TextArea', () => {
       const { container } = render(
         <TextArea
           maxLength={5}
-          showCount={{ formatter: ({ count, maxLength }) => `${count}, ${maxLength}` }}
+          showCount={{
+            formatter: ({ value, count, maxLength }) => `${value}, ${count}, ${maxLength}`,
+          }}
           value="12345"
         />,
       );
       expect(container.querySelector('textarea').value).toBe('12345');
       expect(container.querySelector('.ant-input-textarea').getAttribute('data-count')).toBe(
-        '5, 5',
+        '12345, 5, 5',
       );
     });
   });
diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md
index a684eb1f40..45828b5a6d 100644
--- a/components/input/index.en-US.md
+++ b/components/input/index.en-US.md
@@ -26,7 +26,7 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
 | disabled | Whether the input is disabled | boolean | false |  |
 | id | The ID for input | string | - |  |
 | maxLength | The max length | number | - |  |
-| showCount | Whether show text count | boolean \| { formatter: ({ count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 |
+| showCount | Whether show text count | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
 | status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
 | prefix | The prefix icon for the Input | ReactNode | - |  |
 | size | The size of the input box. Note: in the context of a form, the `middle` size is used | `large` \| `middle` \| `small` | - |  |
@@ -49,7 +49,7 @@ The rest of the props of Input are exactly the same as the original [input](http
 | bordered | Whether has border style | boolean | true | 4.5.0 |
 | defaultValue | The initial input content | string | - |  |
 | maxLength | The max length | number | - | 4.7.0 |
-| showCount | Whether show text count | boolean \| { formatter: ({ count: number, maxLength?: number }) => string } | false | 4.7.0 (formatter: 4.10.0) |
+| showCount | Whether show text count | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string } | false | 4.7.0 formatter: 4.10.0 info.value: 4.23.0 |
 | value | The input content value | string | - |  |
 | onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - |  |
 | onResize | The callback function that is triggered when resize | function({ width, height }) | - |  |
diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md
index ac7401cf31..a51f6dc8e1 100644
--- a/components/input/index.zh-CN.md
+++ b/components/input/index.zh-CN.md
@@ -27,7 +27,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
 | disabled | 是否禁用状态，默认为 false | boolean | false |  |
 | id | 输入框的 id | string | - |  |
 | maxLength | 最大长度 | number | - |  |
-| showCount | 是否展示字数 | boolean \| { formatter: ({ count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 |
+| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => ReactNode } | false | 4.18.0 info.value: 4.23.0 |
 | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
 | prefix | 带有前缀图标的 input | ReactNode | - |  |
 | size | 控件大小。注：标准表单内的输入框大小限制为 `middle` | `large` \| `middle` \| `small` | - |  |
@@ -50,7 +50,7 @@ Input 的其他属性和 React 自带的 [input](https://reactjs.org/docs/dom-el
 | bordered | 是否有边框 | boolean | true | 4.5.0 |
 | defaultValue | 输入框默认内容 | string | - |  |
 | maxLength | 内容最大长度 | number | - | 4.7.0 |
-| showCount | 是否展示字数 | boolean \| { formatter: ({ count: number, maxLength?: number }) => string } | false | 4.7.0 (formatter: 4.10.0) |
+| showCount | 是否展示字数 | boolean \| { formatter: (info: { value: string, count: number, maxLength?: number }) => string } | false | 4.7.0 formatter: 4.10.0 info.value: 4.23.0 |
 | value | 输入框内容 | string | - |  |
 | onPressEnter | 按下回车的回调 | function(e) | - |  |
 | onResize | resize 回调 | function({ width, height }) | - |  |
diff --git a/package.json b/package.json
index 921aa7f36f..f1507fc471 100644
--- a/package.json
+++ b/package.json
@@ -132,7 +132,7 @@
     "rc-dropdown": "~4.0.0",
     "rc-field-form": "~1.27.0",
     "rc-image": "~5.7.0",
-    "rc-input": "~0.0.1-alpha.5",
+    "rc-input": "~0.1.2",
     "rc-input-number": "~7.3.5",
     "rc-mentions": "~1.9.0",
     "rc-menu": "~9.6.0",

From dd6e93d4ae5dcdb67e53191d52efd816222341e3 Mon Sep 17 00:00:00 2001
From: nuintun <nuintun@gmail.com>
Date: Thu, 4 Aug 2022 10:49:55 +0800
Subject: [PATCH 03/22] feat: Dropdown button add danger status support
 (#36810)

* feat: Dropdown button add danger status support

* fix: Dropdown button danger test

* fix: Dropdown button danger test

* Update components/dropdown/index.zh-CN.md

Co-authored-by: afc163 <afc163@gmail.com>

* Update components/dropdown/index.en-US.md

Co-authored-by: afc163 <afc163@gmail.com>

Co-authored-by: afc163 <afc163@gmail.com>
---
 .../__snapshots__/demo-extend.test.ts.snap    | 284 +++++++++++++++++-
 .../__tests__/__snapshots__/demo.test.js.snap |  43 ++-
 components/dropdown/demo/dropdown-button.md   |   3 +
 components/dropdown/dropdown-button.tsx       |   5 +-
 components/dropdown/index.en-US.md            |   1 +
 components/dropdown/index.zh-CN.md            |   1 +
 6 files changed, 334 insertions(+), 3 deletions(-)

diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
index 74e30e6b48..a301aa58d0 100644
--- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -4246,7 +4246,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
   </div>
   <div
     class="ant-space-item"
-    style="padding-bottom:8px"
+    style="margin-right:8px;padding-bottom:8px"
   >
     <button
       class="ant-btn ant-btn-default ant-dropdown-trigger"
@@ -4528,6 +4528,288 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
       </div>
     </div>
   </div>
+  <div
+    class="ant-space-item"
+    style="padding-bottom:8px"
+  >
+    <div
+      class="ant-btn-group ant-dropdown-button"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-dangerous"
+        type="button"
+      >
+        <span>
+          Danger
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-dangerous ant-dropdown-trigger"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </button>
+      <div>
+        <div
+          class="ant-dropdown"
+          style="opacity:0"
+        >
+          <ul
+            class="ant-dropdown-menu ant-dropdown-menu-root ant-dropdown-menu-vertical ant-dropdown-menu-light"
+            data-menu-list="true"
+            role="menu"
+            tabindex="0"
+          >
+            <li
+              class="ant-dropdown-menu-item"
+              role="menuitem"
+              tabindex="-1"
+            >
+              <span
+                aria-label="user"
+                class="anticon anticon-user ant-dropdown-menu-item-icon"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="user"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                  />
+                </svg>
+              </span>
+              <span
+                class="ant-dropdown-menu-title-content"
+              >
+                1st menu item
+              </span>
+            </li>
+            <div>
+              <div
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                style="opacity:0"
+              >
+                <div
+                  class="ant-tooltip-content"
+                >
+                  <div
+                    class="ant-tooltip-arrow"
+                  >
+                    <span
+                      class="ant-tooltip-arrow-content"
+                    />
+                  </div>
+                  <div
+                    class="ant-tooltip-inner"
+                    role="tooltip"
+                  />
+                </div>
+              </div>
+            </div>
+            <li
+              class="ant-dropdown-menu-item"
+              role="menuitem"
+              tabindex="-1"
+            >
+              <span
+                aria-label="user"
+                class="anticon anticon-user ant-dropdown-menu-item-icon"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="user"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                  />
+                </svg>
+              </span>
+              <span
+                class="ant-dropdown-menu-title-content"
+              >
+                2nd menu item
+              </span>
+            </li>
+            <div>
+              <div
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                style="opacity:0"
+              >
+                <div
+                  class="ant-tooltip-content"
+                >
+                  <div
+                    class="ant-tooltip-arrow"
+                  >
+                    <span
+                      class="ant-tooltip-arrow-content"
+                    />
+                  </div>
+                  <div
+                    class="ant-tooltip-inner"
+                    role="tooltip"
+                  />
+                </div>
+              </div>
+            </div>
+            <li
+              class="ant-dropdown-menu-item"
+              role="menuitem"
+              tabindex="-1"
+            >
+              <span
+                aria-label="user"
+                class="anticon anticon-user ant-dropdown-menu-item-icon"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  data-icon="user"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+                  />
+                </svg>
+              </span>
+              <span
+                class="ant-dropdown-menu-title-content"
+              >
+                3rd menu item
+              </span>
+            </li>
+            <div>
+              <div
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                style="opacity:0"
+              >
+                <div
+                  class="ant-tooltip-content"
+                >
+                  <div
+                    class="ant-tooltip-arrow"
+                  >
+                    <span
+                      class="ant-tooltip-arrow-content"
+                    />
+                  </div>
+                  <div
+                    class="ant-tooltip-inner"
+                    role="tooltip"
+                  />
+                </div>
+              </div>
+            </div>
+          </ul>
+          <div
+            aria-hidden="true"
+            style="display:none"
+          >
+            <div>
+              <div
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                style="opacity:0"
+              >
+                <div
+                  class="ant-tooltip-content"
+                >
+                  <div
+                    class="ant-tooltip-arrow"
+                  >
+                    <span
+                      class="ant-tooltip-arrow-content"
+                    />
+                  </div>
+                  <div
+                    class="ant-tooltip-inner"
+                    role="tooltip"
+                  />
+                </div>
+              </div>
+            </div>
+            <div>
+              <div
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                style="opacity:0"
+              >
+                <div
+                  class="ant-tooltip-content"
+                >
+                  <div
+                    class="ant-tooltip-arrow"
+                  >
+                    <span
+                      class="ant-tooltip-arrow-content"
+                    />
+                  </div>
+                  <div
+                    class="ant-tooltip-inner"
+                    role="tooltip"
+                  />
+                </div>
+              </div>
+            </div>
+            <div>
+              <div
+                class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+                style="opacity:0"
+              >
+                <div
+                  class="ant-tooltip-content"
+                >
+                  <div
+                    class="ant-tooltip-arrow"
+                  >
+                    <span
+                      class="ant-tooltip-arrow-content"
+                    />
+                  </div>
+                  <div
+                    class="ant-tooltip-inner"
+                    role="tooltip"
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>
 `;
 
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
index e63aa57ee7..1a4d0dfefc 100644
--- a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
@@ -334,7 +334,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
   </div>
   <div
     class="ant-space-item"
-    style="padding-bottom:8px"
+    style="margin-right:8px;padding-bottom:8px"
   >
     <button
       class="ant-btn ant-btn-default ant-dropdown-trigger"
@@ -375,6 +375,47 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
       </div>
     </button>
   </div>
+  <div
+    class="ant-space-item"
+    style="padding-bottom:8px"
+  >
+    <div
+      class="ant-btn-group ant-dropdown-button"
+    >
+      <button
+        class="ant-btn ant-btn-default ant-btn-dangerous"
+        type="button"
+      >
+        <span>
+          Danger
+        </span>
+      </button>
+      <button
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-dangerous ant-dropdown-trigger"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
 </div>
 `;
 
diff --git a/components/dropdown/demo/dropdown-button.md b/components/dropdown/demo/dropdown-button.md
index 663780313b..ff52da4bc0 100644
--- a/components/dropdown/demo/dropdown-button.md
+++ b/components/dropdown/demo/dropdown-button.md
@@ -82,6 +82,9 @@ const App: React.FC = () => (
         </Space>
       </Button>
     </Dropdown>
+    <Dropdown.Button danger onClick={handleButtonClick} overlay={menu}>
+      Danger
+    </Dropdown.Button>
   </Space>
 );
 
diff --git a/components/dropdown/dropdown-button.tsx b/components/dropdown/dropdown-button.tsx
index 7f685c07b9..b58c47a81a 100644
--- a/components/dropdown/dropdown-button.tsx
+++ b/components/dropdown/dropdown-button.tsx
@@ -16,6 +16,7 @@ export type DropdownButtonType = 'default' | 'primary' | 'ghost' | 'dashed' | 'l
 export interface DropdownButtonProps extends ButtonGroupProps, DropdownProps {
   type?: DropdownButtonType;
   htmlType?: ButtonHTMLType;
+  danger?: boolean;
   disabled?: boolean;
   loading?: ButtonProps['loading'];
   onClick?: React.MouseEventHandler<HTMLButtonElement>;
@@ -40,6 +41,7 @@ const DropdownButton: DropdownButtonInterface = props => {
   const {
     prefixCls: customizePrefixCls,
     type = 'default',
+    danger,
     disabled,
     loading,
     onClick,
@@ -93,6 +95,7 @@ const DropdownButton: DropdownButtonInterface = props => {
   const leftButton = (
     <Button
       type={type}
+      danger={danger}
       disabled={disabled}
       loading={loading}
       onClick={onClick}
@@ -104,7 +107,7 @@ const DropdownButton: DropdownButtonInterface = props => {
     </Button>
   );
 
-  const rightButton = <Button type={type} icon={icon} />;
+  const rightButton = <Button type={type} danger={danger} icon={icon} />;
 
   const [leftButtonToRender, rightButtonToRender] = buttonsRender!([leftButton, rightButton]);
 
diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md
index e82aad63fa..db82aec981 100644
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@@ -42,6 +42,7 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
 | --- | --- | --- | --- | --- |
 | buttonsRender | Custom buttons inside Dropdown.Button | (buttons: ReactNode\[]) => ReactNode\[] | - |  |
 | loading | Set the loading status of button | boolean \| { delay: number } | false |  |
+| danger | Set the danger status of button | boolean | - | 4.23.0 |
 | disabled | Whether the dropdown menu is disabled | boolean | - |  |
 | icon | Icon (appears on the right) | ReactNode | - |  |
 | overlay | The dropdown menu | [Menu](/components/menu) | - |  |
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index 4176320dd4..8f77d6393b 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -46,6 +46,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 | --- | --- | --- | --- | --- |
 | buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode\[]) => ReactNode\[] | - |  |
 | loading | 设置按钮载入状态 | boolean \| { delay: number } | false |  |
+| danger | 设置危险按钮 | boolean | - | 4.23.0 |
 | disabled | 菜单是否禁用 | boolean | - |  |
 | icon | 右侧的 icon | ReactNode | - |  |
 | overlay | 菜单 | [Menu](/components/menu/) | - |  |

From 628968f460062ae0cb59f9dc028710a9fb4f430e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Fri, 5 Aug 2022 10:49:08 +0800
Subject: [PATCH 04/22] feat: Tabs support items (#36889)

* refactor: Using items

* docs: replace with items

* docs: deprecated demo

* test: Update snapshot

* docs: simple basic demo

* test: coverage
---
 components/tabs/TabPane.tsx                   |  12 ++
 .../__snapshots__/demo-extend.test.ts.snap    | 144 ++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.js.snap | 125 +++++++++++++++
 components/tabs/__tests__/index.test.js       |  20 +++
 components/tabs/demo/basic.md                 |  34 +++--
 components/tabs/demo/card-top.md              |  33 ++--
 components/tabs/demo/card.md                  |  25 ++-
 components/tabs/demo/centered.md              |  25 ++-
 components/tabs/demo/custom-add-trigger.md    |  31 ++--
 components/tabs/demo/custom-tab-bar-node.md   |  48 +++---
 components/tabs/demo/custom-tab-bar.md        |  24 ++-
 components/tabs/demo/deprecated.md            |  36 +++++
 components/tabs/demo/disabled.md              |  34 +++--
 components/tabs/demo/editable-card.md         |  44 +++---
 components/tabs/demo/extra.md                 |  35 ++---
 components/tabs/demo/icon.md                  |  43 +++---
 components/tabs/demo/nest.md                  |  55 ++++---
 components/tabs/demo/position.md              |  24 ++-
 components/tabs/demo/size.md                  |  50 +++---
 components/tabs/demo/slide.md                 |  23 +--
 components/tabs/hooks/useLegacyItems.ts       |  35 +++++
 components/tabs/index.en-US.md                |  26 ++++
 components/tabs/index.tsx                     |  10 +-
 components/tabs/index.zh-CN.md                |  34 ++++-
 package.json                                  |   2 +-
 site/theme/template/Content/Demo/index.jsx    |   6 +-
 26 files changed, 702 insertions(+), 276 deletions(-)
 create mode 100644 components/tabs/TabPane.tsx
 create mode 100644 components/tabs/demo/deprecated.md
 create mode 100644 components/tabs/hooks/useLegacyItems.ts

diff --git a/components/tabs/TabPane.tsx b/components/tabs/TabPane.tsx
new file mode 100644
index 0000000000..6583651e32
--- /dev/null
+++ b/components/tabs/TabPane.tsx
@@ -0,0 +1,12 @@
+import type * as React from 'react';
+import type { TabPaneProps } from 'rc-tabs/lib/TabPanelList/TabPane';
+
+const TabPane: React.FC<TabPaneProps> = () => null;
+
+if (process.env.NODE_ENV !== 'production') {
+  TabPane.displayName = 'DeprecatedTabPane';
+}
+
+export { TabPaneProps };
+
+export default TabPane;
diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
index 60b300917d..edadaba4b9 100644
--- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1088,6 +1088,150 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md extend context co
 </div>
 `;
 
+exports[`renders ./components/tabs/demo/deprecated.md extend context correctly 1`] = `
+<div
+  class="ant-tabs ant-tabs-top"
+>
+  <div
+    class="ant-tabs-nav"
+    role="tablist"
+  >
+    <div
+      class="ant-tabs-nav-wrap"
+    >
+      <div
+        class="ant-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
+      >
+        <div
+          class="ant-tabs-tab ant-tabs-tab-active"
+        >
+          <div
+            aria-selected="true"
+            class="ant-tabs-tab-btn"
+            role="tab"
+            tabindex="0"
+          >
+            Tab 1
+          </div>
+        </div>
+        <div
+          class="ant-tabs-tab"
+        >
+          <div
+            aria-selected="false"
+            class="ant-tabs-tab-btn"
+            role="tab"
+            tabindex="0"
+          >
+            Tab 2
+          </div>
+        </div>
+        <div
+          class="ant-tabs-tab"
+        >
+          <div
+            aria-selected="false"
+            class="ant-tabs-tab-btn"
+            role="tab"
+            tabindex="0"
+          >
+            Tab 3
+          </div>
+        </div>
+        <div
+          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="ant-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </button>
+      <div>
+        <div
+          class="ant-tabs-dropdown"
+          style="opacity:0"
+        >
+          <ul
+            aria-label="expanded dropdown"
+            class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
+            data-menu-list="true"
+            id="null-more-popup"
+            role="listbox"
+            tabindex="-1"
+          />
+          <div
+            aria-hidden="true"
+            style="display:none"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-tabs-content-holder"
+  >
+    <div
+      class="ant-tabs-content ant-tabs-content-top"
+    >
+      <div
+        aria-hidden="false"
+        class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        role="tabpanel"
+        tabindex="0"
+      >
+        Content of Tab Pane 1
+      </div>
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/tabs/demo/disabled.md extend context correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
index 5954228a2f..7e17857307 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -955,6 +955,131 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/tabs/demo/deprecated.md correctly 1`] = `
+<div
+  class="ant-tabs ant-tabs-top"
+>
+  <div
+    class="ant-tabs-nav"
+    role="tablist"
+  >
+    <div
+      class="ant-tabs-nav-wrap"
+    >
+      <div
+        class="ant-tabs-nav-list"
+        style="transform:translate(0px, 0px)"
+      >
+        <div
+          class="ant-tabs-tab ant-tabs-tab-active"
+        >
+          <div
+            aria-selected="true"
+            class="ant-tabs-tab-btn"
+            role="tab"
+            tabindex="0"
+          >
+            Tab 1
+          </div>
+        </div>
+        <div
+          class="ant-tabs-tab"
+        >
+          <div
+            aria-selected="false"
+            class="ant-tabs-tab-btn"
+            role="tab"
+            tabindex="0"
+          >
+            Tab 2
+          </div>
+        </div>
+        <div
+          class="ant-tabs-tab"
+        >
+          <div
+            aria-selected="false"
+            class="ant-tabs-tab-btn"
+            role="tab"
+            tabindex="0"
+          >
+            Tab 3
+          </div>
+        </div>
+        <div
+          class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+        />
+      </div>
+    </div>
+    <div
+      class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+    >
+      <button
+        aria-controls="null-more-popup"
+        aria-expanded="false"
+        aria-haspopup="listbox"
+        aria-hidden="true"
+        class="ant-tabs-nav-more"
+        id="null-more"
+        style="visibility:hidden;order:1"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="ellipsis"
+          class="anticon anticon-ellipsis"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="ellipsis"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+            />
+          </svg>
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="ant-tabs-content-holder"
+  >
+    <div
+      class="ant-tabs-content ant-tabs-content-top"
+    >
+      <div
+        aria-hidden="false"
+        class="ant-tabs-tabpane ant-tabs-tabpane-active"
+        role="tabpanel"
+        tabindex="0"
+      >
+        Content of Tab Pane 1
+      </div>
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+      <div
+        aria-hidden="true"
+        class="ant-tabs-tabpane"
+        role="tabpanel"
+        style="display:none"
+        tabindex="-1"
+      />
+    </div>
+  </div>
+</div>
+`;
+
 exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
diff --git a/components/tabs/__tests__/index.test.js b/components/tabs/__tests__/index.test.js
index 1e35bf0018..58beb9cd17 100644
--- a/components/tabs/__tests__/index.test.js
+++ b/components/tabs/__tests__/index.test.js
@@ -3,6 +3,7 @@ import Tabs from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { fireEvent, render } from '../../../tests/utils';
+import { resetWarned } from '../../_util/warning';
 
 const { TabPane } = Tabs;
 
@@ -105,4 +106,23 @@ describe('Tabs', () => {
     );
     expect(wrapper2.firstChild).toMatchSnapshot();
   });
+
+  it('deprecated warning', () => {
+    resetWarned();
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { container } = render(
+      <Tabs>
+        <TabPane />
+        invalidate
+      </Tabs>,
+    );
+
+    expect(container.querySelectorAll('.ant-tabs-tab')).toHaveLength(1);
+
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Tabs] Tabs.TabPane is deprecated. Please use `items` directly.',
+    );
+    errorSpy.mockRestore();
+  });
 });
diff --git a/components/tabs/demo/basic.md b/components/tabs/demo/basic.md
index 30be217dc9..fb742d44d1 100644
--- a/components/tabs/demo/basic.md
+++ b/components/tabs/demo/basic.md
@@ -17,24 +17,32 @@ Default activate first tab.
 import { Tabs } from 'antd';
 import React from 'react';
 
-const { TabPane } = Tabs;
-
 const onChange = (key: string) => {
   console.log(key);
 };
 
 const App: React.FC = () => (
-  <Tabs defaultActiveKey="1" onChange={onChange}>
-    <TabPane tab="Tab 1" key="1">
-      Content of Tab Pane 1
-    </TabPane>
-    <TabPane tab="Tab 2" key="2">
-      Content of Tab Pane 2
-    </TabPane>
-    <TabPane tab="Tab 3" key="3">
-      Content of Tab Pane 3
-    </TabPane>
-  </Tabs>
+  <Tabs
+    defaultActiveKey="1"
+    onChange={onChange}
+    items={[
+      {
+        label: `Tab 1`,
+        key: '1',
+        children: `Content of Tab Pane 1`,
+      },
+      {
+        label: `Tab 2`,
+        key: '2',
+        children: `Content of Tab Pane 2`,
+      },
+      {
+        label: `Tab 3`,
+        key: '3',
+        children: `Content of Tab Pane 3`,
+      },
+    ]}
+  />
 );
 
 export default App;
diff --git a/components/tabs/demo/card-top.md b/components/tabs/demo/card-top.md
index e26bc43270..e6c32510f8 100644
--- a/components/tabs/demo/card-top.md
+++ b/components/tabs/demo/card-top.md
@@ -17,27 +17,24 @@ Should be used at the top of container, needs to override styles.
 import { Tabs } from 'antd';
 import React from 'react';
 
-const { TabPane } = Tabs;
+const items = new Array(3).fill(null).map((_, i) => {
+  const id = String(i + 1);
+  return {
+    label: `Tab Title ${id}`,
+    key: id,
+    children: (
+      <>
+        <p>Content of Tab Pane {id}</p>
+        <p>Content of Tab Pane {id}</p>
+        <p>Content of Tab Pane {id}</p>
+      </>
+    ),
+  };
+});
 
 const App: React.FC = () => (
   <div className="card-container">
-    <Tabs type="card">
-      <TabPane tab="Tab Title 1" key="1">
-        <p>Content of Tab Pane 1</p>
-        <p>Content of Tab Pane 1</p>
-        <p>Content of Tab Pane 1</p>
-      </TabPane>
-      <TabPane tab="Tab Title 2" key="2">
-        <p>Content of Tab Pane 2</p>
-        <p>Content of Tab Pane 2</p>
-        <p>Content of Tab Pane 2</p>
-      </TabPane>
-      <TabPane tab="Tab Title 3" key="3">
-        <p>Content of Tab Pane 3</p>
-        <p>Content of Tab Pane 3</p>
-        <p>Content of Tab Pane 3</p>
-      </TabPane>
-    </Tabs>
+    <Tabs type="card" items={items} />
   </div>
 );
 
diff --git a/components/tabs/demo/card.md b/components/tabs/demo/card.md
index 59d0bea003..e1154421a7 100644
--- a/components/tabs/demo/card.md
+++ b/components/tabs/demo/card.md
@@ -17,24 +17,23 @@ Another type of Tabs, which doesn't support vertical mode.
 import { Tabs } from 'antd';
 import React from 'react';
 
-const { TabPane } = Tabs;
-
 const onChange = (key: string) => {
   console.log(key);
 };
 
 const App: React.FC = () => (
-  <Tabs onChange={onChange} type="card">
-    <TabPane tab="Tab 1" key="1">
-      Content of Tab Pane 1
-    </TabPane>
-    <TabPane tab="Tab 2" key="2">
-      Content of Tab Pane 2
-    </TabPane>
-    <TabPane tab="Tab 3" key="3">
-      Content of Tab Pane 3
-    </TabPane>
-  </Tabs>
+  <Tabs
+    onChange={onChange}
+    type="card"
+    items={new Array(3).fill(null).map((_, i) => {
+      const id = String(i + 1);
+      return {
+        label: `Tab ${id}`,
+        key: id,
+        children: `Content of Tab Pane ${id}`,
+      };
+    })}
+  />
 );
 
 export default App;
diff --git a/components/tabs/demo/centered.md b/components/tabs/demo/centered.md
index 08a2051c8b..880d761dd0 100644
--- a/components/tabs/demo/centered.md
+++ b/components/tabs/demo/centered.md
@@ -17,20 +17,19 @@ Centered tabs.
 import { Tabs } from 'antd';
 import React from 'react';
 
-const { TabPane } = Tabs;
-
 const App: React.FC = () => (
-  <Tabs defaultActiveKey="1" centered>
-    <TabPane tab="Tab 1" key="1">
-      Content of Tab Pane 1
-    </TabPane>
-    <TabPane tab="Tab 2" key="2">
-      Content of Tab Pane 2
-    </TabPane>
-    <TabPane tab="Tab 3" key="3">
-      Content of Tab Pane 3
-    </TabPane>
-  </Tabs>
+  <Tabs
+    defaultActiveKey="1"
+    centered
+    items={new Array(3).fill(null).map((_, i) => {
+      const id = String(i + 1);
+      return {
+        label: `Tab ${id}`,
+        key: id,
+        children: `Content of Tab Pane ${id}`,
+      };
+    })}
+  />
 );
 
 export default App;
diff --git a/components/tabs/demo/custom-add-trigger.md b/components/tabs/demo/custom-add-trigger.md
index 7742e90737..3e6bea6605 100644
--- a/components/tabs/demo/custom-add-trigger.md
+++ b/components/tabs/demo/custom-add-trigger.md
@@ -17,16 +17,14 @@ Hide default plus icon, and bind event for customized trigger.
 import { Button, Tabs } from 'antd';
 import React, { useRef, useState } from 'react';
 
-const { TabPane } = Tabs;
-
-const defaultPanes = Array.from({ length: 2 }).map((_, index) => {
+const defaultPanes = new Array(2).fill(null).map((_, index) => {
   const id = String(index + 1);
-  return { title: `Tab ${id}`, content: `Content of Tab Pane ${index + 1}`, key: id };
+  return { label: `Tab ${id}`, children: `Content of Tab Pane ${index + 1}`, key: id };
 });
 
 const App: React.FC = () => {
   const [activeKey, setActiveKey] = useState(defaultPanes[0].key);
-  const [panes, setPanes] = useState(defaultPanes);
+  const [items, setItems] = useState(defaultPanes);
   const newTabIndex = useRef(0);
 
   const onChange = (key: string) => {
@@ -35,18 +33,18 @@ const App: React.FC = () => {
 
   const add = () => {
     const newActiveKey = `newTab${newTabIndex.current++}`;
-    setPanes([...panes, { title: 'New Tab', content: 'New Tab Pane', key: newActiveKey }]);
+    setItems([...items, { label: 'New Tab', children: 'New Tab Pane', key: newActiveKey }]);
     setActiveKey(newActiveKey);
   };
 
   const remove = (targetKey: string) => {
-    const targetIndex = panes.findIndex(pane => pane.key === targetKey);
-    const newPanes = panes.filter(pane => pane.key !== targetKey);
+    const targetIndex = items.findIndex(pane => pane.key === targetKey);
+    const newPanes = items.filter(pane => pane.key !== targetKey);
     if (newPanes.length && targetKey === activeKey) {
       const { key } = newPanes[targetIndex === newPanes.length ? targetIndex - 1 : targetIndex];
       setActiveKey(key);
     }
-    setPanes(newPanes);
+    setItems(newPanes);
   };
 
   const onEdit = (targetKey: string, action: 'add' | 'remove') => {
@@ -62,13 +60,14 @@ const App: React.FC = () => {
       <div style={{ marginBottom: 16 }}>
         <Button onClick={add}>ADD</Button>
       </div>
-      <Tabs hideAdd onChange={onChange} activeKey={activeKey} type="editable-card" onEdit={onEdit}>
-        {panes.map(pane => (
-          <TabPane tab={pane.title} key={pane.key}>
-            {pane.content}
-          </TabPane>
-        ))}
-      </Tabs>
+      <Tabs
+        hideAdd
+        onChange={onChange}
+        activeKey={activeKey}
+        type="editable-card"
+        onEdit={onEdit}
+        items={items}
+      />
     </div>
   );
 };
diff --git a/components/tabs/demo/custom-tab-bar-node.md b/components/tabs/demo/custom-tab-bar-node.md
index 9fa53bad01..5331f1552b 100644
--- a/components/tabs/demo/custom-tab-bar-node.md
+++ b/components/tabs/demo/custom-tab-bar-node.md
@@ -20,8 +20,6 @@ import React, { useRef, useState } from 'react';
 import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
-const { TabPane } = Tabs;
-
 const type = 'DraggableTabNode';
 interface DraggableTabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
   index: React.Key;
@@ -62,16 +60,16 @@ const DraggableTabNode = ({ index, children, moveNode }: DraggableTabPaneProps)
   );
 };
 
-const DraggableTabs: React.FC<{ children: React.ReactNode }> = props => {
-  const { children } = props;
+const DraggableTabs: React.FC<TabsProps> = props => {
+  const { items = [] } = props;
   const [order, setOrder] = useState<React.Key[]>([]);
 
   const moveTabNode = (dragKey: React.Key, hoverKey: React.Key) => {
     const newOrder = order.slice();
 
-    React.Children.forEach(children, (c: React.ReactElement) => {
-      if (c.key && newOrder.indexOf(c.key) === -1) {
-        newOrder.push(c.key);
+    items.forEach(item => {
+      if (item.key && newOrder.indexOf(item.key) === -1) {
+        newOrder.push(item.key);
       }
     });
 
@@ -94,12 +92,7 @@ const DraggableTabs: React.FC<{ children: React.ReactNode }> = props => {
     </DefaultTabBar>
   );
 
-  const tabs: React.ReactElement[] = [];
-  React.Children.forEach(children, (c: React.ReactElement) => {
-    tabs.push(c);
-  });
-
-  const orderTabs = tabs.slice().sort((a, b) => {
+  const orderItems = [...items].sort((a, b) => {
     const orderA = order.indexOf(a.key!);
     const orderB = order.indexOf(b.key!);
 
@@ -113,33 +106,30 @@ const DraggableTabs: React.FC<{ children: React.ReactNode }> = props => {
       return 1;
     }
 
-    const ia = tabs.indexOf(a);
-    const ib = tabs.indexOf(b);
+    const ia = items.indexOf(a);
+    const ib = items.indexOf(b);
 
     return ia - ib;
   });
 
   return (
     <DndProvider backend={HTML5Backend}>
-      <Tabs renderTabBar={renderTabBar} {...props}>
-        {orderTabs}
-      </Tabs>
+      <Tabs renderTabBar={renderTabBar} {...props} items={orderItems} />
     </DndProvider>
   );
 };
 
 const App: React.FC = () => (
-  <DraggableTabs>
-    <TabPane tab="tab 1" key="1">
-      Content of Tab Pane 1
-    </TabPane>
-    <TabPane tab="tab 2" key="2">
-      Content of Tab Pane 2
-    </TabPane>
-    <TabPane tab="tab 3" key="3">
-      Content of Tab Pane 3
-    </TabPane>
-  </DraggableTabs>
+  <DraggableTabs
+    items={new Array(3).fill(null).map((_, i) => {
+      const id = String(i + 1);
+      return {
+        label: `tab ${id}`,
+        key: id,
+        children: `Content of Tab Pane ${id}`,
+      };
+    })}
+  />
 );
 
 export default App;
diff --git a/components/tabs/demo/custom-tab-bar.md b/components/tabs/demo/custom-tab-bar.md
index 6d3170dfe2..91196f3bb6 100644
--- a/components/tabs/demo/custom-tab-bar.md
+++ b/components/tabs/demo/custom-tab-bar.md
@@ -19,8 +19,6 @@ import { Tabs } from 'antd';
 import React from 'react';
 import { Sticky, StickyContainer } from 'react-sticky';
 
-const { TabPane } = Tabs;
-
 const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (
   <Sticky bottomOffset={80}>
     {({ style }) => (
@@ -29,19 +27,19 @@ const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (
   </Sticky>
 );
 
+const items = new Array(3).fill(null).map((_, i) => {
+  const id = String(i + 1);
+  return {
+    label: `Tab ${id}`,
+    key: id,
+    children: `Content of Tab Pane ${id}`,
+    style: i === 0 ? { height: 200 } : undefined,
+  };
+});
+
 const App: React.FC = () => (
   <StickyContainer>
-    <Tabs defaultActiveKey="1" renderTabBar={renderTabBar}>
-      <TabPane tab="Tab 1" key="1" style={{ height: 200 }}>
-        Content of Tab Pane 1
-      </TabPane>
-      <TabPane tab="Tab 2" key="2">
-        Content of Tab Pane 2
-      </TabPane>
-      <TabPane tab="Tab 3" key="3">
-        Content of Tab Pane 3
-      </TabPane>
-    </Tabs>
+    <Tabs defaultActiveKey="1" renderTabBar={renderTabBar} items={items} />
   </StickyContainer>
 );
 
diff --git a/components/tabs/demo/deprecated.md b/components/tabs/demo/deprecated.md
new file mode 100644
index 0000000000..34ef9b350d
--- /dev/null
+++ b/components/tabs/demo/deprecated.md
@@ -0,0 +1,36 @@
+---
+order: -1
+title:
+  zh-CN: 基础用法（废弃的语法糖）
+  en-US: Basic usage (deprecated syntactic sugar)
+version: < 4.23.0
+---
+
+## zh-CN
+
+默认选中第一项。
+
+## en-US
+
+Default activate first tab.
+
+```tsx
+import { Tabs } from 'antd';
+import React from 'react';
+
+const App: React.FC = () => (
+  <Tabs defaultActiveKey="1">
+    <Tabs.TabPane tab="Tab 1" key="1">
+      Content of Tab Pane 1
+    </Tabs.TabPane>
+    <Tabs.TabPane tab="Tab 2" key="2">
+      Content of Tab Pane 2
+    </Tabs.TabPane>
+    <Tabs.TabPane tab="Tab 3" key="3">
+      Content of Tab Pane 3
+    </Tabs.TabPane>
+  </Tabs>
+);
+
+export default App;
+```
diff --git a/components/tabs/demo/disabled.md b/components/tabs/demo/disabled.md
index de73fd9ecc..37ea02b393 100644
--- a/components/tabs/demo/disabled.md
+++ b/components/tabs/demo/disabled.md
@@ -17,20 +17,28 @@ Disabled a tab.
 import { Tabs } from 'antd';
 import React from 'react';
 
-const { TabPane } = Tabs;
-
 const App: React.FC = () => (
-  <Tabs defaultActiveKey="1">
-    <TabPane tab="Tab 1" key="1">
-      Tab 1
-    </TabPane>
-    <TabPane tab="Tab 2" disabled key="2">
-      Tab 2
-    </TabPane>
-    <TabPane tab="Tab 3" key="3">
-      Tab 3
-    </TabPane>
-  </Tabs>
+  <Tabs
+    defaultActiveKey="1"
+    items={[
+      {
+        label: 'Tab 1',
+        key: '1',
+        children: 'Tab 1',
+      },
+      {
+        label: 'Tab 2',
+        key: '2',
+        children: 'Tab 2',
+        disabled: true,
+      },
+      {
+        label: 'Tab 3',
+        key: '3',
+        children: 'Tab 3',
+      },
+    ]}
+  />
 );
 
 export default App;
diff --git a/components/tabs/demo/editable-card.md b/components/tabs/demo/editable-card.md
index 06ff6d9c04..963bc6e480 100644
--- a/components/tabs/demo/editable-card.md
+++ b/components/tabs/demo/editable-card.md
@@ -17,22 +17,20 @@ Only card type Tabs support adding & closable. +Use `closable={false}` to disabl
 import { Tabs } from 'antd';
 import React, { useRef, useState } from 'react';
 
-const { TabPane } = Tabs;
-
-const initialPanes = [
-  { title: 'Tab 1', content: 'Content of Tab 1', key: '1' },
-  { title: 'Tab 2', content: 'Content of Tab 2', key: '2' },
+const initialItems = [
+  { label: 'Tab 1', children: 'Content of Tab 1', key: '1' },
+  { label: 'Tab 2', children: 'Content of Tab 2', key: '2' },
   {
-    title: 'Tab 3',
-    content: 'Content of Tab 3',
+    label: 'Tab 3',
+    children: 'Content of Tab 3',
     key: '3',
     closable: false,
   },
 ];
 
 const App: React.FC = () => {
-  const [activeKey, setActiveKey] = useState(initialPanes[0].key);
-  const [panes, setPanes] = useState(initialPanes);
+  const [activeKey, setActiveKey] = useState(initialItems[0].key);
+  const [items, setItems] = useState(initialItems);
   const newTabIndex = useRef(0);
 
   const onChange = (newActiveKey: string) => {
@@ -41,21 +39,21 @@ const App: React.FC = () => {
 
   const add = () => {
     const newActiveKey = `newTab${newTabIndex.current++}`;
-    const newPanes = [...panes];
-    newPanes.push({ title: 'New Tab', content: 'Content of new Tab', key: newActiveKey });
-    setPanes(newPanes);
+    const newPanes = [...items];
+    newPanes.push({ label: 'New Tab', children: 'Content of new Tab', key: newActiveKey });
+    setItems(newPanes);
     setActiveKey(newActiveKey);
   };
 
   const remove = (targetKey: string) => {
     let newActiveKey = activeKey;
     let lastIndex = -1;
-    panes.forEach((pane, i) => {
-      if (pane.key === targetKey) {
+    items.forEach((item, i) => {
+      if (item.key === targetKey) {
         lastIndex = i - 1;
       }
     });
-    const newPanes = panes.filter(pane => pane.key !== targetKey);
+    const newPanes = items.filter(item => item.key !== targetKey);
     if (newPanes.length && newActiveKey === targetKey) {
       if (lastIndex >= 0) {
         newActiveKey = newPanes[lastIndex].key;
@@ -63,7 +61,7 @@ const App: React.FC = () => {
         newActiveKey = newPanes[0].key;
       }
     }
-    setPanes(newPanes);
+    setItems(newPanes);
     setActiveKey(newActiveKey);
   };
 
@@ -76,13 +74,13 @@ const App: React.FC = () => {
   };
 
   return (
-    <Tabs type="editable-card" onChange={onChange} activeKey={activeKey} onEdit={onEdit}>
-      {panes.map(pane => (
-        <TabPane tab={pane.title} key={pane.key} closable={pane.closable}>
-          {pane.content}
-        </TabPane>
-      ))}
-    </Tabs>
+    <Tabs
+      type="editable-card"
+      onChange={onChange}
+      activeKey={activeKey}
+      onEdit={onEdit}
+      items={items}
+    />
   );
 };
 
diff --git a/components/tabs/demo/extra.md b/components/tabs/demo/extra.md
index aae25b522d..20b62c2fe5 100644
--- a/components/tabs/demo/extra.md
+++ b/components/tabs/demo/extra.md
@@ -17,8 +17,6 @@ You can add extra actions to the right or left or even both side of Tabs.
 import { Button, Checkbox, Divider, Tabs } from 'antd';
 import React, { useMemo, useState } from 'react';
 
-const { TabPane } = Tabs;
-
 const CheckboxGroup = Checkbox.Group;
 
 const operations = <Button>Extra Action</Button>;
@@ -32,6 +30,15 @@ const options = ['left', 'right'];
 
 type PositionType = 'left' | 'right';
 
+const items = new Array(3).fill(null).map((_, i) => {
+  const id = String(i + 1);
+  return {
+    label: `Tab ${id}`,
+    key: id,
+    children: `Content of tab ${id}`,
+  };
+});
+
 const App: React.FC = () => {
   const [position, setPosition] = useState<PositionType[]>(['left', 'right']);
 
@@ -46,17 +53,7 @@ const App: React.FC = () => {
 
   return (
     <>
-      <Tabs tabBarExtraContent={operations}>
-        <TabPane tab="Tab 1" key="1">
-          Content of tab 1
-        </TabPane>
-        <TabPane tab="Tab 2" key="2">
-          Content of tab 2
-        </TabPane>
-        <TabPane tab="Tab 3" key="3">
-          Content of tab 3
-        </TabPane>
-      </Tabs>
+      <Tabs tabBarExtraContent={operations} items={items} />
       <br />
       <br />
       <br />
@@ -71,17 +68,7 @@ const App: React.FC = () => {
       />
       <br />
       <br />
-      <Tabs tabBarExtraContent={slot}>
-        <TabPane tab="Tab 1" key="1">
-          Content of tab 1
-        </TabPane>
-        <TabPane tab="Tab 2" key="2">
-          Content of tab 2
-        </TabPane>
-        <TabPane tab="Tab 3" key="3">
-          Content of tab 3
-        </TabPane>
-      </Tabs>
+      <Tabs tabBarExtraContent={slot} items={items} />
     </>
   );
 };
diff --git a/components/tabs/demo/icon.md b/components/tabs/demo/icon.md
index 9ea024c0f5..baccb00b75 100644
--- a/components/tabs/demo/icon.md
+++ b/components/tabs/demo/icon.md
@@ -18,33 +18,24 @@ import { AndroidOutlined, AppleOutlined } from '@ant-design/icons';
 import { Tabs } from 'antd';
 import React from 'react';
 
-const { TabPane } = Tabs;
-
 const App: React.FC = () => (
-  <Tabs defaultActiveKey="2">
-    <TabPane
-      tab={
-        <span>
-          <AppleOutlined />
-          Tab 1
-        </span>
-      }
-      key="1"
-    >
-      Tab 1
-    </TabPane>
-    <TabPane
-      tab={
-        <span>
-          <AndroidOutlined />
-          Tab 2
-        </span>
-      }
-      key="2"
-    >
-      Tab 2
-    </TabPane>
-  </Tabs>
+  <Tabs
+    defaultActiveKey="2"
+    items={[AppleOutlined, AndroidOutlined].map((Icon, i) => {
+      const id = String(i + 1);
+
+      return {
+        label: (
+          <span>
+            <Icon />
+            Tab {id}
+          </span>
+        ),
+        key: id,
+        children: `Tab ${id}`,
+      };
+    })}
+  />
 );
 
 export default App;
diff --git a/components/tabs/demo/nest.md b/components/tabs/demo/nest.md
index 6442a4e8ff..99d189b5e3 100644
--- a/components/tabs/demo/nest.md
+++ b/components/tabs/demo/nest.md
@@ -18,13 +18,10 @@ Default activate first tab.
 import { Select, Tabs } from 'antd';
 import React, { useState } from 'react';
 
-const { TabPane } = Tabs;
 const { Option } = Select;
 
 const positionList = ['left', 'right', 'top', 'bottom'];
 
-const list = Array.from({ length: 20 }).map((_, index) => index);
-
 const App: React.FC = () => {
   const [parentPos, setParentPos] = useState(undefined);
   const [childPos, setChildPos] = useState(undefined);
@@ -81,25 +78,39 @@ const App: React.FC = () => {
         <Option value="editable-card">Parent - card edit</Option>
       </Select>
 
-      <Tabs defaultActiveKey="1" tabPosition={parentPos} type={parentType}>
-        <TabPane tab="Tab 1" key="1">
-          <Tabs
-            defaultActiveKey="1"
-            tabPosition={childPos}
-            type={childType}
-            style={{ height: 300 }}
-          >
-            {list.map(key => (
-              <TabPane tab={`Tab ${key}`} key={key}>
-                TTTT {key}
-              </TabPane>
-            ))}
-          </Tabs>
-        </TabPane>
-        <TabPane tab="Tab 2" key="2">
-          Content of Tab Pane 2
-        </TabPane>
-      </Tabs>
+      <Tabs
+        defaultActiveKey="1"
+        tabPosition={parentPos}
+        type={parentType}
+        items={[
+          {
+            label: 'Tab 1',
+            key: '1',
+            children: (
+              <Tabs
+                defaultActiveKey="1"
+                tabPosition={childPos}
+                type={childType}
+                style={{ height: 300 }}
+                items={new Array(20).fill(null).map((_, index) => {
+                  const key = String(index);
+
+                  return {
+                    label: `Tab ${key}`,
+                    key,
+                    children: `TTTT ${key}`,
+                  };
+                })}
+              />
+            ),
+          },
+          {
+            label: 'Tab 2',
+            key: '2',
+            children: 'Content of Tab Pane 2',
+          },
+        ]}
+      />
     </div>
   );
 };
diff --git a/components/tabs/demo/position.md b/components/tabs/demo/position.md
index 4629a32005..b89f7c5eb7 100644
--- a/components/tabs/demo/position.md
+++ b/components/tabs/demo/position.md
@@ -18,8 +18,6 @@ import type { RadioChangeEvent } from 'antd';
 import { Radio, Space, Tabs } from 'antd';
 import React, { useState } from 'react';
 
-const { TabPane } = Tabs;
-
 type TabPosition = 'left' | 'right' | 'top' | 'bottom';
 
 const App: React.FC = () => {
@@ -40,17 +38,17 @@ const App: React.FC = () => {
           <Radio.Button value="right">right</Radio.Button>
         </Radio.Group>
       </Space>
-      <Tabs tabPosition={tabPosition}>
-        <TabPane tab="Tab 1" key="1">
-          Content of Tab 1
-        </TabPane>
-        <TabPane tab="Tab 2" key="2">
-          Content of Tab 2
-        </TabPane>
-        <TabPane tab="Tab 3" key="3">
-          Content of Tab 3
-        </TabPane>
-      </Tabs>
+      <Tabs
+        tabPosition={tabPosition}
+        items={new Array(3).fill(null).map((_, i) => {
+          const id = String(i + 1);
+          return {
+            label: `Tab ${id}`,
+            key: id,
+            children: `Content of Tab ${id}`,
+          };
+        })}
+      />
     </>
   );
 };
diff --git a/components/tabs/demo/size.md b/components/tabs/demo/size.md
index 911530b677..b9c4082442 100644
--- a/components/tabs/demo/size.md
+++ b/components/tabs/demo/size.md
@@ -19,8 +19,6 @@ import { Radio, Tabs } from 'antd';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
 import React, { useState } from 'react';
 
-const { TabPane } = Tabs;
-
 const App: React.FC = () => {
   const [size, setSize] = useState<SizeType>('small');
 
@@ -35,28 +33,32 @@ const App: React.FC = () => {
         <Radio.Button value="middle">Middle</Radio.Button>
         <Radio.Button value="large">Large</Radio.Button>
       </Radio.Group>
-      <Tabs defaultActiveKey="1" size={size} style={{ marginBottom: 32 }}>
-        <TabPane tab="Tab 1" key="1">
-          Content of tab 1
-        </TabPane>
-        <TabPane tab="Tab 2" key="2">
-          Content of tab 2
-        </TabPane>
-        <TabPane tab="Tab 3" key="3">
-          Content of tab 3
-        </TabPane>
-      </Tabs>
-      <Tabs defaultActiveKey="1" type="card" size={size}>
-        <TabPane tab="Card Tab 1" key="1">
-          Content of card tab 1
-        </TabPane>
-        <TabPane tab="Card Tab 2" key="2">
-          Content of card tab 2
-        </TabPane>
-        <TabPane tab="Card Tab 3" key="3">
-          Content of card tab 3
-        </TabPane>
-      </Tabs>
+      <Tabs
+        defaultActiveKey="1"
+        size={size}
+        style={{ marginBottom: 32 }}
+        items={new Array(3).fill(null).map((_, i) => {
+          const id = String(i + 1);
+          return {
+            label: `Tab ${id}`,
+            key: id,
+            children: `Content of tab ${id}`,
+          };
+        })}
+      />
+      <Tabs
+        defaultActiveKey="1"
+        type="card"
+        size={size}
+        items={new Array(3).fill(null).map((_, i) => {
+          const id = String(i + 1);
+          return {
+            label: `Card Tab ${id}`,
+            key: id,
+            children: `Content of card tab ${id}`,
+          };
+        })}
+      />
     </div>
   );
 };
diff --git a/components/tabs/demo/slide.md b/components/tabs/demo/slide.md
index 0f8c3d7697..ec72032946 100644
--- a/components/tabs/demo/slide.md
+++ b/components/tabs/demo/slide.md
@@ -18,8 +18,6 @@ import type { RadioChangeEvent } from 'antd';
 import { Radio, Tabs } from 'antd';
 import React, { useState } from 'react';
 
-const { TabPane } = Tabs;
-
 type TabPosition = 'left' | 'right' | 'top' | 'bottom';
 
 const App: React.FC = () => {
@@ -35,13 +33,20 @@ const App: React.FC = () => {
         <Radio.Button value="top">Horizontal</Radio.Button>
         <Radio.Button value="left">Vertical</Radio.Button>
       </Radio.Group>
-      <Tabs defaultActiveKey="1" tabPosition={mode} style={{ height: 220 }}>
-        {[...Array.from({ length: 30 }, (_, i) => i)].map(i => (
-          <TabPane tab={`Tab-${i}`} key={i} disabled={i === 28}>
-            Content of tab {i}
-          </TabPane>
-        ))}
-      </Tabs>
+      <Tabs
+        defaultActiveKey="1"
+        tabPosition={mode}
+        style={{ height: 220 }}
+        items={new Array(30).fill(null).map((_, i) => {
+          const id = String(i);
+          return {
+            label: `Tab-${id}`,
+            key: id,
+            disabled: i === 28,
+            children: `Content of tab ${id}`,
+          };
+        })}
+      />
     </div>
   );
 };
diff --git a/components/tabs/hooks/useLegacyItems.ts b/components/tabs/hooks/useLegacyItems.ts
new file mode 100644
index 0000000000..aa1ef62b63
--- /dev/null
+++ b/components/tabs/hooks/useLegacyItems.ts
@@ -0,0 +1,35 @@
+import * as React from 'react';
+import toArray from 'rc-util/lib/Children/toArray';
+import type { Tab } from 'rc-tabs/lib/interface';
+import type { TabsProps, TabPaneProps } from '..';
+import warning from '../../_util/warning';
+
+function filter<T>(items: (T | null)[]): T[] {
+  return items.filter(item => item) as T[];
+}
+
+export default function useLegacyItems(items?: TabsProps['items'], children?: React.ReactNode) {
+  if (items) {
+    return items;
+  }
+
+  warning(!children, 'Tabs', 'Tabs.TabPane is deprecated. Please use `items` directly.');
+
+  const childrenItems = toArray(children).map((node: React.ReactElement<TabPaneProps>) => {
+    if (React.isValidElement(node)) {
+      const { key, props } = node;
+      const { tab, ...restProps } = props || {};
+
+      const item: Tab = {
+        key: String(key),
+        ...restProps,
+        label: tab,
+      };
+      return item;
+    }
+
+    return null;
+  });
+
+  return filter(childrenItems);
+}
diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md
index 6f4f4c3ace..c796ad1d77 100644
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@@ -16,6 +16,32 @@ Ant Design has 3 types of Tabs for different situations.
 - Normal Tabs: for functional aspects of a page.
 - [Radio.Button](/components/radio/#components-radio-demo-radiobutton): for secondary tabs.
 
+### Usage upgrade after 4.23.0
+
+```__react
+import Alert from '../alert';
+ReactDOM.render(<Alert message="After version 4.23.0, we provide a simpler usage <Tabs items={[...]} /> with better performance and potential of writing simpler code style in your applications. Meanwhile, we deprecated the old usage in browser console, we will remove it in antd 5.0." />, mountNode);
+```
+
+```jsx
+// works when >=4.23.0, recommended ✅
+const items = [
+  { label: 'Tab 1', key: 'item-1', children: 'Content 1' }, // remember to pass the key prop
+  { label: 'Tab 2', key: 'item-2', children: 'Content 2' },
+];
+return <Tabs items={items} />;
+
+// works when <4.23.0, deprecated when >=4.23.0 🙅🏻‍♀️
+<Tabs>
+  <Tabs.TabPane tab="Tab 1" key="item-1">
+    Content 1
+  </Tabs.TabPane>
+  <Tabs.TabPane tab="Tab 2" key="item-2">
+    Content 2
+  </Tabs.TabPane>
+</Tabs>;
+```
+
 ## API
 
 ### Tabs
diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx
index f4fceaa01a..e97ac6afaa 100755
--- a/components/tabs/index.tsx
+++ b/components/tabs/index.tsx
@@ -3,7 +3,7 @@ import EllipsisOutlined from '@ant-design/icons/EllipsisOutlined';
 import PlusOutlined from '@ant-design/icons/PlusOutlined';
 import classNames from 'classnames';
 import type { TabsProps as RcTabsProps } from 'rc-tabs';
-import RcTabs, { TabPane, TabPaneProps } from 'rc-tabs';
+import RcTabs from 'rc-tabs';
 import type { EditableConfig } from 'rc-tabs/lib/interface';
 import * as React from 'react';
 
@@ -11,6 +11,8 @@ import { ConfigContext } from '../config-provider';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
 import warning from '../_util/warning';
+import useLegacyItems from './hooks/useLegacyItems';
+import TabPane, { TabPaneProps } from './TabPane';
 
 export type TabsType = 'line' | 'card' | 'editable-card';
 export type TabsPosition = 'top' | 'right' | 'bottom' | 'left';
@@ -24,6 +26,7 @@ export interface TabsProps extends Omit<RcTabsProps, 'editable'> {
   centered?: boolean;
   addIcon?: React.ReactNode;
   onEdit?: (e: React.MouseEvent | React.KeyboardEvent | string, action: 'add' | 'remove') => void;
+  children?: React.ReactNode;
 }
 
 function Tabs({
@@ -34,6 +37,8 @@ function Tabs({
   hideAdd,
   centered,
   addIcon,
+  children,
+  items,
   ...props
 }: TabsProps) {
   const { prefixCls: customizePrefixCls, moreIcon = <EllipsisOutlined /> } = props;
@@ -59,6 +64,8 @@ function Tabs({
     '`onPrevClick` and `onNextClick` has been removed. Please use `onTabScroll` instead.',
   );
 
+  const mergedItems = useLegacyItems(items, children);
+
   return (
     <SizeContext.Consumer>
       {contextSize => {
@@ -68,6 +75,7 @@ function Tabs({
             direction={direction}
             moreTransitionName={`${rootPrefixCls}-slide-up`}
             {...props}
+            items={mergedItems}
             className={classNames(
               {
                 [`${prefixCls}-${size}`]: size,
diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md
index b20502a1ca..2b4d6b3314 100644
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@@ -19,6 +19,32 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 - 既可用于容器顶部，也可用于容器内部，是最通用的 Tabs。
 - [Radio.Button](/components/radio/#components-radio-demo-radiobutton) 可作为更次级的页签来使用。
 
+### 4.23.0 用法升级
+
+```__react
+import Alert from '../alert';
+ReactDOM.render(<Alert message="在 4.23.0 版本后，我们提供了 <Tabs items={[...]} /> 的简写方式，有更好的性能和更方便的数据组织方式，开发者不再需要自行拼接 JSX。同时我们废弃了原先的写法，你还是可以在 4.x 继续使用，但会在控制台看到警告，并会在 5.0 后移除。" />, mountNode);
+```
+
+```jsx
+// >=4.23.0 可用，推荐的写法 ✅
+const items = [
+  { label: '项目 1', key: 'item-1', children: '内容 1' }, // 务必填写 key
+  { label: '项目 2', key: 'item-2', children: '内容 2' },
+];
+return <Tabs items={items} />;
+
+// <4.23.0 可用，>=4.23.0 时不推荐 🙅🏻‍♀️
+<Tabs>
+  <Tabs.TabPane tab="项目 1" key="item-1">
+    内容 1
+  </Tabs.TabPane>
+  <Tabs.TabPane tab="项目 2" key="item-2">
+    内容 2
+  </Tabs.TabPane>
+</Tabs>;
+```
+
 ## API
 
 ### Tabs
@@ -31,6 +57,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | centered | 标签居中展示 | boolean | false | 4.4.0 |
 | defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` |  |
 | hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |  |
+| items | 配置选项卡内容 | [TabItem](#TabItem) | [] | 4.23.0 |
 | moreIcon | 自定义折叠 icon | ReactNode | &lt;EllipsisOutlined /> | 4.14.0 |
 | popupClassName | 更多菜单的 `className` | string | - | 4.21.0 |
 | renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  |
@@ -48,7 +75,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 
 > 更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)
 
-### Tabs.TabPane
+### TabItem
 
 | 参数        | 说明                                            | 类型      | 默认值 |
 | ----------- | ----------------------------------------------- | --------- | ------ |
@@ -56,6 +83,5 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | disabled    | 禁用某一项                                      | boolean   | false  |
 | forceRender | 被隐藏时是否渲染 DOM 结构                       | boolean   | false  |
 | key         | 对应 activeKey                                  | string    | -      |
-| tab         | 选项卡头显示文字                                | ReactNode | -      |
-
-> 更多属性查看 [rc-tabs tabpane](https://github.com/react-component/tabs#tabpane)
+| label       | 选项卡头显示文字                                | ReactNode | -      |
+| children    | 选项卡头显示内容                                | ReactNode | -      |
diff --git a/package.json b/package.json
index b008f8d7fb..602e68ca24 100644
--- a/package.json
+++ b/package.json
@@ -149,7 +149,7 @@
     "rc-steps": "~4.1.0",
     "rc-switch": "~3.2.0",
     "rc-table": "~7.26.0",
-    "rc-tabs": "~11.16.0",
+    "rc-tabs": "~12.0.0-alpha.1",
     "rc-textarea": "~0.3.0",
     "rc-tooltip": "~5.2.0",
     "rc-tree": "~5.6.5",
diff --git a/site/theme/template/Content/Demo/index.jsx b/site/theme/template/Content/Demo/index.jsx
index a448356388..255f45e8c7 100644
--- a/site/theme/template/Content/Demo/index.jsx
+++ b/site/theme/template/Content/Demo/index.jsx
@@ -499,7 +499,11 @@ ReactDOM.render(<Demo />, document.getElementById('container'));
     );
 
     if (meta.version) {
-      codeBox = <Badge.Ribbon text={meta.version}>{codeBox}</Badge.Ribbon>;
+      codeBox = (
+        <Badge.Ribbon text={meta.version} color={meta.version.includes('<') ? 'red' : null}>
+          {codeBox}
+        </Badge.Ribbon>
+      );
     }
 
     return codeBox;

From 8b05546367e47c63d9af33929335087269b6185c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= <wangning4567@163.com>
Date: Fri, 5 Aug 2022 11:21:07 +0800
Subject: [PATCH 05/22] feat: Replace dropdownClassName to popupClassName
 (#36880)

---
 .../auto-complete/__tests__/index.test.js     | 14 ++++++
 .../auto-complete/demo/certain-category.md    |  2 +-
 components/auto-complete/index.en-US.md       |  2 +-
 components/auto-complete/index.tsx            | 22 ++++++++-
 components/auto-complete/index.zh-CN.md       |  2 +-
 components/cascader/__tests__/index.test.js   |  4 +-
 components/cascader/index.en-US.md            |  2 +-
 components/cascader/index.tsx                 | 11 +++--
 components/cascader/index.zh-CN.md            |  2 +-
 .../date-picker/__tests__/DatePicker.test.js  | 14 ++++++
 .../generatePicker/generateRangePicker.tsx    | 19 +++++++-
 .../generatePicker/generateSinglePicker.tsx   | 28 ++++++++---
 components/date-picker/index.en-US.md         |  2 +-
 components/date-picker/index.zh-CN.md         |  2 +-
 components/select/__tests__/index.test.js     | 10 ++++
 components/select/index.en-US.md              |  2 +-
 components/select/index.tsx                   | 17 ++++++-
 components/select/index.zh-CN.md              |  2 +-
 .../time-picker/__tests__/index.test.js       | 14 ++++++
 components/time-picker/index.tsx              | 47 ++++++++++++++-----
 .../tree-select/__tests__/index.test.js       |  9 ++++
 components/tree-select/index.en-US.md         |  2 +-
 components/tree-select/index.tsx              | 23 +++++++--
 components/tree-select/index.zh-CN.md         |  2 +-
 24 files changed, 214 insertions(+), 40 deletions(-)

diff --git a/components/auto-complete/__tests__/index.test.js b/components/auto-complete/__tests__/index.test.js
index 7686e70722..0ca10bf750 100644
--- a/components/auto-complete/__tests__/index.test.js
+++ b/components/auto-complete/__tests__/index.test.js
@@ -89,4 +89,18 @@ describe('AutoComplete', () => {
     );
     expect(container.querySelector('input').classList.contains('custom')).toBeTruthy();
   });
+
+  it('should show warning when use dropdownClassName', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(
+      <AutoComplete dropdownClassName="myCustomClassName">
+        <AutoComplete.Option value="111">111</AutoComplete.Option>
+        <AutoComplete.Option value="222">222</AutoComplete.Option>
+      </AutoComplete>,
+    );
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: AutoComplete] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+    errorSpy.mockRestore();
+  });
 });
diff --git a/components/auto-complete/demo/certain-category.md b/components/auto-complete/demo/certain-category.md
index b2105127df..55ca772e93 100644
--- a/components/auto-complete/demo/certain-category.md
+++ b/components/auto-complete/demo/certain-category.md
@@ -66,7 +66,7 @@ const options = [
 
 const App: React.FC = () => (
   <AutoComplete
-    dropdownClassName="certain-category-search-dropdown"
+    popupClassName="certain-category-search-dropdown"
     dropdownMatchSelectWidth={500}
     style={{ width: 250 }}
     options={options}
diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md
index b8963850b0..7b56b7bfda 100644
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@@ -31,7 +31,7 @@ The differences with Select are:
 | defaultOpen | Initial open state of dropdown | boolean | - |  |
 | defaultValue | Initial selected option | string | - |  |
 | disabled | Whether disabled select | boolean | false |  |
-| dropdownClassName | The className of dropdown menu | string | - |  |
+| popupClassName | The className of dropdown menu | string | - | 4.23.0 |
 | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true |  |
 | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true |  |
 | notFoundContent | Specify content to show when no result matches | string | `Not Found` |  |
diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
index 5ad13f101e..5534e1939a 100755
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -41,6 +41,12 @@ export interface AutoCompleteProps<
   > {
   dataSource?: DataSourceItemType[];
   status?: InputStatus;
+  /**
+   * @deprecated `dropdownClassName` is deprecated which will be removed in next major version.
+   *   Please use `popupClassName` instead.
+   */
+  dropdownClassName?: string;
+  popupClassName?: string;
 }
 
 function isSelectOptionOrSelectOptGroup(child: any): Boolean {
@@ -51,7 +57,14 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
   props,
   ref,
 ) => {
-  const { prefixCls: customizePrefixCls, className, children, dataSource } = props;
+  const {
+    prefixCls: customizePrefixCls,
+    className,
+    popupClassName,
+    dropdownClassName,
+    children,
+    dataSource,
+  } = props;
   const childNodes: React.ReactElement[] = toArray(children);
 
   // ============================= Input =============================
@@ -112,6 +125,12 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
     '`dataSource` is deprecated, please use `options` instead.',
   );
 
+  warning(
+    !dropdownClassName,
+    'AutoComplete',
+    '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+  );
+
   warning(
     !customizeInput || !('size' in props),
     'AutoComplete',
@@ -128,6 +147,7 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
             ref={ref}
             {...omit(props, ['dataSource'])}
             prefixCls={prefixCls}
+            dropdownClassName={popupClassName || dropdownClassName}
             className={classNames(`${prefixCls}-auto-complete`, className)}
             mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as any}
             {...{
diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md
index 3352186050..161ed60a2c 100644
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@@ -32,7 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 | defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
 | defaultValue | 指定默认选中的条目 | string | - |  |
 | disabled | 是否禁用 | boolean | false |  |
-| dropdownClassName | 下拉菜单的 className 属性 | string | - |  |
+| popupClassName | 下拉菜单的 className 属性 | string | - | 4.23.0 |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true |  |
 | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body |  |
diff --git a/components/cascader/__tests__/index.test.js b/components/cascader/__tests__/index.test.js
index 93e27fcb07..2486e85ff6 100644
--- a/components/cascader/__tests__/index.test.js
+++ b/components/cascader/__tests__/index.test.js
@@ -540,7 +540,7 @@ describe('Cascader', () => {
     it('popupClassName', () => {
       const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
       const { container } = render(
-        <Cascader open popupPlacement="bottomLeft" popupClassName="mock-cls" />,
+        <Cascader open popupPlacement="bottomLeft" dropdownClassName="mock-cls" />,
       );
 
       expect(container.querySelector('.mock-cls')).toBeTruthy();
@@ -549,7 +549,7 @@ describe('Cascader', () => {
       expect(global.triggerProps.popupPlacement).toEqual('bottomLeft');
 
       expect(errorSpy).toHaveBeenCalledWith(
-        'Warning: [antd: Cascader] `popupClassName` is deprecated. Please use `dropdownClassName` instead.',
+        'Warning: [antd: Cascader] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
       );
 
       errorSpy.mockRestore();
diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md
index f7eadde579..84095106ce 100644
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@@ -30,7 +30,7 @@ Cascade selection box.
 | defaultValue | Initial selected value | string\[] \| number\[] | \[] |  |
 | disabled | Whether disabled select | boolean | false |  |
 | displayRender | The render function of displaying selected options | (label, selectedOptions) => ReactNode | label => label.join(`/`) | `multiple`: 4.18.0 |
-| dropdownClassName | The additional className of popup overlay | string | - | 4.17.0 |
+| popupClassName | The additional className of popup overlay | string | - | 4.23.0 |
 | dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.4.0 |
 | expandIcon | Customize the current item expand icon | ReactNode | - | 4.4.0 |
 | expandTrigger | expand current item when click or hover, one of `click` `hover` | string | `click` |  |
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 7de0b61a45..de4d1566a3 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -108,6 +108,11 @@ export type CascaderProps<DataNodeType> = UnionCascaderProps & {
   suffixIcon?: React.ReactNode;
   options?: DataNodeType[];
   status?: InputStatus;
+  /**
+   * @deprecated `dropdownClassName` is deprecated which will be removed in next major
+   *   version.Please use `popupClassName` instead.
+   */
+  dropdownClassName?: string;
 };
 
 export interface CascaderRef {
@@ -164,9 +169,9 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
 
   // =================== Warning =====================
   warning(
-    popupClassName === undefined,
+    !dropdownClassName,
     'Cascader',
-    '`popupClassName` is deprecated. Please use `dropdownClassName` instead.',
+    '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
   );
 
   warning(
@@ -185,7 +190,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
 
   // =================== Dropdown ====================
   const mergedDropdownClassName = classNames(
-    dropdownClassName || popupClassName,
+    popupClassName || dropdownClassName,
     `${cascaderPrefixCls}-dropdown`,
     {
       [`${cascaderPrefixCls}-dropdown-rtl`]: mergedDirection === 'rtl',
diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md
index e9509a0bf5..c44a10e47a 100644
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@@ -31,7 +31,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
 | defaultValue | 默认的选中项 | string\[] \| number\[] | \[] |  |
 | disabled | 禁用 | boolean | false |  |
 | displayRender | 选择后展示的渲染函数 | (label, selectedOptions) => ReactNode | label => label.join(`/`) | `multiple`: 4.18.0 |
-| dropdownClassName | 自定义浮层类名 | string | - | 4.17.0 |
+| popupClassName | 自定义浮层类名 | string | - | 4.23.0 |
 | dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.4.0 |
 | expandIcon | 自定义次级菜单展开图标 | ReactNode | - | 4.4.0 |
 | expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | `click` |  |
diff --git a/components/date-picker/__tests__/DatePicker.test.js b/components/date-picker/__tests__/DatePicker.test.js
index d917117c4e..b782ef3989 100644
--- a/components/date-picker/__tests__/DatePicker.test.js
+++ b/components/date-picker/__tests__/DatePicker.test.js
@@ -184,6 +184,20 @@ describe('DatePicker', () => {
     ).toBe(60);
   });
 
+  it('DatePicker should show warning when use dropdownClassName', () => {
+    mount(<DatePicker dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: DatePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
+  it('RangePicker should show warning when use dropdownClassName', () => {
+    mount(<DatePicker.RangePicker dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: RangePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
   it('DatePicker.RangePicker with defaultPickerValue and showTime', () => {
     const startDate = moment('1982-02-12');
     const endDate = moment('1982-02-22');
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
index 3e56dc9d3a..a7afe57978 100644
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -18,6 +18,7 @@ import { getMergedStatus, getStatusClassNames } from '../../_util/statusUtils';
 import enUS from '../locale/en_US';
 import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
 import type { CommonPickerMethods, PickerComponentClass } from './interface';
+import warning from '../../_util/warning';
 
 export default function generateRangePicker<DateType>(
   generateConfig: GenerateConfig<DateType>,
@@ -26,7 +27,14 @@ export default function generateRangePicker<DateType>(
 
   const RangePicker = forwardRef<
     InternalRangePickerProps | CommonPickerMethods,
-    RangePickerProps<DateType>
+    RangePickerProps<DateType> & {
+      /**
+       * @deprecated `dropdownClassName` is deprecated which will be removed in next major
+       *   version.Please use `popupClassName` instead.
+       */
+      dropdownClassName: string;
+      popupClassName?: string;
+    }
   >((props, ref) => {
     const {
       prefixCls: customizePrefixCls,
@@ -37,6 +45,8 @@ export default function generateRangePicker<DateType>(
       disabled: customDisabled,
       bordered = true,
       placeholder,
+      popupClassName,
+      dropdownClassName,
       status: customStatus,
       ...restProps
     } = props;
@@ -54,6 +64,12 @@ export default function generateRangePicker<DateType>(
       ...(picker === 'time' ? getTimeProps({ format, ...props, picker }) : {}),
     };
 
+    warning(
+      !dropdownClassName,
+      'RangePicker',
+      '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+
     // ===================== Size =====================
     const size = React.useContext(SizeContext);
     const mergedSize = customizeSize || size;
@@ -92,6 +108,7 @@ export default function generateRangePicker<DateType>(
               }
               disabled={mergedDisabled}
               ref={innerRef}
+              dropdownClassName={popupClassName || dropdownClassName}
               dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
               placeholder={getRangePlaceholder(picker, locale, placeholder)}
               suffixIcon={suffixNode}
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
index 0fdf155105..2827728e02 100644
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -24,8 +24,13 @@ import type { CommonPickerMethods, DatePickRef, PickerComponentClass } from './i
 export default function generatePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   type DatePickerProps = PickerProps<DateType> & {
     status?: InputStatus;
+    /**
+     * @deprecated `dropdownClassName` is deprecated which will be removed in next major
+     *   version.Please use `popupClassName` instead.
+     */
+    dropdownClassName?: string;
+    popupClassName?: string;
   };
-
   function getPicker<InnerPickerProps extends DatePickerProps>(
     picker?: PickerMode,
     displayName?: string,
@@ -40,17 +45,13 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           bordered = true,
           placement,
           placeholder,
+          popupClassName,
+          dropdownClassName,
           disabled: customDisabled,
           status: customStatus,
           ...restProps
         } = props;
 
-        warning(
-          picker !== 'quarter',
-          displayName!,
-          `DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`,
-        );
-
         const { getPrefixCls, direction, getPopupContainer } = useContext(ConfigContext);
         const prefixCls = getPrefixCls('picker', customizePrefixCls);
         const innerRef = React.useRef<RCPicker<DateType>>(null);
@@ -80,6 +81,18 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
         };
         const rootPrefixCls = getPrefixCls();
 
+        // =================== Warning =====================
+        warning(
+          picker !== 'quarter',
+          displayName!,
+          `DatePicker.${displayName} is legacy usage. Please use DatePicker[picker='${picker}'] directly.`,
+        );
+
+        warning(
+          !dropdownClassName,
+          'DatePicker',
+          '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+        );
         // ===================== Size =====================
         const size = React.useContext(SizeContext);
         const mergedSize = customizeSize || size;
@@ -110,6 +123,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
                   placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
                   suffixIcon={suffixNode}
                   dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
+                  dropdownClassName={popupClassName || dropdownClassName}
                   clearIcon={<CloseCircleFilled />}
                   prevIcon={<span className={`${prefixCls}-prev-icon`} />}
                   nextIcon={<span className={`${prefixCls}-next-icon`} />}
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index 21ce15417e..cc1a151c89 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -59,7 +59,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | dateRender | Custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - |  |
 | disabled | Determine whether the DatePicker is disabled | boolean | false |  |
 | disabledDate | Specify the date that cannot be selected | (currentDate: moment) => boolean | - |  |
-| dropdownClassName | To customize the className of the popup calendar | string | - |  |
+| popupClassName | To customize the className of the popup calendar | string | - | 4.23.0 |
 | getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |  |
 | inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false |  |
 | locale | Localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index 756a38dab9..3672b52d1f 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -60,7 +60,7 @@ import locale from 'antd/es/locale/zh_CN';
 | dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - |  |
 | disabled | 禁用 | boolean | false |  |
 | disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - |  |
-| dropdownClassName | 额外的弹出日历 className | string | - |  |
+| popupClassName | 额外的弹出日历 className | string | - | 4.23.0 |
 | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - |  |
 | inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |  |
 | locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
diff --git a/components/select/__tests__/index.test.js b/components/select/__tests__/index.test.js
index cbd69cb000..39473475e7 100644
--- a/components/select/__tests__/index.test.js
+++ b/components/select/__tests__/index.test.js
@@ -91,6 +91,16 @@ describe('Select', () => {
     expect(container.querySelectorAll('.anticon-down').length).toBe(0);
     expect(container.querySelectorAll('.anticon-search').length).toBe(1);
   });
+
+  it('should show warning when use dropdownClassName', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    render(<Select dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Select] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+    errorSpy.mockRestore();
+  });
+
   //
   describe('Select Custom Icons', () => {
     it('should support customized icons', () => {
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index f20d6119b6..757a05666b 100644
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@@ -33,7 +33,7 @@ Select component to select value from options.
 | defaultOpen | Initial open state of dropdown | boolean | - |  |
 | defaultValue | Initial selected option | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue\[] | - |  |
 | disabled | Whether disabled select | boolean | false |  |
-| dropdownClassName | The className of dropdown menu | string | - |  |
+| popupClassName | The className of dropdown menu | string | - | 4.23.0 |
 | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true |  |
 | dropdownRender | Customize dropdown content | (originNode: ReactNode) => ReactNode | - |  |
 | dropdownStyle | The style of dropdown menu | CSSProperties | - |  |
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 85cf6c4acf..b903cdf613 100755
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -19,6 +19,7 @@ import { getTransitionDirection, getTransitionName } from '../_util/motion';
 import type { InputStatus } from '../_util/statusUtils';
 import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
 import getIcons from './utils/iconUtil';
+import warning from '../_util/warning';
 
 type RawValue = string | number;
 
@@ -53,6 +54,12 @@ export interface SelectProps<
   placement?: SelectCommonPlacement;
   mode?: 'multiple' | 'tags';
   status?: InputStatus;
+  /**
+   * @deprecated `dropdownClassName` is deprecated which will be removed in next major
+   *   version.Please use `popupClassName` instead.
+   */
+  dropdownClassName?: string;
+  popupClassName?: string;
 }
 
 const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
@@ -64,6 +71,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
     className,
     getPopupContainer,
     dropdownClassName,
+    popupClassName,
     listHeight = 256,
     placement,
     listItemHeight = 24,
@@ -107,6 +115,13 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
   const mergedShowArrow =
     showArrow !== undefined ? showArrow : props.loading || !(isMultiple || mode === 'combobox');
 
+  // =================== Warning =====================
+  warning(
+    !dropdownClassName,
+    'Select',
+    '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+  );
+
   // ===================== Form Status =====================
   const {
     status: contextStatus,
@@ -138,7 +153,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
 
   const selectProps = omit(props as typeof props & { itemIcon: any }, ['suffixIcon', 'itemIcon']);
 
-  const rcSelectRtlDropdownClassName = classNames(dropdownClassName, {
+  const rcSelectRtlDropdownClassName = classNames(popupClassName || dropdownClassName, {
     [`${prefixCls}-dropdown-${direction}`]: direction === 'rtl',
   });
 
diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md
index 27b122a9fc..8dbbec7af9 100644
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@@ -34,7 +34,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
 | defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
 | defaultValue | 指定默认选中的条目 | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue\[] | - |  |
 | disabled | 是否禁用 | boolean | false |  |
-| dropdownClassName | 下拉菜单的 className 属性 | string | - |  |
+| popupClassName | 下拉菜单的 className 属性 | string | - | 4.23.0 |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true |  |
 | dropdownRender | 自定义下拉框内容 | (originNode: ReactNode) => ReactNode | - |  |
 | dropdownStyle | 下拉菜单的 style 属性 | CSSProperties | - |  |
diff --git a/components/time-picker/__tests__/index.test.js b/components/time-picker/__tests__/index.test.js
index d6ac11a0c8..1f8e915aca 100644
--- a/components/time-picker/__tests__/index.test.js
+++ b/components/time-picker/__tests__/index.test.js
@@ -84,6 +84,20 @@ describe('TimePicker', () => {
     expect(wrapper.find('RangePicker').last().prop('dropdownClassName')).toEqual(popupClassName);
   });
 
+  it('RangePicker should show warning when use dropdownClassName', () => {
+    mount(<TimePicker.RangePicker dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: RangePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
+  it('TimePicker should show warning when use dropdownClassName', () => {
+    mount(<TimePicker dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: TimePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
   it('should support bordered', () => {
     const wrapper = mount(
       <TimePicker
diff --git a/components/time-picker/index.tsx b/components/time-picker/index.tsx
index 2b9177b87f..22e3c34787 100644
--- a/components/time-picker/index.tsx
+++ b/components/time-picker/index.tsx
@@ -13,31 +13,50 @@ export interface TimePickerLocale {
 }
 
 export interface TimeRangePickerProps extends Omit<RangePickerTimeProps<Moment>, 'picker'> {
+  /**
+   * @deprecated `dropdownClassName` is deprecated which will be removed in next major
+   *   version.Please use `popupClassName` instead.
+   */
+  dropdownClassName?: string;
   popupClassName?: string;
 }
 
-const RangePicker = React.forwardRef<any, TimeRangePickerProps>((props, ref) => (
-  <InternalRangePicker
-    {...props}
-    dropdownClassName={props.popupClassName}
-    picker="time"
-    mode={undefined}
-    ref={ref}
-  />
-));
+const RangePicker = React.forwardRef<any, TimeRangePickerProps>((props, ref) => {
+  const { dropdownClassName, popupClassName } = props;
+  warning(
+    !dropdownClassName,
+    'RangePicker',
+    '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+  );
+  return (
+    <InternalRangePicker
+      {...props}
+      dropdownClassName={popupClassName || dropdownClassName}
+      picker="time"
+      mode={undefined}
+      ref={ref}
+    />
+  );
+});
 
 export interface TimePickerProps extends Omit<PickerTimeProps<Moment>, 'picker'> {
   addon?: () => React.ReactNode;
   popupClassName?: string;
+  /**
+   * @deprecated `dropdownClassName` is deprecated which will be removed in next major
+   *   version.Please use `popupClassName` instead.
+   */
+  dropdownClassName?: string;
   status?: InputStatus;
 }
 
 const TimePicker = React.forwardRef<any, TimePickerProps>(
-  ({ addon, renderExtraFooter, popupClassName, ...restProps }, ref) => {
+  ({ addon, renderExtraFooter, popupClassName, dropdownClassName, ...restProps }, ref) => {
     const internalRenderExtraFooter = React.useMemo(() => {
       if (renderExtraFooter) {
         return renderExtraFooter;
       }
+
       if (addon) {
         warning(
           false,
@@ -49,10 +68,16 @@ const TimePicker = React.forwardRef<any, TimePickerProps>(
       return undefined;
     }, [addon, renderExtraFooter]);
 
+    warning(
+      !dropdownClassName,
+      'TimePicker',
+      '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+
     return (
       <InternalTimePicker
+        dropdownClassName={popupClassName || dropdownClassName}
         {...restProps}
-        dropdownClassName={popupClassName}
         mode={undefined}
         ref={ref}
         renderExtraFooter={internalRenderExtraFooter}
diff --git a/components/tree-select/__tests__/index.test.js b/components/tree-select/__tests__/index.test.js
index de3417fe05..fff215c4fe 100644
--- a/components/tree-select/__tests__/index.test.js
+++ b/components/tree-select/__tests__/index.test.js
@@ -50,4 +50,13 @@ describe('TreeSelect', () => {
     const wrapper = mount(<TreeSelect treeIcon open notFoundContent="notFoundContent" />);
     expect(wrapper.text()).toBe('notFoundContent');
   });
+
+  it('should show warning when use dropdownClassName', () => {
+    const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    mount(<TreeSelect dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: TreeSelect] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+    errorSpy.mockRestore();
+  });
 });
diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md
index a5bd260e15..b42b60a444 100644
--- a/components/tree-select/index.en-US.md
+++ b/components/tree-select/index.en-US.md
@@ -22,7 +22,7 @@ Tree selection control.
 | bordered | Whether has border style | boolean | true |  |
 | defaultValue | To set the initial selected treeNode(s) | string \| string\[] | - |  |
 | disabled | Disabled or not | boolean | false |  |
-| dropdownClassName | The className of dropdown menu | string | - |  |
+| popupClassName | The className of dropdown menu | string | - | 4.23.0 |
 | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true |  |
 | dropdownRender | Customize dropdown content | (originNode: ReactNode, props) => ReactNode | - |  |
 | dropdownStyle | To set the style of the dropdown menu | CSSProperties | - |  |
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index 700e8cb8f1..6cc296e7f9 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -50,6 +50,12 @@ export interface TreeSelectProps<
   size?: SizeType;
   disabled?: boolean;
   placement?: SelectCommonPlacement;
+  /**
+   * @deprecated `dropdownClassName` is deprecated which will be removed in next major
+   *   version.Please use `popupClassName` instead.
+   */
+  dropdownClassName?: string;
+  popupClassName?: string;
   bordered?: boolean;
   treeLine?: TreeProps['showLine'];
   status?: InputStatus;
@@ -73,6 +79,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
     treeLine,
     getPopupContainer,
     dropdownClassName,
+    popupClassName,
     treeIcon = false,
     transitionName,
     choiceTransitionName = '',
@@ -99,13 +106,23 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
     '`multiple` will always be `true` when `treeCheckable` is true',
   );
 
+  warning(
+    !dropdownClassName,
+    'TreeSelect',
+    '`dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+  );
+
   const prefixCls = getPrefixCls('select', customizePrefixCls);
   const treePrefixCls = getPrefixCls('select-tree', customizePrefixCls);
   const treeSelectPrefixCls = getPrefixCls('tree-select', customizePrefixCls);
 
-  const mergedDropdownClassName = classNames(dropdownClassName, `${treeSelectPrefixCls}-dropdown`, {
-    [`${treeSelectPrefixCls}-dropdown-rtl`]: direction === 'rtl',
-  });
+  const mergedDropdownClassName = classNames(
+    popupClassName || dropdownClassName,
+    `${treeSelectPrefixCls}-dropdown`,
+    {
+      [`${treeSelectPrefixCls}-dropdown-rtl`]: direction === 'rtl',
+    },
+  );
 
   const isMultiple = !!(treeCheckable || multiple);
   const mergedShowArrow = showArrow !== undefined ? showArrow : props.loading || !isMultiple;
diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md
index 174dbb1de9..2887fcb34a 100644
--- a/components/tree-select/index.zh-CN.md
+++ b/components/tree-select/index.zh-CN.md
@@ -23,7 +23,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 | bordered | 是否显示边框 | boolean | true |  |
 | defaultValue | 指定默认选中的条目 | string \| string\[] | - |  |
 | disabled | 是否禁用 | boolean | false |  |
-| dropdownClassName | 下拉菜单的 className 属性 | string | - |  |
+| popupClassName | 下拉菜单的 className 属性 | string | - | 4.23.0 |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true |  |
 | dropdownRender | 自定义下拉框内容 | (originNode: ReactNode, props) => ReactNode | - |  |
 | dropdownStyle | 下拉菜单的样式 | object | - |  |

From 304b36a5bf40ad8ab090246e2d9f9a6e9bf9a0a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E7=88=B1=E5=90=83=E7=99=BD=E8=90=9D?=
 =?UTF-8?q?=E5=8D=9C?= <smith3816@gmail.com>
Date: Mon, 8 Aug 2022 17:01:25 +0800
Subject: [PATCH 06/22] refactor: Replace Tabs motion (#36943)

* chore: bump rc-tabs

* refactor: use internal motion

* test: Update snapshot

* chore: clean up

* test: Update snapshot

* test: coverage

* test: resolve conflict
---
 .../__snapshots__/demo-extend.test.ts.snap    |  21 -
 .../__tests__/__snapshots__/demo.test.js.snap |  21 -
 .../__snapshots__/demo-extend.test.ts.snap    |   7 -
 .../__tests__/__snapshots__/demo.test.js.snap |   7 -
 .../__snapshots__/demo-extend.test.ts.snap    | 729 +++++-------------
 .../__tests__/__snapshots__/demo.test.js.snap | 710 ++++-------------
 components/tabs/__tests__/animated.test.tsx   |  34 +
 components/tabs/demo/animated.md              |  79 ++
 components/tabs/hooks/useAnimateConfig.ts     |  46 ++
 components/tabs/index.tsx                     |   5 +
 components/tabs/style/index.less              |  44 +-
 package.json                                  |   2 +-
 tests/{utils.ts => utils.tsx}                 |  16 +-
 13 files changed, 549 insertions(+), 1172 deletions(-)
 create mode 100644 components/tabs/__tests__/animated.test.tsx
 create mode 100644 components/tabs/demo/animated.md
 create mode 100644 components/tabs/hooks/useAnimateConfig.ts
 rename tests/{utils.ts => utils.tsx} (81%)

diff --git a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
index af61e42c46..ca2864e0d4 100644
--- a/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/card/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -851,13 +851,6 @@ Array [
               role="tabpanel"
               tabindex="0"
             />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane"
-              role="tabpanel"
-              style="display:none"
-              tabindex="-1"
-            />
           </div>
         </div>
       </div>
@@ -1007,26 +1000,12 @@ Array [
           <div
             class="ant-tabs-content ant-tabs-content-top"
           >
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane"
-              role="tabpanel"
-              style="display:none"
-              tabindex="-1"
-            />
             <div
               aria-hidden="false"
               class="ant-tabs-tabpane ant-tabs-tabpane-active"
               role="tabpanel"
               tabindex="0"
             />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane"
-              role="tabpanel"
-              style="display:none"
-              tabindex="-1"
-            />
           </div>
         </div>
       </div>
diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap
index 3bb058ccaf..a8992ad83e 100644
--- a/components/card/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/card/__tests__/__snapshots__/demo.test.js.snap
@@ -832,13 +832,6 @@ Array [
               role="tabpanel"
               tabindex="0"
             />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane"
-              role="tabpanel"
-              style="display:none"
-              tabindex="-1"
-            />
           </div>
         </div>
       </div>
@@ -969,26 +962,12 @@ Array [
           <div
             class="ant-tabs-content ant-tabs-content-top"
           >
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane"
-              role="tabpanel"
-              style="display:none"
-              tabindex="-1"
-            />
             <div
               aria-hidden="false"
               class="ant-tabs-tabpane ant-tabs-tabpane-active"
               role="tabpanel"
               tabindex="0"
             />
-            <div
-              aria-hidden="true"
-              class="ant-tabs-tabpane"
-              role="tabpanel"
-              style="display:none"
-              tabindex="-1"
-            />
           </div>
         </div>
       </div>
diff --git a/components/page-header/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/page-header/__tests__/__snapshots__/demo-extend.test.ts.snap
index 6b97d77467..00c14ea0b2 100644
--- a/components/page-header/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/page-header/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1637,13 +1637,6 @@ exports[`renders ./components/page-header/demo/responsive.md extend context corr
             role="tabpanel"
             tabindex="0"
           />
-          <div
-            aria-hidden="true"
-            class="ant-tabs-tabpane"
-            role="tabpanel"
-            style="display:none"
-            tabindex="-1"
-          />
         </div>
       </div>
     </div>
diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
index 26dd262b48..283adac948 100644
--- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
@@ -1416,13 +1416,6 @@ exports[`renders ./components/page-header/demo/responsive.md correctly 1`] = `
             role="tabpanel"
             tabindex="0"
           />
-          <div
-            aria-hidden="true"
-            class="ant-tabs-tabpane"
-            role="tabpanel"
-            style="display:none"
-            tabindex="-1"
-          />
         </div>
       </div>
     </div>
diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
index edadaba4b9..b669bec4b1 100644
--- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1,5 +1,181 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ./components/tabs/demo/animated.md extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        aria-checked="true"
+        class="ant-switch ant-switch-checked"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          inkBar
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        aria-checked="true"
+        class="ant-switch ant-switch-checked"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          tabPane
+        </span>
+      </button>
+    </div>
+  </div>,
+  <div
+    class="ant-tabs ant-tabs-top"
+  >
+    <div
+      class="ant-tabs-nav"
+      role="tablist"
+    >
+      <div
+        class="ant-tabs-nav-wrap"
+      >
+        <div
+          class="ant-tabs-nav-list"
+          style="transform:translate(0px, 0px)"
+        >
+          <div
+            class="ant-tabs-tab ant-tabs-tab-active"
+          >
+            <div
+              aria-selected="true"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              Bamboo
+            </div>
+          </div>
+          <div
+            class="ant-tabs-tab"
+          >
+            <div
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              Little
+            </div>
+          </div>
+          <div
+            class="ant-tabs-tab"
+          >
+            <div
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              Light
+            </div>
+          </div>
+          <div
+            class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+      >
+        <button
+          aria-controls="null-more-popup"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-hidden="true"
+          class="ant-tabs-nav-more"
+          id="null-more"
+          style="visibility:hidden;order:1"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+              />
+            </svg>
+          </span>
+        </button>
+        <div>
+          <div
+            class="ant-tabs-dropdown"
+            style="opacity:0"
+          >
+            <ul
+              aria-label="expanded dropdown"
+              class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical"
+              data-menu-list="true"
+              id="null-more-popup"
+              role="listbox"
+              tabindex="-1"
+            />
+            <div
+              aria-hidden="true"
+              style="display:none"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-tabs-content-holder"
+    >
+      <div
+        class="ant-tabs-content ant-tabs-content-top ant-tabs-content-animated"
+      >
+        <div
+          aria-hidden="false"
+          class="ant-tabs-tabpane ant-tabs-tabpane-active"
+          role="tabpanel"
+          style="height:200px;box-shadow:0 0 3px rgba(255, 0, 0, 0.5)"
+          tabindex="0"
+        >
+          Hello Bamboo!
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders ./components/tabs/demo/basic.md extend context correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
@@ -125,20 +301,6 @@ exports[`renders ./components/tabs/demo/basic.md extend context correctly 1`] =
       >
         Content of Tab Pane 1
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -269,20 +431,6 @@ exports[`renders ./components/tabs/demo/card.md extend context correctly 1`] = `
       >
         Content of Tab Pane 1
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -424,20 +572,6 @@ exports[`renders ./components/tabs/demo/card-top.md extend context correctly 1`]
             Content of Tab Pane 1
           </p>
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>
@@ -569,20 +703,6 @@ exports[`renders ./components/tabs/demo/centered.md extend context correctly 1`]
       >
         Content of Tab Pane 1
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -766,13 +886,6 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md extend context cor
         >
           Content of Tab Pane 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>
@@ -909,20 +1022,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.md extend context correct
         >
           Content of Tab Pane 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>
@@ -1069,20 +1168,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md extend context co
       >
         Content of Tab Pane 1
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -1213,20 +1298,6 @@ exports[`renders ./components/tabs/demo/deprecated.md extend context correctly 1
       >
         Content of Tab Pane 1
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -1357,20 +1428,6 @@ exports[`renders ./components/tabs/demo/disabled.md extend context correctly 1`]
       >
         Tab 1
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -1611,20 +1668,6 @@ exports[`renders ./components/tabs/demo/editable-card.md extend context correctl
       >
         Content of Tab 1
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -1768,20 +1811,6 @@ Array [
         >
           Content of tab 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>,
@@ -1989,20 +2018,6 @@ Array [
         >
           Content of tab 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>,
@@ -2156,13 +2171,6 @@ exports[`renders ./components/tabs/demo/icon.md extend context correctly 1`] = `
     <div
       class="ant-tabs-content ant-tabs-content-top"
     >
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
       <div
         aria-hidden="false"
         class="ant-tabs-tabpane ant-tabs-tabpane-active"
@@ -3255,13 +3263,6 @@ exports[`renders ./components/tabs/demo/nest.md extend context correctly 1`] = `
               <div
                 class="ant-tabs-content ant-tabs-content-top"
               >
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
                 <div
                   aria-hidden="false"
                   class="ant-tabs-tabpane ant-tabs-tabpane-active"
@@ -3270,143 +3271,10 @@ exports[`renders ./components/tabs/demo/nest.md extend context correctly 1`] = `
                 >
                   TTTT 1
                 </div>
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
               </div>
             </div>
           </div>
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>
@@ -3635,20 +3503,6 @@ Array [
         >
           Content of Tab 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>,
@@ -3845,20 +3699,6 @@ exports[`renders ./components/tabs/demo/size.md extend context correctly 1`] = `
         >
           Content of tab 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>
@@ -3986,20 +3826,6 @@ exports[`renders ./components/tabs/demo/size.md extend context correctly 1`] = `
         >
           Content of card tab 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>
@@ -4522,13 +4348,6 @@ exports[`renders ./components/tabs/demo/slide.md extend context correctly 1`] =
       <div
         class="ant-tabs-content ant-tabs-content-top"
       >
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
         <div
           aria-hidden="false"
           class="ant-tabs-tabpane ant-tabs-tabpane-active"
@@ -4537,202 +4356,6 @@ exports[`renders ./components/tabs/demo/slide.md extend context correctly 1`] =
         >
           Content of tab 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
index 7e17857307..11afc76dce 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -1,5 +1,162 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders ./components/tabs/demo/animated.md correctly 1`] = `
+Array [
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        aria-checked="true"
+        class="ant-switch ant-switch-checked"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          inkBar
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        aria-checked="true"
+        class="ant-switch ant-switch-checked"
+        role="switch"
+        type="button"
+      >
+        <div
+          class="ant-switch-handle"
+        />
+        <span
+          class="ant-switch-inner"
+        >
+          tabPane
+        </span>
+      </button>
+    </div>
+  </div>,
+  <div
+    class="ant-tabs ant-tabs-top"
+  >
+    <div
+      class="ant-tabs-nav"
+      role="tablist"
+    >
+      <div
+        class="ant-tabs-nav-wrap"
+      >
+        <div
+          class="ant-tabs-nav-list"
+          style="transform:translate(0px, 0px)"
+        >
+          <div
+            class="ant-tabs-tab ant-tabs-tab-active"
+          >
+            <div
+              aria-selected="true"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              Bamboo
+            </div>
+          </div>
+          <div
+            class="ant-tabs-tab"
+          >
+            <div
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              Little
+            </div>
+          </div>
+          <div
+            class="ant-tabs-tab"
+          >
+            <div
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              Light
+            </div>
+          </div>
+          <div
+            class="ant-tabs-ink-bar ant-tabs-ink-bar-animated"
+          />
+        </div>
+      </div>
+      <div
+        class="ant-tabs-nav-operations ant-tabs-nav-operations-hidden"
+      >
+        <button
+          aria-controls="null-more-popup"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-hidden="true"
+          class="ant-tabs-nav-more"
+          id="null-more"
+          style="visibility:hidden;order:1"
+          tabindex="-1"
+          type="button"
+        >
+          <span
+            aria-label="ellipsis"
+            class="anticon anticon-ellipsis"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="ellipsis"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+              />
+            </svg>
+          </span>
+        </button>
+      </div>
+    </div>
+    <div
+      class="ant-tabs-content-holder"
+    >
+      <div
+        class="ant-tabs-content ant-tabs-content-top ant-tabs-content-animated"
+      >
+        <div
+          aria-hidden="false"
+          class="ant-tabs-tabpane ant-tabs-tabpane-active"
+          role="tabpanel"
+          style="height:200px;box-shadow:0 0 3px rgba(255, 0, 0, 0.5)"
+          tabindex="0"
+        >
+          Hello Bamboo!
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
 <div
   class="ant-tabs ant-tabs-top"
@@ -106,20 +263,6 @@ exports[`renders ./components/tabs/demo/basic.md correctly 1`] = `
       >
         Content of Tab Pane 1
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -231,20 +374,6 @@ exports[`renders ./components/tabs/demo/card.md correctly 1`] = `
       >
         Content of Tab Pane 1
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -367,20 +496,6 @@ exports[`renders ./components/tabs/demo/card-top.md correctly 1`] = `
             Content of Tab Pane 1
           </p>
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>
@@ -493,20 +608,6 @@ exports[`renders ./components/tabs/demo/centered.md correctly 1`] = `
       >
         Content of Tab Pane 1
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -671,13 +772,6 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
         >
           Content of Tab Pane 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>
@@ -795,20 +889,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar.md correctly 1`] = `
         >
           Content of Tab Pane 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>
@@ -936,20 +1016,6 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
       >
         Content of Tab Pane 1
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -1061,20 +1127,6 @@ exports[`renders ./components/tabs/demo/deprecated.md correctly 1`] = `
       >
         Content of Tab Pane 1
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -1186,20 +1238,6 @@ exports[`renders ./components/tabs/demo/disabled.md correctly 1`] = `
       >
         Tab 1
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -1421,20 +1459,6 @@ exports[`renders ./components/tabs/demo/editable-card.md correctly 1`] = `
       >
         Content of Tab 1
       </div>
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
     </div>
   </div>
 </div>
@@ -1559,20 +1583,6 @@ Array [
         >
           Content of tab 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>,
@@ -1761,20 +1771,6 @@ Array [
         >
           Content of tab 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>,
@@ -1909,13 +1905,6 @@ exports[`renders ./components/tabs/demo/icon.md correctly 1`] = `
     <div
       class="ant-tabs-content ant-tabs-content-top"
     >
-      <div
-        aria-hidden="true"
-        class="ant-tabs-tabpane"
-        role="tabpanel"
-        style="display:none"
-        tabindex="-1"
-      />
       <div
         aria-hidden="false"
         class="ant-tabs-tabpane ant-tabs-tabpane-active"
@@ -2552,13 +2541,6 @@ exports[`renders ./components/tabs/demo/nest.md correctly 1`] = `
               <div
                 class="ant-tabs-content ant-tabs-content-top"
               >
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
                 <div
                   aria-hidden="false"
                   class="ant-tabs-tabpane ant-tabs-tabpane-active"
@@ -2567,143 +2549,10 @@ exports[`renders ./components/tabs/demo/nest.md correctly 1`] = `
                 >
                   TTTT 1
                 </div>
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
-                <div
-                  aria-hidden="true"
-                  class="ant-tabs-tabpane"
-                  role="tabpanel"
-                  style="display:none"
-                  tabindex="-1"
-                />
               </div>
             </div>
           </div>
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>
@@ -2913,20 +2762,6 @@ Array [
         >
           Content of Tab 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>,
@@ -3104,20 +2939,6 @@ exports[`renders ./components/tabs/demo/size.md correctly 1`] = `
         >
           Content of tab 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>
@@ -3226,20 +3047,6 @@ exports[`renders ./components/tabs/demo/size.md correctly 1`] = `
         >
           Content of card tab 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>
@@ -3743,13 +3550,6 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
       <div
         class="ant-tabs-content ant-tabs-content-top"
       >
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
         <div
           aria-hidden="false"
           class="ant-tabs-tabpane ant-tabs-tabpane-active"
@@ -3758,202 +3558,6 @@ exports[`renders ./components/tabs/demo/slide.md correctly 1`] = `
         >
           Content of tab 1
         </div>
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
-        <div
-          aria-hidden="true"
-          class="ant-tabs-tabpane"
-          role="tabpanel"
-          style="display:none"
-          tabindex="-1"
-        />
       </div>
     </div>
   </div>
diff --git a/components/tabs/__tests__/animated.test.tsx b/components/tabs/__tests__/animated.test.tsx
new file mode 100644
index 0000000000..30c51fbc8f
--- /dev/null
+++ b/components/tabs/__tests__/animated.test.tsx
@@ -0,0 +1,34 @@
+import { renderHook } from '../../../tests/utils';
+import useAnimateConfig from '../hooks/useAnimateConfig';
+
+describe('Tabs.Animated', () => {
+  it('boolean: false', () => {
+    const { result } = renderHook(() => useAnimateConfig('test', false));
+
+    expect(result.current).toEqual({
+      inkBar: false,
+      tabPane: false,
+    });
+  });
+
+  it('boolean: true', () => {
+    const { result } = renderHook(() => useAnimateConfig('test', true));
+
+    expect(result.current).toEqual({
+      inkBar: true,
+      tabPane: false,
+    });
+  });
+
+  it('config', () => {
+    const { result } = renderHook(() => useAnimateConfig('test', { inkBar: false, tabPane: true }));
+
+    expect(result.current).toEqual({
+      inkBar: false,
+      tabPane: true,
+      tabPaneMotion: expect.objectContaining({
+        motionName: 'test-switch',
+      }),
+    });
+  });
+});
diff --git a/components/tabs/demo/animated.md b/components/tabs/demo/animated.md
new file mode 100644
index 0000000000..cce0654290
--- /dev/null
+++ b/components/tabs/demo/animated.md
@@ -0,0 +1,79 @@
+---
+order: 99
+title:
+  zh-CN: 动画
+  en-US: Animated
+debug: true
+---
+
+## zh-CN
+
+动画切换。
+
+## en-US
+
+Animated of Tab Pane.
+
+```tsx
+import { Tabs, Switch, Space } from 'antd';
+import React from 'react';
+
+const App: React.FC = () => {
+  const [inkBar, setInkBar] = React.useState(true);
+  const [tabPane, setTabPane] = React.useState(true);
+
+  return (
+    <>
+      <Space>
+        <Switch
+          checkedChildren="inkBar"
+          unCheckedChildren="inkBar"
+          checked={inkBar}
+          onChange={() => setInkBar(!inkBar)}
+        />
+        <Switch
+          checkedChildren="tabPane"
+          unCheckedChildren="tabPane"
+          checked={tabPane}
+          onChange={() => setTabPane(!tabPane)}
+        />
+      </Space>
+
+      <Tabs
+        animated={{ inkBar, tabPane }}
+        items={[
+          {
+            label: `Bamboo`,
+            key: '1',
+            children: `Hello Bamboo!`,
+            style: {
+              height: 200,
+              boxShadow: '0 0 3px rgba(255, 0, 0, 0.5)',
+            },
+          },
+          {
+            label: `Little`,
+            key: '2',
+            children: `Hi Little!`,
+            style: {
+              height: 300,
+              boxShadow: '0 0 3px rgba(0, 255, 0, 0.5)',
+            },
+          },
+          {
+            label: `Light`,
+            key: '3',
+            children: `Welcome Light!`,
+            style: {
+              height: 100,
+              boxShadow: '0 0 3px rgba(0, 0, 255, 0.5)',
+            },
+          },
+        ]}
+      />
+    </>
+  );
+};
+
+export default App;
+```
diff --git a/components/tabs/hooks/useAnimateConfig.ts b/components/tabs/hooks/useAnimateConfig.ts
new file mode 100644
index 0000000000..31695d9f3a
--- /dev/null
+++ b/components/tabs/hooks/useAnimateConfig.ts
@@ -0,0 +1,46 @@
+import type { CSSMotionProps } from 'rc-motion';
+import type { AnimatedConfig } from 'rc-tabs/lib/interface';
+import type { TabsProps } from '..';
+import { getTransitionName } from '../../_util/motion';
+
+const motion: CSSMotionProps = {
+  motionAppear: false,
+  motionEnter: true,
+  motionLeave: true,
+};
+
+export default function useAnimateConfig(
+  prefixCls: string,
+  animated: TabsProps['animated'] = {
+    inkBar: true,
+    tabPane: false,
+  },
+): AnimatedConfig {
+  let mergedAnimated: AnimatedConfig;
+
+  if (animated === false) {
+    mergedAnimated = {
+      inkBar: false,
+      tabPane: false,
+    };
+  } else if (animated === true) {
+    mergedAnimated = {
+      inkBar: true,
+      tabPane: false,
+    };
+  } else {
+    mergedAnimated = {
+      inkBar: true,
+      ...(typeof animated === 'object' ? animated : {}),
+    };
+  }
+
+  if (mergedAnimated.tabPane) {
+    mergedAnimated.tabPaneMotion = {
+      ...motion,
+      motionName: getTransitionName(prefixCls, 'switch'),
+    };
+  }
+
+  return mergedAnimated;
+}
diff --git a/components/tabs/index.tsx b/components/tabs/index.tsx
index e97ac6afaa..4f95f07e7b 100755
--- a/components/tabs/index.tsx
+++ b/components/tabs/index.tsx
@@ -11,6 +11,7 @@ import { ConfigContext } from '../config-provider';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
 import warning from '../_util/warning';
+import useAnimateConfig from './hooks/useAnimateConfig';
 import useLegacyItems from './hooks/useLegacyItems';
 import TabPane, { TabPaneProps } from './TabPane';
 
@@ -39,6 +40,7 @@ function Tabs({
   addIcon,
   children,
   items,
+  animated,
   ...props
 }: TabsProps) {
   const { prefixCls: customizePrefixCls, moreIcon = <EllipsisOutlined /> } = props;
@@ -66,6 +68,8 @@ function Tabs({
 
   const mergedItems = useLegacyItems(items, children);
 
+  const mergedAnimated = useAnimateConfig(prefixCls, animated);
+
   return (
     <SizeContext.Consumer>
       {contextSize => {
@@ -88,6 +92,7 @@ function Tabs({
             editable={editable}
             moreIcon={moreIcon}
             prefixCls={prefixCls}
+            animated={mergedAnimated}
           />
         );
       }}
diff --git a/components/tabs/style/index.less b/components/tabs/style/index.less
index 0ff9cbc1ac..bb63bf4e2b 100644
--- a/components/tabs/style/index.less
+++ b/components/tabs/style/index.less
@@ -207,17 +207,45 @@
       min-height: 0;
     }
 
-    display: flex;
+    position: relative;
     width: 100%;
-
-    &-animated {
-      transition: margin @animation-duration-slow;
-    }
   }
 
   &-tabpane {
-    flex: none;
-    width: 100%;
-    outline: none;
+    &-hidden {
+      display: none;
+    }
+  }
+
+  // Motion
+  &-switch {
+    &-appear,
+    &-enter {
+      transition: none;
+
+      &-start {
+        opacity: 0;
+      }
+
+      &-active {
+        opacity: 1;
+        transition: opacity @animation-duration-slow;
+      }
+    }
+
+    &-leave {
+      position: absolute;
+      transition: none;
+      inset: 0;
+
+      &-start {
+        opacity: 1;
+      }
+
+      &-active {
+        opacity: 0;
+        transition: opacity @animation-duration-slow;
+      }
+    }
   }
 }
diff --git a/package.json b/package.json
index f302143413..03cdd72ff5 100644
--- a/package.json
+++ b/package.json
@@ -149,7 +149,7 @@
     "rc-steps": "~4.1.0",
     "rc-switch": "~3.2.0",
     "rc-table": "~7.26.0",
-    "rc-tabs": "~12.0.0-alpha.1",
+    "rc-tabs": "~12.1.0-alpha.0",
     "rc-textarea": "~0.3.0",
     "rc-tooltip": "~5.2.0",
     "rc-tree": "~5.6.5",
diff --git a/tests/utils.ts b/tests/utils.tsx
similarity index 81%
rename from tests/utils.ts
rename to tests/utils.tsx
index 6a969070fc..435250f5bf 100644
--- a/tests/utils.ts
+++ b/tests/utils.tsx
@@ -1,6 +1,6 @@
 import MockDate from 'mockdate';
 import type { ReactElement } from 'react';
-import { StrictMode } from 'react';
+import React, { StrictMode } from 'react';
 import type { RenderOptions } from '@testing-library/react';
 import { render, act } from '@testing-library/react';
 import { _rs as onLibResize } from 'rc-resize-observer/lib/utils/observerUtil';
@@ -27,6 +27,20 @@ export const sleep = async (timeout = 0) => {
 const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'wrapper'>) =>
   render(ui, { wrapper: StrictMode, ...options });
 
+export function renderHook<T>(func: () => T): { result: React.RefObject<T> } {
+  const result = React.createRef<T>();
+
+  const Demo = () => {
+    (result as any).current = func();
+
+    return null;
+  };
+
+  customRender(<Demo />);
+
+  return { result };
+}
+
 export { customRender as render };
 
 export const triggerResize = (target: Element) => {

From ca73f6e3f17035319901aa038b042d2ec7534a21 Mon Sep 17 00:00:00 2001
From: yykoypj <601924094@qq.com>
Date: Mon, 15 Aug 2022 14:39:02 +0800
Subject: [PATCH 07/22] chore: Remove visible usage for tag (#36934)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: remove visible for Tag

* chore: adjust warning info

* test: back of doc

Co-authored-by: 二货机器人 <smith3816@gmail.com>
---
 components/tag/__tests__/index.test.js | 15 ++++++++++++++-
 components/tag/demo/controlled.md      |  9 +++++----
 components/tag/index.en-US.md          | 23 +++++++++++------------
 components/tag/index.tsx               |  8 ++++++++
 components/tag/index.zh-CN.md          |  9 ++++-----
 5 files changed, 42 insertions(+), 22 deletions(-)

diff --git a/components/tag/__tests__/index.test.js b/components/tag/__tests__/index.test.js
index 4d9aa8f9e3..3d096fd194 100644
--- a/components/tag/__tests__/index.test.js
+++ b/components/tag/__tests__/index.test.js
@@ -2,8 +2,9 @@ import { mount } from 'enzyme';
 import React from 'react';
 import Tag from '..';
 import mountTest from '../../../tests/shared/mountTest';
+import { render, act } from '../../../tests/utils';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { act } from '../../../tests/utils';
+import { resetWarned } from '../../_util/warning';
 
 describe('Tag', () => {
   mountTest(Tag);
@@ -81,6 +82,18 @@ describe('Tag', () => {
     expect(onClick).not.toHaveBeenCalled();
   });
 
+  it('deprecated warning', () => {
+    resetWarned();
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    render(<Tag visible />);
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Tag] `visible` will be removed in next major version, please use `visible && <Tag />` instead.',
+    );
+
+    errSpy.mockRestore();
+  });
+
   describe('visibility', () => {
     it('can be controlled by visible with visible as initial value', () => {
       const wrapper = mount(<Tag visible />);
diff --git a/components/tag/demo/controlled.md b/components/tag/demo/controlled.md
index 28fa706d28..eb78e31622 100644
--- a/components/tag/demo/controlled.md
+++ b/components/tag/demo/controlled.md
@@ -1,17 +1,18 @@
 ---
 order: 5
 title:
-  zh-CN: 控制关闭状态
-  en-US: Controlled
+  zh-CN: 控制关闭状态（废弃）
+  en-US: Controlled (Deprecated)
+debug: true
 ---
 
 ## zh-CN
 
-通过 `visible` 属性控制关闭状态。
+废弃，通过 `visible` 属性控制关闭状态。
 
 ## en-US
 
-By using the `visible` prop, you can control the close state of Tag.
+Deprecated. By using the `visible` prop, you can control the close state of Tag.
 
 ```tsx
 import { Button, Tag } from 'antd';
diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md
index 17c5ee8c2b..585f01792c 100644
--- a/components/tag/index.en-US.md
+++ b/components/tag/index.en-US.md
@@ -17,18 +17,17 @@ Tag for categorizing or markup.
 
 ### Tag
 
-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| closable | Whether the Tag can be closed | boolean | false |  |
-| closeIcon | Custom close icon | ReactNode | - | 4.4.0 |
-| color | Color of the Tag | string | - |  |
-| icon | Set the icon of tag | ReactNode | - |  |
-| visible | Whether the Tag is closed or not | boolean | true |  |
-| onClose | Callback executed when tag is closed | (e) => void | - |  |
+| Property  | Description                          | Type        | Default | Version |
+| --------- | ------------------------------------ | ----------- | ------- | ------- |
+| closable  | Whether the Tag can be closed        | boolean     | false   |         |
+| closeIcon | Custom close icon                    | ReactNode   | -       | 4.4.0   |
+| color     | Color of the Tag                     | string      | -       |         |
+| icon      | Set the icon of tag                  | ReactNode   | -       |         |
+| onClose   | Callback executed when tag is closed | (e) => void | -       |         |
 
 ### Tag.CheckableTag
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| checked | Checked status of Tag | boolean | false |
-| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - |
+| Property | Description                                     | Type              | Default |
+| -------- | ----------------------------------------------- | ----------------- | ------- |
+| checked  | Checked status of Tag                           | boolean           | false   |
+| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | -       |
diff --git a/components/tag/index.tsx b/components/tag/index.tsx
index f38177d10c..66fc0d6e87 100644
--- a/components/tag/index.tsx
+++ b/components/tag/index.tsx
@@ -8,6 +8,7 @@ import type { PresetColorType, PresetStatusColorType } from '../_util/colors';
 import { PresetColorTypes, PresetStatusColorTypes } from '../_util/colors';
 import type { LiteralUnion } from '../_util/type';
 import Wave from '../_util/wave';
+import warning from '../_util/warning';
 import CheckableTag from './CheckableTag';
 
 export { CheckableTagProps } from './CheckableTag';
@@ -18,6 +19,7 @@ export interface TagProps extends React.HTMLAttributes<HTMLSpanElement> {
   color?: LiteralUnion<PresetColorType | PresetStatusColorType, string>;
   closable?: boolean;
   closeIcon?: React.ReactNode;
+  /** @deprecated `visible` will be removed in next major version. */
   visible?: boolean;
   onClose?: (e: React.MouseEvent<HTMLElement>) => void;
   style?: React.CSSProperties;
@@ -50,6 +52,12 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const [visible, setVisible] = React.useState(true);
 
+  warning(
+    !('visible' in props),
+    'Tag',
+    '`visible` will be removed in next major version, please use `visible && <Tag />` instead.',
+  );
+
   React.useEffect(() => {
     if ('visible' in props) {
       setVisible(props.visible!);
diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md
index 7611a029f8..16aaa2078d 100644
--- a/components/tag/index.zh-CN.md
+++ b/components/tag/index.zh-CN.md
@@ -23,12 +23,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg
 | closeIcon | 自定义关闭按钮 | ReactNode | - | 4.4.0 |
 | color | 标签色 | string | - |  |
 | icon | 设置图标 | ReactNode | - |  |
-| visible | 是否显示标签 | boolean | true |  |
 | onClose | 关闭时的回调（可通过 `e.preventDefault()` 来阻止默认行为） | (e) => void | - |  |
 
 ### Tag.CheckableTag
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| checked | 设置标签的选中状态 | boolean | false |
-| onChange | 点击标签时触发的回调 | (checked) => void | - |
+| 参数     | 说明                 | 类型              | 默认值 |
+| -------- | -------------------- | ----------------- | ------ |
+| checked  | 设置标签的选中状态   | boolean           | false  |
+| onChange | 点击标签时触发的回调 | (checked) => void | -      |

From 4b1b0e3d0049bee8e2d887705488c62034246e97 Mon Sep 17 00:00:00 2001
From: Alan Deng <alanhaledc@gmail.com>
Date: Mon, 15 Aug 2022 21:46:08 +0800
Subject: [PATCH 08/22] feat: custom slider handle margin left in the vertical
 direction (#37001)

---
 components/slider/style/index.less    | 2 +-
 components/style/themes/default.less  | 1 +
 components/style/themes/variable.less | 1 +
 3 files changed, 3 insertions(+), 1 deletion(-)

diff --git a/components/slider/style/index.less b/components/slider/style/index.less
index 586f62fb67..87a57aa554 100644
--- a/components/slider/style/index.less
+++ b/components/slider/style/index.less
@@ -178,7 +178,7 @@
 
     .@{slider-prefix-cls}-handle {
       margin-top: -6px; // we chould consider border width as well: (10 + 2 ) / 2
-      margin-left: -5px;
+      margin-left: @slider-handle-margin-left;
     }
 
     .@{slider-prefix-cls}-mark {
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index 299595ce1f..6bee9e1c3e 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -893,6 +893,7 @@
 @slider-handle-color-tooltip-open: @primary-color;
 @slider-handle-size: 14px;
 @slider-handle-margin-top: -5px;
+@slider-handle-margin-left: -5px;
 @slider-handle-shadow: 0;
 @slider-dot-border-color: @border-color-split;
 @slider-dot-border-color-active: tint(@primary-color, 50%);
diff --git a/components/style/themes/variable.less b/components/style/themes/variable.less
index cc86343c3c..43ee2646c2 100644
--- a/components/style/themes/variable.less
+++ b/components/style/themes/variable.less
@@ -948,6 +948,7 @@
 @slider-handle-color-tooltip-open: @primary-color;
 @slider-handle-size: 14px;
 @slider-handle-margin-top: -5px;
+@slider-handle-margin-left: -5px;
 @slider-handle-shadow: 0;
 @slider-dot-border-color: @border-color-split;
 @slider-dot-border-color-active: ~'var(--@{ant-prefix}-primary-color-deprecated-t-50)';

From c435eaad3f4414a88213c7d4f75f51acfd13ada2 Mon Sep 17 00:00:00 2001
From: Kyrielin <a154571896@gmail.com>
Date: Tue, 16 Aug 2022 09:59:27 +0800
Subject: [PATCH 09/22] feat(Tooltip): support React.Fragment as children
 (#37045)

---
 components/_util/reactNode.ts                |  4 +++
 components/tooltip/__tests__/tooltip.test.js | 31 ++++++++++++++++++++
 components/tooltip/index.tsx                 |  4 +--
 3 files changed, 37 insertions(+), 2 deletions(-)

diff --git a/components/_util/reactNode.ts b/components/_util/reactNode.ts
index ccdc8015be..759fd7a6c2 100644
--- a/components/_util/reactNode.ts
+++ b/components/_util/reactNode.ts
@@ -2,6 +2,10 @@ import * as React from 'react';
 
 export const { isValidElement } = React;
 
+export function isFragment(child: React.ReactElement): boolean {
+  return child && child.type === React.Fragment;
+}
+
 type AnyObject = Record<any, any>;
 
 type RenderProps = undefined | AnyObject | ((originProps: AnyObject) => AnyObject | undefined);
diff --git a/components/tooltip/__tests__/tooltip.test.js b/components/tooltip/__tests__/tooltip.test.js
index 62129cd42f..9ebdee5c50 100644
--- a/components/tooltip/__tests__/tooltip.test.js
+++ b/components/tooltip/__tests__/tooltip.test.js
@@ -422,4 +422,35 @@ describe('Tooltip', () => {
     expect(onVisibleChange).toHaveBeenLastCalledWith(true);
     expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
   });
+
+  it('should work with Fragment children', () => {
+    const onVisibleChange = jest.fn();
+    const ref = React.createRef();
+
+    const { container } = render(
+      <Tooltip
+        title="Have a nice day!"
+        mouseEnterDelay={0}
+        mouseLeaveDelay={0}
+        onVisibleChange={onVisibleChange}
+        ref={ref}
+      >
+        <>
+          <div className="hello">Hello world!</div>
+          <div className="hello">Hello world!</div>
+        </>
+      </Tooltip>,
+    );
+
+    const divElement = container.querySelector('.hello');
+    fireEvent.mouseEnter(divElement);
+    expect(onVisibleChange).toHaveBeenLastCalledWith(true);
+    expect(ref.current.props.visible).toBe(true);
+    expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
+
+    fireEvent.mouseLeave(divElement);
+    expect(onVisibleChange).toHaveBeenLastCalledWith(false);
+    expect(ref.current.props.visible).toBe(false);
+    expect(container.querySelector('.ant-tooltip-open')).toBeNull();
+  });
 });
diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx
index c959af9f3a..badebb626f 100644
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@@ -9,7 +9,7 @@ import type { PresetColorType } from '../_util/colors';
 import { PresetColorTypes } from '../_util/colors';
 import { getTransitionName } from '../_util/motion';
 import getPlacements, { AdjustOverflow, PlacementsConfig } from '../_util/placements';
-import { cloneElement, isValidElement } from '../_util/reactNode';
+import { cloneElement, isValidElement, isFragment } from '../_util/reactNode';
 import type { LiteralUnion } from '../_util/type';
 
 export { AdjustOverflow, PlacementsConfig };
@@ -224,7 +224,7 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
   }
 
   const child = getDisabledCompatibleChildren(
-    isValidElement(children) ? children : <span>{children}</span>,
+    isValidElement(children) && !isFragment(children) ? children : <span>{children}</span>,
     prefixCls,
   );
   const childProps = child.props;

From 38aaec1156ebbcf8e624e8969be7f2fb51fd1038 Mon Sep 17 00:00:00 2001
From: yykoypj <601924094@qq.com>
Date: Wed, 17 Aug 2022 10:29:16 +0800
Subject: [PATCH 10/22] chore: save prod perf (#37088)

---
 components/tag/index.tsx | 13 ++++++++-----
 1 file changed, 8 insertions(+), 5 deletions(-)

diff --git a/components/tag/index.tsx b/components/tag/index.tsx
index 66fc0d6e87..e71bb3444b 100644
--- a/components/tag/index.tsx
+++ b/components/tag/index.tsx
@@ -52,11 +52,14 @@ const InternalTag: React.ForwardRefRenderFunction<HTMLSpanElement, TagProps> = (
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const [visible, setVisible] = React.useState(true);
 
-  warning(
-    !('visible' in props),
-    'Tag',
-    '`visible` will be removed in next major version, please use `visible && <Tag />` instead.',
-  );
+  // Warning for deprecated usage
+  if (process.env.NODE_ENV !== 'production') {
+    warning(
+      !('visible' in props),
+      'Tag',
+      '`visible` will be removed in next major version, please use `visible && <Tag />` instead.',
+    );
+  }
 
   React.useEffect(() => {
     if ('visible' in props) {

From aa97494625a741cb83030fd4b9585c15039e1562 Mon Sep 17 00:00:00 2001
From: yykoypj <601924094@qq.com>
Date: Wed, 17 Aug 2022 15:47:22 +0800
Subject: [PATCH 11/22] feat: change slide tooltip api (#37000)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: change slide tooltip api

* fix: deprecated warning

* refactor: remove boolean type support for Slider tooltip

* feat: update warning text

* chore: fix typo

* chore: save prod perf

* test: back of test case

* chore: clean up

* chore: fix test require

Co-authored-by: 二货机器人 <smith3816@gmail.com>
---
 .../__tests__/components.test.js              |   9 +-
 components/grid/demo/playground.md            |   6 +-
 .../__snapshots__/index.test.tsx.snap         |  50 -------
 components/slider/__tests__/index.test.tsx    | 140 ++++++++++++++----
 components/slider/demo/show-tooltip.md        |   6 +-
 components/slider/demo/tip-formatter.md       |   8 +-
 components/slider/index.en-US.md              |  26 ++--
 components/slider/index.tsx                   | 106 +++++++++----
 components/slider/index.zh-CN.md              |  23 ++-
 9 files changed, 240 insertions(+), 134 deletions(-)

diff --git a/components/config-provider/__tests__/components.test.js b/components/config-provider/__tests__/components.test.js
index fd34b92771..5c1732926e 100644
--- a/components/config-provider/__tests__/components.test.js
+++ b/components/config-provider/__tests__/components.test.js
@@ -470,9 +470,14 @@ describe('ConfigProvider', () => {
     testPair('Slider', props => {
       const myProps = { ...props };
       if (myProps.prefixCls) {
-        myProps.tooltipPrefixCls = `${myProps.prefixCls}-tooltip`;
+        return (
+          <Slider
+            tooltip={{ open: true, prefixCls: `${myProps.prefixCls}-tooltip` }}
+            {...myProps}
+          />
+        );
       }
-      return <Slider tooltipVisible {...myProps} />;
+      return <Slider tooltip={{ open: true }} {...myProps} />;
     });
 
     // Spin
diff --git a/components/grid/demo/playground.md b/components/grid/demo/playground.md
index 9b5cb94952..0692c38572 100644
--- a/components/grid/demo/playground.md
+++ b/components/grid/demo/playground.md
@@ -59,7 +59,7 @@ const App: React.FC = () => {
           onChange={setGutterKey}
           marks={gutters}
           step={null}
-          tipFormatter={value => value && gutters[value]}
+          tooltip={{ formatter: value => value && gutters[value] }}
         />
       </div>
       <span>Vertical Gutter (px): </span>
@@ -71,7 +71,7 @@ const App: React.FC = () => {
           onChange={setVgutterKey}
           marks={vgutters}
           step={null}
-          tipFormatter={value => value && vgutters[value]}
+          tooltip={{ formatter: value => value && vgutters[value] }}
         />
       </div>
       <span>Column Count:</span>
@@ -83,7 +83,7 @@ const App: React.FC = () => {
           onChange={setColCountKey}
           marks={colCounts}
           step={null}
-          tipFormatter={value => value && colCounts[value]}
+          tooltip={{ formatter: value => value && colCounts[value] }}
         />
       </div>
       <Row gutter={[gutters[gutterKey], vgutters[vgutterKey]]}>
diff --git a/components/slider/__tests__/__snapshots__/index.test.tsx.snap b/components/slider/__tests__/__snapshots__/index.test.tsx.snap
index f9f8e49f7c..932db4dc6a 100644
--- a/components/slider/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/slider/__tests__/__snapshots__/index.test.tsx.snap
@@ -80,56 +80,6 @@ exports[`Slider should render in RTL direction 1`] = `
 </div>
 `;
 
-exports[`Slider should show correct placement tooltip when set tooltipPlacement 1`] = `
-<div
-  class="ant-tooltip ant-slider-tooltip ant-zoom-down-appear ant-zoom-down-appear-prepare ant-zoom-down"
-  style="opacity: 0;"
->
-  <div
-    class="ant-tooltip-content"
-  >
-    <div
-      class="ant-tooltip-arrow"
-    >
-      <span
-        class="ant-tooltip-arrow-content"
-      />
-    </div>
-    <div
-      class="ant-tooltip-inner"
-      role="tooltip"
-    >
-      30
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Slider should show correct placement tooltip when set tooltipPlacement 2`] = `
-<div
-  class="ant-tooltip ant-slider-tooltip ant-zoom-down-leave ant-zoom-down-leave-start ant-zoom-down"
-  style="pointer-events: none;"
->
-  <div
-    class="ant-tooltip-content"
-  >
-    <div
-      class="ant-tooltip-arrow"
-    >
-      <span
-        class="ant-tooltip-arrow-content"
-      />
-    </div>
-    <div
-      class="ant-tooltip-inner"
-      role="tooltip"
-    >
-      30
-    </div>
-  </div>
-</div>
-`;
-
 exports[`Slider should show tooltip when hovering slider handler 1`] = `
 <div
   class="ant-tooltip ant-slider-tooltip ant-zoom-down-appear ant-zoom-down-appear-prepare ant-zoom-down"
diff --git a/components/slider/__tests__/index.test.tsx b/components/slider/__tests__/index.test.tsx
index 142de4376e..42c005bf8e 100644
--- a/components/slider/__tests__/index.test.tsx
+++ b/components/slider/__tests__/index.test.tsx
@@ -1,17 +1,42 @@
 import React from 'react';
 import Slider from '..';
+import type { SliderSingleProps } from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import { sleep, render, fireEvent } from '../../../tests/utils';
+import { render, fireEvent, act } from '../../../tests/utils';
 import ConfigProvider from '../../config-provider';
 import SliderTooltip from '../SliderTooltip';
+import type { TooltipProps } from '../../tooltip';
+
+function tooltipProps(): TooltipProps {
+  return (global as any).tooltipProps;
+}
+
+jest.mock('../../tooltip', () => {
+  const ReactReal = jest.requireActual('react');
+  const Tooltip = jest.requireActual('../../tooltip');
+  const TooltipComponent = Tooltip.default;
+  return ReactReal.forwardRef((props: TooltipProps, ref: any) => {
+    (global as any).tooltipProps = props;
+    return <TooltipComponent {...props} ref={ref} />;
+  });
+});
 
 describe('Slider', () => {
   mountTest(Slider);
   rtlTest(Slider);
   focusTest(Slider, { testLib: true });
 
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.clearAllTimers();
+    jest.useRealTimers();
+  });
+
   it('should show tooltip when hovering slider handler', () => {
     const { container } = render(<Slider defaultValue={30} />);
 
@@ -23,34 +48,58 @@ describe('Slider', () => {
     expect(document.querySelector('.ant-tooltip')).toMatchSnapshot();
   });
 
-  it('should show correct placement tooltip when set tooltipPlacement', () => {
-    const { container } = render(<Slider vertical defaultValue={30} tooltipPlacement="left" />);
+  describe('should show correct placement tooltip when set tooltipPlacement', () => {
+    function test(name: string, props: Partial<SliderSingleProps>) {
+      it(name, () => {
+        const { container } = render(<Slider vertical defaultValue={30} {...props} />);
 
-    fireEvent.mouseEnter(container.querySelector('.ant-slider-handle')!);
-    expect(document.querySelector('.ant-tooltip')).toMatchSnapshot();
+        fireEvent.mouseEnter(container.querySelector('.ant-slider-handle')!);
+        expect(tooltipProps().placement).toEqual('left');
+      });
+    }
 
-    fireEvent.mouseLeave(container.querySelector('.ant-slider-handle')!);
-    expect(document.querySelector('.ant-tooltip')).toMatchSnapshot();
+    test('new', { tooltip: { placement: 'left' } });
+    test('legacy', { tooltipPlacement: 'left' });
   });
 
-  it('when tooltipVisible is true, tooltip should show always, or should never show', () => {
-    const { container: container1 } = render(<Slider defaultValue={30} tooltipVisible />);
-    expect(
-      container1.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
-    ).toBeFalsy();
+  describe('when tooltip.open is true, tooltip should show always, or should never show', () => {
+    function test(
+      name: string,
+      showProps: Partial<SliderSingleProps>,
+      hideProps: Partial<SliderSingleProps>,
+    ) {
+      it(name, () => {
+        const { container, rerender } = render(<Slider defaultValue={30} {...showProps} />);
+        expect(
+          container.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
+        ).toBeFalsy();
 
-    fireEvent.mouseEnter(container1.querySelector('.ant-slider-handle')!);
-    expect(
-      container1.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
-    ).toBeFalsy();
+        fireEvent.mouseEnter(container.querySelector('.ant-slider-handle')!);
+        expect(
+          container.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
+        ).toBeFalsy();
 
-    fireEvent.click(container1.querySelector('.ant-slider-handle')!);
-    expect(
-      container1.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
-    ).toBeFalsy();
+        fireEvent.click(container.querySelector('.ant-slider-handle')!);
+        expect(
+          container.querySelector('.ant-tooltip-content')!.className.includes('ant-tooltip-hidden'),
+        ).toBeFalsy();
 
-    const { container: container2 } = render(<Slider defaultValue={30} tooltipVisible={false} />);
-    expect(container2.querySelector('.ant-tooltip-content')!).toBeNull();
+        // Force hide
+        rerender(<Slider defaultValue={30} {...hideProps} />);
+
+        act(() => {
+          jest.runAllTimers();
+        });
+        if (container.querySelector('.ant-zoom-down-leave-active')) {
+          fireEvent.animationEnd(container.querySelector('.ant-zoom-down-leave-active')!);
+        }
+
+        expect(container.querySelector('.ant-tooltip-hidden')!).toBeTruthy();
+      });
+    }
+
+    test('new', { tooltip: { open: true } }, { tooltip: { open: false } });
+    test('legacy', { tooltipVisible: true }, { tooltipVisible: false });
   });
 
   it('when step is null, thumb can only be slided to the specific mark', () => {
@@ -62,7 +111,12 @@ describe('Slider', () => {
     };
 
     const { container } = render(
-      <Slider marks={marks} defaultValue={intentionallyWrongValue} step={null} tooltipVisible />,
+      <Slider
+        marks={marks}
+        defaultValue={intentionallyWrongValue}
+        step={null}
+        tooltip={{ open: true }}
+      />,
     );
     expect(container.querySelector('.ant-slider-handle')!.getAttribute('aria-valuenow')).toBe('48');
   });
@@ -75,7 +129,7 @@ describe('Slider', () => {
     };
 
     const { container } = render(
-      <Slider marks={marks} defaultValue={49} step={1} tooltipVisible />,
+      <Slider marks={marks} defaultValue={49} step={1} tooltip={{ open: true }} />,
     );
     expect(container.querySelector('.ant-slider-handle')!.getAttribute('aria-valuenow')).toBe('49');
   });
@@ -88,7 +142,7 @@ describe('Slider', () => {
     };
 
     const { container } = render(
-      <Slider marks={marks} defaultValue={49} step={undefined} tooltipVisible />,
+      <Slider marks={marks} defaultValue={49} step={undefined} tooltip={{ open: true }} />,
     );
     expect(container.querySelector('.ant-slider-handle')!.getAttribute('aria-valuenow')).toBe('49');
   });
@@ -96,7 +150,7 @@ describe('Slider', () => {
   it('should render in RTL direction', () => {
     const { container } = render(
       <ConfigProvider direction="rtl">
-        <Slider defaultValue={30} tooltipVisible />
+        <Slider defaultValue={30} tooltip={{ open: true }} />
       </ConfigProvider>,
     );
     expect(container).toMatchSnapshot();
@@ -114,18 +168,46 @@ describe('Slider', () => {
       />,
     );
     ref.forcePopupAlign = jest.fn();
-    await sleep(20);
+    act(() => {
+      jest.runAllTimers();
+    });
     expect(ref.forcePopupAlign).toHaveBeenCalled();
   });
 
   it('tipFormatter should not crash with undefined value', () => {
     [undefined, null].forEach(value => {
-      render(<Slider value={value as any} tooltipVisible />);
+      render(<Slider value={value as any} tooltip={{ open: true }} />);
     });
   });
   it('step should not crash with undefined value', () => {
     [undefined, null].forEach(value => {
-      render(<Slider step={value} tooltipVisible />);
+      render(<Slider step={value} tooltip={{ open: true }} />);
     });
   });
+  it('deprecated warning', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { rerender } = render(<Slider tooltipPrefixCls="xxx" />);
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Slider] `tooltipPrefixCls` is deprecated which will be removed in next major version, please use `tooltip.prefixCls` instead.',
+    );
+    rerender(<Slider getTooltipPopupContainer={() => document.body} />);
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Slider] `getTooltipPopupContainer` is deprecated which will be removed in next major version, please use `tooltip.getPopupContainer` instead.',
+    );
+    rerender(<Slider tipFormatter={v => v} />);
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Slider] `tipFormatter` is deprecated which will be removed in next major version, please use `tooltip.formatter` instead.',
+    );
+    rerender(<Slider tooltipVisible />);
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Slider] `tooltipVisible` is deprecated which will be removed in next major version, please use `tooltip.open` instead.',
+    );
+    rerender(<Slider tooltipPlacement="left" />);
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Slider] `tooltipPlacement` is deprecated which will be removed in next major version, please use `tooltip.placement` instead.',
+    );
+
+    errSpy.mockRestore();
+  });
 });
diff --git a/components/slider/demo/show-tooltip.md b/components/slider/demo/show-tooltip.md
index 4928b7a8af..41d2b8d38b 100644
--- a/components/slider/demo/show-tooltip.md
+++ b/components/slider/demo/show-tooltip.md
@@ -7,17 +7,17 @@ title:
 
 ## zh-CN
 
-当 `tooltipVisible` 为 `true` 时，将始终显示 ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。
+当 `tooltip.open` 为 `true` 时，将始终显示 ToolTip；反之则始终不显示，即使在拖动、移入时也是如此。
 
 ## en-US
 
-When `tooltipVisible` is `true`, ToolTip will show always, or ToolTip will not show anyway, even if dragging or hovering.
+When `tooltip.open` is `true`, ToolTip will always show, or ToolTip will not show anyway, even if dragging or hovering.
 
 ```tsx
 import { Slider } from 'antd';
 import React from 'react';
 
-const App: React.FC = () => <Slider defaultValue={30} tooltipVisible />;
+const App: React.FC = () => <Slider defaultValue={30} tooltip={{ open: true }} />;
 
 export default App;
 ```
diff --git a/components/slider/demo/tip-formatter.md b/components/slider/demo/tip-formatter.md
index 567c35596f..2fb20df6c0 100644
--- a/components/slider/demo/tip-formatter.md
+++ b/components/slider/demo/tip-formatter.md
@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-使用 `tipFormatter` 可以格式化 `Tooltip` 的内容，设置 `tipFormatter={null}`，则隐藏 `Tooltip`。
+使用 `tooltip.formatter` 可以格式化 `Tooltip` 的内容，设置 `tooltip.formatter={null}`，则隐藏 `Tooltip`。
 
 ## en-US
 
-Use `tipFormatter` to format content of `Tooltip`. If `tipFormatter` is null, hide it.
+Use `tooltip.formatter` to format content of `Tooltip`. If `tooltip.formatter` is null, hide it.
 
 ```tsx
 import { Slider } from 'antd';
@@ -21,8 +21,8 @@ const formatter = (value: number) => `${value}%`;
 
 const App: React.FC = () => (
   <>
-    <Slider tipFormatter={formatter} />
-    <Slider tipFormatter={null} />
+    <Slider tooltip={{ formatter }} />
+    <Slider tooltip={{ formatter: null }} />
   </>
 );
 
diff --git a/components/slider/index.en-US.md b/components/slider/index.en-US.md
index 32a16bebcb..d914f72eb4 100644
--- a/components/slider/index.en-US.md
+++ b/components/slider/index.en-US.md
@@ -19,7 +19,6 @@ To input a value in a range.
 | defaultValue | The default value of slider. When `range` is false, use number, otherwise, use \[number, number] | number \| \[number, number] | 0 \| \[0, 0] |  |
 | disabled | If true, the slider will not be interactable | boolean | false |  |
 | dots | Whether the thumb can drag over tick only | boolean | false |  |
-| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body | (triggerNode) => HTMLElement | () => document.body |  |
 | included | Make effect when `marks` not null, true means containment and false means coordinative | boolean | true |  |
 | marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style | object | { number: ReactNode } \| { number: { style: CSSProperties, label: ReactNode } } |  |
 | max | The maximum value the slider can slide to | number | 100 |  |
@@ -27,9 +26,7 @@ To input a value in a range.
 | range | Dual thumb mode | boolean | false |  |
 | reverse | Reverse the component | boolean | false |  |
 | step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be null | number \| null | 1 |  |
-| tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null | value => ReactNode \| null | IDENTITY |  |
-| tooltipPlacement | Set Tooltip display position. Ref [Tooltip](/components/tooltip/) | string | - |  |
-| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering | boolean | - |  |
+| tooltip | The tooltip relate props | [tooltip](#tooltip) | - | 4.23.0 |
 | value | The value of slider. When `range` is false, use number, otherwise, use \[number, number] | number \| \[number, number] | - |  |
 | vertical | If true, the slider will be vertical | boolean | false |  |
 | onAfterChange | Fire when onmouseup is fired | (value) => void | - |  |
@@ -39,13 +36,22 @@ To input a value in a range.
 
 ### range
 
-| Property | Description | Type | Default | Version |
+| Property       | Description                     | Type    | Default | Version |
+| -------------- | ------------------------------- | ------- | ------- | ------- |
+| draggableTrack | Whether range track can be drag | boolean | false   | 4.10.0  |
+
+### tooltip
+
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| draggableTrack | Whether range track can be drag | boolean | false | 4.10.0 |
+| open | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering | boolean | - | 4.23.0 |
+| placement | Set Tooltip display position. Ref [Tooltip](/components/tooltip/) | string | - | 4.23.0 |
+| getPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
+| formatter | Slider will pass its value to `formatter`, and display its value in Tooltip, and hide Tooltip when return value is null | value => ReactNode \| null | IDENTITY | 4.23.0 |
 
 ## Methods
 
-| Name | Description | Version |
-| --- | --- | --- |
-| blur() | Remove focus |  |
-| focus() | Get focus |  |
+| Name    | Description  | Version |
+| ------- | ------------ | ------- |
+| blur()  | Remove focus |         |
+| focus() | Get focus    |         |
diff --git a/components/slider/index.tsx b/components/slider/index.tsx
index 38f437b8bd..48101f507b 100644
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@@ -4,6 +4,7 @@ import RcSlider from 'rc-slider';
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 import type { TooltipPlacement } from '../tooltip';
+import warning from '../_util/warning';
 import SliderTooltip from './SliderTooltip';
 
 export type SliderMarks = RcSliderProps['marks'];
@@ -20,8 +21,20 @@ export type HandleGeneratorFn = (config: {
   info: HandleGeneratorInfo;
 }) => React.ReactElement;
 
+export interface SliderTooltipProps {
+  prefixCls?: string;
+  open?: boolean;
+  placement?: TooltipPlacement;
+  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
+  formatter?: null | ((value?: number) => React.ReactNode);
+}
+
 export interface SliderBaseProps {
   prefixCls?: string;
+  /**
+   * @deprecated `tooltipPrefixCls` is deprecated which will be removed in next major version.
+   *   Please use `tooltip.prefixCls` instead.
+   */
   tooltipPrefixCls?: string;
   reverse?: boolean;
   min?: number;
@@ -32,12 +45,29 @@ export interface SliderBaseProps {
   included?: boolean;
   disabled?: boolean;
   vertical?: boolean;
+  /**
+   * @deprecated `tipFormatter` is deprecated which will be removed in next major version. Please
+   *   use `tooltip.formatter` instead.
+   */
   tipFormatter?: null | ((value?: number) => React.ReactNode);
   className?: string;
   id?: string;
   style?: React.CSSProperties;
+  /**
+   * @deprecated `tooltipVisible` is deprecated which will be removed in next major version. Please
+   *   use `tooltip.open` instead.
+   */
   tooltipVisible?: boolean;
+  /**
+   * @deprecated `tooltipPlacement` is deprecated which will be removed in next major version.
+   *   Please use `tooltip.placement` instead.
+   */
   tooltipPlacement?: TooltipPlacement;
+  tooltip?: SliderTooltipProps;
+  /**
+   * @deprecated `getTooltipPopupContainer` is deprecated which will be removed in next major
+   *   version. Please use `tooltip.getPopupContainer` instead.
+   */
   getTooltipPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
   autoFocus?: boolean;
 }
@@ -66,15 +96,15 @@ interface SliderRange {
   draggableTrack?: boolean;
 }
 
-export type Visibles = { [index: number]: boolean };
+export type Opens = { [index: number]: boolean };
 
 const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
   (props, ref: any) => {
     const { getPrefixCls, direction, getPopupContainer } = React.useContext(ConfigContext);
-    const [visibles, setVisibles] = React.useState<Visibles>({});
+    const [opens, setOpens] = React.useState<Opens>({});
 
-    const toggleTooltipVisible = (index: number, visible: boolean) => {
-      setVisibles((prev: Visibles) => ({ ...prev, [index]: visible }));
+    const toggleTooltipOpen = (index: number, open: boolean) => {
+      setOpens((prev: Opens) => ({ ...prev, [index]: open }));
     };
 
     const getTooltipPlacement = (tooltipPlacement?: TooltipPlacement, vertical?: boolean) => {
@@ -87,15 +117,8 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
       return direction === 'rtl' ? 'left' : 'right';
     };
 
-    const {
-      prefixCls: customizePrefixCls,
-      tooltipPrefixCls: customizeTooltipPrefixCls,
-      range,
-      className,
-      ...restProps
-    } = props;
+    const { prefixCls: customizePrefixCls, range, className, ...restProps } = props;
     const prefixCls = getPrefixCls('slider', customizePrefixCls);
-    const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
     const cls = classNames(className, {
       [`${prefixCls}-rtl`]: direction === 'rtl',
     });
@@ -114,27 +137,66 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
       return typeof range === 'object' ? [true, range.draggableTrack] : [true, false];
     }, [range]);
 
+    // Warning for deprecated usage
+    if (process.env.NODE_ENV !== 'production') {
+      [
+        ['tooltipPrefixCls', 'prefixCls'],
+        ['getTooltipPopupContainer', 'getPopupContainer'],
+        ['tipFormatter', 'formatter'],
+        ['tooltipPlacement', 'placement'],
+        ['tooltipVisible', 'open'],
+      ].forEach(([deprecatedName, newName]) => {
+        warning(
+          !(deprecatedName in props),
+          'Slider',
+          `\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`tooltip.${newName}\` instead.`,
+        );
+      });
+    }
+
     const handleRender: RcSliderProps['handleRender'] = (node, info) => {
       const { index, dragging } = info;
 
       const rootPrefixCls = getPrefixCls();
-      const { tipFormatter, tooltipVisible, tooltipPlacement, getTooltipPopupContainer, vertical } =
-        props;
+      const { tooltip = {}, vertical } = props;
 
-      const isTipFormatter = tipFormatter ? visibles[index] || dragging : false;
-      const visible = tooltipVisible || (tooltipVisible === undefined && isTipFormatter);
+      const tooltipProps: SliderTooltipProps = {
+        formatter:
+          props.tipFormatter ??
+          // eslint-disable-next-line func-names
+          function (value) {
+            return typeof value === 'number' ? value.toString() : '';
+          },
+        open: props.tooltipVisible,
+        placement: props.tooltipPlacement,
+        getPopupContainer: props.getTooltipPopupContainer,
+        ...tooltip,
+      };
+
+      const {
+        open: tooltipOpen,
+        placement: tooltipPlacement,
+        getPopupContainer: getTooltipPopupContainer,
+        prefixCls: customizeTooltipPrefixCls,
+        formatter: tipFormatter,
+      } = tooltipProps;
+
+      const isTipFormatter = tipFormatter ? opens[index] || dragging : false;
+      const open = tooltipOpen || (tooltipOpen === undefined && isTipFormatter);
 
       const passedProps = {
         ...node.props,
-        onMouseEnter: () => toggleTooltipVisible(index, true),
-        onMouseLeave: () => toggleTooltipVisible(index, false),
+        onMouseEnter: () => toggleTooltipOpen(index, true),
+        onMouseLeave: () => toggleTooltipOpen(index, false),
       };
 
+      const tooltipPrefixCls = getPrefixCls('tooltip', customizeTooltipPrefixCls);
+
       return (
         <SliderTooltip
           prefixCls={tooltipPrefixCls}
           title={tipFormatter ? tipFormatter(info.value) : ''}
-          visible={visible}
+          visible={open}
           placement={getTooltipPlacement(tooltipPlacement, vertical)}
           transitionName={`${rootPrefixCls}-zoom-down`}
           key={index}
@@ -165,10 +227,4 @@ if (process.env.NODE_ENV !== 'production') {
   Slider.displayName = 'Slider';
 }
 
-Slider.defaultProps = {
-  tipFormatter(value: number) {
-    return typeof value === 'number' ? value.toString() : '';
-  },
-};
-
 export default Slider;
diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md
index e9bcf82365..d8bee332b3 100644
--- a/components/slider/index.zh-CN.md
+++ b/components/slider/index.zh-CN.md
@@ -28,9 +28,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
 | range | 双滑块模式 | boolean \| [range](#range) | false |  |
 | reverse | 反向坐标轴 | boolean | false |  |
 | step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 null，此时 Slider 的可选值仅有 marks 标出来的部分 | number \| null | 1 |  |
-| tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip | value => ReactNode \| null | IDENTITY |  |
-| tooltipPlacement | 设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/) | string | - |  |
-| tooltipVisible | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - |  |
+| tooltip | 设置 Tooltip 相关属性 | [tooltip](#tooltip) | - | 4.23.0 |
 | value | 设置当前取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | - |  |
 | vertical | 值为 true 时，Slider 为垂直方向 | boolean | false |  |
 | onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 | (value) => void | - |  |
@@ -38,13 +36,22 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
 
 ### range
 
+| 参数           | 说明                 | 类型    | 默认值 | 版本   |
+| -------------- | -------------------- | ------- | ------ | ------ |
+| draggableTrack | 范围刻度是否可被拖拽 | boolean | false  | 4.10.0 |
+
+### tooltip
+
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| draggableTrack | 范围刻度是否可被拖拽 | boolean | false | 4.10.0 |
+| open | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - | 4.23.0 |
+| placement | 设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/) | string | - | 4.23.0 |
+| getPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body | 4.23.0 |
+| formatter | Slider 会把当前值传给 `formatter`，并在 Tooltip 中显示 `formatter` 的返回值，若为 null，则隐藏 Tooltip | value => ReactNode \| null | IDENTITY | 4.23.0 |
 
 ## 方法
 
-| 名称 | 描述 | 版本 |
-| --- | --- | --- |
-| blur() | 移除焦点 |  |
-| focus() | 获取焦点 |  |
+| 名称    | 描述     | 版本 |
+| ------- | -------- | ---- |
+| blur()  | 移除焦点 |      |
+| focus() | 获取焦点 |      |

From baedb702d01265feeb8acc2c9acff2ec45a123d1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Thu, 18 Aug 2022 11:06:13 +0800
Subject: [PATCH 12/22] chore: fix test ts

---
 components/time-picker/__tests__/index.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/time-picker/__tests__/index.test.tsx b/components/time-picker/__tests__/index.test.tsx
index 4412245d6f..034e244d87 100644
--- a/components/time-picker/__tests__/index.test.tsx
+++ b/components/time-picker/__tests__/index.test.tsx
@@ -89,14 +89,14 @@ describe('TimePicker', () => {
   });
 
   it('RangePicker should show warning when use dropdownClassName', () => {
-    mount(<TimePicker.RangePicker dropdownClassName="myCustomClassName" />);
+    render(<TimePicker.RangePicker dropdownClassName="myCustomClassName" />);
     expect(errorSpy).toHaveBeenCalledWith(
       'Warning: [antd: RangePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
     );
   });
 
   it('TimePicker should show warning when use dropdownClassName', () => {
-    mount(<TimePicker dropdownClassName="myCustomClassName" />);
+    render(<TimePicker dropdownClassName="myCustomClassName" />);
     expect(errorSpy).toHaveBeenCalledWith(
       'Warning: [antd: TimePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
     );

From f0e4963187a4fbe0103c3fa24ceca4b4584d1973 Mon Sep 17 00:00:00 2001
From: yykoypj <601924094@qq.com>
Date: Mon, 22 Aug 2022 11:19:53 +0800
Subject: [PATCH 13/22] feat: switch filterDropdownVisible to
 filterDropdownOpen for Table (#37026)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: table filterDropdownVisible to filterDropdownOpen

* chore: adjust prosp pass

* test: Update test case

Co-authored-by: 二货机器人 <smith3816@gmail.com>
---
 .../__tests__/components.test.js              |  2 +-
 components/table/Table.tsx                    | 11 +++
 .../table/__tests__/Table.filter.test.js      | 84 +++++++++++--------
 .../__tests__/Table.rowSelection.test.js      |  2 +-
 components/table/demo/custom-filter-panel.md  |  2 +-
 .../table/hooks/useFilter/FilterDropdown.tsx  | 12 ++-
 components/table/index.en-US.md               |  4 +-
 components/table/index.zh-CN.md               |  4 +-
 components/table/interface.tsx                | 10 +++
 9 files changed, 84 insertions(+), 47 deletions(-)

diff --git a/components/config-provider/__tests__/components.test.js b/components/config-provider/__tests__/components.test.js
index 5c1732926e..7c339ba653 100644
--- a/components/config-provider/__tests__/components.test.js
+++ b/components/config-provider/__tests__/components.test.js
@@ -524,7 +524,7 @@ describe('ConfigProvider', () => {
               ],
             },
           ],
-          filterDropdownVisible: true,
+          filterDropdownOpen: true,
           onFilter: (value, record) => record.name.indexOf(value) === 0,
           sorter: (a, b) => a.name.length - b.name.length,
         },
diff --git a/components/table/Table.tsx b/components/table/Table.tsx
index 212536d5b2..2758445de3 100644
--- a/components/table/Table.tsx
+++ b/components/table/Table.tsx
@@ -144,6 +144,17 @@ function InternalTable<RecordType extends object = any>(
     '`index` parameter of `rowKey` function is deprecated. There is no guarantee that it will work as expected.',
   );
 
+  [
+    ['filterDropdownVisible', 'filterDropdownOpen'],
+    ['onFilterDropdownVisibleChange', 'onFilterDropdownOpenChange'],
+  ].forEach(([deprecatedName, newName]) => {
+    warning(
+      !(deprecatedName in props),
+      'Table',
+      `\`${deprecatedName}\` is deprecated which will be removed in next major version.Please use \`${newName}\` instead. `,
+    );
+  });
+
   const baseColumns = React.useMemo(
     () => columns || (convertChildrenToColumns(children) as ColumnsType<RecordType>),
     [columns, children],
diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js
index 20d85e6bef..51942a64f4 100644
--- a/components/table/__tests__/Table.filter.test.js
+++ b/components/table/__tests__/Table.filter.test.js
@@ -242,32 +242,39 @@ describe('Table.filter', () => {
     expect(renderSelectedKeys).toEqual([43]);
   });
 
-  it('can be controlled by filterDropdownVisible', () => {
-    const { container, rerender } = render(
-      createTable({
-        columns: [
-          {
-            ...column,
-            filterDropdownVisible: true,
-          },
-        ],
-      }),
-    );
+  describe('filterDropdownOpen & filterDropdownVisible', () => {
+    function test(propName) {
+      it(`can be controlled by ${propName}`, () => {
+        const { container, rerender } = render(
+          createTable({
+            columns: [
+              {
+                ...column,
+                filterDropdownOpen: true,
+              },
+            ],
+          }),
+        );
 
-    expect(container.querySelector('.ant-dropdown-open')).toBeTruthy();
+        expect(container.querySelector('.ant-dropdown-open')).toBeTruthy();
 
-    rerender(
-      createTable({
-        columns: [
-          {
-            ...column,
-            filterDropdownVisible: false,
-          },
-        ],
-      }),
-    );
+        rerender(
+          createTable({
+            columns: [
+              {
+                ...column,
+                filterDropdownOpen: false,
+              },
+            ],
+          }),
+        );
 
-    expect(container.querySelector('.ant-dropdown-open')).toBeFalsy();
+        expect(container.querySelector('.ant-dropdown-open')).toBeFalsy();
+      });
+    }
+
+    test('filterDropdownOpen');
+    test('filterDropdownVisible');
   });
 
   it('if the filter is visible it should ignore the selectedKeys changes', () => {
@@ -282,7 +289,7 @@ describe('Table.filter', () => {
       columns: [
         {
           ...myColumn,
-          filterDropdownVisible: true,
+          filterDropdownOpen: true,
         },
       ],
     };
@@ -318,19 +325,22 @@ describe('Table.filter', () => {
   });
 
   it('fires change event when visible change', () => {
-    const handleChange = jest.fn();
+    const onFilterDropdownOpenChange = jest.fn();
+    const onFilterDropdownVisibleChange = jest.fn();
     const { container } = render(
       createTable({
         columns: [
           {
             ...column,
-            onFilterDropdownVisibleChange: handleChange,
+            onFilterDropdownOpenChange,
+            onFilterDropdownVisibleChange,
           },
         ],
       }),
     );
     fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    expect(handleChange).toHaveBeenCalledWith(true);
+    expect(onFilterDropdownOpenChange).toHaveBeenCalledWith(true);
+    expect(onFilterDropdownVisibleChange).toHaveBeenCalledWith(true);
   });
 
   it('can be controlled by filteredValue', () => {
@@ -1179,7 +1189,7 @@ describe('Table.filter', () => {
         columns: [
           {
             ...column,
-            filterDropdownVisible: true,
+            filterDropdownOpen: true,
           },
         ],
         getPopupContainer,
@@ -1197,7 +1207,7 @@ describe('Table.filter', () => {
           columns: [
             {
               ...column,
-              filterDropdownVisible: true,
+              filterDropdownOpen: true,
             },
           ],
         })}
@@ -1442,7 +1452,7 @@ describe('Table.filter', () => {
         columns: [
           {
             ...column,
-            filterDropdownVisible: true,
+            filterDropdownOpen: true,
             filterSearch: true,
             filterMode: 'tree',
           },
@@ -1690,8 +1700,8 @@ describe('Table.filter', () => {
   });
 
   // https://github.com/ant-design/ant-design/issues/30454
-  it('should not trigger onFilterDropdownVisibleChange when call confirm({ closeDropdown: false })', () => {
-    const onFilterDropdownVisibleChange = jest.fn();
+  it('should not trigger onFilterDropdownOpenChange when call confirm({ closeDropdown: false })', () => {
+    const onFilterDropdownOpenChange = jest.fn();
     const { container } = render(
       createTable({
         columns: [
@@ -1714,21 +1724,21 @@ describe('Table.filter', () => {
                 </button>
               </>
             ),
-            onFilterDropdownVisibleChange,
+            onFilterDropdownOpenChange,
           },
         ],
       }),
     );
 
     fireEvent.click(container.querySelector('.ant-dropdown-trigger'));
-    expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(1);
+    expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(1);
 
     fireEvent.click(container.querySelector('#confirm-only'));
-    expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(1);
+    expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(1);
 
     fireEvent.click(container.querySelector('#confirm-and-close'));
-    expect(onFilterDropdownVisibleChange).toHaveBeenCalledTimes(2);
-    expect(onFilterDropdownVisibleChange).toHaveBeenLastCalledWith(false);
+    expect(onFilterDropdownOpenChange).toHaveBeenCalledTimes(2);
+    expect(onFilterDropdownOpenChange).toHaveBeenLastCalledWith(false);
   });
 
   // Warning: An update to Item ran an effect, but was not wrapped in act(...).
diff --git a/components/table/__tests__/Table.rowSelection.test.js b/components/table/__tests__/Table.rowSelection.test.js
index a4e5511fce..f1c547257f 100644
--- a/components/table/__tests__/Table.rowSelection.test.js
+++ b/components/table/__tests__/Table.rowSelection.test.js
@@ -880,7 +880,7 @@ describe('Table.rowSelection', () => {
             value: 'Lucy',
           },
         ],
-        filterDropdownVisible: true,
+        filterDropdownOpen: true,
         onFilter: (value, record) => record.name.indexOf(value) === 0,
       },
     ];
diff --git a/components/table/demo/custom-filter-panel.md b/components/table/demo/custom-filter-panel.md
index a1fb312bf2..1bfea3203b 100644
--- a/components/table/demo/custom-filter-panel.md
+++ b/components/table/demo/custom-filter-panel.md
@@ -132,7 +132,7 @@ const App: React.FC = () => {
         .toString()
         .toLowerCase()
         .includes((value as string).toLowerCase()),
-    onFilterDropdownVisibleChange: visible => {
+    onFilterDropdownOpenChange: visible => {
       if (visible) {
         setTimeout(() => searchInput.current?.select(), 100);
       }
diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx
index 47edc7a070..7a2694461a 100644
--- a/components/table/hooks/useFilter/FilterDropdown.tsx
+++ b/components/table/hooks/useFilter/FilterDropdown.tsx
@@ -137,6 +137,8 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
   } = props;
 
   const {
+    filterDropdownOpen,
+    onFilterDropdownOpenChange,
     filterDropdownVisible,
     onFilterDropdownVisibleChange,
     filterResetToDefaultFilteredValue,
@@ -150,12 +152,16 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
   );
   const triggerVisible = (newVisible: boolean) => {
     setVisible(newVisible);
+    onFilterDropdownOpenChange?.(newVisible);
     onFilterDropdownVisibleChange?.(newVisible);
   };
 
-  const mergedVisible =
-    typeof filterDropdownVisible === 'boolean' ? filterDropdownVisible : visible;
-
+  let mergedVisible: boolean;
+  if (typeof filterDropdownOpen === 'boolean') {
+    mergedVisible = filterDropdownOpen;
+  } else {
+    mergedVisible = typeof filterDropdownVisible === 'boolean' ? filterDropdownVisible : visible;
+  }
   // ===================== Select Keys =====================
   const propFilteredKeys = filterState?.filteredKeys;
   const [getFilteredKeysSync, setFilteredKeysSync] = useSyncState(propFilteredKeys || []);
diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md
index c2de4149ee..af32d69511 100644
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@@ -130,7 +130,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 | defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - |  |
 | ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 |
 | filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - |  |
-| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |  |
+| filterDropdownOpen | Whether `filterDropdown` is visible | boolean | - | 4.23.0 |
 | filtered | Whether the `dataSource` is filtered | boolean | false |  |
 | filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - |  |
 | filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - |  |
@@ -151,7 +151,7 @@ One of the Table `columns` prop for describing the table's columns, Column has t
 | width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - |  |
 | onCell | Set props on per cell | function(record, rowIndex) | - |  |
 | onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - |  |
-| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - |  |
+| onFilterDropdownOpenChange | Callback executed when `filterDropdownOpen` is changed | function(open) {} | - | 4.23.0 |
 | onHeaderCell | Set props on per header cell | function(column) | - |  |
 
 ### ColumnGroup
diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md
index 902b874e5d..76c1464b15 100644
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@@ -131,7 +131,7 @@ const columns = [
 | defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - |  |
 | ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
 | filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: [FilterDropdownProps](https://github.com/ant-design/ant-design/blob/ecc54dda839619e921c0ace530408871f0281c2a/components/table/interface.tsx#L79)) => ReactNode | - |  |
-| filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |  |
+| filterDropdownOpen | 用于控制自定义筛选菜单是否可见 | boolean | - | 4.23.0 |
 | filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false |  |
 | filteredValue | 筛选的受控属性，外界可用此控制列的筛选状态，值为已筛选的 value 数组 | string\[] | - |  |
 | filterIcon | 自定义 filter 图标。 | ReactNode \| (filtered: boolean) => ReactNode | false |  |
@@ -152,7 +152,7 @@ const columns = [
 | width | 列宽度（[指定了也不生效？](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)） | string \| number | - |  |
 | onCell | 设置单元格属性 | function(record, rowIndex) | - |  |
 | onFilter | 本地模式下，确定筛选的运行函数 | function | - |  |
-| onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |  |
+| onFilterDropdownOpenChange | 自定义筛选菜单可见变化时调用 | function(open) {} | - | 4.23.0 |
 | onHeaderCell | 设置头部单元格属性 | function(column) | - |  |
 
 ### ColumnGroup
diff --git a/components/table/interface.tsx b/components/table/interface.tsx
index 9cb226d643..cb82f6bc54 100644
--- a/components/table/interface.tsx
+++ b/components/table/interface.tsx
@@ -114,8 +114,18 @@ export interface ColumnType<RecordType> extends Omit<RcColumnType<RecordType>, '
   filterMode?: 'menu' | 'tree';
   filterSearch?: FilterSearchType;
   onFilter?: (value: string | number | boolean, record: RecordType) => boolean;
+  /**
+   * @deprecated `filterDropdownVisible` is deprecated which will be removed in next major version.
+   *   Please use `filterDropdownOpen` instead.
+   */
   filterDropdownVisible?: boolean;
+  filterDropdownOpen?: boolean;
+  /**
+   * @deprecated `onFilterDropdownVisibleChange` is deprecated which will be removed in next major
+   *   version. Please use `onFilterDropdownOpenChange` instead.
+   */
   onFilterDropdownVisibleChange?: (visible: boolean) => void;
+  onFilterDropdownOpenChange?: (open: boolean) => void;
   filterResetToDefaultFilteredValue?: boolean;
 
   // Responsive

From 91d32ea258b54b17dbc9419d53f5302630e81e82 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 23 Aug 2022 14:14:30 +0800
Subject: [PATCH 14/22] test: merge missing test case

---
 .../date-picker/__tests__/DatePicker.test.js  | 248 ------------------
 .../date-picker/__tests__/DatePicker.test.tsx |  14 +
 2 files changed, 14 insertions(+), 248 deletions(-)
 delete mode 100644 components/date-picker/__tests__/DatePicker.test.js

diff --git a/components/date-picker/__tests__/DatePicker.test.js b/components/date-picker/__tests__/DatePicker.test.js
deleted file mode 100644
index b782ef3989..0000000000
--- a/components/date-picker/__tests__/DatePicker.test.js
+++ /dev/null
@@ -1,248 +0,0 @@
-import { mount } from 'enzyme';
-import MockDate from 'mockdate';
-import moment from 'moment';
-import React from 'react';
-import DatePicker from '..';
-import focusTest from '../../../tests/shared/focusTest';
-
-describe('DatePicker', () => {
-  const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-
-  focusTest(DatePicker, { refFocus: true });
-
-  beforeEach(() => {
-    MockDate.set(moment('2016-11-22').valueOf());
-  });
-
-  afterEach(() => {
-    MockDate.reset();
-    errorSpy.mockReset();
-  });
-
-  afterAll(() => {
-    errorSpy.mockRestore();
-  });
-
-  it('prop locale should works', () => {
-    const locale = {
-      lang: {
-        locale: 'mk',
-        placeholder: 'Избери дата',
-        rangePlaceholder: ['Начална дата', 'Крайна дата'],
-        today: 'Днес',
-        now: 'Сега',
-        backToToday: 'Към днес',
-        ok: 'Добре',
-        clear: 'Изчистване',
-        month: 'Месец',
-        year: 'Година',
-        timeSelect: 'Избор на час',
-        dateSelect: 'Избор на дата',
-        monthSelect: 'Избор на месец',
-        yearSelect: 'Избор на година',
-        decadeSelect: 'Десетилетие',
-        previousMonth: 'Предишен месец (PageUp)',
-        nextMonth: 'Следващ месец (PageDown)',
-        previousYear: 'Последна година (Control + left)',
-        nextYear: 'Следваща година (Control + right)',
-        previousDecade: 'Предишно десетилетие',
-        nextDecade: 'Следващо десетилетие',
-        previousCentury: 'Последен век',
-        nextCentury: 'Следващ век',
-        yearFormat: 'YYYY',
-        dateFormat: 'D M YYYY',
-        dayFormat: 'D',
-        dateTimeFormat: 'D M YYYY HH:mm:ss',
-        monthBeforeYear: true,
-      },
-      timePickerLocale: {
-        placeholder: 'Избор на час',
-      },
-    };
-    const birthday = moment('2000-01-01', 'YYYY-MM-DD');
-    const wrapper = mount(<DatePicker open locale={locale} value={birthday} />);
-    expect(wrapper.render()).toMatchSnapshot();
-  });
-
-  it('disabled date', () => {
-    const disabledDate = current => current && current < moment().endOf('day');
-    const wrapper = mount(<DatePicker disabledDate={disabledDate} open />);
-    expect(wrapper.render()).toMatchSnapshot();
-  });
-
-  it('placeholder', () => {
-    const wrapper = mount(<DatePicker placeholder={undefined} />);
-    expect(wrapper.find('input').props().placeholder).toEqual('Select date');
-  });
-
-  it('showTime={{ showHour: true, showMinute: true }}', () => {
-    const wrapper = mount(
-      <DatePicker
-        defaultValue={moment()}
-        showTime={{ showHour: true, showMinute: true }}
-        format="YYYY-MM-DD"
-        open
-      />,
-    );
-    expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(24);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-  });
-
-  it('showTime={{ showHour: true, showSecond: true }}', () => {
-    const wrapper = mount(
-      <DatePicker
-        defaultValue={moment()}
-        showTime={{ showHour: true, showSecond: true }}
-        format="YYYY-MM-DD"
-        open
-      />,
-    );
-    expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(24);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-  });
-
-  it('showTime={{ showMinute: true, showSecond: true }}', () => {
-    const wrapper = mount(
-      <DatePicker
-        defaultValue={moment()}
-        showTime={{ showMinute: true, showSecond: true }}
-        format="YYYY-MM-DD"
-        open
-      />,
-    );
-    expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(2);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-  });
-  it('showTime should work correctly when format is custom function', () => {
-    const wrapper = mount(
-      <DatePicker defaultValue={moment()} showTime format={val => val.format('YYYY-MM-DD')} open />,
-    );
-    const input = wrapper.find('input').simulate('mousedown');
-    expect(input.simulate.bind(input, 'focus')).not.toThrowError();
-  });
-
-  it('12 hours', () => {
-    const wrapper = mount(
-      <DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss A" open />,
-    );
-    expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(4);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(12);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(2).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(3).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(2);
-  });
-
-  it('24 hours', () => {
-    const wrapper = mount(
-      <DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss" open />,
-    );
-    expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(3);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(0).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(24);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(1).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-    expect(
-      wrapper.find('.ant-picker-time-panel-column').at(2).find('.ant-picker-time-panel-cell')
-        .length,
-    ).toBe(60);
-  });
-
-  it('DatePicker should show warning when use dropdownClassName', () => {
-    mount(<DatePicker dropdownClassName="myCustomClassName" />);
-    expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: [antd: DatePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
-    );
-  });
-
-  it('RangePicker should show warning when use dropdownClassName', () => {
-    mount(<DatePicker.RangePicker dropdownClassName="myCustomClassName" />);
-    expect(errorSpy).toHaveBeenCalledWith(
-      'Warning: [antd: RangePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
-    );
-  });
-
-  it('DatePicker.RangePicker with defaultPickerValue and showTime', () => {
-    const startDate = moment('1982-02-12');
-    const endDate = moment('1982-02-22');
-
-    const wrapper = mount(
-      <DatePicker.RangePicker defaultPickerValue={[startDate, endDate]} showTime open />,
-    );
-
-    const month = wrapper.find('.ant-picker-header-view .ant-picker-month-btn').text();
-    const year = wrapper.find('.ant-picker-header-view .ant-picker-year-btn').text();
-
-    expect(month).toBe(startDate.format('MMM'));
-    expect(year).toBe(startDate.format('YYYY'));
-    expect(wrapper.find('.ant-picker-time-panel').length).toBe(1);
-  });
-
-  it('placement api work correctly ', () => {
-    const popupAlignDefault = (points = ['tl', 'bl'], offset = [0, 4]) => ({
-      points,
-      offset,
-      overflow: {
-        adjustX: 1,
-        adjustY: 1,
-      },
-    });
-
-    const wrapper = mount(
-      <DatePicker.RangePicker defaultValue={moment()} placement="bottomLeft" />,
-    );
-    expect(wrapper.find('Trigger').prop('popupAlign')).toEqual(popupAlignDefault(['tl', 'bl']));
-    wrapper.setProps({
-      placement: 'bottomRight',
-    });
-    expect(wrapper.find('Trigger').prop('popupAlign')).toEqual(popupAlignDefault(['tr', 'br']));
-    wrapper.setProps({
-      placement: 'topLeft',
-    });
-    expect(wrapper.find('Trigger').prop('popupAlign')).toEqual(
-      popupAlignDefault(['bl', 'tl'], [0, -4]),
-    );
-    wrapper.setProps({
-      placement: 'topRight',
-    });
-    expect(wrapper.find('Trigger').prop('popupAlign')).toEqual(
-      popupAlignDefault(['br', 'tr'], [0, -4]),
-    );
-  });
-});
diff --git a/components/date-picker/__tests__/DatePicker.test.tsx b/components/date-picker/__tests__/DatePicker.test.tsx
index 7168ebf74b..904fa457c3 100644
--- a/components/date-picker/__tests__/DatePicker.test.tsx
+++ b/components/date-picker/__tests__/DatePicker.test.tsx
@@ -221,6 +221,20 @@ describe('DatePicker', () => {
     ).toBe(60);
   });
 
+  it('DatePicker should show warning when use dropdownClassName', () => {
+    render(<DatePicker dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: DatePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
+  it('RangePicker should show warning when use dropdownClassName', () => {
+    render(<DatePicker.RangePicker dropdownClassName="myCustomClassName" />);
+    expect(errorSpy).toHaveBeenCalledWith(
+      'Warning: [antd: RangePicker] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
+    );
+  });
+
   it('DatePicker.RangePicker with defaultPickerValue and showTime', () => {
     const startDate = moment('1982-02-12');
     const endDate = moment('1982-02-22');

From 1919b5f7d967a00b8197ae1cd36529a8b4a5e0a9 Mon Sep 17 00:00:00 2001
From: yykoypj <601924094@qq.com>
Date: Tue, 23 Aug 2022 14:52:37 +0800
Subject: [PATCH 15/22] feat: switch visible to open for Drawer (#37047)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: 二货机器人 <smith3816@gmail.com>
---
 .../__tests__/components.test.js              |  2 +-
 .../__tests__/container.test.tsx              |  6 +-
 components/drawer/__tests__/Drawer.test.js    | 37 ++++++---
 .../drawer/__tests__/DrawerEvent.test.js      | 30 +++----
 .../drawer/__tests__/MultiDrawer.test.js      | 12 +--
 components/drawer/__tests__/type.test.tsx     |  2 +-
 components/drawer/demo/basic-right.md         |  8 +-
 components/drawer/demo/config-provider.md     |  8 +-
 components/drawer/demo/extra.md               | 10 +--
 components/drawer/demo/form-in-drawer.md      |  8 +-
 components/drawer/demo/multi-level-drawer.md  | 16 ++--
 components/drawer/demo/no-mask.md             |  8 +-
 components/drawer/demo/placement.md           |  8 +-
 components/drawer/demo/render-in-current.md   |  8 +-
 components/drawer/demo/size.md                | 10 +--
 components/drawer/demo/user-profile.md        |  8 +-
 components/drawer/index.en-US.md              |  4 +-
 components/drawer/index.tsx                   | 83 ++++++++++++-------
 components/drawer/index.zh-CN.md              |  4 +-
 components/form/__tests__/index.test.js       |  2 +-
 20 files changed, 154 insertions(+), 120 deletions(-)

diff --git a/components/config-provider/__tests__/components.test.js b/components/config-provider/__tests__/components.test.js
index 9ae11f54f5..436308dfe6 100644
--- a/components/config-provider/__tests__/components.test.js
+++ b/components/config-provider/__tests__/components.test.js
@@ -275,7 +275,7 @@ describe('ConfigProvider', () => {
     testPair('Divider', props => <Divider {...props} />);
 
     // Drawer
-    testPair('Drawer', props => <Drawer {...props} visible getContainer={false} />);
+    testPair('Drawer', props => <Drawer {...props} open getContainer={false} />);
 
     // Dropdown
     testPair('Dropdown', props => {
diff --git a/components/config-provider/__tests__/container.test.tsx b/components/config-provider/__tests__/container.test.tsx
index 7e75117ab2..16559bb645 100644
--- a/components/config-provider/__tests__/container.test.tsx
+++ b/components/config-provider/__tests__/container.test.tsx
@@ -30,12 +30,12 @@ describe('ConfigProvider.GetPopupContainer', () => {
 
   it('Drawer', () => {
     const getPopupContainer = jest.fn(node => node.parentNode);
-    const Demo: React.FC<{ visible?: boolean }> = ({ visible }) => (
+    const Demo: React.FC<{ open?: boolean }> = ({ open }) => (
       <ConfigProvider getPopupContainer={getPopupContainer}>
-        <Drawer visible={visible} />
+        <Drawer open={open} />
       </ConfigProvider>
     );
-    render(<Demo visible />);
+    render(<Demo open />);
     expect(getPopupContainer).toHaveBeenCalled();
   });
 
diff --git a/components/drawer/__tests__/Drawer.test.js b/components/drawer/__tests__/Drawer.test.js
index a8ef246b43..13fbe06dc7 100644
--- a/components/drawer/__tests__/Drawer.test.js
+++ b/components/drawer/__tests__/Drawer.test.js
@@ -8,7 +8,7 @@ import ConfigProvider from '../../config-provider';
 
 const DrawerTest = ({ getContainer }) => (
   <div>
-    <Drawer visible width={400} getContainer={getContainer}>
+    <Drawer open width={400} getContainer={getContainer}>
       Here is content of Drawer
     </Drawer>
   </div>
@@ -48,7 +48,7 @@ describe('Drawer', () => {
 
   it('render correctly', () => {
     const { container: wrapper } = render(
-      <Drawer visible width={400} getContainer={false}>
+      <Drawer open width={400} getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
@@ -70,7 +70,7 @@ describe('Drawer', () => {
 
   it('render top drawer', () => {
     const { container: wrapper } = render(
-      <Drawer visible height={400} placement="top" getContainer={false}>
+      <Drawer open height={400} placement="top" getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
@@ -81,7 +81,7 @@ describe('Drawer', () => {
 
   it('have a title', () => {
     const { container: wrapper } = render(
-      <Drawer visible title="Test Title" getContainer={false}>
+      <Drawer open title="Test Title" getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
@@ -92,7 +92,7 @@ describe('Drawer', () => {
 
   it('closable is false', () => {
     const { container: wrapper } = render(
-      <Drawer visible closable={false} getContainer={false}>
+      <Drawer open closable={false} getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
@@ -103,7 +103,7 @@ describe('Drawer', () => {
 
   it('destroyOnClose is true', () => {
     const { container: wrapper } = render(
-      <Drawer destroyOnClose visible={false} getContainer={false}>
+      <Drawer destroyOnClose open={false} getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
@@ -114,7 +114,7 @@ describe('Drawer', () => {
 
   it('className is test_drawer', () => {
     const { container: wrapper } = render(
-      <Drawer destroyOnClose visible className="test_drawer" getContainer={false}>
+      <Drawer destroyOnClose open className="test_drawer" getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
@@ -129,7 +129,7 @@ describe('Drawer', () => {
     };
     const { container: wrapper } = render(
       <Drawer
-        visible
+        open
         style={style}
         drawerStyle={style}
         headerStyle={style}
@@ -146,7 +146,7 @@ describe('Drawer', () => {
 
   it('have a footer', () => {
     const { container: wrapper } = render(
-      <Drawer visible footer="Test Footer" getContainer={false}>
+      <Drawer open footer="Test Footer" getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
@@ -176,7 +176,7 @@ describe('Drawer', () => {
 
   it('support closeIcon', () => {
     const { container: wrapper } = render(
-      <Drawer visible closable closeIcon={<span>close</span>} width={400} getContainer={false}>
+      <Drawer open closable closeIcon={<span>close</span>} width={400} getContainer={false}>
         Here is content of Drawer
       </Drawer>,
     );
@@ -190,7 +190,7 @@ describe('Drawer', () => {
 
     render(
       <ConfigProvider virtual>
-        <Drawer visible>Bamboo is Light</Drawer>
+        <Drawer open>Bamboo is Light</Drawer>
       </ConfigProvider>,
     );
 
@@ -200,9 +200,22 @@ describe('Drawer', () => {
   });
 
   it('zIndex should work', () => {
-    const { container } = render(<Drawer getContainer={false} visible zIndex={903} />);
+    const { container } = render(<Drawer getContainer={false} open zIndex={903} />);
     expect(container.querySelector('.ant-drawer')).toHaveStyle({
       zIndex: 903,
     });
   });
+  it('deprecated warning', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { rerender } = render(<Drawer visible />);
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Drawer] `visible` is deprecated which will be removed in next major version, please use `open` instead.',
+    );
+    rerender(<Drawer afterVisibleChange={() => {}} />);
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Drawer] `afterVisibleChange` is deprecated which will be removed in next major version, please use `afterOpenChange` instead.',
+    );
+    errSpy.mockRestore();
+  });
 });
diff --git a/components/drawer/__tests__/DrawerEvent.test.js b/components/drawer/__tests__/DrawerEvent.test.js
index 1d3219ac6b..0b0bb00596 100644
--- a/components/drawer/__tests__/DrawerEvent.test.js
+++ b/components/drawer/__tests__/DrawerEvent.test.js
@@ -4,7 +4,7 @@ import { act, fireEvent, render } from '../../../tests/utils';
 
 describe('Drawer', () => {
   const getDrawer = props => (
-    <Drawer visible getContainer={false} {...props}>
+    <Drawer open getContainer={false} {...props}>
       Here is content of Drawer
     </Drawer>
   );
@@ -21,7 +21,7 @@ describe('Drawer', () => {
     const { container, asFragment, rerender } = render(getDrawer());
     expect(container.querySelector('.ant-drawer-body')).toBeTruthy();
 
-    rerender(getDrawer({ visible: false }));
+    rerender(getDrawer({ open: false }));
 
     expect(container.querySelector('.ant-drawer-body').textContent).toEqual(
       'Here is content of Drawer',
@@ -58,7 +58,7 @@ describe('Drawer', () => {
     const { container, rerender } = render(getDrawer({ destroyOnClose: true }));
     expect(container.querySelector('.ant-drawer')).toBeTruthy();
 
-    rerender(getDrawer({ destroyOnClose: true, visible: false }));
+    rerender(getDrawer({ destroyOnClose: true, open: false }));
     act(() => {
       jest.runAllTimers();
     });
@@ -70,7 +70,7 @@ describe('Drawer', () => {
     const { container, rerender } = render(getDrawer());
     expect(container.querySelector('.ant-drawer')).toBeTruthy();
 
-    rerender(getDrawer({ visible: false }));
+    rerender(getDrawer({ open: false }));
     act(() => {
       jest.runAllTimers();
     });
@@ -80,11 +80,11 @@ describe('Drawer', () => {
   });
 
   it('dom should be existed after close twice when getContainer is false', () => {
-    const { container, rerender } = render(getDrawer({ visible: true, getContainer: false }));
+    const { container, rerender } = render(getDrawer({ open: true, getContainer: false }));
     expect(container.querySelector('.ant-drawer-content')).toBeTruthy();
 
     // Hide
-    rerender(getDrawer({ visible: false, getContainer: false }));
+    rerender(getDrawer({ open: false, getContainer: false }));
     act(() => {
       jest.runAllTimers();
     });
@@ -92,12 +92,12 @@ describe('Drawer', () => {
     expect(container.querySelector('.ant-drawer-content-wrapper-hidden')).toBeTruthy();
 
     // Show
-    rerender(getDrawer({ visible: true, getContainer: false }));
+    rerender(getDrawer({ open: true, getContainer: false }));
     expect(container.querySelector('.ant-drawer-content-wrapper')).toBeTruthy();
     expect(container.querySelector('.ant-drawer-content-wrapper-hidden')).toBeFalsy();
 
     // Hide
-    rerender(getDrawer({ visible: false, getContainer: false }));
+    rerender(getDrawer({ open: false, getContainer: false }));
     act(() => {
       jest.runAllTimers();
     });
@@ -107,8 +107,8 @@ describe('Drawer', () => {
 
   it('test afterVisibleChange', async () => {
     const afterVisibleChange = jest.fn();
-    const { container, rerender } = render(getDrawer({ afterVisibleChange, visible: true }));
-    rerender(getDrawer({ afterVisibleChange, visible: false }));
+    const { container, rerender } = render(getDrawer({ afterVisibleChange, open: true }));
+    rerender(getDrawer({ afterVisibleChange, open: false }));
 
     act(() => {
       jest.runAllTimers();
@@ -128,18 +128,18 @@ describe('Drawer', () => {
 
     const RefDemo = () => {
       const ref = React.useRef();
-      const [visible, setVisible] = React.useState(false);
+      const [open, setOpen] = React.useState(false);
 
       React.useEffect(() => {
-        if (visible) {
+        if (open) {
           refCallback(ref.current);
         }
-      }, [visible]);
+      }, [open]);
 
       return (
         <>
-          <a onClick={() => setVisible(true)}>open</a>
-          <Drawer visible={visible}>
+          <a onClick={() => setOpen(true)}>open</a>
+          <Drawer open={open}>
             <div ref={ref} />
           </Drawer>
         </>
diff --git a/components/drawer/__tests__/MultiDrawer.test.js b/components/drawer/__tests__/MultiDrawer.test.js
index 1580734eb4..0b4ed9b097 100644
--- a/components/drawer/__tests__/MultiDrawer.test.js
+++ b/components/drawer/__tests__/MultiDrawer.test.js
@@ -4,18 +4,18 @@ import { fireEvent, render } from '../../../tests/utils';
 import Button from '../../button';
 
 class MultiDrawer extends React.Component {
-  state = { visible: false, childrenDrawer: false, hasChildren: true };
+  state = { open: false, childrenDrawer: false, hasChildren: true };
 
   showDrawer = () => {
     this.setState({
-      visible: true,
+      open: true,
       hasChildren: true,
     });
   };
 
   onClose = () => {
     this.setState({
-      visible: false,
+      open: false,
     });
   };
 
@@ -39,7 +39,7 @@ class MultiDrawer extends React.Component {
   };
 
   render() {
-    const { childrenDrawer, visible, hasChildren } = this.state;
+    const { childrenDrawer, open, hasChildren } = this.state;
     const { placement, push } = this.props;
     return (
       <div>
@@ -56,7 +56,7 @@ class MultiDrawer extends React.Component {
           onClose={this.onClose}
           getContainer={false}
           placement={placement}
-          visible={visible}
+          open={open}
           push={push}
         >
           <Button type="primary" id="open_two_drawer" onClick={this.showChildrenDrawer}>
@@ -70,7 +70,7 @@ class MultiDrawer extends React.Component {
               getContainer={false}
               placement={placement}
               onClose={this.onChildrenDrawerClose}
-              visible={childrenDrawer}
+              open={childrenDrawer}
             >
               <div id="two_drawer_text">This is two-level drawer</div>
             </Drawer>
diff --git a/components/drawer/__tests__/type.test.tsx b/components/drawer/__tests__/type.test.tsx
index a9c67e74f0..b47fee0968 100644
--- a/components/drawer/__tests__/type.test.tsx
+++ b/components/drawer/__tests__/type.test.tsx
@@ -10,7 +10,7 @@ describe('Drawer.typescript', () => {
         placement="right"
         closable={false}
         onClose={onClose}
-        visible={false}
+        open={false}
         contentWrapperStyle={{
           background: '#f00',
         }}
diff --git a/components/drawer/demo/basic-right.md b/components/drawer/demo/basic-right.md
index afe06949c1..28ee997fb5 100644
--- a/components/drawer/demo/basic-right.md
+++ b/components/drawer/demo/basic-right.md
@@ -18,14 +18,14 @@ import { Button, Drawer } from 'antd';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const showDrawer = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const onClose = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
   return (
@@ -33,7 +33,7 @@ const App: React.FC = () => {
       <Button type="primary" onClick={showDrawer}>
         Open
       </Button>
-      <Drawer title="Basic Drawer" placement="right" onClose={onClose} visible={visible}>
+      <Drawer title="Basic Drawer" placement="right" onClose={onClose} open={open}>
         <p>Some contents...</p>
         <p>Some contents...</p>
         <p>Some contents...</p>
diff --git a/components/drawer/demo/config-provider.md b/components/drawer/demo/config-provider.md
index 22c0cff856..d92a746c65 100644
--- a/components/drawer/demo/config-provider.md
+++ b/components/drawer/demo/config-provider.md
@@ -20,14 +20,14 @@ import React, { useRef, useState } from 'react';
 
 const App: React.FC = () => {
   const domRef = useRef<HTMLDivElement>(null);
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const showDrawer = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const onClose = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
   return (
@@ -41,7 +41,7 @@ const App: React.FC = () => {
           title="ConfigProvider"
           placement="right"
           onClose={onClose}
-          visible={visible}
+          open={open}
         >
           <p>Some contents...</p>
           <p>Some contents...</p>
diff --git a/components/drawer/demo/extra.md b/components/drawer/demo/extra.md
index 7020b1d1cc..761680dc39 100644
--- a/components/drawer/demo/extra.md
+++ b/components/drawer/demo/extra.md
@@ -11,7 +11,7 @@ title:
 
 ## en-US
 
-Extra actions should be placed at corner of drawer in Ant Design, you can using `extra` prop for that.
+Extra actions should be placed at corner of drawer in Ant Design, you can use `extra` prop for that.
 
 ```tsx
 import { Button, Drawer, Radio, Space } from 'antd';
@@ -20,11 +20,11 @@ import type { RadioChangeEvent } from 'antd/es/radio';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
   const [placement, setPlacement] = useState<DrawerProps['placement']>('right');
 
   const showDrawer = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const onChange = (e: RadioChangeEvent) => {
@@ -32,7 +32,7 @@ const App: React.FC = () => {
   };
 
   const onClose = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
   return (
@@ -53,7 +53,7 @@ const App: React.FC = () => {
         placement={placement}
         width={500}
         onClose={onClose}
-        visible={visible}
+        open={open}
         extra={
           <Space>
             <Button onClick={onClose}>Cancel</Button>
diff --git a/components/drawer/demo/form-in-drawer.md b/components/drawer/demo/form-in-drawer.md
index c3c365d5e7..47bef8c417 100644
--- a/components/drawer/demo/form-in-drawer.md
+++ b/components/drawer/demo/form-in-drawer.md
@@ -21,14 +21,14 @@ import React, { useState } from 'react';
 const { Option } = Select;
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const showDrawer = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const onClose = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
   return (
@@ -40,7 +40,7 @@ const App: React.FC = () => {
         title="Create a new account"
         width={720}
         onClose={onClose}
-        visible={visible}
+        open={open}
         bodyStyle={{ paddingBottom: 80 }}
         extra={
           <Space>
diff --git a/components/drawer/demo/multi-level-drawer.md b/components/drawer/demo/multi-level-drawer.md
index 891596e301..f21315e21b 100644
--- a/components/drawer/demo/multi-level-drawer.md
+++ b/components/drawer/demo/multi-level-drawer.md
@@ -18,15 +18,15 @@ import { Button, Drawer } from 'antd';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
   const [childrenDrawer, setChildrenDrawer] = useState(false);
 
   const showDrawer = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const onClose = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
   const showChildrenDrawer = () => {
@@ -42,13 +42,7 @@ const App: React.FC = () => {
       <Button type="primary" onClick={showDrawer}>
         Open drawer
       </Button>
-      <Drawer
-        title="Multi-level drawer"
-        width={520}
-        closable={false}
-        onClose={onClose}
-        visible={visible}
-      >
+      <Drawer title="Multi-level drawer" width={520} closable={false} onClose={onClose} open={open}>
         <Button type="primary" onClick={showChildrenDrawer}>
           Two-level drawer
         </Button>
@@ -57,7 +51,7 @@ const App: React.FC = () => {
           width={320}
           closable={false}
           onClose={onChildrenDrawerClose}
-          visible={childrenDrawer}
+          open={childrenDrawer}
         >
           This is two-level drawer
         </Drawer>
diff --git a/components/drawer/demo/no-mask.md b/components/drawer/demo/no-mask.md
index d623e57ac4..9f6bfa86c8 100644
--- a/components/drawer/demo/no-mask.md
+++ b/components/drawer/demo/no-mask.md
@@ -19,14 +19,14 @@ import { Button, Drawer } from 'antd';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const showDrawer = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const onClose = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
   return (
@@ -39,7 +39,7 @@ const App: React.FC = () => {
         placement="right"
         mask={false}
         onClose={onClose}
-        visible={visible}
+        open={open}
         contentWrapperStyle={{
           width: 333,
           background: 'red',
diff --git a/components/drawer/demo/placement.md b/components/drawer/demo/placement.md
index f5d6f74fc1..d1b414be98 100644
--- a/components/drawer/demo/placement.md
+++ b/components/drawer/demo/placement.md
@@ -19,15 +19,15 @@ import { Button, Drawer, Radio, Space } from 'antd';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
   const [placement, setPlacement] = useState<DrawerProps['placement']>('left');
 
   const showDrawer = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const onClose = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
   const onChange = (e: RadioChangeEvent) => {
@@ -52,7 +52,7 @@ const App: React.FC = () => {
         placement={placement}
         closable={false}
         onClose={onClose}
-        visible={visible}
+        open={open}
         key={placement}
       >
         <p>Some contents...</p>
diff --git a/components/drawer/demo/render-in-current.md b/components/drawer/demo/render-in-current.md
index f62fe1b077..a488c8e763 100644
--- a/components/drawer/demo/render-in-current.md
+++ b/components/drawer/demo/render-in-current.md
@@ -18,14 +18,14 @@ import { Button, Drawer } from 'antd';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const showDrawer = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const onClose = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
   return (
@@ -41,7 +41,7 @@ const App: React.FC = () => {
         placement="right"
         closable={false}
         onClose={onClose}
-        visible={visible}
+        open={open}
         getContainer={false}
         style={{ position: 'absolute' }}
       >
diff --git a/components/drawer/demo/size.md b/components/drawer/demo/size.md
index 53c49fa95a..294a959a14 100644
--- a/components/drawer/demo/size.md
+++ b/components/drawer/demo/size.md
@@ -19,21 +19,21 @@ import type { DrawerProps } from 'antd/es/drawer';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
   const [size, setSize] = useState<DrawerProps['size']>();
 
   const showDefaultDrawer = () => {
     setSize('default');
-    setVisible(true);
+    setOpen(true);
   };
 
   const showLargeDrawer = () => {
     setSize('large');
-    setVisible(true);
+    setOpen(true);
   };
 
   const onClose = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
   return (
@@ -51,7 +51,7 @@ const App: React.FC = () => {
         placement="right"
         size={size}
         onClose={onClose}
-        visible={visible}
+        open={open}
         extra={
           <Space>
             <Button onClick={onClose}>Cancel</Button>
diff --git a/components/drawer/demo/user-profile.md b/components/drawer/demo/user-profile.md
index a5d2f7baa5..31c213a46d 100644
--- a/components/drawer/demo/user-profile.md
+++ b/components/drawer/demo/user-profile.md
@@ -30,14 +30,14 @@ const DescriptionItem = ({ title, content }: DescriptionItemProps) => (
 );
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const showDrawer = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const onClose = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
   return (
@@ -73,7 +73,7 @@ const App: React.FC = () => {
           </List.Item>
         )}
       />
-      <Drawer width={640} placement="right" closable={false} onClose={onClose} visible={visible}>
+      <Drawer width={640} placement="right" closable={false} onClose={onClose} open={open}>
         <p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>
           User Profile
         </p>
diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md
index ff4dcbb725..b6350cb461 100644
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@@ -21,7 +21,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | Props | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | autoFocus | Whether Drawer should get focused after open | boolean | true | 4.17.0 |
-| afterVisibleChange | Callback after the animation ends when switching drawers | function(visible) | - |  |
+| afterOpenChange | Callback after the animation ends when switching drawers | function(open) | - | 4.23.0 |
 | bodyStyle | Style of the drawer content part | CSSProperties | - |  |
 | className | The class name of the container of the Drawer dialog | string | - |  |
 | closable | Whether a close (x) button is visible on top left of the Drawer dialog or not | boolean | true |  |
@@ -45,7 +45,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | style | Style of wrapper element which **contains mask** compare to `drawerStyle` | CSSProperties | - |  |
 | size | presetted size of drawer, default `378px` and large `736px` | 'default' \| 'large' | 'default' | 4.17.0 |
 | title | The title for Drawer | ReactNode | - |  |
-| visible | Whether the Drawer dialog is visible or not | boolean | false |  |
+| open | Whether the Drawer dialog is visible or not | boolean | false | 4.23.0 |
 | width | Width of the Drawer dialog | string \| number | 378 |  |
 | zIndex | The `z-index` of the Drawer | number | 1000 |  |
 | onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button | function(e) | - |  |
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
index 59daf0ee52..d25511bf3d 100644
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@@ -8,6 +8,7 @@ import { ConfigContext } from '../config-provider';
 import { NoFormStyle } from '../form/context';
 import { getTransitionName } from '../_util/motion';
 import { tuple } from '../_util/type';
+import warning from '../_util/warning';
 
 const SizeTypes = tuple('default', 'large');
 type sizeType = typeof SizeTypes[number];
@@ -29,41 +30,55 @@ export interface DrawerProps extends RcDrawerProps {
   footerStyle?: React.CSSProperties;
 
   title?: React.ReactNode;
+  /**
+   * @deprecated `visible` is deprecated which will be removed in next major version. Please use
+   *   `open` instead.
+   */
   visible?: boolean;
+  open?: boolean;
 
   footer?: React.ReactNode;
   extra?: React.ReactNode;
 
+  /**
+   * @deprecated `afterVisibleChange` is deprecated which will be removed in next major version.
+   *   Please use `afterOpenChange` instead.
+   */
   afterVisibleChange?: (visible: boolean) => void;
+  afterOpenChange?: (open: boolean) => void;
 }
 
 const defaultPushState: PushState = { distance: 180 };
 
-function Drawer({
-  width,
-  height,
-  size = 'default',
-  closable = true,
-  mask = true,
-  push = defaultPushState,
-  closeIcon = <CloseOutlined />,
-  bodyStyle,
-  drawerStyle,
-  className,
-  visible,
-  children,
-  style,
-  title,
-  headerStyle,
-  onClose,
-  footer,
-  footerStyle,
-  prefixCls: customizePrefixCls,
-  getContainer: customizeGetContainer,
-  extra,
-  afterVisibleChange,
-  ...rest
-}: DrawerProps) {
+function Drawer(props: DrawerProps) {
+  const {
+    width,
+    height,
+    size = 'default',
+    closable = true,
+    mask = true,
+    push = defaultPushState,
+    closeIcon = <CloseOutlined />,
+    bodyStyle,
+    drawerStyle,
+    className,
+    visible,
+    open,
+    children,
+    style,
+    title,
+    headerStyle,
+    onClose,
+    footer,
+    footerStyle,
+    prefixCls: customizePrefixCls,
+    getContainer: customizeGetContainer,
+    extra,
+    afterVisibleChange,
+    afterOpenChange,
+    ...rest
+  } = props;
+
   const { getPopupContainer, getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('drawer', customizePrefixCls);
 
@@ -79,6 +94,17 @@ function Drawer({
     </button>
   );
 
+  [
+    ['visible', 'open'],
+    ['afterVisibleChange', 'afterOpenChange'],
+  ].forEach(([deprecatedName, newName]) => {
+    warning(
+      !(deprecatedName in props),
+      'Drawer',
+      `\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`${newName}\` instead.`,
+    );
+  });
+
   function renderHeader() {
     if (!title && !closable) {
       return null;
@@ -152,15 +178,16 @@ function Drawer({
         prefixCls={prefixCls}
         onClose={onClose}
         {...rest}
-        open={visible}
+        open={open || visible}
         mask={mask}
         push={push}
         width={mergedWidth}
         height={mergedHeight}
         rootClassName={drawerClassName}
         getContainer={getContainer}
-        afterOpenChange={open => {
-          afterVisibleChange?.(open);
+        afterOpenChange={isOpen => {
+          afterOpenChange?.(isOpen);
+          afterVisibleChange?.(isOpen);
         }}
         maskMotion={maskMotion}
         motion={panelMotion}
diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md
index 1ea466c69a..018a0ad98b 100644
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@@ -20,7 +20,7 @@ cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!600000000168
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | autoFocus | 抽屉展开后是否将焦点切换至其 Dom 节点 | boolean | true | 4.17.0 |
-| afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | - |  |
+| afterOpenChange | 切换抽屉时动画结束后的回调 | function(open) | - | 4.23.0 |
 | bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - |  |
 | className | 对话框外层容器的类名 | string | - |  |
 | closable | 是否显示左上角的关闭按钮 | boolean | true |  |
@@ -44,7 +44,7 @@ cover: https://img.alicdn.com/imgextra/i4/O1CN019djdZP1OHwXSRGCOW_!!600000000168
 | size | 预设抽屉宽度（或高度），default `378px` 和 large `736px` | 'default' \| 'large' | 'default' | 4.17.0 |
 | style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | CSSProperties | - |  |
 | title | 标题 | ReactNode | - |  |
-| visible | Drawer 是否可见 | boolean | - |  |
+| open | Drawer 是否可见 | boolean | - | 4.23.0 |
 | width | 宽度 | string \| number | 378 |  |
 | zIndex | 设置 Drawer 的 `z-index` | number | 1000 |  |
 | onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - |  |
diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js
index 8ca148b17b..dd4db602bc 100644
--- a/components/form/__tests__/index.test.js
+++ b/components/form/__tests__/index.test.js
@@ -1237,7 +1237,7 @@ describe('Form', () => {
           </Modal>
         </Form.Item>
         <Form.Item validateStatus="error">
-          <Drawer visible>
+          <Drawer open>
             <Select className="drawer-select" />
           </Drawer>
         </Form.Item>

From 3d8cd0b4515b479d89d866f3b4de838915b5361d Mon Sep 17 00:00:00 2001
From: yykoypj <601924094@qq.com>
Date: Tue, 23 Aug 2022 16:55:57 +0800
Subject: [PATCH 16/22] feat: switch visible to open for Modal (#37084)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: switch visible to open for Modal

* test: depcated check

* docs: site api update

Co-authored-by: 二货机器人 <smith3816@gmail.com>
---
 .../__tests__/components.test.js              |  2 +-
 components/config-provider/demo/direction.md  | 15 +++----
 components/config-provider/demo/locale.md     |  8 ++--
 components/form/__tests__/index.test.js       |  2 +-
 components/form/demo/form-context.md          | 32 +++++++--------
 components/form/demo/form-in-modal.md         | 16 ++++----
 .../locale-provider/__tests__/index.test.js   |  2 +-
 components/modal/ConfirmDialog.tsx            |  5 ++-
 components/modal/Modal.tsx                    | 22 ++++++++++-
 components/modal/__tests__/Modal.test.tsx     | 39 +++++++++++++------
 components/modal/confirm.tsx                  |  4 +-
 components/modal/demo/async.md                | 10 ++---
 components/modal/demo/basic.md                | 10 ++---
 components/modal/demo/button-props.md         | 10 ++---
 components/modal/demo/dark.md                 | 10 ++---
 components/modal/demo/footer.md               | 10 ++---
 components/modal/demo/locale.md               |  8 ++--
 components/modal/demo/modal-render.md         | 10 ++---
 components/modal/demo/position.md             | 20 +++++-----
 components/modal/demo/width.md                | 10 ++---
 components/modal/index.en-US.md               |  2 +-
 components/modal/index.zh-CN.md               |  2 +-
 components/modal/useModal/HookModal.tsx       |  6 +--
 components/upload/demo/file-type.md           |  8 ++--
 components/upload/demo/picture-card.md        |  8 ++--
 .../template/IconDisplay/IconPicSearcher.tsx  |  8 ++--
 26 files changed, 154 insertions(+), 125 deletions(-)

diff --git a/components/config-provider/__tests__/components.test.js b/components/config-provider/__tests__/components.test.js
index 436308dfe6..3b1a67cd85 100644
--- a/components/config-provider/__tests__/components.test.js
+++ b/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>
diff --git a/components/config-provider/demo/direction.md b/components/config-provider/demo/direction.md
index 6b9fcd79d4..1cacb536f7 100644
--- a/components/config-provider/demo/direction.md
+++ b/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>
diff --git a/components/config-provider/demo/locale.md b/components/config-provider/demo/locale.md
index 8bd720d01e..b00d209db0 100644
--- a/components/config-provider/demo/locale.md
+++ b/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>
diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js
index dd4db602bc..31243c9ab6 100644
--- a/components/form/__tests__/index.test.js
+++ b/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>
diff --git a/components/form/demo/form-context.md b/components/form/demo/form-context.md
index f576438b79..eb56407a3f 100644
--- a/components/form/demo/form-context.md
+++ b/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>
   );
 };
diff --git a/components/form/demo/form-in-modal.md b/components/form/demo/form-in-modal.md
index a1f3b14626..145902bb38 100644
--- a/components/form/demo/form-in-modal.md
+++ b/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>
diff --git a/components/locale-provider/__tests__/index.test.js b/components/locale-provider/__tests__/index.test.js
index 0114a0a4bd..29781a6672 100644
--- a/components/locale-provider/__tests__/index.test.js
+++ b/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>
diff --git a/components/modal/ConfirmDialog.tsx b/components/modal/ConfirmDialog.tsx
index 2af9d95b4e..3a8e5bb9fc 100644
--- a/components/modal/ConfirmDialog.tsx
+++ b/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)}
diff --git a/components/modal/Modal.tsx b/components/modal/Modal.tsx
index d2d1d950cc..8872686571 100644
--- a/components/modal/Modal.tsx
+++ b/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,
 };
 
diff --git a/components/modal/__tests__/Modal.test.tsx b/components/modal/__tests__/Modal.test.tsx
index 177a5f131c..18a75da560 100644
--- a/components/modal/__tests__/Modal.test.tsx
+++ b/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();
+  });
 });
diff --git a/components/modal/confirm.tsx b/components/modal/confirm.tsx
index bfa807ff94..a8e05c9574 100644
--- a/components/modal/confirm.tsx
+++ b/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();
diff --git a/components/modal/demo/async.md b/components/modal/demo/async.md
index 52dc80605d..e5dded5ac6 100644
--- a/components/modal/demo/async.md
+++ b/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}
diff --git a/components/modal/demo/basic.md b/components/modal/demo/basic.md
index 210a44f954..f3c422cd8a 100644
--- a/components/modal/demo/basic.md
+++ b/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>
diff --git a/components/modal/demo/button-props.md b/components/modal/demo/button-props.md
index de6ec2d2af..da61638ae2 100644
--- a/components/modal/demo/button-props.md
+++ b/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 }}
diff --git a/components/modal/demo/dark.md b/components/modal/demo/dark.md
index b1e1dc2165..4549b77c62 100644
--- a/components/modal/demo/dark.md
+++ b/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"
diff --git a/components/modal/demo/footer.md b/components/modal/demo/footer.md
index 1b3d1ee28d..036375d70e 100644
--- a/components/modal/demo/footer.md
+++ b/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}
diff --git a/components/modal/demo/locale.md b/components/modal/demo/locale.md
index e4b3a2cd27..7e185bff05 100644
--- a/components/modal/demo/locale.md
+++ b/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="确认"
diff --git a/components/modal/demo/modal-render.md b/components/modal/demo/modal-render.md
index 31cf378c5a..826ac132af 100644
--- a/components/modal/demo/modal-render.md
+++ b/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 => (
diff --git a/components/modal/demo/position.md b/components/modal/demo/position.md
index 6f8e368ab9..636e6a6b4b 100644
--- a/components/modal/demo/position.md
+++ b/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>
diff --git a/components/modal/demo/width.md b/components/modal/demo/width.md
index 6e9f2cf26d..5a3e29a8e5 100644
--- a/components/modal/demo/width.md
+++ b/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>
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
index 85d8a8caf6..e4e63d97bb 100644
--- a/components/modal/index.en-US.md
+++ b/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 |  |
diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
index 0308d2aa13..fb936d0ad0 100644
--- a/components/modal/index.zh-CN.md
+++ b/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 |  |
diff --git a/components/modal/useModal/HookModal.tsx b/components/modal/useModal/HookModal.tsx
index e911805ae7..35c0d992e1 100644
--- a/components/modal/useModal/HookModal.tsx
+++ b/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 ||
diff --git a/components/upload/demo/file-type.md b/components/upload/demo/file-type.md
index c185ea6bd7..8244164424 100644
--- a/components/upload/demo/file-type.md
+++ b/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>
     </>
diff --git a/components/upload/demo/picture-card.md b/components/upload/demo/picture-card.md
index d048d143d8..dde1bb464b 100644
--- a/components/upload/demo/picture-card.md
+++ b/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>
     </>
diff --git a/site/theme/template/IconDisplay/IconPicSearcher.tsx b/site/theme/template/IconDisplay/IconPicSearcher.tsx
index cad8154044..2478058436 100644
--- a/site/theme/template/IconDisplay/IconPicSearcher.tsx
+++ b/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}
       >

From b794248c434a4d950cf30dbf042502cee33e16e2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Wed, 24 Aug 2022 15:52:24 +0800
Subject: [PATCH 17/22] chore: merge master

---
 components/tree-select/__tests__/index.test.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/tree-select/__tests__/index.test.tsx b/components/tree-select/__tests__/index.test.tsx
index 2f39770b3d..8351e7f093 100644
--- a/components/tree-select/__tests__/index.test.tsx
+++ b/components/tree-select/__tests__/index.test.tsx
@@ -54,7 +54,7 @@ describe('TreeSelect', () => {
 
   it('should show warning when use dropdownClassName', () => {
     const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(<TreeSelect dropdownClassName="myCustomClassName" />);
+    render(<TreeSelect dropdownClassName="myCustomClassName" />);
     expect(errorSpy).toHaveBeenCalledWith(
       'Warning: [antd: TreeSelect] `dropdownClassName` is deprecated which will be removed in next major version. Please use `popupClassName` instead.',
     );

From c9fd7fb8f10b7b8544d2e734f79cace17c44d0c1 Mon Sep 17 00:00:00 2001
From: Uladzimir Atroshchanka <uladzimir.atroshchanka@gmail.com>
Date: Wed, 24 Aug 2022 13:07:50 +0400
Subject: [PATCH 18/22] feat: Input fields in error are missing multiple ARIA
 attributes (#36762)

* feat: add implementation and update snapshots

* test: update snapshot

* test: update snapshots

* test: update snapshots

* test: update snapshots
---
 .../__snapshots__/demo-extend.test.tsx.snap   |  10 ++
 components/form/ErrorList.tsx                 |  11 +-
 components/form/FormItem/index.tsx            |  39 ++++-
 components/form/FormItemInput.tsx             |  15 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  60 +++++++
 .../__tests__/__snapshots__/demo.test.js.snap |  60 +++++++
 components/form/__tests__/index.test.js       | 156 +++++++++++++++++-
 .../__snapshots__/demo-extend.test.ts.snap    |   1 +
 .../__tests__/__snapshots__/demo.test.ts.snap |   1 +
 components/menu/index.zh-CN.md                |   2 +-
 10 files changed, 347 insertions(+), 8 deletions(-)

diff --git a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
index 1ef885a412..8c22d6e98b 100644
--- a/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
+++ b/components/drawer/__tests__/__snapshots__/demo-extend.test.tsx.snap
@@ -600,6 +600,7 @@ HTMLCollection [
                             class="ant-form-item-control-input-content"
                           >
                             <input
+                              aria-required="true"
                               class="ant-input"
                               id="name"
                               placeholder="Please enter user name"
@@ -655,6 +656,7 @@ HTMLCollection [
                                   http://
                                 </span>
                                 <input
+                                  aria-required="true"
                                   class="ant-input"
                                   id="url"
                                   placeholder="Please enter url"
@@ -710,6 +712,7 @@ HTMLCollection [
                             class="ant-form-item-control-input-content"
                           >
                             <div
+                              aria-required="true"
                               class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                             >
                               <div
@@ -724,6 +727,7 @@ HTMLCollection [
                                     aria-controls="owner_list"
                                     aria-haspopup="listbox"
                                     aria-owns="owner_list"
+                                    aria-required="true"
                                     autocomplete="off"
                                     class="ant-select-selection-search-input"
                                     id="owner"
@@ -887,6 +891,7 @@ HTMLCollection [
                             class="ant-form-item-control-input-content"
                           >
                             <div
+                              aria-required="true"
                               class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                             >
                               <div
@@ -901,6 +906,7 @@ HTMLCollection [
                                     aria-controls="type_list"
                                     aria-haspopup="listbox"
                                     aria-owns="type_list"
+                                    aria-required="true"
                                     autocomplete="off"
                                     class="ant-select-selection-search-input"
                                     id="type"
@@ -1069,6 +1075,7 @@ HTMLCollection [
                             class="ant-form-item-control-input-content"
                           >
                             <div
+                              aria-required="true"
                               class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                             >
                               <div
@@ -1083,6 +1090,7 @@ HTMLCollection [
                                     aria-controls="approver_list"
                                     aria-haspopup="listbox"
                                     aria-owns="approver_list"
+                                    aria-required="true"
                                     autocomplete="off"
                                     class="ant-select-selection-search-input"
                                     id="approver"
@@ -1246,6 +1254,7 @@ HTMLCollection [
                             class="ant-form-item-control-input-content"
                           >
                             <div
+                              aria-required="true"
                               class="ant-picker ant-picker-range"
                               style="width: 100%;"
                             >
@@ -2470,6 +2479,7 @@ HTMLCollection [
                             class="ant-form-item-control-input-content"
                           >
                             <textarea
+                              aria-required="true"
                               class="ant-input"
                               id="description"
                               placeholder="please enter url description"
diff --git a/components/form/ErrorList.tsx b/components/form/ErrorList.tsx
index 2bbc59b793..27ef125bf0 100644
--- a/components/form/ErrorList.tsx
+++ b/components/form/ErrorList.tsx
@@ -29,6 +29,7 @@ function toErrorEntity(
 }
 
 export interface ErrorListProps {
+  fieldId?: string;
   help?: React.ReactNode;
   helpStatus?: ValidateStatus;
   errors?: React.ReactNode[];
@@ -43,6 +44,7 @@ export default function ErrorList({
   errors = EMPTY_LIST,
   warnings = EMPTY_LIST,
   className: rootClassName,
+  fieldId,
   onVisibleChanged,
 }: ErrorListProps) {
   const { prefixCls } = React.useContext(FormItemPrefixContext);
@@ -69,6 +71,12 @@ export default function ErrorList({
     ];
   }, [help, helpStatus, debounceErrors, debounceWarnings]);
 
+  const helpProps: { id?: string } = {};
+
+  if (fieldId) {
+    helpProps.id = `${fieldId}_help`;
+  }
+
   return (
     <CSSMotion
       motionDeadline={collapseMotion.motionDeadline}
@@ -81,8 +89,10 @@ export default function ErrorList({
 
         return (
           <div
+            {...helpProps}
             className={classNames(baseClassName, holderClassName, rootClassName)}
             style={holderStyle}
+            role="alert"
           >
             <CSSMotionList
               keys={fullKeyList}
@@ -102,7 +112,6 @@ export default function ErrorList({
                 return (
                   <div
                     key={key}
-                    role="alert"
                     className={classNames(itemClassName, {
                       [`${baseClassName}-${errorStatus}`]: errorStatus,
                     })}
diff --git a/components/form/FormItem/index.tsx b/components/form/FormItem/index.tsx
index faf73d70de..878452b76d 100644
--- a/components/form/FormItem/index.tsx
+++ b/components/form/FormItem/index.tsx
@@ -37,11 +37,16 @@ interface MemoInputProps {
   value: any;
   update: any;
   children: React.ReactNode;
+  childProps: any[];
 }
 
 const MemoInput = React.memo(
   ({ children }: MemoInputProps) => children as JSX.Element,
-  (prev, next) => prev.value === next.value && prev.update === next.update,
+  (prev, next) =>
+    prev.value === next.value &&
+    prev.update === next.update &&
+    prev.childProps.length === next.childProps.length &&
+    prev.childProps.every((value, index) => value === next.childProps[index]),
 );
 
 export interface FormItemProps<Values = any>
@@ -305,6 +310,25 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
             childProps.id = fieldId;
           }
 
+          if (props.help || mergedErrors.length > 0 || mergedWarnings.length > 0 || props.extra) {
+            const describedbyArr = [];
+            if (props.help || mergedErrors.length > 0) {
+              describedbyArr.push(`${fieldId}_help`);
+            }
+            if (props.extra) {
+              describedbyArr.push(`${fieldId}_extra`);
+            }
+            childProps['aria-describedby'] = describedbyArr.join(' ');
+          }
+
+          if (mergedErrors.length > 0) {
+            childProps['aria-invalid'] = 'true';
+          }
+
+          if (isRequired) {
+            childProps['aria-required'] = 'true';
+          }
+
           if (supportRef(children)) {
             childProps.ref = getItemRef(mergedName, children);
           }
@@ -322,8 +346,19 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
             };
           });
 
+          // List of props that need to be watched for changes -> if changes are detected in MemoInput -> rerender
+          const watchingChildProps = [
+            childProps['aria-required'],
+            childProps['aria-invalid'],
+            childProps['aria-describedby'],
+          ];
+
           childNode = (
-            <MemoInput value={mergedControl[props.valuePropName || 'value']} update={children}>
+            <MemoInput
+              value={mergedControl[props.valuePropName || 'value']}
+              update={children}
+              childProps={watchingChildProps}
+            >
               {cloneElement(children, childProps)}
             </MemoInput>
           );
diff --git a/components/form/FormItemInput.tsx b/components/form/FormItemInput.tsx
index 58f602798a..f4223e67f7 100644
--- a/components/form/FormItemInput.tsx
+++ b/components/form/FormItemInput.tsx
@@ -32,6 +32,7 @@ export interface FormItemInputProps {
   extra?: React.ReactNode;
   status?: ValidateStatus;
   help?: React.ReactNode;
+  fieldId?: string;
 }
 
 const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = props => {
@@ -45,6 +46,7 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = pro
     _internalItemRender: formItemRender,
     extra,
     help,
+    fieldId,
     marginBottom,
     onErrorVisibleChanged,
   } = props;
@@ -72,6 +74,7 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = pro
       <div style={{ display: 'flex', flexWrap: 'nowrap' }}>
         <FormItemPrefixContext.Provider value={formItemContext}>
           <ErrorList
+            fieldId={fieldId}
             errors={errors}
             warnings={warnings}
             help={help}
@@ -84,9 +87,19 @@ const FormItemInput: React.FC<FormItemInputProps & FormItemInputMiscProps> = pro
       </div>
     ) : null;
 
+  const extraProps: { id?: string } = {};
+
+  if (fieldId) {
+    extraProps.id = `${fieldId}_extra`;
+  }
+
   // If extra = 0, && will goes wrong
   // 0&&error -> 0
-  const extraDom = extra ? <div className={`${baseClassName}-extra`}>{extra}</div> : null;
+  const extraDom = extra ? (
+    <div {...extraProps} className={`${baseClassName}-extra`}>
+      {extra}
+    </div>
+  ) : null;
 
   const dom =
     formItemRender && formItemRender.mark === 'pro_table_render' && formItemRender.render ? (
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index e293b38911..bec272960f 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -41,6 +41,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-0"
                     placeholder="placeholder"
@@ -84,6 +85,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                   class="ant-form-item-control-input-content"
                 >
                   <div
+                    aria-required="true"
                     class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                   >
                     <div
@@ -98,6 +100,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                           aria-controls="advanced_search_field-1_list"
                           aria-haspopup="listbox"
                           aria-owns="advanced_search_field-1_list"
+                          aria-required="true"
                           autocomplete="off"
                           class="ant-select-selection-search-input"
                           id="advanced_search_field-1"
@@ -262,6 +265,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-2"
                     placeholder="placeholder"
@@ -305,6 +309,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-3"
                     placeholder="placeholder"
@@ -348,6 +353,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                   class="ant-form-item-control-input-content"
                 >
                   <div
+                    aria-required="true"
                     class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                   >
                     <div
@@ -362,6 +368,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                           aria-controls="advanced_search_field-4_list"
                           aria-haspopup="listbox"
                           aria-owns="advanced_search_field-4_list"
+                          aria-required="true"
                           autocomplete="off"
                           class="ant-select-selection-search-input"
                           id="advanced_search_field-4"
@@ -526,6 +533,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-5"
                     placeholder="placeholder"
@@ -631,6 +639,7 @@ exports[`renders ./components/form/demo/basic.md extend context correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="basic_username"
               type="text"
@@ -672,6 +681,7 @@ exports[`renders ./components/form/demo/basic.md extend context correctly 1`] =
             >
               <input
                 action="click"
+                aria-required="true"
                 class="ant-input"
                 id="basic_password"
                 type="password"
@@ -815,6 +825,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <input
+                aria-required="true"
                 class="ant-input"
                 id="basic_username"
                 type="text"
@@ -856,6 +867,7 @@ Array [
               >
                 <input
                   action="click"
+                  aria-required="true"
                   class="ant-input"
                   id="basic_password"
                   type="password"
@@ -1184,6 +1196,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <input
+                aria-required="true"
                 class="ant-input"
                 id="responsive_username"
                 type="text"
@@ -1225,6 +1238,7 @@ Array [
               >
                 <input
                   action="click"
+                  aria-required="true"
                   class="ant-input"
                   id="responsive_password"
                   type="password"
@@ -1601,6 +1615,7 @@ exports[`renders ./components/form/demo/control-hooks.md extend context correctl
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="control-hooks_note"
               type="text"
@@ -1638,6 +1653,7 @@ exports[`renders ./components/form/demo/control-hooks.md extend context correctl
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
             >
               <div
@@ -1652,6 +1668,7 @@ exports[`renders ./components/form/demo/control-hooks.md extend context correctl
                     aria-controls="control-hooks_gender_list"
                     aria-haspopup="listbox"
                     aria-owns="control-hooks_gender_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="control-hooks_gender"
@@ -1879,6 +1896,7 @@ exports[`renders ./components/form/demo/control-ref.md extend context correctly
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="control-ref_note"
               type="text"
@@ -1916,6 +1934,7 @@ exports[`renders ./components/form/demo/control-ref.md extend context correctly
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
             >
               <div
@@ -1930,6 +1949,7 @@ exports[`renders ./components/form/demo/control-ref.md extend context correctly
                     aria-controls="control-ref_gender_list"
                     aria-haspopup="listbox"
                     aria-owns="control-ref_gender_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="control-ref_gender"
@@ -5972,6 +5992,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md extend con
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
             >
               <div
@@ -5986,6 +6007,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md extend con
                     aria-controls="dynamic_form_nest_item_area_list"
                     aria-haspopup="listbox"
                     aria-owns="dynamic_form_nest_item_area_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="dynamic_form_nest_item_area"
@@ -6347,6 +6369,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md extend context correctly
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="dynamic_rule_username"
               placeholder="Please input your name"
@@ -6497,6 +6520,7 @@ exports[`renders ./components/form/demo/form-context.md extend context correctly
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="basicForm_group"
               type="text"
@@ -6648,6 +6672,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <input
+                aria-required="true"
                 class="ant-input"
                 id="global_state_username"
                 type="text"
@@ -6721,6 +6746,7 @@ exports[`renders ./components/form/demo/inline-login.md extend context correctly
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="horizontal_login_username"
                 placeholder="Username"
@@ -6775,6 +6801,7 @@ exports[`renders ./components/form/demo/inline-login.md extend context correctly
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="horizontal_login_password"
                 placeholder="Password"
@@ -7209,6 +7236,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.md extend context correc
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="wrap_username"
               type="text"
@@ -7248,6 +7276,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.md extend context correc
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="wrap_password"
               type="text"
@@ -7333,6 +7362,7 @@ exports[`renders ./components/form/demo/nest-messages.md extend context correctl
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="nest-messages_user_name"
               type="text"
@@ -7635,6 +7665,7 @@ exports[`renders ./components/form/demo/normal-login.md extend context correctly
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="normal_login_username"
                 placeholder="Username"
@@ -7689,6 +7720,7 @@ exports[`renders ./components/form/demo/normal-login.md extend context correctly
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="normal_login_password"
                 placeholder="Password"
@@ -7902,6 +7934,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="register_email"
               type="text"
@@ -7943,6 +7976,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
             >
               <input
                 action="click"
+                aria-required="true"
                 class="ant-input"
                 id="register_password"
                 type="password"
@@ -8012,6 +8046,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
             >
               <input
                 action="click"
+                aria-required="true"
                 class="ant-input"
                 id="register_confirm"
                 type="password"
@@ -8124,6 +8159,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="register_nickname"
               type="text"
@@ -8161,6 +8197,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
             >
               <div
@@ -8174,6 +8211,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
                     aria-controls="register_residence_list"
                     aria-haspopup="listbox"
                     aria-owns="register_residence_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="register_residence"
@@ -8521,6 +8559,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
                   </div>
                 </span>
                 <input
+                  aria-required="true"
                   class="ant-input"
                   id="register_phone"
                   type="text"
@@ -8631,6 +8670,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
                     class="ant-input-number-input-wrap"
                   >
                     <input
+                      aria-required="true"
                       autocomplete="off"
                       class="ant-input-number-input"
                       id="register_donation"
@@ -8818,6 +8858,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
             >
               <div
@@ -8832,6 +8873,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
                     aria-controls="register_website_list"
                     aria-haspopup="listbox"
                     aria-owns="register_website_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-input ant-select-selection-search-input"
                     id="register_website"
@@ -8897,6 +8939,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
               data-count="0 / 100"
             >
               <textarea
+                aria-required="true"
                 class="ant-input"
                 id="register_intro"
               />
@@ -8933,6 +8976,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
             >
               <div
@@ -8947,6 +8991,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
                     aria-controls="register_gender_list"
                     aria-haspopup="listbox"
                     aria-owns="register_gender_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="register_gender"
@@ -9129,6 +9174,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
                 style="padding-left:4px;padding-right:4px"
               >
                 <input
+                  aria-required="true"
                   class="ant-input"
                   id="register_captcha"
                   type="text"
@@ -10986,6 +11032,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_date-picker"
                   placeholder="Select date"
@@ -11611,6 +11658,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_date-time-picker"
                   placeholder="Select date"
@@ -13589,6 +13637,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_month-picker"
                   placeholder="Select month"
@@ -13844,6 +13893,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-picker ant-picker-range"
             >
               <div
@@ -15054,6 +15104,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-picker ant-picker-range"
             >
               <div
@@ -17085,6 +17136,7 @@ exports[`renders ./components/form/demo/time-related-controls.md extend context
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_time-picker"
                   placeholder="Select time"
@@ -18748,6 +18800,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
             >
               <div
@@ -18762,6 +18815,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
                     aria-controls="validate_other_select_list"
                     aria-haspopup="listbox"
                     aria-owns="validate_other_select_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="validate_other_select"
@@ -18920,6 +18974,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
             >
               <div
@@ -18942,6 +18997,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
                         aria-controls="validate_other_select-multiple_list"
                         aria-haspopup="listbox"
                         aria-owns="validate_other_select-multiple_list"
+                        aria-required="true"
                         autocomplete="off"
                         class="ant-select-selection-search-input"
                         id="validate_other_select-multiple"
@@ -19475,6 +19531,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-radio-group ant-radio-group-outline"
               id="validate_other_radio-button"
             >
@@ -20094,6 +20151,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
                 >
                   <input
                     accept=""
+                    aria-describedby="validate_other_upload_extra"
                     id="validate_other_upload"
                     style="display:none"
                     type="file"
@@ -20135,6 +20193,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
         </div>
         <div
           class="ant-form-item-extra"
+          id="validate_other_upload_extra"
         >
           longgggggggggggggggggggggggggggggggggg
         </div>
@@ -26406,6 +26465,7 @@ exports[`renders ./components/form/demo/warning-only.md extend context correctly
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="url"
               placeholder="input placeholder"
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index fea8e64a00..d378942f66 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -41,6 +41,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-0"
                     placeholder="placeholder"
@@ -84,6 +85,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                   class="ant-form-item-control-input-content"
                 >
                   <div
+                    aria-required="true"
                     class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                   >
                     <div
@@ -98,6 +100,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                           aria-controls="advanced_search_field-1_list"
                           aria-haspopup="listbox"
                           aria-owns="advanced_search_field-1_list"
+                          aria-required="true"
                           autocomplete="off"
                           class="ant-select-selection-search-input"
                           id="advanced_search_field-1"
@@ -180,6 +183,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-2"
                     placeholder="placeholder"
@@ -223,6 +227,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-3"
                     placeholder="placeholder"
@@ -266,6 +271,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                   class="ant-form-item-control-input-content"
                 >
                   <div
+                    aria-required="true"
                     class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
                   >
                     <div
@@ -280,6 +286,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                           aria-controls="advanced_search_field-4_list"
                           aria-haspopup="listbox"
                           aria-owns="advanced_search_field-4_list"
+                          aria-required="true"
                           autocomplete="off"
                           class="ant-select-selection-search-input"
                           id="advanced_search_field-4"
@@ -362,6 +369,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
                   class="ant-form-item-control-input-content"
                 >
                   <input
+                    aria-required="true"
                     class="ant-input"
                     id="advanced_search_field-5"
                     placeholder="placeholder"
@@ -467,6 +475,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="basic_username"
               type="text"
@@ -508,6 +517,7 @@ exports[`renders ./components/form/demo/basic.md correctly 1`] = `
             >
               <input
                 action="click"
+                aria-required="true"
                 class="ant-input"
                 id="basic_password"
                 type="password"
@@ -651,6 +661,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <input
+                aria-required="true"
                 class="ant-input"
                 id="basic_username"
                 type="text"
@@ -692,6 +703,7 @@ Array [
               >
                 <input
                   action="click"
+                  aria-required="true"
                   class="ant-input"
                   id="basic_password"
                   type="password"
@@ -913,6 +925,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <input
+                aria-required="true"
                 class="ant-input"
                 id="responsive_username"
                 type="text"
@@ -954,6 +967,7 @@ Array [
               >
                 <input
                   action="click"
+                  aria-required="true"
                   class="ant-input"
                   id="responsive_password"
                   type="password"
@@ -1223,6 +1237,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="control-hooks_note"
               type="text"
@@ -1260,6 +1275,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
             >
               <div
@@ -1274,6 +1290,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
                     aria-controls="control-hooks_gender_list"
                     aria-haspopup="listbox"
                     aria-owns="control-hooks_gender_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="control-hooks_gender"
@@ -1402,6 +1419,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="control-ref_note"
               type="text"
@@ -1439,6 +1457,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
             >
               <div
@@ -1453,6 +1472,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
                     aria-controls="control-ref_gender_list"
                     aria-haspopup="listbox"
                     aria-owns="control-ref_gender_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="control-ref_gender"
@@ -3455,6 +3475,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md correctly
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
             >
               <div
@@ -3469,6 +3490,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md correctly
                     aria-controls="dynamic_form_nest_item_area_list"
                     aria-haspopup="listbox"
                     aria-owns="dynamic_form_nest_item_area_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="dynamic_form_nest_item_area"
@@ -3748,6 +3770,7 @@ exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="dynamic_rule_username"
               placeholder="Please input your name"
@@ -3898,6 +3921,7 @@ exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="basicForm_group"
               type="text"
@@ -4049,6 +4073,7 @@ Array [
               class="ant-form-item-control-input-content"
             >
               <input
+                aria-required="true"
                 class="ant-input"
                 id="global_state_username"
                 type="text"
@@ -4122,6 +4147,7 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="horizontal_login_username"
                 placeholder="Username"
@@ -4176,6 +4202,7 @@ exports[`renders ./components/form/demo/inline-login.md correctly 1`] = `
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="horizontal_login_password"
                 placeholder="Password"
@@ -4610,6 +4637,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="wrap_username"
               type="text"
@@ -4649,6 +4677,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="wrap_password"
               type="text"
@@ -4734,6 +4763,7 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="nest-messages_user_name"
               type="text"
@@ -5036,6 +5066,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="normal_login_username"
                 placeholder="Username"
@@ -5090,6 +5121,7 @@ exports[`renders ./components/form/demo/normal-login.md correctly 1`] = `
                 </span>
               </span>
               <input
+                aria-required="true"
                 class="ant-input"
                 id="normal_login_password"
                 placeholder="Password"
@@ -5303,6 +5335,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="register_email"
               type="text"
@@ -5344,6 +5377,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             >
               <input
                 action="click"
+                aria-required="true"
                 class="ant-input"
                 id="register_password"
                 type="password"
@@ -5413,6 +5447,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             >
               <input
                 action="click"
+                aria-required="true"
                 class="ant-input"
                 id="register_confirm"
                 type="password"
@@ -5501,6 +5536,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="register_nickname"
               type="text"
@@ -5538,6 +5574,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-cascader ant-select-in-form-item ant-select-single ant-select-allow-clear ant-select-show-arrow"
             >
               <div
@@ -5551,6 +5588,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
                     aria-controls="register_residence_list"
                     aria-haspopup="listbox"
                     aria-owns="register_residence_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="register_residence"
@@ -5726,6 +5764,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
                   </div>
                 </span>
                 <input
+                  aria-required="true"
                   class="ant-input"
                   id="register_phone"
                   type="text"
@@ -5836,6 +5875,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
                     class="ant-input-number-input-wrap"
                   >
                     <input
+                      aria-required="true"
                       autocomplete="off"
                       class="ant-input-number-input"
                       id="register_donation"
@@ -5941,6 +5981,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-auto-complete ant-select-single ant-select-customize-input ant-select-show-search"
             >
               <div
@@ -5955,6 +5996,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
                     aria-controls="register_website_list"
                     aria-haspopup="listbox"
                     aria-owns="register_website_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-input ant-select-selection-search-input"
                     id="register_website"
@@ -6006,6 +6048,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
               data-count="0 / 100"
             >
               <textarea
+                aria-required="true"
                 class="ant-input"
                 id="register_intro"
               />
@@ -6042,6 +6085,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-single ant-select-show-arrow"
             >
               <div
@@ -6056,6 +6100,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
                     aria-controls="register_gender_list"
                     aria-haspopup="listbox"
                     aria-owns="register_gender_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="register_gender"
@@ -6139,6 +6184,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
                 style="padding-left:4px;padding-right:4px"
               >
                 <input
+                  aria-required="true"
                   class="ant-input"
                   id="register_captcha"
                   type="text"
@@ -7186,6 +7232,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_date-picker"
                   placeholder="Select date"
@@ -7257,6 +7304,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_date-time-picker"
                   placeholder="Select date"
@@ -7328,6 +7376,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_month-picker"
                   placeholder="Select month"
@@ -7393,6 +7442,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-picker ant-picker-range"
             >
               <div
@@ -7506,6 +7556,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-picker ant-picker-range"
             >
               <div
@@ -7625,6 +7676,7 @@ exports[`renders ./components/form/demo/time-related-controls.md correctly 1`] =
                 class="ant-picker-input"
               >
                 <input
+                  aria-required="true"
                   autocomplete="off"
                   id="time_related_controls_time-picker"
                   placeholder="Select time"
@@ -7923,6 +7975,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-has-feedback ant-select-single ant-select-show-arrow"
             >
               <div
@@ -7937,6 +7990,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                     aria-controls="validate_other_select_list"
                     aria-haspopup="listbox"
                     aria-owns="validate_other_select_list"
+                    aria-required="true"
                     autocomplete="off"
                     class="ant-select-selection-search-input"
                     id="validate_other_select"
@@ -8013,6 +8067,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-select ant-select-in-form-item ant-select-multiple ant-select-show-search"
             >
               <div
@@ -8035,6 +8090,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                         aria-controls="validate_other_select-multiple_list"
                         aria-haspopup="listbox"
                         aria-owns="validate_other_select-multiple_list"
+                        aria-required="true"
                         autocomplete="off"
                         class="ant-select-selection-search-input"
                         id="validate_other_select-multiple"
@@ -8463,6 +8519,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <div
+              aria-required="true"
               class="ant-radio-group ant-radio-group-outline"
               id="validate_other_radio-button"
             >
@@ -9082,6 +9139,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 >
                   <input
                     accept=""
+                    aria-describedby="validate_other_upload_extra"
                     id="validate_other_upload"
                     style="display:none"
                     type="file"
@@ -9123,6 +9181,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
         </div>
         <div
           class="ant-form-item-extra"
+          id="validate_other_upload_extra"
         >
           longgggggggggggggggggggggggggggggggggg
         </div>
@@ -11063,6 +11122,7 @@ exports[`renders ./components/form/demo/warning-only.md correctly 1`] = `
             class="ant-form-item-control-input-content"
           >
             <input
+              aria-required="true"
               class="ant-input"
               id="url"
               placeholder="input placeholder"
diff --git a/components/form/__tests__/index.test.js b/components/form/__tests__/index.test.js
index 31243c9ab6..c4263bbbcb 100644
--- a/components/form/__tests__/index.test.js
+++ b/components/form/__tests__/index.test.js
@@ -203,6 +203,158 @@ describe('Form', () => {
     );
   });
 
+  it('input element should have the prop aria-describedby pointing to the help id when there is a help message', () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="test" help="This is a help">
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-describedby')).toBe('test_help');
+    const help = wrapper.find('.ant-form-item-explain');
+    expect(help.prop('id')).toBe('test_help');
+  });
+
+  it('input element should not have the prop aria-describedby pointing to the help id when there is a help message and name is not defined', () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item help="This is a help">
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-describedby')).toBeUndefined();
+    const help = wrapper.find('.ant-form-item-explain');
+    expect(help.prop('id')).toBeUndefined();
+  });
+
+  it('input element should have the prop aria-describedby concatenated with the form name pointing to the help id when there is a help message', () => {
+    const wrapper = mount(
+      <Form name="form">
+        <Form.Item name="test" help="This is a help">
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-describedby')).toBe('form_test_help');
+    const help = wrapper.find('.ant-form-item-explain');
+    expect(help.prop('id')).toBe('form_test_help');
+  });
+
+  it('input element should have the prop aria-describedby pointing to the help id when there are errors', async () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="test" rules={[{ len: 3 }, { type: 'number' }]}>
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    input.simulate('change', { target: { value: 'Invalid number' } });
+    await sleep(800);
+    wrapper.update();
+
+    const inputChanged = wrapper.find('input');
+    expect(inputChanged.prop('aria-describedby')).toBe('test_help');
+    const help = wrapper.find('.ant-form-item-explain');
+    expect(help.prop('id')).toBe('test_help');
+  });
+
+  it('input element should have the prop aria-invalid when there are errors', async () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="test" rules={[{ len: 3 }, { type: 'number' }]}>
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    input.simulate('change', { target: { value: 'Invalid number' } });
+    await sleep(800);
+    wrapper.update();
+
+    const inputChanged = wrapper.find('input');
+    expect(inputChanged.prop('aria-invalid')).toBe('true');
+  });
+
+  it('input element should have the prop aria-required when the prop `required` is true', async () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="test" required>
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-required')).toBe('true');
+  });
+
+  it('input element should have the prop aria-required when there is a rule with required', async () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="test" rules={[{ required: true }]}>
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-required')).toBe('true');
+  });
+
+  it('input element should have the prop aria-describedby pointing to the extra id when there is a extra message', () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="test" extra="This is a extra message">
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-describedby')).toBe('test_extra');
+    const extra = wrapper.find('.ant-form-item-extra');
+    expect(extra.prop('id')).toBe('test_extra');
+  });
+
+  it('input element should not have the prop aria-describedby pointing to the extra id when there is a extra message and name is not defined', () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item extra="This is a extra message">
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-describedby')).toBeUndefined();
+    const extra = wrapper.find('.ant-form-item-extra');
+    expect(extra.prop('id')).toBeUndefined();
+  });
+
+  it('input element should have the prop aria-describedby pointing to the help and extra id when there is a help and extra message', () => {
+    const wrapper = mount(
+      <Form>
+        <Form.Item name="test" help="This is a help" extra="This is a extra message">
+          <input />
+        </Form.Item>
+      </Form>,
+    );
+
+    const input = wrapper.find('input');
+    expect(input.prop('aria-describedby')).toBe('test_help test_extra');
+  });
+
   describe('scrollToField', () => {
     function test(name, genForm) {
       it(name, () => {
@@ -710,9 +862,7 @@ describe('Form', () => {
     await sleep(100);
     wrapper.update();
     await sleep(100);
-    expect(wrapper.find('.ant-form-item-explain div').getDOMNode().getAttribute('role')).toBe(
-      'alert',
-    );
+    expect(wrapper.find('.ant-form-item-explain').getDOMNode().getAttribute('role')).toBe('alert');
   });
 
   it('return same form instance', () => {
diff --git a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
index b825a82e7c..ea48491d78 100644
--- a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -112,6 +112,7 @@ exports[`renders ./components/mentions/demo/form.md extend context correctly 1`]
               class="ant-mentions"
             >
               <textarea
+                aria-required="true"
                 class="rc-textarea"
                 id="bio"
                 placeholder="You can use @ to ref user here"
diff --git a/components/mentions/__tests__/__snapshots__/demo.test.ts.snap b/components/mentions/__tests__/__snapshots__/demo.test.ts.snap
index 0fc796f533..c52ea38caa 100644
--- a/components/mentions/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/mentions/__tests__/__snapshots__/demo.test.ts.snap
@@ -112,6 +112,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
               class="ant-mentions"
             >
               <textarea
+                aria-required="true"
                 class="rc-textarea"
                 id="bio"
                 placeholder="You can use @ to ref user here"
diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md
index d131995dc3..6d94bf9b5c 100644
--- a/components/menu/index.zh-CN.md
+++ b/components/menu/index.zh-CN.md
@@ -120,7 +120,7 @@ return <Menu items={items} />;
 #### SubMenuType
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- | --- |
+| --- | --- | --- | --- | --- |
 | children | 子菜单的菜单项 | [ItemType\[\]](#ItemType) | - |  |
 | disabled | 是否禁用 | boolean | false |  |
 | icon | 菜单图标 | ReactNode | - |  |

From 76eec57ddcf1b23ad458d03e016d074d8472cad5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Fri, 26 Aug 2022 14:12:42 +0800
Subject: [PATCH 19/22] chore: Update snapshot

---
 .../__snapshots__/components.test.tsx.snap         | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
index e824b8d0ba..a12e4f2cfc 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
@@ -15806,10 +15806,10 @@ exports[`ConfigProvider components Form configProvider 1`] = `
         >
           <div
             class="config-form-item-explain config-show-help-appear config-show-help-appear-start config-show-help config-form-item-explain-connected"
+            role="alert"
           >
             <div
               class="config-show-help-item-appear config-show-help-item-appear-start config-show-help-item config-form-item-explain-error"
-              role="alert"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15854,10 +15854,10 @@ exports[`ConfigProvider components Form configProvider componentDisabled 1`] = `
         >
           <div
             class="config-form-item-explain config-show-help-appear config-show-help-appear-start config-show-help config-form-item-explain-connected"
+            role="alert"
           >
             <div
               class="config-show-help-item-appear config-show-help-item-appear-start config-show-help-item config-form-item-explain-error"
-              role="alert"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15901,10 +15901,10 @@ exports[`ConfigProvider components Form configProvider componentSize large 1`] =
         >
           <div
             class="config-form-item-explain config-show-help-appear config-show-help-appear-start config-show-help config-form-item-explain-connected"
+            role="alert"
           >
             <div
               class="config-show-help-item-appear config-show-help-item-appear-start config-show-help-item config-form-item-explain-error"
-              role="alert"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15948,10 +15948,10 @@ exports[`ConfigProvider components Form configProvider componentSize middle 1`]
         >
           <div
             class="config-form-item-explain config-show-help-appear config-show-help-appear-start config-show-help config-form-item-explain-connected"
+            role="alert"
           >
             <div
               class="config-show-help-item-appear config-show-help-item-appear-start config-show-help-item config-form-item-explain-error"
-              role="alert"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -15995,10 +15995,10 @@ exports[`ConfigProvider components Form configProvider virtual and dropdownMatch
         >
           <div
             class="ant-form-item-explain ant-show-help-appear ant-show-help-appear-start ant-show-help ant-form-item-explain-connected"
+            role="alert"
           >
             <div
               class="ant-show-help-item-appear ant-show-help-item-appear-start ant-show-help-item ant-form-item-explain-error"
-              role="alert"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -16042,10 +16042,10 @@ exports[`ConfigProvider components Form normal 1`] = `
         >
           <div
             class="ant-form-item-explain ant-show-help-appear ant-show-help-appear-start ant-show-help ant-form-item-explain-connected"
+            role="alert"
           >
             <div
               class="ant-show-help-item-appear ant-show-help-item-appear-start ant-show-help-item ant-form-item-explain-error"
-              role="alert"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light
@@ -16089,10 +16089,10 @@ exports[`ConfigProvider components Form prefixCls 1`] = `
         >
           <div
             class="prefix-Form-item-explain ant-show-help-appear ant-show-help-appear-start ant-show-help prefix-Form-item-explain-connected"
+            role="alert"
           >
             <div
               class="ant-show-help-item-appear ant-show-help-item-appear-start ant-show-help-item prefix-Form-item-explain-error"
-              role="alert"
               style="height: 0px; opacity: 0;"
             >
               Bamboo is Light

From 6b658dab76499693928be776cebd6b6c1b60e8de Mon Sep 17 00:00:00 2001
From: yykoypj <601924094@qq.com>
Date: Fri, 26 Aug 2022 17:17:13 +0800
Subject: [PATCH 20/22] feat: switch visible to open for Tooltip (#37241)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: switch visible to open for Tooltip & Popover & Popconfirm

* fix lint

* fix: merge state

* chore: Update ts part

* test: add legacy test

* test: fix test case

Co-authored-by: 二货机器人 <smith3816@gmail.com>
---
 .../__tests__/components.test.tsx             |   6 +-
 .../locale-provider/__tests__/index.test.tsx  |   2 +-
 components/menu/MenuItem.tsx                  |   4 +-
 components/popconfirm/__tests__/index.test.js |  54 ++++-----
 components/popconfirm/demo/async.md           |  10 +-
 components/popconfirm/demo/dynamic-trigger.md |  18 +--
 components/popconfirm/demo/promise.md         |   6 +-
 components/popconfirm/index.tsx               |  37 +++---
 components/popover/__tests__/index.test.tsx   |   2 +-
 components/popover/demo/control.md            |  16 +--
 components/popover/demo/hover-with-click.md   |  16 +--
 components/slider/SliderTooltip.tsx           |   6 +-
 components/slider/__tests__/index.test.tsx    |   2 +-
 components/slider/index.tsx                   |   2 +-
 .../table/__tests__/Table.filter.test.js      |   2 +-
 components/tooltip/__tests__/tooltip.test.js  | 106 ++++++++++++++++--
 components/tooltip/index.en-US.md             |   6 +-
 components/tooltip/index.tsx                  |  75 +++++++++++--
 components/tooltip/index.zh-CN.md             |   6 +-
 .../typography/Base/EllipsisTooltip.tsx       |   2 +-
 site/theme/template/Content/Demo/index.jsx    |  29 +++--
 .../template/IconDisplay/IconPicSearcher.tsx  |   2 +-
 site/theme/template/Layout/Header/index.tsx   |   4 +-
 23 files changed, 270 insertions(+), 143 deletions(-)

diff --git a/components/config-provider/__tests__/components.test.tsx b/components/config-provider/__tests__/components.test.tsx
index 2f02715904..4e3afc4edd 100644
--- a/components/config-provider/__tests__/components.test.tsx
+++ b/components/config-provider/__tests__/components.test.tsx
@@ -417,7 +417,7 @@ describe('ConfigProvider', () => {
     // Popconfirm
     testPair('Popconfirm', props => (
       <div>
-        <Popconfirm {...props} visible>
+        <Popconfirm {...props} open>
           <span>Bamboo</span>
         </Popconfirm>
       </div>
@@ -426,7 +426,7 @@ describe('ConfigProvider', () => {
     // Popover
     testPair('Popover', props => (
       <div>
-        <Popover {...props} visible>
+        <Popover {...props} open>
           <span>Light</span>
         </Popover>
       </div>
@@ -555,7 +555,7 @@ describe('ConfigProvider', () => {
 
     // Tooltip
     testPair('Tooltip', props => (
-      <Tooltip {...props} title="Bamboo" visible>
+      <Tooltip {...props} title="Bamboo" open>
         <span>Light</span>
       </Tooltip>
     ));
diff --git a/components/locale-provider/__tests__/index.test.tsx b/components/locale-provider/__tests__/index.test.tsx
index edc5a2b7f3..0929250a63 100644
--- a/components/locale-provider/__tests__/index.test.tsx
+++ b/components/locale-provider/__tests__/index.test.tsx
@@ -177,7 +177,7 @@ const App: React.FC = () => (
     <DatePicker open />
     <TimePicker open defaultOpenValue={moment()} />
     <RangePicker open style={{ width: 200 }} />
-    <Popconfirm title="Question?" visible>
+    <Popconfirm title="Question?" open>
       <a>Click to confirm</a>
     </Popconfirm>
     <Transfer dataSource={[]} showSearch targetKeys={[]} render={(item: any) => item.title} />
diff --git a/components/menu/MenuItem.tsx b/components/menu/MenuItem.tsx
index 3808501391..14d781c254 100644
--- a/components/menu/MenuItem.tsx
+++ b/components/menu/MenuItem.tsx
@@ -55,9 +55,9 @@ export default class MenuItem extends React.Component<MenuItemProps> {
 
     if (!siderCollapsed && !inlineCollapsed) {
       tooltipProps.title = null;
-      // Reset `visible` to fix control mode tooltip display not correct
+      // Reset `open` to fix control mode tooltip display not correct
       // ref: https://github.com/ant-design/ant-design/issues/16742
-      tooltipProps.visible = false;
+      tooltipProps.open = false;
     }
     const childrenLength = toArray(children).length;
 
diff --git a/components/popconfirm/__tests__/index.test.js b/components/popconfirm/__tests__/index.test.js
index 12ee74d2b9..f234153af0 100644
--- a/components/popconfirm/__tests__/index.test.js
+++ b/components/popconfirm/__tests__/index.test.js
@@ -23,7 +23,7 @@ describe('Popconfirm', () => {
   });
 
   it('should popup Popconfirm dialog', () => {
-    const onVisibleChange = jest.fn();
+    const onOpenChange = jest.fn();
 
     const wrapper = mount(
       <Popconfirm
@@ -32,7 +32,7 @@ describe('Popconfirm', () => {
         cancelText="No"
         mouseEnterDelay={0}
         mouseLeaveDelay={0}
-        onVisibleChange={onVisibleChange}
+        onOpenChange={onOpenChange}
       >
         <span>Delete</span>
       </Popconfirm>,
@@ -40,11 +40,11 @@ describe('Popconfirm', () => {
 
     const triggerNode = wrapper.find('span').at(0);
     triggerNode.simulate('click');
-    expect(onVisibleChange).toHaveBeenLastCalledWith(true, undefined);
+    expect(onOpenChange).toHaveBeenLastCalledWith(true, undefined);
     expect(wrapper.find('.popconfirm-test').length).toBe(1);
 
     triggerNode.simulate('click');
-    expect(onVisibleChange).toHaveBeenLastCalledWith(false, undefined);
+    expect(onOpenChange).toHaveBeenLastCalledWith(false, undefined);
   });
 
   it('should show overlay when trigger is clicked', async () => {
@@ -88,7 +88,7 @@ describe('Popconfirm', () => {
     expect(popup.innerHTML).toMatchSnapshot();
   });
 
-  it('should be controlled by visible', () => {
+  it('should be controlled by open', () => {
     const ref = React.createRef();
     jest.useFakeTimers();
     const popconfirm = mount(
@@ -97,10 +97,10 @@ describe('Popconfirm', () => {
       </Popconfirm>,
     );
     expect(ref.current.getPopupDomNode()).toBeFalsy();
-    popconfirm.setProps({ visible: true });
+    popconfirm.setProps({ open: true });
     expect(ref.current.getPopupDomNode()).toBeTruthy();
     expect(ref.current.getPopupDomNode().className).not.toContain('ant-popover-hidden');
-    popconfirm.setProps({ visible: false });
+    popconfirm.setProps({ open: false });
     popconfirm.update(); // https://github.com/enzymejs/enzyme/issues/2305
     act(() => {
       jest.runAllTimers();
@@ -112,14 +112,9 @@ describe('Popconfirm', () => {
   it('should trigger onConfirm and onCancel', () => {
     const confirm = jest.fn();
     const cancel = jest.fn();
-    const onVisibleChange = jest.fn();
+    const onOpenChange = jest.fn();
     const popconfirm = mount(
-      <Popconfirm
-        title="code"
-        onConfirm={confirm}
-        onCancel={cancel}
-        onVisibleChange={onVisibleChange}
-      >
+      <Popconfirm title="code" onConfirm={confirm} onCancel={cancel} onOpenChange={onOpenChange}>
         <span>show me your code</span>
       </Popconfirm>,
     );
@@ -127,11 +122,11 @@ describe('Popconfirm', () => {
     triggerNode.simulate('click');
     popconfirm.find('.ant-btn-primary').simulate('click');
     expect(confirm).toHaveBeenCalled();
-    expect(onVisibleChange).toHaveBeenLastCalledWith(false, eventObject);
+    expect(onOpenChange).toHaveBeenLastCalledWith(false, eventObject);
     triggerNode.simulate('click');
     popconfirm.find('.ant-btn').at(0).simulate('click');
     expect(cancel).toHaveBeenCalled();
-    expect(onVisibleChange).toHaveBeenLastCalledWith(false, eventObject);
+    expect(onOpenChange).toHaveBeenLastCalledWith(false, eventObject);
   });
 
   it('should support onConfirm to return Promise', async () => {
@@ -139,20 +134,20 @@ describe('Popconfirm', () => {
       new Promise(res => {
         setTimeout(res, 300);
       });
-    const onVisibleChange = jest.fn();
+    const onOpenChange = jest.fn();
     const popconfirm = mount(
-      <Popconfirm title="code" onConfirm={confirm} onVisibleChange={onVisibleChange}>
+      <Popconfirm title="code" onConfirm={confirm} onOpenChange={onOpenChange}>
         <span>show me your code</span>
       </Popconfirm>,
     );
 
     const triggerNode = popconfirm.find('span').at(0);
     triggerNode.simulate('click');
-    expect(onVisibleChange).toHaveBeenCalledTimes(1);
+    expect(onOpenChange).toHaveBeenCalledTimes(1);
 
     popconfirm.find('.ant-btn').at(0).simulate('click');
     await sleep(400);
-    expect(onVisibleChange).toHaveBeenCalledWith(false, eventObject);
+    expect(onOpenChange).toHaveBeenCalledWith(false, eventObject);
   });
 
   it('should support customize icon', () => {
@@ -171,7 +166,7 @@ describe('Popconfirm', () => {
     const btnPrefixCls = 'custom-btn';
     const wrapper = mount(
       <Popconfirm
-        visible
+        open
         title="x"
         prefixCls="custom-popconfirm"
         okButtonProps={{ prefixCls: btnPrefixCls }}
@@ -185,10 +180,10 @@ describe('Popconfirm', () => {
     expect(wrapper.find('.custom-btn').length).toBeGreaterThan(0);
   });
 
-  it('should support defaultVisible', () => {
+  it('should support defaultOpen', () => {
     const ref = React.createRef();
     mount(
-      <Popconfirm ref={ref} title="code" defaultVisible>
+      <Popconfirm ref={ref} title="code" defaultOpen>
         <span>show me your code</span>
       </Popconfirm>,
     );
@@ -209,22 +204,17 @@ describe('Popconfirm', () => {
   });
 
   it('should be closed by pressing ESC', () => {
-    const onVisibleChange = jest.fn();
+    const onOpenChange = jest.fn();
     const wrapper = mount(
-      <Popconfirm
-        title="title"
-        mouseEnterDelay={0}
-        mouseLeaveDelay={0}
-        onVisibleChange={onVisibleChange}
-      >
+      <Popconfirm title="title" mouseEnterDelay={0} mouseLeaveDelay={0} onOpenChange={onOpenChange}>
         <span>Delete</span>
       </Popconfirm>,
     );
     const triggerNode = wrapper.find('span').at(0);
     triggerNode.simulate('click');
-    expect(onVisibleChange).toHaveBeenLastCalledWith(true, undefined);
+    expect(onOpenChange).toHaveBeenLastCalledWith(true, undefined);
     triggerNode.simulate('keydown', { key: 'Escape', keyCode: 27 });
-    expect(onVisibleChange).toHaveBeenLastCalledWith(false, eventObject);
+    expect(onOpenChange).toHaveBeenLastCalledWith(false, eventObject);
   });
 
   it('should not warn memory leaking if setState in async callback', async () => {
diff --git a/components/popconfirm/demo/async.md b/components/popconfirm/demo/async.md
index 6836243042..8a44b68f82 100644
--- a/components/popconfirm/demo/async.md
+++ b/components/popconfirm/demo/async.md
@@ -18,31 +18,31 @@ import { Button, Popconfirm } 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 showPopconfirm = () => {
-    setVisible(true);
+    setOpen(true);
   };
 
   const handleOk = () => {
     setConfirmLoading(true);
 
     setTimeout(() => {
-      setVisible(false);
+      setOpen(false);
       setConfirmLoading(false);
     }, 2000);
   };
 
   const handleCancel = () => {
     console.log('Clicked cancel button');
-    setVisible(false);
+    setOpen(false);
   };
 
   return (
     <Popconfirm
       title="Title"
-      visible={visible}
+      open={open}
       onConfirm={handleOk}
       okButtonProps={{ loading: confirmLoading }}
       onCancel={handleCancel}
diff --git a/components/popconfirm/demo/dynamic-trigger.md b/components/popconfirm/demo/dynamic-trigger.md
index ddbdf0e209..23ca9cc8c5 100755
--- a/components/popconfirm/demo/dynamic-trigger.md
+++ b/components/popconfirm/demo/dynamic-trigger.md
@@ -18,7 +18,7 @@ import { message, Popconfirm, Switch } from 'antd';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
   const [condition, setCondition] = useState(true);
 
   const changeCondition = (checked: boolean) => {
@@ -26,18 +26,18 @@ const App: React.FC = () => {
   };
 
   const confirm = () => {
-    setVisible(false);
+    setOpen(false);
     message.success('Next step.');
   };
 
   const cancel = () => {
-    setVisible(false);
+    setOpen(false);
     message.error('Click on cancel.');
   };
 
-  const handleVisibleChange = (newVisible: boolean) => {
-    if (!newVisible) {
-      setVisible(newVisible);
+  const handleOpenChange = (newOpen: boolean) => {
+    if (!newOpen) {
+      setOpen(newOpen);
       return;
     }
     // Determining condition before show the popconfirm.
@@ -45,7 +45,7 @@ const App: React.FC = () => {
     if (condition) {
       confirm(); // next step
     } else {
-      setVisible(newVisible);
+      setOpen(newOpen);
     }
   };
 
@@ -53,8 +53,8 @@ const App: React.FC = () => {
     <div>
       <Popconfirm
         title="Are you sure delete this task?"
-        visible={visible}
-        onVisibleChange={handleVisibleChange}
+        open={open}
+        onOpenChange={handleOpenChange}
         onConfirm={confirm}
         onCancel={cancel}
         okText="Yes"
diff --git a/components/popconfirm/demo/promise.md b/components/popconfirm/demo/promise.md
index a3c5de2b16..4b21ef7309 100644
--- a/components/popconfirm/demo/promise.md
+++ b/components/popconfirm/demo/promise.md
@@ -25,11 +25,7 @@ const App: React.FC = () => {
     });
 
   return (
-    <Popconfirm
-      title="Title"
-      onConfirm={confirm}
-      onVisibleChange={() => console.log('visible change')}
-    >
+    <Popconfirm title="Title" onConfirm={confirm} onOpenChange={() => console.log('open change')}>
       <Button type="primary">Open Popconfirm with Promise</Button>
     </Popconfirm>
   );
diff --git a/components/popconfirm/index.tsx b/components/popconfirm/index.tsx
index e87364aff4..db1539cd8c 100644
--- a/components/popconfirm/index.tsx
+++ b/components/popconfirm/index.tsx
@@ -23,56 +23,65 @@ export interface PopconfirmProps extends AbstractTooltipProps {
   cancelButtonProps?: ButtonProps;
   showCancel?: boolean;
   icon?: React.ReactNode;
+  /**
+   * @deprecated `onVisibleChange` is deprecated which will be removed in next major version. Please
+   *   use `onOpenChange` instead.
+   */
   onVisibleChange?: (
     visible: boolean,
     e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLDivElement>,
   ) => void;
+  onOpenChange?: (
+    open: boolean,
+    e?: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLDivElement>,
+  ) => void;
 }
 
 export interface PopconfirmState {
-  visible?: boolean;
+  open?: boolean;
 }
 
 const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
-  const [visible, setVisible] = useMergedState(false, {
-    value: props.visible,
-    defaultValue: props.defaultVisible,
+  const [open, setOpen] = useMergedState(false, {
+    value: props.open !== undefined ? props.open : props.visible,
+    defaultValue: props.defaultOpen !== undefined ? props.defaultOpen : props.defaultVisible,
   });
 
   // const isDestroyed = useDestroyed();
 
-  const settingVisible = (
+  const settingOpen = (
     value: boolean,
     e?: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLDivElement>,
   ) => {
-    setVisible(value, true);
+    setOpen(value, true);
     props.onVisibleChange?.(value, e);
+    props.onOpenChange?.(value, e);
   };
 
   const close = (e: React.MouseEvent<HTMLButtonElement>) => {
-    settingVisible(false, e);
+    settingOpen(false, e);
   };
 
   const onConfirm = (e: React.MouseEvent<HTMLButtonElement>) => props.onConfirm?.call(this, e);
 
   const onCancel = (e: React.MouseEvent<HTMLButtonElement>) => {
-    settingVisible(false, e);
+    settingOpen(false, e);
     props.onCancel?.call(this, e);
   };
 
   const onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-    if (e.keyCode === KeyCode.ESC && visible) {
-      settingVisible(false, e);
+    if (e.keyCode === KeyCode.ESC && open) {
+      settingOpen(false, e);
     }
   };
 
-  const onVisibleChange = (value: boolean) => {
+  const onOpenChange = (value: boolean) => {
     const { disabled } = props;
     if (disabled) {
       return;
     }
-    settingVisible(value);
+    settingOpen(value);
   };
 
   const {
@@ -91,8 +100,8 @@ const Popconfirm = React.forwardRef<unknown, PopconfirmProps>((props, ref) => {
       {...restProps}
       prefixCls={prefixCls}
       placement={placement}
-      onVisibleChange={onVisibleChange}
-      visible={visible}
+      onOpenChange={onOpenChange}
+      open={open}
       _overlay={
         <Overlay
           {...props}
diff --git a/components/popover/__tests__/index.test.tsx b/components/popover/__tests__/index.test.tsx
index 118301db64..fc6f48610f 100644
--- a/components/popover/__tests__/index.test.tsx
+++ b/components/popover/__tests__/index.test.tsx
@@ -90,7 +90,7 @@ describe('Popover', () => {
   it(`should be rendered correctly in RTL direction`, () => {
     const wrapper = render(
       <ConfigProvider direction="rtl">
-        <Popover title="RTL" visible>
+        <Popover title="RTL" open>
           <span>show me your Rtl demo</span>
         </Popover>
       </ConfigProvider>,
diff --git a/components/popover/demo/control.md b/components/popover/demo/control.md
index e4f90a3ebd..813512ab74 100755
--- a/components/popover/demo/control.md
+++ b/components/popover/demo/control.md
@@ -7,25 +7,25 @@ title:
 
 ## zh-CN
 
-使用 `visible` 属性控制浮层显示。
+使用 `open` 属性控制浮层显示。
 
 ## en-US
 
-Use `visible` prop to control the display of the card.
+Use `open` prop to control the display of the card.
 
 ```tsx
 import { Button, Popover } from 'antd';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const hide = () => {
-    setVisible(false);
+    setOpen(false);
   };
 
-  const handleVisibleChange = (newVisible: boolean) => {
-    setVisible(newVisible);
+  const handleOpenChange = (newOpen: boolean) => {
+    setOpen(newOpen);
   };
 
   return (
@@ -33,8 +33,8 @@ const App: React.FC = () => {
       content={<a onClick={hide}>Close</a>}
       title="Title"
       trigger="click"
-      visible={visible}
-      onVisibleChange={handleVisibleChange}
+      open={open}
+      onOpenChange={handleOpenChange}
     >
       <Button type="primary">Click me</Button>
     </Popover>
diff --git a/components/popover/demo/hover-with-click.md b/components/popover/demo/hover-with-click.md
index e06a82f78a..b0f488ce90 100644
--- a/components/popover/demo/hover-with-click.md
+++ b/components/popover/demo/hover-with-click.md
@@ -26,14 +26,14 @@ const App: React.FC = () => {
     setHovered(false);
   };
 
-  const handleHoverChange = (visible: boolean) => {
-    setHovered(visible);
+  const handleHoverChange = (open: boolean) => {
+    setHovered(open);
     setClicked(false);
   };
 
-  const handleClickChange = (visible: boolean) => {
+  const handleClickChange = (open: boolean) => {
     setHovered(false);
-    setClicked(visible);
+    setClicked(open);
   };
 
   const hoverContent = <div>This is hover content.</div>;
@@ -44,8 +44,8 @@ const App: React.FC = () => {
       content={hoverContent}
       title="Hover title"
       trigger="hover"
-      visible={hovered}
-      onVisibleChange={handleHoverChange}
+      open={hovered}
+      onOpenChange={handleHoverChange}
     >
       <Popover
         content={
@@ -56,8 +56,8 @@ const App: React.FC = () => {
         }
         title="Click title"
         trigger="click"
-        visible={clicked}
-        onVisibleChange={handleClickChange}
+        open={clicked}
+        onOpenChange={handleClickChange}
       >
         <Button>Hover and click / 悬停并单击</Button>
       </Popover>
diff --git a/components/slider/SliderTooltip.tsx b/components/slider/SliderTooltip.tsx
index 2207d98334..520b6db254 100644
--- a/components/slider/SliderTooltip.tsx
+++ b/components/slider/SliderTooltip.tsx
@@ -6,7 +6,7 @@ import type { TooltipProps } from '../tooltip';
 import Tooltip from '../tooltip';
 
 const SliderTooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
-  const { visible } = props;
+  const { open } = props;
   const innerRef = useRef<any>(null);
 
   const rafRef = useRef<number | null>(null);
@@ -24,14 +24,14 @@ const SliderTooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
   }
 
   React.useEffect(() => {
-    if (visible) {
+    if (open) {
       keepAlign();
     } else {
       cancelKeepAlign();
     }
 
     return cancelKeepAlign;
-  }, [visible, props.title]);
+  }, [open, props.title]);
 
   return <Tooltip ref={composeRef(innerRef, ref)} {...props} />;
 });
diff --git a/components/slider/__tests__/index.test.tsx b/components/slider/__tests__/index.test.tsx
index 42c005bf8e..abf2aeebec 100644
--- a/components/slider/__tests__/index.test.tsx
+++ b/components/slider/__tests__/index.test.tsx
@@ -161,7 +161,7 @@ describe('Slider', () => {
     render(
       <SliderTooltip
         title="30"
-        visible
+        open
         ref={node => {
           ref = node;
         }}
diff --git a/components/slider/index.tsx b/components/slider/index.tsx
index 48101f507b..2729e4adeb 100644
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@@ -196,7 +196,7 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>(
         <SliderTooltip
           prefixCls={tooltipPrefixCls}
           title={tipFormatter ? tipFormatter(info.value) : ''}
-          visible={open}
+          open={open}
           placement={getTooltipPlacement(tooltipPlacement, vertical)}
           transitionName={`${rootPrefixCls}-zoom-down`}
           key={index}
diff --git a/components/table/__tests__/Table.filter.test.js b/components/table/__tests__/Table.filter.test.js
index 51942a64f4..20d6364583 100644
--- a/components/table/__tests__/Table.filter.test.js
+++ b/components/table/__tests__/Table.filter.test.js
@@ -895,7 +895,7 @@ describe('Table.filter', () => {
 
   it('renders custom filter icon with right Tooltip title', () => {
     const filterIcon = () => (
-      <Tooltip title="title" visible>
+      <Tooltip title="title" open>
         Tooltip
       </Tooltip>
     );
diff --git a/components/tooltip/__tests__/tooltip.test.js b/components/tooltip/__tests__/tooltip.test.js
index 9ebdee5c50..64be2b979d 100644
--- a/components/tooltip/__tests__/tooltip.test.js
+++ b/components/tooltip/__tests__/tooltip.test.js
@@ -21,7 +21,8 @@ describe('Tooltip', () => {
     });
   });
 
-  it('check `onVisibleChange` arguments', () => {
+  it('check `onOpenChange` arguments', () => {
+    const onOpenChange = jest.fn();
     const onVisibleChange = jest.fn();
     const ref = React.createRef();
 
@@ -30,6 +31,7 @@ describe('Tooltip', () => {
         title=""
         mouseEnterDelay={0}
         mouseLeaveDelay={0}
+        onOpenChange={onOpenChange}
         onVisibleChange={onVisibleChange}
         ref={ref}
       >
@@ -40,11 +42,13 @@ describe('Tooltip', () => {
     // `title` is empty.
     const divElement = container.querySelector('#hello');
     fireEvent.mouseEnter(divElement);
+    expect(onOpenChange).not.toHaveBeenCalled();
     expect(onVisibleChange).not.toHaveBeenCalled();
     expect(ref.current.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
 
     fireEvent.mouseLeave(divElement);
+    expect(onOpenChange).not.toHaveBeenCalled();
     expect(onVisibleChange).not.toHaveBeenCalled();
     expect(ref.current.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
@@ -55,6 +59,7 @@ describe('Tooltip', () => {
         title="Have a nice day!"
         mouseEnterDelay={0}
         mouseLeaveDelay={0}
+        onOpenChange={onOpenChange}
         onVisibleChange={onVisibleChange}
         ref={ref}
       >
@@ -62,42 +67,49 @@ describe('Tooltip', () => {
       </Tooltip>,
     );
     fireEvent.mouseEnter(divElement);
+    expect(onOpenChange).toHaveBeenLastCalledWith(true);
     expect(onVisibleChange).toHaveBeenLastCalledWith(true);
+
     expect(ref.current.props.visible).toBe(true);
     expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
 
     fireEvent.mouseLeave(divElement);
+    expect(onOpenChange).toHaveBeenLastCalledWith(false);
     expect(onVisibleChange).toHaveBeenLastCalledWith(false);
     expect(ref.current.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
 
-    // add `visible` props.
+    // add `open` props.
     rerender(
       <Tooltip
         title="Have a nice day!"
         mouseEnterDelay={0}
         mouseLeaveDelay={0}
+        onOpenChange={onOpenChange}
         onVisibleChange={onVisibleChange}
         ref={ref}
-        visible={false}
+        open={false}
       >
         <div id="hello">Hello world!</div>
       </Tooltip>,
     );
     fireEvent.mouseEnter(divElement);
+    expect(onOpenChange).toHaveBeenLastCalledWith(true);
     expect(onVisibleChange).toHaveBeenLastCalledWith(true);
-    const lastCount = onVisibleChange.mock.calls.length;
+    const lastCount = onOpenChange.mock.calls.length;
     expect(ref.current.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
 
-    // always trigger onVisibleChange
+    // always trigger onOpenChange
     fireEvent.mouseLeave(divElement);
-    expect(onVisibleChange.mock.calls.length).toBe(lastCount); // no change with lastCount
+    expect(onOpenChange.mock.calls.length).toBe(lastCount); // no change with lastCount
+    expect(onVisibleChange.mock.calls.length).toBe(lastCount);
     expect(ref.current.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
   });
 
   it('should hide when mouse leave native disabled button', () => {
+    const onOpenChange = jest.fn();
     const onVisibleChange = jest.fn();
     const ref = React.createRef();
 
@@ -106,6 +118,7 @@ describe('Tooltip', () => {
         title="xxxxx"
         mouseEnterDelay={0}
         mouseLeaveDelay={0}
+        onOpenChange={onOpenChange}
         onVisibleChange={onVisibleChange}
         ref={ref}
       >
@@ -119,11 +132,13 @@ describe('Tooltip', () => {
     const button = container.getElementsByTagName('span')[0];
 
     fireEvent.mouseEnter(button);
+    expect(onOpenChange).toHaveBeenCalledWith(true);
     expect(onVisibleChange).toHaveBeenCalledWith(true);
     expect(ref.current.props.visible).toBe(true);
     expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
 
     fireEvent.mouseLeave(button);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
     expect(onVisibleChange).toHaveBeenCalledWith(false);
     expect(ref.current.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
@@ -132,6 +147,7 @@ describe('Tooltip', () => {
   describe('should hide when mouse leave antd disabled component', () => {
     function testComponent(name, Component) {
       it(name, () => {
+        const onOpenChange = jest.fn();
         const onVisibleChange = jest.fn();
         const ref = React.createRef();
         const { container } = render(
@@ -139,6 +155,7 @@ describe('Tooltip', () => {
             title="xxxxx"
             mouseEnterDelay={0}
             mouseLeaveDelay={0}
+            onOpenChange={onOpenChange}
             onVisibleChange={onVisibleChange}
             ref={ref}
           >
@@ -150,11 +167,13 @@ describe('Tooltip', () => {
         const button = container.getElementsByTagName('span')[0];
 
         fireEvent.mouseEnter(button);
+        expect(onOpenChange).toHaveBeenCalledWith(true);
         expect(onVisibleChange).toHaveBeenCalledWith(true);
         expect(ref.current.props.visible).toBe(true);
         expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
 
         fireEvent.mouseLeave(button);
+        expect(onOpenChange).toHaveBeenCalledWith(false);
         expect(onVisibleChange).toHaveBeenCalledWith(false);
         expect(ref.current.props.visible).toBe(false);
         expect(container.querySelector('.ant-tooltip-open')).toBeNull();
@@ -235,11 +254,17 @@ describe('Tooltip', () => {
   });
 
   it('should works for date picker', async () => {
+    const onOpenChange = jest.fn();
     const onVisibleChange = jest.fn();
     const ref = React.createRef();
 
     const { container } = render(
-      <Tooltip title="date picker" onVisibleChange={onVisibleChange} ref={ref}>
+      <Tooltip
+        title="date picker"
+        onOpenChange={onOpenChange}
+        onVisibleChange={onVisibleChange}
+        ref={ref}
+      >
         <DatePicker />
       </Tooltip>,
     );
@@ -249,22 +274,30 @@ describe('Tooltip', () => {
 
     fireEvent.mouseEnter(picker);
     await sleep(100);
+    expect(onOpenChange).toHaveBeenCalledWith(true);
     expect(onVisibleChange).toHaveBeenCalledWith(true);
     expect(ref.current.props.visible).toBe(true);
     expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
 
     fireEvent.mouseLeave(picker);
     await sleep(100);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
     expect(onVisibleChange).toHaveBeenCalledWith(false);
     expect(ref.current.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
   });
 
   it('should works for input group', async () => {
+    const onOpenChange = jest.fn();
     const onVisibleChange = jest.fn();
     const ref = React.createRef();
     const { container } = render(
-      <Tooltip title="hello" onVisibleChange={onVisibleChange} ref={ref}>
+      <Tooltip
+        title="hello"
+        onOpenChange={onOpenChange}
+        onVisibleChange={onVisibleChange}
+        ref={ref}
+      >
         <Group>
           <Input style={{ width: '50%' }} />
           <Input style={{ width: '50%' }} />
@@ -276,12 +309,14 @@ describe('Tooltip', () => {
     const inputGroup = container.getElementsByClassName('ant-input-group')[0];
     fireEvent.mouseEnter(inputGroup);
     await sleep(100);
+    expect(onOpenChange).toHaveBeenCalledWith(true);
     expect(onVisibleChange).toHaveBeenCalledWith(true);
     expect(ref.current.props.visible).toBe(true);
     expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
 
     fireEvent.mouseLeave(inputGroup);
     await sleep(100);
+    expect(onOpenChange).toHaveBeenCalledWith(false);
     expect(onVisibleChange).toHaveBeenCalledWith(false);
     expect(ref.current.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
@@ -290,7 +325,7 @@ describe('Tooltip', () => {
   // https://github.com/ant-design/ant-design/issues/20891
   it('should display zero', () => {
     const { container } = render(
-      <Tooltip title={0} visible>
+      <Tooltip title={0} open>
         <div />
       </Tooltip>,
     );
@@ -300,7 +335,7 @@ describe('Tooltip', () => {
   it('autoAdjustOverflow should be object or undefined', () => {
     expect(() => {
       render(
-        <Tooltip title={0} visible autoAdjustOverflow={{ adjustX: 0, adjustY: 0 }}>
+        <Tooltip title={0} open autoAdjustOverflow={{ adjustX: 0, adjustY: 0 }}>
           <div />
         </Tooltip>,
       );
@@ -308,7 +343,7 @@ describe('Tooltip', () => {
 
     expect(() => {
       render(
-        <Tooltip title={0} visible autoAdjustOverflow={undefined}>
+        <Tooltip title={0} open autoAdjustOverflow={undefined}>
           <div />
         </Tooltip>,
       );
@@ -386,12 +421,14 @@ describe('Tooltip', () => {
   });
 
   it('should work with loading switch', () => {
+    const onOpenChange = jest.fn();
     const onVisibleChange = jest.fn();
     const { container } = render(
       <Tooltip
         title="loading tips"
         mouseEnterDelay={0}
         mouseLeaveDelay={0}
+        onOpenChange={onOpenChange}
         onVisibleChange={onVisibleChange}
       >
         <Switch loading defaultChecked />
@@ -400,17 +437,20 @@ describe('Tooltip', () => {
     const wrapperEl = container.querySelectorAll('.ant-tooltip-disabled-compatible-wrapper');
     expect(wrapperEl).toHaveLength(1);
     fireEvent.mouseEnter(container.getElementsByTagName('span')[0]);
+    expect(onOpenChange).toHaveBeenLastCalledWith(true);
     expect(onVisibleChange).toHaveBeenLastCalledWith(true);
     expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
   });
 
   it('should work with disabled Radio', () => {
+    const onOpenChange = jest.fn();
     const onVisibleChange = jest.fn();
     const { container } = render(
       <Tooltip
         title="loading tips"
         mouseEnterDelay={0}
         mouseLeaveDelay={0}
+        onOpenChange={onOpenChange}
         onVisibleChange={onVisibleChange}
       >
         <Radio disabled />
@@ -419,11 +459,13 @@ describe('Tooltip', () => {
     const wrapperEl = container.querySelectorAll('.ant-tooltip-disabled-compatible-wrapper');
     expect(wrapperEl).toHaveLength(1);
     fireEvent.mouseEnter(container.getElementsByTagName('span')[0]);
+    expect(onOpenChange).toHaveBeenLastCalledWith(true);
     expect(onVisibleChange).toHaveBeenLastCalledWith(true);
     expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
   });
 
   it('should work with Fragment children', () => {
+    const onOpenChange = jest.fn();
     const onVisibleChange = jest.fn();
     const ref = React.createRef();
 
@@ -432,6 +474,7 @@ describe('Tooltip', () => {
         title="Have a nice day!"
         mouseEnterDelay={0}
         mouseLeaveDelay={0}
+        onOpenChange={onOpenChange}
         onVisibleChange={onVisibleChange}
         ref={ref}
       >
@@ -444,13 +487,54 @@ describe('Tooltip', () => {
 
     const divElement = container.querySelector('.hello');
     fireEvent.mouseEnter(divElement);
+    expect(onOpenChange).toHaveBeenLastCalledWith(true);
     expect(onVisibleChange).toHaveBeenLastCalledWith(true);
     expect(ref.current.props.visible).toBe(true);
     expect(container.querySelector('.ant-tooltip-open')).not.toBeNull();
 
     fireEvent.mouseLeave(divElement);
+    expect(onOpenChange).toHaveBeenLastCalledWith(false);
     expect(onVisibleChange).toHaveBeenLastCalledWith(false);
     expect(ref.current.props.visible).toBe(false);
     expect(container.querySelector('.ant-tooltip-open')).toBeNull();
   });
+
+  it('deprecated warning', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { rerender } = render(
+      <Tooltip visible>
+        <a />
+      </Tooltip>,
+    );
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Tooltip] `visible` is deprecated which will be removed in next major version, please use `open` instead.',
+    );
+    rerender(
+      <Tooltip defaultVisible>
+        <a />
+      </Tooltip>,
+    );
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Tooltip] `defaultVisible` is deprecated which will be removed in next major version, please use `defaultOpen` instead.',
+    );
+    rerender(
+      <Tooltip onVisibleChange={() => {}}>
+        <a />
+      </Tooltip>,
+    );
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Tooltip] `onVisibleChange` is deprecated which will be removed in next major version, please use `onOpenChange` instead.',
+    );
+    rerender(
+      <Tooltip afterVisibleChange={() => {}}>
+        <a />
+      </Tooltip>,
+    );
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Tooltip] `afterVisibleChange` is deprecated which will be removed in next major version, please use `afterOpenChange` instead.',
+    );
+
+    errSpy.mockRestore();
+  });
 });
diff --git a/components/tooltip/index.en-US.md b/components/tooltip/index.en-US.md
index ee022b0317..4bf7f598fe 100644
--- a/components/tooltip/index.en-US.md
+++ b/components/tooltip/index.en-US.md
@@ -28,7 +28,7 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
 | arrowPointAtCenter | Whether the arrow is pointed at the center of target | boolean | false |  |
 | autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | true |  |
 | color | The background color | string | - | 4.3.0 |
-| defaultVisible | Whether the floating tooltip card is visible by default | boolean | false |  |
+| defaultOpen | Whether the floating tooltip card is open by default | boolean | false | 4.23.0 |
 | destroyTooltipOnHide | Whether destroy tooltip when hidden, parent container of tooltip will be destroyed when `keepParent` is false | boolean \| { keepParent?: boolean } | false |  |
 | getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | function(triggerNode) | () => document.body |  |
 | mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 |  |
@@ -38,9 +38,9 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
 | overlayInnerStyle | Style of the tooltip inner content | object | - |  |
 | placement | The position of the tooltip relative to the target, which can be one of `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |  |
 | trigger | Tooltip trigger mode. Could be multiple by passing an array | `hover` \| `focus` \| `click` \| `contextMenu` \| Array&lt;string> | `hover` |  |
-| visible | Whether the floating tooltip card is visible or not | boolean | false |  |
+| open | Whether the floating tooltip card is open or not | boolean | false | 4.23.0 |
 | zIndex | Config `z-index` of Tooltip | number | - |  |
-| onVisibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - |  |
+| onOpenChange | Callback executed when visibility of the tooltip card is changed | (open) => void | - | 4.23.0 |
 
 ## Note
 
diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx
index badebb626f..ae0cc23f36 100644
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@@ -11,6 +11,7 @@ import { getTransitionName } from '../_util/motion';
 import getPlacements, { AdjustOverflow, PlacementsConfig } from '../_util/placements';
 import { cloneElement, isValidElement, isFragment } from '../_util/reactNode';
 import type { LiteralUnion } from '../_util/type';
+import warning from '../_util/warning';
 
 export { AdjustOverflow, PlacementsConfig };
 
@@ -39,8 +40,41 @@ export interface TooltipAlignConfig {
   useCssBottom?: boolean;
   useCssTransform?: boolean;
 }
+// remove this after RcTooltip switch visible to open.
+interface LegacyTooltipProps
+  extends Partial<
+    Omit<
+      RcTooltipProps,
+      'children' | 'visible' | 'defaultVisible' | 'onVisibleChange' | 'afterVisibleChange'
+    >
+  > {
+  /**
+   * @deprecated `visible` is deprecated which will be removed in next major version. Please use
+   *   `open` instead.
+   */
+  visible?: RcTooltipProps['visible'];
+  open?: RcTooltipProps['visible'];
+  /**
+   * @deprecated `defaultVisible` is deprecated which will be removed in next major version. Please
+   *   use `defaultOpen` instead.
+   */
+  defaultVisible?: RcTooltipProps['defaultVisible'];
+  defaultOpen?: RcTooltipProps['defaultVisible'];
+  /**
+   * @deprecated `onVisibleChange` is deprecated which will be removed in next major version. Please
+   *   use `onOpenChange` instead.
+   */
+  onVisibleChange?: RcTooltipProps['onVisibleChange'];
+  onOpenChange?: RcTooltipProps['onVisibleChange'];
+  /**
+   * @deprecated `afterVisibleChange` is deprecated which will be removed in next major version.
+   *   Please use `afterOpenChange` instead.
+   */
+  afterVisibleChange?: RcTooltipProps['afterVisibleChange'];
+  afterOpenChange?: RcTooltipProps['afterVisibleChange'];
+}
 
-export interface AbstractTooltipProps extends Partial<Omit<RcTooltipProps, 'children'>> {
+export interface AbstractTooltipProps extends LegacyTooltipProps {
   style?: React.CSSProperties;
   className?: string;
   color?: LiteralUnion<PresetColorType, string>;
@@ -135,9 +169,25 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
     direction,
   } = React.useContext(ConfigContext);
 
-  const [visible, setVisible] = useMergedState(false, {
-    value: props.visible,
-    defaultValue: props.defaultVisible,
+  // Warning for deprecated usage
+  if (process.env.NODE_ENV !== 'production') {
+    [
+      ['visible', 'open'],
+      ['defaultVisible', 'defaultOpen'],
+      ['onVisibleChange', 'onOpenChange'],
+      ['afterVisibleChange', 'afterOpenChange'],
+    ].forEach(([deprecatedName, newName]) => {
+      warning(
+        !(deprecatedName in props),
+        'Tooltip',
+        `\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`${newName}\` instead.`,
+      );
+    });
+  }
+
+  const [open, setOpen] = useMergedState(false, {
+    value: props.open !== undefined ? props.open : props.visible,
+    defaultValue: props.defaultOpen !== undefined ? props.defaultOpen : props.defaultVisible,
   });
 
   const isNoTitle = () => {
@@ -145,10 +195,11 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
     return !title && !overlay && title !== 0; // overlay for old version compatibility
   };
 
-  const onVisibleChange = (vis: boolean) => {
-    setVisible(isNoTitle() ? false : vis);
+  const onOpenChange = (vis: boolean) => {
+    setOpen(isNoTitle() ? false : vis);
 
     if (!isNoTitle()) {
+      props.onOpenChange?.(vis);
       props.onVisibleChange?.(vis);
     }
   };
@@ -217,10 +268,10 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
   const prefixCls = getPrefixCls('tooltip', customizePrefixCls);
   const rootPrefixCls = getPrefixCls();
 
-  let tempVisible = visible;
+  let tempOpen = open;
   // Hide tooltip when there is no title
-  if (!('visible' in props) && isNoTitle()) {
-    tempVisible = false;
+  if (!('open' in props) && !('visible' in props) && isNoTitle()) {
+    tempOpen = false;
   }
 
   const child = getDisabledCompatibleChildren(
@@ -254,8 +305,8 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
       ref={ref}
       builtinPlacements={getTooltipPlacements()}
       overlay={getOverlay()}
-      visible={tempVisible}
-      onVisibleChange={onVisibleChange}
+      visible={tempOpen}
+      onVisibleChange={onOpenChange}
       onPopupAlign={onPopupAlign}
       overlayInnerStyle={formattedOverlayInnerStyle}
       arrowContent={<span className={`${prefixCls}-arrow-content`} style={arrowContentStyle} />}
@@ -264,7 +315,7 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
         motionDeadline: 1000,
       }}
     >
-      {tempVisible ? cloneElement(child, { className: childCls }) : child}
+      {tempOpen ? cloneElement(child, { className: childCls }) : child}
     </RcTooltip>
   );
 });
diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md
index 9e33f243ff..8186d842e0 100644
--- a/components/tooltip/index.zh-CN.md
+++ b/components/tooltip/index.zh-CN.md
@@ -30,7 +30,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
 | arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | false |  |
 | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true |  |
 | color | 背景颜色 | string | - | 4.3.0 |
-| defaultVisible | 默认是否显隐 | boolean | false |  |
+| defaultOpen | 默认是否显隐 | boolean | false | 4.23.0 |
 | destroyTooltipOnHide | 关闭后是否销毁 Tooltip，当 `keepParent` 为 `false` 时销毁父容器 | boolean \| { keepParent?: boolean } | false |  |
 | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | function(triggerNode) | () => document.body |  |
 | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 |  |
@@ -40,9 +40,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
 | overlayInnerStyle | 卡片内容区域的样式对象 | object | - |  |
 | placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |  |
 | trigger | 触发行为，可选 `hover` \| `focus` \| `click` \| `contextMenu`，可使用数组设置多个触发行为 | string \| string\[] | `hover` |  |
-| visible | 用于手动控制浮层显隐 | boolean | false |  |
+| open | 用于手动控制浮层显隐 | boolean | false | 4.23.0 |
 | zIndex | 设置 Tooltip 的 `z-index` | number | - |  |
-| onVisibleChange | 显示隐藏的回调 | (visible) => void | - |  |
+| onOpenChange | 显示隐藏的回调 | (open) => void | - | 4.23.0 |
 
 ## 注意
 
diff --git a/components/typography/Base/EllipsisTooltip.tsx b/components/typography/Base/EllipsisTooltip.tsx
index a2467208f8..35c096a424 100644
--- a/components/typography/Base/EllipsisTooltip.tsx
+++ b/components/typography/Base/EllipsisTooltip.tsx
@@ -20,7 +20,7 @@ const EllipsisTooltip = ({
   }
 
   return (
-    <Tooltip visible={isEllipsis ? undefined : false} {...tooltipProps}>
+    <Tooltip open={isEllipsis ? undefined : false} {...tooltipProps}>
       {children}
     </Tooltip>
   );
diff --git a/site/theme/template/Content/Demo/index.jsx b/site/theme/template/Content/Demo/index.jsx
index c30b503237..65957ba98d 100644
--- a/site/theme/template/Content/Demo/index.jsx
+++ b/site/theme/template/Content/Demo/index.jsx
@@ -36,7 +36,7 @@ class Demo extends React.Component {
   state = {
     codeExpand: false,
     copied: false,
-    copyTooltipVisible: false,
+    copyTooltipOpen: false,
   };
 
   componentDidMount() {
@@ -47,12 +47,12 @@ class Demo extends React.Component {
   }
 
   shouldComponentUpdate(nextProps, nextState) {
-    const { codeExpand, copied, copyTooltipVisible } = this.state;
+    const { codeExpand, copied, copyTooltipOpen } = this.state;
     const { expand, theme, showRiddleButton, react18 } = this.props;
     return (
       (codeExpand || expand) !== (nextState.codeExpand || nextProps.expand) ||
       copied !== nextState.copied ||
-      copyTooltipVisible !== nextState.copyTooltipVisible ||
+      copyTooltipOpen !== nextState.copyTooltipOpen ||
       nextProps.theme !== theme ||
       nextProps.showRiddleButton !== showRiddleButton ||
       nextProps.react18 !== react18
@@ -90,16 +90,16 @@ class Demo extends React.Component {
     });
   };
 
-  onCopyTooltipVisibleChange = visible => {
-    if (visible) {
+  onCopyTooltipOpenChange = open => {
+    if (open) {
       this.setState({
-        copyTooltipVisible: visible,
+        copyTooltipOpen: open,
         copied: false,
       });
       return;
     }
     this.setState({
-      copyTooltipVisible: visible,
+      copyTooltipOpen: open,
     });
   };
 
@@ -139,7 +139,7 @@ class Demo extends React.Component {
       showRiddleButton,
       react18,
     } = props;
-    const { copied, copyTooltipVisible } = state;
+    const { copied, copyTooltipOpen } = state;
     if (!this.liveDemo) {
       this.liveDemo = meta.iframe ? (
         <BrowserFrame>
@@ -448,16 +448,13 @@ ReactDOM.render(<Demo />, document.getElementById('container'));
             </Tooltip>
             <CopyToClipboard text={sourceCode} onCopy={() => this.handleCodeCopied(meta.id)}>
               <Tooltip
-                visible={copyTooltipVisible}
-                onVisibleChange={this.onCopyTooltipVisibleChange}
+                open={copyTooltipOpen}
+                onOpenChange={this.onCopyTooltipOpenChange}
                 title={<FormattedMessage id={`app.demo.${copied ? 'copied' : 'copy'}`} />}
               >
-                {React.createElement(
-                  copied && copyTooltipVisible ? CheckOutlined : SnippetsOutlined,
-                  {
-                    className: 'code-box-code-copy code-box-code-action',
-                  },
-                )}
+                {React.createElement(copied && copyTooltipOpen ? CheckOutlined : SnippetsOutlined, {
+                  className: 'code-box-code-copy code-box-code-action',
+                })}
               </Tooltip>
             </CopyToClipboard>
             <Tooltip
diff --git a/site/theme/template/IconDisplay/IconPicSearcher.tsx b/site/theme/template/IconDisplay/IconPicSearcher.tsx
index 2478058436..2c40e9ed2c 100644
--- a/site/theme/template/IconDisplay/IconPicSearcher.tsx
+++ b/site/theme/template/IconDisplay/IconPicSearcher.tsx
@@ -140,7 +140,7 @@ const PicSearcher: React.FC<PicSearcherProps> = ({ intl }) => {
     <div className="icon-pic-searcher">
       <Popover
         content={messages[`app.docs.components.icon.pic-searcher.intro`]}
-        visible={state.popoverVisible}
+        open={state.popoverVisible}
       >
         <AntdIcons.CameraOutlined className="icon-pic-btn" onClick={toggleModal} />
       </Popover>
diff --git a/site/theme/template/Layout/Header/index.tsx b/site/theme/template/Layout/Header/index.tsx
index 6666632864..0f65495eee 100644
--- a/site/theme/template/Layout/Header/index.tsx
+++ b/site/theme/template/Layout/Header/index.tsx
@@ -302,9 +302,9 @@ const Header: React.FC<HeaderProps & WrappedComponentProps<'intl'>> = props => {
                 placement="bottomRight"
                 content={menu}
                 trigger="click"
-                visible={menuVisible}
+                open={menuVisible}
                 arrowPointAtCenter
-                onVisibleChange={onMenuVisibleChange}
+                onOpenChange={onMenuVisibleChange}
               >
                 <MenuOutlined className="nav-phone-icon" onClick={handleShowMenu} />
               </Popover>

From 156500c2e347dae36b02e5f3b33dfbd45f65ef6a Mon Sep 17 00:00:00 2001
From: tempoeric <42777871+tempoeric@users.noreply.github.com>
Date: Thu, 1 Sep 2022 10:47:42 +0800
Subject: [PATCH 21/22] chore: bump rc-tabs to alpha 1 (#37328)

Co-authored-by: Eric Bool <eric.bool@98labs.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 61e18479ef..ae67f32175 100644
--- a/package.json
+++ b/package.json
@@ -149,7 +149,7 @@
     "rc-steps": "~4.1.0",
     "rc-switch": "~3.2.0",
     "rc-table": "~7.26.0",
-    "rc-tabs": "~12.1.0-alpha.0",
+    "rc-tabs": "~12.1.0-alpha.1",
     "rc-textarea": "~0.3.0",
     "rc-tooltip": "~5.2.0",
     "rc-tree": "~5.6.5",

From bcb0b4dff1e5cea16813e30e63279ce8a6acb694 Mon Sep 17 00:00:00 2001
From: yykoypj <601924094@qq.com>
Date: Fri, 2 Sep 2022 17:22:23 +0800
Subject: [PATCH 22/22] feat: switch visible to open for Dropdown (#37232)

* feat: switch visible to open for Dropdown

* fix: merge state

* fix: props pass

* test: fix coverage
---
 .../__snapshots__/demo-extend.test.ts.snap    |  2 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |  2 +-
 .../__tests__/dropdown-button.test.tsx        | 15 ++++---
 components/dropdown/__tests__/index.test.tsx  | 32 ++++++++++++--
 .../{overlay-visible.md => overlay-open.md}   | 10 ++---
 components/dropdown/dropdown-button.tsx       | 10 +++--
 components/dropdown/dropdown.tsx              | 43 +++++++++++++++----
 components/dropdown/index.en-US.md            |  8 ++--
 components/dropdown/index.zh-CN.md            |  8 ++--
 .../table/hooks/useFilter/FilterDropdown.tsx  |  4 +-
 10 files changed, 96 insertions(+), 38 deletions(-)
 rename components/dropdown/demo/{overlay-visible.md => overlay-open.md} (83%)

diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
index a301aa58d0..ddd7500cb7 100644
--- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -6934,7 +6934,7 @@ Array [
 ]
 `;
 
-exports[`renders ./components/dropdown/demo/overlay-visible.md extend context correctly 1`] = `
+exports[`renders ./components/dropdown/demo/overlay-open.md extend context correctly 1`] = `
 Array [
   <a
     class="ant-dropdown-trigger"
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap
index 1a4d0dfefc..cacf10e824 100644
--- a/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.ts.snap
@@ -755,7 +755,7 @@ exports[`renders ./components/dropdown/demo/menu-full.md correctly 1`] = `
 </a>
 `;
 
-exports[`renders ./components/dropdown/demo/overlay-visible.md correctly 1`] = `
+exports[`renders ./components/dropdown/demo/overlay-open.md correctly 1`] = `
 <a
   class="ant-dropdown-trigger"
 >
diff --git a/components/dropdown/__tests__/dropdown-button.test.tsx b/components/dropdown/__tests__/dropdown-button.test.tsx
index c2683b1660..91a4494710 100644
--- a/components/dropdown/__tests__/dropdown-button.test.tsx
+++ b/components/dropdown/__tests__/dropdown-button.test.tsx
@@ -43,25 +43,28 @@ describe('DropdownButton', () => {
       ),
       disabled: false,
       trigger: ['hover'],
-      visible: true,
-      onVisibleChange: () => {},
+      open: true,
+      onOpenChange: () => {},
     };
 
-    render(<DropdownButton {...props} />);
+    const { rerender } = render(<DropdownButton {...props} />);
 
     Object.keys(props).forEach((key: keyof DropdownProps) => {
       expect(dropdownProps[key]).toBe(props[key]);
     });
+
+    rerender(<DropdownButton overlay={<div>123</div>} visible />);
+    expect(dropdownProps.open).toBe(true);
   });
 
-  it("don't pass visible to Dropdown if it's not exits", () => {
+  it("don't pass open to Dropdown if it's not exits", () => {
     const menu = (
       <Menu>
         <Menu.Item key="1">foo</Menu.Item>
       </Menu>
     );
     render(<DropdownButton overlay={menu} />);
-    expect('visible' in dropdownProps).toBe(false);
+    expect('open' in dropdownProps).toBe(false);
   });
 
   it('should support href like Button', () => {
@@ -100,7 +103,7 @@ describe('DropdownButton', () => {
         overlayClassName="className"
         overlayStyle={{ color: 'red' }}
         overlay={menu}
-        visible
+        open
       />,
     );
     expect(container.querySelector('.ant-dropdown')?.classList).toContain('className');
diff --git a/components/dropdown/__tests__/index.test.tsx b/components/dropdown/__tests__/index.test.tsx
index e8f0fdba40..1bda134bc7 100644
--- a/components/dropdown/__tests__/index.test.tsx
+++ b/components/dropdown/__tests__/index.test.tsx
@@ -38,7 +38,7 @@ describe('Dropdown', () => {
 
   it('overlay is function and has custom transitionName', () => {
     const { asFragment } = render(
-      <Dropdown overlay={() => <div>menu</div>} transitionName="move-up" visible>
+      <Dropdown overlay={() => <div>menu</div>} transitionName="move-up" open>
         <button type="button">button</button>
       </Dropdown>,
     );
@@ -47,7 +47,7 @@ describe('Dropdown', () => {
 
   it('overlay is string', () => {
     const { asFragment } = render(
-      <Dropdown overlay={'string' as any} visible>
+      <Dropdown overlay={'string' as any} open>
         <button type="button">button</button>
       </Dropdown>,
     );
@@ -64,7 +64,7 @@ describe('Dropdown', () => {
           </Menu.SubMenu>
         </Menu>
       ),
-      visible: true,
+      open: true,
       getPopupContainer: node => node,
     };
 
@@ -95,12 +95,13 @@ describe('Dropdown', () => {
     expect(error).toHaveBeenCalledWith(
       expect.stringContaining("[antd: Dropdown] You are using 'topCenter'"),
     );
+    error.mockRestore();
   });
 
   // zombieJ: when replaced with react test lib, it may be mock fully content
   it('dropdown should support auto adjust placement', () => {
     render(
-      <Dropdown overlay={<div>menu</div>} visible>
+      <Dropdown overlay={<div>menu</div>} open>
         <button type="button">button</button>
       </Dropdown>,
     );
@@ -166,4 +167,27 @@ describe('Dropdown', () => {
 
     jest.useRealTimers();
   });
+
+  it('deprecated warning', () => {
+    const errSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+
+    const { rerender } = render(
+      <Dropdown visible overlay={<div>menu</div>}>
+        <a />
+      </Dropdown>,
+    );
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Dropdown] `visible` is deprecated which will be removed in next major version, please use `open` instead.',
+    );
+    rerender(
+      <Dropdown onVisibleChange={() => {}} overlay={<div>menu</div>}>
+        <a />
+      </Dropdown>,
+    );
+    expect(errSpy).toHaveBeenCalledWith(
+      'Warning: [antd: Dropdown] `onVisibleChange` is deprecated which will be removed in next major version, please use `onOpenChange` instead.',
+    );
+
+    errSpy.mockRestore();
+  });
 });
diff --git a/components/dropdown/demo/overlay-visible.md b/components/dropdown/demo/overlay-open.md
similarity index 83%
rename from components/dropdown/demo/overlay-visible.md
rename to components/dropdown/demo/overlay-open.md
index 28b9989cfd..429cf40670 100644
--- a/components/dropdown/demo/overlay-visible.md
+++ b/components/dropdown/demo/overlay-open.md
@@ -20,16 +20,16 @@ import { Dropdown, Menu, Space } from 'antd';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [visible, setVisible] = useState(false);
+  const [open, setOpen] = useState(false);
 
   const handleMenuClick: MenuProps['onClick'] = e => {
     if (e.key === '3') {
-      setVisible(false);
+      setOpen(false);
     }
   };
 
-  const handleVisibleChange = (flag: boolean) => {
-    setVisible(flag);
+  const handleOpenChange = (flag: boolean) => {
+    setOpen(flag);
   };
 
   const menu = (
@@ -53,7 +53,7 @@ const App: React.FC = () => {
   );
 
   return (
-    <Dropdown overlay={menu} onVisibleChange={handleVisibleChange} visible={visible}>
+    <Dropdown overlay={menu} onOpenChange={handleOpenChange} open={open}>
       <a onClick={e => e.preventDefault()}>
         <Space>
           Hover me
diff --git a/components/dropdown/dropdown-button.tsx b/components/dropdown/dropdown-button.tsx
index b58c47a81a..3a90d26b10 100644
--- a/components/dropdown/dropdown-button.tsx
+++ b/components/dropdown/dropdown-button.tsx
@@ -52,7 +52,9 @@ const DropdownButton: DropdownButtonInterface = props => {
     trigger,
     align,
     visible,
+    open,
     onVisibleChange,
+    onOpenChange,
     placement,
     getPopupContainer,
     href,
@@ -73,7 +75,7 @@ const DropdownButton: DropdownButtonInterface = props => {
     overlay,
     disabled,
     trigger: disabled ? [] : trigger,
-    onVisibleChange,
+    onOpenChange: onOpenChange || onVisibleChange,
     getPopupContainer: getPopupContainer || getContextPopupContainer,
     mouseEnterDelay,
     mouseLeaveDelay,
@@ -82,8 +84,10 @@ const DropdownButton: DropdownButtonInterface = props => {
     destroyPopupOnHide,
   } as DropdownProps;
 
-  if ('visible' in props) {
-    dropdownProps.visible = visible;
+  if ('open' in props) {
+    dropdownProps.open = open;
+  } else if ('visible' in props) {
+    dropdownProps.open = visible;
   }
 
   if ('placement' in props) {
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index 42029ff392..bf3ef5bc1f 100644
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -49,8 +49,18 @@ export interface DropdownProps {
   arrow?: boolean | DropdownArrowOptions;
   trigger?: ('click' | 'hover' | 'contextMenu')[];
   overlay: React.ReactElement | OverlayFunc;
+  /**
+   * @deprecated `onVisibleChange` is deprecated which will be removed in next major version. Please
+   *   use `onOpenChange` instead.
+   */
   onVisibleChange?: (visible: boolean) => void;
+  onOpenChange?: (open: boolean) => void;
+  /**
+   * @deprecated `visible` is deprecated which will be removed in next major version. Please use
+   *   `open` instead.
+   */
   visible?: boolean;
+  open?: boolean;
   disabled?: boolean;
   destroyPopupOnHide?: boolean;
   align?: Align;
@@ -79,6 +89,20 @@ const Dropdown: DropdownInterface = props => {
     direction,
   } = React.useContext(ConfigContext);
 
+  // Warning for deprecated usage
+  if (process.env.NODE_ENV !== 'production') {
+    [
+      ['visible', 'open'],
+      ['onVisibleChange', 'onOpenChange'],
+    ].forEach(([deprecatedName, newName]) => {
+      warning(
+        !(deprecatedName in props),
+        'Dropdown',
+        `\`${deprecatedName}\` is deprecated which will be removed in next major version, please use \`${newName}\` instead.`,
+      );
+    });
+  }
+
   const getTransitionName = () => {
     const rootPrefixCls = getPrefixCls();
     const { placement = '', transitionName } = props;
@@ -119,7 +143,9 @@ const Dropdown: DropdownInterface = props => {
     getPopupContainer,
     overlayClassName,
     visible,
+    open,
     onVisibleChange,
+    onOpenChange,
   } = props;
 
   const prefixCls = getPrefixCls('dropdown', customizePrefixCls);
@@ -143,13 +169,14 @@ const Dropdown: DropdownInterface = props => {
   }
 
   // =========================== Visible ============================
-  const [mergedVisible, setVisible] = useMergedState(false, {
-    value: visible,
+  const [mergedOpen, setOpen] = useMergedState(false, {
+    value: open !== undefined ? open : visible,
   });
 
-  const onInnerVisibleChange = useEvent((nextVisible: boolean) => {
-    onVisibleChange?.(nextVisible);
-    setVisible(nextVisible);
+  const onInnerOpenChange = useEvent((nextOpen: boolean) => {
+    onVisibleChange?.(nextOpen);
+    onOpenChange?.(nextOpen);
+    setOpen(nextOpen);
   });
 
   // =========================== Overlay ============================
@@ -163,7 +190,7 @@ const Dropdown: DropdownInterface = props => {
   });
 
   const onMenuClick = React.useCallback(() => {
-    setVisible(false);
+    setOpen(false);
   }, []);
 
   const renderOverlay = () => {
@@ -211,7 +238,7 @@ const Dropdown: DropdownInterface = props => {
     <RcDropdown
       alignPoint={alignPoint}
       {...props}
-      visible={mergedVisible}
+      visible={mergedOpen}
       builtinPlacements={builtinPlacements}
       arrow={!!arrow}
       overlayClassName={overlayClassNameCustomized}
@@ -221,7 +248,7 @@ const Dropdown: DropdownInterface = props => {
       trigger={triggerActions}
       overlay={renderOverlay}
       placement={getPlacement()}
-      onVisibleChange={onInnerVisibleChange}
+      onVisibleChange={onInnerOpenChange}
     >
       {dropdownTrigger}
     </RcDropdown>
diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md
index db82aec981..c714cc1ed1 100644
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@@ -27,8 +27,8 @@ When there are more than a few options to choose from, you can wrap them in a `D
 | overlayStyle | The style of the dropdown root element | CSSProperties | - |  |
 | placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | The trigger mode which executes the dropdown action. Note that hover can't be used on touchscreens | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
-| visible | Whether the dropdown menu is currently visible | boolean | - |  |
-| onVisibleChange | Called when the visible state is changed. Not trigger when hidden by click item | (visible: boolean) => void | - |  |
+| open | Whether the dropdown menu is currently open | boolean | - | 4.23.0 |
+| onOpenChange | Called when the open state is changed. Not trigger when hidden by click item | (open: boolean) => void | - | 4.23.0 |
 
 You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.
 
@@ -50,6 +50,6 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
 | size | Size of the button, the same as [Button](/components/button/#API) | string | `default` |  |
 | trigger | The trigger mode which executes the dropdown action | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | type | Type of the button, the same as [Button](/components/button/#API) | string | `default` |  |
-| visible | Whether the dropdown menu is currently visible | boolean | - |  |
+| open | Whether the dropdown menu is currently open | boolean | - | 4.23.0 |
 | onClick | The same as [Button](/components/button/#API): called when you click the button on the left | (event) => void | - |  |
-| onVisibleChange | Called when the visible state is changed | (visible: boolean) => void | - |  |
+| onOpenChange | Called when the open state is changed | (open: boolean) => void | - | 4.23.0 |
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index 8f77d6393b..f5592a9a4e 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -31,8 +31,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 | overlayStyle | 下拉根元素的样式 | CSSProperties | - |  |
 | placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
-| visible | 菜单是否显示 | boolean | - |  |
-| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible`。点击菜单按钮导致的消失不会触发 | (visible: boolean) => void | - |  |
+| open | 菜单是否显示 | boolean | - | 4.23.0 |
+| onOpenChange | 菜单显示状态改变时调用，参数为 `visible`。点击菜单按钮导致的消失不会触发 | (open: boolean) => void | - | 4.23.0 |
 
 `overlay` 菜单使用 [Menu](/components/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。
 
@@ -54,6 +54,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 | size | 按钮大小，和 [Button](/components/button/#API) 一致 | string | `default` |  |
 | trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | type | 按钮类型，和 [Button](/components/button/#API) 一致 | string | `default` |  |
-| visible | 菜单是否显示 | boolean | - |  |
+| open | 菜单是否显示 | boolean | - | 4.23.0 |
 | onClick | 点击左侧按钮的回调，和 [Button](/components/button/#API) 一致 | (event) => void | - |  |
-| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | (visible: boolean) => void | - |  |
+| onOpenChange | 菜单显示状态改变时调用，参数为 `visible` | (open: boolean) => void | - | 4.23.0 |
diff --git a/components/table/hooks/useFilter/FilterDropdown.tsx b/components/table/hooks/useFilter/FilterDropdown.tsx
index 7a2694461a..c829013634 100644
--- a/components/table/hooks/useFilter/FilterDropdown.tsx
+++ b/components/table/hooks/useFilter/FilterDropdown.tsx
@@ -464,8 +464,8 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {
       <Dropdown
         overlay={menu}
         trigger={['click']}
-        visible={mergedVisible}
-        onVisibleChange={onVisibleChange}
+        open={mergedVisible}
+        onOpenChange={onVisibleChange}
         getPopupContainer={getPopupContainer}
         placement={direction === 'rtl' ? 'bottomLeft' : 'bottomRight'}
       >