Merge pull request #26026 from ant-design/master-2

chore: merge master into feature
2024-11-28 05:05:48 +08:00 · 2020-08-05 15:23:14 +08:00 · 2020-08-05 15:23:14 +08:00 · 32ccb525ad
commit 32ccb525ad
parent 2626d5eb90 4dbf74afae
107 changed files with 5004 additions and 3767 deletions
--- a/.eslintignore
+++ b/.eslintignore
@ -26,4 +26,5 @@ dist
 coverage
 **/*.d.ts
 # Scripts
-scripts/previewEditor/**/*
+scripts/previewEditor/**/*
+jest-stare
--- a/.github/workflows/compressed-size.yml
+++ b/.github/workflows/compressed-size.yml
@ -0,0 +1,17 @@
+name: 📦 Compressed Size
+
+on: [pull_request]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+    env:
+      CI_JOB_NUMBER: 1
+
+    steps:
+    - uses: actions/checkout@v2
+    - uses: preactjs/compressed-size-action@v2
+      with:
+        repo-token: "${{ secrets.GITHUB_TOKEN }}"
+        pattern: "./dist/**/*.min.{js,css}"
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,22 @@ timeline: true

 ---

+## 4.5.2
+
+`2020-08-02`
+
+- 🐞 Fix Slider tooltip abnormal visibility. [#25945](https://github.com/ant-design/ant-design/pull/25945) [@lihqi](https://github.com/lihqi)
+- 🐞 Fix Divider color in dark mode. [#25922](https://github.com/ant-design/ant-design/pull/25922)
+- 🐞 Fix Radio.Button text color when `disabled` and `checked`. [#25911](https://github.com/ant-design/ant-design/pull/25911)
+- 🐞 Fix Carousel children height smaller then parent node issue. [#25906](https://github.com/ant-design/ant-design/pull/25906)
+- 🐞 Fix Table `indentSize` couldn't be zero value. [#25890](https://github.com/ant-design/ant-design/pull/25890) [@OmriGM](https://github.com/OmriGM)
+- 🐞 Fix List `actions` show cursor outside clickable area. [#25961](https://github.com/ant-design/ant-design/pull/25961)
+- 🇷🇺 Improve Russian locale. [#25958](https://github.com/ant-design/ant-design/pull/25958) [@addictional](https://github.com/addictional)
+- RTL
+  - 🐞 Fixed vertical Slider default `tooltipPlacement` in RTL mode. [#25909](https://github.com/ant-design/ant-design/pull/25909)
+  - 🐞 Fix Tabs RTL style of `card` type. [#25936](https://github.com/ant-design/ant-design/pull/25936)
+  - 🐞 Fix nested Table RTL style under dark theme. [#25938](https://github.com/ant-design/ant-design/pull/25938)
+
 ## 4.5.1

 `2020-07-28`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,22 @@ timeline: true

 ---

+## 4.5.2
+
+`2020-08-02`
+
+- 🐞 修复 Slider `tooltip` 显隐异常的问题。[#25945](https://github.com/ant-design/ant-design/pull/25945) [@lihqi](https://github.com/lihqi)
+- 🐞 修复 Divider 暗黑模式下分割线颜色。[#25922](https://github.com/ant-design/ant-design/pull/25922)
+- 🐞 修正 Radio.Button 在 `disabled` 和 `checked` 状态下的文字颜色。[#25911](https://github.com/ant-design/ant-design/pull/25911)
+- 🐞 修复 Carousel 内子节点高度和容器相差几个像素的问题。[#25906](https://github.com/ant-design/ant-design/pull/25906)
+- 🐞 修复 Table `indentSize` 设置为 `0` 无效的问题。[#25890](https://github.com/ant-design/ant-design/pull/25890) [@OmriGM](https://github.com/OmriGM)
+- 🐞 修复 List `actions` 不必要的 `cursor: pointer` 样式。[#25961](https://github.com/ant-design/ant-design/pull/25961)
+- 🇷🇺 补充俄罗斯语本地化文案。[#25958](https://github.com/ant-design/ant-design/pull/25958) [@addictional](https://github.com/addictional)
+- RTL
+  - 🐞 修复嵌套 Table 在其他主题下的 RTL 样式。[#25938](https://github.com/ant-design/ant-design/pull/25938)
+  - 🐞 修复 Tabs `card` 类型的 RTL 样式。[#25936](https://github.com/ant-design/ant-design/pull/25936)
+  - 🐞 修复垂直方向 Slider 在 RTL 模式下默认的 `tooltipPlacement`。[#25909](https://github.com/ant-design/ant-design/pull/25909)
+
 ## 4.5.1

 `2020-07-28`
--- a/components/affix/demo/debug.md
+++ b/components/affix/demo/debug.md
@ -2,7 +2,7 @@
 order: 99
 title:
  zh-CN: 调整浏览器大小，观察 Affix 容器是否发生变化。跟随变化为正常。#17678
-  en-US:
+  en-US: debug
 debug: true
 ---

--- 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:

--- 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` 为绝对定位：

--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@ -24,7 +24,7 @@ When there is a need for autocomplete functionality.
 | defaultActiveFirstOption | Whether active first option by default | boolean | true |  |
 | defaultValue | Initial selected option | string | - |  |
 | disabled | Whether disabled select | boolean | false |  |
-| 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 |  |
+| 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 |  |
 | placeholder | The placeholder of input | string | - |  |
 | value | Selected option | string | - |  |
 | onBlur | Called when leaving the component | function() | - |  |
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@ -25,7 +25,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 | defaultActiveFirstOption | 是否默认高亮第一个选项 | boolean | true |  |
 | defaultValue | 指定默认选中的条目 | string | - |  |
 | disabled | 是否禁用 | boolean | false |  |
-| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false` | boolean \| function(inputValue, option) | true |  |
+| filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 true，反之则返回 false | boolean \| function(inputValue, option) | true |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body |  |
 | placeholder | 输入框提示 | string | - |  |
 | value | 指定当前选中的条目 | string | - |  |
--- a/components/badge/style/index.less
+++ b/components/badge/style/index.less
@ -199,5 +199,5 @@
  }
 }

-@import './rtl';
@import './ribbon';
+@import './rtl';
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@ -17,7 +17,7 @@ interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
 }
 const BreadcrumbItem: BreadcrumbItemInterface = ({
  prefixCls: customizePrefixCls,
-  separator,
+  separator = '/',
  children,
  overlay,
  dropdownProps,
--- a/components/breadcrumb/tests/Breadcrumb.test.js
+++ b/components/breadcrumb/tests/Breadcrumb.test.js
@ -138,4 +138,23 @@ describe('Breadcrumb', () => {
    );
    expect(wrapper).toMatchSnapshot();
  });
+
+  // https://github.com/ant-design/ant-design/issues/25975
+  it('should support Breadcrumb.Item default separator', () => {
+    const MockComponent = () => {
+      return (
+        <span>
+          <Breadcrumb.Item>Mock Node</Breadcrumb.Item>
+        </span>
+      );
+    };
+    const wrapper = render(
+      <Breadcrumb>
+        <Breadcrumb.Item>Location</Breadcrumb.Item>
+        <MockComponent />
+        <Breadcrumb.Item>Application Center</Breadcrumb.Item>
+      </Breadcrumb>,
+    );
+    expect(wrapper).toMatchSnapshot();
+  });
 });
--- a/components/breadcrumb/tests/snapshots/Breadcrumb.test.js.snap
+++ b/components/breadcrumb/tests/snapshots/Breadcrumb.test.js.snap
@ -185,6 +185,51 @@ exports[`Breadcrumb should render a menu 1`] = `
 </div>
 `;

+exports[`Breadcrumb should support Breadcrumb.Item default separator 1`] = `
+<div
+  class="ant-breadcrumb"
+>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      Location
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+  <span>
+    <span>
+      <span
+        class="ant-breadcrumb-link"
+      >
+        Mock Node
+      </span>
+      <span
+        class="ant-breadcrumb-separator"
+      >
+        /
+      </span>
+    </span>
+  </span>
+  <span>
+    <span
+      class="ant-breadcrumb-link"
+    >
+      Application Center
+    </span>
+    <span
+      class="ant-breadcrumb-separator"
+    >
+      /
+    </span>
+  </span>
+</div>
+`;
+
 exports[`Breadcrumb should support React.Fragment and falsy children 1`] = `
 <div
  class="ant-breadcrumb"
--- a/components/breadcrumb/demo/basic.md
+++ b/components/breadcrumb/demo/basic.md
@ -11,7 +11,7 @@ title:

 ## en-US

-The simplest use
+The simplest use.

 ```jsx
 import { Breadcrumb } from 'antd';
--- a/components/breadcrumb/demo/separator-indepent.md
+++ b/components/breadcrumb/demo/separator-indepent.md
@ -11,7 +11,7 @@ title:

 ## en-US

-The separator can be customized by setting the separator property: `Breadcrumb.Separator`
+The separator can be customized by setting the separator property: `Breadcrumb.Separator`.

 ```jsx
 import { Breadcrumb } from 'antd';
--- a/components/breadcrumb/demo/separator.md
+++ b/components/breadcrumb/demo/separator.md
@ -11,7 +11,7 @@ title:

 ## en-US

-The separator can be customized by setting the separator property: separator=">"
+The separator can be customized by setting the separator property: separator=">".

 ```jsx
 import { Breadcrumb } from 'antd';
--- a/components/breadcrumb/index.en-US.md
+++ b/components/breadcrumb/index.en-US.md
@ -28,10 +28,10 @@ A breadcrumb displays the current location within a hierarchy. It allows going b

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - |  |
 | href | Target of hyperlink | string | - |  |
 | overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - |  |
-| onClick | Set the handler to handle `click` event | (e:MouseEvent)=>void | - |  |
-| dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - |  |
+| onClick | Set the handler to handle `click` event | (e:MouseEvent) => void | - |  |

 ### Breadcrumb.Separator

--- a/components/breadcrumb/index.zh-CN.md
+++ b/components/breadcrumb/index.zh-CN.md
@ -29,10 +29,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - |  |
 | href | 链接的目的地 | string | - |  |
 | overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - |  |
-| onClick | 单击事件 | (e:MouseEvent)=>void | - |  |
-| dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - |  |
+| onClick | 单击事件 | (e:MouseEvent) => void | - |  |

 ### Breadcrumb.Separator

--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@ -19,7 +19,7 @@
  // Fixing https://github.com/ant-design/ant-design/issues/13214
  // It is a render problem of chrome, which is only happened in the codesandbox demo
  // 0.001px solution works and I don't why
-  line-height: @line-height-base;
+  line-height: @btn-line-height;
  .btn;
  .btn-default;

--- a/components/carousel/style/index.less
+++ b/components/carousel/style/index.less
@ -51,10 +51,8 @@
      // fix Carousel content height not match parent node
      // when children is empty node
      // https://github.com/ant-design/ant-design/issues/25878
-      > div > div > *:empty::after {
-        visibility: hidden;
-        content: 'none';
-        pointer-events: none;
+      > div > div {
+        vertical-align: bottom;
      }
    }
  }
@ -112,7 +110,6 @@
  .slick-vertical .slick-slide {
    display: block;
    height: auto;
-    border: @border-width-base @border-style-base transparent;
  }
  .slick-arrow.slick-hidden {
    display: none;
--- a/components/cascader/tests/snapshots/index.test.js.snap
+++ b/components/cascader/tests/snapshots/index.test.js.snap
@ -1074,6 +1074,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
 >
  <div>
    <ForwardRef
+      leavedClassName="ant-cascader-menus-hidden"
      motionAppear={false}
      motionEnter={false}
      motionLeave={false}
@ -1088,6 +1089,7 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
    >
      <CSSMotion
        internalRef={null}
+        leavedClassName="ant-cascader-menus-hidden"
        motionAppear={false}
        motionEnter={false}
        motionLeave={false}
@ -1125,7 +1127,6 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
        >
          <PopupInner
            className="ant-cascader-menus"
-            hiddenClassName="ant-cascader-menus-hidden"
            onMouseDown={[Function]}
            onTouchStart={[Function]}
            prefixCls="ant-cascader-menus"
@ -1135,7 +1136,6 @@ exports[`Cascader should highlight keyword and filter when search in Cascader 1`
                "zIndex": undefined,
              }
            }
-            visible={true}
          >
            <div
              className="ant-cascader-menus"
@ -1514,6 +1514,7 @@ exports[`Cascader should render not found content 1`] = `
 >
  <div>
    <ForwardRef
+      leavedClassName="ant-cascader-menus-hidden"
      motionAppear={false}
      motionEnter={false}
      motionLeave={false}
@ -1528,6 +1529,7 @@ exports[`Cascader should render not found content 1`] = `
    >
      <CSSMotion
        internalRef={null}
+        leavedClassName="ant-cascader-menus-hidden"
        motionAppear={false}
        motionEnter={false}
        motionLeave={false}
@ -1565,7 +1567,6 @@ exports[`Cascader should render not found content 1`] = `
        >
          <PopupInner
            className="ant-cascader-menus ant-cascader-menu-empty"
-            hiddenClassName="ant-cascader-menus-hidden"
            onMouseDown={[Function]}
            onTouchStart={[Function]}
            prefixCls="ant-cascader-menus"
@ -1575,7 +1576,6 @@ exports[`Cascader should render not found content 1`] = `
                "zIndex": undefined,
              }
            }
-            visible={true}
          >
            <div
              className="ant-cascader-menus ant-cascader-menu-empty"
@ -1835,6 +1835,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
 >
  <div>
    <ForwardRef
+      leavedClassName="ant-cascader-menus-hidden"
      motionAppear={false}
      motionEnter={false}
      motionLeave={false}
@ -1849,6 +1850,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
    >
      <CSSMotion
        internalRef={null}
+        leavedClassName="ant-cascader-menus-hidden"
        motionAppear={false}
        motionEnter={false}
        motionLeave={false}
@ -1886,7 +1888,6 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
        >
          <PopupInner
            className="ant-cascader-menus ant-cascader-menu-empty"
-            hiddenClassName="ant-cascader-menus-hidden"
            onMouseDown={[Function]}
            onTouchStart={[Function]}
            prefixCls="ant-cascader-menus"
@ -1896,7 +1897,6 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
                "zIndex": undefined,
              }
            }
-            visible={true}
          >
            <div
              className="ant-cascader-menus ant-cascader-menu-empty"
--- a/components/cascader/style/index.less
+++ b/components/cascader/style/index.less
@ -119,7 +119,9 @@

  // https://github.com/ant-design/ant-design/pull/12407#issuecomment-424657810
  &-picker-label:hover + &-input {
-    .hover;
+    &:not(.@{cascader-prefix-cls}-picker-disabled &) {
+      .hover;
+    }
  }

  &-picker-small &-picker-clear,
@ -190,8 +192,10 @@
  }
  &-menu-item {
    padding: @cascader-dropdown-vertical-padding @control-padding-horizontal;
+    overflow: hidden;
    line-height: @cascader-dropdown-line-height;
    white-space: nowrap;
+    text-overflow: ellipsis;
    cursor: pointer;
    transition: all 0.3s;
    &:hover {
--- a/components/config-provider/tests/locale.test.js
+++ b/components/config-provider/tests/locale.test.js
@ -143,7 +143,7 @@ describe('ConfigProvider.Locale', () => {
      const wrapper = wrapperComponent({ validateMessages: { required: '必须' } });

      wrapper.find('form').simulate('submit');
-      await delay(50);
+      await delay(200);
      wrapper.update();

      expect(wrapper.find('.ant-form-item-explain').first().text()).toEqual('必须');
--- a/components/config-provider/context.tsx
+++ b/components/config-provider/context.tsx
@ -11,7 +11,7 @@ export interface ConfigConsumerProps {
  getTargetContainer?: () => HTMLElement;
  getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
  rootPrefixCls?: string;
-  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string;
+  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => string;
  renderEmpty: RenderEmptyHandler;
  csp?: CSPConfig;
  autoInsertSpaceInButton?: boolean;
@ -32,7 +32,7 @@ export interface ConfigConsumerProps {

 export const ConfigContext = React.createContext<ConfigConsumerProps>({
  // We provide a default function for Context without provider
-  getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => {
+  getPrefixCls: (suffixCls?: string, customizePrefixCls?: string) => {
    if (customizePrefixCls) return customizePrefixCls;

    return suffixCls ? `ant-${suffixCls}` : 'ant';
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@ -17,8 +17,8 @@ import { ConfigProvider } from 'antd';

 // ...

-return (
-  <ConfigProvider {...yourConfig}>
+export default () => (
+  <ConfigProvider direction="rtl">
    <App />
  </ConfigProvider>
 );
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@ -18,8 +18,8 @@ import { ConfigProvider } from 'antd';

 // ...

-return (
-  <ConfigProvider {...yourConfig}>
+export default () => (
+  <ConfigProvider direction="rtl">
    <App />
  </ConfigProvider>
 );
--- a/components/date-picker/tests/snapshots/demo.test.js.snap
+++ b/components/date-picker/tests/snapshots/demo.test.js.snap
--- a/components/date-picker/demo/basic.md
+++ b/components/date-picker/demo/basic.md
@ -14,24 +14,47 @@ title:
 Basic use case. Users can select or input a date in panel.

 ```jsx
-import { DatePicker } from 'antd';
+import { DatePicker, TimePicker, Select, Space } from 'antd';

-function onChange(date, dateString) {
-  console.log(date, dateString);
+const { Option } = Select;
+
+function TypeSelect({ type, onChange }) {
+  return (
+    <Select value={type} onChange={onChange}>
+      <Option value="time">Time</Option>
+      <Option value="date">Date</Option>
+      <Option value="week">Week</Option>
+      <Option value="month">Month</Option>
+      <Option value="quarter">Quarter</Option>
+      <Option value="year">Year</Option>
+    </Select>
+  );
+}
+
+function PickerWithType({ type, onChange }) {
+  if (type === 'time') return <TimePicker onChange={onChange} />;
+  if (type === 'date') return <DatePicker onChange={onChange} />;
+  return <DatePicker picker={type} onChange={onChange} />;
+}
+
+function SwitchablePicker() {
+  const [type, setType] = React.useState('time');
+  const onChange = value => {
+    console.log(value);
+  };
+  return (
+    <Space>
+      <TypeSelect type={type} onChange={setType} />
+      <PickerWithType type={type} onChange={onChange} />
+    </Space>
+  );
 }

 ReactDOM.render(
-  <>
-    <DatePicker onChange={onChange} />
-    <br />
-    <DatePicker onChange={onChange} picker="week" />
-    <br />
-    <DatePicker onChange={onChange} picker="month" />
-    <br />
-    <DatePicker onChange={onChange} picker="quarter" />
-    <br />
-    <DatePicker onChange={onChange} picker="year" />
-  </>,
+  <Space direction="vertical" size={12}>
+    <DatePicker />
+    <SwitchablePicker />
+  </Space>,
  mountNode,
 );
 ```
--- a/components/date-picker/demo/bordered.md
+++ b/components/date-picker/demo/bordered.md
@ -14,28 +14,21 @@ title:
 Bordered-less style component.

 ```jsx
-import { DatePicker } from 'antd';
+import { DatePicker, Space } from 'antd';

 const { RangePicker } = DatePicker;

 ReactDOM.render(
-  <>
+  <Space direction="vertical" size={12}>
    <DatePicker bordered={false} />
-    <br />
    <DatePicker picker="week" bordered={false} />
-    <br />
    <DatePicker picker="month" bordered={false} />
-    <br />
    <DatePicker picker="year" bordered={false} />
-    <br />
    <RangePicker bordered={false} />
-    <br />
    <RangePicker picker="week" bordered={false} />
-    <br />
    <RangePicker picker="month" bordered={false} />
-    <br />
    <RangePicker picker="year" bordered={false} />
-  </>,
+  </Space>,
  mountNode,
 );
 ```
--- a/components/date-picker/demo/date-render.md
+++ b/components/date-picker/demo/date-render.md
@ -14,12 +14,12 @@ title:
 We can customize the rendering of date cells in the calendar by providing a `dateRender` function to `DatePicker`.

 ```jsx
-import { DatePicker } from 'antd';
+import { DatePicker, Space } from 'antd';

 const { RangePicker } = DatePicker;

 ReactDOM.render(
-  <>
+  <Space direction="vertical" size={12}>
    <DatePicker
      dateRender={current => {
        const style = {};
@ -48,7 +48,7 @@ ReactDOM.render(
        );
      }}
    />
-  </>,
+  </Space>,
  mountNode,
 );
 ```
--- a/components/date-picker/demo/disabled-date.md
+++ b/components/date-picker/demo/disabled-date.md
@ -15,7 +15,7 @@ Disabled part of dates and time by `disabledDate` and `disabledTime` respectivel

 ```jsx
 import moment from 'moment';
-import { DatePicker } from 'antd';
+import { DatePicker, Space } from 'antd';

 const { RangePicker } = DatePicker;

@ -56,16 +56,14 @@ function disabledRangeTime(_, type) {
 }

 ReactDOM.render(
-  <>
+  <Space direction="vertical" size={12}>
    <DatePicker
      format="YYYY-MM-DD HH:mm:ss"
      disabledDate={disabledDate}
      disabledTime={disabledDateTime}
      showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
    />
-    <br />
    <DatePicker picker="month" disabledDate={disabledDate} />
-    <br />
    <RangePicker disabledDate={disabledDate} />
    <RangePicker
      disabledDate={disabledDate}
@ -76,7 +74,7 @@ ReactDOM.render(
      }}
      format="YYYY-MM-DD HH:mm:ss"
    />
-  </>,
+  </Space>,
  mountNode,
 );
 ```
--- a/components/date-picker/demo/disabled.md
+++ b/components/date-picker/demo/disabled.md
@ -14,28 +14,25 @@ title:
 A disabled state of the `DatePicker`. You can also set as array to disable one of input.

 ```jsx
-import { DatePicker } from 'antd';
+import { DatePicker, Space } from 'antd';
 import moment from 'moment';

 const { RangePicker } = DatePicker;

 const dateFormat = 'YYYY-MM-DD';
 ReactDOM.render(
-  <>
+  <Space direction="vertical" size={12}>
    <DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled />
-    <br />
    <DatePicker picker="month" defaultValue={moment('2015-06', 'YYYY-MM')} disabled />
-    <br />
    <RangePicker
      defaultValue={[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]}
      disabled
    />
-    <br />
    <RangePicker
      defaultValue={[moment('2019-09-03', dateFormat), moment('2019-11-22', dateFormat)]}
      disabled={[false, true]}
    />
-  </>,
+  </Space>,
  mountNode,
 );
 ```
--- a/components/date-picker/demo/extra-footer.md
+++ b/components/date-picker/demo/extra-footer.md
@ -14,22 +14,18 @@ title:
 Render extra footer in panel for customized requirements.

 ```jsx
-import { DatePicker } from 'antd';
+import { DatePicker, Space } from 'antd';

 const { RangePicker } = DatePicker;

 ReactDOM.render(
-  <>
+  <Space direction="vertical" size={12}>
    <DatePicker renderExtraFooter={() => 'extra footer'} />
-    <br />
    <DatePicker renderExtraFooter={() => 'extra footer'} showTime />
-    <br />
    <RangePicker renderExtraFooter={() => 'extra footer'} />
-    <br />
    <RangePicker renderExtraFooter={() => 'extra footer'} showTime />
-    <br />
    <DatePicker renderExtraFooter={() => 'extra footer'} picker="month" />
-  </>,
+  </Space>,
  mountNode,
 );
 ```
--- a/components/date-picker/demo/format.md
+++ b/components/date-picker/demo/format.md
@ -14,7 +14,7 @@ title:
 We can set the date format by `format`.

 ```jsx
-import { DatePicker } from 'antd';
+import { DatePicker, Space } from 'antd';
 import moment from 'moment';

 const { RangePicker } = DatePicker;
@ -25,18 +25,15 @@ const monthFormat = 'YYYY/MM';
 const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];

 ReactDOM.render(
-  <>
+  <Space direction="vertical" size={12}>
    <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
-    <br />
    <DatePicker defaultValue={moment('01/01/2015', dateFormatList[0])} format={dateFormatList} />
-    <br />
    <DatePicker defaultValue={moment('2015/01', monthFormat)} format={monthFormat} picker="month" />
-    <br />
    <RangePicker
      defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
      format={dateFormat}
    />
-  </>,
+  </Space>,
  mountNode,
 );
 ```
--- a/components/date-picker/demo/mode.md
+++ b/components/date-picker/demo/mode.md
@ -15,7 +15,7 @@ debug: true
 Determing which panel to show with `mode` and `onPanelChange`.

 ```jsx
-import { DatePicker } from 'antd';
+import { DatePicker, Space } from 'antd';

 const { RangePicker } = DatePicker;

@ -77,11 +77,10 @@ class ControlledRangePicker extends React.Component {
 }

 ReactDOM.render(
-  <>
+  <Space direction="vertical" size={12}>
    <ControlledDatePicker />
-    <br />
    <ControlledRangePicker />
-  </>,
+  </Space>,
  mountNode,
 );
 ```
--- a/components/date-picker/demo/presetted-ranges.md
+++ b/components/date-picker/demo/presetted-ranges.md
@ -14,7 +14,7 @@ title:
 We can set preset ranges to RangePicker to improve user experience.

 ```jsx
-import { DatePicker } from 'antd';
+import { DatePicker, Space } from 'antd';
 import moment from 'moment';

 const { RangePicker } = DatePicker;
@ -25,7 +25,7 @@ function onChange(dates, dateStrings) {
 }

 ReactDOM.render(
-  <>
+  <Space direction="vertical" size={12}>
    <RangePicker
      ranges={{
        Today: [moment(), moment()],
@ -33,7 +33,6 @@ ReactDOM.render(
      }}
      onChange={onChange}
    />
-    <br />
    <RangePicker
      ranges={{
        Today: [moment(), moment()],
@ -43,7 +42,7 @@ ReactDOM.render(
      format="YYYY/MM/DD HH:mm:ss"
      onChange={onChange}
    />
-  </>,
+  </Space>,
  mountNode,
 );
 ```
--- a/components/date-picker/demo/range-picker.md
+++ b/components/date-picker/demo/range-picker.md
@ -14,22 +14,18 @@ title:
 Set range picker type by `picker` prop.

 ```jsx
-import { DatePicker } from 'antd';
+import { DatePicker, Space } from 'antd';

 const { RangePicker } = DatePicker;

 ReactDOM.render(
-  <>
+  <Space direction="vertical" size={12}>
    <RangePicker />
-    <br />
    <RangePicker showTime />
-    <br />
    <RangePicker picker="week" />
-    <br />
    <RangePicker picker="month" />
-    <br />
    <RangePicker picker="year" />
-  </>,
+  </Space>,
  mountNode,
 );
 ```
--- a/components/date-picker/demo/size.md
+++ b/components/date-picker/demo/size.md
@ -14,7 +14,7 @@ title:
 The input box comes in three sizes. `default` will be used if `size` is omitted.

 ```jsx
-import { DatePicker, Radio } from 'antd';
+import { DatePicker, Radio, Space } from 'antd';

 const { RangePicker } = DatePicker;

@ -30,22 +30,17 @@ class PickerSizesDemo extends React.Component {
  render() {
    const { size } = this.state;
    return (
-      <>
+      <Space direction="vertical" size={12}>
        <Radio.Group value={size} onChange={this.handleSizeChange}>
          <Radio.Button value="large">Large</Radio.Button>
          <Radio.Button value="default">Default</Radio.Button>
          <Radio.Button value="small">Small</Radio.Button>
        </Radio.Group>
-        <br />
-        <br />
        <DatePicker size={size} />
-        <br />
        <DatePicker size={size} picker="month" />
-        <br />
        <RangePicker size={size} />
-        <br />
        <DatePicker size={size} picker="week" />
-      </>
+      </Space>
    );
  }
 }
--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@ -21,7 +21,7 @@ When `RangePicker` does not satisfied your requirements, try to implement simila
 > - Improve user experience with `open` and `onOpenChange`.

 ```jsx
-import { DatePicker } from 'antd';
+import { DatePicker, Space } from 'antd';

 class DateRange extends React.Component {
  state = {
@ -73,7 +73,7 @@ class DateRange extends React.Component {
  render() {
    const { startValue, endValue, endOpen } = this.state;
    return (
-      <>
+      <Space>
        <DatePicker
          disabledDate={this.disabledStartDate}
          showTime
@ -93,7 +93,7 @@ class DateRange extends React.Component {
          open={endOpen}
          onOpenChange={this.handleEndOpenChange}
        />
-      </>
+      </Space>
    );
  }
 }
--- a/components/date-picker/demo/suffix.md
+++ b/components/date-picker/demo/suffix.md
@ -15,7 +15,7 @@ title:
 Basic use case. Users can select or input a date in panel.

 ```jsx
-import { DatePicker } from 'antd';
+import { DatePicker, Space } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';

 const smileIcon = <SmileOutlined />;
@ -26,23 +26,16 @@ function onChange(date, dateString) {
 }

 ReactDOM.render(
-  <>
+  <Space direction="vertical" size={12}>
    <DatePicker suffixIcon={smileIcon} onChange={onChange} />
-    <br />
    <DatePicker suffixIcon={smileIcon} onChange={onChange} picker="month" />
-    <br />
    <RangePicker suffixIcon={smileIcon} onChange={onChange} />
-    <br />
    <DatePicker suffixIcon={smileIcon} onChange={onChange} picker="week" />
-    <br />
    <DatePicker suffixIcon="ab" onChange={onChange} />
-    <br />
    <DatePicker suffixIcon="ab" onChange={onChange} picker="month" />
-    <br />
    <RangePicker suffixIcon="ab" onChange={onChange} />
-    <br />
    <DatePicker suffixIcon="ab" onChange={onChange} picker="week" />
-  </>,
+  </Space>,
  mountNode,
 );
 ```
--- a/components/date-picker/demo/time.md
+++ b/components/date-picker/demo/time.md
@ -14,7 +14,7 @@ title:
 This property provide an additional time selection. When `showTime` is an Object, its properties will be passed on to built-in `TimePicker`.

 ```jsx
-import { DatePicker } from 'antd';
+import { DatePicker, Space } from 'antd';

 const { RangePicker } = DatePicker;

@ -28,16 +28,15 @@ function onOk(value) {
 }

 ReactDOM.render(
-  <>
+  <Space direction="vertical" size={12}>
    <DatePicker showTime onChange={onChange} onOk={onOk} />
-    <br />
    <RangePicker
      showTime={{ format: 'HH:mm' }}
      format="YYYY-MM-DD HH:mm"
      onChange={onChange}
      onOk={onOk}
    />
-  </>,
+  </Space>,
  mountNode,
 );
 ```
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -29,6 +29,7 @@ The default locale is en-US, if you need to use other languages, recommend to us
 If there are special needs (only modifying single component language), Please use the property: local. Example: [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json).

 ```jsx
+import 'moment/locale/zh-cn';
 import locale from 'antd/es/date-picker/locale/zh_CN';

 <DatePicker locale={locale} />;
@ -37,8 +38,12 @@ import locale from 'antd/es/date-picker/locale/zh_CN';
 ```jsx
 // The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
 import moment from 'moment';
+import 'moment/locale/zh-cn';
+import locale from 'antd/es/locale/zh_CN';

-<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />;
+<ConfigProvider locale={locale}>
+  <DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
+</ConfigProvider>;
 ```

 ### Common API
@ -159,32 +164,31 @@ Added in `4.1.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(), moment()] |  |
 | value | To set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |  |
-| onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0  | function(dates: \[moment, moment], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
+| onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[moment, moment], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
 | onChange | Callback function, can be executed when the selected time is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - |  |

-<style>
-.code-box-demo .ant-picker {
-  margin: 0 8px 12px 0;
-}
-.ant-row-rtl .code-box-demo .ant-picker {
-  margin: 0 0 12px 8px;
-}
-</style>
-
 ## FAQ

- [When set mode to DatePicker/RangePicker, cannot select year or month anymore?](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?)
+### When set mode to DatePicker/RangePicker, cannot select year or month anymore?

- [How to use DatePicker with customize date library like dayjs?](/docs/react/replace-moment#DatePicker)
+Please refer [FAQ](/docs/react/faq#When-set-mode-to-DatePicker/RangePicker,-cannot-select-year-or-month-anymore?)

- How to modify start day of week?
+### How to use DatePicker with customize date library like dayjs?

-  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-b24k5
+Please refer [replace moment](/docs/react/replace-moment#DatePicker)

-  ```js
-  moment.locale('en', {
-    week: {
-      dow: 1,
-    },
-  });
-  ```
+### Why config moment.locale globally not work?
+
+DatePicker default set `locale` as `en` in v4. You can config DatePicker `locale` prop or [ConfigProvider `locale`](/components/config-provider) prop instead.
+
+### 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
+
+```js
+moment.locale('en', {
+  week: {
+    dow: 1,
+  },
+});
+```
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -30,6 +30,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
 如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。

 ```jsx
+import 'moment/locale/zh-cn';
 import locale from 'antd/es/date-picker/locale/zh_CN';

 <DatePicker locale={locale} />;
@ -39,8 +40,11 @@ import locale from 'antd/es/date-picker/locale/zh_CN';
 // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
 import moment from 'moment';
 import 'moment/locale/zh-cn';
+import locale from 'antd/es/locale/zh_CN';

-<DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />;
+<ConfigProvider locale={locale}>
+  <DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
+</ConfigProvider>;
 ```

 ### 共同的 API
@ -164,30 +168,29 @@ import 'moment/locale/zh-cn';
 | onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[moment, moment\], dateStrings: \[string, string\], info: { range:`start`\|`end` }) | - |  |
 | onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment\], dateStrings: \[string, string\]) | - |  |

-<style>
-.code-box-demo .ant-picker {
-  margin: 0 8px 12px 0;
-}
-.ant-row-rtl .code-box-demo .ant-picker {
-  margin: 0 0 12px 8px;
-}
-</style>
-
 ## FAQ

- [当我指定了 DatePicker/RangePicker 的 mode 属性后，点击后无法选择年份/月份？](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)
+### 当我指定了 DatePicker/RangePicker 的 mode 属性后，点击后无法选择年份/月份？

- [如何在 DatePicker 中使用自定义日期库（如 dayjs ）？](/docs/react/replace-moment#DatePicker)
+请参考[常见问答](/docs/react/faq#当我指定了-DatePicker/RangePicker-的-mode-属性后，点击后无法选择年份/月份？)

- 如何修改周的起始日？
+### 如何在 DatePicker 中使用自定义日期库（如 dayjs ）？

-  请使用正确的[语言包](/docs/react/i18n)（[#5605](https://github.com/ant-design/ant-design/issues/5605)），或者修改 moment 的 `locale` 配置：https://codesandbox.io/s/moment-day-of-week-b24k5
+请参考[《替换 Moment.js》](/docs/react/replace-moment#DatePicker)

-  ```js
-  moment.locale('en', {
-    // 注意请修改你正在使用的 locale 语言，比如 zh-cn
-    week: {
-      dow: 1,
-    },
-  });
-  ```
+### 为何全局修改 moment.locale 不生效？
+
+v4 中，DatePicker 默认 `locale` 为 `en`。你可以通过 DatePicker 的 `locale` 属性来单独设置，也可以通过 [ConfigProvider `locale`](/components/config-provider) 属性来配置。
+
+### 如何修改周的起始日？
+
+请使用正确的[语言包](/docs/react/i18n)（[#5605](https://github.com/ant-design/ant-design/issues/5605)），或者修改 moment 的 `locale` 配置：https://codesandbox.io/s/moment-day-of-week-6dby5
+
+```js
+moment.locale('en', {
+  // 注意请修改你正在使用的 locale 语言，比如 zh-cn
+  week: {
+    dow: 1,
+  },
+});
+```
--- a/components/date-picker/locale/ru_RU.tsx
+++ b/components/date-picker/locale/ru_RU.tsx
@ -10,7 +10,14 @@ import { PickerLocale } from '../generatePicker';
 const locale: PickerLocale = {
  lang: {
    placeholder: 'Выберите дату',
+    yearPlaceholder: 'Выберите год',
+    quarterPlaceholder: 'Выберите квартал',
+    monthPlaceholder: 'Выберите месяц',
+    weekPlaceholder: 'Выберите неделю',
    rangePlaceholder: ['Начальная дата', 'Конечная дата'],
+    rangeYearPlaceholder: ['Начальный год', 'Год окончания'],
+    rangeMonthPlaceholder: ['Начальный месяц', 'Конечный месяц'],
+    rangeWeekPlaceholder: ['Начальная неделя', 'Конечная неделя'],
    ...CalendarLocale,
  },
  timePickerLocale: {
--- a/components/form/FormItem.tsx
+++ b/components/form/FormItem.tsx
@ -142,7 +142,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
    meta?: Meta,
    isRequired?: boolean,
  ): React.ReactNode {
-    if (noStyle) {
+    if (noStyle && !hidden) {
      return baseChildren;
    }

--- a/components/form/tests/snapshots/index.test.js.snap
+++ b/components/form/tests/snapshots/index.test.js.snap
@ -1,6 +1,35 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

-exports[`Form Form item hidden 1`] = `
+exports[`Form Form item hidden noStyle should not work when hidden 1`] = `
+<form
+  class="ant-form ant-form-horizontal"
+>
+  <div
+    class="ant-row ant-form-item ant-form-item-hidden"
+  >
+    <div
+      class="ant-col ant-form-item-control"
+    >
+      <div
+        class="ant-form-item-control-input"
+      >
+        <div
+          class="ant-form-item-control-input-content"
+        >
+          <input
+            class="ant-input"
+            id="light"
+            type="text"
+            value=""
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</form>
+`;
+
+exports[`Form Form item hidden should work 1`] = `
 <form
  class="ant-form ant-form-horizontal"
 >
--- a/components/form/tests/index.test.js
+++ b/components/form/tests/index.test.js
@ -699,14 +699,27 @@ describe('Form', () => {
    expect(wrapper.find('input').prop('onBlur')).toBeTruthy();
  });

-  it('Form item hidden', () => {
-    const wrapper = mount(
-      <Form>
-        <Form.Item name="light" hidden>
-          <Input />
-        </Form.Item>
-      </Form>,
-    );
-    expect(wrapper).toMatchRenderedSnapshot();
+  describe('Form item hidden', () => {
+    it('should work', () => {
+      const wrapper = mount(
+        <Form>
+          <Form.Item name="light" hidden>
+            <Input />
+          </Form.Item>
+        </Form>,
+      );
+      expect(wrapper).toMatchRenderedSnapshot();
+    });
+
+    it('noStyle should not work when hidden', () => {
+      const wrapper = mount(
+        <Form>
+          <Form.Item name="light" hidden noStyle>
+            <Input />
+          </Form.Item>
+        </Form>,
+      );
+      expect(wrapper).toMatchRenderedSnapshot();
+    });
  });
 });
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@ -184,8 +184,8 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au

 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| onFormChange | Triggered when a sub form field updates | Function(formName: string, info: { changedFields, forms }) | - |
-| onFormFinish | Triggered when a sub form submits | Function(formName: string, info: { values, forms }) | - |
+| onFormChange | Triggered when a sub form field updates | function(formName: string, info: { changedFields, forms }) | - |
+| onFormFinish | Triggered when a sub form submits | function(formName: string, info: { values, forms }) | - |

 ```jsx
 <Form.Provider
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@ -36,10 +36,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/ORmcdeaoO/Form.svg
 | validateMessages | 验证提示模板，说明[见下](#validateMessages) | [ValidateMessages](https://github.com/react-component/field-form/blob/master/src/utils/messages.ts) | - |  |
 | validateTrigger | 统一设置字段校验规则 | string \| string[] | `onChange` | 4.3.0 |
 | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 labelCol | [object](/components/grid/#Col) | - |  |
-| onFinish | 提交表单且数据验证成功后回调事件 | Function(values) | - |  |
-| onFinishFailed | 提交表单且数据验证失败后回调事件 | Function({ values, errorFields, outOfDate }) | - |  |
-| onFieldsChange | 字段更新时触发回调事件 | Function(changedFields, allFields) | - |  |
-| onValuesChange | 字段值更新时触发回调事件 | Function(changedValues, allValues) | - |  |
+| onFinish | 提交表单且数据验证成功后回调事件 | function(values) | - |  |
+| onFinishFailed | 提交表单且数据验证失败后回调事件 | function({ values, errorFields, outOfDate }) | - |  |
+| onFieldsChange | 字段更新时触发回调事件 | function(changedFields, allFields) | - |  |
+| onValuesChange | 字段值更新时触发回调事件 | function(changedValues, allValues) | - |  |

 ### validateMessages

@ -75,15 +75,15 @@ const validateMessages = {
 | --- | --- | --- | --- | --- |
 | colon | 配合 `label` 属性使用，表示是否显示 `label` 后面的冒号 | boolean | true |  |
 | dependencies | 设置依赖字段，说明[见下](#dependencies) | [NamePath](#NamePath)[] | - |  |
-| extra | 额外的提示信息，和 `help` 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|ReactNode | - |  |
+| extra | 额外的提示信息，和 `help` 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string \| ReactNode | - |  |
 | getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any | - |  |
 | getValueProps | 为子元素添加额外的属性 | (value: any) => any | - | 4.2.0 |
 | hasFeedback | 配合 `validateStatus` 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false |  |
-| help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode | - |  |
+| help | 提示信息，如不设置，则会根据校验规则自动生成 | string \| ReactNode | - |  |
 | htmlFor | 设置子元素 label `htmlFor` 属性 | string | - |  |
 | initialValue | 设置子元素默认值，如果与 Form 的 `initialValues` 冲突则以 Form 为准 | string | - | 4.2.0 |
 | noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false |  |
-| label | `label` 标签的文本 | string\|ReactNode | - |  |
+| label | `label` 标签的文本 | string \| ReactNode | - |  |
 | labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` |  |
 | labelCol | `label` 标签布局，同 `<Col>` 组件，设置 `span` `offset` 值，如 `{span: 3, offset: 12}` 或 `sm: {span: 3, offset: 12}`。你可以通过 Form 的 `labelCol` 进行统一设置。当和 Form 同时设置时，以 Item 为准 | [object](/components/grid/#Col) | - |  |
 | name | 字段名，支持数组 | [NamePath](#NamePath) | - |  |
@ -186,8 +186,8 @@ Form.List 渲染表单相关操作函数。

 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| onFormChange | 子表单字段更新时触发 | Function(formName: string, info: { changedFields, forms }) | - |
-| onFormFinish | 子表单提交时触发 | Function(formName: string, info: { values, forms }) | - |
+| onFormChange | 子表单字段更新时触发 | function(formName: string, info: { changedFields, forms }) | - |
+| onFormFinish | 子表单提交时触发 | function(formName: string, info: { values, forms }) | - |

 ```jsx
 <Form.Provider
@ -206,7 +206,7 @@ Form.List 渲染表单相关操作函数。

 | 名称 | 说明 | 类型 | 版本 |
 | --- | --- | --- | --- |
-| getFieldInstance | 获取对应字段示例 | (name: [NamePath](#NamePath)) => any | 4.4.0 |
+| getFieldInstance | 获取对应字段实例 | (name: [NamePath](#NamePath)) => any | 4.4.0 |
 | getFieldValue | 获取对应字段名的值 | (name: [NamePath](#NamePath)) => any |  |
 | getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回 | (nameList?: [NamePath](#NamePath)[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any |  |
 | getFieldError | 获取对应字段名的错误信息 | (name: [NamePath](#NamePath)) => string[] |  |
@ -326,7 +326,7 @@ validator(rule, value, callback) => {
 }
 ```

-### name 为数组使的转换规则？
+### name 为数组时的转换规则？

 当 `name` 为数组时，会按照顺序填充路径。当存在数字且 form store 中没有该字段时会自动转变成数组。因而如果需要数组为 key 时请使用 string 如：`['1', 'name']`。

--- a/components/grid/tests/snapshots/demo.test.js.snap
+++ b/components/grid/tests/snapshots/demo.test.js.snap
@ -76,7 +76,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -111,7 +110,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -146,7 +144,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -181,7 +178,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -216,7 +212,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -256,7 +251,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -307,7 +301,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -358,7 +351,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -414,7 +406,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -449,7 +440,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -489,7 +479,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -516,7 +505,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -543,7 +531,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -575,7 +562,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -631,7 +617,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -687,7 +672,6 @@ Array [
  <div
    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
    role="separator"
-    style="color:#333;font-weight:normal"
  >
    <span
      class="ant-divider-inner-text"
@ -827,9 +811,7 @@ Array [

 exports[`renders ./components/grid/demo/playground.md correctly 1`] = `
 Array [
-  <span
-    style="margin-right:6px"
-  >
+  <span>
    Horizontal Gutter (px): 
  </span>,
  <div
@ -925,9 +907,7 @@ Array [
      </div>
    </div>
  </div>,
-  <span
-    style="margin-right:6px"
-  >
+  <span>
    Vertical Gutter (px): 
  </span>,
  <div
@ -1023,9 +1003,7 @@ Array [
      </div>
    </div>
  </div>,
-  <span
-    style="margin-right:6px"
-  >
+  <span>
    Column Count:
  </span>,
  <div
--- a/components/grid/demo/flex-align.md
+++ b/components/grid/demo/flex-align.md
@ -20,9 +20,7 @@ const DemoBox = props => <p className={`height-${props.value}`}>{props.children}

 ReactDOM.render(
  <>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Align Top
-    </Divider>
+    <Divider orientation="left">Align Top</Divider>
    <Row justify="center" align="top">
      <Col span={4}>
        <DemoBox value={100}>col-4</DemoBox>
@ -38,9 +36,7 @@ ReactDOM.render(
      </Col>
    </Row>

-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Align Middle
-    </Divider>
+    <Divider orientation="left">Align Middle</Divider>
    <Row justify="space-around" align="middle">
      <Col span={4}>
        <DemoBox value={100}>col-4</DemoBox>
@ -56,9 +52,7 @@ ReactDOM.render(
      </Col>
    </Row>

-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Align Bottom
-    </Divider>
+    <Divider orientation="left">Align Bottom</Divider>
    <Row justify="space-between" align="bottom">
      <Col span={4}>
        <DemoBox value={100}>col-4</DemoBox>
--- a/components/grid/demo/flex-order.md
+++ b/components/grid/demo/flex-order.md
@ -18,9 +18,7 @@ import { Row, Col, Divider } from 'antd';

 ReactDOM.render(
  <>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Normal
-    </Divider>
+    <Divider orientation="left">Normal</Divider>
    <Row>
      <Col span={6} order={4}>
        1 col-order-4
@ -35,9 +33,7 @@ ReactDOM.render(
        4 col-order-1
      </Col>
    </Row>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Responsive
-    </Divider>
+    <Divider orientation="left">Responsive</Divider>
    <Row>
      <Col span={6} xs={{ order: 1 }} sm={{ order: 2 }} md={{ order: 3 }} lg={{ order: 4 }}>
        1 col-order-responsive
--- a/components/grid/demo/flex-stretch.md
+++ b/components/grid/demo/flex-stretch.md
@ -18,23 +18,17 @@ import { Row, Col, Divider } from 'antd';

 ReactDOM.render(
  <>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Percentage columns
-    </Divider>
+    <Divider orientation="left">Percentage columns</Divider>
    <Row>
      <Col flex={2}>2 / 5</Col>
      <Col flex={3}>3 / 5</Col>
    </Row>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Fill rest 
-    </Divider>
+    <Divider orientation="left">Fill rest</Divider>
    <Row>
      <Col flex="100px">100px</Col>
      <Col flex="auto">Fill Rest</Col>
    </Row>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Raw flex style
-    </Divider>
+    <Divider orientation="left">Raw flex style</Divider>
    <Row>
      <Col flex="1 1 200px">1 1 200px</Col>
      <Col flex="0 1 300px">0 1 300px</Col>
--- a/components/grid/demo/flex.md
+++ b/components/grid/demo/flex.md
@ -20,9 +20,7 @@ import { Row, Col, Divider } from 'antd';

 ReactDOM.render(
  <>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      sub-element align left
-    </Divider>
+    <Divider orientation="left">sub-element align left</Divider>
    <Row justify="start">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
@ -30,9 +28,7 @@ ReactDOM.render(
      <Col span={4}>col-4</Col>
    </Row>

-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      sub-element align center
-    </Divider>
+    <Divider orientation="left">sub-element align center</Divider>
    <Row justify="center">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
@ -40,9 +36,7 @@ ReactDOM.render(
      <Col span={4}>col-4</Col>
    </Row>

-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      sub-element align right
-    </Divider>
+    <Divider orientation="left">sub-element align right</Divider>
    <Row justify="end">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
@ -50,9 +44,7 @@ ReactDOM.render(
      <Col span={4}>col-4</Col>
    </Row>

-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      sub-element monospaced arrangement
-    </Divider>
+    <Divider orientation="left">sub-element monospaced arrangement</Divider>
    <Row justify="space-between">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
@ -60,9 +52,7 @@ ReactDOM.render(
      <Col span={4}>col-4</Col>
    </Row>

-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      sub-element align full
-    </Divider>
+    <Divider orientation="left">sub-element align full</Divider>
    <Row justify="space-around">
      <Col span={4}>col-4</Col>
      <Col span={4}>col-4</Col>
--- a/components/grid/demo/gutter.md
+++ b/components/grid/demo/gutter.md
@ -7,7 +7,7 @@ title:

 ## zh-CN

-栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔。(n 是自然数)
+栅格常常需要和间隔进行配合，你可以使用 `Row` 的 `gutter` 属性，我们推荐使用 `(16+8n)px` 作为栅格间隔(n 是自然数)。

 如果要支持响应式，可以写成 `{ xs: 8, sm: 16, md: 24, lg: 32 }`。

@ -17,7 +17,7 @@ title:

 ## en-US

-You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px`. (`n` stands for natural number.)
+You can use the `gutter` property of `Row` as grid spacing, we recommend set it to `(16 + 8n) px` (`n` stands for natural number).

 You can set it to a object like `{ xs: 8, sm: 16, md: 24, lg: 32 }` for responsive design.

@ -32,9 +32,7 @@ const style = { background: '#0092ff', padding: '8px 0' };

 ReactDOM.render(
  <>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Horizontal
-    </Divider>
+    <Divider orientation="left">Horizontal</Divider>
    <Row gutter={16}>
      <Col className="gutter-row" span={6}>
        <div style={style}>col-6</div>
@ -49,9 +47,7 @@ ReactDOM.render(
        <div style={style}>col-6</div>
      </Col>
    </Row>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Responsive
-    </Divider>
+    <Divider orientation="left">Responsive</Divider>
    <Row gutter={{ xs: 8, sm: 16, md: 24, lg: 32 }}>
      <Col className="gutter-row" span={6}>
        <div style={style}>col-6</div>
@ -66,9 +62,7 @@ ReactDOM.render(
        <div style={style}>col-6</div>
      </Col>
    </Row>
-    <Divider orientation="left" style={{ color: '#333', fontWeight: 'normal' }}>
-      Vertical
-    </Divider>
+    <Divider orientation="left">Vertical</Divider>
    <Row gutter={[16, 24]}>
      <Col className="gutter-row" span={6}>
        <div style={style}>col-6</div>
--- a/components/grid/demo/playground.md
+++ b/components/grid/demo/playground.md
@ -64,7 +64,7 @@ class App extends React.Component {
    }
    return (
      <>
-        <span style={{ marginRight: 6 }}>Horizontal Gutter (px): </span>
+        <span>Horizontal Gutter (px): </span>
        <div style={{ width: '50%' }}>
          <Slider
            min={0}
@ -76,7 +76,7 @@ class App extends React.Component {
            tipFormatter={value => gutters[value]}
          />
        </div>
-        <span style={{ marginRight: 6 }}>Vertical Gutter (px): </span>
+        <span>Vertical Gutter (px): </span>
        <div style={{ width: '50%' }}>
          <Slider
            min={0}
@ -88,7 +88,7 @@ class App extends React.Component {
            tipFormatter={value => vgutters[value]}
          />
        </div>
-        <span style={{ marginRight: 6 }}>Column Count:</span>
+        <span>Column Count:</span>
        <div style={{ width: '50%', marginBottom: 48 }}>
          <Slider
            min={0}
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@ -89,7 +89,7 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 | 成员 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | align | 垂直对齐方式 | `top` \| `middle` \| `bottom` | `top` |  |
-| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]`。 | number \| object \| array | 0 |  |
+| gutter | 栅格间隔，可以写成像素值或支持响应式的对象写法来设置水平间隔 `{ xs: 8, sm: 16, md: 24}`。或者使用数组形式同时设置 `[水平间距, 垂直间距]` | number \| object \| array | 0 |  |
 | justify | 水平排列方式 | `start` \| `end` \| `center` \| `space-around` \| `space-between` | `start` |  |

 ### Col
--- a/components/input-number/index.zh-CN.md
+++ b/components/input-number/index.zh-CN.md
@ -31,7 +31,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/XOS8qZ0kU/InputNumber.svg
 | size | 输入框大小 | `large` \| `middle` \| `small` | - |
 | step | 每次改变步数，可以为小数 | number \| string | 1 |
 | value | 当前值 | number | - |
-| onChange | 变化回调 | Function(value: number \| string) | - |
+| onChange | 变化回调 | function(value: number \| string) | - |
 | onPressEnter | 按下回车的回调 | function(e) | - |

 ## 方法
--- a/components/list/demo/resposive.md
+++ b/components/list/demo/resposive.md
@ -7,7 +7,7 @@ title:

 ## zh-CN

-响应式的栅格列表。尺寸与 [Layout Grid](/components/grid-cn/#Col) 保持一致。
+响应式的栅格列表。尺寸与 [Layout Grid](/components/grid/#Col) 保持一致。

 ## en-US

--- a/components/list/style/index.less
+++ b/components/list/style/index.less
@ -105,11 +105,12 @@
        font-size: @font-size-base;
        line-height: @line-height-base;
        text-align: center;
-        cursor: pointer;
-      }
-      & > li:first-child {
-        padding-left: 0;
+
+        &:first-child {
+          padding-left: 0;
+        }
      }
+
      &-split {
        position: absolute;
        top: 50%;
--- a/components/locale/default.tsx
+++ b/components/locale/default.tsx
@ -21,6 +21,7 @@ const localeValues: Locale = {
    filterConfirm: 'OK',
    filterReset: 'Reset',
    filterEmptyText: 'No filters',
+    emptyText: 'No data',
    selectAll: 'Select current page',
    selectInvert: 'Invert current page',
    selectionAll: 'Select all data',
--- a/components/locale/ru_RU.tsx
+++ b/components/locale/ru_RU.tsx
@ -21,6 +21,7 @@ const localeValues: Locale = {
    filterTitle: 'Фильтр',
    filterConfirm: 'OK',
    filterReset: 'Сбросить',
+    filterEmptyText: 'Без фильтров',
    emptyText: 'Нет данных',
    selectAll: 'Выбрать всё',
    selectInvert: 'Инвертировать выбор',
@ -42,9 +43,16 @@ const localeValues: Locale = {
    cancelText: 'Отмена',
  },
  Transfer: {
+    titles: ['', ''],
    searchPlaceholder: 'Поиск',
    itemUnit: 'элем.',
    itemsUnit: 'элем.',
+    remove: 'Удалить',
+    selectAll: 'Выбрать все данные',
+    selectCurrent: 'Выбрать текущую страницу',
+    selectInvert: 'Показать в обратном порядке',
+    removeAll: 'Удалить все данные',
+    removeCurrent: 'Удалить текущую страницу',
  },
  Upload: {
    uploading: 'Загрузка...',
@ -60,13 +68,13 @@ const localeValues: Locale = {
    icon: 'иконка',
  },
  Text: {
-    edit: 'редактировать',
-    copy: 'копировать',
-    copied: 'скопировано',
-    expand: 'раскрыть',
+    edit: 'Редактировать',
+    copy: 'Копировать',
+    copied: 'Скопировано',
+    expand: 'Раскрыть',
  },
  PageHeader: {
-    back: 'назад',
+    back: 'Назад',
  },
  Form: {
    defaultValidateMessages: {
--- a/components/mentions/style/index.less
+++ b/components/mentions/style/index.less
@ -64,10 +64,6 @@
      background-color: transparent;
    }
    .placeholder();
-
-    &:read-only {
-      cursor: default;
-    }
  }

  &-measure {
--- a/components/modal/tests/hook.test.js
+++ b/components/modal/tests/hook.test.js
@ -35,6 +35,8 @@ describe('Modal.hook', () => {
    wrapper.find('button').simulate('click');

    expect(wrapper.find('.test-hook').text()).toEqual('bamboo');
+    expect(wrapper.find('.ant-btn').length).toBeTruthy();
+    expect(wrapper.find('.ant-modal-body').length).toBeTruthy();

    // Update instance
    instance.update({
--- a/components/modal/useModal/HookModal.tsx
+++ b/components/modal/useModal/HookModal.tsx
@ -27,7 +27,10 @@ const HookModal: React.ForwardRefRenderFunction<HookModalRef, HookModalProps> =
 ) => {
  const [visible, setVisible] = React.useState(true);
  const [innerConfig, setInnerConfig] = React.useState(config);
-  const { direction } = React.useContext(ConfigContext);
+  const { direction, getPrefixCls } = React.useContext(ConfigContext);
+
+  const prefixCls = getPrefixCls('modal');
+  const rootPrefixCls = getPrefixCls();

  function close() {
    setVisible(false);
@ -47,6 +50,8 @@ const HookModal: React.ForwardRefRenderFunction<HookModalRef, HookModalProps> =
    <LocaleReceiver componentName="Modal" defaultLocale={defaultLocale.Modal}>
      {(modalLocale: ModalLocale) => (
        <ConfirmDialog
+          prefixCls={prefixCls}
+          rootPrefixCls={rootPrefixCls}
          {...innerConfig}
          close={close}
          visible={visible}
--- a/components/pagination/tests/snapshots/demo.test.js.snap
+++ b/components/pagination/tests/snapshots/demo.test.js.snap
@ -2159,6 +2159,212 @@ Array [
      </button>
    </li>
  </ul>,
+  <ul
+    class="ant-pagination mini ant-pagination-disabled"
+    unselectable="unselectable"
+  >
+    <li
+      class="ant-pagination-total-text"
+    >
+      Total 50 items
+    </li>
+    <li
+      aria-disabled="true"
+      class="ant-pagination-prev ant-pagination-disabled"
+      title="Previous Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        disabled=""
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+      tabindex="0"
+      title="1"
+    >
+      <a
+        rel="nofollow"
+      >
+        1
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-2"
+      tabindex="0"
+      title="2"
+    >
+      <a
+        rel="nofollow"
+      >
+        2
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-3"
+      tabindex="0"
+      title="3"
+    >
+      <a
+        rel="nofollow"
+      >
+        3
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-4"
+      tabindex="0"
+      title="4"
+    >
+      <a
+        rel="nofollow"
+      >
+        4
+      </a>
+    </li>
+    <li
+      class="ant-pagination-item ant-pagination-item-5"
+      tabindex="0"
+      title="5"
+    >
+      <a
+        rel="nofollow"
+      >
+        5
+      </a>
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-next"
+      tabindex="0"
+      title="Next Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-options"
+    >
+      <div
+        class="ant-select ant-pagination-options-size-changer ant-select-sm ant-select-single ant-select-show-arrow ant-select-disabled"
+      >
+        <div
+          class="ant-select-selector"
+        >
+          <span
+            class="ant-select-selection-search"
+          >
+            <input
+              aria-activedescendant="undefined_list_0"
+              aria-autocomplete="list"
+              aria-controls="undefined_list"
+              aria-expanded="false"
+              aria-haspopup="listbox"
+              aria-owns="undefined_list"
+              autocomplete="off"
+              class="ant-select-selection-search-input"
+              disabled=""
+              readonly=""
+              role="combobox"
+              style="opacity:0"
+              unselectable="on"
+              value=""
+            />
+          </span>
+          <span
+            class="ant-select-selection-item"
+            title="10 / page"
+          >
+            10 / page
+          </span>
+        </div>
+        <span
+          aria-hidden="true"
+          class="ant-select-arrow"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="down"
+            class="anticon anticon-down ant-select-suffix"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="down"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
+      <div
+        class="ant-pagination-options-quick-jumper"
+      >
+        Go to
+        <input
+          disabled=""
+          type="text"
+          value=""
+        />
+      </div>
+    </li>
+  </ul>,
 ]
 `;

@ -2455,92 +2661,182 @@ exports[`renders ./components/pagination/demo/more.md correctly 1`] = `
 `;

 exports[`renders ./components/pagination/demo/simple.md correctly 1`] = `
-<ul
-  class="ant-pagination ant-pagination-simple"
->
-  <li
-    aria-disabled="false"
-    class="ant-pagination-prev"
-    tabindex="0"
-    title="Previous Page"
+Array [
+  <ul
+    class="ant-pagination ant-pagination-simple"
  >
-    <button
-      class="ant-pagination-item-link"
-      tabindex="-1"
-      type="button"
+    <li
+      aria-disabled="false"
+      class="ant-pagination-prev"
+      tabindex="0"
+      title="Previous Page"
    >
-      <span
-        aria-label="left"
-        class="anticon anticon-left"
-        role="img"
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="left"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
        >
-          <path
-            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-          />
-        </svg>
-      </span>
-    </button>
-  </li>
-  <li
-    class="ant-pagination-simple-pager"
-    title="2/5"
-  >
-    <input
-      size="3"
-      type="text"
-      value="2"
-    />
-    <span
-      class="ant-pagination-slash"
-    >
-      /
-    </span>
-    5
-  </li>
-  <li
-    aria-disabled="false"
-    class="ant-pagination-next"
-    tabindex="0"
-    title="Next Page"
-  >
-    <button
-      class="ant-pagination-item-link"
-      tabindex="-1"
-      type="button"
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-simple-pager"
+      title="2/5"
    >
+      <input
+        size="3"
+        type="text"
+        value="2"
+      />
      <span
-        aria-label="right"
-        class="anticon anticon-right"
-        role="img"
+        class="ant-pagination-slash"
      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-          />
-        </svg>
+        /
      </span>
-    </button>
-  </li>
-</ul>
+      5
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-next"
+      tabindex="0"
+      title="Next Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+  </ul>,
+  <br />,
+  <ul
+    class="ant-pagination ant-pagination-simple ant-pagination-disabled"
+  >
+    <li
+      aria-disabled="false"
+      class="ant-pagination-prev"
+      tabindex="0"
+      title="Previous Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="left"
+          class="anticon anticon-left"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="left"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+    <li
+      class="ant-pagination-simple-pager"
+      title="2/5"
+    >
+      <input
+        disabled=""
+        size="3"
+        type="text"
+        value="2"
+      />
+      <span
+        class="ant-pagination-slash"
+      >
+        /
+      </span>
+      5
+    </li>
+    <li
+      aria-disabled="false"
+      class="ant-pagination-next"
+      tabindex="0"
+      title="Next Page"
+    >
+      <button
+        class="ant-pagination-item-link"
+        tabindex="-1"
+        type="button"
+      >
+        <span
+          aria-label="right"
+          class="anticon anticon-right"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="right"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+            />
+          </svg>
+        </span>
+      </button>
+    </li>
+  </ul>,
+]
 `;

 exports[`renders ./components/pagination/demo/total.md correctly 1`] = `
--- a/components/pagination/demo/mini.md
+++ b/components/pagination/demo/mini.md
@ -25,6 +25,14 @@ ReactDOM.render(
    <Pagination size="small" total={50} />
    <Pagination size="small" total={50} showSizeChanger showQuickJumper />
    <Pagination size="small" total={50} showTotal={showTotal} />
+    <Pagination
+      size="small"
+      total={50}
+      disabled
+      showTotal={showTotal}
+      showSizeChanger
+      showQuickJumper
+    />
  </>,
  mountNode,
 );
--- a/components/pagination/demo/simple.md
+++ b/components/pagination/demo/simple.md
@ -16,5 +16,12 @@ Simple mode.
 ```jsx
 import { Pagination } from 'antd';

-ReactDOM.render(<Pagination simple defaultCurrent={2} total={50} />, mountNode);
+ReactDOM.render(
+  <>
+    <Pagination simple defaultCurrent={2} total={50} />
+    <br />
+    <Pagination disabled simple defaultCurrent={2} total={50} />
+  </>,
+  mountNode,
+);
 ```
--- a/components/pagination/style/index.less
+++ b/components/pagination/style/index.less
@ -282,6 +282,13 @@
      &:hover {
        border-color: @primary-color;
      }
+
+      &[disabled] {
+        color: @disabled-color;
+        background: @disabled-bg;
+        border-color: @border-color-base;
+        cursor: not-allowed;
+      }
    }
  }

@ -377,6 +384,9 @@
      background: @disabled-bg;
      border-color: @border-color-base;
      cursor: not-allowed;
+      .@{pagination-prefix-cls}-simple& {
+        background: transparent;
+      }
    }

    .@{pagination-prefix-cls}-item-link-icon {
@ -386,6 +396,10 @@
    .@{pagination-prefix-cls}-item-ellipsis {
      opacity: 1;
    }
+
+    .@{pagination-prefix-cls}-simple-pager {
+      color: @disabled-color;
+    }
  }
 }

--- a/components/select/tests/snapshots/demo.test.js.snap
+++ b/components/select/tests/snapshots/demo.test.js.snap
@ -1089,112 +1089,223 @@ exports[`renders ./components/select/demo/label-in-value.md correctly 1`] = `
 `;

 exports[`renders ./components/select/demo/multiple.md correctly 1`] = `
-<div
-  class="ant-select ant-select-multiple ant-select-show-search"
-  style="width:100%"
->
+Array [
  <div
-    class="ant-select-selector"
+    class="ant-select ant-select-multiple ant-select-show-search"
+    style="width:100%"
  >
-    <span
-      class="ant-select-selection-item"
+    <div
+      class="ant-select-selector"
    >
      <span
-        class="ant-select-selection-item-content"
-      >
-        a10
-      </span>
-      <span
-        aria-hidden="true"
-        class="ant-select-selection-item-remove"
-        style="user-select:none;-webkit-user-select:none"
-        unselectable="on"
+        class="ant-select-selection-item"
      >
        <span
-          aria-label="close"
-          class="anticon anticon-close"
-          role="img"
+          class="ant-select-selection-item-content"
        >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="close"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
+          a10
+        </span>
+        <span
+          aria-hidden="true"
+          class="ant-select-selection-item-remove"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close"
+            role="img"
          >
-            <path
-              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-            />
-          </svg>
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="close"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
        </span>
      </span>
-    </span>
-    <span
-      class="ant-select-selection-item"
-    >
      <span
-        class="ant-select-selection-item-content"
-      >
-        c12
-      </span>
-      <span
-        aria-hidden="true"
-        class="ant-select-selection-item-remove"
-        style="user-select:none;-webkit-user-select:none"
-        unselectable="on"
+        class="ant-select-selection-item"
      >
        <span
-          aria-label="close"
-          class="anticon anticon-close"
-          role="img"
+          class="ant-select-selection-item-content"
        >
-          <svg
-            aria-hidden="true"
-            class=""
-            data-icon="close"
-            fill="currentColor"
-            focusable="false"
-            height="1em"
-            viewBox="64 64 896 896"
-            width="1em"
+          c12
+        </span>
+        <span
+          aria-hidden="true"
+          class="ant-select-selection-item-remove"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close"
+            role="img"
          >
-            <path
-              d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
-            />
-          </svg>
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="close"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
        </span>
      </span>
-    </span>
-    <span
-      class="ant-select-selection-search"
-      style="width:0"
-    >
-      <input
-        aria-activedescendant="undefined_list_0"
-        aria-autocomplete="list"
-        aria-controls="undefined_list"
-        aria-haspopup="listbox"
-        aria-owns="undefined_list"
-        autocomplete="off"
-        class="ant-select-selection-search-input"
-        readonly=""
-        role="combobox"
-        style="opacity:0"
-        unselectable="on"
-        value=""
-      />
      <span
-        aria-hidden="true"
-        class="ant-select-selection-search-mirror"
+        class="ant-select-selection-search"
+        style="width:0"
      >
-         
+        <input
+          aria-activedescendant="undefined_list_0"
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-haspopup="listbox"
+          aria-owns="undefined_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          readonly=""
+          role="combobox"
+          style="opacity:0"
+          unselectable="on"
+          value=""
+        />
+        <span
+          aria-hidden="true"
+          class="ant-select-selection-search-mirror"
+        >
+           
+        </span>
      </span>
-    </span>
-  </div>
-</div>
+    </div>
+  </div>,
+  <br />,
+  <div
+    class="ant-select ant-select-multiple ant-select-disabled ant-select-show-search"
+    style="width:100%"
+  >
+    <div
+      class="ant-select-selector"
+    >
+      <span
+        class="ant-select-selection-item"
+      >
+        <span
+          class="ant-select-selection-item-content"
+        >
+          a10
+        </span>
+        <span
+          aria-hidden="true"
+          class="ant-select-selection-item-remove"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="close"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
+      <span
+        class="ant-select-selection-item"
+      >
+        <span
+          class="ant-select-selection-item-content"
+        >
+          c12
+        </span>
+        <span
+          aria-hidden="true"
+          class="ant-select-selection-item-remove"
+          style="user-select:none;-webkit-user-select:none"
+          unselectable="on"
+        >
+          <span
+            aria-label="close"
+            class="anticon anticon-close"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              class=""
+              data-icon="close"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+              />
+            </svg>
+          </span>
+        </span>
+      </span>
+      <span
+        class="ant-select-selection-search"
+        style="width:0"
+      >
+        <input
+          aria-activedescendant="undefined_list_0"
+          aria-autocomplete="list"
+          aria-controls="undefined_list"
+          aria-expanded="false"
+          aria-haspopup="listbox"
+          aria-owns="undefined_list"
+          autocomplete="off"
+          class="ant-select-selection-search-input"
+          disabled=""
+          readonly=""
+          role="combobox"
+          style="opacity:0"
+          unselectable="on"
+          value=""
+        />
+        <span
+          aria-hidden="true"
+          class="ant-select-selection-search-mirror"
+        >
+           
+        </span>
+      </span>
+    </div>
+  </div>,
+]
 `;

 exports[`renders ./components/select/demo/optgroup.md correctly 1`] = `
--- a/components/select/demo/multiple.md
+++ b/components/select/demo/multiple.md
@ -28,15 +28,28 @@ function handleChange(value) {
 }

 ReactDOM.render(
-  <Select
-    mode="multiple"
-    style={{ width: '100%' }}
-    placeholder="Please select"
-    defaultValue={['a10', 'c12']}
-    onChange={handleChange}
-  >
-    {children}
-  </Select>,
+  <>
+    <Select
+      mode="multiple"
+      style={{ width: '100%' }}
+      placeholder="Please select"
+      defaultValue={['a10', 'c12']}
+      onChange={handleChange}
+    >
+      {children}
+    </Select>
+    <br />
+    <Select
+      mode="multiple"
+      disabled
+      style={{ width: '100%' }}
+      placeholder="Please select"
+      defaultValue={['a10', 'c12']}
+      onChange={handleChange}
+    >
+      {children}
+    </Select>
+  </>,
  mountNode,
 );
 ```
--- a/components/select/style/index.less
+++ b/components/select/style/index.less
@ -124,6 +124,10 @@
        pointer-events: auto;
      }
    }
+
+    .@{select-prefix-cls}-disabled & {
+      cursor: not-allowed;
+    }
  }

  // ========================== Clear ==========================
--- a/components/select/style/multiple.less
+++ b/components/select/style/multiple.less
@ -30,6 +30,11 @@
        cursor: text;
      }

+      .@{select-prefix-cls}-disabled& {
+        background: @select-multiple-disabled-background;
+        cursor: not-allowed;
+      }
+
      &::after {
        display: inline-block;
        width: 0;
@ -64,6 +69,12 @@
      transition: font-size 0.3s, line-height 0.3s, height 0.3s;
      user-select: none;

+      .@{select-prefix-cls}-disabled& {
+        color: @select-multiple-item-disabled-color;
+        border-color: @select-multiple-item-disabled-border-color;
+        cursor: not-allowed;
+      }
+
      // It's ok not to do this, but 24px makes bottom narrow in view should adjust
      &-content {
        display: inline-block;
--- a/components/slider/tests/snapshots/index.test.js.snap
+++ b/components/slider/tests/snapshots/index.test.js.snap
@ -84,6 +84,59 @@ exports[`Slider should render in RTL direction 1`] = `
 </div>
 `;

+exports[`Slider should show correct placement tooltip when set tooltipPlacement 1`] = `
+<div>
+  <div
+    class="ant-tooltip ant-slider-tooltip"
+    style="opacity:0"
+  >
+    <div
+      class="ant-tooltip-content"
+    >
+      <div
+        class="ant-tooltip-arrow"
+      >
+        <span
+          class="ant-tooltip-arrow-content"
+        />
+      </div>
+      <div
+        class="ant-tooltip-inner"
+        role="tooltip"
+      >
+        30
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Slider should show correct placement tooltip when set tooltipPlacement 2`] = `
+<div>
+  <div
+    class="ant-tooltip ant-slider-tooltip ant-tooltip-hidden"
+  >
+    <div
+      class="ant-tooltip-content"
+    >
+      <div
+        class="ant-tooltip-arrow"
+      >
+        <span
+          class="ant-tooltip-arrow-content"
+        />
+      </div>
+      <div
+        class="ant-tooltip-inner"
+        role="tooltip"
+      >
+        30
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
 exports[`Slider should show tooltip when hovering slider handler 1`] = `
 <div>
  <div
--- a/components/slider/tests/index.test.js
+++ b/components/slider/tests/index.test.js
@ -21,6 +21,14 @@ describe('Slider', () => {
    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
  });

+  it('should show correct placement tooltip when set tooltipPlacement', () => {
+    const wrapper = mount(<Slider vertical defaultValue={30} tooltipPlacement="left" />);
+    wrapper.find('.ant-slider-handle').at(0).simulate('mouseEnter');
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
+    wrapper.find('.ant-slider-handle').at(0).simulate('mouseLeave');
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
+  });
+
  it('when tooltipVisible is true, tooltip should show always, or should never show', () => {
    let wrapper = mount(<Slider defaultValue={30} tooltipVisible />);
    expect(wrapper.find('.ant-tooltip-content').at(0).hasClass('ant-tooltip-hidden')).toBe(false);
--- a/components/slider/index.tsx
+++ b/components/slider/index.tsx
@ -73,9 +73,19 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>((
  const [visibles, setVisibles] = React.useState<Visibles>({});

  const toggleTooltipVisible = (index: number, visible: boolean) => {
-    const temp = { ...visibles };
-    temp[index] = visible;
-    setVisibles(temp);
+    setVisibles((prev: Visibles) => {
+      return { ...prev, [index]: visible };
+    });
+  };
+
+  const getTooltipPlacement = (tooltipPlacement?: TooltipPlacement, vertical?: boolean) => {
+    if (tooltipPlacement) {
+      return tooltipPlacement;
+    }
+    if (!vertical) {
+      return 'top';
+    }
+    return direction === 'rtl' ? 'left' : 'right';
  };

  const handleWithTooltip: HandleGeneratorFn = ({
@ -97,7 +107,7 @@ const Slider = React.forwardRef<unknown, SliderSingleProps | SliderRangeProps>((
        prefixCls={tooltipPrefixCls}
        title={tipFormatter ? tipFormatter(value) : ''}
        visible={visible}
-        placement={tooltipPlacement || (vertical ? 'right' : 'top')}
+        placement={getTooltipPlacement(tooltipPlacement, vertical)}
        transitionName="zoom-down"
        key={index}
        overlayClassName={`${prefixCls}-tooltip`}
--- a/components/space/index.zh-CN.md
+++ b/components/space/index.zh-CN.md
@ -13,6 +13,9 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/wc6%263gJ0Y8/Space.svg

 避免组件紧贴在一起，拉开统一的空间。

+- 适合行内元素的水平间距。
+- 可以设置各种水平对齐方式。
+
 ## API

 | 参数      | 说明     | 类型                                       | 默认值       | 版本  |
--- a/components/style/themes/dark.less
+++ b/components/style/themes/dark.less
@ -230,6 +230,10 @@
 // ---
@descriptions-bg: @background-color-light;

+// Divider
+// ---
+@divider-color: rgba(255, 255, 255, 12%);
+
 // Modal
 // ---
@modal-header-bg: @popover-background;
@ -245,7 +249,7 @@
 // Radio buttons
 // ---
@radio-disabled-button-checked-bg: fade(@white, 20%);
-@radio-disabled-button-checked-color: @black;
+@radio-disabled-button-checked-color: @disabled-color;

 // Layout
 // ---
@ -269,6 +273,9 @@
@select-clear-background: @component-background;
@select-selection-item-bg: fade(@white, 8);
@select-selection-item-border-color: @border-color-split;
+@select-multiple-disabled-background: @component-background;
+@select-multiple-item-disabled-color: #595959;
+@select-multiple-item-disabled-border-color: @popover-background;

 // Cascader
 // ---
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@ -206,6 +206,8 @@
@btn-height-lg: @height-lg;
@btn-height-sm: @height-sm;

+@btn-line-height: @line-height-base;
+
@btn-circle-size: @btn-height-base;
@btn-circle-size-lg: @btn-height-lg;
@btn-circle-size-sm: @btn-height-sm;
@ -268,7 +270,7 @@
@radio-button-hover-color: @primary-5;
@radio-button-active-color: @primary-7;
@radio-disabled-button-checked-bg: tint(@black, 90%);
-@radio-disabled-button-checked-color: @text-color-inverse;
+@radio-disabled-button-checked-color: @disabled-color;
@radio-wrapper-margin-right: 8px;

 // Media queries breakpoints
@ -434,6 +436,9 @@
@select-multiple-item-height: @input-height-base - @input-padding-vertical-base * 2; // Normal 24px
@select-multiple-item-height-lg: 32px;
@select-multiple-item-spacing-half: ceil(@input-padding-vertical-base / 2);
+@select-multiple-disabled-background: @input-disabled-bg;
+@select-multiple-item-disabled-color: #bfbfbf;
+@select-multiple-item-disabled-border-color: @select-border-color;

 // Cascader
 // ---
--- a/components/table/Table.tsx
+++ b/components/table/Table.tsx
@ -222,18 +222,13 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
    }

    if (onChange) {
-      onChange(
-        changeInfo.pagination!,
-        changeInfo.filters!,
-        changeInfo.sorter!,
-        {
-          currentDataSource: getFilterData(
-            getSortData(rawData, changeInfo.sorterStates!, childrenColumnName),
-            changeInfo.filterStates!,
-          ),
-          action,
-        },
-      );
+      onChange(changeInfo.pagination!, changeInfo.filters!, changeInfo.sorter!, {
+        currentDataSource: getFilterData(
+          getSortData(rawData, changeInfo.sorterStates!, childrenColumnName),
+          changeInfo.filterStates!,
+        ),
+        action,
+      });
    }
  };

@ -409,7 +404,9 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
  }

  // Indent size
-  mergedExpandable.indentSize = mergedExpandable.indentSize || indentSize || 15;
+  if (typeof mergedExpandable.indentSize !== 'number') {
+    mergedExpandable.indentSize = typeof indentSize === 'number' ? indentSize : 15;
+  }

  // ============================ Render ============================
  const transformColumns = React.useCallback(
--- a/components/table/tests/Table.expand.test.js
+++ b/components/table/tests/Table.expand.test.js
@ -40,10 +40,7 @@ const data = [
 describe('Table.expand', () => {
  it('click to expand', () => {
    const wrapper = mount(<Table columns={columns} dataSource={data} />);
-    wrapper
-      .find('.ant-table-row-expand-icon')
-      .last()
-      .simulate('click');
+    wrapper.find('.ant-table-row-expand-icon').last().simulate('click');
    expect(wrapper.render()).toMatchSnapshot();
  });

@ -59,10 +56,7 @@ describe('Table.expand', () => {
      />,
    );

-    wrapper
-      .find('.ant-table-row-expand-icon')
-      .first()
-      .simulate('click');
+    wrapper.find('.ant-table-row-expand-icon').first().simulate('click');
    expect(
      wrapper
        .find('.ant-table-row-expand-icon')
@ -70,10 +64,7 @@ describe('Table.expand', () => {
        .hasClass('ant-table-row-expand-icon-expanded'),
    ).toBeTruthy();

-    wrapper
-      .find('.ant-table-row-expand-icon')
-      .first()
-      .simulate('click');
+    wrapper.find('.ant-table-row-expand-icon').first().simulate('click');
    expect(
      wrapper
        .find('.ant-table-row-expand-icon')
@ -96,6 +87,16 @@ describe('Table.expand', () => {
    expect(wrapper.find('.expand-icon')).toHaveLength(1);
  });

+  it('row indent padding should be 0px when indentSize defined as 0', () => {
+    const wrapper = mount(<Table indentSize={0} columns={columns} dataSource={data} />);
+    const button = wrapper.find('.ant-table-row-expand-icon').at(0);
+    button.simulate('click');
+    expect(wrapper.find('.indent-level-1').at(0).prop('style')).toHaveProperty(
+      'paddingLeft',
+      '0px',
+    );
+  });
+
  describe('expandIconColumnIndex', () => {
    it('basic', () => {
      const wrapper = mount(
@ -109,18 +110,8 @@ describe('Table.expand', () => {
        />,
      );

-      expect(
-        wrapper
-          .find('td')
-          .at(0)
-          .text(),
-      ).toEqual('bamboo');
-      expect(
-        wrapper
-          .find('td')
-          .at(1)
-          .find('.ant-table-row-expand-icon').length,
-      ).toBeTruthy();
+      expect(wrapper.find('td').at(0).text()).toEqual('bamboo');
+      expect(wrapper.find('td').at(1).find('.ant-table-row-expand-icon').length).toBeTruthy();
    });

    it('work with selection', () => {
@ -136,24 +127,9 @@ describe('Table.expand', () => {
        />,
      );

-      expect(
-        wrapper
-          .find('td')
-          .at(0)
-          .find('.ant-checkbox-input').length,
-      ).toBeTruthy();
-      expect(
-        wrapper
-          .find('td')
-          .at(1)
-          .text(),
-      ).toEqual('bamboo');
-      expect(
-        wrapper
-          .find('td')
-          .at(2)
-          .find('.ant-table-row-expand-icon').length,
-      ).toBeTruthy();
+      expect(wrapper.find('td').at(0).find('.ant-checkbox-input').length).toBeTruthy();
+      expect(wrapper.find('td').at(1).text()).toEqual('bamboo');
+      expect(wrapper.find('td').at(2).find('.ant-table-row-expand-icon').length).toBeTruthy();
    });
  });
 });
--- a/components/table/tests/Table.filter.test.js
+++ b/components/table/tests/Table.filter.test.js
@ -82,16 +82,23 @@ describe('Table.filter', () => {
  });

  it('renders empty menu correctly', () => {
-    const wrapper = mount(createTable({
-      columns: [
-        {
-          ...column,
-          filters: [],
-        },
-      ],
-    }));
+    jest.spyOn(console, 'error').mockImplementation(() => undefined);
+    const wrapper = mount(
+      createTable({
+        columns: [
+          {
+            ...column,
+            filters: [],
+          },
+        ],
+      }),
+    );
    wrapper.find('span.ant-dropdown-trigger').simulate('click', nativeEvent);
    expect(wrapper.find('Empty').length).toBe(1);
+    // eslint-disable-next-line no-console
+    expect(console.error).not.toHaveBeenCalled();
+    // eslint-disable-next-line no-console
+    console.error.mockRestore();
  });

  it('renders radio filter correctly', () => {
--- a/components/table/tests/snapshots/demo.test.js.snap
+++ b/components/table/tests/snapshots/demo.test.js.snap
@ -2919,38 +2919,47 @@ Array [
                    <td
                      class="ant-table-cell"
                    >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                          style="margin-right:16px"
                        >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                        >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                          >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              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>
-                        </a>
-                      </span>
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="down"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                />
+                              </svg>
+                            </span>
+                          </a>
+                        </div>
+                      </div>
                    </td>
                  </tr>
                  <tr
@ -3003,38 +3012,47 @@ Array [
                    <td
                      class="ant-table-cell"
                    >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                          style="margin-right:16px"
                        >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                        >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                          >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              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>
-                        </a>
-                      </span>
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="down"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                />
+                              </svg>
+                            </span>
+                          </a>
+                        </div>
+                      </div>
                    </td>
                  </tr>
                  <tr
@ -3087,38 +3105,47 @@ Array [
                    <td
                      class="ant-table-cell"
                    >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                          style="margin-right:16px"
                        >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                        >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                          >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              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>
-                        </a>
-                      </span>
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="down"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                />
+                              </svg>
+                            </span>
+                          </a>
+                        </div>
+                      </div>
                    </td>
                  </tr>
                  <tr
@ -3171,38 +3198,47 @@ Array [
                    <td
                      class="ant-table-cell"
                    >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                          style="margin-right:16px"
                        >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                        >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                          >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              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>
-                        </a>
-                      </span>
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="down"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                />
+                              </svg>
+                            </span>
+                          </a>
+                        </div>
+                      </div>
                    </td>
                  </tr>
                  <tr
@ -3255,38 +3291,47 @@ Array [
                    <td
                      class="ant-table-cell"
                    >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                          style="margin-right:16px"
                        >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                        >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                          >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              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>
-                        </a>
-                      </span>
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="down"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                />
+                              </svg>
+                            </span>
+                          </a>
+                        </div>
+                      </div>
                    </td>
                  </tr>
                  <tr
@ -3339,38 +3384,47 @@ Array [
                    <td
                      class="ant-table-cell"
                    >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                          style="margin-right:16px"
                        >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                        >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                          >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              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>
-                        </a>
-                      </span>
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="down"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                />
+                              </svg>
+                            </span>
+                          </a>
+                        </div>
+                      </div>
                    </td>
                  </tr>
                  <tr
@ -3423,38 +3477,47 @@ Array [
                    <td
                      class="ant-table-cell"
                    >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                          style="margin-right:16px"
                        >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                        >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                          >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              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>
-                        </a>
-                      </span>
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="down"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                />
+                              </svg>
+                            </span>
+                          </a>
+                        </div>
+                      </div>
                    </td>
                  </tr>
                  <tr
@ -3507,38 +3570,47 @@ Array [
                    <td
                      class="ant-table-cell"
                    >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                          style="margin-right:16px"
                        >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                        >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                          >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              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>
-                        </a>
-                      </span>
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="down"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                />
+                              </svg>
+                            </span>
+                          </a>
+                        </div>
+                      </div>
                    </td>
                  </tr>
                  <tr
@ -3591,38 +3663,47 @@ Array [
                    <td
                      class="ant-table-cell"
                    >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                          style="margin-right:16px"
                        >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                        >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                          >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              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>
-                        </a>
-                      </span>
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="down"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                />
+                              </svg>
+                            </span>
+                          </a>
+                        </div>
+                      </div>
                    </td>
                  </tr>
                  <tr
@ -3675,38 +3756,47 @@ Array [
                    <td
                      class="ant-table-cell"
                    >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                          style="margin-right:16px"
                        >
-                          Delete
-                        </a>
-                        <a
-                          class="ant-dropdown-link"
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
                        >
-                          More actions 
-                          <span
-                            aria-label="down"
-                            class="anticon anticon-down"
-                            role="img"
+                          <a
+                            class="ant-dropdown-link"
                          >
-                            <svg
-                              aria-hidden="true"
-                              class=""
-                              data-icon="down"
-                              fill="currentColor"
-                              focusable="false"
-                              height="1em"
-                              viewBox="64 64 896 896"
-                              width="1em"
+                            More actions 
+                            <span
+                              aria-label="down"
+                              class="anticon anticon-down"
+                              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>
-                        </a>
-                      </span>
+                              <svg
+                                aria-hidden="true"
+                                class=""
+                                data-icon="down"
+                                fill="currentColor"
+                                focusable="false"
+                                height="1em"
+                                viewBox="64 64 896 896"
+                                width="1em"
+                              >
+                                <path
+                                  d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+                                />
+                              </svg>
+                            </span>
+                          </a>
+                        </div>
+                      </div>
                    </td>
                  </tr>
                </tbody>
@ -11463,16 +11553,25 @@ exports[`renders ./components/table/demo/pagination.md correctly 1`] = `
                    <td
                      class="ant-table-cell"
                    >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                          style="margin-right:16px"
                        >
-                          Invite John Brown
-                        </a>
-                        <a>
-                          Delete
-                        </a>
-                      </span>
+                          <a>
+                            Invite John Brown
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
+                        >
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                      </div>
                    </td>
                  </tr>
                  <tr
@ -11510,16 +11609,25 @@ exports[`renders ./components/table/demo/pagination.md correctly 1`] = `
                    <td
                      class="ant-table-cell"
                    >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                          style="margin-right:16px"
                        >
-                          Invite Jim Green
-                        </a>
-                        <a>
-                          Delete
-                        </a>
-                      </span>
+                          <a>
+                            Invite Jim Green
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
+                        >
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                      </div>
                    </td>
                  </tr>
                  <tr
@ -11562,16 +11670,25 @@ exports[`renders ./components/table/demo/pagination.md correctly 1`] = `
                    <td
                      class="ant-table-cell"
                    >
-                      <span>
-                        <a
+                      <div
+                        class="ant-space ant-space-horizontal ant-space-align-center"
+                      >
+                        <div
+                          class="ant-space-item"
                          style="margin-right:16px"
                        >
-                          Invite Joe Black
-                        </a>
-                        <a>
-                          Delete
-                        </a>
-                      </span>
+                          <a>
+                            Invite Joe Black
+                          </a>
+                        </div>
+                        <div
+                          class="ant-space-item"
+                        >
+                          <a>
+                            Delete
+                          </a>
+                        </div>
+                      </div>
                    </td>
                  </tr>
                </tbody>
--- a/components/table/demo/dynamic-settings.md
+++ b/components/table/demo/dynamic-settings.md
@ -14,7 +14,7 @@ title:
 Select different settings to see the result.

 ```jsx
-import { Table, Switch, Radio, Form } from 'antd';
+import { Table, Switch, Radio, Form, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';

 const columns = [
@ -47,12 +47,12 @@ const columns = [
    key: 'action',
    sorter: true,
    render: () => (
-      <span>
-        <a style={{ marginRight: 16 }}>Delete</a>
+      <Space size="middle">
+        <a>Delete</a>
        <a className="ant-dropdown-link">
          More actions <DownOutlined />
        </a>
-      </span>
+      </Space>
    ),
  },
 ];
--- a/components/table/demo/nest-table-border-debug.md
+++ b/components/table/demo/nest-table-border-debug.md
@ -15,7 +15,7 @@ debug: true
 To see if bordered style applied to other tables.

 ```jsx
-import { Table, Badge, Menu, Dropdown, Switch, Form } from 'antd';
+import { Table, Badge, Menu, Dropdown, Switch, Form, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';

 const menu = (
@ -47,7 +47,7 @@ function NestedTable() {
          dataIndex: 'operation',
          key: 'operation',
          render: () => (
-            <span className="table-operation">
+            <Space size="middle">
              <a>Pause</a>
              <a>Stop</a>
              <Dropdown overlay={menu}>
@ -55,7 +55,7 @@ function NestedTable() {
                  More <DownOutlined />
                </a>
              </Dropdown>
-            </span>
+            </Space>
          ),
        },
      ];
--- a/components/table/demo/nested-table.md
+++ b/components/table/demo/nested-table.md
@ -14,7 +14,7 @@ title:
 Showing more detailed info of every row.

 ```jsx
-import { Table, Badge, Menu, Dropdown } from 'antd';
+import { Table, Badge, Menu, Dropdown, Space } from 'antd';
 import { DownOutlined } from '@ant-design/icons';

 const menu = (
@ -45,7 +45,7 @@ function NestedTable() {
        dataIndex: 'operation',
        key: 'operation',
        render: () => (
-          <span className="table-operation">
+          <Space size="middle">
            <a>Pause</a>
            <a>Stop</a>
            <Dropdown overlay={menu}>
@ -53,7 +53,7 @@ function NestedTable() {
                More <DownOutlined />
              </a>
            </Dropdown>
-          </span>
+          </Space>
        ),
      },
    ];
--- a/components/table/demo/pagination.md
+++ b/components/table/demo/pagination.md
@ -14,7 +14,7 @@ title:
 Table pagination settings.

 ```jsx
-import { Table, Tag, Radio } from 'antd';
+import { Table, Tag, Radio, Space } from 'antd';

 const topOptions = [
  { label: 'topLeft', value: 'topLeft' },
@ -35,7 +35,7 @@ const columns = [
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
-    render: (text) => <a>{text}</a>,
+    render: text => <a>{text}</a>,
  },
  {
    title: 'Age',
@ -51,9 +51,9 @@ const columns = [
    title: 'Tags',
    key: 'tags',
    dataIndex: 'tags',
-    render: (tags) => (
+    render: tags => (
      <span>
-        {tags.map((tag) => {
+        {tags.map(tag => {
          let color = tag.length > 5 ? 'geekblue' : 'green';
          if (tag === 'loser') {
            color = 'volcano';
@ -71,10 +71,10 @@ const columns = [
    title: 'Action',
    key: 'action',
    render: (text, record) => (
-      <span>
-        <a style={{ marginRight: 16 }}>Invite {record.name}</a>
+      <Space size="middle">
+        <a>Invite {record.name}</a>
        <a>Delete</a>
-      </span>
+      </Space>
    ),
  },
 ];
@ -117,7 +117,7 @@ class Demo extends React.Component {
            style={{ marginBottom: 10 }}
            options={topOptions}
            value={this.state.top}
-            onChange={(e) => {
+            onChange={e => {
              this.setState({ top: e.target.value });
            }}
          />
@ -126,7 +126,7 @@ class Demo extends React.Component {
          style={{ marginBottom: 10 }}
          options={bottomOptions}
          value={this.state.bottom}
-          onChange={(e) => {
+          onChange={e => {
            this.setState({ bottom: e.target.value });
          }}
        />
--- a/components/table/hooks/useFilter/FilterDropdown.tsx
+++ b/components/table/hooks/useFilter/FilterDropdown.tsx
@ -34,17 +34,21 @@ function renderFilterItems({
  locale: TableLocale;
 }) {
  if (filters.length === 0) {
+    // wrapped with <></> to avoid react warning
+    // https://github.com/ant-design/ant-design/issues/25979
    return (
-      <Empty
-        image={Empty.PRESENTED_IMAGE_SIMPLE}
-        description={locale.filterEmptyText}
-        style={{
-          margin: '16px 0',
-        }}
-        imageStyle={{
-          height: 24,
-        }}
-      />
+      <>
+        <Empty
+          image={Empty.PRESENTED_IMAGE_SIMPLE}
+          description={locale.filterEmptyText}
+          style={{
+            margin: '16px 0',
+          }}
+          imageStyle={{
+            height: 24,
+          }}
+        />
+      </>
    );
  }
  return filters.map((filter, index) => {
--- a/components/table/index.en-US.md
+++ b/components/table/index.en-US.md
@ -224,7 +224,7 @@ import { Table } from 'antd';
 import { ColumnsType } from 'antd/es/table';

 interface User {
-  key: number,
+  key: number;
  name: string;
 }

@ -239,25 +239,20 @@ const data: User[] = [{
  name: 'Jack',
 }];

-class UserTable extends Table<User> {}
-
-<UserTable columns={columns} dataSource={data} />
-
-// Use JSX style API
-class NameColumn extends Table.Column<User> {}
-
-<UserTable dataSource={data}>
-  <NameColumn key="name" title="Name" dataIndex="name" />
-</UserTable>
-
-// after TypeScript 2.9 can write like this
-// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#generic-type-arguments-in-jsx-elements
-<Table<User> columns={columns} dataSource={data} />
-<Table<User> dataSource={data}>
-  <Table.Column<User> key="name" title="Name" dataIndex="name" />
-</Table>
+export default () => (
+  <>
+    <Table<User> columns={columns} dataSource={data} />
+  
+    /* JSX style usage */
+    <Table<User> dataSource={data}>
+      <Table.Column<User> key="name" title="Name" dataIndex="name" />
+    </Table>
+  </>
+);
 ```

+Here is the [CodeSandbox for TypeScript](https://codesandbox.io/s/serene-platform-0jo5t).
+
 ## Note

 According to the [React documentation](https://facebook.github.io/react/docs/lists-and-keys.html#keys), every child in an array should be assigned a unique key. The values inside the Table's `dataSource` and `columns` should follow this rule. By default, `dataSource[i].key` will be treated as the key value for `dataSource`.
--- a/components/table/index.zh-CN.md
+++ b/components/table/index.zh-CN.md
@ -235,7 +235,7 @@ interface User {
  name: string;
 }

-const columns: ColumnsType<User>[] = [{
+const columns: ColumnsType<User> = [{
  key: 'name',
  title: 'Name',
  dataIndex: 'name',
@ -246,24 +246,20 @@ const data: User[] = [{
  name: 'Jack',
 }];

-class UserTable extends Table<User> {}
-<UserTable columns={columns} dataSource={data} />
-
-// 使用 JSX 风格的 API
-class NameColumn extends Table.Column<User> {}
-
-<UserTable dataSource={data}>
-  <NameColumn key="name" title="Name" dataIndex="name" />
-</UserTable>
-
-// TypeScript 2.9 之后也可以这样写
-// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-2-9.html#generic-type-arguments-in-jsx-elements
-<Table<User> columns={columns} dataSource={data} />
-<Table<User> dataSource={data}>
-  <Table.Column<User> key="name" title="Name" dataIndex="name" />
-</Table>
+export default () => (
+  <>
+    <Table<User> columns={columns} dataSource={data} />
+  
+    /* 使用 JSX 风格的 API */
+    <Table<User> dataSource={data}>
+      <Table.Column<User> key="name" title="Name" dataIndex="name" />
+    </Table>
+  </>
+);
 ```

+TypeScript 里使用 Table 的 [CodeSandbox 实例](https://codesandbox.io/s/serene-platform-0jo5t)。
+
 ## 注意

 按照 [React 的规范](https://zh-hans.reactjs.org/docs/lists-and-keys.html#keys)，所有的数组组件必须绑定 `key`。在 Table 中，`dataSource` 和 `columns` 里的数据值都需要指定 `key` 值。对于 `dataSource` 默认将每列数据的 `key` 属性作为唯一的标识。
--- a/components/table/style/rtl.less
+++ b/components/table/style/rtl.less
@ -44,7 +44,7 @@
    > tr {
      // ========================= Nest Table ===========================
      .@{table-prefix-cls}-wrapper:only-child {
-        .@{table-prefix-cls}-rtl {
+        .@{table-prefix-cls}.@{table-prefix-cls}-rtl {
          margin: -@table-padding-vertical (@table-padding-horizontal + ceil(@font-size-sm * 1.4)) -@table-padding-vertical -@table-padding-horizontal;
        }
      }
--- a/components/tabs/style/rtl.less
+++ b/components/tabs/style/rtl.less
@ -3,58 +3,64 @@

@tab-prefix-cls: ~'@{ant-prefix}-tabs';

-.@{tab-prefix-cls}-rtl {
-  direction: rtl;
+.@{tab-prefix-cls} {
+  &-rtl {
+    direction: rtl;

-  .@{tab-prefix-cls}-nav {
-    .@{tab-prefix-cls}-tab {
-      margin: @tabs-horizontal-margin-rtl;
+    .@{tab-prefix-cls}-nav {
+      .@{tab-prefix-cls}-tab {
+        margin: @tabs-horizontal-margin-rtl;

-      &:last-of-type {
-        margin-left: 0;
-      }
-
-      .@{iconfont-css-prefix} {
-        margin-right: 0;
-        margin-left: @margin-sm;
-      }
-
-      .@{tab-prefix-cls}-tab-remove {
-        margin-right: @margin-xs;
-        margin-left: -@margin-xss;
+        &:last-of-type {
+          margin-left: 0;
+        }

        .@{iconfont-css-prefix} {
-          margin: 0;
+          margin-right: 0;
+          margin-left: @margin-sm;
+        }
+
+        .@{tab-prefix-cls}-tab-remove {
+          margin-right: @margin-xs;
+          margin-left: -@margin-xss;
+
+          .@{iconfont-css-prefix} {
+            margin: 0;
+          }
        }
      }
    }
-  }

-  &.@{tab-prefix-cls}-left {
-    > .@{tab-prefix-cls}-nav {
-      order: 1;
+    &.@{tab-prefix-cls}-left {
+      > .@{tab-prefix-cls}-nav {
+        order: 1;
+      }
+      > .@{tab-prefix-cls}-content-holder {
+        order: 0;
+      }
    }
-    > .@{tab-prefix-cls}-content-holder {
-      order: 0;
-    }
-  }

-  &.@{tab-prefix-cls}-right {
-    > .@{tab-prefix-cls}-nav {
-      order: 0;
-    }
-    > .@{tab-prefix-cls}-content-holder {
-      order: 1;
+    &.@{tab-prefix-cls}-right {
+      > .@{tab-prefix-cls}-nav {
+        order: 0;
+      }
+      > .@{tab-prefix-cls}-content-holder {
+        order: 1;
+      }
    }
  }

  // ====================== Card ======================
-  &.@{tab-prefix-cls}-card {
+  &-card {
    &.@{tab-prefix-cls}-top,
    &.@{tab-prefix-cls}-bottom {
-      > .@{tab-prefix-cls}-nav {
-        button.@{tab-prefix-cls}-tab:not(:last-of-type) {
-          margin: 0 0 0 @tabs-card-gutter;
+      > .@{tab-prefix-cls}-nav,
+      > div > .@{tab-prefix-cls}-nav {
+        .@{tab-prefix-cls}-tab:not(:last-of-type) {
+          .@{tab-prefix-cls}-rtl& {
+            margin-right: 0;
+            margin-left: @tabs-card-gutter;
+          }
        }
      }
    }
--- a/components/time-picker/locale/ru_RU.tsx
+++ b/components/time-picker/locale/ru_RU.tsx
@ -5,6 +5,7 @@ import { TimePickerLocale } from '../index';

 const locale: TimePickerLocale = {
  placeholder: 'Выберите время',
+  rangePlaceholder: ['Время начала', 'Время окончания'],
 };

 export default locale;
--- a/components/transfer/ListBody.tsx
+++ b/components/transfer/ListBody.tsx
@ -114,6 +114,7 @@ class ListBody extends React.Component<TransferListBodyProps, TransferListBodySt
      paginationNode = (
        <Pagination
          simple
+          disabled={globalDisabled}
          className={`${prefixCls}-pagination`}
          total={filteredRenderItems.length}
          pageSize={mergedPagination.pageSize}
--- a/components/transfer/style/index.less
+++ b/components/transfer/style/index.less
@ -94,6 +94,10 @@
        transform: translateY(10%);
        cursor: pointer;
        .iconfont-size-under-12px(10px);
+
+        &[disabled] {
+          cursor: not-allowed;
+        }
      }
    }

--- a/components/tree/demo/switcher-icon.md
+++ b/components/tree/demo/switcher-icon.md
@ -17,8 +17,6 @@ customize collapse/expand icon of tree node
 import { Tree } from 'antd';
 import { DownOutlined } from '@ant-design/icons';

-const { TreeNode } = Tree;
-
 class Demo extends React.Component {
  onSelect = (selectedKeys, info) => {
    console.log('selected', selectedKeys, info);
@ -31,22 +29,57 @@ class Demo extends React.Component {
        switcherIcon={<DownOutlined />}
        defaultExpandedKeys={['0-0-0']}
        onSelect={this.onSelect}
-      >
-        <TreeNode title="parent 1" key="0-0">
-          <TreeNode title="parent 1-0" key="0-0-0">
-            <TreeNode title="leaf" key="0-0-0-0" />
-            <TreeNode title="leaf" key="0-0-0-1" />
-            <TreeNode title="leaf" key="0-0-0-2" />
-          </TreeNode>
-          <TreeNode title="parent 1-1" key="0-0-1">
-            <TreeNode title="leaf" key="0-0-1-0" />
-          </TreeNode>
-          <TreeNode title="parent 1-2" key="0-0-2">
-            <TreeNode title="leaf" key="0-0-2-0" />
-            <TreeNode title="leaf" key="0-0-2-1" />
-          </TreeNode>
-        </TreeNode>
-      </Tree>
+        treeData={[
+          {
+            title: 'parent 1',
+            key: '0-0',
+            children: [
+              {
+                title: 'parent 1-0',
+                key: '0-0-0',
+                children: [
+                  {
+                    title: 'leaf',
+                    key: '0-0-0-0',
+                  },
+                  {
+                    title: 'leaf',
+                    key: '0-0-0-1',
+                  },
+                  {
+                    title: 'leaf',
+                    key: '0-0-0-2',
+                  },
+                ],
+              },
+              {
+                title: 'parent 1-1',
+                key: '0-0-1',
+                children: [
+                  {
+                    title: 'leaf',
+                    key: '0-0-1-0',
+                  },
+                ],
+              },
+              {
+                title: 'parent 1-2',
+                key: '0-0-2',
+                children: [
+                  {
+                    title: 'leaf',
+                    key: '0-0-2-0',
+                  },
+                  {
+                    title: 'leaf',
+                    key: '0-0-2-1',
+                  },
+                ],
+              },
+            ],
+          },
+        ]}
+      />
    );
  }
 }
--- a/components/typography/tests/snapshots/demo.test.js.snap
+++ b/components/typography/tests/snapshots/demo.test.js.snap
@ -326,7 +326,7 @@ Array [

 exports[`renders ./components/typography/demo/interactive.md correctly 1`] = `
 Array [
-  <span
+  <div
    class="ant-typography"
  >
    This is an editable text.
@ -358,9 +358,8 @@ Array [
        </svg>
      </span>
    </div>
-  </span>,
-  <br />,
-  <span
+  </div>,
+  <div
    class="ant-typography"
  >
    This is an editable text with limited length.
@ -392,9 +391,8 @@ Array [
        </svg>
      </span>
    </div>
-  </span>,
-  <br />,
-  <span
+  </div>,
+  <div
    class="ant-typography"
  >
    This is a copyable text.
@ -426,9 +424,8 @@ Array [
        </svg>
      </span>
    </div>
-  </span>,
-  <br />,
-  <span
+  </div>,
+  <div
    class="ant-typography"
  >
    Replace copy text.
@ -460,9 +457,8 @@ Array [
        </svg>
      </span>
    </div>
-  </span>,
-  <br />,
-  <span
+  </div>,
+  <div
    class="ant-typography"
  >
    Custom icon.
@ -494,7 +490,7 @@ Array [
        </svg>
      </span>
    </div>
-  </span>,
+  </div>,
  <div
    class="ant-typography"
  >
--- a/components/typography/demo/interactive.md
+++ b/components/typography/demo/interactive.md
@ -17,7 +17,7 @@ Provide additional interactive capacity of editable and copyable.
 import { Typography } from 'antd';
 import { SmileOutlined } from '@ant-design/icons';

-const { Text, Paragraph } = Typography;
+const { Paragraph } = Typography;

 class Demo extends React.Component {
  state = {
@ -35,25 +35,22 @@ class Demo extends React.Component {
  };

  render() {
+    const { lengthLimitedStr } = this.state;
    return (
      <>
-        <Text editable={{ onChange: this.onChange }}>{this.state.str}</Text>
-        <br />
-        <Text
+        <Paragraph editable={{ onChange: this.onChange }}>{this.state.str}</Paragraph>
+        <Paragraph
          editable={{
            onChange: this.onLengthLimitedStrChange,
            maxLength: 50,
            autoSize: { maxRows: 5, minRows: 3 },
          }}
        >
-          {this.state.lengthLimitedStr}
-        </Text>
-        <br />
-        <Text copyable>This is a copyable text.</Text>
-        <br />
-        <Text copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Text>
-        <br />
-        <Text copyable={{ icon: <SmileOutlined /> }}>Custom icon.</Text>
+          {lengthLimitedStr}
+        </Paragraph>
+        <Paragraph copyable>This is a copyable text.</Paragraph>
+        <Paragraph copyable={{ text: 'Hello, Ant Design!' }}>Replace copy text.</Paragraph>
+        <Paragraph copyable={{ icon: <SmileOutlined /> }}>Custom icon.</Paragraph>
        <Paragraph copyable={{ tooltips: ['click here', 'you clicked!!'] }}>
          Replace tooltips text.
        </Paragraph>
--- a/components/typography/style/index.less
+++ b/components/typography/style/index.less
@ -166,7 +166,7 @@
      left: -@input-padding-horizontal - 1px;
      margin-top: -@input-padding-vertical-base - 1px;
      // stylelint-disable-next-line function-calc-no-invalid
-      margin-bottom: calc(1em - @input-padding-vertical-base - 2px);
+      margin-bottom: calc(1em - @input-padding-vertical-base - 1px);
    }

    &-confirm {
--- a/docs/spec/buttons.en-US.md
+++ b/docs/spec/buttons.en-US.md
@ -0,0 +1,170 @@
+---
+category: Design Patterns
+type: Global Rules
+order: 6
+title: Button
+---
+
+## Design Principal
+
+- Guide users to achieve the desired actions.
+- Prevent user to make mistakes.
+
+## Types
+
+### Common Button Types
+
+<div>
+  <img alt="buttons" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*wsXrT7yQH2MAAAAAAAAAAABkARQnAQ">
+</div>
+
+#### ① Default Button
+
+Default buttons are used for non-primary actions. If not sure which button type to choose from, the default button is always a safe bet.
+
+#### ② Primary Button
+
+Emphasize on "complete" or "recommend" action. There is at most one primary button per a button group.
+
+#### ③ Text Button
+
+Low emphasis and light-weight button type, such as actions in a table.
+
+#### ④ Icon Button
+
+Icon provides a visual clue.
+
+- It could fit more buttons in a small space.
+- Buttons with icon only need to provide Tooltip to indicate the meaning of the button.
+
+#### ⑤ Text Button with Icon
+
+Provides supplementary meaning to the button.
+
+### Emphasis
+
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*guusTZ6ZPxkAAAAAAAAAAABkARQnAQ">
+
+Common button types could be used to showcase to different **emphasis**.
+
+### Do & Don't
+
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*di8jS5EWYSIAAAAAAAAAAABkARQnAQ" alt="Don't" description="Don't put more than 1 primary button in the same group.">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3WUkT5pD1SUAAAAAAAAAAABkARQnAQ" alt="Do" description="1. Emphasiz on the primary action. <br/>2. If there is no primary action, then default buttons is the safest choice.">
+
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*zBtTRq2xbTYAAAAAAAAAAABkARQnAQ" alt="Don't" description="Put 2 icons in the same button.">
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*EpwSTpaGPBgAAAAAAAAAAABkARQnAQ" alt="Do" description="1. Should place the buttons in the order of importance. <br/>2. The less important actions should be place on right or at bottom.">
+
+### Special Button Types
+
+#### Dashed Button
+
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gPmNQ6_YCcoAAAAAAAAAAABkARQnAQ">
+
+Guide users to add content in an area.
+
+#### Danger Button
+
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*OvNaQJrmqVMAAAAAAAAAAABkARQnAQ">
+
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*ujcXTqJ_IwwAAAAAAAAAAABkARQnAQ" alt="Do" description="If user's intention is to delete, use danger button to warn this action has risks.">
+
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*o7EySrBPX9oAAAAAAAAAAABkARQnAQ" alt="Do" description="When system does not recommend the deletion action, we could set 'Cancel' as the primary action.">
+
+Warns users that there are risks involved in the action.
+
+#### Ghost Button
+
+Used in the dark or colored background.
+
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*-wORTrNJ6YUAAAAAAAAAAABkARQnAQ">
+
+#### Call to Action
+
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*32zdRqTjDhYAAAAAAAAAAABkARQnAQ">
+
+Usually appeared alone and intend to used as a command. For example, it is used in the landing page or welcome banner. It could be as wide as its parent container. It is recommend to have just 1 "Call to Action" button in 1 screen.
+
+## Placement
+
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*B8D0RJnirLkAAAAAAAAAAABkARQnAQ">
+
+Place buttons in the users' reading pattern for the ease of discovery, such as the "F-Shaped Reading Pattern" and "Z-Shaped Reading Pattern".
+
+### How to Decide Button Placement?
+
+#### Page/Card/Section presents a subject, where it could be broken into 3 areas:
+
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*iVZpRpdN_2AAAAAAAAAAAABkARQnAQ">
+
+- Header: subject's heading, summary and navigation
+- Body: detailed content
+- Footer: supplementary information or toolbar
+
+Place buttons in different areas could have different meanings.
+
+### When to Put Buttons in the Footer?
+
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*KGGWQLCBfm0AAAAAAAAAAABkARQnAQ">
+
+- Body section has collapsed or hidden content, such as it could not show the entire content in one screen;
+- Body section has complex content. For example, it has multiple subgroups and each subgroup has its own actions. Now it is needed to separate "Complete" action from body section to avoid confusion.
+
+In short, footer's purpose is to have a separation from body.
+
+## Ordering
+
+### Button Ordering
+
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*NcPDQI3IX8YAAAAAAAAAAABkARQnAQ">
+
+Recommend to start from the reading flow, collapsed content should always be on the right.
+
+**How to Decide Button Ordering**
+
+- Conversation Flow: place buttons in the order similar to a conversation between computers and users. **Ask users the needed actions or your desired actions, then present the risks involved.**
+- Navigation Flow: for example, if a button represents going back, should be placed on the left implying it is going to the previous step.
+
+### Button Group
+
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*tK-AQaE5h1YAAAAAAAAAAABkARQnAQ" alt="Do">
+
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*_gU7ToHiZz4AAAAAAAAAAABkARQnAQ" alt="Don't" description="When button group has no space in betwee, it is easy to confuse it with Toggle Button.">
+
+When multiple buttons form a group, align buttons in one line with spaces in between.
+
+### Grouping Buttons
+
+When there are too many buttons on the screen, we could group relevant buttons together and use similar design for that group. If one of the buttons is primary action, we could still use emphasis.
+
+<img class="preview-img no-padding" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*x7YsTafH5osAAAAAAAAAAABkARQnAQ">
+
+**Collapse buttons in the order of importance**
+
+<br />
+
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Qn-mQKxaQ5kAAAAAAAAAAABkARQnAQ" alt="Do">
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*3bUZRbPiVBEAAAAAAAAAAABkARQnAQ" alt="Don't" description="If buttons are in the same group, no need to add dividers between them.">
+
+**Flat display of all the buttons**: could separate different groups using space; or use divider to group similar buttons.
+
+## Label
+
+<img class="preview-img no-padding good" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*33KsR66zTY8AAAAAAAAAAABkARQnAQ" alt="Do">
+
+<img class="preview-img no-padding bad" align="right" src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*238RTb4kaPwAAAAAAAAAAABkARQnAQ" alt="Don't" description="Should use verb">
+
+Labels should clearly indicate to users what would happen when buttons got clicked.
+
+- Should use verb (except dropdown buttons)
+- Should be relevant to the context and be concise.
+
+Ant Design use "OK / Cancel" as default label, but you could still use below methods to customize the label text:
+
+- Describe the action result.
+
+  > Publish, Login, Register.
+
+- If primary action means negative, stress the consequences.
+
+  > Are you sure to delete it? Delete / Cancel
--- a/Show More
+++ b/Show More