From be231f9fb53d65b5fd820ea58259446a11a806e4 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, 31 Dec 2021 11:28:02 +0800
Subject: [PATCH 01/33] feat: Merge TimePicker disabledXXX into disabledTime
 (#33503)

* feat: merge disabledXXX into disabledTime

* chore: fix ts
---
 .../date-picker/generatePicker/index.tsx      | 16 ++++---
 components/time-picker/index.en-US.md         | 36 ++++++++++++---
 components/time-picker/index.zh-CN.md         | 44 ++++++++++++++-----
 package.json                                  |  2 +-
 4 files changed, 72 insertions(+), 26 deletions(-)

diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx
index 26e14c4bc8..047d2082c4 100644
--- a/components/date-picker/generatePicker/index.tsx
+++ b/components/date-picker/generatePicker/index.tsx
@@ -27,13 +27,18 @@ function toArray<T>(list: T | T[]): T[] {
   return Array.isArray(list) ? list : [list];
 }
 
-export function getTimeProps<DateType>(
-  props: { format?: string; picker?: PickerMode } & SharedTimeProps<DateType>,
+export function getTimeProps<DateType, DisabledTime>(
+  props: { format?: string; picker?: PickerMode } & Omit<
+    SharedTimeProps<DateType>,
+    'disabledTime'
+  > & {
+      disabledTime?: DisabledTime;
+    },
 ) {
   const { format, picker, showHour, showMinute, showSecond, use12Hours } = props;
 
   const firstFormat = toArray(format)[0];
-  const showTimeObj: SharedTimeProps<DateType> = { ...props };
+  const showTimeObj = { ...props };
 
   if (firstFormat && typeof firstFormat === 'string') {
     if (!firstFormat.includes('s') && showSecond === undefined) {
@@ -67,10 +72,7 @@ export function getTimeProps<DateType>(
 
 type InjectDefaultProps<Props> = Omit<
   Props,
-  | 'locale'
-  | 'generateConfig'
-  | 'hideHeader'
-  | 'components'
+  'locale' | 'generateConfig' | 'hideHeader' | 'components'
 > & {
   locale?: PickerLocale;
   size?: SizeType;
diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md
index c5190a6f71..92f6923b72 100644
--- a/components/time-picker/index.en-US.md
+++ b/components/time-picker/index.en-US.md
@@ -33,9 +33,7 @@ import moment from 'moment';
 | clearText | The clear tooltip of icon | string | clear |  |
 | defaultValue | To set default time | [moment](http://momentjs.com/) | - |  |
 | disabled | Determine whether the TimePicker is disabled | boolean | false |  |
-| disabledHours | To specify the hours that cannot be selected | function() | - |  |
-| disabledMinutes | To specify the minutes that cannot be selected | function(selectedHour) | - |  |
-| disabledSeconds | To specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - |  |
+| disabledTime | To specify the time that cannot be selected | [DisabledTime](#DisabledTime) | - | 4.19.0 |
 | format | To set the time format | string | `HH:mm:ss` |  |
 | getPopupContainer | To set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - |  |
 | hideDisabledOptions | Whether hide the options that can not be selected | boolean | false |  |
@@ -56,12 +54,22 @@ import moment from 'moment';
 | onOpenChange | A callback function which will be called while panel opening/closing | (open: boolean) => void | - |  |
 | onSelect | A callback function, executes when a value is selected | function(time: moment): void | - |  |
 
+#### DisabledTime
+
+```typescript
+type DisabledTime = (now: Moment) => {
+  disabledHours?: () => number[];
+  disabledMinutes?: (selectedHour: number) => number[];
+  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
+};
+```
+
 ## Methods
 
-| Name | Description | Version |
-| --- | --- | --- |
-| blur() | Remove focus |  |
-| focus() | Get focus |  |
+| Name    | Description  | Version |
+| ------- | ------------ | ------- |
+| blur()  | Remove focus |         |
+| focus() | Get focus    |         |
 
 ### RangePicker
 
@@ -69,8 +77,22 @@ Same props from [RangePicker](/components/date-picker/#RangePicker) of DatePicke
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| disabledTime | To specify the time that cannot be selected | [RangeDisabledTime](#RangeDisabledTime) | - | 4.19.0 |
 | order | Order start and end time | boolean | true | 4.1.0 |
 
+### RangeDisabledTime
+
+```typescript
+type RangeDisabledTime = (
+  now: Moment,
+  type = 'start' | 'end',
+) => {
+  disabledHours?: () => number[];
+  disabledMinutes?: (selectedHour: number) => number[];
+  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
+};
+```
+
 <style>
 .code-box-demo .ant-picker { margin: 0 8px 12px 0; }
 .ant-row-rtl .code-box-demo .ant-picker { margin: 0 0 12px 8px; }
diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md
index 1d2031c120..784736a36e 100644
--- a/components/time-picker/index.zh-CN.md
+++ b/components/time-picker/index.zh-CN.md
@@ -33,9 +33,7 @@ import moment from 'moment';
 | clearText | 清除按钮的提示文案 | string | clear |  |
 | defaultValue | 默认时间 | [moment](http://momentjs.com/) | - |  |
 | disabled | 禁用全部操作 | boolean | false |  |
-| disabledHours | 禁止选择部分小时选项 | function() | - |  |
-| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | - |  |
-| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | - |  |
+| disabledTime | 不可选择的时间 | [DisabledTime](#DisabledTime) | - | 4.19.0 |
 | format | 展示的时间格式 | string | `HH:mm:ss` |  |
 | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - |  |
 | hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |  |
@@ -55,20 +53,44 @@ import moment from 'moment';
 | onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | - |  |
 | onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - |  |
 
+#### DisabledTime
+
+```typescript
+type DisabledTime = (now: Moment) => {
+  disabledHours?: () => number[];
+  disabledMinutes?: (selectedHour: number) => number[];
+  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
+};
+```
+
 ## 方法
 
-| 名称 | 描述 | 版本 |
-| --- | --- | --- |
-| blur() | 移除焦点 |  |
-| focus() | 获取焦点 |  |
+| 名称    | 描述     | 版本 |
+| ------- | -------- | ---- |
+| blur()  | 移除焦点 |      |
+| focus() | 获取焦点 |      |
 
-### RangePicker
+## RangePicker
 
 属性与 DatePicker 的 [RangePicker](/components/date-picker/#RangePicker) 相同。还包含以下属性：
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
+| 参数         | 说明                 | 类型                                    | 默认值 | 版本   |
+| ------------ | -------------------- | --------------------------------------- | ------ | ------ |
+| disabledTime | 不可选择的时间       | [RangeDisabledTime](#RangeDisabledTime) | -      | 4.19.0 |
+| order        | 始末时间是否自动排序 | boolean                                 | true   | 4.1.0  |
+
+### RangeDisabledTime
+
+```typescript
+type RangeDisabledTime = (
+  now: Moment,
+  type = 'start' | 'end',
+) => {
+  disabledHours?: () => number[];
+  disabledMinutes?: (selectedHour: number) => number[];
+  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
+};
+```
 
 <style>
 .code-box-demo .ant-picker { margin: 0 8px 12px 0; }
diff --git a/package.json b/package.json
index 5db9152917..6f9e84e7a9 100644
--- a/package.json
+++ b/package.json
@@ -135,7 +135,7 @@
     "rc-motion": "^2.4.4",
     "rc-notification": "~4.5.7",
     "rc-pagination": "~3.1.9",
-    "rc-picker": "~2.5.17",
+    "rc-picker": "~2.6.0",
     "rc-progress": "~3.2.1",
     "rc-rate": "~2.9.0",
     "rc-resize-observer": "^1.1.2",

From fe57135e35b81364be60a41602e5c3c3e22b2e74 Mon Sep 17 00:00:00 2001
From: qin20 <10720918+qin20@users.noreply.github.com>
Date: Mon, 10 Jan 2022 18:11:06 +0800
Subject: [PATCH 02/33] feat: support custom Space children key (#33607)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

close #33331

Co-authored-by: 秦缘斌 <qinyuanbin@corp.netease.com>
---
 components/space/index.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/components/space/index.tsx b/components/space/index.tsx
index 6255cb4410..9c0b7f5e4f 100644
--- a/components/space/index.tsx
+++ b/components/space/index.tsx
@@ -88,11 +88,12 @@ const Space: React.FC<SpaceProps> = props => {
       latestIndex = i;
     }
 
-    /* eslint-disable react/no-array-index-key */
+    const keyOfChild = child && child.key;
+
     return (
       <Item
         className={itemClassName}
-        key={`${itemClassName}-${i}`}
+        key={`${itemClassName}-${keyOfChild || i}`}
         direction={direction}
         index={i}
         marginDirection={marginDirection}
@@ -102,7 +103,6 @@ const Space: React.FC<SpaceProps> = props => {
         {child}
       </Item>
     );
-    /* eslint-enable */
   });
 
   const spaceContext = React.useMemo(

From a39ddcf7982070797ddd62183183d625526a8685 Mon Sep 17 00:00:00 2001
From: Dan Greene <14020024+dgreene1@users.noreply.github.com>
Date: Tue, 11 Jan 2022 00:18:42 -0500
Subject: [PATCH 03/33] feat: resolves issue 33572 re aria-sort on tables
 (#33603)

* feat: resolves issue 33572 re aria-sort on tables

* fixing snapshots

* removing code that can't be hit anyway
---
 .../table/__tests__/Table.sorter.test.js      | 95 ++++++++++++++++---
 .../__snapshots__/Table.sorter.test.js.snap   |  1 +
 .../__snapshots__/demo-extend.test.ts.snap    |  1 +
 .../__tests__/__snapshots__/demo.test.js.snap |  1 +
 components/table/hooks/useSorter.tsx          |  9 ++
 5 files changed, 96 insertions(+), 11 deletions(-)

diff --git a/components/table/__tests__/Table.sorter.test.js b/components/table/__tests__/Table.sorter.test.js
index a25b3cdf55..eaf742f0b2 100644
--- a/components/table/__tests__/Table.sorter.test.js
+++ b/components/table/__tests__/Table.sorter.test.js
@@ -68,19 +68,55 @@ describe('Table.sorter', () => {
       ),
     );
 
+    const getNameColumn = () => wrapper.find('th').at(0);
+
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
+  });
+
+  it('should change aria-sort when default sort order is set to descend', () => {
+    const wrapper = mount(
+      createTable(
+        {
+          sortDirections: ['descend', 'ascend'],
+        },
+        {
+          defaultSortOrder: 'descend',
+        },
+      ),
+    );
+
+    const getNameColumn = () => wrapper.find('th').at(0);
+
+    // Test that it cycles through the order of sortDirections
+    expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
+
+    wrapper.find('.ant-table-column-sorters').simulate('click');
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
+
+    wrapper.find('.ant-table-column-sorters').simulate('click');
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   it('sort records', () => {
     const wrapper = mount(createTable());
 
+    const getNameColumn = () => wrapper.find('th').at(0);
+
+    // first assert default state
+    expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+
     // ascend
     wrapper.find('.ant-table-column-sorters').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
 
     // descend
     wrapper.find('.ant-table-column-sorters').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
   });
 
   describe('can be controlled by sortOrder', () => {
@@ -333,12 +369,16 @@ describe('Table.sorter', () => {
     // sort name
     getNameColumn().simulate('click');
     expect(getNameIcon('up').hasClass('active')).toBeTruthy();
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
     expect(getAgeIcon('up').hasClass('active')).toBeFalsy();
+    expect(getAgeColumn().prop('aria-sort')).toEqual(undefined);
 
     // sort age
     getAgeColumn().simulate('click');
     expect(getNameIcon('up').hasClass('active')).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
     expect(getAgeIcon('up').hasClass('active')).toBeTruthy();
+    expect(getAgeColumn().prop('aria-sort')).toEqual('ascending');
   });
 
   // https://github.com/ant-design/ant-design/issues/12571
@@ -380,7 +420,7 @@ describe('Table.sorter', () => {
 
     const wrapper = mount(<TableTest />);
 
-    const getNameColumn = () => wrapper.find('.ant-table-column-has-sorters').at(0);
+    const getNameColumn = () => wrapper.find('th').at(0);
     const getIcon = name => getNameColumn().find(`.ant-table-column-sorter-${name}`).first();
 
     expect(getIcon('up').hasClass('active')).toBeFalsy();
@@ -390,16 +430,19 @@ describe('Table.sorter', () => {
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeTruthy();
     expect(getIcon('down').hasClass('active')).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
 
     // sort name
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeFalsy();
     expect(getIcon('down').hasClass('active')).toBeTruthy();
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // sort name
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeFalsy();
     expect(getIcon('down').hasClass('active')).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   // https://github.com/ant-design/ant-design/issues/12737
@@ -444,7 +487,7 @@ describe('Table.sorter', () => {
 
     const wrapper = mount(<TableTest />);
 
-    const getNameColumn = () => wrapper.find('.ant-table-column-has-sorters').at(0);
+    const getNameColumn = () => wrapper.find('th').at(0);
     const getIcon = name => getNameColumn().find(`.ant-table-column-sorter-${name}`).first();
 
     expect(getIcon('up').hasClass('active')).toBeFalsy();
@@ -454,16 +497,19 @@ describe('Table.sorter', () => {
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeTruthy();
     expect(getIcon('down').hasClass('active')).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
 
     // sort name
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeFalsy();
     expect(getIcon('down').hasClass('active')).toBeTruthy();
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // sort name
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeFalsy();
     expect(getIcon('down').hasClass('active')).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   // https://github.com/ant-design/ant-design/issues/12870
@@ -508,13 +554,14 @@ describe('Table.sorter', () => {
     }
 
     const wrapper = mount(<TableTest />);
-    const getNameColumn = () => wrapper.find('.ant-table-column-has-sorters').at(0);
+    const getNameColumn = () => wrapper.find('th').at(0);
     expect(
       getNameColumn().find('.ant-table-column-sorter-up').at(0).hasClass('active'),
     ).toBeFalsy();
     expect(
       getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
     ).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
 
     // sort name
     getNameColumn().simulate('click');
@@ -524,6 +571,7 @@ describe('Table.sorter', () => {
     expect(
       getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
     ).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
 
     // sort name
     getNameColumn().simulate('click');
@@ -533,6 +581,7 @@ describe('Table.sorter', () => {
     expect(
       getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
     ).toBeTruthy();
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // sort name
     getNameColumn().simulate('click');
@@ -542,6 +591,7 @@ describe('Table.sorter', () => {
     expect(
       getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
     ).toBeFalsy();
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   it('should first sort by descend, then ascend, then cancel sort', () => {
@@ -550,18 +600,22 @@ describe('Table.sorter', () => {
         sortDirections: ['descend', 'ascend'],
       }),
     );
+    const getNameColumn = () => wrapper.find('th').at(0);
 
     // descend
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    getNameColumn().simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // ascend
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    getNameColumn().simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
 
     // cancel sort
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    getNameColumn().simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   it('should first sort by descend, then cancel sort', () => {
@@ -571,13 +625,20 @@ describe('Table.sorter', () => {
       }),
     );
 
+    const getNameColumn = () => wrapper.find('th').at(0);
+
+    // default
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+
     // descend
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    getNameColumn().simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // cancel sort
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    getNameColumn().simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   it('should first sort by descend, then cancel sort. (column prop)', () => {
@@ -590,13 +651,20 @@ describe('Table.sorter', () => {
       ),
     );
 
+    const getNameColumn = () => wrapper.find('th').at(0);
+
+    // default
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+
     // descend
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    getNameColumn().simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // cancel sort
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    getNameColumn().simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   it('pagination back', () => {
@@ -614,9 +682,14 @@ describe('Table.sorter', () => {
       }),
     );
 
-    wrapper.find('.ant-table-column-sorters').simulate('click');
+    const getNameColumn = () => wrapper.find('th').at(0);
+
+    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
+
+    getNameColumn().simulate('click');
     expect(onChange.mock.calls[0][0].current).toBe(2);
     expect(onPageChange).not.toHaveBeenCalled();
+    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
   });
 
   it('should support onHeaderCell in sort column', () => {
diff --git a/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap b/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
index 7aa54aa963..08c4f730c0 100644
--- a/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
+++ b/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
@@ -96,6 +96,7 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
               >
                 <tr>
                   <th
+                    aria-sort="ascending"
                     class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
                   >
                     <div
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index a69bedafd0..a99784e582 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -12778,6 +12778,7 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
                     </div>
                   </th>
                   <th
+                    aria-sort="descending"
                     class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
                   >
                     <div
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index 5a33e70d63..299437abaf 100644
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -9898,6 +9898,7 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                     </div>
                   </th>
                   <th
+                    aria-sort="descending"
                     class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
                   >
                     <div
diff --git a/components/table/hooks/useSorter.tsx b/components/table/hooks/useSorter.tsx
index c85e94af61..7758c530b6 100644
--- a/components/table/hooks/useSorter.tsx
+++ b/components/table/hooks/useSorter.tsx
@@ -192,6 +192,15 @@ function injectSorter<RecordType>(
             }
           };
 
+          // Inform the screen-reader so it can tell the visually impaired user which column is sorted
+          if (sorterOrder) {
+            if (sorterOrder === 'ascend') {
+              cell['aria-sort'] = 'ascending';
+            } else {
+              cell['aria-sort'] = 'descending';
+            }
+          }
+
           cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`);
 
           return cell;

From 5fb13e9681d0bfe967a1a0b7b7ea04f581709a14 Mon Sep 17 00:00:00 2001
From: uchanlee <uchanlee.dev@gmail.com>
Date: Tue, 11 Jan 2022 16:12:03 +0900
Subject: [PATCH 04/33] feat: add skeleton input block (#33672)

* feat: add skeleton input block

* update: skeleton shapshot
---
 components/skeleton/Input.tsx                      |  4 +++-
 .../__snapshots__/demo-extend.test.ts.snap         | 14 +++++++++++---
 .../__tests__/__snapshots__/demo.test.js.snap      | 14 +++++++++++---
 components/skeleton/demo/element.md                |  9 ++++++---
 components/skeleton/style/index.less               |  9 +++++++--
 5 files changed, 38 insertions(+), 12 deletions(-)

diff --git a/components/skeleton/Input.tsx b/components/skeleton/Input.tsx
index 4287615227..1cb5e31f85 100644
--- a/components/skeleton/Input.tsx
+++ b/components/skeleton/Input.tsx
@@ -6,11 +6,12 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
 export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
   size?: 'large' | 'small' | 'default';
+  block?: boolean;
 }
 
 const SkeletonInput = (props: SkeletonInputProps) => {
   const renderSkeletonInput = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, className, active } = props;
+    const { prefixCls: customizePrefixCls, className, active, block } = props;
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
     const otherProps = omit(props, ['prefixCls']);
     const cls = classNames(
@@ -18,6 +19,7 @@ const SkeletonInput = (props: SkeletonInputProps) => {
       `${prefixCls}-element`,
       {
         [`${prefixCls}-active`]: active,
+        [`${prefixCls}-block`]: block,
       },
       className,
     );
diff --git a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
index 96d8785635..30ffb63201 100644
--- a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -138,7 +138,6 @@ Array [
       >
         <span
           class="ant-skeleton-input"
-          style="width:200px"
         />
       </div>
     </div>
@@ -154,6 +153,15 @@ Array [
   </div>,
   <br />,
   <br />,
+  <div
+    class="ant-skeleton ant-skeleton-element"
+  >
+    <span
+      class="ant-skeleton-input"
+    />
+  </div>,
+  <br />,
+  <br />,
   <div
     class="ant-skeleton ant-skeleton-element"
   >
@@ -227,9 +235,9 @@ Array [
       >
         <label
           class=""
-          title="Button Block"
+          title="Button and Input Block"
         >
-          Button Block
+          Button and Input Block
         </label>
       </div>
       <div
diff --git a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
index d93c28bb3c..e24269fcc2 100644
--- a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
@@ -138,7 +138,6 @@ Array [
       >
         <span
           class="ant-skeleton-input"
-          style="width:200px"
         />
       </div>
     </div>
@@ -154,6 +153,15 @@ Array [
   </div>,
   <br />,
   <br />,
+  <div
+    class="ant-skeleton ant-skeleton-element"
+  >
+    <span
+      class="ant-skeleton-input"
+    />
+  </div>,
+  <br />,
+  <br />,
   <div
     class="ant-skeleton ant-skeleton-element"
   >
@@ -227,9 +235,9 @@ Array [
       >
         <label
           class=""
-          title="Button Block"
+          title="Button and Input Block"
         >
-          Button Block
+          Button and Input Block
         </label>
       </div>
       <div
diff --git a/components/skeleton/demo/element.md b/components/skeleton/demo/element.md
index a1978de629..b74572d686 100644
--- a/components/skeleton/demo/element.md
+++ b/components/skeleton/demo/element.md
@@ -14,7 +14,7 @@ title:
 Skeleton Button, Avatar, Input and Image.
 
 ```jsx
-import { Skeleton, Space, Divider, Switch, Form, Radio } from 'antd';
+import { Skeleton, Space, Divider, Switch, Form, Radio, Button, Input } from 'antd';
 
 class Demo extends React.Component {
   state = {
@@ -48,20 +48,23 @@ class Demo extends React.Component {
         <Space>
           <Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
           <Skeleton.Avatar active={active} size={size} shape={avatarShape} />
-          <Skeleton.Input style={{ width: 200 }} active={active} size={size} />
+          <Skeleton.Input active={active} size={size} />
         </Space>
         <br />
         <br />
         <Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
         <br />
         <br />
+        <Skeleton.Input active={active} size={size} block={block} />
+        <br />
+        <br />
         <Skeleton.Image />
         <Divider />
         <Form layout="inline" style={{ margin: '16px 0' }}>
           <Form.Item label="Active">
             <Switch checked={active} onChange={this.handleActiveChange} />
           </Form.Item>
-          <Form.Item label="Button Block">
+          <Form.Item label="Button and Input Block">
             <Switch checked={block} onChange={this.handleBlockChange} />
           </Form.Item>
           <Form.Item label="Size">
diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less
index 226d84aadb..c4ca85b58f 100644
--- a/components/skeleton/style/index.less
+++ b/components/skeleton/style/index.less
@@ -109,13 +109,17 @@
     }
   }
 
-  // Skeleton Block Button
+  // Skeleton Block Button, Input
   &.@{skeleton-prefix-cls}-block {
     width: 100%;
 
     .@{skeleton-button-prefix-cls} {
       width: 100%;
     }
+
+    .@{skeleton-input-prefix-cls} {
+      width: 100%;
+    }
   }
 
   // Skeleton element
@@ -238,7 +242,8 @@
 }
 
 .skeleton-element-input-size(@size) {
-  width: 100%;
+  width: @size * 5;
+  min-width: @size * 5;
   .skeleton-element-common-size(@size);
 }
 

From e5451a95cb07df9146bf1b0db9501767a064e3d0 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 13 Jan 2022 13:34:34 +0800
Subject: [PATCH 05/33] feat: dropdown support arrow pointing at center
 (#33658)

* feat: add pointAtCenter prop for dropdown

* feat: dropdown support arrow pointing at center

* chore: code clean

* chore: use getPlacements in tooltip

* feat: dropdown support 'top' and 'bottom'

* chore: update snapshot

* chore: move placements to util folder

* feat: make 'topCenter' and 'bottomCenter' in Dropdown deprecated

* test: update snapshot

* test: add test for topCenter and bottomCenter
---
 components/{tooltip => _util}/placements.tsx  |    3 +-
 components/breadcrumb/BreadcrumbItem.tsx      |    6 +-
 .../__snapshots__/demo-extend.test.ts.snap    | 1292 ++++++++++++++++-
 .../__tests__/__snapshots__/demo.test.js.snap |   62 +-
 components/dropdown/__tests__/index.test.js   |   20 +
 components/dropdown/demo/arrow-center.md      |   75 +
 components/dropdown/demo/arrow.md             |    8 +-
 components/dropdown/demo/dropdown-button.md   |    2 +-
 components/dropdown/demo/placement.md         |    8 +-
 components/dropdown/dropdown.tsx              |   33 +-
 components/dropdown/index.en-US.md            |    6 +-
 components/dropdown/index.zh-CN.md            |    6 +-
 components/dropdown/style/index.less          |   24 +-
 components/tooltip/index.tsx                  |   14 +-
 package.json                                  |    2 +-
 site/theme/template/Content/MainContent.jsx   |    2 +-
 16 files changed, 1510 insertions(+), 53 deletions(-)
 rename components/{tooltip => _util}/placements.tsx (97%)
 create mode 100644 components/dropdown/demo/arrow-center.md

diff --git a/components/tooltip/placements.tsx b/components/_util/placements.tsx
similarity index 97%
rename from components/tooltip/placements.tsx
rename to components/_util/placements.tsx
index 3fc9152268..eb4dead8a8 100644
--- a/components/tooltip/placements.tsx
+++ b/components/_util/placements.tsx
@@ -42,6 +42,7 @@ export default function getPlacements(config: PlacementsConfig) {
     horizontalArrowShift = 16,
     verticalArrowShift = 8,
     autoAdjustOverflow,
+    arrowPointAtCenter,
   } = config;
   const placementMap: BuildInPlacements = {
     left: {
@@ -94,7 +95,7 @@ export default function getPlacements(config: PlacementsConfig) {
     },
   };
   Object.keys(placementMap).forEach(key => {
-    placementMap[key] = config.arrowPointAtCenter
+    placementMap[key] = arrowPointAtCenter
       ? {
           ...placementMap[key],
           overflow: getOverflowOptions(autoAdjustOverflow),
diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx
index fd29f24a85..860971e847 100644
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@@ -30,7 +30,7 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
   const renderBreadcrumbNode = (breadcrumbItem: React.ReactNode) => {
     if (overlay) {
       return (
-        <DropDown overlay={overlay} placement="bottomCenter" {...dropdownProps}>
+        <DropDown overlay={overlay} placement="bottom" {...dropdownProps}>
           <span className={`${prefixCls}-overlay-link`}>
             {breadcrumbItem}
             <DownOutlined />
@@ -62,9 +62,7 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
     return (
       <span>
         {link}
-        {separator && (
-          <span className={`${prefixCls}-separator`}>{separator}</span>
-        )}
+        {separator && <span className={`${prefixCls}-separator`}>{separator}</span>}
       </span>
     );
   }
diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7ba1062ede..7bb2346334 100644
--- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -220,7 +220,7 @@ Array [
     type="button"
   >
     <span>
-      bottomCenter
+      bottom
     </span>
   </button>,
   <div>
@@ -860,7 +860,1291 @@ Array [
     type="button"
   >
     <span>
-      topCenter
+      top
+    </span>
+  </button>,
+  <div>
+    <div
+      class="ant-dropdown ant-dropdown-show-arrow"
+      style="opacity:0;pointer-events:none"
+    >
+      <div
+        class="ant-dropdown-arrow"
+      />
+      <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 ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.antgroup.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              1st menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.aliyun.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              2nd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.luohanacademy.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              3rd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </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;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"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      topRight
+    </span>
+  </button>,
+  <div>
+    <div
+      class="ant-dropdown ant-dropdown-show-arrow"
+      style="opacity:0;pointer-events:none"
+    >
+      <div
+        class="ant-dropdown-arrow"
+      />
+      <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 ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.antgroup.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              1st menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.aliyun.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              2nd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.luohanacademy.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              3rd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </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;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"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
+exports[`renders ./components/dropdown/demo/arrow-center.md extend context correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      bottomLeft
+    </span>
+  </button>,
+  <div>
+    <div
+      class="ant-dropdown ant-dropdown-show-arrow"
+      style="opacity:0;pointer-events:none"
+    >
+      <div
+        class="ant-dropdown-arrow"
+      />
+      <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 ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.antgroup.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              1st menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.aliyun.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              2nd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.luohanacademy.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              3rd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </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;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"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      bottom
+    </span>
+  </button>,
+  <div>
+    <div
+      class="ant-dropdown ant-dropdown-show-arrow"
+      style="opacity:0;pointer-events:none"
+    >
+      <div
+        class="ant-dropdown-arrow"
+      />
+      <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 ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.antgroup.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              1st menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.aliyun.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              2nd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.luohanacademy.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              3rd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </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;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"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      bottomRight
+    </span>
+  </button>,
+  <div>
+    <div
+      class="ant-dropdown ant-dropdown-show-arrow"
+      style="opacity:0;pointer-events:none"
+    >
+      <div
+        class="ant-dropdown-arrow"
+      />
+      <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 ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.antgroup.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              1st menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.aliyun.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              2nd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.luohanacademy.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              3rd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </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;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"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      topLeft
+    </span>
+  </button>,
+  <div>
+    <div
+      class="ant-dropdown ant-dropdown-show-arrow"
+      style="opacity:0;pointer-events:none"
+    >
+      <div
+        class="ant-dropdown-arrow"
+      />
+      <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 ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.antgroup.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              1st menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.aliyun.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              2nd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <li
+          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
+          role="menuitem"
+          tabindex="-1"
+        >
+          <span
+            class="ant-dropdown-menu-title-content"
+          >
+            <a
+              href="https://www.luohanacademy.com"
+              rel="noopener noreferrer"
+              target="_blank"
+            >
+              3rd menu item
+            </a>
+          </span>
+        </li>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </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;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"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+        <div>
+          <div
+            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
+            style="opacity:0;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"
+              />
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      top
     </span>
   </button>,
   <div>
@@ -5754,7 +7038,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
           type="button"
         >
           <span>
-            bottomCenter
+            bottom
           </span>
         </button>
         <div>
@@ -6408,7 +7692,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
           type="button"
         >
           <span>
-            topCenter
+            top
           </span>
         </button>
         <div>
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
index 4e4aa98da4..1ff3a8874c 100644
--- a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
@@ -15,7 +15,7 @@ Array [
     type="button"
   >
     <span>
-      bottomCenter
+      bottom
     </span>
   </button>,
   <button
@@ -40,7 +40,61 @@ Array [
     type="button"
   >
     <span>
-      topCenter
+      top
+    </span>
+  </button>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      topRight
+    </span>
+  </button>,
+]
+`;
+
+exports[`renders ./components/dropdown/demo/arrow-center.md correctly 1`] = `
+Array [
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      bottomLeft
+    </span>
+  </button>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      bottom
+    </span>
+  </button>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      bottomRight
+    </span>
+  </button>,
+  <br />,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      topLeft
+    </span>
+  </button>,
+  <button
+    class="ant-btn ant-dropdown-trigger"
+    type="button"
+  >
+    <span>
+      top
     </span>
   </button>,
   <button
@@ -658,7 +712,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
           type="button"
         >
           <span>
-            bottomCenter
+            bottom
           </span>
         </button>
       </div>
@@ -706,7 +760,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
           type="button"
         >
           <span>
-            topCenter
+            top
           </span>
         </button>
       </div>
diff --git a/components/dropdown/__tests__/index.test.js b/components/dropdown/__tests__/index.test.js
index 06631ea92a..dc97a9bb8f 100644
--- a/components/dropdown/__tests__/index.test.js
+++ b/components/dropdown/__tests__/index.test.js
@@ -59,4 +59,24 @@ describe('Dropdown', () => {
     await sleep(500);
     expect(wrapper.find(Dropdown).find('#customExpandIcon').length).toBe(1);
   });
+
+  it('should warn if use topCenter or bottomCenter', () => {
+    const error = jest.spyOn(console, 'error');
+    mount(
+      <div>
+        <Dropdown overlay="123" placement="bottomCenter">
+          <button type="button">bottomCenter</button>
+        </Dropdown>
+        <Dropdown overlay="123" placement="topCenter">
+          <button type="button">topCenter</button>
+        </Dropdown>
+      </div>,
+    );
+    expect(error).toHaveBeenCalledWith(
+      expect.stringContaining("[antd: Dropdown] You are using 'bottomCenter'"),
+    );
+    expect(error).toHaveBeenCalledWith(
+      expect.stringContaining("[antd: Dropdown] You are using 'topCenter'"),
+    );
+  });
 });
diff --git a/components/dropdown/demo/arrow-center.md b/components/dropdown/demo/arrow-center.md
new file mode 100644
index 0000000000..fd4834fbb7
--- /dev/null
+++ b/components/dropdown/demo/arrow-center.md
@@ -0,0 +1,75 @@
+---
+order: 3
+title:
+  zh-CN: 箭头指向
+  en-US: Arrow pointing at the center
+---
+
+## zh-CN
+
+设置 `arrow` 为 `{ pointAtCenter: true }` 后，箭头将指向目标元素的中心。
+
+## en-US
+
+By specifying `arrow` prop with `{ pointAtCenter: true }`, the arrow will point to the center of the target element.
+
+```jsx
+import { Menu, Dropdown, Button } from 'antd';
+
+const menu = (
+  <Menu>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
+        1st menu item
+      </a>
+    </Menu.Item>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
+        2nd menu item
+      </a>
+    </Menu.Item>
+    <Menu.Item>
+      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
+        3rd menu item
+      </a>
+    </Menu.Item>
+  </Menu>
+);
+
+ReactDOM.render(
+  <>
+    <Dropdown overlay={menu} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
+      <Button>bottomLeft</Button>
+    </Dropdown>
+    <Dropdown overlay={menu} placement="bottom" arrow={{ pointAtCenter: true }}>
+      <Button>bottom</Button>
+    </Dropdown>
+    <Dropdown overlay={menu} placement="bottomRight" arrow={{ pointAtCenter: true }}>
+      <Button>bottomRight</Button>
+    </Dropdown>
+    <br />
+    <Dropdown overlay={menu} placement="topLeft" arrow={{ pointAtCenter: true }}>
+      <Button>topLeft</Button>
+    </Dropdown>
+    <Dropdown overlay={menu} placement="top" arrow={{ pointAtCenter: true }}>
+      <Button>top</Button>
+    </Dropdown>
+    <Dropdown overlay={menu} placement="topRight" arrow={{ pointAtCenter: true }}>
+      <Button>topRight</Button>
+    </Dropdown>
+  </>,
+  mountNode,
+);
+```
+
+```css
+#components-dropdown-demo-arrow-center .ant-btn {
+  margin-right: 8px;
+  margin-bottom: 8px;
+}
+.ant-row-rtl #components-dropdown-demo-arrow-center .ant-btn {
+  margin-right: 0;
+  margin-bottom: 8px;
+  margin-left: 8px;
+}
+```
diff --git a/components/dropdown/demo/arrow.md b/components/dropdown/demo/arrow.md
index 7a6af177b3..b4c3880e7f 100644
--- a/components/dropdown/demo/arrow.md
+++ b/components/dropdown/demo/arrow.md
@@ -41,8 +41,8 @@ ReactDOM.render(
     <Dropdown overlay={menu} placement="bottomLeft" arrow>
       <Button>bottomLeft</Button>
     </Dropdown>
-    <Dropdown overlay={menu} placement="bottomCenter" arrow>
-      <Button>bottomCenter</Button>
+    <Dropdown overlay={menu} placement="bottom" arrow>
+      <Button>bottom</Button>
     </Dropdown>
     <Dropdown overlay={menu} placement="bottomRight" arrow>
       <Button>bottomRight</Button>
@@ -51,8 +51,8 @@ ReactDOM.render(
     <Dropdown overlay={menu} placement="topLeft" arrow>
       <Button>topLeft</Button>
     </Dropdown>
-    <Dropdown overlay={menu} placement="topCenter" arrow>
-      <Button>topCenter</Button>
+    <Dropdown overlay={menu} placement="top" arrow>
+      <Button>top</Button>
     </Dropdown>
     <Dropdown overlay={menu} placement="topRight" arrow>
       <Button>topRight</Button>
diff --git a/components/dropdown/demo/dropdown-button.md b/components/dropdown/demo/dropdown-button.md
index 956fc58847..21e406aa78 100644
--- a/components/dropdown/demo/dropdown-button.md
+++ b/components/dropdown/demo/dropdown-button.md
@@ -46,7 +46,7 @@ ReactDOM.render(
     <Dropdown.Button onClick={handleButtonClick} overlay={menu}>
       Dropdown
     </Dropdown.Button>
-    <Dropdown.Button overlay={menu} placement="bottomCenter" icon={<UserOutlined />}>
+    <Dropdown.Button overlay={menu} placement="bottom" icon={<UserOutlined />}>
       Dropdown
     </Dropdown.Button>
     <Dropdown.Button onClick={handleButtonClick} overlay={menu} disabled>
diff --git a/components/dropdown/demo/placement.md b/components/dropdown/demo/placement.md
index d46c3a564f..196bffc5ef 100644
--- a/components/dropdown/demo/placement.md
+++ b/components/dropdown/demo/placement.md
@@ -42,8 +42,8 @@ ReactDOM.render(
       <Dropdown overlay={menu} placement="bottomLeft">
         <Button>bottomLeft</Button>
       </Dropdown>
-      <Dropdown overlay={menu} placement="bottomCenter">
-        <Button>bottomCenter</Button>
+      <Dropdown overlay={menu} placement="bottom">
+        <Button>bottom</Button>
       </Dropdown>
       <Dropdown overlay={menu} placement="bottomRight">
         <Button>bottomRight</Button>
@@ -53,8 +53,8 @@ ReactDOM.render(
       <Dropdown overlay={menu} placement="topLeft">
         <Button>topLeft</Button>
       </Dropdown>
-      <Dropdown overlay={menu} placement="topCenter">
-        <Button>topCenter</Button>
+      <Dropdown overlay={menu} placement="top">
+        <Button>top</Button>
       </Dropdown>
       <Dropdown overlay={menu} placement="topRight">
         <Button>topRight</Button>
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index 8a8a3a06bc..fd4e096893 100644
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -7,6 +7,7 @@ import { ConfigContext } from '../config-provider';
 import devWarning from '../_util/devWarning';
 import { tuple } from '../_util/type';
 import { cloneElement } from '../_util/reactNode';
+import getPlacements from '../_util/placements';
 
 const Placements = tuple(
   'topLeft',
@@ -15,6 +16,8 @@ const Placements = tuple(
   'bottomLeft',
   'bottomCenter',
   'bottomRight',
+  'top',
+  'bottom',
 );
 
 type Placement = typeof Placements[number];
@@ -34,8 +37,12 @@ type Align = {
   useCssTransform?: boolean;
 };
 
+export type DropdownArrowOptions = {
+  pointAtCenter?: boolean;
+};
+
 export interface DropDownProps {
-  arrow?: boolean;
+  arrow?: boolean | DropdownArrowOptions;
   trigger?: ('click' | 'hover' | 'contextMenu')[];
   overlay: React.ReactElement | OverlayFunc;
   onVisibleChange?: (visible: boolean) => void;
@@ -129,10 +136,21 @@ const Dropdown: DropdownInterface = props => {
 
   const getPlacement = () => {
     const { placement } = props;
-    if (placement !== undefined) {
-      return placement;
+    if (!placement) {
+      return direction === 'rtl' ? ('bottomRight' as Placement) : ('bottomLeft' as Placement);
     }
-    return direction === 'rtl' ? ('bottomRight' as Placement) : ('bottomLeft' as Placement);
+
+    if (placement.includes('Center')) {
+      const newPlacement = placement.slice(0, placement.indexOf('Center'));
+      devWarning(
+        !placement.includes('Center'),
+        'Dropdown',
+        `You are using '${placement}' placement in Dropdown, which is deprecated. Try to use '${newPlacement}' instead.`,
+      );
+      return newPlacement;
+    }
+
+    return placement;
   };
 
   const {
@@ -169,11 +187,16 @@ const Dropdown: DropdownInterface = props => {
     alignPoint = true;
   }
 
+  const builtinPlacements = getPlacements({
+    arrowPointAtCenter: typeof arrow === 'object' && arrow.pointAtCenter,
+  });
+
   return (
     <RcDropdown
-      arrow={arrow}
       alignPoint={alignPoint}
       {...props}
+      builtinPlacements={builtinPlacements}
+      arrow={!!arrow}
       overlayClassName={overlayClassNameCustomized}
       prefixCls={prefixCls}
       getPopupContainer={getPopupContainer || getContextPopupContainer}
diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md
index 6099aa4be6..035af00153 100644
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@@ -17,14 +17,14 @@ When there are more than a few options to choose from, you can wrap them in a `D
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| arrow | Whether the dropdown arrow should be visible | boolean | false |  |
+| arrow | Whether the dropdown arrow should be visible | boolean \| { pointAtCenter: boolean } | false |  |
 | disabled | Whether the dropdown menu is disabled | boolean | - |  |
 | destroyPopupOnHide | Whether destroy dropdown when hidden | boolean | false |  |
 | getPopupContainer | To set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  |
 | overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - |  |
 | overlayClassName | The class name of the dropdown root element | string | - |  |
 | overlayStyle | The style of the dropdown root element | CSSProperties | - |  |
-| placement | Placement of popup menu: `bottomLeft`, `bottomCenter`, `bottomRight`, `topLeft`, `topCenter` or `topRight` | string | `bottomLeft` |  |
+| 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 | - |  |
@@ -44,7 +44,7 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
 | disabled | Whether the dropdown menu is disabled | boolean | - |  |
 | icon | Icon (appears on the right) | ReactNode | - |  |
 | overlay | The dropdown menu | [Menu](/components/menu) | - |  |
-| placement | Placement of popup menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` |  |
+| placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | 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` |  |
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index 15eccfea50..3ff8a060bd 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -21,14 +21,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| arrow | 下拉框箭头是否显示 | boolean | false |  |
+| arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false |  |
 | disabled | 菜单是否禁用 | boolean | - |  |
 | destroyPopupOnHide | 关闭后是否销毁 Dropdown | boolean | false |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  |
 | overlay | 菜单 | [Menu](/components/menu) \| () => Menu | - |  |
 | overlayClassName | 下拉根元素的类名称 | string | - |  |
 | overlayStyle | 下拉根元素的样式 | CSSProperties | - |  |
-| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` |  |
+| placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | visible | 菜单是否显示 | boolean | - |  |
 | onVisibleChange | 菜单显示状态改变时调用，参数为 `visible`。点击菜单按钮导致的消失不会触发 | (visible: boolean) => void | - |  |
@@ -48,7 +48,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 | disabled | 菜单是否禁用 | boolean | - |  |
 | icon | 右侧的 icon | ReactNode | - |  |
 | overlay | 菜单 | [Menu](/components/menu/) | - |  |
-| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` |  |
+| placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
 | size | 按钮大小，和 [Button](/components/button/#API) 一致 | string | `default` |  |
 | trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | type | 按钮类型，和 [Button](/components/button/#API) 一致 | string | `default` |  |
diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
index bb60447921..77af0d2807 100644
--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@@ -49,14 +49,14 @@
   }
 
   // Offset the popover to account for the dropdown arrow
-  &-show-arrow&-placement-topCenter,
   &-show-arrow&-placement-topLeft,
+  &-show-arrow&-placement-top,
   &-show-arrow&-placement-topRight {
     padding-bottom: @popover-distance;
   }
 
-  &-show-arrow&-placement-bottomCenter,
   &-show-arrow&-placement-bottomLeft,
+  &-show-arrow&-placement-bottom,
   &-show-arrow&-placement-bottomRight {
     padding-top: @popover-distance;
   }
@@ -76,7 +76,7 @@
     transform: rotate(45deg);
   }
 
-  &-placement-topCenter > &-arrow,
+  &-placement-top > &-arrow,
   &-placement-topLeft > &-arrow,
   &-placement-topRight > &-arrow {
     bottom: @popover-distance - @popover-arrow-width + 2.2px;
@@ -84,7 +84,7 @@
     box-shadow: 3px 3px 7px fade(@black, 7%);
   }
 
-  &-placement-topCenter > &-arrow {
+  &-placement-top > &-arrow {
     left: 50%;
     transform: translateX(-50%) rotate(45deg);
   }
@@ -97,7 +97,7 @@
     right: 16px;
   }
 
-  &-placement-bottomCenter > &-arrow,
+  &-placement-bottom > &-arrow,
   &-placement-bottomLeft > &-arrow,
   &-placement-bottomRight > &-arrow {
     top: @popover-distance - @popover-arrow-width + 2px;
@@ -105,7 +105,7 @@
     box-shadow: -2px -2px 5px fade(@black, 6%);
   }
 
-  &-placement-bottomCenter > &-arrow {
+  &-placement-bottom > &-arrow {
     left: 50%;
     transform: translateX(-50%) rotate(45deg);
   }
@@ -300,8 +300,8 @@
 
   &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomLeft,
   &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomLeft,
-  &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomCenter,
-  &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomCenter,
+  &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottom,
+  &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottom,
   &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomRight,
   &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomRight {
     animation-name: antSlideUpIn;
@@ -309,21 +309,21 @@
 
   &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
   &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft,
-  &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topCenter,
-  &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topCenter,
+  &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-top,
+  &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-top,
   &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight,
   &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight {
     animation-name: antSlideDownIn;
   }
 
   &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomLeft,
-  &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomCenter,
+  &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottom,
   &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomRight {
     animation-name: antSlideUpOut;
   }
 
   &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft,
-  &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topCenter,
+  &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-top,
   &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight {
     animation-name: antSlideDownOut;
   }
diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx
index 8842bb7c84..93a53eef7c 100644
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@@ -4,7 +4,7 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
 import classNames from 'classnames';
 import { placements as Placements } from 'rc-tooltip/lib/placements';
-import getPlacements, { AdjustOverflow, PlacementsConfig } from './placements';
+import getPlacements, { AdjustOverflow, PlacementsConfig } from '../_util/placements';
 import { cloneElement, isValidElement } from '../_util/reactNode';
 import { ConfigContext } from '../config-provider';
 import { PresetColorType, PresetColorTypes } from '../_util/colors';
@@ -130,9 +130,11 @@ function getDisabledCompatibleChildren(element: React.ReactElement<any>, prefixC
 }
 
 const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
-  const { getPopupContainer: getContextPopupContainer, getPrefixCls, direction } = React.useContext(
-    ConfigContext,
-  );
+  const {
+    getPopupContainer: getContextPopupContainer,
+    getPrefixCls,
+    direction,
+  } = React.useContext(ConfigContext);
 
   const [visible, setVisible] = useMergedState(false, {
     value: props.visible,
@@ -167,11 +169,11 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
   const onPopupAlign = (domNode: HTMLElement, align: any) => {
     const placements: any = getTooltipPlacements();
     // 当前返回的位置
-    const placement = Object.keys(placements).filter(
+    const placement = Object.keys(placements).find(
       key =>
         placements[key].points[0] === align.points[0] &&
         placements[key].points[1] === align.points[1],
-    )[0];
+    );
     if (!placement) {
       return;
     }
diff --git a/package.json b/package.json
index 75c96aaa85..f457399d79 100644
--- a/package.json
+++ b/package.json
@@ -126,7 +126,7 @@
     "rc-collapse": "~3.1.0",
     "rc-dialog": "~8.6.0",
     "rc-drawer": "~4.4.2",
-    "rc-dropdown": "~3.2.0",
+    "rc-dropdown": "~3.2.2",
     "rc-field-form": "~1.22.0-2",
     "rc-image": "~5.2.5",
     "rc-input-number": "~7.3.0",
diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx
index 6c776b0767..2024068314 100644
--- a/site/theme/template/Content/MainContent.jsx
+++ b/site/theme/template/Content/MainContent.jsx
@@ -523,7 +523,7 @@ class MainContent extends Component {
             </section>
             {componentPage && (
               <div className="fixed-widgets">
-                <Dropdown overlay={this.getThemeSwitchMenu()} placement="topCenter">
+                <Dropdown overlay={this.getThemeSwitchMenu()} placement="top">
                   <Avatar className="fixed-widgets-avatar" size={44} icon={<ThemeIcon />} />
                 </Dropdown>
               </div>

From 8b4abbb1f5168782e9984870c5a427518493c761 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 18 Jan 2022 18:19:42 +0800
Subject: [PATCH 06/33] feat: border color with transparency (#33506)

* feat: border color with transparency

* feat: update progess remain color with rgba(0, 0, 0, 0.06)

* feat: progress remaining color
---
 components/style/themes/variable.less | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/style/themes/variable.less b/components/style/themes/variable.less
index 5ebd52c21c..742835cee3 100644
--- a/components/style/themes/variable.less
+++ b/components/style/themes/variable.less
@@ -221,7 +221,7 @@ html {
 
 // Border color
 @border-color-base: hsv(0, 0, 85%); // base border outline a component
-@border-color-split: hsv(0, 0, 94%); // split border inside a component
+@border-color-split: rgba(0, 0, 0, 0.06); // split border inside a component
 @border-color-inverse: @white;
 @border-width-base: 1px; // width of the border for a component
 @border-style-base: solid; // style of a components border
@@ -622,7 +622,7 @@ html {
 // Progress
 // --
 @progress-default-color: @processing-color;
-@progress-remaining-color: @background-color-base;
+@progress-remaining-color: rgba(0, 0, 0, 0.04);
 @progress-info-text-color: @progress-text-color;
 @progress-radius: 100px;
 @progress-steps-item-bg: #f3f3f3;

From daa9804824615eef2e27ee48efc4cc16dda61fd1 Mon Sep 17 00:00:00 2001
From: Cat-XHS <1349021570@qq.com>
Date: Thu, 20 Jan 2022 16:54:47 +0800
Subject: [PATCH 07/33] feat: Select/DatePicker/TimePicker/TreeSelect support
 placement (#33541)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* feat: select components add placement api

* feat: select components add placement api

* fix: delete placement

* fix: change md demo and delete export

* feat: cascader and tree-select add placement

* feat: datapicker add placement api

* fix: change repeat static declaration to single

* test: updata test units

* doc: change doc

* fix: delete merge message & delete decalare ts

* test: fix unit test

* fix: add transName in select & treeSelect & cascader

* fix: change common api in utils

* fix: change useless if block to only

* fix: change placement string to enum

* fix: lint done

Co-authored-by: 礼检 <ljj337009@antgroup.com>
---
 components/_util/motion.tsx                   |   13 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  235 +++
 .../__tests__/__snapshots__/demo.test.js.snap |  145 ++
 components/cascader/__tests__/index.test.js   |   23 +-
 components/cascader/demo/placement.md         |   77 +
 components/cascader/index.en-US.md            |    2 +-
 components/cascader/index.tsx                 |   22 +-
 components/cascader/index.zh-CN.md            |    2 +-
 .../date-picker/__tests__/DatePicker.test.js  |   32 +
 .../__snapshots__/demo-extend.test.ts.snap    | 1861 +++++++++++++++++
 .../__tests__/__snapshots__/demo.test.js.snap |  210 ++
 components/date-picker/demo/placement.md      |   47 +
 .../generatePicker/generateRangePicker.tsx    |    4 +-
 .../generatePicker/generateSinglePicker.tsx   |    4 +-
 .../date-picker/generatePicker/index.tsx      |    4 +
 components/date-picker/index.en-US.md         |    1 +
 components/date-picker/index.zh-CN.md         |    1 +
 components/date-picker/util.ts                |   55 +
 .../__snapshots__/demo-extend.test.ts.snap    |  247 +++
 .../__tests__/__snapshots__/demo.test.js.snap |  148 ++
 components/select/demo/placement.md           |   53 +
 components/select/index.en-US.md              |    3 +-
 components/select/index.tsx                   |   23 +-
 components/select/index.zh-CN.md              |    3 +-
 components/time-picker/index.en-US.md         |    1 +
 components/time-picker/index.zh-CN.md         |    1 +
 .../__snapshots__/demo-extend.test.ts.snap    |  427 ++++
 .../__tests__/__snapshots__/demo.test.js.snap |  142 ++
 components/tree-select/demo/placement.md      |   64 +
 components/tree-select/index.en-US.md         |    1 +
 components/tree-select/index.tsx              |   21 +-
 components/tree-select/index.zh-CN.md         |    1 +
 32 files changed, 3856 insertions(+), 17 deletions(-)
 create mode 100644 components/cascader/demo/placement.md
 create mode 100644 components/date-picker/demo/placement.md
 create mode 100644 components/select/demo/placement.md
 create mode 100644 components/tree-select/demo/placement.md

diff --git a/components/_util/motion.tsx b/components/_util/motion.tsx
index 1c69a9f05a..edac9ccda1 100644
--- a/components/_util/motion.tsx
+++ b/components/_util/motion.tsx
@@ -1,5 +1,6 @@
 import { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion';
 import { MotionEvent } from 'rc-motion/lib/interface';
+import { tuple } from './type';
 
 // ================== Collapse Motion ==================
 const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
@@ -25,11 +26,21 @@ const collapseMotion: CSSMotionProps = {
   motionDeadline: 500,
 };
 
+const SelectPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight');
+export type SelectCommonPlacement = typeof SelectPlacements[number];
+
+const getTransitionDirection = (placement: SelectCommonPlacement | undefined) => {
+  if (placement !== undefined && (placement === 'topLeft' || placement === 'topRight')) {
+    return `slide-down`;
+  }
+  return `slide-up`;
+};
+
 const getTransitionName = (rootPrefixCls: string, motion: string, transitionName?: string) => {
   if (transitionName !== undefined) {
     return transitionName;
   }
   return `${rootPrefixCls}-${motion}`;
 };
-export { getTransitionName };
+export { getTransitionName, getTransitionDirection };
 export default collapseMotion;
diff --git a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
index cec599fae5..7a472fce2b 100644
--- a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1674,6 +1674,241 @@ exports[`renders ./components/cascader/demo/multiple.md extend context correctly
 </div>
 `;
 
+exports[`renders ./components/cascader/demo/placement.md extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-button-input"
+          type="radio"
+          value="topLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="topRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topRight
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomRight
+      </span>
+    </label>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-haspopup="listbox"
+          aria-owns="undefined_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          readonly=""
+          role="combobox"
+          style="opacity:0"
+          type="search"
+          unselectable="on"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-placeholder"
+      >
+        Please select
+      </span>
+    </div>
+    <div>
+      <div
+        class="ant-select-dropdown ant-cascader-dropdown"
+        style="opacity:0;pointer-events:none;min-width:auto"
+      >
+        <div>
+          <div
+            class="ant-cascader-menus"
+          >
+            <ul
+              class="ant-cascader-menu"
+              role="menu"
+            >
+              <li
+                aria-checked="false"
+                class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+                data-path-key="zhejiang"
+                role="menuitemcheckbox"
+                title="Zhejiang"
+              >
+                <div
+                  class="ant-cascader-menu-item-content"
+                >
+                  Zhejiang
+                </div>
+                <div
+                  class="ant-cascader-menu-item-expand-icon"
+                >
+                  <span
+                    aria-label="right"
+                    class="anticon anticon-right"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="right"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </li>
+              <li
+                aria-checked="false"
+                class="ant-cascader-menu-item ant-cascader-menu-item-expand"
+                data-path-key="jiangsu"
+                role="menuitemcheckbox"
+                title="Jiangsu"
+              >
+                <div
+                  class="ant-cascader-menu-item-content"
+                >
+                  Jiangsu
+                </div>
+                <div
+                  class="ant-cascader-menu-item-expand-icon"
+                >
+                  <span
+                    aria-label="right"
+                    class="anticon anticon-right"
+                    role="img"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      data-icon="right"
+                      fill="currentColor"
+                      focusable="false"
+                      height="1em"
+                      viewBox="64 64 896 896"
+                      width="1em"
+                    >
+                      <path
+                        d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+                      />
+                    </svg>
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down ant-select-suffix"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>,
+]
+`;
+
 exports[`renders ./components/cascader/demo/search.md extend context correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
diff --git a/components/cascader/__tests__/__snapshots__/demo.test.js.snap b/components/cascader/__tests__/__snapshots__/demo.test.js.snap
index abb0d17bee..a0cdea788e 100644
--- a/components/cascader/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/cascader/__tests__/__snapshots__/demo.test.js.snap
@@ -658,6 +658,151 @@ exports[`renders ./components/cascader/demo/multiple.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/cascader/demo/placement.md correctly 1`] = `
+Array [
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-button-input"
+          type="radio"
+          value="topLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="topRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topRight
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomRight
+      </span>
+    </label>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-haspopup="listbox"
+          aria-owns="undefined_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          readonly=""
+          role="combobox"
+          style="opacity:0"
+          type="search"
+          unselectable="on"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-placeholder"
+      >
+        Please select
+      </span>
+    </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down ant-select-suffix"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>,
+]
+`;
+
 exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
diff --git a/components/cascader/__tests__/index.test.js b/components/cascader/__tests__/index.test.js
index 72c409ffb6..41ac07d339 100644
--- a/components/cascader/__tests__/index.test.js
+++ b/components/cascader/__tests__/index.test.js
@@ -368,6 +368,23 @@ describe('Cascader', () => {
     expect(wrapper.find('.ant-select-selection-placeholder').text()).toEqual(customPlaceholder);
   });
 
+  it('placement work correctly', () => {
+    const customerOptions = [
+      {
+        value: 'zhejiang',
+        label: 'Zhejiang',
+        children: [
+          {
+            value: 'hangzhou',
+            label: 'Hangzhou',
+          },
+        ],
+      },
+    ];
+    const wrapper = mount(<Cascader options={customerOptions} placement="topRight" />);
+    expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('topRight');
+  });
+
   it('popup correctly with defaultValue RTL', () => {
     const wrapper = mount(
       <ConfigProvider direction="rtl">
@@ -478,10 +495,12 @@ describe('Cascader', () => {
   describe('legacy props', () => {
     it('popupClassName', () => {
       const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-      const wrapper = mount(<Cascader open popupPlacement="topRight" popupClassName="mock-cls" />);
+      const wrapper = mount(
+        <Cascader open popupPlacement="bottomLeft" popupClassName="mock-cls" />,
+      );
 
       expect(wrapper.exists('.mock-cls')).toBeTruthy();
-      expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('topRight');
+      expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('bottomLeft');
 
       expect(errorSpy).toHaveBeenCalledWith(
         'Warning: [antd: Cascader] `popupClassName` is deprecated. Please use `dropdownClassName` instead.',
diff --git a/components/cascader/demo/placement.md b/components/cascader/demo/placement.md
new file mode 100644
index 0000000000..21a7a19caf
--- /dev/null
+++ b/components/cascader/demo/placement.md
@@ -0,0 +1,77 @@
+---
+order: 13
+title:
+  zh-CN: 弹出位置
+  en-US: Placement
+---
+
+## zh-CN
+
+可以通过 `placement` 手动指定弹出的位置。
+
+## en-US
+
+You can manually specify the position of the popup via `placement`.
+
+```jsx
+import { Cascader, Radio } from 'antd';
+
+const options = [
+  {
+    value: 'zhejiang',
+    label: 'Zhejiang',
+    children: [
+      {
+        value: 'hangzhou',
+        label: 'Hangzhou',
+        children: [
+          {
+            value: 'xihu',
+            label: 'West Lake',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'jiangsu',
+    label: 'Jiangsu',
+    children: [
+      {
+        value: 'nanjing',
+        label: 'Nanjing',
+        children: [
+          {
+            value: 'zhonghuamen',
+            label: 'Zhong Hua Men',
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const SetPlacementDemo = () => {
+  const [placement, SetPlacement] = React.useState('topLeft');
+
+  const placementChange = e => {
+    SetPlacement(e.target.value);
+  };
+
+  return (
+    <>
+      <Radio.Group value={placement} onChange={placementChange}>
+        <Radio.Button value="topLeft">topLeft</Radio.Button>
+        <Radio.Button value="topRight">topRight</Radio.Button>
+        <Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
+        <Radio.Button value="bottomRight">bottomRight</Radio.Button>
+      </Radio.Group>
+      <br />
+      <br />
+      <Cascader options={options} placeholder="Please select" placement={placement} />
+    </>
+  );
+};
+
+ReactDOM.render(<SetPlacementDemo />, mountNode);
+```
diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md
index d0d9a698a4..ab236c8dad 100644
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@@ -42,7 +42,7 @@ Cascade selection box.
 | open | Set visible of cascader popup | boolean | - | 4.17.0 |
 | options | The data options of cascade | [Option](#Option)\[] | - |  |
 | placeholder | The input placeholder | string | `Please select` |  |
-| placement | Use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | 4.17.0 |
+| placement | Use preset popup align config from builtinPlacements | `bottomLeft` `bottomRight` `topLeft` `topRight` | `bottomLeft` | 4.17.0 |
 | showSearch | Whether show search input in single mode | boolean \| [Object](#showSearch) | false |  |
 | size | The input size | `large` \| `middle` \| `small` | - |  |
 | style | The additional style | CSSProperties | - |  |
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 18881e52fd..9563b7f682 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -17,7 +17,7 @@ import { ConfigContext } from '../config-provider';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
 import getIcons from '../select/utils/iconUtil';
-import { getTransitionName } from '../_util/motion';
+import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
 
 // Align the design since we use `rc-select` in root. This help:
 // - List search content will show all content
@@ -85,7 +85,7 @@ export interface CascaderProps<DataNodeType>
   multiple?: boolean;
   size?: SizeType;
   bordered?: boolean;
-
+  placement?: SelectCommonPlacement;
   suffixIcon?: React.ReactNode;
   options?: DataNodeType[];
 }
@@ -107,6 +107,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
     popupClassName,
     dropdownClassName,
     expandIcon,
+    placement,
     showSearch,
     allowClear = true,
     notFoundContent,
@@ -210,6 +211,16 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
     prefixCls,
   });
 
+  // ===================== Placement =====================
+  const getPlacement = () => {
+    if (placement !== undefined) {
+      return placement;
+    }
+    return direction === 'rtl'
+      ? ('bottomRight' as SelectCommonPlacement)
+      : ('bottomLeft' as SelectCommonPlacement);
+  };
+
   // ==================== Render =====================
   return (
     <RcCascader
@@ -226,6 +237,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
       )}
       {...(restProps as any)}
       direction={mergedDirection}
+      placement={getPlacement()}
       notFoundContent={mergedNotFoundContent}
       allowClear={allowClear}
       showSearch={mergedShowSearch}
@@ -238,7 +250,11 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
       dropdownClassName={mergedDropdownClassName}
       dropdownPrefixCls={customizePrefixCls || cascaderPrefixCls}
       choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)}
-      transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
+      transitionName={getTransitionName(
+        rootPrefixCls,
+        getTransitionDirection(placement),
+        transitionName,
+      )}
       getPopupContainer={getPopupContainer || getContextPopupContainer}
       ref={ref}
     />
diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md
index 8fc6a4efda..6f437bc181 100644
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@@ -43,7 +43,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
 | open | 控制浮层显隐 | boolean | - | 4.17.0 |
 | options | 可选项数据源 | [Option](#Option)\[] | - |  |
 | placeholder | 输入框占位文本 | string | `请选择` |  |
-| placement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | 4.17.0 |
+| placement | 浮层预设位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | `bottomLeft` | 4.17.0 |
 | showSearch | 在选择框中显示搜索框 | boolean \| [Object](#showSearch) | false |  |
 | size | 输入框大小 | `large` \| `middle` \| `small` | - |  |
 | style | 自定义样式 | CSSProperties | - |  |
diff --git a/components/date-picker/__tests__/DatePicker.test.js b/components/date-picker/__tests__/DatePicker.test.js
index 51cc73d956..7da679cdf7 100644
--- a/components/date-picker/__tests__/DatePicker.test.js
+++ b/components/date-picker/__tests__/DatePicker.test.js
@@ -199,4 +199,36 @@ describe('DatePicker', () => {
     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__/__snapshots__/demo-extend.test.ts.snap b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
index 47a53a4e9f..f0456a20b3 100644
--- a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -28598,6 +28598,1867 @@ exports[`renders ./components/date-picker/demo/mode.md extend context correctly
 </div>
 `;
 
+exports[`renders ./components/date-picker/demo/placement.md extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-button-input"
+          type="radio"
+          value="topLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="topRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topRight
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomRight
+      </span>
+    </label>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-picker"
+  >
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        autocomplete="off"
+        placeholder="Select date"
+        readonly=""
+        size="12"
+        title=""
+        value=""
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="calendar"
+          class="anticon anticon-calendar"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="calendar"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>,
+  <div>
+    <div
+      class="ant-picker-dropdown"
+      style="opacity:0;pointer-events:none"
+    >
+      <div
+        class="ant-picker-panel-container"
+      >
+        <div
+          class="ant-picker-panel ant-picker-panel-focused"
+          tabindex="-1"
+        >
+          <div
+            class="ant-picker-date-panel"
+          >
+            <div
+              class="ant-picker-header"
+            >
+              <button
+                class="ant-picker-header-super-prev-btn"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="ant-picker-super-prev-icon"
+                />
+              </button>
+              <button
+                class="ant-picker-header-prev-btn"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="ant-picker-prev-icon"
+                />
+              </button>
+              <div
+                class="ant-picker-header-view"
+              >
+                <button
+                  class="ant-picker-month-btn"
+                  tabindex="-1"
+                  type="button"
+                >
+                  Nov
+                </button>
+                <button
+                  class="ant-picker-year-btn"
+                  tabindex="-1"
+                  type="button"
+                >
+                  2016
+                </button>
+              </div>
+              <button
+                class="ant-picker-header-next-btn"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="ant-picker-next-icon"
+                />
+              </button>
+              <button
+                class="ant-picker-header-super-next-btn"
+                tabindex="-1"
+                type="button"
+              >
+                <span
+                  class="ant-picker-super-next-icon"
+                />
+              </button>
+            </div>
+            <div
+              class="ant-picker-body"
+            >
+              <table
+                class="ant-picker-content"
+              >
+                <thead>
+                  <tr>
+                    <th>
+                      Su
+                    </th>
+                    <th>
+                      Mo
+                    </th>
+                    <th>
+                      Tu
+                    </th>
+                    <th>
+                      We
+                    </th>
+                    <th>
+                      Th
+                    </th>
+                    <th>
+                      Fr
+                    </th>
+                    <th>
+                      Sa
+                    </th>
+                  </tr>
+                </thead>
+                <tbody>
+                  <tr>
+                    <td
+                      class="ant-picker-cell"
+                      title="2016-10-30"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        30
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-end"
+                      title="2016-10-31"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        31
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                      title="2016-11-01"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        1
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-02"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        2
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-03"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        3
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-04"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        4
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-05"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        5
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-06"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        6
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-07"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        7
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-08"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        8
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-09"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        9
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-10"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        10
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-11"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        11
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-12"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        12
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-13"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        13
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-14"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        14
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-15"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        15
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-16"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        16
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-17"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        17
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-18"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        18
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-19"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        19
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-20"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        20
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-21"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        21
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
+                      title="2016-11-22"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        22
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-23"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        23
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-24"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        24
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-25"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        25
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-26"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        26
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-27"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        27
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-28"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        28
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-in-view"
+                      title="2016-11-29"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        29
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                      title="2016-11-30"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        30
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell ant-picker-cell-start"
+                      title="2016-12-01"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        1
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2016-12-02"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        2
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2016-12-03"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        3
+                      </div>
+                    </td>
+                  </tr>
+                  <tr>
+                    <td
+                      class="ant-picker-cell"
+                      title="2016-12-04"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        4
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2016-12-05"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        5
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2016-12-06"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        6
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2016-12-07"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        7
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2016-12-08"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        8
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2016-12-09"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        9
+                      </div>
+                    </td>
+                    <td
+                      class="ant-picker-cell"
+                      title="2016-12-10"
+                    >
+                      <div
+                        class="ant-picker-cell-inner"
+                      >
+                        10
+                      </div>
+                    </td>
+                  </tr>
+                </tbody>
+              </table>
+            </div>
+          </div>
+          <div
+            class="ant-picker-footer"
+          >
+            <a
+              class="ant-picker-today-btn"
+            >
+              Today
+            </a>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-picker ant-picker-range"
+  >
+    <div
+      class="ant-picker-input ant-picker-input-active"
+    >
+      <input
+        autocomplete="off"
+        placeholder="Start date"
+        readonly=""
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="ant-picker-range-separator"
+    >
+      <span
+        aria-label="to"
+        class="ant-picker-separator"
+      >
+        <span
+          aria-label="swap-right"
+          class="anticon anticon-swap-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="swap-right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="0 0 1024 1024"
+            width="1em"
+          >
+            <path
+              d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        autocomplete="off"
+        placeholder="End date"
+        readonly=""
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="ant-picker-active-bar"
+      style="left:0;width:0;position:absolute"
+    />
+    <span
+      class="ant-picker-suffix"
+    >
+      <span
+        aria-label="calendar"
+        class="anticon anticon-calendar"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="calendar"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>,
+  <div>
+    <div
+      class="ant-picker-dropdown ant-picker-dropdown-range"
+      style="opacity:0;pointer-events:none"
+    >
+      <div
+        class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
+        style="min-width:0"
+      >
+        <div
+          class="ant-picker-range-arrow"
+          style="left:0"
+        />
+        <div
+          class="ant-picker-panel-container"
+          style="margin-left:0"
+        >
+          <div
+            class="ant-picker-panels"
+          >
+            <div
+              class="ant-picker-panel ant-picker-panel-focused"
+              tabindex="-1"
+            >
+              <div
+                class="ant-picker-date-panel"
+              >
+                <div
+                  class="ant-picker-header"
+                >
+                  <button
+                    class="ant-picker-header-super-prev-btn"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-super-prev-icon"
+                    />
+                  </button>
+                  <button
+                    class="ant-picker-header-prev-btn"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-prev-icon"
+                    />
+                  </button>
+                  <div
+                    class="ant-picker-header-view"
+                  >
+                    <button
+                      class="ant-picker-month-btn"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      Nov
+                    </button>
+                    <button
+                      class="ant-picker-year-btn"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      2016
+                    </button>
+                  </div>
+                  <button
+                    class="ant-picker-header-next-btn"
+                    style="visibility:hidden"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-next-icon"
+                    />
+                  </button>
+                  <button
+                    class="ant-picker-header-super-next-btn"
+                    style="visibility:hidden"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-super-next-icon"
+                    />
+                  </button>
+                </div>
+                <div
+                  class="ant-picker-body"
+                >
+                  <table
+                    class="ant-picker-content"
+                  >
+                    <thead>
+                      <tr>
+                        <th>
+                          Su
+                        </th>
+                        <th>
+                          Mo
+                        </th>
+                        <th>
+                          Tu
+                        </th>
+                        <th>
+                          We
+                        </th>
+                        <th>
+                          Th
+                        </th>
+                        <th>
+                          Fr
+                        </th>
+                        <th>
+                          Sa
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td
+                          class="ant-picker-cell"
+                          title="2016-10-30"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            30
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-end"
+                          title="2016-10-31"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            31
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                          title="2016-11-01"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            1
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-02"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            2
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-03"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            3
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-04"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            4
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-05"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            5
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-06"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            6
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-07"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            7
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-08"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            8
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-09"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            9
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-10"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            10
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-11"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            11
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-12"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            12
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-13"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            13
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-14"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            14
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-15"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            15
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-16"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            16
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-17"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            17
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-18"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            18
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-19"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            19
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-20"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            20
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-21"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            21
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
+                          title="2016-11-22"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            22
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-23"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            23
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-24"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            24
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-25"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            25
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-26"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            26
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-27"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            27
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-28"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            28
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-11-29"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            29
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                          title="2016-11-30"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            30
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-start"
+                          title="2016-12-01"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            1
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2016-12-02"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            2
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2016-12-03"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            3
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell"
+                          title="2016-12-04"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            4
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2016-12-05"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            5
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2016-12-06"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            6
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2016-12-07"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            7
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2016-12-08"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            8
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2016-12-09"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            9
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2016-12-10"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            10
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+            <div
+              class="ant-picker-panel ant-picker-panel-focused"
+              tabindex="-1"
+            >
+              <div
+                class="ant-picker-date-panel"
+              >
+                <div
+                  class="ant-picker-header"
+                >
+                  <button
+                    class="ant-picker-header-super-prev-btn"
+                    style="visibility:hidden"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-super-prev-icon"
+                    />
+                  </button>
+                  <button
+                    class="ant-picker-header-prev-btn"
+                    style="visibility:hidden"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-prev-icon"
+                    />
+                  </button>
+                  <div
+                    class="ant-picker-header-view"
+                  >
+                    <button
+                      class="ant-picker-month-btn"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      Dec
+                    </button>
+                    <button
+                      class="ant-picker-year-btn"
+                      tabindex="-1"
+                      type="button"
+                    >
+                      2016
+                    </button>
+                  </div>
+                  <button
+                    class="ant-picker-header-next-btn"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-next-icon"
+                    />
+                  </button>
+                  <button
+                    class="ant-picker-header-super-next-btn"
+                    tabindex="-1"
+                    type="button"
+                  >
+                    <span
+                      class="ant-picker-super-next-icon"
+                    />
+                  </button>
+                </div>
+                <div
+                  class="ant-picker-body"
+                >
+                  <table
+                    class="ant-picker-content"
+                  >
+                    <thead>
+                      <tr>
+                        <th>
+                          Su
+                        </th>
+                        <th>
+                          Mo
+                        </th>
+                        <th>
+                          Tu
+                        </th>
+                        <th>
+                          We
+                        </th>
+                        <th>
+                          Th
+                        </th>
+                        <th>
+                          Fr
+                        </th>
+                        <th>
+                          Sa
+                        </th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr>
+                        <td
+                          class="ant-picker-cell"
+                          title="2016-11-27"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            27
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2016-11-28"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            28
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2016-11-29"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            29
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-end"
+                          title="2016-11-30"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            30
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
+                          title="2016-12-01"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            1
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-02"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            2
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-03"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            3
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-04"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            4
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-05"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            5
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-06"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            6
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-07"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            7
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-08"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            8
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-09"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            9
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-10"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            10
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-11"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            11
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-12"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            12
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-13"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            13
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-14"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            14
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-15"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            15
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-16"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            16
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-17"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            17
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-18"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            18
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-19"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            19
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-20"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            20
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-21"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            21
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-22"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            22
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-23"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            23
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-24"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            24
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-25"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            25
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-26"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            26
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-27"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            27
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-28"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            28
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-29"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            29
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-in-view"
+                          title="2016-12-30"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            30
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
+                          title="2016-12-31"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            31
+                          </div>
+                        </td>
+                      </tr>
+                      <tr>
+                        <td
+                          class="ant-picker-cell ant-picker-cell-start"
+                          title="2017-01-01"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            1
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-01-02"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            2
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-01-03"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            3
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-01-04"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            4
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-01-05"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            5
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-01-06"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            6
+                          </div>
+                        </td>
+                        <td
+                          class="ant-picker-cell"
+                          title="2017-01-07"
+                        >
+                          <div
+                            class="ant-picker-cell-inner"
+                          >
+                            7
+                          </div>
+                        </td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders ./components/date-picker/demo/presetted-ranges.md extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
index f76787eeb2..bb6af24fd5 100644
--- a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -2349,6 +2349,216 @@ exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/date-picker/demo/placement.md correctly 1`] = `
+Array [
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-button-input"
+          type="radio"
+          value="topLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="topRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topRight
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomRight
+      </span>
+    </label>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-picker"
+  >
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        autocomplete="off"
+        placeholder="Select date"
+        readonly=""
+        size="12"
+        title=""
+        value=""
+      />
+      <span
+        class="ant-picker-suffix"
+      >
+        <span
+          aria-label="calendar"
+          class="anticon anticon-calendar"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="calendar"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-picker ant-picker-range"
+  >
+    <div
+      class="ant-picker-input ant-picker-input-active"
+    >
+      <input
+        autocomplete="off"
+        placeholder="Start date"
+        readonly=""
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="ant-picker-range-separator"
+    >
+      <span
+        aria-label="to"
+        class="ant-picker-separator"
+      >
+        <span
+          aria-label="swap-right"
+          class="anticon anticon-swap-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="swap-right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="0 0 1024 1024"
+            width="1em"
+          >
+            <path
+              d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+    <div
+      class="ant-picker-input"
+    >
+      <input
+        autocomplete="off"
+        placeholder="End date"
+        readonly=""
+        size="12"
+        value=""
+      />
+    </div>
+    <div
+      class="ant-picker-active-bar"
+      style="left:0;width:0;position:absolute"
+    />
+    <span
+      class="ant-picker-suffix"
+    >
+      <span
+        aria-label="calendar"
+        class="anticon anticon-calendar"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="calendar"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>,
+]
+`;
+
 exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
diff --git a/components/date-picker/demo/placement.md b/components/date-picker/demo/placement.md
new file mode 100644
index 0000000000..a736924cc9
--- /dev/null
+++ b/components/date-picker/demo/placement.md
@@ -0,0 +1,47 @@
+---
+order: 28
+title:
+  zh-CN: 基本
+  en-US: Basic
+---
+
+## zh-CN
+
+可以通过 `placement` 手动指定弹出的位置。
+
+## en-US
+
+You can manually specify the position of the popup via `placement`.
+
+```jsx
+import { DatePicker, Space, Radio } from 'antd';
+
+const { RangePicker } = DatePicker;
+
+const SetPlacementDemo = () => {
+  const [placement, SetPlacement] = React.useState('topLeft');
+
+  const placementChange = e => {
+    SetPlacement(e.target.value);
+  };
+
+  return (
+    <>
+      <Radio.Group value={placement} onChange={placementChange}>
+        <Radio.Button value="topLeft">topLeft</Radio.Button>
+        <Radio.Button value="topRight">topRight</Radio.Button>
+        <Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
+        <Radio.Button value="bottomRight">bottomRight</Radio.Button>
+      </Radio.Group>
+      <br />
+      <br />
+      <DatePicker placement={placement} />
+      <br />
+      <br />
+      <RangePicker placement={placement} />
+    </>
+  );
+};
+
+ReactDOM.render(<SetPlacementDemo />, mountNode);
+```
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
index 6444353153..12d9154006 100644
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -10,7 +10,7 @@ import enUS from '../locale/en_US';
 import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
 import SizeContext from '../../config-provider/SizeContext';
 import LocaleReceiver from '../../locale-provider/LocaleReceiver';
-import { getRangePlaceholder } from '../util';
+import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
 import { RangePickerProps, PickerLocale, getTimeProps, Components } from '.';
 import { PickerComponentClass } from './interface';
 
@@ -43,6 +43,7 @@ export default function generateRangePicker<DateType>(
         prefixCls: customizePrefixCls,
         getPopupContainer: customGetPopupContainer,
         className,
+        placement,
         size: customizeSize,
         bordered = true,
         placeholder,
@@ -73,6 +74,7 @@ export default function generateRangePicker<DateType>(
                   </span>
                 }
                 ref={this.pickerRef}
+                dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
                 placeholder={getRangePlaceholder(picker, locale, placeholder)}
                 suffixIcon={picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
                 clearIcon={<CloseCircleFilled />}
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
index d061682316..af208611ab 100644
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -7,7 +7,7 @@ import RCPicker from 'rc-picker';
 import { PickerMode } from 'rc-picker/lib/interface';
 import { GenerateConfig } from 'rc-picker/lib/generate/index';
 import enUS from '../locale/en_US';
-import { getPlaceholder } from '../util';
+import { getPlaceholder, transPlacement2DropdownAlign } from '../util';
 import devWarning from '../../_util/devWarning';
 import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
 import LocaleReceiver from '../../locale-provider/LocaleReceiver';
@@ -68,6 +68,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           className,
           size: customizeSize,
           bordered = true,
+          placement,
           placeholder,
           ...restProps
         } = this.props;
@@ -105,6 +106,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
                   suffixIcon={
                     mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />
                   }
+                  dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
                   clearIcon={<CloseCircleFilled />}
                   prevIcon={<span className={`${prefixCls}-prev-icon`} />}
                   nextIcon={<span className={`${prefixCls}-next-icon`} />}
diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx
index 047d2082c4..ed7d4b509b 100644
--- a/components/date-picker/generatePicker/index.tsx
+++ b/components/date-picker/generatePicker/index.tsx
@@ -17,6 +17,7 @@ import PickerTag from '../PickerTag';
 import { TimePickerLocale } from '../../time-picker';
 import generateSinglePicker from './generateSinglePicker';
 import generateRangePicker from './generateRangePicker';
+import { tuple } from '../../_util/type';
 
 export const Components = { button: PickerButton, rangeItem: PickerTag };
 
@@ -69,6 +70,8 @@ export function getTimeProps<DateType, DisabledTime>(
     showTime: showTimeObj,
   };
 }
+const DataPickerPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight');
+type DataPickerPlacement = typeof DataPickerPlacements[number];
 
 type InjectDefaultProps<Props> = Omit<
   Props,
@@ -76,6 +79,7 @@ type InjectDefaultProps<Props> = Omit<
 > & {
   locale?: PickerLocale;
   size?: SizeType;
+  placement?: DataPickerPlacement;
   bordered?: boolean;
 };
 
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index aaaac1ea19..b20a3333fc 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -69,6 +69,7 @@ The following APIs are shared by DatePicker, RangePicker.
 | panelRender | Customize panel render | (panelNode) => ReactNode | - | 4.5.0 |
 | picker | Set picker type | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 |
 | placeholder | The placeholder of date input | string \| \[string,string] | - |  |
+| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | popupStyle | To customize the style of the popup calendar | CSSProperties | {} |  |
 | prevIcon | The custom prev icon | ReactNode | - | 4.17.0 |
 | size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - |  |
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index 43c9f44432..fd7294a8d3 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -70,6 +70,7 @@ import locale from 'antd/lib/locale/zh_CN';
 | panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 |
 | picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 |
 | placeholder | 输入框提示文字 | string \| \[string, string] | - |  |
+| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | popupStyle | 额外的弹出日历样式 | CSSProperties | {} |  |
 | prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 |
 | size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - |  |
diff --git a/components/date-picker/util.ts b/components/date-picker/util.ts
index 0643a0842a..2f54342943 100644
--- a/components/date-picker/util.ts
+++ b/components/date-picker/util.ts
@@ -1,4 +1,6 @@
 import { PickerMode } from 'rc-picker/lib/interface';
+import { DirectionType } from '../config-provider';
+import { SelectCommonPlacement } from '../_util/motion';
 import { PickerLocale } from './generatePicker';
 
 export function getPlaceholder(
@@ -51,3 +53,56 @@ export function getRangePlaceholder(
   }
   return locale.lang.rangePlaceholder;
 }
+
+export function transPlacement2DropdownAlign(
+  direction: DirectionType,
+  placement?: SelectCommonPlacement,
+) {
+  const overflow = {
+    adjustX: 1,
+    adjustY: 1,
+  };
+  switch (placement) {
+    case 'bottomLeft': {
+      return {
+        points: ['tl', 'bl'],
+        offset: [0, 4],
+        overflow,
+      };
+    }
+    case 'bottomRight': {
+      return {
+        points: ['tr', 'br'],
+        offset: [0, 4],
+        overflow,
+      };
+    }
+    case 'topLeft': {
+      return {
+        points: ['bl', 'tl'],
+        offset: [0, -4],
+        overflow,
+      };
+    }
+    case 'topRight': {
+      return {
+        points: ['br', 'tr'],
+        offset: [0, -4],
+        overflow,
+      };
+    }
+    default: {
+      return direction === 'rtl'
+        ? {
+            points: ['tr', 'br'],
+            offset: [0, 4],
+            overflow,
+          }
+        : {
+            points: ['tl', 'bl'],
+            offset: [0, 4],
+            overflow,
+          };
+    }
+  }
+}
diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
index bc9a98b6d7..15b13b39f9 100644
--- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -4145,6 +4145,253 @@ exports[`renders ./components/select/demo/option-label-prop.md extend context co
 </div>
 `;
 
+exports[`renders ./components/select/demo/placement.md extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-button-input"
+          type="radio"
+          value="topLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="topRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topRight
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomRight
+      </span>
+    </label>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-select ant-select-single ant-select-show-arrow"
+    style="width:120px"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-activedescendant="undefined_list_0"
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-haspopup="listbox"
+          aria-owns="undefined_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          readonly=""
+          role="combobox"
+          style="opacity:0"
+          type="search"
+          unselectable="on"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-item"
+        title="HangZhou #310000"
+      >
+        HangZhou #310000
+      </span>
+    </div>
+    <div>
+      <div
+        class="ant-select-dropdown"
+        style="opacity:0;pointer-events:none"
+      >
+        <div>
+          <div
+            id="undefined_list"
+            role="listbox"
+            style="height:0;width:0;overflow:hidden"
+          >
+            <div
+              aria-label="HangZhou #310000"
+              aria-selected="true"
+              id="undefined_list_0"
+              role="option"
+            >
+              HangZhou
+            </div>
+            <div
+              aria-label="NingBo #315000"
+              aria-selected="false"
+              id="undefined_list_1"
+              role="option"
+            >
+              NingBo
+            </div>
+          </div>
+          <div
+            class="rc-virtual-list"
+            style="position:relative"
+          >
+            <div
+              class="rc-virtual-list-holder"
+              style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+            >
+              <div>
+                <div
+                  class="rc-virtual-list-holder-inner"
+                  style="display:flex;flex-direction:column"
+                >
+                  <div
+                    aria-selected="true"
+                    class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
+                    title="HangZhou #310000"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      HangZhou #310000
+                    </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select:none;-webkit-user-select:none"
+                      unselectable="on"
+                    />
+                  </div>
+                  <div
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option"
+                    title="NingBo #315000"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      NingBo #315000
+                    </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select:none;-webkit-user-select:none"
+                      unselectable="on"
+                    />
+                  </div>
+                  <div
+                    aria-selected="false"
+                    class="ant-select-item ant-select-item-option"
+                    title="WenZhou #325000"
+                  >
+                    <div
+                      class="ant-select-item-option-content"
+                    >
+                      WenZhou #325000
+                    </div>
+                    <span
+                      aria-hidden="true"
+                      class="ant-select-item-option-state"
+                      style="user-select:none;-webkit-user-select:none"
+                      unselectable="on"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down ant-select-suffix"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>,
+]
+`;
+
 exports[`renders ./components/select/demo/responsive.md extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
diff --git a/components/select/__tests__/__snapshots__/demo.test.js.snap b/components/select/__tests__/__snapshots__/demo.test.js.snap
index ad1e10f982..4123081b6f 100644
--- a/components/select/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/select/__tests__/__snapshots__/demo.test.js.snap
@@ -1569,6 +1569,154 @@ exports[`renders ./components/select/demo/option-label-prop.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/select/demo/placement.md correctly 1`] = `
+Array [
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-button-input"
+          type="radio"
+          value="topLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="topRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topRight
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomRight
+      </span>
+    </label>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-select ant-select-single ant-select-show-arrow"
+    style="width:120px"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-activedescendant="undefined_list_0"
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-haspopup="listbox"
+          aria-owns="undefined_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          readonly=""
+          role="combobox"
+          style="opacity:0"
+          type="search"
+          unselectable="on"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-item"
+        title="HangZhou #310000"
+      >
+        HangZhou #310000
+      </span>
+    </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down ant-select-suffix"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>,
+]
+`;
+
 exports[`renders ./components/select/demo/responsive.md correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
diff --git a/components/select/demo/placement.md b/components/select/demo/placement.md
new file mode 100644
index 0000000000..7ccca34501
--- /dev/null
+++ b/components/select/demo/placement.md
@@ -0,0 +1,53 @@
+---
+order: 38
+title:
+  zh-CN: 弹出位置
+  en-US: Placement
+---
+
+## zh-CN
+
+可以通过 `placement` 手动指定弹出的位置。
+
+## en-US
+
+You can manually specify the position of the popup via `placement`.
+
+```jsx
+import { Select, Radio } from 'antd';
+
+const { Option } = Select;
+
+const SetPlacementDemo = () => {
+  const [placement, SetPlacement] = React.useState('topLeft');
+
+  const placementChange = e => {
+    SetPlacement(e.target.value);
+  };
+
+  return (
+    <>
+      <Radio.Group value={placement} onChange={placementChange}>
+        <Radio.Button value="topLeft">topLeft</Radio.Button>
+        <Radio.Button value="topRight">topRight</Radio.Button>
+        <Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
+        <Radio.Button value="bottomRight">bottomRight</Radio.Button>
+      </Radio.Group>
+      <br />
+      <br />
+      <Select
+        defaultValue="HangZhou"
+        style={{ width: 120 }}
+        dropdownMatchSelectWidth={false}
+        placement={placement}
+      >
+        <Option value="HangZhou">HangZhou #310000</Option>
+        <Option value="NingBo">NingBo #315000</Option>
+        <Option value="WenZhou">WenZhou #325000</Option>
+      </Select>
+    </>
+  );
+};
+
+ReactDOM.render(<SetPlacementDemo />, mountNode);
+```
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index fc96445800..b888959fc9 100644
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@@ -37,7 +37,7 @@ Select component to select value from options.
 | 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 | - |  |
-| fieldNames | Customize node label, value, options field name | object | { label: `label`, value: `value`, options: `options` } | 4.17.0 |
+| fieldNames | Customize node title, key, options field name | object | { label: `label`, key: `key`, options: `options` } | 4.17.0 |
 | 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 |  |
 | filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction | (optionA: Option, optionB: Option) => number | - | 4.9.0 |
 | getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [Example](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body |  |
@@ -55,6 +55,7 @@ Select component to select value from options.
 | optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` |  |
 | options | Select options. Will get better perf than jsx definition | { label, value }\[] | - |  |
 | placeholder | Placeholder of select | ReactNode | - |  |
+| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | removeIcon | The custom remove icon | ReactNode | - |  |
 | searchValue | The current input "search" text | string | - |  |
 | showArrow | Whether to show the drop-down arrow | boolean | true(for single select), false(for multiple select) |  |
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 0346795b1e..4d865c854b 100755
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -9,7 +9,7 @@ import { OptionProps } from 'rc-select/lib/Option';
 import { ConfigContext } from '../config-provider';
 import getIcons from './utils/iconUtil';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
-import { getTransitionName } from '../_util/motion';
+import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
 
 type RawValue = string | number;
 
@@ -38,8 +38,9 @@ export interface SelectProps<
   OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
 > extends Omit<
     InternalSelectProps<ValueType, OptionType>,
-    'inputIcon' | 'mode' | 'getInputElement' | 'getRawInputElement' | 'backfill'
+    'inputIcon' | 'mode' | 'getInputElement' | 'getRawInputElement' | 'backfill' | 'placement'
   > {
+  placement?: SelectCommonPlacement;
   mode?: 'multiple' | 'tags';
 }
 
@@ -53,6 +54,7 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
     getPopupContainer,
     dropdownClassName,
     listHeight = 256,
+    placement,
     listItemHeight = 24,
     size: customizeSize,
     notFoundContent,
@@ -123,17 +125,32 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
     className,
   );
 
+  // ===================== Placement =====================
+  const getPlacement = () => {
+    if (placement !== undefined) {
+      return placement;
+    }
+    return direction === 'rtl'
+      ? ('bottomRight' as SelectCommonPlacement)
+      : ('bottomLeft' as SelectCommonPlacement);
+  };
+
   return (
     <RcSelect<any, any>
       ref={ref as any}
       virtual={virtual}
       dropdownMatchSelectWidth={dropdownMatchSelectWidth}
       {...selectProps}
-      transitionName={getTransitionName(rootPrefixCls, 'slide-up', props.transitionName)}
+      transitionName={getTransitionName(
+        rootPrefixCls,
+        getTransitionDirection(placement),
+        props.transitionName,
+      )}
       listHeight={listHeight}
       listItemHeight={listItemHeight}
       mode={mode as any}
       prefixCls={prefixCls}
+      placement={getPlacement()}
       direction={direction}
       inputIcon={suffixIcon}
       menuItemSelectedIcon={itemIcon}
diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md
index 49f0b3f62b..f818782f3e 100644
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@@ -38,7 +38,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true |  |
 | dropdownRender | 自定义下拉框内容 | (originNode: ReactNode) => ReactNode | - |  |
 | dropdownStyle | 下拉菜单的 style 属性 | CSSProperties | - |  |
-| fieldNames | 自定义节点 label、value、options 的字段 | object | { label: `label`, value: `value`, options: `options` } | 4.17.0 |
+| fieldNames | 自定义节点 label、key、options 的字段 | object | { label: `label`, key: `key`, options: `options` } | 4.17.0 |
 | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true |  |
 | filterSort | 搜索时对筛选结果项的排序函数, 类似[Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)里的 compareFunction | (optionA: Option, optionB: Option) => number | - | 4.9.0 |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body |  |
@@ -56,6 +56,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
 | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` |  |
 | options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }\[] | - |  |
 | placeholder | 选择框默认文本 | string | - |  |
+| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | removeIcon | 自定义的多选框清除图标 | ReactNode | - |  |
 | searchValue | 控制搜索文本 | string | - |  |
 | showArrow | 是否显示下拉小箭头 | boolean | 单选为 true，多选为 false |  |
diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md
index 92f6923b72..ca3367f702 100644
--- a/components/time-picker/index.en-US.md
+++ b/components/time-picker/index.en-US.md
@@ -42,6 +42,7 @@ import moment from 'moment';
 | minuteStep | Interval between minutes in picker | number | 1 |  |
 | open | Whether to popup panel | boolean | false |  |
 | placeholder | Display when there's no value | string \| \[string, string] | `Select a time` |  |
+| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | popupClassName | The className of panel | string | - |  |
 | popupStyle | The style of panel | CSSProperties | - |  |
 | renderExtraFooter | Called from time picker panel to render some addon to its bottom | () => ReactNode | - |  |
diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md
index 784736a36e..1cf7df1d8a 100644
--- a/components/time-picker/index.zh-CN.md
+++ b/components/time-picker/index.zh-CN.md
@@ -42,6 +42,7 @@ import moment from 'moment';
 | minuteStep | 分钟选项间隔 | number | 1 |  |
 | open | 面板是否打开 | boolean | false |  |
 | placeholder | 没有值的时候显示的内容 | string \| \[string, string] | `请选择时间` |  |
+| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | popupClassName | 弹出层类名 | string | - |  |
 | popupStyle | 弹出层样式对象 | object | - |  |
 | renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - |  |
diff --git a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
index a6122ed8a5..3cc9b89f0f 100644
--- a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1144,6 +1144,433 @@ exports[`renders ./components/tree-select/demo/multiple.md extend context correc
 </div>
 `;
 
+exports[`renders ./components/tree-select/demo/placement.md extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-button-input"
+          type="radio"
+          value="topLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="topRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topRight
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomRight
+      </span>
+    </label>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-haspopup="listbox"
+          aria-owns="undefined_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          role="combobox"
+          type="search"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-placeholder"
+      >
+        Please select
+      </span>
+    </div>
+    <div>
+      <div
+        class="ant-select-dropdown ant-tree-select-dropdown"
+        style="opacity:0;pointer-events:none;min-width:300px;max-height:400px;overflow:auto"
+      >
+        <div>
+          <div>
+            <div
+              class="ant-select-tree"
+              role="tree"
+            >
+              <div>
+                <input
+                  aria-label="for screen reader"
+                  disabled=""
+                  style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
+                  value=""
+                />
+              </div>
+              <div
+                aria-hidden="true"
+                class="ant-select-tree-treenode"
+                style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
+              >
+                <div
+                  class="ant-select-tree-indent"
+                >
+                  <div
+                    class="ant-select-tree-indent-unit"
+                  />
+                </div>
+              </div>
+              <div
+                class="ant-select-tree-list"
+                style="position:relative"
+              >
+                <div
+                  class="ant-select-tree-list-holder"
+                  style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+                >
+                  <div>
+                    <div
+                      class="ant-select-tree-list-holder-inner"
+                      style="display:flex;flex-direction:column"
+                    >
+                      <div
+                        aria-grabbed="false"
+                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
+                        draggable="false"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-tree-indent"
+                        />
+                        <span
+                          class="ant-select-tree-switcher ant-select-tree-switcher_open"
+                        >
+                          <span
+                            aria-label="caret-down"
+                            class="anticon anticon-caret-down ant-select-tree-switcher-icon"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              data-icon="caret-down"
+                              fill="currentColor"
+                              focusable="false"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-open"
+                          title="parent 1"
+                        >
+                          <span
+                            class="ant-select-tree-title"
+                          >
+                            parent 1
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        aria-grabbed="false"
+                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
+                        draggable="false"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-tree-indent"
+                        >
+                          <span
+                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
+                          />
+                        </span>
+                        <span
+                          class="ant-select-tree-switcher ant-select-tree-switcher_open"
+                        >
+                          <span
+                            aria-label="caret-down"
+                            class="anticon anticon-caret-down ant-select-tree-switcher-icon"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              data-icon="caret-down"
+                              fill="currentColor"
+                              focusable="false"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-open"
+                          title="parent 1-0"
+                        >
+                          <span
+                            class="ant-select-tree-title"
+                          >
+                            parent 1-0
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        aria-grabbed="false"
+                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
+                        draggable="false"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-tree-indent"
+                        >
+                          <span
+                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
+                          />
+                          <span
+                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start"
+                          />
+                        </span>
+                        <span
+                          class="ant-select-tree-switcher ant-select-tree-switcher-noop"
+                        />
+                        <span
+                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
+                          title="leaf1"
+                        >
+                          <span
+                            class="ant-select-tree-title"
+                          >
+                            leaf1
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        aria-grabbed="false"
+                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
+                        draggable="false"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-tree-indent"
+                        >
+                          <span
+                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
+                          />
+                          <span
+                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start"
+                          />
+                        </span>
+                        <span
+                          class="ant-select-tree-switcher ant-select-tree-switcher-noop"
+                        />
+                        <span
+                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
+                          title="leaf2"
+                        >
+                          <span
+                            class="ant-select-tree-title"
+                          >
+                            leaf2
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        aria-grabbed="false"
+                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
+                        draggable="false"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-tree-indent"
+                        >
+                          <span
+                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
+                          />
+                        </span>
+                        <span
+                          class="ant-select-tree-switcher ant-select-tree-switcher_open"
+                        >
+                          <span
+                            aria-label="caret-down"
+                            class="anticon anticon-caret-down ant-select-tree-switcher-icon"
+                            role="img"
+                          >
+                            <svg
+                              aria-hidden="true"
+                              data-icon="caret-down"
+                              fill="currentColor"
+                              focusable="false"
+                              height="1em"
+                              viewBox="0 0 1024 1024"
+                              width="1em"
+                            >
+                              <path
+                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
+                              />
+                            </svg>
+                          </span>
+                        </span>
+                        <span
+                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-open"
+                          title="parent 1-1"
+                        >
+                          <span
+                            class="ant-select-tree-title"
+                          >
+                            parent 1-1
+                          </span>
+                        </span>
+                      </div>
+                      <div
+                        aria-grabbed="false"
+                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
+                        draggable="false"
+                      >
+                        <span
+                          aria-hidden="true"
+                          class="ant-select-tree-indent"
+                        >
+                          <span
+                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
+                          />
+                          <span
+                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-end"
+                          />
+                        </span>
+                        <span
+                          class="ant-select-tree-switcher ant-select-tree-switcher-noop"
+                        />
+                        <span
+                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
+                          title=""
+                        >
+                          <span
+                            class="ant-select-tree-title"
+                          >
+                            <b
+                              style="color:#08c"
+                            >
+                              leaf3
+                            </b>
+                          </span>
+                        </span>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down ant-select-suffix"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>,
+]
+`;
+
 exports[`renders ./components/tree-select/demo/suffix.md extend context correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
diff --git a/components/tree-select/__tests__/__snapshots__/demo.test.js.snap b/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
index 78a8345be4..bb96ae24e1 100644
--- a/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
@@ -257,6 +257,148 @@ exports[`renders ./components/tree-select/demo/multiple.md correctly 1`] = `
 </div>
 `;
 
+exports[`renders ./components/tree-select/demo/placement.md correctly 1`] = `
+Array [
+  <div
+    class="ant-radio-group ant-radio-group-outline"
+  >
+    <label
+      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
+    >
+      <span
+        class="ant-radio-button ant-radio-button-checked"
+      >
+        <input
+          checked=""
+          class="ant-radio-button-input"
+          type="radio"
+          value="topLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="topRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        topRight
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomLeft"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomLeft
+      </span>
+    </label>
+    <label
+      class="ant-radio-button-wrapper"
+    >
+      <span
+        class="ant-radio-button"
+      >
+        <input
+          class="ant-radio-button-input"
+          type="radio"
+          value="bottomRight"
+        />
+        <span
+          class="ant-radio-button-inner"
+        />
+      </span>
+      <span>
+        bottomRight
+      </span>
+    </label>
+  </div>,
+  <br />,
+  <br />,
+  <div
+    class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-search"
+      >
+        <input
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-haspopup="listbox"
+          aria-owns="undefined_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          role="combobox"
+          type="search"
+          value=""
+        />
+      </span>
+      <span
+        class="ant-select-selection-placeholder"
+      >
+        Please select
+      </span>
+    </div>
+    <span
+      aria-hidden="true"
+      class="ant-select-arrow"
+      style="user-select:none;-webkit-user-select:none"
+      unselectable="on"
+    >
+      <span
+        aria-label="down"
+        class="anticon anticon-down ant-select-suffix"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="down"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+          />
+        </svg>
+      </span>
+    </span>
+  </div>,
+]
+`;
+
 exports[`renders ./components/tree-select/demo/suffix.md correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
diff --git a/components/tree-select/demo/placement.md b/components/tree-select/demo/placement.md
new file mode 100644
index 0000000000..a4cc32249c
--- /dev/null
+++ b/components/tree-select/demo/placement.md
@@ -0,0 +1,64 @@
+---
+order: 8
+title:
+  zh-CN: 弹出位置
+  en-US: Placement
+---
+
+## zh-CN
+
+可以通过 `placement` 手动指定弹出的位置。
+
+## en-US
+
+You can manually specify the position of the popup via `placement`.
+
+```jsx
+import React, { useState } from 'react';
+import { TreeSelect, Radio } from 'antd';
+
+const { TreeNode } = TreeSelect;
+
+const Demo = () => {
+  const [placement, SetPlacement] = useState('topLeft');
+
+  const placementChange = e => {
+    SetPlacement(e.target.value);
+  };
+
+  return (
+    <>
+      <Radio.Group value={placement} onChange={placementChange}>
+        <Radio.Button value="topLeft">topLeft</Radio.Button>
+        <Radio.Button value="topRight">topRight</Radio.Button>
+        <Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
+        <Radio.Button value="bottomRight">bottomRight</Radio.Button>
+      </Radio.Group>
+      <br />
+      <br />
+
+      <TreeSelect
+        showSearch
+        dropdownStyle={{ maxHeight: 400, overflow: 'auto', minWidth: 300 }}
+        placeholder="Please select"
+        dropdownMatchSelectWidth={false}
+        placement={placement}
+        allowClear
+        treeDefaultExpandAll
+      >
+        <TreeNode value="parent 1" title="parent 1">
+          <TreeNode value="parent 1-0" title="parent 1-0">
+            <TreeNode value="leaf1" title="leaf1" />
+            <TreeNode value="leaf2" title="leaf2" />
+          </TreeNode>
+          <TreeNode value="parent 1-1" title="parent 1-1">
+            <TreeNode value="leaf3" title={<b style={{ color: '#08c' }}>leaf3</b>} />
+          </TreeNode>
+        </TreeNode>
+      </TreeSelect>
+    </>
+  );
+};
+
+ReactDOM.render(<Demo />, mountNode);
+```
diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md
index e6bb16b784..26b98c41ba 100644
--- a/components/tree-select/index.en-US.md
+++ b/components/tree-select/index.en-US.md
@@ -37,6 +37,7 @@ Tree selection control.
 | multiple | Support multiple or not, will be `true` when enable `treeCheckable` | boolean | false |  |
 | notFoundContent | Specify content to show when no result matches | ReactNode | `Not Found` |  |
 | placeholder | Placeholder of the select input | string | - |  |
+| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | searchValue | Work with `onSearch` to make search value controlled | string | - |  |
 | showArrow | Whether to show the `suffixIcon`，when single selection mode, default `true` | boolean | - |  |
 | showCheckedStrategy | The way show selected item in box when `treeCheckable` set. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode) | `TreeSelect.SHOW_ALL` \| `TreeSelect.SHOW_PARENT` \| `TreeSelect.SHOW_CHILD` | `TreeSelect.SHOW_CHILD` |  |
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index 3a592217b5..16f3f95a4a 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -16,7 +16,7 @@ import { AntTreeNodeProps, TreeProps } from '../tree';
 import getIcons from '../select/utils/iconUtil';
 import renderSwitcherIcon from '../tree/utils/iconUtil';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
-import { getTransitionName } from '../_util/motion';
+import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
 
 type RawValue = string | number;
 
@@ -43,6 +43,7 @@ export interface TreeSelectProps<
   > {
   suffixIcon?: React.ReactNode;
   size?: SizeType;
+  placement?: SelectCommonPlacement;
   bordered?: boolean;
   treeLine?: TreeProps['showLine'];
 }
@@ -57,6 +58,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
     multiple,
     listHeight = 256,
     listItemHeight = 26,
+    placement,
     notFoundContent,
     switcherIcon,
     treeLine,
@@ -119,6 +121,16 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
     'switcherIcon',
   ]);
 
+  // ===================== Placement =====================
+  const getPlacement = () => {
+    if (placement !== undefined) {
+      return placement;
+    }
+    return direction === 'rtl'
+      ? ('bottomRight' as SelectCommonPlacement)
+      : ('bottomLeft' as SelectCommonPlacement);
+  };
+
   const mergedSize = customizeSize || size;
   const mergedClassName = classNames(
     !customizePrefixCls && treeSelectPrefixCls,
@@ -148,6 +160,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
       treeLine={!!treeLine}
       inputIcon={suffixIcon}
       multiple={multiple}
+      placement={getPlacement()}
       removeIcon={removeIcon}
       clearIcon={clearIcon}
       switcherIcon={(nodeProps: AntTreeNodeProps) =>
@@ -159,7 +172,11 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
       treeMotion={null}
       dropdownClassName={mergedDropdownClassName}
       choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)}
-      transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
+      transitionName={getTransitionName(
+        rootPrefixCls,
+        getTransitionDirection(placement),
+        transitionName,
+      )}
     />
   );
 };
diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md
index 43f0c08499..70c63e0b49 100644
--- a/components/tree-select/index.zh-CN.md
+++ b/components/tree-select/index.zh-CN.md
@@ -38,6 +38,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 | multiple | 支持多选（当设置 treeCheckable 时自动变为 true） | boolean | false |  |
 | notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | `Not Found` |  |
 | placeholder | 选择框默认文字 | string | - |  |
+| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | searchValue | 搜索框的值，可以通过 `onSearch` 获取用户输入 | string | - |  |
 | showArrow | 是否显示 `suffixIcon`，单选模式下默认 `true` | boolean | - |  |
 | showCheckedStrategy | 配置 `treeCheckable` 时，定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点)。`TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时)。 默认只显示子节点 | `TreeSelect.SHOW_ALL` \| `TreeSelect.SHOW_PARENT` \| `TreeSelect.SHOW_CHILD` | `TreeSelect.SHOW_CHILD` |  |

From 9fe57c654a7e1cddfd707e7f967df1bbf3b841aa Mon Sep 17 00:00:00 2001
From: Di Wu <di@gridx.cn>
Date: Thu, 27 Jan 2022 14:06:37 +0800
Subject: [PATCH 08/33] fix: Clear timer of delayed loading after Button is
 unmounted (#33858)

* fix: Clear delay loading timer after Button is unmounted

* [CodeFactor] Apply fixes to commit 16cfb89

[ci skip] [skip ci]

* Change arrow function style in test case

Co-authored-by: codefactor-io <support@codefactor.io>
---
 .../button/__tests__/delay-timer.test.tsx     | 89 +++++++++++++++++++
 components/button/button.tsx                  | 16 +++-
 2 files changed, 102 insertions(+), 3 deletions(-)
 create mode 100644 components/button/__tests__/delay-timer.test.tsx

diff --git a/components/button/__tests__/delay-timer.test.tsx b/components/button/__tests__/delay-timer.test.tsx
new file mode 100644
index 0000000000..c0fb924051
--- /dev/null
+++ b/components/button/__tests__/delay-timer.test.tsx
@@ -0,0 +1,89 @@
+import React, { useState } from 'react';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
+import Button from '../button';
+
+const specialDelay = 9529;
+const Content = () => {
+  const [loading, setLoading] = useState(false);
+  const toggleLoading = () => {
+    setLoading(!loading);
+  };
+
+  const [visible, setVisible] = useState(true);
+  const toggleVisible = () => {
+    setVisible(!visible);
+  };
+
+  return (
+    <div>
+      <button type="button" id="toggle_loading" onClick={toggleLoading}>
+        Toggle Loading
+      </button>
+      <button type="button" id="toggle_visible" onClick={toggleVisible}>
+        Toggle Visible
+      </button>
+      {visible && <Button type="text" loading={loading ? { delay: specialDelay } : false} />}
+    </div>
+  );
+};
+
+it('Delay loading timer in Button component', () => {
+  const otherTimer: any = 9528;
+  jest.spyOn(window, 'setTimeout').mockReturnValue(otherTimer);
+  jest.restoreAllMocks();
+
+  const wrapper = mount(<Content />);
+
+  const btnTimer: any = 9527;
+  jest.spyOn(window, 'setTimeout').mockReturnValue(btnTimer);
+  jest.spyOn(window, 'clearTimeout');
+  const setTimeoutMock = window.setTimeout as any as jest.Mock;
+  const clearTimeoutMock = window.clearTimeout as any as jest.Mock;
+
+  // other component may call setTimeout or clearTimeout
+  const setTimeoutCount = () => {
+    const items = setTimeoutMock.mock.calls.filter(item => item[1] === specialDelay);
+    return items.length;
+  };
+  const clearTimeoutCount = () => {
+    const items = clearTimeoutMock.mock.calls.filter(item => item[0] === btnTimer);
+    return items.length;
+  };
+
+  // switch loading state to true
+  wrapper.find('#toggle_loading').at(0).simulate('click');
+  expect(setTimeoutCount()).toBe(1);
+  expect(clearTimeoutCount()).toBe(0);
+
+  // trigger timer handler
+  act(() => {
+    setTimeoutMock.mock.calls[0][0]();
+  });
+  expect(setTimeoutCount()).toBe(1);
+  expect(clearTimeoutCount()).toBe(0);
+
+  // switch loading state to false
+  wrapper.find('#toggle_loading').at(0).simulate('click');
+  expect(setTimeoutCount()).toBe(1);
+  expect(clearTimeoutCount()).toBe(0);
+
+  // switch loading state to true
+  wrapper.find('#toggle_loading').at(0).simulate('click');
+  expect(setTimeoutCount()).toBe(2);
+  expect(clearTimeoutCount()).toBe(0);
+
+  // switch loading state to false
+  wrapper.find('#toggle_loading').at(0).simulate('click');
+  expect(setTimeoutCount()).toBe(2);
+  expect(clearTimeoutCount()).toBe(1);
+
+  // switch loading state to true
+  wrapper.find('#toggle_loading').at(0).simulate('click');
+  // remove Button component
+  wrapper.find('#toggle_visible').at(0).simulate('click');
+  expect(setTimeoutCount()).toBe(3);
+  expect(clearTimeoutCount()).toBe(2);
+
+  jest.restoreAllMocks();
+});
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 9bc2b2423f..215025ba7b 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -156,7 +156,6 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
   const { getPrefixCls, autoInsertSpaceInButton, direction } = React.useContext(ConfigContext);
   const buttonRef = (ref as any) || React.createRef<HTMLElement>();
-  const delayTimeoutRef = React.useRef<number>();
 
   const isNeedInserted = () =>
     React.Children.count(children) === 1 && !icon && !isUnborderedButtonType(type);
@@ -181,14 +180,25 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
     typeof loading === 'object' && loading.delay ? loading.delay || true : !!loading;
 
   React.useEffect(() => {
-    clearTimeout(delayTimeoutRef.current);
+    let delayTimer: number | null = null;
+
     if (typeof loadingOrDelay === 'number') {
-      delayTimeoutRef.current = window.setTimeout(() => {
+      delayTimer = window.setTimeout(() => {
+        delayTimer = null;
         setLoading(loadingOrDelay);
       }, loadingOrDelay);
     } else {
       setLoading(loadingOrDelay);
     }
+
+    return () => {
+      if (delayTimer) {
+        // in order to not perform a React state update on an unmounted component
+        // and clear timer after 'loadingOrDelay' updated.
+        window.clearTimeout(delayTimer);
+        delayTimer = null;
+      }
+    };
   }, [loadingOrDelay]);
 
   React.useEffect(fixTwoCNChar, [buttonRef]);

From 5a28417c5816c103f05d99966762fad7eff391cb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=BB=91=E9=9B=A8?= <wangning4567@163.com>
Date: Thu, 27 Jan 2022 17:26:19 +0800
Subject: [PATCH 09/33] feat: notification placement support 'top'/'bottom'
 (#33871)

---
 .../__snapshots__/demo-extend.test.ts.snap    | 71 +++++++++++++++++++
 .../__tests__/__snapshots__/demo.test.js.snap | 71 +++++++++++++++++++
 .../notification/__tests__/placement.test.js  | 32 +++++++++
 components/notification/demo/placement.md     | 13 ++++
 components/notification/index.tsx             | 24 ++++++-
 components/notification/index.zh-CN.md        |  2 +-
 components/notification/style/index.less      | 14 ++++
 7 files changed, 225 insertions(+), 2 deletions(-)

diff --git a/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
index 00ddf7235f..6c0c1914b4 100644
--- a/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -189,6 +189,77 @@ Array [
 
 exports[`renders ./components/notification/demo/placement.md extend context correctly 1`] = `
 <div>
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span
+          aria-label="border-top"
+          class="anticon anticon-border-top"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="border-top"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M872 144H152c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM208 310h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 498h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 166h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm166-166h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm166 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332 332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332-498h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332 332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
+        <span>
+          top
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span
+          aria-label="border-bottom"
+          class="anticon anticon-border-bottom"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="border-bottom"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M872 808H152c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-720-94h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0-498h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0 332h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0-166h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm166 166h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0-332h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm332 0h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0 332h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm222-72h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm388-404h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm388 426h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm388-404h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8z"
+            />
+          </svg>
+        </span>
+        <span>
+          bottom
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
diff --git a/components/notification/__tests__/__snapshots__/demo.test.js.snap b/components/notification/__tests__/__snapshots__/demo.test.js.snap
index 5659351ece..2fcbe2e7a5 100644
--- a/components/notification/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/notification/__tests__/__snapshots__/demo.test.js.snap
@@ -189,6 +189,77 @@ Array [
 
 exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
 <div>
+  <div
+    class="ant-space ant-space-horizontal ant-space-align-center"
+  >
+    <div
+      class="ant-space-item"
+      style="margin-right:8px"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span
+          aria-label="border-top"
+          class="anticon anticon-border-top"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="border-top"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M872 144H152c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM208 310h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 498h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 166h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm166-166h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm166 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332 332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332-498h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332 332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
+            />
+          </svg>
+        </span>
+        <span>
+          top
+        </span>
+      </button>
+    </div>
+    <div
+      class="ant-space-item"
+    >
+      <button
+        class="ant-btn ant-btn-primary"
+        type="button"
+      >
+        <span
+          aria-label="border-bottom"
+          class="anticon anticon-border-bottom"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="border-bottom"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M872 808H152c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-720-94h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0-498h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0 332h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0-166h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm166 166h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0-332h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm332 0h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0 332h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm222-72h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm388-404h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm388 426h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm388-404h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8z"
+            />
+          </svg>
+        </span>
+        <span>
+          bottom
+        </span>
+      </button>
+    </div>
+  </div>
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
diff --git a/components/notification/__tests__/placement.test.js b/components/notification/__tests__/placement.test.js
index 8d59eddb49..e7fed3a720 100644
--- a/components/notification/__tests__/placement.test.js
+++ b/components/notification/__tests__/placement.test.js
@@ -34,6 +34,22 @@ describe('Notification.placement', () => {
       const defaultBottom = '24px';
       let style;
 
+      // top
+      open({
+        placement: 'top',
+        top: 50,
+      });
+      style = getStyle($$('.ant-notification-top')[0]);
+      expect(style.top).toBe('50px');
+      expect(style.left).toBe('0px');
+      expect(style.right).toBe('0px');
+      expect(style.bottom).toBe('');
+
+      open({
+        placement: 'top',
+      });
+      expect($$('.ant-notification-top').length).toBe(1);
+
       // topLeft
       open({
         placement: 'topLeft',
@@ -63,6 +79,22 @@ describe('Notification.placement', () => {
       });
       expect($$('.ant-notification-topRight').length).toBe(1);
 
+      // bottom
+      open({
+        placement: 'bottom',
+        bottom: 100,
+      });
+      style = getStyle($$('.ant-notification-bottom')[0]);
+      expect(style.top).toBe('');
+      expect(style.left).toBe('0px');
+      expect(style.right).toBe('0px');
+      expect(style.bottom).toBe('100px');
+
+      open({
+        placement: 'bottom',
+      });
+      expect($$('.ant-notification-bottom').length).toBe(1);
+
       // bottomRight
       open({
         placement: 'bottomRight',
diff --git a/components/notification/demo/placement.md b/components/notification/demo/placement.md
index 7a6b385c8c..73531c20ab 100755
--- a/components/notification/demo/placement.md
+++ b/components/notification/demo/placement.md
@@ -20,6 +20,8 @@ import {
   RadiusUprightOutlined,
   RadiusBottomleftOutlined,
   RadiusBottomrightOutlined,
+  BorderTopOutlined,
+  BorderBottomOutlined,
 } from '@ant-design/icons';
 
 const openNotification = placement => {
@@ -33,6 +35,17 @@ const openNotification = placement => {
 
 ReactDOM.render(
   <div>
+    <Space>
+      <Button type="primary" onClick={() => openNotification('top')}>
+        <BorderTopOutlined />
+        top
+      </Button>
+      <Button type="primary" onClick={() => openNotification('bottom')}>
+        <BorderBottomOutlined />
+        bottom
+      </Button>
+    </Space>
+    <Divider />
     <Space>
       <Button type="primary" onClick={() => openNotification('topLeft')}>
         <RadiusUpleftOutlined />
diff --git a/components/notification/index.tsx b/components/notification/index.tsx
index 0749758d4f..620a192405 100755
--- a/components/notification/index.tsx
+++ b/components/notification/index.tsx
@@ -10,7 +10,13 @@ import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
 import createUseNotification from './hooks/useNotification';
 import ConfigProvider, { globalConfig } from '../config-provider';
 
-export type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
+export type NotificationPlacement =
+  | 'top'
+  | 'topLeft'
+  | 'topRight'
+  | 'bottom'
+  | 'bottomLeft'
+  | 'bottomRight';
 
 export type IconType = 'success' | 'info' | 'error' | 'warning';
 
@@ -79,6 +85,14 @@ function getPlacementStyle(
 ) {
   let style;
   switch (placement) {
+    case 'top':
+      style = {
+        left: 0,
+        right: 0,
+        top,
+        bottom: 'auto',
+      };
+      break;
     case 'topLeft':
       style = {
         left: 0,
@@ -93,6 +107,14 @@ function getPlacementStyle(
         bottom: 'auto',
       };
       break;
+    case 'bottom':
+      style = {
+        left: 0,
+        right: 0,
+        top: 'auto',
+        bottom,
+      };
+      break;
     case 'bottomLeft':
       style = {
         left: 0,
diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md
index f69e48bf7f..e387d8b2b4 100644
--- a/components/notification/index.zh-CN.md
+++ b/components/notification/index.zh-CN.md
@@ -71,7 +71,7 @@ notification.config({
 | closeIcon | 自定义关闭图标 | ReactNode | - |  |
 | duration | 默认自动关闭延时，单位秒 | number | 4.5 |  |
 | getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |  |
-| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |  |
+| placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |
 | rtl | 是否开启 RTL 模式 | boolean | false |  |
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |  |
 | maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
diff --git a/components/notification/style/index.less b/components/notification/style/index.less
index b85b73f55f..fd457e392a 100644
--- a/components/notification/style/index.less
+++ b/components/notification/style/index.less
@@ -16,6 +16,8 @@
   z-index: @zindex-notification;
   margin-right: @notification-margin-edge;
 
+  &-top,
+  &-bottom,
   &-topLeft,
   &-bottomLeft {
     margin-right: 0;
@@ -27,6 +29,12 @@
     }
   }
 
+  &-top,
+  &-bottom {
+    margin-right: auto;
+    margin-left: auto;
+  }
+
   &-close-icon {
     font-size: @font-size-base;
     cursor: pointer;
@@ -50,6 +58,12 @@
     border-radius: @border-radius-base;
     box-shadow: @shadow-2;
 
+    .@{notification-prefix-cls}-top &,
+    .@{notification-prefix-cls}-bottom & {
+      margin-right: auto;
+      margin-left: auto;
+    }
+
     .@{notification-prefix-cls}-topLeft &,
     .@{notification-prefix-cls}-bottomLeft & {
       margin-right: auto;

From 2d66c7ecc6abd6018c1ae6d45c262b643987faa2 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 27 Jan 2022 17:51:00 +0800
Subject: [PATCH 10/33] fix: tooltip should work with loading switch (#33860)

* fix: tooltip should work with loading switch

* fix: only works for switch

* chore: code clean
---
 components/tooltip/__tests__/tooltip.test.js | 18 ++++++++++++++++++
 components/tooltip/index.tsx                 |  6 ++----
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/components/tooltip/__tests__/tooltip.test.js b/components/tooltip/__tests__/tooltip.test.js
index ad26de36b0..2eb67f1356 100644
--- a/components/tooltip/__tests__/tooltip.test.js
+++ b/components/tooltip/__tests__/tooltip.test.js
@@ -346,4 +346,22 @@ describe('Tooltip', () => {
     );
     expect(wrapper.find('.ant-tooltip-inner').getDOMNode().style.color).toBe('red');
   });
+
+  it('should work with loading switch', () => {
+    const onVisibleChange = jest.fn();
+    const wrapper = mount(
+      <Tooltip
+        title="loading tips"
+        mouseEnterDelay={0}
+        mouseLeaveDelay={0}
+        onVisibleChange={onVisibleChange}
+      >
+        <Switch loading defaultChecked />
+      </Tooltip>,
+    );
+    const wrapperEl = wrapper.find('.ant-tooltip-disabled-compatible-wrapper');
+    expect(wrapperEl).toHaveLength(1);
+    wrapper.find('span').first().simulate('mouseenter');
+    expect(onVisibleChange).toHaveBeenLastCalledWith(true);
+  });
 });
diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx
index ee5beaf753..77f6908b9c 100644
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@@ -85,10 +85,8 @@ const PresetColorRegex = new RegExp(`^(${PresetColorTypes.join('|')})(-inverse)?
 function getDisabledCompatibleChildren(element: React.ReactElement<any>, prefixCls: string) {
   const elementType = element.type as any;
   if (
-    (elementType.__ANT_BUTTON === true ||
-      elementType.__ANT_SWITCH === true ||
-      element.type === 'button') &&
-    element.props.disabled
+    ((elementType.__ANT_BUTTON === true || element.type === 'button') && element.props.disabled) ||
+    (elementType.__ANT_SWITCH === true && (element.props.disabled || element.props.loading))
   ) {
     // Pick some layout related style properties up to span
     // Prevent layout bugs like https://github.com/ant-design/ant-design/issues/5254

From eb45dbb4db4d1b876696d83ef34de20482f1a7db Mon Sep 17 00:00:00 2001
From: tangjinzhou <415800467@qq.com>
Date: Thu, 27 Jan 2022 21:33:45 +0800
Subject: [PATCH 11/33] fix: block not work when small size (#33878)

https://github.com/vueComponent/ant-design-vue/issues/5219
---
 components/button/style/index.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/button/style/index.less b/components/button/style/index.less
index 357ca5ba87..cdb67c8d0e 100644
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@@ -256,7 +256,7 @@
     letter-spacing: 0.34em;
   }
 
-  &-block {
+  &&-block {
     width: 100%;
   }
 

From a9bc316b80d1977104fa6474cc7737d85de13756 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Fri, 28 Jan 2022 14:54:03 +0800
Subject: [PATCH 12/33] fix: ellipsis should display tooltip if rows larger
 than 1 (#33875)

* fix: ellipsis should display tooltip if rows larger than 1

* test: add test case
---
 components/typography/Base/index.tsx          |  6 ++--
 .../typography/__tests__/ellipsis.test.js     | 30 +++++++++++++++++++
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx
index c3838330ba..c6eea42bf8 100644
--- a/components/typography/Base/index.tsx
+++ b/components/typography/Base/index.tsx
@@ -293,12 +293,14 @@ const Base = React.forwardRef((props: InternalBlockProps, ref: any) => {
     const textEle = typographyRef.current;
 
     if (enableEllipsis && cssEllipsis && textEle) {
-      const currentEllipsis = textEle.offsetWidth < textEle.scrollWidth;
+      const currentEllipsis = cssLineClamp
+        ? textEle.offsetHeight < textEle.scrollHeight
+        : textEle.offsetWidth < textEle.scrollWidth;
       if (isNativeEllipsis !== currentEllipsis) {
         setIsNativeEllipsis(currentEllipsis);
       }
     }
-  }, [enableEllipsis, cssEllipsis, children]);
+  }, [enableEllipsis, cssEllipsis, children, cssLineClamp]);
 
   // ========================== Tooltip ===========================
   const tooltipTitle = ellipsisConfig.tooltip === true ? children : ellipsisConfig.tooltip;
diff --git a/components/typography/__tests__/ellipsis.test.js b/components/typography/__tests__/ellipsis.test.js
index 372c206039..34173480db 100644
--- a/components/typography/__tests__/ellipsis.test.js
+++ b/components/typography/__tests__/ellipsis.test.js
@@ -277,4 +277,34 @@ describe('Typography.Ellipsis', () => {
     const tooltipWrapper = mount(<Base ellipsis={{ expandable: true, tooltip: 'little' }} />);
     expect(tooltipWrapper.find('.ant-typography').prop('aria-label')).toEqual('little');
   });
+
+  it('should display tooltip if line clamp', () => {
+    mockRectSpy = spyElementPrototypes(HTMLElement, {
+      scrollHeight: {
+        get() {
+          let html = this.innerHTML;
+          html = html.replace(/<[^>]*>/g, '');
+          const lines = Math.ceil(html.length / LINE_STR_COUNT);
+          return lines * 16;
+        },
+      },
+      offsetHeight: {
+        get: () => 32,
+      },
+      offsetWidth: {
+        get: () => 100,
+      },
+      scrollWidth: {
+        get: () => 100,
+      },
+    });
+
+    const wrapper = mount(
+      <Base ellipsis={{ tooltip: 'This is tooltip', rows: 2 }}>
+        Ant Design, a design language for background applications, is refined by Ant UED Team.
+      </Base>,
+    );
+    expect(wrapper.find('EllipsisTooltip').prop('isEllipsis')).toBeTruthy();
+    mockRectSpy.mockRestore();
+  });
 });

From 27a498e021891b44730303939d13d3cc401e24ed Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Sun, 30 Jan 2022 12:31:35 +0800
Subject: [PATCH 13/33] fix: update dropdown version to 3.2.5 (#33895)

* fix: update dropdown version to 3.2.5

* test: update snapshot
---
 .../__tests__/__snapshots__/components.test.js.snap  | 12 ++++++------
 .../__tests__/__snapshots__/index.test.js.snap       |  4 ++--
 .../__snapshots__/Table.filter.test.js.snap          |  4 ++--
 package.json                                         |  2 +-
 4 files changed, 11 insertions(+), 11 deletions(-)

diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index b9768adb55..ac029d1d9b 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -22943,7 +22943,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
                         </div>
                       </span>
                       <span
-                        class="config-dropdown-trigger config-table-filter-trigger"
+                        class="config-dropdown-trigger config-table-filter-trigger config-dropdown-open"
                         role="button"
                         tabindex="-1"
                       >
@@ -23223,7 +23223,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
                         </div>
                       </span>
                       <span
-                        class="config-dropdown-trigger config-table-filter-trigger"
+                        class="config-dropdown-trigger config-table-filter-trigger config-dropdown-open"
                         role="button"
                         tabindex="-1"
                       >
@@ -23503,7 +23503,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
                         </div>
                       </span>
                       <span
-                        class="config-dropdown-trigger config-table-filter-trigger"
+                        class="config-dropdown-trigger config-table-filter-trigger config-dropdown-open"
                         role="button"
                         tabindex="-1"
                       >
@@ -23783,7 +23783,7 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
                         </div>
                       </span>
                       <span
-                        class="ant-dropdown-trigger ant-table-filter-trigger"
+                        class="ant-dropdown-trigger ant-table-filter-trigger ant-dropdown-open"
                         role="button"
                         tabindex="-1"
                       >
@@ -24063,7 +24063,7 @@ exports[`ConfigProvider components Table normal 1`] = `
                         </div>
                       </span>
                       <span
-                        class="ant-dropdown-trigger ant-table-filter-trigger"
+                        class="ant-dropdown-trigger ant-table-filter-trigger ant-dropdown-open"
                         role="button"
                         tabindex="-1"
                       >
@@ -24343,7 +24343,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
                         </div>
                       </span>
                       <span
-                        class="ant-dropdown-trigger prefix-Table-filter-trigger"
+                        class="ant-dropdown-trigger prefix-Table-filter-trigger ant-dropdown-open"
                         role="button"
                         tabindex="-1"
                       >
diff --git a/components/dropdown/__tests__/__snapshots__/index.test.js.snap b/components/dropdown/__tests__/__snapshots__/index.test.js.snap
index 5eafdf0780..f81b76414f 100644
--- a/components/dropdown/__tests__/__snapshots__/index.test.js.snap
+++ b/components/dropdown/__tests__/__snapshots__/index.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Dropdown overlay is function and has custom transitionName 1`] = `
 Array [
   <button
-    class="ant-dropdown-trigger"
+    class="ant-dropdown-trigger ant-dropdown-open"
     type="button"
   >
     button
@@ -24,7 +24,7 @@ Array [
 exports[`Dropdown overlay is string 1`] = `
 Array [
   <button
-    class="ant-dropdown-trigger"
+    class="ant-dropdown-trigger ant-dropdown-open"
     type="button"
   >
     button
diff --git a/components/table/__tests__/__snapshots__/Table.filter.test.js.snap b/components/table/__tests__/__snapshots__/Table.filter.test.js.snap
index 45b0a8c31c..be83e86870 100644
--- a/components/table/__tests__/__snapshots__/Table.filter.test.js.snap
+++ b/components/table/__tests__/__snapshots__/Table.filter.test.js.snap
@@ -549,7 +549,7 @@ exports[`Table.filter should support getPopupContainer 1`] = `
                         Name
                       </span>
                       <span
-                        class="ant-dropdown-trigger ant-table-filter-trigger"
+                        class="ant-dropdown-trigger ant-table-filter-trigger ant-dropdown-open"
                         role="button"
                         tabindex="-1"
                       >
@@ -801,7 +801,7 @@ exports[`Table.filter should support getPopupContainer from ConfigProvider 1`] =
                         Name
                       </span>
                       <span
-                        class="ant-dropdown-trigger ant-table-filter-trigger"
+                        class="ant-dropdown-trigger ant-table-filter-trigger ant-dropdown-open"
                         role="button"
                         tabindex="-1"
                       >
diff --git a/package.json b/package.json
index 290f07c55c..10fae782eb 100644
--- a/package.json
+++ b/package.json
@@ -126,7 +126,7 @@
     "rc-collapse": "~3.1.0",
     "rc-dialog": "~8.6.0",
     "rc-drawer": "~4.4.2",
-    "rc-dropdown": "~3.2.0",
+    "rc-dropdown": "~3.2.5",
     "rc-field-form": "~1.22.0-2",
     "rc-image": "~5.2.5",
     "rc-input-number": "~7.3.0",

From 6b1a48d5edaca3d10380568f8ca1a6a867cb599e Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Sun, 30 Jan 2022 15:21:41 +0800
Subject: [PATCH 14/33] revert: Revert "Merge branch 'feature' into master"
 (#33903)

This reverts commit 40433f357da9129f4434f6846195abb517a2db7e, reversing
changes made to 27a498e021891b44730303939d13d3cc401e24ed.
---
 components/_util/motion.tsx                   |   13 +-
 components/breadcrumb/BreadcrumbItem.tsx      |    6 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  235 ---
 .../__tests__/__snapshots__/demo.test.js.snap |  145 --
 components/cascader/__tests__/index.test.js   |   23 +-
 components/cascader/demo/placement.md         |   77 -
 components/cascader/index.en-US.md            |    2 +-
 components/cascader/index.tsx                 |   22 +-
 components/cascader/index.zh-CN.md            |    2 +-
 .../date-picker/__tests__/DatePicker.test.js  |   32 -
 .../__snapshots__/demo-extend.test.ts.snap    | 1861 -----------------
 .../__tests__/__snapshots__/demo.test.js.snap |  210 --
 components/date-picker/demo/placement.md      |   47 -
 .../generatePicker/generateRangePicker.tsx    |    4 +-
 .../generatePicker/generateSinglePicker.tsx   |    4 +-
 .../date-picker/generatePicker/index.tsx      |   20 +-
 components/date-picker/index.en-US.md         |    1 -
 components/date-picker/index.zh-CN.md         |    1 -
 components/date-picker/util.ts                |   55 -
 .../__snapshots__/demo-extend.test.ts.snap    | 1292 +-----------
 .../__tests__/__snapshots__/demo.test.js.snap |   62 +-
 components/dropdown/__tests__/index.test.js   |   20 -
 components/dropdown/demo/arrow-center.md      |   75 -
 components/dropdown/demo/arrow.md             |    8 +-
 components/dropdown/demo/dropdown-button.md   |    2 +-
 components/dropdown/demo/placement.md         |    8 +-
 components/dropdown/dropdown.tsx              |   33 +-
 components/dropdown/index.en-US.md            |    6 +-
 components/dropdown/index.zh-CN.md            |    6 +-
 components/dropdown/style/index.less          |   24 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   71 -
 .../__tests__/__snapshots__/demo.test.js.snap |   71 -
 .../notification/__tests__/placement.test.js  |   32 -
 components/notification/demo/placement.md     |   13 -
 components/notification/index.tsx             |   24 +-
 components/notification/index.zh-CN.md        |    2 +-
 components/notification/style/index.less      |   14 -
 .../__snapshots__/demo-extend.test.ts.snap    |  247 ---
 .../__tests__/__snapshots__/demo.test.js.snap |  148 --
 components/select/demo/placement.md           |   53 -
 components/select/index.en-US.md              |    3 +-
 components/select/index.tsx                   |   23 +-
 components/select/index.zh-CN.md              |    3 +-
 components/skeleton/Input.tsx                 |    4 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   14 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   14 +-
 components/skeleton/demo/element.md           |    9 +-
 components/skeleton/style/index.less          |    9 +-
 components/space/index.tsx                    |    6 +-
 components/style/themes/variable.less         |    4 +-
 .../table/__tests__/Table.sorter.test.js      |   95 +-
 .../__snapshots__/Table.sorter.test.js.snap   |    1 -
 .../__snapshots__/demo-extend.test.ts.snap    |    1 -
 .../__tests__/__snapshots__/demo.test.js.snap |    1 -
 components/table/hooks/useSorter.tsx          |    9 -
 components/time-picker/index.en-US.md         |   37 +-
 components/time-picker/index.zh-CN.md         |   45 +-
 components/tooltip/index.tsx                  |    6 +-
 components/{_util => tooltip}/placements.tsx  |    3 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  427 ----
 .../__tests__/__snapshots__/demo.test.js.snap |  142 --
 components/tree-select/demo/placement.md      |   64 -
 components/tree-select/index.en-US.md         |    1 -
 components/tree-select/index.tsx              |   21 +-
 components/tree-select/index.zh-CN.md         |    1 -
 package.json                                  |    2 +-
 site/theme/template/Content/MainContent.jsx   |    2 +-
 67 files changed, 122 insertions(+), 5796 deletions(-)
 delete mode 100644 components/cascader/demo/placement.md
 delete mode 100644 components/date-picker/demo/placement.md
 delete mode 100644 components/dropdown/demo/arrow-center.md
 delete mode 100644 components/select/demo/placement.md
 rename components/{_util => tooltip}/placements.tsx (97%)
 delete mode 100644 components/tree-select/demo/placement.md

diff --git a/components/_util/motion.tsx b/components/_util/motion.tsx
index edac9ccda1..1c69a9f05a 100644
--- a/components/_util/motion.tsx
+++ b/components/_util/motion.tsx
@@ -1,6 +1,5 @@
 import { CSSMotionProps, MotionEventHandler, MotionEndEventHandler } from 'rc-motion';
 import { MotionEvent } from 'rc-motion/lib/interface';
-import { tuple } from './type';
 
 // ================== Collapse Motion ==================
 const getCollapsedHeight: MotionEventHandler = () => ({ height: 0, opacity: 0 });
@@ -26,21 +25,11 @@ const collapseMotion: CSSMotionProps = {
   motionDeadline: 500,
 };
 
-const SelectPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight');
-export type SelectCommonPlacement = typeof SelectPlacements[number];
-
-const getTransitionDirection = (placement: SelectCommonPlacement | undefined) => {
-  if (placement !== undefined && (placement === 'topLeft' || placement === 'topRight')) {
-    return `slide-down`;
-  }
-  return `slide-up`;
-};
-
 const getTransitionName = (rootPrefixCls: string, motion: string, transitionName?: string) => {
   if (transitionName !== undefined) {
     return transitionName;
   }
   return `${rootPrefixCls}-${motion}`;
 };
-export { getTransitionName, getTransitionDirection };
+export { getTransitionName };
 export default collapseMotion;
diff --git a/components/breadcrumb/BreadcrumbItem.tsx b/components/breadcrumb/BreadcrumbItem.tsx
index 860971e847..fd29f24a85 100644
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@@ -30,7 +30,7 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
   const renderBreadcrumbNode = (breadcrumbItem: React.ReactNode) => {
     if (overlay) {
       return (
-        <DropDown overlay={overlay} placement="bottom" {...dropdownProps}>
+        <DropDown overlay={overlay} placement="bottomCenter" {...dropdownProps}>
           <span className={`${prefixCls}-overlay-link`}>
             {breadcrumbItem}
             <DownOutlined />
@@ -62,7 +62,9 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
     return (
       <span>
         {link}
-        {separator && <span className={`${prefixCls}-separator`}>{separator}</span>}
+        {separator && (
+          <span className={`${prefixCls}-separator`}>{separator}</span>
+        )}
       </span>
     );
   }
diff --git a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7a472fce2b..cec599fae5 100644
--- a/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/cascader/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1674,241 +1674,6 @@ exports[`renders ./components/cascader/demo/multiple.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/placement.md extend context correctly 1`] = `
-Array [
-  <div
-    class="ant-radio-group ant-radio-group-outline"
-  >
-    <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
-    >
-      <span
-        class="ant-radio-button ant-radio-button-checked"
-      >
-        <input
-          checked=""
-          class="ant-radio-button-input"
-          type="radio"
-          value="topLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="topRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topRight
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomRight
-      </span>
-    </label>
-  </div>,
-  <br />,
-  <br />,
-  <div
-    class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
-  >
-    <div
-      class="ant-select-selector"
-    >
-      <span
-        class="ant-select-selection-search"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="undefined_list"
-          aria-haspopup="listbox"
-          aria-owns="undefined_list"
-          autocomplete="off"
-          class="ant-select-selection-search-input"
-          readonly=""
-          role="combobox"
-          style="opacity:0"
-          type="search"
-          unselectable="on"
-          value=""
-        />
-      </span>
-      <span
-        class="ant-select-selection-placeholder"
-      >
-        Please select
-      </span>
-    </div>
-    <div>
-      <div
-        class="ant-select-dropdown ant-cascader-dropdown"
-        style="opacity:0;pointer-events:none;min-width:auto"
-      >
-        <div>
-          <div
-            class="ant-cascader-menus"
-          >
-            <ul
-              class="ant-cascader-menu"
-              role="menu"
-            >
-              <li
-                aria-checked="false"
-                class="ant-cascader-menu-item ant-cascader-menu-item-expand"
-                data-path-key="zhejiang"
-                role="menuitemcheckbox"
-                title="Zhejiang"
-              >
-                <div
-                  class="ant-cascader-menu-item-content"
-                >
-                  Zhejiang
-                </div>
-                <div
-                  class="ant-cascader-menu-item-expand-icon"
-                >
-                  <span
-                    aria-label="right"
-                    class="anticon anticon-right"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="right"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </li>
-              <li
-                aria-checked="false"
-                class="ant-cascader-menu-item ant-cascader-menu-item-expand"
-                data-path-key="jiangsu"
-                role="menuitemcheckbox"
-                title="Jiangsu"
-              >
-                <div
-                  class="ant-cascader-menu-item-content"
-                >
-                  Jiangsu
-                </div>
-                <div
-                  class="ant-cascader-menu-item-expand-icon"
-                >
-                  <span
-                    aria-label="right"
-                    class="anticon anticon-right"
-                    role="img"
-                  >
-                    <svg
-                      aria-hidden="true"
-                      data-icon="right"
-                      fill="currentColor"
-                      focusable="false"
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-                      />
-                    </svg>
-                  </span>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
-      </div>
-    </div>
-    <span
-      aria-hidden="true"
-      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
-      unselectable="on"
-    >
-      <span
-        aria-label="down"
-        class="anticon anticon-down ant-select-suffix"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="down"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-          />
-        </svg>
-      </span>
-    </span>
-  </div>,
-]
-`;
-
 exports[`renders ./components/cascader/demo/search.md extend context correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
diff --git a/components/cascader/__tests__/__snapshots__/demo.test.js.snap b/components/cascader/__tests__/__snapshots__/demo.test.js.snap
index a0cdea788e..abb0d17bee 100644
--- a/components/cascader/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/cascader/__tests__/__snapshots__/demo.test.js.snap
@@ -658,151 +658,6 @@ exports[`renders ./components/cascader/demo/multiple.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/cascader/demo/placement.md correctly 1`] = `
-Array [
-  <div
-    class="ant-radio-group ant-radio-group-outline"
-  >
-    <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
-    >
-      <span
-        class="ant-radio-button ant-radio-button-checked"
-      >
-        <input
-          checked=""
-          class="ant-radio-button-input"
-          type="radio"
-          value="topLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="topRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topRight
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomRight
-      </span>
-    </label>
-  </div>,
-  <br />,
-  <br />,
-  <div
-    class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow"
-  >
-    <div
-      class="ant-select-selector"
-    >
-      <span
-        class="ant-select-selection-search"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="undefined_list"
-          aria-haspopup="listbox"
-          aria-owns="undefined_list"
-          autocomplete="off"
-          class="ant-select-selection-search-input"
-          readonly=""
-          role="combobox"
-          style="opacity:0"
-          type="search"
-          unselectable="on"
-          value=""
-        />
-      </span>
-      <span
-        class="ant-select-selection-placeholder"
-      >
-        Please select
-      </span>
-    </div>
-    <span
-      aria-hidden="true"
-      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
-      unselectable="on"
-    >
-      <span
-        aria-label="down"
-        class="anticon anticon-down ant-select-suffix"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="down"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-          />
-        </svg>
-      </span>
-    </span>
-  </div>,
-]
-`;
-
 exports[`renders ./components/cascader/demo/search.md correctly 1`] = `
 <div
   class="ant-select ant-cascader ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
diff --git a/components/cascader/__tests__/index.test.js b/components/cascader/__tests__/index.test.js
index 310b6b76ee..91013cd1e3 100644
--- a/components/cascader/__tests__/index.test.js
+++ b/components/cascader/__tests__/index.test.js
@@ -368,23 +368,6 @@ describe('Cascader', () => {
     expect(wrapper.find('.ant-select-selection-placeholder').text()).toEqual(customPlaceholder);
   });
 
-  it('placement work correctly', () => {
-    const customerOptions = [
-      {
-        value: 'zhejiang',
-        label: 'Zhejiang',
-        children: [
-          {
-            value: 'hangzhou',
-            label: 'Hangzhou',
-          },
-        ],
-      },
-    ];
-    const wrapper = mount(<Cascader options={customerOptions} placement="topRight" />);
-    expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('topRight');
-  });
-
   it('popup correctly with defaultValue RTL', () => {
     const wrapper = mount(
       <ConfigProvider direction="rtl">
@@ -501,12 +484,10 @@ describe('Cascader', () => {
   describe('legacy props', () => {
     it('popupClassName', () => {
       const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-      const wrapper = mount(
-        <Cascader open popupPlacement="bottomLeft" popupClassName="mock-cls" />,
-      );
+      const wrapper = mount(<Cascader open popupPlacement="topRight" popupClassName="mock-cls" />);
 
       expect(wrapper.exists('.mock-cls')).toBeTruthy();
-      expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('bottomLeft');
+      expect(wrapper.find('Trigger').prop('popupPlacement')).toEqual('topRight');
 
       expect(errorSpy).toHaveBeenCalledWith(
         'Warning: [antd: Cascader] `popupClassName` is deprecated. Please use `dropdownClassName` instead.',
diff --git a/components/cascader/demo/placement.md b/components/cascader/demo/placement.md
deleted file mode 100644
index 21a7a19caf..0000000000
--- a/components/cascader/demo/placement.md
+++ /dev/null
@@ -1,77 +0,0 @@
----
-order: 13
-title:
-  zh-CN: 弹出位置
-  en-US: Placement
----
-
-## zh-CN
-
-可以通过 `placement` 手动指定弹出的位置。
-
-## en-US
-
-You can manually specify the position of the popup via `placement`.
-
-```jsx
-import { Cascader, Radio } from 'antd';
-
-const options = [
-  {
-    value: 'zhejiang',
-    label: 'Zhejiang',
-    children: [
-      {
-        value: 'hangzhou',
-        label: 'Hangzhou',
-        children: [
-          {
-            value: 'xihu',
-            label: 'West Lake',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    value: 'jiangsu',
-    label: 'Jiangsu',
-    children: [
-      {
-        value: 'nanjing',
-        label: 'Nanjing',
-        children: [
-          {
-            value: 'zhonghuamen',
-            label: 'Zhong Hua Men',
-          },
-        ],
-      },
-    ],
-  },
-];
-
-const SetPlacementDemo = () => {
-  const [placement, SetPlacement] = React.useState('topLeft');
-
-  const placementChange = e => {
-    SetPlacement(e.target.value);
-  };
-
-  return (
-    <>
-      <Radio.Group value={placement} onChange={placementChange}>
-        <Radio.Button value="topLeft">topLeft</Radio.Button>
-        <Radio.Button value="topRight">topRight</Radio.Button>
-        <Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
-        <Radio.Button value="bottomRight">bottomRight</Radio.Button>
-      </Radio.Group>
-      <br />
-      <br />
-      <Cascader options={options} placeholder="Please select" placement={placement} />
-    </>
-  );
-};
-
-ReactDOM.render(<SetPlacementDemo />, mountNode);
-```
diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md
index ab236c8dad..d0d9a698a4 100644
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@@ -42,7 +42,7 @@ Cascade selection box.
 | open | Set visible of cascader popup | boolean | - | 4.17.0 |
 | options | The data options of cascade | [Option](#Option)\[] | - |  |
 | placeholder | The input placeholder | string | `Please select` |  |
-| placement | Use preset popup align config from builtinPlacements | `bottomLeft` `bottomRight` `topLeft` `topRight` | `bottomLeft` | 4.17.0 |
+| placement | Use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | 4.17.0 |
 | showSearch | Whether show search input in single mode | boolean \| [Object](#showSearch) | false |  |
 | size | The input size | `large` \| `middle` \| `small` | - |  |
 | style | The additional style | CSSProperties | - |  |
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 718619deee..f38029f626 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -17,7 +17,7 @@ import { ConfigContext } from '../config-provider';
 import type { SizeType } from '../config-provider/SizeContext';
 import SizeContext from '../config-provider/SizeContext';
 import getIcons from '../select/utils/iconUtil';
-import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
+import { getTransitionName } from '../_util/motion';
 
 // Align the design since we use `rc-select` in root. This help:
 // - List search content will show all content
@@ -85,7 +85,7 @@ export interface CascaderProps<DataNodeType>
   multiple?: boolean;
   size?: SizeType;
   bordered?: boolean;
-  placement?: SelectCommonPlacement;
+
   suffixIcon?: React.ReactNode;
   options?: DataNodeType[];
 }
@@ -107,7 +107,6 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
     popupClassName,
     dropdownClassName,
     expandIcon,
-    placement,
     showSearch,
     allowClear = true,
     notFoundContent,
@@ -211,16 +210,6 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
     prefixCls,
   });
 
-  // ===================== Placement =====================
-  const getPlacement = () => {
-    if (placement !== undefined) {
-      return placement;
-    }
-    return direction === 'rtl'
-      ? ('bottomRight' as SelectCommonPlacement)
-      : ('bottomLeft' as SelectCommonPlacement);
-  };
-
   // ==================== Render =====================
   return (
     <RcCascader
@@ -237,7 +226,6 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
       )}
       {...(restProps as any)}
       direction={mergedDirection}
-      placement={getPlacement()}
       notFoundContent={mergedNotFoundContent}
       allowClear={allowClear}
       showSearch={mergedShowSearch}
@@ -250,11 +238,7 @@ const Cascader = React.forwardRef((props: CascaderProps<any>, ref: React.Ref<Cas
       dropdownClassName={mergedDropdownClassName}
       dropdownPrefixCls={customizePrefixCls || cascaderPrefixCls}
       choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)}
-      transitionName={getTransitionName(
-        rootPrefixCls,
-        getTransitionDirection(placement),
-        transitionName,
-      )}
+      transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
       getPopupContainer={getPopupContainer || getContextPopupContainer}
       ref={ref}
     />
diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md
index 6f437bc181..8fc6a4efda 100644
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@@ -43,7 +43,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
 | open | 控制浮层显隐 | boolean | - | 4.17.0 |
 | options | 可选项数据源 | [Option](#Option)\[] | - |  |
 | placeholder | 输入框占位文本 | string | `请选择` |  |
-| placement | 浮层预设位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | `bottomLeft` | 4.17.0 |
+| placement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` | 4.17.0 |
 | showSearch | 在选择框中显示搜索框 | boolean \| [Object](#showSearch) | false |  |
 | size | 输入框大小 | `large` \| `middle` \| `small` | - |  |
 | style | 自定义样式 | CSSProperties | - |  |
diff --git a/components/date-picker/__tests__/DatePicker.test.js b/components/date-picker/__tests__/DatePicker.test.js
index 7da679cdf7..51cc73d956 100644
--- a/components/date-picker/__tests__/DatePicker.test.js
+++ b/components/date-picker/__tests__/DatePicker.test.js
@@ -199,36 +199,4 @@ describe('DatePicker', () => {
     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__/__snapshots__/demo-extend.test.ts.snap b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
index f0456a20b3..47a53a4e9f 100644
--- a/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/date-picker/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -28598,1867 +28598,6 @@ exports[`renders ./components/date-picker/demo/mode.md extend context correctly
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/placement.md extend context correctly 1`] = `
-Array [
-  <div
-    class="ant-radio-group ant-radio-group-outline"
-  >
-    <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
-    >
-      <span
-        class="ant-radio-button ant-radio-button-checked"
-      >
-        <input
-          checked=""
-          class="ant-radio-button-input"
-          type="radio"
-          value="topLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="topRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topRight
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomRight
-      </span>
-    </label>
-  </div>,
-  <br />,
-  <br />,
-  <div
-    class="ant-picker"
-  >
-    <div
-      class="ant-picker-input"
-    >
-      <input
-        autocomplete="off"
-        placeholder="Select date"
-        readonly=""
-        size="12"
-        title=""
-        value=""
-      />
-      <span
-        class="ant-picker-suffix"
-      >
-        <span
-          aria-label="calendar"
-          class="anticon anticon-calendar"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="calendar"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
-            />
-          </svg>
-        </span>
-      </span>
-    </div>
-  </div>,
-  <div>
-    <div
-      class="ant-picker-dropdown"
-      style="opacity:0;pointer-events:none"
-    >
-      <div
-        class="ant-picker-panel-container"
-      >
-        <div
-          class="ant-picker-panel ant-picker-panel-focused"
-          tabindex="-1"
-        >
-          <div
-            class="ant-picker-date-panel"
-          >
-            <div
-              class="ant-picker-header"
-            >
-              <button
-                class="ant-picker-header-super-prev-btn"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="ant-picker-super-prev-icon"
-                />
-              </button>
-              <button
-                class="ant-picker-header-prev-btn"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="ant-picker-prev-icon"
-                />
-              </button>
-              <div
-                class="ant-picker-header-view"
-              >
-                <button
-                  class="ant-picker-month-btn"
-                  tabindex="-1"
-                  type="button"
-                >
-                  Nov
-                </button>
-                <button
-                  class="ant-picker-year-btn"
-                  tabindex="-1"
-                  type="button"
-                >
-                  2016
-                </button>
-              </div>
-              <button
-                class="ant-picker-header-next-btn"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="ant-picker-next-icon"
-                />
-              </button>
-              <button
-                class="ant-picker-header-super-next-btn"
-                tabindex="-1"
-                type="button"
-              >
-                <span
-                  class="ant-picker-super-next-icon"
-                />
-              </button>
-            </div>
-            <div
-              class="ant-picker-body"
-            >
-              <table
-                class="ant-picker-content"
-              >
-                <thead>
-                  <tr>
-                    <th>
-                      Su
-                    </th>
-                    <th>
-                      Mo
-                    </th>
-                    <th>
-                      Tu
-                    </th>
-                    <th>
-                      We
-                    </th>
-                    <th>
-                      Th
-                    </th>
-                    <th>
-                      Fr
-                    </th>
-                    <th>
-                      Sa
-                    </th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr>
-                    <td
-                      class="ant-picker-cell"
-                      title="2016-10-30"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        30
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-end"
-                      title="2016-10-31"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        31
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
-                      title="2016-11-01"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        1
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-02"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        2
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-03"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        3
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-04"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        4
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-05"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        5
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-06"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        6
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-07"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        7
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-08"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        8
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-09"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        9
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-10"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        10
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-11"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        11
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-12"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        12
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-13"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        13
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-14"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        14
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-15"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        15
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-16"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        16
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-17"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        17
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-18"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        18
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-19"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        19
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-20"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        20
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-21"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        21
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
-                      title="2016-11-22"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        22
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-23"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        23
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-24"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        24
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-25"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        25
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-26"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        26
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-27"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        27
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-28"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        28
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-in-view"
-                      title="2016-11-29"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        29
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
-                      title="2016-11-30"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        30
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell ant-picker-cell-start"
-                      title="2016-12-01"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        1
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell"
-                      title="2016-12-02"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        2
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell"
-                      title="2016-12-03"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        3
-                      </div>
-                    </td>
-                  </tr>
-                  <tr>
-                    <td
-                      class="ant-picker-cell"
-                      title="2016-12-04"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        4
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell"
-                      title="2016-12-05"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        5
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell"
-                      title="2016-12-06"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        6
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell"
-                      title="2016-12-07"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        7
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell"
-                      title="2016-12-08"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        8
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell"
-                      title="2016-12-09"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        9
-                      </div>
-                    </td>
-                    <td
-                      class="ant-picker-cell"
-                      title="2016-12-10"
-                    >
-                      <div
-                        class="ant-picker-cell-inner"
-                      >
-                        10
-                      </div>
-                    </td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
-          <div
-            class="ant-picker-footer"
-          >
-            <a
-              class="ant-picker-today-btn"
-            >
-              Today
-            </a>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-  <br />,
-  <br />,
-  <div
-    class="ant-picker ant-picker-range"
-  >
-    <div
-      class="ant-picker-input ant-picker-input-active"
-    >
-      <input
-        autocomplete="off"
-        placeholder="Start date"
-        readonly=""
-        size="12"
-        value=""
-      />
-    </div>
-    <div
-      class="ant-picker-range-separator"
-    >
-      <span
-        aria-label="to"
-        class="ant-picker-separator"
-      >
-        <span
-          aria-label="swap-right"
-          class="anticon anticon-swap-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="swap-right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="0 0 1024 1024"
-            width="1em"
-          >
-            <path
-              d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
-            />
-          </svg>
-        </span>
-      </span>
-    </div>
-    <div
-      class="ant-picker-input"
-    >
-      <input
-        autocomplete="off"
-        placeholder="End date"
-        readonly=""
-        size="12"
-        value=""
-      />
-    </div>
-    <div
-      class="ant-picker-active-bar"
-      style="left:0;width:0;position:absolute"
-    />
-    <span
-      class="ant-picker-suffix"
-    >
-      <span
-        aria-label="calendar"
-        class="anticon anticon-calendar"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="calendar"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
-          />
-        </svg>
-      </span>
-    </span>
-  </div>,
-  <div>
-    <div
-      class="ant-picker-dropdown ant-picker-dropdown-range"
-      style="opacity:0;pointer-events:none"
-    >
-      <div
-        class="ant-picker-range-wrapper ant-picker-date-range-wrapper"
-        style="min-width:0"
-      >
-        <div
-          class="ant-picker-range-arrow"
-          style="left:0"
-        />
-        <div
-          class="ant-picker-panel-container"
-          style="margin-left:0"
-        >
-          <div
-            class="ant-picker-panels"
-          >
-            <div
-              class="ant-picker-panel ant-picker-panel-focused"
-              tabindex="-1"
-            >
-              <div
-                class="ant-picker-date-panel"
-              >
-                <div
-                  class="ant-picker-header"
-                >
-                  <button
-                    class="ant-picker-header-super-prev-btn"
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="ant-picker-super-prev-icon"
-                    />
-                  </button>
-                  <button
-                    class="ant-picker-header-prev-btn"
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="ant-picker-prev-icon"
-                    />
-                  </button>
-                  <div
-                    class="ant-picker-header-view"
-                  >
-                    <button
-                      class="ant-picker-month-btn"
-                      tabindex="-1"
-                      type="button"
-                    >
-                      Nov
-                    </button>
-                    <button
-                      class="ant-picker-year-btn"
-                      tabindex="-1"
-                      type="button"
-                    >
-                      2016
-                    </button>
-                  </div>
-                  <button
-                    class="ant-picker-header-next-btn"
-                    style="visibility:hidden"
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="ant-picker-next-icon"
-                    />
-                  </button>
-                  <button
-                    class="ant-picker-header-super-next-btn"
-                    style="visibility:hidden"
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="ant-picker-super-next-icon"
-                    />
-                  </button>
-                </div>
-                <div
-                  class="ant-picker-body"
-                >
-                  <table
-                    class="ant-picker-content"
-                  >
-                    <thead>
-                      <tr>
-                        <th>
-                          Su
-                        </th>
-                        <th>
-                          Mo
-                        </th>
-                        <th>
-                          Tu
-                        </th>
-                        <th>
-                          We
-                        </th>
-                        <th>
-                          Th
-                        </th>
-                        <th>
-                          Fr
-                        </th>
-                        <th>
-                          Sa
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td
-                          class="ant-picker-cell"
-                          title="2016-10-30"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            30
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-end"
-                          title="2016-10-31"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            31
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
-                          title="2016-11-01"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            1
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-02"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            2
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-03"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            3
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-04"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            4
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-05"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            5
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-06"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            6
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-07"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            7
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-08"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            8
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-09"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            9
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-10"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            10
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-11"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            11
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-12"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            12
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-13"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            13
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-14"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            14
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-15"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            15
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-16"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            16
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-17"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            17
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-18"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            18
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-19"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            19
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-20"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            20
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-21"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            21
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view ant-picker-cell-today"
-                          title="2016-11-22"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            22
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-23"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            23
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-24"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            24
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-25"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            25
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-26"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            26
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-27"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            27
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-28"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            28
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-11-29"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            29
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
-                          title="2016-11-30"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            30
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-start"
-                          title="2016-12-01"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            1
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2016-12-02"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            2
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2016-12-03"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            3
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td
-                          class="ant-picker-cell"
-                          title="2016-12-04"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            4
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2016-12-05"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            5
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2016-12-06"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            6
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2016-12-07"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            7
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2016-12-08"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            8
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2016-12-09"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            9
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2016-12-10"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            10
-                          </div>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-            <div
-              class="ant-picker-panel ant-picker-panel-focused"
-              tabindex="-1"
-            >
-              <div
-                class="ant-picker-date-panel"
-              >
-                <div
-                  class="ant-picker-header"
-                >
-                  <button
-                    class="ant-picker-header-super-prev-btn"
-                    style="visibility:hidden"
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="ant-picker-super-prev-icon"
-                    />
-                  </button>
-                  <button
-                    class="ant-picker-header-prev-btn"
-                    style="visibility:hidden"
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="ant-picker-prev-icon"
-                    />
-                  </button>
-                  <div
-                    class="ant-picker-header-view"
-                  >
-                    <button
-                      class="ant-picker-month-btn"
-                      tabindex="-1"
-                      type="button"
-                    >
-                      Dec
-                    </button>
-                    <button
-                      class="ant-picker-year-btn"
-                      tabindex="-1"
-                      type="button"
-                    >
-                      2016
-                    </button>
-                  </div>
-                  <button
-                    class="ant-picker-header-next-btn"
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="ant-picker-next-icon"
-                    />
-                  </button>
-                  <button
-                    class="ant-picker-header-super-next-btn"
-                    tabindex="-1"
-                    type="button"
-                  >
-                    <span
-                      class="ant-picker-super-next-icon"
-                    />
-                  </button>
-                </div>
-                <div
-                  class="ant-picker-body"
-                >
-                  <table
-                    class="ant-picker-content"
-                  >
-                    <thead>
-                      <tr>
-                        <th>
-                          Su
-                        </th>
-                        <th>
-                          Mo
-                        </th>
-                        <th>
-                          Tu
-                        </th>
-                        <th>
-                          We
-                        </th>
-                        <th>
-                          Th
-                        </th>
-                        <th>
-                          Fr
-                        </th>
-                        <th>
-                          Sa
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody>
-                      <tr>
-                        <td
-                          class="ant-picker-cell"
-                          title="2016-11-27"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            27
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2016-11-28"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            28
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2016-11-29"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            29
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-end"
-                          title="2016-11-30"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            30
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-start ant-picker-cell-in-view"
-                          title="2016-12-01"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            1
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-02"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            2
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-03"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            3
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-04"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            4
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-05"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            5
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-06"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            6
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-07"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            7
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-08"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            8
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-09"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            9
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-10"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            10
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-11"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            11
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-12"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            12
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-13"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            13
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-14"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            14
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-15"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            15
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-16"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            16
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-17"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            17
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-18"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            18
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-19"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            19
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-20"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            20
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-21"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            21
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-22"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            22
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-23"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            23
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-24"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            24
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-25"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            25
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-26"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            26
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-27"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            27
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-28"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            28
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-29"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            29
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-in-view"
-                          title="2016-12-30"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            30
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-end ant-picker-cell-in-view"
-                          title="2016-12-31"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            31
-                          </div>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td
-                          class="ant-picker-cell ant-picker-cell-start"
-                          title="2017-01-01"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            1
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2017-01-02"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            2
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2017-01-03"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            3
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2017-01-04"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            4
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2017-01-05"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            5
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2017-01-06"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            6
-                          </div>
-                        </td>
-                        <td
-                          class="ant-picker-cell"
-                          title="2017-01-07"
-                        >
-                          <div
-                            class="ant-picker-cell-inner"
-                          >
-                            7
-                          </div>
-                        </td>
-                      </tr>
-                    </tbody>
-                  </table>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-]
-`;
-
 exports[`renders ./components/date-picker/demo/presetted-ranges.md extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
diff --git a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
index bb6af24fd5..f76787eeb2 100644
--- a/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/date-picker/__tests__/__snapshots__/demo.test.js.snap
@@ -2349,216 +2349,6 @@ exports[`renders ./components/date-picker/demo/mode.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/date-picker/demo/placement.md correctly 1`] = `
-Array [
-  <div
-    class="ant-radio-group ant-radio-group-outline"
-  >
-    <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
-    >
-      <span
-        class="ant-radio-button ant-radio-button-checked"
-      >
-        <input
-          checked=""
-          class="ant-radio-button-input"
-          type="radio"
-          value="topLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="topRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topRight
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomRight
-      </span>
-    </label>
-  </div>,
-  <br />,
-  <br />,
-  <div
-    class="ant-picker"
-  >
-    <div
-      class="ant-picker-input"
-    >
-      <input
-        autocomplete="off"
-        placeholder="Select date"
-        readonly=""
-        size="12"
-        title=""
-        value=""
-      />
-      <span
-        class="ant-picker-suffix"
-      >
-        <span
-          aria-label="calendar"
-          class="anticon anticon-calendar"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="calendar"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
-            />
-          </svg>
-        </span>
-      </span>
-    </div>
-  </div>,
-  <br />,
-  <br />,
-  <div
-    class="ant-picker ant-picker-range"
-  >
-    <div
-      class="ant-picker-input ant-picker-input-active"
-    >
-      <input
-        autocomplete="off"
-        placeholder="Start date"
-        readonly=""
-        size="12"
-        value=""
-      />
-    </div>
-    <div
-      class="ant-picker-range-separator"
-    >
-      <span
-        aria-label="to"
-        class="ant-picker-separator"
-      >
-        <span
-          aria-label="swap-right"
-          class="anticon anticon-swap-right"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="swap-right"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="0 0 1024 1024"
-            width="1em"
-          >
-            <path
-              d="M873.1 596.2l-164-208A32 32 0 00684 376h-64.8c-6.7 0-10.4 7.7-6.3 13l144.3 183H152c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h695.9c26.8 0 41.7-30.8 25.2-51.8z"
-            />
-          </svg>
-        </span>
-      </span>
-    </div>
-    <div
-      class="ant-picker-input"
-    >
-      <input
-        autocomplete="off"
-        placeholder="End date"
-        readonly=""
-        size="12"
-        value=""
-      />
-    </div>
-    <div
-      class="ant-picker-active-bar"
-      style="left:0;width:0;position:absolute"
-    />
-    <span
-      class="ant-picker-suffix"
-    >
-      <span
-        aria-label="calendar"
-        class="anticon anticon-calendar"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="calendar"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M880 184H712v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H384v-64c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v64H144c-17.7 0-32 14.3-32 32v664c0 17.7 14.3 32 32 32h736c17.7 0 32-14.3 32-32V216c0-17.7-14.3-32-32-32zm-40 656H184V460h656v380zM184 392V256h128v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h256v48c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-48h128v136H184z"
-          />
-        </svg>
-      </span>
-    </span>
-  </div>,
-]
-`;
-
 exports[`renders ./components/date-picker/demo/presetted-ranges.md correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
diff --git a/components/date-picker/demo/placement.md b/components/date-picker/demo/placement.md
deleted file mode 100644
index a736924cc9..0000000000
--- a/components/date-picker/demo/placement.md
+++ /dev/null
@@ -1,47 +0,0 @@
----
-order: 28
-title:
-  zh-CN: 基本
-  en-US: Basic
----
-
-## zh-CN
-
-可以通过 `placement` 手动指定弹出的位置。
-
-## en-US
-
-You can manually specify the position of the popup via `placement`.
-
-```jsx
-import { DatePicker, Space, Radio } from 'antd';
-
-const { RangePicker } = DatePicker;
-
-const SetPlacementDemo = () => {
-  const [placement, SetPlacement] = React.useState('topLeft');
-
-  const placementChange = e => {
-    SetPlacement(e.target.value);
-  };
-
-  return (
-    <>
-      <Radio.Group value={placement} onChange={placementChange}>
-        <Radio.Button value="topLeft">topLeft</Radio.Button>
-        <Radio.Button value="topRight">topRight</Radio.Button>
-        <Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
-        <Radio.Button value="bottomRight">bottomRight</Radio.Button>
-      </Radio.Group>
-      <br />
-      <br />
-      <DatePicker placement={placement} />
-      <br />
-      <br />
-      <RangePicker placement={placement} />
-    </>
-  );
-};
-
-ReactDOM.render(<SetPlacementDemo />, mountNode);
-```
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
index 12d9154006..6444353153 100644
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -10,7 +10,7 @@ import enUS from '../locale/en_US';
 import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
 import SizeContext from '../../config-provider/SizeContext';
 import LocaleReceiver from '../../locale-provider/LocaleReceiver';
-import { getRangePlaceholder, transPlacement2DropdownAlign } from '../util';
+import { getRangePlaceholder } from '../util';
 import { RangePickerProps, PickerLocale, getTimeProps, Components } from '.';
 import { PickerComponentClass } from './interface';
 
@@ -43,7 +43,6 @@ export default function generateRangePicker<DateType>(
         prefixCls: customizePrefixCls,
         getPopupContainer: customGetPopupContainer,
         className,
-        placement,
         size: customizeSize,
         bordered = true,
         placeholder,
@@ -74,7 +73,6 @@ export default function generateRangePicker<DateType>(
                   </span>
                 }
                 ref={this.pickerRef}
-                dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
                 placeholder={getRangePlaceholder(picker, locale, placeholder)}
                 suffixIcon={picker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />}
                 clearIcon={<CloseCircleFilled />}
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
index af208611ab..d061682316 100644
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -7,7 +7,7 @@ import RCPicker from 'rc-picker';
 import { PickerMode } from 'rc-picker/lib/interface';
 import { GenerateConfig } from 'rc-picker/lib/generate/index';
 import enUS from '../locale/en_US';
-import { getPlaceholder, transPlacement2DropdownAlign } from '../util';
+import { getPlaceholder } from '../util';
 import devWarning from '../../_util/devWarning';
 import { ConfigContext, ConfigConsumerProps } from '../../config-provider';
 import LocaleReceiver from '../../locale-provider/LocaleReceiver';
@@ -68,7 +68,6 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
           className,
           size: customizeSize,
           bordered = true,
-          placement,
           placeholder,
           ...restProps
         } = this.props;
@@ -106,7 +105,6 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
                   suffixIcon={
                     mergedPicker === 'time' ? <ClockCircleOutlined /> : <CalendarOutlined />
                   }
-                  dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
                   clearIcon={<CloseCircleFilled />}
                   prevIcon={<span className={`${prefixCls}-prev-icon`} />}
                   nextIcon={<span className={`${prefixCls}-next-icon`} />}
diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx
index ed7d4b509b..26e14c4bc8 100644
--- a/components/date-picker/generatePicker/index.tsx
+++ b/components/date-picker/generatePicker/index.tsx
@@ -17,7 +17,6 @@ import PickerTag from '../PickerTag';
 import { TimePickerLocale } from '../../time-picker';
 import generateSinglePicker from './generateSinglePicker';
 import generateRangePicker from './generateRangePicker';
-import { tuple } from '../../_util/type';
 
 export const Components = { button: PickerButton, rangeItem: PickerTag };
 
@@ -28,18 +27,13 @@ function toArray<T>(list: T | T[]): T[] {
   return Array.isArray(list) ? list : [list];
 }
 
-export function getTimeProps<DateType, DisabledTime>(
-  props: { format?: string; picker?: PickerMode } & Omit<
-    SharedTimeProps<DateType>,
-    'disabledTime'
-  > & {
-      disabledTime?: DisabledTime;
-    },
+export function getTimeProps<DateType>(
+  props: { format?: string; picker?: PickerMode } & SharedTimeProps<DateType>,
 ) {
   const { format, picker, showHour, showMinute, showSecond, use12Hours } = props;
 
   const firstFormat = toArray(format)[0];
-  const showTimeObj = { ...props };
+  const showTimeObj: SharedTimeProps<DateType> = { ...props };
 
   if (firstFormat && typeof firstFormat === 'string') {
     if (!firstFormat.includes('s') && showSecond === undefined) {
@@ -70,16 +64,16 @@ export function getTimeProps<DateType, DisabledTime>(
     showTime: showTimeObj,
   };
 }
-const DataPickerPlacements = tuple('bottomLeft', 'bottomRight', 'topLeft', 'topRight');
-type DataPickerPlacement = typeof DataPickerPlacements[number];
 
 type InjectDefaultProps<Props> = Omit<
   Props,
-  'locale' | 'generateConfig' | 'hideHeader' | 'components'
+  | 'locale'
+  | 'generateConfig'
+  | 'hideHeader'
+  | 'components'
 > & {
   locale?: PickerLocale;
   size?: SizeType;
-  placement?: DataPickerPlacement;
   bordered?: boolean;
 };
 
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index b20a3333fc..aaaac1ea19 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -69,7 +69,6 @@ The following APIs are shared by DatePicker, RangePicker.
 | panelRender | Customize panel render | (panelNode) => ReactNode | - | 4.5.0 |
 | picker | Set picker type | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 |
 | placeholder | The placeholder of date input | string \| \[string,string] | - |  |
-| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | popupStyle | To customize the style of the popup calendar | CSSProperties | {} |  |
 | prevIcon | The custom prev icon | ReactNode | - | 4.17.0 |
 | size | To determine the size of the input box, the height of `large` and `small`, are 40px and 24px respectively, while default size is 32px | `large` \| `middle` \| `small` | - |  |
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index fd7294a8d3..43c9f44432 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -70,7 +70,6 @@ import locale from 'antd/lib/locale/zh_CN';
 | panelRender | 自定义渲染面板 | (panelNode) => ReactNode | - | 4.5.0 |
 | picker | 设置选择器类型 | `date` \| `week` \| `month` \| `quarter` \| `year` | `date` | `quarter`: 4.1.0 |
 | placeholder | 输入框提示文字 | string \| \[string, string] | - |  |
-| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | popupStyle | 额外的弹出日历样式 | CSSProperties | {} |  |
 | prevIcon | 自定义上一个图标 | ReactNode | - | 4.17.0 |
 | size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - |  |
diff --git a/components/date-picker/util.ts b/components/date-picker/util.ts
index 2f54342943..0643a0842a 100644
--- a/components/date-picker/util.ts
+++ b/components/date-picker/util.ts
@@ -1,6 +1,4 @@
 import { PickerMode } from 'rc-picker/lib/interface';
-import { DirectionType } from '../config-provider';
-import { SelectCommonPlacement } from '../_util/motion';
 import { PickerLocale } from './generatePicker';
 
 export function getPlaceholder(
@@ -53,56 +51,3 @@ export function getRangePlaceholder(
   }
   return locale.lang.rangePlaceholder;
 }
-
-export function transPlacement2DropdownAlign(
-  direction: DirectionType,
-  placement?: SelectCommonPlacement,
-) {
-  const overflow = {
-    adjustX: 1,
-    adjustY: 1,
-  };
-  switch (placement) {
-    case 'bottomLeft': {
-      return {
-        points: ['tl', 'bl'],
-        offset: [0, 4],
-        overflow,
-      };
-    }
-    case 'bottomRight': {
-      return {
-        points: ['tr', 'br'],
-        offset: [0, 4],
-        overflow,
-      };
-    }
-    case 'topLeft': {
-      return {
-        points: ['bl', 'tl'],
-        offset: [0, -4],
-        overflow,
-      };
-    }
-    case 'topRight': {
-      return {
-        points: ['br', 'tr'],
-        offset: [0, -4],
-        overflow,
-      };
-    }
-    default: {
-      return direction === 'rtl'
-        ? {
-            points: ['tr', 'br'],
-            offset: [0, 4],
-            overflow,
-          }
-        : {
-            points: ['tl', 'bl'],
-            offset: [0, 4],
-            overflow,
-          };
-    }
-  }
-}
diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7bb2346334..7ba1062ede 100644
--- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -220,7 +220,7 @@ Array [
     type="button"
   >
     <span>
-      bottom
+      bottomCenter
     </span>
   </button>,
   <div>
@@ -860,1291 +860,7 @@ Array [
     type="button"
   >
     <span>
-      top
-    </span>
-  </button>,
-  <div>
-    <div
-      class="ant-dropdown ant-dropdown-show-arrow"
-      style="opacity:0;pointer-events:none"
-    >
-      <div
-        class="ant-dropdown-arrow"
-      />
-      <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 ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.antgroup.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              1st menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.aliyun.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              2nd menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.luohanacademy.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              3rd menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </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;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"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      topRight
-    </span>
-  </button>,
-  <div>
-    <div
-      class="ant-dropdown ant-dropdown-show-arrow"
-      style="opacity:0;pointer-events:none"
-    >
-      <div
-        class="ant-dropdown-arrow"
-      />
-      <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 ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.antgroup.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              1st menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.aliyun.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              2nd menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.luohanacademy.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              3rd menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </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;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"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-]
-`;
-
-exports[`renders ./components/dropdown/demo/arrow-center.md extend context correctly 1`] = `
-Array [
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      bottomLeft
-    </span>
-  </button>,
-  <div>
-    <div
-      class="ant-dropdown ant-dropdown-show-arrow"
-      style="opacity:0;pointer-events:none"
-    >
-      <div
-        class="ant-dropdown-arrow"
-      />
-      <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 ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.antgroup.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              1st menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.aliyun.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              2nd menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.luohanacademy.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              3rd menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </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;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"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      bottom
-    </span>
-  </button>,
-  <div>
-    <div
-      class="ant-dropdown ant-dropdown-show-arrow"
-      style="opacity:0;pointer-events:none"
-    >
-      <div
-        class="ant-dropdown-arrow"
-      />
-      <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 ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.antgroup.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              1st menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.aliyun.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              2nd menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.luohanacademy.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              3rd menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </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;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"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      bottomRight
-    </span>
-  </button>,
-  <div>
-    <div
-      class="ant-dropdown ant-dropdown-show-arrow"
-      style="opacity:0;pointer-events:none"
-    >
-      <div
-        class="ant-dropdown-arrow"
-      />
-      <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 ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.antgroup.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              1st menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.aliyun.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              2nd menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.luohanacademy.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              3rd menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </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;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"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-  <br />,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      topLeft
-    </span>
-  </button>,
-  <div>
-    <div
-      class="ant-dropdown ant-dropdown-show-arrow"
-      style="opacity:0;pointer-events:none"
-    >
-      <div
-        class="ant-dropdown-arrow"
-      />
-      <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 ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.antgroup.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              1st menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.aliyun.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              2nd menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <li
-          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
-          role="menuitem"
-          tabindex="-1"
-        >
-          <span
-            class="ant-dropdown-menu-title-content"
-          >
-            <a
-              href="https://www.luohanacademy.com"
-              rel="noopener noreferrer"
-              target="_blank"
-            >
-              3rd menu item
-            </a>
-          </span>
-        </li>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </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;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"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-        <div>
-          <div
-            class="ant-tooltip ant-dropdown-menu-inline-collapsed-tooltip"
-            style="opacity:0;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"
-              />
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      top
+      topCenter
     </span>
   </button>,
   <div>
@@ -7038,7 +5754,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
           type="button"
         >
           <span>
-            bottom
+            bottomCenter
           </span>
         </button>
         <div>
@@ -7692,7 +6408,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
           type="button"
         >
           <span>
-            top
+            topCenter
           </span>
         </button>
         <div>
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
index 1ff3a8874c..4e4aa98da4 100644
--- a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
@@ -15,7 +15,7 @@ Array [
     type="button"
   >
     <span>
-      bottom
+      bottomCenter
     </span>
   </button>,
   <button
@@ -40,61 +40,7 @@ Array [
     type="button"
   >
     <span>
-      top
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      topRight
-    </span>
-  </button>,
-]
-`;
-
-exports[`renders ./components/dropdown/demo/arrow-center.md correctly 1`] = `
-Array [
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      bottomLeft
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      bottom
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      bottomRight
-    </span>
-  </button>,
-  <br />,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      topLeft
-    </span>
-  </button>,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
-  >
-    <span>
-      top
+      topCenter
     </span>
   </button>,
   <button
@@ -712,7 +658,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
           type="button"
         >
           <span>
-            bottom
+            bottomCenter
           </span>
         </button>
       </div>
@@ -760,7 +706,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
           type="button"
         >
           <span>
-            top
+            topCenter
           </span>
         </button>
       </div>
diff --git a/components/dropdown/__tests__/index.test.js b/components/dropdown/__tests__/index.test.js
index dc97a9bb8f..06631ea92a 100644
--- a/components/dropdown/__tests__/index.test.js
+++ b/components/dropdown/__tests__/index.test.js
@@ -59,24 +59,4 @@ describe('Dropdown', () => {
     await sleep(500);
     expect(wrapper.find(Dropdown).find('#customExpandIcon').length).toBe(1);
   });
-
-  it('should warn if use topCenter or bottomCenter', () => {
-    const error = jest.spyOn(console, 'error');
-    mount(
-      <div>
-        <Dropdown overlay="123" placement="bottomCenter">
-          <button type="button">bottomCenter</button>
-        </Dropdown>
-        <Dropdown overlay="123" placement="topCenter">
-          <button type="button">topCenter</button>
-        </Dropdown>
-      </div>,
-    );
-    expect(error).toHaveBeenCalledWith(
-      expect.stringContaining("[antd: Dropdown] You are using 'bottomCenter'"),
-    );
-    expect(error).toHaveBeenCalledWith(
-      expect.stringContaining("[antd: Dropdown] You are using 'topCenter'"),
-    );
-  });
 });
diff --git a/components/dropdown/demo/arrow-center.md b/components/dropdown/demo/arrow-center.md
deleted file mode 100644
index fd4834fbb7..0000000000
--- a/components/dropdown/demo/arrow-center.md
+++ /dev/null
@@ -1,75 +0,0 @@
----
-order: 3
-title:
-  zh-CN: 箭头指向
-  en-US: Arrow pointing at the center
----
-
-## zh-CN
-
-设置 `arrow` 为 `{ pointAtCenter: true }` 后，箭头将指向目标元素的中心。
-
-## en-US
-
-By specifying `arrow` prop with `{ pointAtCenter: true }`, the arrow will point to the center of the target element.
-
-```jsx
-import { Menu, Dropdown, Button } from 'antd';
-
-const menu = (
-  <Menu>
-    <Menu.Item>
-      <a target="_blank" rel="noopener noreferrer" href="https://www.antgroup.com">
-        1st menu item
-      </a>
-    </Menu.Item>
-    <Menu.Item>
-      <a target="_blank" rel="noopener noreferrer" href="https://www.aliyun.com">
-        2nd menu item
-      </a>
-    </Menu.Item>
-    <Menu.Item>
-      <a target="_blank" rel="noopener noreferrer" href="https://www.luohanacademy.com">
-        3rd menu item
-      </a>
-    </Menu.Item>
-  </Menu>
-);
-
-ReactDOM.render(
-  <>
-    <Dropdown overlay={menu} placement="bottomLeft" arrow={{ pointAtCenter: true }}>
-      <Button>bottomLeft</Button>
-    </Dropdown>
-    <Dropdown overlay={menu} placement="bottom" arrow={{ pointAtCenter: true }}>
-      <Button>bottom</Button>
-    </Dropdown>
-    <Dropdown overlay={menu} placement="bottomRight" arrow={{ pointAtCenter: true }}>
-      <Button>bottomRight</Button>
-    </Dropdown>
-    <br />
-    <Dropdown overlay={menu} placement="topLeft" arrow={{ pointAtCenter: true }}>
-      <Button>topLeft</Button>
-    </Dropdown>
-    <Dropdown overlay={menu} placement="top" arrow={{ pointAtCenter: true }}>
-      <Button>top</Button>
-    </Dropdown>
-    <Dropdown overlay={menu} placement="topRight" arrow={{ pointAtCenter: true }}>
-      <Button>topRight</Button>
-    </Dropdown>
-  </>,
-  mountNode,
-);
-```
-
-```css
-#components-dropdown-demo-arrow-center .ant-btn {
-  margin-right: 8px;
-  margin-bottom: 8px;
-}
-.ant-row-rtl #components-dropdown-demo-arrow-center .ant-btn {
-  margin-right: 0;
-  margin-bottom: 8px;
-  margin-left: 8px;
-}
-```
diff --git a/components/dropdown/demo/arrow.md b/components/dropdown/demo/arrow.md
index b4c3880e7f..7a6af177b3 100644
--- a/components/dropdown/demo/arrow.md
+++ b/components/dropdown/demo/arrow.md
@@ -41,8 +41,8 @@ ReactDOM.render(
     <Dropdown overlay={menu} placement="bottomLeft" arrow>
       <Button>bottomLeft</Button>
     </Dropdown>
-    <Dropdown overlay={menu} placement="bottom" arrow>
-      <Button>bottom</Button>
+    <Dropdown overlay={menu} placement="bottomCenter" arrow>
+      <Button>bottomCenter</Button>
     </Dropdown>
     <Dropdown overlay={menu} placement="bottomRight" arrow>
       <Button>bottomRight</Button>
@@ -51,8 +51,8 @@ ReactDOM.render(
     <Dropdown overlay={menu} placement="topLeft" arrow>
       <Button>topLeft</Button>
     </Dropdown>
-    <Dropdown overlay={menu} placement="top" arrow>
-      <Button>top</Button>
+    <Dropdown overlay={menu} placement="topCenter" arrow>
+      <Button>topCenter</Button>
     </Dropdown>
     <Dropdown overlay={menu} placement="topRight" arrow>
       <Button>topRight</Button>
diff --git a/components/dropdown/demo/dropdown-button.md b/components/dropdown/demo/dropdown-button.md
index 21e406aa78..956fc58847 100644
--- a/components/dropdown/demo/dropdown-button.md
+++ b/components/dropdown/demo/dropdown-button.md
@@ -46,7 +46,7 @@ ReactDOM.render(
     <Dropdown.Button onClick={handleButtonClick} overlay={menu}>
       Dropdown
     </Dropdown.Button>
-    <Dropdown.Button overlay={menu} placement="bottom" icon={<UserOutlined />}>
+    <Dropdown.Button overlay={menu} placement="bottomCenter" icon={<UserOutlined />}>
       Dropdown
     </Dropdown.Button>
     <Dropdown.Button onClick={handleButtonClick} overlay={menu} disabled>
diff --git a/components/dropdown/demo/placement.md b/components/dropdown/demo/placement.md
index 196bffc5ef..d46c3a564f 100644
--- a/components/dropdown/demo/placement.md
+++ b/components/dropdown/demo/placement.md
@@ -42,8 +42,8 @@ ReactDOM.render(
       <Dropdown overlay={menu} placement="bottomLeft">
         <Button>bottomLeft</Button>
       </Dropdown>
-      <Dropdown overlay={menu} placement="bottom">
-        <Button>bottom</Button>
+      <Dropdown overlay={menu} placement="bottomCenter">
+        <Button>bottomCenter</Button>
       </Dropdown>
       <Dropdown overlay={menu} placement="bottomRight">
         <Button>bottomRight</Button>
@@ -53,8 +53,8 @@ ReactDOM.render(
       <Dropdown overlay={menu} placement="topLeft">
         <Button>topLeft</Button>
       </Dropdown>
-      <Dropdown overlay={menu} placement="top">
-        <Button>top</Button>
+      <Dropdown overlay={menu} placement="topCenter">
+        <Button>topCenter</Button>
       </Dropdown>
       <Dropdown overlay={menu} placement="topRight">
         <Button>topRight</Button>
diff --git a/components/dropdown/dropdown.tsx b/components/dropdown/dropdown.tsx
index fd4e096893..8a8a3a06bc 100644
--- a/components/dropdown/dropdown.tsx
+++ b/components/dropdown/dropdown.tsx
@@ -7,7 +7,6 @@ import { ConfigContext } from '../config-provider';
 import devWarning from '../_util/devWarning';
 import { tuple } from '../_util/type';
 import { cloneElement } from '../_util/reactNode';
-import getPlacements from '../_util/placements';
 
 const Placements = tuple(
   'topLeft',
@@ -16,8 +15,6 @@ const Placements = tuple(
   'bottomLeft',
   'bottomCenter',
   'bottomRight',
-  'top',
-  'bottom',
 );
 
 type Placement = typeof Placements[number];
@@ -37,12 +34,8 @@ type Align = {
   useCssTransform?: boolean;
 };
 
-export type DropdownArrowOptions = {
-  pointAtCenter?: boolean;
-};
-
 export interface DropDownProps {
-  arrow?: boolean | DropdownArrowOptions;
+  arrow?: boolean;
   trigger?: ('click' | 'hover' | 'contextMenu')[];
   overlay: React.ReactElement | OverlayFunc;
   onVisibleChange?: (visible: boolean) => void;
@@ -136,21 +129,10 @@ const Dropdown: DropdownInterface = props => {
 
   const getPlacement = () => {
     const { placement } = props;
-    if (!placement) {
-      return direction === 'rtl' ? ('bottomRight' as Placement) : ('bottomLeft' as Placement);
+    if (placement !== undefined) {
+      return placement;
     }
-
-    if (placement.includes('Center')) {
-      const newPlacement = placement.slice(0, placement.indexOf('Center'));
-      devWarning(
-        !placement.includes('Center'),
-        'Dropdown',
-        `You are using '${placement}' placement in Dropdown, which is deprecated. Try to use '${newPlacement}' instead.`,
-      );
-      return newPlacement;
-    }
-
-    return placement;
+    return direction === 'rtl' ? ('bottomRight' as Placement) : ('bottomLeft' as Placement);
   };
 
   const {
@@ -187,16 +169,11 @@ const Dropdown: DropdownInterface = props => {
     alignPoint = true;
   }
 
-  const builtinPlacements = getPlacements({
-    arrowPointAtCenter: typeof arrow === 'object' && arrow.pointAtCenter,
-  });
-
   return (
     <RcDropdown
+      arrow={arrow}
       alignPoint={alignPoint}
       {...props}
-      builtinPlacements={builtinPlacements}
-      arrow={!!arrow}
       overlayClassName={overlayClassNameCustomized}
       prefixCls={prefixCls}
       getPopupContainer={getPopupContainer || getContextPopupContainer}
diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md
index 035af00153..6099aa4be6 100644
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@@ -17,14 +17,14 @@ When there are more than a few options to choose from, you can wrap them in a `D
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| arrow | Whether the dropdown arrow should be visible | boolean \| { pointAtCenter: boolean } | false |  |
+| arrow | Whether the dropdown arrow should be visible | boolean | false |  |
 | disabled | Whether the dropdown menu is disabled | boolean | - |  |
 | destroyPopupOnHide | Whether destroy dropdown when hidden | boolean | false |  |
 | getPopupContainer | To set the container of the dropdown menu. The default is to create a div element in body, but you can reset it to the scrolling area and make a relative reposition. [Example on CodePen](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  |
 | overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - |  |
 | overlayClassName | The class name of the dropdown root element | string | - |  |
 | overlayStyle | The style of the dropdown root element | CSSProperties | - |  |
-| placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
+| placement | Placement of popup menu: `bottomLeft`, `bottomCenter`, `bottomRight`, `topLeft`, `topCenter` or `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 | - |  |
@@ -44,7 +44,7 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
 | disabled | Whether the dropdown menu is disabled | boolean | - |  |
 | icon | Icon (appears on the right) | ReactNode | - |  |
 | overlay | The dropdown menu | [Menu](/components/menu) | - |  |
-| placement | Placement of popup menu: `bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
+| placement | Placement of popup menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` |  |
 | 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` |  |
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index 3ff8a060bd..15eccfea50 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -21,14 +21,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| arrow | 下拉框箭头是否显示 | boolean \| { pointAtCenter: boolean } | false |  |
+| arrow | 下拉框箭头是否显示 | boolean | false |  |
 | disabled | 菜单是否禁用 | boolean | - |  |
 | destroyPopupOnHide | 关闭后是否销毁 Dropdown | boolean | false |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  |
 | overlay | 菜单 | [Menu](/components/menu) \| () => Menu | - |  |
 | overlayClassName | 下拉根元素的类名称 | string | - |  |
 | overlayStyle | 下拉根元素的样式 | CSSProperties | - |  |
-| placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
+| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` |  |
 | trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | visible | 菜单是否显示 | boolean | - |  |
 | onVisibleChange | 菜单显示状态改变时调用，参数为 `visible`。点击菜单按钮导致的消失不会触发 | (visible: boolean) => void | - |  |
@@ -48,7 +48,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 | disabled | 菜单是否禁用 | boolean | - |  |
 | icon | 右侧的 icon | ReactNode | - |  |
 | overlay | 菜单 | [Menu](/components/menu/) | - |  |
-| placement | 菜单弹出位置：`bottom` `bottomLeft` `bottomRight` `top` `topLeft` `topRight` | string | `bottomLeft` |  |
+| placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` |  |
 | size | 按钮大小，和 [Button](/components/button/#API) 一致 | string | `default` |  |
 | trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | type | 按钮类型，和 [Button](/components/button/#API) 一致 | string | `default` |  |
diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
index 77af0d2807..bb60447921 100644
--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@@ -49,14 +49,14 @@
   }
 
   // Offset the popover to account for the dropdown arrow
+  &-show-arrow&-placement-topCenter,
   &-show-arrow&-placement-topLeft,
-  &-show-arrow&-placement-top,
   &-show-arrow&-placement-topRight {
     padding-bottom: @popover-distance;
   }
 
+  &-show-arrow&-placement-bottomCenter,
   &-show-arrow&-placement-bottomLeft,
-  &-show-arrow&-placement-bottom,
   &-show-arrow&-placement-bottomRight {
     padding-top: @popover-distance;
   }
@@ -76,7 +76,7 @@
     transform: rotate(45deg);
   }
 
-  &-placement-top > &-arrow,
+  &-placement-topCenter > &-arrow,
   &-placement-topLeft > &-arrow,
   &-placement-topRight > &-arrow {
     bottom: @popover-distance - @popover-arrow-width + 2.2px;
@@ -84,7 +84,7 @@
     box-shadow: 3px 3px 7px fade(@black, 7%);
   }
 
-  &-placement-top > &-arrow {
+  &-placement-topCenter > &-arrow {
     left: 50%;
     transform: translateX(-50%) rotate(45deg);
   }
@@ -97,7 +97,7 @@
     right: 16px;
   }
 
-  &-placement-bottom > &-arrow,
+  &-placement-bottomCenter > &-arrow,
   &-placement-bottomLeft > &-arrow,
   &-placement-bottomRight > &-arrow {
     top: @popover-distance - @popover-arrow-width + 2px;
@@ -105,7 +105,7 @@
     box-shadow: -2px -2px 5px fade(@black, 6%);
   }
 
-  &-placement-bottom > &-arrow {
+  &-placement-bottomCenter > &-arrow {
     left: 50%;
     transform: translateX(-50%) rotate(45deg);
   }
@@ -300,8 +300,8 @@
 
   &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomLeft,
   &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomLeft,
-  &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottom,
-  &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottom,
+  &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomCenter,
+  &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomCenter,
   &.@{ant-prefix}-slide-down-enter.@{ant-prefix}-slide-down-enter-active&-placement-bottomRight,
   &.@{ant-prefix}-slide-down-appear.@{ant-prefix}-slide-down-appear-active&-placement-bottomRight {
     animation-name: antSlideUpIn;
@@ -309,21 +309,21 @@
 
   &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topLeft,
   &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topLeft,
-  &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-top,
-  &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-top,
+  &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topCenter,
+  &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topCenter,
   &.@{ant-prefix}-slide-up-enter.@{ant-prefix}-slide-up-enter-active&-placement-topRight,
   &.@{ant-prefix}-slide-up-appear.@{ant-prefix}-slide-up-appear-active&-placement-topRight {
     animation-name: antSlideDownIn;
   }
 
   &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomLeft,
-  &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottom,
+  &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomCenter,
   &.@{ant-prefix}-slide-down-leave.@{ant-prefix}-slide-down-leave-active&-placement-bottomRight {
     animation-name: antSlideUpOut;
   }
 
   &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topLeft,
-  &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-top,
+  &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topCenter,
   &.@{ant-prefix}-slide-up-leave.@{ant-prefix}-slide-up-leave-active&-placement-topRight {
     animation-name: antSlideDownOut;
   }
diff --git a/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
index 6c0c1914b4..00ddf7235f 100644
--- a/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -189,77 +189,6 @@ Array [
 
 exports[`renders ./components/notification/demo/placement.md extend context correctly 1`] = `
 <div>
-  <div
-    class="ant-space ant-space-horizontal ant-space-align-center"
-  >
-    <div
-      class="ant-space-item"
-      style="margin-right:8px"
-    >
-      <button
-        class="ant-btn ant-btn-primary"
-        type="button"
-      >
-        <span
-          aria-label="border-top"
-          class="anticon anticon-border-top"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="border-top"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M872 144H152c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM208 310h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 498h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 166h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm166-166h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm166 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332 332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332-498h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332 332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
-            />
-          </svg>
-        </span>
-        <span>
-          top
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-primary"
-        type="button"
-      >
-        <span
-          aria-label="border-bottom"
-          class="anticon anticon-border-bottom"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="border-bottom"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M872 808H152c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-720-94h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0-498h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0 332h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0-166h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm166 166h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0-332h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm332 0h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0 332h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm222-72h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm388-404h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm388 426h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm388-404h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8z"
-            />
-          </svg>
-        </span>
-        <span>
-          bottom
-        </span>
-      </button>
-    </div>
-  </div>
-  <div
-    class="ant-divider ant-divider-horizontal"
-    role="separator"
-  />
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
diff --git a/components/notification/__tests__/__snapshots__/demo.test.js.snap b/components/notification/__tests__/__snapshots__/demo.test.js.snap
index 2fcbe2e7a5..5659351ece 100644
--- a/components/notification/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/notification/__tests__/__snapshots__/demo.test.js.snap
@@ -189,77 +189,6 @@ Array [
 
 exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
 <div>
-  <div
-    class="ant-space ant-space-horizontal ant-space-align-center"
-  >
-    <div
-      class="ant-space-item"
-      style="margin-right:8px"
-    >
-      <button
-        class="ant-btn ant-btn-primary"
-        type="button"
-      >
-        <span
-          aria-label="border-top"
-          class="anticon anticon-border-top"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="border-top"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M872 144H152c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM208 310h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 498h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 166h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm166-166h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0-332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm166 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332 332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332-498h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm332 332h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-332 0h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8z"
-            />
-          </svg>
-        </span>
-        <span>
-          top
-        </span>
-      </button>
-    </div>
-    <div
-      class="ant-space-item"
-    >
-      <button
-        class="ant-btn ant-btn-primary"
-        type="button"
-      >
-        <span
-          aria-label="border-bottom"
-          class="anticon anticon-border-bottom"
-          role="img"
-        >
-          <svg
-            aria-hidden="true"
-            data-icon="border-bottom"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M872 808H152c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h720c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-720-94h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0-498h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0 332h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0-166h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm166 166h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0-332h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm332 0h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm0 332h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm222-72h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm388-404h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm388 426h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm388-404h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm-388 72h56c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8h-56c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8z"
-            />
-          </svg>
-        </span>
-        <span>
-          bottom
-        </span>
-      </button>
-    </div>
-  </div>
-  <div
-    class="ant-divider ant-divider-horizontal"
-    role="separator"
-  />
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
diff --git a/components/notification/__tests__/placement.test.js b/components/notification/__tests__/placement.test.js
index e7fed3a720..8d59eddb49 100644
--- a/components/notification/__tests__/placement.test.js
+++ b/components/notification/__tests__/placement.test.js
@@ -34,22 +34,6 @@ describe('Notification.placement', () => {
       const defaultBottom = '24px';
       let style;
 
-      // top
-      open({
-        placement: 'top',
-        top: 50,
-      });
-      style = getStyle($$('.ant-notification-top')[0]);
-      expect(style.top).toBe('50px');
-      expect(style.left).toBe('0px');
-      expect(style.right).toBe('0px');
-      expect(style.bottom).toBe('');
-
-      open({
-        placement: 'top',
-      });
-      expect($$('.ant-notification-top').length).toBe(1);
-
       // topLeft
       open({
         placement: 'topLeft',
@@ -79,22 +63,6 @@ describe('Notification.placement', () => {
       });
       expect($$('.ant-notification-topRight').length).toBe(1);
 
-      // bottom
-      open({
-        placement: 'bottom',
-        bottom: 100,
-      });
-      style = getStyle($$('.ant-notification-bottom')[0]);
-      expect(style.top).toBe('');
-      expect(style.left).toBe('0px');
-      expect(style.right).toBe('0px');
-      expect(style.bottom).toBe('100px');
-
-      open({
-        placement: 'bottom',
-      });
-      expect($$('.ant-notification-bottom').length).toBe(1);
-
       // bottomRight
       open({
         placement: 'bottomRight',
diff --git a/components/notification/demo/placement.md b/components/notification/demo/placement.md
index 73531c20ab..7a6b385c8c 100755
--- a/components/notification/demo/placement.md
+++ b/components/notification/demo/placement.md
@@ -20,8 +20,6 @@ import {
   RadiusUprightOutlined,
   RadiusBottomleftOutlined,
   RadiusBottomrightOutlined,
-  BorderTopOutlined,
-  BorderBottomOutlined,
 } from '@ant-design/icons';
 
 const openNotification = placement => {
@@ -35,17 +33,6 @@ const openNotification = placement => {
 
 ReactDOM.render(
   <div>
-    <Space>
-      <Button type="primary" onClick={() => openNotification('top')}>
-        <BorderTopOutlined />
-        top
-      </Button>
-      <Button type="primary" onClick={() => openNotification('bottom')}>
-        <BorderBottomOutlined />
-        bottom
-      </Button>
-    </Space>
-    <Divider />
     <Space>
       <Button type="primary" onClick={() => openNotification('topLeft')}>
         <RadiusUpleftOutlined />
diff --git a/components/notification/index.tsx b/components/notification/index.tsx
index 620a192405..0749758d4f 100755
--- a/components/notification/index.tsx
+++ b/components/notification/index.tsx
@@ -10,13 +10,7 @@ import InfoCircleOutlined from '@ant-design/icons/InfoCircleOutlined';
 import createUseNotification from './hooks/useNotification';
 import ConfigProvider, { globalConfig } from '../config-provider';
 
-export type NotificationPlacement =
-  | 'top'
-  | 'topLeft'
-  | 'topRight'
-  | 'bottom'
-  | 'bottomLeft'
-  | 'bottomRight';
+export type NotificationPlacement = 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight';
 
 export type IconType = 'success' | 'info' | 'error' | 'warning';
 
@@ -85,14 +79,6 @@ function getPlacementStyle(
 ) {
   let style;
   switch (placement) {
-    case 'top':
-      style = {
-        left: 0,
-        right: 0,
-        top,
-        bottom: 'auto',
-      };
-      break;
     case 'topLeft':
       style = {
         left: 0,
@@ -107,14 +93,6 @@ function getPlacementStyle(
         bottom: 'auto',
       };
       break;
-    case 'bottom':
-      style = {
-        left: 0,
-        right: 0,
-        top: 'auto',
-        bottom,
-      };
-      break;
     case 'bottomLeft':
       style = {
         left: 0,
diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md
index e387d8b2b4..f69e48bf7f 100644
--- a/components/notification/index.zh-CN.md
+++ b/components/notification/index.zh-CN.md
@@ -71,7 +71,7 @@ notification.config({
 | closeIcon | 自定义关闭图标 | ReactNode | - |  |
 | duration | 默认自动关闭延时，单位秒 | number | 4.5 |  |
 | getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |  |
-| placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |
+| placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |  |
 | rtl | 是否开启 RTL 模式 | boolean | false |  |
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |  |
 | maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |
diff --git a/components/notification/style/index.less b/components/notification/style/index.less
index fd457e392a..b85b73f55f 100644
--- a/components/notification/style/index.less
+++ b/components/notification/style/index.less
@@ -16,8 +16,6 @@
   z-index: @zindex-notification;
   margin-right: @notification-margin-edge;
 
-  &-top,
-  &-bottom,
   &-topLeft,
   &-bottomLeft {
     margin-right: 0;
@@ -29,12 +27,6 @@
     }
   }
 
-  &-top,
-  &-bottom {
-    margin-right: auto;
-    margin-left: auto;
-  }
-
   &-close-icon {
     font-size: @font-size-base;
     cursor: pointer;
@@ -58,12 +50,6 @@
     border-radius: @border-radius-base;
     box-shadow: @shadow-2;
 
-    .@{notification-prefix-cls}-top &,
-    .@{notification-prefix-cls}-bottom & {
-      margin-right: auto;
-      margin-left: auto;
-    }
-
     .@{notification-prefix-cls}-topLeft &,
     .@{notification-prefix-cls}-bottomLeft & {
       margin-right: auto;
diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
index 15b13b39f9..bc9a98b6d7 100644
--- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -4145,253 +4145,6 @@ exports[`renders ./components/select/demo/option-label-prop.md extend context co
 </div>
 `;
 
-exports[`renders ./components/select/demo/placement.md extend context correctly 1`] = `
-Array [
-  <div
-    class="ant-radio-group ant-radio-group-outline"
-  >
-    <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
-    >
-      <span
-        class="ant-radio-button ant-radio-button-checked"
-      >
-        <input
-          checked=""
-          class="ant-radio-button-input"
-          type="radio"
-          value="topLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="topRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topRight
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomRight
-      </span>
-    </label>
-  </div>,
-  <br />,
-  <br />,
-  <div
-    class="ant-select ant-select-single ant-select-show-arrow"
-    style="width:120px"
-  >
-    <div
-      class="ant-select-selector"
-    >
-      <span
-        class="ant-select-selection-search"
-      >
-        <input
-          aria-activedescendant="undefined_list_0"
-          aria-autocomplete="list"
-          aria-controls="undefined_list"
-          aria-haspopup="listbox"
-          aria-owns="undefined_list"
-          autocomplete="off"
-          class="ant-select-selection-search-input"
-          readonly=""
-          role="combobox"
-          style="opacity:0"
-          type="search"
-          unselectable="on"
-          value=""
-        />
-      </span>
-      <span
-        class="ant-select-selection-item"
-        title="HangZhou #310000"
-      >
-        HangZhou #310000
-      </span>
-    </div>
-    <div>
-      <div
-        class="ant-select-dropdown"
-        style="opacity:0;pointer-events:none"
-      >
-        <div>
-          <div
-            id="undefined_list"
-            role="listbox"
-            style="height:0;width:0;overflow:hidden"
-          >
-            <div
-              aria-label="HangZhou #310000"
-              aria-selected="true"
-              id="undefined_list_0"
-              role="option"
-            >
-              HangZhou
-            </div>
-            <div
-              aria-label="NingBo #315000"
-              aria-selected="false"
-              id="undefined_list_1"
-              role="option"
-            >
-              NingBo
-            </div>
-          </div>
-          <div
-            class="rc-virtual-list"
-            style="position:relative"
-          >
-            <div
-              class="rc-virtual-list-holder"
-              style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-            >
-              <div>
-                <div
-                  class="rc-virtual-list-holder-inner"
-                  style="display:flex;flex-direction:column"
-                >
-                  <div
-                    aria-selected="true"
-                    class="ant-select-item ant-select-item-option ant-select-item-option-active ant-select-item-option-selected"
-                    title="HangZhou #310000"
-                  >
-                    <div
-                      class="ant-select-item-option-content"
-                    >
-                      HangZhou #310000
-                    </div>
-                    <span
-                      aria-hidden="true"
-                      class="ant-select-item-option-state"
-                      style="user-select:none;-webkit-user-select:none"
-                      unselectable="on"
-                    />
-                  </div>
-                  <div
-                    aria-selected="false"
-                    class="ant-select-item ant-select-item-option"
-                    title="NingBo #315000"
-                  >
-                    <div
-                      class="ant-select-item-option-content"
-                    >
-                      NingBo #315000
-                    </div>
-                    <span
-                      aria-hidden="true"
-                      class="ant-select-item-option-state"
-                      style="user-select:none;-webkit-user-select:none"
-                      unselectable="on"
-                    />
-                  </div>
-                  <div
-                    aria-selected="false"
-                    class="ant-select-item ant-select-item-option"
-                    title="WenZhou #325000"
-                  >
-                    <div
-                      class="ant-select-item-option-content"
-                    >
-                      WenZhou #325000
-                    </div>
-                    <span
-                      aria-hidden="true"
-                      class="ant-select-item-option-state"
-                      style="user-select:none;-webkit-user-select:none"
-                      unselectable="on"
-                    />
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <span
-      aria-hidden="true"
-      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
-      unselectable="on"
-    >
-      <span
-        aria-label="down"
-        class="anticon anticon-down ant-select-suffix"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="down"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-          />
-        </svg>
-      </span>
-    </span>
-  </div>,
-]
-`;
-
 exports[`renders ./components/select/demo/responsive.md extend context correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
diff --git a/components/select/__tests__/__snapshots__/demo.test.js.snap b/components/select/__tests__/__snapshots__/demo.test.js.snap
index 4123081b6f..ad1e10f982 100644
--- a/components/select/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/select/__tests__/__snapshots__/demo.test.js.snap
@@ -1569,154 +1569,6 @@ exports[`renders ./components/select/demo/option-label-prop.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/select/demo/placement.md correctly 1`] = `
-Array [
-  <div
-    class="ant-radio-group ant-radio-group-outline"
-  >
-    <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
-    >
-      <span
-        class="ant-radio-button ant-radio-button-checked"
-      >
-        <input
-          checked=""
-          class="ant-radio-button-input"
-          type="radio"
-          value="topLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="topRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topRight
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomRight
-      </span>
-    </label>
-  </div>,
-  <br />,
-  <br />,
-  <div
-    class="ant-select ant-select-single ant-select-show-arrow"
-    style="width:120px"
-  >
-    <div
-      class="ant-select-selector"
-    >
-      <span
-        class="ant-select-selection-search"
-      >
-        <input
-          aria-activedescendant="undefined_list_0"
-          aria-autocomplete="list"
-          aria-controls="undefined_list"
-          aria-haspopup="listbox"
-          aria-owns="undefined_list"
-          autocomplete="off"
-          class="ant-select-selection-search-input"
-          readonly=""
-          role="combobox"
-          style="opacity:0"
-          type="search"
-          unselectable="on"
-          value=""
-        />
-      </span>
-      <span
-        class="ant-select-selection-item"
-        title="HangZhou #310000"
-      >
-        HangZhou #310000
-      </span>
-    </div>
-    <span
-      aria-hidden="true"
-      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
-      unselectable="on"
-    >
-      <span
-        aria-label="down"
-        class="anticon anticon-down ant-select-suffix"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="down"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-          />
-        </svg>
-      </span>
-    </span>
-  </div>,
-]
-`;
-
 exports[`renders ./components/select/demo/responsive.md correctly 1`] = `
 <div
   class="ant-space ant-space-vertical"
diff --git a/components/select/demo/placement.md b/components/select/demo/placement.md
deleted file mode 100644
index 7ccca34501..0000000000
--- a/components/select/demo/placement.md
+++ /dev/null
@@ -1,53 +0,0 @@
----
-order: 38
-title:
-  zh-CN: 弹出位置
-  en-US: Placement
----
-
-## zh-CN
-
-可以通过 `placement` 手动指定弹出的位置。
-
-## en-US
-
-You can manually specify the position of the popup via `placement`.
-
-```jsx
-import { Select, Radio } from 'antd';
-
-const { Option } = Select;
-
-const SetPlacementDemo = () => {
-  const [placement, SetPlacement] = React.useState('topLeft');
-
-  const placementChange = e => {
-    SetPlacement(e.target.value);
-  };
-
-  return (
-    <>
-      <Radio.Group value={placement} onChange={placementChange}>
-        <Radio.Button value="topLeft">topLeft</Radio.Button>
-        <Radio.Button value="topRight">topRight</Radio.Button>
-        <Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
-        <Radio.Button value="bottomRight">bottomRight</Radio.Button>
-      </Radio.Group>
-      <br />
-      <br />
-      <Select
-        defaultValue="HangZhou"
-        style={{ width: 120 }}
-        dropdownMatchSelectWidth={false}
-        placement={placement}
-      >
-        <Option value="HangZhou">HangZhou #310000</Option>
-        <Option value="NingBo">NingBo #315000</Option>
-        <Option value="WenZhou">WenZhou #325000</Option>
-      </Select>
-    </>
-  );
-};
-
-ReactDOM.render(<SetPlacementDemo />, mountNode);
-```
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index b888959fc9..fc96445800 100644
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@@ -37,7 +37,7 @@ Select component to select value from options.
 | 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 | - |  |
-| fieldNames | Customize node title, key, options field name | object | { label: `label`, key: `key`, options: `options` } | 4.17.0 |
+| fieldNames | Customize node label, value, options field name | object | { label: `label`, value: `value`, options: `options` } | 4.17.0 |
 | 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 |  |
 | filterSort | Sort function for search options sorting, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction | (optionA: Option, optionB: Option) => number | - | 4.9.0 |
 | getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [Example](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body |  |
@@ -55,7 +55,6 @@ Select component to select value from options.
 | optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` |  |
 | options | Select options. Will get better perf than jsx definition | { label, value }\[] | - |  |
 | placeholder | Placeholder of select | ReactNode | - |  |
-| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | removeIcon | The custom remove icon | ReactNode | - |  |
 | searchValue | The current input "search" text | string | - |  |
 | showArrow | Whether to show the drop-down arrow | boolean | true(for single select), false(for multiple select) |  |
diff --git a/components/select/index.tsx b/components/select/index.tsx
index 4d865c854b..0346795b1e 100755
--- a/components/select/index.tsx
+++ b/components/select/index.tsx
@@ -9,7 +9,7 @@ import { OptionProps } from 'rc-select/lib/Option';
 import { ConfigContext } from '../config-provider';
 import getIcons from './utils/iconUtil';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
-import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
+import { getTransitionName } from '../_util/motion';
 
 type RawValue = string | number;
 
@@ -38,9 +38,8 @@ export interface SelectProps<
   OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType,
 > extends Omit<
     InternalSelectProps<ValueType, OptionType>,
-    'inputIcon' | 'mode' | 'getInputElement' | 'getRawInputElement' | 'backfill' | 'placement'
+    'inputIcon' | 'mode' | 'getInputElement' | 'getRawInputElement' | 'backfill'
   > {
-  placement?: SelectCommonPlacement;
   mode?: 'multiple' | 'tags';
 }
 
@@ -54,7 +53,6 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
     getPopupContainer,
     dropdownClassName,
     listHeight = 256,
-    placement,
     listItemHeight = 24,
     size: customizeSize,
     notFoundContent,
@@ -125,32 +123,17 @@ const InternalSelect = <OptionType extends BaseOptionType | DefaultOptionType =
     className,
   );
 
-  // ===================== Placement =====================
-  const getPlacement = () => {
-    if (placement !== undefined) {
-      return placement;
-    }
-    return direction === 'rtl'
-      ? ('bottomRight' as SelectCommonPlacement)
-      : ('bottomLeft' as SelectCommonPlacement);
-  };
-
   return (
     <RcSelect<any, any>
       ref={ref as any}
       virtual={virtual}
       dropdownMatchSelectWidth={dropdownMatchSelectWidth}
       {...selectProps}
-      transitionName={getTransitionName(
-        rootPrefixCls,
-        getTransitionDirection(placement),
-        props.transitionName,
-      )}
+      transitionName={getTransitionName(rootPrefixCls, 'slide-up', props.transitionName)}
       listHeight={listHeight}
       listItemHeight={listItemHeight}
       mode={mode as any}
       prefixCls={prefixCls}
-      placement={getPlacement()}
       direction={direction}
       inputIcon={suffixIcon}
       menuItemSelectedIcon={itemIcon}
diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md
index f818782f3e..49f0b3f62b 100644
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@@ -38,7 +38,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true |  |
 | dropdownRender | 自定义下拉框内容 | (originNode: ReactNode) => ReactNode | - |  |
 | dropdownStyle | 下拉菜单的 style 属性 | CSSProperties | - |  |
-| fieldNames | 自定义节点 label、key、options 的字段 | object | { label: `label`, key: `key`, options: `options` } | 4.17.0 |
+| fieldNames | 自定义节点 label、value、options 的字段 | object | { label: `label`, value: `value`, options: `options` } | 4.17.0 |
 | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true |  |
 | filterSort | 搜索时对筛选结果项的排序函数, 类似[Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)里的 compareFunction | (optionA: Option, optionB: Option) => number | - | 4.9.0 |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body |  |
@@ -56,7 +56,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
 | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` |  |
 | options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }\[] | - |  |
 | placeholder | 选择框默认文本 | string | - |  |
-| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | removeIcon | 自定义的多选框清除图标 | ReactNode | - |  |
 | searchValue | 控制搜索文本 | string | - |  |
 | showArrow | 是否显示下拉小箭头 | boolean | 单选为 true，多选为 false |  |
diff --git a/components/skeleton/Input.tsx b/components/skeleton/Input.tsx
index 1cb5e31f85..4287615227 100644
--- a/components/skeleton/Input.tsx
+++ b/components/skeleton/Input.tsx
@@ -6,12 +6,11 @@ import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 
 export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
   size?: 'large' | 'small' | 'default';
-  block?: boolean;
 }
 
 const SkeletonInput = (props: SkeletonInputProps) => {
   const renderSkeletonInput = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const { prefixCls: customizePrefixCls, className, active, block } = props;
+    const { prefixCls: customizePrefixCls, className, active } = props;
     const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
     const otherProps = omit(props, ['prefixCls']);
     const cls = classNames(
@@ -19,7 +18,6 @@ const SkeletonInput = (props: SkeletonInputProps) => {
       `${prefixCls}-element`,
       {
         [`${prefixCls}-active`]: active,
-        [`${prefixCls}-block`]: block,
       },
       className,
     );
diff --git a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
index 30ffb63201..96d8785635 100644
--- a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -138,6 +138,7 @@ Array [
       >
         <span
           class="ant-skeleton-input"
+          style="width:200px"
         />
       </div>
     </div>
@@ -153,15 +154,6 @@ Array [
   </div>,
   <br />,
   <br />,
-  <div
-    class="ant-skeleton ant-skeleton-element"
-  >
-    <span
-      class="ant-skeleton-input"
-    />
-  </div>,
-  <br />,
-  <br />,
   <div
     class="ant-skeleton ant-skeleton-element"
   >
@@ -235,9 +227,9 @@ Array [
       >
         <label
           class=""
-          title="Button and Input Block"
+          title="Button Block"
         >
-          Button and Input Block
+          Button Block
         </label>
       </div>
       <div
diff --git a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
index e24269fcc2..d93c28bb3c 100644
--- a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
@@ -138,6 +138,7 @@ Array [
       >
         <span
           class="ant-skeleton-input"
+          style="width:200px"
         />
       </div>
     </div>
@@ -153,15 +154,6 @@ Array [
   </div>,
   <br />,
   <br />,
-  <div
-    class="ant-skeleton ant-skeleton-element"
-  >
-    <span
-      class="ant-skeleton-input"
-    />
-  </div>,
-  <br />,
-  <br />,
   <div
     class="ant-skeleton ant-skeleton-element"
   >
@@ -235,9 +227,9 @@ Array [
       >
         <label
           class=""
-          title="Button and Input Block"
+          title="Button Block"
         >
-          Button and Input Block
+          Button Block
         </label>
       </div>
       <div
diff --git a/components/skeleton/demo/element.md b/components/skeleton/demo/element.md
index b74572d686..a1978de629 100644
--- a/components/skeleton/demo/element.md
+++ b/components/skeleton/demo/element.md
@@ -14,7 +14,7 @@ title:
 Skeleton Button, Avatar, Input and Image.
 
 ```jsx
-import { Skeleton, Space, Divider, Switch, Form, Radio, Button, Input } from 'antd';
+import { Skeleton, Space, Divider, Switch, Form, Radio } from 'antd';
 
 class Demo extends React.Component {
   state = {
@@ -48,23 +48,20 @@ class Demo extends React.Component {
         <Space>
           <Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
           <Skeleton.Avatar active={active} size={size} shape={avatarShape} />
-          <Skeleton.Input active={active} size={size} />
+          <Skeleton.Input style={{ width: 200 }} active={active} size={size} />
         </Space>
         <br />
         <br />
         <Skeleton.Button active={active} size={size} shape={buttonShape} block={block} />
         <br />
         <br />
-        <Skeleton.Input active={active} size={size} block={block} />
-        <br />
-        <br />
         <Skeleton.Image />
         <Divider />
         <Form layout="inline" style={{ margin: '16px 0' }}>
           <Form.Item label="Active">
             <Switch checked={active} onChange={this.handleActiveChange} />
           </Form.Item>
-          <Form.Item label="Button and Input Block">
+          <Form.Item label="Button Block">
             <Switch checked={block} onChange={this.handleBlockChange} />
           </Form.Item>
           <Form.Item label="Size">
diff --git a/components/skeleton/style/index.less b/components/skeleton/style/index.less
index c4ca85b58f..226d84aadb 100644
--- a/components/skeleton/style/index.less
+++ b/components/skeleton/style/index.less
@@ -109,17 +109,13 @@
     }
   }
 
-  // Skeleton Block Button, Input
+  // Skeleton Block Button
   &.@{skeleton-prefix-cls}-block {
     width: 100%;
 
     .@{skeleton-button-prefix-cls} {
       width: 100%;
     }
-
-    .@{skeleton-input-prefix-cls} {
-      width: 100%;
-    }
   }
 
   // Skeleton element
@@ -242,8 +238,7 @@
 }
 
 .skeleton-element-input-size(@size) {
-  width: @size * 5;
-  min-width: @size * 5;
+  width: 100%;
   .skeleton-element-common-size(@size);
 }
 
diff --git a/components/space/index.tsx b/components/space/index.tsx
index 9c0b7f5e4f..6255cb4410 100644
--- a/components/space/index.tsx
+++ b/components/space/index.tsx
@@ -88,12 +88,11 @@ const Space: React.FC<SpaceProps> = props => {
       latestIndex = i;
     }
 
-    const keyOfChild = child && child.key;
-
+    /* eslint-disable react/no-array-index-key */
     return (
       <Item
         className={itemClassName}
-        key={`${itemClassName}-${keyOfChild || i}`}
+        key={`${itemClassName}-${i}`}
         direction={direction}
         index={i}
         marginDirection={marginDirection}
@@ -103,6 +102,7 @@ const Space: React.FC<SpaceProps> = props => {
         {child}
       </Item>
     );
+    /* eslint-enable */
   });
 
   const spaceContext = React.useMemo(
diff --git a/components/style/themes/variable.less b/components/style/themes/variable.less
index 742835cee3..5ebd52c21c 100644
--- a/components/style/themes/variable.less
+++ b/components/style/themes/variable.less
@@ -221,7 +221,7 @@ html {
 
 // Border color
 @border-color-base: hsv(0, 0, 85%); // base border outline a component
-@border-color-split: rgba(0, 0, 0, 0.06); // split border inside a component
+@border-color-split: hsv(0, 0, 94%); // split border inside a component
 @border-color-inverse: @white;
 @border-width-base: 1px; // width of the border for a component
 @border-style-base: solid; // style of a components border
@@ -622,7 +622,7 @@ html {
 // Progress
 // --
 @progress-default-color: @processing-color;
-@progress-remaining-color: rgba(0, 0, 0, 0.04);
+@progress-remaining-color: @background-color-base;
 @progress-info-text-color: @progress-text-color;
 @progress-radius: 100px;
 @progress-steps-item-bg: #f3f3f3;
diff --git a/components/table/__tests__/Table.sorter.test.js b/components/table/__tests__/Table.sorter.test.js
index eaf742f0b2..a25b3cdf55 100644
--- a/components/table/__tests__/Table.sorter.test.js
+++ b/components/table/__tests__/Table.sorter.test.js
@@ -68,55 +68,19 @@ describe('Table.sorter', () => {
       ),
     );
 
-    const getNameColumn = () => wrapper.find('th').at(0);
-
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
-    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
-  });
-
-  it('should change aria-sort when default sort order is set to descend', () => {
-    const wrapper = mount(
-      createTable(
-        {
-          sortDirections: ['descend', 'ascend'],
-        },
-        {
-          defaultSortOrder: 'descend',
-        },
-      ),
-    );
-
-    const getNameColumn = () => wrapper.find('th').at(0);
-
-    // Test that it cycles through the order of sortDirections
-    expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
-    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
-
-    wrapper.find('.ant-table-column-sorters').simulate('click');
-    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
-
-    wrapper.find('.ant-table-column-sorters').simulate('click');
-    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   it('sort records', () => {
     const wrapper = mount(createTable());
 
-    const getNameColumn = () => wrapper.find('th').at(0);
-
-    // first assert default state
-    expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
-    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
-
     // ascend
     wrapper.find('.ant-table-column-sorters').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
-    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
 
     // descend
     wrapper.find('.ant-table-column-sorters').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
-    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
   });
 
   describe('can be controlled by sortOrder', () => {
@@ -369,16 +333,12 @@ describe('Table.sorter', () => {
     // sort name
     getNameColumn().simulate('click');
     expect(getNameIcon('up').hasClass('active')).toBeTruthy();
-    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
     expect(getAgeIcon('up').hasClass('active')).toBeFalsy();
-    expect(getAgeColumn().prop('aria-sort')).toEqual(undefined);
 
     // sort age
     getAgeColumn().simulate('click');
     expect(getNameIcon('up').hasClass('active')).toBeFalsy();
-    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
     expect(getAgeIcon('up').hasClass('active')).toBeTruthy();
-    expect(getAgeColumn().prop('aria-sort')).toEqual('ascending');
   });
 
   // https://github.com/ant-design/ant-design/issues/12571
@@ -420,7 +380,7 @@ describe('Table.sorter', () => {
 
     const wrapper = mount(<TableTest />);
 
-    const getNameColumn = () => wrapper.find('th').at(0);
+    const getNameColumn = () => wrapper.find('.ant-table-column-has-sorters').at(0);
     const getIcon = name => getNameColumn().find(`.ant-table-column-sorter-${name}`).first();
 
     expect(getIcon('up').hasClass('active')).toBeFalsy();
@@ -430,19 +390,16 @@ describe('Table.sorter', () => {
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeTruthy();
     expect(getIcon('down').hasClass('active')).toBeFalsy();
-    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
 
     // sort name
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeFalsy();
     expect(getIcon('down').hasClass('active')).toBeTruthy();
-    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // sort name
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeFalsy();
     expect(getIcon('down').hasClass('active')).toBeFalsy();
-    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   // https://github.com/ant-design/ant-design/issues/12737
@@ -487,7 +444,7 @@ describe('Table.sorter', () => {
 
     const wrapper = mount(<TableTest />);
 
-    const getNameColumn = () => wrapper.find('th').at(0);
+    const getNameColumn = () => wrapper.find('.ant-table-column-has-sorters').at(0);
     const getIcon = name => getNameColumn().find(`.ant-table-column-sorter-${name}`).first();
 
     expect(getIcon('up').hasClass('active')).toBeFalsy();
@@ -497,19 +454,16 @@ describe('Table.sorter', () => {
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeTruthy();
     expect(getIcon('down').hasClass('active')).toBeFalsy();
-    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
 
     // sort name
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeFalsy();
     expect(getIcon('down').hasClass('active')).toBeTruthy();
-    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // sort name
     getNameColumn().simulate('click');
     expect(getIcon('up').hasClass('active')).toBeFalsy();
     expect(getIcon('down').hasClass('active')).toBeFalsy();
-    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   // https://github.com/ant-design/ant-design/issues/12870
@@ -554,14 +508,13 @@ describe('Table.sorter', () => {
     }
 
     const wrapper = mount(<TableTest />);
-    const getNameColumn = () => wrapper.find('th').at(0);
+    const getNameColumn = () => wrapper.find('.ant-table-column-has-sorters').at(0);
     expect(
       getNameColumn().find('.ant-table-column-sorter-up').at(0).hasClass('active'),
     ).toBeFalsy();
     expect(
       getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
     ).toBeFalsy();
-    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
 
     // sort name
     getNameColumn().simulate('click');
@@ -571,7 +524,6 @@ describe('Table.sorter', () => {
     expect(
       getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
     ).toBeFalsy();
-    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
 
     // sort name
     getNameColumn().simulate('click');
@@ -581,7 +533,6 @@ describe('Table.sorter', () => {
     expect(
       getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
     ).toBeTruthy();
-    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // sort name
     getNameColumn().simulate('click');
@@ -591,7 +542,6 @@ describe('Table.sorter', () => {
     expect(
       getNameColumn().find('.ant-table-column-sorter-down').at(0).hasClass('active'),
     ).toBeFalsy();
-    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   it('should first sort by descend, then ascend, then cancel sort', () => {
@@ -600,22 +550,18 @@ describe('Table.sorter', () => {
         sortDirections: ['descend', 'ascend'],
       }),
     );
-    const getNameColumn = () => wrapper.find('th').at(0);
 
     // descend
-    getNameColumn().simulate('click');
+    wrapper.find('.ant-table-column-sorters').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
-    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // ascend
-    getNameColumn().simulate('click');
+    wrapper.find('.ant-table-column-sorters').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Jerry', 'Lucy', 'Tom']);
-    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
 
     // cancel sort
-    getNameColumn().simulate('click');
+    wrapper.find('.ant-table-column-sorters').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
-    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   it('should first sort by descend, then cancel sort', () => {
@@ -625,20 +571,13 @@ describe('Table.sorter', () => {
       }),
     );
 
-    const getNameColumn = () => wrapper.find('th').at(0);
-
-    // default
-    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
-
     // descend
-    getNameColumn().simulate('click');
+    wrapper.find('.ant-table-column-sorters').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
-    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // cancel sort
-    getNameColumn().simulate('click');
+    wrapper.find('.ant-table-column-sorters').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
-    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   it('should first sort by descend, then cancel sort. (column prop)', () => {
@@ -651,20 +590,13 @@ describe('Table.sorter', () => {
       ),
     );
 
-    const getNameColumn = () => wrapper.find('th').at(0);
-
-    // default
-    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
-
     // descend
-    getNameColumn().simulate('click');
+    wrapper.find('.ant-table-column-sorters').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Tom', 'Lucy', 'Jack', 'Jerry']);
-    expect(getNameColumn().prop('aria-sort')).toEqual('descending');
 
     // cancel sort
-    getNameColumn().simulate('click');
+    wrapper.find('.ant-table-column-sorters').simulate('click');
     expect(renderedNames(wrapper)).toEqual(['Jack', 'Lucy', 'Tom', 'Jerry']);
-    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
   });
 
   it('pagination back', () => {
@@ -682,14 +614,9 @@ describe('Table.sorter', () => {
       }),
     );
 
-    const getNameColumn = () => wrapper.find('th').at(0);
-
-    expect(getNameColumn().prop('aria-sort')).toEqual(undefined);
-
-    getNameColumn().simulate('click');
+    wrapper.find('.ant-table-column-sorters').simulate('click');
     expect(onChange.mock.calls[0][0].current).toBe(2);
     expect(onPageChange).not.toHaveBeenCalled();
-    expect(getNameColumn().prop('aria-sort')).toEqual('ascending');
   });
 
   it('should support onHeaderCell in sort column', () => {
diff --git a/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap b/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
index 08c4f730c0..7aa54aa963 100644
--- a/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
+++ b/components/table/__tests__/__snapshots__/Table.sorter.test.js.snap
@@ -96,7 +96,6 @@ exports[`Table.sorter should support defaultOrder in Column 1`] = `
               >
                 <tr>
                   <th
-                    aria-sort="ascending"
                     class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
                   >
                     <div
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index a99784e582..a69bedafd0 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -12778,7 +12778,6 @@ exports[`renders ./components/table/demo/head.md extend context correctly 1`] =
                     </div>
                   </th>
                   <th
-                    aria-sort="descending"
                     class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
                   >
                     <div
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index 299437abaf..5a33e70d63 100644
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -9898,7 +9898,6 @@ exports[`renders ./components/table/demo/head.md correctly 1`] = `
                     </div>
                   </th>
                   <th
-                    aria-sort="descending"
                     class="ant-table-cell ant-table-column-sort ant-table-column-has-sorters"
                   >
                     <div
diff --git a/components/table/hooks/useSorter.tsx b/components/table/hooks/useSorter.tsx
index 7758c530b6..c85e94af61 100644
--- a/components/table/hooks/useSorter.tsx
+++ b/components/table/hooks/useSorter.tsx
@@ -192,15 +192,6 @@ function injectSorter<RecordType>(
             }
           };
 
-          // Inform the screen-reader so it can tell the visually impaired user which column is sorted
-          if (sorterOrder) {
-            if (sorterOrder === 'ascend') {
-              cell['aria-sort'] = 'ascending';
-            } else {
-              cell['aria-sort'] = 'descending';
-            }
-          }
-
           cell.className = classNames(cell.className, `${prefixCls}-column-has-sorters`);
 
           return cell;
diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md
index ca3367f702..c5190a6f71 100644
--- a/components/time-picker/index.en-US.md
+++ b/components/time-picker/index.en-US.md
@@ -33,7 +33,9 @@ import moment from 'moment';
 | clearText | The clear tooltip of icon | string | clear |  |
 | defaultValue | To set default time | [moment](http://momentjs.com/) | - |  |
 | disabled | Determine whether the TimePicker is disabled | boolean | false |  |
-| disabledTime | To specify the time that cannot be selected | [DisabledTime](#DisabledTime) | - | 4.19.0 |
+| disabledHours | To specify the hours that cannot be selected | function() | - |  |
+| disabledMinutes | To specify the minutes that cannot be selected | function(selectedHour) | - |  |
+| disabledSeconds | To specify the seconds that cannot be selected | function(selectedHour, selectedMinute) | - |  |
 | format | To set the time format | string | `HH:mm:ss` |  |
 | getPopupContainer | To set the container of the floating layer, while the default is to create a div element in body | function(trigger) | - |  |
 | hideDisabledOptions | Whether hide the options that can not be selected | boolean | false |  |
@@ -42,7 +44,6 @@ import moment from 'moment';
 | minuteStep | Interval between minutes in picker | number | 1 |  |
 | open | Whether to popup panel | boolean | false |  |
 | placeholder | Display when there's no value | string \| \[string, string] | `Select a time` |  |
-| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | popupClassName | The className of panel | string | - |  |
 | popupStyle | The style of panel | CSSProperties | - |  |
 | renderExtraFooter | Called from time picker panel to render some addon to its bottom | () => ReactNode | - |  |
@@ -55,22 +56,12 @@ import moment from 'moment';
 | onOpenChange | A callback function which will be called while panel opening/closing | (open: boolean) => void | - |  |
 | onSelect | A callback function, executes when a value is selected | function(time: moment): void | - |  |
 
-#### DisabledTime
-
-```typescript
-type DisabledTime = (now: Moment) => {
-  disabledHours?: () => number[];
-  disabledMinutes?: (selectedHour: number) => number[];
-  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
-};
-```
-
 ## Methods
 
-| Name    | Description  | Version |
-| ------- | ------------ | ------- |
-| blur()  | Remove focus |         |
-| focus() | Get focus    |         |
+| Name | Description | Version |
+| --- | --- | --- |
+| blur() | Remove focus |  |
+| focus() | Get focus |  |
 
 ### RangePicker
 
@@ -78,22 +69,8 @@ Same props from [RangePicker](/components/date-picker/#RangePicker) of DatePicke
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| disabledTime | To specify the time that cannot be selected | [RangeDisabledTime](#RangeDisabledTime) | - | 4.19.0 |
 | order | Order start and end time | boolean | true | 4.1.0 |
 
-### RangeDisabledTime
-
-```typescript
-type RangeDisabledTime = (
-  now: Moment,
-  type = 'start' | 'end',
-) => {
-  disabledHours?: () => number[];
-  disabledMinutes?: (selectedHour: number) => number[];
-  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
-};
-```
-
 <style>
 .code-box-demo .ant-picker { margin: 0 8px 12px 0; }
 .ant-row-rtl .code-box-demo .ant-picker { margin: 0 0 12px 8px; }
diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md
index 1cf7df1d8a..1d2031c120 100644
--- a/components/time-picker/index.zh-CN.md
+++ b/components/time-picker/index.zh-CN.md
@@ -33,7 +33,9 @@ import moment from 'moment';
 | clearText | 清除按钮的提示文案 | string | clear |  |
 | defaultValue | 默认时间 | [moment](http://momentjs.com/) | - |  |
 | disabled | 禁用全部操作 | boolean | false |  |
-| disabledTime | 不可选择的时间 | [DisabledTime](#DisabledTime) | - | 4.19.0 |
+| disabledHours | 禁止选择部分小时选项 | function() | - |  |
+| disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | - |  |
+| disabledSeconds | 禁止选择部分秒选项 | function(selectedHour, selectedMinute) | - |  |
 | format | 展示的时间格式 | string | `HH:mm:ss` |  |
 | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - |  |
 | hideDisabledOptions | 隐藏禁止选择的选项 | boolean | false |  |
@@ -42,7 +44,6 @@ import moment from 'moment';
 | minuteStep | 分钟选项间隔 | number | 1 |  |
 | open | 面板是否打开 | boolean | false |  |
 | placeholder | 没有值的时候显示的内容 | string \| \[string, string] | `请选择时间` |  |
-| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | popupClassName | 弹出层类名 | string | - |  |
 | popupStyle | 弹出层样式对象 | object | - |  |
 | renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - |  |
@@ -54,44 +55,20 @@ import moment from 'moment';
 | onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | - |  |
 | onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - |  |
 
-#### DisabledTime
-
-```typescript
-type DisabledTime = (now: Moment) => {
-  disabledHours?: () => number[];
-  disabledMinutes?: (selectedHour: number) => number[];
-  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
-};
-```
-
 ## 方法
 
-| 名称    | 描述     | 版本 |
-| ------- | -------- | ---- |
-| blur()  | 移除焦点 |      |
-| focus() | 获取焦点 |      |
+| 名称 | 描述 | 版本 |
+| --- | --- | --- |
+| blur() | 移除焦点 |  |
+| focus() | 获取焦点 |  |
 
-## RangePicker
+### RangePicker
 
 属性与 DatePicker 的 [RangePicker](/components/date-picker/#RangePicker) 相同。还包含以下属性：
 
-| 参数         | 说明                 | 类型                                    | 默认值 | 版本   |
-| ------------ | -------------------- | --------------------------------------- | ------ | ------ |
-| disabledTime | 不可选择的时间       | [RangeDisabledTime](#RangeDisabledTime) | -      | 4.19.0 |
-| order        | 始末时间是否自动排序 | boolean                                 | true   | 4.1.0  |
-
-### RangeDisabledTime
-
-```typescript
-type RangeDisabledTime = (
-  now: Moment,
-  type = 'start' | 'end',
-) => {
-  disabledHours?: () => number[];
-  disabledMinutes?: (selectedHour: number) => number[];
-  disabledSeconds?: (selectedHour: number, selectedMinute: number) => number[];
-};
-```
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
 
 <style>
 .code-box-demo .ant-picker { margin: 0 8px 12px 0; }
diff --git a/components/tooltip/index.tsx b/components/tooltip/index.tsx
index 6c8e103390..77f6908b9c 100644
--- a/components/tooltip/index.tsx
+++ b/components/tooltip/index.tsx
@@ -4,7 +4,7 @@ import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import { TooltipProps as RcTooltipProps } from 'rc-tooltip/lib/Tooltip';
 import classNames from 'classnames';
 import { placements as Placements } from 'rc-tooltip/lib/placements';
-import getPlacements, { AdjustOverflow, PlacementsConfig } from '../_util/placements';
+import getPlacements, { AdjustOverflow, PlacementsConfig } from './placements';
 import { cloneElement, isValidElement } from '../_util/reactNode';
 import { ConfigContext } from '../config-provider';
 import { PresetColorType, PresetColorTypes } from '../_util/colors';
@@ -166,11 +166,11 @@ const Tooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
   const onPopupAlign = (domNode: HTMLElement, align: any) => {
     const placements: any = getTooltipPlacements();
     // 当前返回的位置
-    const placement = Object.keys(placements).find(
+    const placement = Object.keys(placements).filter(
       key =>
         placements[key].points[0] === align.points[0] &&
         placements[key].points[1] === align.points[1],
-    );
+    )[0];
     if (!placement) {
       return;
     }
diff --git a/components/_util/placements.tsx b/components/tooltip/placements.tsx
similarity index 97%
rename from components/_util/placements.tsx
rename to components/tooltip/placements.tsx
index eb4dead8a8..3fc9152268 100644
--- a/components/_util/placements.tsx
+++ b/components/tooltip/placements.tsx
@@ -42,7 +42,6 @@ export default function getPlacements(config: PlacementsConfig) {
     horizontalArrowShift = 16,
     verticalArrowShift = 8,
     autoAdjustOverflow,
-    arrowPointAtCenter,
   } = config;
   const placementMap: BuildInPlacements = {
     left: {
@@ -95,7 +94,7 @@ export default function getPlacements(config: PlacementsConfig) {
     },
   };
   Object.keys(placementMap).forEach(key => {
-    placementMap[key] = arrowPointAtCenter
+    placementMap[key] = config.arrowPointAtCenter
       ? {
           ...placementMap[key],
           overflow: getOverflowOptions(autoAdjustOverflow),
diff --git a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
index 3cc9b89f0f..a6122ed8a5 100644
--- a/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tree-select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1144,433 +1144,6 @@ exports[`renders ./components/tree-select/demo/multiple.md extend context correc
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/placement.md extend context correctly 1`] = `
-Array [
-  <div
-    class="ant-radio-group ant-radio-group-outline"
-  >
-    <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
-    >
-      <span
-        class="ant-radio-button ant-radio-button-checked"
-      >
-        <input
-          checked=""
-          class="ant-radio-button-input"
-          type="radio"
-          value="topLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="topRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topRight
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomRight
-      </span>
-    </label>
-  </div>,
-  <br />,
-  <br />,
-  <div
-    class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
-  >
-    <div
-      class="ant-select-selector"
-    >
-      <span
-        class="ant-select-selection-search"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="undefined_list"
-          aria-haspopup="listbox"
-          aria-owns="undefined_list"
-          autocomplete="off"
-          class="ant-select-selection-search-input"
-          role="combobox"
-          type="search"
-          value=""
-        />
-      </span>
-      <span
-        class="ant-select-selection-placeholder"
-      >
-        Please select
-      </span>
-    </div>
-    <div>
-      <div
-        class="ant-select-dropdown ant-tree-select-dropdown"
-        style="opacity:0;pointer-events:none;min-width:300px;max-height:400px;overflow:auto"
-      >
-        <div>
-          <div>
-            <div
-              class="ant-select-tree"
-              role="tree"
-            >
-              <div>
-                <input
-                  aria-label="for screen reader"
-                  disabled=""
-                  style="width:0;height:0;display:flex;overflow:hidden;opacity:0;border:0;padding:0;margin:0"
-                  value=""
-                />
-              </div>
-              <div
-                aria-hidden="true"
-                class="ant-select-tree-treenode"
-                style="position:absolute;pointer-events:none;visibility:hidden;height:0;overflow:hidden"
-              >
-                <div
-                  class="ant-select-tree-indent"
-                >
-                  <div
-                    class="ant-select-tree-indent-unit"
-                  />
-                </div>
-              </div>
-              <div
-                class="ant-select-tree-list"
-                style="position:relative"
-              >
-                <div
-                  class="ant-select-tree-list-holder"
-                  style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-                >
-                  <div>
-                    <div
-                      class="ant-select-tree-list-holder-inner"
-                      style="display:flex;flex-direction:column"
-                    >
-                      <div
-                        aria-grabbed="false"
-                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
-                        draggable="false"
-                      >
-                        <span
-                          aria-hidden="true"
-                          class="ant-select-tree-indent"
-                        />
-                        <span
-                          class="ant-select-tree-switcher ant-select-tree-switcher_open"
-                        >
-                          <span
-                            aria-label="caret-down"
-                            class="anticon anticon-caret-down ant-select-tree-switcher-icon"
-                            role="img"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              data-icon="caret-down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="0 0 1024 1024"
-                              width="1em"
-                            >
-                              <path
-                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                        <span
-                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-open"
-                          title="parent 1"
-                        >
-                          <span
-                            class="ant-select-tree-title"
-                          >
-                            parent 1
-                          </span>
-                        </span>
-                      </div>
-                      <div
-                        aria-grabbed="false"
-                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
-                        draggable="false"
-                      >
-                        <span
-                          aria-hidden="true"
-                          class="ant-select-tree-indent"
-                        >
-                          <span
-                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
-                          />
-                        </span>
-                        <span
-                          class="ant-select-tree-switcher ant-select-tree-switcher_open"
-                        >
-                          <span
-                            aria-label="caret-down"
-                            class="anticon anticon-caret-down ant-select-tree-switcher-icon"
-                            role="img"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              data-icon="caret-down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="0 0 1024 1024"
-                              width="1em"
-                            >
-                              <path
-                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                        <span
-                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-open"
-                          title="parent 1-0"
-                        >
-                          <span
-                            class="ant-select-tree-title"
-                          >
-                            parent 1-0
-                          </span>
-                        </span>
-                      </div>
-                      <div
-                        aria-grabbed="false"
-                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open"
-                        draggable="false"
-                      >
-                        <span
-                          aria-hidden="true"
-                          class="ant-select-tree-indent"
-                        >
-                          <span
-                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
-                          />
-                          <span
-                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start"
-                          />
-                        </span>
-                        <span
-                          class="ant-select-tree-switcher ant-select-tree-switcher-noop"
-                        />
-                        <span
-                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
-                          title="leaf1"
-                        >
-                          <span
-                            class="ant-select-tree-title"
-                          >
-                            leaf1
-                          </span>
-                        </span>
-                      </div>
-                      <div
-                        aria-grabbed="false"
-                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
-                        draggable="false"
-                      >
-                        <span
-                          aria-hidden="true"
-                          class="ant-select-tree-indent"
-                        >
-                          <span
-                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
-                          />
-                          <span
-                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start"
-                          />
-                        </span>
-                        <span
-                          class="ant-select-tree-switcher ant-select-tree-switcher-noop"
-                        />
-                        <span
-                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
-                          title="leaf2"
-                        >
-                          <span
-                            class="ant-select-tree-title"
-                          >
-                            leaf2
-                          </span>
-                        </span>
-                      </div>
-                      <div
-                        aria-grabbed="false"
-                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
-                        draggable="false"
-                      >
-                        <span
-                          aria-hidden="true"
-                          class="ant-select-tree-indent"
-                        >
-                          <span
-                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
-                          />
-                        </span>
-                        <span
-                          class="ant-select-tree-switcher ant-select-tree-switcher_open"
-                        >
-                          <span
-                            aria-label="caret-down"
-                            class="anticon anticon-caret-down ant-select-tree-switcher-icon"
-                            role="img"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              data-icon="caret-down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="0 0 1024 1024"
-                              width="1em"
-                            >
-                              <path
-                                d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"
-                              />
-                            </svg>
-                          </span>
-                        </span>
-                        <span
-                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-open"
-                          title="parent 1-1"
-                        >
-                          <span
-                            class="ant-select-tree-title"
-                          >
-                            parent 1-1
-                          </span>
-                        </span>
-                      </div>
-                      <div
-                        aria-grabbed="false"
-                        class="ant-select-tree-treenode ant-select-tree-treenode-switcher-open ant-select-tree-treenode-leaf-last"
-                        draggable="false"
-                      >
-                        <span
-                          aria-hidden="true"
-                          class="ant-select-tree-indent"
-                        >
-                          <span
-                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-start ant-select-tree-indent-unit-end"
-                          />
-                          <span
-                            class="ant-select-tree-indent-unit ant-select-tree-indent-unit-end"
-                          />
-                        </span>
-                        <span
-                          class="ant-select-tree-switcher ant-select-tree-switcher-noop"
-                        />
-                        <span
-                          class="ant-select-tree-node-content-wrapper ant-select-tree-node-content-wrapper-normal"
-                          title=""
-                        >
-                          <span
-                            class="ant-select-tree-title"
-                          >
-                            <b
-                              style="color:#08c"
-                            >
-                              leaf3
-                            </b>
-                          </span>
-                        </span>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <span
-      aria-hidden="true"
-      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
-      unselectable="on"
-    >
-      <span
-        aria-label="down"
-        class="anticon anticon-down ant-select-suffix"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="down"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-          />
-        </svg>
-      </span>
-    </span>
-  </div>,
-]
-`;
-
 exports[`renders ./components/tree-select/demo/suffix.md extend context correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
diff --git a/components/tree-select/__tests__/__snapshots__/demo.test.js.snap b/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
index bb96ae24e1..78a8345be4 100644
--- a/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tree-select/__tests__/__snapshots__/demo.test.js.snap
@@ -257,148 +257,6 @@ exports[`renders ./components/tree-select/demo/multiple.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/tree-select/demo/placement.md correctly 1`] = `
-Array [
-  <div
-    class="ant-radio-group ant-radio-group-outline"
-  >
-    <label
-      class="ant-radio-button-wrapper ant-radio-button-wrapper-checked"
-    >
-      <span
-        class="ant-radio-button ant-radio-button-checked"
-      >
-        <input
-          checked=""
-          class="ant-radio-button-input"
-          type="radio"
-          value="topLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="topRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        topRight
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomLeft"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomLeft
-      </span>
-    </label>
-    <label
-      class="ant-radio-button-wrapper"
-    >
-      <span
-        class="ant-radio-button"
-      >
-        <input
-          class="ant-radio-button-input"
-          type="radio"
-          value="bottomRight"
-        />
-        <span
-          class="ant-radio-button-inner"
-        />
-      </span>
-      <span>
-        bottomRight
-      </span>
-    </label>
-  </div>,
-  <br />,
-  <br />,
-  <div
-    class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
-  >
-    <div
-      class="ant-select-selector"
-    >
-      <span
-        class="ant-select-selection-search"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="undefined_list"
-          aria-haspopup="listbox"
-          aria-owns="undefined_list"
-          autocomplete="off"
-          class="ant-select-selection-search-input"
-          role="combobox"
-          type="search"
-          value=""
-        />
-      </span>
-      <span
-        class="ant-select-selection-placeholder"
-      >
-        Please select
-      </span>
-    </div>
-    <span
-      aria-hidden="true"
-      class="ant-select-arrow"
-      style="user-select:none;-webkit-user-select:none"
-      unselectable="on"
-    >
-      <span
-        aria-label="down"
-        class="anticon anticon-down ant-select-suffix"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="down"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
-          />
-        </svg>
-      </span>
-    </span>
-  </div>,
-]
-`;
-
 exports[`renders ./components/tree-select/demo/suffix.md correctly 1`] = `
 <div
   class="ant-select ant-tree-select ant-select-single ant-select-allow-clear ant-select-show-arrow ant-select-show-search"
diff --git a/components/tree-select/demo/placement.md b/components/tree-select/demo/placement.md
deleted file mode 100644
index a4cc32249c..0000000000
--- a/components/tree-select/demo/placement.md
+++ /dev/null
@@ -1,64 +0,0 @@
----
-order: 8
-title:
-  zh-CN: 弹出位置
-  en-US: Placement
----
-
-## zh-CN
-
-可以通过 `placement` 手动指定弹出的位置。
-
-## en-US
-
-You can manually specify the position of the popup via `placement`.
-
-```jsx
-import React, { useState } from 'react';
-import { TreeSelect, Radio } from 'antd';
-
-const { TreeNode } = TreeSelect;
-
-const Demo = () => {
-  const [placement, SetPlacement] = useState('topLeft');
-
-  const placementChange = e => {
-    SetPlacement(e.target.value);
-  };
-
-  return (
-    <>
-      <Radio.Group value={placement} onChange={placementChange}>
-        <Radio.Button value="topLeft">topLeft</Radio.Button>
-        <Radio.Button value="topRight">topRight</Radio.Button>
-        <Radio.Button value="bottomLeft">bottomLeft</Radio.Button>
-        <Radio.Button value="bottomRight">bottomRight</Radio.Button>
-      </Radio.Group>
-      <br />
-      <br />
-
-      <TreeSelect
-        showSearch
-        dropdownStyle={{ maxHeight: 400, overflow: 'auto', minWidth: 300 }}
-        placeholder="Please select"
-        dropdownMatchSelectWidth={false}
-        placement={placement}
-        allowClear
-        treeDefaultExpandAll
-      >
-        <TreeNode value="parent 1" title="parent 1">
-          <TreeNode value="parent 1-0" title="parent 1-0">
-            <TreeNode value="leaf1" title="leaf1" />
-            <TreeNode value="leaf2" title="leaf2" />
-          </TreeNode>
-          <TreeNode value="parent 1-1" title="parent 1-1">
-            <TreeNode value="leaf3" title={<b style={{ color: '#08c' }}>leaf3</b>} />
-          </TreeNode>
-        </TreeNode>
-      </TreeSelect>
-    </>
-  );
-};
-
-ReactDOM.render(<Demo />, mountNode);
-```
diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md
index 26b98c41ba..e6bb16b784 100644
--- a/components/tree-select/index.en-US.md
+++ b/components/tree-select/index.en-US.md
@@ -37,7 +37,6 @@ Tree selection control.
 | multiple | Support multiple or not, will be `true` when enable `treeCheckable` | boolean | false |  |
 | notFoundContent | Specify content to show when no result matches | ReactNode | `Not Found` |  |
 | placeholder | Placeholder of the select input | string | - |  |
-| placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | searchValue | Work with `onSearch` to make search value controlled | string | - |  |
 | showArrow | Whether to show the `suffixIcon`，when single selection mode, default `true` | boolean | - |  |
 | showCheckedStrategy | The way show selected item in box when `treeCheckable` set. **Default:** just show child nodes. **`TreeSelect.SHOW_ALL`:** show all checked treeNodes (include parent treeNode). **`TreeSelect.SHOW_PARENT`:** show checked treeNodes (just show parent treeNode) | `TreeSelect.SHOW_ALL` \| `TreeSelect.SHOW_PARENT` \| `TreeSelect.SHOW_CHILD` | `TreeSelect.SHOW_CHILD` |  |
diff --git a/components/tree-select/index.tsx b/components/tree-select/index.tsx
index 16f3f95a4a..3a592217b5 100644
--- a/components/tree-select/index.tsx
+++ b/components/tree-select/index.tsx
@@ -16,7 +16,7 @@ import { AntTreeNodeProps, TreeProps } from '../tree';
 import getIcons from '../select/utils/iconUtil';
 import renderSwitcherIcon from '../tree/utils/iconUtil';
 import SizeContext, { SizeType } from '../config-provider/SizeContext';
-import { getTransitionName, getTransitionDirection, SelectCommonPlacement } from '../_util/motion';
+import { getTransitionName } from '../_util/motion';
 
 type RawValue = string | number;
 
@@ -43,7 +43,6 @@ export interface TreeSelectProps<
   > {
   suffixIcon?: React.ReactNode;
   size?: SizeType;
-  placement?: SelectCommonPlacement;
   bordered?: boolean;
   treeLine?: TreeProps['showLine'];
 }
@@ -58,7 +57,6 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
     multiple,
     listHeight = 256,
     listItemHeight = 26,
-    placement,
     notFoundContent,
     switcherIcon,
     treeLine,
@@ -121,16 +119,6 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
     'switcherIcon',
   ]);
 
-  // ===================== Placement =====================
-  const getPlacement = () => {
-    if (placement !== undefined) {
-      return placement;
-    }
-    return direction === 'rtl'
-      ? ('bottomRight' as SelectCommonPlacement)
-      : ('bottomLeft' as SelectCommonPlacement);
-  };
-
   const mergedSize = customizeSize || size;
   const mergedClassName = classNames(
     !customizePrefixCls && treeSelectPrefixCls,
@@ -160,7 +148,6 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
       treeLine={!!treeLine}
       inputIcon={suffixIcon}
       multiple={multiple}
-      placement={getPlacement()}
       removeIcon={removeIcon}
       clearIcon={clearIcon}
       switcherIcon={(nodeProps: AntTreeNodeProps) =>
@@ -172,11 +159,7 @@ const InternalTreeSelect = <OptionType extends BaseOptionType | DefaultOptionTyp
       treeMotion={null}
       dropdownClassName={mergedDropdownClassName}
       choiceTransitionName={getTransitionName(rootPrefixCls, '', choiceTransitionName)}
-      transitionName={getTransitionName(
-        rootPrefixCls,
-        getTransitionDirection(placement),
-        transitionName,
-      )}
+      transitionName={getTransitionName(rootPrefixCls, 'slide-up', transitionName)}
     />
   );
 };
diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md
index 70c63e0b49..43f0c08499 100644
--- a/components/tree-select/index.zh-CN.md
+++ b/components/tree-select/index.zh-CN.md
@@ -38,7 +38,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 | multiple | 支持多选（当设置 treeCheckable 时自动变为 true） | boolean | false |  |
 | notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | `Not Found` |  |
 | placeholder | 选择框默认文字 | string | - |  |
-| placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | searchValue | 搜索框的值，可以通过 `onSearch` 获取用户输入 | string | - |  |
 | showArrow | 是否显示 `suffixIcon`，单选模式下默认 `true` | boolean | - |  |
 | showCheckedStrategy | 配置 `treeCheckable` 时，定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点)。`TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时)。 默认只显示子节点 | `TreeSelect.SHOW_ALL` \| `TreeSelect.SHOW_PARENT` \| `TreeSelect.SHOW_CHILD` | `TreeSelect.SHOW_CHILD` |  |
diff --git a/package.json b/package.json
index c457fb358b..10fae782eb 100644
--- a/package.json
+++ b/package.json
@@ -135,7 +135,7 @@
     "rc-motion": "^2.4.4",
     "rc-notification": "~4.5.7",
     "rc-pagination": "~3.1.9",
-    "rc-picker": "~2.6.0",
+    "rc-picker": "~2.5.17",
     "rc-progress": "~3.2.1",
     "rc-rate": "~2.9.0",
     "rc-resize-observer": "^1.2.0",
diff --git a/site/theme/template/Content/MainContent.jsx b/site/theme/template/Content/MainContent.jsx
index 2024068314..6c776b0767 100644
--- a/site/theme/template/Content/MainContent.jsx
+++ b/site/theme/template/Content/MainContent.jsx
@@ -523,7 +523,7 @@ class MainContent extends Component {
             </section>
             {componentPage && (
               <div className="fixed-widgets">
-                <Dropdown overlay={this.getThemeSwitchMenu()} placement="top">
+                <Dropdown overlay={this.getThemeSwitchMenu()} placement="topCenter">
                   <Avatar className="fixed-widgets-avatar" size={44} icon={<ThemeIcon />} />
                 </Dropdown>
               </div>

From d9656eb12c596bcecd877b8417bfe610aff2acc4 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sun, 30 Jan 2022 16:09:35 +0800
Subject: [PATCH 15/33] chore(deps): update dependency eslint-plugin-jest to
 v26 (#33899)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 10fae782eb..4b9a1d9baf 100644
--- a/package.json
+++ b/package.json
@@ -206,7 +206,7 @@
     "eslint-plugin-babel": "^5.3.0",
     "eslint-plugin-compat": "^4.0.0",
     "eslint-plugin-import": "^2.21.1",
-    "eslint-plugin-jest": "^25.0.1",
+    "eslint-plugin-jest": "^26.0.0",
     "eslint-plugin-jsx-a11y": "^6.2.1",
     "eslint-plugin-markdown": "^2.0.0",
     "eslint-plugin-react": "^7.20.6",

From ebc0c1fbc509a9d4cd686e9c4b0b76cc2590bd75 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Sun, 30 Jan 2022 16:09:53 +0800
Subject: [PATCH 16/33] chore(deps): update dependency
 @types/jest-environment-puppeteer to v5 (#33898)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4b9a1d9baf..0c765ab965 100644
--- a/package.json
+++ b/package.json
@@ -166,7 +166,7 @@
     "@types/gtag.js": "^0.0.8",
     "@types/jest": "^27.0.0",
     "@types/jest-axe": "^3.5.3",
-    "@types/jest-environment-puppeteer": "^4.4.1",
+    "@types/jest-environment-puppeteer": "^5.0.0",
     "@types/jest-image-snapshot": "^4.1.0",
     "@types/lodash": "^4.14.139",
     "@types/puppeteer": "^5.4.0",

From 117645443729d479b892f82158ec6590db5da22b Mon Sep 17 00:00:00 2001
From: Amour1688 <lcz_1996@foxmail.com>
Date: Mon, 31 Jan 2022 12:04:47 +0800
Subject: [PATCH 17/33] types: export DatePickRef and RangePickerRef (close
 #33417) (#33901)

---
 .../date-picker/__tests__/type.test.tsx       | 34 +++++++++++++++++++
 .../date-picker/generatePicker/interface.ts   | 18 ++++++++++
 2 files changed, 52 insertions(+)
 create mode 100644 components/date-picker/generatePicker/interface.ts

diff --git a/components/date-picker/__tests__/type.test.tsx b/components/date-picker/__tests__/type.test.tsx
index ad8c3d8a6e..8761f6a6bb 100644
--- a/components/date-picker/__tests__/type.test.tsx
+++ b/components/date-picker/__tests__/type.test.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
+import { Moment } from 'moment';
 import DatePicker from '..';
+import { DatePickRef, RangePickerRef } from '../generatePicker/interface';
 
 describe('DatePicker.typescript', () => {
   it('DatePicker ref methods', () => {
@@ -13,6 +15,23 @@ describe('DatePicker.typescript', () => {
     );
     expect(datePicker).toBeTruthy();
   });
+
+  // https://github.com/ant-design/ant-design/issues/33417
+  it('DatePicker ref methods with forwardRef', () => {
+    const MyDatePicker = React.forwardRef((props, ref: DatePickRef<Moment>) => (
+      <DatePicker {...props} ref={ref} />
+    ));
+    const datePicker = (
+      <MyDatePicker
+        ref={picker => {
+          picker?.focus();
+          picker?.blur();
+        }}
+      />
+    );
+    expect(datePicker).toBeTruthy();
+  });
+
   it('RangePicker ref methods', () => {
     const rangePicker = (
       <DatePicker.RangePicker
@@ -24,4 +43,19 @@ describe('DatePicker.typescript', () => {
     );
     expect(rangePicker).toBeTruthy();
   });
+
+  it('RangePicker ref methods with forwardRef', () => {
+    const MyRangePicker = React.forwardRef((props, ref: RangePickerRef<Moment>) => (
+      <DatePicker.RangePicker {...props} ref={ref} />
+    ));
+    const datePicker = (
+      <MyRangePicker
+        ref={picker => {
+          picker?.focus();
+          picker?.blur();
+        }}
+      />
+    );
+    expect(datePicker).toBeTruthy();
+  });
 });
diff --git a/components/date-picker/generatePicker/interface.ts b/components/date-picker/generatePicker/interface.ts
new file mode 100644
index 0000000000..c0771f2e0c
--- /dev/null
+++ b/components/date-picker/generatePicker/interface.ts
@@ -0,0 +1,18 @@
+import type { ComponentClass, ForwardedRef, Component } from 'react';
+import { PickerProps, RangePickerProps } from '.';
+
+export interface CommonPickerMethods {
+  focus: () => void;
+  blur: () => void;
+}
+
+export interface PickerComponentClass<P = {}, S = unknown> extends ComponentClass<P, S> {
+  new (...args: ConstructorParameters<ComponentClass<P, S>>): InstanceType<ComponentClass<P, S>> &
+    CommonPickerMethods;
+}
+
+export type PickerRef<P> = ForwardedRef<Component<P> & CommonPickerMethods>;
+
+export type DatePickRef<DateType> = PickerRef<PickerProps<DateType>>;
+
+export type RangePickerRef<DateType> = PickerRef<RangePickerProps<DateType>>;

From 17d6a5e407b6f63706d310343ea4aab43d93cfc5 Mon Sep 17 00:00:00 2001
From: Dawnlck <chaokai.lck@antgroup.com>
Date: Mon, 7 Feb 2022 15:28:46 +0800
Subject: [PATCH 18/33] fix(popover): fix the problem that popover display when
 the props'content is empty (#33835)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* fix(popover): fix the problem that popover display when the props'content is empty

* refactor(popover): 更新代码判断逻辑

* test(popover): 添加popover的test

* feat(popover): 更新snapshot

* feat(popover): 更新剩余的snapshot
---
 .../__snapshots__/components.test.js.snap     | 36 ++++---------------
 .../__snapshots__/index.test.js.snap          |  2 --
 components/popover/__tests__/index.test.js    | 18 ++++++++--
 components/popover/index.tsx                  | 15 ++++----
 4 files changed, 31 insertions(+), 40 deletions(-)

diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index ac029d1d9b..7817ae165f 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -18555,11 +18555,7 @@ exports[`ConfigProvider components Popover configProvider 1`] = `
         <div
           class="config-popover-inner"
           role="tooltip"
-        >
-          <div
-            class="config-popover-inner-content"
-          />
-        </div>
+        />
       </div>
     </div>
   </div>
@@ -18591,11 +18587,7 @@ exports[`ConfigProvider components Popover configProvider componentSize large 1`
         <div
           class="config-popover-inner"
           role="tooltip"
-        >
-          <div
-            class="config-popover-inner-content"
-          />
-        </div>
+        />
       </div>
     </div>
   </div>
@@ -18627,11 +18619,7 @@ exports[`ConfigProvider components Popover configProvider componentSize middle 1
         <div
           class="config-popover-inner"
           role="tooltip"
-        >
-          <div
-            class="config-popover-inner-content"
-          />
-        </div>
+        />
       </div>
     </div>
   </div>
@@ -18663,11 +18651,7 @@ exports[`ConfigProvider components Popover configProvider virtual and dropdownMa
         <div
           class="ant-popover-inner"
           role="tooltip"
-        >
-          <div
-            class="ant-popover-inner-content"
-          />
-        </div>
+        />
       </div>
     </div>
   </div>
@@ -18699,11 +18683,7 @@ exports[`ConfigProvider components Popover normal 1`] = `
         <div
           class="ant-popover-inner"
           role="tooltip"
-        >
-          <div
-            class="ant-popover-inner-content"
-          />
-        </div>
+        />
       </div>
     </div>
   </div>
@@ -18735,11 +18715,7 @@ exports[`ConfigProvider components Popover prefixCls 1`] = `
         <div
           class="prefix-Popover-inner"
           role="tooltip"
-        >
-          <div
-            class="prefix-Popover-inner-content"
-          />
-        </div>
+        />
       </div>
     </div>
   </div>
diff --git a/components/popover/__tests__/__snapshots__/index.test.js.snap b/components/popover/__tests__/__snapshots__/index.test.js.snap
index b5cc90b20e..33309db41b 100644
--- a/components/popover/__tests__/__snapshots__/index.test.js.snap
+++ b/components/popover/__tests__/__snapshots__/index.test.js.snap
@@ -1,7 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Popover handles empty title/content props safely 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"></div></div></div>"`;
-
 exports[`Popover should be rendered correctly in RTL direction 1`] = `
 Array [
   <span
diff --git a/components/popover/__tests__/index.test.js b/components/popover/__tests__/index.test.js
index ec75b851a3..9cc1a0e8e3 100644
--- a/components/popover/__tests__/index.test.js
+++ b/components/popover/__tests__/index.test.js
@@ -54,8 +54,22 @@ describe('Popover', () => {
     popover.find('span').simulate('click');
 
     const popup = ref.current.getPopupDomNode();
-    expect(popup).not.toBe(null);
-    expect(popup.innerHTML).toMatchSnapshot();
+    expect(popup).toBe(null);
+  });
+
+  it('should not render popover when the title & content props is empty', () => {
+    const ref = React.createRef();
+
+    const popover = mount(
+      <Popover trigger="click" ref={ref} content="">
+        <span>show me your code</span>
+      </Popover>,
+    );
+
+    popover.find('span').simulate('click');
+    const popup = ref.current.getPopupDomNode();
+
+    expect(popup).toBe(null);
   });
 
   it('props#overlay do not warn anymore', () => {
diff --git a/components/popover/index.tsx b/components/popover/index.tsx
index 645141d2fa..a02a1b635a 100644
--- a/components/popover/index.tsx
+++ b/components/popover/index.tsx
@@ -13,12 +13,15 @@ const Popover = React.forwardRef<unknown, PopoverProps>(
   ({ prefixCls: customizePrefixCls, title, content, ...otherProps }, ref) => {
     const { getPrefixCls } = React.useContext(ConfigContext);
 
-    const getOverlay = (prefixCls: string) => (
-      <>
-        {title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
-        <div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div>
-      </>
-    );
+    const getOverlay = (prefixCls: string) => {
+      if (!title && !content) return undefined;
+      return (
+        <>
+          {title && <div className={`${prefixCls}-title`}>{getRenderPropValue(title)}</div>}
+          <div className={`${prefixCls}-inner-content`}>{getRenderPropValue(content)}</div>
+        </>
+      );
+    };
 
     const prefixCls = getPrefixCls('popover', customizePrefixCls);
     const rootPrefixCls = getPrefixCls();

From 6b391bac748e1e9482c4dcdb5d814c398845e508 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Mon, 7 Feb 2022 19:20:26 +0800
Subject: [PATCH 19/33] =?UTF-8?q?docs(=E2=9C=A8):=20release=204.18.6=20(#3?=
 =?UTF-8?q?3948)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* docs(✨): release 4.18.6

* chore: update version

* docs: add date
---
 CHANGELOG.en-US.md | 13 +++++++++++++
 CHANGELOG.zh-CN.md | 13 +++++++++++++
 package.json       |  2 +-
 3 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index eab04dc53f..6cfd0c1e29 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,19 @@ timeline: true
 
 ---
 
+## 4.18.6
+
+`2022-02-07`
+
+- 🐞 Hide the empty popover when the props' content is undefined or null. [#33835](https://github.com/ant-design/ant-design/pull/33835) [@DawnLck](https://github.com/DawnLck)
+- 🐞 Fix DatePicker `ref` TypeScript definition. [#33901](https://github.com/ant-design/ant-design/pull/33901) [@Amour1688](https://github.com/Amour1688)
+- 🐞 Fix the problem that tooltip didn't show on ellipsis with rows larger than 1. [#33875](https://github.com/ant-design/ant-design/pull/33875) [@MadCcc](https://github.com/MadCcc)
+- Button
+  - 🐞 Fix the issue that block not work when small size. [#33878](https://github.com/ant-design/ant-design/pull/33878) [@tangjinzhou](https://github.com/tangjinzhou)
+  - 🐞 Clear timer of delayed loading after Button is unmounted. [#33858](https://github.com/ant-design/ant-design/pull/33858) [@mrwd2009](https://github.com/mrwd2009)
+- 🐞 Fix the problem that Tooltip cannot be displayed when it is used with switch in loading state. [#33860](https://github.com/ant-design/ant-design/pull/33860) [@MadCcc](https://github.com/MadCcc)
+- 🐞 fix the upload button sometimes flashes after the upload button is changed from hidden to display when the upload component is a picture-card type. [#33820](https://github.com/ant-design/ant-design/pull/33820) [@credred](https://github.com/credred)
+
 ## 4.18.5
 
 `2022-01-24`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 14f0ef77e0..e64dacdbdf 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,19 @@ timeline: true
 
 ---
 
+## 4.18.6
+
+`2022-02-07`
+
+- 🐞 修复当传入的内容参数和标题参数都为空时，气泡组件仍旧会渲染空气泡的问题。[#33835](https://github.com/ant-design/ant-design/pull/33835) [@DawnLck](https://github.com/DawnLck)
+- 🐞 修复 DatePicker `ref` TypeScript 定义。[#33901](https://github.com/ant-design/ant-design/pull/33901) [@Amour1688](https://github.com/Amour1688)
+- 🐞 修复 Typography ellipsis 行数大于 1 时 Tooltip 不显示的问题。[#33875](https://github.com/ant-design/ant-design/pull/33875) [@MadCcc](https://github.com/MadCcc)
+- Button
+  - 🐞 修复小尺寸下 Button 组件 block 属性无效的问题[#33878](https://github.com/ant-design/ant-design/pull/33878) [@tangjinzhou](https://github.com/tangjinzhou)
+  - 🐞 Button 组件卸载后，清理延迟加载定时器。[#33858](https://github.com/ant-design/ant-design/pull/33858) [@mrwd2009](https://github.com/mrwd2009)
+- 🐞 修复 Tooltip 套在 loading 状态的 switch 上时无法正常显示的问题。[#33860](https://github.com/ant-design/ant-design/pull/33860) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复 Upload 组件为 picture-card 类型时，由隐藏上传按钮改为显示后，上传按钮有时会闪烁的问题。[#33820](https://github.com/ant-design/ant-design/pull/33820) [@credred](https://github.com/credred)
+
 ## 4.18.5
 
 `2022-01-24`
diff --git a/package.json b/package.json
index 0c765ab965..d6d6ff7d33 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "4.18.5",
+  "version": "4.18.6",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [

From a38b1e4ca58f9006ac9fb50d695f38293402d073 Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Tue, 8 Feb 2022 09:52:00 +0800
Subject: [PATCH 20/33] fix: custom color should work on antd icons (#33951)

---
 components/timeline/TimelineItem.tsx          |  7 ++--
 .../__snapshots__/demo-extend.test.ts.snap    | 40 ++++++++++++++++++-
 .../__tests__/__snapshots__/demo.test.js.snap | 40 ++++++++++++++++++-
 components/timeline/demo/color.md             |  4 ++
 4 files changed, 85 insertions(+), 6 deletions(-)

diff --git a/components/timeline/TimelineItem.tsx b/components/timeline/TimelineItem.tsx
index 78ac488b4b..de1e169cd1 100644
--- a/components/timeline/TimelineItem.tsx
+++ b/components/timeline/TimelineItem.tsx
@@ -47,14 +47,13 @@ const TimelineItem: React.FC<TimelineItemProps> = ({
     [`${prefixCls}-item-head-${color}`]: true,
   });
 
+  const customColor = /blue|red|green|gray/.test(color || '') ? undefined : color;
+
   return (
     <li {...restProps} className={itemClassName}>
       {label && <div className={`${prefixCls}-item-label`}>{label}</div>}
       <div className={`${prefixCls}-item-tail`} />
-      <div
-        className={dotClassName}
-        style={{ borderColor: /blue|red|green|gray/.test(color || '') ? undefined : color }}
-      >
+      <div className={dotClassName} style={{ borderColor: customColor, color: customColor }}>
         {dot}
       </div>
       <div className={`${prefixCls}-item-content`}>{children}</div>
diff --git a/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap
index 36921c182d..0932dfbb2c 100644
--- a/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/timeline/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -316,7 +316,7 @@ exports[`renders ./components/timeline/demo/color.md extend context correctly 1`
     </div>
   </li>
   <li
-    class="ant-timeline-item ant-timeline-item-last"
+    class="ant-timeline-item"
   >
     <div
       class="ant-timeline-item-tail"
@@ -338,6 +338,44 @@ exports[`renders ./components/timeline/demo/color.md extend context correctly 1`
       </p>
     </div>
   </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-last"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-#00CCFF"
+      style="border-color:#00CCFF;color:#00CCFF"
+    >
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="ant-timeline-item-content"
+    >
+      <p>
+        Custom color testing
+      </p>
+    </div>
+  </li>
 </ul>
 `;
 
diff --git a/components/timeline/__tests__/__snapshots__/demo.test.js.snap b/components/timeline/__tests__/__snapshots__/demo.test.js.snap
index d6d89848c1..3f16cbf7e2 100644
--- a/components/timeline/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/timeline/__tests__/__snapshots__/demo.test.js.snap
@@ -316,7 +316,7 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
     </div>
   </li>
   <li
-    class="ant-timeline-item ant-timeline-item-last"
+    class="ant-timeline-item"
   >
     <div
       class="ant-timeline-item-tail"
@@ -338,6 +338,44 @@ exports[`renders ./components/timeline/demo/color.md correctly 1`] = `
       </p>
     </div>
   </li>
+  <li
+    class="ant-timeline-item ant-timeline-item-last"
+  >
+    <div
+      class="ant-timeline-item-tail"
+    />
+    <div
+      class="ant-timeline-item-head ant-timeline-item-head-custom ant-timeline-item-head-#00CCFF"
+      style="border-color:#00CCFF;color:#00CCFF"
+    >
+      <span
+        aria-label="smile"
+        class="anticon anticon-smile"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="smile"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M288 421a48 48 0 1096 0 48 48 0 10-96 0zm352 0a48 48 0 1096 0 48 48 0 10-96 0zM512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm263 711c-34.2 34.2-74 61-118.3 79.8C611 874.2 562.3 884 512 884c-50.3 0-99-9.8-144.8-29.2A370.4 370.4 0 01248.9 775c-34.2-34.2-61-74-79.8-118.3C149.8 611 140 562.3 140 512s9.8-99 29.2-144.8A370.4 370.4 0 01249 248.9c34.2-34.2 74-61 118.3-79.8C413 149.8 461.7 140 512 140c50.3 0 99 9.8 144.8 29.2A370.4 370.4 0 01775.1 249c34.2 34.2 61 74 79.8 118.3C874.2 413 884 461.7 884 512s-9.8 99-29.2 144.8A368.89 368.89 0 01775 775zM664 533h-48.1c-4.2 0-7.8 3.2-8.1 7.4C604 589.9 562.5 629 512 629s-92.1-39.1-95.8-88.6c-.3-4.2-3.9-7.4-8.1-7.4H360a8 8 0 00-8 8.4c4.4 84.3 74.5 151.6 160 151.6s155.6-67.3 160-151.6a8 8 0 00-8-8.4z"
+          />
+        </svg>
+      </span>
+    </div>
+    <div
+      class="ant-timeline-item-content"
+    >
+      <p>
+        Custom color testing
+      </p>
+    </div>
+  </li>
 </ul>
 `;
 
diff --git a/components/timeline/demo/color.md b/components/timeline/demo/color.md
index adfd03b480..8796b1a72f 100644
--- a/components/timeline/demo/color.md
+++ b/components/timeline/demo/color.md
@@ -15,6 +15,7 @@ Set the color of circles. `green` means completed or success status, `red` means
 
 ```jsx
 import { Timeline } from 'antd';
+import { SmileOutlined } from '@ant-design/icons';
 
 ReactDOM.render(
   <Timeline>
@@ -40,6 +41,9 @@ ReactDOM.render(
       <p>Technical testing 2</p>
       <p>Technical testing 3 2015-09-01</p>
     </Timeline.Item>
+    <Timeline.Item color="#00CCFF" dot={<SmileOutlined />}>
+      <p>Custom color testing</p>
+    </Timeline.Item>
   </Timeline>,
   mountNode,
 );

From 29d340724e1f617b1d24c4f31317ac82e2a77835 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Wed, 9 Feb 2022 18:03:34 +0800
Subject: [PATCH 21/33] chore(deps): update dependency react-dnd-html5-backend
 to v15 (#33941)

Co-authored-by: Renovate Bot <bot@renovateapp.com>
---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index d6d6ff7d33..4519534c91 100644
--- a/package.json
+++ b/package.json
@@ -248,7 +248,7 @@
     "react-color": "^2.17.3",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dnd": "^14.0.1",
-    "react-dnd-html5-backend": "^14.0.0",
+    "react-dnd-html5-backend": "^15.0.0",
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3",
     "react-fast-marquee": "^1.2.1",

From 745ebf2d84b57ffa17bec6fda4f5bb7e014b5204 Mon Sep 17 00:00:00 2001
From: Di Wu <di@gridx.cn>
Date: Wed, 9 Feb 2022 18:07:52 +0800
Subject: [PATCH 22/33] fix: Exception in enter key callback on editable or
 copyable Paragraph (#33976)

* fix: Exception on enter key callback

* Move spyOn position
---
 components/typography/Base/index.tsx          |  8 ++---
 .../__tests__/enter-key-callback.test.tsx     | 32 +++++++++++++++++++
 2 files changed, 36 insertions(+), 4 deletions(-)
 create mode 100644 components/typography/__tests__/enter-key-callback.test.tsx

diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx
index c6eea42bf8..70d8c99575 100644
--- a/components/typography/Base/index.tsx
+++ b/components/typography/Base/index.tsx
@@ -168,8 +168,8 @@ const Base = React.forwardRef((props: InternalBlockProps, ref: any) => {
     }
   }, [editing]);
 
-  const onEditClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.preventDefault();
+  const onEditClick = (e?: React.MouseEvent<HTMLDivElement>) => {
+    e?.preventDefault();
     triggerEdit(true);
   };
 
@@ -192,8 +192,8 @@ const Base = React.forwardRef((props: InternalBlockProps, ref: any) => {
     clearTimeout(copyIdRef.current!);
   };
 
-  const onCopyClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    e.preventDefault();
+  const onCopyClick = (e?: React.MouseEvent<HTMLDivElement>) => {
+    e?.preventDefault();
 
     if (copyConfig.text === undefined) {
       copyConfig.text = String(children);
diff --git a/components/typography/__tests__/enter-key-callback.test.tsx b/components/typography/__tests__/enter-key-callback.test.tsx
new file mode 100644
index 0000000000..21d8d86432
--- /dev/null
+++ b/components/typography/__tests__/enter-key-callback.test.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import KeyCode from 'rc-util/lib/KeyCode';
+import Paragraph from '../Paragraph';
+
+test('Callback on enter key is triggered', () => {
+  const onEditStart = jest.fn();
+  const onCopy = jest.fn();
+
+  const wrapper = mount(
+    <Paragraph
+      copyable={{
+        onCopy,
+      }}
+      editable={{
+        onStart: onEditStart,
+      }}
+    >
+      test
+    </Paragraph>,
+  );
+  const timer: any = 9527;
+  jest.spyOn(window, 'setTimeout').mockReturnValue(timer);
+  jest.spyOn(window, 'clearTimeout');
+  // must copy first, because editing button will hide copy button
+  wrapper.find('.ant-typography-copy').at(0).simulate('keyup', { keyCode: KeyCode.ENTER });
+  wrapper.find('.anticon-edit').at(0).simulate('keyup', { keyCode: KeyCode.ENTER });
+
+  expect(onEditStart.mock.calls.length).toBe(1);
+  expect(onCopy.mock.calls.length).toBe(1);
+  jest.restoreAllMocks();
+});

From d4ad8ce59d134fa7bb0c7380496c74618fe29c7e Mon Sep 17 00:00:00 2001
From: MadCcc <1075746765@qq.com>
Date: Thu, 10 Feb 2022 10:37:41 +0800
Subject: [PATCH 23/33] docs: 4.18.6 changelog optimization (#33990)

---
 CHANGELOG.en-US.md | 15 ++++++++-------
 CHANGELOG.zh-CN.md | 15 ++++++++-------
 2 files changed, 16 insertions(+), 14 deletions(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 6cfd0c1e29..509d75c6d7 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -19,14 +19,15 @@ timeline: true
 
 `2022-02-07`
 
-- 🐞 Hide the empty popover when the props' content is undefined or null. [#33835](https://github.com/ant-design/ant-design/pull/33835) [@DawnLck](https://github.com/DawnLck)
-- 🐞 Fix DatePicker `ref` TypeScript definition. [#33901](https://github.com/ant-design/ant-design/pull/33901) [@Amour1688](https://github.com/Amour1688)
-- 🐞 Fix the problem that tooltip didn't show on ellipsis with rows larger than 1. [#33875](https://github.com/ant-design/ant-design/pull/33875) [@MadCcc](https://github.com/MadCcc)
+- 🐞 Fix the empty Popover displayed when `content` and `title` is undefined or null. [#33835](https://github.com/ant-design/ant-design/pull/33835) [@DawnLck](https://github.com/DawnLck)
+- 🐞 Fix the problem that Tooltip didn't show on `ellipsis` with rows larger than 1. [#33875](https://github.com/ant-design/ant-design/pull/33875)
 - Button
-  - 🐞 Fix the issue that block not work when small size. [#33878](https://github.com/ant-design/ant-design/pull/33878) [@tangjinzhou](https://github.com/tangjinzhou)
-  - 🐞 Clear timer of delayed loading after Button is unmounted. [#33858](https://github.com/ant-design/ant-design/pull/33858) [@mrwd2009](https://github.com/mrwd2009)
-- 🐞 Fix the problem that Tooltip cannot be displayed when it is used with switch in loading state. [#33860](https://github.com/ant-design/ant-design/pull/33860) [@MadCcc](https://github.com/MadCcc)
-- 🐞 fix the upload button sometimes flashes after the upload button is changed from hidden to display when the upload component is a picture-card type. [#33820](https://github.com/ant-design/ant-design/pull/33820) [@credred](https://github.com/credred)
+  - 🐞 Fix the issue that `block` of Button not work when small size. [#33878](https://github.com/ant-design/ant-design/pull/33878) [@tangjinzhou](https://github.com/tangjinzhou)
+  - 🐞 Fix the issue that `loading.delay` of Button cause React memory leak warning [#33858](https://github.com/ant-design/ant-design/pull/33858) [@mrwd2009](https://github.com/mrwd2009)
+- 🐞 Fix the problem that Tooltip cannot be displayed when it is used with Switch in `loading` state. [#33860](https://github.com/ant-design/ant-design/pull/33860)
+- 🐞 Fix the Upload button sometimes flashes after changed from hidden to display when the Upload component is a `picture-card` type. [#33820](https://github.com/ant-design/ant-design/pull/33820) [@credred](https://github.com/credred)
+- TypeScript
+  - 🤖 Fix DatePicker `ref` TypeScript definition. [#33901](https://github.com/ant-design/ant-design/pull/33901) [@Amour1688](https://github.com/Amour1688)
 
 ## 4.18.5
 
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index e64dacdbdf..e5a3781fcc 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -19,14 +19,15 @@ timeline: true
 
 `2022-02-07`
 
-- 🐞 修复当传入的内容参数和标题参数都为空时，气泡组件仍旧会渲染空气泡的问题。[#33835](https://github.com/ant-design/ant-design/pull/33835) [@DawnLck](https://github.com/DawnLck)
-- 🐞 修复 DatePicker `ref` TypeScript 定义。[#33901](https://github.com/ant-design/ant-design/pull/33901) [@Amour1688](https://github.com/Amour1688)
-- 🐞 修复 Typography ellipsis 行数大于 1 时 Tooltip 不显示的问题。[#33875](https://github.com/ant-design/ant-design/pull/33875) [@MadCcc](https://github.com/MadCcc)
+- 🐞 修复当传入的内容参数和标题参数都为空时，Popover 仍旧会渲染空气泡的问题。[#33835](https://github.com/ant-design/ant-design/pull/33835) [@DawnLck](https://github.com/DawnLck)
+- 🐞 修复 Typography `ellipsis` 行数大于 1 时 Tooltip 不显示的问题。[#33875](https://github.com/ant-design/ant-design/pull/33875)
 - Button
-  - 🐞 修复小尺寸下 Button 组件 block 属性无效的问题[#33878](https://github.com/ant-design/ant-design/pull/33878) [@tangjinzhou](https://github.com/tangjinzhou)
-  - 🐞 Button 组件卸载后，清理延迟加载定时器。[#33858](https://github.com/ant-design/ant-design/pull/33858) [@mrwd2009](https://github.com/mrwd2009)
-- 🐞 修复 Tooltip 套在 loading 状态的 switch 上时无法正常显示的问题。[#33860](https://github.com/ant-design/ant-design/pull/33860) [@MadCcc](https://github.com/MadCcc)
-- 🐞 修复 Upload 组件为 picture-card 类型时，由隐藏上传按钮改为显示后，上传按钮有时会闪烁的问题。[#33820](https://github.com/ant-design/ant-design/pull/33820) [@credred](https://github.com/credred)
+  - 🐞 修复小尺寸下 Button 组件 `block` 属性无效的问题[#33878](https://github.com/ant-design/ant-design/pull/33878) [@tangjinzhou](https://github.com/tangjinzhou)
+  - 🐞 修复 Button 组件 `loading.delay` 定时器未清除导致的内存泄漏警告[#33858](https://github.com/ant-design/ant-design/pull/33858) [@mrwd2009](https://github.com/mrwd2009)
+- 🐞 修复 Tooltip 套在 `loading` 状态的 Switch 上时无法正常显示的问题。[#33860](https://github.com/ant-design/ant-design/pull/33860)
+- 🐞 修复 Upload 组件为 `picture-card` 类型时，由隐藏上传按钮改为显示后，上传按钮有时会闪烁的问题。[#33820](https://github.com/ant-design/ant-design/pull/33820) [@credred](https://github.com/credred)
+- Typescript
+  - 🤖 修复 DatePicker `ref` TypeScript 定义。[#33901](https://github.com/ant-design/ant-design/pull/33901) [@Amour1688](https://github.com/Amour1688)
 
 ## 4.18.5
 

From 4f8646f957359e973df5f3129fa7df2408c0ffdc Mon Sep 17 00:00:00 2001
From: mic-web <4804412+mic-web@users.noreply.github.com>
Date: Thu, 10 Feb 2022 04:13:25 +0100
Subject: [PATCH 24/33] fix: class names of Row and Col components when using
 custom prefix (#33969)

---
 components/grid/style/index.less | 23 +++++++++++++----------
 1 file changed, 13 insertions(+), 10 deletions(-)

diff --git a/components/grid/style/index.less b/components/grid/style/index.less
index 67b0918449..10f2136094 100644
--- a/components/grid/style/index.less
+++ b/components/grid/style/index.less
@@ -2,8 +2,11 @@
 @import '../../style/mixins/index';
 @import './mixin';
 
+@row-prefix-cls: ~'@{ant-prefix}-row';
+@col-prefix-cls: ~'@{ant-prefix}-col';
+
 // Grid system
-.@{ant-prefix}-row {
+.@{row-prefix-cls} {
   display: flex;
   flex-flow: row wrap;
 
@@ -19,46 +22,46 @@
 }
 
 // x轴原点
-.@{ant-prefix}-row-start {
+.@{row-prefix-cls}-start {
   justify-content: flex-start;
 }
 
 // x轴居中
-.@{ant-prefix}-row-center {
+.@{row-prefix-cls}-center {
   justify-content: center;
 }
 
 // x轴反方向
-.@{ant-prefix}-row-end {
+.@{row-prefix-cls}-end {
   justify-content: flex-end;
 }
 
 // x轴平分
-.@{ant-prefix}-row-space-between {
+.@{row-prefix-cls}-space-between {
   justify-content: space-between;
 }
 
 // x轴有间隔地平分
-.@{ant-prefix}-row-space-around {
+.@{row-prefix-cls}-space-around {
   justify-content: space-around;
 }
 
 // 顶部对齐
-.@{ant-prefix}-row-top {
+.@{row-prefix-cls}-top {
   align-items: flex-start;
 }
 
 // 居中对齐
-.@{ant-prefix}-row-middle {
+.@{row-prefix-cls}-middle {
   align-items: center;
 }
 
 // 底部对齐
-.@{ant-prefix}-row-bottom {
+.@{row-prefix-cls}-bottom {
   align-items: flex-end;
 }
 
-.@{ant-prefix}-col {
+.@{col-prefix-cls} {
   position: relative;
   max-width: 100%;
   // Prevent columns from collapsing when empty

From 19cc7d49e2f1a27eb1483355735eb8ff1f165f17 Mon Sep 17 00:00:00 2001
From: linxianxi <47104575+linxianxi@users.noreply.github.com>
Date: Thu, 10 Feb 2022 16:22:31 +0800
Subject: [PATCH 25/33] fix: Typography copyable add stopPropagation (#33998)

* fix: Typography copyable add stopPropagation

* add test
---
 components/typography/Base/index.tsx          |  1 +
 components/typography/__tests__/copy.test.tsx | 13 +++++++++++++
 2 files changed, 14 insertions(+)

diff --git a/components/typography/Base/index.tsx b/components/typography/Base/index.tsx
index 70d8c99575..706fad6c8d 100644
--- a/components/typography/Base/index.tsx
+++ b/components/typography/Base/index.tsx
@@ -194,6 +194,7 @@ const Base = React.forwardRef((props: InternalBlockProps, ref: any) => {
 
   const onCopyClick = (e?: React.MouseEvent<HTMLDivElement>) => {
     e?.preventDefault();
+    e?.stopPropagation();
 
     if (copyConfig.text === undefined) {
       copyConfig.text = String(children);
diff --git a/components/typography/__tests__/copy.test.tsx b/components/typography/__tests__/copy.test.tsx
index 7dc502cd1e..d831d5c7de 100644
--- a/components/typography/__tests__/copy.test.tsx
+++ b/components/typography/__tests__/copy.test.tsx
@@ -193,5 +193,18 @@ describe('Typography copy', () => {
         tooltipLength: 0,
       });
     });
+
+    it('copy click event stopPropagation', () => {
+      const onDivClick = jest.fn();
+      const wrapper = mount(
+        <div onClick={onDivClick}>
+          <Base component="p" copyable>
+            test copy
+          </Base>
+        </div>,
+      );
+      wrapper.find('.ant-typography-copy').first().simulate('click');
+      expect(onDivClick).not.toBeCalled();
+    });
   });
 });

From 9f30ca6b3f1019e0eb23f670ae53b5a0bf05fa21 Mon Sep 17 00:00:00 2001
From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com>
Date: Thu, 10 Feb 2022 17:31:38 +0800
Subject: [PATCH 26/33] chore(deps): update dependency react-dnd to v15
 (#33940)

* chore(deps): update dependency react-dnd to v15

* fix: Tabs demo

* fix: demo

Co-authored-by: Renovate Bot <bot@renovateapp.com>
Co-authored-by: afc163 <afc163@gmail.com>
---
 .../__snapshots__/demo-extend.test.ts.snap    | 51 +++++++----
 .../__tests__/__snapshots__/demo.test.js.snap | 51 +++++++----
 components/tabs/demo/custom-tab-bar-node.md   | 88 ++++++++++---------
 package.json                                  |  2 +-
 4 files changed, 112 insertions(+), 80 deletions(-)

diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
index 55694834b8..d625b1b2f6 100644
--- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -945,39 +945,54 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md extend context co
         style="transform:translate(0px, 0px)"
       >
         <div
-          class="ant-tabs-tab ant-tabs-tab-active"
+          class=""
+          style="margin-right:24px"
         >
           <div
-            aria-selected="true"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
+            class="ant-tabs-tab ant-tabs-tab-active"
           >
-            tab 1
+            <div
+              aria-selected="true"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              tab 1
+            </div>
           </div>
         </div>
         <div
-          class="ant-tabs-tab"
+          class=""
+          style="margin-right:24px"
         >
           <div
-            aria-selected="false"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
+            class="ant-tabs-tab"
           >
-            tab 2
+            <div
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              tab 2
+            </div>
           </div>
         </div>
         <div
-          class="ant-tabs-tab"
+          class=""
+          style="margin-right:24px"
         >
           <div
-            aria-selected="false"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
+            class="ant-tabs-tab"
           >
-            tab 3
+            <div
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              tab 3
+            </div>
           </div>
         </div>
         <div
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
index 0aebd4d439..a7aa88b5fa 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -831,39 +831,54 @@ exports[`renders ./components/tabs/demo/custom-tab-bar-node.md correctly 1`] = `
         style="transform:translate(0px, 0px)"
       >
         <div
-          class="ant-tabs-tab ant-tabs-tab-active"
+          class=""
+          style="margin-right:24px"
         >
           <div
-            aria-selected="true"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
+            class="ant-tabs-tab ant-tabs-tab-active"
           >
-            tab 1
+            <div
+              aria-selected="true"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              tab 1
+            </div>
           </div>
         </div>
         <div
-          class="ant-tabs-tab"
+          class=""
+          style="margin-right:24px"
         >
           <div
-            aria-selected="false"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
+            class="ant-tabs-tab"
           >
-            tab 2
+            <div
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              tab 2
+            </div>
           </div>
         </div>
         <div
-          class="ant-tabs-tab"
+          class=""
+          style="margin-right:24px"
         >
           <div
-            aria-selected="false"
-            class="ant-tabs-tab-btn"
-            role="tab"
-            tabindex="0"
+            class="ant-tabs-tab"
           >
-            tab 3
+            <div
+              aria-selected="false"
+              class="ant-tabs-tab-btn"
+              role="tab"
+              tabindex="0"
+            >
+              tab 3
+            </div>
           </div>
         </div>
         <div
diff --git a/components/tabs/demo/custom-tab-bar-node.md b/components/tabs/demo/custom-tab-bar-node.md
index b665d9fe10..d82f1880d5 100644
--- a/components/tabs/demo/custom-tab-bar-node.md
+++ b/components/tabs/demo/custom-tab-bar-node.md
@@ -7,60 +7,55 @@ title:
 
 ## zh-CN
 
-使用 `react-dnd` 实现标签可拖拽。
+使用 `react-dnd@15+` 实现标签可拖拽。
 
 ## en-US
 
-Use `react-dnd` to make tabs draggable.
+Use `react-dnd@15+` to make tabs draggable.
 
 ```jsx
+import React, { useRef, cloneElement } from 'react';
 import { Tabs } from 'antd';
-import { DndProvider, DragSource, DropTarget } from 'react-dnd';
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 
 const { TabPane } = Tabs;
 
-// Drag & Drop node
-class TabNode extends React.Component {
-  render() {
-    const { connectDragSource, connectDropTarget, children } = this.props;
+const type = 'DraggableTabNode';
 
-    return connectDragSource(connectDropTarget(children));
-  }
-}
-
-const cardTarget = {
-  drop(props, monitor) {
-    const dragKey = monitor.getItem().index;
-    const hoverKey = props.index;
-
-    if (dragKey === hoverKey) {
-      return;
-    }
-
-    props.moveTabNode(dragKey, hoverKey);
-    monitor.getItem().index = hoverKey;
-  },
+const DraggableTabNode = ({ index, children, moveNode }) => {
+  const ref = useRef();
+  const [{ isOver, dropClassName }, drop] = useDrop({
+    accept: type,
+    collect: monitor => {
+      const { index: dragIndex } = monitor.getItem() || {};
+      if (dragIndex === index) {
+        return {};
+      }
+      return {
+        isOver: monitor.isOver(),
+        dropClassName: 'dropping',
+      };
+    },
+    drop: item => {
+      moveNode(item.index, index);
+    },
+  });
+  const [, drag] = useDrag({
+    type,
+    item: { index },
+    collect: monitor => ({
+      isDragging: monitor.isDragging(),
+    }),
+  });
+  drop(drag(ref));
+  return (
+    <div ref={ref} style={{ marginRight: 24 }} className={isOver ? dropClassName : ''}>
+      {children}
+    </div>
+  );
 };
 
-const cardSource = {
-  beginDrag(props) {
-    return {
-      id: props.id,
-      index: props.index,
-    };
-  },
-};
-
-const WrapTabNode = DropTarget('DND_NODE', cardTarget, connect => ({
-  connectDropTarget: connect.dropTarget(),
-}))(
-  DragSource('DND_NODE', cardSource, (connect, monitor) => ({
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging(),
-  }))(TabNode),
-);
-
 class DraggableTabs extends React.Component {
   state = {
     order: [],
@@ -90,9 +85,9 @@ class DraggableTabs extends React.Component {
   renderTabBar = (props, DefaultTabBar) => (
     <DefaultTabBar {...props}>
       {node => (
-        <WrapTabNode key={node.key} index={node.key} moveTabNode={this.moveTabNode}>
+        <DraggableTabNode key={node.key} index={node.key} moveNode={this.moveTabNode}>
           {node}
-        </WrapTabNode>
+        </DraggableTabNode>
       )}
     </DefaultTabBar>
   );
@@ -151,3 +146,10 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+```css
+.dropping {
+  background: #fefefe;
+  transition: all 0.3s;
+}
+```
diff --git a/package.json b/package.json
index 4519534c91..b5b0d4317d 100644
--- a/package.json
+++ b/package.json
@@ -247,7 +247,7 @@
     "react": "^17.0.1",
     "react-color": "^2.17.3",
     "react-copy-to-clipboard": "^5.0.1",
-    "react-dnd": "^14.0.1",
+    "react-dnd": "^15.0.0",
     "react-dnd-html5-backend": "^15.0.0",
     "react-dom": "^17.0.1",
     "react-draggable": "^4.4.3",

From dc67fd7dbbfb4d64b3ff0e7b5c3bc8a2126e6ef8 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 10 Feb 2022 17:51:40 +0800
Subject: [PATCH 27/33] fix: Pagination and Rate style bug in Safari (#34002)

* fix: Pagination and Rate style bug in safari

close #33965

* fix style
---
 components/pagination/style/index.less | 48 ++++++++++++++++++++++----
 components/rate/style/index.less       |  4 +--
 2 files changed, 44 insertions(+), 8 deletions(-)

diff --git a/components/pagination/style/index.less b/components/pagination/style/index.less
index 60ee9d69de..8572af66f3 100644
--- a/components/pagination/style/index.less
+++ b/components/pagination/style/index.less
@@ -59,7 +59,6 @@
       }
     }
 
-    &:focus-visible,
     &:hover {
       border-color: @primary-color;
       transition: all 0.3s;
@@ -69,6 +68,17 @@
       }
     }
 
+    // cannot merge with `&:hover`
+    // see https://github.com/ant-design/ant-design/pull/34002
+    &:focus-visible {
+      border-color: @primary-color;
+      transition: all 0.3s;
+
+      a {
+        color: @primary-color;
+      }
+    }
+
     &-active {
       font-weight: @pagination-font-weight-active;
       background: @pagination-item-bg-active;
@@ -78,15 +88,21 @@
         color: @primary-color;
       }
 
-      &:focus-visible,
       &:hover {
         border-color: @primary-5;
       }
 
-      &:focus-visible a,
+      &:focus-visible {
+        border-color: @primary-5;
+      }
+
       &:hover a {
         color: @primary-5;
       }
+
+      &:focus-visible a {
+        color: @primary-5;
+      }
     }
   }
 
@@ -130,7 +146,6 @@
       }
     }
 
-    &:focus-visible,
     &:hover {
       .@{pagination-prefix-cls}-item-link-icon {
         opacity: 1;
@@ -139,6 +154,15 @@
         opacity: 0;
       }
     }
+
+    &:focus-visible {
+      .@{pagination-prefix-cls}-item-link-icon {
+        opacity: 1;
+      }
+      .@{pagination-prefix-cls}-item-ellipsis {
+        opacity: 0;
+      }
+    }
   }
 
   &-prev,
@@ -194,7 +218,11 @@
       transition: all 0.3s;
     }
 
-    &:focus-visible .@{pagination-prefix-cls}-item-link,
+    &:focus-visible .@{pagination-prefix-cls}-item-link {
+      color: @primary-color;
+      border-color: @primary-color;
+    }
+
     &:hover .@{pagination-prefix-cls}-item-link {
       color: @primary-color;
       border-color: @primary-color;
@@ -203,7 +231,15 @@
 
   &-disabled {
     &,
-    &:hover,
+    &:hover {
+      cursor: not-allowed;
+      .@{pagination-prefix-cls}-item-link {
+        color: @disabled-color;
+        border-color: @border-color-base;
+        cursor: not-allowed;
+      }
+    }
+
     &:focus-visible {
       cursor: not-allowed;
       .@{pagination-prefix-cls}-item-link {
diff --git a/components/rate/style/index.less b/components/rate/style/index.less
index 10abfd7c6a..7b5dad79ee 100644
--- a/components/rate/style/index.less
+++ b/components/rate/style/index.less
@@ -36,8 +36,7 @@
     > div {
       transition: all 0.3s, outline 0s;
 
-      &:hover,
-      &:focus-visible {
+      &:hover {
         transform: @rate-star-hover-scale;
       }
 
@@ -47,6 +46,7 @@
 
       &:focus-visible {
         outline: 1px dashed @rate-star-color;
+        transform: @rate-star-hover-scale;
       }
     }
 

From c3f856862030d0ea97d34d7af145cbc88be8a881 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Thu, 10 Feb 2022 18:24:53 +0800
Subject: [PATCH 28/33] docs: fix missing @/services/product (#34003)

* docs: fix missing @/services/product

close #33952

* update data
---
 docs/react/practical-projects.en-US.md | 29 +++++++++++++++++++++++++-
 docs/react/practical-projects.zh-CN.md | 29 +++++++++++++++++++++++++-
 2 files changed, 56 insertions(+), 2 deletions(-)

diff --git a/docs/react/practical-projects.en-US.md b/docs/react/practical-projects.en-US.md
index 651f319ce8..1d8452f73a 100644
--- a/docs/react/practical-projects.en-US.md
+++ b/docs/react/practical-projects.en-US.md
@@ -100,7 +100,34 @@ export default ProductList;
 
 The file name corresponds to the name of the final model, and you can consume the data in the model through the API provided by the plug-in.
 
-Let's take a simple table as an example. First you need to create a new file `src/models/useProductList.ts`.
+Let's take a simple table as an example. First we create a new file `src/services/product.ts` for remote API.
+
+```tsx
+/*
+export function queryProductList() {
+  return fetch('/api/products').then(res => res.json());
+}
+*/
+// mock request service by setTimeout
+export function queryProductList() {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve([
+        {
+          id: 1,
+          name: 'dva',
+        },
+        {
+          id: 2,
+          name: 'antd',
+        },
+      ]);
+    }, 2000);
+  });
+}
+```
+
+Then you need to create a new file `src/models/useProductList.ts`.
 
 ```tsx
 import { useRequest } from 'umi';
diff --git a/docs/react/practical-projects.zh-CN.md b/docs/react/practical-projects.zh-CN.md
index 09ca021520..a303560b0f 100644
--- a/docs/react/practical-projects.zh-CN.md
+++ b/docs/react/practical-projects.zh-CN.md
@@ -97,7 +97,34 @@ export default ProductList;
 
 文件名则对应最终 model 的 name，你可以通过插件提供的 API 来消费 model 中的数据。
 
-我们以一个简单的表格作为示例。首先需要新建文件 `src/models/useProductList.ts`。
+我们以一个简单的表格作为示例。首先新建一个 `src/services/product.ts` 存放产品相关的接口。
+
+```tsx
+/*
+export function queryProductList() {
+  return fetch('/api/products').then(res => res.json());
+}
+*/
+// 先用 setTimeout 模拟一个请求，正常的写法如上所示
+export function queryProductList() {
+  return new Promise(resolve => {
+    setTimeout(() => {
+      resolve([
+        {
+          id: 1,
+          name: 'dva',
+        },
+        {
+          id: 2,
+          name: 'antd',
+        },
+      ]);
+    }, 2000);
+  });
+}
+```
+
+然后新建文件 `src/models/useProductList.ts`。
 
 ```tsx
 import { useRequest } from 'umi';

From 0c422fe1b723441b3a6ad46927f48cb8de4ccb92 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 11 Feb 2022 10:39:10 +0800
Subject: [PATCH 29/33] docs: improve Select dropdownRender demo style (#34004)

---
 .../__snapshots__/demo-extend.test.ts.snap    | 141 ++++++++++--------
 .../__tests__/__snapshots__/demo.test.js.snap |   2 +-
 .../select/demo/custom-dropdown-menu.md       |  82 +++++-----
 3 files changed, 111 insertions(+), 114 deletions(-)

diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
index bc9a98b6d7..44877b162f 100644
--- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1533,7 +1533,7 @@ Array [
 exports[`renders ./components/select/demo/custom-dropdown-menu.md extend context correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-arrow"
-  style="width:240px"
+  style="width:300px"
 >
   <div
     class="ant-select-selector"
@@ -1569,96 +1569,105 @@ exports[`renders ./components/select/demo/custom-dropdown-menu.md extend context
       style="opacity:0;pointer-events:none"
     >
       <div>
-        <div>
+        <div
+          id="undefined_list"
+          role="listbox"
+          style="height:0;width:0;overflow:hidden"
+        >
           <div
-            id="undefined_list"
-            role="listbox"
-            style="height:0;width:0;overflow:hidden"
+            aria-label="jack"
+            aria-selected="false"
+            id="undefined_list_0"
+            role="option"
           >
-            <div
-              aria-label="jack"
-              aria-selected="false"
-              id="undefined_list_0"
-              role="option"
-            >
-              jack
-            </div>
-            <div
-              aria-label="lucy"
-              aria-selected="false"
-              id="undefined_list_1"
-              role="option"
-            >
-              lucy
-            </div>
+            jack
           </div>
           <div
-            class="rc-virtual-list"
-            style="position:relative"
+            aria-label="lucy"
+            aria-selected="false"
+            id="undefined_list_1"
+            role="option"
           >
-            <div
-              class="rc-virtual-list-holder"
-              style="max-height:256px;overflow-y:auto;overflow-anchor:none"
-            >
-              <div>
+            lucy
+          </div>
+        </div>
+        <div
+          class="rc-virtual-list"
+          style="position:relative"
+        >
+          <div
+            class="rc-virtual-list-holder"
+            style="max-height:256px;overflow-y:auto;overflow-anchor:none"
+          >
+            <div>
+              <div
+                class="rc-virtual-list-holder-inner"
+                style="display:flex;flex-direction:column"
+              >
                 <div
-                  class="rc-virtual-list-holder-inner"
-                  style="display:flex;flex-direction:column"
+                  aria-selected="false"
+                  class="ant-select-item ant-select-item-option ant-select-item-option-active"
+                  title="jack"
                 >
                   <div
-                    aria-selected="false"
-                    class="ant-select-item ant-select-item-option ant-select-item-option-active"
-                    title="jack"
+                    class="ant-select-item-option-content"
                   >
-                    <div
-                      class="ant-select-item-option-content"
-                    >
-                      jack
-                    </div>
-                    <span
-                      aria-hidden="true"
-                      class="ant-select-item-option-state"
-                      style="user-select:none;-webkit-user-select:none"
-                      unselectable="on"
-                    />
+                    jack
                   </div>
+                  <span
+                    aria-hidden="true"
+                    class="ant-select-item-option-state"
+                    style="user-select:none;-webkit-user-select:none"
+                    unselectable="on"
+                  />
+                </div>
+                <div
+                  aria-selected="false"
+                  class="ant-select-item ant-select-item-option"
+                  title="lucy"
+                >
                   <div
-                    aria-selected="false"
-                    class="ant-select-item ant-select-item-option"
-                    title="lucy"
+                    class="ant-select-item-option-content"
                   >
-                    <div
-                      class="ant-select-item-option-content"
-                    >
-                      lucy
-                    </div>
-                    <span
-                      aria-hidden="true"
-                      class="ant-select-item-option-state"
-                      style="user-select:none;-webkit-user-select:none"
-                      unselectable="on"
-                    />
+                    lucy
                   </div>
+                  <span
+                    aria-hidden="true"
+                    class="ant-select-item-option-state"
+                    style="user-select:none;-webkit-user-select:none"
+                    unselectable="on"
+                  />
                 </div>
               </div>
             </div>
           </div>
+        </div>
+        <div
+          class="ant-divider ant-divider-horizontal"
+          role="separator"
+          style="margin:8px 0"
+        />
+        <div
+          class="ant-space ant-space-horizontal ant-space-align-center"
+          style="padding:0 8px 4px"
+        >
           <div
-            class="ant-divider ant-divider-horizontal"
-            role="separator"
-            style="margin:4px 0"
-          />
-          <div
-            style="display:flex;flex-wrap:nowrap;padding:8px"
+            class="ant-space-item"
+            style="margin-right:8px"
           >
             <input
               class="ant-input"
-              style="flex:auto"
+              placeholder="Please enter item"
               type="text"
               value=""
             />
+          </div>
+          <div
+            class="ant-space-item"
+          >
             <a
-              style="flex:none;padding:8px;display:block;cursor:pointer"
+              class="ant-typography"
+              style="white-space:nowrap"
             >
               <span
                 aria-label="plus"
diff --git a/components/select/__tests__/__snapshots__/demo.test.js.snap b/components/select/__tests__/__snapshots__/demo.test.js.snap
index ad1e10f982..4530c0b237 100644
--- a/components/select/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/select/__tests__/__snapshots__/demo.test.js.snap
@@ -704,7 +704,7 @@ Array [
 exports[`renders ./components/select/demo/custom-dropdown-menu.md correctly 1`] = `
 <div
   class="ant-select ant-select-single ant-select-show-arrow"
-  style="width:240px"
+  style="width:300px"
 >
   <div
     class="ant-select-selector"
diff --git a/components/select/demo/custom-dropdown-menu.md b/components/select/demo/custom-dropdown-menu.md
index ee2e4f3166..e0ed7a91be 100644
--- a/components/select/demo/custom-dropdown-menu.md
+++ b/components/select/demo/custom-dropdown-menu.md
@@ -14,63 +14,51 @@ title:
 Customize the dropdown menu via `dropdownRender`.
 
 ```jsx
-import { Select, Divider, Input } from 'antd';
+import React, { useState } from 'react';
+import { Select, Divider, Input, Typography, Space } from 'antd';
 import { PlusOutlined } from '@ant-design/icons';
 
 const { Option } = Select;
 
 let index = 0;
 
-class App extends React.Component {
-  state = {
-    items: ['jack', 'lucy'],
-    name: '',
+const App = () => {
+  const [items, setItems] = useState(['jack', 'lucy']);
+  const [name, setName] = useState('');
+
+  const onNameChange = event => {
+    setName(event.target.value);
   };
 
-  onNameChange = event => {
-    this.setState({
-      name: event.target.value,
-    });
+  const addItem = e => {
+    e.preventDefault();
+    setItems([...items, name || `New item ${index++}`]);
+    setName('');
   };
 
-  addItem = () => {
-    console.log('addItem');
-    const { items, name } = this.state;
-    this.setState({
-      items: [...items, name || `New item ${index++}`],
-      name: '',
-    });
-  };
-
-  render() {
-    const { items, name } = this.state;
-    return (
-      <Select
-        style={{ width: 240 }}
-        placeholder="custom dropdown render"
-        dropdownRender={menu => (
-          <div>
-            {menu}
-            <Divider style={{ margin: '4px 0' }} />
-            <div style={{ display: 'flex', flexWrap: 'nowrap', padding: 8 }}>
-              <Input style={{ flex: 'auto' }} value={name} onChange={this.onNameChange} />
-              <a
-                style={{ flex: 'none', padding: '8px', display: 'block', cursor: 'pointer' }}
-                onClick={this.addItem}
-              >
-                <PlusOutlined /> Add item
-              </a>
-            </div>
-          </div>
-        )}
-      >
-        {items.map(item => (
-          <Option key={item}>{item}</Option>
-        ))}
-      </Select>
-    );
-  }
-}
+  return (
+    <Select
+      style={{ width: 300 }}
+      placeholder="custom dropdown render"
+      dropdownRender={menu => (
+        <>
+          {menu}
+          <Divider style={{ margin: '8px 0' }} />
+          <Space align="center" style={{ padding: '0 8px 4px' }}>
+            <Input placeholder="Please enter item" value={name} onChange={onNameChange} />
+            <Typography.Link onClick={addItem} style={{ whiteSpace: 'nowrap' }}>
+              <PlusOutlined /> Add item
+            </Typography.Link>
+          </Space>
+        </>
+      )}
+    >
+      {items.map(item => (
+        <Option key={item}>{item}</Option>
+      ))}
+    </Select>
+  );
+};
 
 ReactDOM.render(<App />, mountNode);
 ```

From 92d582045744df082a9e18c8fe4b728b040b679b Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 11 Feb 2022 13:05:54 +0800
Subject: [PATCH 30/33] chore: remove unused interface file (#34011)

---
 .../date-picker/generatePicker/interface.ts    | 18 ------------------
 .../date-picker/generatePicker/interface.tsx   |  9 ++++++++-
 2 files changed, 8 insertions(+), 19 deletions(-)
 delete mode 100644 components/date-picker/generatePicker/interface.ts

diff --git a/components/date-picker/generatePicker/interface.ts b/components/date-picker/generatePicker/interface.ts
deleted file mode 100644
index c0771f2e0c..0000000000
--- a/components/date-picker/generatePicker/interface.ts
+++ /dev/null
@@ -1,18 +0,0 @@
-import type { ComponentClass, ForwardedRef, Component } from 'react';
-import { PickerProps, RangePickerProps } from '.';
-
-export interface CommonPickerMethods {
-  focus: () => void;
-  blur: () => void;
-}
-
-export interface PickerComponentClass<P = {}, S = unknown> extends ComponentClass<P, S> {
-  new (...args: ConstructorParameters<ComponentClass<P, S>>): InstanceType<ComponentClass<P, S>> &
-    CommonPickerMethods;
-}
-
-export type PickerRef<P> = ForwardedRef<Component<P> & CommonPickerMethods>;
-
-export type DatePickRef<DateType> = PickerRef<PickerProps<DateType>>;
-
-export type RangePickerRef<DateType> = PickerRef<RangePickerProps<DateType>>;
diff --git a/components/date-picker/generatePicker/interface.tsx b/components/date-picker/generatePicker/interface.tsx
index 2daf343d66..c0771f2e0c 100644
--- a/components/date-picker/generatePicker/interface.tsx
+++ b/components/date-picker/generatePicker/interface.tsx
@@ -1,4 +1,5 @@
-import { ComponentClass } from 'react';
+import type { ComponentClass, ForwardedRef, Component } from 'react';
+import { PickerProps, RangePickerProps } from '.';
 
 export interface CommonPickerMethods {
   focus: () => void;
@@ -9,3 +10,9 @@ export interface PickerComponentClass<P = {}, S = unknown> extends ComponentClas
   new (...args: ConstructorParameters<ComponentClass<P, S>>): InstanceType<ComponentClass<P, S>> &
     CommonPickerMethods;
 }
+
+export type PickerRef<P> = ForwardedRef<Component<P> & CommonPickerMethods>;
+
+export type DatePickRef<DateType> = PickerRef<PickerProps<DateType>>;
+
+export type RangePickerRef<DateType> = PickerRef<RangePickerProps<DateType>>;

From fd2ebe57f773e206987a92ca07796e3407833b61 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 11 Feb 2022 13:06:06 +0800
Subject: [PATCH 31/33] style: improve Menu :focus-visible style (#34008)

* style: improve Menu :focus-visible style

ref #34005

* style: darken :focus-visible style
---
 components/menu/style/dark.less  | 15 +++++++++++++++
 components/menu/style/index.less |  2 +-
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/components/menu/style/dark.less b/components/menu/style/dark.less
index e69e9ad803..fe110330b7 100644
--- a/components/menu/style/dark.less
+++ b/components/menu/style/dark.less
@@ -1,4 +1,19 @@
+.accessibility-focus-dark() {
+  box-shadow: 0 0 0 2px @primary-7;
+}
+
 .@{menu-prefix-cls} {
+  &&-root:focus-visible {
+    .accessibility-focus-dark();
+  }
+
+  &-dark &-item,
+  &-dark &-submenu-title {
+    &:focus-visible {
+      .accessibility-focus-dark();
+    }
+  }
+
   // dark theme
   &&-dark,
   &-dark &-sub,
diff --git a/components/menu/style/index.less b/components/menu/style/index.less
index d4cdcfff08..7d42a66660 100644
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@@ -6,7 +6,7 @@
 @menu-animation-duration-normal: 0.15s;
 
 .accessibility-focus() {
-  box-shadow: 0 0 0 2px @primary-1;
+  box-shadow: 0 0 0 2px @primary-2;
 }
 
 // TODO: Should remove icon style compatible in v5

From fe185dcbcea0a427ca2965910f470901b05393db 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, 11 Feb 2022 14:06:06 +0800
Subject: [PATCH 32/33] fix: typography ellipsis check in transform (#34007)

* fix: typography ellipsis check in transform

* test: Update snapshot
---
 .../__snapshots__/demo-extend.test.ts.snap       |  4 ++--
 .../__tests__/__snapshots__/demo.test.js.snap    |  4 ++--
 components/typography/Base/Ellipsis.tsx          |  2 +-
 .../__snapshots__/demo-extend.test.ts.snap       | 16 ++++++++--------
 .../__tests__/__snapshots__/demo.test.js.snap    | 16 ++++++++--------
 5 files changed, 21 insertions(+), 21 deletions(-)

diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index 52de5e42a3..d1bfde83d6 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2985,7 +2985,7 @@ exports[`renders ./components/form/demo/label-debug.md extend context correctly
           longtextlongtextlongtextlongtextlongtextlongtextlongtext
           <span
             aria-hidden="true"
-            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
           >
             lg
           </span>
@@ -3039,7 +3039,7 @@ exports[`renders ./components/form/demo/label-debug.md extend context correctly
           longtext longtext longtext longtext longtext longtext longtext
           <span
             aria-hidden="true"
-            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
           >
             lg
           </span>
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index 97492fefaf..8201258bc2 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -2623,7 +2623,7 @@ exports[`renders ./components/form/demo/label-debug.md correctly 1`] = `
           longtextlongtextlongtextlongtextlongtextlongtextlongtext
           <span
             aria-hidden="true"
-            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
           >
             lg
           </span>
@@ -2677,7 +2677,7 @@ exports[`renders ./components/form/demo/label-debug.md correctly 1`] = `
           longtext longtext longtext longtext longtext longtext longtext
           <span
             aria-hidden="true"
-            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+            style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
           >
             lg
           </span>
diff --git a/components/typography/Base/Ellipsis.tsx b/components/typography/Base/Ellipsis.tsx
index 940e46131f..d69f4526db 100644
--- a/components/typography/Base/Ellipsis.tsx
+++ b/components/typography/Base/Ellipsis.tsx
@@ -193,7 +193,7 @@ const Ellipsis = ({ enabledMeasure, children, text, width, rows, onEllipsis }: E
         walkingState !== DONE_WITHOUT_ELLIPSIS && (
           <>
             {/* `l` for top & `g` for bottom measure */}
-            {renderMeasure('lg', singleRowRef, { width: 9999 })}
+            {renderMeasure('lg', singleRowRef, { wordBreak: 'keep-all', whiteSpace: 'nowrap' })}
             {/* {renderMeasureSlice(midLen, midRowRef)} */}
             {walkingState === PREPARE
               ? renderMeasure(children(nodeList, false), midRowRef, measureStyle)
diff --git a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
index d261dedb9a..bf4a3dd2d4 100644
--- a/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/typography/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -237,7 +237,7 @@ Array [
     Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
     <span
       aria-hidden="true"
-      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
     >
       lg
     </span>
@@ -259,7 +259,7 @@ Array [
     Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
     <span
       aria-hidden="true"
-      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
     >
       lg
     </span>
@@ -288,7 +288,7 @@ Array [
     Ant Design, a design language for background applications, is refined by Ant UED Team.
     <span
       aria-hidden="true"
-      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
     >
       lg
     </span>
@@ -455,7 +455,7 @@ Array [
      case. Bnt Design, a design language for background applications, is refined by Ant UED Team. Cnt Design, a design language for background applications, is refined by Ant UED Team. Dnt Design, a design language for background applications, is refined by Ant UED Team. Ent Design, a design language for background applications, is refined by Ant UED Team.
     <span
       aria-hidden="true"
-      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
     >
       lg
     </span>
@@ -529,7 +529,7 @@ Array [
     </div>
     <span
       aria-hidden="true"
-      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
     >
       lg
     </span>
@@ -604,7 +604,7 @@ Array [
       not ellipsis
       <span
         aria-hidden="true"
-        style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+        style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
       >
         lg
       </span>
@@ -633,7 +633,7 @@ exports[`renders ./components/typography/demo/ellipsis-middle.md extend context
   In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency ofdevelopment.
   <span
     aria-hidden="true"
-    style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+    style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
   >
     lg
   </span>
@@ -1593,7 +1593,7 @@ Array [
     To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare
     <span
       aria-hidden="true"
-      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
     >
       lg
     </span>
diff --git a/components/typography/__tests__/__snapshots__/demo.test.js.snap b/components/typography/__tests__/__snapshots__/demo.test.js.snap
index caec209b4e..1ef9e11226 100644
--- a/components/typography/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/typography/__tests__/__snapshots__/demo.test.js.snap
@@ -237,7 +237,7 @@ Array [
     Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
     <span
       aria-hidden="true"
-      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
     >
       lg
     </span>
@@ -259,7 +259,7 @@ Array [
     Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team. Ant Design, a design language for background applications, is refined by Ant UED Team.
     <span
       aria-hidden="true"
-      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
     >
       lg
     </span>
@@ -288,7 +288,7 @@ Array [
     Ant Design, a design language for background applications, is refined by Ant UED Team.
     <span
       aria-hidden="true"
-      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
     >
       lg
     </span>
@@ -407,7 +407,7 @@ Array [
      case. Bnt Design, a design language for background applications, is refined by Ant UED Team. Cnt Design, a design language for background applications, is refined by Ant UED Team. Dnt Design, a design language for background applications, is refined by Ant UED Team. Ent Design, a design language for background applications, is refined by Ant UED Team.
     <span
       aria-hidden="true"
-      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
     >
       lg
     </span>
@@ -457,7 +457,7 @@ Array [
     </div>
     <span
       aria-hidden="true"
-      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
     >
       lg
     </span>
@@ -508,7 +508,7 @@ Array [
       not ellipsis
       <span
         aria-hidden="true"
-        style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+        style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
       >
         lg
       </span>
@@ -537,7 +537,7 @@ exports[`renders ./components/typography/demo/ellipsis-middle.md correctly 1`] =
   In the process of internal desktop applications development, many different design specs and implementations would be involved, which might cause designers and developers difficulties and duplication and reduce the efficiency ofdevelopment.
   <span
     aria-hidden="true"
-    style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+    style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
   >
     lg
   </span>
@@ -1213,7 +1213,7 @@ Array [
     To be, or not to be, that is a question: Whether it is nobler in the mind to suffer. The slings and arrows of outrageous fortune Or to take arms against a sea of troubles, And by opposing end them? To die: to sleep; No more; and by a sleep to say we end The heart-ache and the thousand natural shocks That flesh is heir to, 'tis a consummation Devoutly to be wish'd. To die, to sleep To sleep- perchance to dream: ay, there's the rub! For in that sleep of death what dreams may come When we have shuffled off this mortal coil, Must give us pause. There 's the respect That makes calamity of so long life--William Shakespeare
     <span
       aria-hidden="true"
-      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;width:9999px"
+      style="position:fixed;display:block;left:0;top:0;z-index:-9999;visibility:hidden;pointer-events:none;word-break:keep-all;white-space:nowrap"
     >
       lg
     </span>

From 31fb55adf3efbba04e0ecf5242ee73fe3d6aaa1a 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, 11 Feb 2022 15:02:59 +0800
Subject: [PATCH 33/33] chore: btn default provide default cls (#34013)

---
 .../__snapshots__/demo-extend.test.ts.snap    |   2 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   4 +-
 .../__tests__/__snapshots__/demo.test.ts.snap |   4 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   6 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   6 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  10 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  10 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   6 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   6 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  66 ++---
 .../__tests__/__snapshots__/demo.test.ts.snap |  66 ++---
 .../__snapshots__/index.test.tsx.snap         |  36 +--
 components/button/button.tsx                  |   4 +-
 .../__snapshots__/index.test.js.snap          |   2 +-
 .../__snapshots__/components.test.js.snap     |  96 +++----
 .../config-provider/__tests__/index.test.js   |   6 +-
 .../__snapshots__/DrawerEvent.test.js.snap    |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  46 ++--
 .../__tests__/__snapshots__/demo.test.js.snap |  46 ++--
 .../dropdown-button.test.js.snap              |   8 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  18 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  18 +-
 .../__snapshots__/Search.test.js.snap         |  14 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  24 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  24 +-
 .../__snapshots__/index.test.js.snap          | 260 +++++++++---------
 .../__snapshots__/demo-extend.test.ts.snap    |   2 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  14 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  14 +-
 .../__snapshots__/Modal.test.js.snap          |   4 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  28 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  28 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   8 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   8 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  22 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  22 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  60 ++--
 .../__tests__/__snapshots__/demo.test.js.snap |  24 +-
 .../__snapshots__/index.test.js.snap          |   6 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  36 +--
 .../__tests__/__snapshots__/demo.test.js.snap |  36 +--
 .../__snapshots__/demo-extend.test.ts.snap    |   8 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   8 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   4 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   4 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   2 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   2 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  60 ++--
 .../__tests__/__snapshots__/demo.test.js.snap |  54 ++--
 .../__snapshots__/demo-extend.test.ts.snap    |  14 +-
 .../__tests__/__snapshots__/demo.test.js.snap |  14 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  16 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   6 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   8 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   8 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   2 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  66 ++---
 .../__tests__/__snapshots__/demo.test.js.snap |  66 ++---
 .../__snapshots__/tooltip.test.js.snap        |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   4 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   4 +-
 .../__snapshots__/demo-extend.test.ts.snap    |   2 +-
 .../__tests__/__snapshots__/demo.test.js.snap |   2 +-
 .../__snapshots__/demo-extend.test.ts.snap    |  32 +--
 .../__tests__/__snapshots__/demo.test.js.snap |  32 +--
 70 files changed, 766 insertions(+), 766 deletions(-)

diff --git a/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap
index 82f95baa2d..a77adba253 100644
--- a/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/affix/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -71,7 +71,7 @@ exports[`renders ./components/affix/demo/on-change.md extend context correctly 1
     class=""
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
diff --git a/components/affix/__tests__/__snapshots__/demo.test.ts.snap b/components/affix/__tests__/__snapshots__/demo.test.ts.snap
index 0c5f62d39f..fca263f7d5 100644
--- a/components/affix/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/affix/__tests__/__snapshots__/demo.test.ts.snap
@@ -71,7 +71,7 @@ exports[`renders ./components/affix/demo/on-change.md correctly 1`] = `
     class=""
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
diff --git a/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap
index 8bb521e594..fc0e64ba1d 100644
--- a/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/alert/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -118,7 +118,7 @@ Array [
       class="ant-alert-action"
     >
       <button
-        class="ant-btn ant-btn-sm ant-btn-dangerous"
+        class="ant-btn ant-btn-default ant-btn-sm ant-btn-dangerous"
         type="button"
       >
         <span>
@@ -954,7 +954,7 @@ Array [
 
 exports[`renders ./components/alert/demo/error-boundary.md extend context correctly 1`] = `
 <button
-  class="ant-btn ant-btn-dangerous"
+  class="ant-btn ant-btn-default ant-btn-dangerous"
   type="button"
 >
   <span>
diff --git a/components/alert/__tests__/__snapshots__/demo.test.ts.snap b/components/alert/__tests__/__snapshots__/demo.test.ts.snap
index d8b7f5f609..8e0d375fe3 100644
--- a/components/alert/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/alert/__tests__/__snapshots__/demo.test.ts.snap
@@ -118,7 +118,7 @@ Array [
       class="ant-alert-action"
     >
       <button
-        class="ant-btn ant-btn-sm ant-btn-dangerous"
+        class="ant-btn ant-btn-default ant-btn-sm ant-btn-dangerous"
         type="button"
       >
         <span>
@@ -954,7 +954,7 @@ Array [
 
 exports[`renders ./components/alert/demo/error-boundary.md correctly 1`] = `
 <button
-  class="ant-btn ant-btn-dangerous"
+  class="ant-btn ant-btn-default ant-btn-dangerous"
   type="button"
 >
   <span>
diff --git a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
index 61727a2d0c..6bedc29b73 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -129,7 +129,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md extend cont
             class="ant-input-group-addon"
           >
             <button
-              class="ant-btn ant-btn-lg ant-btn-icon-only ant-input-search-button"
+              class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only ant-input-search-button"
               type="button"
             >
               <span
@@ -1395,7 +1395,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
                         class="ant-input-group-addon"
                       >
                         <button
-                          class="ant-btn ant-btn-icon-only ant-input-search-button"
+                          class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
                           type="button"
                         >
                           <span
@@ -1618,7 +1618,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md extend context co
                         class="ant-input-group-addon"
                       >
                         <button
-                          class="ant-btn ant-btn-icon-only ant-input-search-button"
+                          class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
                           type="button"
                         >
                           <span
diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
index a85b5c4a56..a8fb956f8c 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
@@ -101,7 +101,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
             class="ant-input-group-addon"
           >
             <button
-              class="ant-btn ant-btn-lg ant-btn-icon-only ant-input-search-button"
+              class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only ant-input-search-button"
               type="button"
             >
               <span
@@ -751,7 +751,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                         class="ant-input-group-addon"
                       >
                         <button
-                          class="ant-btn ant-btn-icon-only ant-input-search-button"
+                          class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
                           type="button"
                         >
                           <span
@@ -900,7 +900,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                         class="ant-input-group-addon"
                       >
                         <button
-                          class="ant-btn ant-btn-icon-only ant-input-search-button"
+                          class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
                           type="button"
                         >
                           <span
diff --git a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
index 30e3a5ee8e..303b950a16 100644
--- a/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/avatar/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -294,7 +294,7 @@ Array [
     </span>
   </span>,
   <button
-    class="ant-btn ant-btn-sm"
+    class="ant-btn ant-btn-default ant-btn-sm"
     style="margin:0 16px;vertical-align:middle"
     type="button"
   >
@@ -303,7 +303,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-sm"
+    class="ant-btn ant-btn-default ant-btn-sm"
     style="vertical-align:middle"
     type="button"
   >
@@ -869,7 +869,7 @@ exports[`renders ./components/avatar/demo/responsive.md extend context correctly
 exports[`renders ./components/avatar/demo/toggle-debug.md extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -877,7 +877,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -885,7 +885,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
diff --git a/components/avatar/__tests__/__snapshots__/demo.test.js.snap b/components/avatar/__tests__/__snapshots__/demo.test.js.snap
index a735a4450d..35de4011c2 100644
--- a/components/avatar/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/avatar/__tests__/__snapshots__/demo.test.js.snap
@@ -294,7 +294,7 @@ Array [
     </span>
   </span>,
   <button
-    class="ant-btn ant-btn-sm"
+    class="ant-btn ant-btn-default ant-btn-sm"
     style="margin:0 16px;vertical-align:middle"
     type="button"
   >
@@ -303,7 +303,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-sm"
+    class="ant-btn ant-btn-default ant-btn-sm"
     style="vertical-align:middle"
     type="button"
   >
@@ -548,7 +548,7 @@ exports[`renders ./components/avatar/demo/responsive.md correctly 1`] = `
 exports[`renders ./components/avatar/demo/toggle-debug.md correctly 1`] = `
 Array [
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -556,7 +556,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -564,7 +564,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
diff --git a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
index daecbe9d20..1a4caa717d 100644
--- a/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/badge/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -121,7 +121,7 @@ Array [
     class="ant-btn-group"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span
@@ -145,7 +145,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span
@@ -173,7 +173,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span
diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap
index 34f6f6672f..6a382dc7e6 100644
--- a/components/badge/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/badge/__tests__/__snapshots__/demo.test.js.snap
@@ -121,7 +121,7 @@ Array [
     class="ant-btn-group"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span
@@ -145,7 +145,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span
@@ -173,7 +173,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span
diff --git a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
index e9f3f099cd..ce9310f0bf 100644
--- a/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -11,7 +11,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -57,7 +57,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-block"
+    class="ant-btn ant-btn-default ant-btn-block"
     type="button"
   >
     <span>
@@ -94,7 +94,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-dangerous"
+    class="ant-btn ant-btn-default ant-btn-dangerous"
     type="button"
   >
     <span>
@@ -149,7 +149,7 @@ Array [
   </button>,
   <br />,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -157,7 +157,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     disabled=""
     type="button"
   >
@@ -221,7 +221,7 @@ Array [
   </button>,
   <br />,
   <button
-    class="ant-btn ant-btn-dangerous"
+    class="ant-btn ant-btn-default ant-btn-dangerous"
     type="button"
   >
     <span>
@@ -229,7 +229,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-dangerous"
+    class="ant-btn ant-btn-default ant-btn-dangerous"
     disabled=""
     type="button"
   >
@@ -277,7 +277,7 @@ Array [
     class="site-button-ghost-wrapper"
   >
     <button
-      class="ant-btn ant-btn-background-ghost"
+      class="ant-btn ant-btn-default ant-btn-background-ghost"
       type="button"
     >
       <span>
@@ -285,7 +285,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-background-ghost"
+      class="ant-btn ant-btn-default ant-btn-background-ghost"
       disabled=""
       type="button"
     >
@@ -310,7 +310,7 @@ exports[`renders ./components/button/demo/ghost.md extend context correctly 1`]
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-background-ghost"
+    class="ant-btn ant-btn-default ant-btn-background-ghost"
     type="button"
   >
     <span>
@@ -339,7 +339,7 @@ exports[`renders ./components/button/demo/ghost.md extend context correctly 1`]
 exports[`renders ./components/button/demo/icon.md extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-primary ant-btn-icon-only"
     type="button"
   >
     <span
@@ -387,7 +387,7 @@ Array [
     </div>
   </div>,
   <button
-    class="ant-btn ant-btn-primary ant-btn-circle"
+    class="ant-btn ant-btn-circle ant-btn-primary"
     type="button"
   >
     <span>
@@ -422,7 +422,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-circle ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only"
     type="button"
   >
     <span
@@ -470,7 +470,7 @@ Array [
     </div>
   </div>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span
@@ -498,7 +498,7 @@ Array [
   </button>,
   <br />,
   <button
-    class="ant-btn ant-btn-circle ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only"
     type="button"
   >
     <span
@@ -546,7 +546,7 @@ Array [
     </div>
   </div>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span
@@ -573,7 +573,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-dashed ant-btn-circle ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-icon-only"
     type="button"
   >
     <span
@@ -648,7 +648,7 @@ Array [
     </span>
   </button>,
   <a
-    class="ant-btn ant-btn-icon-only"
+    class="ant-btn ant-btn-default ant-btn-icon-only"
     href="https://www.google.com"
   >
     <span
@@ -674,7 +674,7 @@ Array [
   <br />,
   <br />,
   <button
-    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg ant-btn-icon-only"
     type="button"
   >
     <span
@@ -722,7 +722,7 @@ Array [
     </div>
   </div>,
   <button
-    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg"
+    class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg"
     type="button"
   >
     <span>
@@ -757,7 +757,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-circle ant-btn-lg ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-default ant-btn-lg ant-btn-icon-only"
     type="button"
   >
     <span
@@ -805,7 +805,7 @@ Array [
     </div>
   </div>,
   <button
-    class="ant-btn ant-btn-lg"
+    class="ant-btn ant-btn-default ant-btn-lg"
     type="button"
   >
     <span
@@ -833,7 +833,7 @@ Array [
   </button>,
   <br />,
   <button
-    class="ant-btn ant-btn-circle ant-btn-lg ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-default ant-btn-lg ant-btn-icon-only"
     type="button"
   >
     <span
@@ -881,7 +881,7 @@ Array [
     </div>
   </div>,
   <button
-    class="ant-btn ant-btn-lg"
+    class="ant-btn ant-btn-default ant-btn-lg"
     type="button"
   >
     <span
@@ -908,7 +908,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-dashed ant-btn-circle ant-btn-lg ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-lg ant-btn-icon-only"
     type="button"
   >
     <span
@@ -983,7 +983,7 @@ Array [
     </span>
   </button>,
   <a
-    class="ant-btn ant-btn-lg ant-btn-icon-only"
+    class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
     href="https://www.google.com"
   >
     <span
@@ -1594,7 +1594,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1605,7 +1605,7 @@ Array [
     class="ant-btn-group ant-dropdown-button"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1613,7 +1613,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-icon-only ant-dropdown-trigger"
+      class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
       type="button"
     >
       <span
@@ -1899,7 +1899,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-lg"
+    class="ant-btn ant-btn-default ant-btn-lg"
     type="button"
   >
     <span>
@@ -1949,7 +1949,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg ant-btn-icon-only"
     type="button"
   >
     <span
@@ -1973,7 +1973,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg ant-btn-icon-only"
+    class="ant-btn ant-btn-round ant-btn-primary ant-btn-lg ant-btn-icon-only"
     type="button"
   >
     <span
@@ -1997,7 +1997,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg"
+    class="ant-btn ant-btn-round ant-btn-primary ant-btn-lg"
     type="button"
   >
     <span
diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
index 4172fde3dd..dd331c8dc0 100644
--- a/components/button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -11,7 +11,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -57,7 +57,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-block"
+    class="ant-btn ant-btn-default ant-btn-block"
     type="button"
   >
     <span>
@@ -94,7 +94,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-dangerous"
+    class="ant-btn ant-btn-default ant-btn-dangerous"
     type="button"
   >
     <span>
@@ -149,7 +149,7 @@ Array [
   </button>,
   <br />,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -157,7 +157,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     disabled=""
     type="button"
   >
@@ -221,7 +221,7 @@ Array [
   </button>,
   <br />,
   <button
-    class="ant-btn ant-btn-dangerous"
+    class="ant-btn ant-btn-default ant-btn-dangerous"
     type="button"
   >
     <span>
@@ -229,7 +229,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-dangerous"
+    class="ant-btn ant-btn-default ant-btn-dangerous"
     disabled=""
     type="button"
   >
@@ -277,7 +277,7 @@ Array [
     class="site-button-ghost-wrapper"
   >
     <button
-      class="ant-btn ant-btn-background-ghost"
+      class="ant-btn ant-btn-default ant-btn-background-ghost"
       type="button"
     >
       <span>
@@ -285,7 +285,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-background-ghost"
+      class="ant-btn ant-btn-default ant-btn-background-ghost"
       disabled=""
       type="button"
     >
@@ -310,7 +310,7 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-background-ghost"
+    class="ant-btn ant-btn-default ant-btn-background-ghost"
     type="button"
   >
     <span>
@@ -339,7 +339,7 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
 exports[`renders ./components/button/demo/icon.md correctly 1`] = `
 Array [
   <button
-    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-primary ant-btn-icon-only"
     type="button"
   >
     <span
@@ -363,7 +363,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-primary ant-btn-circle"
+    class="ant-btn ant-btn-circle ant-btn-primary"
     type="button"
   >
     <span>
@@ -398,7 +398,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-circle ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only"
     type="button"
   >
     <span
@@ -422,7 +422,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span
@@ -450,7 +450,7 @@ Array [
   </button>,
   <br />,
   <button
-    class="ant-btn ant-btn-circle ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-default ant-btn-icon-only"
     type="button"
   >
     <span
@@ -474,7 +474,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span
@@ -501,7 +501,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-dashed ant-btn-circle ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-icon-only"
     type="button"
   >
     <span
@@ -552,7 +552,7 @@ Array [
     </span>
   </button>,
   <a
-    class="ant-btn ant-btn-icon-only"
+    class="ant-btn ant-btn-default ant-btn-icon-only"
     href="https://www.google.com"
   >
     <span
@@ -578,7 +578,7 @@ Array [
   <br />,
   <br />,
   <button
-    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg ant-btn-icon-only"
     type="button"
   >
     <span
@@ -602,7 +602,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg"
+    class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg"
     type="button"
   >
     <span>
@@ -637,7 +637,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-circle ant-btn-lg ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-default ant-btn-lg ant-btn-icon-only"
     type="button"
   >
     <span
@@ -661,7 +661,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-lg"
+    class="ant-btn ant-btn-default ant-btn-lg"
     type="button"
   >
     <span
@@ -689,7 +689,7 @@ Array [
   </button>,
   <br />,
   <button
-    class="ant-btn ant-btn-circle ant-btn-lg ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-default ant-btn-lg ant-btn-icon-only"
     type="button"
   >
     <span
@@ -713,7 +713,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-lg"
+    class="ant-btn ant-btn-default ant-btn-lg"
     type="button"
   >
     <span
@@ -740,7 +740,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-dashed ant-btn-circle ant-btn-lg ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-dashed ant-btn-lg ant-btn-icon-only"
     type="button"
   >
     <span
@@ -791,7 +791,7 @@ Array [
     </span>
   </button>,
   <a
-    class="ant-btn ant-btn-lg ant-btn-icon-only"
+    class="ant-btn ant-btn-default ant-btn-lg ant-btn-icon-only"
     href="https://www.google.com"
   >
     <span
@@ -1258,7 +1258,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1269,7 +1269,7 @@ Array [
     class="ant-btn-group ant-dropdown-button"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1277,7 +1277,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-icon-only ant-dropdown-trigger"
+      class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
       type="button"
     >
       <span
@@ -1379,7 +1379,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-lg"
+    class="ant-btn ant-btn-default ant-btn-lg"
     type="button"
   >
     <span>
@@ -1429,7 +1429,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only"
+    class="ant-btn ant-btn-circle ant-btn-primary ant-btn-lg ant-btn-icon-only"
     type="button"
   >
     <span
@@ -1453,7 +1453,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg ant-btn-icon-only"
+    class="ant-btn ant-btn-round ant-btn-primary ant-btn-lg ant-btn-icon-only"
     type="button"
   >
     <span
@@ -1477,7 +1477,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg"
+    class="ant-btn ant-btn-round ant-btn-primary ant-btn-lg"
     type="button"
   >
     <span
diff --git a/components/button/__tests__/__snapshots__/index.test.tsx.snap b/components/button/__tests__/__snapshots__/index.test.tsx.snap
index 651851bda7..64ac5c4bd9 100644
--- a/components/button/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/button/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Button fixbug renders {0} , 0 and {false} 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   0
@@ -11,7 +11,7 @@ exports[`Button fixbug renders {0} , 0 and {false} 1`] = `
 
 exports[`Button fixbug renders {0} , 0 and {false} 2`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -22,14 +22,14 @@ exports[`Button fixbug renders {0} , 0 and {false} 2`] = `
 
 exports[`Button fixbug renders {0} , 0 and {false} 3`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 />
 `;
 
 exports[`Button renders Chinese characters correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -40,7 +40,7 @@ exports[`Button renders Chinese characters correctly 1`] = `
 
 exports[`Button renders Chinese characters correctly 2`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span
@@ -70,7 +70,7 @@ exports[`Button renders Chinese characters correctly 2`] = `
 
 exports[`Button renders Chinese characters correctly 3`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span
@@ -100,7 +100,7 @@ exports[`Button renders Chinese characters correctly 3`] = `
 
 exports[`Button renders Chinese characters correctly 4`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span
@@ -130,7 +130,7 @@ exports[`Button renders Chinese characters correctly 4`] = `
 
 exports[`Button renders Chinese characters correctly 5`] = `
 <button
-  class="ant-btn ant-btn-loading"
+  class="ant-btn ant-btn-default ant-btn-loading"
   type="button"
 >
   <span
@@ -164,7 +164,7 @@ exports[`Button renders Chinese characters correctly 5`] = `
 
 exports[`Button renders Chinese characters correctly 6`] = `
 <button
-  class="ant-btn ant-btn-loading"
+  class="ant-btn ant-btn-default ant-btn-loading"
   type="button"
 >
   <span
@@ -199,7 +199,7 @@ exports[`Button renders Chinese characters correctly 6`] = `
 
 exports[`Button renders Chinese characters correctly 7`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -210,7 +210,7 @@ exports[`Button renders Chinese characters correctly 7`] = `
 
 exports[`Button renders correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -221,21 +221,21 @@ exports[`Button renders correctly 1`] = `
 
 exports[`Button rtl render component should be rendered correctly in RTL direction 1`] = `
 <button
-  class="ant-btn ant-btn-rtl"
+  class="ant-btn ant-btn-default ant-btn-rtl"
   type="button"
 />
 `;
 
 exports[`Button rtl render component should be rendered correctly in RTL direction 2`] = `
 <button
-  class="ant-btn ant-btn-lg ant-btn-rtl"
+  class="ant-btn ant-btn-default ant-btn-lg ant-btn-rtl"
   type="button"
 />
 `;
 
 exports[`Button rtl render component should be rendered correctly in RTL direction 3`] = `
 <button
-  class="ant-btn ant-btn-sm ant-btn-rtl"
+  class="ant-btn ant-btn-default ant-btn-sm ant-btn-rtl"
   type="button"
 />
 `;
@@ -266,7 +266,7 @@ exports[`Button rtl render component should be rendered correctly in RTL directi
 
 exports[`Button should handle fragment as children 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -277,7 +277,7 @@ exports[`Button should handle fragment as children 1`] = `
 
 exports[`Button should merge text if children using variable 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -299,14 +299,14 @@ exports[`Button should not render as link button when href is undefined 1`] = `
 
 exports[`Button should render empty button without errors 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 />
 `;
 
 exports[`Button should support link button 1`] = `
 <a
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   href="https://ant.design"
   target="_blank"
 >
diff --git a/components/button/button.tsx b/components/button/button.tsx
index 215025ba7b..ee2622326f 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -136,7 +136,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   const {
     loading = false,
     prefixCls: customizePrefixCls,
-    type,
+    type = 'default',
     danger,
     shape = 'default',
     size: customizeSize,
@@ -237,8 +237,8 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
   const classes = classNames(
     prefixCls,
     {
+      [`${prefixCls}-${shape}`]: shape !== 'default' && shape, // Note: Shape also has `default`
       [`${prefixCls}-${type}`]: type,
-      [`${prefixCls}-${shape}`]: shape !== 'default' && shape,
       [`${prefixCls}-${sizeCls}`]: sizeCls,
       [`${prefixCls}-icon-only`]: !children && children !== 0 && !!iconType,
       [`${prefixCls}-background-ghost`]: ghost && !isUnborderedButtonType(type),
diff --git a/components/card/__tests__/__snapshots__/index.test.js.snap b/components/card/__tests__/__snapshots__/index.test.js.snap
index 3fc36d6673..7819e2e6a0 100644
--- a/components/card/__tests__/__snapshots__/index.test.js.snap
+++ b/components/card/__tests__/__snapshots__/index.test.js.snap
@@ -152,7 +152,7 @@ exports[`Card title should be vertically aligned 1`] = `
         class="ant-card-extra"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index 7817ae165f..8fb2f1be13 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -1173,7 +1173,7 @@ exports[`ConfigProvider components Breadcrumb prefixCls 1`] = `
 exports[`ConfigProvider components Button configProvider 1`] = `
 <div>
   <button
-    class="config-btn"
+    class="config-btn config-btn-default"
     type="button"
   >
     <span>
@@ -1184,7 +1184,7 @@ exports[`ConfigProvider components Button configProvider 1`] = `
     class="config-btn-group"
   >
     <button
-      class="config-btn"
+      class="config-btn config-btn-default"
       type="button"
     >
       <span>
@@ -1192,7 +1192,7 @@ exports[`ConfigProvider components Button configProvider 1`] = `
       </span>
     </button>
     <button
-      class="config-btn"
+      class="config-btn config-btn-default"
       type="button"
     >
       <span>
@@ -1206,7 +1206,7 @@ exports[`ConfigProvider components Button configProvider 1`] = `
 exports[`ConfigProvider components Button configProvider componentSize large 1`] = `
 <div>
   <button
-    class="config-btn config-btn-lg"
+    class="config-btn config-btn-default config-btn-lg"
     type="button"
   >
     <span>
@@ -1217,7 +1217,7 @@ exports[`ConfigProvider components Button configProvider componentSize large 1`]
     class="config-btn-group"
   >
     <button
-      class="config-btn config-btn-lg"
+      class="config-btn config-btn-default config-btn-lg"
       type="button"
     >
       <span>
@@ -1225,7 +1225,7 @@ exports[`ConfigProvider components Button configProvider componentSize large 1`]
       </span>
     </button>
     <button
-      class="config-btn config-btn-lg"
+      class="config-btn config-btn-default config-btn-lg"
       type="button"
     >
       <span>
@@ -1239,7 +1239,7 @@ exports[`ConfigProvider components Button configProvider componentSize large 1`]
 exports[`ConfigProvider components Button configProvider componentSize middle 1`] = `
 <div>
   <button
-    class="config-btn"
+    class="config-btn config-btn-default"
     type="button"
   >
     <span>
@@ -1250,7 +1250,7 @@ exports[`ConfigProvider components Button configProvider componentSize middle 1`
     class="config-btn-group"
   >
     <button
-      class="config-btn"
+      class="config-btn config-btn-default"
       type="button"
     >
       <span>
@@ -1258,7 +1258,7 @@ exports[`ConfigProvider components Button configProvider componentSize middle 1`
       </span>
     </button>
     <button
-      class="config-btn"
+      class="config-btn config-btn-default"
       type="button"
     >
       <span>
@@ -1272,7 +1272,7 @@ exports[`ConfigProvider components Button configProvider componentSize middle 1`
 exports[`ConfigProvider components Button configProvider virtual and dropdownMatchSelectWidth 1`] = `
 <div>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1283,7 +1283,7 @@ exports[`ConfigProvider components Button configProvider virtual and dropdownMat
     class="ant-btn-group"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1291,7 +1291,7 @@ exports[`ConfigProvider components Button configProvider virtual and dropdownMat
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1305,7 +1305,7 @@ exports[`ConfigProvider components Button configProvider virtual and dropdownMat
 exports[`ConfigProvider components Button normal 1`] = `
 <div>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1316,7 +1316,7 @@ exports[`ConfigProvider components Button normal 1`] = `
     class="ant-btn-group"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1324,7 +1324,7 @@ exports[`ConfigProvider components Button normal 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1338,7 +1338,7 @@ exports[`ConfigProvider components Button normal 1`] = `
 exports[`ConfigProvider components Button prefixCls 1`] = `
 <div>
   <button
-    class="prefix-Button"
+    class="prefix-Button prefix-Button-default"
     type="button"
   >
     <span>
@@ -1349,7 +1349,7 @@ exports[`ConfigProvider components Button prefixCls 1`] = `
     class="prefix-Button"
   >
     <button
-      class="prefix-Button"
+      class="prefix-Button prefix-Button-default"
       type="button"
     >
       <span>
@@ -1357,7 +1357,7 @@ exports[`ConfigProvider components Button prefixCls 1`] = `
       </span>
     </button>
     <button
-      class="prefix-Button"
+      class="prefix-Button prefix-Button-default"
       type="button"
     >
       <span>
@@ -12671,7 +12671,7 @@ exports[`ConfigProvider components Dropdown configProvider 1`] = `
   class="config-btn-group config-dropdown-button"
 >
   <button
-    class="config-btn"
+    class="config-btn config-btn-default"
     type="button"
   >
     <span>
@@ -12679,7 +12679,7 @@ exports[`ConfigProvider components Dropdown configProvider 1`] = `
     </span>
   </button>
   <button
-    class="config-btn config-btn-icon-only config-dropdown-trigger"
+    class="config-btn config-btn-default config-btn-icon-only config-dropdown-trigger"
     type="button"
   >
     <span
@@ -12710,7 +12710,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize large 1
   class="config-btn-group config-dropdown-button"
 >
   <button
-    class="config-btn config-btn-lg"
+    class="config-btn config-btn-default config-btn-lg"
     type="button"
   >
     <span>
@@ -12718,7 +12718,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize large 1
     </span>
   </button>
   <button
-    class="config-btn config-btn-lg config-btn-icon-only config-dropdown-trigger"
+    class="config-btn config-btn-default config-btn-lg config-btn-icon-only config-dropdown-trigger"
     type="button"
   >
     <span
@@ -12749,7 +12749,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize middle
   class="config-btn-group config-dropdown-button"
 >
   <button
-    class="config-btn"
+    class="config-btn config-btn-default"
     type="button"
   >
     <span>
@@ -12757,7 +12757,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize middle
     </span>
   </button>
   <button
-    class="config-btn config-btn-icon-only config-dropdown-trigger"
+    class="config-btn config-btn-default config-btn-icon-only config-dropdown-trigger"
     type="button"
   >
     <span
@@ -12788,7 +12788,7 @@ exports[`ConfigProvider components Dropdown configProvider virtual and dropdownM
   class="ant-btn-group ant-dropdown-button"
 >
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -12796,7 +12796,7 @@ exports[`ConfigProvider components Dropdown configProvider virtual and dropdownM
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-icon-only ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
     type="button"
   >
     <span
@@ -12827,7 +12827,7 @@ exports[`ConfigProvider components Dropdown normal 1`] = `
   class="ant-btn-group ant-dropdown-button"
 >
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -12835,7 +12835,7 @@ exports[`ConfigProvider components Dropdown normal 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-icon-only ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
     type="button"
   >
     <span
@@ -12866,7 +12866,7 @@ exports[`ConfigProvider components Dropdown prefixCls 1`] = `
   class="ant-btn-group prefix-Dropdown"
 >
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -12874,7 +12874,7 @@ exports[`ConfigProvider components Dropdown prefixCls 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn ant-btn-icon-only ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
     type="button"
   >
     <span
@@ -13663,7 +13663,7 @@ exports[`ConfigProvider components Input configProvider 1`] = `
           class="config-input-group-addon"
         >
           <button
-            class="config-btn config-btn-icon-only config-input-search-button"
+            class="config-btn config-btn-default config-btn-icon-only config-input-search-button"
             type="button"
           >
             <span
@@ -13758,7 +13758,7 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`]
           class="config-input-group-addon"
         >
           <button
-            class="config-btn config-btn-lg config-btn-icon-only config-input-search-button"
+            class="config-btn config-btn-default config-btn-lg config-btn-icon-only config-input-search-button"
             type="button"
           >
             <span
@@ -13853,7 +13853,7 @@ exports[`ConfigProvider components Input configProvider componentSize middle 1`]
           class="config-input-group-addon"
         >
           <button
-            class="config-btn config-btn-icon-only config-input-search-button"
+            class="config-btn config-btn-default config-btn-icon-only config-input-search-button"
             type="button"
           >
             <span
@@ -13948,7 +13948,7 @@ exports[`ConfigProvider components Input configProvider virtual and dropdownMatc
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -14043,7 +14043,7 @@ exports[`ConfigProvider components Input normal 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -14138,7 +14138,7 @@ exports[`ConfigProvider components Input prefixCls 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-icon-only prefix-Input-button"
+            class="ant-btn ant-btn-default ant-btn-icon-only prefix-Input-button"
             type="button"
           >
             <span
@@ -15624,7 +15624,7 @@ exports[`ConfigProvider components Modal configProvider 1`] = `
             class="config-modal-footer"
           >
             <button
-              class="config-btn"
+              class="config-btn config-btn-default"
               type="button"
             >
               <span>
@@ -15716,7 +15716,7 @@ exports[`ConfigProvider components Modal configProvider componentSize large 1`]
             class="config-modal-footer"
           >
             <button
-              class="config-btn config-btn-lg"
+              class="config-btn config-btn-default config-btn-lg"
               type="button"
             >
               <span>
@@ -15808,7 +15808,7 @@ exports[`ConfigProvider components Modal configProvider componentSize middle 1`]
             class="config-modal-footer"
           >
             <button
-              class="config-btn"
+              class="config-btn config-btn-default"
               type="button"
             >
               <span>
@@ -15900,7 +15900,7 @@ exports[`ConfigProvider components Modal configProvider virtual and dropdownMatc
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -15992,7 +15992,7 @@ exports[`ConfigProvider components Modal normal 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -16084,7 +16084,7 @@ exports[`ConfigProvider components Modal prefixCls 1`] = `
             class="prefix-Modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -18091,7 +18091,7 @@ exports[`ConfigProvider components Popconfirm configProvider 1`] = `
               class="config-popover-buttons"
             >
               <button
-                class="config-btn config-btn-sm"
+                class="config-btn config-btn-default config-btn-sm"
                 type="button"
               >
                 <span>
@@ -18174,7 +18174,7 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize large
               class="config-popover-buttons"
             >
               <button
-                class="config-btn config-btn-sm"
+                class="config-btn config-btn-default config-btn-sm"
                 type="button"
               >
                 <span>
@@ -18257,7 +18257,7 @@ exports[`ConfigProvider components Popconfirm configProvider componentSize middl
               class="config-popover-buttons"
             >
               <button
-                class="config-btn config-btn-sm"
+                class="config-btn config-btn-default config-btn-sm"
                 type="button"
               >
                 <span>
@@ -18340,7 +18340,7 @@ exports[`ConfigProvider components Popconfirm configProvider virtual and dropdow
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -18423,7 +18423,7 @@ exports[`ConfigProvider components Popconfirm normal 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -18506,7 +18506,7 @@ exports[`ConfigProvider components Popconfirm prefixCls 1`] = `
               class="prefix-Popconfirm-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
diff --git a/components/config-provider/__tests__/index.test.js b/components/config-provider/__tests__/index.test.js
index 4b11c42a30..a6dc8a78f4 100644
--- a/components/config-provider/__tests__/index.test.js
+++ b/components/config-provider/__tests__/index.test.js
@@ -54,7 +54,7 @@ describe('ConfigProvider', () => {
       </ConfigProvider>,
     );
 
-    expect(wrapper.find('button').props().className).toEqual('bamboo-btn');
+    expect(wrapper.exists('button.bamboo-btn')).toBeTruthy();
   });
 
   it('dynamic prefixCls', () => {
@@ -76,9 +76,9 @@ describe('ConfigProvider', () => {
 
     const wrapper = mount(<DynamicPrefixCls />);
 
-    expect(wrapper.find('button').last().props().className).toEqual('bamboo-btn');
+    expect(wrapper.exists('button.bamboo-btn')).toBeTruthy();
     wrapper.find('.toggle-button').first().simulate('click');
-    expect(wrapper.find('button').last().props().className).toEqual('light-btn');
+    expect(wrapper.exists('button.light-btn')).toBeTruthy();
   });
 
   it('iconPrefixCls', () => {
diff --git a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
index 4658b9c993..f699b461b9 100644
--- a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
@@ -3,7 +3,7 @@
 exports[`Drawer render correctly 1`] = `
 <div>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
diff --git a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7ba1062ede..ff41a07fd6 100644
--- a/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`renders ./components/dropdown/demo/arrow.md extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-dropdown-trigger"
     type="button"
   >
     <span>
@@ -216,7 +216,7 @@ Array [
     </div>
   </div>,
   <button
-    class="ant-btn ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-dropdown-trigger"
     type="button"
   >
     <span>
@@ -429,7 +429,7 @@ Array [
     </div>
   </div>,
   <button
-    class="ant-btn ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-dropdown-trigger"
     type="button"
   >
     <span>
@@ -643,7 +643,7 @@ Array [
   </div>,
   <br />,
   <button
-    class="ant-btn ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-dropdown-trigger"
     type="button"
   >
     <span>
@@ -856,7 +856,7 @@ Array [
     </div>
   </div>,
   <button
-    class="ant-btn ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-dropdown-trigger"
     type="button"
   >
     <span>
@@ -1069,7 +1069,7 @@ Array [
     </div>
   </div>,
   <button
-    class="ant-btn ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-dropdown-trigger"
     type="button"
   >
     <span>
@@ -1797,7 +1797,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
       class="ant-btn-group ant-dropdown-button"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -1805,7 +1805,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -2079,7 +2079,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
       class="ant-btn-group ant-dropdown-button"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -2087,7 +2087,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -2361,7 +2361,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
       class="ant-btn-group ant-dropdown-button"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         disabled=""
         type="button"
       >
@@ -2370,7 +2370,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
         disabled=""
         type="button"
       >
@@ -2645,7 +2645,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
       class="ant-btn-group ant-dropdown-button"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -2677,7 +2677,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
         </div>
       </div>
       <button
-        class="ant-btn ant-btn-icon-only ant-btn-loading ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -2952,7 +2952,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md extend context co
     style="padding-bottom:8px"
   >
     <button
-      class="ant-btn ant-dropdown-trigger"
+      class="ant-btn ant-btn-default ant-dropdown-trigger"
       type="button"
     >
       <span>
@@ -4066,7 +4066,7 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
       class="ant-btn-group ant-dropdown-button"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -4074,7 +4074,7 @@ exports[`renders ./components/dropdown/demo/loading.md extend context correctly
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -5535,7 +5535,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -5750,7 +5750,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -5965,7 +5965,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
         style="padding-bottom:8px"
       >
         <button
-          class="ant-btn ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -6189,7 +6189,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -6404,7 +6404,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -6619,7 +6619,7 @@ exports[`renders ./components/dropdown/demo/placement.md extend context correctl
         style="padding-bottom:8px"
       >
         <button
-          class="ant-btn ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-dropdown-trigger"
           type="button"
         >
           <span>
diff --git a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
index 4e4aa98da4..ac10832018 100644
--- a/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/dropdown/__tests__/__snapshots__/demo.test.js.snap
@@ -3,7 +3,7 @@
 exports[`renders ./components/dropdown/demo/arrow.md correctly 1`] = `
 Array [
   <button
-    class="ant-btn ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-dropdown-trigger"
     type="button"
   >
     <span>
@@ -11,7 +11,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-dropdown-trigger"
     type="button"
   >
     <span>
@@ -19,7 +19,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-dropdown-trigger"
     type="button"
   >
     <span>
@@ -28,7 +28,7 @@ Array [
   </button>,
   <br />,
   <button
-    class="ant-btn ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-dropdown-trigger"
     type="button"
   >
     <span>
@@ -36,7 +36,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-dropdown-trigger"
     type="button"
   >
     <span>
@@ -44,7 +44,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-dropdown-trigger"
     type="button"
   >
     <span>
@@ -103,7 +103,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
       class="ant-btn-group ant-dropdown-button"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -111,7 +111,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -144,7 +144,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
       class="ant-btn-group ant-dropdown-button"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -152,7 +152,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -185,7 +185,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
       class="ant-btn-group ant-dropdown-button"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         disabled=""
         type="button"
       >
@@ -194,7 +194,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
         disabled=""
         type="button"
       >
@@ -228,7 +228,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
       class="ant-btn-group ant-dropdown-button"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -236,7 +236,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-icon-only ant-btn-loading ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -270,7 +270,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
     style="padding-bottom:8px"
   >
     <button
-      class="ant-btn ant-dropdown-trigger"
+      class="ant-btn ant-btn-default ant-dropdown-trigger"
       type="button"
     >
       <span>
@@ -534,7 +534,7 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
       class="ant-btn-group ant-dropdown-button"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -542,7 +542,7 @@ exports[`renders ./components/dropdown/demo/loading.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-btn-icon-only ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
         type="button"
       >
         <span
@@ -641,7 +641,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -654,7 +654,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -667,7 +667,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
         style="padding-bottom:8px"
       >
         <button
-          class="ant-btn ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -689,7 +689,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -702,7 +702,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-dropdown-trigger"
           type="button"
         >
           <span>
@@ -715,7 +715,7 @@ exports[`renders ./components/dropdown/demo/placement.md correctly 1`] = `
         style="padding-bottom:8px"
       >
         <button
-          class="ant-btn ant-dropdown-trigger"
+          class="ant-btn ant-btn-default ant-dropdown-trigger"
           type="button"
         >
           <span>
diff --git a/components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap b/components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap
index 36c779c63a..5d60222278 100644
--- a/components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap
+++ b/components/dropdown/__tests__/__snapshots__/dropdown-button.test.js.snap
@@ -5,11 +5,11 @@ exports[`DropdownButton rtl render component should be rendered correctly in RTL
   class="ant-btn-group ant-btn-group-rtl ant-dropdown-button"
 >
   <button
-    class="ant-btn ant-btn-rtl"
+    class="ant-btn ant-btn-default ant-btn-rtl"
     type="button"
   />
   <button
-    class="ant-btn ant-btn-icon-only ant-btn-rtl ant-dropdown-trigger ant-dropdown-rtl"
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-rtl ant-dropdown-trigger ant-dropdown-rtl"
     type="button"
   >
     <span
@@ -40,11 +40,11 @@ exports[`DropdownButton should support href like Button 1`] = `
   class="ant-btn-group ant-dropdown-button"
 >
   <a
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     href="https://ant.design"
   />
   <button
-    class="ant-btn ant-btn-icon-only ant-dropdown-trigger"
+    class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
     type="button"
   >
     <span
diff --git a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
index d1bfde83d6..377859a68c 100644
--- a/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -261,7 +261,7 @@ exports[`renders ./components/form/demo/advanced-search.md extend context correc
           </span>
         </button>
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           style="margin:0 8px"
           type="button"
         >
@@ -846,7 +846,7 @@ exports[`renders ./components/form/demo/control-hooks.md extend context correctl
             </span>
           </button>
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             type="button"
           >
             <span>
@@ -1112,7 +1112,7 @@ exports[`renders ./components/form/demo/control-ref.md extend context correctly
             </span>
           </button>
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             type="button"
           >
             <span>
@@ -2747,7 +2747,7 @@ exports[`renders ./components/form/demo/form-context.md extend context correctly
             </span>
           </button>
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             style="margin:0 8px"
             type="button"
           >
@@ -3920,7 +3920,7 @@ exports[`renders ./components/form/demo/ref-item.md extend context correctly 1`]
     </span>
   </button>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -5157,7 +5157,7 @@ exports[`renders ./components/form/demo/register.md extend context correctly 1`]
               style="padding-left:4px;padding-right:4px"
             >
               <button
-                class="ant-btn"
+                class="ant-btn ant-btn-default"
                 type="button"
               >
                 <span>
@@ -6890,7 +6890,7 @@ exports[`renders ./components/form/demo/size.md extend context correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             type="button"
           >
             <span>
@@ -15825,7 +15825,7 @@ exports[`renders ./components/form/demo/validate-other.md extend context correct
                   type="file"
                 />
                 <button
-                  class="ant-btn"
+                  class="ant-btn ant-btn-default"
                   type="button"
                 >
                   <span
@@ -20547,7 +20547,7 @@ exports[`renders ./components/form/demo/warning-only.md extend context correctly
               class="ant-space-item"
             >
               <button
-                class="ant-btn"
+                class="ant-btn ant-btn-default"
                 type="button"
               >
                 <span>
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index 8201258bc2..8dbd143577 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -261,7 +261,7 @@ exports[`renders ./components/form/demo/advanced-search.md correctly 1`] = `
           </span>
         </button>
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           style="margin:0 8px"
           type="button"
         >
@@ -747,7 +747,7 @@ exports[`renders ./components/form/demo/control-hooks.md correctly 1`] = `
             </span>
           </button>
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             type="button"
           >
             <span>
@@ -914,7 +914,7 @@ exports[`renders ./components/form/demo/control-ref.md correctly 1`] = `
             </span>
           </button>
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             type="button"
           >
             <span>
@@ -2385,7 +2385,7 @@ exports[`renders ./components/form/demo/form-context.md correctly 1`] = `
             </span>
           </button>
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             style="margin:0 8px"
             type="button"
           >
@@ -3558,7 +3558,7 @@ exports[`renders ./components/form/demo/ref-item.md correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -4404,7 +4404,7 @@ exports[`renders ./components/form/demo/register.md correctly 1`] = `
               style="padding-left:4px;padding-right:4px"
             >
               <button
-                class="ant-btn"
+                class="ant-btn ant-btn-default"
                 type="button"
               >
                 <span>
@@ -5327,7 +5327,7 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             type="button"
           >
             <span>
@@ -7050,7 +7050,7 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                   type="file"
                 />
                 <button
-                  class="ant-btn"
+                  class="ant-btn ant-btn-default"
                   type="button"
                 >
                   <span
@@ -8615,7 +8615,7 @@ exports[`renders ./components/form/demo/warning-only.md correctly 1`] = `
               class="ant-space-item"
             >
               <button
-                class="ant-btn"
+                class="ant-btn ant-btn-default"
                 type="button"
               >
                 <span>
diff --git a/components/input/__tests__/__snapshots__/Search.test.js.snap b/components/input/__tests__/__snapshots__/Search.test.js.snap
index d224e0be32..29de245a3a 100644
--- a/components/input/__tests__/__snapshots__/Search.test.js.snap
+++ b/components/input/__tests__/__snapshots__/Search.test.js.snap
@@ -16,7 +16,7 @@ exports[`Input.Search rtl render component should be rendered correctly in RTL d
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-icon-only ant-btn-rtl ant-input-search-button"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-rtl ant-input-search-button"
         type="button"
       >
         <span
@@ -71,7 +71,7 @@ exports[`Input.Search should support ReactNode suffix without error 1`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-icon-only ant-input-search-button"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
         type="button"
       >
         <span
@@ -115,7 +115,7 @@ exports[`Input.Search should support addonAfter 1`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-icon-only ant-input-search-button"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
         type="button"
       >
         <span
@@ -218,7 +218,7 @@ exports[`Input.Search should support addonAfter and suffix for loading 1`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-icon-only ant-btn-loading ant-input-search-button"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-input-search-button"
         type="button"
       >
         <span
@@ -325,7 +325,7 @@ exports[`Input.Search should support custom Button 1`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-input-search-button"
+        class="ant-btn ant-btn-default ant-input-search-button"
         type="button"
       >
         <span>
@@ -429,7 +429,7 @@ exports[`Input.Search should support invalid suffix 1`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-icon-only ant-input-search-button"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
         type="button"
       >
         <span
@@ -473,7 +473,7 @@ exports[`Input.Search should support loading 1`] = `
       class="ant-input-group-addon"
     >
       <button
-        class="ant-btn ant-btn-icon-only ant-btn-loading ant-input-search-button"
+        class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-input-search-button"
         type="button"
       >
         <span
diff --git a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
index f7d7cc1217..7d5a57b656 100644
--- a/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/input/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -5094,7 +5094,7 @@ exports[`renders ./components/input/demo/focus.md extend context correctly 1`] =
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -5107,7 +5107,7 @@ exports[`renders ./components/input/demo/focus.md extend context correctly 1`] =
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -5120,7 +5120,7 @@ exports[`renders ./components/input/demo/focus.md extend context correctly 1`] =
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -5133,7 +5133,7 @@ exports[`renders ./components/input/demo/focus.md extend context correctly 1`] =
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -5262,7 +5262,7 @@ exports[`renders ./components/input/demo/group.md extend context correctly 1`] =
       value="git@github.com:ant-design/ant-design.git"
     />
     <button
-      class="ant-btn ant-btn-icon-only"
+      class="ant-btn ant-btn-default ant-btn-icon-only"
       type="button"
     >
       <span
@@ -5510,7 +5510,7 @@ exports[`renders ./components/input/demo/group.md extend context correctly 1`] =
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -5580,7 +5580,7 @@ exports[`renders ./components/input/demo/group.md extend context correctly 1`] =
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -8886,7 +8886,7 @@ exports[`renders ./components/input/demo/search-input.md extend context correctl
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -8962,7 +8962,7 @@ exports[`renders ./components/input/demo/search-input.md extend context correctl
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -9043,7 +9043,7 @@ exports[`renders ./components/input/demo/search-input.md extend context correctl
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -9255,7 +9255,7 @@ Array [
         class="ant-input-group-addon"
       >
         <button
-          class="ant-btn ant-btn-icon-only ant-btn-loading ant-input-search-button"
+          class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-input-search-button"
           type="button"
         >
           <span
@@ -9539,7 +9539,7 @@ exports[`renders ./components/input/demo/textarea.md extend context correctly 1`
 exports[`renders ./components/input/demo/textarea-resize.md extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     style="margin-bottom:16px"
     type="button"
   >
diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
index 186e859af6..8df6ddb3fd 100644
--- a/components/input/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -1311,7 +1311,7 @@ exports[`renders ./components/input/demo/focus.md correctly 1`] = `
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -1324,7 +1324,7 @@ exports[`renders ./components/input/demo/focus.md correctly 1`] = `
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -1337,7 +1337,7 @@ exports[`renders ./components/input/demo/focus.md correctly 1`] = `
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -1350,7 +1350,7 @@ exports[`renders ./components/input/demo/focus.md correctly 1`] = `
         style="margin-right:8px;padding-bottom:8px"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -1479,7 +1479,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
       value="git@github.com:ant-design/ant-design.git"
     />
     <button
-      class="ant-btn ant-btn-icon-only"
+      class="ant-btn ant-btn-default ant-btn-icon-only"
       type="button"
     >
       <span
@@ -1621,7 +1621,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -1691,7 +1691,7 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -2660,7 +2660,7 @@ exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -2736,7 +2736,7 @@ exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -2817,7 +2817,7 @@ exports[`renders ./components/input/demo/search-input.md correctly 1`] = `
           class="ant-input-group-addon"
         >
           <button
-            class="ant-btn ant-btn-icon-only ant-input-search-button"
+            class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
             type="button"
           >
             <span
@@ -3029,7 +3029,7 @@ Array [
         class="ant-input-group-addon"
       >
         <button
-          class="ant-btn ant-btn-icon-only ant-btn-loading ant-input-search-button"
+          class="ant-btn ant-btn-default ant-btn-icon-only ant-btn-loading ant-input-search-button"
           type="button"
         >
           <span
@@ -3313,7 +3313,7 @@ exports[`renders ./components/input/demo/textarea.md correctly 1`] = `
 exports[`renders ./components/input/demo/textarea-resize.md correctly 1`] = `
 Array [
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     style="margin-bottom:16px"
     type="button"
   >
diff --git a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
index 13e7a6f06b..8de740a492 100644
--- a/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
+++ b/components/locale-provider/__tests__/__snapshots__/index.test.js.snap
@@ -5351,7 +5351,7 @@ exports[`Locale Provider should display the text as ar 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -6915,7 +6915,7 @@ exports[`Locale Provider should display the text as ar 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -10428,7 +10428,7 @@ exports[`Locale Provider should display the text as az 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -11992,7 +11992,7 @@ exports[`Locale Provider should display the text as az 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -15505,7 +15505,7 @@ exports[`Locale Provider should display the text as bg 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -17069,7 +17069,7 @@ exports[`Locale Provider should display the text as bg 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -20582,7 +20582,7 @@ exports[`Locale Provider should display the text as bn-bd 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -22146,7 +22146,7 @@ exports[`Locale Provider should display the text as bn-bd 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -25659,7 +25659,7 @@ exports[`Locale Provider should display the text as by 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -27223,7 +27223,7 @@ exports[`Locale Provider should display the text as by 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -30736,7 +30736,7 @@ exports[`Locale Provider should display the text as ca 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -32300,7 +32300,7 @@ exports[`Locale Provider should display the text as ca 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -35813,7 +35813,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -37377,7 +37377,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -40890,7 +40890,7 @@ exports[`Locale Provider should display the text as da 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -42454,7 +42454,7 @@ exports[`Locale Provider should display the text as da 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -45967,7 +45967,7 @@ exports[`Locale Provider should display the text as de 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -47531,7 +47531,7 @@ exports[`Locale Provider should display the text as de 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -51044,7 +51044,7 @@ exports[`Locale Provider should display the text as el 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -52608,7 +52608,7 @@ exports[`Locale Provider should display the text as el 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -56121,7 +56121,7 @@ exports[`Locale Provider should display the text as en 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -57685,7 +57685,7 @@ exports[`Locale Provider should display the text as en 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -61198,7 +61198,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -62762,7 +62762,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -66275,7 +66275,7 @@ exports[`Locale Provider should display the text as es 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -67839,7 +67839,7 @@ exports[`Locale Provider should display the text as es 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -71352,7 +71352,7 @@ exports[`Locale Provider should display the text as et 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -72916,7 +72916,7 @@ exports[`Locale Provider should display the text as et 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -76429,7 +76429,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -77993,7 +77993,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -81506,7 +81506,7 @@ exports[`Locale Provider should display the text as fi 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -83070,7 +83070,7 @@ exports[`Locale Provider should display the text as fi 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -86583,7 +86583,7 @@ exports[`Locale Provider should display the text as fr 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -88147,7 +88147,7 @@ exports[`Locale Provider should display the text as fr 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -91660,7 +91660,7 @@ exports[`Locale Provider should display the text as fr 2`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -93224,7 +93224,7 @@ exports[`Locale Provider should display the text as fr 2`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -96737,7 +96737,7 @@ exports[`Locale Provider should display the text as fr 3`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -98301,7 +98301,7 @@ exports[`Locale Provider should display the text as fr 3`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -101814,7 +101814,7 @@ exports[`Locale Provider should display the text as ga 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -103378,7 +103378,7 @@ exports[`Locale Provider should display the text as ga 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -106891,7 +106891,7 @@ exports[`Locale Provider should display the text as gl 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -108455,7 +108455,7 @@ exports[`Locale Provider should display the text as gl 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -111968,7 +111968,7 @@ exports[`Locale Provider should display the text as he 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -113532,7 +113532,7 @@ exports[`Locale Provider should display the text as he 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -117045,7 +117045,7 @@ exports[`Locale Provider should display the text as hi 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -118609,7 +118609,7 @@ exports[`Locale Provider should display the text as hi 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -122122,7 +122122,7 @@ exports[`Locale Provider should display the text as hr 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -123686,7 +123686,7 @@ exports[`Locale Provider should display the text as hr 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -127199,7 +127199,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -128763,7 +128763,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -132276,7 +132276,7 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -133840,7 +133840,7 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -137353,7 +137353,7 @@ exports[`Locale Provider should display the text as id 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -138917,7 +138917,7 @@ exports[`Locale Provider should display the text as id 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -142430,7 +142430,7 @@ exports[`Locale Provider should display the text as is 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -143994,7 +143994,7 @@ exports[`Locale Provider should display the text as is 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -147507,7 +147507,7 @@ exports[`Locale Provider should display the text as it 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -149071,7 +149071,7 @@ exports[`Locale Provider should display the text as it 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -152584,7 +152584,7 @@ exports[`Locale Provider should display the text as ja 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -154148,7 +154148,7 @@ exports[`Locale Provider should display the text as ja 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -157661,7 +157661,7 @@ exports[`Locale Provider should display the text as ka 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -159225,7 +159225,7 @@ exports[`Locale Provider should display the text as ka 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -162738,7 +162738,7 @@ exports[`Locale Provider should display the text as kk 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -164302,7 +164302,7 @@ exports[`Locale Provider should display the text as kk 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -167815,7 +167815,7 @@ exports[`Locale Provider should display the text as km 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -169379,7 +169379,7 @@ exports[`Locale Provider should display the text as km 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -172892,7 +172892,7 @@ exports[`Locale Provider should display the text as kn 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -174456,7 +174456,7 @@ exports[`Locale Provider should display the text as kn 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -177969,7 +177969,7 @@ exports[`Locale Provider should display the text as ko 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -179533,7 +179533,7 @@ exports[`Locale Provider should display the text as ko 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -183046,7 +183046,7 @@ exports[`Locale Provider should display the text as ku 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -184610,7 +184610,7 @@ exports[`Locale Provider should display the text as ku 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -188123,7 +188123,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -189687,7 +189687,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -193200,7 +193200,7 @@ exports[`Locale Provider should display the text as lt 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -194764,7 +194764,7 @@ exports[`Locale Provider should display the text as lt 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -198277,7 +198277,7 @@ exports[`Locale Provider should display the text as lv 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -199841,7 +199841,7 @@ exports[`Locale Provider should display the text as lv 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -203354,7 +203354,7 @@ exports[`Locale Provider should display the text as mk 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -204918,7 +204918,7 @@ exports[`Locale Provider should display the text as mk 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -208431,7 +208431,7 @@ exports[`Locale Provider should display the text as ml 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -209995,7 +209995,7 @@ exports[`Locale Provider should display the text as ml 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -213508,7 +213508,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -215072,7 +215072,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -218585,7 +218585,7 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -220149,7 +220149,7 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -223662,7 +223662,7 @@ exports[`Locale Provider should display the text as nb 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -225226,7 +225226,7 @@ exports[`Locale Provider should display the text as nb 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -228739,7 +228739,7 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -230303,7 +230303,7 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -233816,7 +233816,7 @@ exports[`Locale Provider should display the text as nl 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -235380,7 +235380,7 @@ exports[`Locale Provider should display the text as nl 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -238893,7 +238893,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -240457,7 +240457,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -243970,7 +243970,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -245534,7 +245534,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -249047,7 +249047,7 @@ exports[`Locale Provider should display the text as pt 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -250611,7 +250611,7 @@ exports[`Locale Provider should display the text as pt 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -254124,7 +254124,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -255688,7 +255688,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -259201,7 +259201,7 @@ exports[`Locale Provider should display the text as ro 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -260765,7 +260765,7 @@ exports[`Locale Provider should display the text as ro 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -264278,7 +264278,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -265842,7 +265842,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -269355,7 +269355,7 @@ exports[`Locale Provider should display the text as sk 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -270919,7 +270919,7 @@ exports[`Locale Provider should display the text as sk 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -274432,7 +274432,7 @@ exports[`Locale Provider should display the text as sl 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -275996,7 +275996,7 @@ exports[`Locale Provider should display the text as sl 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -279509,7 +279509,7 @@ exports[`Locale Provider should display the text as sr 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -281073,7 +281073,7 @@ exports[`Locale Provider should display the text as sr 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -284586,7 +284586,7 @@ exports[`Locale Provider should display the text as sv 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -286150,7 +286150,7 @@ exports[`Locale Provider should display the text as sv 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -289663,7 +289663,7 @@ exports[`Locale Provider should display the text as ta 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -291227,7 +291227,7 @@ exports[`Locale Provider should display the text as ta 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -294740,7 +294740,7 @@ exports[`Locale Provider should display the text as th 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -296304,7 +296304,7 @@ exports[`Locale Provider should display the text as th 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -299817,7 +299817,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -301381,7 +301381,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -304894,7 +304894,7 @@ exports[`Locale Provider should display the text as uk 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -306458,7 +306458,7 @@ exports[`Locale Provider should display the text as uk 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -309971,7 +309971,7 @@ exports[`Locale Provider should display the text as ur 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -311535,7 +311535,7 @@ exports[`Locale Provider should display the text as ur 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -315048,7 +315048,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -316612,7 +316612,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -320125,7 +320125,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -321689,7 +321689,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -325202,7 +325202,7 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -326766,7 +326766,7 @@ exports[`Locale Provider should display the text as zh-hk 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
@@ -330279,7 +330279,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -331843,7 +331843,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
             class="ant-modal-footer"
           >
             <button
-              class="ant-btn"
+              class="ant-btn ant-btn-default"
               type="button"
             >
               <span>
diff --git a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
index 1ac579e19d..b4fa0ec84f 100644
--- a/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/mentions/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -137,7 +137,7 @@ exports[`renders ./components/mentions/demo/form.md extend context correctly 1`]
           </button>
              
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             type="button"
           >
             <span>
diff --git a/components/mentions/__tests__/__snapshots__/demo.test.js.snap b/components/mentions/__tests__/__snapshots__/demo.test.js.snap
index cbc7404939..8440ca56a2 100644
--- a/components/mentions/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/mentions/__tests__/__snapshots__/demo.test.js.snap
@@ -137,7 +137,7 @@ exports[`renders ./components/mentions/demo/form.md correctly 1`] = `
           </button>
              
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             type="button"
           >
             <span>
diff --git a/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap
index 466199a057..aaf34e8b5c 100644
--- a/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/message/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`renders ./components/message/demo/custom-style.md extend context correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -13,7 +13,7 @@ exports[`renders ./components/message/demo/custom-style.md extend context correc
 
 exports[`renders ./components/message/demo/duration.md extend context correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -46,7 +46,7 @@ exports[`renders ./components/message/demo/info.md extend context correctly 1`]
 
 exports[`renders ./components/message/demo/loading.md extend context correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -64,7 +64,7 @@ exports[`renders ./components/message/demo/other.md extend context correctly 1`]
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -77,7 +77,7 @@ exports[`renders ./components/message/demo/other.md extend context correctly 1`]
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -89,7 +89,7 @@ exports[`renders ./components/message/demo/other.md extend context correctly 1`]
     class="ant-space-item"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -102,7 +102,7 @@ exports[`renders ./components/message/demo/other.md extend context correctly 1`]
 
 exports[`renders ./components/message/demo/thenable.md extend context correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
diff --git a/components/message/__tests__/__snapshots__/demo.test.js.snap b/components/message/__tests__/__snapshots__/demo.test.js.snap
index 20ad7eb7e3..fb50c7859a 100644
--- a/components/message/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/message/__tests__/__snapshots__/demo.test.js.snap
@@ -2,7 +2,7 @@
 
 exports[`renders ./components/message/demo/custom-style.md correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -13,7 +13,7 @@ exports[`renders ./components/message/demo/custom-style.md correctly 1`] = `
 
 exports[`renders ./components/message/demo/duration.md correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -46,7 +46,7 @@ exports[`renders ./components/message/demo/info.md correctly 1`] = `
 
 exports[`renders ./components/message/demo/loading.md correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -64,7 +64,7 @@ exports[`renders ./components/message/demo/other.md correctly 1`] = `
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -77,7 +77,7 @@ exports[`renders ./components/message/demo/other.md correctly 1`] = `
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -89,7 +89,7 @@ exports[`renders ./components/message/demo/other.md correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -102,7 +102,7 @@ exports[`renders ./components/message/demo/other.md correctly 1`] = `
 
 exports[`renders ./components/message/demo/thenable.md correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
diff --git a/components/modal/__tests__/__snapshots__/Modal.test.js.snap b/components/modal/__tests__/__snapshots__/Modal.test.js.snap
index c73b489c08..ce43823dd2 100644
--- a/components/modal/__tests__/__snapshots__/Modal.test.js.snap
+++ b/components/modal/__tests__/__snapshots__/Modal.test.js.snap
@@ -69,7 +69,7 @@ exports[`Modal render correctly 1`] = `
                 class="ant-modal-footer"
               >
                 <button
-                  class="ant-btn"
+                  class="ant-btn ant-btn-default"
                   type="button"
                 >
                   <span>
@@ -225,7 +225,7 @@ exports[`Modal support closeIcon 1`] = `
           class="ant-modal-footer"
         >
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             type="button"
           >
             <span>
diff --git a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
index 8e95a247a0..e542b889b3 100644
--- a/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/modal/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -43,7 +43,7 @@ exports[`renders ./components/modal/demo/confirm.md extend context correctly 1`]
     style="margin-right:8px;padding-bottom:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -56,7 +56,7 @@ exports[`renders ./components/modal/demo/confirm.md extend context correctly 1`]
     style="margin-right:8px;padding-bottom:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -95,7 +95,7 @@ exports[`renders ./components/modal/demo/confirm.md extend context correctly 1`]
 
 exports[`renders ./components/modal/demo/confirm-router.md extend context correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -135,7 +135,7 @@ exports[`renders ./components/modal/demo/hooks.md extend context correctly 1`] =
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -148,7 +148,7 @@ exports[`renders ./components/modal/demo/hooks.md extend context correctly 1`] =
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -161,7 +161,7 @@ exports[`renders ./components/modal/demo/hooks.md extend context correctly 1`] =
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -173,7 +173,7 @@ exports[`renders ./components/modal/demo/hooks.md extend context correctly 1`] =
     class="ant-space-item"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -194,7 +194,7 @@ exports[`renders ./components/modal/demo/info.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -207,7 +207,7 @@ exports[`renders ./components/modal/demo/info.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -220,7 +220,7 @@ exports[`renders ./components/modal/demo/info.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -233,7 +233,7 @@ exports[`renders ./components/modal/demo/info.md extend context correctly 1`] =
     style="padding-bottom:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -265,7 +265,7 @@ exports[`renders ./components/modal/demo/locale.md extend context correctly 1`]
     class="ant-space-item"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -278,7 +278,7 @@ exports[`renders ./components/modal/demo/locale.md extend context correctly 1`]
 
 exports[`renders ./components/modal/demo/manual.md extend context correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -289,7 +289,7 @@ exports[`renders ./components/modal/demo/manual.md extend context correctly 1`]
 
 exports[`renders ./components/modal/demo/modal-render.md extend context correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
diff --git a/components/modal/__tests__/__snapshots__/demo.test.js.snap b/components/modal/__tests__/__snapshots__/demo.test.js.snap
index ff51051b2a..69f56e5901 100644
--- a/components/modal/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/modal/__tests__/__snapshots__/demo.test.js.snap
@@ -43,7 +43,7 @@ exports[`renders ./components/modal/demo/confirm.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -56,7 +56,7 @@ exports[`renders ./components/modal/demo/confirm.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -95,7 +95,7 @@ exports[`renders ./components/modal/demo/confirm.md correctly 1`] = `
 
 exports[`renders ./components/modal/demo/confirm-router.md correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -135,7 +135,7 @@ exports[`renders ./components/modal/demo/hooks.md correctly 1`] = `
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -148,7 +148,7 @@ exports[`renders ./components/modal/demo/hooks.md correctly 1`] = `
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -161,7 +161,7 @@ exports[`renders ./components/modal/demo/hooks.md correctly 1`] = `
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -173,7 +173,7 @@ exports[`renders ./components/modal/demo/hooks.md correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -194,7 +194,7 @@ exports[`renders ./components/modal/demo/info.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -207,7 +207,7 @@ exports[`renders ./components/modal/demo/info.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -220,7 +220,7 @@ exports[`renders ./components/modal/demo/info.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -233,7 +233,7 @@ exports[`renders ./components/modal/demo/info.md correctly 1`] = `
     style="padding-bottom:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -265,7 +265,7 @@ exports[`renders ./components/modal/demo/locale.md correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -278,7 +278,7 @@ exports[`renders ./components/modal/demo/locale.md correctly 1`] = `
 
 exports[`renders ./components/modal/demo/manual.md correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -289,7 +289,7 @@ exports[`renders ./components/modal/demo/manual.md correctly 1`] = `
 
 exports[`renders ./components/modal/demo/modal-render.md correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
diff --git a/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
index 00ddf7235f..55b6e2fd12 100644
--- a/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -361,7 +361,7 @@ exports[`renders ./components/notification/demo/with-icon.md extend context corr
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -374,7 +374,7 @@ exports[`renders ./components/notification/demo/with-icon.md extend context corr
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -387,7 +387,7 @@ exports[`renders ./components/notification/demo/with-icon.md extend context corr
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -399,7 +399,7 @@ exports[`renders ./components/notification/demo/with-icon.md extend context corr
     class="ant-space-item"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
diff --git a/components/notification/__tests__/__snapshots__/demo.test.js.snap b/components/notification/__tests__/__snapshots__/demo.test.js.snap
index 5659351ece..7717828a77 100644
--- a/components/notification/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/notification/__tests__/__snapshots__/demo.test.js.snap
@@ -361,7 +361,7 @@ exports[`renders ./components/notification/demo/with-icon.md correctly 1`] = `
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -374,7 +374,7 @@ exports[`renders ./components/notification/demo/with-icon.md correctly 1`] = `
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -387,7 +387,7 @@ exports[`renders ./components/notification/demo/with-icon.md correctly 1`] = `
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -399,7 +399,7 @@ exports[`renders ./components/notification/demo/with-icon.md correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
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 c35fce913f..23b5f206f9 100644
--- a/components/page-header/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/page-header/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -59,7 +59,7 @@ Array [
         class="ant-page-header-heading-extra"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -67,7 +67,7 @@ Array [
           </span>
         </button>
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -273,7 +273,7 @@ Array [
         class="ant-page-header-heading-extra"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -281,7 +281,7 @@ Array [
           </span>
         </button>
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -621,7 +621,7 @@ exports[`renders ./components/page-header/demo/content.md extend context correct
       class="ant-page-header-heading-extra"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -629,7 +629,7 @@ exports[`renders ./components/page-header/demo/content.md extend context correct
         </span>
       </button>
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -645,7 +645,7 @@ exports[`renders ./components/page-header/demo/content.md extend context correct
         </span>
       </button>
       <button
-        class="ant-btn ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-dropdown-trigger"
         style="border:none;padding:0"
         type="button"
       >
@@ -1001,7 +1001,7 @@ exports[`renders ./components/page-header/demo/ghost.md extend context correctly
         class="ant-page-header-heading-extra"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -1009,7 +1009,7 @@ exports[`renders ./components/page-header/demo/ghost.md extend context correctly
           </span>
         </button>
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -1209,7 +1209,7 @@ exports[`renders ./components/page-header/demo/responsive.md extend context corr
       class="ant-page-header-heading-extra"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -1217,7 +1217,7 @@ exports[`renders ./components/page-header/demo/responsive.md extend context corr
         </span>
       </button>
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
diff --git a/components/page-header/__tests__/__snapshots__/demo.test.js.snap b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
index 4a46047a8b..13297d3ab8 100644
--- a/components/page-header/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/page-header/__tests__/__snapshots__/demo.test.js.snap
@@ -59,7 +59,7 @@ Array [
         class="ant-page-header-heading-extra"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -67,7 +67,7 @@ Array [
           </span>
         </button>
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -273,7 +273,7 @@ Array [
         class="ant-page-header-heading-extra"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -281,7 +281,7 @@ Array [
           </span>
         </button>
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -621,7 +621,7 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
       class="ant-page-header-heading-extra"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -629,7 +629,7 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -645,7 +645,7 @@ exports[`renders ./components/page-header/demo/content.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn ant-dropdown-trigger"
+        class="ant-btn ant-btn-default ant-dropdown-trigger"
         style="border:none;padding:0"
         type="button"
       >
@@ -799,7 +799,7 @@ exports[`renders ./components/page-header/demo/ghost.md correctly 1`] = `
         class="ant-page-header-heading-extra"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -807,7 +807,7 @@ exports[`renders ./components/page-header/demo/ghost.md correctly 1`] = `
           </span>
         </button>
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -1007,7 +1007,7 @@ exports[`renders ./components/page-header/demo/responsive.md correctly 1`] = `
       class="ant-page-header-heading-extra"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -1015,7 +1015,7 @@ exports[`renders ./components/page-header/demo/responsive.md correctly 1`] = `
         </span>
       </button>
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
diff --git a/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap
index e93a8bb3d5..1f8a149cd4 100644
--- a/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/popconfirm/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -64,7 +64,7 @@ Array [
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -149,7 +149,7 @@ Array [
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -234,7 +234,7 @@ exports[`renders ./components/popconfirm/demo/dynamic-trigger.md extend context
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -339,7 +339,7 @@ Array [
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -424,7 +424,7 @@ Array [
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
@@ -456,7 +456,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
     style="margin-left:70px;white-space:nowrap"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -517,7 +517,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
                 class="ant-popover-buttons"
               >
                 <button
-                  class="ant-btn ant-btn-sm"
+                  class="ant-btn ant-btn-default ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -539,7 +539,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -600,7 +600,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
                 class="ant-popover-buttons"
               >
                 <button
-                  class="ant-btn ant-btn-sm"
+                  class="ant-btn ant-btn-default ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -622,7 +622,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -683,7 +683,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
                 class="ant-popover-buttons"
               >
                 <button
-                  class="ant-btn ant-btn-sm"
+                  class="ant-btn ant-btn-default ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -709,7 +709,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
     style="width:70px;float:left"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -770,7 +770,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
                 class="ant-popover-buttons"
               >
                 <button
-                  class="ant-btn ant-btn-sm"
+                  class="ant-btn ant-btn-default ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -792,7 +792,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -853,7 +853,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
                 class="ant-popover-buttons"
               >
                 <button
-                  class="ant-btn ant-btn-sm"
+                  class="ant-btn ant-btn-default ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -875,7 +875,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -936,7 +936,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
                 class="ant-popover-buttons"
               >
                 <button
-                  class="ant-btn ant-btn-sm"
+                  class="ant-btn ant-btn-default ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -962,7 +962,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
     style="width:70px;margin-left:304px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1023,7 +1023,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
                 class="ant-popover-buttons"
               >
                 <button
-                  class="ant-btn ant-btn-sm"
+                  class="ant-btn ant-btn-default ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -1045,7 +1045,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1106,7 +1106,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
                 class="ant-popover-buttons"
               >
                 <button
-                  class="ant-btn ant-btn-sm"
+                  class="ant-btn ant-btn-default ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -1128,7 +1128,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1189,7 +1189,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
                 class="ant-popover-buttons"
               >
                 <button
-                  class="ant-btn ant-btn-sm"
+                  class="ant-btn ant-btn-default ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -1215,7 +1215,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
     style="margin-left:70px;clear:both;white-space:nowrap"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1276,7 +1276,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
                 class="ant-popover-buttons"
               >
                 <button
-                  class="ant-btn ant-btn-sm"
+                  class="ant-btn ant-btn-default ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -1298,7 +1298,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1359,7 +1359,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
                 class="ant-popover-buttons"
               >
                 <button
-                  class="ant-btn ant-btn-sm"
+                  class="ant-btn ant-btn-default ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -1381,7 +1381,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1442,7 +1442,7 @@ exports[`renders ./components/popconfirm/demo/placement.md extend context correc
                 class="ant-popover-buttons"
               >
                 <button
-                  class="ant-btn ant-btn-sm"
+                  class="ant-btn ant-btn-default ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -1531,7 +1531,7 @@ Array [
               class="ant-popover-buttons"
             >
               <button
-                class="ant-btn ant-btn-sm"
+                class="ant-btn ant-btn-default ant-btn-sm"
                 type="button"
               >
                 <span>
diff --git a/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap b/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap
index ea79b71bf1..ca5d35422b 100644
--- a/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/popconfirm/__tests__/__snapshots__/demo.test.js.snap
@@ -69,7 +69,7 @@ exports[`renders ./components/popconfirm/demo/placement.md correctly 1`] = `
     style="margin-left:70px;white-space:nowrap"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -77,7 +77,7 @@ exports[`renders ./components/popconfirm/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -85,7 +85,7 @@ exports[`renders ./components/popconfirm/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -97,7 +97,7 @@ exports[`renders ./components/popconfirm/demo/placement.md correctly 1`] = `
     style="width:70px;float:left"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -105,7 +105,7 @@ exports[`renders ./components/popconfirm/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -113,7 +113,7 @@ exports[`renders ./components/popconfirm/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -125,7 +125,7 @@ exports[`renders ./components/popconfirm/demo/placement.md correctly 1`] = `
     style="width:70px;margin-left:304px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -133,7 +133,7 @@ exports[`renders ./components/popconfirm/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -141,7 +141,7 @@ exports[`renders ./components/popconfirm/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -153,7 +153,7 @@ exports[`renders ./components/popconfirm/demo/placement.md correctly 1`] = `
     style="margin-left:70px;clear:both;white-space:nowrap"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -161,7 +161,7 @@ exports[`renders ./components/popconfirm/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -169,7 +169,7 @@ exports[`renders ./components/popconfirm/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
diff --git a/components/popconfirm/__tests__/__snapshots__/index.test.js.snap b/components/popconfirm/__tests__/__snapshots__/index.test.js.snap
index 46ad172ace..004b24fc4d 100644
--- a/components/popconfirm/__tests__/__snapshots__/index.test.js.snap
+++ b/components/popconfirm/__tests__/__snapshots__/index.test.js.snap
@@ -2,8 +2,8 @@
 
 exports[`Popconfirm rtl render component should be rendered correctly in RTL direction 1`] = `<span />`;
 
-exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
+exports[`Popconfirm should show overlay when trigger is clicked 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-default ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
 
-exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
+exports[`Popconfirm should show overlay when trigger is clicked 2`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popover-message-title\\">code</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-default ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
 
-exports[`Popconfirm shows content for render functions 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popover-message-title\\">some-title</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
+exports[`Popconfirm shows content for render functions 1`] = `"<div class=\\"ant-popover-content\\"><div class=\\"ant-popover-arrow\\"><span class=\\"ant-popover-arrow-content\\"></span></div><div class=\\"ant-popover-inner\\" role=\\"tooltip\\"><div class=\\"ant-popover-inner-content\\"><div class=\\"ant-popover-message\\"><span role=\\"img\\" aria-label=\\"exclamation-circle\\" class=\\"anticon anticon-exclamation-circle\\"><svg viewBox=\\"64 64 896 896\\" focusable=\\"false\\" data-icon=\\"exclamation-circle\\" width=\\"1em\\" height=\\"1em\\" fill=\\"currentColor\\" aria-hidden=\\"true\\"><path d=\\"M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z\\"></path></svg></span><div class=\\"ant-popover-message-title\\">some-title</div></div><div class=\\"ant-popover-buttons\\"><button type=\\"button\\" class=\\"ant-btn ant-btn-default ant-btn-sm\\"><span>Cancel</span></button><button type=\\"button\\" class=\\"ant-btn ant-btn-primary ant-btn-sm\\"><span>OK</span></button></div></div></div></div>"`;
diff --git a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
index 2e2b45f83a..55286e6bd0 100644
--- a/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/popover/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`renders ./components/popover/demo/arrow-point-at-center.md extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -49,7 +49,7 @@ Array [
     </div>
   </div>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -201,7 +201,7 @@ Array [
 exports[`renders ./components/popover/demo/hover-with-click.md extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -294,7 +294,7 @@ exports[`renders ./components/popover/demo/placement.md extend context correctly
     style="margin-left:70px;white-space:nowrap"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -344,7 +344,7 @@ exports[`renders ./components/popover/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -394,7 +394,7 @@ exports[`renders ./components/popover/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -448,7 +448,7 @@ exports[`renders ./components/popover/demo/placement.md extend context correctly
     style="width:70px;float:left"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -498,7 +498,7 @@ exports[`renders ./components/popover/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -548,7 +548,7 @@ exports[`renders ./components/popover/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -602,7 +602,7 @@ exports[`renders ./components/popover/demo/placement.md extend context correctly
     style="width:70px;margin-left:304px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -652,7 +652,7 @@ exports[`renders ./components/popover/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -702,7 +702,7 @@ exports[`renders ./components/popover/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -756,7 +756,7 @@ exports[`renders ./components/popover/demo/placement.md extend context correctly
     style="margin-left:70px;clear:both;white-space:nowrap"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -806,7 +806,7 @@ exports[`renders ./components/popover/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -856,7 +856,7 @@ exports[`renders ./components/popover/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -912,7 +912,7 @@ exports[`renders ./components/popover/demo/placement.md extend context correctly
 exports[`renders ./components/popover/demo/triggerType.md extend context correctly 1`] = `
 <div>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -960,7 +960,7 @@ exports[`renders ./components/popover/demo/triggerType.md extend context correct
     </div>
   </div>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1008,7 +1008,7 @@ exports[`renders ./components/popover/demo/triggerType.md extend context correct
     </div>
   </div>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
diff --git a/components/popover/__tests__/__snapshots__/demo.test.js.snap b/components/popover/__tests__/__snapshots__/demo.test.js.snap
index 086a2fa41f..bf4b03f1ce 100644
--- a/components/popover/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/popover/__tests__/__snapshots__/demo.test.js.snap
@@ -3,7 +3,7 @@
 exports[`renders ./components/popover/demo/arrow-point-at-center.md correctly 1`] = `
 Array [
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -11,7 +11,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -45,7 +45,7 @@ exports[`renders ./components/popover/demo/control.md correctly 1`] = `
 
 exports[`renders ./components/popover/demo/hover-with-click.md correctly 1`] = `
 <button
-  class="ant-btn"
+  class="ant-btn ant-btn-default"
   type="button"
 >
   <span>
@@ -62,7 +62,7 @@ exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
     style="margin-left:70px;white-space:nowrap"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -70,7 +70,7 @@ exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -78,7 +78,7 @@ exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -90,7 +90,7 @@ exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
     style="width:70px;float:left"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -98,7 +98,7 @@ exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -106,7 +106,7 @@ exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -118,7 +118,7 @@ exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
     style="width:70px;margin-left:304px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -126,7 +126,7 @@ exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -134,7 +134,7 @@ exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -146,7 +146,7 @@ exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
     style="margin-left:70px;clear:both;white-space:nowrap"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -154,7 +154,7 @@ exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -162,7 +162,7 @@ exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -176,7 +176,7 @@ exports[`renders ./components/popover/demo/placement.md correctly 1`] = `
 exports[`renders ./components/popover/demo/triggerType.md correctly 1`] = `
 <div>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -184,7 +184,7 @@ exports[`renders ./components/popover/demo/triggerType.md correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -192,7 +192,7 @@ exports[`renders ./components/popover/demo/triggerType.md correctly 1`] = `
     </span>
   </button>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
diff --git a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
index f451b1e757..8af9ef5c4d 100644
--- a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -261,7 +261,7 @@ Array [
     class="ant-btn-group"
   >
     <button
-      class="ant-btn ant-btn-icon-only"
+      class="ant-btn ant-btn-default ant-btn-icon-only"
       type="button"
     >
       <span
@@ -285,7 +285,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-icon-only"
+      class="ant-btn ant-btn-default ant-btn-icon-only"
       type="button"
     >
       <span
@@ -658,7 +658,7 @@ Array [
     class="ant-btn-group"
   >
     <button
-      class="ant-btn ant-btn-icon-only"
+      class="ant-btn ant-btn-default ant-btn-icon-only"
       type="button"
     >
       <span
@@ -682,7 +682,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-icon-only"
+      class="ant-btn ant-btn-default ant-btn-icon-only"
       type="button"
     >
       <span
diff --git a/components/progress/__tests__/__snapshots__/demo.test.js.snap b/components/progress/__tests__/__snapshots__/demo.test.js.snap
index 63ff0bc978..b4fa85ff12 100644
--- a/components/progress/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/progress/__tests__/__snapshots__/demo.test.js.snap
@@ -261,7 +261,7 @@ Array [
     class="ant-btn-group"
   >
     <button
-      class="ant-btn ant-btn-icon-only"
+      class="ant-btn ant-btn-default ant-btn-icon-only"
       type="button"
     >
       <span
@@ -285,7 +285,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-icon-only"
+      class="ant-btn ant-btn-default ant-btn-icon-only"
       type="button"
     >
       <span
@@ -658,7 +658,7 @@ Array [
     class="ant-btn-group"
   >
     <button
-      class="ant-btn ant-btn-icon-only"
+      class="ant-btn ant-btn-default ant-btn-icon-only"
       type="button"
     >
       <span
@@ -682,7 +682,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn ant-btn-icon-only"
+      class="ant-btn ant-btn-default ant-btn-icon-only"
       type="button"
     >
       <span
diff --git a/components/result/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/result/__tests__/__snapshots__/demo-extend.test.ts.snap
index de0dfb3e25..7b71e470f7 100644
--- a/components/result/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/result/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1118,7 +1118,7 @@ exports[`renders ./components/result/demo/error.md extend context correctly 1`]
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1305,7 +1305,7 @@ exports[`renders ./components/result/demo/success.md extend context correctly 1`
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
diff --git a/components/result/__tests__/__snapshots__/demo.test.js.snap b/components/result/__tests__/__snapshots__/demo.test.js.snap
index 706911cbd7..7a8a9e7658 100644
--- a/components/result/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/result/__tests__/__snapshots__/demo.test.js.snap
@@ -1118,7 +1118,7 @@ exports[`renders ./components/result/demo/error.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1305,7 +1305,7 @@ exports[`renders ./components/result/demo/success.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
diff --git a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
index 44877b162f..b2dd668aef 100644
--- a/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/select/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2428,7 +2428,7 @@ exports[`renders ./components/select/demo/debug.md extend context correctly 1`]
     AntDesign
   </span>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
diff --git a/components/select/__tests__/__snapshots__/demo.test.js.snap b/components/select/__tests__/__snapshots__/demo.test.js.snap
index 4530c0b237..bc0421d4b0 100644
--- a/components/select/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/select/__tests__/__snapshots__/demo.test.js.snap
@@ -1059,7 +1059,7 @@ exports[`renders ./components/select/demo/debug.md correctly 1`] = `
     AntDesign
   </span>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
diff --git a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
index 96d8785635..259207bae4 100644
--- a/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -61,7 +61,7 @@ exports[`renders ./components/skeleton/demo/children.md extend context correctly
     </p>
   </div>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
diff --git a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
index d93c28bb3c..92a75efccb 100644
--- a/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/skeleton/__tests__/__snapshots__/demo.test.js.snap
@@ -61,7 +61,7 @@ exports[`renders ./components/skeleton/demo/children.md correctly 1`] = `
     </p>
   </div>
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
diff --git a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
index 266b928ddc..e4907f8a9e 100644
--- a/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/space/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -195,7 +195,7 @@ exports[`renders ./components/space/demo/base.md extend context correctly 1`] =
             type="file"
           />
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             type="button"
           >
             <span
@@ -232,7 +232,7 @@ exports[`renders ./components/space/demo/base.md extend context correctly 1`] =
     class="ant-space-item"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -293,7 +293,7 @@ exports[`renders ./components/space/demo/base.md extend context correctly 1`] =
                 class="ant-popover-buttons"
               >
                 <button
-                  class="ant-btn ant-btn-sm"
+                  class="ant-btn ant-btn-default ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -394,7 +394,7 @@ Array [
       style="margin-right:8px"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -446,7 +446,7 @@ exports[`renders ./components/space/demo/debug.md extend context correctly 1`] =
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -465,7 +465,7 @@ exports[`renders ./components/space/demo/debug.md extend context correctly 1`] =
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -526,7 +526,7 @@ exports[`renders ./components/space/demo/debug.md extend context correctly 1`] =
                 class="ant-popover-buttons"
               >
                 <button
-                  class="ant-btn ant-btn-sm"
+                  class="ant-btn ant-btn-default ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -557,7 +557,7 @@ exports[`renders ./components/space/demo/debug.md extend context correctly 1`] =
       style="display:inline-block;cursor:not-allowed"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         disabled=""
         style="pointer-events:none"
         type="button"
@@ -621,7 +621,7 @@ exports[`renders ./components/space/demo/debug.md extend context correctly 1`] =
                 class="ant-popover-buttons"
               >
                 <button
-                  class="ant-btn ant-btn-sm"
+                  class="ant-btn ant-btn-default ant-btn-sm"
                   type="button"
                 >
                   <span>
@@ -803,7 +803,7 @@ Array [
       style="margin-right:8px"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -976,7 +976,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -989,7 +989,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1002,7 +1002,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1015,7 +1015,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1028,7 +1028,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1041,7 +1041,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1054,7 +1054,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1067,7 +1067,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1080,7 +1080,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1093,7 +1093,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1106,7 +1106,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1119,7 +1119,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1132,7 +1132,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1145,7 +1145,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1158,7 +1158,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1171,7 +1171,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1184,7 +1184,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1197,7 +1197,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1210,7 +1210,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1223,7 +1223,7 @@ exports[`renders ./components/space/demo/wrap.md extend context correctly 1`] =
     style="padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
diff --git a/components/space/__tests__/__snapshots__/demo.test.js.snap b/components/space/__tests__/__snapshots__/demo.test.js.snap
index e44d7782e7..9a26d2b2cb 100644
--- a/components/space/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/space/__tests__/__snapshots__/demo.test.js.snap
@@ -195,7 +195,7 @@ exports[`renders ./components/space/demo/base.md correctly 1`] = `
             type="file"
           />
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             type="button"
           >
             <span
@@ -232,7 +232,7 @@ exports[`renders ./components/space/demo/base.md correctly 1`] = `
     class="ant-space-item"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -295,7 +295,7 @@ Array [
       style="margin-right:8px"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -347,7 +347,7 @@ exports[`renders ./components/space/demo/debug.md correctly 1`] = `
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -366,7 +366,7 @@ exports[`renders ./components/space/demo/debug.md correctly 1`] = `
     style="margin-right:8px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -383,7 +383,7 @@ exports[`renders ./components/space/demo/debug.md correctly 1`] = `
       style="display:inline-block;cursor:not-allowed"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         disabled=""
         style="pointer-events:none"
         type="button"
@@ -554,7 +554,7 @@ Array [
       style="margin-right:8px"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -727,7 +727,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -740,7 +740,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -753,7 +753,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -766,7 +766,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -779,7 +779,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -792,7 +792,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -805,7 +805,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -818,7 +818,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -831,7 +831,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -844,7 +844,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -857,7 +857,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -870,7 +870,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -883,7 +883,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -896,7 +896,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -909,7 +909,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -922,7 +922,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -935,7 +935,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -948,7 +948,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -961,7 +961,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="margin-right:8px;padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -974,7 +974,7 @@ exports[`renders ./components/space/demo/wrap.md correctly 1`] = `
     style="padding-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
diff --git a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
index d449dfe0ec..3a85799724 100644
--- a/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/steps/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1496,7 +1496,7 @@ exports[`renders ./components/steps/demo/progress.md extend context correctly 1`
 exports[`renders ./components/steps/demo/progress-debug.md extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1504,7 +1504,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1512,7 +1512,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1520,7 +1520,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1528,7 +1528,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1536,7 +1536,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1544,7 +1544,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
diff --git a/components/steps/__tests__/__snapshots__/demo.test.js.snap b/components/steps/__tests__/__snapshots__/demo.test.js.snap
index 8444128cff..62e26cc1a9 100644
--- a/components/steps/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/steps/__tests__/__snapshots__/demo.test.js.snap
@@ -1376,7 +1376,7 @@ exports[`renders ./components/steps/demo/progress.md correctly 1`] = `
 exports[`renders ./components/steps/demo/progress-debug.md correctly 1`] = `
 Array [
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1384,7 +1384,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1392,7 +1392,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1400,7 +1400,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1408,7 +1408,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1416,7 +1416,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -1424,7 +1424,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
diff --git a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
index a69bedafd0..24fa04674c 100644
--- a/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/table/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -1363,7 +1363,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
                                   style="margin-right:8px"
                                 >
                                   <button
-                                    class="ant-btn ant-btn-sm"
+                                    class="ant-btn ant-btn-default ant-btn-sm"
                                     style="width:90px"
                                     type="button"
                                   >
@@ -1486,7 +1486,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
                                   style="margin-right:8px"
                                 >
                                   <button
-                                    class="ant-btn ant-btn-sm"
+                                    class="ant-btn ant-btn-default ant-btn-sm"
                                     style="width:90px"
                                     type="button"
                                   >
@@ -1687,7 +1687,7 @@ exports[`renders ./components/table/demo/custom-filter-panel.md extend context c
                                   style="margin-right:8px"
                                 >
                                   <button
-                                    class="ant-btn ant-btn-sm"
+                                    class="ant-btn ant-btn-default ant-btn-sm"
                                     style="width:90px"
                                     type="button"
                                   >
@@ -4766,7 +4766,7 @@ exports[`renders ./components/table/demo/edit-cell.md extend context correctly 1
                                   class="ant-popover-buttons"
                                 >
                                   <button
-                                    class="ant-btn ant-btn-sm"
+                                    class="ant-btn ant-btn-default ant-btn-sm"
                                     type="button"
                                   >
                                     <span>
@@ -4873,7 +4873,7 @@ exports[`renders ./components/table/demo/edit-cell.md extend context correctly 1
                                   class="ant-popover-buttons"
                                 >
                                   <button
-                                    class="ant-btn ant-btn-sm"
+                                    class="ant-btn ant-btn-default ant-btn-sm"
                                     type="button"
                                   >
                                     <span>
@@ -16424,7 +16424,7 @@ Array [
       style="margin-right:8px"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -16437,7 +16437,7 @@ Array [
       style="margin-right:8px"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -16449,7 +16449,7 @@ Array [
       class="ant-space-item"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
diff --git a/components/table/__tests__/__snapshots__/demo.test.js.snap b/components/table/__tests__/__snapshots__/demo.test.js.snap
index 5a33e70d63..154f2d538f 100644
--- a/components/table/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/table/__tests__/__snapshots__/demo.test.js.snap
@@ -13144,7 +13144,7 @@ Array [
       style="margin-right:8px"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -13157,7 +13157,7 @@ Array [
       style="margin-right:8px"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
@@ -13169,7 +13169,7 @@ Array [
       class="ant-space-item"
     >
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span>
diff --git a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
index d625b1b2f6..ba07286225 100644
--- a/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tabs/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -594,7 +594,7 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md extend context cor
     style="margin-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1601,7 +1601,7 @@ Array [
         class="ant-tabs-extra-content"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -1708,7 +1708,7 @@ Array [
         class="ant-tabs-extra-content"
       >
         <button
-          class="ant-btn tabs-extra-demo-button"
+          class="ant-btn ant-btn-default tabs-extra-demo-button"
           type="button"
         >
           <span>
@@ -1822,7 +1822,7 @@ Array [
         class="ant-tabs-extra-content"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
diff --git a/components/tabs/__tests__/__snapshots__/demo.test.js.snap b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
index a7aa88b5fa..0b3a6273ae 100644
--- a/components/tabs/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tabs/__tests__/__snapshots__/demo.test.js.snap
@@ -518,7 +518,7 @@ exports[`renders ./components/tabs/demo/custom-add-trigger.md correctly 1`] = `
     style="margin-bottom:16px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1411,7 +1411,7 @@ Array [
         class="ant-tabs-extra-content"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
@@ -1518,7 +1518,7 @@ Array [
         class="ant-tabs-extra-content"
       >
         <button
-          class="ant-btn tabs-extra-demo-button"
+          class="ant-btn ant-btn-default tabs-extra-demo-button"
           type="button"
         >
           <span>
@@ -1613,7 +1613,7 @@ Array [
         class="ant-tabs-extra-content"
       >
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span>
diff --git a/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
index a9ca7cb093..19510d5410 100644
--- a/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tag/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -528,7 +528,7 @@ Array [
   </span>,
   <br />,
   <button
-    class="ant-btn ant-btn-sm"
+    class="ant-btn ant-btn-default ant-btn-sm"
     type="button"
   >
     <span>
diff --git a/components/tag/__tests__/__snapshots__/demo.test.js.snap b/components/tag/__tests__/__snapshots__/demo.test.js.snap
index 771cb2461f..e748f67c2b 100644
--- a/components/tag/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tag/__tests__/__snapshots__/demo.test.js.snap
@@ -528,7 +528,7 @@ Array [
   </span>,
   <br />,
   <button
-    class="ant-btn ant-btn-sm"
+    class="ant-btn ant-btn-default ant-btn-sm"
     type="button"
   >
     <span>
diff --git a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
index 7297275a19..ef424197dd 100644
--- a/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tooltip/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3,7 +3,7 @@
 exports[`renders ./components/tooltip/demo/arrow-point-at-center.md extend context correctly 1`] = `
 Array [
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -35,7 +35,7 @@ Array [
     </div>
   </div>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -74,7 +74,7 @@ exports[`renders ./components/tooltip/demo/auto-adjust-overflow.md extend contex
   style="overflow:hidden;position:relative;padding:24px;border:1px solid #e9e9e9"
 >
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -107,7 +107,7 @@ exports[`renders ./components/tooltip/demo/auto-adjust-overflow.md extend contex
   </div>
   <br />
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -187,7 +187,7 @@ Array [
   </div>,
   <div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -219,7 +219,7 @@ Array [
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -251,7 +251,7 @@ Array [
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -283,7 +283,7 @@ Array [
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -315,7 +315,7 @@ Array [
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -347,7 +347,7 @@ Array [
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -379,7 +379,7 @@ Array [
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -411,7 +411,7 @@ Array [
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -443,7 +443,7 @@ Array [
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -475,7 +475,7 @@ Array [
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -507,7 +507,7 @@ Array [
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -539,7 +539,7 @@ Array [
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -571,7 +571,7 @@ Array [
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -615,7 +615,7 @@ Array [
   </div>,
   <div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -649,7 +649,7 @@ Array [
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -683,7 +683,7 @@ Array [
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -717,7 +717,7 @@ Array [
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -794,7 +794,7 @@ exports[`renders ./components/tooltip/demo/placement.md extend context correctly
     style="margin-left:70px;white-space:nowrap"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -828,7 +828,7 @@ exports[`renders ./components/tooltip/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -862,7 +862,7 @@ exports[`renders ./components/tooltip/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -900,7 +900,7 @@ exports[`renders ./components/tooltip/demo/placement.md extend context correctly
     style="width:70px;float:left"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -934,7 +934,7 @@ exports[`renders ./components/tooltip/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -968,7 +968,7 @@ exports[`renders ./components/tooltip/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1006,7 +1006,7 @@ exports[`renders ./components/tooltip/demo/placement.md extend context correctly
     style="width:70px;margin-left:304px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1040,7 +1040,7 @@ exports[`renders ./components/tooltip/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1074,7 +1074,7 @@ exports[`renders ./components/tooltip/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1112,7 +1112,7 @@ exports[`renders ./components/tooltip/demo/placement.md extend context correctly
     style="margin-left:70px;clear:both;white-space:nowrap"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1146,7 +1146,7 @@ exports[`renders ./components/tooltip/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -1180,7 +1180,7 @@ exports[`renders ./components/tooltip/demo/placement.md extend context correctly
       </div>
     </div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
diff --git a/components/tooltip/__tests__/__snapshots__/demo.test.js.snap b/components/tooltip/__tests__/__snapshots__/demo.test.js.snap
index f7b4428abc..348fb3c4bb 100644
--- a/components/tooltip/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tooltip/__tests__/__snapshots__/demo.test.js.snap
@@ -3,7 +3,7 @@
 exports[`renders ./components/tooltip/demo/arrow-point-at-center.md correctly 1`] = `
 Array [
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -11,7 +11,7 @@ Array [
     </span>
   </button>,
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -26,7 +26,7 @@ exports[`renders ./components/tooltip/demo/auto-adjust-overflow.md correctly 1`]
   style="overflow:hidden;position:relative;padding:24px;border:1px solid #e9e9e9"
 >
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -35,7 +35,7 @@ exports[`renders ./components/tooltip/demo/auto-adjust-overflow.md correctly 1`]
   </button>
   <br />
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     type="button"
   >
     <span>
@@ -65,7 +65,7 @@ Array [
   </div>,
   <div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -73,7 +73,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -81,7 +81,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -89,7 +89,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -97,7 +97,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -105,7 +105,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -113,7 +113,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -121,7 +121,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -129,7 +129,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -137,7 +137,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -145,7 +145,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -153,7 +153,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -161,7 +161,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -181,7 +181,7 @@ Array [
   </div>,
   <div>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -189,7 +189,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -197,7 +197,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -205,7 +205,7 @@ Array [
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -230,7 +230,7 @@ exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
     style="margin-left:70px;white-space:nowrap"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -238,7 +238,7 @@ exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -246,7 +246,7 @@ exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -258,7 +258,7 @@ exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
     style="width:70px;float:left"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -266,7 +266,7 @@ exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -274,7 +274,7 @@ exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -286,7 +286,7 @@ exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
     style="width:70px;margin-left:304px"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -294,7 +294,7 @@ exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -302,7 +302,7 @@ exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -314,7 +314,7 @@ exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
     style="margin-left:70px;clear:both;white-space:nowrap"
   >
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -322,7 +322,7 @@ exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
@@ -330,7 +330,7 @@ exports[`renders ./components/tooltip/demo/placement.md correctly 1`] = `
       </span>
     </button>
     <button
-      class="ant-btn"
+      class="ant-btn ant-btn-default"
       type="button"
     >
       <span>
diff --git a/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap b/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap
index 776998c5f7..8fb819c3d7 100644
--- a/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap
+++ b/components/tooltip/__tests__/__snapshots__/tooltip.test.js.snap
@@ -8,7 +8,7 @@ exports[`Tooltip should hide when mouse leave antd disabled component Button 1`]
   style="display: inline-block; cursor: not-allowed;"
 >
   <button
-    class="ant-btn"
+    class="ant-btn ant-btn-default"
     disabled=""
     style="pointer-events: none;"
     type="button"
diff --git a/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
index 05c678f3e7..ef4cbef76f 100644
--- a/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/transfer/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -302,7 +302,7 @@ exports[`renders ./components/transfer/demo/advanced.md extend context correctly
       class="ant-transfer-list-footer"
     >
       <button
-        class="ant-btn ant-btn-sm"
+        class="ant-btn ant-btn-default ant-btn-sm"
         style="float:left;margin:5px"
         type="button"
       >
@@ -670,7 +670,7 @@ exports[`renders ./components/transfer/demo/advanced.md extend context correctly
       class="ant-transfer-list-footer"
     >
       <button
-        class="ant-btn ant-btn-sm"
+        class="ant-btn ant-btn-default ant-btn-sm"
         style="float:right;margin:5px"
         type="button"
       >
diff --git a/components/transfer/__tests__/__snapshots__/demo.test.js.snap b/components/transfer/__tests__/__snapshots__/demo.test.js.snap
index 7be91319e0..992beb9297 100644
--- a/components/transfer/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/transfer/__tests__/__snapshots__/demo.test.js.snap
@@ -173,7 +173,7 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
       class="ant-transfer-list-footer"
     >
       <button
-        class="ant-btn ant-btn-sm"
+        class="ant-btn ant-btn-default ant-btn-sm"
         style="float:left;margin:5px"
         type="button"
       >
@@ -412,7 +412,7 @@ exports[`renders ./components/transfer/demo/advanced.md correctly 1`] = `
       class="ant-transfer-list-footer"
     >
       <button
-        class="ant-btn ant-btn-sm"
+        class="ant-btn ant-btn-default ant-btn-sm"
         style="float:right;margin:5px"
         type="button"
       >
diff --git a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
index 724f7d4eba..27e518a331 100644
--- a/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/tree/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -3627,7 +3627,7 @@ exports[`renders ./components/tree/demo/search.md extend context correctly 1`] =
         class="ant-input-group-addon"
       >
         <button
-          class="ant-btn ant-btn-icon-only ant-input-search-button"
+          class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
           type="button"
         >
           <span
diff --git a/components/tree/__tests__/__snapshots__/demo.test.js.snap b/components/tree/__tests__/__snapshots__/demo.test.js.snap
index ace8588f9e..a175fcd4f3 100644
--- a/components/tree/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tree/__tests__/__snapshots__/demo.test.js.snap
@@ -3627,7 +3627,7 @@ exports[`renders ./components/tree/demo/search.md correctly 1`] = `
         class="ant-input-group-addon"
       >
         <button
-          class="ant-btn ant-btn-icon-only ant-input-search-button"
+          class="ant-btn ant-btn-default ant-btn-icon-only ant-input-search-button"
           type="button"
         >
           <span
diff --git a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
index 8a1b0b4063..d43fa5fb08 100644
--- a/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
+++ b/components/upload/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -70,7 +70,7 @@ exports[`renders ./components/upload/demo/basic.md extend context correctly 1`]
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -242,7 +242,7 @@ exports[`renders ./components/upload/demo/customize-progress-bar.md extend conte
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -294,7 +294,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md extend context corr
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -607,7 +607,7 @@ exports[`renders ./components/upload/demo/directory.md extend context correctly
         webkitdirectory="webkitdirectory"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -720,7 +720,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md extend context correct
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -1924,7 +1924,7 @@ exports[`renders ./components/upload/demo/fileList.md extend context correctly 1
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -2063,7 +2063,7 @@ exports[`renders ./components/upload/demo/max-count.md extend context correctly
             type="file"
           />
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             type="button"
           >
             <span
@@ -2117,7 +2117,7 @@ exports[`renders ./components/upload/demo/max-count.md extend context correctly
             type="file"
           />
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             type="button"
           >
             <span
@@ -2772,7 +2772,7 @@ Array [
           type="file"
         />
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span
@@ -3007,7 +3007,7 @@ Array [
           type="file"
         />
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span
@@ -3244,7 +3244,7 @@ exports[`renders ./components/upload/demo/preview-file.md extend context correct
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -3296,7 +3296,7 @@ exports[`renders ./components/upload/demo/transform-file.md extend context corre
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -3348,7 +3348,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md extend co
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -3678,7 +3678,7 @@ Array [
           type="file"
         />
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span
@@ -3741,7 +3741,7 @@ exports[`renders ./components/upload/demo/upload-png-only.md extend context corr
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -3819,7 +3819,7 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md extend conte
                   type="file"
                 />
                 <button
-                  class="ant-btn"
+                  class="ant-btn ant-btn-default"
                   type="button"
                 >
                   <span
diff --git a/components/upload/__tests__/__snapshots__/demo.test.js.snap b/components/upload/__tests__/__snapshots__/demo.test.js.snap
index 95cc62a8c9..d9e77dfba2 100644
--- a/components/upload/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/upload/__tests__/__snapshots__/demo.test.js.snap
@@ -70,7 +70,7 @@ exports[`renders ./components/upload/demo/basic.md correctly 1`] = `
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -242,7 +242,7 @@ exports[`renders ./components/upload/demo/customize-progress-bar.md correctly 1`
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -294,7 +294,7 @@ exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -583,7 +583,7 @@ exports[`renders ./components/upload/demo/directory.md correctly 1`] = `
         webkitdirectory="webkitdirectory"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -696,7 +696,7 @@ exports[`renders ./components/upload/demo/drag-sorting.md correctly 1`] = `
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -1804,7 +1804,7 @@ exports[`renders ./components/upload/demo/fileList.md correctly 1`] = `
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -1943,7 +1943,7 @@ exports[`renders ./components/upload/demo/max-count.md correctly 1`] = `
             type="file"
           />
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             type="button"
           >
             <span
@@ -1997,7 +1997,7 @@ exports[`renders ./components/upload/demo/max-count.md correctly 1`] = `
             type="file"
           />
           <button
-            class="ant-btn"
+            class="ant-btn ant-btn-default"
             type="button"
           >
             <span
@@ -2628,7 +2628,7 @@ Array [
           type="file"
         />
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span
@@ -2839,7 +2839,7 @@ Array [
           type="file"
         />
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span
@@ -3052,7 +3052,7 @@ exports[`renders ./components/upload/demo/preview-file.md correctly 1`] = `
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -3104,7 +3104,7 @@ exports[`renders ./components/upload/demo/transform-file.md correctly 1`] = `
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -3156,7 +3156,7 @@ exports[`renders ./components/upload/demo/upload-custom-action-icon.md correctly
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -3462,7 +3462,7 @@ Array [
           type="file"
         />
         <button
-          class="ant-btn"
+          class="ant-btn ant-btn-default"
           type="button"
         >
           <span
@@ -3525,7 +3525,7 @@ exports[`renders ./components/upload/demo/upload-png-only.md correctly 1`] = `
         type="file"
       />
       <button
-        class="ant-btn"
+        class="ant-btn ant-btn-default"
         type="button"
       >
         <span
@@ -3603,7 +3603,7 @@ exports[`renders ./components/upload/demo/upload-with-aliyun-oss.md correctly 1`
                   type="file"
                 />
                 <button
-                  class="ant-btn"
+                  class="ant-btn ant-btn-default"
                   type="button"
                 >
                   <span