diff --git a/.prettierignore b/.prettierignore
index 5676463006..329a7f4e28 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,4 +1,8 @@
+**/*.png
 **/*.svg
+CODEOWNERS
+.dockerignore
+Dockerfile.ui-test
 package.json
 .umi
 .umi-production
@@ -17,6 +21,8 @@ yarn-error.log
 *.snap
 components/*/*.js
 components/*/*.jsx
+components/*/*.md
+docs/**/*.md
 .gitignore
 .npmignore
 .prettierignore
diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 1796557dd9..12d134dc76 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,42 @@ timeline: true
 
 ---
 
+## 4.7.2
+
+`2020-10-19`
+
+- 💄 Fix Layout.Sider `light` theme lost styles. [#27227](https://github.com/ant-design/ant-design/pull/27227) [@lingjieee](https://github.com/lingjieee)
+- 💄 Fix TextArea wrapped with additional div when `showCount` is `false`, and pass `className` and `style` to outer wrapper when `showCount` is `true`. [#27216](https://github.com/ant-design/ant-design/pull/27216)
+- 🐞 Fix Checkbox.Group TS2559 error. [#27231](https://github.com/ant-design/ant-design/pull/27231)
+
+## 4.7.1
+
+`2020-10-18`
+
+- DatePicker
+  - 🐞 Fix DatePicker don't work correctly when `showTime` is `true` and `format` is function. [#27156](https://github.com/ant-design/ant-design/pull/27156)
+  - 💄 Fix DatePicker wrong animation direction when auto overflow. [#27101](https://github.com/ant-design/ant-design/pull/27101)
+- Typography
+  - 💄 Fix Typography miss `pre` and `blockquote` style. [#27150](https://github.com/ant-design/ant-design/pull/27150)
+  - 🐞 Fix Typography.Link hover color. [#27119](https://github.com/ant-design/ant-design/pull/27119)
+  - 🐞 Fix Typography.Link hover color when type is danger. [#27104](https://github.com/ant-design/ant-design/pull/27104)
+- 💄 Fix Descriptions `ant-descriptions-item-content` and add style `word-break:break-word;`. [#27195](https://github.com/ant-design/ant-design/pull/27195) [@WLyKan](https://github.com/WLyKan)
+- 🐞 Fix clear Password value attribute in controlled mode. [#27191](https://github.com/ant-design/ant-design/pull/27191)
+- 🐞 Optimize Notification width in small screen. [#27189](https://github.com/ant-design/ant-design/pull/27189)
+- 🐞 Fix Cascader className duplicate. [#27187](https://github.com/ant-design/ant-design/pull/27187) [@huntdream](https://github.com/huntdream)
+- 🐞 Fix the issue that the Drawer will trigger form submit. [#27175](https://github.com/ant-design/ant-design/pull/27175)
+- 🐞 Fix Dropdown icon missing margin. [#27165](https://github.com/ant-design/ant-design/pull/27165)
+- 💄 Fix Layout.Sider `collapsedWidth` cannot work without modifying `@menu-collapsed-width`. [#27154](https://github.com/ant-design/ant-design/pull/27154)
+- 🐞 Fix Tabs `animated={true}` not working for panels. [#27145](https://github.com/ant-design/ant-design/pull/27145)
+- 🐞 Fix Divider color when contains text. [#27134](https://github.com/ant-design/ant-design/pull/27134)
+- 💄 Fix the cursor style when the Radio option is selected and disabled. [#27125](https://github.com/ant-design/ant-design/pull/27125)
+- 🇪🇸 Add missing translations in es_ES. [#27079](https://github.com/ant-design/ant-design/pull/27079) [@gersongams](https://github.com/gersongams)
+- RTL
+  - 💄 Optimize the style of Input.TextArea character count in RTL mode. [#27098](https://github.com/ant-design/ant-design/pull/27098)
+- TypeScript
+  - 🤖 Button shape remove undeclared doc type. [#27159](https://github.com/ant-design/ant-design/pull/27159)
+  - 🤖 Add optional `rules` property into `FormListProps`. [#27164](https://github.com/ant-design/ant-design/pull/27164) [@huntdream](https://github.com/huntdream)
+
 ## 4.7.0
 
 `2020-10-10`
@@ -35,7 +71,7 @@ timeline: true
   - 🆕 Table `sticky` now support `getContainer`. [#26973](https://github.com/ant-design/ant-design/pull/26973)
   - 🐞 Fix Table should not render dropdown filter icon when filterDropdown is `undefined`. [#27002](https://github.com/ant-design/ant-design/pull/27002) [@shangyilim](https://github.com/shangyilim)
 - Modal
-  - 🛠 Refactor Modal animation code so that it will remove all dom element when closed. [#26940](https://github.com/ant-design/ant-design/pull/26940)
+  - 🛠 Refactor Modal animation code so that it will remove all dom element by `destroyOnClose` when closed. [#26940](https://github.com/ant-design/ant-design/pull/26940)
   - 🆕 Modal add `modalRender` prop which can be used for draggable dialog. [#26507](https://github.com/ant-design/ant-design/pull/26507) [@jhoneybee](https://github.com/jhoneybee)
 - 🆕 Space add `split` prop. [#26948](https://github.com/ant-design/ant-design/pull/26948)
 - 🆕 Image `preview` prop now support `visible` and `onVisibleChange`. [#26915](https://github.com/ant-design/ant-design/pull/26915)
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index 170aed71a9..49b78dd9fe 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,42 @@ timeline: true
 
 ---
 
+## 4.7.2
+
+`2020-10-19`
+
+- 💄 修复 Layout.Sider `light` 主题失效问题。[#27227](https://github.com/ant-design/ant-design/pull/27227) [@lingjieee](https://github.com/lingjieee)
+- 💄 修复 TextArea 没有设置 `showCount` 时仍然会包裹 div 的问题，同时解决 `showCount` 下 `className` 和 `style` 没有传递给最外层节点的问题。[#27216](https://github.com/ant-design/ant-design/pull/27216)
+- 🐞 修复 Checkbox.Group TS2559 错误。[#27231](https://github.com/ant-design/ant-design/pull/27231)
+
+## 4.7.1
+
+`2020-10-18`
+
+- DatePicker
+  - 🐞 修复 DatePicker `showTime` 为 `true` 并且 `format` 为一个函数时报错的问题。[#27156](https://github.com/ant-design/ant-design/pull/27156)
+  - 💄 修复 DatePicker 在下拉空间不足时的动画方向问题。[#27101](https://github.com/ant-design/ant-design/pull/27101)
+- Typography
+  - 💄 修复 Typography 没有 `pre` 和 `blockquote` 样式的问题。[#27150](https://github.com/ant-design/ant-design/pull/27150)
+  - 🐞 修复 Typography.Link 悬浮颜色错误的问题。[#27119](https://github.com/ant-design/ant-design/pull/27119)
+  - 🐞 修复 Typography.Link 危险类型的悬浮颜色问题。[#27104](https://github.com/ant-design/ant-design/pull/27104)
+- 💄 修复 Descriptions 组件的内容含有超长数字时无法换行的问题。[#27195](https://github.com/ant-design/ant-design/pull/27195) [@WLyKan](https://github.com/WLyKan)
+- 🐞 修复 Password 在受控模式下未清除 `value` 属性的问题。[#27191](https://github.com/ant-design/ant-design/pull/27191)
+- 🐞 修复 Notification 在小尺寸屏幕下的宽度问题。[#27189](https://github.com/ant-design/ant-design/pull/27189)
+- 🐞 修复 Cascader 类名重复的问题。[#27187](https://github.com/ant-design/ant-design/pull/27187) [@huntdream](https://github.com/huntdream)
+- 🐞 修复 Drawer 会触发 Form 提交事件的问题。[#27175](https://github.com/ant-design/ant-design/pull/27175)
+- 🐞 修复 Dropdown 下拉菜单图标间距丢失的问题。[#27165](https://github.com/ant-design/ant-design/pull/27165)
+- 💄 修复 Layout.Sider 指定 `collapsedWidth` 后侧边菜单部分宽度不对的问题。[#27154](https://github.com/ant-design/ant-design/pull/27154)
+- 🐞 修复 Tabs `animated` 属性为 `true` 时未开启内容切换动画的问题。[#27145](https://github.com/ant-design/ant-design/pull/27145)
+- 🐞 修复 Divider 带标题时的分割线颜色。[#27134](https://github.com/ant-design/ant-design/pull/27134)
+- 💄 修复 Radio 选项选中并禁用时的鼠标样式。[#27125](https://github.com/ant-design/ant-design/pull/27125)
+- 🇪🇸 为西班牙语 es_ES 中添加缺少的翻译。[#27079](https://github.com/ant-design/ant-design/pull/27079) [@gerongams](https://github.com/gersongams)
+- RTL
+  - 💄 优化 Input.TextArea 字数提示在 RTL 模式下的样式。[#27098](https://github.com/ant-design/ant-design/pull/27098)
+- TypeScript
+  - 🤖 Button `shape` 移除文档中未声明的类型。[#27159](https://github.com/ant-design/ant-design/pull/27159)
+  - 🤖 修复 Form.List `rules` 属性缺失的问题。[#27164](https://github.com/ant-design/ant-design/pull/27164) [@huntdream](https://github.com/huntdream)
+
 ## 4.7.0
 
 `2020-10-10`
@@ -35,7 +71,7 @@ timeline: true
   - 🆕 Table `sticky` 支持 `getContainer` 以指定滚动容器。[#26973](https://github.com/ant-design/ant-design/pull/26973)
   - 🐞 修复 Table `column.filterDropdown` 为 `undefined` 时依旧会展示筛选菜单的问题。[#27002](https://github.com/ant-design/ant-design/pull/27002) [@shangyilim](https://github.com/shangyilim)
 - Modal
-  - 🛠 重构 Modal 组件动画，现在关闭时将完全清理相关 Dom 节点。[#26940](https://github.com/ant-design/ant-design/pull/26940)
+  - 🛠 重构 Modal 组件动画，现在 `destroyOnClose` 关闭时将完全清理相关 Dom 节点。[#26940](https://github.com/ant-design/ant-design/pull/26940)
   - 🆕 Modal 新增 `modalRender` 属性，支持可拖拽的对话框。[#26507](https://github.com/ant-design/ant-design/pull/26507) [@jhoneybee](https://github.com/jhoneybee)
 - 🆕 Space 增加 `split` 属性以支持分隔符间隔。[#26948](https://github.com/ant-design/ant-design/pull/26948)
 - 🆕 Image `preview` 属性扩展支持 `visible` 和 `onVisibleChange`。[#26915](https://github.com/ant-design/ant-design/pull/26915)
@@ -326,7 +362,7 @@ timeline: true
   - 🐞 修复 Form 垂直布局时 Form.Item 设置 `labelCol={{ offset: number }}` 不生效的问题。[#25713](https://github.com/ant-design/ant-design/pull/25713) [@zhangchen915](https://github.com/zhangchen915)
   - ⌨️ Form 错误信息节点增加属性 `role="alert"` 以增强可访问性。[#25735](https://github.com/ant-design/ant-design/pull/25735) [@AlbertAZ1992](https://github.com/AlbertAZ1992)
 - Calendar
-  - 🐞 修复 Calendar 组件的 `validRange` 导致 `disabledDate` 不生效 。[#25626](https://github.com/ant-design/ant-design/pull/25626) [@zhangchen915](https://github.com/zhangchen915)
+  - 🐞 修复 Calendar 组件的 `validRange` 导致 `disabledDate` 不生效。[#25626](https://github.com/ant-design/ant-design/pull/25626) [@zhangchen915](https://github.com/zhangchen915)
   - 🐞 修复 Calendar `validRange` 对月份下拉菜单不生效的问题。[#25626](https://github.com/ant-design/ant-design/pull/25626) [@zhangchen915](https://github.com/zhangchen915)
 - 🐞 修复 Table `getCheckboxProps` 返回的 `indeterminate` 不生效。[#25649](https://github.com/ant-design/ant-design/pull/25649)
 - 🐞 修复 Select 清除按钮在 Form.Item 下位置不对的问题。[#25728](https://github.com/ant-design/ant-design/pull/25728)
diff --git a/README-zh_CN.md b/README-zh_CN.md
index 51359f393a..c0f5062967 100644
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@@ -10,7 +10,6 @@
 
 一套企业级 UI 设计语言和 React 组件库。
 
-
 [![CircleCI status][circleci-image]][circleci-url] [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
 
 [![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![FOSSA Status][fossa-image]][fossa-url] [![Issues need help][help-wanted-image]][help-wanted-url]
diff --git a/SECURITY.md b/SECURITY.md
index f707d665a7..b751c38389 100644
--- a/SECURITY.md
+++ b/SECURITY.md
@@ -2,8 +2,7 @@
 
 ## Supported Versions
 
-Use this section to tell people about which versions of your project are
-currently being supported with security updates.
+Use this section to tell people about which versions of your project are currently being supported with security updates.
 
 | Version | Supported          |
 | ------- | ------------------ |
@@ -14,6 +13,4 @@ currently being supported with security updates.
 
 Use this section to tell people how to report a vulnerability.
 
-Tell them where to go, how often they can expect to get an update on a
-reported vulnerability, what to expect if the vulnerability is accepted or
-declined, etc.
+Tell them where to go, how often they can expect to get an update on a reported vulnerability, what to expect if the vulnerability is accepted or declined, etc.
diff --git a/components/_util/hooks/useCombinedRefs.tsx b/components/_util/hooks/useCombinedRefs.tsx
new file mode 100644
index 0000000000..d1ea07de2e
--- /dev/null
+++ b/components/_util/hooks/useCombinedRefs.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+import { fillRef } from '../ref';
+
+function useCombinedRefs<T>(
+  ...refs: Array<React.MutableRefObject<T> | ((instance: T) => void) | null>
+) {
+  const targetRef = React.useRef();
+
+  React.useEffect(() => {
+    refs.forEach(ref => {
+      if (!ref) return;
+      fillRef(ref, targetRef.current);
+    });
+  }, [refs]);
+
+  return targetRef;
+}
+
+export default useCombinedRefs;
diff --git a/components/affix/index.en-US.md b/components/affix/index.en-US.md
index 0d308594cb..9d903b4753 100644
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@@ -19,8 +19,8 @@ Please note that Affix should not cover other content on the page, especially wh
 | --- | --- | --- | --- |
 | offsetBottom | Offset from the bottom of the viewport (in pixels) | number | - |
 | offsetTop | Offset from the top of the viewport (in pixels) | number | 0 |
-| onChange | Callback for when Affix state is changed | function(affixed) | - |
 | target | Specifies the scrollable area DOM node | () => HTMLElement | () => window |
+| onChange | Callback for when Affix state is changed | function(affixed) | - |
 
 **Note:** Children of `Affix` must not have the property `position: absolute`, but you can set `position: absolute` on `Affix` itself:
 
diff --git a/components/affix/index.zh-CN.md b/components/affix/index.zh-CN.md
index e053e73c27..22bdacd8bb 100644
--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@@ -20,8 +20,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
 | --- | --- | --- | --- |
 | offsetBottom | 距离窗口底部达到指定偏移量后触发 | number | - |
 | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number | - |
-| onChange | 固定状态改变时触发的回调函数 | function(affixed) | - |
 | target | 设置 `Affix` 需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |
+| onChange | 固定状态改变时触发的回调函数 | function(affixed) | - |
 
 **注意：**`Affix` 内的元素不要使用绝对定位，如需要绝对定位的效果，可以直接设置 `Affix` 为绝对定位：
 
diff --git a/components/alert/index.en-US.md b/components/alert/index.en-US.md
index 9ebb00e6c1..52383692b9 100644
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@@ -29,7 +29,7 @@ Alert component for feedback.
 
 ### Alert.ErrorBoundary
 
-| Property    | Description                      | Type      | Default           | Version |
-| ----------- | -------------------------------- | --------- | ----------------- | ------- |
-| message     | Custom error message to show     | ReactNode | {{ error }}       |         |
-| description | Custom error description to show | ReactNode | {{ error stack }} |         |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| description | Custom error description to show | ReactNode | {{ error stack }} |  |
+| message | Custom error message to show | ReactNode | {{ error }} |  |
diff --git a/components/alert/index.zh-CN.md b/components/alert/index.zh-CN.md
index c5fb7294cb..cbbd7288fd 100644
--- a/components/alert/index.zh-CN.md
+++ b/components/alert/index.zh-CN.md
@@ -32,5 +32,5 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} |  |
 | description | 自定义错误内容，如果未指定会展示报错堆栈 | ReactNode | {{ error stack }} |  |
+| message | 自定义错误标题，如果未指定会展示原生报错信息 | ReactNode | {{ error }} |  |
diff --git a/components/anchor/index.en-US.md b/components/anchor/index.en-US.md
index ce30064c3c..88cd56c209 100644
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@@ -21,17 +21,17 @@ For displaying anchor hyperlinks on page and jumping between them.
 | affix | Fixed mode of Anchor | boolean | true |  |
 | bounds | Bounding distance of anchor area | number | 5 |  |
 | getContainer | Scrolling container | () => HTMLElement | () => window |  |
+| getCurrentAnchor | Customize the anchor highlight | () => string | - |  |
 | offsetTop | Pixels to offset from top when calculating position of scroll | number | 0 |  |
 | showInkInFixed | Whether show ink-balls when `affix={false}` | boolean | false |  |
-| onClick | Set the handler to handle `click` event | function(e: Event, link: Object) | - |  |
-| getCurrentAnchor | Customize the anchor highlight | () => string | - |  |
 | targetOffset | Anchor scroll offset, default as `offsetTop`, [example](#components-anchor-demo-targetOffset) | number | - |  |
 | onChange | Listening for anchor link change | (currentActiveLink: string) => void |  |  |
+| onClick | Set the handler to handle `click` event | function(e: Event, link: Object) | - |  |
 
 ### Link Props
 
-| Property | Description                               | Type      | Default | Version |
-| -------- | ----------------------------------------- | --------- | ------- | ------- |
-| href     | The target of hyperlink                   | string    |         |         |
-| title    | The content of hyperlink                  | ReactNode |         |         |
-| target   | Specifies where to display the linked URL | string    |         |         |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| href | The target of hyperlink | string |  |  |
+| target | Specifies where to display the linked URL | string |  |  |
+| title | The content of hyperlink | ReactNode |  |  |
diff --git a/components/anchor/index.zh-CN.md b/components/anchor/index.zh-CN.md
index fdd0b2bfc7..e23d113489 100644
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@@ -22,17 +22,17 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
 | affix | 固定模式 | boolean | true |  |
 | bounds | 锚点区域边界 | number | 5 |  |
 | getContainer | 指定滚动的容器 | () => HTMLElement | () => window |  |
+| getCurrentAnchor | 自定义高亮的锚点 | () => string | - |  |
 | offsetTop | 距离窗口顶部达到指定偏移量后触发 | number |  |  |
 | showInkInFixed | `affix={false}` 时是否显示小圆点 | boolean | false |  |
-| onClick | `click` 事件的 handler | function(e: Event, link: Object) | - |  |
-| getCurrentAnchor | 自定义高亮的锚点 | () => string | - |  |
 | targetOffset | 锚点滚动偏移量，默认与 offsetTop 相同，[例子](#components-anchor-demo-targetOffset) | number | - |  |
 | onChange | 监听锚点链接改变 | (currentActiveLink: string) => void | - |  |
+| onClick | `click` 事件的 handler | function(e: Event, link: Object) | - |  |
 
 ### Link Props
 
-| 成员   | 说明                             | 类型      | 默认值 | 版本 |
-| ------ | -------------------------------- | --------- | ------ | ---- |
-| href   | 锚点链接                         | string    | -      |      |
-| title  | 文字内容                         | ReactNode | -      |      |
-| target | 该属性指定在何处显示链接的资源。 | string    | -      |      |
+| 成员 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| href | 锚点链接 | string | - |  |
+| target | 该属性指定在何处显示链接的资源。 | string | - |  |
+| title | 文字内容 | ReactNode | - |  |
diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
index 13886be425..da9038498e 100644
--- a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
@@ -147,23 +147,19 @@ exports[`renders ./components/auto-complete/demo/custom.md correctly 1`] = `
     <span
       class="ant-select-selection-search"
     >
-      <div
-        class="ant-input-textarea"
-      >
-        <textarea
-          aria-activedescendant="undefined_list_0"
-          aria-autocomplete="list"
-          aria-controls="undefined_list"
-          aria-haspopup="listbox"
-          aria-owns="undefined_list"
-          autocomplete="off"
-          class="ant-input ant-select-selection-search-input"
-          placeholder="input here"
-          role="combobox"
-          style="height:50px"
-          type="search"
-        />
-      </div>
+      <textarea
+        aria-activedescendant="undefined_list_0"
+        aria-autocomplete="list"
+        aria-controls="undefined_list"
+        aria-haspopup="listbox"
+        aria-owns="undefined_list"
+        autocomplete="off"
+        class="ant-input ant-select-selection-search-input"
+        placeholder="input here"
+        role="combobox"
+        style="height:50px"
+        type="search"
+      />
     </span>
     <span
       class="ant-select-selection-placeholder"
diff --git a/components/auto-complete/__tests__/focus.test.js b/components/auto-complete/__tests__/focus.test.js
index c5aec8a152..2f4193f75f 100644
--- a/components/auto-complete/__tests__/focus.test.js
+++ b/components/auto-complete/__tests__/focus.test.js
@@ -24,10 +24,7 @@ describe('AutoComplete children could be focus', () => {
   it('focus() and onFocus', () => {
     const handleFocus = jest.fn();
     const wrapper = mount(<AutoComplete onFocus={handleFocus} />, { attachTo: container });
-    wrapper
-      .find('input')
-      .instance()
-      .focus();
+    wrapper.find('input').instance().focus();
     jest.runAllTimers();
     expect(handleFocus).toHaveBeenCalled();
   });
@@ -35,15 +32,9 @@ describe('AutoComplete children could be focus', () => {
   it('blur() and onBlur', () => {
     const handleBlur = jest.fn();
     const wrapper = mount(<AutoComplete onBlur={handleBlur} />, { attachTo: container });
-    wrapper
-      .find('input')
-      .instance()
-      .focus();
+    wrapper.find('input').instance().focus();
     jest.runAllTimers();
-    wrapper
-      .find('input')
-      .instance()
-      .blur();
+    wrapper.find('input').instance().blur();
     jest.runAllTimers();
     expect(handleBlur).toHaveBeenCalled();
   });
diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md
index 8c99200bae..8e447c8185 100644
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@@ -22,30 +22,30 @@ When there is a need for autocomplete functionality.
 | children (for customize input element) | Customize input element | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement&lt;InputProps> | &lt;Input /> |  |
 | children (for dataSource) | Data source to auto complete | React.ReactElement&lt;OptionProps> \| Array&lt;React.ReactElement&lt;OptionProps>> | - |  |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
+| defaultOpen | Initial open state of dropdown | boolean | - |  |
 | defaultValue | Initial selected option | string | - |  |
 | disabled | Whether disabled select | boolean | false |  |
 | dropdownClassName | The className of dropdown menu | string | - |  |
 | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | true |  |
 | filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, `inputValue` and `option`, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded | boolean \| function(inputValue, option) | true |  |
+| notFoundContent | Specify content to show when no result matches | string | `Not Found` |  |
+| open | Controlled open state of dropdown | boolean | - |  |
+| options | Select options. Will get better perf than jsx definition | { label, value }\[] | - |  |
 | placeholder | The placeholder of input | string | - |  |
 | value | Selected option | string | - |  |
 | onBlur | Called when leaving the component | function() | - |  |
 | onChange | Called when select an option or input value change, or value of input is changed | function(value) | - |  |
+| onDropdownVisibleChange | Call when dropdown open | function(open) | - |  |
 | onFocus | Called when entering the component | function() | - |  |
 | onSearch | Called when searching items | function(value) | - |  |
 | onSelect | Called when a option is selected. param is option's value and option instance | function(value, option) | - |  |
-| defaultOpen | Initial open state of dropdown | boolean | - |  |
-| open | Controlled open state of dropdown | boolean | - |  |
-| options | Select options. Will get better perf than jsx definition | { label, value }[] | - |  |
-| onDropdownVisibleChange | Call when dropdown open | function(open) | - |  |
-| notFoundContent | Specify content to show when no result matches | string | `Not Found` |  |
 
 ## Methods
 
-| Name    | Description  | Version |
-| ------- | ------------ | ------- |
-| blur()  | Remove focus |         |
-| focus() | Get focus    |         |
+| Name | Description | Version |
+| --- | --- | --- |
+| blur() | Remove focus |  |
+| focus() | Get focus |  |
 
 ## FAQ
 
diff --git a/components/auto-complete/index.zh-CN.md b/components/auto-complete/index.zh-CN.md
index c7e7a78a21..7e9098d70c 100644
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@@ -20,34 +20,34 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 | allowClear | 支持清除, 单选模式有效 | boolean | false |  |
 | autoFocus | 自动获取焦点 | boolean | false |  |
 | backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |  |
-| children (自定义输入框) | 自定义输入框 | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement&lt;InputProps> | &lt;Input /> |  |
 | children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement&lt;OptionProps> \| Array&lt;React.ReactElement&lt;OptionProps>> | - |  |
+| children (自定义输入框) | 自定义输入框 | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement&lt;InputProps> | &lt;Input /> |  |
 | defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true |  |
+| defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
 | defaultValue | 指定默认选中的条目 | string | - |  |
 | disabled | 是否禁用 | boolean | false |  |
 | dropdownClassName | 下拉菜单的 className 属性 | string | - |  |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true |  |
 | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body |  |
+| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | - |  |
+| open | 是否展开下拉菜单 | boolean | - |  |
+| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }\[] | - |  |
 | placeholder | 输入框提示 | string | - |  |
 | value | 指定当前选中的条目 | string | - |  |
 | onBlur | 失去焦点时的回调 | function() | - |  |
 | onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value) | - |  |
+| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - |  |
 | onFocus | 获得焦点时的回调 | function() | - |  |
 | onSearch | 搜索补全项的时候调用 | function(value) | - |  |
 | onSelect | 被选中时调用，参数为选中项的 value 值 | function(value, option) | - |  |
-| defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
-| open | 是否展开下拉菜单 | boolean | - |  |
-| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - |  |
-| onDropdownVisibleChange | 展开下拉菜单的回调 | function(open) | - |  |
-| notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | - |  |
 
 ## 方法
 
-| 名称    | 描述     | 版本 |
-| ------- | -------- | ---- |
-| blur()  | 移除焦点 |      |
-| focus() | 获取焦点 |      |
+| 名称 | 描述 | 版本 |
+| --- | --- | --- |
+| blur() | 移除焦点 |  |
+| focus() | 获取焦点 |  |
 
 ## FAQ
 
diff --git a/components/avatar/index.en-US.md b/components/avatar/index.en-US.md
index 31db6d84a8..c6e46f451a 100644
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@@ -13,21 +13,21 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| alt | This attribute defines the alternative text describing the image | string | - |  |
+| gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 |
 | icon | Custom icon type for an icon avatar | ReactNode | - |  |
 | shape | The shape of avatar | `circle` \| `square` | `circle` |  |
 | size | The size of the avatar | number \| `large` \| `small` \| `default` \| `{ xs: number, sm: number, ...}` | `default` | 4.7.0 |
 | src | The address of the image for an image avatar | string | - |  |
 | srcSet | A list of sources to use for different screen resolutions | string | - |  |
-| alt | This attribute defines the alternative text describing the image | string | - |  |
 | onError | Handler when img load error, return false to prevent default fallback behavior | () => boolean | - |  |
-| gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 |
 
 > Tip: You can set `icon` or `children` as the fallback for image load error, with the priority of `icon` > `children`
 
 ### Avatar.Group (4.5.0+)
 
-| 参数                | 说明                                   | 类型              | 默认值 | 版本 |
-| ------------------- | -------------------------------------- | ----------------- | ------ | ---- |
-| maxCount            | Max avatars to show                    | number            | -      |      |
-| maxStyle            | The style of excess avatar style       | CSSProperties     | -      |      |
-| maxPopoverPlacement | The placement of excess avatar Popover | `top` \| `bottom` | `top`  |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| maxCount | Max avatars to show | number | - |  |
+| maxPopoverPlacement | The placement of excess avatar Popover | `top` \| `bottom` | `top` |  |
+| maxStyle | The style of excess avatar style | CSSProperties | - |  |
diff --git a/components/avatar/index.zh-CN.md b/components/avatar/index.zh-CN.md
index 5841856892..0d4f3587f7 100644
--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@@ -10,7 +10,7 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
 
 ## 设计师专属
 
-安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，一键填充高逼格头像和文本.
+安装 [Kitchen Sketch 插件 💎](https://kitchen.alipay.com)，一键填充高逼格头像和文本。
 
 ## API
 
@@ -18,21 +18,21 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| alt | 图像无法显示时的替代文本 | string | - |  |
+| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
 | icon | 设置头像的自定义图标 | ReactNode | - |  |
 | shape | 指定头像的形状 | `circle` \| `square` | `circle` |  |
 | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| `{ xs: number, sm: number, ...}` | `default` | 4.7.0 |
 | src | 图片类头像的资源地址 | string | - |  |
 | srcSet | 设置图片类头像响应式资源地址 | string | - |  |
-| alt | 图像无法显示时的替代文本 | string | - |  |
 | onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |  |
-| gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
 
 > Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`
 
 ### Avatar.Group (4.5.0+)
 
-| 参数                | 说明                 | 类型              | 默认值 | 版本 |
-| ------------------- | -------------------- | ----------------- | ------ | ---- |
-| maxCount            | 显示的最大头像个数   | number            | -      |      |
-| maxStyle            | 多余头像样式         | CSSProperties     | -      |      |
-| maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top`  |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| maxCount | 显示的最大头像个数 | number | - |  |
+| maxPopoverPlacement | 多余头像气泡弹出位置 | `top` \| `bottom` | `top` |  |
+| maxStyle | 多余头像样式 | CSSProperties | - |  |
diff --git a/components/back-top/index.en-US.md b/components/back-top/index.en-US.md
index e62514c9b7..6a87a4184e 100644
--- a/components/back-top/index.en-US.md
+++ b/components/back-top/index.en-US.md
@@ -20,7 +20,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| duration | Time to return to top（ms） | number | 450 | 4.4.0 |
 | target | Specifies the scrollable area dom node | () => HTMLElement | () => window |  |
 | visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number | 400 |  |
 | onClick | A callback function, which can be executed when you click the button | function | - |  |
-| duration | Time to return to top（ms） | number | 450 | 4.4.0 |
diff --git a/components/back-top/index.zh-CN.md b/components/back-top/index.zh-CN.md
index fa08ded7ba..7b112dbecc 100644
--- a/components/back-top/index.zh-CN.md
+++ b/components/back-top/index.zh-CN.md
@@ -21,7 +21,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| duration | 回到顶部所需时间（ms） | number | 450 | 4.4.0 |
 | target | 设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数 | () => HTMLElement | () => window |  |
 | visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number | 400 |  |
 | onClick | 点击按钮的回调函数 | function | - |  |
-| duration | 回到顶部所需时间（ms） | number | 450 | 4.4.0 |
diff --git a/components/badge/index.en-US.md b/components/badge/index.en-US.md
index 8035dcaa15..0e86abcfbb 100644
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@@ -23,8 +23,8 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
 | offset | Set offset of the badge dot | \[number, number] | - |  |
 | overflowCount | Max count to show | number | 99 |  |
 | showZero | Whether to show badge when `count` is zero | boolean | false |  |
-| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - |  |
 | size | If `count` is set, `size` sets the size of badge | `default` \| `small` | - | 4.6.0 |
+| status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | - |  |
 | text | If `status` is set, `text` sets the display text of the status `dot` | ReactNode | - |  |
 | title | Text to show when hovering over the badge | string | - |  |
 
diff --git a/components/badge/index.zh-CN.md b/components/badge/index.zh-CN.md
index 3aa267c533..00dd75ba1d 100644
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -24,8 +24,8 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg
 | offset | 设置状态点的位置偏移 | \[number, number] | - |  |
 | overflowCount | 展示封顶的数字值 | number | 99 |  |
 | showZero | 当数值为 0 时，是否展示 Badge | boolean | false |  |
-| status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | - |  |
 | size | 在设置了 `count` 的前提下有效，设置小圆点的大小 | `default` \| `small` | - | 4.6.0 |
+| status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | - |  |
 | text | 在设置了 `status` 的前提下有效，设置状态点的文本 | ReactNode | - |  |
 | title | 设置鼠标放在状态点上时显示的文字 | string | - |  |
 
diff --git a/components/breadcrumb/__tests__/router.test.js b/components/breadcrumb/__tests__/router.test.js
index 86b8643b69..d06c7d5596 100644
--- a/components/breadcrumb/__tests__/router.test.js
+++ b/components/breadcrumb/__tests__/router.test.js
@@ -72,23 +72,12 @@ describe('react router', () => {
       </MemoryRouter>,
     );
     expect(wrapper.find('BreadcrumbItem').length).toBe(1);
-    expect(
-      wrapper
-        .find('BreadcrumbItem .ant-breadcrumb-link')
-        .at(0)
-        .text(),
-    ).toBe('Home');
-    wrapper
-      .find('.demo-nav a')
-      .at(1)
-      .simulate('click');
+    expect(wrapper.find('BreadcrumbItem .ant-breadcrumb-link').at(0).text()).toBe('Home');
+    wrapper.find('.demo-nav a').at(1).simulate('click');
     expect(wrapper.find('BreadcrumbItem').length).toBe(2);
-    expect(
-      wrapper
-        .find('BreadcrumbItem .ant-breadcrumb-link')
-        .at(1)
-        .text(),
-    ).toBe('Application List');
+    expect(wrapper.find('BreadcrumbItem .ant-breadcrumb-link').at(1).text()).toBe(
+      'Application List',
+    );
   });
 
   it('react router 3', () => {
diff --git a/components/breadcrumb/index.en-US.md b/components/breadcrumb/index.en-US.md
index 96b2be6417..b0f85401b8 100644
--- a/components/breadcrumb/index.en-US.md
+++ b/components/breadcrumb/index.en-US.md
@@ -30,14 +30,14 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 | --- | --- | --- | --- | --- |
 | dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - |  |
 | href | Target of hyperlink | string | - |  |
-| onClick | Set the handler to handle click event | (e:MouseEvent) => void | - |  |
 | overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - |  |
+| onClick | Set the handler to handle click event | (e:MouseEvent) => void | - |  |
 
 ### Breadcrumb.Separator
 
-| Property | Description      | Type      | Default | Version |
-| -------- | ---------------- | --------- | ------- | ------- |
-| children | Custom separator | ReactNode | `/`     |         |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| children | Custom separator | ReactNode | `/` |  |
 
 > When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear.
 
diff --git a/components/breadcrumb/index.zh-CN.md b/components/breadcrumb/index.zh-CN.md
index f26357d6c0..1188328a84 100644
--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@@ -31,14 +31,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
 | --- | --- | --- | --- | --- |
 | dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - |  |
 | href | 链接的目的地 | string | - |  |
-| onClick | 单击事件 | (e:MouseEvent) => void | - |  |
 | overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - |  |
+| onClick | 单击事件 | (e:MouseEvent) => void | - |  |
 
 ### Breadcrumb.Separator
 
-| 参数     | 说明           | 类型      | 默认值 | 版本 |
-| -------- | -------------- | --------- | ------ | ---- |
-| children | 要显示的分隔符 | ReactNode | `/`    |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| children | 要显示的分隔符 | ReactNode | `/` |  |
 
 > 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。
 
diff --git a/components/button/__tests__/__snapshots__/demo.test.ts.snap b/components/button/__tests__/__snapshots__/demo.test.ts.snap
index 13ef0e9e33..488c8e01a1 100644
--- a/components/button/__tests__/__snapshots__/demo.test.ts.snap
+++ b/components/button/__tests__/__snapshots__/demo.test.ts.snap
@@ -976,34 +976,43 @@ Array [
       secondary
     </span>
   </button>,
-  <button
-    class="ant-btn ant-dropdown-trigger"
-    type="button"
+  <div
+    class="ant-btn-group ant-dropdown-button"
   >
-    <span>
-      Actions 
-    </span>
-    <span
-      aria-label="down"
-      class="anticon anticon-down"
-      role="img"
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
     >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="down"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
+      <span>
+        Actions
+      </span>
+    </button>
+    <button
+      class="ant-btn ant-btn-default ant-btn-icon-only ant-dropdown-trigger"
+      type="button"
+    >
+      <span
+        aria-label="ellipsis"
+        class="anticon anticon-ellipsis"
+        role="img"
       >
-        <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>
-  </button>,
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="ellipsis"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
+          />
+        </svg>
+      </span>
+    </button>
+  </div>,
 ]
 `;
 
diff --git a/components/button/button.tsx b/components/button/button.tsx
index be92508966..9288fb4f42 100644
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -74,7 +74,7 @@ function spaceChildren(children: React.ReactNode, needInserted: boolean) {
 
 const ButtonTypes = tuple('default', 'primary', 'ghost', 'dashed', 'link', 'text');
 export type ButtonType = typeof ButtonTypes[number];
-const ButtonShapes = tuple('circle', 'circle-outline', 'round');
+const ButtonShapes = tuple('circle', 'round');
 export type ButtonShape = typeof ButtonShapes[number];
 const ButtonHTMLTypes = tuple('submit', 'button', 'reset');
 export type ButtonHTMLType = typeof ButtonHTMLTypes[number];
diff --git a/components/button/demo/multiple.md b/components/button/demo/multiple.md
index a23c846b1a..0c5c8c21cd 100644
--- a/components/button/demo/multiple.md
+++ b/components/button/demo/multiple.md
@@ -7,15 +7,14 @@ title:
 
 ## zh-CN
 
-按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 `Dropdown.Button` 中组合使用。
+按钮组合使用时，推荐使用 1 个主操作 + n 个次操作，3 个以上操作时把更多操作放到 [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button) 中组合使用。
 
 ## en-US
 
-If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into `Dropdown.Button`.
+If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into [Dropdown.Button](/components/dropdown/#components-dropdown-demo-dropdown-button).
 
 ```jsx
 import { Button, Menu, Dropdown } from 'antd';
-import { DownOutlined } from '@ant-design/icons';
 
 function handleMenuClick(e) {
   console.log('click', e);
@@ -33,11 +32,7 @@ ReactDOM.render(
   <>
     <Button type="primary">primary</Button>
     <Button>secondary</Button>
-    <Dropdown overlay={menu}>
-      <Button>
-        Actions <DownOutlined />
-      </Button>
-    </Dropdown>
+    <Dropdown.Button overlay={menu}>Actions</Dropdown.Button>
   </>,
   mountNode,
 );
diff --git a/components/button/index.en-US.md b/components/button/index.en-US.md
index e1479359e8..af9ddc68fa 100644
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@@ -40,11 +40,11 @@ Different button styles can be generated by setting Button properties. The recom
 | htmlType | Set the original html `type` of `button`, see: [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
 | icon | Set the icon component of button | ReactNode | - |  |
 | loading | Set the loading status of button | boolean \| { delay: number } | false |  |
-| onClick | Set the handler to handle `click` event | (event) => void | - |  |
-| shape | Can be set to `circle`, `round` or omitted | string | - |  |
+| shape | Can be set button shape | `circle` \| `round` | - |  |
 | size | Set the size of button | `large` \| `middle` \| `small` | - |  |
 | target | Same as target attribute of a, works when href is specified | string | - |  |
 | type | Can be set to `primary` `ghost` `dashed` `link` `text` `default` | string | `default` |  |
+| onClick | Set the handler to handle `click` event | (event) => void | - |  |
 
 It accepts all props which native buttons support.
 
diff --git a/components/button/index.zh-CN.md b/components/button/index.zh-CN.md
index dd4fca382e..2ef9d4d61d 100644
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -43,11 +43,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
 | htmlType | 设置 `button` 原生的 `type` 值，可选值请参考 [HTML 标准](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#attr-type) | string | `button` |  |
 | icon | 设置按钮的图标组件 | ReactNode | - |  |
 | loading | 设置按钮载入状态 | boolean \| { delay: number } | false |  |
-| onClick | 点击按钮时的回调 | (event) => void | - |  |
-| shape | 设置按钮形状，可选值为 `circle`、 `round` 或者不设 | string | - |  |
+| shape | 设置按钮形状 | `circle` \| `round` | - |  |
 | size | 设置按钮大小 | `large` \| `middle` \| `small` | - |  |
 | target | 相当于 a 链接的 target 属性，href 存在时生效 | string | - |  |
 | type | 设置按钮类型 | `primary` \| `ghost` \| `dashed` \| `link` \| `text` \| `default` | `default` |  |
+| onClick | 点击按钮时的回调 | (event) => void | - |  |
 
 支持原生 button 的其他所有属性。
 
diff --git a/components/button/style/index.less b/components/button/style/index.less
index cb419ff828..fada1a67cc 100644
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@@ -111,8 +111,7 @@
     }
   }
 
-  &-circle,
-  &-circle-outline {
+  &-circle {
     .btn-circle(@btn-prefix-cls);
   }
 
diff --git a/components/calendar/demo/customize-header.md b/components/calendar/demo/customize-header.md
index b3e9abdc21..01e103a33c 100644
--- a/components/calendar/demo/customize-header.md
+++ b/components/calendar/demo/customize-header.md
@@ -57,9 +57,7 @@ ReactDOM.render(
         }
         return (
           <div style={{ padding: 8 }}>
-            <Typography.Title level={4}>
-              Custom header
-            </Typography.Title>
+            <Typography.Title level={4}>Custom header</Typography.Title>
             <Row gutter={8}>
               <Col>
                 <Radio.Group size="small" onChange={e => onTypeChange(e.target.value)} value={type}>
diff --git a/components/calendar/index.en-US.md b/components/calendar/index.en-US.md
index 7397403c61..0f68b576f7 100644
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@@ -37,16 +37,16 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 | defaultValue | The date selected by default | [moment](http://momentjs.com/) | - |  |
 | disabledDate | Function that specifies the dates that cannot be selected | (currentDate: moment) => boolean | - |  |
 | fullscreen | Whether to display in full-screen | boolean | true |  |
+| headerRender | Render custom header in panel | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - |  |
 | locale | The calendar's locale | object | [(default)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
 | mode | The display mode of the calendar | `month` \| `year` | `month` |  |
 | monthCellRender | Customize the display of the month cell, the returned content will be appended to the cell | function(date: moment): ReactNode | - |  |
 | monthFullCellRender | Customize the display of the month cell, the returned content will override the cell | function(date: moment): ReactNode | - |  |
 | validRange | To set valid range | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |  |
 | value | The current selected date | [moment](http://momentjs.com/) | - |  |
+| onChange | Callback for when date changes | function(date: moment） | - |  |
 | onPanelChange | Callback for when panel changes | function(date: moment, mode: string) | - |  |
 | onSelect | Callback for when a date is selected | function(date: moment） | - |  |
-| onChange | Callback for when date changes | function(date: moment） | - |  |
-| headerRender | Render custom header in panel | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - |  |
 
 ## FAQ
 
diff --git a/components/calendar/index.zh-CN.md b/components/calendar/index.zh-CN.md
index 37a4edcf94..69abee334f 100644
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@@ -38,16 +38,16 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
 | defaultValue | 默认展示的日期 | [moment](http://momentjs.com/) | - |  |
 | disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - |  |
 | fullscreen | 是否全屏显示 | boolean | true |  |
+| headerRender | 自定义头部内容 | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - |  |
 | locale | 国际化配置 | object | [(默认配置)](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
 | mode | 初始模式 | `month` \| `year` | `month` |  |
 | monthCellRender | 自定义渲染月单元格，返回内容会被追加到单元格 | function(date: moment): ReactNode | - |  |
 | monthFullCellRender | 自定义渲染月单元格，返回内容覆盖单元格 | function(date: moment): ReactNode | - |  |
 | validRange | 设置可以显示的日期 | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |  |
 | value | 展示日期 | [moment](http://momentjs.com/) | - |  |
+| onChange | 日期变化回调 | function(date: moment） | - |  |
 | onPanelChange | 日期面板变化回调 | function(date: moment, mode: string) | - |  |
 | onSelect | 点击选择日期回调 | function(date: moment） | - |  |
-| onChange | 日期变化回调 | function(date: moment） | - |  |
-| headerRender | 自定义头部内容 | function(object:{value: moment, type: string, onChange: f(), onTypeChange: f()}) | - |  |
 
 ## FAQ
 
diff --git a/components/card/__tests__/index.test.js b/components/card/__tests__/index.test.js
index f179f14006..8e1cade399 100644
--- a/components/card/__tests__/index.test.js
+++ b/components/card/__tests__/index.test.js
@@ -52,10 +52,7 @@ describe('Card', () => {
         xxx
       </Card>,
     );
-    wrapper
-      .find('.ant-tabs-tab')
-      .at(1)
-      .simulate('click');
+    wrapper.find('.ant-tabs-tab').at(1).simulate('click');
     expect(onTabChange).toHaveBeenCalledWith('tab2');
   });
 
diff --git a/components/card/index.en-US.md b/components/card/index.en-US.md
index 1632a66493..c5821dd796 100644
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@@ -24,36 +24,36 @@ A card can be used to display content related to a single subject. The content c
 | --- | --- | --- | --- | --- |
 | actions | The action list, shows at the bottom of the Card | Array&lt;ReactNode> | - |  |
 | activeTabKey | Current TabPane's key | string | - |  |
-| headStyle | Inline style to apply to the card head | CSSProperties | - |  |
 | bodyStyle | Inline style to apply to the card content | CSSProperties | - |  |
 | bordered | Toggles rendering of the border around the card | boolean | true |  |
 | cover | Card cover | ReactNode | - |  |
 | defaultActiveTabKey | Initial active TabPane's key, if `activeTabKey` is not set | string | - |  |
 | extra | Content to render in the top-right corner of the card | ReactNode | - |  |
+| headStyle | Inline style to apply to the card head | CSSProperties | - |  |
 | hoverable | Lift up when hovering card | boolean | false |  |
 | loading | Shows a loading indicator while the contents of the card are being fetched | boolean | false |  |
-| tabList | List of TabPane's head | Array&lt;{key: string, tab: ReactNode}> | - |  |
-| tabBarExtraContent | Extra content in tab bar | ReactNode | - |  |
 | size | Size of card | `default` \| `small` | `default` |  |
+| tabBarExtraContent | Extra content in tab bar | ReactNode | - |  |
+| tabList | List of TabPane's head | Array&lt;{key: string, tab: ReactNode}> | - |  |
+| tabProps | [Tabs](/components/tabs/#Tabs) | - | - |  |
 | title | Card title | ReactNode | - |  |
 | type | Card style type, can be set to `inner` or not set | string | - |  |
 | onTabChange | Callback when tab is switched | (key) => void | - |  |
-| tabProps | [Tabs](/components/tabs/#Tabs) | - | - |  |
 
 ### Card.Grid
 
-| Property  | Description                     | Type          | Default | Version |
-| --------- | ------------------------------- | ------------- | ------- | ------- |
-| className | The className of container      | string        | -       |         |
-| hoverable | Lift up when hovering card grid | boolean       | true    |         |
-| style     | The style object of container   | CSSProperties | -       |         |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| className | The className of container | string | - |  |
+| hoverable | Lift up when hovering card grid | boolean | true |  |
+| style | The style object of container | CSSProperties | - |  |
 
 ### Card.Meta
 
-| Property    | Description                   | Type          | Default | Version |
-| ----------- | ----------------------------- | ------------- | ------- | ------- |
-| avatar      | Avatar or icon                | ReactNode     | -       |         |
-| className   | The className of container    | string        | -       |         |
-| description | Description content           | ReactNode     | -       |         |
-| style       | The style object of container | CSSProperties | -       |         |
-| title       | Title content                 | ReactNode     | -       |         |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| avatar | Avatar or icon | ReactNode | - |  |
+| className | The className of container | string | - |  |
+| description | Description content | ReactNode | - |  |
+| style | The style object of container | CSSProperties | - |  |
+| title | Title content | ReactNode | - |  |
diff --git a/components/card/index.zh-CN.md b/components/card/index.zh-CN.md
index 36719a6537..029e88a8ab 100644
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@@ -25,36 +25,36 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/NqXt8DJhky/Card.svg
 | --- | --- | --- | --- | --- |
 | actions | 卡片操作组，位置在卡片底部 | Array&lt;ReactNode> | - |  |
 | activeTabKey | 当前激活页签的 key | string | - |  |
-| headStyle | 自定义标题区域样式 | CSSProperties | - |  |
 | bodyStyle | 内容区域自定义样式 | CSSProperties | - |  |
 | bordered | 是否有边框 | boolean | true |  |
 | cover | 卡片封面 | ReactNode | - |  |
 | defaultActiveTabKey | 初始化选中页签的 key，如果没有设置 activeTabKey | string | `第一个页签` |  |
 | extra | 卡片右上角的操作区域 | ReactNode | - |  |
+| headStyle | 自定义标题区域样式 | CSSProperties | - |  |
 | hoverable | 鼠标移过时可浮起 | boolean | false |  |
 | loading | 当卡片内容还在加载中时，可以用 loading 展示一个占位 | boolean | false |  |
-| tabList | 页签标题列表 | Array&lt;{key: string, tab: ReactNode}> | - |  |
-| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - |  |
 | size | card 的尺寸 | `default` \| `small` | `default` |  |
+| tabBarExtraContent | tab bar 上额外的元素 | ReactNode | - |  |
+| tabList | 页签标题列表 | Array&lt;{key: string, tab: ReactNode}> | - |  |
+| tabProps | [Tabs](/components/tabs/#Tabs) | - | - |  |
 | title | 卡片标题 | ReactNode | - |  |
 | type | 卡片类型，可设置为 `inner` 或 不设置 | string | - |  |
 | onTabChange | 页签切换的回调 | (key) => void | - |  |
-| tabProps | [Tabs](/components/tabs/#Tabs) | - | - |  |
 
 ### Card.Grid
 
-| 参数      | 说明                   | 类型          | 默认值 | 版本 |
-| --------- | ---------------------- | ------------- | ------ | ---- |
-| className | 网格容器类名           | string        | -      |      |
-| hoverable | 鼠标移过时可浮起       | boolean       | true   |      |
-| style     | 定义网格容器类名的样式 | CSSProperties | -      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| className | 网格容器类名 | string | - |  |
+| hoverable | 鼠标移过时可浮起 | boolean | true |  |
+| style | 定义网格容器类名的样式 | CSSProperties | - |  |
 
 ### Card.Meta
 
-| 参数        | 说明               | 类型          | 默认值 | 版本 |
-| ----------- | ------------------ | ------------- | ------ | ---- |
-| avatar      | 头像/图标          | ReactNode     | -      |      |
-| className   | 容器类名           | string        | -      |      |
-| description | 描述内容           | ReactNode     | -      |      |
-| style       | 定义容器类名的样式 | CSSProperties | -      |      |
-| title       | 标题内容           | ReactNode     | -      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| avatar | 头像/图标 | ReactNode | - |  |
+| className | 容器类名 | string | - |  |
+| description | 描述内容 | ReactNode | - |  |
+| style | 定义容器类名的样式 | CSSProperties | - |  |
+| title | 标题内容 | ReactNode | - |  |
diff --git a/components/card/style/index.less b/components/card/style/index.less
index 100c51adf9..6c750672b5 100644
--- a/components/card/style/index.less
+++ b/components/card/style/index.less
@@ -57,6 +57,13 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+
+      > .@{ant-prefix}-typography,
+      > .@{ant-prefix}-typography-edit-content {
+        left: 0;
+        margin-top: 0;
+        margin-bottom: 0;
+      }
     }
 
     .@{ant-prefix}-tabs {
diff --git a/components/carousel/index.en-US.md b/components/carousel/index.en-US.md
index 876a803b65..4bb51fb063 100644
--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@@ -17,13 +17,13 @@ A carousel component. Scales with its container.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| afterChange | Callback function called after the current index changes | function(current) | - |  |
 | autoplay | Whether to scroll automatically | boolean | false |  |
-| beforeChange | Callback function called before the current index changes | function(from, to) | - |  |
 | dotPosition | The position of the dots, which can be one of `top` `bottom` `left` `right` | string | `bottom` |  |
 | dots | Whether to show the dots at the bottom of the gallery, `object` for `dotsClass` and any others | boolean \| { className?: string } | true |  |
 | easing | Transition interpolation function name | string | `linear` |  |
 | effect | Transition effect | `scrollx` \| `fade` | `scrollx` |  |
+| afterChange | Callback function called after the current index changes | function(current) | - |  |
+| beforeChange | Callback function called before the current index changes | function(from, to) | - |  |
 
 ## Methods
 
diff --git a/components/carousel/index.zh-CN.md b/components/carousel/index.zh-CN.md
index f30bd7db2c..c4aee00d10 100644
--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@@ -18,20 +18,20 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/%24C9tmj978R/Carousel.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| afterChange | 切换面板的回调 | function(current) | - |  |  |
-| autoplay | 是否自动切换 | boolean | false |  |  |
-| beforeChange | 切换面板的回调 | function(from, to) | - |  |  |
+| autoplay | 是否自动切换 | boolean | false |  |
 | dotPosition | 面板指示点位置，可选 `top` `bottom` `left` `right` | string | `bottom` |  |
-| dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?: string } | true |  |  |
-| easing | 动画效果 | string | `linear` |  |  |
-| effect | 动画效果函数 | `scrollx` \| `fade` | `scrollx` |  |  |
+| dots | 是否显示面板指示点，如果为 `object` 则同时可以指定 `dotsClass` 或者 | boolean \| { className?: string } | true |  |
+| easing | 动画效果 | string | `linear` |  |
+| effect | 动画效果函数 | `scrollx` \| `fade` | `scrollx` |  |
+| afterChange | 切换面板的回调 | function(current) | - |  |
+| beforeChange | 切换面板的回调 | function(from, to) | - |  |
 
 ## 方法
 
-| 名称                           | 描述                                              |
-| ------------------------------ | ------------------------------------------------- |
+| 名称 | 描述 |
+| --- | --- |
 | goTo(slideNumber, dontAnimate) | 切换到指定面板, dontAnimate = true 时，不使用动画 |
-| next()                         | 切换到下一面板                                    |
-| prev()                         | 切换到上一面板                                    |
+| next() | 切换到下一面板 |
+| prev() | 切换到上一面板 |
 
 更多 API 可参考：<https://react-slick.neostack.com/docs/api>
diff --git a/components/cascader/__tests__/type.test.tsx b/components/cascader/__tests__/type.test.tsx
index d401efeae5..b3330ffdd8 100644
--- a/components/cascader/__tests__/type.test.tsx
+++ b/components/cascader/__tests__/type.test.tsx
@@ -38,7 +38,6 @@ describe('Cascader.typescript', () => {
       },
     ];
 
-
     const result = <Cascader options={options} defaultValue={[1, 'hangzhou']} />;
 
     expect(result).toBeTruthy();
diff --git a/components/cascader/demo/custom-dropdown.md b/components/cascader/demo/custom-dropdown.md
index 70c9e6b0aa..33f366ff90 100644
--- a/components/cascader/demo/custom-dropdown.md
+++ b/components/cascader/demo/custom-dropdown.md
@@ -62,11 +62,7 @@ function dropdownRender(menus) {
 }
 
 ReactDOM.render(
-  <Cascader
-    options={options}
-    dropdownRender={dropdownRender}
-    placeholder="Please select"
-  />,
+  <Cascader options={options} dropdownRender={dropdownRender} placeholder="Please select" />,
   mountNode,
 );
 ```
diff --git a/components/cascader/index.en-US.md b/components/cascader/index.en-US.md
index b5567be997..0f9e2979a0 100644
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@@ -29,13 +29,14 @@ Cascade selection box.
 | defaultValue | Initial selected value | string\[] \| number\[] | \[] |  |
 | disabled | Whether disabled select | boolean | false |  |
 | displayRender | The render function of displaying selected options | (label, selectedOptions) => ReactNode | label => label.join(`/`) |  |
-| expandTrigger | expand current item when click or hover, one of `click` `hover` | string | `click` |  |
+| dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.4.0 |
 | expandIcon | Customize the current item expand icon | ReactNode | - | 4.4.0 |
+| expandTrigger | expand current item when click or hover, one of `click` `hover` | string | `click` |  |
 | fieldNames | Custom field name for label and value and children | object | { label: `label`, value: `value`, children: `children` } |  |
 | 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://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body |  |
 | loadData | To load option lazily, and it cannot work with `showSearch` | (selectedOptions) => void | - |  |
 | notFoundContent | Specify content to show when no result matches | string | `Not Found` |  |
-| options | The data options of cascade | [Option](#Option)[] | - |  |
+| options | The data options of cascade | [Option](#Option)\[] | - |  |
 | placeholder | The input placeholder | string | `Please select` |  |
 | popupClassName | The additional className of popup overlay | string | - |  |
 | popupPlacement | Use preset popup align config from builtinPlacements：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` |  |
@@ -45,7 +46,6 @@ Cascade selection box.
 | style | The additional style | CSSProperties | - |  |
 | suffixIcon | The custom suffix icon | ReactNode | - |  |
 | value | The selected value | string\[] \| number\[] | - |  |
-| dropdownRender | Customize dropdown content | (menus: ReactNode) => ReactNode | - | 4.4.0 |
 | onChange | Callback when finishing cascader select | (value, selectedOptions) => void | - |  |
 | onPopupVisibleChange | Callback when popup shown or hidden | (value) => void | - |  |
 
@@ -72,7 +72,7 @@ interface Option {
 
 ## Methods
 
-| Name    | Description  | Version |
-| ------- | ------------ | ------- |
-| blur()  | Remove focus |         |
-| focus() | Get focus    |         |
+| Name | Description | Version |
+| --- | --- | --- |
+| blur() | Remove focus |  |
+| focus() | Get focus |  |
diff --git a/components/cascader/index.tsx b/components/cascader/index.tsx
index 7e54bba0e4..79c27a49fe 100644
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@@ -642,12 +642,19 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
         );
 
         const getPopupContainer = props.getPopupContainer || getContextPopupContainer;
-        const rest = omit(props, ['inputIcon', 'expandIcon', 'loadingIcon', 'bordered']);
+        const rest = omit(props, [
+          'inputIcon',
+          'expandIcon',
+          'loadingIcon',
+          'bordered',
+          'className',
+        ]);
         const rcCascaderPopupClassName = classNames(popupClassName, {
           [`${prefixCls}-menu-${direction}`]: direction === 'rtl',
           [`${prefixCls}-menu-empty`]:
             options.length === 1 && options[0].value === 'ANT_CASCADER_NOT_FOUND',
         });
+
         return (
           <RcCascader
             {...rest}
diff --git a/components/cascader/index.zh-CN.md b/components/cascader/index.zh-CN.md
index 6db77de3a1..f887784564 100644
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@@ -30,13 +30,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
 | defaultValue | 默认的选中项 | string\[] \| number\[] | \[] |  |
 | disabled | 禁用 | boolean | false |  |
 | displayRender | 选择后展示的渲染函数 | (label, selectedOptions) => ReactNode | label => label.join(`/`) |  |
-| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | `click` |  |
+| dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.4.0 |
 | expandIcon | 自定义次级菜单展开图标 | ReactNode | - | 4.4.0 |
+| expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | `click` |  |
 | fieldNames | 自定义 options 中 label name children 的字段 | object | { label: `label`, value: `value`, children: `children` } |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body |  |
 | loadData | 用于动态加载选项，无法与 `showSearch` 一起使用 | (selectedOptions) => void | - |  |
 | notFoundContent | 当下拉列表为空时显示的内容 | string | `Not Found` |  |
-| options | 可选项数据源 | [Option](#Option)[] | - |  |
+| options | 可选项数据源 | [Option](#Option)\[] | - |  |
 | placeholder | 输入框占位文本 | string | `请选择` |  |
 | popupClassName | 自定义浮层类名 | string | - |  |
 | popupPlacement | 浮层预设位置：`bottomLeft` `bottomRight` `topLeft` `topRight` | string | `bottomLeft` |  |
@@ -46,7 +47,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/UdS8y8xyZ/Cascader.svg
 | style | 自定义样式 | CSSProperties | - |  |
 | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
 | value | 指定选中项 | string\[] \| number\[] | - |  |
-| dropdownRender | 自定义下拉框内容 | (menus: ReactNode) => ReactNode | - | 4.4.0 |
 | onChange | 选择完成后的回调 | (value, selectedOptions) => void | - |  |
 | onPopupVisibleChange | 显示/隐藏浮层的回调 | (value) => void | - |  |
 
@@ -73,9 +73,9 @@ interface Option {
 
 ## 方法
 
-| 名称    | 描述     | 版本 |
-| ------- | -------- | ---- |
-| blur()  | 移除焦点 |      |
-| focus() | 获取焦点 |      |
+| 名称 | 描述 | 版本 |
+| --- | --- | --- |
+| blur() | 移除焦点 |  |
+| focus() | 获取焦点 |  |
 
 > 注意，如果需要获得中国省市区数据，可以参考 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。
diff --git a/components/checkbox/Group.tsx b/components/checkbox/Group.tsx
index 1ad47239f5..86e992ba09 100644
--- a/components/checkbox/Group.tsx
+++ b/components/checkbox/Group.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import omit from 'omit.js';
 import Checkbox, { CheckboxChangeEvent } from './Checkbox';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 
 export type CheckboxValueType = string | number | boolean;
 
@@ -27,11 +27,7 @@ export interface CheckboxGroupProps extends AbstractCheckboxGroupProps {
   defaultValue?: Array<CheckboxValueType>;
   value?: Array<CheckboxValueType>;
   onChange?: (checkedValue: Array<CheckboxValueType>) => void;
-}
-
-export interface CheckboxGroupState {
-  value: CheckboxValueType[];
-  registeredValues: CheckboxValueType[];
+  children?: React.ReactNode;
 }
 
 export interface CheckboxGroupContext {
@@ -42,135 +38,119 @@ export interface CheckboxGroupContext {
 
 export const GroupContext = React.createContext<CheckboxGroupContext | null>(null);
 
-class CheckboxGroup extends React.PureComponent<CheckboxGroupProps, CheckboxGroupState> {
-  static defaultProps = {
-    options: [],
-  };
+const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
+  defaultValue,
+  children,
+  options = [],
+  prefixCls: customizePrefixCls,
+  className,
+  style,
+  onChange,
+  ...restProps
+}) => {
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
 
-  static getDerivedStateFromProps(nextProps: CheckboxGroupProps) {
-    if ('value' in nextProps) {
-      return {
-        value: nextProps.value || [],
-      };
+  const [value, setValue] = React.useState<CheckboxValueType[]>(
+    restProps.value || defaultValue || [],
+  );
+  const [registeredValues, setRegisteredValues] = React.useState<CheckboxValueType[]>([]);
+
+  React.useEffect(() => {
+    if ('value' in restProps) {
+      setValue(restProps.value || []);
     }
-    return null;
-  }
+  }, [restProps.value]);
 
-  constructor(props: CheckboxGroupProps) {
-    super(props);
-    this.state = {
-      value: props.value || props.defaultValue || [],
-      registeredValues: [],
-    };
-  }
-
-  getOptions() {
-    const { options } = this.props;
-    // https://github.com/Microsoft/TypeScript/issues/7960
-    return (options as Array<CheckboxOptionType>).map(option => {
+  const getOptions = () => {
+    return options.map(option => {
       if (typeof option === 'string') {
         return {
           label: option,
           value: option,
-        } as CheckboxOptionType;
+        };
       }
       return option;
     });
-  }
-
-  cancelValue = (value: string) => {
-    this.setState(({ registeredValues }) => ({
-      registeredValues: registeredValues.filter(val => val !== value),
-    }));
   };
 
-  registerValue = (value: string) => {
-    this.setState(({ registeredValues }) => ({
-      registeredValues: [...registeredValues, value],
-    }));
+  const cancelValue = (val: string) => {
+    setRegisteredValues(prevValues => prevValues.filter(v => v !== val));
   };
 
-  toggleOption = (option: CheckboxOptionType) => {
-    const { registeredValues } = this.state;
-    const optionIndex = this.state.value.indexOf(option.value);
-    const value = [...this.state.value];
+  const registerValue = (val: string) => {
+    setRegisteredValues(prevValues => [...prevValues, val]);
+  };
+
+  const toggleOption = (option: CheckboxOptionType) => {
+    const optionIndex = value.indexOf(option.value);
+    const newValue = [...value];
     if (optionIndex === -1) {
-      value.push(option.value);
+      newValue.push(option.value);
     } else {
-      value.splice(optionIndex, 1);
+      newValue.splice(optionIndex, 1);
     }
-    if (!('value' in this.props)) {
-      this.setState({ value });
+    if (!('value' in restProps)) {
+      setValue(newValue);
     }
-    const { onChange } = this.props;
     if (onChange) {
-      const options = this.getOptions();
+      const opts = getOptions();
       onChange(
-        value
+        newValue
           .filter(val => registeredValues.indexOf(val) !== -1)
           .sort((a, b) => {
-            const indexA = options.findIndex(opt => opt.value === a);
-            const indexB = options.findIndex(opt => opt.value === b);
+            const indexA = opts.findIndex(opt => opt.value === a);
+            const indexB = opts.findIndex(opt => opt.value === b);
             return indexA - indexB;
           }),
       );
     }
   };
 
-  renderGroup = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
-    const { props, state } = this;
-    const { prefixCls: customizePrefixCls, className, style, options, ...restProps } = props;
-    const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
-    const groupPrefixCls = `${prefixCls}-group`;
+  const prefixCls = getPrefixCls('checkbox', customizePrefixCls);
+  const groupPrefixCls = `${prefixCls}-group`;
 
-    const domProps = omit(restProps, ['children', 'defaultValue', 'value', 'onChange', 'disabled']);
+  const domProps = omit(restProps, ['value', 'disabled']);
 
-    let { children } = props;
-    if (options && options.length > 0) {
-      children = this.getOptions().map(option => (
-        <Checkbox
-          prefixCls={prefixCls}
-          key={option.value.toString()}
-          disabled={'disabled' in option ? option.disabled : props.disabled}
-          value={option.value}
-          checked={state.value.indexOf(option.value) !== -1}
-          onChange={option.onChange}
-          className={`${groupPrefixCls}-item`}
-          style={option.style}
-        >
-          {option.label}
-        </Checkbox>
-      ));
-    }
+  if (options && options.length > 0) {
+    children = getOptions().map(option => (
+      <Checkbox
+        prefixCls={prefixCls}
+        key={option.value.toString()}
+        disabled={'disabled' in option ? option.disabled : restProps.disabled}
+        value={option.value}
+        checked={value.indexOf(option.value) !== -1}
+        onChange={option.onChange}
+        className={`${groupPrefixCls}-item`}
+        style={option.style}
+      >
+        {option.label}
+      </Checkbox>
+    ));
+  }
 
-    const context = {
-      toggleOption: this.toggleOption,
-      value: this.state.value,
-      disabled: this.props.disabled,
-      name: this.props.name,
+  const context = {
+    toggleOption,
+    value,
+    disabled: restProps.disabled,
+    name: restProps.name,
 
-      // https://github.com/ant-design/ant-design/issues/16376
-      registerValue: this.registerValue,
-      cancelValue: this.cancelValue,
-    };
-
-    const classString = classNames(
-      groupPrefixCls,
-      {
-        [`${groupPrefixCls}-rtl`]: direction === 'rtl',
-      },
-      className,
-    );
-    return (
-      <div className={classString} style={style} {...domProps}>
-        <GroupContext.Provider value={context}>{children}</GroupContext.Provider>
-      </div>
-    );
+    // https://github.com/ant-design/ant-design/issues/16376
+    registerValue,
+    cancelValue,
   };
 
-  render() {
-    return <ConfigConsumer>{this.renderGroup}</ConfigConsumer>;
-  }
-}
+  const classString = classNames(
+    groupPrefixCls,
+    {
+      [`${groupPrefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
+  return (
+    <div className={classString} style={style} {...domProps}>
+      <GroupContext.Provider value={context}>{children}</GroupContext.Provider>
+    </div>
+  );
+};
 
-export default CheckboxGroup;
+export default React.memo(CheckboxGroup);
diff --git a/components/checkbox/__tests__/group.test.js b/components/checkbox/__tests__/group.test.js
index 5b45991e57..076930095d 100644
--- a/components/checkbox/__tests__/group.test.js
+++ b/components/checkbox/__tests__/group.test.js
@@ -14,25 +14,13 @@ describe('CheckboxGroup', () => {
     const wrapper = mount(
       <Checkbox.Group options={['Apple', 'Pear', 'Orange']} onChange={onChange} />,
     );
-    wrapper
-      .find('.ant-checkbox-input')
-      .at(0)
-      .simulate('change');
+    wrapper.find('.ant-checkbox-input').at(0).simulate('change');
     expect(onChange).toHaveBeenCalledWith(['Apple']);
-    wrapper
-      .find('.ant-checkbox-input')
-      .at(1)
-      .simulate('change');
+    wrapper.find('.ant-checkbox-input').at(1).simulate('change');
     expect(onChange).toHaveBeenCalledWith(['Apple', 'Pear']);
-    wrapper
-      .find('.ant-checkbox-input')
-      .at(2)
-      .simulate('change');
+    wrapper.find('.ant-checkbox-input').at(2).simulate('change');
     expect(onChange).toHaveBeenCalledWith(['Apple', 'Pear', 'Orange']);
-    wrapper
-      .find('.ant-checkbox-input')
-      .at(1)
-      .simulate('change');
+    wrapper.find('.ant-checkbox-input').at(1).simulate('change');
     expect(onChange).toHaveBeenCalledWith(['Apple', 'Orange']);
   });
 
@@ -47,15 +35,9 @@ describe('CheckboxGroup', () => {
     const groupWrapper = mount(
       <Checkbox.Group options={options} onChange={onChangeGroup} disabled />,
     );
-    groupWrapper
-      .find('.ant-checkbox-input')
-      .at(0)
-      .simulate('change');
+    groupWrapper.find('.ant-checkbox-input').at(0).simulate('change');
     expect(onChangeGroup).not.toHaveBeenCalled();
-    groupWrapper
-      .find('.ant-checkbox-input')
-      .at(1)
-      .simulate('change');
+    groupWrapper.find('.ant-checkbox-input').at(1).simulate('change');
     expect(onChangeGroup).not.toHaveBeenCalled();
   });
 
@@ -68,15 +50,9 @@ describe('CheckboxGroup', () => {
     ];
 
     const groupWrapper = mount(<Checkbox.Group options={options} onChange={onChangeGroup} />);
-    groupWrapper
-      .find('.ant-checkbox-input')
-      .at(0)
-      .simulate('change');
+    groupWrapper.find('.ant-checkbox-input').at(0).simulate('change');
     expect(onChangeGroup).toHaveBeenCalledWith(['Apple']);
-    groupWrapper
-      .find('.ant-checkbox-input')
-      .at(1)
-      .simulate('change');
+    groupWrapper.find('.ant-checkbox-input').at(1).simulate('change');
     expect(onChangeGroup).toHaveBeenCalledWith(['Apple']);
   });
 
@@ -105,10 +81,10 @@ describe('CheckboxGroup', () => {
     ];
 
     const wrapper = mount(<Checkbox.Group options={options} />);
-
-    expect(wrapper.instance().state.value).toEqual([]);
+    expect(wrapper.find('.ant-checkbox-checked').length).toBe(0);
     wrapper.setProps({ value: ['Apple'] });
-    expect(wrapper.instance().state.value).toEqual(['Apple']);
+    wrapper.update();
+    expect(wrapper.find('.ant-checkbox-checked').length).toBe(1);
   });
 
   // https://github.com/ant-design/ant-design/issues/12642
@@ -119,10 +95,7 @@ describe('CheckboxGroup', () => {
         <Checkbox value="my" onChange={onChange} />
       </Checkbox.Group>,
     );
-    wrapper
-      .find('.ant-checkbox-input')
-      .at(0)
-      .simulate('change');
+    wrapper.find('.ant-checkbox-input').at(0).simulate('change');
     expect(onChange).toHaveBeenCalled();
     expect(onChange.mock.calls[0][0].target.value).toEqual('my');
   });
@@ -141,10 +114,7 @@ describe('CheckboxGroup', () => {
       children: [<Checkbox key={2} value={2} />],
     });
 
-    wrapper
-      .find('.ant-checkbox-input')
-      .at(0)
-      .simulate('change');
+    wrapper.find('.ant-checkbox-input').at(0).simulate('change');
 
     expect(onChange).toHaveBeenCalledWith([2]);
   });
@@ -160,12 +130,7 @@ describe('CheckboxGroup', () => {
     wrapper.setProps({
       children: [<Checkbox key={1} value={2} />],
     });
-    expect(
-      wrapper
-        .find('.ant-checkbox-input')
-        .at(0)
-        .prop('checked'),
-    ).toBe(false);
+    expect(wrapper.find('.ant-checkbox-input').at(0).prop('checked')).toBe(false);
   });
 
   // https://github.com/ant-design/ant-design/issues/17297
@@ -180,25 +145,13 @@ describe('CheckboxGroup', () => {
       </Checkbox.Group>,
     );
 
-    wrapper
-      .find('.ant-checkbox-input')
-      .at(0)
-      .simulate('change');
+    wrapper.find('.ant-checkbox-input').at(0).simulate('change');
     expect(onChange).toHaveBeenCalledWith([1]);
-    wrapper
-      .find('.ant-checkbox-input')
-      .at(1)
-      .simulate('change');
+    wrapper.find('.ant-checkbox-input').at(1).simulate('change');
     expect(onChange).toHaveBeenCalledWith([1, 2]);
-    wrapper
-      .find('.ant-checkbox-input')
-      .at(0)
-      .simulate('change');
+    wrapper.find('.ant-checkbox-input').at(0).simulate('change');
     expect(onChange).toHaveBeenCalledWith([2]);
-    wrapper
-      .find('.ant-checkbox-input')
-      .at(0)
-      .simulate('change');
+    wrapper.find('.ant-checkbox-input').at(0).simulate('change');
     expect(onChange).toHaveBeenCalledWith([1, 2]);
   });
 
@@ -215,30 +168,10 @@ describe('CheckboxGroup', () => {
         </Collapse>
       </Checkbox.Group>,
     );
-    wrapper
-      .find('.ant-collapse-item')
-      .at(0)
-      .find('.ant-collapse-header')
-      .simulate('click');
-    wrapper
-      .find('.ant-checkbox-input')
-      .at(0)
-      .simulate('change');
-    expect(
-      wrapper
-        .find(Checkbox.Group)
-        .at(0)
-        .state('value'),
-    ).toEqual(['1']);
-    wrapper
-      .find('.ant-checkbox-input')
-      .at(0)
-      .simulate('change');
-    expect(
-      wrapper
-        .find(Checkbox.Group)
-        .at(0)
-        .state('value'),
-    ).toEqual([]);
+    wrapper.find('.ant-collapse-item').at(0).find('.ant-collapse-header').simulate('click');
+    wrapper.find('.ant-checkbox-input').at(0).simulate('change');
+    expect(wrapper.find('.ant-checkbox-checked').length).toBe(1);
+    wrapper.find('.ant-checkbox-input').at(0).simulate('change');
+    expect(wrapper.find('.ant-checkbox-checked').length).toBe(0);
   });
 });
diff --git a/components/checkbox/__tests__/type.test.tsx b/components/checkbox/__tests__/type.test.tsx
new file mode 100644
index 0000000000..74bfcced0a
--- /dev/null
+++ b/components/checkbox/__tests__/type.test.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react';
+import Checkbox from '..';
+import Input from '../../input';
+
+describe('Checkbox.typescript', () => {
+  it('Checkbox.Group', () => {
+    const group = (
+      <Checkbox.Group>
+        <Input />
+      </Checkbox.Group>
+    );
+
+    expect(group).toBeTruthy();
+  });
+});
diff --git a/components/checkbox/index.en-US.md b/components/checkbox/index.en-US.md
index e5f1c8dc42..230d188c5e 100644
--- a/components/checkbox/index.en-US.md
+++ b/components/checkbox/index.en-US.md
@@ -42,7 +42,7 @@ Checkbox component.
 
 #### Checkbox
 
-| Name    | Description  | Version |
-| ------- | ------------ | ------- |
-| blur()  | Remove focus |         |
-| focus() | Get focus    |         |
+| Name | Description | Version |
+| --- | --- | --- |
+| blur() | Remove focus |  |
+| focus() | Get focus |  |
diff --git a/components/checkbox/index.zh-CN.md b/components/checkbox/index.zh-CN.md
index a8c621354d..3bb66a7af8 100644
--- a/components/checkbox/index.zh-CN.md
+++ b/components/checkbox/index.zh-CN.md
@@ -19,14 +19,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8nbVbHEm_/CheckBox.svg
 
 #### Checkbox
 
-| 参数           | 说明                                    | 类型              | 默认值 | 版本 |
-| -------------- | --------------------------------------- | ----------------- | ------ | ---- |
-| autoFocus      | 自动获取焦点                            | boolean           | false  |      |
-| checked        | 指定当前是否选中                        | boolean           | false  |      |
-| defaultChecked | 初始是否选中                            | boolean           | false  |      |
-| disabled       | 失效状态                                | boolean           | false  |      |
-| indeterminate  | 设置 indeterminate 状态，只负责样式控制 | boolean           | false  |      |
-| onChange       | 变化时回调函数                          | function(e:Event) | -      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| autoFocus | 自动获取焦点 | boolean | false |  |
+| checked | 指定当前是否选中 | boolean | false |  |
+| defaultChecked | 初始是否选中 | boolean | false |  |
+| disabled | 失效状态 | boolean | false |  |
+| indeterminate | 设置 indeterminate 状态，只负责样式控制 | boolean | false |  |
+| onChange | 变化时回调函数 | function(e:Event) | - |  |
 
 #### Checkbox Group
 
@@ -53,7 +53,7 @@ interface Option {
 
 #### Checkbox
 
-| 名称    | 描述     | 版本 |
-| ------- | -------- | ---- |
-| blur()  | 移除焦点 |      |
-| focus() | 获取焦点 |      |
+| 名称 | 描述 | 版本 |
+| --- | --- | --- |
+| blur() | 移除焦点 |  |
+| focus() | 获取焦点 |  |
diff --git a/components/collapse/index.en-US.md b/components/collapse/index.en-US.md
index 7dd42378ce..517b2c29b4 100644
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@@ -19,23 +19,23 @@ A content area which can be collapsed and expanded.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In `accordion` mode, it's the key of the first panel |  |
-| defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - |  |
-| bordered | Toggles rendering of the border around the collapse block | boolean | true |  |
 | accordion | If true, Collapse renders as Accordion | boolean | false |  |
-| onChange | Callback function executed when active panel is changed | function | - |  |
+| activeKey | Key of the active panel | string\[] \| string <br/> number\[] \| number | No default value. In `accordion` mode, it's the key of the first panel |  |
+| bordered | Toggles rendering of the border around the collapse block | boolean | true |  |
+| defaultActiveKey | Key of the initial active panel | string\[] \| string <br/> number\[] \| number | - |  |
+| destroyInactivePanel | Destroy Inactive Panel | boolean | false |  |
 | expandIcon | Allow to customize collapse icon | (panelProps) => ReactNode | - |  |
 | expandIconPosition | Set expand icon position | `left` \| `right` | - |  |
-| destroyInactivePanel | Destroy Inactive Panel | boolean | false |  |
 | ghost | Make the collapse borderless and its background transparent | boolean | false | 4.4.0 |
+| onChange | Callback function executed when active panel is changed | function | - |  |
 
 ### Collapse.Panel
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | disabled | If true, panel cannot be opened or closed | boolean | false |  |
+| extra | The extra element in the corner | ReactNode | - |  |
 | forceRender | Forced render of content on panel, instead of lazy rending after clicking on header | boolean | false |  |
 | header | Title of the panel | ReactNode | - |  |
 | key | Unique key identifying the panel from among its siblings | string \| number | - |  |
 | showArrow | If false, panel will not show arrow icon | boolean | true |  |
-| extra | The extra element in the corner | ReactNode | - |  |
diff --git a/components/collapse/index.zh-CN.md b/components/collapse/index.zh-CN.md
index e128311b3f..0b144647b3 100644
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@@ -20,23 +20,23 @@ cover: https://gw.alipayobjects.com/zos/alicdn/IxH16B9RD/Collapse.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| activeKey | 当前激活 tab 面板的 key | string\[] \| string <br/> number\[] \| number | 默认无，accordion 模式下默认第一个元素 |  |
-| defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - |  |
-| bordered | 带边框风格的折叠面板 | boolean | true |  |
 | accordion | 手风琴模式 | boolean | false |  |
-| onChange | 切换面板的回调 | function | - |  |
+| activeKey | 当前激活 tab 面板的 key | string\[] \| string <br/> number\[] \| number | 默认无，accordion 模式下默认第一个元素 |  |
+| bordered | 带边框风格的折叠面板 | boolean | true |  |
+| defaultActiveKey | 初始化选中面板的 key | string\[] \| string<br/> number\[] \| number | - |  |
+| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false |  |
 | expandIcon | 自定义切换图标 | (panelProps) => ReactNode | - |  |
 | expandIconPosition | 设置图标位置 | `left` \| `right` | - |  |
-| destroyInactivePanel | 销毁折叠隐藏的面板 | boolean | false |  |
 | ghost | 使折叠面板透明且无边框 | boolean | false | 4.4.0 |
+| onChange | 切换面板的回调 | function | - |  |
 
 ### Collapse.Panel
 
-| 参数        | 说明                                       | 类型             | 默认值 | 版本 |
-| ----------- | ------------------------------------------ | ---------------- | ------ | ---- |
-| disabled    | 禁用后的面板展开与否将无法通过用户交互改变 | boolean          | false  |      |
-| forceRender | 被隐藏时是否渲染 DOM 结构                  | boolean          | false  |      |
-| header      | 面板头内容                                 | ReactNode        | -      |      |
-| key         | 对应 activeKey                             | string \| number | -      |      |
-| showArrow   | 是否展示当前面板上的箭头                   | boolean          | true   |      |
-| extra       | 自定义渲染每个面板右上角的内容             | ReactNode        | -      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| disabled | 禁用后的面板展开与否将无法通过用户交互改变 | boolean | false |  |
+| extra | 自定义渲染每个面板右上角的内容 | ReactNode | - |  |
+| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |  |
+| header | 面板头内容 | ReactNode | - |  |
+| key | 对应 activeKey | string \| number | - |  |
+| showArrow | 是否展示当前面板上的箭头 | boolean | true |  |
diff --git a/components/comment/__tests__/__snapshots__/demo.test.js.snap b/components/comment/__tests__/__snapshots__/demo.test.js.snap
index 58d321283e..3728720ab2 100644
--- a/components/comment/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/comment/__tests__/__snapshots__/demo.test.js.snap
@@ -156,14 +156,10 @@ exports[`renders ./components/comment/demo/editor.md correctly 1`] = `
               <div
                 class="ant-form-item-control-input-content"
               >
-                <div
-                  class="ant-input-textarea"
-                >
-                  <textarea
-                    class="ant-input"
-                    rows="4"
-                  />
-                </div>
+                <textarea
+                  class="ant-input"
+                  rows="4"
+                />
               </div>
             </div>
           </div>
diff --git a/components/comment/demo/list.md b/components/comment/demo/list.md
index 805bdc03e3..11c33daa36 100644
--- a/components/comment/demo/list.md
+++ b/components/comment/demo/list.md
@@ -30,16 +30,8 @@ const data = [
       </p>
     ),
     datetime: (
-      <Tooltip
-        title={moment()
-          .subtract(1, 'days')
-          .format('YYYY-MM-DD HH:mm:ss')}
-      >
-        <span>
-          {moment()
-            .subtract(1, 'days')
-            .fromNow()}
-        </span>
+      <Tooltip title={moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss')}>
+        <span>{moment().subtract(1, 'days').fromNow()}</span>
       </Tooltip>
     ),
   },
@@ -55,16 +47,8 @@ const data = [
       </p>
     ),
     datetime: (
-      <Tooltip
-        title={moment()
-          .subtract(2, 'days')
-          .format('YYYY-MM-DD HH:mm:ss')}
-      >
-        <span>
-          {moment()
-            .subtract(2, 'days')
-            .fromNow()}
-        </span>
+      <Tooltip title={moment().subtract(2, 'days').format('YYYY-MM-DD HH:mm:ss')}>
+        <span>{moment().subtract(2, 'days').fromNow()}</span>
       </Tooltip>
     ),
   },
diff --git a/components/config-provider/__tests__/__snapshots__/components.test.js.snap b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
index e3a7bc843b..be2ce6df44 100644
--- a/components/config-provider/__tests__/__snapshots__/components.test.js.snap
+++ b/components/config-provider/__tests__/__snapshots__/components.test.js.snap
@@ -13138,6 +13138,7 @@ exports[`ConfigProvider components Drawer configProvider 1`] = `
               aria-label="Close"
               class="config-drawer-close"
               style="--scroll-bar:0px"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -13199,6 +13200,7 @@ exports[`ConfigProvider components Drawer configProvider componentSize large 1`]
               aria-label="Close"
               class="config-drawer-close"
               style="--scroll-bar:0px"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -13260,6 +13262,7 @@ exports[`ConfigProvider components Drawer configProvider componentSize middle 1`
               aria-label="Close"
               class="config-drawer-close"
               style="--scroll-bar:0px"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -13321,6 +13324,7 @@ exports[`ConfigProvider components Drawer configProvider virtual and dropdownMat
               aria-label="Close"
               class="ant-drawer-close"
               style="--scroll-bar:0px"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -13382,6 +13386,7 @@ exports[`ConfigProvider components Drawer normal 1`] = `
               aria-label="Close"
               class="ant-drawer-close"
               style="--scroll-bar:0px"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -13443,6 +13448,7 @@ exports[`ConfigProvider components Drawer prefixCls 1`] = `
               aria-label="Close"
               class="prefix-Drawer-close"
               style="--scroll-bar:0px"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -14539,13 +14545,9 @@ exports[`ConfigProvider components Input configProvider 1`] = `
       </span>
     </span>
   </span>
-  <div
-    class="config-input-textarea"
-  >
-    <textarea
-      class="config-input"
-    />
-  </div>
+  <textarea
+    class="config-input"
+  />
 </div>
 `;
 
@@ -14640,13 +14642,9 @@ exports[`ConfigProvider components Input configProvider componentSize large 1`]
       </span>
     </span>
   </span>
-  <div
-    class="config-input-textarea"
-  >
-    <textarea
-      class="config-input config-input-lg"
-    />
-  </div>
+  <textarea
+    class="config-input config-input-lg"
+  />
 </div>
 `;
 
@@ -14741,13 +14739,9 @@ exports[`ConfigProvider components Input configProvider componentSize middle 1`]
       </span>
     </span>
   </span>
-  <div
-    class="config-input-textarea"
-  >
-    <textarea
-      class="config-input"
-    />
-  </div>
+  <textarea
+    class="config-input"
+  />
 </div>
 `;
 
@@ -14842,13 +14836,9 @@ exports[`ConfigProvider components Input configProvider virtual and dropdownMatc
       </span>
     </span>
   </span>
-  <div
-    class="ant-input-textarea"
-  >
-    <textarea
-      class="ant-input"
-    />
-  </div>
+  <textarea
+    class="ant-input"
+  />
 </div>
 `;
 
@@ -14943,13 +14933,9 @@ exports[`ConfigProvider components Input normal 1`] = `
       </span>
     </span>
   </span>
-  <div
-    class="ant-input-textarea"
-  >
-    <textarea
-      class="ant-input"
-    />
-  </div>
+  <textarea
+    class="ant-input"
+  />
 </div>
 `;
 
@@ -15044,13 +15030,9 @@ exports[`ConfigProvider components Input prefixCls 1`] = `
       </span>
     </span>
   </span>
-  <div
-    class="prefix-Input-textarea"
-  >
-    <textarea
-      class="prefix-Input"
-    />
-  </div>
+  <textarea
+    class="prefix-Input"
+  />
 </div>
 `;
 
diff --git a/components/config-provider/index.en-US.md b/components/config-provider/index.en-US.md
index 4adc52e58f..2b9e150a32 100644
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@@ -41,18 +41,18 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | autoInsertSpaceInButton | Set false to remove space between 2 chinese characters on Button | boolean | true |  |
 | componentSize | Config antd component size | `small` \| `middle` \| `large` | - |  |
 | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - |  |
+| direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
+| 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 | - | 4.3.0 |
 | form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - |  |
-| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
-| renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | function(componentName: string): ReactNode | - |  |
 | getPopupContainer | To set the container of the popup element. The default is to create a `div` element in `body` | function(triggerNode) | () => document.body |  |
 | getTargetContainer | Config Affix, Anchor scroll target container | () => HTMLElement | () => window | 4.2.0 |
-| locale | Language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | - |
-| prefixCls | Set prefix className (cooperated with [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7)) | string | `ant` |  |
+| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
+| locale | Language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object | - |  |
 | pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost: boolean } | true |  |
-| direction | Set direction of layout. See [demo](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
+| prefixCls | Set prefix className (cooperated with [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7)) | string | `ant` |  |
+| renderEmpty | Set empty content of components. Ref [Empty](/components/empty/) | function(componentName: string): ReactNode | - |  |
 | space | Set Space `size`, ref [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
 | virtual | Disable virtual scroll when set to `false` | boolean | - | 4.3.0 |
-| dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. Will ignore when value less than select width. `false` will disable virtual scroll | boolean \| number | - | 4.3.0 |
 
 ## FAQ
 
@@ -71,7 +71,7 @@ moment.locale('zh-cn');
 
 #### Modal throw error when setting `getPopupContainer`?
 
-Related issue: https://github.com/ant-design/ant-design/issues/19974
+Related issue: <https://github.com/ant-design/ant-design/issues/19974>
 
 When you config `getPopupContainer` to parentNode globally, Modal will throw error of `triggerNode is undefined` because it did not have a triggerNode. You can try the [fix](https://github.com/afc163/feedback-antd/commit/3e4d1ad1bc1a38460dc3bf3c56517f737fe7d44a) below.
 
diff --git a/components/config-provider/index.zh-CN.md b/components/config-provider/index.zh-CN.md
index 560245c74a..107acdafef 100644
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@@ -42,18 +42,18 @@ export default () => (
 | autoInsertSpaceInButton | 设置为 `false` 时，移除按钮中 2 个汉字之间的空格 | boolean | true |  |
 | componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - |  |
 | csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |  |
+| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
+| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 |
 | form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - |  |
-| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 |
-| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - |  |
 | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | function(triggerNode) | () => document.body |  |
 | getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
+| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 |
 | locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - |  |
-| prefixCls | 设置统一样式前缀。注意：需要配合 `less` 变量 [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7) 使用 | string | `ant` |  |
 | pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | true |  |
-| direction | 设置文本展示方向。 [示例](#components-config-provider-demo-direction) | `ltr` \| `rtl` | `ltr` |  |
+| prefixCls | 设置统一样式前缀。注意：需要配合 `less` 变量 [@ant-prefix](https://github.com/ant-design/ant-design/blob/2c6c789e3a9356f96c47aea0083f5a15538315cf/components/style/themes/default.less#L7) 使用 | string | `ant` |  |
+| renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | function(componentName: string): ReactNode | - |  |
 | space | 设置 Space 的 `size`，参考 [Space](/components/space) | { size: `small` \| `middle` \| `large` \| `number` } | - | 4.1.0 |
 | virtual | 设置 `false` 时关闭虚拟滚动 | boolean | - | 4.3.0 |
-| dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。`false` 时会关闭虚拟滚动 | boolean \| number | - | 4.3.0 |
 
 ## FAQ
 
@@ -72,7 +72,7 @@ moment.locale('zh-cn');
 
 #### 配置 `getPopupContainer` 导致 Modal 报错？
 
-相关 issue：https://github.com/ant-design/ant-design/issues/19974
+相关 issue：<https://github.com/ant-design/ant-design/issues/19974>
 
 当如下全局设置 `getPopupContainer` 为触发节点的 parentNode 时，由于 Modal 的用法不存在 `triggerNode`，这样会导致 `triggerNode is undefined` 的报错，需要增加一个[判断条件](https://github.com/afc163/feedback-antd/commit/3e4d1ad1bc1a38460dc3bf3c56517f737fe7d44a)。
 
diff --git a/components/date-picker/__tests__/DatePicker.test.js b/components/date-picker/__tests__/DatePicker.test.js
index b1aa0d0e67..6d958e4ee5 100644
--- a/components/date-picker/__tests__/DatePicker.test.js
+++ b/components/date-picker/__tests__/DatePicker.test.js
@@ -138,6 +138,13 @@ describe('DatePicker', () => {
         .length,
     ).toBe(60);
   });
+  it('showTime should work correctly when format is custom function', () => {
+    const wrapper = mount(
+      <DatePicker defaultValue={moment()} showTime format={val => val.format('YYYY-MM-DD')} open />,
+    );
+    const input = wrapper.find('input').simulate('mousedown');
+    expect(input.simulate.bind(input, 'focus')).not.toThrowError();
+  });
 
   it('12 hours', () => {
     const wrapper = mount(
diff --git a/components/date-picker/__tests__/other.test.js b/components/date-picker/__tests__/other.test.js
index 9ce8d91eab..c7bde7f6eb 100644
--- a/components/date-picker/__tests__/other.test.js
+++ b/components/date-picker/__tests__/other.test.js
@@ -43,27 +43,13 @@ describe('MonthPicker and WeekPicker', () => {
     const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
     const wrapper = mount(<MonthPicker open />);
     wrapper.setProps({ value: birthday });
-    expect(
-      render(
-        wrapper
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
-    ).toMatchSnapshot();
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
   });
 
   it('render WeekPicker', () => {
     const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
     const wrapper = mount(<WeekPicker open />);
     wrapper.setProps({ value: birthday });
-    expect(
-      render(
-        wrapper
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
-    ).toMatchSnapshot();
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
   });
 });
diff --git a/components/date-picker/__tests__/utils.js b/components/date-picker/__tests__/utils.js
index 51a4288601..a8062e5aff 100644
--- a/components/date-picker/__tests__/utils.js
+++ b/components/date-picker/__tests__/utils.js
@@ -18,10 +18,7 @@ export function openPanel(wrapper) {
 }
 
 export function clearInput(wrapper) {
-  wrapper
-    .find('.ant-calendar-picker-clear')
-    .hostNodes()
-    .simulate('click');
+  wrapper.find('.ant-calendar-picker-clear').hostNodes().simulate('click');
 }
 
 export function nextYear(wrapper) {
@@ -33,17 +30,10 @@ export function nextMonth(wrapper) {
 }
 
 export function openPicker(wrapper, index = 0) {
-  wrapper
-    .find('input')
-    .at(index)
-    .simulate('mousedown')
-    .simulate('focus');
+  wrapper.find('input').at(index).simulate('mousedown').simulate('focus');
 }
 export function closePicker(wrapper, index = 0) {
-  wrapper
-    .find('input')
-    .at(index)
-    .simulate('blur');
+  wrapper.find('input').at(index).simulate('blur');
 }
 
 export function selectCell(wrapper, text, index = 0) {
diff --git a/components/date-picker/demo/select-in-range.md b/components/date-picker/demo/select-in-range.md
index 1295f62c54..c37cdeba7c 100644
--- a/components/date-picker/demo/select-in-range.md
+++ b/components/date-picker/demo/select-in-range.md
@@ -34,7 +34,9 @@ const App = () => {
     <RangePicker
       disabledDate={disabledDate}
       onCalendarChange={value => {
-        setDates(value);
+        const [start, end] = value;
+        const [oldStart, oldEnd] = dates;
+        setDates([start || oldStart, end || oldEnd]);
       }}
     />
   );
diff --git a/components/date-picker/generatePicker/index.tsx b/components/date-picker/generatePicker/index.tsx
index c0768780c4..9cef19dbbf 100644
--- a/components/date-picker/generatePicker/index.tsx
+++ b/components/date-picker/generatePicker/index.tsx
@@ -56,6 +56,11 @@ export function getTimeProps<DateType>(
     return showTimeObj;
   }
 
+  if (typeof firstFormat === 'function') {
+    // format of showTime should use default when format is custom format function
+    delete showTimeObj.format;
+  }
+
   return {
     showTime: showTimeObj,
   };
diff --git a/components/date-picker/index.en-US.md b/components/date-picker/index.en-US.md
index bc5f6b0493..8055495435 100644
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@@ -54,12 +54,14 @@ The following APIs are shared by DatePicker, RangePicker.
 | --- | --- | --- | --- | --- |
 | allowClear | Whether to show clear button | boolean | true |  |
 | autoFocus | If get focus when component mounted | boolean | false |  |
+| bordered | Whether has border style | boolean | true |  |
 | className | The picker className | string | - |  |
 | dateRender | Custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - |  |
 | disabled | Determine whether the DatePicker is disabled | boolean | false |  |
 | disabledDate | Specify the date that cannot be selected | (currentDate: moment) => boolean | - |  |
 | dropdownClassName | To customize the className of the popup calendar | string | - |  |
 | getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |  |
+| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false |  |
 | locale | Localization configuration | object | [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
 | mode | The picker panel mode（ [Cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?) ) | `time` \| `date` \| `month` \| `year` \| `decade` | - |  |
 | open | The open state of picker | boolean | - |  |
@@ -68,29 +70,28 @@ The following APIs are shared by DatePicker, RangePicker.
 | placeholder | The placeholder of date input | string \| \[string,string] | - |  |
 | popupStyle | To customize the style of the popup calendar | CSSProperties | {} |  |
 | size | The 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` | - |  |
-| bordered | Whether has border style | boolean | true |  |
-| suffixIcon | The custom suffix icon | ReactNode | - |  |
 | style | To customize the style of the input box | CSSProperties | {} |  |
+| suffixIcon | The custom suffix icon | ReactNode | - |  |
 | onOpenChange | Callback function, can be executed whether the popup calendar is popped up or closed | function(open) | - |  |
 | onPanelChange | Callback when picker panel mode is changed | function(value, mode) | - |  |
-| inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false |  |
 
 ### Common Methods
 
-| Name    | Description  | Version |
-| ------- | ------------ | ------- |
-| blur()  | Remove focus |         |
-| focus() | Get focus    |         |
+| Name | Description | Version |
+| --- | --- | --- |
+| blur() | Remove focus |  |
+| focus() | Get focus |  |
 
 ### DatePicker
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - |  |
 | defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - |  |
+| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - |  |
 | disabledTime | To specify the time that cannot be selected | function(date) | - |  |
-| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)[] | `YYYY-MM-DD` |  |
+| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)\[] | `YYYY-MM-DD` |  |
 | renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - |  |
+| showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | 4.4.0 |
 | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) |  |
 | showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |  |
 | showToday | Whether to show `Today` button | boolean | true |  |
@@ -98,14 +99,13 @@ The following APIs are shared by DatePicker, RangePicker.
 | onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |  |
 | onOk | Callback when click ok button | function() | - |  |
 | onPanelChange | Callback function for panel changing | function(value, mode) | - |  |
-| showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | 4.4.0 |
 
 ### DatePicker\[picker=year]
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| defaultValue | To set default date | [moment](http://momentjs.com/) | - |  |
 | defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - |  |
+| defaultValue | To set default date | [moment](http://momentjs.com/) | - |  |
 | format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY` |  |
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |
 | value | To set date | [moment](http://momentjs.com/) | - |  |
@@ -117,8 +117,8 @@ Added in `4.1.0`.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| defaultValue | To set default date | [moment](http://momentjs.com/) | - |  |
 | defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - |  |
+| defaultValue | To set default date | [moment](http://momentjs.com/) | - |  |
 | format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-\QQ` |  |
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |
 | value | To set date | [moment](http://momentjs.com/) | - |  |
@@ -128,8 +128,8 @@ Added in `4.1.0`.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| defaultValue | To set default date | [moment](http://momentjs.com/) | - |  |
 | defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - |  |
+| defaultValue | To set default date | [moment](http://momentjs.com/) | - |  |
 | format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-MM` |  |
 | monthCellRender | Custom month cell content render method | function(date, locale): ReactNode | - |  |
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |
@@ -140,12 +140,12 @@ Added in `4.1.0`.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| defaultValue | To set default date | [moment](http://momentjs.com/) | - |  |
 | defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - |  |
+| defaultValue | To set default date | [moment](http://momentjs.com/) | - |  |
 | format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-wo` |  |
+| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - |  |
 | value | To set date | [moment](http://momentjs.com/) | - |  |
 | onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |  |
-| renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - |  |
 
 ### RangePicker
 
@@ -153,11 +153,11 @@ Added in `4.1.0`.
 | --- | --- | --- | --- | --- |
 | allowEmpty | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] |  |
 | dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: moment, today: moment, info: { range: `start` \| `end` }) => React.ReactNode | - |  |
+| defaultPickerValue | To set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |  |
 | defaultValue | To set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |  |
-| defaultPickerValue | To set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)\] | - |  |
 | disabled | If disable start or end | \[boolean, boolean] | - |  |
 | disabledTime | To specify the time that cannot be selected | function(date: moment, partial: `start` \| `end`) | - |  |
-| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string[] | `YYYY-MM-DD HH:mm:ss` |  |
+| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string\[] | `YYYY-MM-DD HH:mm:ss` |  |
 | ranges | The preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - |  |
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |
 | separator | Set separator between inputs | string | `~` |  |
@@ -183,7 +183,11 @@ DatePicker default set `locale` as `en` in v4. You can config DatePicker `locale
 
 ### How to modify start day of week?
 
-Please use correct [language](/docs/react/i18n) ([#5605](https://github.com/ant-design/ant-design/issues/5605)), or update moment `locale` config: https://codesandbox.io/s/moment-day-of-week-6dby5
+Please use correct [language](/docs/react/i18n) ([#5605](https://github.com/ant-design/ant-design/issues/5605)), or update moment `locale` config: <https://codesandbox.io/s/moment-day-of-week-6dby5>
+
+### Why origin panel don't switch when using `panelRender`?
+
+When you change the layout of nodes by `panelRender`, React will unmount and re-mount it which reset the component state. You should keep the layout stable. Please ref [#27263](https://github.com/ant-design/ant-design/issues/27263) for more info.
 
 ```js
 moment.locale('en', {
diff --git a/components/date-picker/index.zh-CN.md b/components/date-picker/index.zh-CN.md
index 8f6a50dfa4..93b8686b9f 100644
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@@ -55,12 +55,14 @@ import locale from 'antd/es/locale/zh_CN';
 | --- | --- | --- | --- | --- |
 | allowClear | 是否显示清除按钮 | boolean | true |  |
 | autoFocus | 自动获取焦点 | boolean | false |  |
+| bordered | 是否有边框 | boolean | true |  |
 | className | 选择器 className | string | - |  |
 | dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - |  |
 | disabled | 禁用 | boolean | false |  |
 | disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - |  |
 | dropdownClassName | 额外的弹出日历 className | string | - |  |
 | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - |  |
+| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |  |
 | locale | 国际化配置 | object | [默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json) |  |
 | mode | 日期面板的状态（[设置后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)） | `time` \| `date` \| `month` \| `year` \| `decade` | - |  |
 | open | 控制弹层是否展开 | boolean | - |  |
@@ -69,29 +71,28 @@ import locale from 'antd/es/locale/zh_CN';
 | placeholder | 输入框提示文字 | string \| \[string, string] | - |  |
 | popupStyle | 额外的弹出日历样式 | CSSProperties | {} |  |
 | size | 输入框大小，`large` 高度为 40px，`small` 为 24px，默认是 32px | `large` \| `middle` \| `small` | - |  |
-| bordered | 是否有边框 | boolean | true |  |
-| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
 | style | 自定义输入框样式 | CSSProperties | {} |  |
+| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
 | onOpenChange | 弹出日历和关闭日历的回调 | function(open) | - |  |
 | onPanelChange | 日历面板切换的回调 | function(value, mode) | - |  |
-| inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |  |
 
 ### 共同的方法
 
-| 名称    | 描述     | 版本 |
-| ------- | -------- | ---- |
-| blur()  | 移除焦点 |      |
-| focus() | 获取焦点 |      |
+| 名称 | 描述 | 版本 |
+| --- | --- | --- |
+| blur() | 移除焦点 |  |
+| focus() | 获取焦点 |  |
 
 ### DatePicker
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | - |  |
 | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
+| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | - |  |
 | disabledTime | 不可选择的时间 | function(date) | - |  |
-| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)[] | `YYYY-MM-DD` |  |
+| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)\[] | `YYYY-MM-DD` |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
+| showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
 | showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#API) |  |
 | showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |  |
 | showToday | 是否展示“今天”按钮 | boolean | true |  |
@@ -99,14 +100,13 @@ import locale from 'antd/es/locale/zh_CN';
 | onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | - |  |
 | onOk | 点击确定按钮的回调 | function() | - |  |
 | onPanelChange | 日期面板变化时的回调 | function(value, mode) | - |  |
-| showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
 
 ### DatePicker\[picker=year]
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
 | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
+| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
 | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY` |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
 | value | 日期 | [moment](http://momentjs.com/) | - |  |
@@ -118,8 +118,8 @@ import locale from 'antd/es/locale/zh_CN';
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
 | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
+| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
 | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-\QQ` |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
 | value | 日期 | [moment](http://momentjs.com/) | - |  |
@@ -129,8 +129,8 @@ import locale from 'antd/es/locale/zh_CN';
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
 | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
+| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
 | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-MM` |  |
 | monthCellRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
@@ -141,12 +141,12 @@ import locale from 'antd/es/locale/zh_CN';
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
 | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
+| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
 | format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-wo` |  |
+| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
 | value | 日期 | [moment](http://momentjs.com/) | - |  |
 | onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |  |
-| renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
 
 ### RangePicker
 
@@ -154,8 +154,8 @@ import locale from 'antd/es/locale/zh_CN';
 | --- | --- | --- | --- | --- |
 | allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] |  |
 | dateRender | 自定义日期单元格的内容。`info` 参数自 4.3.0 添加 | function(currentDate: moment, today: moment, info: { range: `start` \| `end` }) => React.ReactNode | - |  |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | - |  |
 | defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | - |  |
+| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | - |  |
 | disabled | 禁用起始项 | \[boolean, boolean] | - |  |
 | disabledTime | 不可选择的时间 | function(date: moment, partial: `start` \| `end`) | - |  |
 | format | 展示的日期格式 | string | `YYYY-MM-DD HH:mm:ss` |  |
@@ -165,8 +165,8 @@ import locale from 'antd/es/locale/zh_CN';
 | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |  |
 | showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] |  |
 | value | 日期 | [moment](http://momentjs.com/)\[] | - |  |
-| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[moment, moment\], dateStrings: \[string, string\], info: { range:`start`\|`end` }) | - |  |
-| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | - |  |
+| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[moment, moment], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
+| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment], dateStrings: \[string, string]) | - |  |
 
 ## FAQ
 
@@ -184,7 +184,11 @@ v4 中，DatePicker 默认 `locale` 为 `en`。你可以通过 DatePicker 的 `l
 
 ### 如何修改周的起始日？
 
-请使用正确的[语言包](/docs/react/i18n)（[#5605](https://github.com/ant-design/ant-design/issues/5605)），或者修改 moment 的 `locale` 配置：https://codesandbox.io/s/moment-day-of-week-6dby5
+请使用正确的[语言包](/docs/react/i18n)（[#5605](https://github.com/ant-design/ant-design/issues/5605)），或者修改 moment 的 `locale` 配置：<https://codesandbox.io/s/moment-day-of-week-6dby5>
+
+### 为何使用 `panelRender` 时，原来面板无法切换？
+
+当你通过 `panelRender` 动态改变层级结构时，会使得原本的 Panel 被当做新的节点删除并创建。这使得其原本的状态会被重置，保持结构稳定即可。详情请参考 [#27263](https://github.com/ant-design/ant-design/issues/27263)。
 
 ```js
 moment.locale('en', {
diff --git a/components/descriptions/index.en-US.md b/components/descriptions/index.en-US.md
index 32bd3ad5d7..11a48edd1c 100644
--- a/components/descriptions/index.en-US.md
+++ b/components/descriptions/index.en-US.md
@@ -18,19 +18,19 @@ Commonly displayed on the details page.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| title | The title of the description list, placed at the top | ReactNode | - |  |
-| extra | The action area of the description list, placed at the top-right | ReactNode | - | 4.5.0 |
 | bordered | Whether to display the border | boolean | false |  |
-| column | The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 |  |
-| size | Set the size of the list. Can be set to `middle`,`small`, or not filled | `default` \| `middle` \| `small` | - |  |
-| layout | Define description layout | `horizontal` \| `vertical` | `horizontal` |  |
 | colon | Change default props `colon` value of Descriptions.Item | boolean | true |  |
+| column | The number of `DescriptionItems` in a row,could be a number or a object like `{ xs: 8, sm: 16, md: 24}`,(Only set `bordered={true}` to take effect) | number | 3 |  |
+| extra | The action area of the description list, placed at the top-right | ReactNode | - | 4.5.0 |
+| layout | Define description layout | `horizontal` \| `vertical` | `horizontal` |  |
+| size | Set the size of the list. Can be set to `middle`,`small`, or not filled | `default` \| `middle` \| `small` | - |  |
+| title | The title of the description list, placed at the top | ReactNode | - |  |
 
 ### DescriptionItem
 
-| Property | Description                    | Type      | Default | Version |
-| -------- | ------------------------------ | --------- | ------- | ------- |
-| label    | The description of the content | ReactNode | -       |         |
-| span     | The number of columns included | number    | 1       |         |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| label | The description of the content | ReactNode | - |  |
+| span | The number of columns included | number | 1 |  |
 
 > The number of span Description.Item. Span={2} takes up the width of two DescriptionItems.
diff --git a/components/descriptions/index.zh-CN.md b/components/descriptions/index.zh-CN.md
index c2b9da0d4c..bb2d6c0bbb 100644
--- a/components/descriptions/index.zh-CN.md
+++ b/components/descriptions/index.zh-CN.md
@@ -19,19 +19,19 @@ cover: https://gw.alipayobjects.com/zos/alicdn/MjtG9_FOI/Descriptions.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| title | 描述列表的标题，显示在最顶部 | ReactNode | - |  |
-| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
 | bordered | 是否展示边框 | boolean | false |  |
-| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 |  |
-| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default` \| `middle` \| `small` | - |  |
-| layout | 描述布局 | `horizontal` \| `vertical` | `horizontal` |  |
 | colon | 配置 `Descriptions.Item` 的 `colon` 的默认值 | boolean | true |  |
+| column | 一行的 `DescriptionItems` 数量，可以写成像素值或支持响应式的对象写法 `{ xs: 8, sm: 16, md: 24}` | number | 3 |  |
+| extra | 描述列表的操作区域，显示在右上方 | ReactNode | - | 4.5.0 |
+| layout | 描述布局 | `horizontal` \| `vertical` | `horizontal` |  |
+| size | 设置列表的大小。可以设置为 `middle` 、`small`, 或不填（只有设置 `bordered={true}` 生效） | `default` \| `middle` \| `small` | - |  |
+| title | 描述列表的标题，显示在最顶部 | ReactNode | - |  |
 
 ### DescriptionItem
 
-| 参数  | 说明         | 类型      | 默认值 | 版本 |
-| ----- | ------------ | --------- | ------ | ---- |
-| label | 内容的描述   | ReactNode | -      |      |
-| span  | 包含列的数量 | number    | 1      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| label | 内容的描述 | ReactNode | - |  |
+| span | 包含列的数量 | number | 1 |  |
 
 > span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。
diff --git a/components/descriptions/style/index.less b/components/descriptions/style/index.less
index e2f26f670c..a945a58172 100644
--- a/components/descriptions/style/index.less
+++ b/components/descriptions/style/index.less
@@ -86,6 +86,7 @@
     color: @text-color;
     font-size: @font-size-base;
     line-height: @line-height-base;
+    word-break: break-word;
     overflow-wrap: break-word;
   }
 
diff --git a/components/divider/index.zh-CN.md b/components/divider/index.zh-CN.md
index 19d81b8830..8d9e4811c2 100644
--- a/components/divider/index.zh-CN.md
+++ b/components/divider/index.zh-CN.md
@@ -15,11 +15,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5swjECahe/Divider.svg
 
 ## API
 
-| 参数        | 说明                       | 类型                          | 默认值       | 版本  |
-| ----------- | -------------------------- | ----------------------------- | ------------ | ----- |
-| className   | 分割线样式类               | string                        | -            |       |
-| dashed      | 是否虚线                   | boolean                       | false        |       |
-| orientation | 分割线标题的位置           | `left` \| `right` \| `center` | `center`     |       |
-| plain       | 文字是否显示为普通正文样式 | boolean                       | false        | 4.2.0 |
-| style       | 分割线样式对象             | CSSProperties                 | -            |       |
-| type        | 水平还是垂直类型           | `horizontal` \| `vertical`    | `horizontal` |       |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| className | 分割线样式类 | string | - |  |
+| dashed | 是否虚线 | boolean | false |  |
+| orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center` |  |
+| plain | 文字是否显示为普通正文样式 | boolean | false | 4.2.0 |
+| style | 分割线样式对象 | CSSProperties | - |  |
+| type | 水平还是垂直类型 | `horizontal` \| `vertical` | `horizontal` |  |
diff --git a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
index 5501c64ae1..12943d828a 100644
--- a/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/Drawer.test.js.snap
@@ -29,6 +29,7 @@ exports[`Drawer className is test_drawer 1`] = `
               aria-label="Close"
               class="ant-drawer-close"
               style="--scroll-bar:0px"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -126,6 +127,7 @@ exports[`Drawer destroyOnClose is true 1`] = `
               aria-label="Close"
               class="ant-drawer-close"
               style="--scroll-bar:0px"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -192,6 +194,7 @@ exports[`Drawer getContainer return undefined 2`] = `
                 aria-label="Close"
                 class="ant-drawer-close"
                 style="--scroll-bar: 0px;"
+                type="button"
               >
                 <span
                   aria-label="close"
@@ -256,6 +259,7 @@ exports[`Drawer have a footer 1`] = `
               aria-label="Close"
               class="ant-drawer-close"
               style="--scroll-bar:0px"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -329,6 +333,7 @@ exports[`Drawer have a title 1`] = `
               aria-label="Close"
               class="ant-drawer-close"
               style="--scroll-bar:0px"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -392,6 +397,7 @@ exports[`Drawer render correctly 1`] = `
               aria-label="Close"
               class="ant-drawer-close"
               style="--scroll-bar:0px"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -455,6 +461,7 @@ exports[`Drawer render top drawer 1`] = `
               aria-label="Close"
               class="ant-drawer-close"
               style="--scroll-bar:0px"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -523,6 +530,7 @@ exports[`Drawer style/drawerStyle/headerStyle/bodyStyle should work 1`] = `
               aria-label="Close"
               class="ant-drawer-close"
               style="--scroll-bar:0px"
+              type="button"
             >
               <span
                 aria-label="close"
@@ -587,6 +595,7 @@ exports[`Drawer support closeIcon 1`] = `
               aria-label="Close"
               class="ant-drawer-close"
               style="--scroll-bar:0px"
+              type="button"
             >
               <span>
                 close
diff --git a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
index 1f1f021968..1cdb5e7f3d 100644
--- a/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
+++ b/components/drawer/__tests__/__snapshots__/DrawerEvent.test.js.snap
@@ -37,6 +37,7 @@ exports[`Drawer render correctly 1`] = `
                 aria-label="Close"
                 class="ant-drawer-close"
                 style="--scroll-bar: 0px;"
+                type="button"
               >
                 <span
                   aria-label="close"
diff --git a/components/drawer/index.en-US.md b/components/drawer/index.en-US.md
index fa15ca2dd6..14224d4de7 100644
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@@ -20,28 +20,28 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 
 | Props | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not | boolean | true |
-| closeIcon | Custom close icon | ReactNode | &lt;CloseOutlined /> |
-| destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false |
-| forceRender | Prerender Drawer component forcely | boolean | false |
-| getContainer | Return the mounted node for Drawer | HTMLElement \| () => HTMLElement \| Selectors \| false | body |
-| mask | Whether to show mask or not | boolean | true |
-| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true |
-| maskStyle | Style for Drawer's mask element | CSSProperties | {} |
-| style | Style of wrapper element which **contains mask** compare to `drawerStyle` | CSSProperties | - |
-| drawerStyle | Style of the popup layer element | object | - |
-| headerStyle | Style of the drawer header part | object | - |
-| bodyStyle | Style of the drawer content part | object | - |
-| title | The title for Drawer | ReactNode | - |
-| visible | Whether the Drawer dialog is visible or not | boolean | false |
-| width | Width of the Drawer dialog | string \| number | 256 |
-| height | Placement is `top` or `bottom`, height of the Drawer dialog | string \| number | 256 |
-| className | The class name of the container of the Drawer dialog | string | - |
-| zIndex | The `z-index` of the Drawer | number | 1000 |
-| placement | The placement of the Drawer | `top` \| `right` \| `bottom` \| `left` | `right` |
-| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button | function(e) | - |
-| afterVisibleChange | Callback after the animation ends when switching drawers | function(visible) | - |
-| keyboard | Whether support press esc to close | boolean | true |
-| footer | The footer for Drawer | ReactNode | - |
-| footerStyle | Style of the drawer footer part | CSSProperties | - |
+| afterVisibleChange | Callback after the animation ends when switching drawers | function(visible) | - |  |
+| bodyStyle | Style of the drawer content part | object | - |  |
+| className | The class name of the container of the Drawer dialog | string | - |  |
+| closable | Whether a close (x) button is visible on top right of the Drawer dialog or not | boolean | true |  |
+| closeIcon | Custom close icon | ReactNode | &lt;CloseOutlined /> |  |
+| destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false |  |
+| drawerStyle | Style of the popup layer element | object | - |  |
+| footer | The footer for Drawer | ReactNode | - |  |
+| footerStyle | Style of the drawer footer part | CSSProperties | - |  |
+| forceRender | Prerender Drawer component forcely | boolean | false |  |
+| getContainer | Return the mounted node for Drawer | HTMLElement \| () => HTMLElement \| Selectors \| false | body |  |
+| headerStyle | Style of the drawer header part | object | - |  |
+| height | Placement is `top` or `bottom`, height of the Drawer dialog | string \| number | 256 |  |
+| keyboard | Whether support press esc to close | boolean | true |  |
+| mask | Whether to show mask or not | boolean | true |  |
+| maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true |  |
+| maskStyle | Style for Drawer's mask element | CSSProperties | {} |  |
+| placement | The placement of the Drawer | `top` \| `right` \| `bottom` \| `left` | `right` |  |
 | push | Nested drawers push behavior | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
+| style | Style of wrapper element which **contains mask** compare to `drawerStyle` | CSSProperties | - |  |
+| title | The title for Drawer | ReactNode | - |  |
+| visible | Whether the Drawer dialog is visible or not | boolean | false |  |
+| width | Width of the Drawer dialog | string \| number | 256 |  |
+| zIndex | The `z-index` of the Drawer | number | 1000 |  |
+| onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button | function(e) | - |  |
diff --git a/components/drawer/index.tsx b/components/drawer/index.tsx
index c6b41d4fc1..659a2e13ac 100644
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@@ -218,8 +218,8 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
     const { closable, closeIcon = <CloseOutlined />, prefixCls, onClose } = this.props;
     return (
       closable && (
-        // eslint-disable-next-line react/button-has-type
         <button
+          type="button"
           onClick={onClose}
           aria-label="Close"
           className={`${prefixCls}-close`}
diff --git a/components/drawer/index.zh-CN.md b/components/drawer/index.zh-CN.md
index b26be668d9..e4fdb889f0 100644
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@@ -19,28 +19,28 @@ cover: https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| closable | 是否显示右上角的关闭按钮 | boolean | true |
-| closeIcon | 自定义关闭图标 | ReactNode | &lt;CloseOutlined /> |
-| destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false |
-| forceRender | 预渲染 Drawer 内元素 | boolean | false |
-| getContainer | 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | body |
-| maskClosable | 点击蒙层是否允许关闭 | boolean | true |
-| mask | 是否展示遮罩 | boolean | true |
-| maskStyle | 遮罩样式 | CSSProperties | {} |
-| style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | CSSProperties | - |
-| drawerStyle | 用于设置 Drawer 弹出层的样式 | CSSProperties | - |
-| headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - |
-| bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - |
-| title | 标题 | ReactNode | - |
-| visible | Drawer 是否可见 | boolean | - |
-| width | 宽度 | string \| number | 256 |
-| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 |
-| className | 对话框外层容器的类名 | string | - |
-| zIndex | 设置 Drawer 的 `z-index` | number | 1000 |
-| placement | 抽屉的方向 | `top` \| `right` \| `bottom` \| `left` | `right` |
-| onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - |
-| afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | - |
-| keyboard | 是否支持键盘 esc 关闭 | boolean | true |
-| footer | 抽屉的页脚 | ReactNode | - |
-| footerStyle | 抽屉页脚部件的样式 | CSSProperties | - |
+| afterVisibleChange | 切换抽屉时动画结束后的回调 | function(visible) | - |  |
+| bodyStyle | 可用于设置 Drawer 内容部分的样式 | CSSProperties | - |  |
+| className | 对话框外层容器的类名 | string | - |  |
+| closable | 是否显示右上角的关闭按钮 | boolean | true |  |
+| closeIcon | 自定义关闭图标 | ReactNode | &lt;CloseOutlined /> |  |
+| destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false |  |
+| drawerStyle | 用于设置 Drawer 弹出层的样式 | CSSProperties | - |  |
+| footer | 抽屉的页脚 | ReactNode | - |  |
+| footerStyle | 抽屉页脚部件的样式 | CSSProperties | - |  |
+| forceRender | 预渲染 Drawer 内元素 | boolean | false |  |
+| getContainer | 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | body |  |
+| headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - |  |
+| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 |  |
+| keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
+| mask | 是否展示遮罩 | boolean | true |  |
+| maskClosable | 点击蒙层是否允许关闭 | boolean | true |  |
+| maskStyle | 遮罩样式 | CSSProperties | {} |  |
+| placement | 抽屉的方向 | `top` \| `right` \| `bottom` \| `left` | `right` |  |
 | push | 用于设置多层 Drawer 的推动行为 | boolean \| { distance: string \| number } | { distance: 180 } | 4.5.0+ |
+| style | 可用于设置 Drawer 最外层容器的样式，和 `drawerStyle` 的区别是作用节点包括 `mask` | CSSProperties | - |  |
+| title | 标题 | ReactNode | - |  |
+| visible | Drawer 是否可见 | boolean | - |  |
+| width | 宽度 | string \| number | 256 |  |
+| zIndex | 设置 Drawer 的 `z-index` | number | 1000 |  |
+| onClose | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - |  |
diff --git a/components/dropdown/index.en-US.md b/components/dropdown/index.en-US.md
index 49e9d6f3c7..e8a54c5269 100644
--- a/components/dropdown/index.en-US.md
+++ b/components/dropdown/index.en-US.md
@@ -19,14 +19,14 @@ When there are more than a few options to choose from, you can wrap them in a `D
 | --- | --- | --- | --- | --- |
 | arrow | Whether the dropdown arrow should be visible | boolean | false |  |
 | disabled | Whether the dropdown menu is disabled | boolean | - |  |
-| 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) | function(triggerNode) | () => document.body |  |
+| 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 | object | - |  |
-| onVisibleChange | Called when the visible state is changed | function(visible) | - |  |
+| overlayStyle | The style of the dropdown root element | CSSProperties | - |  |
 | 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 | (visible: boolean) => void | - |  |
 
 You should use [Menu](/components/menu/) as `overlay`. The menu items and dividers are also available by using `Menu.Item` and `Menu.Divider`.
 
@@ -38,14 +38,14 @@ You should use [Menu](/components/menu/) as `overlay`. The menu items and divide
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| buttonsRender | Custom buttons inside Dropdown.Button | ([buttons: ReactNode[]]) => ReactNode | - |  |
+| buttonsRender | Custom buttons inside Dropdown.Button | (buttons: ReactNode\[]) => ReactNode\[] | - |  |
 | disabled | Whether the dropdown menu is disabled | boolean | - |  |
 | icon | Icon (appears on the right) | ReactNode | - |  |
-| onClick | The same as [Button](/components/button): called when you click the button on the left | function | - |  |
-| onVisibleChange | Called when the visible state is changed | function | - |  |
 | overlay | The dropdown menu | [Menu](/components/menu) | - |  |
 | placement | Placement of popup menu: `bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` |  |
-| size | Size of the button, the same as [Button](/components/button) | string | `default` |  |
+| 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) | string | `default` |  |
+| type | Type of the button, the same as [Button](/components/button/#API) | string | `default` |  |
 | visible | Whether the dropdown menu is currently visible | boolean | - |  |
+| onClick | The same as [Button](/components/button/#API): called when you click the button on the left | (event) => void | - |  |
+| onVisibleChange | Called when the visible state is changed | (visible: boolean) => void | - |  |
diff --git a/components/dropdown/index.zh-CN.md b/components/dropdown/index.zh-CN.md
index 53210e9f4f..239f01cc04 100644
--- a/components/dropdown/index.zh-CN.md
+++ b/components/dropdown/index.zh-CN.md
@@ -23,14 +23,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 | --- | --- | --- | --- | --- |
 | arrow | 下拉框箭头是否显示 | boolean | false |  |
 | disabled | 菜单是否禁用 | boolean | - |  |
-| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body |  |
+| getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | (triggerNode: HTMLElement) => HTMLElement | () => document.body |  |
 | overlay | 菜单 | [Menu](/components/menu) \| () => Menu | - |  |
 | overlayClassName | 下拉根元素的类名称 | string | - |  |
-| overlayStyle | 下拉根元素的样式 | object | - |  |
-| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | function(visible) | - |  |
+| overlayStyle | 下拉根元素的样式 | CSSProperties | - |  |
 | placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` |  |
 | trigger | 触发下拉的行为, 移动端不支持 hover | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
 | visible | 菜单是否显示 | boolean | - |  |
+| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | (visible: boolean) => void | - |  |
 
 `overlay` 菜单使用 [Menu](/components/menu/)，还包括菜单项 `Menu.Item`，分割线 `Menu.Divider`。
 
@@ -42,14 +42,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/eedWN59yJ/Dropdown.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| buttonsRender | 自定义左右两个按钮 | ([buttons: ReactNode[]]) => ReactNode | - |  |
+| buttonsRender | 自定义左右两个按钮 | (buttons: ReactNode\[]) => ReactNode\[] | - |  |
 | disabled | 菜单是否禁用 | boolean | - |  |
 | icon | 右侧的 icon | ReactNode | - |  |
-| onClick | 点击左侧按钮的回调，和 [Button](/components/button/) 一致 | function | - |  |
-| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | function | - |  |
 | overlay | 菜单 | [Menu](/components/menu/) | - |  |
 | placement | 菜单弹出位置：`bottomLeft` `bottomCenter` `bottomRight` `topLeft` `topCenter` `topRight` | string | `bottomLeft` |  |
-| size | 按钮大小，和 [Button](/components/button/) 一致 | string | `default` |  |
+| size | 按钮大小，和 [Button](/components/button/#API) 一致 | string | `default` |  |
 | trigger | 触发下拉的行为 | Array&lt;`click`\|`hover`\|`contextMenu`> | \[`hover`] |  |
-| type | 按钮类型，和 [Button](/components/button/) 一致 | string | `default` |  |
+| type | 按钮类型，和 [Button](/components/button/#API) 一致 | string | `default` |  |
 | visible | 菜单是否显示 | boolean | - |  |
+| onClick | 点击左侧按钮的回调，和 [Button](/components/button/#API) 一致 | (event) => void | - |  |
+| onVisibleChange | 菜单显示状态改变时调用，参数为 `visible` | (visible: boolean) => void | - |  |
diff --git a/components/dropdown/style/index.less b/components/dropdown/style/index.less
index df590b76ac..4240037c88 100644
--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@@ -170,10 +170,12 @@
       transition: all 0.3s;
 
       > .@{iconfont-css-prefix}:first-child,
+      > a > .@{iconfont-css-prefix}:first-child,
       > span > .@{iconfont-css-prefix}:first-child {
         min-width: 12px;
         margin-right: 8px;
         font-size: @font-size-sm;
+        vertical-align: -0.1em;
       }
 
       > a {
diff --git a/components/empty/index.en-US.md b/components/empty/index.en-US.md
index c9a187eb3b..9c7cd06530 100644
--- a/components/empty/index.en-US.md
+++ b/components/empty/index.en-US.md
@@ -24,8 +24,8 @@ Empty state placeholder.
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | description | Customize description | ReactNode | - |  |
-| imageStyle | The style of image | CSSProperties | - |  |
 | image | Customize image. Will treat as image url when string provided | ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` |  |
+| imageStyle | The style of image | CSSProperties | - |  |
 
 ## Built-in images
 
diff --git a/components/empty/index.zh-CN.md b/components/empty/index.zh-CN.md
index 013468debe..ef887fb9a1 100644
--- a/components/empty/index.zh-CN.md
+++ b/components/empty/index.zh-CN.md
@@ -25,8 +25,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/MNbKfLBVb/Empty.svg
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | description | 自定义描述内容 | ReactNode | - |  |
-| imageStyle | 图片样式 | CSSProperties | - |  |
 | image | 设置显示图片，为 string 时表示自定义图片地址。 | ReactNode | `Empty.PRESENTED_IMAGE_DEFAULT` |  |
+| imageStyle | 图片样式 | CSSProperties | - |  |
 
 ## 内置图片
 
diff --git a/components/form/FormList.tsx b/components/form/FormList.tsx
index 140242edca..e1b7b379db 100644
--- a/components/form/FormList.tsx
+++ b/components/form/FormList.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { List } from 'rc-field-form';
-import { StoreValue } from 'rc-field-form/lib/interface';
+import { ValidatorRule, StoreValue } from 'rc-field-form/lib/interface';
 import devWarning from '../_util/devWarning';
 import { ConfigContext } from '../config-provider';
 import { FormItemPrefixContext } from './context';
@@ -20,6 +20,7 @@ export interface FormListOperation {
 export interface FormListProps {
   prefixCls?: string;
   name: string | number | (string | number)[];
+  rules?: ValidatorRule[];
   children: (
     fields: FormListFieldData[],
     operation: FormListOperation,
diff --git a/components/form/__tests__/__snapshots__/demo.test.js.snap b/components/form/__tests__/__snapshots__/demo.test.js.snap
index a154e00ed4..0965a8fd05 100644
--- a/components/form/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/form/__tests__/__snapshots__/demo.test.js.snap
@@ -1549,86 +1549,84 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
   class="ant-form ant-form-horizontal"
   id="dynamic_form_item"
 >
-  <div>
+  <div
+    class="ant-row ant-form-item"
+  >
     <div
-      class="ant-row ant-form-item"
+      class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
     >
       <div
-        class="ant-col ant-form-item-control ant-col-xs-24 ant-col-xs-offset-0 ant-col-sm-20 ant-col-sm-offset-4"
+        class="ant-form-item-control-input"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-form-item-control-input-content"
         >
-          <div
-            class="ant-form-item-control-input-content"
+          <button
+            class="ant-btn ant-btn-dashed"
+            style="width:60%"
+            type="button"
           >
-            <button
-              class="ant-btn ant-btn-dashed"
-              style="width:60%"
-              type="button"
+            <span
+              aria-label="plus"
+              class="anticon anticon-plus"
+              role="img"
             >
-              <span
-                aria-label="plus"
-                class="anticon anticon-plus"
-                role="img"
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="plus"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="plus"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <defs />
-                  <path
-                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                  />
-                  <path
-                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                  />
-                </svg>
-              </span>
-              <span>
-                 Add field
-              </span>
-            </button>
-            <button
-              class="ant-btn ant-btn-dashed"
-              style="width:60%;margin-top:20px"
-              type="button"
+                <defs />
+                <path
+                  d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                />
+                <path
+                  d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                />
+              </svg>
+            </span>
+            <span>
+              Add field
+            </span>
+          </button>
+          <button
+            class="ant-btn ant-btn-dashed"
+            style="width:60%;margin-top:20px"
+            type="button"
+          >
+            <span
+              aria-label="plus"
+              class="anticon anticon-plus"
+              role="img"
             >
-              <span
-                aria-label="plus"
-                class="anticon anticon-plus"
-                role="img"
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="plus"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="plus"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <defs />
-                  <path
-                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                  />
-                  <path
-                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                  />
-                </svg>
-              </span>
-              <span>
-                 Add field at head
-              </span>
-            </button>
-          </div>
+                <defs />
+                <path
+                  d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                />
+                <path
+                  d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                />
+              </svg>
+            </span>
+            <span>
+              Add field at head
+            </span>
+          </button>
         </div>
       </div>
     </div>
@@ -1666,52 +1664,50 @@ exports[`renders ./components/form/demo/dynamic-form-items.md correctly 1`] = `
   class="ant-form ant-form-horizontal"
   id="dynamic_form_nest_item"
 >
-  <div>
+  <div
+    class="ant-row ant-form-item"
+  >
     <div
-      class="ant-row ant-form-item"
+      class="ant-col ant-form-item-control"
     >
       <div
-        class="ant-col ant-form-item-control"
+        class="ant-form-item-control-input"
       >
         <div
-          class="ant-form-item-control-input"
+          class="ant-form-item-control-input-content"
         >
-          <div
-            class="ant-form-item-control-input-content"
+          <button
+            class="ant-btn ant-btn-dashed ant-btn-block"
+            type="button"
           >
-            <button
-              class="ant-btn ant-btn-dashed ant-btn-block"
-              type="button"
+            <span
+              aria-label="plus"
+              class="anticon anticon-plus"
+              role="img"
             >
-              <span
-                aria-label="plus"
-                class="anticon anticon-plus"
-                role="img"
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="plus"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
-                  aria-hidden="true"
-                  class=""
-                  data-icon="plus"
-                  fill="currentColor"
-                  focusable="false"
-                  height="1em"
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <defs />
-                  <path
-                    d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
-                  />
-                  <path
-                    d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
-                  />
-                </svg>
-              </span>
-              <span>
-                 Add field
-              </span>
-            </button>
-          </div>
+                <defs />
+                <path
+                  d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
+                />
+                <path
+                  d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
+                />
+              </svg>
+            </span>
+            <span>
+              Add field
+            </span>
+          </button>
         </div>
       </div>
     </div>
@@ -1875,7 +1871,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.md correctly
               </svg>
             </span>
             <span>
-               Add sights
+              Add sights
             </span>
           </button>
         </div>
@@ -2788,14 +2784,10 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
         <div
           class="ant-form-item-control-input-content"
         >
-          <div
-            class="ant-input-textarea"
-          >
-            <textarea
-              class="ant-input"
-              id="nest-messages_user_introduction"
-            />
-          </div>
+          <textarea
+            class="ant-input"
+            id="nest-messages_user_introduction"
+          />
         </div>
       </div>
     </div>
@@ -7630,7 +7622,7 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
           class="ant-form-item-control-input-content"
         >
           <span
-            class="ant-input-affix-wrapper ant-input-password"
+            class="ant-input-affix-wrapper"
           >
             <input
               action="click"
diff --git a/components/form/demo/control-hooks.md b/components/form/demo/control-hooks.md
index 8e698a9b41..c985e674e6 100644
--- a/components/form/demo/control-hooks.md
+++ b/components/form/demo/control-hooks.md
@@ -35,14 +35,14 @@ const Demo = () => {
 
   const onGenderChange = value => {
     switch (value) {
-      case "male":
-        form.setFieldsValue({ note: "Hi, man!" });
+      case 'male':
+        form.setFieldsValue({ note: 'Hi, man!' });
         return;
-      case "female":
-        form.setFieldsValue({ note: "Hi, lady!" });
+      case 'female':
+        form.setFieldsValue({ note: 'Hi, lady!' });
         return;
-      case "other":
-        form.setFieldsValue({ note: "Hi there!" });
+      case 'other':
+        form.setFieldsValue({ note: 'Hi there!' });
         return;
     }
   };
diff --git a/components/form/demo/dynamic-form-item.md b/components/form/demo/dynamic-form-item.md
index df4500aa60..f670b18231 100644
--- a/components/form/demo/dynamic-form-item.md
+++ b/components/form/demo/dynamic-form-item.md
@@ -53,68 +53,61 @@ const DynamicFieldSet = () => {
           },
         ]}
       >
-        {(fields, { add, remove }, { errors }) => {
-          return (
-            <div>
-              {fields.map((field, index) => (
+        {(fields, { add, remove }, { errors }) => (
+          <>
+            {fields.map((field, index) => (
+              <Form.Item
+                {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
+                label={index === 0 ? 'Passengers' : ''}
+                required={false}
+                key={field.key}
+              >
                 <Form.Item
-                  {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
-                  label={index === 0 ? 'Passengers' : ''}
-                  required={false}
-                  key={field.key}
+                  {...field}
+                  validateTrigger={['onChange', 'onBlur']}
+                  rules={[
+                    {
+                      required: true,
+                      whitespace: true,
+                      message: "Please input passenger's name or delete this field.",
+                    },
+                  ]}
+                  noStyle
                 >
-                  <Form.Item
-                    {...field}
-                    validateTrigger={['onChange', 'onBlur']}
-                    rules={[
-                      {
-                        required: true,
-                        whitespace: true,
-                        message: "Please input passenger's name or delete this field.",
-                      },
-                    ]}
-                    noStyle
-                  >
-                    <Input placeholder="passenger name" style={{ width: '60%' }} />
-                  </Form.Item>
-                  {fields.length > 1 ? (
-                    <MinusCircleOutlined
-                      className="dynamic-delete-button"
-                      style={{ margin: '0 8px' }}
-                      onClick={() => {
-                        remove(field.name);
-                      }}
-                    />
-                  ) : null}
+                  <Input placeholder="passenger name" style={{ width: '60%' }} />
                 </Form.Item>
-              ))}
-              <Form.Item>
-                <Button
-                  type="dashed"
-                  onClick={() => {
-                    add();
-                  }}
-                  style={{ width: '60%' }}
-                >
-                  <PlusOutlined /> Add field
-                </Button>
-                <Button
-                  type="dashed"
-                  onClick={() => {
-                    add('The head item', 0);
-                  }}
-                  style={{ width: '60%', marginTop: '20px' }}
-                >
-                  <PlusOutlined /> Add field at head
-                </Button>
-
-                <Form.ErrorList errors={errors} />
+                {fields.length > 1 ? (
+                  <MinusCircleOutlined
+                    className="dynamic-delete-button"
+                    onClick={() => remove(field.name)}
+                  />
+                ) : null}
               </Form.Item>
-            </div>
-          );
-        }}
+            ))}
+            <Form.Item>
+              <Button
+                type="dashed"
+                onClick={() => add()}
+                style={{ width: '60%' }}
+                icon={<PlusOutlined />}
+              >
+                Add field
+              </Button>
+              <Button
+                type="dashed"
+                onClick={() => {
+                  add('The head item', 0);
+                }}
+                style={{ width: '60%', marginTop: '20px' }}
+                icon={<PlusOutlined />}
+              >
+                Add field at head
+              </Button>
+              <Form.ErrorList errors={errors} />
+            </Form.Item>
+          </>
+        )}
       </Form.List>
-
       <Form.Item>
         <Button type="primary" htmlType="submit">
           Submit
@@ -129,6 +122,7 @@ ReactDOM.render(<DynamicFieldSet />, mountNode);
 
 ```css
 .dynamic-delete-button {
+  margin: 0 8px;
   cursor: pointer;
   position: relative;
   top: 4px;
diff --git a/components/form/demo/dynamic-form-items-complex.md b/components/form/demo/dynamic-form-items-complex.md
index c0d5ccfd6a..08bdeecd5a 100644
--- a/components/form/demo/dynamic-form-items-complex.md
+++ b/components/form/demo/dynamic-form-items-complex.md
@@ -17,6 +17,8 @@ This example demonstrates the case that a form contains multiple form controls.
 import { Form, Input, Button, Space, Select } from 'antd';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 
+const { Option } = Select;
+
 const areas = [
   { label: 'Beijing', value: 'Beijing' },
   { label: 'Shanghai', value: 'Shanghai' },
@@ -44,65 +46,56 @@ const Demo = () => {
         <Select options={areas} onChange={handleChange} />
       </Form.Item>
       <Form.List name="sights">
-        {(fields, { add, remove }) => {
-          return (
-            <>
-              {fields.map(field => (
-                <Space key={field.key} align="start">
-                  <Form.Item
-                    noStyle
-                    shouldUpdate={(prevValues, curValues) =>
-                      prevValues.area !== curValues.area || prevValues.sights !== curValues.sights
-                    }
-                  >
-                    {() => (
-                      <Form.Item
-                        {...field}
-                        label="Sight"
-                        name={[field.name, 'sight']}
-                        fieldKey={[field.fieldKey, 'sight']}
-                        rules={[{ required: true, message: 'Missing sight' }]}
-                      >
-                        <Select disabled={!form.getFieldValue('area')} style={{ width: 130 }}>
-                          {(sights[form.getFieldValue('area')] || []).map(item => (
-                            <Select.Option key={item} value={item}>
-                              {item}
-                            </Select.Option>
-                          ))}
-                        </Select>
-                      </Form.Item>
-                    )}
-                  </Form.Item>
-                  <Form.Item
-                    {...field}
-                    label="Price"
-                    name={[field.name, 'price']}
-                    fieldKey={[field.fieldKey, 'price']}
-                    rules={[{ required: true, message: 'Missing price' }]}
-                  >
-                    <Input />
-                  </Form.Item>
-
-                  <MinusCircleOutlined onClick={() => remove(field.name)} />
-                </Space>
-              ))}
-
-              <Form.Item>
-                <Button
-                  type="dashed"
-                  onClick={() => {
-                    add();
-                  }}
-                  block
+        {(fields, { add, remove }) => (
+          <>
+            {fields.map(field => (
+              <Space key={field.key} align="baseline">
+                <Form.Item
+                  noStyle
+                  shouldUpdate={(prevValues, curValues) =>
+                    prevValues.area !== curValues.area || prevValues.sights !== curValues.sights
+                  }
                 >
-                  <PlusOutlined /> Add sights
-                </Button>
-              </Form.Item>
-            </>
-          );
-        }}
-      </Form.List>
+                  {() => (
+                    <Form.Item
+                      {...field}
+                      label="Sight"
+                      name={[field.name, 'sight']}
+                      fieldKey={[field.fieldKey, 'sight']}
+                      rules={[{ required: true, message: 'Missing sight' }]}
+                    >
+                      <Select disabled={!form.getFieldValue('area')} style={{ width: 130 }}>
+                        {(sights[form.getFieldValue('area')] || []).map(item => (
+                          <Option key={item} value={item}>
+                            {item}
+                          </Option>
+                        ))}
+                      </Select>
+                    </Form.Item>
+                  )}
+                </Form.Item>
+                <Form.Item
+                  {...field}
+                  label="Price"
+                  name={[field.name, 'price']}
+                  fieldKey={[field.fieldKey, 'price']}
+                  rules={[{ required: true, message: 'Missing price' }]}
+                >
+                  <Input />
+                </Form.Item>
 
+                <MinusCircleOutlined onClick={() => remove(field.name)} />
+              </Space>
+            ))}
+
+            <Form.Item>
+              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
+                Add sights
+              </Button>
+            </Form.Item>
+          </>
+        )}
+      </Form.List>
       <Form.Item>
         <Button type="primary" htmlType="submit">
           Submit
diff --git a/components/form/demo/dynamic-form-items.md b/components/form/demo/dynamic-form-items.md
index f0d4e3313f..2b500401c3 100644
--- a/components/form/demo/dynamic-form-items.md
+++ b/components/form/demo/dynamic-form-items.md
@@ -25,52 +25,37 @@ const Demo = () => {
   return (
     <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
       <Form.List name="users">
-        {(fields, { add, remove }) => {
-          return (
-            <div>
-              {fields.map(field => (
-                <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="start">
-                  <Form.Item
-                    {...field}
-                    name={[field.name, 'first']}
-                    fieldKey={[field.fieldKey, 'first']}
-                    rules={[{ required: true, message: 'Missing first name' }]}
-                  >
-                    <Input placeholder="First Name" />
-                  </Form.Item>
-                  <Form.Item
-                    {...field}
-                    name={[field.name, 'last']}
-                    fieldKey={[field.fieldKey, 'last']}
-                    rules={[{ required: true, message: 'Missing last name' }]}
-                  >
-                    <Input placeholder="Last Name" />
-                  </Form.Item>
-
-                  <MinusCircleOutlined
-                    onClick={() => {
-                      remove(field.name);
-                    }}
-                  />
-                </Space>
-              ))}
-
-              <Form.Item>
-                <Button
-                  type="dashed"
-                  onClick={() => {
-                    add();
-                  }}
-                  block
+        {(fields, { add, remove }) => (
+          <>
+            {fields.map(field => (
+              <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
+                <Form.Item
+                  {...field}
+                  name={[field.name, 'first']}
+                  fieldKey={[field.fieldKey, 'first']}
+                  rules={[{ required: true, message: 'Missing first name' }]}
                 >
-                  <PlusOutlined /> Add field
-                </Button>
-              </Form.Item>
-            </div>
-          );
-        }}
+                  <Input placeholder="First Name" />
+                </Form.Item>
+                <Form.Item
+                  {...field}
+                  name={[field.name, 'last']}
+                  fieldKey={[field.fieldKey, 'last']}
+                  rules={[{ required: true, message: 'Missing last name' }]}
+                >
+                  <Input placeholder="Last Name" />
+                </Form.Item>
+                <MinusCircleOutlined onClick={() => remove(field.name)} />
+              </Space>
+            ))}
+            <Form.Item>
+              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
+                Add field
+              </Button>
+            </Form.Item>
+          </>
+        )}
       </Form.List>
-
       <Form.Item>
         <Button type="primary" htmlType="submit">
           Submit
diff --git a/components/form/demo/register.md b/components/form/demo/register.md
index 8cb1acb589..4d0b9aa334 100644
--- a/components/form/demo/register.md
+++ b/components/form/demo/register.md
@@ -251,7 +251,10 @@ const RegistrationForm = () => {
         name="agreement"
         valuePropName="checked"
         rules={[
-          { validator:(_, value) => value ? Promise.resolve() : Promise.reject('Should accept agreement') },
+          {
+            validator: (_, value) =>
+              value ? Promise.resolve() : Promise.reject('Should accept agreement'),
+          },
         ]}
         {...tailFormItemLayout}
       >
diff --git a/components/form/index.en-US.md b/components/form/index.en-US.md
index 578f035199..373412ce08 100644
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@@ -19,8 +19,8 @@ High performance Form component with data scope management. Including data colle
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| component | Set the Form rendering element. Do not create a DOM node for `false` | ComponentType \| false | form |  |
 | colon | Configure the default value of `colon` for Form.Item. Indicates whether the colon after the label is displayed (only effective when prop layout is horizontal) | boolean | true |  |
+| component | Set the Form rendering element. Do not create a DOM node for `false` | ComponentType \| false | form |  |
 | fields | Control of form fields through state management (such as redux). Not recommended for non-strong demand. View [example](#components-form-demo-global-state) | [FieldData](#FieldData)\[] | - |  |
 | form | Form control instance created by `Form.useForm()`. Automatically created when not provided | [FormInstance](#FormInstance) | - |  |
 | initialValues | Set value by Form initialization or reset | object | - |  |
@@ -33,11 +33,11 @@ High performance Form component with data scope management. Including data colle
 | scrollToFirstError | Auto scroll to first failed field when submit | boolean | false |  |
 | size | Set field component size (antd components only) | `small` \| `middle` \| `large` | - |  |
 | validateMessages | Validation prompt template, description [see below](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - |  |
-| validateTrigger | Config field validate trigger | string \| string[] | `onChange` | 4.3.0 |
+| validateTrigger | Config field validate trigger | string \| string\[] | `onChange` | 4.3.0 |
 | wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | - |  |
+| onFieldsChange | Trigger when field updated | function(changedFields, allFields) | - |  |
 | onFinish | Trigger after submitting the form and verifying data successfully | function(values) | - |  |
 | onFinishFailed | Trigger after submitting the form and verifying data failed | function({ values, errorFields, outOfDate }) | - |  |
-| onFieldsChange | Trigger when field updated | function(changedFields, allFields) | - |  |
 | onValuesChange | Trigger when value updated | function(changedValues, allValues) | - |  |
 
 ### validateMessages
@@ -73,33 +73,33 @@ Form field component for data bidirectional binding, validation, layout, and so
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | colon | Used with `label`, whether to display `:` after label text. | boolean | true |  |
-| dependencies | Set the dependency field. See [below](#dependencies) | [NamePath](#NamePath)[] | - |  |
+| dependencies | Set the dependency field. See [below](#dependencies) | [NamePath](#NamePath)\[] | - |  |
 | extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time | ReactNode | - |  |
-| getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any[]) => any | - |  |
+| getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any\[]) => any | - |  |
 | getValueProps | Additional props with sub component | (value: any) => any | - | 4.2.0 |
 | hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input` | boolean | false |  |
 | help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | ReactNode | - |  |
+| hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false |  |
 | htmlFor | Set sub label `htmlFor` | string | - |  |
 | initialValue | Config sub default value. Form `initialValues` get higher priority when conflict | string | - | 4.2.0 |
-| noStyle | No style for `true`, used as a pure field control | boolean | false |  |
 | label | Label text | ReactNode | - |  |
 | labelAlign | The text align of label | `left` \| `right` | `right` |  |
 | labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>`. You can set `labelCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#Col) | - |  |
-| messageVariables | default validate filed info | Record<string, string> | - | 4.7.0 |
+| messageVariables | default validate filed info | Record&lt;string, string> | - | 4.7.0 |
 | name | Field name, support array | [NamePath](#NamePath) | - |  |
 | normalize | Normalize value from component value before passing to Form instance | (value, prevValue, prevValues) => any | - |  |
+| noStyle | No style for `true`, used as a pure field control | boolean | false |  |
 | preserve | Keep field value even when field removed | boolean | true | 4.4.0 |
 | required | Display required style. It will be generated by the validation rule | boolean | false |  |
-| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#Rule)[] | - |  |
+| rules | Rules for field validation. Click [here](#components-form-demo-basic) to see an example | [Rule](#Rule)\[] | - |  |
 | shouldUpdate | Custom field update logic. See [below](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false |  |
 | tooltip | Config tooltip info | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#API) | - | 4.7.0 |
 | trigger | When to collect the value of children node | string | `onChange` |  |
 | validateFirst | Whether stop validate on first rule of error for this field. Will parallel validate when `parallel` cofigured | boolean \| `parallel` | false | `parallel`: 4.5.0 |
 | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: `success` `warning` `error` `validating` | string | - |  |
-| validateTrigger | When to validate the value of children node | string \| string[] | `onChange` |  |
+| validateTrigger | When to validate the value of children node | string \| string\[] | `onChange` |  |
 | valuePropName | Props of children node, for example, the prop of Switch is 'checked'. This prop is an encapsulation of `getValueProps`, which will be invalid after customizing `getValueProps` | string | `value` |  |
 | wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form which will not affect nest Item. If both exists, use Item first | [object](/components/grid/#Col) | - |  |
-| hidden | Whether to hide Form.Item (still collect and validate value) | boolean | false |  |
 
 After wrapped by `Form.Item` with `name` property, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause:
 
@@ -168,9 +168,9 @@ Provides array management for fields.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| children | Render function | (fields: Field\[], operation: { add, remove, move }) => React.ReactNode | - |  |
 | name | Field name, support array | [NamePath](#NamePath) | - |  |
-| children | Render function | (fields: Field[], operation: { add, remove, move }) => React.ReactNode | - |  |
-| rules | Validate rules, only support customize validator. Should work with [ErrorList](#Form.ErrorList) | { validator, message }[] | - | 4.7.0 |
+| rules | Validate rules, only support customize validator. Should work with [ErrorList](#Form.ErrorList) | { validator, message }\[] | - | 4.7.0 |
 
 ```tsx
 <Form.List>
@@ -193,16 +193,16 @@ Some operator functions in render form of Form.List.
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | add | add form item | (defaultValue?: any, insertIndex?: number) => void | insertIndex: 4.6.0 |
-| remove | remove form item | (index: number \| number[]) => void | number[]: 4.5.0 |
 | move | move form item | (from: number, to: number) => void | - |
+| remove | remove form item | (index: number \| number\[]) => void | number\[]: 4.5.0 |
 
 ## Form.ErrorList
 
 New in 4.7.0. Show error messages, should only work with `rules` of Form.List.
 
-| Property | Description | Type        | Default |
-| -------- | ----------- | ----------- | ------- |
-| errors   | Error list  | ReactNode[] | -       |
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| errors | Error list | ReactNode\[] | - |
 
 ## Form.Provider
 
@@ -230,20 +230,20 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au
 
 | Name | Description | Type | Version |
 | --- | --- | --- | --- |
+| getFieldError | Get the error messages by the field name | (name: [NamePath](#NamePath)) => string\[] |  |
 | getFieldInstance | Get field instance | (name: [NamePath](#NamePath)) => any | 4.4.0 |
+| getFieldsError | Get the error messages by the fields name. Return as an array | (nameList?: [NamePath](#NamePath)\[]) => FieldError\[] |  |
+| getFieldsValue | Get values by a set of field names. Return according to the corresponding structure | (nameList?: [NamePath](#NamePath)\[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any |  |
 | getFieldValue | Get the value by the field name | (name: [NamePath](#NamePath)) => any |  |
-| getFieldsValue | Get values by a set of field names. Return according to the corresponding structure | (nameList?: [NamePath](#NamePath)[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any |  |
-| getFieldError | Get the error messages by the field name | (name: [NamePath](#NamePath)) => string[] |  |
-| getFieldsError | Get the error messages by the fields name. Return as an array | (nameList?: [NamePath](#NamePath)[]) => FieldError[] |  |
+| isFieldsTouched | Check if fields have been operated. Check if all fields is touched when `allTouched` is `true` | (nameList?: [NamePath](#NamePath)\[], allTouched?: boolean) => boolean |  |
 | isFieldTouched | Check if a field has been operated | (name: [NamePath](#NamePath)) => boolean |  |
-| isFieldsTouched | Check if fields have been operated. Check if all fields is touched when `allTouched` is `true` | (nameList?: [NamePath](#NamePath)[], allTouched?: boolean) => boolean |  |
 | isFieldValidating | Check fields if is in validating | (name: [NamePath](#NamePath)) => boolean |  |
-| resetFields | Reset fields to `initialValues` | (fields?: [NamePath](#NamePath)[]) => void |  |
-| scrollToField | Scroll to field position | (name: [NamePath](#NamePath), options: [[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void |  |
-| setFields | Set fields status | (fields: [FieldData](#FieldData)[]) => void |  |
+| resetFields | Reset fields to `initialValues` | (fields?: [NamePath](#NamePath)\[]) => void |  |
+| scrollToField | Scroll to field position | (name: [NamePath](#NamePath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void |  |
+| setFields | Set fields status | (fields: [FieldData](#FieldData)\[]) => void |  |
 | setFieldsValue | Set fields value | (values) => void |  |
 | submit | Submit the form. It's same as click `submit` button | () => void |  |
-| validateFields | Validate fields | (nameList?: [NamePath](#NamePath)[]) => Promise |  |
+| validateFields | Validate fields | (nameList?: [NamePath](#NamePath)\[]) => Promise |  |
 
 #### validateFields return sample
 
@@ -283,13 +283,13 @@ validateFields()
 
 #### FieldData
 
-| Name       | Description              | Type                    |
-| ---------- | ------------------------ | ----------------------- |
-| touched    | Whether is operated      | boolean                 |
-| validating | Whether is in validating | boolean                 |
-| errors     | Error messages           | string[]                |
-| name       | Field name path          | [NamePath](#NamePath)[] |
-| value      | Field value              | any                     |
+| Name | Description | Type |
+| --- | --- | --- |
+| errors | Error messages | string\[] |
+| name | Field name path | [NamePath](#NamePath)\[] |
+| touched | Whether is operated | boolean |
+| validating | Whether is in validating | boolean |
+| value | Field value | any |
 
 #### Rule
 
@@ -301,7 +301,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 
 | Name | Description | Type |
 | --- | --- | --- |
-| enum | Match enum value. You need to set `type` to `enum` to enable this | any[] |
+| enum | Match enum value. You need to set `type` to `enum` to enable this | any\[] |
 | len | Length of string, number, array | number |
 | max | `type` required: max length of `string`, `number`, `array` | number |
 | message | Error message. Will auto generate by [template](#validateMessages) if not provided | string |
@@ -310,9 +310,9 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | required | Required field | boolean |
 | transform | Transform value to the rule before validation | (value) => any |
 | type | Normally `string` \|`number` \|`boolean` \|`url` \| `email`. More type to ref [here](https://github.com/yiminghe/async-validator#type) | string |
+| validateTrigger | Set validate trigger event. Must be the sub set of `validateTrigger` in Form.Item | string \| string\[] |
 | validator | Customize validation rule. Accept Promise as return. See [example](#components-form-demo-register) | ([rule](#Rule), value) => Promise |
 | whitespace | Failed if only has whitespace | boolean |
-| validateTrigger | Set validate trigger event. Must be the sub set of `validateTrigger` in Form.Item | string \| string[] |
 
 ## Migrate to v4
 
@@ -366,7 +366,7 @@ Components inside Form.Item with name property will turn into controlled mode, w
 
 ### Why can not call `ref` of Form at first time?
 
-`ref` only receives the mounted instance. please ref React official doc: https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs
+`ref` only receives the mounted instance. please ref React official doc: <https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs>
 
 ### Why `resetFields` will re-mount component?
 
diff --git a/components/form/index.zh-CN.md b/components/form/index.zh-CN.md
index 142c52cdee..fd425364b8 100644
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@@ -20,8 +20,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| component | 设置 Form 渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType \| false | form |  |
 | colon | 配置 Form.Item 的 `colon` 的默认值。表示是否显示 label 后面的冒号 (只有在属性 layout 为 horizontal 时有效) | boolean | true |  |
+| component | 设置 Form 渲染元素，为 `false` 则不创建 DOM 节点 | ComponentType \| false | form |  |
 | fields | 通过状态管理（如 redux）控制表单字段，如非强需求不推荐使用。查看[示例](#components-form-demo-global-state) | [FieldData](#FieldData)\[] | - |  |
 | form | 经 `Form.useForm()` 创建的 form 控制实例，不提供时会自动创建 | [FormInstance](#FormInstance) | - |  |
 | initialValues | 表单默认值，只有初始化以及重置时生效 | object | - |  |
@@ -34,11 +34,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
 | scrollToFirstError | 提交失败自动滚动到第一个错误字段 | boolean | false |  |
 | size | 设置字段组件的尺寸（仅限 antd 组件） | `small` \| `middle` \| `large` | - |  |
 | validateMessages | 验证提示模板，说明[见下](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - |  |
-| validateTrigger | 统一设置字段校验规则 | string \| string[] | `onChange` | 4.3.0 |
+| validateTrigger | 统一设置字段校验规则 | string \| string\[] | `onChange` | 4.3.0 |
 | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid/#Col) | - |  |
+| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - |  |
 | onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - |  |
 | onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - |  |
-| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - |  |
 | onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - |  |
 
 ### validateMessages
@@ -74,33 +74,33 @@ const validateMessages = {
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | colon | 配合 `label` 属性使用，表示是否显示 `label` 后面的冒号 | boolean | true |  |
-| dependencies | 设置依赖字段，说明[见下](#dependencies) | [NamePath](#NamePath)[] | - |  |
+| dependencies | 设置依赖字段，说明[见下](#dependencies) | [NamePath](#NamePath)\[] | - |  |
 | extra | 额外的提示信息，和 `help` 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | ReactNode | - |  |
-| getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any | - |  |
+| getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any\[]) => any | - |  |
 | getValueProps | 为子元素添加额外的属性 | (value: any) => any | - | 4.2.0 |
 | hasFeedback | 配合 `validateStatus` 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false |  |
 | help | 提示信息，如不设置，则会根据校验规则自动生成 | ReactNode | - |  |
+| hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false |  |
 | htmlFor | 设置子元素 label `htmlFor` 属性 | string | - |  |
 | initialValue | 设置子元素默认值，如果与 Form 的 `initialValues` 冲突则以 Form 为准 | string | - | 4.2.0 |
-| noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false |  |
 | label | `label` 标签的文本 | ReactNode | - |  |
 | labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` |  |
 | labelCol | `label` 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置，，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - |  |
-| messageVariables | 默认验证字段的信息 | Record<string, string> | - | 4.7.0 |
+| messageVariables | 默认验证字段的信息 | Record&lt;string, string> | - | 4.7.0 |
 | name | 字段名，支持数组 | [NamePath](#NamePath) | - |  |
-| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
 | normalize | 组件获取值后进行转换，再放入 Form 中 | (value, prevValue, prevValues) => any | - |  |
+| noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false |  |
+| preserve | 当字段被删除时保留字段值 | boolean | true | 4.4.0 |
 | required | 必填样式设置。如不设置，则会根据校验规则自动生成 | boolean | false |  |
-| rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)[] | - |  |
+| rules | 校验规则，设置字段的校验逻辑。点击[此处](#components-form-demo-basic)查看示例 | [Rule](#Rule)\[] | - |  |
 | shouldUpdate | 自定义字段更新逻辑，说明[见下](#shouldUpdate) | boolean \| (prevValue, curValue) => boolean | false |  |
 | tooltip | 配置提示信息 | ReactNode \| [TooltipProps & { icon: ReactNode }](/components/tooltip#API) | - | 4.7.0 |
 | trigger | 设置收集字段值变更的时机 | string | `onChange` |  |
 | validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验。设置 `parallel` 时会并行校验 | boolean \| `parallel` | false | `parallel`: 4.5.0 |
 | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - |  |
-| validateTrigger | 设置字段校验的时机 | string \| string[] | `onChange` |  |
+| validateTrigger | 设置字段校验的时机 | string \| string\[] | `onChange` |  |
 | valuePropName | 子节点的值的属性，如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装，自定义 `getValueProps` 后会失效 | string | `value` |  |
 | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置，不会作用于嵌套 Item。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - |  |
-| hidden | 是否隐藏字段（依然会收集和校验字段） | boolean | false |  |
 
 被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
 
@@ -169,9 +169,9 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| children | 渲染函数 | (fields: Field\[], operation: { add, remove, move }) => React.ReactNode | - |  |
 | name | 字段名，支持数组 | [NamePath](#NamePath) | - |  |
-| children | 渲染函数 | (fields: Field[], operation: { add, remove, move }) => React.ReactNode | - |  |
-| rules | 校验规则，仅支持自定义规则。需要配合 [ErrorList](#Form.ErrorList) 一同使用。 | { validator, message }[] | - | 4.7.0 |
+| rules | 校验规则，仅支持自定义规则。需要配合 [ErrorList](#Form.ErrorList) 一同使用。 | { validator, message }\[] | - | 4.7.0 |
 
 ```tsx
 <Form.List>
@@ -192,19 +192,19 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
 
 Form.List 渲染表单相关操作函数。
 
-| 参数   | 说明       | 类型                                               | 默认值             |
-| ------ | ---------- | -------------------------------------------------- | ------------------ |
-| add    | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex: 4.6.0 |
-| remove | 删除表单项 | (index: number \| number[]) => void                | number[]: 4.5.0    |
-| move   | 移动表单项 | (from: number, to: number) => void                 | -                  |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| add | 新增表单项 | (defaultValue?: any, insertIndex?: number) => void | insertIndex: 4.6.0 |
+| move | 移动表单项 | (from: number, to: number) => void | - |
+| remove | 删除表单项 | (index: number \| number\[]) => void | number\[]: 4.5.0 |
 
 ## Form.ErrorList
 
 4.7.0 新增。错误展示组件，仅限配合 Form.List 的 rules 一同使用。
 
-| 参数   | 说明     | 类型        | 默认值 |
-| ------ | -------- | ----------- | ------ |
-| errors | 错误列表 | ReactNode[] | -      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| errors | 错误列表 | ReactNode\[] | - |
 
 ## Form.Provider
 
@@ -232,20 +232,20 @@ Form.List 渲染表单相关操作函数。
 
 | 名称 | 说明 | 类型 | 版本 |
 | --- | --- | --- | --- |
+| getFieldError | 获取对应字段名的错误信息 | (name: [NamePath](#NamePath)) => string\[] |  |
 | getFieldInstance | 获取对应字段实例 | (name: [NamePath](#NamePath)) => any | 4.4.0 |
+| getFieldsError | 获取一组字段名对应的错误信息，返回为数组形式 | (nameList?: [NamePath](#NamePath)\[]) => FieldError\[] |  |
+| getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回 | (nameList?: [NamePath](#NamePath)\[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any |  |
 | getFieldValue | 获取对应字段名的值 | (name: [NamePath](#NamePath)) => any |  |
-| getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回 | (nameList?: [NamePath](#NamePath)[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any |  |
-| getFieldError | 获取对应字段名的错误信息 | (name: [NamePath](#NamePath)) => string[] |  |
-| getFieldsError | 获取一组字段名对应的错误信息，返回为数组形式 | (nameList?: [NamePath](#NamePath)[]) => FieldError[] |  |
+| isFieldsTouched | 检查一组字段是否被用户操作过，`allTouched` 为 `true` 时检查是否所有字段都被操作过 | (nameList?: [NamePath](#NamePath)\[], allTouched?: boolean) => boolean |  |
 | isFieldTouched | 检查对应字段是否被用户操作过 | (name: [NamePath](#NamePath)) => boolean |  |
-| isFieldsTouched | 检查一组字段是否被用户操作过，`allTouched` 为 `true` 时检查是否所有字段都被操作过 | (nameList?: [NamePath](#NamePath)[], allTouched?: boolean) => boolean |  |
 | isFieldValidating | 检查一组字段是否正在校验 | (name: [NamePath](#NamePath)) => boolean |  |
-| resetFields | 重置一组字段到 `initialValues` | (fields?: [NamePath](#NamePath)[]) => void |  |
-| scrollToField | 滚动到对应字段位置 | (name: [NamePath](#NamePath), options: [[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void |  |
-| setFields | 设置一组字段状态 | (fields: [FieldData](#FieldData)[]) => void |  |
+| resetFields | 重置一组字段到 `initialValues` | (fields?: [NamePath](#NamePath)\[]) => void |  |
+| scrollToField | 滚动到对应字段位置 | (name: [NamePath](#NamePath), options: \[[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void |  |
+| setFields | 设置一组字段状态 | (fields: [FieldData](#FieldData)\[]) => void |  |
 | setFieldsValue | 设置表单的值 | (values) => void |  |
 | submit | 提交表单，与点击 `submit` 按钮效果相同 | () => void |  |
-| validateFields | 触发表单验证 | (nameList?: [NamePath](#NamePath)[]) => Promise |  |
+| validateFields | 触发表单验证 | (nameList?: [NamePath](#NamePath)\[]) => Promise |  |
 
 #### validateFields 返回示例
 
@@ -285,13 +285,13 @@ validateFields()
 
 #### FieldData
 
-| 名称       | 说明             | 类型                    |
-| ---------- | ---------------- | ----------------------- |
-| touched    | 是否被用户操作过 | boolean                 |
-| validating | 是否正在校验     | boolean                 |
-| errors     | 错误信息         | string[]                |
-| name       | 字段名称         | [NamePath](#NamePath)[] |
-| value      | 字段对应值       | any                     |
+| 名称 | 说明 | 类型 |
+| --- | --- | --- |
+| errors | 错误信息 | string\[] |
+| name | 字段名称 | [NamePath](#NamePath)\[] |
+| touched | 是否被用户操作过 | boolean |
+| validating | 是否正在校验 | boolean |
+| value | 字段对应值 | any |
 
 #### Rule
 
@@ -303,7 +303,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 
 | 名称 | 说明 | 类型 |
 | --- | --- | --- |
-| enum | 是否匹配枚举中的值（需要将 `type` 设置为 `enum`） | any[] |
+| enum | 是否匹配枚举中的值（需要将 `type` 设置为 `enum`） | any\[] |
 | len | string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度 | number |
 | max | 必须设置 `type`：string 类型为字符串最大长度；number 类型时为最大值；array 类型时为数组最大长度 | number |
 | message | 错误信息，不设置时会通过[模板](#validateMessages)自动生成 | string |
@@ -312,9 +312,9 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | required | 是否为必选字段 | boolean |
 | transform | 将字段值转换成目标值后进行校验 | (value) => any |
 | type | 类型，常见有 `string` \|`number` \|`boolean` \|`url` \| `email`。更多请参考[此处](https://github.com/yiminghe/async-validator#type) | string |
+| validateTrigger | 设置触发验证时机，必须是 Form.Item 的 `validateTrigger` 的子集 | string \| string\[] |
 | validator | 自定义校验，接收 Promise 作为返回值。[示例](#components-form-demo-register)参考 | ([rule](#Rule), value) => Promise |
 | whitespace | 如果字段仅包含空格则校验不通过 | boolean |
-| validateTrigger | 设置触发验证时机，必须是 Form.Item 的 `validateTrigger` 的子集 | string \| string[] |
 
 ## 从 v3 升级到 v4
 
@@ -368,7 +368,7 @@ validator(rule, value, callback) => {
 
 ### 为什么第一次调用 `ref` 的 From 为空？
 
-`ref` 仅在节点被加载时才会被赋值，请参考 React 官方文档：https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs
+`ref` 仅在节点被加载时才会被赋值，请参考 React 官方文档：<https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs>
 
 ### 为什么 `resetFields` 会重新 mount 组件？
 
diff --git a/components/form/style/mixin.less b/components/form/style/mixin.less
index 1ae64899f1..5e2d0c2c7f 100644
--- a/components/form/style/mixin.less
+++ b/components/form/style/mixin.less
@@ -9,6 +9,7 @@
   .@{ant-prefix}-input-affix-wrapper {
     &,
     &:hover {
+      background-color: @background-color;
       border-color: @border-color;
     }
 
@@ -18,16 +19,15 @@
     }
   }
 
-  .@{ant-prefix}-input {
-    &:not(&-disabled) {
-      background-color: @background-color;
-    }
+  .@{ant-prefix}-input-disabled {
+    background-color: @input-disabled-bg;
+    border-color: @input-border-color;
   }
 
-  .@{ant-prefix}-input-affix-wrapper {
-    &:not(&-disabled) {
-      background-color: @background-color;
-    }
+  .@{ant-prefix}-input-affix-wrapper-disabled {
+    background-color: @input-disabled-bg;
+    border-color: @input-border-color;
+
     input:focus {
       box-shadow: none !important;
     }
diff --git a/components/form/style/status.less b/components/form/style/status.less
index b2fd7da7f1..2887dc6864 100644
--- a/components/form/style/status.less
+++ b/components/form/style/status.less
@@ -137,6 +137,7 @@
     //select
     .@{ant-prefix}-select:not(.@{ant-prefix}-select-borderless) {
       .@{ant-prefix}-select-selector {
+        background-color: @form-warning-input-bg;
         border-color: @warning-color !important;
       }
       &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
@@ -148,12 +149,14 @@
     //input-number, timepicker
     .@{ant-prefix}-input-number,
     .@{ant-prefix}-picker {
+      background-color: @form-warning-input-bg;
       border-color: @warning-color;
       &-focused,
       &:focus {
         .active(@warning-color);
       }
       &:not([disabled]):hover {
+        background-color: @form-warning-input-bg;
         border-color: @warning-color;
       }
     }
@@ -175,6 +178,7 @@
     //select
     .@{ant-prefix}-select:not(.@{ant-prefix}-select-borderless) {
       .@{ant-prefix}-select-selector {
+        background-color: @form-error-input-bg;
         border-color: @error-color !important;
       }
       &.@{ant-prefix}-select-open .@{ant-prefix}-select-selector,
@@ -200,17 +204,34 @@
     //input-number, timepicker
     .@{ant-prefix}-input-number,
     .@{ant-prefix}-picker {
+      background-color: @form-error-input-bg;
       border-color: @error-color;
       &-focused,
       &:focus {
         .active(@error-color);
       }
       &:not([disabled]):hover {
+        background-color: @form-error-input-bg;
         border-color: @error-color;
       }
     }
 
+    .@{ant-prefix}-mention-wrapper {
+      .@{ant-prefix}-mention-editor {
+        &,
+        &:not([disabled]):hover {
+          background-color: @form-error-input-bg;
+          border-color: @error-color;
+        }
+      }
+      &.@{ant-prefix}-mention-active:not([disabled]) .@{ant-prefix}-mention-editor,
+      .@{ant-prefix}-mention-editor:not([disabled]):focus {
+        .active(@error-color);
+      }
+    }
+
     .@{ant-prefix}-cascader-picker:focus .@{ant-prefix}-cascader-input {
+      background-color: @form-error-input-bg;
       .active(@error-color);
     }
 
diff --git a/components/grid/index.en-US.md b/components/grid/index.en-US.md
index 4a00fec1df..efff5f91a2 100644
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@@ -87,11 +87,11 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 
 ### Row
 
-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| align | Vertical alignment | `top` \| `middle` \| `bottom` | `top` |  |
+| Property | Description | Type | Default | Version |  |
+| --- | --- | --- | --- | --- | --- |
+| align | Vertical alignment | `top` \| `middle` \| `bottom` | `top` |  |  |
 | gutter | Spacing between grids, could be a number or a object like { xs: 8, sm: 16, md: 24}. Or you can use array to make horizontal and vertical spacing work at the same time `[horizontal, vertical]` | number \| object \| array | 0 |  |  |
-| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` |  |
+| justify | Horizontal arrangement | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` |  |  |
 
 ### Col
 
diff --git a/components/icon/index.en-US.md b/components/icon/index.en-US.md
index e9912aeb8a..2711dae984 100644
--- a/components/icon/index.en-US.md
+++ b/components/icon/index.en-US.md
@@ -14,7 +14,7 @@ npm install --save @ant-design/icons
 
 ## List of icons
 
-```__react
+```_\_react
 import IconDisplay from 'site/theme/template/IconDisplay';
 ReactDOM.render(<IconDisplay />, mountNode);
 ```
@@ -45,7 +45,7 @@ import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| component | The component used for the root node | ComponentType<CustomIconComponentProps\> | - |  |
+| component | The component used for the root node | ComponentType&lt;CustomIconComponentProps> | - |  |
 | rotate | Rotate degrees (not working in IE9) | number | - |  |
 | spin | Rotate icon with animation | boolean | false |  |
 | style | The style properties of icon, like `fontSize` and `color` | CSSProperties | - |  |
@@ -113,7 +113,7 @@ The following options are available:
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | extraCommonProps | Define extra properties to the component | { \[key: string]: any } | {} |  |
-| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. Support `string[]` after `@ant-design/icons@4.1.0` | string \| string[] | - |  |
+| scriptUrl | The URL generated by [iconfont.cn](http://iconfont.cn/) project. Support `string[]` after `@ant-design/icons@4.1.0` | string \| string\[] | - |  |
 
 The property `scriptUrl` should be set to import the SVG sprite symbols.
 
diff --git a/components/icon/index.zh-CN.md b/components/icon/index.zh-CN.md
index b763df94d4..cc85feb603 100644
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@@ -19,7 +19,7 @@ npm install --save @ant-design/icons
 
 ## 图标列表
 
-```__react
+```_\_react
 import IconDisplay from 'site/theme/template/IconDisplay';
 ReactDOM.render(<IconDisplay />, mountNode);
 ```
@@ -52,7 +52,7 @@ import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons';
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 React 组件 | ComponentType<CustomIconComponentProps\> | - |  |
+| component | 控制如何渲染图标，通常是一个渲染根标签为 `<svg>` 的 React 组件 | ComponentType&lt;CustomIconComponentProps> | - |  |
 | rotate | 图标旋转角度（IE9 无效） | number | - |  |
 | spin | 是否有旋转动画 | boolean | false |  |
 | style | 设置图标的样式，例如 `fontSize` 和 `color` | CSSProperties | - |  |
@@ -108,7 +108,7 @@ options 的配置项如下：
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | extraCommonProps | 给所有的 `svg` 图标 `<Icon />` 组件设置额外的属性 | { \[key: string]: any } | {} |  |
-| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 js 地址，`@ant-design/icons@4.1.0` 之后支持 `string[]` 类型 | string \| string[] | - |  |
+| scriptUrl | [iconfont.cn](http://iconfont.cn/) 项目在线生成的 js 地址，`@ant-design/icons@4.1.0` 之后支持 `string[]` 类型 | string \| string\[] | - |  |
 
 在 `scriptUrl` 都设置有效的情况下，组件在渲染前会自动引入 [iconfont.cn](http://iconfont.cn/) 项目中的图标符号集，无需手动引入。
 
@@ -148,10 +148,10 @@ ReactDOM.render(<Icon component={MessageSvg} />, mountNode);
 
 `Icon` 中的 `component` 组件的接受的属性如下：
 
-| 字段      | 说明                    | 类型             | 只读值         | 版本 |
-| --------- | ----------------------- | ---------------- | -------------- | ---- |
-| className | 计算后的 `svg` 类名     | string           | -              |      |
-| fill      | `svg` 元素填充的颜色    | string           | `currentColor` |      |
-| height    | `svg` 元素高度          | string \| number | `1em`          |      |
-| style     | 计算后的 `svg` 元素样式 | CSSProperties    | -              |      |
-| width     | `svg` 元素宽度          | string \| number | `1em`          |      |
+| 字段 | 说明 | 类型 | 只读值 | 版本 |
+| --- | --- | --- | --- | --- |
+| className | 计算后的 `svg` 类名 | string | - |  |
+| fill | `svg` 元素填充的颜色 | string | `currentColor` |  |
+| height | `svg` 元素高度 | string \| number | `1em` |  |
+| style | 计算后的 `svg` 元素样式 | CSSProperties | - |  |
+| width | `svg` 元素宽度 | string \| number | `1em` |  |
diff --git a/components/image/index.en-US.md b/components/image/index.en-US.md
index d1827beb9e..5527cfc51e 100644
--- a/components/image/index.en-US.md
+++ b/components/image/index.en-US.md
@@ -35,4 +35,4 @@ Previewable image.
 }
 ```
 
-Other attributes [<img\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+Other attributes [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
diff --git a/components/image/index.zh-CN.md b/components/image/index.zh-CN.md
index 8c23f9b07e..3fbcefb438 100644
--- a/components/image/index.zh-CN.md
+++ b/components/image/index.zh-CN.md
@@ -36,4 +36,4 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/D1dXz9PZqa/image.svg
 }
 ```
 
-其他属性见 [<img\>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+其他属性见 [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
diff --git a/components/input-number/index.en-US.md b/components/input-number/index.en-US.md
index 870949ef78..63a786b2fe 100644
--- a/components/input-number/index.en-US.md
+++ b/components/input-number/index.en-US.md
@@ -16,28 +16,28 @@ When a numeric value needs to be provided.
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | autoFocus | If get focus when component mounted | boolean | false | - |
+| decimalSeparator | Decimal separator | string | - | - |
 | defaultValue | The initial value | number | - | - |
 | disabled | If disable the input | boolean | false | - |
-| readOnly | If readonly the input | boolean | false | - |
 | formatter | Specifies the format of the value presented | function(value: number \| string): string | - | - |
 | max | The max value | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | - |
 | min | The min value | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | - |
 | parser | Specifies the value extracted from formatter | function(string): number | - | - |
 | precision | The precision of input value | number | - | - |
-| decimalSeparator | Decimal separator | string | - | - |
+| readOnly | If readonly the input | boolean | false | - |
 | size | The height of input box | `large` \| `middle` \| `small` | - | - |
 | step | The number to which the current value is increased or decreased. It can be an integer or decimal | number \| string | 1 | - |
 | value | The current value | number | - | - |
 | onChange | The callback triggered when the value is changed | function(value: number \| string) | - | - |
 | onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - | - |
-| onStep | The callback function that is triggered when click up or down buttons | `(value: number, info: { offset: number, type: 'up' | 'down' }) => void` | - | 4.7.0 |
+| onStep | The callback function that is triggered when click up or down buttons | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
 
 ## Methods
 
-| Name    | Description  |
-| ------- | ------------ |
-| blur()  | Remove focus |
-| focus() | Get focus    |
+| Name | Description |
+| --- | --- |
+| blur() | Remove focus |
+| focus() | Get focus |
 
 ## Notes
 
diff --git a/components/input-number/index.zh-CN.md b/components/input-number/index.zh-CN.md
index 5766f32f3f..eb00ec9eb6 100644
--- a/components/input-number/index.zh-CN.md
+++ b/components/input-number/index.zh-CN.md
@@ -19,25 +19,25 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
 | 成员 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | autoFocus | 自动获取焦点 | boolean | false | - |
+| decimalSeparator | 小数点 | string | - | - |
 | defaultValue | 初始值 | number | - | - |
 | disabled | 禁用 | boolean | false | - |
-| readOnly | 只读 | boolean | false | - |
 | formatter | 指定输入框展示值的格式 | function(value: number \| string): string | - | - |
 | max | 最大值 | number | [Number.MAX_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER) | - |
 | min | 最小值 | number | [Number.MIN_SAFE_INTEGER](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Number/MIN_SAFE_INTEGER) | - |
 | parser | 指定从 `formatter` 里转换回数字的方式，和 `formatter` 搭配使用 | function(string): number | - | - |
 | precision | 数值精度 | number | - | - |
-| decimalSeparator | 小数点 | string | - | - |
+| readOnly | 只读 | boolean | false | - |
 | size | 输入框大小 | `large` \| `middle` \| `small` | - | - |
 | step | 每次改变步数，可以为小数 | number \| string | 1 | - |
 | value | 当前值 | number | - | - |
 | onChange | 变化回调 | function(value: number \| string) | - | - |
 | onPressEnter | 按下回车的回调 | function(e) | - | - |
-| onStep | 点击上下箭头的回调 | `(value: number, info: { offset: number, type: 'up' | 'down' }) => void` | - | 4.7.0 |
+| onStep | 点击上下箭头的回调 | (value: number, info: { offset: number, type: 'up' \| 'down' }) => void | - | 4.7.0 |
 
 ## 方法
 
-| 名称    | 描述     |
-| ------- | -------- |
-| blur()  | 移除焦点 |
+| 名称 | 描述 |
+| --- | --- |
+| blur() | 移除焦点 |
 | focus() | 获取焦点 |
diff --git a/components/input/ClearableLabeledInput.tsx b/components/input/ClearableLabeledInput.tsx
index b15350a7dc..c049a72a63 100644
--- a/components/input/ClearableLabeledInput.tsx
+++ b/components/input/ClearableLabeledInput.tsx
@@ -112,20 +112,18 @@ class ClearableLabeledInput extends React.Component<ClearableInputProps> {
 
     const prefixNode = prefix ? <span className={`${prefixCls}-prefix`}>{prefix}</span> : null;
 
-    const affixWrapperCls = classNames(
-      `${prefixCls}-affix-wrapper`,
-      {
-        [`${prefixCls}-affix-wrapper-focused`]: focused,
-        [`${prefixCls}-affix-wrapper-disabled`]: disabled,
-        [`${prefixCls}-affix-wrapper-sm`]: size === 'small',
-        [`${prefixCls}-affix-wrapper-lg`]: size === 'large',
-        [`${prefixCls}-affix-wrapper-input-with-clear-btn`]: suffix && allowClear && value,
-        [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
-        [`${prefixCls}-affix-wrapper-readonly`]: readOnly,
-        [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
-      },
-      className,
-    );
+    const affixWrapperCls = classNames(`${prefixCls}-affix-wrapper`, {
+      [`${prefixCls}-affix-wrapper-focused`]: focused,
+      [`${prefixCls}-affix-wrapper-disabled`]: disabled,
+      [`${prefixCls}-affix-wrapper-sm`]: size === 'small',
+      [`${prefixCls}-affix-wrapper-lg`]: size === 'large',
+      [`${prefixCls}-affix-wrapper-input-with-clear-btn`]: suffix && allowClear && value,
+      [`${prefixCls}-affix-wrapper-rtl`]: direction === 'rtl',
+      [`${prefixCls}-affix-wrapper-readonly`]: readOnly,
+      [`${prefixCls}-affix-wrapper-borderless`]: !bordered,
+      // https://github.com/ant-design/ant-design/issues/27258
+      [`${className}`]: !allowClear && className,
+    });
     return (
       <span
         ref={this.containerRef}
diff --git a/components/input/Input.tsx b/components/input/Input.tsx
index 717f2b0724..a732673487 100644
--- a/components/input/Input.tsx
+++ b/components/input/Input.tsx
@@ -210,6 +210,8 @@ class Input extends React.Component<InputProps, InputState> {
   setValue(value: string, callback?: () => void) {
     if (this.props.value === undefined) {
       this.setState({ value }, callback);
+    } else {
+      callback?.();
     }
   }
 
diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx
index 75772bb98e..f0d037ca77 100644
--- a/components/input/TextArea.tsx
+++ b/components/input/TextArea.tsx
@@ -4,8 +4,8 @@ import omit from 'omit.js';
 import classNames from 'classnames';
 import ClearableLabeledInput from './ClearableLabeledInput';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
-import SizeContext, { SizeType } from '../config-provider/SizeContext';
 import { fixControlledValue, resolveOnChange } from './Input';
+import SizeContext, { SizeType } from '../config-provider/SizeContext';
 
 export interface TextAreaProps extends RcTextAreaProps {
   allowClear?: boolean;
@@ -79,18 +79,18 @@ class TextArea extends React.Component<TextAreaProps, TextAreaState> {
   };
 
   renderTextArea = (prefixCls: string, bordered: boolean, size?: SizeType) => {
-    const { size: customizeSize } = this.props;
+    const { showCount, className, style, size: customizeSize } = this.props;
+
     return (
       <RcTextArea
         {...omit(this.props, ['allowClear', 'bordered', 'showCount', 'size'])}
-        className={classNames(
-          {
-            [`${prefixCls}-borderless`]: !bordered,
-            [`${prefixCls}-sm`]: size === 'small' || customizeSize === 'small',
-            [`${prefixCls}-lg`]: size === 'large' || customizeSize === 'large',
-          },
-          this.props.className,
-        )}
+        className={classNames({
+          [`${prefixCls}-borderless`]: !bordered,
+          [className!]: className && !showCount,
+          [`${prefixCls}-sm`]: size === 'small' || customizeSize === 'small',
+          [`${prefixCls}-lg`]: size === 'large' || customizeSize === 'large',
+        })}
+        style={showCount ? null : style}
         prefixCls={prefixCls}
         onChange={this.handleChange}
         ref={this.saveTextArea}
@@ -105,40 +105,60 @@ class TextArea extends React.Component<TextAreaProps, TextAreaState> {
       bordered = true,
       showCount = false,
       maxLength,
+      className,
+      style,
     } = this.props;
+
     const prefixCls = getPrefixCls('input', customizePrefixCls);
+
+    // Max length value
     const hasMaxLength = Number(maxLength) > 0;
     value = hasMaxLength ? value.slice(0, maxLength) : value;
-    const valueLength = [...value].length;
-    const dataCount = `${valueLength}${hasMaxLength ? ` / ${maxLength}` : ''}`;
 
-    return (
-      <SizeContext.Consumer>
-        {size => (
-          <div
-            className={classNames(`${prefixCls}-textarea`, {
-              [`${prefixCls}-textarea-show-count`]: showCount,
-              [`${prefixCls}-textarea-rtl`]: direction === 'rtl',
-            })}
-            {...(showCount ? { 'data-count': dataCount } : {})}
-          >
-            <ClearableLabeledInput
-              size={size}
-              {...this.props}
-              prefixCls={prefixCls}
-              direction={direction}
-              inputType="text"
-              value={value}
-              element={this.renderTextArea(prefixCls, bordered, size)}
-              handleReset={this.handleReset}
-              ref={this.saveClearableInput}
-              triggerFocus={this.focus}
-              bordered={bordered}
-            />
-          </div>
-        )}
-      </SizeContext.Consumer>
+    // TextArea
+    const textareaNode = (size?: SizeType) => (
+      <ClearableLabeledInput
+        {...this.props}
+        prefixCls={prefixCls}
+        direction={direction}
+        inputType="text"
+        value={value}
+        element={this.renderTextArea(prefixCls, bordered, size)}
+        handleReset={this.handleReset}
+        ref={this.saveClearableInput}
+        triggerFocus={this.focus}
+        bordered={bordered}
+      />
     );
+
+    // Only show text area wrapper when needed
+    if (showCount) {
+      const valueLength = [...value].length;
+      const dataCount = `${valueLength}${hasMaxLength ? ` / ${maxLength}` : ''}`;
+
+      return (
+        <SizeContext.Consumer>
+          {(size?: SizeType) => (
+            <div
+              className={classNames(
+                `${prefixCls}-textarea`,
+                {
+                  [`${prefixCls}-textarea-rtl`]: direction === 'rtl',
+                },
+                `${prefixCls}-textarea-show-count`,
+                className,
+              )}
+              style={style}
+              data-count={dataCount}
+            >
+              {textareaNode(size)}
+            </div>
+          )}
+        </SizeContext.Consumer>
+      );
+    }
+
+    return <SizeContext.Consumer>{textareaNode}</SizeContext.Consumer>;
   };
 
   render() {
diff --git a/components/input/__tests__/Search.test.js b/components/input/__tests__/Search.test.js
index 4090389081..49f0546be6 100644
--- a/components/input/__tests__/Search.test.js
+++ b/components/input/__tests__/Search.test.js
@@ -209,4 +209,11 @@ describe('Input.Search', () => {
       wrapper.find('button').simulate('mousedown');
     }).not.toThrow();
   });
+
+  // https://github.com/ant-design/ant-design/issues/27258
+  it('Search with allowClear should have one className only', () => {
+    const wrapper = mount(<Search allowClear className="className" />);
+    expect(wrapper.find('.ant-input-group-wrapper').hasClass('className')).toBe(true);
+    expect(wrapper.find('.ant-input-affix-wrapper').hasClass('className')).toBe(false);
+  });
 });
diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
index 4eb217ad12..29ceacf05a 100644
--- a/components/input/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -260,15 +260,11 @@ Array [
       rows="1"
     />
   </div>,
-  <div
-    class="ant-input-textarea"
-  >
-    <textarea
-      class="ant-input"
-      rows="1"
-      style="width:100px"
-    />
-  </div>,
+  <textarea
+    class="ant-input"
+    rows="1"
+    style="width:100px"
+  />,
   <button
     class="ant-btn ant-btn-primary"
     type="button"
@@ -1008,74 +1004,58 @@ Array [
   </span>,
   <br />,
   <br />,
-  <div
-    class="ant-input-textarea"
+  <span
+    class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
   >
+    <textarea
+      class="ant-input"
+      placeholder="textarea with clear icon"
+    />
     <span
-      class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
+      aria-label="close-circle"
+      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
+      role="button"
+      tabindex="-1"
     >
-      <textarea
-        class="ant-input"
-        placeholder="textarea with clear icon"
-      />
-      <span
-        aria-label="close-circle"
-        class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
-        role="button"
-        tabindex="-1"
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="close-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
       >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close-circle"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-          />
-        </svg>
-      </span>
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+        />
+      </svg>
     </span>
-  </div>,
+  </span>,
 ]
 `;
 
 exports[`renders ./components/input/demo/autosize-textarea.md correctly 1`] = `
 Array [
-  <div
-    class="ant-input-textarea"
-  >
-    <textarea
-      class="ant-input"
-      placeholder="Autosize height based on content lines"
-    />
-  </div>,
+  <textarea
+    class="ant-input"
+    placeholder="Autosize height based on content lines"
+  />,
   <div
     style="margin:24px 0"
   />,
-  <div
-    class="ant-input-textarea"
-  >
-    <textarea
-      class="ant-input"
-      placeholder="Autosize height with minimum and maximum number of lines"
-    />
-  </div>,
+  <textarea
+    class="ant-input"
+    placeholder="Autosize height with minimum and maximum number of lines"
+  />,
   <div
     style="margin:24px 0"
   />,
-  <div
-    class="ant-input-textarea"
-  >
-    <textarea
-      class="ant-input"
-      placeholder="Controlled autosize"
-    />
-  </div>,
+  <textarea
+    class="ant-input"
+    placeholder="Controlled autosize"
+  />,
 ]
 `;
 
@@ -1113,47 +1093,39 @@ exports[`renders ./components/input/demo/borderless-debug.md correctly 1`] = `
     type="text"
     value=""
   />
-  <div
-    class="ant-input-textarea"
+  <textarea
+    class="ant-input ant-input-borderless"
+    placeholder="Unbordered"
+  />
+  <span
+    class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn ant-input-affix-wrapper-borderless"
   >
     <textarea
       class="ant-input ant-input-borderless"
       placeholder="Unbordered"
     />
-  </div>
-  <div
-    class="ant-input-textarea"
-  >
     <span
-      class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn ant-input-affix-wrapper-borderless"
+      aria-label="close-circle"
+      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
+      role="button"
+      tabindex="-1"
     >
-      <textarea
-        class="ant-input ant-input-borderless"
-        placeholder="Unbordered"
-      />
-      <span
-        aria-label="close-circle"
-        class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
-        role="button"
-        tabindex="-1"
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="close-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
       >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="close-circle"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-          />
-        </svg>
-      </span>
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+        />
+      </svg>
     </span>
-  </div>
+  </span>
   <span
     class="ant-input-affix-wrapper ant-input-affix-wrapper-borderless"
   >
@@ -2764,14 +2736,10 @@ Array [
 `;
 
 exports[`renders ./components/input/demo/textarea.md correctly 1`] = `
-<div
-  class="ant-input-textarea"
->
-  <textarea
-    class="ant-input"
-    rows="4"
-  />
-</div>
+<textarea
+  class="ant-input"
+  rows="4"
+/>
 `;
 
 exports[`renders ./components/input/demo/textarea-resize.md correctly 1`] = `
@@ -2785,16 +2753,12 @@ Array [
       Auto Resize: false
     </span>
   </button>,
-  <div
-    class="ant-input-textarea"
+  <textarea
+    class="ant-input"
+    rows="4"
   >
-    <textarea
-      class="ant-input"
-      rows="4"
-    >
-      The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows. The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows.
-    </textarea>
-  </div>,
+    The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows. The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows.
+  </textarea>,
 ]
 `;
 
diff --git a/components/input/__tests__/__snapshots__/textarea.test.js.snap b/components/input/__tests__/__snapshots__/textarea.test.js.snap
index a8c15bcc7c..313529a898 100644
--- a/components/input/__tests__/__snapshots__/textarea.test.js.snap
+++ b/components/input/__tests__/__snapshots__/textarea.test.js.snap
@@ -1,315 +1,271 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`TextArea allowClear should change type when click 1`] = `
-<div
-  class="ant-input-textarea"
->
-  <span
-    class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
-  >
-    <textarea
-      class="ant-input"
-    >
-      111
-    </textarea>
-    <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-clear-icon"
-      role="button"
-      tabindex="-1"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="close-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-        />
-      </svg>
-    </span>
-  </span>
-</div>
-`;
-
-exports[`TextArea allowClear should change type when click 2`] = `
-<div
-  class="ant-input-textarea"
->
-  <span
-    class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
-  >
-    <textarea
-      class="ant-input"
-    />
-    <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
-      role="button"
-      tabindex="-1"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="close-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-        />
-      </svg>
-    </span>
-  </span>
-</div>
-`;
-
-exports[`TextArea allowClear should not show icon if defaultValue is undefined, null or empty string 1`] = `
-<div
-  class="ant-input-textarea"
->
-  <span
-    class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
-  >
-    <textarea
-      class="ant-input"
-    />
-    <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
-      role="button"
-      tabindex="-1"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="close-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-        />
-      </svg>
-    </span>
-  </span>
-</div>
-`;
-
-exports[`TextArea allowClear should not show icon if defaultValue is undefined, null or empty string 2`] = `
-<div
-  class="ant-input-textarea"
->
-  <span
-    class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
-  >
-    <textarea
-      class="ant-input"
-    />
-    <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
-      role="button"
-      tabindex="-1"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="close-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-        />
-      </svg>
-    </span>
-  </span>
-</div>
-`;
-
-exports[`TextArea allowClear should not show icon if defaultValue is undefined, null or empty string 3`] = `
-<div
-  class="ant-input-textarea"
->
-  <span
-    class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
-  >
-    <textarea
-      class="ant-input"
-    />
-    <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
-      role="button"
-      tabindex="-1"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="close-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-        />
-      </svg>
-    </span>
-  </span>
-</div>
-`;
-
-exports[`TextArea allowClear should not show icon if value is undefined, null or empty string 1`] = `
-<div
-  class="ant-input-textarea"
->
-  <span
-    class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
-  >
-    <textarea
-      class="ant-input"
-    />
-    <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
-      role="button"
-      tabindex="-1"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="close-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-        />
-      </svg>
-    </span>
-  </span>
-</div>
-`;
-
-exports[`TextArea allowClear should not show icon if value is undefined, null or empty string 2`] = `
-<div
-  class="ant-input-textarea"
->
-  <span
-    class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
-  >
-    <textarea
-      class="ant-input"
-    />
-    <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
-      role="button"
-      tabindex="-1"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="close-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-        />
-      </svg>
-    </span>
-  </span>
-</div>
-`;
-
-exports[`TextArea allowClear should not show icon if value is undefined, null or empty string 3`] = `
-<div
-  class="ant-input-textarea"
->
-  <span
-    class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
-  >
-    <textarea
-      class="ant-input"
-    />
-    <span
-      aria-label="close-circle"
-      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
-      role="button"
-      tabindex="-1"
-    >
-      <svg
-        aria-hidden="true"
-        class=""
-        data-icon="close-circle"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="64 64 896 896"
-        width="1em"
-      >
-        <path
-          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
-        />
-      </svg>
-    </span>
-  </span>
-</div>
-`;
-
-exports[`TextArea should support disabled 1`] = `
-<div
-  class="ant-input-textarea"
->
-  <textarea
-    class="ant-input ant-input-disabled"
-    disabled=""
-  />
-</div>
-`;
-
-exports[`TextArea should support maxLength 1`] = `
-<div
-  class="ant-input-textarea"
+<span
+  class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
+>
+  <textarea
+    class="ant-input"
+  >
+    111
+  </textarea>
+  <span
+    aria-label="close-circle"
+    class="anticon anticon-close-circle ant-input-clear-icon"
+    role="button"
+    tabindex="-1"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      data-icon="close-circle"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      viewBox="64 64 896 896"
+      width="1em"
+    >
+      <path
+        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+      />
+    </svg>
+  </span>
+</span>
+`;
+
+exports[`TextArea allowClear should change type when click 2`] = `
+<span
+  class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
 >
   <textarea
     class="ant-input"
-    maxlength="10"
   />
-</div>
+  <span
+    aria-label="close-circle"
+    class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
+    role="button"
+    tabindex="-1"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      data-icon="close-circle"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      viewBox="64 64 896 896"
+      width="1em"
+    >
+      <path
+        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+      />
+    </svg>
+  </span>
+</span>
+`;
+
+exports[`TextArea allowClear should not show icon if defaultValue is undefined, null or empty string 1`] = `
+<span
+  class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
+>
+  <textarea
+    class="ant-input"
+  />
+  <span
+    aria-label="close-circle"
+    class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
+    role="button"
+    tabindex="-1"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      data-icon="close-circle"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      viewBox="64 64 896 896"
+      width="1em"
+    >
+      <path
+        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+      />
+    </svg>
+  </span>
+</span>
+`;
+
+exports[`TextArea allowClear should not show icon if defaultValue is undefined, null or empty string 2`] = `
+<span
+  class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
+>
+  <textarea
+    class="ant-input"
+  />
+  <span
+    aria-label="close-circle"
+    class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
+    role="button"
+    tabindex="-1"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      data-icon="close-circle"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      viewBox="64 64 896 896"
+      width="1em"
+    >
+      <path
+        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+      />
+    </svg>
+  </span>
+</span>
+`;
+
+exports[`TextArea allowClear should not show icon if defaultValue is undefined, null or empty string 3`] = `
+<span
+  class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
+>
+  <textarea
+    class="ant-input"
+  />
+  <span
+    aria-label="close-circle"
+    class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
+    role="button"
+    tabindex="-1"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      data-icon="close-circle"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      viewBox="64 64 896 896"
+      width="1em"
+    >
+      <path
+        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+      />
+    </svg>
+  </span>
+</span>
+`;
+
+exports[`TextArea allowClear should not show icon if value is undefined, null or empty string 1`] = `
+<span
+  class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
+>
+  <textarea
+    class="ant-input"
+  />
+  <span
+    aria-label="close-circle"
+    class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
+    role="button"
+    tabindex="-1"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      data-icon="close-circle"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      viewBox="64 64 896 896"
+      width="1em"
+    >
+      <path
+        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+      />
+    </svg>
+  </span>
+</span>
+`;
+
+exports[`TextArea allowClear should not show icon if value is undefined, null or empty string 2`] = `
+<span
+  class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
+>
+  <textarea
+    class="ant-input"
+  />
+  <span
+    aria-label="close-circle"
+    class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
+    role="button"
+    tabindex="-1"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      data-icon="close-circle"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      viewBox="64 64 896 896"
+      width="1em"
+    >
+      <path
+        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+      />
+    </svg>
+  </span>
+</span>
+`;
+
+exports[`TextArea allowClear should not show icon if value is undefined, null or empty string 3`] = `
+<span
+  class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
+>
+  <textarea
+    class="ant-input"
+  />
+  <span
+    aria-label="close-circle"
+    class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
+    role="button"
+    tabindex="-1"
+  >
+    <svg
+      aria-hidden="true"
+      class=""
+      data-icon="close-circle"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      viewBox="64 64 896 896"
+      width="1em"
+    >
+      <path
+        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+      />
+    </svg>
+  </span>
+</span>
+`;
+
+exports[`TextArea should support disabled 1`] = `
+<textarea
+  class="ant-input ant-input-disabled"
+  disabled=""
+/>
+`;
+
+exports[`TextArea should support maxLength 1`] = `
+<textarea
+  class="ant-input"
+  maxlength="10"
+/>
 `;
 
 exports[`TextArea should support size 1`] = `
-<div
-  class="ant-input-textarea"
->
-  <textarea
-    class="ant-input ant-input-lg"
-  />
-</div>
+<textarea
+  class="ant-input ant-input-lg"
+/>
 `;
diff --git a/components/input/__tests__/textarea.test.js b/components/input/__tests__/textarea.test.js
index 1492c636f5..ba608bb735 100644
--- a/components/input/__tests__/textarea.test.js
+++ b/components/input/__tests__/textarea.test.js
@@ -133,11 +133,27 @@ describe('TextArea', () => {
     expect(textarea.find('textarea').prop('value')).toBe(input.getDOMNode().value);
   });
 
-  it('should support showCount', async () => {
-    const wrapper = mount(<TextArea maxLength={5} showCount value="12345678" />);
-    const textarea = wrapper.find('.ant-input-textarea');
-    expect(wrapper.find('textarea').prop('value')).toBe('12345');
-    expect(textarea.prop('data-count')).toBe('5 / 5');
+  describe('should support showCount', () => {
+    it('maxLength', () => {
+      const wrapper = mount(<TextArea maxLength={5} showCount value="12345678" />);
+      const textarea = wrapper.find('.ant-input-textarea');
+      expect(wrapper.find('textarea').prop('value')).toBe('12345');
+      expect(textarea.prop('data-count')).toBe('5 / 5');
+    });
+
+    it('className & style patch to outer', () => {
+      const wrapper = mount(
+        <TextArea className="bamboo" style={{ background: 'red' }} showCount />,
+      );
+
+      // Outer
+      expect(wrapper.find('div').first().hasClass('bamboo')).toBeTruthy();
+      expect(wrapper.find('div').first().props().style.background).toEqual('red');
+
+      // Inner
+      expect(wrapper.find('.ant-input').hasClass('bamboo')).toBeFalsy();
+      expect(wrapper.find('.ant-input').props().style.background).toBeFalsy();
+    });
   });
 
   it('should support size', async () => {
diff --git a/components/input/index.en-US.md b/components/input/index.en-US.md
index 70ae4ea84f..4b8dc257f1 100644
--- a/components/input/index.en-US.md
+++ b/components/input/index.en-US.md
@@ -20,6 +20,8 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
 | --- | --- | --- | --- | --- |
 | addonAfter | The label text displayed after (on the right side of) the input field | ReactNode | - |  |
 | addonBefore | The label text displayed before (on the left side of) the input field | ReactNode | - |  |
+| allowClear | If allow to remove input content with clear icon | boolean | false |  |
+| bordered | Whether has border style | boolean | true | 4.5.0 |
 | defaultValue | The initial input content | string | - |  |
 | disabled | Whether the input is disabled | boolean | false |  |
 | id | The ID for input | string | - |  |
@@ -31,8 +33,6 @@ A basic widget for getting the user input is a text field. Keyboard and mouse ca
 | value | The input content value | string | - |  |
 | onChange | Callback when user input | function(e) | - |  |
 | onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - |  |
-| allowClear | If allow to remove input content with clear icon | boolean | false |  |
-| bordered | Whether has border style | boolean | true | 4.5.0 |
 
 > When `Input` is used in a `Form.Item` context, if the `Form.Item` has the `id` and `options` props defined then `value`, `defaultValue`, and `id` props of `Input` are automatically set.
 
@@ -42,15 +42,15 @@ The rest of the props of Input are exactly the same as the original [input](http
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| allowClear | If allow to remove input content with clear icon | boolean | false |  |
 | autoSize | Height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false |  |
+| bordered | Whether has border style | boolean | true | 4.5.0 |
 | defaultValue | The initial input content | string | - |  |
+| maxLength | The max length | number | - | 4.7.0 |
+| showCount | Whether show text count | boolean | false | 4.7.0 |
 | value | The input content value | string | - |  |
 | onPressEnter | The callback function that is triggered when Enter key is pressed | function(e) | - |  |
-| allowClear | If allow to remove input content with clear icon | boolean | false |  |
 | onResize | The callback function that is triggered when resize | function({ width, height }) | - |  |
-| bordered | Whether has border style | boolean | true | 4.5.0 |
-| showCount | Whether show text count | boolean | false |  |
-| maxLength | The max length | number | - |  |
 
 The rest of the props of `Input.TextArea` are the same as the original [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea).
 
@@ -59,8 +59,8 @@ The rest of the props of `Input.TextArea` are the same as the original [textarea
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | enterButton | Whether to show an enter button after input. This property conflicts with the `addonAfter` property | boolean \| ReactNode | false |
-| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event) | - |
 | loading | Search box with loading | boolean | false |
+| onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event) | - |
 
 Supports all props of `Input`.
 
@@ -82,8 +82,8 @@ Supports all props of `Input`.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| visibilityToggle | Whether show toggle button | boolean | true |  |
 | iconRender | Custom toggle button | (visible) => ReactNode | (visible) => (visible ? &lt;EyeOutlined /> : &lt;EyeInvisibleOutlined />) | 4.3.0 |
+| visibilityToggle | Whether show toggle button | boolean | true |  |
 
 ## FAQ
 
diff --git a/components/input/index.zh-CN.md b/components/input/index.zh-CN.md
index 56431164e1..9cb0d04465 100644
--- a/components/input/index.zh-CN.md
+++ b/components/input/index.zh-CN.md
@@ -21,6 +21,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
 | --- | --- | --- | --- | --- |
 | addonAfter | 带标签的 input，设置后置标签 | ReactNode | - |  |
 | addonBefore | 带标签的 input，设置前置标签 | ReactNode | - |  |
+| allowClear | 可以点击清除图标删除内容 | boolean | - |  |
+| bordered | 是否有边框 | boolean | true | 4.5.0 |
 | defaultValue | 输入框默认内容 | string | - |  |
 | disabled | 是否禁用状态，默认为 false | boolean | false |  |
 | id | 输入框的 id | string | - |  |
@@ -32,8 +34,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xS9YEJhfe/Input.svg
 | value | 输入框内容 | string | - |  |
 | onChange | 输入框内容变化时的回调 | function(e) | - |  |
 | onPressEnter | 按下回车的回调 | function(e) | - |  |
-| allowClear | 可以点击清除图标删除内容 | boolean | - |  |
-| bordered | 是否有边框 | boolean | true | 4.5.0 |
 
 > 如果 `Input` 在 `Form.Item` 内，并且 `Form.Item` 设置了 `id` 和 `options` 属性，则 `value` `defaultValue` 和 `id` 属性会被自动设置。
 
@@ -43,15 +43,15 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| allowClear | 可以点击清除图标删除内容 | boolean | false |  |
 | autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false |  |
+| bordered | 是否有边框 | boolean | true | 4.5.0 |
 | defaultValue | 输入框默认内容 | string | - |  |
+| maxLength | 内容最大长度 | number | - | 4.7.0 |
+| showCount | 是否展示字数 | boolean | false | 4.7.0 |
 | value | 输入框内容 | string | - |  |
 | onPressEnter | 按下回车的回调 | function(e) | - |  |
-| allowClear | 可以点击清除图标删除内容 | boolean | false |  |
 | onResize | resize 回调 | function({ width, height }) | - |  |
-| bordered | 是否有边框 | boolean | true | 4.5.0 |
-| showCount | 是否展示字数 | boolean | false |  |
-| maxLength | 内容最大长度 | number | - |  |
 
 `Input.TextArea` 的其他属性和浏览器自带的 [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) 一致。
 
@@ -60,8 +60,8 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 `addonAfter` 冲突。 | boolean \| ReactNode | false |
-| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event) | - |
 | loading | 搜索 loading | boolean | false |
+| onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event) | - |
 
 其余属性和 Input 一致。
 
@@ -83,8 +83,8 @@ Input 的其他属性和 React 自带的 [input](https://facebook.github.io/reac
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| visibilityToggle | 是否显示切换按钮 | boolean | true |  |
 | iconRender | 自定义切换按钮 | (visible) => ReactNode | (visible) => (visible ? &lt;EyeOutlined /> : &lt;EyeInvisibleOutlined />) | 4.3.0 |
+| visibilityToggle | 是否显示切换按钮 | boolean | true |  |
 
 ## FAQ
 
diff --git a/components/layout/Sider.tsx b/components/layout/Sider.tsx
index c21a1b478b..bb5e84fe78 100644
--- a/components/layout/Sider.tsx
+++ b/components/layout/Sider.tsx
@@ -20,7 +20,7 @@ const dimensionMaxMap = {
 
 export interface SiderContextProps {
   siderCollapsed?: boolean;
-  collapsedWidth?: string | number;
+  collapsedWidth?: number | string;
 }
 
 export const SiderContext: React.Context<SiderContextProps> = React.createContext({});
diff --git a/components/layout/__tests__/__snapshots__/demo.test.js.snap b/components/layout/__tests__/__snapshots__/demo.test.js.snap
index ea35c40e16..09c3f99c34 100644
--- a/components/layout/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/layout/__tests__/__snapshots__/demo.test.js.snap
@@ -1141,7 +1141,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
           <div />
         </li>
         <li
-          class="ant-menu-item ant-menu-item-only-child"
+          class="ant-menu-item"
           role="menuitem"
           style="padding-left:24px"
         >
@@ -1165,7 +1165,9 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span />
+          <span>
+            Files
+          </span>
         </li>
       </ul>
     </div>
diff --git a/components/layout/demo/side.md b/components/layout/demo/side.md
index af83ba5bda..84b7914a07 100644
--- a/components/layout/demo/side.md
+++ b/components/layout/demo/side.md
@@ -44,9 +44,10 @@ class SiderDemo extends React.Component {
   };
 
   render() {
+    const { collapsed } = this.state;
     return (
       <Layout style={{ minHeight: '100vh' }}>
-        <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
+        <Sider collapsible collapsed={collapsed} onCollapse={this.onCollapse}>
           <div className="logo" />
           <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
             <Menu.Item key="1" icon={<PieChartOutlined />}>
@@ -64,7 +65,9 @@ class SiderDemo extends React.Component {
               <Menu.Item key="6">Team 1</Menu.Item>
               <Menu.Item key="8">Team 2</Menu.Item>
             </SubMenu>
-            <Menu.Item key="9" icon={<FileOutlined />} />
+            <Menu.Item key="9" icon={<FileOutlined />}>
+              Files
+            </Menu.Item>
           </Menu>
         </Sider>
         <Layout className="site-layout">
diff --git a/components/layout/index.en-US.md b/components/layout/index.en-US.md
index 990a2bb788..e372075de5 100644
--- a/components/layout/index.en-US.md
+++ b/components/layout/index.en-US.md
@@ -94,14 +94,14 @@ The sidebar.
 | collapsedWidth | Width of the collapsed sidebar, by setting to 0 a special trigger will appear | number | 80 |
 | collapsible | Whether can be collapsed | boolean | false |
 | defaultCollapsed | To set the initial status | boolean | false |
-| onBreakpoint | The callback function, executed when [breakpoints](/components/grid/#API) changed | (broken) => {} | - |
-| onCollapse | The callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
 | reverseArrow | Reverse direction of arrow, for a sider that expands from the right | boolean | false |
 | style | To customize the styles | CSSProperties | - |
 | theme | Color theme of the sidebar | `light` \| `dark` | `dark` |
 | trigger | Specify the customized trigger, set to null to hide the trigger | ReactNode | - |
 | width | Width of the sidebar | number \| string | 200 |
 | zeroWidthTriggerStyle | To customize the styles of the special trigger that appears when `collapsedWidth` is 0 | object | - |
+| onBreakpoint | The callback function, executed when [breakpoints](/components/grid/#API) changed | (broken) => {} | - |
+| onCollapse | The callback function, executed by clicking the trigger or activating the responsive layout | (collapsed, type) => {} | - |
 
 #### breakpoint width
 
diff --git a/components/layout/index.zh-CN.md b/components/layout/index.zh-CN.md
index d033099c13..54d10cfcf3 100644
--- a/components/layout/index.zh-CN.md
+++ b/components/layout/index.zh-CN.md
@@ -95,14 +95,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hzEndUVEx/Layout.svg
 | collapsedWidth | 收缩宽度，设置为 0 会出现特殊 trigger | number | 80 |
 | collapsible | 是否可收起 | boolean | false |
 | defaultCollapsed | 是否默认收起 | boolean | false |
-| onBreakpoint | 触发响应式布局[断点](/components/grid/#API)时的回调 | (broken) => {} | - |
-| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
 | reverseArrow | 翻转折叠提示箭头的方向，当 Sider 在右边时可以使用 | boolean | false |
 | style | 指定样式 | CSSProperties | - |
 | theme | 主题颜色 | `light` \| `dark` | `dark` |
 | trigger | 自定义 trigger，设置为 null 时隐藏 trigger | ReactNode | - |
 | width | 宽度 | number \| string | 200 |
 | zeroWidthTriggerStyle | 指定当 `collapsedWidth` 为 0 时出现的特殊 trigger 的样式 | object | - |
+| onBreakpoint | 触发响应式布局[断点](/components/grid/#API)时的回调 | (broken) => {} | - |
+| onCollapse | 展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发 | (collapsed, type) => {} | - |
 
 #### breakpoint width
 
diff --git a/components/layout/style/light.less b/components/layout/style/light.less
index bee2b222df..35d636df1c 100644
--- a/components/layout/style/light.less
+++ b/components/layout/style/light.less
@@ -1,4 +1,4 @@
-.@{layout-prefix-cls}-sider.@{layout-prefix-cls}-light {
+.@{layout-prefix-cls}-sider-light {
   background: @layout-sider-background-light;
   .@{layout-prefix-cls}-sider-trigger {
     color: @layout-trigger-color-light;
diff --git a/components/list/__tests__/index.test.js b/components/list/__tests__/index.test.js
index 053381f896..6ff8527356 100644
--- a/components/list/__tests__/index.test.js
+++ b/components/list/__tests__/index.test.js
@@ -17,11 +17,6 @@ describe('List', () => {
     const dataSource = [];
 
     const wrapper = mount(<List renderItem={renderItem} dataSource={dataSource} locale={locale} />);
-    expect(
-      wrapper
-        .find('div')
-        .first()
-        .props().locale,
-    ).toBe(undefined);
+    expect(wrapper.find('div').first().props().locale).toBe(undefined);
   });
 });
diff --git a/components/list/demo/grid-test.md b/components/list/demo/grid-test.md
index c004406fc4..50bf67ccdc 100644
--- a/components/list/demo/grid-test.md
+++ b/components/list/demo/grid-test.md
@@ -33,7 +33,7 @@ const data = [
   {
     title: 'Title 5',
   },
-    {
+  {
     title: 'Title 6',
   },
 ];
@@ -57,11 +57,7 @@ ReactDOM.render(
         </>
       )}
     />
-    <List
-      grid={{ gutter: 16, column: 4 }}
-      dataSource={data}
-      renderItem={() => <ListItem />}
-    />
+    <List grid={{ gutter: 16, column: 4 }} dataSource={data} renderItem={() => <ListItem />} />
     <List
       grid={{ gutter: 16, column: 4 }}
       dataSource={data}
diff --git a/components/list/index.en-US.md b/components/list/index.en-US.md
index d8e872b700..d594253f8b 100644
--- a/components/list/index.en-US.md
+++ b/components/list/index.en-US.md
@@ -19,42 +19,42 @@ A list can be used to display content related to a single subject. The content c
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | bordered | Toggles rendering of the border around the list | boolean | false |  |
+| dataSource | DataSource array for list | any\[] | - |  |
 | footer | List footer renderer | ReactNode | - |  |
 | grid | The grid type of list. You can set grid to something like {gutter: 16, column: 4} | [object](#List-grid-props) | - |  |
 | header | List header renderer | ReactNode | - |  |
 | itemLayout | The layout of list, default is `horizontal`, If a vertical list is desired, set the itemLayout property to `vertical` | string | - |  |
-| rowKey | Item's unique key, could be a string or function that returns a string | string \| Function(record): string | `key` |  |
 | loading | Shows a loading indicator while the contents of the list are being fetched | boolean \| [SpinProps](/components/spin/#API) ([more](https://github.com/ant-design/ant-design/issues/8659)) | false |  |
 | loadMore | Shows a load more content | ReactNode | - |  |
 | locale | The i18n text including empty text | object | {emptyText: `No Data`} |  |
 | pagination | Pagination [config](/components/pagination/), hide it by setting it to false | boolean \| object | false |  |
+| renderItem | Customize list item when using `dataSource` | (item) => ReactNode | - |  |
+| rowKey | Item's unique key, could be a string or function that returns a string | string \| Function(record): string | `key` |  |
 | size | Size of list | `default` \| `large` \| `small` | `default` |  |
 | split | Toggles rendering of the split under the list item | boolean | true |  |
-| dataSource | DataSource array for list | any[] | - |  |
-| renderItem | Customize list item when using `dataSource` | (item) => ReactNode | - |  |
 
 ### pagination
 
 Properties for pagination.
 
-| Property | Description                              | Type                        | Default  |
-| -------- | ---------------------------------------- | --------------------------- | -------- |
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
 | position | The specify the position of `Pagination` | `top` \| `bottom` \| `both` | `bottom` |
 
 More about pagination, please check [`Pagination`](/components/pagination/).
 
 ### List grid props
 
-| Property | Description              | Type   | Default | Version |
-| -------- | ------------------------ | ------ | ------- | ------- |
-| column   | The column of grid       | number | -       |         |
-| gutter   | The spacing between grid | number | 0       |         |
-| xs       | `<576px` column of grid  | number | -       |         |
-| sm       | `≥576px` column of grid  | number | -       |         |
-| md       | `≥768px` column of grid  | number | -       |         |
-| lg       | `≥992px` column of grid  | number | -       |         |
-| xl       | `≥1200px` column of grid | number | -       |         |
-| xxl      | `≥1600px` column of grid | number | -       |         |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| column | The column of grid | number | - |  |
+| gutter | The spacing between grid | number | 0 |  |
+| xs | `<576px` column of grid | number | - |  |
+| sm | `≥576px` column of grid | number | - |  |
+| md | `≥768px` column of grid | number | - |  |
+| lg | `≥992px` column of grid | number | - |  |
+| xl | `≥1200px` column of grid | number | - |  |
+| xxl | `≥1600px` column of grid | number | - |  |
 
 ### List.Item
 
@@ -65,8 +65,8 @@ More about pagination, please check [`Pagination`](/components/pagination/).
 
 ### List.Item.Meta
 
-| Property    | Description                  | Type      | Default | Version |
-| ----------- | ---------------------------- | --------- | ------- | ------- |
-| avatar      | The avatar of list item      | ReactNode | -       |         |
-| description | The description of list item | ReactNode | -       |         |
-| title       | The title of list item       | ReactNode | -       |         |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| avatar | The avatar of list item | ReactNode | - |  |
+| description | The description of list item | ReactNode | - |  |
+| title | The title of list item | ReactNode | - |  |
diff --git a/components/list/index.zh-CN.md b/components/list/index.zh-CN.md
index ce68ff35e3..05508ada30 100644
--- a/components/list/index.zh-CN.md
+++ b/components/list/index.zh-CN.md
@@ -22,6 +22,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | bordered | 是否展示边框 | boolean | false |  |
+| dataSource | 列表数据源 | any\[] | - |  |
 | footer | 列表底部 | ReactNode | - |  |
 | grid | 列表栅格配置 | [object](#List-grid-props) | - |  |
 | header | 列表头部 | ReactNode | - |  |
@@ -30,33 +31,32 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
 | loadMore | 加载更多 | ReactNode | - |  |
 | locale | 默认文案设置，目前包括空数据文案 | object | {emptyText: `暂无数据`} |  |
 | pagination | 对应的 `pagination` 配置, 设置 false 不显示 | boolean \| object | false |  |
+| renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | (item) => ReactNode | - |  |
 | size | list 的尺寸 | `default` \| `large` \| `small` | `default` |  |
 | split | 是否展示分割线 | boolean | true |  |
-| dataSource | 列表数据源 | any[] | - |  |
-| renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | (item) => ReactNode | - |  |
 
 ### pagination
 
 分页的配置项。
 
-| 参数     | 说明               | 类型                        | 默认值   |
-| -------- | ------------------ | --------------------------- | -------- |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
 | position | 指定分页显示的位置 | `top` \| `bottom` \| `both` | `bottom` |
 
 更多配置项，请查看 [`Pagination`](/components/pagination/)。
 
 ### List grid props
 
-| 参数   | 说明                 | 类型   | 默认值 | 版本 |
-| ------ | -------------------- | ------ | ------ | ---- |
-| column | 列数                 | number | -      |      |
-| gutter | 栅格间隔             | number | 0      |      |
-| xs     | `<576px` 展示的列数  | number | -      |      |
-| sm     | `≥576px` 展示的列数  | number | -      |      |
-| md     | `≥768px` 展示的列数  | number | -      |      |
-| lg     | `≥992px` 展示的列数  | number | -      |      |
-| xl     | `≥1200px` 展示的列数 | number | -      |      |
-| xxl    | `≥1600px` 展示的列数 | number | -      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| column | 列数 | number | - |  |
+| gutter | 栅格间隔 | number | 0 |  |
+| xs | `<576px` 展示的列数 | number | - |  |
+| sm | `≥576px` 展示的列数 | number | - |  |
+| md | `≥768px` 展示的列数 | number | - |  |
+| lg | `≥992px` 展示的列数 | number | - |  |
+| xl | `≥1200px` 展示的列数 | number | - |  |
+| xxl | `≥1600px` 展示的列数 | number | - |  |
 
 ### List.Item
 
@@ -67,8 +67,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
 
 ### List.Item.Meta
 
-| 参数        | 说明               | 类型      | 默认值 | 版本 |
-| ----------- | ------------------ | --------- | ------ | ---- |
-| avatar      | 列表元素的图标     | ReactNode | -      |      |
-| description | 列表元素的描述内容 | ReactNode | -      |      |
-| title       | 列表元素的标题     | ReactNode | -      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| avatar | 列表元素的图标 | ReactNode | - |  |
+| description | 列表元素的描述内容 | ReactNode | - |  |
+| title | 列表元素的标题 | ReactNode | - |  |
diff --git a/components/locale-provider/by_BY.tsx b/components/locale-provider/by_BY.tsx
index f2c5a76b82..61e41a6f34 100644
--- a/components/locale-provider/by_BY.tsx
+++ b/components/locale-provider/by_BY.tsx
@@ -1,3 +1,3 @@
 import locale from '../locale/by_BY';
 
-export default locale;
\ No newline at end of file
+export default locale;
diff --git a/components/locale/ar_EG.tsx b/components/locale/ar_EG.tsx
index ffa2085343..ec103d1df7 100644
--- a/components/locale/ar_EG.tsx
+++ b/components/locale/ar_EG.tsx
@@ -68,9 +68,9 @@ const localeValues: Locale = {
   },
   Form: {
     defaultValidateMessages: {
-      "default": 'خطأ في حقل الإدخال ${label}',
+      default: 'خطأ في حقل الإدخال ${label}',
       required: 'يرجى إدخال ${label}',
-      "enum": '${label} يجب أن يكون واحدا من [${enum}]',
+      enum: '${label} يجب أن يكون واحدا من [${enum}]',
       whitespace: '${label} لا يمكن أن يكون حرفًا فارغًا',
       date: {
         format: '${label} تنسيق التاريخ غير صحيح',
diff --git a/components/locale/default.tsx b/components/locale/default.tsx
index 67b2d7e924..8b48689255 100644
--- a/components/locale/default.tsx
+++ b/components/locale/default.tsx
@@ -28,9 +28,9 @@ const localeValues: Locale = {
     sortTitle: 'Sort',
     expand: 'Expand row',
     collapse: 'Collapse row',
-    triggerDesc: 'Click sort by descend',
-    triggerAsc: 'Click sort by ascend',
-    cancelSort: 'Click to cancel sort',
+    triggerDesc: 'Click to sort descending',
+    triggerAsc: 'Click to sort ascending',
+    cancelSort: 'Click to cancel sorting',
   },
   Modal: {
     okText: 'OK',
@@ -78,7 +78,7 @@ const localeValues: Locale = {
   Form: {
     optional: '(optional)',
     defaultValidateMessages: {
-      default: 'Field validation error ${label}',
+      default: 'Field validation error for ${label}',
       required: 'Please enter ${label}',
       enum: '${label} must be one of [${enum}]',
       whitespace: '${label} cannot be a blank character',
@@ -104,14 +104,14 @@ const localeValues: Locale = {
       },
       string: {
         len: '${label} must be ${len} characters',
-        min: '${label} at least ${min} characters',
-        max: '${label} up to ${max} characters',
+        min: '${label} must be at least ${min} characters',
+        max: '${label} must be up to ${max} characters',
         range: '${label} must be between ${min}-${max} characters',
       },
       number: {
         len: '${label} must be equal to ${len}',
-        min: '${label} minimum value is ${min}',
-        max: '${label} maximum value is ${max}',
+        min: '${label} must be minimum ${min}',
+        max: '${label} must be maximum ${max}',
         range: '${label} must be between ${min}-${max}',
       },
       array: {
diff --git a/components/locale/en_GB.tsx b/components/locale/en_GB.tsx
index 6db6ad5f4a..0d85dd73ec 100644
--- a/components/locale/en_GB.tsx
+++ b/components/locale/en_GB.tsx
@@ -46,7 +46,7 @@ const localeValues: Locale = {
   },
   Form: {
     defaultValidateMessages: {
-      default: 'Field validation error ${label}',
+      default: 'Field validation error for ${label}',
       required: 'Please enter ${label}',
       enum: '${label} must be one of [${enum}]',
       whitespace: '${label} cannot be a blank character',
@@ -72,14 +72,14 @@ const localeValues: Locale = {
       },
       string: {
         len: '${label} must be ${len} characters',
-        min: '${label} at least ${min} characters',
-        max: '${label} up to ${max} characters',
+        min: '${label} must be at least ${min} characters',
+        max: '${label} must be up to ${max} characters',
         range: '${label} must be between ${min}-${max} characters',
       },
       number: {
         len: '${label} must be equal to ${len}',
-        min: '${label} minimum value is ${min}',
-        max: '${label} maximum value is ${max}',
+        min: '${label} must be minimum ${min}',
+        max: '${label} must be maximum ${max}',
         range: '${label} must be between ${min}-${max}',
       },
       array: {
diff --git a/components/locale/ga_IE.tsx b/components/locale/ga_IE.tsx
index 5c222a1b25..c50106706a 100644
--- a/components/locale/ga_IE.tsx
+++ b/components/locale/ga_IE.tsx
@@ -26,9 +26,9 @@ const localeValues: Locale = {
     sortTitle: 'Sort',
     expand: 'Expand row',
     collapse: 'Collapse row',
-    triggerDesc: 'Click sort by descend',
-    triggerAsc: 'Click sort by ascend',
-    cancelSort: 'Click to cancel sort',
+    triggerDesc: 'Click to sort descending',
+    triggerAsc: 'Click to sort ascending',
+    cancelSort: 'Click to cancel sorting',
   },
   Modal: {
     okText: 'OK',
@@ -75,7 +75,7 @@ const localeValues: Locale = {
   },
   Form: {
     defaultValidateMessages: {
-      default: 'Field validation error ${label}',
+      default: 'Field validation error for ${label}',
       required: 'Please enter ${label}',
       enum: '${label} must be one of [${enum}]',
       whitespace: '${label} cannot be a blank character',
@@ -101,14 +101,14 @@ const localeValues: Locale = {
       },
       string: {
         len: '${label} must be ${len} characters',
-        min: '${label} at least ${min} characters',
-        max: '${label} up to ${max} characters',
+        min: '${label} must be at least ${min} characters',
+        max: '${label} must be up to ${max} characters',
         range: '${label} must be between ${min}-${max} characters',
       },
       number: {
         len: '${label} must be equal to ${len}',
-        min: '${label} minimum value is ${min}',
-        max: '${label} maximum value is ${max}',
+        min: '${label} must be minimum ${min}',
+        max: '${label} must be maximum ${max}',
         range: '${label} must be between ${min}-${max}',
       },
       array: {
diff --git a/components/mentions/index.en-US.md b/components/mentions/index.en-US.md
index d9fdf77880..e413737749 100644
--- a/components/mentions/index.en-US.md
+++ b/components/mentions/index.en-US.md
@@ -24,29 +24,29 @@ When need to mention someone or something.
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | autoFocus | Auto get focus when component mounted | boolean | false |
+| autoSize | Textarea height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false |
 | defaultValue | Default value | string | - |
 | filterOption | Customize filter option logic | false \| (input: string, option: OptionProps) => boolean | - |
+| getPopupContainer | Set the mount HTML node for suggestions | () => HTMLElement | - |
 | notFoundContent | Set mentions content when not match | ReactNode | `Not Found` |
 | placement | Set popup placement | `top` \| `bottom` | `bottom` |
-| prefix | Set trigger prefix keyword | string \| string[] | `@` |
-| split | Set split string before and after selected mention | string | `` |
+| prefix | Set trigger prefix keyword | string \| string\[] | `@` |
+| split | Set split string before and after selected mention | string | ` ` |
 | validateSearch | Customize trigger search logic | (text: string, props: MentionsProps) => void | - |
 | value | Set value of mentions | string | - |
-| onChange | Trigger when value changed | (text: string) => void | - |
-| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |
-| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |
-| onFocus | Trigger when mentions get focus | () => void | - |
 | onBlur | Trigger when mentions lose focus | () => void | - |
-| getPopupContainer | Set the mount HTML node for suggestions | () => HTMLElement | - |
-| autoSize | Textarea height autosize feature, can be set to true \| false or an object { minRows: 2, maxRows: 6 } | boolean \| object | false |
+| onChange | Trigger when value changed | (text: string) => void | - |
+| onFocus | Trigger when mentions get focus | () => void | - |
 | onResize | The callback function that is triggered when textarea resize | function({ width, height }) | - |
+| onSearch | Trigger when prefix hit | (text: string, prefix: string) => void | - |
+| onSelect | Trigger when user select the option | (option: OptionProps, prefix: string) => void | - |
 
 ### Mention methods
 
-| Name    | Description  |
-| ------- | ------------ |
-| blur()  | Remove focus |
-| focus() | Get focus    |
+| Name | Description |
+| --- | --- |
+| blur() | Remove focus |
+| focus() | Get focus |
 
 ### Option
 
diff --git a/components/mentions/index.zh-CN.md b/components/mentions/index.zh-CN.md
index 0fdff80861..7876603712 100644
--- a/components/mentions/index.zh-CN.md
+++ b/components/mentions/index.zh-CN.md
@@ -25,33 +25,33 @@ cover: https://gw.alipayobjects.com/zos/alicdn/jPE-itMFM/Mentions.svg
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | autoFocus | 自动获得焦点 | boolean | false |
+| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false |
 | defaultValue | 默认值 | string | - |
 | filterOption | 自定义过滤逻辑 | false \| (input: string, option: OptionProps) => boolean | - |
+| getPopupContainer | 指定建议框挂载的 HTML 节点 | () => HTMLElement | - |
 | notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | `Not Found` |
 | placement | 弹出层展示位置 | `top` \| `bottom` | `bottom` |
-| prefix | 设置触发关键字 | string \| string[] | `@` |
-| split | 设置选中项前后分隔符 | string | `` |
+| prefix | 设置触发关键字 | string \| string\[] | `@` |
+| split | 设置选中项前后分隔符 | string | ` ` |
 | validateSearch | 自定义触发验证逻辑 | (text: string, props: MentionsProps) => void | - |
 | value | 设置值 | string | - |
-| onChange | 值改变时触发 | (text: string) => void | - |
-| onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | - |
-| onSearch | 搜索时触发 | (text: string, prefix: string) => void | - |
-| onFocus | 获得焦点时触发 | () => void | - |
 | onBlur | 失去焦点时触发 | () => void | - |
-| getPopupContainer | 指定建议框挂载的 HTML 节点 | () => HTMLElement | - |
-| autoSize | 自适应内容高度，可设置为 true \| false 或对象：{ minRows: 2, maxRows: 6 } | boolean \| object | false |
+| onChange | 值改变时触发 | (text: string) => void | - |
+| onFocus | 获得焦点时触发 | () => void | - |
 | onResize | resize 回调 | function({ width, height }) | - |
+| onSearch | 搜索时触发 | (text: string, prefix: string) => void | - |
+| onSelect | 选择选项时触发 | (option: OptionProps, prefix: string) => void | - |
 
 ### Mentions 方法
 
-| 名称    | 描述     |
-| ------- | -------- |
-| blur()  | 移除焦点 |
+| 名称 | 描述 |
+| --- | --- |
+| blur() | 移除焦点 |
 | focus() | 获取焦点 |
 
 ### Option
 
-| 参数     | 说明           | 类型      | 默认值 |
-| -------- | -------------- | --------- | ------ |
-| children | 选项内容       | ReactNode | -      |
-| value    | 选择时填充的值 | string    | -      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| children | 选项内容 | ReactNode | - |
+| value | 选择时填充的值 | string | - |
diff --git a/components/menu/__tests__/__snapshots__/demo.test.js.snap b/components/menu/__tests__/__snapshots__/demo.test.js.snap
index b041d707e9..5682fab658 100644
--- a/components/menu/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/menu/__tests__/__snapshots__/demo.test.js.snap
@@ -662,30 +662,28 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
       role="button"
       style="padding-left:24px"
     >
-      <span>
-        <span
-          aria-label="mail"
-          class="anticon anticon-mail"
-          role="img"
+      <span
+        aria-label="mail"
+        class="anticon anticon-mail"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="mail"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
         >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="mail"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
-            />
-          </svg>
-        </span>
-        <span>
-          Navigation One
-        </span>
+          <path
+            d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
+          />
+        </svg>
+      </span>
+      <span>
+        Navigation One
       </span>
       <i
         class="ant-menu-submenu-arrow"
diff --git a/components/menu/__tests__/index.test.js b/components/menu/__tests__/index.test.js
index 84007eaebd..b1e7c07dab 100644
--- a/components/menu/__tests__/index.test.js
+++ b/components/menu/__tests__/index.test.js
@@ -7,6 +7,7 @@ import {
   PieChartOutlined,
   UserOutlined,
 } from '@ant-design/icons';
+import { act } from 'react-dom/test-utils';
 import Menu from '..';
 import Layout from '../../layout';
 import Tooltip from '../../tooltip';
@@ -291,7 +292,7 @@ describe('Menu', () => {
     wrapper.simulate('transitionEnd', { propertyName: 'width' });
 
     expect(wrapper.find('ul.ant-menu-root').at(0).hasClass('ant-menu-vertical')).toBe(true);
-    expect(wrapper.find('ul.ant-menu-sub').length).toBe(0);
+    expect(wrapper.find('ul.ant-menu-sub:not(.ant-menu-hidden)').length).toBe(0);
 
     wrapper.setProps({ inlineCollapsed: false });
     jest.runAllTimers();
@@ -501,7 +502,9 @@ describe('Menu', () => {
     );
 
     wrapper.find('.ant-menu-item').simulate('mouseenter');
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     wrapper.update();
 
     const text = wrapper.find('.ant-tooltip-inner').text();
@@ -537,11 +540,19 @@ describe('Menu', () => {
       }
     }
     const wrapper = mount(<Demo />);
+    expect(wrapper.find(Menu).at(0).getDOMNode().classList.contains('ant-menu-inline')).toBe(true);
     wrapper.find('.ant-menu-submenu-title').simulate('click');
     wrapper.find('.ant-layout-sider-trigger').simulate('click');
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     wrapper.update();
-    expect(wrapper.find('.ant-menu-submenu-popup').length).toBe(0);
+    expect(wrapper.find(Menu).getDOMNode().classList.contains('ant-menu-inline-collapsed')).toBe(
+      true,
+    );
+    wrapper.find(Menu).simulate('mouseenter');
+    expect(wrapper.find(Menu).getDOMNode().classList.contains('ant-menu-inline')).toBe(false);
+    expect(wrapper.find(Menu).getDOMNode().classList.contains('ant-menu-vertical')).toBe(true);
   });
 
   it('onMouseEnter should work', () => {
diff --git a/components/menu/demo/sider-current.md b/components/menu/demo/sider-current.md
index e616990edc..343a46d398 100755
--- a/components/menu/demo/sider-current.md
+++ b/components/menu/demo/sider-current.md
@@ -46,15 +46,7 @@ class Sider extends React.Component {
         onOpenChange={this.onOpenChange}
         style={{ width: 256 }}
       >
-        <SubMenu
-          key="sub1"
-          title={
-            <span>
-              <MailOutlined />
-              <span>Navigation One</span>
-            </span>
-          }
-        >
+        <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
           <Menu.Item key="1">Option 1</Menu.Item>
           <Menu.Item key="2">Option 2</Menu.Item>
           <Menu.Item key="3">Option 3</Menu.Item>
diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md
index bc53fc19e4..38fd8af004 100644
--- a/components/menu/index.en-US.md
+++ b/components/menu/index.en-US.md
@@ -36,10 +36,6 @@ More layouts with navigation: [Layout](/components/layout).
 | inlineIndent | Indent (in pixels) of inline menu items on each level | number | 24 |  |
 | mode | Type of menu | `vertical` \| `horizontal` \| `inline` | `vertical` |  |
 | multiple | Allows selection of multiple items | boolean | false |  |
-| onClick | Called when a menu item is clicked | function({ item, key, keyPath, domEvent }) | - |  |
-| onDeselect | Called when a menu item is deselected (multiple mode only) | function({ item, key, keyPath, selectedKeys, domEvent }) | - |  |
-| onOpenChange | Called when sub-menus are opened or closed | function(openKeys: string\[]) | - |  |
-| onSelect | Called when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | - |  |
 | openKeys | Array with the keys of currently opened sub-menus | string\[] | - |  |
 | overflowedIndicator | Customized icon when menu is collapsed | ReactNode | - |  |
 | selectable | Allows selecting menu items | boolean | true |  |
@@ -49,18 +45,22 @@ More layouts with navigation: [Layout](/components/layout).
 | subMenuOpenDelay | Delay time to show submenu when mouse enters, (in seconds) | number | 0 |  |
 | theme | Color theme of the menu | `light` \| `dark` | `light` |  |
 | triggerSubMenuAction | Which action can trigger submenu open/close | `hover` \| `click` | `hover` |  |
+| onClick | Called when a menu item is clicked | function({ item, key, keyPath, domEvent }) | - |  |
+| onDeselect | Called when a menu item is deselected (multiple mode only) | function({ item, key, keyPath, selectedKeys, domEvent }) | - |  |
+| onOpenChange | Called when sub-menus are opened or closed | function(openKeys: string\[]) | - |  |
+| onSelect | Called when a menu item is selected | function({ item, key, keyPath, selectedKeys, domEvent }) | - |  |
 
 > More options in [rc-menu](https://github.com/react-component/menu#api)
 
 ### Menu.Item
 
-| Param    | Description                          | Type      | Default value | Version |
-| -------- | ------------------------------------ | --------- | ------------- | ------- |
-| danger   | Display the danger style             | boolean   | false         | 4.3.0   |
-| disabled | Whether menu item is disabled        | boolean   | false         |         |
-| icon     | The icon of the menu item            | ReactNode | -             | 4.2.0   |
-| key      | Unique ID of the menu item           | string    | -             |         |
-| title    | Set display title for collapsed item | string    | -             |         |
+| Param | Description | Type | Default value | Version |
+| --- | --- | --- | --- | --- |
+| danger | Display the danger style | boolean | false | 4.3.0 |
+| disabled | Whether menu item is disabled | boolean | false |  |
+| icon | The icon of the menu item | ReactNode | - | 4.2.0 |
+| key | Unique ID of the menu item | string | - |  |
+| title | Set display title for collapsed item | string | - |  |
 
 > Note: `icon` is a newly added prop in`4.2.0`. For previous versions, please use the following method to define the icon.
 >
@@ -89,17 +89,17 @@ More layouts with navigation: [Layout](/components/layout).
 | disabled | Whether sub-menu is disabled | boolean | false |  |
 | icon | Icon of sub menu | ReactNode | - | 4.2.0 |
 | key | Unique ID of the sub-menu | string | - |  |
-| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | - |  |
 | popupClassName | Sub-menu class name | string | - |  |
 | popupOffset | Sub-menu offset | \[number, number] | - |  |
 | title | Title of sub menu | ReactNode | - |  |
+| onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) | - |  |
 
 ### Menu.ItemGroup
 
-| Param    | Description            | Type        | Default value | Version |
-| -------- | ---------------------- | ----------- | ------------- | ------- |
-| children | Sub-menu items         | MenuItem\[] | -             |         |
-| title    | The title of the group | ReactNode   | -             |         |
+| Param | Description | Type | Default value | Version |
+| --- | --- | --- | --- | --- |
+| children | Sub-menu items | MenuItem\[] | - |  |
+| title | The title of the group | ReactNode | - |  |
 
 ### Menu.Divider
 
diff --git a/components/menu/index.zh-CN.md b/components/menu/index.zh-CN.md
index ed048c4274..91df958d4c 100644
--- a/components/menu/index.zh-CN.md
+++ b/components/menu/index.zh-CN.md
@@ -37,10 +37,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
 | inlineIndent | inline 模式的菜单缩进宽度 | number | 24 |  |
 | mode | 菜单类型，现在支持垂直、水平、和内嵌模式三种 | `vertical` \| `horizontal` \| `inline` | `vertical` |  |
 | multiple | 是否允许多选 | boolean | false |  |
-| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - |  |
-| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - |  |
-| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string\[]) | - |  |
-| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | -   |  |
 | openKeys | 当前展开的 SubMenu 菜单项 key 数组 | string\[] | - |  |
 | overflowedIndicator | 自定义 Menu 折叠时的图标 | ReactNode | - |  |
 | selectable | 是否允许选中 | boolean | true |  |
@@ -50,18 +46,22 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
 | subMenuOpenDelay | 用户鼠标进入子菜单后开启延时，单位：秒 | number | 0 |  |
 | theme | 主题颜色 | `light` \| `dark` | `light` |  |
 | triggerSubMenuAction | SubMenu 展开/关闭的触发行为 | `hover` \| `click` | `hover` |  |
+| onClick | 点击 MenuItem 调用此函数 | function({ item, key, keyPath, domEvent }) | - |  |
+| onDeselect | 取消选中时调用，仅在 multiple 生效 | function({ item, key, keyPath, selectedKeys, domEvent }) | - |  |
+| onOpenChange | SubMenu 展开/关闭的回调 | function(openKeys: string\[]) | - |  |
+| onSelect | 被选中时调用 | function({ item, key, keyPath, selectedKeys, domEvent }) | -   |  |
 
 > 更多属性查看 [rc-menu](https://github.com/react-component/menu#api)
 
 ### Menu.Item
 
-| 参数     | 说明                     | 类型      | 默认值 | 版本  |
-| -------- | ------------------------ | --------- | ------ | ----- |
-| danger   | 展示错误状态样式         | boolean   | false  | 4.3.0 |
-| disabled | 是否禁用                 | boolean   | false  |       |
-| icon     | 菜单图标                 | ReactNode | -      | 4.2.0 |
-| key      | item 的唯一标志          | string    | -      |       |
-| title    | 设置收缩时展示的悬浮标题 | string    | -      |       |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| danger | 展示错误状态样式 | boolean | false | 4.3.0 |
+| disabled | 是否禁用 | boolean | false |  |
+| icon | 菜单图标 | ReactNode | - | 4.2.0 |
+| key | item 的唯一标志 | string | - |  |
+| title | 设置收缩时展示的悬浮标题 | string | - |  |
 
 > 注意：`icon` 是 `4.2.0` 新增的属性，之前的版本请使用下面的方式定义图标。
 >
@@ -84,23 +84,23 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3XZcjGpvK/Menu.svg
 
 ### Menu.SubMenu
 
-| 参数           | 说明           | 类型                          | 默认值 | 版本  |
-| -------------- | -------------- | ----------------------------- | ------ | ----- |
-| children       | 子菜单的菜单项 | Array&lt;MenuItem \| SubMenu> | -      |       |
-| disabled       | 是否禁用       | boolean                       | false  |       |
-| icon           | 菜单图标       | ReactNode                     | -      | 4.2.0 |
-| key            | 唯一标志       | string                        | -      |       |
-| onTitleClick   | 点击子菜单标题 | function({ key, domEvent })   | -      |       |
-| popupClassName | 子菜单样式     | string                        | -      |       |
-| popupOffset    | 子菜单偏移量   | \[number, number]             | -      |       |
-| title          | 子菜单项值     | ReactNode                     | -      |       |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| children | 子菜单的菜单项 | Array&lt;MenuItem \| SubMenu> | - |  |
+| disabled | 是否禁用 | boolean | false |  |
+| icon | 菜单图标 | ReactNode | - | 4.2.0 |
+| key | 唯一标志 | string | - |  |
+| popupClassName | 子菜单样式 | string | - |  |
+| popupOffset | 子菜单偏移量 | \[number, number] | - |  |
+| title | 子菜单项值 | ReactNode | - |  |
+| onTitleClick | 点击子菜单标题 | function({ key, domEvent }) | - |  |
 
 ### Menu.ItemGroup
 
-| 参数     | 说明         | 类型        | 默认值 | 版本 |
-| -------- | ------------ | ----------- | ------ | ---- |
-| children | 分组的菜单项 | MenuItem\[] | -      |      |
-| title    | 分组标题     | ReactNode   | -      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| children | 分组的菜单项 | MenuItem\[] | - |  |
+| title | 分组标题 | ReactNode | - |  |
 
 ### Menu.Divider
 
diff --git a/components/menu/style/index.less b/components/menu/style/index.less
index e29fd9d261..0e02e5d360 100644
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@@ -337,7 +337,6 @@
 
   &-horizontal {
     line-height: @menu-horizontal-line-height;
-    white-space: nowrap;
     border: 0;
     border-bottom: @border-width-base @border-style-base @border-color-split;
     box-shadow: none;
@@ -483,7 +482,7 @@
       > .@{menu-prefix-cls}-submenu-title,
     > .@{menu-prefix-cls}-submenu > .@{menu-prefix-cls}-submenu-title {
       left: 0;
-      padding: 0 (@menu-collapsed-width - @menu-icon-size-lg) / 2;
+      padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)';
       text-overflow: clip;
       .@{menu-prefix-cls}-submenu-arrow {
         display: none;
diff --git a/components/menu/style/rtl.less b/components/menu/style/rtl.less
index 21987789c0..32913df6d1 100644
--- a/components/menu/style/rtl.less
+++ b/components/menu/style/rtl.less
@@ -136,7 +136,7 @@
   &-inline-collapsed&-vertical {
     .@{menu-prefix-cls}-submenu-title {
       .@{menu-prefix-cls}-rtl& {
-        padding: 0 (@menu-collapsed-width - @menu-icon-size-lg) / 2;
+        padding: 0 ~'calc(50% - @{menu-icon-size-lg} / 2)';
       }
     }
   }
diff --git a/components/message/index.en-US.md b/components/message/index.en-US.md
index 83e8e3169d..e9a7beae7c 100644
--- a/components/message/index.en-US.md
+++ b/components/message/index.en-US.md
@@ -51,13 +51,13 @@ The properties of config are as follows:
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
+| className | Customized CSS class | string | - |
 | content | The content of the message | ReactNode | - |
 | duration | Time(seconds) before auto-dismiss, don't dismiss if set to 0 | number | 3 |
-| onClose | Specify a function that will be called when the message is closed | function | - |
 | icon | Customized Icon | ReactNode | - |
 | key | The unique identifier of the Message | string \| number | - |
-| className | Customized CSS class | string | - |
 | style | Customized inline style | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
+| onClose | Specify a function that will be called when the message is closed | function | - |
 
 ### Global static methods
 
@@ -89,9 +89,9 @@ message.config({
 | duration | Time before auto-dismiss, in seconds | number | 1.5 |  |
 | getContainer | Return the mount node for Message | () => HTMLElement | () => document.body |  |
 | maxCount | Max message show, drop oldest if exceed limit | number | - |  |
-| top | Distance from top | number | 24 |  |
-| rtl | Whether to enable RTL mode | boolean | false |  |
 | prefixCls | The prefix className of message node | string | `ant-message` | 4.5.0 |
+| rtl | Whether to enable RTL mode | boolean | false |  |
+| top | Distance from top | number | 24 |  |
 
 ## FAQ
 
diff --git a/components/message/index.zh-CN.md b/components/message/index.zh-CN.md
index a27b5ed8bb..b1ffe1cf45 100644
--- a/components/message/index.zh-CN.md
+++ b/components/message/index.zh-CN.md
@@ -25,11 +25,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg
 - `message.warn(content, [duration], onClose)` // alias of warning
 - `message.loading(content, [duration], onClose)`
 
-| 参数     | 说明                                        | 类型                | 默认值 |
-| -------- | ------------------------------------------- | ------------------- | ------ |
-| content  | 提示内容                                    | ReactNode \| config | -      |
-| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number              | 3      |
-| onClose  | 关闭时触发的回调函数                        | function            | -      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| content | 提示内容 | ReactNode \| config | - |
+| duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
+| onClose | 关闭时触发的回调函数 | function | - |
 
 组件同时提供 promise 接口。
 
@@ -52,13 +52,13 @@ cover: https://gw.alipayobjects.com/zos/alicdn/hAkKTIW0K/Message.svg
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| className | 自定义 CSS class | string | - |
 | content | 提示内容 | ReactNode | - |
 | duration | 自动关闭的延时，单位秒。设为 0 时不自动关闭 | number | 3 |
-| onClose | 关闭时触发的回调函数 | function | - |
 | icon | 自定义图标 | ReactNode | - |
 | key | 当前提示的唯一标志 | string \| number | - |
-| className | 自定义 CSS class | string | - |
 | style | 自定义内联样式 | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
+| onClose | 关闭时触发的回调函数 | function | - |
 
 ### 全局方法
 
@@ -90,9 +90,9 @@ message.config({
 | duration | 默认自动关闭延时，单位秒 | number | 3 |  |
 | getContainer | 配置渲染节点的输出位置 | () => HTMLElement | () => document.body |  |
 | maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - |  |
-| top | 消息距离顶部的位置 | number | 24 |  |
-| rtl | 是否开启 RTL 模式 | boolean | false |  |
 | prefixCls | 消息节点的 className 前缀 | string | `ant-message` | 4.5.0 |
+| rtl | 是否开启 RTL 模式 | boolean | false |  |
+| top | 消息距离顶部的位置 | number | 24 |  |
 
 ## FAQ
 
diff --git a/components/modal/demo/modal-render.md b/components/modal/demo/modal-render.md
index 81a614ec52..713222fd67 100644
--- a/components/modal/demo/modal-render.md
+++ b/components/modal/demo/modal-render.md
@@ -46,9 +46,7 @@ class App extends React.Component {
   render() {
     return (
       <>
-        <Button onClick={this.showModal}>
-          Open Draggable Modal
-        </Button>
+        <Button onClick={this.showModal}>Open Draggable Modal</Button>
         <Modal
           title={
             <div
diff --git a/components/modal/demo/width.md b/components/modal/demo/width.md
index 3de91fe9f5..62d82ea713 100644
--- a/components/modal/demo/width.md
+++ b/components/modal/demo/width.md
@@ -38,7 +38,7 @@ const App = () => {
       </Modal>
     </>
   );
-}
+};
 
 ReactDOM.render(<App />, mountNode);
 ```
diff --git a/components/modal/index.en-US.md b/components/modal/index.en-US.md
index 8f3a4de573..d6b7493150 100644
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@@ -17,8 +17,8 @@ When requiring users to interact with the application, but without jumping to a
 | --- | --- | --- | --- | --- |
 | afterClose | Specify a function that will be called when modal is closed completely | function | - |  |
 | bodyStyle | Body style for modal body element. Such as height, padding etc | CSSProperties | {} |  |
-| cancelText | Text of the Cancel button | ReactNode | `Cancel` |  |
 | cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - |  |
+| cancelText | Text of the Cancel button | ReactNode | `Cancel` |  |
 | centered | Centered Modal | boolean | false |  |
 | closable | Whether a close (x) button is visible on top right of the modal dialog or not | boolean | true |  |
 | closeIcon | Custom close icon | ReactNode | &lt;CloseOutlined /> |  |
@@ -35,14 +35,14 @@ When requiring users to interact with the application, but without jumping to a
 | okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - |  |
 | okText | Text of the OK button | ReactNode | `OK` |  |
 | okType | Button `type` of the OK button | string | `primary` |  |
-| onCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | function(e) | - |  |
-| onOk | Specify a function that will be called when a user clicks the OK button | function(e) | - |  |
 | style | Style of floating layer, typically used at least for adjusting the position | CSSProperties | - |  |
 | title | The modal dialog's title | ReactNode | - |  |
 | visible | Whether the modal dialog is visible or not | boolean | false |  |
 | width | Width of the modal dialog | string \| number | 520 |  |
 | wrapClassName | The class name of the container of the modal dialog | string | - |  |
 | zIndex | The `z-index` of the Modal | number | 1000 |  |
+| onCancel | Specify a function that will be called when a user clicks mask, close button on top right or Cancel button | function(e) | - |  |
+| onOk | Specify a function that will be called when a user clicks the OK button | function(e) | - |  |
 
 #### Note
 
@@ -79,12 +79,12 @@ The items listed above are all functions, expecting a settings object as paramet
 | okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - |  |
 | okText | Text of the OK button | string | `OK` |  |
 | okType | Button `type` of the OK button | string | `primary` |  |
-| onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function(close) | - |  |
-| onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function(close) | - |  |
 | style | Style of floating layer, typically used at least for adjusting the position | CSSProperties | - |  |
 | title | Title | ReactNode | - |  |
 | width | Width of the modal dialog | string \| number | 416 |  |
 | zIndex | The `z-index` of the Modal | number | 1000 |  |
+| onCancel | Specify a function that will be called when the user clicks the Cancel button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function(close) | - |  |
+| onOk | Specify a function that will be called when the user clicks the OK button. The parameter of this function is a function whose execution should include closing the dialog. You can also just return a promise and when the promise is resolved, the modal dialog will also be closed | function(close) | - |  |
 
 All the `Modal.method`s will return a reference, and then we can update and close the modal dialog by the reference.
 
@@ -114,7 +114,7 @@ browserHistory.listen(() => {
 
 ### Modal.useModal()
 
-When you need using Context, you can use `contextHolder` which created by `Modal.useModal` to insert into children. Modal created by hooks will get all the context where `contextHolder` are. Created `modal` has the same creating function with `Modal.method`](<#Modal.method()>).
+When you need using Context, you can use `contextHolder` which created by `Modal.useModal` to insert into children. Modal created by hooks will get all the context where `contextHolder` are. Created `modal` has the same creating function with `Modal.method`](&lt;#Modal.method()>).
 
 ```jsx
 const [modal, contextHolder] = Modal.useModal();
@@ -163,3 +163,7 @@ return (
 ```
 
 **Note:** You must insert `contextHolder` into your children with hooks. You can use origin method if you do not need context connection.
+
+### How to disable motion?
+
+You can config `transitionName=""` and `maskTransitionName=""` to remove motion class. But you should note that these prop is internal usage which we don't promise exist in next major version.
diff --git a/components/modal/index.zh-CN.md b/components/modal/index.zh-CN.md
index b5e16f8dfb..45b5882805 100644
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@@ -38,14 +38,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
 | okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |  |
 | okText | 确认按钮文字 | ReactNode | `确定` |  |
 | okType | 确认按钮类型 | string | `primary` |  |
-| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - |  |
-| onOk | 点击确定回调 | function(e) | - |  |
 | style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - |  |
 | title | 标题 | ReactNode | - |  |
 | visible | 对话框是否可见 | boolean | - |  |
 | width | 宽度 | string \| number | 520 |  |
 | wrapClassName | 对话框外层容器的类名 | string | - |  |
 | zIndex | 设置 Modal 的 `z-index` | number | 1000 |  |
+| onCancel | 点击遮罩层或右上角叉或取消按钮的回调 | function(e) | - |  |
+| onOk | 点击确定回调 | function(e) | - |  |
 
 #### 注意
 
@@ -82,12 +82,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/3StSdUlSH/Modal.svg
 | okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |  |
 | okText | 确认按钮文字 | string | `确定` |  |
 | okType | 确认按钮类型 | string | `primary` |  |
-| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function(close) | - |  |
-| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function(close) | - |  |
 | style | 可用于设置浮层的样式，调整浮层位置等 | CSSProperties | - |  |
 | title | 标题 | ReactNode | - |  |
 | width | 宽度 | string \| number | 416 |  |
 | zIndex | 设置 Modal 的 `z-index` | number | 1000 |  |
+| onCancel | 取消回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function(close) | - |  |
+| onOk | 点击确定回调，参数为关闭函数，返回 promise 时 resolve 后自动关闭 | function(close) | - |  |
 
 以上函数调用后，会返回一个引用，可以通过该引用更新和关闭弹窗。
 
@@ -117,7 +117,7 @@ browserHistory.listen(() => {
 
 ### Modal.useModal()
 
-当你需要使用 Context 时，可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](<#Modal.method()>) 相同的创建通知方法。
+当你需要使用 Context 时，可以通过 `Modal.useModal` 创建一个 `contextHolder` 插入子节点中。通过 hooks 创建的临时 Modal 将会得到 `contextHolder` 所在位置的所有上下文。创建的 `modal` 对象拥有与 [`Modal.method`](#Modal.method()) 相同的创建通知方法。
 
 ```jsx
 const [modal, contextHolder] = Modal.useModal();
@@ -166,3 +166,7 @@ return (
 ```
 
 **异同：**通过 hooks 创建的 `contextHolder` 必须插入到子元素节点中才会生效，当你不需要上下文信息时请直接调用。
+
+### 如何关闭 Modal 动画？
+
+你可以通过 `transitionName=""` 和 `maskTransitionName=""` 去除动画 CSS，但是需要注意的是。该方法为内部方法，我们不保证下个大版本重构时该属性会被保留。
diff --git a/components/notification/index.en-US.md b/components/notification/index.en-US.md
index d137cccb41..1bb945c747 100644
--- a/components/notification/index.en-US.md
+++ b/components/notification/index.en-US.md
@@ -34,18 +34,18 @@ The properties of config are as follows:
 | bottom | Distance from the bottom of the viewport, when `placement` is `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 |
 | btn | Customized close button | ReactNode | - |
 | className | Customized CSS class | string | - |
+| closeIcon | Custom close icon | ReactNode | - |
 | description | The content of notification box (required) | ReactNode | - |
 | duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |
 | getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |
 | icon | Customized icon | ReactNode | - |
-| closeIcon | Custom close icon | ReactNode | - |
 | key | The unique identifier of the Notification | string | - |
 | message | The title of notification box (required) | ReactNode | - |
-| onClose | Trigger when notification closed | function | - |
-| onClick | Specify a function that will be called when the notification is clicked | function | - |
 | placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
 | style | Customized inline style | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
 | top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 |
+| onClick | Specify a function that will be called when the notification is clicked | function | - |
+| onClose | Trigger when notification closed | function | - |
 
 `notification` also provides a global `config()` method that can be used for specifying the default options. Once this method is used, all the notification boxes will take into account these globally defined options when displaying.
 
@@ -71,8 +71,8 @@ notification.config({
 | duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |
 | getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |
 | placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
-| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 |
 | rtl | Whether to enable RTL mode | boolean | false |
+| top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 |
 
 ## FAQ
 
diff --git a/components/notification/index.zh-CN.md b/components/notification/index.zh-CN.md
index 6fab9482bc..31817a357c 100644
--- a/components/notification/index.zh-CN.md
+++ b/components/notification/index.zh-CN.md
@@ -32,8 +32,8 @@ config 参数如下：
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| btn | 自定义关闭按钮 | ReactNode | - |
 | bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |
+| btn | 自定义关闭按钮 | ReactNode | - |
 | className | 自定义 CSS class | string | - |
 | closeIcon | 自定义关闭图标 | ReactNode | - |
 | description | 通知提醒内容，必选 | ReactNode | - |
@@ -42,11 +42,11 @@ config 参数如下：
 | icon | 自定义图标 | ReactNode | - |
 | key | 当前通知唯一标志 | string | - |
 | message | 通知提醒标题，必选 | ReactNode | - |
-| onClose | 当通知关闭时触发 | function | - |
-| onClick | 点击通知时触发的回调函数 | function | - |
 | placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
 | style | 自定义内联样式 | [CSSProperties](https://github.com/DefinitelyTyped/DefinitelyTyped/blob/e434515761b36830c3e58a970abf5186f005adac/types/react/index.d.ts#L794) | - |
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |
+| onClick | 点击通知时触发的回调函数 | function | - |
+| onClose | 当通知关闭时触发 | function | - |
 
 还提供了一个全局配置方法，在调用前提前配置，全局一次生效。
 
@@ -72,8 +72,8 @@ notification.config({
 | duration | 默认自动关闭延时，单位秒 | number | 4.5 |
 | getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |
 | placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
-| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |
 | rtl | 是否开启 RTL 模式 | boolean | false |
+| top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |
 
 ## FAQ
 
diff --git a/components/notification/style/index.less b/components/notification/style/index.less
index f41c292b2f..9c0074312c 100644
--- a/components/notification/style/index.less
+++ b/components/notification/style/index.less
@@ -6,19 +6,19 @@
 @notification-width: 384px;
 @notification-padding: @notification-padding-vertical @notification-padding-horizontal;
 @notification-margin-bottom: 16px;
+@notification-margin-edge: 24px;
 
 .@{notification-prefix-cls} {
   .reset-component;
 
   position: fixed;
   z-index: @zindex-notification;
-  max-width: ~'calc(100vw - 32px)';
-  margin-right: 24px;
+  margin-right: @notification-margin-edge;
 
   &-topLeft,
   &-bottomLeft {
     margin-right: 0;
-    margin-left: 24px;
+    margin-left: @notification-margin-edge;
 
     .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
     .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
@@ -35,6 +35,7 @@
   &-notice {
     position: relative;
     width: @notification-width;
+    max-width: ~'calc(100vw - @{notification-margin-edge} * 2)';
     margin-bottom: @notification-margin-bottom;
     margin-left: auto;
     overflow: hidden;
diff --git a/components/page-header/index.en-US.md b/components/page-header/index.en-US.md
index 1b2f59b538..7cbbefbf19 100644
--- a/components/page-header/index.en-US.md
+++ b/components/page-header/index.en-US.md
@@ -17,15 +17,15 @@ PageHeader can be used to highlight the page topic, display important informatio
 
 | Param | Description | Type | Default value | Version |
 | --- | --- | --- | --- | --- |
-| title | Custom title text | ReactNode | - |  |
-| subTitle | Custom subtitle text | ReactNode | - |  |
-| ghost | PageHeader type, will change background color | boolean | true |  |
 | avatar | Avatar next to the title bar | [AvatarProps](/components/avatar/) | - |  |
 | backIcon | Custom back icon, if false the back icon will not be displayed | ReactNode \| boolean | &lt;ArrowLeft /> |  |
-| tags | Tag list next to title | [Tag](/components/tag/)[] \| [Tag](/components/tag/) | - |  |
-| extra | Operating area, at the end of the line of the title line | ReactNode | - |  |
 | breadcrumb | Breadcrumb configuration | [Breadcrumb](/components/breadcrumb/) | - |  |
+| extra | Operating area, at the end of the line of the title line | ReactNode | - |  |
 | footer | PageHeader's footer, generally used to render TabBar | ReactNode | - |  |
+| ghost | PageHeader type, will change background color | boolean | true |  |
+| subTitle | Custom subtitle text | ReactNode | - |  |
+| tags | Tag list next to title | [Tag](/components/tag/)\[] \| [Tag](/components/tag/) | - |  |
+| title | Custom title text | ReactNode | - |  |
 | onBack | Back icon click event | () => void | - |  |
 
 <style>
diff --git a/components/page-header/index.zh-CN.md b/components/page-header/index.zh-CN.md
index c6d43df4f0..b61b9cc6a7 100644
--- a/components/page-header/index.zh-CN.md
+++ b/components/page-header/index.zh-CN.md
@@ -17,15 +17,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/6bKE0Cq0R/PageHeader.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| title | 自定义标题文字 | ReactNode | - |  |
-| subTitle | 自定义的二级标题文字 | ReactNode | - |  |
-| ghost | pageHeader 的类型，将会改变背景颜色 | boolean | true |  |
 | avatar | 标题栏旁的头像 | [AvatarProps](/components/avatar/) | - |  |
 | backIcon | 自定义 back icon ，如果为 false 不渲染 back icon | ReactNode \| boolean | &lt;ArrowLeft /> |  |
-| tags | title 旁的 tag 列表 | [Tag](/components/tag/)[] \| [Tag](/components/tag/) | - |  |
-| extra | 操作区，位于 title 行的行尾 | ReactNode | - |  |
 | breadcrumb | 面包屑的配置 | [Breadcrumb](/components/breadcrumb/) | - |  |
+| extra | 操作区，位于 title 行的行尾 | ReactNode | - |  |
 | footer | PageHeader 的页脚，一般用于渲染 TabBar | ReactNode | - |  |
+| ghost | pageHeader 的类型，将会改变背景颜色 | boolean | true |  |
+| subTitle | 自定义的二级标题文字 | ReactNode | - |  |
+| tags | title 旁的 tag 列表 | [Tag](/components/tag/)\[] \| [Tag](/components/tag/) | - |  |
+| title | 自定义标题文字 | ReactNode | - |  |
 | onBack | 返回按钮的点击事件 | () => void | - |  |
 
 <style>
diff --git a/components/pagination/index.en-US.md b/components/pagination/index.en-US.md
index 7410d1cc61..e0c0416453 100644
--- a/components/pagination/index.en-US.md
+++ b/components/pagination/index.en-US.md
@@ -29,6 +29,7 @@ A long list can be divided into several pages using `Pagination`, and only one p
 | itemRender | To customize item's innerHTML | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |  |
 | pageSize | Number of data items per page | number | - |  |
 | pageSizeOptions | Specify the sizeChanger options | string\[] | \[`10`, `20`, `50`, `100`] |  |
+| responsive | If `size` is not specified, `Pagination` would resize according to the width of the window | boolean | - |  |
 | showLessItems | Show less page items | boolean | false |  |
 | showQuickJumper | Determine whether you can jump to pages directly | boolean \| { goButton: ReactNode } | false |  |
 | showSizeChanger | Determine whether to show `pageSize` select, it will be true when `total > 50` | boolean | - |  |
@@ -36,7 +37,6 @@ A long list can be divided into several pages using `Pagination`, and only one p
 | showTotal | To display the total number and range | function(total, range) | - |  |
 | simple | Whether to use simple mode | boolean | - |  |
 | size | Specify the size of `Pagination`, can be set to `small` | `default` \| `small` | `default` |  |
-| responsive | If `size` is not specified, `Pagination` would resize according to the width of the window | boolean | - |  |
 | total | Total number of data items | number | 0 |  |
 | onChange | Called when the page number is changed, and it takes the resulting page number and pageSize as its arguments | function(page, pageSize) | - |  |
 | onShowSizeChange | Called when `pageSize` is changed | function(current, size) | - |  |
diff --git a/components/pagination/index.zh-CN.md b/components/pagination/index.zh-CN.md
index 075ecccfff..fb9c05dee1 100644
--- a/components/pagination/index.zh-CN.md
+++ b/components/pagination/index.zh-CN.md
@@ -30,6 +30,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
 | itemRender | 用于自定义页码的结构，可用于优化 SEO | (page, type: 'page' \| 'prev' \| 'next', originalElement) => React.ReactNode | - |  |
 | pageSize | 每页条数 | number | - |  |
 | pageSizeOptions | 指定每页可以显示多少条 | string\[] | \[`10`, `20`, `50`, `100`] |  |
+| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - |  |
 | showLessItems | 是否显示较少页面内容 | boolean | false |  |
 | showQuickJumper | 是否可以快速跳转至某页 | boolean \| { goButton: ReactNode } | false |  |
 | showSizeChanger | 是否展示 `pageSize` 切换器，当 `total` 大于 50 时默认为 true | boolean | - |  |
@@ -37,7 +38,6 @@ cover: https://gw.alipayobjects.com/zos/alicdn/1vqv2bj68/Pagination.svg
 | showTotal | 用于显示数据总量和当前数据顺序 | function(total, range) | - |  |
 | simple | 当添加该属性时，显示为简单分页 | boolean | - |  |
 | size | 当为 `small` 时，是小尺寸分页 | `default` \| `small` | `default` |  |
-| responsive | 当 size 未指定时，根据屏幕宽度自动调整尺寸 | boolean | - |  |
 | total | 数据总数 | number | 0 |  |
 | onChange | 页码改变的回调，参数是改变后的页码及每页条数 | function(page, pageSize) | - |  |
 | onShowSizeChange | pageSize 变化的回调 | function(current, size) | - |  |
diff --git a/components/popconfirm/index.en-US.md b/components/popconfirm/index.en-US.md
index 434bbedde8..4960b6a678 100644
--- a/components/popconfirm/index.en-US.md
+++ b/components/popconfirm/index.en-US.md
@@ -17,16 +17,16 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
 
 | Param | Description | Type | Default value |
 | --- | --- | --- | --- |
+| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - |
 | cancelText | The text of the Cancel button | string | `Cancel` |
+| disabled | Whether show popconfirm when click its childrenNode | boolean | false |
+| icon | Customize icon of confirmation | ReactNode | &lt;ExclamationCircle /> |
+| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - |
 | okText | The text of the Confirm button | string | `OK` |
 | okType | Button `type` of the Confirm button | string | `primary` |
-| okButtonProps | The ok button props | [ButtonProps](/components/button/#API) | - |
-| cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#API) | - |
 | title | The title of the confirmation box | ReactNode \| () => ReactNode | - |
 | onCancel | A callback of cancel | function(e) | - |
 | onConfirm | A callback of confirmation | function(e) | - |
-| icon | Customize icon of confirmation | ReactNode | &lt;ExclamationCircle /> |
-| disabled | Whether show popconfirm when click its childrenNode | boolean | false |
 
 Consult [Tooltip's documentation](/components/tooltip/#API) to find more APIs.
 
diff --git a/components/popconfirm/index.zh-CN.md b/components/popconfirm/index.zh-CN.md
index f6331ebbf5..ae4081ae5f 100644
--- a/components/popconfirm/index.zh-CN.md
+++ b/components/popconfirm/index.zh-CN.md
@@ -18,16 +18,16 @@ cover: https://gw.alipayobjects.com/zos/alicdn/fjMCD9xRq/Popconfirm.svg
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - |
 | cancelText | 取消按钮文字 | string | `取消` |
+| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false |
+| icon | 自定义弹出气泡 Icon 图标 | ReactNode | &lt;ExclamationCircle /> |
+| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |
 | okText | 确认按钮文字 | string | `确定` |
 | okType | 确认按钮类型 | string | `primary` |
-| okButtonProps | ok 按钮 props | [ButtonProps](/components/button/#API) | - |
-| cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button/#API) | - |
 | title | 确认框的描述 | ReactNode \| () => ReactNode | - |
 | onCancel | 点击取消的回调 | function(e) | - |
 | onConfirm | 点击确认的回调 | function(e) | - |
-| icon | 自定义弹出气泡 Icon 图标 | ReactNode | &lt;ExclamationCircle /> |
-| disabled | 阻止点击 Popconfirm 子元素时弹出确认框 | boolean | false |
 
 更多属性请参考 [Tooltip](/components/tooltip/#API)。
 
diff --git a/components/popover/index.en-US.md b/components/popover/index.en-US.md
index 30e0f0719b..9ae178420e 100644
--- a/components/popover/index.en-US.md
+++ b/components/popover/index.en-US.md
@@ -15,10 +15,10 @@ Comparing with `Tooltip`, besides information `Popover` card can also provide ac
 
 ## API
 
-| Param   | Description         | Type                         | Default value | Version |
-| ------- | ------------------- | ---------------------------- | ------------- | ------- |
-| content | Content of the card | ReactNode \| () => ReactNode | -             |         |
-| title   | Title of the card   | ReactNode \| () => ReactNode | -             |         |
+| Param | Description | Type | Default value | Version |
+| --- | --- | --- | --- | --- |
+| content | Content of the card | ReactNode \| () => ReactNode | - |  |
+| title | Title of the card | ReactNode \| () => ReactNode | - |  |
 
 Consult [Tooltip's documentation](/components/tooltip/#API) to find more APIs.
 
diff --git a/components/popover/index.zh-CN.md b/components/popover/index.zh-CN.md
index 78709f7286..970bbfc6b2 100644
--- a/components/popover/index.zh-CN.md
+++ b/components/popover/index.zh-CN.md
@@ -16,10 +16,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/1PNL1p_cO/Popover.svg
 
 ## API
 
-| 参数    | 说明     | 类型                         | 默认值 | 版本 |
-| ------- | -------- | ---------------------------- | ------ | ---- |
-| content | 卡片内容 | ReactNode \| () => ReactNode | -      |      |
-| title   | 卡片标题 | ReactNode \| () => ReactNode | -      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| content | 卡片内容 | ReactNode \| () => ReactNode | - |  |
+| title | 卡片标题 | ReactNode \| () => ReactNode | - |  |
 
 更多属性请参考 [Tooltip](/components/tooltip/#API)。
 
diff --git a/components/progress/index.en-US.md b/components/progress/index.en-US.md
index d84753b782..6bf8f872f5 100644
--- a/components/progress/index.en-US.md
+++ b/components/progress/index.en-US.md
@@ -20,37 +20,37 @@ Properties that shared by all types.
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| type | To set the type, options: `line` `circle` `dashboard` | string | `line` |
 | format | The template function of the content | function(percent, successPercent) | (percent) => percent + `%` |
 | percent | To set the completion percentage | number | 0 |
 | showInfo | Whether to display the progress value and the status icon | boolean | true |
 | status | To set the status of the Progress, options: `success` `exception` `normal` `active`(line only) | string | - |
-| strokeLinecap | To set the style of the progress linecap | `round` \| `square` | `round` |
 | strokeColor | The color of progress bar | string | - |
-| trailColor | The color of unfilled part | string | - |
+| strokeLinecap | To set the style of the progress linecap | `round` \| `square` | `round` |
 | success | Configs of successfully progress bar | { percent: number, strokeColor: string } | - |
+| trailColor | The color of unfilled part | string | - |
+| type | To set the type, options: `line` `circle` `dashboard` | string | `line` |
 
 ### `type="line"`
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| strokeWidth | To set the width of the progress bar, unit: `px` | number | 10 |
-| strokeColor | The color of progress bar, render `linear-gradient` when passing an object | string \| { from: string; to: string; direction: string } | - |
 | steps | The total step count | number | - |
+| strokeColor | The color of progress bar, render `linear-gradient` when passing an object | string \| { from: string; to: string; direction: string } | - |
+| strokeWidth | To set the width of the progress bar, unit: `px` | number | 10 |
 
 ### `type="circle"`
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| width | To set the canvas width of the circular progress, unit: `px` | number | 132 |
-| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 |
 | strokeColor | The color of circular progress, render `linear-gradient` when passing an object | string \| object | - |
+| strokeWidth | To set the width of the circular progress, unit: percentage of the canvas width | number | 6 |
+| width | To set the canvas width of the circular progress, unit: `px` | number | 132 |
 
 ### `type="dashboard"`
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| width | To set the canvas width of the dashboard progress, unit: `px` | number | 132 |
-| strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 |
 | gapDegree | The gap degree of half circle, 0 ~ 295 | number | 75 |
 | gapPosition | The gap position, options: `top` `bottom` `left` `right` | string | `bottom` |
+| strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 |
+| width | To set the canvas width of the dashboard progress, unit: `px` | number | 132 |
diff --git a/components/progress/index.zh-CN.md b/components/progress/index.zh-CN.md
index 1aa993b3b3..d55417296b 100644
--- a/components/progress/index.zh-CN.md
+++ b/components/progress/index.zh-CN.md
@@ -21,37 +21,37 @@ cover: https://gw.alipayobjects.com/zos/alicdn/xqsDu4ZyR/Progress.svg
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| type | 类型，可选 `line` `circle` `dashboard` | string | `line` |
 | format | 内容的模板函数 | function(percent, successPercent) | (percent) => percent + `%` |
 | percent | 百分比 | number | 0 |
 | showInfo | 是否显示进度数值或状态图标 | boolean | true |
 | status | 状态，可选：`success` `exception` `normal` `active`(仅限 line) | string | - |
-| strokeLinecap | 进度条的样式 | `round` \| `square` | `round` |
 | strokeColor | 进度条的色彩 | string | - |
-| trailColor | 未完成的分段的颜色 | string | - |
+| strokeLinecap | 进度条的样式 | `round` \| `square` | `round` |
 | success | 成功进度条相关配置 | { percent: number, strokeColor: string } | - |
+| trailColor | 未完成的分段的颜色 | string | - |
+| type | 类型，可选 `line` `circle` `dashboard` | string | `line` |
 
 ### `type="line"`
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| strokeWidth | 进度条线的宽度，单位 px | number | 10 |
-| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | - |
 | steps | 进度条总共步数 | number | - |
+| strokeColor | 进度条的色彩，传入 object 时为渐变 | string \| { from: string; to: string; direction: string } | - |
+| strokeWidth | 进度条线的宽度，单位 px | number | 10 |
 
 ### `type="circle"`
 
-| 属性        | 说明                                             | 类型             | 默认值 |
-| ----------- | ------------------------------------------------ | ---------------- | ------ |
-| width       | 圆形进度条画布宽度，单位 px                      | number           | 132    |
-| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number           | 6      |
-| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变         | string \| object | -      |
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| strokeColor | 圆形进度条线的色彩，传入 object 时为渐变 | string \| object | - |
+| strokeWidth | 圆形进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
+| width | 圆形进度条画布宽度，单位 px | number | 132 |
 
 ### `type="dashboard"`
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| width | 仪表盘进度条画布宽度，单位 px | number | 132 |
-| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
 | gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 |
 | gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` |
+| strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 |
+| width | 仪表盘进度条画布宽度，单位 px | number | 132 |
diff --git a/components/radio/demo/badge.md b/components/radio/demo/badge.md
index 88fbfa14eb..1cfb2b9d46 100644
--- a/components/radio/demo/badge.md
+++ b/components/radio/demo/badge.md
@@ -20,15 +20,12 @@ import { Radio, Badge } from 'antd';
 ReactDOM.render(
   <Radio.Group buttonStyle="solid">
     <Badge count={1}>
-      <Radio.Button value={1}>
-        Click Me
-      </Radio.Button>
+      <Radio.Button value={1}>Click Me</Radio.Button>
     </Badge>
     <Badge count={2}>
-      <Radio.Button value={2}>
-        Not Me
-      </Radio.Button>
+      <Radio.Button value={2}>Not Me</Radio.Button>
     </Badge>
-  </Radio.Group>
-, mountNode);
+  </Radio.Group>,
+  mountNode,
+);
 ```
diff --git a/components/radio/index.en-US.md b/components/radio/index.en-US.md
index 97c3043344..81cc80ee7e 100644
--- a/components/radio/index.en-US.md
+++ b/components/radio/index.en-US.md
@@ -30,21 +30,21 @@ Radio group can wrap a group of `Radio`。
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| buttonStyle | The style type of radio button | `outline` \| `solid` | `outline` |  |
 | defaultValue | Default selected value | any | - |  |
 | disabled | Disable all radio buttons | boolean | false |  |
 | name | The `name` property of all `input[type="radio"]` children | string | - |  |
 | options | Set children optional | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | - |  |
+| optionType | Set Radio optionType | `default` \| `button` | `default` | 4.4.0 |
 | size | The size of radio button style | `large` \| `middle` \| `small` | - |  |
 | value | Used for setting the currently selected value | any | - |  |
 | onChange | The callback function that is triggered when the state changes | function(e:Event) | - |  |
-| optionType | Set Radio optionType | `default` \| `button` | `default` | 4.4.0 |
-| buttonStyle | The style type of radio button | `outline` \| `solid` | `outline` |  |
 
 ## Methods
 
 ### Radio
 
-| Name    | Description  |
-| ------- | ------------ |
-| blur()  | Remove focus |
-| focus() | Get focus    |
+| Name | Description |
+| --- | --- |
+| blur() | Remove focus |
+| focus() | Get focus |
diff --git a/components/radio/index.zh-CN.md b/components/radio/index.zh-CN.md
index 4b26b20634..82e31db6ac 100644
--- a/components/radio/index.zh-CN.md
+++ b/components/radio/index.zh-CN.md
@@ -17,35 +17,35 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8cYb5seNB/Radio.svg
 
 ### Radio/Radio.Button
 
-| 参数           | 说明                              | 类型    | 默认值 |
-| -------------- | --------------------------------- | ------- | ------ |
-| autoFocus      | 自动获取焦点                      | boolean | false  |
-| checked        | 指定当前是否选中                  | boolean | false  |
-| defaultChecked | 初始是否选中                      | boolean | false  |
-| disabled       | 禁用 Radio                        | boolean | false  |
-| value          | 根据 value 进行比较，判断是否选中 | any     | -      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| autoFocus | 自动获取焦点 | boolean | false |
+| checked | 指定当前是否选中 | boolean | false |
+| defaultChecked | 初始是否选中 | boolean | false |
+| disabled | 禁用 Radio | boolean | false |
+| value | 根据 value 进行比较，判断是否选中 | any | - |
 
 ### RadioGroup
 
 单选框组合，用于包裹一组 `Radio`。
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| defaultValue | 默认选中的值 | any | - |  |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |  |
+| --- | --- | --- | --- | --- | --- |
+| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | `outline` \| `solid` | `outline` |  |  |
+| defaultValue | 默认选中的值 | any | - |  |  |
 | disabled | 禁选所有子单选器 | boolean | false |  |  |
-| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string | - |  |
-| options | 以配置形式设置子元素 | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | - |  |
-| size | 大小，只对按钮样式生效 | `large` \| `middle` \| `small` | - |  |
-| value | 用于设置当前选中的值 | any | - |  |
-| onChange | 选项变化时的回调函数 | function(e:Event) | - |  |
-| optionType | 用于设置 Radio `options` 类型 | `default` \| `button` | `default` | 4.4.0 |
-| buttonStyle | RadioButton 的风格样式，目前有描边和填色两种风格 | `outline` \| `solid` | `outline` |  |
+| name | RadioGroup 下所有 `input[type="radio"]` 的 `name` 属性 | string | - |  |  |
+| options | 以配置形式设置子元素 | string\[] \| Array&lt;{ label: string value: string disabled?: boolean }> | - |  |  |
+| optionType | 用于设置 Radio `options` 类型 | `default` \| `button` | `default` | 4.4.0 |  |
+| size | 大小，只对按钮样式生效 | `large` \| `middle` \| `small` | - |  |  |
+| value | 用于设置当前选中的值 | any | - |  |  |
+| onChange | 选项变化时的回调函数 | function(e:Event) | - |  |  |
 
 ## 方法
 
 ### Radio
 
-| 名称    | 描述     |
-| ------- | -------- |
-| blur()  | 移除焦点 |
+| 名称 | 描述 |
+| --- | --- |
+| blur() | 移除焦点 |
 | focus() | 获取焦点 |
diff --git a/components/rate/index.en-US.md b/components/rate/index.en-US.md
index 817d8e9abe..45a9c42100 100644
--- a/components/rate/index.en-US.md
+++ b/components/rate/index.en-US.md
@@ -35,7 +35,7 @@ Rate component.
 
 ## Methods
 
-| Name    | Description  |
-| ------- | ------------ |
-| blur()  | Remove focus |
-| focus() | Get focus    |
+| Name | Description |
+| --- | --- |
+| blur() | Remove focus |
+| focus() | Get focus |
diff --git a/components/rate/index.zh-CN.md b/components/rate/index.zh-CN.md
index e203629d34..c5be4b345e 100644
--- a/components/rate/index.zh-CN.md
+++ b/components/rate/index.zh-CN.md
@@ -36,7 +36,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/R5uiIWmxe/Rate.svg
 
 ## 方法
 
-| 名称    | 描述     |
-| ------- | -------- |
-| blur()  | 移除焦点 |
+| 名称 | 描述 |
+| --- | --- |
+| blur() | 移除焦点 |
 | focus() | 获取焦点 |
diff --git a/components/result/__tests__/type.test.tsx b/components/result/__tests__/type.test.tsx
index aed3cc0a51..14d8f6d7fb 100644
--- a/components/result/__tests__/type.test.tsx
+++ b/components/result/__tests__/type.test.tsx
@@ -5,16 +5,8 @@ describe('Result.typescript', () => {
   it('status', () => {
     const result = (
       <>
-        <Result
-          status="404"
-          title="404"
-          subTitle="Sorry, the page you visited does not exist."
-        />
-        <Result
-          status={404}
-          title="404"
-          subTitle="Sorry, the page you visited does not exist."
-        />
+        <Result status="404" title="404" subTitle="Sorry, the page you visited does not exist." />
+        <Result status={404} title="404" subTitle="Sorry, the page you visited does not exist." />
       </>
     );
 
diff --git a/components/result/index.en-US.md b/components/result/index.en-US.md
index 09874df3f7..6bc28aa93d 100644
--- a/components/result/index.en-US.md
+++ b/components/result/index.en-US.md
@@ -16,8 +16,8 @@ Use when important operations need to inform the user to process the results and
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| title | The title | ReactNode | - |
-| subTitle | The subTitle | ReactNode | - |
-| status | Result status, decide icons and colors | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | `info` |
-| icon | Custom back icon | ReactNode | - |
 | extra | Operating area | ReactNode | - |
+| icon | Custom back icon | ReactNode | - |
+| status | Result status, decide icons and colors | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | `info` |
+| subTitle | The subTitle | ReactNode | - |
+| title | The title | ReactNode | - |
diff --git a/components/result/index.zh-CN.md b/components/result/index.zh-CN.md
index e82e5bed67..9c8c7cdc70 100644
--- a/components/result/index.zh-CN.md
+++ b/components/result/index.zh-CN.md
@@ -17,8 +17,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9nepwjaLa/Result.svg
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| title | title 文字 | ReactNode | - |
-| subTitle | subTitle 文字 | ReactNode | - |
-| status | 结果的状态，决定图标和颜色 | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | `info` |
-| icon | 自定义 icon | ReactNode | - |
 | extra | 操作区 | ReactNode | - |
+| icon | 自定义 icon | ReactNode | - |
+| status | 结果的状态，决定图标和颜色 | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | `info` |
+| subTitle | subTitle 文字 | ReactNode | - |
+| title | title 文字 | ReactNode | - |
diff --git a/components/select/__tests__/index.test.js b/components/select/__tests__/index.test.js
index d23139d841..d64a6a9363 100644
--- a/components/select/__tests__/index.test.js
+++ b/components/select/__tests__/index.test.js
@@ -40,24 +40,14 @@ describe('Select', () => {
   it('should support set notFoundContent to null', () => {
     const wrapper = mount(<Select mode="multiple" notFoundContent={null} />);
     toggleOpen(wrapper);
-    const dropdownWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
     expect(dropdownWrapper.find('MenuItem').length).toBe(0);
   });
 
   it('should not have default notFoundContent when mode is combobox', () => {
     const wrapper = mount(<Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} />);
     toggleOpen(wrapper);
-    const dropdownWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
     expect(dropdownWrapper.find('MenuItem').length).toBe(0);
   });
 
@@ -66,19 +56,9 @@ describe('Select', () => {
       <Select mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE} notFoundContent="not at all" />,
     );
     toggleOpen(wrapper);
-    const dropdownWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    const dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
     expect(dropdownWrapper.find('.ant-select-item-option').length).toBeFalsy();
-    expect(
-      dropdownWrapper
-        .find('.ant-select-item-empty')
-        .at(0)
-        .text(),
-    ).toBe('not at all');
+    expect(dropdownWrapper.find('.ant-select-item-empty').at(0).text()).toBe('not at all');
   });
 
   it('should be controlled by open prop', () => {
@@ -88,24 +68,14 @@ describe('Select', () => {
         <Option value="1">1</Option>
       </Select>,
     );
-    let dropdownWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    let dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
     expect(dropdownWrapper.props().visible).toBe(true);
     toggleOpen(wrapper);
     expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(false);
     expect(dropdownWrapper.props().visible).toBe(true);
 
     wrapper.setProps({ open: false });
-    dropdownWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    dropdownWrapper = mount(wrapper.find('Trigger').instance().getComponent());
     expect(dropdownWrapper.props().visible).toBe(false);
     toggleOpen(wrapper);
     expect(onDropdownVisibleChange).toHaveBeenLastCalledWith(true);
diff --git a/components/select/index.en-US.md b/components/select/index.en-US.md
index ec1e5a9234..3fcac09987 100644
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@@ -31,7 +31,7 @@ Select component to select value from options.
 | clearIcon | The custom clear icon | ReactNode | - |  |
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
 | defaultOpen | Initial open state of dropdown | boolean | - |  |
-| defaultValue | Initial selected option | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue[] | - |  |
+| defaultValue | Initial selected option | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue\[] | - |  |
 | disabled | Whether disabled select | boolean | false |  |
 | dropdownClassName | The className of dropdown menu | string | - |  |
 | 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 |  |
@@ -48,6 +48,20 @@ Select component to select value from options.
 | menuItemSelectedIcon | The custom menuItemSelected icon with multiple options | ReactNode | - |  |
 | mode | Set mode of Select | `multiple` \| `tags` | - |  |
 | notFoundContent | Specify content to show when no result matches | ReactNode | `Not Found` |  |
+| open | Controlled open state of dropdown | boolean | - |  |
+| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | `value` |  |
+| 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 | - |  |
+| removeIcon | The custom remove icon | ReactNode | - |  |
+| showArrow | Whether to show the drop-down arrow | boolean | true(for single select), false(for multiple select) |  |
+| showSearch | Whether show search input in single mode | boolean | false |  |
+| size | Size of Select input | `large` \| `middle` \| `small` | - |  |
+| suffixIcon | The custom suffix icon | ReactNode | - |  |
+| tagRender | Customize tag render | (props) => ReactNode | - |  |
+| tokenSeparators | Separator used to tokenize on `tag` and `multiple` mode | string\[] | - |  |
+| value | Current selected option | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue\[] | - |  |
+| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |
 | onBlur | Called when blur | function | - |  |
 | onChange | Called when select an option or input value change | function(value, option:Option \| Array&lt;Option>) | - |  |
 | onClear | Called when clear | function | - | 4.6.0 |
@@ -60,45 +74,31 @@ Select component to select value from options.
 | onPopupScroll | Called when dropdown scrolls | function | - |  |
 | onSearch | Callback function that is fired when input changed | function(value: string) | - |  |
 | onSelect | Called when a option is selected, the params are option's value (or key) and option instance | function(string \| number \| LabeledValue, option: Option) | - |  |
-| open | Controlled open state of dropdown | boolean | - |  |
-| options | Select options. Will get better perf than jsx definition | { label, value }[] | - |  |
-| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | `value` |  |
-| optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `children` |  |
-| placeholder | Placeholder of select | ReactNode | - |  |
-| removeIcon | The custom remove icon | ReactNode | - |  |
-| showArrow | Whether to show the drop-down arrow | boolean | true(for single select), false(for multiple select) |  |
-| showSearch | Whether show search input in single mode | boolean | false |  |
-| size | Size of Select input | `large` \| `middle` \| `small` | - |  |
-| suffixIcon | The custom suffix icon | ReactNode | - |  |
-| tagRender | Customize tag render | (props) => ReactNode | - |  |
-| tokenSeparators | Separator used to tokenize on `tag` and `multiple` mode | string\[] | - |  |
-| value | Current selected option | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue[] | - |  |
-| virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |
 
 > Note, if you find that the drop-down menu scrolls with the page, or you need to trigger Select in other popup layers, please try to use `getPopupContainer={triggerNode => triggerNode.parentElement}` to fix the drop-down popup rendering node in the parent element of the trigger .
 
 ### Select Methods
 
-| Name    | Description  | Version |
-| ------- | ------------ | ------- |
-| blur()  | Remove focus |         |
-| focus() | Get focus    |         |
+| Name | Description | Version |
+| --- | --- | --- |
+| blur() | Remove focus |  |
+| focus() | Get focus |  |
 
 ### Option props
 
-| Property  | Description                                | Type             | Default | Version |
-| --------- | ------------------------------------------ | ---------------- | ------- | ------- |
-| className | The additional class to option             | string           | -       |         |
-| disabled  | Disable this option                        | boolean          | false   |         |
-| title     | `title` of Select after select this Option | string           | -       |         |
-| value     | Default to filter with this property       | string \| number | -       |         |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| className | The additional class to option | string | - |  |
+| disabled | Disable this option | boolean | false |  |
+| title | `title` of Select after select this Option | string | - |  |
+| value | Default to filter with this property | string \| number | - |  |
 
 ### OptGroup props
 
-| Property | Description | Type                    | Default | Version |
-| -------- | ----------- | ----------------------- | ------- | ------- |
-| key      | Group key   | string                  | -       |         |
-| label    | Group label | string \| React.Element | -       |         |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| key | Group key | string | - |  |
+| label | Group label | string \| React.Element | - |  |
 
 ## FAQ
 
diff --git a/components/select/index.zh-CN.md b/components/select/index.zh-CN.md
index 14750e5d98..13bc131f32 100644
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@@ -32,7 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
 | clearIcon | 自定义的多选框清空图标 | ReactNode | - |  |
 | defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true |  |
 | defaultOpen | 是否默认展开下拉菜单 | boolean | - |  |
-| defaultValue | 指定默认选中的条目 | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue[] | - |  |
+| defaultValue | 指定默认选中的条目 | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue\[] | - |  |
 | disabled | 是否禁用 | boolean | false |  |
 | dropdownClassName | 下拉菜单的 className 属性 | string | - |  |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`，当值小于选择框宽度时会被忽略。false 时会关闭虚拟滚动 | boolean \| number | true |  |
@@ -49,6 +49,20 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
 | menuItemSelectedIcon | 自定义多选时当前选中的条目图标 | ReactNode | - |  |
 | mode | 设置 Select 的模式为多选或标签 | `multiple` \| `tags` | - |  |
 | notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | `Not Found` |  |
+| open | 是否展开下拉菜单 | boolean | - |  |
+| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` |  |
+| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value` | string | `children` |  |
+| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }\[] | - |  |
+| placeholder | 选择框默认文字 | string | - |  |
+| removeIcon | 自定义的多选框清除图标 | ReactNode | - |  |
+| showArrow | 是否显示下拉小箭头 | boolean | 单选为 true，多选为 false |  |
+| showSearch | 使单选模式可搜索 | boolean | false |  |
+| size | 选择框大小 | `large` \| `middle` \| `small` | - |  |
+| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
+| tagRender | 自定义 tag 内容 render | (props) => ReactNode | - |  |
+| tokenSeparators | 在 `tags` 和 `multiple` 模式下自动分词的分隔符 | string\[] | - |  |
+| value | 指定当前选中的条目 | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue\[] | - |  |
+| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
 | onBlur | 失去焦点时回调 | function | - |  |
 | onChange | 选中 option，或 input 的 value 变化时，调用此函数 | function(value, option:Option \| Array&lt;Option>) | - |  |
 | onClear | 清除内容时回调 | function | - | 4.6.0 |
@@ -61,45 +75,31 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_0XzgOis7/Select.svg
 | onPopupScroll | 下拉列表滚动时的回调 | function | - |  |
 | onSearch | 文本框值变化时回调 | function(value: string) | - |  |
 | onSelect | 被选中时调用，参数为选中项的 value (或 key) 值 | function(string \| number \| LabeledValue, option: Option) | - |  |
-| open | 是否展开下拉菜单 | boolean | - |  |
-| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - |  |
-| optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` |  |
-| optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value` | string | `children` |  |
-| placeholder | 选择框默认文字 | string | - |  |
-| removeIcon | 自定义的多选框清除图标 | ReactNode | - |  |
-| showArrow | 是否显示下拉小箭头 | boolean | 单选为 true，多选为 false |  |
-| showSearch | 使单选模式可搜索 | boolean | false |  |
-| size | 选择框大小 | `large` \| `middle` \| `small` | - |  |
-| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
-| tagRender | 自定义 tag 内容 render | (props) => ReactNode | - |  |
-| tokenSeparators | 在 `tags` 和 `multiple` 模式下自动分词的分隔符 | string\[] | - |  |
-| value | 指定当前选中的条目 | string \| string\[]<br />number \| number\[]<br />LabeledValue \| LabeledValue[] | - |  |
-| virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
 
 > 注意，如果发现下拉菜单跟随页面滚动，或者需要在其他弹层中触发 Select，请尝试使用 `getPopupContainer={triggerNode => triggerNode.parentElement}` 将下拉弹层渲染节点固定在触发器的父元素中。
 
 ### Select Methods
 
-| 名称    | 说明     | 版本 |
-| ------- | -------- | ---- |
-| blur()  | 取消焦点 |      |
-| focus() | 获取焦点 |      |
+| 名称 | 说明 | 版本 |
+| --- | --- | --- |
+| blur() | 取消焦点 |  |
+| focus() | 获取焦点 |  |
 
 ### Option props
 
-| 参数      | 说明                              | 类型             | 默认值 | 版本 |
-| --------- | --------------------------------- | ---------------- | ------ | ---- |
-| className | Option 器类名                     | string           | -      |      |
-| disabled  | 是否禁用                          | boolean          | false  |      |
-| title     | 选中该 Option 后，Select 的 title | string           | -      |      |
-| value     | 默认根据此属性值进行筛选          | string \| number | -      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| className | Option 器类名 | string | - |  |
+| disabled | 是否禁用 | boolean | false |  |
+| title | 选中该 Option 后，Select 的 title | string | - |  |
+| value | 默认根据此属性值进行筛选 | string \| number | - |  |
 
 ### OptGroup props
 
-| 参数  | 说明 | 类型                    | 默认值 | 版本 |
-| ----- | ---- | ----------------------- | ------ | ---- |
-| key   | Key  | string                  | -      |      |
-| label | 组名 | string \| React.Element | -      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| key | Key | string | - |  |
+| label | 组名 | string \| React.Element | - |  |
 
 ## FAQ
 
diff --git a/components/skeleton/Paragraph.tsx b/components/skeleton/Paragraph.tsx
index 0948b62711..7ba690bc60 100644
--- a/components/skeleton/Paragraph.tsx
+++ b/components/skeleton/Paragraph.tsx
@@ -26,7 +26,7 @@ const Paragraph = (props: SkeletonParagraphProps) => {
   const { prefixCls, className, style, rows } = props;
   const rowList = [...Array(rows)].map((_, index) => (
     // eslint-disable-next-line react/no-array-index-key
-    <li key={index} style={{ width: getWidth(index) }}/>
+    <li key={index} style={{ width: getWidth(index) }} />
   ));
   return (
     <ul className={classNames(prefixCls, className)} style={style}>
diff --git a/components/skeleton/index.en-US.md b/components/skeleton/index.en-US.md
index 87f4963820..4507aa96fb 100644
--- a/components/skeleton/index.en-US.md
+++ b/components/skeleton/index.en-US.md
@@ -25,41 +25,41 @@ Provide a placeholder while you wait for content to load, or to visualise conten
 | avatar | Show avatar placeholder | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
 | loading | Display the skeleton when true | boolean | - |
 | paragraph | Show paragraph placeholder | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
-| title | Show title placeholder | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
 | round | Show paragraph and title radius when true | boolean | false |
+| title | Show title placeholder | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
 
 ### SkeletonAvatarProps
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | active | Show animation effect, only valid when used avatar independently | boolean | false |
-| size | Set the size of avatar | number \| `large` \| `small` \| `default` | - |
 | shape | Set the shape of avatar | `circle` \| `square` | - |
+| size | Set the size of avatar | number \| `large` \| `small` \| `default` | - |
 
 ### SkeletonTitleProps
 
-| Property | Description            | Type             | Default |
-| -------- | ---------------------- | ---------------- | ------- |
-| width    | Set the width of title | number \| string | -       |
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| width | Set the width of title | number \| string | - |
 
 ### SkeletonParagraphProps
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | rows | Set the row count of paragraph | number | - |
-| width | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number \| string \| Array<number \| string> | - |
+| width | Set the width of paragraph. When width is an Array, it can set the width of each row. Otherwise only set the last row width | number \| string \| Array&lt;number \| string> | - |
 
 ### SkeletonButtonProps
 
-| Property | Description             | Type                             | Default |
-| -------- | ----------------------- | -------------------------------- | ------- |
-| active   | Show animation effect   | boolean                          | false   |
-| size     | Set the size of button  | `large` \| `small` \| `default`  | -       |
-| shape    | Set the shape of button | `circle` \| `round` \| `default` | -       |
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| active | Show animation effect | boolean | false |
+| shape | Set the shape of button | `circle` \| `round` \| `default` | - |
+| size | Set the size of button | `large` \| `small` \| `default` | - |
 
 ### SkeletonInputProps
 
-| Property | Description           | Type                            | Default |
-| -------- | --------------------- | ------------------------------- | ------- |
-| active   | Show animation effect | boolean                         | false   |
-| size     | Set the size of input | `large` \| `small` \| `default` | -       |
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| active | Show animation effect | boolean | false |
+| size | Set the size of input | `large` \| `small` \| `default` | - |
diff --git a/components/skeleton/index.zh-CN.md b/components/skeleton/index.zh-CN.md
index 1971781985..1e580da146 100644
--- a/components/skeleton/index.zh-CN.md
+++ b/components/skeleton/index.zh-CN.md
@@ -26,41 +26,41 @@ cover: https://gw.alipayobjects.com/zos/alicdn/KpcciCJgv/Skeleton.svg
 | avatar | 是否显示头像占位图 | boolean \| [SkeletonAvatarProps](#SkeletonAvatarProps) | false |
 | loading | 为 true 时，显示占位图。反之则直接展示子组件 | boolean | - |
 | paragraph | 是否显示段落占位图 | boolean \| [SkeletonParagraphProps](#SkeletonParagraphProps) | true |
-| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
 | round | 为 true 时，段落和标题显示圆角 | boolean | false |
+| title | 是否显示标题占位图 | boolean \| [SkeletonTitleProps](#SkeletonTitleProps) | true |
 
 ### SkeletonAvatarProps
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | active | 是否展示动画效果，仅在单独使用头像骨架时生效 | boolean | false |
-| size | 设置头像占位图的大小 | number \| `large` \| `small` \| `default` | - |
 | shape | 指定头像的形状 | `circle` \| `square` | - |
+| size | 设置头像占位图的大小 | number \| `large` \| `small` \| `default` | - |
 
 ### SkeletonTitleProps
 
-| 属性  | 说明                 | 类型             | 默认值 |
-| ----- | -------------------- | ---------------- | ------ |
-| width | 设置标题占位图的宽度 | number \| string | -      |
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| width | 设置标题占位图的宽度 | number \| string | - |
 
 ### SkeletonParagraphProps
 
 | 属性 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | rows | 设置段落占位图的行数 | number | - |
-| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array<number \| string> | - |
+| width | 设置段落占位图的宽度，若为数组时则为对应的每行宽度，反之则是最后一行的宽度 | number \| string \| Array&lt;number \| string> | - |
 
 ### SkeletonButtonProps
 
-| 属性   | 说明             | 类型                             | 默认值 |
-| ------ | ---------------- | -------------------------------- | ------ |
-| active | 是否展示动画效果 | boolean                          | false  |
-| size   | 设置按钮的大小   | `large` \| `small` \| `default`  | -      |
-| shape  | 指定按钮的形状   | `circle` \| `round` \| `default` | -      |
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| active | 是否展示动画效果 | boolean | false |
+| shape | 指定按钮的形状 | `circle` \| `round` \| `default` | - |
+| size | 设置按钮的大小 | `large` \| `small` \| `default` | - |
 
 ### SkeletonInputProps
 
-| 属性   | 说明             | 类型                            | 默认值 |
-| ------ | ---------------- | ------------------------------- | ------ |
-| active | 是否展示动画效果 | boolean                         | false  |
-| size   | 设置输入框的大小 | `large` \| `small` \| `default` | -      |
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| active | 是否展示动画效果 | boolean | false |
+| size | 设置输入框的大小 | `large` \| `small` \| `default` | - |
diff --git a/components/slider/SliderTooltip.tsx b/components/slider/SliderTooltip.tsx
index 4a5fda46a8..3f806ff78a 100644
--- a/components/slider/SliderTooltip.tsx
+++ b/components/slider/SliderTooltip.tsx
@@ -1,25 +1,6 @@
 import * as React from 'react';
 import Tooltip, { TooltipProps } from '../tooltip';
-
-function useCombinedRefs(
-  ...refs: Array<React.MutableRefObject<unknown> | ((instance: unknown) => void) | null>
-) {
-  const targetRef = React.useRef();
-
-  React.useEffect(() => {
-    refs.forEach(ref => {
-      if (!ref) return;
-
-      if (typeof ref === 'function') {
-        ref(targetRef.current);
-      } else {
-        ref.current = targetRef.current;
-      }
-    });
-  }, [refs]);
-
-  return targetRef;
-}
+import useCombinedRefs from '../_util/hooks/useCombinedRefs';
 
 const SliderTooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
   const { visible } = props;
diff --git a/components/slider/index.en-US.md b/components/slider/index.en-US.md
index 5b131d03d1..8c3423ac26 100644
--- a/components/slider/index.en-US.md
+++ b/components/slider/index.en-US.md
@@ -19,6 +19,7 @@ To input a value in a range.
 | defaultValue | The default value of slider. When `range` is false, use number, otherwise, use \[number, number] | number \| \[number, number] | 0 \| \[0, 0] |  |
 | disabled | If true, the slider will not be interactable | boolean | false |  |
 | dots | Whether the thumb can drag over tick only | boolean | false |  |
+| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body | (triggerNode) => HTMLElement | () => document.body |  |
 | included | Make effect when `marks` not null, true means containment and false means coordinative | boolean | true |  |
 | marks | Tick mark of Slider, type of key must be `number`, and must in closed interval \[min, max], each mark can declare its own style | object | { number: ReactNode } \| { number: { style: object, label: ReactNode } } |  |
 | max | The maximum value the slider can slide to | number | 100 |  |
@@ -27,17 +28,16 @@ To input a value in a range.
 | reverse | Reverse the component | boolean | false |  |
 | step | The granularity the slider can step through values. Must greater than 0, and be divided by (max - min) . When `marks` no null, `step` can be null | number \| null | 1 |  |
 | tipFormatter | Slider will pass its value to `tipFormatter`, and display its value in Tooltip, and hide Tooltip when return value is null | value => ReactNode \| null | IDENTITY |  |
-| value | The value of slider. When `range` is false, use number, otherwise, use \[number, number] | number \| \[number, number] | - |
+| tooltipPlacement | Set Tooltip display position. Ref [Tooltip](/components/tooltip/) | string | - |  |
+| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering | boolean | - |  |
+| value | The value of slider. When `range` is false, use number, otherwise, use \[number, number] | number \| \[number, number] | - |  |
 | vertical | If true, the slider will be vertical | boolean | false |  |
 | onAfterChange | Fire when onmouseup is fired | (value) => void | - |  |
 | onChange | Callback function that is fired when the user changes the slider's value | (value) => void | - |  |
-| tooltipPlacement | Set Tooltip display position. Ref [Tooltip](/components/tooltip/) | string | - |  |
-| tooltipVisible | If true, Tooltip will show always, or it will not show anyway, even if dragging or hovering | boolean | - |  |
-| getTooltipPopupContainer | The DOM container of the Tooltip, the default behavior is to create a div element in body | (triggerNode) => HTMLElement | () => document.body |  |
 
 ## Methods
 
-| Name    | Description  | Version |
-| ------- | ------------ | ------- |
-| blur()  | Remove focus |         |
-| focus() | Get focus    |         |
+| Name | Description | Version |
+| --- | --- | --- |
+| blur() | Remove focus |  |
+| focus() | Get focus |  |
diff --git a/components/slider/index.zh-CN.md b/components/slider/index.zh-CN.md
index 03827f1ce5..377396b7e1 100644
--- a/components/slider/index.zh-CN.md
+++ b/components/slider/index.zh-CN.md
@@ -20,6 +20,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
 | defaultValue | 设置初始取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | 0 \| \[0, 0] |  |
 | disabled | 值为 true 时，滑块为禁用状态 | boolean | false |  |
 | dots | 是否只能拖拽到刻度上 | boolean | false |  |
+| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body |  |
 | included | `marks` 不为空对象时有效，值为 true 时表示值为包含关系，false 表示并列 | boolean | true |  |
 | marks | 刻度标记，key 的类型必须为 `number` 且取值在闭区间 \[min, max] 内，每个标签可以单独设置样式 | object | { number: ReactNode } or { number: { style: object, label: ReactNode } } |  |
 | max | 最大值 | number | 100 |  |
@@ -28,17 +29,16 @@ cover: https://gw.alipayobjects.com/zos/alicdn/HZ3meFc6W/Silder.svg
 | reverse | 反向坐标轴 | boolean | false |  |
 | step | 步长，取值必须大于 0，并且可被 (max - min) 整除。当 `marks` 不为空对象时，可以设置 `step` 为 null，此时 Slider 的可选值仅有 marks 标出来的部分 | number \| null | 1 |  |
 | tipFormatter | Slider 会把当前值传给 `tipFormatter`，并在 Tooltip 中显示 `tipFormatter` 的返回值，若为 null，则隐藏 Tooltip | value => ReactNode \| null | IDENTITY |  |
+| tooltipPlacement | 设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/) | string | - |  |
+| tooltipVisible | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - |  |
 | value | 设置当前取值。当 `range` 为 false 时，使用 number，否则用 \[number, number] | number \| \[number, number] | - |  |
 | vertical | 值为 true 时，Slider 为垂直方向 | boolean | false |  |
 | onAfterChange | 与 `onmouseup` 触发时机一致，把当前值作为参数传入 | (value) => void | - |  |
 | onChange | 当 Slider 的值发生改变时，会触发 onChange 事件，并把改变后的值作为参数传入 | (value) => void | - |  |
-| tooltipPlacement | 设置 Tooltip 展示位置。参考 [Tooltip](/components/tooltip/) | string | - |  |
-| tooltipVisible | 值为 true 时，Tooltip 将会始终显示；否则始终不显示，哪怕在拖拽及移入时 | boolean | - |  |
-| getTooltipPopupContainer | Tooltip 渲染父节点，默认渲染到 body 上 | (triggerNode) => HTMLElement | () => document.body |  |
 
 ## 方法
 
-| 名称    | 描述     | 版本 |
-| ------- | -------- | ---- |
-| blur()  | 移除焦点 |      |
-| focus() | 获取焦点 |      |
+| 名称 | 描述 | 版本 |
+| --- | --- | --- |
+| blur() | 移除焦点 |  |
+| focus() | 获取焦点 |  |
diff --git a/components/space/index.en-US.md b/components/space/index.en-US.md
index 27e3d1e49a..510602a0ca 100644
--- a/components/space/index.en-US.md
+++ b/components/space/index.en-US.md
@@ -18,5 +18,5 @@ Avoid components clinging together and set a unified space.
 | --- | --- | --- | --- | --- |
 | align | Align items | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
 | direction | The space direction | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
-| size | The space size | `small` \| `middle` \| `large` \| `number` | `small` | 4.1.0 |
+| size | The space size | `small` \| `middle` \| `large` \| number | `small` | 4.1.0 |
 | split | Set split | ReactNode | - | 4.7.0 |
diff --git a/components/space/index.zh-CN.md b/components/space/index.zh-CN.md
index fd6f888cff..d9b08cb69a 100644
--- a/components/space/index.zh-CN.md
+++ b/components/space/index.zh-CN.md
@@ -18,9 +18,9 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/wc6%263gJ0Y8/Space.svg
 
 ## API
 
-| 参数      | 说明     | 类型                                       | 默认值       | 版本  |
-| --------- | -------- | ------------------------------------------ | ------------ | ----- |
-| align     | 对齐方式 | `start` \| `end` \|`center` \|`baseline`   | -            | 4.2.0 |
-| direction | 间距方向 | `vertical` \| `horizontal`                 | `horizontal` | 4.1.0 |
-| size      | 间距大小 | `small` \| `middle` \| `large` \| `number` | `small`      | 4.1.0 |
-| split     | 设置拆分 | ReactNode                                  | -            | 4.7.0 |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| align | 对齐方式 | `start` \| `end` \|`center` \|`baseline` | - | 4.2.0 |
+| direction | 间距方向 | `vertical` \| `horizontal` | `horizontal` | 4.1.0 |
+| size | 间距大小 | `small` \| `middle` \| `large` \| number | `small` | 4.1.0 |
+| split | 设置拆分 | ReactNode | - | 4.7.0 |
diff --git a/components/spin/__tests__/delay.test.js b/components/spin/__tests__/delay.test.js
index 0f23199ae0..bdeb570433 100644
--- a/components/spin/__tests__/delay.test.js
+++ b/components/spin/__tests__/delay.test.js
@@ -5,35 +5,20 @@ import Spin from '..';
 describe('delay spinning', () => {
   it("should render with delay when it's mounted with spinning=true and delay", () => {
     const wrapper = mount(<Spin spinning delay={500} />);
-    expect(
-      wrapper
-        .find('.ant-spin')
-        .at(0)
-        .hasClass('ant-spin-spinning'),
-    ).toEqual(false);
+    expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(false);
   });
 
   it('should render when delay is init set', async () => {
     const wrapper = mount(<Spin spinning delay={100} />);
 
-    expect(
-      wrapper
-        .find('.ant-spin')
-        .at(0)
-        .hasClass('ant-spin-spinning'),
-    ).toEqual(false);
+    expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(false);
 
     // use await not jest.runAllTimers()
     // because of https://github.com/facebook/jest/issues/3465
     await new Promise(resolve => setTimeout(resolve, 500));
     wrapper.update();
 
-    expect(
-      wrapper
-        .find('.ant-spin')
-        .at(0)
-        .hasClass('ant-spin-spinning'),
-    ).toEqual(true);
+    expect(wrapper.find('.ant-spin').at(0).hasClass('ant-spin-spinning')).toEqual(true);
   });
 
   it('should cancel debounce function when unmount', async () => {
diff --git a/components/spin/__tests__/index.test.js b/components/spin/__tests__/index.test.js
index 4120d2abbd..fbab47323b 100644
--- a/components/spin/__tests__/index.test.js
+++ b/components/spin/__tests__/index.test.js
@@ -14,18 +14,8 @@ describe('Spin', () => {
         <div>content</div>
       </Spin>,
     );
-    expect(
-      wrapper
-        .find('.ant-spin-nested-loading')
-        .at(0)
-        .prop('style'),
-    ).toBeFalsy();
-    expect(
-      wrapper
-        .find('.ant-spin')
-        .at(0)
-        .prop('style').background,
-    ).toBe('red');
+    expect(wrapper.find('.ant-spin-nested-loading').at(0).prop('style')).toBeFalsy();
+    expect(wrapper.find('.ant-spin').at(0).prop('style').background).toBe('red');
   });
 
   it("should render custom indicator when it's set", () => {
diff --git a/components/spin/index.zh-CN.md b/components/spin/index.zh-CN.md
index 99b46c8536..eed77c70e3 100644
--- a/components/spin/index.zh-CN.md
+++ b/components/spin/index.zh-CN.md
@@ -14,14 +14,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/LBcJqCPRv/Spin.svg
 
 ## API
 
-| 参数             | 说明                                         | 类型          | 默认值    |
-| ---------------- | -------------------------------------------- | ------------- | --------- |
-| delay            | 延迟显示加载效果的时间（防止闪烁）           | number (毫秒) | -         |
-| indicator        | 加载指示符                                   | ReactNode     | -         |
-| size             | 组件大小，可选值为 `small` `default` `large` | string        | `default` |
-| spinning         | 是否为加载中状态                             | boolean       | true      |
-| tip              | 当作为包裹元素时，可以自定义描述文案         | string        | -         |
-| wrapperClassName | 包装器的类属性                               | string        | -         |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| delay | 延迟显示加载效果的时间（防止闪烁） | number (毫秒) | - |
+| indicator | 加载指示符 | ReactNode | - |
+| size | 组件大小，可选值为 `small` `default` `large` | string | `default` |
+| spinning | 是否为加载中状态 | boolean | true |
+| tip | 当作为包裹元素时，可以自定义描述文案 | string | - |
+| wrapperClassName | 包装器的类属性 | string | - |
 
 ### 静态方法
 
diff --git a/components/statistic/__tests__/index.test.js b/components/statistic/__tests__/index.test.js
index 406786d626..cc7a106714 100644
--- a/components/statistic/__tests__/index.test.js
+++ b/components/statistic/__tests__/index.test.js
@@ -95,7 +95,9 @@ describe('Statistic', () => {
     it('responses hover events for Countdown', () => {
       const onMouseEnter = jest.fn();
       const onMouseLeave = jest.fn();
-      const wrapper = mount(<Statistic.Countdown onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />);
+      const wrapper = mount(
+        <Statistic.Countdown onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} />,
+      );
       wrapper.simulate('mouseenter');
       expect(onMouseEnter).toHaveBeenCalled();
       wrapper.simulate('mouseleave');
diff --git a/components/statistic/index.en-US.md b/components/statistic/index.en-US.md
index aed663198c..4377d8ec99 100644
--- a/components/statistic/index.en-US.md
+++ b/components/statistic/index.en-US.md
@@ -16,26 +16,26 @@ Display statistic number.
 
 #### Statistic
 
-| Property         | Description                   | Type                 | Default | Version |
-| ---------------- | ----------------------------- | -------------------- | ------- | ------- |
-| decimalSeparator | The decimal separator         | string               | `.`     |         |
-| formatter        | Customize value display logic | (value) => ReactNode | -       |         |
-| groupSeparator   | Group separator               | string               | `,`     |         |
-| precision        | The precision of input value  | number               | -       |         |
-| prefix           | The prefix node of value      | ReactNode            | -       |         |
-| suffix           | The suffix node of value      | ReactNode            | -       |         |
-| title            | Display title                 | ReactNode            | -       |         |
-| value            | Display value                 | string \| number     | -       |         |
-| valueStyle       | Set value css style           | CSSProperties        | -       |         |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| decimalSeparator | The decimal separator | string | `.` |  |
+| formatter | Customize value display logic | (value) => ReactNode | - |  |
+| groupSeparator | Group separator | string | `,` |  |
+| precision | The precision of input value | number | - |  |
+| prefix | The prefix node of value | ReactNode | - |  |
+| suffix | The suffix node of value | ReactNode | - |  |
+| title | Display title | ReactNode | - |  |
+| value | Display value | string \| number | - |  |
+| valueStyle | Set value css style | CSSProperties | - |  |
 
 #### Statistic.Countdown
 
-| Property   | Description                              | Type             | Default    | Version |
-| ---------- | ---------------------------------------- | ---------------- | ---------- | ------- |
-| format     | Format as [moment](http://momentjs.com/) | string           | `HH:mm:ss` |         |
-| onFinish   | Trigger when time's up                   | () => void       | -          |         |
-| prefix     | The prefix node of value                 | ReactNode        | -          |         |
-| suffix     | The suffix node of value                 | ReactNode        | -          |         |
-| title      | Display title                            | ReactNode        | -          |         |
-| value      | Set target countdown time                | number \| moment | -          |         |
-| valueStyle | Set value css style                      | CSSProperties    | -          |         |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| format | Format as [moment](http://momentjs.com/) | string | `HH:mm:ss` |  |
+| prefix | The prefix node of value | ReactNode | - |  |
+| suffix | The suffix node of value | ReactNode | - |  |
+| title | Display title | ReactNode | - |  |
+| value | Set target countdown time | number \| moment | - |  |
+| valueStyle | Set value css style | CSSProperties | - |  |
+| onFinish | Trigger when time's up | () => void | - |  |
diff --git a/components/statistic/index.zh-CN.md b/components/statistic/index.zh-CN.md
index d7ca5316c3..f93bc0a023 100644
--- a/components/statistic/index.zh-CN.md
+++ b/components/statistic/index.zh-CN.md
@@ -17,26 +17,26 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/rcBNhLBrKbE/Statistic.svg
 
 #### Statistic
 
-| 参数             | 说明             | 类型                 | 默认值 | 版本 |
-| ---------------- | ---------------- | -------------------- | ------ | ---- |
-| decimalSeparator | 设置小数点       | string               | `.`    |      |
-| formatter        | 自定义数值展示   | (value) => ReactNode | -      |      |
-| groupSeparator   | 设置千分位标识符 | string               | `,`    |      |
-| precision        | 数值精度         | number               | -      |      |
-| prefix           | 设置数值的前缀   | ReactNode            | -      |      |
-| suffix           | 设置数值的后缀   | ReactNode            | -      |      |
-| title            | 数值的标题       | ReactNode            | -      |      |
-| value            | 数值内容         | string \| number     | -      |      |
-| valueStyle       | 设置数值的样式   | CSSProperties        | -      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| decimalSeparator | 设置小数点 | string | `.` |  |
+| formatter | 自定义数值展示 | (value) => ReactNode | - |  |
+| groupSeparator | 设置千分位标识符 | string | `,` |  |
+| precision | 数值精度 | number | - |  |
+| prefix | 设置数值的前缀 | ReactNode | - |  |
+| suffix | 设置数值的后缀 | ReactNode | - |  |
+| title | 数值的标题 | ReactNode | - |  |
+| value | 数值内容 | string \| number | - |  |
+| valueStyle | 设置数值的样式 | CSSProperties | - |  |
 
 #### Statistic.Countdown
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | format | 格式化倒计时展示，参考 [moment](http://momentjs.com/) | string | `HH:mm:ss` |  |
-| onFinish | 倒计时完成时触发 | () => void | - |  |
 | prefix | 设置数值的前缀 | ReactNode | - |  |
 | suffix | 设置数值的后缀 | ReactNode | - |  |
 | title | 数值的标题 | ReactNode | - |  |
 | value | 数值内容 | number \| moment | - |  |
 | valueStyle | 设置数值的样式 | CSSProperties | - |  |
+| onFinish | 倒计时完成时触发 | () => void | - |  |
diff --git a/components/steps/index.en-US.md b/components/steps/index.en-US.md
index c1f76b5bd1..f96beeac5d 100644
--- a/components/steps/index.en-US.md
+++ b/components/steps/index.en-US.md
@@ -29,16 +29,16 @@ The whole of the step bar.
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | className | Additional class to Steps | string | - |  |
-| type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` |  |
 | current | To set the current step, counting from 0. You can overwrite this state by using `status` of `Step` | number | 0 |  |
 | direction | To specify the direction of the step bar, `horizontal` or `vertical` | string | `horizontal` |  |
+| initial | Set the initial step, counting from 0 | number | 0 |  |
 | labelPlacement | Place title and description with `horizontal` or `vertical` direction | string | `horizontal` |  |
+| percent | Progress circle percentage of current step in `process` status (only works on basic Steps) | number | - | 4.5.0 |
 | progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be `vertical` | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false |  |
 | size | To specify the size of the step bar, `default` and `small` are currently supported | string | `default` |  |
 | status | To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error` | string | `process` |  |
-| initial | Set the initial step, counting from 0 | number | 0 |  |
+| type | Type of steps, can be set to one of the following values: `default`, `navigation` | string | `default` |  |
 | onChange | Trigger when Step is changed | (current) => void | - |  |
-| percent | Progress circle percentage of current step in `process` status (only works on basic Steps) | number | - | 4.5.0 |
 
 ### Steps.Step
 
@@ -47,8 +47,8 @@ A single step in the step bar.
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | description | Description of the step, optional property | ReactNode | - |  |
+| disabled | Disable click | boolean | false |  |
 | icon | Icon of the step, optional property | ReactNode | - |  |
 | status | To specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error` | string | `wait` |  |
-| title | Title of the step | ReactNode | - |  |
 | subTitle | Subtitle of the step | ReactNode | - |  |
-| disabled | Disable click | boolean | false |  |
+| title | Title of the step | ReactNode | - |  |
diff --git a/components/steps/index.zh-CN.md b/components/steps/index.zh-CN.md
index f49aaa1376..956d302530 100644
--- a/components/steps/index.zh-CN.md
+++ b/components/steps/index.zh-CN.md
@@ -30,16 +30,16 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | className | 步骤条类名 | string | - |  |
-| type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` |  |
 | current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | number | 0 |  |
 | direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | string | `horizontal` |  |
+| initial | 起始序号，从 0 开始记数 | number | 0 |  |
 | labelPlacement | 指定标签放置位置，默认水平放图标右侧，可选 `vertical` 放图标下方 | string | `horizontal` |  |
+| percent | 当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效） | number | - | 4.5.0 |
 | progressDot | 点状步骤条，可以设置为一个 function，labelPlacement 将强制为 `vertical` | boolean \| (iconDot, {index, status, title, description}) => ReactNode | false |  |
 | size | 指定大小，目前支持普通（`default`）和迷你（`small`） | string | `default` |  |
 | status | 指定当前步骤的状态，可选 `wait` `process` `finish` `error` | string | `process` |  |
-| initial | 起始序号，从 0 开始记数 | number | 0 |  |
+| type | 步骤条类型，有 `default` 和 `navigation` 两种 | string | `default` |  |
 | onChange | 点击切换步骤时触发 | (current) => void | - |  |
-| percent | 当前 `process` 步骤显示的进度条进度（只对基本类型的 Steps 生效） | number | - | 4.5.0 |
 
 ### Steps.Step
 
@@ -48,8 +48,8 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/UZYqMizXHaj/Steps.svg
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | description | 步骤的详情描述，可选 | ReactNode | - |  |
+| disabled | 禁用点击 | boolean | false |  |
 | icon | 步骤图标的类型，可选 | ReactNode | - |  |
 | status | 指定状态。当不配置该属性时，会使用 Steps 的 `current` 来自动指定状态。可选：`wait` `process` `finish` `error` | string | `wait` |  |
-| title | 标题 | ReactNode | - |  |
 | subTitle | 子标题 | ReactNode | - |  |
-| disabled | 禁用点击 | boolean | false |  |
+| title | 标题 | ReactNode | - |  |
diff --git a/components/style/mixins/customize.less b/components/style/mixins/customize.less
index f3a91e8743..e393c8ca30 100644
--- a/components/style/mixins/customize.less
+++ b/components/style/mixins/customize.less
@@ -1,6 +1,8 @@
 // customize dark components background in popover containers(like Modal, Drawer, Card, Popover, Popconfirm, Notification, ...)
 // for dark theme
-.popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix) when (@theme = dark) {
+.popover-customize-bg(@containerClass, @background: @popover-background, @prefix: @ant-prefix)
+  when
+  (@theme = dark) {
   @picker-prefix-cls: ~'@{prefix}-picker';
   @slider-prefix-cls: ~'@{prefix}-slider';
   @anchor-prefix-cls: ~'@{prefix}-anchor';
@@ -18,7 +20,12 @@
   @popover-border: @border-width-base @border-style-base @popover-customize-border-color;
 
   .@{containerClass} {
-    .@{picker-prefix-cls}-clear, .@{slider-prefix-cls}-handle, .@{anchor-prefix-cls}-wrapper, .@{collapse-prefix-cls}-content, .@{timeline-prefix-cls}-item-head, .@{card-prefix-cls} {
+    .@{picker-prefix-cls}-clear,
+    .@{slider-prefix-cls}-handle,
+    .@{anchor-prefix-cls}-wrapper,
+    .@{collapse-prefix-cls}-content,
+    .@{timeline-prefix-cls}-item-head,
+    .@{card-prefix-cls} {
       background-color: @background;
     }
 
@@ -77,7 +84,8 @@
         > tr {
           > td {
             border-bottom: @popover-border;
-            &.@{table-prefix-cls}-cell-fix-left, &.@{table-prefix-cls}-cell-fix-right {
+            &.@{table-prefix-cls}-cell-fix-left,
+            &.@{table-prefix-cls}-cell-fix-right {
               background-color: @background;
             }
           }
diff --git a/components/switch/index.en-US.md b/components/switch/index.en-US.md
index 08884739ab..1014eb7fb0 100644
--- a/components/switch/index.en-US.md
+++ b/components/switch/index.en-US.md
@@ -19,6 +19,7 @@ Switching Selector.
 | autoFocus | Whether get focus when component mounted | boolean | false |
 | checked | Determine whether the Switch is checked | boolean | false |
 | checkedChildren | The content to be shown when the state is checked | ReactNode | - |
+| className | The additional class to Switch | string | - |
 | defaultChecked | Whether to set the initial state | boolean | false |
 | disabled | Disable switch | boolean | false |
 | loading | Loading state of switch | boolean | false |
@@ -26,11 +27,10 @@ Switching Selector.
 | unCheckedChildren | The content to be shown when the state is unchecked | ReactNode | - |
 | onChange | Trigger when the checked state is changing | function(checked: boolean, event: Event) | - |
 | onClick | Trigger when clicked | function(checked: boolean, event: Event) | - |
-| className | The additional class to Switch | string | - |
 
 ## Methods
 
-| Name    | Description  |
-| ------- | ------------ |
-| blur()  | Remove focus |
-| focus() | Get focus    |
+| Name | Description |
+| --- | --- |
+| blur() | Remove focus |
+| focus() | Get focus |
diff --git a/components/switch/index.zh-CN.md b/components/switch/index.zh-CN.md
index 219f692b61..9bc1971abd 100644
--- a/components/switch/index.zh-CN.md
+++ b/components/switch/index.zh-CN.md
@@ -20,6 +20,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/zNdJQMhfm/Switch.svg
 | autoFocus | 组件自动获取焦点 | boolean | false |
 | checked | 指定当前是否选中 | boolean | false |
 | checkedChildren | 选中时的内容 | ReactNode | - |
+| className | Switch 器类名 | string | - |
 | defaultChecked | 初始是否选中 | boolean | false |
 | disabled | 是否禁用 | boolean | false |
 | loading | 加载中的开关 | boolean | false |
@@ -27,11 +28,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/zNdJQMhfm/Switch.svg
 | unCheckedChildren | 非选中时的内容 | ReactNode | - |
 | onChange | 变化时回调函数 | function(checked: boolean, event: Event) | - |
 | onClick | 点击时回调函数 | function(checked: boolean, event: Event) | - |
-| className | Switch 器类名 | string | - |
 
 ## 方法
 
-| 名称    | 描述     |
-| ------- | -------- |
-| blur()  | 移除焦点 |
+| 名称 | 描述 |
+| --- | --- |
+| blur() | 移除焦点 |
 | focus() | 获取焦点 |
diff --git a/components/table/index.en-US.md b/components/table/index.en-US.md
index cddd8c65dd..344150f3d1 100644
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@@ -60,13 +60,13 @@ const columns = [
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| tableLayout | The [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | - \| `auto` \| `fixed` | -<hr />`fixed` when header/columns are fixed, or using `column.ellipsis` |  |
 | bordered | Whether to show all table borders | boolean | false |  |
 | columns | Columns of table | [ColumnsType](#Column)\[] | - |  |
 | components | Override default table elements | [TableComponents](https://git.io/fANxz) | - |  |
 | dataSource | Data record array to be displayed | object\[] | - |  |
 | expandable | Config expandable content | [expandable](#expandable) | - |  |
 | footer | Table footer renderer | function(currentPageData) | - |  |
+| getPopupContainer | The render container of dropdowns in table | (triggerNode) => HTMLElement | () => TableHtmlElement |  |
 | loading | Loading status of table | boolean \| [object](/components/spin/#API) ([more](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false |  |
 | locale | The i18n text including filter, sort, empty text, etc | object | filterConfirm: `Ok` <br> filterReset: `Reset` <br> emptyText: `No Data` <br> [Default](https://github.com/ant-design/ant-design/blob/4ad1ccac277782d7ed14f7e5d02d6346aae0db67/components/locale/default.tsx#L19) |  |
 | pagination | Config of pagination. You can ref table pagination [config](#pagination) or full [`pagination`](/components/pagination/) document, hide it by setting it to `false` | object | - |  |
@@ -75,16 +75,16 @@ const columns = [
 | rowSelection | Row selection [config](#rowSelection) | object | - |  |
 | scroll | Whether the table can be scrollable, [config](#scroll) | object | - |  |
 | showHeader | Whether to show table header | boolean | true |  |
+| showSorterTooltip | The header show next sorter direction tooltip | boolean | true |  |
 | size | Size of table | `default` \| `middle` \| `small` | `default` |  |
+| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] |  |
+| sticky | Set sticky header and scroll bar | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 4.6.0 (getContainer: 4.7.0) |
 | summary | Summary content | (currentData) => ReactNode | - |  |
+| tableLayout | The [table-layout](https://developer.mozilla.org/en-US/docs/Web/CSS/table-layout) attribute of table element | - \| `auto` \| `fixed` | -<hr />`fixed` when header/columns are fixed, or using `column.ellipsis` |  |
 | title | Table title renderer | function(currentPageData) | - |  |
-| onChange | Callback executed when pagination, filters or sorter is changed | function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \| `sort` \| `filter` }) | - |  |
+| onChange | Callback executed when pagination, filters or sorter is changed | function(pagination, filters, sorter, extra: { currentDataSource: \[], action: `paginate` \| `sort` \| `filter` }) | - |  |
 | onHeaderRow | Set props on per header row | function(column, index) | - |  |
 | onRow | Set props on per row | function(record, index) | - |  |
-| getPopupContainer | The render container of dropdowns in table | (triggerNode) => HTMLElement | () => TableHtmlElement |  |
-| sortDirections | Supported sort way, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] |  |
-| showSorterTooltip | The header show next sorter direction tooltip | boolean | true |  |
-| sticky | Set sticky header and scroll bar | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 4.6.0 (getContainer: 4.7.0) |
 
 #### onRow usage
 
@@ -113,43 +113,43 @@ Same as `onRow` `onHeaderRow` `onCell` `onHeaderCell`
 
 One of the Table `columns` prop for describing the table's columns, Column has the same API.
 
-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| align | The specify which way that column is aligned | `left` \| `right` \| `center` | `left` |  |
-| ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 |
-| className | The className of this column | string | - |  |
-| colSpan | Span of this column's title | number | - |  |
-| dataIndex | Display field of the data record, support nest path by string array | string \| string\[] | - |  |
+| Property | Description | Type | Default | Version |  |
+| --- | --- | --- | --- | --- | --- |
+| align | The specify which way that column is aligned | `left` \| `right` \| `center` | `left` |  |  |
+| className | The className of this column | string | - |  |  |
+| colSpan | Span of this column's title | number | - |  |  |
+| dataIndex | Display field of the data record, support nest path by string array | string \| string\[] | - |  |  |
 | defaultFilteredValue | Default filtered values | string\[] | - |  |  |
-| defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - |  |
-| filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - |  |
-| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |  |
-| filtered | Whether the `dataSource` is filtered | boolean | false |  |
-| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - |  |
-| filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - |  |
-| filterMultiple | Whether multiple filters can be selected | boolean | true |  |
-| filters | Filter menu config | object\[] | - |  |
-| fixed | (IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false |  |
-| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - |  |
-| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - |  |
-| responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 |
-| shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 |
-| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | function \| boolean | - |  |
-| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean \| string | - |  |
-| sortDirections | Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] |  |
-| title | Title of this column | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - |  |
-| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - |  |
-| onCell | Set props on per cell | function(record, rowIndex) | - |  |
-| onFilter | Callback executed when the confirm filter button is clicked | function | - |  |
-| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - |  |
-| onHeaderCell | Set props on per header cell | function(column) | - |  |
-| showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean | true |  |
+| defaultSortOrder | Default order of sorted values | `ascend` \| `descend` | - |  |  |
+| ellipsis | The ellipsis cell content, not working with sorter and filters for now.<br />tableLayout would be `fixed` when `ellipsis` is `true` or `{ showTitle?: boolean }` | boolean \| {showTitle?: boolean } | false | showTitle: 4.3.0 |  |
+| filterDropdown | Customized filter overlay | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - |  |  |
+| filterDropdownVisible | Whether `filterDropdown` is visible | boolean | - |  |  |
+| filtered | Whether the `dataSource` is filtered | boolean | false |  |  |
+| filteredValue | Controlled filtered value, filter icon will highlight | string\[] | - |  |  |
+| filterIcon | Customized filter icon | ReactNode \| (filtered: boolean) => ReactNode | - |  |  |
+| filterMultiple | Whether multiple filters can be selected | boolean | true |  |  |
+| filters | Filter menu config | object\[] | - |  |  |
+| fixed | (IE not support) Set column to be fixed: `true`(same as left) `'left'` `'right'` | boolean \| string | false |  |  |
+| key | Unique key of this column, you can ignore this prop if you've set a unique `dataIndex` | string | - |  |  |
+| render | Renderer of the table cell. The return value should be a ReactNode, or an object for [colSpan/rowSpan config](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - |  |  |
+| responsive | The list of breakpoints at which to display this column. Always visible if not set. | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 |  |
+| shouldCellUpdate | Control cell render logic | (record, prevRecord) => boolean | - | 4.3.0 |  |
+| showSorterTooltip | If header show next sorter direction tooltip, override `showSorterTooltip` in table | boolean | true |  |  |
+| sortDirections | Supported sort way, override `sortDirections` in `Table`, could be `ascend`, `descend` | Array | \[`ascend`, `descend`] |  |  |
+| sorter | Sort function for local sort, see [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort)'s compareFunction. If you need sort buttons only, set to `true` | function \| boolean | - |  |  |
+| sortOrder | Order of sorted values: `'ascend'` `'descend'` `false` | boolean \| string | - |  |  |
+| title | Title of this column | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - |  |  |
+| width | Width of this column ([width not working?](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)) | string \| number | - |  |  |
+| onCell | Set props on per cell | function(record, rowIndex) | - |  |  |
+| onFilter | Function that determines if the row is displayed when filtered | function(value, record) => boolean | - |  |  |
+| onFilterDropdownVisibleChange | Callback executed when `filterDropdownVisible` is changed | function(visible) {} | - |  |  |
+| onHeaderCell | Set props on per header cell | function(column) | - |  |  |
 
 ### ColumnGroup
 
-| Property | Description               | Type      | Default |
-| -------- | ------------------------- | --------- | ------- |
-| title    | Title of the column group | ReactNode | -       |
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| title | Title of the column group | ReactNode | - |
 
 ### pagination
 
@@ -170,11 +170,11 @@ Properties for expandable.
 | childrenColumnName | The column contains children to display | string\[] | children |
 | defaultExpandAllRows | Expand all rows initially | boolean | false |
 | defaultExpandedRowKeys | Initial expanded row keys | string\[] | - |
-| expandIcon | Customize row expand Icon. Ref [example](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - |
-| expandIconColumnIndex | Customize expand icon column index. Not render when `-1` | number | - |
 | expandedRowClassName | Expanded row's className | function(record, index, indent): string | - |
 | expandedRowKeys | Current expanded row keys | string\[] | - |
 | expandedRowRender | Expanded container render for each row | function(record, index, indent, expanded): ReactNode | - |
+| expandIcon | Customize row expand Icon. Ref [example](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - |
+| expandIconColumnIndex | Customize expand icon column index. Not render when `-1` | number | - |
 | expandRowByClick | Whether to expand row by clicking anywhere in the whole row | boolean | false |
 | indentSize | Indent size in pixels of tree data | number | 15 |
 | rowExpandable | Enable row can be expandable | (record) => boolean | - |
@@ -188,14 +188,14 @@ Properties for row selection.
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | checkStrictly | Check table row precisely; parent row and children rows are not associated | boolean | true | 4.4.0 |
-| columnWidth | Set the width of the selection column | string \| number | `60px` |  |
 | columnTitle | Set the title of the selection column | ReactNode | - |  |
+| columnWidth | Set the width of the selection column | string \| number | `60px` |  |
 | fixed | Fixed selection column on the left | boolean | - |  |
 | getCheckboxProps | Get Checkbox or Radio props | function(record) | - |  |
 | hideSelectAll | Hide the selectAll checkbox and custom selection | boolean | false | 4.3.0 |
 | preserveSelectedRowKeys | Keep selection `key` even when it removed from `dataSource` | boolean | - | 4.4.0 |
 | renderCell | Renderer of the table cell. Same as `render` in column | function(checked, record, index, originNode) {} | - | 4.1.0 |
-| selectedRowKeys | Controlled selected row keys | string\[] \| number[] | \[] |  |
+| selectedRowKeys | Controlled selected row keys | string\[] \| number\[] | \[] |  |
 | selections | Custom selection [config](#rowSelection), only displays default selections when set to `true` | object\[] \| boolean | - |  |
 | type | `checkbox` or `radio` | `checkbox` \| `radio` | `checkbox` |  |
 | onChange | Callback executed when selected rows change | function(selectedRowKeys, selectedRows) | - |  |
@@ -207,9 +207,9 @@ Properties for row selection.
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
+| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - |
 | x | Set horizontal scrolling, can also be used to specify the width of the scroll area, could be number, percent value, true and ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \| true | - |
 | y | Set vertical scrolling, can also be used to specify the height of the scroll area, could be number | number | - |
-| scrollToFirstRowOnChange | Whether to scroll to the top of the table when paging, sorting, filtering changes | boolean | - |
 
 ### selection
 
diff --git a/components/table/index.zh-CN.md b/components/table/index.zh-CN.md
index 460b50db07..65d7f79a27 100644
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@@ -67,13 +67,13 @@ const columns = [
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性，设为 `fixed` 表示内容不会影响列的布局 | - \| `auto` \| `fixed` | 无<hr />固定表头/列或使用了 `column.ellipsis` 时，默认值为 `fixed` |  |
 | bordered | 是否展示外边框和列边框 | boolean | false |  |
 | columns | 表格列的配置描述，具体项见下表 | [ColumnsType](#Column)\[] | - |  |
 | components | 覆盖默认的 table 元素 | [TableComponents](https://git.io/fANxz) | - |  |
 | dataSource | 数据数组 | object\[] | - |  |
 | expandable | 配置展开属性 | [expandable](#expandable) | - |  |
 | footer | 表格尾部 | function(currentPageData) | - |  |
+| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement |  |
 | loading | 页面是否加载中 | boolean \| [object](/components/spin/#API) ([更多](https://github.com/ant-design/ant-design/issues/4544#issuecomment-271533135)) | false |  |
 | locale | 默认文案设置，目前包括排序、过滤、空数据文案 | object | filterConfirm: `确定` <br> filterReset: `重置` <br> emptyText: `暂无数据` <br> [默认值](https://github.com/ant-design/ant-design/blob/4ad1ccac277782d7ed14f7e5d02d6346aae0db67/components/locale/default.tsx#L19) |  |
 | pagination | 分页器，参考[配置项](#pagination)或 [pagination](/components/pagination/) 文档，设为 false 时不展示和进行分页 | object | - |  |
@@ -82,16 +82,16 @@ const columns = [
 | rowSelection | 表格行是否可选择，[配置项](#rowSelection) | object | - |  |
 | scroll | 表格是否可滚动，也可以指定滚动区域的宽、高，[配置项](#scroll) | object | - |  |
 | showHeader | 是否显示表头 | boolean | true |  |
+| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示 | boolean | true |  |
 | size | 表格大小 | `default` \| `middle` \| `small` | default |  |
+| sortDirections | 支持的排序方式，取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] |  |
+| sticky | 设置粘性头部和滚动条 | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 4.6.0 (getContainer: 4.7.0) |
 | summary | 总结栏 | (currentData) => ReactNode | - |  |
+| tableLayout | 表格元素的 [table-layout](https://developer.mozilla.org/zh-CN/docs/Web/CSS/table-layout) 属性，设为 `fixed` 表示内容不会影响列的布局 | - \| `auto` \| `fixed` | 无<hr />固定表头/列或使用了 `column.ellipsis` 时，默认值为 `fixed` |  |
 | title | 表格标题 | function(currentPageData) | - |  |
-| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: [], action: `paginate` \| `sort` \| `filter` }) | - |  |
+| onChange | 分页、排序、筛选变化时触发 | function(pagination, filters, sorter, extra: { currentDataSource: \[], action: `paginate` \| `sort` \| `filter` }) | - |  |
 | onHeaderRow | 设置头部行属性 | function(column, index) | - |  |
 | onRow | 设置行属性 | function(record, index) | - |  |
-| getPopupContainer | 设置表格内各类浮层的渲染节点，如筛选菜单 | (triggerNode) => HTMLElement | () => TableHtmlElement |  |
-| sortDirections | 支持的排序方式，取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] |  |
-| showSorterTooltip | 表头是否显示下一次排序的 tooltip 提示 | boolean | true |  |
-| sticky | 设置粘性头部和滚动条 | boolean \| `{offsetHeader?: number, offsetScroll?: number, getContainer?: () => HTMLElement}` | - | 4.6.0 (getContainer: 4.7.0) |
 
 #### onRow 用法
 
@@ -123,12 +123,12 @@ const columns = [
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | align | 设置列的对齐方式 | `left` \| `right` \| `center` | `left` |  |
-| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
 | className | 列样式类名 | string | - |  |
 | colSpan | 表头列合并,设置为 0 时，不渲染 | number | - |  |
 | dataIndex | 列数据在数据项中对应的路径，支持通过数组查询嵌套路径 | string \| string\[] | - |  |
 | defaultFilteredValue | 默认筛选值 | string\[] | - |  |
 | defaultSortOrder | 默认排序顺序 | `ascend` \| `descend` | - |  |
+| ellipsis | 超过宽度将自动省略，暂不支持和排序筛选一起使用。<br />设置为 `true` 或 `{ showTitle?: boolean }` 时，表格布局将变成 `tableLayout="fixed"`。 | boolean \| { showTitle?: boolean } | false | showTitle: 4.3.0 |
 | filterDropdown | 可以自定义筛选菜单，此函数只负责渲染图层，需要自行编写各种交互 | ReactNode \| (props: [FilterDropdownProps](https://git.io/fjP5h)) => ReactNode | - |  |
 | filterDropdownVisible | 用于控制自定义筛选菜单是否可见 | boolean | - |  |
 | filtered | 标识数据是否经过过滤，筛选图标会高亮 | boolean | false |  |
@@ -141,22 +141,22 @@ const columns = [
 | render | 生成复杂数据的渲染函数，参数分别为当前行的值，当前行数据，行索引，@return 里面可以设置表格[行/列合并](#components-table-demo-colspan-rowspan) | function(text, record, index) {} | - |  |
 | responsive | 响应式 breakpoint 配置列表。未设置则始终可见。 | [Breakpoint](https://github.com/ant-design/ant-design/blob/015109b42b85c63146371b4e32b883cf97b088e8/components/_util/responsiveObserve.ts#L1)\[] | - | 4.2.0 |
 | shouldCellUpdate | 自定义单元格渲染时机 | (record, prevRecord) => boolean | - | 4.3.0 |
+| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中`showSorterTooltip` | boolean | true |  |
+| sortDirections | 支持的排序方式，覆盖`Table`中`sortDirections`， 取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] |  |
 | sorter | 排序函数，本地排序使用一个函数(参考 [Array.sort](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort) 的 compareFunction)，需要服务端排序可设为 true | function \| boolean | - |  |
 | sortOrder | 排序的受控属性，外界可用此控制列的排序，可设置为 `ascend` `descend` false | boolean \| string | - |  |
-| sortDirections | 支持的排序方式，覆盖`Table`中`sortDirections`， 取值为 `ascend` `descend` | Array | \[`ascend`, `descend`] |  |
 | title | 列头显示文字（函数用法 `3.10.0` 后支持） | ReactNode \| ({ sortOrder, sortColumn, filters }) => ReactNode | - |  |
 | width | 列宽度（[指定了也不生效？](https://github.com/ant-design/ant-design/issues/13825#issuecomment-449889241)） | string \| number | - |  |
 | onCell | 设置单元格属性 | function(record, rowIndex) | - |  |
 | onFilter | 本地模式下，确定筛选的运行函数 | function | - |  |
 | onFilterDropdownVisibleChange | 自定义筛选菜单可见变化时调用 | function(visible) {} | - |  |
 | onHeaderCell | 设置头部单元格属性 | function(column) | - |  |
-| showSorterTooltip | 表头显示下一次排序的 tooltip 提示, 覆盖 table 中`showSorterTooltip` | boolean | true |  |
 
 ### ColumnGroup
 
-| 参数  | 说明         | 类型      | 默认值 |
-| ----- | ------------ | --------- | ------ |
-| title | 列头显示文字 | ReactNode | -      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 列头显示文字 | ReactNode | - |
 
 ### pagination
 
@@ -177,11 +177,11 @@ const columns = [
 | childrenColumnName | 指定树形结构的列名 | string\[] | children |
 | defaultExpandAllRows | 初始时，是否展开所有行 | boolean | false |
 | defaultExpandedRowKeys | 默认展开的行 | string\[] | - |
-| expandIcon | 自定义展开图标，参考[示例](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - |
-| expandIconColumnIndex | 自定义展开按钮的列顺序，`-1` 时不展示 | number | - |
 | expandedRowClassName | 展开行的 className | function(record, index, indent): string | - |
 | expandedRowKeys | 展开的行，控制属性 | string\[] | - |
 | expandedRowRender | 额外的展开行 | function(record, index, indent, expanded): ReactNode | - |
+| expandIcon | 自定义展开图标，参考[示例](https://codesandbox.io/s/fervent-bird-nuzpr) | function(props): ReactNode | - |
+| expandIconColumnIndex | 自定义展开按钮的列顺序，`-1` 时不展示 | number | - |
 | expandRowByClick | 通过点击行来展开子行 | boolean | false |
 | indentSize | 展示树形数据时，每层缩进的宽度，以 px 为单位 | number | 15 |
 | rowExpandable | 设置是否允许行展开 | (record) => boolean | - |
@@ -195,14 +195,14 @@ const columns = [
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | checkStrictly | checkable 状态下节点选择完全受控（父子数据选中状态不再关联） | boolean | true | 4.4.0 |
-| columnWidth | 自定义列表选择框宽度 | string \| number | `60px` |  |
 | columnTitle | 自定义列表选择框标题 | ReactNode | - |  |
+| columnWidth | 自定义列表选择框宽度 | string \| number | `60px` |  |
 | fixed | 把选择框列固定在左边 | boolean | - |  |
 | getCheckboxProps | 选择框的默认属性配置 | function(record) | - |  |
 | hideSelectAll | 隐藏全选勾选框与自定义选择项 | boolean | false | 4.3.0 |
 | preserveSelectedRowKeys | 当数据被删除时仍然保留选项的 `key` | boolean | - | 4.4.0 |
 | renderCell | 渲染勾选框，用法与 Column 的 `render` 相同 | function(checked, record, index, originNode) {} | - | 4.1.0 |
-| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string\[] \| number[] | \[] |  |
+| selectedRowKeys | 指定选中项的 key 数组，需要和 onChange 进行配合 | string\[] \| number\[] | \[] |  |
 | selections | 自定义选择项 [配置项](#selection), 设为 `true` 时使用默认选择项 | object\[] \| boolean | true |  |
 | type | 多选/单选，`checkbox` or `radio` | string | `checkbox` |  |
 | onChange | 选中项发生变化时的回调 | function(selectedRowKeys, selectedRows) | - |  |
@@ -214,17 +214,17 @@ const columns = [
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - |
 | x | 设置横向滚动，也可用于指定滚动区域的宽，可以设置为像素值，百分比，true 和 ['max-content'](https://developer.mozilla.org/zh-CN/docs/Web/CSS/width#max-content) | number \| true | - |
 | y | 设置纵向滚动，也可用于指定滚动区域的高，可以设置为像素值 | number | - |
-| scrollToFirstRowOnChange | 当分页、排序、筛选变化后是否滚动到表格顶部 | boolean | - |
 
 ### selection
 
-| 参数     | 说明                       | 类型                        | 默认值 |
-| -------- | -------------------------- | --------------------------- | ------ |
-| key      | React 需要的 key，建议设置 | string                      | -      |
-| text     | 选择项显示的文字           | ReactNode                   | -      |
-| onSelect | 选择项点击回调             | function(changeableRowKeys) | -      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| key | React 需要的 key，建议设置 | string | - |
+| text | 选择项显示的文字 | ReactNode | - |
+| onSelect | 选择项点击回调 | function(changeableRowKeys) | - |
 
 ## 在 TypeScript 中使用
 
diff --git a/components/tabs/index.en-US.md b/components/tabs/index.en-US.md
index 58884e0960..ed45b4fff2 100644
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@@ -22,14 +22,15 @@ Ant Design has 3 types of Tabs for different situations.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| addIcon | Customize add icon | ReactNode | - | 4.4.0 |
 | activeKey | Current TabPane's key | string | - |  |
-| animated | Whether to change tabs with animation. Only works while `tabPosition="top" | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` |  |
-| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  |
+| addIcon | Customize add icon | ReactNode | - | 4.4.0 |
+| animated | Whether to change tabs with animation. Only works while \`tabPosition="top" | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` |  |
+| centered | Centers tabs | boolean | false | 4.4.0 |
 | defaultActiveKey | Initial active TabPane's key, if `activeKey` is not set | string | - |  |
 | hideAdd | Hide plus icon or not. Only works while `type="editable-card"` | boolean | false |  |
+| keyboard | Whether to turn on keyboard navigation | boolean | true |  |
+| renderTabBar | Replace the TabBar | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  |
 | size | Preset tab bar size | `large` \| `default` \| `small` | `default` |  |
-| centered | Centers tabs | boolean | false | 4.4.0 |
 | tabBarExtraContent | Extra content in tab bar | ReactNode \| {left?: ReactNode, right?: ReactNode} | - |  |
 | tabBarGutter | The gap between tabs | number | - |  |
 | tabBarStyle | Tab bar style object | object | - |  |
@@ -39,7 +40,6 @@ Ant Design has 3 types of Tabs for different situations.
 | onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (targetKey, action) => void | - |  |
 | onTabClick | Callback executed when tab is clicked | function(key: string, event: MouseEvent) | - |  |
 | onTabScroll | Trigger when tab scroll | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 |
-| keyboard | Whether to turn on keyboard navigation | boolean | true |  |
 
 More option at [rc-tabs option](https://github.com/react-component/tabs#tabs)
 
@@ -47,9 +47,9 @@ More option at [rc-tabs option](https://github.com/react-component/tabs#tabs)
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
+| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"` | ReactNode | - |
 | forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |
 | key | TabPane's key | string | - |
 | tab | Show text in TabPane's head | ReactNode | - |
-| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"` | ReactNode | - |
 
 More option at [rc-tabs option](https://github.com/react-component/tabs#tabpane)
diff --git a/components/tabs/index.zh-CN.md b/components/tabs/index.zh-CN.md
index e1ff7a3d73..995658a8a7 100644
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@@ -23,32 +23,32 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 
 ### Tabs
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 |
-| activeKey | 当前激活 tab 面板的 key | string | - |  |
-| animated | 是否使用动画切换 Tabs，在 `tabPosition="top" | "bottom"` 时有效 | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` |  |
-| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  |
-| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` |  |
-| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |  |
-| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` |  |
-| centered | 标签居中展示 | boolean | false | 4.4.0 |
-| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - |  |
-| tabBarGutter | tabs 之间的间隙 | number | - |  |
-| tabBarStyle | tab bar 的样式对象 | object | - |  |
-| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` |  |
-| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` |  |
-| onChange | 切换面板的回调 | function(activeKey) {} | - |  |
-| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | - |  |
-| onTabClick | tab 被点击的回调 | function(key: string, event: MouseEvent) | - |  |
-| onTabScroll | tab 滚动时触发 | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 |
-| keyboard | 开启键盘切换功能 | boolean | true |  |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |  |
+| --- | --- | --- | --- | --- | --- |
+| activeKey | 当前激活 tab 面板的 key | string | - |  |  |
+| addIcon | 自定义添加按钮 | ReactNode | - | 4.4.0 |  |
+| animated | 是否使用动画切换 Tabs，在 \`tabPosition="top" | "bottom"\` 时有效 | boolean \| { inkBar: boolean, tabPane: boolean } | `{ inkBar: true, tabPane: false }` |  |
+| centered | 标签居中展示 | boolean | false | 4.4.0 |  |
+| defaultActiveKey | 初始化选中面板的 key，如果没有设置 activeKey | string | `第一个面板` |  |  |
+| hideAdd | 是否隐藏加号图标，在 `type="editable-card"` 时有效 | boolean | false |  |  |
+| keyboard | 开启键盘切换功能 | boolean | true |  |  |
+| renderTabBar | 替换 TabBar，用于二次封装标签头 | (props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement | - |  |  |
+| size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` |  |  |
+| tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - |  |  |
+| tabBarGutter | tabs 之间的间隙 | number | - |  |  |
+| tabBarStyle | tab bar 的样式对象 | object | - |  |  |
+| tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` |  |  |
+| type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` |  |  |
+| onChange | 切换面板的回调 | function(activeKey) {} | - |  |  |
+| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (targetKey, action): void | - |  |  |
+| onTabClick | tab 被点击的回调 | function(key: string, event: MouseEvent) | - |  |  |
+| onTabScroll | tab 滚动时触发 | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 |  |
 
 ### Tabs.TabPane
 
-| 参数        | 说明                                            | 类型      | 默认值 |
-| ----------- | ----------------------------------------------- | --------- | ------ |
-| forceRender | 被隐藏时是否渲染 DOM 结构                       | boolean   | false  |
-| key         | 对应 activeKey                                  | string    | -      |
-| tab         | 选项卡头显示文字                                | ReactNode | -      |
-| closeIcon   | 自定义关闭图标，`在 type="editable-card"`时有效 | ReactNode | -      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| closeIcon | 自定义关闭图标，`在 type="editable-card"`时有效 | ReactNode | - |
+| forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |
+| key | 对应 activeKey | string | - |
+| tab | 选项卡头显示文字 | ReactNode | - |
diff --git a/components/tag/__tests__/__snapshots__/demo.test.js.snap b/components/tag/__tests__/__snapshots__/demo.test.js.snap
index 3dc2002e04..10433041bf 100644
--- a/components/tag/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/tag/__tests__/__snapshots__/demo.test.js.snap
@@ -482,17 +482,17 @@ Array [
     class="ant-tag"
   >
     Tag1
-    <div
+    <span
       class="ant-tag-close-icon"
     >
       关 闭
-    </div>
+    </span>
   </span>,
   <span
     class="ant-tag"
   >
     Tag2
-    <div
+    <span
       class="ant-tag-close-icon"
     >
       <span
@@ -518,7 +518,7 @@ Array [
           />
         </svg>
       </span>
-    </div>
+    </span>
   </span>,
 ]
 `;
diff --git a/components/tag/index.en-US.md b/components/tag/index.en-US.md
index f8d5190904..17c5ee8c2b 100644
--- a/components/tag/index.en-US.md
+++ b/components/tag/index.en-US.md
@@ -17,18 +17,18 @@ Tag for categorizing or markup.
 
 ### Tag
 
-| Property  | Description                          | Type        | Default | Version |
-| --------- | ------------------------------------ | ----------- | ------- | ------- |
-| closable  | Whether the Tag can be closed        | boolean     | false   |         |
-| color     | Color of the Tag                     | string      | -       |         |
-| closeIcon | Custom close icon                    | ReactNode   | -       | 4.4.0   |
-| onClose   | Callback executed when tag is closed | (e) => void | -       |         |
-| visible   | Whether the Tag is closed or not     | boolean     | true    |         |
-| icon      | Set the icon of tag                  | ReactNode   | -       |         |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| closable | Whether the Tag can be closed | boolean | false |  |
+| closeIcon | Custom close icon | ReactNode | - | 4.4.0 |
+| color | Color of the Tag | string | - |  |
+| icon | Set the icon of tag | ReactNode | - |  |
+| visible | Whether the Tag is closed or not | boolean | true |  |
+| onClose | Callback executed when tag is closed | (e) => void | - |  |
 
 ### Tag.CheckableTag
 
-| Property | Description                                     | Type              | Default |
-| -------- | ----------------------------------------------- | ----------------- | ------- |
-| checked  | Checked status of Tag                           | boolean           | false   |
-| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | -       |
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| checked | Checked status of Tag | boolean | false |
+| onChange | Callback executed when Tag is checked/unchecked | (checked) => void | - |
diff --git a/components/tag/index.tsx b/components/tag/index.tsx
index 674c8cf07f..4130fe7e28 100644
--- a/components/tag/index.tsx
+++ b/components/tag/index.tsx
@@ -102,9 +102,9 @@ const InternalTag: React.ForwardRefRenderFunction<unknown, TagProps> = (
   const renderCloseIcon = () => {
     if (closable) {
       return closeIcon ? (
-        <div className={`${prefixCls}-close-icon`} onClick={handleCloseClick}>
+        <span className={`${prefixCls}-close-icon`} onClick={handleCloseClick}>
           {closeIcon}
-        </div>
+        </span>
       ) : (
         <CloseOutlined className={`${prefixCls}-close-icon`} onClick={handleCloseClick} />
       );
diff --git a/components/tag/index.zh-CN.md b/components/tag/index.zh-CN.md
index 92544f82bc..690364c690 100644
--- a/components/tag/index.zh-CN.md
+++ b/components/tag/index.zh-CN.md
@@ -17,18 +17,18 @@ cover: https://gw.alipayobjects.com/zos/alicdn/cH1BOLfxC/Tag.svg
 
 ### Tag
 
-| 参数      | 说明             | 类型        | 默认值 | 版本  |
-| --------- | ---------------- | ----------- | ------ | ----- |
-| closable  | 标签是否可以关闭 | boolean     | false  |       |
-| color     | 标签色           | string      | -      |       |
-| closeIcon | 自定义关闭按钮   | ReactNode   | -      | 4.4.0 |
-| onClose   | 关闭时的回调     | (e) => void | -      |       |
-| visible   | 是否显示标签     | boolean     | true   |       |
-| icon      | 设置图标         | ReactNode   | -      |       |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| closable | 标签是否可以关闭 | boolean | false |  |
+| closeIcon | 自定义关闭按钮 | ReactNode | - | 4.4.0 |
+| color | 标签色 | string | - |  |
+| icon | 设置图标 | ReactNode | - |  |
+| visible | 是否显示标签 | boolean | true |  |
+| onClose | 关闭时的回调 | (e) => void | - |  |
 
 ### Tag.CheckableTag
 
-| 参数     | 说明                 | 类型              | 默认值 |
-| -------- | -------------------- | ----------------- | ------ |
-| checked  | 设置标签的选中状态   | boolean           | false  |
-| onChange | 点击标签时触发的回调 | (checked) => void | -      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| checked | 设置标签的选中状态 | boolean | false |
+| onChange | 点击标签时触发的回调 | (checked) => void | - |
diff --git a/components/time-picker/demo/basic.md b/components/time-picker/demo/basic.md
index 8aef219595..d4e8b54ed1 100644
--- a/components/time-picker/demo/basic.md
+++ b/components/time-picker/demo/basic.md
@@ -22,10 +22,7 @@ function onChange(time, timeString) {
 }
 
 ReactDOM.render(
-  <TimePicker
-    onChange={onChange}
-    defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
-  />,
+  <TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />,
   mountNode,
 );
 ```
diff --git a/components/time-picker/demo/disabled.md b/components/time-picker/demo/disabled.md
index dba590ac84..a66ffccfbc 100644
--- a/components/time-picker/demo/disabled.md
+++ b/components/time-picker/demo/disabled.md
@@ -17,11 +17,5 @@ A disabled state of the `TimePicker`.
 import { TimePicker } from 'antd';
 import moment from 'moment';
 
-ReactDOM.render(
-  <TimePicker
-    defaultValue={moment('12:08:23', 'HH:mm:ss')}
-    disabled
-  />,
-  mountNode,
-);
+ReactDOM.render(<TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />, mountNode);
 ```
diff --git a/components/time-picker/demo/hide-column.md b/components/time-picker/demo/hide-column.md
index 21b1488b2a..793cac85aa 100644
--- a/components/time-picker/demo/hide-column.md
+++ b/components/time-picker/demo/hide-column.md
@@ -19,11 +19,5 @@ import moment from 'moment';
 
 const format = 'HH:mm';
 
-ReactDOM.render(
-  <TimePicker
-    defaultValue={moment('12:08', format)}
-    format={format}
-  />,
-  mountNode,
-);
+ReactDOM.render(<TimePicker defaultValue={moment('12:08', format)} format={format} />, mountNode);
 ```
diff --git a/components/time-picker/demo/value.md b/components/time-picker/demo/value.md
index 059041fe5d..a140eaf272 100644
--- a/components/time-picker/demo/value.md
+++ b/components/time-picker/demo/value.md
@@ -25,7 +25,7 @@ const Demo = () => {
   };
 
   return <TimePicker value={value} onChange={onChange} />;
-}
+};
 
 ReactDOM.render(<Demo />, mountNode);
 ```
diff --git a/components/time-picker/index.en-US.md b/components/time-picker/index.en-US.md
index 5f4cf6953c..c5190a6f71 100644
--- a/components/time-picker/index.en-US.md
+++ b/components/time-picker/index.en-US.md
@@ -29,6 +29,7 @@ import moment from 'moment';
 | autoFocus | If get focus when component mounted | boolean | false |  |
 | bordered | Whether has border style | boolean | true |  |
 | className | The className of picker | string | - |  |
+| clearIcon | The custom clear icon | ReactNode | - |  |
 | 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 |  |
@@ -45,31 +46,30 @@ import moment from 'moment';
 | placeholder | Display when there's no value | string \| \[string, string] | `Select a time` |  |
 | popupClassName | The className of panel | string | - |  |
 | popupStyle | The style of panel | CSSProperties | - |  |
-| secondStep | Interval between seconds in picker | number | 1 |  |
-| suffixIcon | The custom suffix icon | ReactNode | - |  |
-| clearIcon | The custom clear icon | ReactNode | - |  |
-| use12Hours | Display as 12 hours format, with default format `h:mm:ss a` | boolean | false |  |
 | renderExtraFooter | Called from time picker panel to render some addon to its bottom | () => ReactNode | - |  |
+| secondStep | Interval between seconds in picker | number | 1 |  |
+| showNow | Whether to show `Now` button on panel | boolean | - | 4.4.0 |
+| suffixIcon | The custom suffix icon | ReactNode | - |  |
+| use12Hours | Display as 12 hours format, with default format `h:mm:ss a` | boolean | false |  |
 | value | To set time | [moment](http://momentjs.com/) | - |  |
 | onChange | A callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - |  |
 | 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 | - |  |
-| showNow | Whether to show `Now` button on panel | boolean | - | 4.4.0 |
 
 ## Methods
 
-| Name    | Description  | Version |
-| ------- | ------------ | ------- |
-| blur()  | Remove focus |         |
-| focus() | Get focus    |         |
+| Name | Description | Version |
+| --- | --- | --- |
+| blur() | Remove focus |  |
+| focus() | Get focus |  |
 
 ### RangePicker
 
 Same props from [RangePicker](/components/date-picker/#RangePicker) of DatePicker. And includes additional props:
 
-| Property | Description              | Type    | Default | Version |
-| -------- | ------------------------ | ------- | ------- | ------- |
-| order    | Order start and end time | boolean | true    | 4.1.0   |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| order | Order start and end time | boolean | true | 4.1.0 |
 
 <style>
 .code-box-demo .ant-picker { margin: 0 8px 12px 0; }
diff --git a/components/time-picker/index.zh-CN.md b/components/time-picker/index.zh-CN.md
index 4db429acaf..1d2031c120 100644
--- a/components/time-picker/index.zh-CN.md
+++ b/components/time-picker/index.zh-CN.md
@@ -29,6 +29,7 @@ import moment from 'moment';
 | autoFocus | 自动获取焦点 | boolean | false |  |
 | bordered | 是否有边框 | boolean | true |  |
 | className | 选择器类名 | string | - |  |
+| clearIcon | 自定义的清除图标 | ReactNode | - |  |
 | clearText | 清除按钮的提示文案 | string | clear |  |
 | defaultValue | 默认时间 | [moment](http://momentjs.com/) | - |  |
 | disabled | 禁用全部操作 | boolean | false |  |
@@ -45,30 +46,29 @@ import moment from 'moment';
 | placeholder | 没有值的时候显示的内容 | string \| \[string, string] | `请选择时间` |  |
 | popupClassName | 弹出层类名 | string | - |  |
 | popupStyle | 弹出层样式对象 | object | - |  |
-| secondStep | 秒选项间隔 | number | 1 |  |
-| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
-| clearIcon | 自定义的清除图标 | ReactNode | - |  |
 | renderExtraFooter | 选择框底部显示自定义的内容 | () => ReactNode | - |  |
+| secondStep | 秒选项间隔 | number | 1 |  |
+| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
+| suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
 | use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |  |
 | value | 当前时间 | [moment](http://momentjs.com/) | - |  |
 | onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | - |  |
 | onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - |  |
-| showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
 
 ## 方法
 
-| 名称    | 描述     | 版本 |
-| ------- | -------- | ---- |
-| blur()  | 移除焦点 |      |
-| focus() | 获取焦点 |      |
+| 名称 | 描述 | 版本 |
+| --- | --- | --- |
+| blur() | 移除焦点 |  |
+| focus() | 获取焦点 |  |
 
 ### RangePicker
 
 属性与 DatePicker 的 [RangePicker](/components/date-picker/#RangePicker) 相同。还包含以下属性：
 
-| 参数  | 说明                 | 类型    | 默认值 | 版本  |
-| ----- | -------------------- | ------- | ------ | ----- |
-| order | 始末时间是否自动排序 | boolean | true   | 4.1.0 |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
 
 <style>
 .code-box-demo .ant-picker { margin: 0 8px 12px 0; }
diff --git a/components/timeline/__tests__/index.test.js b/components/timeline/__tests__/index.test.js
index a9774e47db..1c4ea9ab38 100644
--- a/components/timeline/__tests__/index.test.js
+++ b/components/timeline/__tests__/index.test.js
@@ -34,12 +34,9 @@ describe('TimeLine', () => {
     });
 
     it('its last item is marked as the last item', () => {
-      expect(
-        wrapper
-          .find('li.ant-timeline-item')
-          .last()
-          .hasClass('ant-timeline-item-last'),
-      ).toBe(true);
+      expect(wrapper.find('li.ant-timeline-item').last().hasClass('ant-timeline-item-last')).toBe(
+        true,
+      );
     });
   });
 
@@ -65,10 +62,7 @@ describe('TimeLine', () => {
     it('its last item is marked as the pending item', () => {
       const wrapper = wrapperFactory({ pending });
       expect(
-        wrapper
-          .find('li.ant-timeline-item')
-          .last()
-          .hasClass('ant-timeline-item-pending'),
+        wrapper.find('li.ant-timeline-item').last().hasClass('ant-timeline-item-pending'),
       ).toBe(true);
     });
 
@@ -119,21 +113,15 @@ describe('TimeLine', () => {
 
     it('its last item is marked as the last item', () => {
       const wrapper = wrapperFactory({ pending, reverse: true });
-      expect(
-        wrapper
-          .find('li.ant-timeline-item')
-          .last()
-          .hasClass('ant-timeline-item-last'),
-      ).toBe(true);
+      expect(wrapper.find('li.ant-timeline-item').last().hasClass('ant-timeline-item-last')).toBe(
+        true,
+      );
     });
 
     it('its first item is marked as the pending item', () => {
       const wrapper = wrapperFactory({ pending, reverse: true });
       expect(
-        wrapper
-          .find('li.ant-timeline-item')
-          .first()
-          .hasClass('ant-timeline-item-pending'),
+        wrapper.find('li.ant-timeline-item').first().hasClass('ant-timeline-item-pending'),
       ).toBe(true);
     });
   });
diff --git a/components/timeline/index.en-US.md b/components/timeline/index.en-US.md
index f07ccb0e0f..7efb675c2e 100644
--- a/components/timeline/index.en-US.md
+++ b/components/timeline/index.en-US.md
@@ -29,10 +29,10 @@ Timeline
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
+| mode | By sending `alternate` the timeline will distribute the nodes to the left and right | `left` \| `alternate` \| `right` | - |
 | pending | Set the last ghost node's existence or its content | boolean \| ReactNode | false |
 | pendingDot | Set the dot of the last ghost node when pending is true | ReactNode | &lt;LoadingOutlined /> |
 | reverse | Whether reverse nodes or not | boolean | false |
-| mode | By sending `alternate` the timeline will distribute the nodes to the left and right | `left` \| `alternate` \| `right` | - |
 
 ### Timeline.Item
 
@@ -42,5 +42,5 @@ Node of timeline
 | --- | --- | --- | --- |
 | color | Set the circle's color to `blue`, `red`, `green`, `gray` or other custom colors | string | `blue` |
 | dot | Customize timeline dot | ReactNode | - |
-| position | Customize node position | `left` \| `right` | - |
 | label | Set the label | ReactNode | - |
+| position | Customize node position | `left` \| `right` | - |
diff --git a/components/timeline/index.zh-CN.md b/components/timeline/index.zh-CN.md
index 3aca425134..40ca1eb592 100644
--- a/components/timeline/index.zh-CN.md
+++ b/components/timeline/index.zh-CN.md
@@ -30,10 +30,10 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/vJmo00mmgR/Timeline.svg
 
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
+| mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `left` \| `alternate` \| `right` | - |
 | pending | 指定最后一个幽灵节点是否存在或内容 | boolean \| ReactNode | false |
 | pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | ReactNode | &lt;LoadingOutlined /> |
 | reverse | 节点排序 | boolean | false |
-| mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `left` \| `alternate` \| `right` | - |
 
 ### Timeline.Item
 
@@ -43,5 +43,5 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/vJmo00mmgR/Timeline.svg
 | --- | --- | --- | --- |
 | color | 指定圆圈颜色 `blue`, `red`, `green`, `gray`，或自定义的色值 | string | `blue` |
 | dot | 自定义时间轴点 | ReactNode | - |
-| position | 自定义节点位置 | `left` \| `right` | - |
 | label | 设置标签 | ReactNode | - |
+| position | 自定义节点位置 | `left` \| `right` | - |
diff --git a/components/tooltip/index.en-US.md b/components/tooltip/index.en-US.md
index 056f5e00fa..89a737fd68 100644
--- a/components/tooltip/index.en-US.md
+++ b/components/tooltip/index.en-US.md
@@ -14,9 +14,9 @@ A simple text popup tip.
 
 ## API
 
-| Property | Description                   | Type                         | Default |
-| -------- | ----------------------------- | ---------------------------- | ------- |
-| title    | The text shown in the tooltip | ReactNode \| () => ReactNode | -       |
+| Property | Description | Type | Default |
+| --- | --- | --- | --- |
+| title | The text shown in the tooltip | ReactNode \| () => ReactNode | - |
 
 ### Common API
 
@@ -24,10 +24,12 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| align | This value will be merged into placement's config, please refer to the settings [rc-tooltip](https://github.com/react-component/tooltip) | object | - |  |
 | arrowPointAtCenter | Whether the arrow is pointed at the center of target | boolean | false |  |
 | autoAdjustOverflow | Whether to adjust popup placement automatically when popup is off screen | boolean | true |  |
-| defaultVisible | Whether the floating tooltip card is visible by default | boolean | false |  |
 | color | The background color | string | - | 4.3.0 |
+| defaultVisible | Whether the floating tooltip card is visible by default | boolean | false |  |
+| destroyTooltipOnHide | Whether destroy tooltip when hidden, parent container of tooltip will be destroyed when `keepParent` is false | boolean \| { keepParent?: boolean } | false |  |
 | getPopupContainer | The DOM container of the tip, the default behavior is to create a `div` element in `body` | function(triggerNode) | () => document.body |  |
 | mouseEnterDelay | Delay in seconds, before tooltip is shown on mouse enter | number | 0.1 |  |
 | mouseLeaveDelay | Delay in seconds, before tooltip is hidden on mouse leave | number | 0.1 |  |
@@ -37,8 +39,6 @@ The following APIs are shared by Tooltip, Popconfirm, Popover.
 | trigger | Tooltip trigger mode. Could be multiple by passing an array | `hover` \| `focus` \| `click` \| `contextMenu` \| Array&lt;string> | `hover` |  |
 | visible | Whether the floating tooltip card is visible or not | boolean | false |  |
 | onVisibleChange | Callback executed when visibility of the tooltip card is changed | (visible) => void | - |  |
-| align | This value will be merged into placement's config, please refer to the settings [rc-tooltip](https://github.com/react-component/tooltip) | object | - |  |
-| destroyTooltipOnHide | Whether destroy tooltip when hidden, parent container of tooltip will be destroyed when `keepParent` is false | boolean \| { keepParent?: boolean } | false |  |
 
 ## Note
 
diff --git a/components/tooltip/index.zh-CN.md b/components/tooltip/index.zh-CN.md
index 637ec64d09..83ca747c46 100644
--- a/components/tooltip/index.zh-CN.md
+++ b/components/tooltip/index.zh-CN.md
@@ -16,9 +16,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
 
 ## API
 
-| 参数  | 说明     | 类型                         | 默认值 |
-| ----- | -------- | ---------------------------- | ------ |
-| title | 提示文字 | ReactNode \| () => ReactNode | -      |
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| title | 提示文字 | ReactNode \| () => ReactNode | - |
 
 ### 共同的 API
 
@@ -26,21 +26,21 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Vyyeu8jq2/Tooltp.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| align | 该值将合并到 placement 的配置中，设置参考 [rc-tooltip](https://github.com/react-component/tooltip) | object | - |  |
 | arrowPointAtCenter | 箭头是否指向目标元素中心 | boolean | false |  |
 | autoAdjustOverflow | 气泡被遮挡时自动调整位置 | boolean | true |  |
-| defaultVisible | 默认是否显隐 | boolean | false |  |
 | color | 背景颜色 | string | - | 4.3.0 |
+| defaultVisible | 默认是否显隐 | boolean | false |  |
+| destroyTooltipOnHide | 关闭后是否销毁 Tooltip，当 `keepParent` 为 `false` 时销毁父容器 | boolean \| { keepParent?: boolean } | false |  |
 | getPopupContainer | 浮层渲染父节点，默认渲染到 body 上 | function(triggerNode) | () => document.body |  |
 | mouseEnterDelay | 鼠标移入后延时多少才显示 Tooltip，单位：秒 | number | 0.1 |  |
 | mouseLeaveDelay | 鼠标移出后延时多少才隐藏 Tooltip，单位：秒 | number | 0.1 |  |
 | overlayClassName | 卡片类名 | string | - |  |
 | overlayStyle | 卡片样式 | object | - |  |
 | placement | 气泡框位置，可选 `top` `left` `right` `bottom` `topLeft` `topRight` `bottomLeft` `bottomRight` `leftTop` `leftBottom` `rightTop` `rightBottom` | string | `top` |  |
-| trigger | 触发行为，可选 `hover` \| `focus` \| `click` \| `contextMenu`，可使用数组设置多个触发行为 | string \| string[] | `hover` |  |
+| trigger | 触发行为，可选 `hover` \| `focus` \| `click` \| `contextMenu`，可使用数组设置多个触发行为 | string \| string\[] | `hover` |  |
 | visible | 用于手动控制浮层显隐 | boolean | false |  |
 | onVisibleChange | 显示隐藏的回调 | (visible) => void | - |  |
-| align | 该值将合并到 placement 的配置中，设置参考 [rc-tooltip](https://github.com/react-component/tooltip) | object | - |  |
-| destroyTooltipOnHide | 关闭后是否销毁 Tooltip，当 `keepParent` 为 `false` 时销毁父容器 | boolean \| { keepParent?: boolean } | false |  |
 
 ## 注意
 
diff --git a/components/transfer/__tests__/list.test.js b/components/transfer/__tests__/list.test.js
index c2c115e5da..367806fed3 100644
--- a/components/transfer/__tests__/list.test.js
+++ b/components/transfer/__tests__/list.test.js
@@ -33,12 +33,7 @@ describe('Transfer.List', () => {
 
   it('should check top Checkbox while all available items are checked', () => {
     const wrapper = mount(<List {...listCommonProps} checkedKeys={['a', 'b']} />);
-    expect(
-      wrapper
-        .find('.ant-transfer-list-header')
-        .find(Checkbox)
-        .prop('checked'),
-    ).toBeTruthy();
+    expect(wrapper.find('.ant-transfer-list-header').find(Checkbox).prop('checked')).toBeTruthy();
   });
 
   it('when component has been unmounted, componentWillUnmount should be called', () => {
diff --git a/components/transfer/index.en-US.md b/components/transfer/index.en-US.md
index 5a7ccdd4c7..68e22e8646 100644
--- a/components/transfer/index.en-US.md
+++ b/components/transfer/index.en-US.md
@@ -27,17 +27,17 @@ One or more elements can be selected from either column, one click on the proper
 | footer | A function used for rendering the footer | (props) => ReactNode | - |  |
 | listStyle | A custom CSS style used for rendering the transfer columns | object \| ({direction: `left` \| `right`}) => object | - |  |
 | locale | The i18n text including filter, empty text, item unit, etc | { itemUnit: string; itemsUnit: string; searchPlaceholder: string; notFoundContent: ReactNode; } | { itemUnit: `item`, itemsUnit: `items`, notFoundContent: `The list is empty`, searchPlaceholder: `Search here` } |  |
-| operations | A set of operations that are sorted from top to bottom | string\[] | \[`>`, `<`] |  |
 | oneWay | Display as single direction style | boolean | false | 4.3.0 |
+| operations | A set of operations that are sorted from top to bottom | string\[] | \[`>`, `<`] |  |
 | operationStyle | A custom CSS style used for rendering the operations column | object | - |  |
 | pagination | Use pagination. Not work in render props | boolean \| { pageSize: number } | false | 4.3.0 |
 | render | The function to generate the item shown on a column. Based on an record (element of the dataSource array), this function should return a React element which is generated from that record. Also, it can return a plain object with `value` and `label`, `label` is a React element and `value` is for title | (record) => ReactNode | - |  |
+| selectAllLabels | A set of customized labels for select all checkboxs on the header | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)\[] | - |  |
 | selectedKeys | A set of keys of selected items | string\[] | \[] |  |
 | showSearch | If included, a search box is shown on each column | boolean | false |  |
 | showSelectAll | Show select all checkbox on the header | boolean | true |  |
 | targetKeys | A set of keys of elements that are listed on the right column | string\[] | \[] |  |
 | titles | A set of titles that are sorted from left to right | ReactNode\[] | - |  |
-| selectAllLabels | A set of customized labels for select all checkboxs on the header | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)[] | - |  |
 | onChange | A callback function that is executed when the transfer between columns is complete | (targetKeys, direction, moveKeys): void | - |  |
 | onScroll | A callback function which is executed when scroll options list | (direction, event): void | - |  |
 | onSearch | A callback function which is executed when search field are changed | (direction: `left` \| `right`, value: string): void | - |  |
@@ -47,14 +47,14 @@ One or more elements can be selected from either column, one click on the proper
 
 Transfer accept `children` to customize render list, using follow props:
 
-| Property        | Description             | Type                                | Version |
-| --------------- | ----------------------- | ----------------------------------- | ------- |
-| direction       | List render direction   | `left` \| `right`                   |         |
-| disabled        | Disable list or not     | boolean                             |         |
-| filteredItems   | Filtered items          | TransferItem[]                      |         |
-| onItemSelect    | Select item             | (key: string, selected: boolean)    |         |
-| onItemSelectAll | Select a group of items | (keys: string[], selected: boolean) |         |
-| selectedKeys    | Selected items          | string[]                            |         |
+| Property | Description | Type | Version |
+| --- | --- | --- | --- |
+| direction | List render direction | `left` \| `right` |  |
+| disabled | Disable list or not | boolean |  |
+| filteredItems | Filtered items | TransferItem\[] |  |
+| selectedKeys | Selected items | string\[] |  |
+| onItemSelect | Select item | (key: string, selected: boolean) |  |
+| onItemSelectAll | Select a group of items | (keys: string\[], selected: boolean) |  |
 
 #### example
 
diff --git a/components/transfer/index.zh-CN.md b/components/transfer/index.zh-CN.md
index 607d3ba49e..f7a87c1e4b 100644
--- a/components/transfer/index.zh-CN.md
+++ b/components/transfer/index.zh-CN.md
@@ -34,12 +34,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
 | operations | 操作文案集合，顺序从上至下 | string\[] | \[`>`, `<`] |  |
 | pagination | 使用分页样式，自定义渲染列表下无效 | boolean \| { pageSize: number } | false | 4.3.0 |
 | render | 每行数据渲染函数，该函数的入参为 `dataSource` 中的项，返回值为 ReactElement。或者返回一个普通对象，其中 `label` 字段为 ReactElement，`value` 字段为 title | (record) => ReactNode | - |  |
+| selectAllLabels | 自定义顶部多选框标题的集合 | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)\[] | - |  |
 | selectedKeys | 设置哪些项应该被选中 | string\[] | \[] |  |
 | showSearch | 是否显示搜索框 | boolean | false |  |
 | showSelectAll | 是否展示全选勾选框 | boolean | true |  |
 | targetKeys | 显示在右侧框数据的 key 集合 | string\[] | \[] |  |
 | titles | 标题集合，顺序从左至右 | ReactNode\[] | - |  |
-| selectAllLabels | 自定义顶部多选框标题的集合 | (ReactNode \| (info: { selectedCount: number, totalCount: number }) => ReactNode)[] | - |  |
 | onChange | 选项在两栏之间转移时的回调函数 | (targetKeys, direction, moveKeys): void | - |  |
 | onScroll | 选项列表滚动时的回调函数 | (direction, event): void | - |  |
 | onSearch | 搜索框内容时改变时的回调函数 | (direction: `left` \| `right`, value: string): void | - |  |
@@ -49,14 +49,14 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QAXskNI4G/Transfer.svg
 
 Transfer 支持接收 `children` 自定义渲染列表，并返回以下参数：
 
-| 参数            | 说明           | 类型                                | 版本 |
-| --------------- | -------------- | ----------------------------------- | ---- |
-| direction       | 渲染列表的方向 | `left` \| `right`                   |      |
-| disabled        | 是否禁用列表   | boolean                             |      |
-| filteredItems   | 过滤后的数据   | TransferItem[]                      |      |
-| onItemSelect    | 勾选条目       | (key: string, selected: boolean)    |      |
-| onItemSelectAll | 勾选一组条目   | (keys: string[], selected: boolean) |      |
-| selectedKeys    | 选中的条目     | string[]                            |      |
+| 参数 | 说明 | 类型 | 版本 |
+| --- | --- | --- | --- |
+| direction | 渲染列表的方向 | `left` \| `right` |  |
+| disabled | 是否禁用列表 | boolean |  |
+| filteredItems | 过滤后的数据 | TransferItem\[] |  |
+| selectedKeys | 选中的条目 | string\[] |  |
+| onItemSelect | 勾选条目 | (key: string, selected: boolean) |  |
+| onItemSelectAll | 勾选一组条目 | (keys: string\[], selected: boolean) |  |
 
 #### 参考示例
 
diff --git a/components/tree-select/demo/async.md b/components/tree-select/demo/async.md
index b2b9eabae8..a670e59694 100644
--- a/components/tree-select/demo/async.md
+++ b/components/tree-select/demo/async.md
@@ -27,9 +27,7 @@ class Demo extends React.Component {
   };
 
   genTreeNode = (parentId, isLeaf = false) => {
-    const random = Math.random()
-      .toString(36)
-      .substring(2, 6);
+    const random = Math.random().toString(36).substring(2, 6);
     return {
       id: random,
       pId: parentId,
diff --git a/components/tree-select/index.en-US.md b/components/tree-select/index.en-US.md
index 1e144bbab8..0ad615d570 100644
--- a/components/tree-select/index.en-US.md
+++ b/components/tree-select/index.en-US.md
@@ -28,7 +28,7 @@ Tree selection control.
 | dropdownStyle | To set the style of the dropdown menu | CSSProperties | - |  |
 | filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default | boolean \| function(inputValue: string, treeNode: TreeNode) (should return boolean) | function |  |
 | getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body |  |
-| labelInValue | Whether to embed label in value, turn the format of value from `string` to {value: string, label: ReactNode, halfChecked: string[]} | boolean | false |  |
+| labelInValue | Whether to embed label in value, turn the format of value from `string` to {value: string, label: ReactNode, halfChecked: string\[]} | boolean | false |  |
 | listHeight | Config popup height | number | 256 |  |
 | loadData | Load data asynchronously | function(node) | - |  |
 | maxTagCount | Max tag count to show | number | - |  |
@@ -36,13 +36,12 @@ Tree selection control.
 | multiple | Support multiple or not, will be `true` when enable `treeCheckable` | boolean | false |  |
 | placeholder | Placeholder of the select input | string | - |  |
 | searchValue | Work with `onSearch` to make search value controlled | string | - |  |
-| treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false |  |
-| switcherIcon | customize collapse \| expand icon of tree node | ReactNode | - |
+| showArrow | Whether to show the `suffixIcon`，when single selection mode, default `true` | boolean | - |  |
 | showCheckedStrategy | The way show selected item in box. **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` |  |
 | showSearch | Support search or not | boolean | single: false \| multiple: true |  |
 | size | To set the size of the select input | `large` \| `middle` \| `small` | - |  |
-| showArrow | Whether to show the `suffixIcon`，when single selection mode, default `true` | boolean | - |  |
 | suffixIcon | The custom suffix icon,you must set `showArrow` to `true` manually in multiple selection mode | ReactNode | - |  |
+| switcherIcon | customize collapse \| expand icon of tree node | ReactNode | - |  |
 | treeCheckable | Whether to show checkbox on the treeNodes | boolean | false |  |
 | treeCheckStrictly | Whether to check nodes precisely (in the `checkable` mode), means parent and child nodes are not associated, and it will make `labelInValue` be true | boolean | false |  |
 | treeData | Data of the treeNodes, manual construction work is no longer needed if this property has been set(ensure the Uniqueness of each value) | array&lt;{ value, title, children, \[disabled, disableCheckbox, selectable, checkable] }> | \[] |  |
@@ -50,6 +49,7 @@ Tree selection control.
 | treeDefaultExpandAll | Whether to expand all treeNodes by default | boolean | false |  |
 | treeDefaultExpandedKeys | Default expanded treeNodes | string\[] | - |  |
 | treeExpandedKeys | Set expanded keys | string\[] | - |  |
+| treeIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to `true` | boolean | false |  |
 | treeNodeFilterProp | Will be used for filtering if `filterTreeNode` returns true | string | `value` |  |
 | treeNodeLabelProp | Will render as content of select | string | `title` |  |
 | value | To set the current selected treeNode(s) | string \| string\[] | - |  |
@@ -61,10 +61,10 @@ Tree selection control.
 
 ### Tree Methods
 
-| Name    | Description  | Version |
-| ------- | ------------ | ------- |
-| blur()  | Remove focus |         |
-| focus() | Get focus    |         |
+| Name | Description | Version |
+| --- | --- | --- |
+| blur() | Remove focus |  |
+| focus() | Get focus |  |
 
 ### TreeNode props
 
@@ -72,12 +72,12 @@ Tree selection control.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| selectable | Whether can be selected | boolean | true |  |
 | checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - |  |
 | disableCheckbox | Disables the checkbox of the treeNode | boolean | false |  |
 | disabled | Disabled or not | boolean | false |  |
 | isLeaf | Leaf node or not | boolean | false |  |
 | key | Required property (unless using `treeDataSimpleMode`), should be unique in the tree | string | - |  |
+| selectable | Whether can be selected | boolean | true |  |
 | title | Content showed on the treeNodes | ReactNode | `---` |  |
 | value | Will be treated as `treeNodeFilterProp` by default, should be unique in the tree | string | - |  |
 
diff --git a/components/tree-select/index.zh-CN.md b/components/tree-select/index.zh-CN.md
index ffe1f40108..13484df6d1 100644
--- a/components/tree-select/index.zh-CN.md
+++ b/components/tree-select/index.zh-CN.md
@@ -29,7 +29,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 | dropdownStyle | 下拉菜单的样式 | object | - |  |
 | filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean \| function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值) | function |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | function(triggerNode) | () => document.body |  |
-| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 {value: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string[] } 的格式 | boolean | false |  |
+| labelInValue | 是否把每个选项的 label 包装到 value 中，会把 value 类型从 `string` 变为 {value: string, label: ReactNode, halfChecked(treeCheckStrictly 时有效): string\[] } 的格式 | boolean | false |  |
 | listHeight | 设置弹窗滚动高度 | number | 256 |  |
 | loadData | 异步加载数据 | function(node) | - |  |
 | maxTagCount | 最多显示多少个 tag | number | - |  |
@@ -37,13 +37,12 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 | multiple | 支持多选（当设置 treeCheckable 时自动变为 true） | boolean | false |  |
 | placeholder | 选择框默认文字 | string | - |  |
 | searchValue | 搜索框的值，可以通过 `onSearch` 获取用户输入 | string | - |  |
-| treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |  |
-| switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode | - |
+| showArrow | 是否显示 `suffixIcon`，单选模式下默认 `true` | boolean | - |  |
 | showCheckedStrategy | 定义选中项回填的方式。`TreeSelect.SHOW_ALL`: 显示所有选中节点(包括父节点)。`TreeSelect.SHOW_PARENT`: 只显示父节点(当父节点下所有子节点都选中时)。 默认只显示子节点 | `TreeSelect.SHOW_ALL` \| `TreeSelect.SHOW_PARENT` \| `TreeSelect.SHOW_CHILD` | `TreeSelect.SHOW_CHILD` |  |
 | showSearch | 是否支持搜索框 | boolean | 单选：false \| 多选：true |  |
 | size | 选择框大小 | `large` \| `middle` \| `small` | - |  |
-| showArrow | 是否显示 `suffixIcon`，单选模式下默认 `true` | boolean | - |  |
 | suffixIcon | 自定义的选择框后缀图标, 多选模式下必须同时设置 `showArrow` 为 true | ReactNode | - |  |
+| switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode | - |  |
 | treeCheckable | 显示 Checkbox | boolean | false |  |
 | treeCheckStrictly | `checkable` 状态下节点选择完全受控（父子节点选中状态不再关联），会使得 `labelInValue` 强制为 true | boolean | false |  |
 | treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（value 在整个树范围内唯一） | array&lt;{value, title, children, \[disabled, disableCheckbox, selectable, checkable]}> | \[] |  |
@@ -51,6 +50,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 | treeDefaultExpandAll | 默认展开所有树节点 | boolean | false |  |
 | treeDefaultExpandedKeys | 默认展开的树节点 | string\[] | - |  |
 | treeExpandedKeys | 设置展开的树节点 | string\[] | - |  |
+| treeIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |  |
 | treeNodeFilterProp | 输入项过滤对应的 treeNode 属性 | string | `value` |  |
 | treeNodeLabelProp | 作为显示的 prop 设置 | string | `title` |  |
 | value | 指定当前选中的条目 | string \| string\[] | - |  |
@@ -62,25 +62,25 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Ax4DA0njr/TreeSelect.svg
 
 ### Tree 方法
 
-| 名称    | 描述     | 版本 |
-| ------- | -------- | ---- |
-| blur()  | 移除焦点 |      |
-| focus() | 获取焦点 |      |
+| 名称 | 描述 | 版本 |
+| --- | --- | --- |
+| blur() | 移除焦点 |  |
+| focus() | 获取焦点 |  |
 
 ### TreeNode props
 
 > 建议使用 treeData 来代替 TreeNode，免去手工构造麻烦
 
-| 参数            | 说明                                               | 类型      | 默认值 | 版本 |
-| --------------- | -------------------------------------------------- | --------- | ------ | ---- |
-| selectable      | 是否可选                                           | boolean   | true   |      |
-| checkable       | 当树为 Checkbox 时，设置独立节点是否展示 Checkbox  | boolean   | -      |      |
-| disableCheckbox | 禁掉 Checkbox                                      | boolean   | false  |      |
-| disabled        | 是否禁用                                           | boolean   | false  |      |
-| isLeaf          | 是否是叶子节点                                     | boolean   | false  |      |
-| key             | 此项必须设置（其值在整个树范围内唯一）             | string    | -      |      |
-| title           | 树节点显示的内容                                   | ReactNode | `---`  |      |
-| value           | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string    | -      |      |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| checkable | 当树为 Checkbox 时，设置独立节点是否展示 Checkbox | boolean | - |  |
+| disableCheckbox | 禁掉 Checkbox | boolean | false |  |
+| disabled | 是否禁用 | boolean | false |  |
+| isLeaf | 是否是叶子节点 | boolean | false |  |
+| key | 此项必须设置（其值在整个树范围内唯一） | string | - |  |
+| selectable | 是否可选 | boolean | true |  |
+| title | 树节点显示的内容 | ReactNode | `---` |  |
+| value | 默认根据此属性值进行筛选（其值在整个树范围内唯一） | string | - |  |
 
 ## FAQ
 
diff --git a/components/tree/demo/draggable.md b/components/tree/demo/draggable.md
index a584b111cf..a34874c42d 100644
--- a/components/tree/demo/draggable.md
+++ b/components/tree/demo/draggable.md
@@ -71,7 +71,7 @@ class Demo extends React.Component {
           return callback(data[i], i, data);
         }
         if (data[i].children) {
-           loop(data[i].children, key, callback);
+          loop(data[i].children, key, callback);
         }
       }
     };
diff --git a/components/tree/demo/line.md b/components/tree/demo/line.md
index 1e3a7c656b..755dca5192 100644
--- a/components/tree/demo/line.md
+++ b/components/tree/demo/line.md
@@ -70,7 +70,7 @@ const treeData = [
           { title: 'leaf', key: '0-1-0-1', icon: <CarryOutOutlined /> },
         ],
       },
-    ]
+    ],
   },
 ];
 
diff --git a/components/tree/index.en-US.md b/components/tree/index.en-US.md
index 4f0ed792d7..58981c1877 100644
--- a/components/tree/index.en-US.md
+++ b/components/tree/index.en-US.md
@@ -32,14 +32,15 @@ Almost anything can be represented in a tree structure. Examples include directo
 | expandedKeys | (Controlled) Specifies the keys of the expanded treeNodes | string\[] | \[] |  |
 | filterTreeNode | Defines a function to filter (highlight) treeNodes. When the function returns `true`, the corresponding treeNode will be highlighted | function(node) | - |  |
 | height | Config virtual scroll height. Will not support horizontal scroll when enable this | number | - |  |
+| icon | Customize treeNode icon | ReactNode \| (props) => ReactNode | - |  |
 | loadData | Load data asynchronously | function(node) | - |  |
 | loadedKeys | (Controlled) Set loaded tree nodes. Need work with `loadData` | string\[] | \[] |  |
 | multiple | Allows selecting multiple treeNodes | boolean | false |  |
 | selectable | Whether can be selected | boolean | true |  |
 | selectedKeys | (Controlled) Specifies the keys of the selected treeNodes | string\[] | - |  |
 | showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to true | boolean | false |  |
-| switcherIcon | Customize collapse/expand icon of tree node | ReactNode | - |  |
 | showLine | Shows a connecting line | boolean \| {showLeafIcon: boolean} | false |  |
+| switcherIcon | Customize collapse/expand icon of tree node | ReactNode | - |  |
 | titleRender | Customize tree node title render | (nodeData) => ReactNode | - | 4.5.0 |
 | treeData | The treeNodes data Array, if set it then you need not to construct children TreeNode. (key should be unique across the whole array) | array&lt;{ key, title, children, \[disabled, selectable] }> | - |  |
 | virtual | Disable virtual scroll when set to false | boolean | true | 4.1.0 |
@@ -54,13 +55,12 @@ Almost anything can be represented in a tree structure. Examples include directo
 | onLoad | Callback function for when a treeNode is loaded | function(loadedKeys, {event, node}) | - |  |
 | onRightClick | Callback function for when the user right clicks a treeNode | function({event, node}) | - |  |
 | onSelect | Callback function for when the user clicks a treeNode | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |  |
-| icon | Customize treeNode icon | ReactNode \| (props) => ReactNode | - |  |
 
 ### TreeNode props
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - |
+| Property | Description | Type | Default |  |
+| --- | --- | --- | --- | --- |
+| checkable | When Tree is checkable, set TreeNode display Checkbox or not | boolean | - |  |
 | disableCheckbox | Disables the checkbox of the treeNode | boolean | false |  |
 | disabled | Disables the treeNode | boolean | false |  |
 | icon | Customize icon. When you pass component, whose render will receive full TreeNode props as component props | ReactNode \| (props) => ReactNode | - |  |
@@ -95,15 +95,15 @@ Before `3.4.0`: The number of treeNodes can be very large, but when `checkable=t
 
 ### Tree Methods
 
-| Name              | Description                          |
-| ----------------- | ------------------------------------ |
+| Name | Description |
+| --- | --- |
 | scrollTo({ key }) | Scroll to key item in virtual scroll |
 
 ## FAQ
 
 ### How to hide file icon when use showLine?
 
-File icon realize by using switcherIcon. You can overwrite the style to hide it: https://codesandbox.io/s/883vo47xp8
+File icon realize by using switcherIcon. You can overwrite the style to hide it: <https://codesandbox.io/s/883vo47xp8>
 
 ### Why defaultExpandedAll not working on ajax data?
 
diff --git a/components/tree/index.zh-CN.md b/components/tree/index.zh-CN.md
index 4a5425ba2d..b533ee39c4 100644
--- a/components/tree/index.zh-CN.md
+++ b/components/tree/index.zh-CN.md
@@ -33,14 +33,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
 | expandedKeys | （受控）展开指定的树节点 | string\[] | \[] |  |
 | filterTreeNode | 按需筛选树节点（高亮），返回 true | function(node) | - |  |
 | height | 设置虚拟滚动容器高度，设置后内部节点不再支持横向滚动 | number | - |  |
+| icon | 自定义树节点图标。 | ReactNode \| (props) => ReactNode | - |  |
 | loadData | 异步加载数据 | function(node) | - |  |
 | loadedKeys | （受控）已经加载的节点，需要配合 `loadData` 使用 | string\[] | \[] |  |
 | multiple | 支持点选多个节点（节点本身） | boolean | false |  |
 | selectable | 是否可选中 | boolean | true |  |
 | selectedKeys | （受控）设置选中的树节点 | string\[] | - |  |
 | showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |  |
-| switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode | - |
 | showLine | 是否展示连接线 | boolean \| {showLeafIcon: boolean} | false |  |
+| switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode | - |  |
 | titleRender | 自定义渲染节点 | (nodeData) => ReactNode | - | 4.5.0 |
 | treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） | array&lt;{key, title, children, \[disabled, selectable]}> | - |  |
 | virtual | 设置 false 时关闭虚拟滚动 | boolean | true | 4.1.0 |
@@ -55,20 +56,19 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
 | onLoad | 节点加载完毕时触发 | function(loadedKeys, {event, node}) | - |  |
 | onRightClick | 响应右键点击 | function({event, node}) | - |  |
 | onSelect | 点击树节点触发 | function(selectedKeys, e:{selected: bool, selectedNodes, node, event}) | - |  |
-| icon | 自定义树节点图标。 | ReactNode \| (props) => ReactNode | - |  |
 
 ### TreeNode props
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| checkable | 当树为 checkable 时，设置独立节点是否展示 Checkbox | boolean | - |
-| disableCheckbox | 禁掉 checkbox | boolean | false |
-| disabled | 禁掉响应 | boolean | false |
+| 参数 | 说明 | 类型 | 默认值 |  |
+| --- | --- | --- | --- | --- |
+| checkable | 当树为 checkable 时，设置独立节点是否展示 Checkbox | boolean | - |  |
+| disableCheckbox | 禁掉 checkbox | boolean | false |  |
+| disabled | 禁掉响应 | boolean | false |  |
 | icon | 自定义图标。可接收组件，props 为当前节点 props | ReactNode \| (props) => ReactNode | - |  |
-| isLeaf | 设置为叶子节点(设置了`loadData`时有效)。为 `false` 时会强制将其作为父节点 | boolean | - |
-| key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！ | string | (内部计算出的节点位置) |
-| selectable | 设置节点是否可被选中 | boolean | true |
-| title | 标题 | ReactNode | `---` |
+| isLeaf | 设置为叶子节点(设置了`loadData`时有效)。为 `false` 时会强制将其作为父节点 | boolean | - |  |
+| key | 被树的 (default)ExpandedKeys / (default)CheckedKeys / (default)SelectedKeys 属性所用。注意：整个树范围内的所有节点的 key 值不能重复！ | string | (内部计算出的节点位置) |  |
+| selectable | 设置节点是否可被选中 | boolean | true |  |
+| title | 标题 | ReactNode | `---` |  |
 
 ### DirectoryTree props
 
@@ -96,15 +96,15 @@ cover: https://gw.alipayobjects.com/zos/alicdn/Xh-oWqg9k/Tree.svg
 
 ### Tree 方法
 
-| 名称              | 说明                            |
-| ----------------- | ------------------------------- |
+| 名称 | 说明 |
+| --- | --- |
 | scrollTo({ key }) | 虚拟滚动下，滚动到指定 key 条目 |
 
 ## FAQ
 
 ### 在 showLine 时，如何隐藏子节点图标？
 
-文件图标通过 switcherIcon 来实现，如果不需要你可以覆盖对应的样式：https://codesandbox.io/s/883vo47xp8
+文件图标通过 switcherIcon 来实现，如果不需要你可以覆盖对应的样式：<https://codesandbox.io/s/883vo47xp8>
 
 ### defaultExpandedAll 在异步加载数据时为何不生效？
 
diff --git a/components/typography/Base.tsx b/components/typography/Base.tsx
index 3ffa5e3ffb..454e7bb484 100644
--- a/components/typography/Base.tsx
+++ b/components/typography/Base.tsx
@@ -1,7 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import toArray from 'rc-util/lib/Children/toArray';
-import findDOMNode from 'rc-util/lib/Dom/findDOMNode';
 import copy from 'copy-to-clipboard';
 import omit from 'omit.js';
 import EditOutlined from '@ant-design/icons/EditOutlined';
@@ -318,7 +317,7 @@ class Base extends React.Component<InternalBlockProps, BaseState> {
     );
 
     const { content, text, ellipsis } = measure(
-      findDOMNode(this.contentRef.current),
+      this.contentRef.current,
       { rows, suffix },
       children,
       this.renderOperations(true),
diff --git a/components/typography/__tests__/__snapshots__/demo.test.js.snap b/components/typography/__tests__/__snapshots__/demo.test.js.snap
index a17e23ede5..0513330c54 100644
--- a/components/typography/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/typography/__tests__/__snapshots__/demo.test.js.snap
@@ -187,6 +187,18 @@ exports[`renders ./components/typography/demo/basic.md correctly 1`] = `
       </li>
     </ul>
   </div>
+  <div
+    class="ant-typography"
+  >
+    <blockquote>
+      AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。
+我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。
+    </blockquote>
+    <pre>
+      AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。
+我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。
+    </pre>
+  </div>
   <div
     class="ant-typography"
   >
diff --git a/components/typography/demo/basic.md b/components/typography/demo/basic.md
index a9122537e3..f19d35ff6a 100644
--- a/components/typography/demo/basic.md
+++ b/components/typography/demo/basic.md
@@ -18,6 +18,9 @@ import { Typography, Divider } from 'antd';
 
 const { Title, Paragraph, Text, Link } = Typography;
 
+const blockContent = `AntV 是蚂蚁金服全新一代数据可视化解决方案，致力于提供一套简单方便、专业可靠、不限可能的数据可视化最佳实践。得益于丰富的业务场景和用户需求挑战，AntV 经历多年积累与不断打磨，已支撑整个阿里集团内外 20000+ 业务系统，通过了日均千万级 UV 产品的严苛考验。
+我们正在基础图表，图分析，图编辑，地理空间可视化，智能可视化等各个可视化的领域耕耘，欢迎同路人一起前行。`;
+
 ReactDOM.render(
   <Typography>
     <Title>Introduction</Title>
@@ -92,6 +95,11 @@ ReactDOM.render(
       </ul>
     </Paragraph>
 
+    <Paragraph>
+      <blockquote>{blockContent}</blockquote>
+      <pre>{blockContent}</pre>
+    </Paragraph>
+
     <Paragraph>
       按<Text keyboard>Esc</Text>键退出阅读……
     </Paragraph>
diff --git a/components/typography/index.en-US.md b/components/typography/index.en-US.md
index 9c5d6354a9..e6063321a9 100644
--- a/components/typography/index.en-US.md
+++ b/components/typography/index.en-US.md
@@ -25,12 +25,12 @@ Basic text writing, including headings, body text, lists, and more.
 | disabled | Disabled content | boolean | false |  |
 | editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | [editable](#editable) |
 | ellipsis | Display ellipsis when text overflows | boolean | false |  |
-| mark | Marked style | boolean | false |  |
 | keyboard | Keyboard style | boolean | false | 4.3.0 |
-| underline | Underlined style | boolean | false |  |
-| onChange | Trigger when user edits the content | function(string) | - |  |
+| mark | Marked style | boolean | false |  |
 | strong | Bold style | boolean | false |  |
 | type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 |
+| underline | Underlined style | boolean | false |  |
+| onChange | Trigger when user edits the content | function(string) | - |  |
 
 ### Typography.Title
 
@@ -44,9 +44,9 @@ Basic text writing, including headings, body text, lists, and more.
 | ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |
 | level | Set content importance. Match with `h1`, `h2`, `h3`, `h4`, `h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 |
 | mark | Marked style | boolean | false |  |
+| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 |
 | underline | Underlined style | boolean | false |  |
 | onChange | Trigger when user edits the content | function(string) | - |  |
-| type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 |
 
 ### Typography.Paragraph
 
@@ -59,74 +59,68 @@ Basic text writing, including headings, body text, lists, and more.
 | editable | If editable. Can control edit state when is object | boolean \| [editable](#editable) | false | [editable](#editable) |
 | ellipsis | Display ellipsis when text overflows, can configure rows and expandable by using object | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |
 | mark | Marked style | boolean | false |  |
-| underline | Underlined style | boolean | false |  |
-| onChange | Trigger when user edits the content | function(string) | - |  |
 | strong | Bold style | boolean | false |  |
 | type | Content type | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 |
+| underline | Underlined style | boolean | false |  |
+| onChange | Trigger when user edits the content | function(string) | - |  |
 
 ### copyable
 
-```
-{
-  text: string,
-  onCopy: function,
-  icon: ReactNode,
-  tooltips: false | [ReactNode, ReactNode],
-}
-```
+    {
+      text: string,
+      onCopy: function,
+      icon: ReactNode,
+      tooltips: false | [ReactNode, ReactNode],
+    }
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| icon | Custom copy icon: \[copyIcon, copiedIcon] | \[ReactNode, ReactNode] | - | 4.6.0 |
 | text | The text to copy | string | - |  |
+| tooltips | Custom tooltip text, hide when it is false | \[ReactNode, ReactNode] | \[`Copy`, `Copied`] | 4.4.0 |
 | onCopy | Called when copied text | function | - |  |
-| icon | Custom copy icon: \[copyIcon, copiedIcon] | \[ReactNode, ReactNode\] | - | 4.6.0 |
-| tooltips | Custom tooltip text, hide when it is false | \[ReactNode, ReactNode\] | \[`Copy`, `Copied`] | 4.4.0 |
 
 ### editable
 
-```
-{
-  icon: ReactNode,
-  tooltip: boolean | ReactNode,
-  editing: boolean,
-  maxLength: number,
-  autoSize: boolean | { minRows: number, maxRows: number },
-  onStart: function,
-  onChange: function(string),
-}
-```
+    {
+      icon: ReactNode,
+      tooltip: boolean | ReactNode,
+      editing: boolean,
+      maxLength: number,
+      autoSize: boolean | { minRows: number, maxRows: number },
+      onStart: function,
+      onChange: function(string),
+    }
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| icon | Custom editable icon | ReactNode | &lt;EditOutlined /> | 4.6.0 |
-| tooltip | Custom tooltip text, hide when it is false | boolean \| ReactNode | `Edit` | 4.6.0 |
-| editing | Whether to be editable | boolean | false |  |
-| maxLength | `maxLength` attribute of textarea | number | - | 4.4.0 |
 | autoSize | `autoSize` attribute of textarea | boolean \| { minRows: number, maxRows: number } | - | 4.4.0 |
-| onStart | Called when enter editable state | function | - |  |
+| editing | Whether to be editable | boolean | false |  |
+| icon | Custom editable icon | ReactNode | &lt;EditOutlined /> | 4.6.0 |
+| maxLength | `maxLength` attribute of textarea | number | - | 4.4.0 |
+| tooltip | Custom tooltip text, hide when it is false | boolean \| ReactNode | `Edit` | 4.6.0 |
 | onChange | Called when input at textarea | function(event) | - |  |
+| onStart | Called when enter editable state | function | - |  |
 
 ### ellipsis
 
-```
-{
-  rows: number,
-  expandable: boolean,
-  suffix: string,
-  symbol: ReactNode,
-  onExpand: function(event),
-  onEllipsis: function(ellipsis),
-}
-```
+    {
+      rows: number,
+      expandable: boolean,
+      suffix: string,
+      symbol: ReactNode,
+      onExpand: function(event),
+      onEllipsis: function(ellipsis),
+    }
 
-| Property   | Description                               | Type               | Default | Version |
-| ---------- | ----------------------------------------- | ------------------ | ------- | ------- |
-| rows       | Max rows of content                       | number             | -       |         |
-| expandable | Whether to be expandable                  | boolean            | -       |         |
-| suffix     | Suffix of ellipsis content                | ReactNode          | -       |         |
-| symbol     | Custom `...` symbol of ellipsis           | ReactNode          | `...`   |         |
-| onExpand   | Called when expand content                | function(event)    | -       |         |
-| onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | -       | 4.2.0   |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| expandable | Whether to be expandable | boolean | - |  |
+| rows | Max rows of content | number | - |  |
+| suffix | Suffix of ellipsis content | ReactNode | - |  |
+| symbol | Custom `...` symbol of ellipsis | ReactNode | `...` |  |
+| onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - | 4.2.0 |
+| onExpand | Called when expand content | function(event) | - |  |
 
 ## FAQ
 
diff --git a/components/typography/index.zh-CN.md b/components/typography/index.zh-CN.md
index f5eaf4052b..dac1a25f3a 100644
--- a/components/typography/index.zh-CN.md
+++ b/components/typography/index.zh-CN.md
@@ -26,11 +26,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
 | disabled | 禁用文本 | boolean | false |  |
 | editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) |
 | ellipsis | 自动溢出省略 | boolean | false |  |
-| mark | 添加标记样式 | boolean | false |  |
 | keyboard | 添加键盘样式 | boolean | false | 4.3.0 |
-| underline | 添加下划线样式 | boolean | false |  |
+| mark | 添加标记样式 | boolean | false |  |
 | strong | 是否加粗 | boolean | false |  |
 | type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 |
+| underline | 添加下划线样式 | boolean | false |  |
 
 ### Typography.Title
 
@@ -44,9 +44,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
 | ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |
 | level | 重要程度，相当于 `h1`、`h2`、`h3`、`h4`、`h5` | number: 1, 2, 3, 4, 5 | 1 | 5: 4.6.0 |
 | mark | 添加标记样式 | boolean | false |  |
+| type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 |
 | underline | 添加下划线样式 | boolean | false |  |
 | onChange | 当用户提交编辑内容时触发 | function(string) | - |  |
-| type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 |
 
 ### Typography.Paragraph
 
@@ -59,74 +59,68 @@ cover: https://gw.alipayobjects.com/zos/alicdn/GOM1KQ24O/Typography.svg
 | editable | 是否可编辑，为对象时可对编辑进行控制 | boolean \| [editable](#editable) | false | [editable](#editable) |
 | ellipsis | 自动溢出省略，为对象时可设置省略行数、是否可展开、添加后缀等 | boolean \| [ellipsis](#ellipsis) | false | [ellipsis](#ellipsis) |
 | mark | 添加标记样式 | boolean | false |  |
-| underline | 添加下划线样式 | boolean | false |  |
-| onChange | 当用户提交编辑内容时触发 | function(string) | - |  |
 | strong | 是否加粗 | boolean | false |  |
 | type | 文本类型 | `secondary` \| `success` \| `warning` \| `danger` | - | success: 4.6.0 |
+| underline | 添加下划线样式 | boolean | false |  |
+| onChange | 当用户提交编辑内容时触发 | function(string) | - |  |
 
 ### copyable
 
-```
-{
-  text: string,
-  onCopy: function,
-  icon: ReactNode,
-  tooltips: false | [ReactNode, ReactNode],
-}
-```
+    {
+      text: string,
+      onCopy: function,
+      icon: ReactNode,
+      tooltips: false | [ReactNode, ReactNode],
+    }
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| icon | 自定义拷贝图标：\[默认图标, 拷贝后的图标] | \[ReactNode, ReactNode] | - | 4.6.0 |
 | text | 拷贝到剪切板里的文本 | string | - |  |
+| tooltips | 自定义提示文案，为 false 时隐藏文案 | \[ReactNode, ReactNode] | \[`复制`, `复制成功`] | 4.4.0 |
 | onCopy | 拷贝成功的回调函数 | function | - |  |
-| icon | 自定义拷贝图标：\[默认图标, 拷贝后的图标] | \[ReactNode, ReactNode\] | - | 4.6.0 |
-| tooltips | 自定义提示文案，为 false 时隐藏文案 | \[ReactNode, ReactNode\] | \[`复制`, `复制成功`] | 4.4.0 |
 
 ### editable
 
-```
-{
-  icon: ReactNode,
-  tooltip: boolean | ReactNode,
-  editing: boolean,
-  maxLength: number,
-  autoSize: boolean | { minRows: number, maxRows: number },
-  onStart: function,
-  onChange: function(string),
-}
-```
+    {
+      icon: ReactNode,
+      tooltip: boolean | ReactNode,
+      editing: boolean,
+      maxLength: number,
+      autoSize: boolean | { minRows: number, maxRows: number },
+      onStart: function,
+      onChange: function(string),
+    }
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| icon | 自定义编辑图标 | ReactNode | &lt;EditOutlined /> | 4.6.0 |
-| tooltip | 自定义提示文本，为 false 时关闭 | boolean \| ReactNode | `编辑` | 4.6.0 |
-| editing | 控制是否是编辑中状态 | boolean | false |  |
-| maxLength | 编辑中文本域最大长度 | number | - | 4.4.0 |
 | autoSize | 自动 resize 文本域 | boolean \| { minRows: number, maxRows: number } | - | 4.4.0 |
-| onStart | 进入编辑中状态时触发 | function | - |  |
+| editing | 控制是否是编辑中状态 | boolean | false |  |
+| icon | 自定义编辑图标 | ReactNode | &lt;EditOutlined /> | 4.6.0 |
+| maxLength | 编辑中文本域最大长度 | number | - | 4.4.0 |
+| tooltip | 自定义提示文本，为 false 时关闭 | boolean \| ReactNode | `编辑` | 4.6.0 |
 | onChange | 文本域编辑时触发 | function(event) | - |  |
+| onStart | 进入编辑中状态时触发 | function | - |  |
 
 ### ellipsis
 
-```
-{
-  rows: number,
-  expandable: boolean,
-  suffix: string,
-  symbol: ReactNode,
-  onExpand: function(event),
-  onEllipsis: function(ellipsis),
-}
-```
+    {
+      rows: number,
+      expandable: boolean,
+      suffix: string,
+      symbol: ReactNode,
+      onExpand: function(event),
+      onEllipsis: function(ellipsis),
+    }
 
-| 参数       | 说明               | 类型               | 默认值 | 版本  |
-| ---------- | ------------------ | ------------------ | ------ | ----- |
-| rows       | 最多显示的行数     | number             | -      |       |
-| expandable | 是否可展开         | boolean            | -      |       |
-| suffix     | 自定义省略内容后缀 | ReactNode          | -      |       |
-| symbol     | 自定义省略符号     | ReactNode          | `...`  |       |
-| onExpand   | 点击展开时的回调   | function(event)    | -      |       |
-| onEllipsis | 触发省略时的回调   | function(ellipsis) | -      | 4.2.0 |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| expandable | 是否可展开 | boolean | - |  |
+| rows | 最多显示的行数 | number | - |  |
+| suffix | 自定义省略内容后缀 | ReactNode | - |  |
+| symbol | 自定义省略符号 | ReactNode | `...` |  |
+| onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |
+| onExpand | 点击展开时的回调 | function(event) | - |  |
 
 ## FAQ
 
diff --git a/components/typography/style/index.less b/components/typography/style/index.less
index 7458c551e1..44f23edba3 100644
--- a/components/typography/style/index.less
+++ b/components/typography/style/index.less
@@ -217,6 +217,38 @@
     list-style-type: decimal;
   }
 
+  // pre & block
+  pre,
+  blockquote {
+    margin: 1em 0;
+  }
+
+  pre {
+    padding: 0.4em 0.6em;
+    white-space: pre-wrap;
+    word-wrap: break-word;
+    background: rgba(150, 150, 150, 0.1);
+    border: 1px solid rgba(100, 100, 100, 0.2);
+    border-radius: 3px;
+
+    // Compatible for marked
+    code {
+      display: inline;
+      margin: 0;
+      padding: 0;
+      font-size: inherit;
+      font-family: inherit;
+      background: transparent;
+      border: 0;
+    }
+  }
+
+  blockquote {
+    padding: 0 0 0 0.6em;
+    border-left: 4px solid rgba(100, 100, 100, 0.2);
+    opacity: 0.85;
+  }
+
   // ============ Ellipsis ============
   &-ellipsis-single-line {
     overflow: hidden;
diff --git a/components/upload/index.en-US.md b/components/upload/index.en-US.md
index 866c976da6..7e6390b7bd 100644
--- a/components/upload/index.en-US.md
+++ b/components/upload/index.en-US.md
@@ -21,31 +21,31 @@ Uploading is the process of publishing information (web pages, text, pictures, v
 | --- | --- | --- | --- | --- |
 | accept | File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - |  |
 | action | Uploading URL | string \| (file) => Promise | - |  |
-| method | The http method of upload request | string | `post` |  |
-| directory | Support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false |  |
 | beforeUpload | Hook function which will be executed before uploading. Uploading will be stopped with `false` or a rejected Promise returned. **Warning：this function is not supported in IE9** | (file, fileList) => boolean \| Promise | - |  |
 | customRequest | Override for the default xhr behavior allowing for additional customization and ability to implement your own XMLHttpRequest | function | - |  |
 | data | Uploading extra params or function which can return uploading extra params | object \| (file) => object \| Promise&lt;object> | - |  |
 | defaultFileList | Default list of files that have been uploaded | object\[] | - |  |
+| directory | Support upload whole directory ([caniuse](https://caniuse.com/#feat=input-file-directory)) | boolean | false |  |
 | disabled | Disable upload button | boolean | false |  |
 | fileList | List of files that have been uploaded (controlled). Here is a common issue [#2423](https://github.com/ant-design/ant-design/issues/2423) when using it | object\[] | - |  |
 | headers | Set request headers, valid above IE10 | object | - |  |
+| iconRender | Custom show icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - |  |
+| isImageUrl | Customize if render &lt;img /> in thumbnail | (file: UploadFile) => boolean | [(inside implementation)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) |  |
+| itemRender | Custom item of uploadList | (originNode: ReactElement, file: UploadFile, fileList?: object\[]) => React.ReactNode | - | 4.7.0 |
 | listType | Built-in stylesheets, support for three types: `text`, `picture` or `picture-card` | string | `text` |  |
+| method | The http method of upload request | string | `post` |  |
 | multiple | Whether to support selected multiple file. `IE10+` supported. You can select multiple files with CTRL holding down while multiple is set to be true | boolean | false |  |
 | name | The name of uploading file | string | `file` |  |
-| previewFile | Customize preview file logic | (file: File \| Blob) => Promise&lt;dataURL: string> | - |  |
-| isImageUrl | Customize if render &lt;img /> in thumbnail | (file: UploadFile) => boolean | [(inside implementation)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) |  |
-| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` and `downloadIcon` individually | boolean \| { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
-| withCredentials | The ajax upload with cookie sent | boolean | false |  |
 | openFileDialogOnClick | Click open file dialog | boolean | true |  |
+| previewFile | Customize preview file logic | (file: File \| Blob) => Promise&lt;dataURL: string> | - |  |
+| progress | Custom progress bar | [ProgressProps](/components/progress/#API) (support `type="line"` only) | { strokeWidth: 2, showInfo: false } | 4.3.0 |
+| showUploadList | Whether to show default upload list, could be an object to specify `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` and `downloadIcon` individually | boolean \| { showPreviewIcon?: boolean, showDownloadIcon?: boolean, showRemoveIcon?: boolean, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
+| transformFile   | Customize transform file before request | Function(file): string \| Blob \| File \| Promise&lt;string \| Blob \| File> | - |  |
+| withCredentials | The ajax upload with cookie sent | boolean | false |  |
 | onChange | A callback function, can be executed when uploading state is changing, see [onChange](#onChange) | function | - |  |
+| onDownload | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB | function(file): void | (Jump to new TAB) |  |
 | onPreview | A callback function, will be executed when file link or preview icon is clicked | function(file) | - |  |
 | onRemove | A callback function, will be executed when removing file button is clicked, remove event will be prevented when return value is false or a Promise which resolve(false) or reject | function(file): boolean \| Promise | - |  |
-| onDownload | Click the method to download the file, pass the method to perform the method logic, do not pass the default jump to the new TAB | function(file): void | (Jump to new TAB) |  |
-| transformFile   | Customize transform file before request | Function(file): string \| Blob \| File \| Promise&lt;string \| Blob \| File> | - |  |
-| iconRender | Custom show icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - |  |
-| progress | Custom progress bar | [ProgressProps](/components/progress/#API) (support `type="line"` only) | { strokeWidth: 2, showInfo: false } | 4.3.0 |
-| itemRender | Custom item of uploadList | (originNode: ReactElement, file: UploadFile, fileList?: object\[]) => React.ReactNode | - | 4.7.0 |
 
 ### onChange
 
@@ -75,6 +75,7 @@ When uploading state change, it returns:
    ```
 
 2. `fileList` current list of files
+
 3. `event` response from server, including uploading progress, supported by advanced browsers.
 
 ## FAQ
diff --git a/components/upload/index.zh-CN.md b/components/upload/index.zh-CN.md
index 6564eb2bce..abadce8138 100644
--- a/components/upload/index.zh-CN.md
+++ b/components/upload/index.zh-CN.md
@@ -22,31 +22,31 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
 | --- | --- | --- | --- | --- |
 | accept | 接受上传的文件类型, 详见 [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept) | string | - |  |
 | action | 上传的地址 | string \| (file) => Promise | - |  |
-| method | 上传请求的 http method | string | `post` |  |
-| directory | 支持上传文件夹（[caniuse](https://caniuse.com/#feat=input-file-directory)） | boolean | false |  |
 | beforeUpload | 上传文件之前的钩子，参数为上传的文件，若返回 `false` 则停止上传。支持返回一个 Promise 对象，Promise 对象 reject 时则停止上传，resolve 时开始上传（ resolve 传入 `File` 或 `Blob` 对象则上传 resolve 传入对象）。**注意：IE9 不支持该方法** | (file, fileList) => boolean \| Promise | - |  |
 | customRequest | 通过覆盖默认的上传行为，可以自定义自己的上传实现 | function | - |  |
 | data | 上传所需额外参数或返回上传额外参数的方法 | object\|(file) => object \| Promise&lt;object> | - |  |
 | defaultFileList | 默认已经上传的文件列表 | object\[] | - |  |
+| directory | 支持上传文件夹（[caniuse](https://caniuse.com/#feat=input-file-directory)） | boolean | false |  |
 | disabled | 是否禁用 | boolean | false |  |
 | fileList | 已经上传的文件列表（受控），使用此参数时，如果遇到 `onChange` 只调用一次的问题，请参考 [#2423](https://github.com/ant-design/ant-design/issues/2423) | object\[] | - |  |
 | headers | 设置上传的请求头部，IE10 以上有效 | object | - |  |
+| iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - |  |
+| isImageUrl | 自定义缩略图是否使用 &lt;img /> 标签进行显示 | (file: UploadFile) => boolean | [(内部实现)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) |  |
+| itemRender | 自定义上传列表项 | (originNode: ReactElement, file: UploadFile, fileList?: object\[]) => React.ReactNode | - | 4.7.0 |
 | listType | 上传列表的内建样式，支持三种基本样式 `text`, `picture` 和 `picture-card` | string | `text` |  |
+| method | 上传请求的 http method | string | `post` |  |
 | multiple | 是否支持多选文件，`ie10+` 支持。开启后按住 ctrl 可选择多个文件 | boolean | false |  |
 | name | 发到后台的文件参数名 | string | `file` |  |
-| previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise<dataURL: string> | - |  |
-| isImageUrl | 自定义缩略图是否使用 &lt;img /> 标签进行显示 | (file: UploadFile) => boolean | [(内部实现)](https://github.com/ant-design/ant-design/blob/4ad5830eecfb87471cd8ac588c5d992862b70770/components/upload/utils.tsx#L47-L68) |  |
-| showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
-| withCredentials | 上传请求时是否携带 cookie | boolean | false |  |
 | openFileDialogOnClick | 点击打开文件对话框 | boolean | true |  |
+| previewFile | 自定义文件预览逻辑 | (file: File \| Blob) => Promise&lt;dataURL: string> | - |  |
+| progress | 自定义进度条样式 | [ProgressProps](/components/progress/#API)（仅支持 `type="line"`） | { strokeWidth: 2, showInfo: false } | 4.3.0 |
+| showUploadList | 是否展示文件列表, 可设为一个对象，用于单独设定 `showPreviewIcon`, `showRemoveIcon`, `showDownloadIcon`, `removeIcon` 和 `downloadIcon` | boolean \| { showPreviewIcon?: boolean, showRemoveIcon?: boolean, showDownloadIcon?: boolean, removeIcon?: ReactNode \| (file: UploadFile) => ReactNode, downloadIcon?: ReactNode \| (file: UploadFile) => ReactNode } | true | function: 4.7.0 |
+| transformFile   | 在上传之前转换文件。支持返回一个 Promise 对象   | function(file): string \| Blob \| File \| Promise&lt;string \| Blob \| File> | -   |  |
+| withCredentials | 上传请求时是否携带 cookie | boolean | false |  |
 | onChange | 上传文件改变时的状态，详见 [onChange](#onChange) | function | - |  |
+| onDownload | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页 | function(file): void | (跳转新标签页) |  |
 | onPreview | 点击文件链接或预览图标时的回调 | function(file) | - |  |
 | onRemove   | 点击移除文件时的回调，返回值为 false 时不移除。支持返回一个 Promise 对象，Promise 对象 resolve(false) 或 reject 时不移除               | function(file): boolean \| Promise | -   |  |
-| onDownload | 点击下载文件时的回调，如果没有指定，则默认跳转到文件 url 对应的标签页 | function(file): void | (跳转新标签页) |  |
-| transformFile   | 在上传之前转换文件。支持返回一个 Promise 对象   | function(file): string \| Blob \| File \| Promise&lt;string \| Blob \| File> | -   |  |
-| iconRender | 自定义显示 icon | (file: UploadFile, listType?: UploadListType) => ReactNode | - |  |
-| progress | 自定义进度条样式 | [ProgressProps](/components/progress/#API)（仅支持 `type="line"`） | { strokeWidth: 2, showInfo: false } | 4.3.0 |
-| itemRender | 自定义上传列表项 | (originNode: ReactElement, file: UploadFile, fileList?: object\[]) => React.ReactNode | - | 4.7.0 |
 
 ### onChange
 
@@ -75,6 +75,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/QaeBt_ZMg/Upload.svg
    ```
 
 2. `fileList` 当前的文件列表。
+
 3. `event` 上传中的服务端响应内容，包含了上传进度等信息，高级浏览器支持。
 
 ## FAQ
diff --git a/docs/react/faq.en-US.md b/docs/react/faq.en-US.md
index 6d7e451547..8a78139357 100644
--- a/docs/react/faq.en-US.md
+++ b/docs/react/faq.en-US.md
@@ -29,12 +29,6 @@ Related issue: [#3487](https://github.com/ant-design/ant-design/issues/3487) [#3
 
 See: https://ant.design/docs/react/customize-theme .
 
-### Will you provide other themes?
-
-No, we follow Ant Design's design specification.
-
-Related issue: https://github.com/ant-design/ant-design/issues/1241
-
 ### How do I modify `Menu`/`Button`(etc.)'s style?
 
 While you can override a component's style, we don't recommend doing so. antd is not only a set of React components, but also a design specification as well.
diff --git a/docs/react/faq.zh-CN.md b/docs/react/faq.zh-CN.md
index 295c95fa91..8db4809d84 100644
--- a/docs/react/faq.zh-CN.md
+++ b/docs/react/faq.zh-CN.md
@@ -29,10 +29,6 @@ https://ant.design/components/select/#Select-props
 
 参考：https://ant.design/docs/react/customize-theme 。
 
-### 你们会提供其他主题吗？
-
-不，我们遵守 Ant Design 设计规范。https://github.com/ant-design/ant-design/issues/1241 。
-
 ### 如何修改 Ant Design 组件的默认样式？
 
 你可以覆盖它们的样式，但是我们不推荐这么做。antd 是一系列 React 组件，但同样是一套设计规范。
diff --git a/package.json b/package.json
index 9bff0bac3e..47becb3c9c 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "4.7.0",
+  "version": "4.7.2",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [
@@ -128,7 +128,7 @@
     "rc-image": "~4.0.0",
     "rc-input-number": "~6.1.0",
     "rc-mentions": "~1.5.0",
-    "rc-menu": "~8.7.1",
+    "rc-menu": "~8.8.2",
     "rc-motion": "^2.2.0",
     "rc-notification": "~4.5.2",
     "rc-pagination": "~3.1.0",
@@ -207,7 +207,7 @@
     "eslint-plugin-markdown": "^1.0.0",
     "eslint-plugin-react": "^7.20.6",
     "eslint-plugin-react-hooks": "^4.1.2",
-    "eslint-plugin-unicorn": "^22.0.0",
+    "eslint-plugin-unicorn": "^23.0.0",
     "eslint-tinker": "^0.5.0",
     "fetch-jsonp": "^1.1.3",
     "fs-extra": "^9.0.0",
@@ -263,8 +263,8 @@
     "react-text-loop": "^2.3.0",
     "react-virtualized": "^9.22.0",
     "react-window": "^1.8.5",
-    "remark": "^12.0.0",
-    "remark-cli": "^8.0.0",
+    "remark": "^13.0.0",
+    "remark-cli": "^9.0.0",
     "remark-lint": "^8.0.0",
     "remark-preset-lint-recommended": "^5.0.0",
     "reqwest": "^2.0.5",
diff --git a/scripts/previewEditor/template.html b/scripts/previewEditor/template.html
index 412b99c90e..53338c5969 100644
--- a/scripts/previewEditor/template.html
+++ b/scripts/previewEditor/template.html
@@ -17,7 +17,7 @@
     />
     <link rel="stylesheet" href="https://gw.alipayobjects.com/os/antfincdn/ciEbDYlN1f/umi.css" />
     <script>
-      window.routerBase = "/";
+      window.routerBase = '/';
     </script>
     <script>
       //! umi version: 3.2.14
diff --git a/scripts/print-changelog.js b/scripts/print-changelog.js
index 8663d3998d..235b0360ca 100644
--- a/scripts/print-changelog.js
+++ b/scripts/print-changelog.js
@@ -226,13 +226,13 @@ async function printLog() {
   fs.writeFileSync(path.join(__dirname, 'previewEditor', 'index.html'), html, 'utf8');
 
   // Start preview
-  const ls = spawn('npx', [
-    'http-server',
-    path.join(__dirname, 'previewEditor'),
-    '-c-1',
-    '-p',
-    '2893',
-  ]);
+  const ls = spawn(
+    'npx',
+    ['http-server', path.join(__dirname, 'previewEditor'), '-c-1', '-p', '2893'],
+    {
+      shell: true,
+    },
+  );
   ls.stdout.on('data', data => {
     console.log(data.toString());
   });
diff --git a/site/theme/static/template.html b/site/theme/static/template.html
index b0c3cae1b3..6239dc8635 100644
--- a/site/theme/static/template.html
+++ b/site/theme/static/template.html
@@ -79,9 +79,7 @@
     </script>
   </head>
   <body>
-    <div id="react-content">
-      {{ content | safe }}
-    </div>
+    <div id="react-content">{{ content | safe }}</div>
     {% for jsFile in manifest["js"] %}
     <script src="{{ root }}{{ jsFile }}"></script>
     {% endfor %}
diff --git a/site/theme/template/Content/Demo/CodePreview.jsx b/site/theme/template/Content/Demo/CodePreview.jsx
index d733f77715..fc06cb7847 100644
--- a/site/theme/template/Content/Demo/CodePreview.jsx
+++ b/site/theme/template/Content/Demo/CodePreview.jsx
@@ -9,9 +9,7 @@ const LANGS = {
 };
 
 const CodePreview = ({ toReactComponent, codes }) => {
-  const langList = Object.keys(codes)
-    .sort()
-    .reverse();
+  const langList = Object.keys(codes).sort().reverse();
 
   let content;
 
diff --git a/site/theme/template/Home/MorePage.tsx b/site/theme/template/Home/MorePage.tsx
index a2831cff10..30e15847ad 100644
--- a/site/theme/template/Home/MorePage.tsx
+++ b/site/theme/template/Home/MorePage.tsx
@@ -36,22 +36,22 @@ const MORE_LIST: MoreProps[] = [
     href: 'https://zhuanlan.zhihu.com/p/176534657',
   },
   {
-    title: '设计考古：工具类产品 Office',
+    title: '设计体系的响应式设计',
     description:
-      '微软 Office 办公系列产品的精髓在于 Ribbon（功能区）设计模式，它很好的解决了文档类、工具类复杂产品的高交互密度设计难题。',
-    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*nJogR776K8EAAAAAAAAAAABkARQnAQ',
-    date: '2019-11-05',
+      '在蚂蚁内部有着数量繁多且复杂的中后台业务系统，Ant Design 一直以来致力于从设计策略和资产的角度解决这些产品的体验一致性问题。',
+    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zk6CQphLepQAAAAAAAAAAAAAARQnAQ',
+    date: '2020-03-24',
     source: 'zhihu',
-    href: 'https://zhuanlan.zhihu.com/p/90304083',
+    href: 'https://zhuanlan.zhihu.com/p/109781992',
   },
   {
-    title: '设计法则「映射」: 让你的设计更符合直觉',
+    title: '我的按钮究竟该放哪儿！？',
     description:
-      '影响一个东西好不好用的因素有很多，本文将从125条通用设计法则中的「映射Mapping」出发，探讨一下这个法则对事物可用性的影响。',
-    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*AVELR486CNcAAAAAAAAAAABkARQnAQ',
-    date: '2019-08-24',
+      '按钮是一种使用广泛的基础界面元素，正因其使用的普遍性和重要性，我们需要并一直在探索建立按钮设计规范。',
+    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*d595RpGKQ_IAAAAAAAAAAAAAARQnAQ',
+    date: '2020-02-29',
     source: 'zhihu',
-    href: 'https://zhuanlan.zhihu.com/p/79632824',
+    href: 'https://zhuanlan.zhihu.com/p/109644406',
   },
 ];
 
diff --git a/site/theme/template/Home/RecommendPage.tsx b/site/theme/template/Home/RecommendPage.tsx
index b56726ee2c..d2d3089818 100644
--- a/site/theme/template/Home/RecommendPage.tsx
+++ b/site/theme/template/Home/RecommendPage.tsx
@@ -16,51 +16,49 @@ interface Recommend {
 
 const LIST_CN: Recommend[] = [
   {
-    title: '智能组件探索：这个工具栏会自动布局',
-    description:
-      '工程师只需要选择「我要展示哪些元素、每个元素有多少」，而「这些元素怎么摆」、「间距是多少」等细节问题都会根据规则自动生成。',
-    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ijAcT7rl4nwAAAAAAAAAAAAAARQnAQ',
-    href: 'https://zhuanlan.zhihu.com/p/188693322',
+    title: '树形控件在生产力工具中的设计',
+    description: '惊！半年实践血泪史，3000 字深度好文，一个爱树的设计师手把手教你如何设计「树 」！',
+    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Z4eXS55fMigAAAAAAAAAAAAAARQnAQ',
+    href: 'https://zhuanlan.zhihu.com/p/260068653',
     popularize: true,
   },
   {
-    title: '一个好用的智能栅格工具是如何诞生的？',
-    description:
-      '和大家分享一下整个智能栅格的设计开发过程，并从中感受到设计的「穿透力」，聊聊如何打破界限、从表面到内核、从表象到本质。',
-    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*jmkkRYTanJAAAAAAAAAAAAAAARQnAQ',
-    href: 'https://zhuanlan.zhihu.com/p/176534657',
+    title: '或许这就是下一代组件库',
+    description: '随着 React hooks、Vue composition API 的推出，或许组件库有了新的突破点。',
+    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*SU6hQ5jHVEsAAAAAAAAAAAAAARQnAQ',
+    href: 'https://zhuanlan.zhihu.com/p/252824872',
   },
   {
-    title: '首个 Vue 3 组件库发布',
+    title: 'Ant Design 4.0 的一些杂事儿 - VirtualList 篇',
     description:
-      '支持 Vite & TypeScript，开发体验比德芙还要丝滑！',
-    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*GuqtQ4IgCz4AAAAAAAAAAAAAARQnAQ',
-    href: 'https://zhuanlan.zhihu.com/p/211136687',
+      '在 React 中，我们常说不太需要关注性能问题。然而作为组件库，这些事你就不得不考虑一下。',
+    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ULOBQroFRMQAAAAAAAAAAAAAARQnAQ',
+    href: 'https://zhuanlan.zhihu.com/p/237996796',
   },
 ];
 
 const LIST_EN: Recommend[] = [
   {
-    title: "「Natural Human Computer Interaction」Ant Design's Design Values",
+    title: 'How to Design Tree Component',
     description:
-      '🌺 This time, we will clearly explain one of our design values--「nature」, hoping to inspire you to complete your own products or systems.',
-    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*fxVBRLq4TAcAAAAAAAAAAABkARQnAQ',
-    href: 'https://zhuanlan.zhihu.com/p/44809866',
+      '🌲 Surprise! With half-a-year practice of blood and tears, here comes a designer who deeply loves trees to teach you how to design 「tree」component!',
+    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Z4eXS55fMigAAAAAAAAAAAAAARQnAQ',
+    href: 'https://zhuanlan.zhihu.com/p/260068653',
     popularize: true,
   },
   {
-    title: 'Information Layouts | Ant Design 4.0',
+    title: 'Next Generation of Component Library?',
     description:
-      '🌃 Information organization is a problem we often encounter in our daily life. How to arrange all kinds of information together? And how to present them to users?',
-    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*67WaSIK0AaYAAAAAAAAAAABkARQnAQ',
-    href: 'https://zhuanlan.zhihu.com/p/110442621',
+      '😎 With the launch of React hooks and Vue composition API, perhaps we have met a new breakthrough point of component libraries.',
+    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*SU6hQ5jHVEsAAAAAAAAAAAAAARQnAQ',
+    href: 'https://zhuanlan.zhihu.com/p/252824872',
   },
   {
-    title: 'Form Widths | Ant Design 4.0',
+    title: 'Stories about Ant Design 4.0: VirtualList',
     description:
-      "💡 Form is one of the most frequently-used elements in business products. Now let's discuss a neglected question: how to decide the width of a form?",
-    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*lRHfT6DmdFcAAAAAAAAAAABkARQnAQ',
-    href: 'https://zhuanlan.zhihu.com/p/110096160',
+      "🏃 In React, usually you don't need to focus on performance problems. However, as a component library, we have to think about it.",
+    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ULOBQroFRMQAAAAAAAAAAAAAARQnAQ',
+    href: 'https://zhuanlan.zhihu.com/p/237996796',
   },
 ];