Merge pull request #24293 from ant-design/master-to-merge-feature

chore: Master to merge feature
2024-11-30 06:09:34 +08:00 · 2020-05-19 19:58:50 +08:00 · 2020-05-19 19:58:50 +08:00 · 6106aab9d5
commit 6106aab9d5
parent 1bbaa49bef d6d485b72d
74 changed files with 1256 additions and 708 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,15 @@ timeline: true

 ---

+## 4.2.4
+
+`2020-05-18`
+
+- 🐞 Revert Switch patch to fix handle position style issue with `unCheckedChildren`. [#24242](https://github.com/ant-design/ant-design/pull/24242)
+- 💄 Adjust Upload icon default color to red in error status. [#24160](https://github.com/ant-design/ant-design/pull/24160)
+- 💄 Adjust Dropdown arrow position a little higher. [#24215](https://github.com/ant-design/ant-design/pull/24215)
+- 🌐 Form `defaultValidateMessages` support `ru_RU`. [#24219](https://github.com/ant-design/ant-design/pull/24219) [@aivinog1](https://github.com/aivinog1)
+
 ## 4.2.3

 `2020-05-16`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,15 @@ timeline: true

 ---

+## 4.2.4
+
+`2020-05-18`
+
+- 🐞 回滚 Switch 以修复配置 `unCheckedChildren` 时，控制点位置样式问题。[#24242](https://github.com/ant-design/ant-design/pull/24242)
+- 💄 调整 Upload 错误状态图标的颜色默认为红色。[#24160](https://github.com/ant-design/ant-design/pull/24160)
+- 💄 向上微调 Dropdown 箭头位置。[#24215](https://github.com/ant-design/ant-design/pull/24215)
+- 🌐 Form `defaultValidateMessages` 支持 `ru_RU`。[#24219](https://github.com/ant-design/ant-design/pull/24219) [@aivinog1](https://github.com/aivinog1)
+
 ## 4.2.3

 `2020-05-16`
--- a/components/back-top/index.tsx
+++ b/components/back-top/index.tsx
@ -13,6 +13,7 @@ export interface BackTopProps {
  onClick?: React.MouseEventHandler<HTMLElement>;
  target?: () => HTMLElement | Window | Document;
  prefixCls?: string;
+  children?: React.ReactNode;
  className?: string;
  style?: React.CSSProperties;
  visible?: boolean; // Only for test. Don't use it.
--- a/components/badge/tests/snapshots/demo.test.js.snap
+++ b/components/badge/tests/snapshots/demo.test.js.snap
@ -469,11 +469,13 @@ exports[`renders ./components/badge/demo/change.md correctly 1`] = `
    </span>
    <button
      aria-checked="true"
-      checked=""
      class="ant-switch ant-switch-checked"
      role="switch"
      type="button"
    >
+      <div
+        class="ant-switch-handle"
+      />
      <span
        class="ant-switch-inner"
      />
--- a/components/card/tests/snapshots/demo.test.js.snap
+++ b/components/card/tests/snapshots/demo.test.js.snap
@ -420,6 +420,9 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    />
--- a/components/cascader/tests/snapshots/index.test.js.snap
+++ b/components/cascader/tests/snapshots/index.test.js.snap
@ -608,7 +608,7 @@ exports[`Cascader have a notFoundContent that fit trigger input width 1`] = `
        class="ant-cascader-menu"
      >
        <li
-          class="ant-cascader-menu-item ant-cascader-menu-item-disabled"
+          class="ant-cascader-menu-item"
          role="menuitem"
          title=""
        >
@ -1493,7 +1493,7 @@ exports[`Cascader should render not found content 1`] = `
      ],
    }
  }
-  className=""
+  className="ant-cascader-menu-empty"
  destroyPopupOnHide={false}
  getClassNameFromAlign={[Function]}
  getRootDomNode={[Function]}
@ -1552,7 +1552,7 @@ exports[`Cascader should render not found content 1`] = `
          target={[Function]}
        >
          <PopupInner
-            className="ant-cascader-menus"
+            className="ant-cascader-menus ant-cascader-menu-empty"
            hiddenClassName="ant-cascader-menus-hidden"
            onMouseDown={[Function]}
            onTouchStart={[Function]}
@ -1566,7 +1566,7 @@ exports[`Cascader should render not found content 1`] = `
            visible={true}
          >
            <div
-              className="ant-cascader-menus"
+              className="ant-cascader-menus ant-cascader-menu-empty"
              onMouseDown={[Function]}
              onTouchStart={[Function]}
              style={
@ -1687,7 +1687,7 @@ exports[`Cascader should render not found content 1`] = `
                    },
                  ]
                }
-                popupClassName=""
+                popupClassName="ant-cascader-menu-empty"
                popupPlacement="bottomLeft"
                popupVisible={true}
                prefixCls="ant-cascader"
@ -1808,7 +1808,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
      ],
    }
  }
-  className=""
+  className="ant-cascader-menu-empty"
  destroyPopupOnHide={false}
  getClassNameFromAlign={[Function]}
  getRootDomNode={[Function]}
@ -1867,7 +1867,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
          target={[Function]}
        >
          <PopupInner
-            className="ant-cascader-menus"
+            className="ant-cascader-menus ant-cascader-menu-empty"
            hiddenClassName="ant-cascader-menus-hidden"
            onMouseDown={[Function]}
            onTouchStart={[Function]}
@ -1881,7 +1881,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
            visible={true}
          >
            <div
-              className="ant-cascader-menus"
+              className="ant-cascader-menus ant-cascader-menu-empty"
              onMouseDown={[Function]}
              onTouchStart={[Function]}
              style={
@ -1988,7 +1988,6 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
                options={
                  Array [
                    Object {
-                      "disabled": true,
                      "label": <Context.Consumer>
                        [Function]
                      </Context.Consumer>,
@ -1996,7 +1995,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
                    },
                  ]
                }
-                popupClassName=""
+                popupClassName="ant-cascader-menu-empty"
                popupPlacement="bottomLeft"
                popupVisible={true}
                prefixCls="ant-cascader"
@ -2011,7 +2010,7 @@ exports[`Cascader should show not found content when options.length is 0 1`] = `
                    style={Object {}}
                  >
                    <li
-                      className="ant-cascader-menu-item ant-cascader-menu-item-disabled"
+                      className="ant-cascader-menu-item"
                      key="ANT_CASCADER_NOT_FOUND"
                      onClick={[Function]}
                      onDoubleClick={[Function]}
--- a/components/cascader/tests/type.test.tsx
+++ b/components/cascader/tests/type.test.tsx
@ -0,0 +1,46 @@
+import * as React from 'react';
+import Cascader from '..';
+
+describe('Cascader.typescript', () => {
+  it('options value', () => {
+    const options = [
+      {
+        value: 1,
+        label: 'Zhejiang',
+        children: [
+          {
+            value: 'hangzhou',
+            label: 'Hangzhou',
+            children: [
+              {
+                value: 'xihu',
+                label: 'West Lake',
+              },
+            ],
+          },
+        ],
+      },
+      {
+        value: 'jiangsu',
+        label: 'Jiangsu',
+        children: [
+          {
+            value: 'nanjing',
+            label: 'Nanjing',
+            children: [
+              {
+                value: 'zhonghuamen',
+                label: 'Zhong Hua Men',
+              },
+            ],
+          },
+        ],
+      },
+    ];
+
+
+    const result = <Cascader options={options} defaultValue={[1, 'hangzhou']} />;
+
+    expect(result).toBeTruthy();
+  });
+});
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@ -25,7 +25,7 @@ Cascade selection box.
 | bordered | whether has border style | boolean | true |  |
 | changeOnSelect | change value on each selection if set to true, see above demo for details | boolean | false |  |
 | className | additional css class | string | - |  |
-| defaultValue | initial selected value | string\[] | \[] |  |
+| defaultValue | initial selected value | string\[] \| number\[] | \[] |  |
 | disabled | whether disabled select | boolean | false |  |
 | displayRender | render function of displaying selected options | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` |  |
 | expandTrigger | expand current item when click or hover, one of 'click' 'hover' | string | 'click' |  |
@ -42,7 +42,7 @@ Cascade selection box.
 | size | input size | `large` \| `middle` \| `small` |  |  |
 | style | additional style | CSSProperties | - |  |
 | suffixIcon | The custom suffix icon | ReactNode | - |  |
-| value | selected value | string\[] | - |  |
+| value | selected value | string\[] \| number\[] | - |  |
 | onChange | callback when finishing cascader select | `(value, selectedOptions) => void` | - |  |
 | onPopupVisibleChange | callback when popup shown or hidden | `(value) => void` | - |  |

@ -60,7 +60,7 @@ Fields in `showSearch`:

 ```typescript
 interface Option {
-  value: string;
+  value: string | number;
  label?: React.ReactNode;
  disabled?: boolean;
  children?: Option[];
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@ -19,7 +19,7 @@ import SizeContext, { SizeType } from '../config-provider/SizeContext';
 import { replaceElement } from '../_util/reactNode';

 export interface CascaderOptionType {
-  value?: string;
+  value?: string | number;
  label?: React.ReactNode;
  disabled?: boolean;
  isLeaf?: boolean;
@ -29,19 +29,21 @@ export interface CascaderOptionType {
 }

 export interface FieldNamesType {
-  value?: string;
+  value?: string | number;
  label?: string;
  children?: string;
 }

 export interface FilledFieldNamesType {
-  value: string;
+  value: string | number;
  label: string;
  children: string;
 }

 export type CascaderExpandTrigger = 'click' | 'hover';

+export type CascaderValueType = (string | number)[];
+
 export interface ShowSearchType {
  filter?: (inputValue: string, path: CascaderOptionType[], names: FilledFieldNamesType) => boolean;
  render?: (
@ -64,11 +66,11 @@ export interface CascaderProps {
  /** 可选项数据源 */
  options: CascaderOptionType[];
  /** 默认的选中项 */
-  defaultValue?: string[];
+  defaultValue?: CascaderValueType;
  /** 指定选中项 */
-  value?: string[];
+  value?: CascaderValueType;
  /** 选择完成后的回调 */
-  onChange?: (value: string[], selectedOptions?: CascaderOptionType[]) => void;
+  onChange?: (value: CascaderValueType, selectedOptions?: CascaderOptionType[]) => void;
  /** 选择后展示的渲染函数 */
  displayRender?: (label: string[], selectedOptions?: CascaderOptionType[]) => React.ReactNode;
  /** 自定义样式 */
@ -110,7 +112,7 @@ export interface CascaderProps {
 export interface CascaderState {
  inputFocused: boolean;
  inputValue: string;
-  value: string[];
+  value: CascaderValueType;
  popupVisible: boolean | undefined;
  flattenOptions: CascaderOptionType[][] | undefined;
  prevProps: CascaderProps;
@ -264,7 +266,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
    };
  }

-  setValue = (value: string[], selectedOptions: CascaderOptionType[] = []) => {
+  setValue = (value: CascaderValueType, selectedOptions: CascaderOptionType[] = []) => {
    if (!('value' in this.props)) {
      this.setState({ value });
    }
@ -533,7 +535,6 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
            {
              [names.label]: notFoundContent || renderEmpty('Cascader'),
              [names.value]: 'ANT_CASCADER_NOT_FOUND',
-              disabled: true,
            },
          ];
        }
@ -608,8 +609,10 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {

        const getPopupContainer = props.getPopupContainer || getContextPopupContainer;
        const rest = omit(props, ['inputIcon', 'expandIcon', 'loadingIcon', 'bordered']);
-        const rcCascaderRtlPopupClassName = classNames(popupClassName, {
+        const rcCascaderPopupClassName = classNames(popupClassName, {
          [`${prefixCls}-menu-${direction}`]: direction === 'rtl',
+          [`${prefixCls}-menu-empty`]:
+            options.length === 1 && options[0].value === 'ANT_CASCADER_NOT_FOUND',
        });
        return (
          <RcCascader
@ -624,7 +627,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
            dropdownMenuColumnStyle={dropdownMenuColumnStyle}
            expandIcon={expandIcon}
            loadingIcon={loadingIcon}
-            popupClassName={rcCascaderRtlPopupClassName}
+            popupClassName={rcCascaderPopupClassName}
            popupPlacement={this.getPopupPlacement(direction)}
          >
            {input}
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@ -26,7 +26,7 @@ subtitle: 级联选择
 | bordered | 是否有边框 | boolean | true |  |
 | changeOnSelect | 当此项为 true 时，点选每级菜单选项值都会发生变化，具体见上面的演示 | boolean | false |  |
 | className | 自定义类名 | string | - |  |
-| defaultValue | 默认的选中项 | string\[] | \[] |  |
+| defaultValue | 默认的选中项 | string\[] \| number\[] | \[] |  |
 | disabled | 禁用 | boolean | false |  |
 | displayRender | 选择后展示的渲染函数 | `(label, selectedOptions) => ReactNode` | `label => label.join(' / ')` |  |
 | expandTrigger | 次级菜单的展开方式，可选 'click' 和 'hover' | string | 'click' |  |
@ -43,7 +43,7 @@ subtitle: 级联选择
 | size | 输入框大小 | `large` \| `middle` \| `small` | 无 |  |
 | style | 自定义样式 | CSSProperties | - |  |
 | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
-| value | 指定选中项 | string\[] | - |  |
+| value | 指定选中项 | string\[] \| number\[] | - |  |
 | onChange | 选择完成后的回调 | `(value, selectedOptions) => void` | - |  |
 | onPopupVisibleChange | 显示/隐藏浮层的回调 | `(value) => void` | - |  |

@ -61,7 +61,7 @@ subtitle: 级联选择

 ```typescript
 interface Option {
-  value: string;
+  value: string | number;
  label?: React.ReactNode;
  disabled?: boolean;
  children?: Option[];
--- a/components/cascader/style/index.less
+++ b/components/cascader/style/index.less
@ -204,6 +204,11 @@
        background: transparent;
      }
    }
+    .@{cascader-prefix-cls}-menu-empty & {
+      color: @disabled-color;
+      cursor: default;
+      pointer-events: none;
+    }
    &-active:not(&-disabled) {
      &,
      &:hover {
--- a/components/config-provider/tests/snapshots/components.test.js.snap
+++ b/components/config-provider/tests/snapshots/components.test.js.snap
@ -23275,6 +23275,9 @@ exports[`ConfigProvider components Switch configProvider 1`] = `
  role="switch"
  type="button"
 >
+  <div
+    class="config-switch-handle"
+  />
  <span
    class="config-switch-inner"
  />
@ -23288,6 +23291,9 @@ exports[`ConfigProvider components Switch configProvider componentSize large 1`]
  role="switch"
  type="button"
 >
+  <div
+    class="config-switch-handle"
+  />
  <span
    class="config-switch-inner"
  />
@ -23301,6 +23307,9 @@ exports[`ConfigProvider components Switch configProvider componentSize middle 1`
  role="switch"
  type="button"
 >
+  <div
+    class="config-switch-handle"
+  />
  <span
    class="config-switch-inner"
  />
@ -23314,6 +23323,9 @@ exports[`ConfigProvider components Switch configProvider virtual and dropdownMat
  role="switch"
  type="button"
 >
+  <div
+    class="ant-switch-handle"
+  />
  <span
    class="ant-switch-inner"
  />
@ -23327,6 +23339,9 @@ exports[`ConfigProvider components Switch normal 1`] = `
  role="switch"
  type="button"
 >
+  <div
+    class="ant-switch-handle"
+  />
  <span
    class="ant-switch-inner"
  />
@ -23340,6 +23355,9 @@ exports[`ConfigProvider components Switch prefixCls 1`] = `
  role="switch"
  type="button"
 >
+  <div
+    class="prefix-Switch-handle"
+  />
  <span
    class="prefix-Switch-inner"
  />
@ -23357,7 +23375,7 @@ exports[`ConfigProvider components Table configProvider 1`] = `
      class="config-spin-container"
    >
      <div
-        class="config-table"
+        class="config-table config-table-empty"
      >
        <div
          class="config-table-container"
@ -23631,7 +23649,7 @@ exports[`ConfigProvider components Table configProvider componentSize large 1`]
      class="config-spin-container"
    >
      <div
-        class="config-table"
+        class="config-table config-table-empty"
      >
        <div
          class="config-table-container"
@ -23905,7 +23923,7 @@ exports[`ConfigProvider components Table configProvider componentSize middle 1`]
      class="config-spin-container"
    >
      <div
-        class="config-table config-table-middle"
+        class="config-table config-table-middle config-table-empty"
      >
        <div
          class="config-table-container"
@ -24179,7 +24197,7 @@ exports[`ConfigProvider components Table configProvider virtual and dropdownMatc
      class="ant-spin-container"
    >
      <div
-        class="ant-table"
+        class="ant-table ant-table-empty"
      >
        <div
          class="ant-table-container"
@ -24453,7 +24471,7 @@ exports[`ConfigProvider components Table normal 1`] = `
      class="ant-spin-container"
    >
      <div
-        class="ant-table"
+        class="ant-table ant-table-empty"
      >
        <div
          class="ant-table-container"
@ -24727,7 +24745,7 @@ exports[`ConfigProvider components Table prefixCls 1`] = `
      class="ant-spin-container"
    >
      <div
-        class="prefix-Table"
+        class="prefix-Table prefix-Table-empty"
      >
        <div
          class="prefix-Table-container"
--- a/components/drawer/tests/snapshots/demo.test.js.snap
+++ b/components/drawer/tests/snapshots/demo.test.js.snap
@ -57,6 +57,17 @@ exports[`renders ./components/drawer/demo/multi-level-drawer.md correctly 1`] =
 </button>
 `;

+exports[`renders ./components/drawer/demo/no-mask.md correctly 1`] = `
+<button
+  class="ant-btn ant-btn-primary"
+  type="button"
+>
+  <span>
+    Open
+  </span>
+</button>
+`;
+
 exports[`renders ./components/drawer/demo/placement.md correctly 1`] = `
 <div
  class="ant-space ant-space-horizontal ant-space-align-center"
--- a/components/drawer/demo/basic-right.md
+++ b/components/drawer/demo/basic-right.md
@ -13,51 +13,43 @@ title:

 Basic drawer.

-```jsx
+```tsx
+import React, { useState } from 'react';
 import { Drawer, Button } from 'antd';

-class App extends React.Component {
-  state = { visible: false };
-
-  showDrawer = () => {
-    this.setState({
-      visible: true,
-    });
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const showDrawer = () => {
+    setVisible(true);
  };
-
-  onClose = () => {
-    this.setState({
-      visible: false,
-    });
+  const onClose = () => {
+    setVisible(false);
  };
-
-  render() {
-    return (
-      <>
-        <Button type="primary" onClick={this.showDrawer}>
-          Open
-        </Button>
-        <Drawer
-          title="Basic Drawer"
-          placement="right"
-          closable={false}
-          onClose={this.onClose}
-          visible={this.state.visible}
-        >
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-          <p>Some contents...</p>
-        </Drawer>
-      </>
-    );
-  }
-}
+  return (
+    <>
+      <Button type="primary" onClick={showDrawer}>
+        Open
+      </Button>
+      <Drawer
+        title="Basic Drawer"
+        placement="right"
+        closable={false}
+        onClose={onClose}
+        visible={visible}
+      >
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Drawer>
+    </>
+  );
+};

 ReactDOM.render(<App />, mountNode);
 ```

-```css
+<style>
 [data-theme='compact'] .ant-drawer-body p {
-  margin-bottom: 0px;
+  margin-bottom: 0;
 }
-```
+</style>
--- a/components/drawer/demo/no-mask.md
+++ b/components/drawer/demo/no-mask.md
@ -0,0 +1,50 @@
+---
+order: 99
+title:
+  zh-CN: 无遮罩
+  en-US: No mask
+debug: true
+---
+
+## zh-CN
+
+通过 `mask={false}` 去掉遮罩。
+
+## en-US
+
+Remove mask.
+
+```tsx
+import React, { useState } from 'react';
+import { Drawer, Button } from 'antd';
+
+const App: React.FC = () => {
+  const [visible, setVisible] = useState(false);
+  const showDrawer = () => {
+    setVisible(true);
+  };
+  const onClose = () => {
+    setVisible(false);
+  };
+  return (
+    <>
+      <Button type="primary" onClick={showDrawer}>
+        Open
+      </Button>
+      <Drawer
+        title="Drawer without mask"
+        placement="right"
+        mask={false}
+        onClose={onClose}
+        visible={visible}
+      >
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+        <p>Some contents...</p>
+      </Drawer>
+    </>
+  );
+};
+
+ReactDOM.render(<App />, mountNode);
+```
--- a/components/drawer/demo/placement.md
+++ b/components/drawer/demo/placement.md
@ -16,8 +16,6 @@ The Drawer can appear from any edge of the screen.
 ```jsx
 import { Drawer, Button, Radio, Space } from 'antd';

-const RadioGroup = Radio.Group;
-
 class App extends React.Component {
  state = { visible: false, placement: 'left' };

@ -44,12 +42,12 @@ class App extends React.Component {
    return (
      <>
        <Space>
-          <RadioGroup defaultValue={placement} onChange={this.onChange}>
+          <Radio.Group defaultValue={placement} onChange={this.onChange}>
            <Radio value="top">top</Radio>
            <Radio value="right">right</Radio>
            <Radio value="bottom">bottom</Radio>
            <Radio value="left">left</Radio>
-          </RadioGroup>
+          </Radio.Group>
          <Button type="primary" onClick={this.showDrawer}>
            Open
          </Button>
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@ -137,7 +137,11 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
  };

  getOffsetStyle() {
-    const { placement, width, height } = this.props;
+    const { placement, width, height, visible, mask } = this.props;
+    // https://github.com/ant-design/ant-design/issues/24287
+    if (!visible && !mask) {
+      return {};
+    }
    const offsetStyle: any = {};
    if (placement === 'left' || placement === 'right') {
      offsetStyle.width = width;
--- a/components/empty/tests/snapshots/demo.test.js.snap
+++ b/components/empty/tests/snapshots/demo.test.js.snap
@ -83,6 +83,9 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    >
@ -543,7 +546,7 @@ exports[`renders ./components/empty/demo/config-provider.md correctly 1`] = `
          class="ant-spin-container"
        >
          <div
-            class="ant-table"
+            class="ant-table ant-table-empty"
          >
            <div
              class="ant-table-container"
--- a/components/form/tests/snapshots/demo.test.js.snap
+++ b/components/form/tests/snapshots/demo.test.js.snap
@ -3345,10 +3345,13 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
          >
            <button
              aria-checked="false"
-              class="ant-switch-small ant-switch"
+              class="ant-switch ant-switch-small"
              role="switch"
              type="button"
            >
+              <div
+                class="ant-switch-handle"
+              />
              <span
                class="ant-switch-inner"
              />
@ -4252,6 +4255,9 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
            role="switch"
            type="button"
          >
+            <div
+              class="ant-switch-handle"
+            />
            <span
              class="ant-switch-inner"
            />
--- a/components/input-number/style/index.less
+++ b/components/input-number/style/index.less
@ -164,8 +164,8 @@
    cursor: pointer;
    &-inner {
      top: 50%;
-      margin-top: -6px;
      text-align: center;
+      transform: translateY(-50%);
    }
    &:hover {
      height: 60% !important;
--- a/components/list/Item.tsx
+++ b/components/list/Item.tsx
@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { ListGridType, ListContext } from './index';
 import { Col } from '../grid';
@ -136,9 +135,4 @@ const Item: ListItemTypeProps = props => {

 Item.Meta = Meta;

-Item.contextTypes = {
-  grid: PropTypes.any,
-  itemLayout: PropTypes.string,
-};
-
 export default Item;
--- a/components/list/index.tsx
+++ b/components/list/index.tsx
@ -1,6 +1,5 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import omit from 'omit.js';
 import Spin, { SpinProps } from '../spin';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
 import { Breakpoint, responsiveArray } from '../_util/responsiveObserve';
@ -67,7 +66,26 @@ export const ListContext = React.createContext<ListConsumerProps>({});

 export const ListConsumer = ListContext.Consumer;

-function List<T>({ pagination, ...props }: ListProps<T>) {
+function List<T>({
+  pagination = false as ListProps<any>['pagination'],
+  prefixCls: customizePrefixCls,
+  bordered = false,
+  split = true,
+  className,
+  children,
+  itemLayout,
+  loadMore,
+  grid,
+  dataSource = [],
+  size,
+  header,
+  footer,
+  loading = false,
+  rowKey,
+  renderItem,
+  locale,
+  ...rest
+}: ListProps<T>) {
  const paginationObj = pagination && typeof pagination === 'object' ? pagination : {};

  const [paginationCurrent, setPaginationCurrent] = React.useState(
@ -98,9 +116,8 @@ function List<T>({ pagination, ...props }: ListProps<T>) {

  const onPaginationShowSizeChange = triggerPaginationEvent('onShowSizeChange');

-  const renderItem = (item: any, index: number) => {
-    const { rowKey } = props;
-    if (!props.renderItem) return null;
+  const renderInnerItem = (item: any, index: number) => {
+    if (!renderItem) return null;

    let key;

@ -118,17 +135,14 @@ function List<T>({ pagination, ...props }: ListProps<T>) {

    keys[index] = key;

-    return props.renderItem(item, index);
+    return renderItem(item, index);
  };

  const isSomethingAfterLastItem = () => {
-    const { loadMore, footer } = props;
    return !!(loadMore || pagination || footer);
  };

  const renderEmptyFunc = (prefixCls: string, renderEmptyHandler: RenderEmptyHandler) => {
-    const { locale } = props;
-
    return (
      <div className={`${prefixCls}-empty-text`}>
        {(locale && locale.emptyText) || renderEmptyHandler('List')}
@ -136,23 +150,6 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
    );
  };

-  const {
-    prefixCls: customizePrefixCls,
-    bordered,
-    split,
-    className,
-    children,
-    itemLayout,
-    loadMore,
-    grid,
-    dataSource = [],
-    size,
-    header,
-    footer,
-    loading,
-    ...rest
-  } = props;
-
  const prefixCls = getPrefixCls('list', customizePrefixCls);
  let loadingProp = loading;
  if (typeof loadingProp === 'boolean') {
@ -246,7 +243,7 @@ function List<T>({ pagination, ...props }: ListProps<T>) {

  let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
  if (splitDataSource.length > 0) {
-    const items = splitDataSource.map((item: any, index: number) => renderItem(item, index));
+    const items = splitDataSource.map((item: any, index: number) => renderInnerItem(item, index));
    const childrenList = React.Children.map(items, (child: any, index) =>
      cloneElement(child, {
        key: keys[index],
@ -265,8 +262,8 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
  const paginationPosition = paginationProps.position || 'bottom';

  return (
-    <ListContext.Provider value={{ grid: props.grid, itemLayout: props.itemLayout }}>
-      <div className={classString} {...omit(rest, ['rowKey', 'renderItem', 'locale'])}>
+    <ListContext.Provider value={{ grid, itemLayout }}>
+      <div className={classString} {...rest}>
        {(paginationPosition === 'top' || paginationPosition === 'both') && paginationContent}
        {header && <div className={`${prefixCls}-header`}>{header}</div>}
        <Spin {...loadingProp}>
@ -281,14 +278,6 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
  );
 }

-List.defaultProps = {
-  dataSource: [],
-  bordered: false,
-  split: true,
-  loading: false,
-  pagination: false as ListProps<any>['pagination'],
-};
-
 List.Item = Item;

 export default List;
--- a/components/locale-provider/tests/snapshots/index.test.js.snap
+++ b/components/locale-provider/tests/snapshots/index.test.js.snap
@ -6656,7 +6656,7 @@ exports[`Locale Provider should display the text as ar 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -11679,7 +11679,7 @@ exports[`Locale Provider should display the text as az 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -16702,7 +16702,7 @@ exports[`Locale Provider should display the text as bg 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -21725,7 +21725,7 @@ exports[`Locale Provider should display the text as ca 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -26748,7 +26748,7 @@ exports[`Locale Provider should display the text as cs 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -31771,7 +31771,7 @@ exports[`Locale Provider should display the text as da 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -36794,7 +36794,7 @@ exports[`Locale Provider should display the text as de 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -41817,7 +41817,7 @@ exports[`Locale Provider should display the text as el 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -46840,7 +46840,7 @@ exports[`Locale Provider should display the text as en 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -51863,7 +51863,7 @@ exports[`Locale Provider should display the text as en-gb 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -56886,7 +56886,7 @@ exports[`Locale Provider should display the text as es 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -61909,7 +61909,7 @@ exports[`Locale Provider should display the text as et 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -66932,7 +66932,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -71955,7 +71955,7 @@ exports[`Locale Provider should display the text as fi 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -76978,7 +76978,7 @@ exports[`Locale Provider should display the text as fr 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -82001,7 +82001,7 @@ exports[`Locale Provider should display the text as fr 2`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -87024,7 +87024,7 @@ exports[`Locale Provider should display the text as he 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -92047,7 +92047,7 @@ exports[`Locale Provider should display the text as hi 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -97070,7 +97070,7 @@ exports[`Locale Provider should display the text as hr 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -102093,7 +102093,7 @@ exports[`Locale Provider should display the text as hu 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -107116,7 +107116,7 @@ exports[`Locale Provider should display the text as hy-am 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -112139,7 +112139,7 @@ exports[`Locale Provider should display the text as id 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -117162,7 +117162,7 @@ exports[`Locale Provider should display the text as is 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -122185,7 +122185,7 @@ exports[`Locale Provider should display the text as it 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -127208,7 +127208,7 @@ exports[`Locale Provider should display the text as ja 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -132231,7 +132231,7 @@ exports[`Locale Provider should display the text as kn 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -137254,7 +137254,7 @@ exports[`Locale Provider should display the text as ko 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -142277,7 +142277,7 @@ exports[`Locale Provider should display the text as ku-iq 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -147300,7 +147300,7 @@ exports[`Locale Provider should display the text as lv 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -152323,7 +152323,7 @@ exports[`Locale Provider should display the text as mk 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -157346,7 +157346,7 @@ exports[`Locale Provider should display the text as mn-mn 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -162369,7 +162369,7 @@ exports[`Locale Provider should display the text as ms-my 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -167392,7 +167392,7 @@ exports[`Locale Provider should display the text as nb 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -172415,7 +172415,7 @@ exports[`Locale Provider should display the text as ne-np 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -177438,7 +177438,7 @@ exports[`Locale Provider should display the text as nl 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -182461,7 +182461,7 @@ exports[`Locale Provider should display the text as nl-be 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -187484,7 +187484,7 @@ exports[`Locale Provider should display the text as pl 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -192507,7 +192507,7 @@ exports[`Locale Provider should display the text as pt 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -197530,7 +197530,7 @@ exports[`Locale Provider should display the text as pt-br 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -202553,7 +202553,7 @@ exports[`Locale Provider should display the text as ro 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -207576,7 +207576,7 @@ exports[`Locale Provider should display the text as ru 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -212599,7 +212599,7 @@ exports[`Locale Provider should display the text as sk 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -217622,7 +217622,7 @@ exports[`Locale Provider should display the text as sl 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -222645,7 +222645,7 @@ exports[`Locale Provider should display the text as sr 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -227668,7 +227668,7 @@ exports[`Locale Provider should display the text as sv 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -232691,7 +232691,7 @@ exports[`Locale Provider should display the text as ta 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -237714,7 +237714,7 @@ exports[`Locale Provider should display the text as th 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -242737,7 +242737,7 @@ exports[`Locale Provider should display the text as tr 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -247760,7 +247760,7 @@ exports[`Locale Provider should display the text as uk 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -252783,7 +252783,7 @@ exports[`Locale Provider should display the text as vi 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -257806,7 +257806,7 @@ exports[`Locale Provider should display the text as zh-cn 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
@ -262829,7 +262829,7 @@ exports[`Locale Provider should display the text as zh-tw 1`] = `
        class="ant-spin-container"
      >
        <div
-          class="ant-table"
+          class="ant-table ant-table-empty"
        >
          <div
            class="ant-table-container"
--- a/components/locale/ru_RU.tsx
+++ b/components/locale/ru_RU.tsx
@ -1,9 +1,13 @@
+/* eslint-disable no-template-curly-in-string */
+
 import Pagination from 'rc-pagination/lib/locale/ru_RU';
 import DatePicker from '../date-picker/locale/ru_RU';
 import TimePicker from '../time-picker/locale/ru_RU';
 import Calendar from '../calendar/locale/ru_RU';
 import { Locale } from '../locale-provider';

+const typeTemplate: string = '${label} не является типом ${type}';
+
 const localeValues: Locale = {
  locale: 'ru',
  Pagination,
@ -17,8 +21,10 @@ const localeValues: Locale = {
    filterTitle: 'Фильтр',
    filterConfirm: 'OK',
    filterReset: 'Сбросить',
+    emptyText: 'Нет данных',
    selectAll: 'Выбрать всё',
    selectInvert: 'Инвертировать выбор',
+    selectionAll: 'Выбрать все данные',
    sortTitle: 'Сортировка',
    expand: 'Развернуть строку',
    collapse: 'Свернуть строку',
@ -62,6 +68,54 @@ const localeValues: Locale = {
  PageHeader: {
    back: 'назад',
  },
+  Form: {
+    defaultValidateMessages: {
+      default: 'Ошибка проверки поля ${label}',
+      required: 'Пожалуйста, введите ${label}',
+      enum: '${label} должен быть одним из [${enum}]',
+      whitespace: '${label} не может быть пустым',
+      date: {
+        format: '${label} не правильный формат даты',
+        parse: '${label} не может быть преобразовано в дату',
+        invalid: '${label} не является корректной датой',
+      },
+      types: {
+        string: typeTemplate,
+        method: typeTemplate,
+        array: typeTemplate,
+        object: typeTemplate,
+        number: typeTemplate,
+        date: typeTemplate,
+        boolean: typeTemplate,
+        integer: typeTemplate,
+        float: typeTemplate,
+        regexp: typeTemplate,
+        email: typeTemplate,
+        url: typeTemplate,
+        hex: typeTemplate,
+      },
+      string: {
+        len: '${label} должна быть ${len} символов',
+        min: '${label} должна быть больше или равна ${min} символов',
+        max: '${label} должна быть меньше или равна ${max} символов',
+        range: 'Длина ${label} должна быть между ${min}-${max} символами',
+      },
+      number: {
+        len: '${label} должна быть равна ${len}',
+        min: '${label} должна быть больше или равна ${min}',
+        max: '${label} должна быть меньше или равна ${max}',
+      },
+      array: {
+        len: 'Количество элементов ${label} должно быть равно ${len}',
+        min: 'Количество элементов ${label} должно быть больше или равно ${min}',
+        max: 'Количество элементов ${label} должно быть меньше или равно ${max}',
+        range: 'Количество элементов ${label} должно быть между ${min} и ${max}',
+      },
+      pattern: {
+        mismatch: '${label} не соответствует шаблону ${pattern}',
+      },
+    },
+  },
 };

 export default localeValues;
--- a/components/menu/tests/snapshots/demo.test.js.snap
+++ b/components/menu/tests/snapshots/demo.test.js.snap
@ -817,6 +817,9 @@ Array [
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    />
@ -832,6 +835,9 @@ Array [
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    />
@ -1064,11 +1070,13 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
 Array [
  <button
    aria-checked="true"
-    checked=""
    class="ant-switch ant-switch-checked"
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    >
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@ -13,6 +13,7 @@
  color: @menu-item-color;
  font-size: @menu-item-font-size;
  line-height: 0; // Fix display inline-block gap
+  text-align: left;
  list-style: none;
  background: @menu-bg;
  outline: none;
--- a/components/menu/style/rtl.less
+++ b/components/menu/style/rtl.less
@ -6,6 +6,7 @@
 .@{menu-prefix-cls} {
  &-rtl {
    direction: rtl;
+    text-align: right;
  }

  &-item-group-title {
--- a/components/popconfirm/tests/snapshots/demo.test.js.snap
+++ b/components/popconfirm/tests/snapshots/demo.test.js.snap
@ -24,6 +24,9 @@ exports[`renders ./components/popconfirm/demo/dynamic-trigger.md correctly 1`] =
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    />
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@ -31,7 +31,7 @@ Select component to select value from options.
 | disabled | Whether disabled select | boolean | false |  |
 | dropdownClassName | className of dropdown menu | string | - |  |
 | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. `false` will disable virtual scroll | boolean \| number | true |  |
-| dropdownRender | Customize dropdown content | (menuNode: ReactNode, props) => ReactNode | - |  |
+| dropdownRender | Customize dropdown content | (originNode: ReactNode, props) => ReactNode | - |  |
 | dropdownStyle | style of dropdown menu | CSSProperties | - |  |
 | 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 or function(inputValue, option) | true |  |
 | getPopupContainer | Parent Node which the selector should be rendered to. Default to `body`. When position issues happen, try to modify it into scrollable content and position it relative. [Example](https://codesandbox.io/s/4j168r7jw0) | function(triggerNode) | () => document.body |  |
@ -43,6 +43,7 @@ Select component to select value from options.
 | tagRender | Customize tag render | (props) => ReactNode | - |  |
 | mode | Set mode of Select | `multiple` \| `tags` | - |  |
 | notFoundContent | Specify content to show when no result matches.. | ReactNode | 'Not Found' |  |
+| options | Select options. Will get better perf than jsx definition | { label, value }[] | - |  |
 | optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value |  |
 | optionLabelProp | Which prop value of option will render as content of select. [Example](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | `value` for `combobox`, `children` for other modes |  |
 | placeholder | Placeholder of select | string\|ReactNode | - |  |
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@ -32,7 +32,7 @@ title: Select
 | disabled | 是否禁用 | boolean | false |  |
 | dropdownClassName | 下拉菜单的 className 属性 | string | - |  |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`。`false` 时会关闭虚拟滚动 | boolean \| number | true |  |
-| dropdownRender | 自定义下拉框内容 | (menuNode: ReactNode, props) => ReactNode | - |  |
+| dropdownRender | 自定义下拉框内容 | (originNode: ReactNode, props) => ReactNode | - |  |
 | dropdownStyle | 下拉菜单的 style 属性 | CSSProperties | - |  |
 | filterOption | 是否根据输入项进行筛选。当其为一个函数时，会接收 `inputValue` `option` 两个参数，当 `option` 符合筛选条件时，应返回 `true`，反之则返回 `false`。 | boolean or function(inputValue, option) | true |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codesandbox.io/s/4j168r7jw0) | Function(triggerNode) | () => document.body |  |
@ -44,6 +44,7 @@ title: Select
 | tagRender | 自定义 tag 内容 render | (props) => ReactNode | - |  |
 | mode | 设置 Select 的模式为多选或标签 | `multiple` \| `tags` | - |  |
 | notFoundContent | 当下拉列表为空时显示的内容 | ReactNode | 'Not Found' |  |
+| options | 数据化配置选项内容，相比 jsx 定义会获得更好的渲染性能 | { label, value }[] | - |  |
 | optionFilterProp | 搜索时过滤对应的 option 属性，如设置为 children 表示对内嵌内容进行搜索。[示例](https://codesandbox.io/s/antd-reproduction-template-tk678) | string | value |  |
 | optionLabelProp | 回填到选择框的 Option 的属性值，默认是 Option 的子元素。比如在子元素需要高亮效果时，此值可以设为 `value`。 | string | `children` （combobox 模式下为 `value`） |  |
 | placeholder | 选择框默认文字 | string | - |  |
--- a/components/select/style/index.less
+++ b/components/select/style/index.less
@ -198,6 +198,10 @@
    &-hidden {
      display: none;
    }
+
+    &-empty {
+      color: @disabled-color;
+    }
  }

  // ========================= Options =========================
@ -214,6 +218,7 @@

  &-item-empty {
    .item();
+    color: @disabled-color;
  }

  &-item {
--- a/components/skeleton/tests/snapshots/demo.test.js.snap
+++ b/components/skeleton/tests/snapshots/demo.test.js.snap
@ -136,6 +136,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
                role="switch"
                type="button"
              >
+                <div
+                  class="ant-switch-handle"
+                />
                <span
                  class="ant-switch-inner"
                />
@ -363,6 +366,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
                role="switch"
                type="button"
              >
+                <div
+                  class="ant-switch-handle"
+                />
                <span
                  class="ant-switch-inner"
                />
@ -571,6 +577,9 @@ exports[`renders ./components/skeleton/demo/element.md correctly 1`] = `
                role="switch"
                type="button"
              >
+                <div
+                  class="ant-switch-handle"
+                />
                <span
                  class="ant-switch-inner"
                />
@ -688,6 +697,9 @@ exports[`renders ./components/skeleton/demo/list.md correctly 1`] = `
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    />
--- a/components/slider/tests/snapshots/demo.test.js.snap
+++ b/components/slider/tests/snapshots/demo.test.js.snap
@ -69,10 +69,13 @@ exports[`renders ./components/slider/demo/basic.md correctly 1`] = `
  Disabled: 
  <button
    aria-checked="false"
-    class="ant-switch-small ant-switch"
+    class="ant-switch ant-switch-small"
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    />
@ -913,11 +916,13 @@ exports[`renders ./components/slider/demo/reverse.md correctly 1`] = `
  Reversed: 
  <button
    aria-checked="true"
-    checked=""
-    class="ant-switch-small ant-switch ant-switch-checked"
+    class="ant-switch ant-switch-small ant-switch-checked"
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    />
--- a/components/spin/tests/snapshots/demo.test.js.snap
+++ b/components/spin/tests/snapshots/demo.test.js.snap
@ -86,6 +86,9 @@ exports[`renders ./components/spin/demo/delayAndDebounce.md correctly 1`] = `
      role="switch"
      type="button"
    >
+      <div
+        class="ant-switch-handle"
+      />
      <span
        class="ant-switch-inner"
      />
@ -156,6 +159,9 @@ exports[`renders ./components/spin/demo/nested.md correctly 1`] = `
      role="switch"
      type="button"
    >
+      <div
+        class="ant-switch-handle"
+      />
      <span
        class="ant-switch-inner"
      />
--- a/components/spin/index.zh-CN.md
+++ b/components/spin/index.zh-CN.md
@ -17,7 +17,7 @@ subtitle: 加载中
 | ---------------- | -------------------------------------------- | ------------- | --------- |
 | delay            | 延迟显示加载效果的时间（防止闪烁）           | number (毫秒) | -         |
 | indicator        | 加载指示符                                   | ReactNode     | -         |
-| size             | 组件大小，可选值为 `small` `default` `large` | string        | 'default' |
+| size             | 组件大小，可选值为 `small` `default` `large` | string        | `default` |
 | spinning         | 是否为加载中状态                             | boolean       | true      |
 | tip              | 当作为包裹元素时，可以自定义描述文案         | string        | -         |
 | wrapperClassName | 包装器的类属性                               | string        | -         |
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@ -728,13 +728,15 @@
@switch-sm-height: 16px;
@switch-min-width: 44px;
@switch-sm-min-width: 28px;
-@switch-sm-checked-margin-left: -(@switch-sm-height - 3px);
@switch-disabled-opacity: 0.4;
@switch-color: @primary-color;
@switch-bg: @component-background;
@switch-shadow-color: fade(#00230b, 20%);
-@switch-inner-margin-min: 6px;
-@switch-inner-margin-max: 24px;
+@switch-padding: 2px;
+@switch-inner-margin-min: ceil(@switch-height * 0.3);
+@switch-inner-margin-max: ceil(@switch-height * 1.1);
+@switch-sm-inner-margin-min: ceil(@switch-sm-height * 0.3);
+@switch-sm-inner-margin-max: ceil(@switch-sm-height * 1.1);

 // Pagination
 // ---
--- a/components/switch/tests/snapshots/demo.test.js.snap
+++ b/components/switch/tests/snapshots/demo.test.js.snap
@ -7,6 +7,9 @@ exports[`renders ./components/switch/demo/basic.md correctly 1`] = `
  role="switch"
  type="button"
 >
+  <div
+    class="ant-switch-handle"
+  />
  <span
    class="ant-switch-inner"
  />
@ -22,6 +25,9 @@ exports[`renders ./components/switch/demo/disabled.md correctly 1`] = `
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    />
@ -42,31 +48,35 @@ exports[`renders ./components/switch/demo/loading.md correctly 1`] = `
 <div>
  <button
    aria-checked="true"
-    class="ant-switch-loading ant-switch ant-switch-checked ant-switch-disabled"
+    class="ant-switch ant-switch-loading ant-switch-checked ant-switch-disabled"
    disabled=""
    role="switch"
    type="button"
  >
-    <span
-      aria-label="loading"
-      class="anticon anticon-loading ant-switch-loading-icon"
-      role="img"
+    <div
+      class="ant-switch-handle"
    >
-      <svg
-        aria-hidden="true"
-        class="anticon-spin"
-        data-icon="loading"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="0 0 1024 1024"
-        width="1em"
+      <span
+        aria-label="loading"
+        class="anticon anticon-loading ant-switch-loading-icon"
+        role="img"
      >
-        <path
-          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-        />
-      </svg>
-    </span>
+        <svg
+          aria-hidden="true"
+          class="anticon-spin"
+          data-icon="loading"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="0 0 1024 1024"
+          width="1em"
+        >
+          <path
+            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+          />
+        </svg>
+      </span>
+    </div>
    <span
      class="ant-switch-inner"
    />
@ -74,31 +84,35 @@ exports[`renders ./components/switch/demo/loading.md correctly 1`] = `
  <br />
  <button
    aria-checked="false"
-    class="ant-switch-small ant-switch-loading ant-switch ant-switch-disabled"
+    class="ant-switch ant-switch-small ant-switch-loading ant-switch-disabled"
    disabled=""
    role="switch"
    type="button"
  >
-    <span
-      aria-label="loading"
-      class="anticon anticon-loading ant-switch-loading-icon"
-      role="img"
+    <div
+      class="ant-switch-handle"
    >
-      <svg
-        aria-hidden="true"
-        class="anticon-spin"
-        data-icon="loading"
-        fill="currentColor"
-        focusable="false"
-        height="1em"
-        viewBox="0 0 1024 1024"
-        width="1em"
+      <span
+        aria-label="loading"
+        class="anticon anticon-loading ant-switch-loading-icon"
+        role="img"
      >
-        <path
-          d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
-        />
-      </svg>
-    </span>
+        <svg
+          aria-hidden="true"
+          class="anticon-spin"
+          data-icon="loading"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="0 0 1024 1024"
+          width="1em"
+        >
+          <path
+            d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z"
+          />
+        </svg>
+      </span>
+    </div>
    <span
      class="ant-switch-inner"
    />
@ -114,6 +128,9 @@ exports[`renders ./components/switch/demo/size.md correctly 1`] = `
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    />
@ -121,10 +138,13 @@ exports[`renders ./components/switch/demo/size.md correctly 1`] = `
  <br />
  <button
    aria-checked="true"
-    class="ant-switch-small ant-switch ant-switch-checked"
+    class="ant-switch ant-switch-small ant-switch-checked"
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    />
@ -140,10 +160,13 @@ exports[`renders ./components/switch/demo/text.md correctly 1`] = `
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    >
-      开
+      开启
    </span>
  </button>
  <br />
@ -153,6 +176,9 @@ exports[`renders ./components/switch/demo/text.md correctly 1`] = `
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    >
@ -166,6 +192,9 @@ exports[`renders ./components/switch/demo/text.md correctly 1`] = `
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    >
--- a/components/switch/tests/snapshots/index.test.js.snap
+++ b/components/switch/tests/snapshots/index.test.js.snap
@ -3,10 +3,13 @@
 exports[`Switch rtl render component should be rendered correctly in RTL direction 1`] = `
 <button
  aria-checked="false"
-  class="ant-switch-rtl ant-switch"
+  class="ant-switch ant-switch-rtl"
  role="switch"
  type="button"
 >
+  <div
+    class="ant-switch-handle"
+  />
  <span
    class="ant-switch-inner"
  />
@ -21,6 +24,9 @@ exports[`Switch should has click wave effect 1`] = `
  role="switch"
  type="button"
 >
+  <div
+    class="ant-switch-handle"
+  />
  <span
    class="ant-switch-inner"
  />
--- a/components/switch/demo/text.md
+++ b/components/switch/demo/text.md
@ -19,7 +19,7 @@ import { CloseOutlined, CheckOutlined } from '@ant-design/icons';

 ReactDOM.render(
  <div>
-    <Switch checkedChildren="开" unCheckedChildren="关" defaultChecked />
+    <Switch checkedChildren="开启" unCheckedChildren="关闭" defaultChecked />
    <br />
    <Switch checkedChildren="1" unCheckedChildren="0" />
    <br />
--- a/components/switch/index.tsx
+++ b/components/switch/index.tsx
@ -53,7 +53,11 @@ const Switch = React.forwardRef<unknown, SwitchProps>((props, ref) => {
  const { getPrefixCls, direction } = React.useContext(ConfigContext);
  const size = React.useContext(SizeContext);
  const prefixCls = getPrefixCls('switch', customizePrefixCls);
-  const loadingIcon = loading ? <LoadingOutlined className={`${prefixCls}-loading-icon`} /> : null;
+  const loadingIcon = (
+    <div className={`${prefixCls}-handle`}>
+      {loading && <LoadingOutlined className={`${prefixCls}-loading-icon`} />}
+    </div>
+  );

  const classes = classNames(className, {
    [`${prefixCls}-small`]: (customizeSize || size) === 'small',
--- a/components/switch/style/index.less
+++ b/components/switch/style/index.less
@ -4,6 +4,9 @@
@switch-prefix-cls: ~'@{ant-prefix}-switch';
@switch-duration: 0.36s;

+@switch-pin-size: @switch-height - 4px;
+@switch-sm-pin-size: @switch-sm-height - 4px;
+
 .@{switch-prefix-cls} {
  .reset-component;

@ -12,74 +15,21 @@
  box-sizing: border-box;
  min-width: @switch-min-width;
  height: @switch-height;
-  line-height: @switch-height - 2px;
+  line-height: @switch-height;
  vertical-align: middle;
  background-color: @disabled-color;
-  border: 1px solid transparent;
+  border: 0;
  border-radius: 100px;
  cursor: pointer;
  transition: all @switch-duration;
  user-select: none;

-  &-inner {
-    display: block;
-    margin-right: @switch-inner-margin-min;
-    margin-left: @switch-inner-margin-max;
-    color: @text-color-inverse;
-    font-size: @font-size-sm;
-  }
-
-  &-loading-icon,
-  &::after {
-    position: absolute;
-    top: 1px;
-    left: 1px;
-    width: @switch-height - 4px;
-    height: @switch-height - 4px;
-    background-color: @switch-bg;
-    border-radius: 18px;
-    cursor: pointer;
-    transition: all @switch-duration @ease-in-out-circ;
-    content: ' ';
-  }
-
-  &::after {
-    box-shadow: 0 2px 4px 0 @switch-shadow-color;
-  }
-
-  &:not(&-disabled):active::before,
-  &:not(&-disabled):active::after {
-    width: 24px;
-  }
-
-  &-loading-icon {
-    z-index: 1;
-    display: none;
-    font-size: 12px;
-    // loading default use animation
-    // animation: loadingCircle 1s infinite linear;
-    background: transparent;
-    svg {
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      margin: auto;
-    }
-  }
-
-  &-loading &-loading-icon {
-    display: inline-block;
-    color: rgba(0, 0, 0, 0.65);
-  }
-
-  &-checked&-loading &-loading-icon {
-    color: @switch-color;
-  }
-
  &:focus {
    outline: 0;
+    box-shadow: 0 0 0 2px fade(@disabled-color, 10%);
+  }
+
+  &-checked:focus {
    box-shadow: 0 0 0 2px fade(@switch-color, 20%);
  }

@ -87,77 +37,8 @@
    box-shadow: none;
  }

-  &-small {
-    min-width: @switch-sm-min-width;
-    height: @switch-sm-height;
-    line-height: @switch-sm-height - 2px;
-
-    .@{switch-prefix-cls}-inner {
-      margin-right: 3px;
-      margin-left: 18px;
-      font-size: @font-size-sm;
-    }
-
-    &::after {
-      width: @switch-sm-height - 4px;
-      height: @switch-sm-height - 4px;
-    }
-
-    &:not(.@{switch-prefix-cls}-loading):active::before,
-    &:not(.@{switch-prefix-cls}-loading):active::after {
-      width: 16px;
-    }
-  }
-
-  &-small &-loading-icon {
-    width: @switch-sm-height - 4px;
-    height: @switch-sm-height - 4px;
-  }
-
-  &-small&-checked {
-    .@{switch-prefix-cls}-inner {
-      margin-right: 18px;
-      margin-left: 3px;
-    }
-    &::after {
-      left: @switch-sm-min-width - (@switch-sm-height - 2px);
-    }
-    &:not(.@{switch-prefix-cls}-disabled):active::after {
-      left: 2px;
-    }
-  }
-
-  &-small&-checked &-loading-icon {
-    left: 100%;
-    margin-left: @switch-sm-checked-margin-left;
-  }
-
-  &-small&-loading &-loading-icon {
-    font-weight: bold;
-    // animation: AntSwitchSmallLoadingCircle 1s infinite linear;
-    transform: scale(0.66667);
-  }
-
  &-checked {
    background-color: @switch-color;
-
-    .@{switch-prefix-cls}-inner {
-      margin-right: @switch-inner-margin-max;
-      margin-left: @switch-inner-margin-min;
-    }
-
-    &::after {
-      left: @switch-min-width - (@switch-height - 2px);
-      margin-left: -1px;
-    }
-    &:not(.@{switch-prefix-cls}-disabled):active::after {
-      left: @switch-min-width - (@switch-height + 4px);
-    }
-  }
-
-  &-checked &-loading-icon {
-    left: 100%;
-    margin-left: -19px;
  }

  &-loading,
@ -165,23 +46,107 @@
    cursor: not-allowed;
    opacity: @switch-disabled-opacity;
    * {
-      cursor: not-allowed;
-    }
-    &::before,
-    &::after {
+      box-shadow: none;
      cursor: not-allowed;
    }
  }
-}

-@keyframes AntSwitchSmallLoadingCircle {
-  0% {
-    transform: rotate(0deg) scale(0.66667);
-    transform-origin: 50% 50%;
+  // ========================= Inner ==========================
+  &-inner {
+    display: block;
+    margin: 0 @switch-inner-margin-min 0 @switch-inner-margin-max;
+    color: @text-color-inverse;
+    font-size: @font-size-sm;
+    transition: margin @switch-duration;
  }
-  100% {
-    transform: rotate(360deg) scale(0.66667);
-    transform-origin: 50% 50%;
+
+  &-checked &-inner {
+    margin: 0 @switch-inner-margin-max 0 @switch-inner-margin-min;
+  }
+
+  // ========================= Handle =========================
+  &-handle {
+    position: absolute;
+    top: @switch-padding;
+    left: @switch-padding;
+    width: @switch-pin-size;
+    height: @switch-pin-size;
+    transition: all @switch-duration @ease-in-out-circ;
+
+    &::before {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      background-color: @switch-bg;
+      border-radius: @switch-pin-size / 2;
+      box-shadow: 0 2px 4px 0 @switch-shadow-color;
+      transition: all @switch-duration @ease-in-out-circ;
+      content: '';
+    }
+  }
+
+  &-checked &-handle {
+    left: calc(100% - @switch-pin-size - @switch-padding);
+  }
+
+  &:not(&-disabled):active {
+    .@{switch-prefix-cls}-handle::before {
+      right: -30%;
+      left: 0;
+    }
+
+    &.@{switch-prefix-cls}-checked {
+      .@{switch-prefix-cls}-handle::before {
+        right: 0;
+        left: -30%;
+      }
+    }
+  }
+
+  // ======================== Loading =========================
+  &-loading-icon {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    color: rgba(0, 0, 0, 0.65);
+    transform: translate(-50%, -50%);
+  }
+
+  &-checked &-loading-icon {
+    color: @switch-color;
+  }
+
+  // ========================== Size ==========================
+  &-small {
+    min-width: @switch-sm-min-width;
+    height: @switch-sm-height;
+    line-height: @switch-sm-height;
+
+    .@{switch-prefix-cls}-inner {
+      margin: 0 @switch-sm-inner-margin-min 0 @switch-sm-inner-margin-max;
+      font-size: @font-size-sm;
+    }
+
+    .@{switch-prefix-cls}-handle {
+      width: @switch-sm-pin-size;
+      height: @switch-sm-pin-size;
+    }
+
+    .@{switch-prefix-cls}-loading-icon {
+      transform: translate(-50%, -50%) scale(0.66667);
+    }
+
+    &.@{switch-prefix-cls}-checked {
+      .@{switch-prefix-cls}-inner {
+        margin: 0 @switch-sm-inner-margin-max 0 @switch-sm-inner-margin-min;
+      }
+
+      .@{switch-prefix-cls}-handle {
+        left: calc(100% - @switch-sm-pin-size - @switch-padding);
+      }
+    }
  }
 }

--- a/components/switch/style/rtl.less
+++ b/components/switch/style/rtl.less
@ -1,73 +1,50 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
+@import './index';

@switch-prefix-cls: ~'@{ant-prefix}-switch';

-.@{switch-prefix-cls} {
-  &-rtl {
-    direction: rtl;
+.@{switch-prefix-cls}-rtl {
+  direction: rtl;
+
+  .@{switch-prefix-cls}-inner {
+    margin: 0 @switch-inner-margin-max 0 @switch-inner-margin-min;
  }

-  &-inner {
-    .@{switch-prefix-cls}-rtl & {
-      margin-right: @switch-inner-margin-max;
-      margin-left: @switch-inner-margin-min;
+  .@{switch-prefix-cls}-handle {
+    right: @switch-padding;
+    left: auto;
+  }
+
+  &:not(&-disabled):active {
+    .@{switch-prefix-cls}-handle::before {
+      right: 0;
+      left: -30%;
+    }
+
+    &.@{switch-prefix-cls}-checked {
+      .@{switch-prefix-cls}-handle::before {
+        right: -30%;
+        left: 0;
+      }
    }
  }

-  &-loading-icon,
-  &::after {
-    .@{switch-prefix-cls}-rtl& {
-      left: 100%;
-      margin-left: -1px;
-      transform: translateX(-100%);
-    }
-  }
-
-  &-small {
+  &.@{switch-prefix-cls}-checked {
    .@{switch-prefix-cls}-inner {
-      .@{switch-prefix-cls}-rtl& {
-        margin-right: 18px;
-        margin-left: 3px;
-      }
+      margin: 0 @switch-inner-margin-min 0 @switch-inner-margin-max;
+    }
+
+    .@{switch-prefix-cls}-handle {
+      right: calc(100% - @switch-pin-size - @switch-padding);
    }
  }

-  &-small &-loading-icon {
-    .@{switch-prefix-cls}-rtl& {
-      margin-left: 12px;
-    }
-  }
-
-  &-small&-checked {
-    .@{switch-prefix-cls}-inner {
-      .@{switch-prefix-cls}-rtl& {
-        margin-right: 3px;
-        margin-left: 18px;
+  &.@{switch-prefix-cls}-small {
+    &.@{switch-prefix-cls}-checked {
+      .@{switch-prefix-cls}-handle {
+        right: calc(100% - @switch-sm-pin-size - @switch-padding);
      }
    }
  }
-
-  &-checked {
-    .@{switch-prefix-cls}-inner {
-      .@{switch-prefix-cls}-rtl& {
-        margin-right: @switch-inner-margin-min;
-        margin-left: @switch-inner-margin-max;
-      }
-    }
-
-    &::after {
-      .@{switch-prefix-cls}-rtl& {
-        left: 1px;
-        margin-left: 0;
-        transform: translateX(0);
-      }
-    }
-  }
-
-  &-checked &-loading-icon {
-    .@{switch-prefix-cls}-rtl& {
-      margin-left: -41px;
-    }
-  }
 }
--- a/components/table/Table.tsx
+++ b/components/table/Table.tsx
@ -459,6 +459,7 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
            [`${prefixCls}-middle`]: mergedSize === 'middle',
            [`${prefixCls}-small`]: mergedSize === 'small',
            [`${prefixCls}-bordered`]: bordered,
+            [`${prefixCls}-empty`]: rawData.length === 0,
          })}
          data={pageData}
          rowKey={getRowKey}
--- a/components/table/tests/Table.filter.test.js
+++ b/components/table/tests/Table.filter.test.js
@ -1104,6 +1104,21 @@ describe('Table.filter', () => {
    expect(wrapper.find('.ant-table-filter-trigger').hasClass('active')).toBeTruthy();
  });

+  it('filteredValue with empty array should not active the filtered icon', () => {
+    const wrapper = mount(
+      createTable({
+        columns: [
+          {
+            ...column,
+            filteredValue: [],
+          },
+        ],
+      }),
+    );
+
+    expect(wrapper.find('.ant-table-filter-trigger').hasClass('active')).toBeFalsy();
+  });
+
  it('with onFilter', () => {
    const onFilter = jest.fn((value, record) => record.key === value);
    const columns = [{ dataIndex: 'key', filteredValue: [5], onFilter }];
@ -1132,6 +1147,5 @@ describe('Table.filter', () => {

    expect(wrapper.find('tbody tr')).toHaveLength(1);
    expect(wrapper.find('tbody tr td').text()).toEqual('Jack');
-    
  });
 });
--- a/components/table/tests/snapshots/Table.test.js.snap
+++ b/components/table/tests/snapshots/Table.test.js.snap
@ -117,7 +117,7 @@ exports[`Table rtl render component should be rendered correctly in RTL directio
      class="ant-spin-container"
    >
      <div
-        class="ant-table ant-table-rtl"
+        class="ant-table ant-table-empty ant-table-rtl"
      >
        <div
          class="ant-table-container"
--- a/components/table/tests/snapshots/demo.test.js.snap
+++ b/components/table/tests/snapshots/demo.test.js.snap
@ -11,7 +11,7 @@ exports[`renders ./components/table/demo/ajax.md correctly 1`] = `
      class="ant-spin-container"
    >
      <div
-        class="ant-table"
+        class="ant-table ant-table-empty"
      >
        <div
          class="ant-table-container"
@ -1583,6 +1583,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
              role="switch"
              type="button"
            >
+              <div
+                class="ant-switch-handle"
+              />
              <span
                class="ant-switch-inner"
              />
@ -1619,6 +1622,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
              role="switch"
              type="button"
            >
+              <div
+                class="ant-switch-handle"
+              />
              <span
                class="ant-switch-inner"
              />
@ -1655,6 +1661,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
              role="switch"
              type="button"
            >
+              <div
+                class="ant-switch-handle"
+              />
              <span
                class="ant-switch-inner"
              />
@ -1687,11 +1696,13 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
          >
            <button
              aria-checked="true"
-              checked=""
              class="ant-switch ant-switch-checked"
              role="switch"
              type="button"
            >
+              <div
+                class="ant-switch-handle"
+              />
              <span
                class="ant-switch-inner"
              />
@ -1724,11 +1735,13 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
          >
            <button
              aria-checked="true"
-              checked=""
              class="ant-switch ant-switch-checked"
              role="switch"
              type="button"
            >
+              <div
+                class="ant-switch-handle"
+              />
              <span
                class="ant-switch-inner"
              />
@ -1761,11 +1774,13 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
          >
            <button
              aria-checked="true"
-              checked=""
              class="ant-switch ant-switch-checked"
              role="switch"
              type="button"
            >
+              <div
+                class="ant-switch-handle"
+              />
              <span
                class="ant-switch-inner"
              />
@ -1798,11 +1813,13 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
          >
            <button
              aria-checked="true"
-              checked=""
              class="ant-switch ant-switch-checked"
              role="switch"
              type="button"
            >
+              <div
+                class="ant-switch-handle"
+              />
              <span
                class="ant-switch-inner"
              />
@ -1839,6 +1856,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
              role="switch"
              type="button"
            >
+              <div
+                class="ant-switch-handle"
+              />
              <span
                class="ant-switch-inner"
              />
@ -1871,11 +1891,13 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
          >
            <button
              aria-checked="true"
-              checked=""
              class="ant-switch ant-switch-checked"
              role="switch"
              type="button"
            >
+              <div
+                class="ant-switch-handle"
+              />
              <span
                class="ant-switch-inner"
              />
@ -1912,6 +1934,9 @@ exports[`renders ./components/table/demo/dynamic-settings.md correctly 1`] = `
              role="switch"
              type="button"
            >
+              <div
+                class="ant-switch-handle"
+              />
              <span
                class="ant-switch-inner"
              />
--- a/components/table/tests/snapshots/empty.test.js.snap
+++ b/components/table/tests/snapshots/empty.test.js.snap
@ -11,7 +11,7 @@ exports[`Table renders empty table 1`] = `
      class="ant-spin-container"
    >
      <div
-        class="ant-table"
+        class="ant-table ant-table-empty"
      >
        <div
          class="ant-table-container"
@ -148,7 +148,7 @@ exports[`Table renders empty table with custom emptyText 1`] = `
      class="ant-spin-container"
    >
      <div
-        class="ant-table"
+        class="ant-table ant-table-empty"
      >
        <div
          class="ant-table-container"
@ -240,7 +240,7 @@ exports[`Table renders empty table with fixed columns 1`] = `
      class="ant-spin-container"
    >
      <div
-        class="ant-table ant-table-fixed-column ant-table-scroll-horizontal ant-table-has-fix-left ant-table-has-fix-right"
+        class="ant-table ant-table-empty ant-table-fixed-column ant-table-scroll-horizontal ant-table-has-fix-left ant-table-has-fix-right"
      >
        <div
          class="ant-table-container"
@ -480,7 +480,7 @@ exports[`Table renders empty table without emptyText when loading 1`] = `
      class="ant-spin-container ant-spin-blur"
    >
      <div
-        class="ant-table"
+        class="ant-table ant-table-empty"
      >
        <div
          class="ant-table-container"
--- a/components/table/hooks/useFilter/FilterDropdown.tsx
+++ b/components/table/hooks/useFilter/FilterDropdown.tsx
@ -83,7 +83,7 @@ function FilterDropdown<RecordType>(props: FilterDropdownProps<RecordType>) {

  const filtered: boolean = !!(
    filterState &&
-    (filterState.filteredKeys || filterState.forceFiltered)
+    (filterState.filteredKeys?.length || filterState.forceFiltered)
  );
  const triggerVisible = (newVisible: boolean) => {
    setVisible(newVisible);
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@ -494,6 +494,9 @@
  // ========================= Placeholder ==========================
  &-tbody > tr&-placeholder {
    text-align: center;
+    .@{table-prefix-cls}-empty & {
+      color: @disabled-color;
+    }
    &:hover {
      > td {
        background: @component-background;
--- a/components/tag/tests/snapshots/demo.test.js.snap
+++ b/components/tag/tests/snapshots/demo.test.js.snap
@ -232,12 +232,17 @@ Array [
 `;

 exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
-<div>
-  <h4
-    style="margin-bottom:16px"
+Array [
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+    role="separator"
  >
-    Presets:
-  </h4>
+    <span
+      class="ant-divider-inner-text"
+    >
+      Presets
+    </span>
+  </div>,
  <div>
    <span
      class="ant-tag ant-tag-magenta"
@ -294,12 +299,17 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
    >
      purple
    </span>
-  </div>
-  <h4
-    style="margin:16px 0"
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+    role="separator"
  >
-    Custom:
-  </h4>
+    <span
+      class="ant-divider-inner-text"
+    >
+      Custom
+    </span>
+  </div>,
  <div>
    <span
      class="ant-tag ant-tag-has-color"
@ -325,8 +335,8 @@ exports[`renders ./components/tag/demo/colorful.md correctly 1`] = `
    >
      #108ee9
    </span>
-  </div>
-</div>
+  </div>,
+]
 `;

 exports[`renders ./components/tag/demo/control.md correctly 1`] = `
--- a/components/tag/demo/colorful.md
+++ b/components/tag/demo/colorful.md
@ -14,11 +14,11 @@ title:
 We preset a series of colorful tag styles for use in different situations. You can also set it to a hex color string for custom color.

 ```jsx
-import { Tag } from 'antd';
+import { Tag, Divider } from 'antd';

 ReactDOM.render(
-  <div>
-    <h4 style={{ marginBottom: 16 }}>Presets:</h4>
+  <>
+    <Divider orientation="left">Presets</Divider>
    <div>
      <Tag color="magenta">magenta</Tag>
      <Tag color="red">red</Tag>
@ -32,14 +32,14 @@ ReactDOM.render(
      <Tag color="geekblue">geekblue</Tag>
      <Tag color="purple">purple</Tag>
    </div>
-    <h4 style={{ margin: '16px 0' }}>Custom:</h4>
+    <Divider orientation="left">Custom</Divider>
    <div>
      <Tag color="#f50">#f50</Tag>
      <Tag color="#2db7f5">#2db7f5</Tag>
      <Tag color="#87d068">#87d068</Tag>
      <Tag color="#108ee9">#108ee9</Tag>
    </div>
-  </div>,
+  </>,
  mountNode,
 );
 ```
--- a/components/tooltip/tests/snapshots/tooltip.test.js.snap
+++ b/components/tooltip/tests/snapshots/tooltip.test.js.snap
@ -55,6 +55,9 @@ exports[`Tooltip should hide when mouse leave antd disabled component Switch 1`]
    style="pointer-events: none;"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    />
--- a/components/transfer/tests/snapshots/demo.test.js.snap
+++ b/components/transfer/tests/snapshots/demo.test.js.snap
@ -1083,6 +1083,9 @@ exports[`renders ./components/transfer/demo/basic.md correctly 1`] = `
        role="switch"
        type="button"
      >
+        <div
+          class="ant-switch-handle"
+        />
        <span
          class="ant-switch-inner"
        >
@ -2049,6 +2052,9 @@ Array [
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    >
@ -2799,6 +2805,9 @@ exports[`renders ./components/transfer/demo/oneWay.md correctly 1`] = `
        role="switch"
        type="button"
      >
+        <div
+          class="ant-switch-handle"
+        />
        <span
          class="ant-switch-inner"
        >
@ -4233,6 +4242,9 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
    style="margin-top:16px"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    >
@ -4246,6 +4258,9 @@ exports[`renders ./components/transfer/demo/table-transfer.md correctly 1`] = `
    style="margin-top:16px"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    >
--- a/components/tree-select/index.en-US.md
+++ b/components/tree-select/index.en-US.md
@ -23,6 +23,7 @@ Tree selection control.
 | disabled | Disabled or not | boolean | false |  |
 | dropdownClassName | className of dropdown menu | string | - |  |
 | dropdownMatchSelectWidth | Determine whether the dropdown menu and the select input are the same width. Default set `min-width` same as input. `false` will disable virtual scroll | boolean \| number | true |  |
+| dropdownRender | Customize dropdown content | (originNode: ReactNode, props) => ReactNode | - |  |
 | dropdownStyle | To set the style of the dropdown menu | CSSProperties | - |  |
 | filterTreeNode | Whether to filter treeNodes by input value. The value of `treeNodeFilterProp` is used for filtering by default. | boolean\|Function(inputValue: string, treeNode: TreeNode) (should return boolean) | Function |  |
 | getPopupContainer | To set the container of the dropdown menu. The default is to create a `div` element in `body`, you can reset it to the scrolling area and make a relative reposition. [example](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body |  |
--- a/components/tree-select/index.zh-CN.md
+++ b/components/tree-select/index.zh-CN.md
@ -24,6 +24,7 @@ title: TreeSelect
 | disabled | 是否禁用 | boolean | false |  |
 | dropdownClassName | 下拉菜单的 className 属性 | string | - |  |
 | dropdownMatchSelectWidth | 下拉菜单和选择器同宽。默认将设置 `min-width`。`false` 时会关闭虚拟滚动 | boolean \| number | true |  |
+| dropdownRender | 自定义下拉框内容 | (originNode: ReactNode, props) => ReactNode | - |  |
 | dropdownStyle | 下拉菜单的样式 | object | - |  |
 | filterTreeNode | 是否根据输入项进行筛选，默认用 treeNodeFilterProp 的值作为要筛选的 TreeNode 的属性值 | boolean\|Function(inputValue: string, treeNode: TreeNode) (函数需要返回 bool 值) | Function |  |
 | getPopupContainer | 菜单渲染父节点。默认渲染到 body 上，如果你遇到菜单滚动定位问题，试试修改为滚动的区域，并相对其定位。[示例](https://codepen.io/afc163/pen/zEjNOy?editors=0010) | Function(triggerNode) | () => document.body |  |
--- a/components/tree-select/style/index.less
+++ b/components/tree-select/style/index.less
@ -1,6 +1,6 @@
@import '../../style/themes/index';
@import '../../style/mixins/index';
-@import '../../tree/style/index';
+@import '../../tree/style/mixin';
@import '../../checkbox/style/mixin';

@tree-select-prefix-cls: ~'@{ant-prefix}-tree-select';
--- a/components/tree/tests/snapshots/demo.test.js.snap
+++ b/components/tree/tests/snapshots/demo.test.js.snap
@ -1777,11 +1777,13 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
    showLine: 
    <button
      aria-checked="true"
-      checked=""
      class="ant-switch ant-switch-checked"
      role="switch"
      type="button"
    >
+      <div
+        class="ant-switch-handle"
+      />
      <span
        class="ant-switch-inner"
      />
@ -1795,6 +1797,9 @@ exports[`renders ./components/tree/demo/line.md correctly 1`] = `
      role="switch"
      type="button"
    >
+      <div
+        class="ant-switch-handle"
+      />
      <span
        class="ant-switch-inner"
      />
--- a/components/tree/style/index.less
+++ b/components/tree/style/index.less
@ -6,212 +6,9 @@

@tree-prefix-cls: ~'@{ant-prefix}-tree';
@tree-node-prefix-cls: ~'@{tree-prefix-cls}-treenode';
-@tree-motion: ~'@{ant-prefix}-motion-collapse';

 .antCheckboxFn(@checkbox-prefix-cls: ~'@{ant-prefix}-tree-checkbox');

-.antTreeFn(@custom-tree-prefix-cls) {
-  @custom-tree-node-prefix-cls: ~'@{custom-tree-prefix-cls}-treenode';
-  .@{custom-tree-prefix-cls} {
-    .reset-component;
-    background: @tree-bg;
-    border-radius: @border-radius-base;
-    transition: background-color 0.3s;
-
-    &-focused:not(:hover):not(&-active-focused) {
-      background: @primary-1;
-    }
-
-    // =================== Virtual List ===================
-    &-list-holder-inner {
-      align-items: flex-start;
-    }
-
-    &.@{custom-tree-prefix-cls}-block-node {
-      .@{custom-tree-prefix-cls}-list-holder-inner {
-        align-items: stretch;
-
-        // >>> Title
-        .@{custom-tree-prefix-cls}-node-content-wrapper {
-          flex: auto;
-        }
-      }
-    }
-
-    // ===================== TreeNode =====================
-    .@{custom-tree-node-prefix-cls} {
-      display: flex;
-      align-items: flex-start;
-      padding: 0 0 (@padding-xs / 2) 0;
-      outline: none;
-      // Disabled
-      &-disabled {
-        // >>> Title
-        .@{custom-tree-prefix-cls}-node-content-wrapper {
-          color: @disabled-color;
-          cursor: not-allowed;
-
-          &:hover {
-            background: transparent;
-          }
-        }
-      }
-
-      &-active .@{custom-tree-prefix-cls}-node-content-wrapper {
-        background: @tree-node-hover-bg;
-      }
-    }
-
-    // >>> Indent
-    &-indent {
-      align-self: stretch;
-      white-space: nowrap;
-      user-select: none;
-
-      &-unit {
-        display: inline-block;
-        width: @tree-title-height;
-      }
-    }
-
-    // >>> Switcher
-    & &-switcher {
-      .antTreeSwitcherIcon();
-      flex: none;
-
-      width: @tree-title-height;
-      height: @tree-title-height;
-      margin: 0;
-      line-height: @tree-title-height;
-      text-align: center;
-      cursor: pointer;
-
-      &-noop {
-        cursor: default;
-      }
-
-      &_close {
-        .@{custom-tree-prefix-cls}-switcher-icon {
-          svg {
-            transform: rotate(-90deg);
-          }
-        }
-      }
-
-      &-loading-icon {
-        color: @primary-color;
-      }
-    }
-
-    // >>> Checkbox
-    & &-checkbox {
-      top: initial;
-      margin: ((@tree-title-height - @checkbox-size) / 2) 8px 0 0;
-    }
-
-    // >>> Title
-    & &-node-content-wrapper {
-      min-height: @tree-title-height;
-      margin: 0;
-      padding: 0 4px;
-      color: inherit;
-      line-height: @tree-title-height;
-      background: transparent;
-      border-radius: @border-radius-base;
-      cursor: pointer;
-      transition: all 0.3s;
-
-      &:hover {
-        background-color: @tree-node-hover-bg;
-      }
-
-      &.@{custom-tree-prefix-cls}-node-selected {
-        background-color: @tree-node-selected-bg;
-      }
-
-      // Icon
-      .@{custom-tree-prefix-cls}-iconEle {
-        display: inline-block;
-        width: @tree-title-height;
-        height: @tree-title-height;
-        line-height: @tree-title-height;
-        text-align: center;
-        vertical-align: top;
-        &:empty {
-          display: none;
-        }
-      }
-    }
-
-    // ==================== Draggable =====================
-    &-node-content-wrapper[draggable='true'] {
-      line-height: @tree-title-height - 4px;
-      border-top: 2px transparent solid;
-      border-bottom: 2px transparent solid;
-      user-select: none;
-    }
-
-    .@{custom-tree-node-prefix-cls}.drag-over {
-      > [draggable] {
-        color: white;
-        background-color: @primary-color;
-        opacity: 0.8;
-      }
-    }
-    .@{custom-tree-node-prefix-cls}.drag-over-gap-top {
-      > [draggable] {
-        border-top-color: @primary-color;
-      }
-    }
-    .@{custom-tree-node-prefix-cls}.drag-over-gap-bottom {
-      > [draggable] {
-        border-bottom-color: @primary-color;
-      }
-    }
-
-    // ==================== Show Line =====================
-    &-show-line {
-      // ================ Indent lines ================
-      .@{custom-tree-prefix-cls}-indent {
-        &-unit {
-          position: relative;
-          height: 100%;
-
-          &::before {
-            position: absolute;
-            top: calc(100% - 4px);
-            right: -@tree-title-height / 2;
-            bottom: -@tree-title-height - 4px;
-            border-right: 1px solid @border-color-base;
-            content: '';
-          }
-
-          &-end {
-            &::before {
-              display: none;
-            }
-          }
-        }
-      }
-
-      /* Motion should hide line of measure */
-      .@{custom-tree-node-prefix-cls}-motion:not(.@{tree-motion}-leave):not(.@{tree-motion}-appear-active) {
-        .@{custom-tree-prefix-cls}-indent-unit {
-          &::before {
-            display: none;
-          }
-        }
-      }
-
-      // ============== Cover Background ==============
-      .@{custom-tree-prefix-cls}-switcher {
-        z-index: 1;
-        background: @component-background;
-      }
-    }
-  }
-}
-
 .antTreeFn(@tree-prefix-cls);

@import './rtl';
--- a/components/tree/style/mixin.less
+++ b/components/tree/style/mixin.less
@ -2,14 +2,14 @@

@tree-prefix-cls: ~'@{ant-prefix}-tree';
@select-tree-prefix-cls: ~'@{ant-prefix}-select-tree';
+@tree-motion: ~'@{ant-prefix}-motion-collapse';

 .antTreeSwitcherIcon(@type: 'tree-default-open-icon') {
  .@{tree-prefix-cls}-switcher-icon,
  .@{select-tree-prefix-cls}-switcher-icon {
    .iconfont-size-under-12px(10px);
-
    display: inline-block;
-    font-weight: bold;
+    vertical-align: baseline;
    svg {
      transition: transform 0.3s;
    }
@ -27,3 +27,205 @@
    }
  }
 }
+
+.antTreeFn(@custom-tree-prefix-cls) {
+  @custom-tree-node-prefix-cls: ~'@{custom-tree-prefix-cls}-treenode';
+  .@{custom-tree-prefix-cls} {
+    .reset-component;
+    background: @tree-bg;
+    border-radius: @border-radius-base;
+    transition: background-color 0.3s;
+
+    &-focused:not(:hover):not(&-active-focused) {
+      background: @primary-1;
+    }
+
+    // =================== Virtual List ===================
+    &-list-holder-inner {
+      align-items: flex-start;
+    }
+
+    &.@{custom-tree-prefix-cls}-block-node {
+      .@{custom-tree-prefix-cls}-list-holder-inner {
+        align-items: stretch;
+
+        // >>> Title
+        .@{custom-tree-prefix-cls}-node-content-wrapper {
+          flex: auto;
+        }
+      }
+    }
+
+    // ===================== TreeNode =====================
+    .@{custom-tree-node-prefix-cls} {
+      display: flex;
+      align-items: flex-start;
+      padding: 0 0 (@padding-xs / 2) 0;
+      outline: none;
+      // Disabled
+      &-disabled {
+        // >>> Title
+        .@{custom-tree-prefix-cls}-node-content-wrapper {
+          color: @disabled-color;
+          cursor: not-allowed;
+
+          &:hover {
+            background: transparent;
+          }
+        }
+      }
+
+      &-active .@{custom-tree-prefix-cls}-node-content-wrapper {
+        background: @tree-node-hover-bg;
+      }
+    }
+
+    // >>> Indent
+    &-indent {
+      align-self: stretch;
+      white-space: nowrap;
+      user-select: none;
+
+      &-unit {
+        display: inline-block;
+        width: @tree-title-height;
+      }
+    }
+
+    // >>> Switcher
+    & &-switcher {
+      .antTreeSwitcherIcon();
+      flex: none;
+
+      width: @tree-title-height;
+      height: @tree-title-height;
+      margin: 0;
+      line-height: @tree-title-height;
+      text-align: center;
+      cursor: pointer;
+
+      &-noop {
+        cursor: default;
+      }
+
+      &_close {
+        .@{custom-tree-prefix-cls}-switcher-icon {
+          svg {
+            transform: rotate(-90deg);
+          }
+        }
+      }
+
+      &-loading-icon {
+        color: @primary-color;
+      }
+    }
+
+    // >>> Checkbox
+    & &-checkbox {
+      top: initial;
+      margin: ((@tree-title-height - @checkbox-size) / 2) 8px 0 0;
+    }
+
+    // >>> Title
+    & &-node-content-wrapper {
+      min-height: @tree-title-height;
+      margin: 0;
+      padding: 0 4px;
+      color: inherit;
+      line-height: @tree-title-height;
+      background: transparent;
+      border-radius: @border-radius-base;
+      cursor: pointer;
+      transition: all 0.3s;
+
+      &:hover {
+        background-color: @tree-node-hover-bg;
+      }
+
+      &.@{custom-tree-prefix-cls}-node-selected {
+        background-color: @tree-node-selected-bg;
+      }
+
+      // Icon
+      .@{custom-tree-prefix-cls}-iconEle {
+        display: inline-block;
+        width: @tree-title-height;
+        height: @tree-title-height;
+        line-height: @tree-title-height;
+        text-align: center;
+        vertical-align: top;
+        &:empty {
+          display: none;
+        }
+      }
+    }
+
+    // ==================== Draggable =====================
+    &-node-content-wrapper[draggable='true'] {
+      line-height: @tree-title-height - 4px;
+      border-top: 2px transparent solid;
+      border-bottom: 2px transparent solid;
+      user-select: none;
+    }
+
+    .@{custom-tree-node-prefix-cls}.drag-over {
+      > [draggable] {
+        color: white;
+        background-color: @primary-color;
+        opacity: 0.8;
+      }
+    }
+    .@{custom-tree-node-prefix-cls}.drag-over-gap-top {
+      > [draggable] {
+        border-top-color: @primary-color;
+      }
+    }
+    .@{custom-tree-node-prefix-cls}.drag-over-gap-bottom {
+      > [draggable] {
+        border-bottom-color: @primary-color;
+      }
+    }
+
+    // ==================== Show Line =====================
+    &-show-line {
+      // ================ Indent lines ================
+      .@{custom-tree-prefix-cls}-indent {
+        &-unit {
+          position: relative;
+          height: 100%;
+
+          &::before {
+            position: absolute;
+            top: calc(100% - 4px);
+            right: -@tree-title-height / 2;
+            bottom: -@tree-title-height - 4px;
+            border-right: 1px solid @border-color-base;
+            content: '';
+          }
+
+          &-end {
+            &::before {
+              display: none;
+            }
+          }
+        }
+      }
+
+      /* Motion should hide line of measure */
+      .@{custom-tree-node-prefix-cls}-motion:not(.@{tree-motion}-leave):not(.@{tree-motion}-appear-active) {
+        .@{custom-tree-prefix-cls}-indent-unit {
+          &::before {
+            display: none;
+          }
+        }
+      }
+
+      // ============== Cover Background ==============
+      .@{custom-tree-prefix-cls}-switcher {
+        z-index: 1;
+        background: @component-background;
+      }
+    }
+  }
+}
--- a/components/typography/tests/snapshots/demo.test.js.snap
+++ b/components/typography/tests/snapshots/demo.test.js.snap
@ -216,11 +216,13 @@ exports[`renders ./components/typography/demo/ellipsis-debug.md correctly 1`] =
 <div>
  <button
    aria-checked="true"
-    checked=""
    class="ant-switch ant-switch-checked"
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    >
@ -233,6 +235,9 @@ exports[`renders ./components/typography/demo/ellipsis-debug.md correctly 1`] =
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    />
@ -243,6 +248,9 @@ exports[`renders ./components/typography/demo/ellipsis-debug.md correctly 1`] =
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    />
@ -253,6 +261,9 @@ exports[`renders ./components/typography/demo/ellipsis-debug.md correctly 1`] =
    role="switch"
    type="button"
  >
+    <div
+      class="ant-switch-handle"
+    />
    <span
      class="ant-switch-inner"
    />
--- a/components/upload/tests/snapshots/demo.test.js.snap
+++ b/components/upload/tests/snapshots/demo.test.js.snap
@ -106,6 +106,123 @@ exports[`renders ./components/upload/demo/basic.md correctly 1`] = `
 </span>
 `;

+exports[`renders ./components/upload/demo/crop-image.md correctly 1`] = `
+<span
+  class="ant-upload-picture-card-wrapper"
+>
+  <div
+    class="ant-upload-list ant-upload-list-picture-card"
+  >
+    <div
+      class="ant-upload-list-picture-card-container"
+    >
+      <span>
+        <div
+          class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
+        >
+          <div
+            class="ant-upload-list-item-info"
+          >
+            <span>
+              <a
+                class="ant-upload-list-item-thumbnail"
+                href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                rel="noopener noreferrer"
+                target="_blank"
+              >
+                <img
+                  alt="image.png"
+                  class="ant-upload-list-item-image"
+                  src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                />
+              </a>
+              <a
+                class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1"
+                href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+                rel="noopener noreferrer"
+                target="_blank"
+                title="image.png"
+              >
+                image.png
+              </a>
+            </span>
+          </div>
+          <span
+            class="ant-upload-list-item-actions"
+          >
+            <a
+              href="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
+              rel="noopener noreferrer"
+              target="_blank"
+              title="Preview file"
+            >
+              <span
+                aria-label="eye"
+                class="anticon anticon-eye"
+                role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="eye"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
+                >
+                  <path
+                    d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+                  />
+                </svg>
+              </span>
+            </a>
+            <span
+              aria-label="delete"
+              class="anticon anticon-delete"
+              role="img"
+              tabindex="-1"
+              title="Remove file"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="delete"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
+              >
+                <path
+                  d="M360 184h-8c4.4 0 8-3.6 8-8v8h304v-8c0 4.4 3.6 8 8 8h-8v72h72v-80c0-35.3-28.7-64-64-64H352c-35.3 0-64 28.7-64 64v80h72v-72zm504 72H160c-17.7 0-32 14.3-32 32v32c0 4.4 3.6 8 8 8h60.4l24.7 523c1.6 34.1 29.8 61 63.9 61h454c34.2 0 62.3-26.8 63.9-61l24.7-523H888c4.4 0 8-3.6 8-8v-32c0-17.7-14.3-32-32-32zM731.3 840H292.7l-24.2-512h487l-24.2 512z"
+                />
+              </svg>
+            </span>
+          </span>
+        </div>
+      </span>
+    </div>
+  </div>
+  <div
+    class="ant-upload ant-upload-select ant-upload-select-picture-card"
+  >
+    <span
+      class="ant-upload"
+      role="button"
+      tabindex="0"
+    >
+      <input
+        accept="image/*"
+        style="display:none"
+        type="file"
+      />
+      + Upload
+    </span>
+  </div>
+</span>
+`;
+
 exports[`renders ./components/upload/demo/defaultFileList.md correctly 1`] = `
 <span
  class=""
--- a/components/upload/demo/crop-image.md
+++ b/components/upload/demo/crop-image.md
@ -0,0 +1,66 @@
+---
+order: 14
+title:
+  zh-CN: 上传前裁切图片
+  en-US: Crop image before uploading
+---
+
+## zh-CN
+
+配合 [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) 实现上传前裁切图片。
+
+## en-US
+
+Use [antd-img-crop](https://github.com/nanxiaobei/antd-img-crop) to crop image before uploading.
+
+```jsx
+import React, { useState } from 'react';
+import { Upload } from 'antd';
+import ImgCrop from 'antd-img-crop';
+
+const Demo = () => {
+  const [fileList, setFileList] = useState([
+    {
+      uid: '-1',
+      name: 'image.png',
+      status: 'done',
+      url: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
+    },
+  ]);
+
+  const onChange = ({ fileList: newFileList }) => {
+    setFileList(newFileList);
+  };
+
+  const onPreview = async file => {
+    let src = file.url;
+    if (!src) {
+      src = await new Promise(resolve => {
+        const reader = new FileReader();
+        reader.readAsDataURL(file.originFileObj);
+        reader.onload = () => resolve(reader.result);
+      });
+    }
+    const image = new Image();
+    image.src = src;
+    const imgWindow = window.open(src);
+    imgWindow.document.write(image.outerHTML);
+  };
+
+  return (
+    <ImgCrop rotate>
+      <Upload
+        action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+        listType="picture-card"
+        fileList={fileList}
+        onChange={onChange}
+        onPreview={onPreview}
+      >
+        {fileList.length < 5 && '+ Upload'}
+      </Upload>
+    </ImgCrop>
+  );
+};
+
+ReactDOM.render(<Demo />, mountNode);
+```
--- a/components/upload/style/index.less
+++ b/components/upload/style/index.less
@ -306,6 +306,20 @@
      }
    }

+    // Adjust the color of the error icon : https://github.com/ant-design/ant-design/pull/24160
+    .@{upload-item}-error .@{upload-item}-thumbnail {
+      .@{iconfont-css-prefix} {
+        svg path {
+          &[fill='#e6f7ff'] {
+            fill: color(~`colorPalette('@{error-color}', 1) `);
+          }
+          &[fill='#1890ff'] {
+            fill: @error-color;
+          }
+        }
+      }
+    }
+
    .@{upload-item}-icon {
      position: absolute;
      top: 50%;
--- a/docs/react/use-in-typescript.en-US.md
+++ b/docs/react/use-in-typescript.en-US.md
@ -109,9 +109,16 @@ module.exports = {

 According to the [Customize Theme documentation](/docs/react/customize-theme), we need to modify less variables via loader like [less-loader](https://github.com/webpack/less-loader). We can use [craco-less](https://github.com/DocSpring/craco-less) to achieve that,

-First we should import less other then css.
+First we should modify `src/App.css` to `src/App.less`, then import less file instead.

 ```diff
+/* src/App.ts */
+- import './App.css';
+ import './App.less';
+```
+
+```diff
+/* src/App.less */
 - @import '~antd/dist/antd.css';
 + @import '~antd/dist/antd.less';
 ```
--- a/docs/react/use-in-typescript.zh-CN.md
+++ b/docs/react/use-in-typescript.zh-CN.md
@ -107,14 +107,21 @@ module.exports = {

 按照 [配置主题](/docs/react/customize-theme) 的要求，自定义主题需要用到类似 [less-loader](https://github.com/webpack-contrib/less-loader/) 提供的 less 变量覆盖功能。我们可以引入 [craco-less](https://github.com/DocSpring/craco-less) 来帮助加载 less 样式和修改变量。

-首先修改样式引用为 less 文件。
+首先把 `src/App.css` 文件修改为 `src/App.less`，然后修改样式引用为 less 文件。

 ```diff
+/* src/App.ts */
+- import './App.css';
+ import './App.less';
+```
+
+```diff
+/* src/App.less */
 - @import '~antd/dist/antd.css';
 + @import '~antd/dist/antd.less';
 ```

-然后安装 `craco-less` 并修改 `config-overrides.js` 文件如下。
+然后安装 `craco-less` 并修改 `craco.config.js` 文件如下。

 ```bash
 $ yarn add craco-less
--- a/docs/react/use-with-create-react-app.en-US.md
+++ b/docs/react/use-with-create-react-app.en-US.md
@ -117,9 +117,16 @@ module.exports = {

 According to the [Customize Theme documentation](/docs/react/customize-theme), we need to modify less variables via loader like [less-loader](https://github.com/webpack/less-loader). We can use [craco-less](https://github.com/DocSpring/craco-less) to achieve that,

-First we should import less other then css.
+First we should modify `src/App.css` to `src/App.less`, then import less file instead.

 ```diff
+/* src/App.js */
+- import './App.css';
+ import './App.less';
+```
+
+```diff
+/* src/App.less */
 - @import '~antd/dist/antd.css';
 + @import '~antd/dist/antd.less';
 ```
--- a/docs/react/use-with-create-react-app.zh-CN.md
+++ b/docs/react/use-with-create-react-app.zh-CN.md
@ -119,14 +119,21 @@ module.exports = {

 按照 [配置主题](/docs/react/customize-theme) 的要求，自定义主题需要用到类似 [less-loader](https://github.com/webpack-contrib/less-loader/) 提供的 less 变量覆盖功能。我们可以引入 [craco-less](https://github.com/DocSpring/craco-less) 来帮助加载 less 样式和修改变量。

-首先修改样式引用为 less 文件。
+首先把 `src/App.css` 文件修改为 `src/App.less`，然后修改样式引用为 less 文件。

 ```diff
+/* src/App.js */
+- import './App.css';
+ import './App.less';
+```
+
+```diff
+/* src/App.less */
 - @import '~antd/dist/antd.css';
 + @import '~antd/dist/antd.less';
 ```

-然后安装 `craco-less` 并修改 `config-overrides.js` 文件如下。
+然后安装 `craco-less` 并修改 `craco.config.js` 文件如下。

 ```bash
 $ yarn add craco-less
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "4.2.3",
+  "version": "4.2.4",
  "description": "An enterprise-class UI design language and React components implementation",
  "keywords": [
    "ant",
@ -115,7 +115,7 @@
    "prop-types": "^15.7.2",
    "raf": "^3.4.1",
    "rc-animate": "~3.0.0",
-    "rc-cascader": "~1.0.0",
+    "rc-cascader": "~1.1.0",
    "rc-checkbox": "~2.2.0",
    "rc-collapse": "~2.0.0",
    "rc-dialog": "~7.7.0",
@ -124,7 +124,7 @@
    "rc-field-form": "~1.4.0",
    "rc-input-number": "~4.6.1",
    "rc-mentions": "~1.1.0",
-    "rc-menu": "~8.1.0",
+    "rc-menu": "~8.2.1",
    "rc-notification": "~4.3.0",
    "rc-pagination": "~2.2.0",
    "rc-picker": "~1.4.16",
@ -134,7 +134,7 @@
    "rc-select": "~10.3.0",
    "rc-slider": "~9.2.3",
    "rc-steps": "~3.6.0",
-    "rc-switch": "~2.0.0",
+    "rc-switch": "~3.1.0",
    "rc-table": "~7.7.0",
    "rc-tabs": "~10.1.1",
    "rc-tooltip": "~4.0.2",
@ -168,8 +168,9 @@
    "@types/warning": "^3.0.0",
    "@typescript-eslint/eslint-plugin": "^2.19.0",
    "@typescript-eslint/parser": "^2.19.0",
+    "antd-img-crop": "^3.1.1",
    "antd-pro-merge-less": "^3.0.3",
-    "antd-theme-generator": "^1.1.6",
+    "antd-theme-generator": "1.2.2",
    "babel-eslint": "^10.0.1",
    "babel-plugin-add-react-displayname": "^0.0.5",
    "bisheng": "^1.5.1",
--- a/site/theme/static/colors.less
+++ b/site/theme/static/colors.less
@ -65,6 +65,10 @@
      margin-left: 16px;
      font-size: 14px;
      font-family: Consolas, sans-serif;
+      .ant-row-rtl & {
+        margin-right: 16px;
+        margin-left: 0;
+      }
    }
    &-validation {
      position: relative;
@ -72,6 +76,10 @@
      margin-left: 16px;
      color: @error-color;
      font-size: 13px;
+      .ant-row-rtl & {
+        margin-right: 16px;
+        margin-left: 0;
+      }
      &-dark {
        margin-left: 0;
      }
--- a/site/theme/template/Content/Demo/index.jsx
+++ b/site/theme/template/Content/Demo/index.jsx
@ -181,10 +181,7 @@ class Demo extends React.Component {
      html,
      js: sourceCode
        .replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'antd';/, 'const { $1 } = antd;')
-        .replace(
-          /import\s+{(\s+[^}]*\s+)}\s+from\s+'@ant-design\/icons';/,
-          'const { $1 } = icons;',
-        )
+        .replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'@ant-design\/icons';/, 'const { $1 } = icons;')
        .replace("import moment from 'moment';", '')
        .replace(/import\s+{\s+(.*)\s+}\s+from\s+'react-router';/, 'const { $1 } = ReactRouter;')
        .replace(
@ -252,7 +249,11 @@ import 'antd/dist/antd.css';
 import './index.css';
 ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
 `.trim();
-    const indexCssContent = (style || '').replace(new RegExp(`#${meta.id}\\s*`, 'g'), '');
+    const indexCssContent = (style || '')
+      .trim()
+      .replace(new RegExp(`#${meta.id}\\s*`, 'g'), '')
+      .replace('</style>', '')
+      .replace('<style>', '');

    const codesandboxPackage = {
      name: `${localizedTitle} - Ant Design Demo`,
@ -299,9 +300,7 @@ ${parsedSourceCode.replace('mountNode', "document.getElementById('container')")}
      <section className={codeBoxClass} id={meta.id}>
        <section className="code-box-demo">
          <ErrorBoundary>{this.liveDemo}</ErrorBoundary>
-          {style ? (
-            <style dangerouslySetInnerHTML={{ __html: style }} />
-          ) : null}
+          {style ? <style dangerouslySetInnerHTML={{ __html: style }} /> : null}
        </section>
        <section className="code-box-meta markdown">
          <div className="code-box-title">
--- a/site/theme/template/Home/DesignPage/index.tsx
+++ b/site/theme/template/Home/DesignPage/index.tsx
@ -215,7 +215,7 @@ export default function DesignPage() {
              >
                <img
                  alt="design guide"
-                  style={{ maxHeight: 292, maxWidth: '100%' }}
+                  style={{ maxHeight: 278, maxWidth: '100%' }}
                  src="https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*5PRzTL4pwuYAAAAAAAAAAABkARQnAQ"
                />
              </Col>
--- a/site/theme/template/Home/MorePage.tsx
+++ b/site/theme/template/Home/MorePage.tsx
@ -18,39 +18,39 @@ const SourceImages = {

 const MORE_LIST: MoreProps[] = [
  {
-    title: '揭密可视化专家配色秘笈',
+    title: 'Ant Design 4.0 的一些杂事儿 - Space 篇',
    description:
-      '颜色搭配不仅可以传递出美感，颜色还可以通过不同的组合排序，形成一门新的界面语言，讲述数据的故事。',
-    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*M7rLR5follIAAAAAAAAAAABkARQnAQ',
-    date: '2020-04-02',
+      '作为前端开发者，我们总是不断的在与样式做斗争。今天，我们聊聊 Ant Design 中新增的 Space 组件。',
+    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*jHvSR48tRccAAAAAAAAAAABkARQnAQ',
+    date: '2020-04-24',
    source: 'zhihu',
-    href: 'https://zhuanlan.zhihu.com/p/112540818',
+    href: 'https://zhuanlan.zhihu.com/p/135446399',
  },
  {
-    title: 'HiTu 插画资产设计分享',
+    title: '编辑器设计系列：每天都在用，你真的了解它么？',
    description:
-      '分享一下我们在做 HiTu 插画设计的一些过程和方法，希望能给同样做插画资产的同学带来帮助与启发。',
-    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*cJdyS4KVDlgAAAAAAAAAAABkARQnAQ',
+      '提起编辑器，你会想到什么？也许你从来没有意识到，但是从接触计算机开始，你就和各种编辑器打上了交道。',
+    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*c88yR4TO1z8AAAAAAAAAAABkARQnAQ',
+    date: '2020-04-15',
+    source: 'zhihu',
+    href: 'https://zhuanlan.zhihu.com/p/113961511',
+  },
+  {
+    title: 'Ant Design 4.0 的一些杂事儿 - CI 篇',
+    description: '4.0 正式版的到来之后，在这里想聊聊技术之外的事儿。不用动太多脑子，当个小品阅读即可~',
+    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*GhL4Q5oRePsAAAAAAAAAAABkARQnAQ',
    date: '2020-03-16',
    source: 'zhihu',
-    href: 'https://zhuanlan.zhihu.com/p/112541651',
+    href: 'https://zhuanlan.zhihu.com/p/113537427',
  },
  {
-    title: '从常用图表到 DashBoard 页面模板，懒人套餐请享用吧！',
-    description: 'Ant Design 4.0 和 AntV 的重磅产品 G2 4.0 发布之际，图表的样式也跟着大升级了哦。',
-    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*d_D0TLmwFLoAAAAAAAAAAABkARQnAQ',
-    date: '2020-03-11',
-    source: 'zhihu',
-    href: 'https://zhuanlan.zhihu.com/p/111373360',
-  },
-  {
-    title: '言之有序',
+    title: 'Ant Design 4.0 ，脱离业务的框架都是耍流氓',
    description:
-      '大到一个系统，小到一个按钮，背后的每一条规则既要思考设计的易用性，同时也要去推敲组织的合理性。',
-    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*J1SBR47PngwAAAAAAAAAAABkARQnAQ',
-    date: '2020-03-03',
+      '作为 Ant Design 的实践案例、业务需求方和同一层楼的小伙伴，一起聊聊「4.0 背后的故事」。',
+    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*C1-TT7vgidAAAAAAAAAAAABkARQnAQ',
+    date: '2020-03-04',
    source: 'zhihu',
-    href: 'https://zhuanlan.zhihu.com/p/110442621',
+    href: 'https://zhuanlan.zhihu.com/p/110863773',
  },
 ];

--- a/site/theme/template/Home/RecommendPage.tsx
+++ b/site/theme/template/Home/RecommendPage.tsx
@ -16,11 +16,11 @@ interface Recommend {

 const LIST_CN: Recommend[] = [
  {
-    title: 'Kitchen「设计资产」重磅更新！',
+    title: '蚂蚁金服体验技术部招聘啦！',
    description:
-      '作为 Ant Design 的好伙伴，Kitchen 已第一时间上架 Ant Design 4.0 最新 Sketch 组件包。',
-    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*bBKkQILVF2AAAAAAAAAAAABkARQnAQ',
-    href: 'https://kitchen.alipay.com/',
+      '欢迎志同道合的你加入我们，一同在「引领全球体验科技，创造一流用户体验」的愿景指引下前行。',
+    img: 'https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*BPVATKTgfXwAAAAAAAAAAABkARQnAQ',
+    href: 'https://www.yuque.com/uf44r1/wqrwsg/alwufg',
    popularize: true,
  },
  {
--- a/site/theme/template/Layout/Header/SearchBox.less
+++ b/site/theme/template/Layout/Header/SearchBox.less
@ -48,6 +48,11 @@
    border: 0;
    box-shadow: none;

+    .ant-row-rtl & {
+      padding-right: 20px;
+      padding-left: 11px;
+    }
+
    &::placeholder {
      color: #a3b1bf;
    }