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

chore: Feature merge master
2024-11-26 20:20:00 +08:00 · 2020-05-13 12:32:22 +08:00 · 2020-05-13 12:32:22 +08:00 · 63a32422e5
commit 63a32422e5
parent f250b2fa29 339246d316
42 changed files with 1341 additions and 1367 deletions
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,60 @@ timeline: true

 ---

+## 4.2.2
+
+`2020-05-11`
+
+- 🐞 Fix `npm run version` install error. [#24059](https://github.com/ant-design/ant-design/pull/24059)
+- 🐞 Fix Menu `@menu-item-font-size` not working. [#24052](https://github.com/ant-design/ant-design/pull/24052)
+- 💄 Add `@modal-close-color` less variable. [#24053](https://github.com/ant-design/ant-design/pull/24053)
+
+## 4.2.1
+
+`2020-05-11`
+
+- Form
+  - 🐞 Fix Form.Item get React warning for `getValueProps`. [#23875](https://github.com/ant-design/ant-design/pull/23875)
+  - 🐞 Fix Form.Item `help` style issue when `validateStatus` is not `error`. [#23945](https://github.com/ant-design/ant-design/pull/23945)
+- Table
+  - 🐞 Fix selection column width issue when fix header. [#23806](https://github.com/ant-design/ant-design/pull/23806)
+  - 💄 Adjust selection column css selector priority to enable customize width. [#23914](https://github.com/ant-design/ant-design/pull/23914)
+- DatePicker
+  - 🐞 Fix miss placeholder when `placeholder` is `undefined`. [#23818](https://github.com/ant-design/ant-design/pull/23818)
+  - 🐞 Fix clear icon color style. [#23811](https://github.com/ant-design/ant-design/pull/23811)
+- Switch
+  - 🐞 Fix loading style for the dark theme. [#23766](https://github.com/ant-design/ant-design/pull/23766) [@vsn4ik](https://github.com/vsn4ik)
+  - 🐞 Fix `unCheckedChildren` not showing. [#23791](https://github.com/ant-design/ant-design/pull/23791)
+- 🐞 Fix Upload error message location to scroll in the float layer. [#24001](https://github.com/ant-design/ant-design/pull/24001) [@mraiguo](https://github.com/mraiguo)
+- 💄 Tweak Comment render unnecessary div style when `avatar` is empty. [#23994](https://github.com/ant-design/ant-design/pull/23994) [@Xuhao](https://github.com/Xuhao)
+- 🐞 Fix Select `focus` border style in Input.Group. [#23985](https://github.com/ant-design/ant-design/pull/23985)
+- 🐞 Fix Steps `subTitle` showing `[object Object]` title. [#23989](https://github.com/ant-design/ant-design/pull/23989)
+- 💄 Tweak Select close icon position. [#23963](https://github.com/ant-design/ant-design/pull/23963)
+- 🐞 Fix Drawer `width="50%"` hidden problem when no mask. [#23925](https://github.com/ant-design/ant-design/pull/23925)
+- 🐞 Fix Textarea with `allowClear` has error height style. [#23835](https://github.com/ant-design/ant-design/pull/23835)
+- 💄 Adjust Modal.xxx function async to avoid block React events. [#23826](https://github.com/ant-design/ant-design/pull/23826)
+- 🐞 Fix Menu with controlled `openKeys` abnormal behavior when `inlineCollapsed` changed. [#23822](https://github.com/ant-design/ant-design/pull/23822)
+- 🐞 Fix Button `loading` animation. [#23783](https://github.com/ant-design/ant-design/pull/23783)
+- 🐞 Fix Slider `marks` selected problem when dragging. [#23773](https://github.com/ant-design/ant-design/pull/23773)
+- 🛠 Timeline refactors with React Hooks. [#23631](https://github.com/ant-design/ant-design/pull/23631) [@hengkx](https://github.com/hengkx)
+- 🌎 Localization
+  - 🌐 Add Farsi `fa_IR` default locale template localisations. [#23926](https://github.com/ant-design/ant-design/pull/23926) [@NarimanMov](https://github.com/NarimanMov)
+  - 🌐 Add default `en` default locale template localisations for Form. [#23859](https://github.com/ant-design/ant-design/pull/23859) [@mjfwebb](https://github.com/mjfwebb)
+- 📦 Reduce bundle size
+  - 🗑 Reduce bundle size via removing `react-lifecycles-compat`. [#23969](https://github.com/ant-design/ant-design/pull/23969)
+  - 🛠 Reduce bundle size via excluding `package.json` from source code. [#23957](https://github.com/ant-design/ant-design/pull/23957)
+  - 🛠 Upgrade `rc-animate` to 3.x to reduce bundle size. [#23937](https://github.com/ant-design/ant-design/pull/23937)
+- RTL
+  - 🐞 Fix Input clear icon style in RTL. [#23999](https://github.com/ant-design/ant-design/pull/23999)
+  - 🐞 Fix DatePicker panel style in RTL. [#24028](https://github.com/ant-design/ant-design/pull/24028) [@xrkffgg](https://github.com/xrkffgg)
+  - 💄 Optimize DatePicker active bar style in `RTL`. [#23981](https://github.com/ant-design/ant-design/pull/23981)
+  - 🐞 Fix Transfer search padding style in `RTL`. [#23962](https://github.com/ant-design/ant-design/pull/23962)
+  - 💄 Optimize Layout style of RTL. [#23921](https://github.com/ant-design/ant-design/pull/23921)
+  - 💄 Optimize Button `loading` style in RT. [#23776](https://github.com/ant-design/ant-design/pull/23776)
+  - 💄 Optimize Input.Search style in RTL. [#23797](https://github.com/ant-design/ant-design/pull/23797)
+- TypeScript
+  - 🐞 Fix InputNumber `onChange` type. [#23871](https://github.com/ant-design/ant-design/pull/23871) [@jjhbw](https://github.com/jjhbw)
+
 ## 4.2.0

 `2020-04-29`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,60 @@ timeline: true

 ---

+## 4.2.2
+
+`2020-05-11`
+
+- 🐞 修复安装 antd `npm run version` 报错的问题。[#24059](https://github.com/ant-design/ant-design/pull/24059)
+- 🐞 修复 Menu `@menu-item-font-size` 变量失效的问题。[#24052](https://github.com/ant-design/ant-design/pull/24052)
+- 💄 新增 `@modal-close-color` less 变量。[#24053](https://github.com/ant-design/ant-design/pull/24053)
+
+## 4.2.1
+
+`2020-05-11`
+
+- Form
+  - 🐞 修复 Form.Item 使用 `getValueProps` React 会报警的问题。[#23875](https://github.com/ant-design/ant-design/pull/23875)
+  - 🐞 修复 Form.Item `help` 在 `validateStatus` 不是 `error` 时的样式问题。[#23945](https://github.com/ant-design/ant-design/pull/23945)
+- Table
+  - 🐞 修复 Table 固定表头时选择列的宽度问题。[#23806](https://github.com/ant-design/ant-design/pull/23806)
+  - 💄 调整 Table 选择列 css 选择器优先级以支持自定义宽度。[#23914](https://github.com/ant-design/ant-design/pull/23914)
+- DatePicker
+  - 🐞 修复在 `placeholder` 为 `undefined` 时不展示的问题。[#23818](https://github.com/ant-design/ant-design/pull/23818)
+  - 🐞 修复清除图标的颜色。[#23811](https://github.com/ant-design/ant-design/pull/23811)
+- Switch
+  - 🐞 修复暗色主题下的加载样式。[#23766](https://github.com/ant-design/ant-design/pull/23766) [@vsn4ik](https://github.com/vsn4ik)
+  - 🐞 修复 `unCheckedChildren` 不显示的问题。[#23791](https://github.com/ant-design/ant-design/pull/23791)
+- 🐞 修复 Upload 在浮层中错误提示滚动定位问题。[#24001](https://github.com/ant-design/ant-design/pull/24001) [@mraiguo](https://github.com/mraiguo)
+- 💄 调整 Comment 中 `avatar` 为空时不必要的 div 样式[#23994](https://github.com/ant-design/ant-design/pull/23994) [@Xuhao](https://github.com/Xuhao)
+- 🐞 修复 Input.Group 中 Select 选项 `focus` 边框样式[#23985](https://github.com/ant-design/ant-design/pull/23985)
+- 🐞 修复 Steps `subTitle` 上会显示 `[object Object]` 提示的问题。[#23989](https://github.com/ant-design/ant-design/pull/23989)
+- 💄 微调 Select 移除图标的位置。[#23963](https://github.com/ant-design/ant-design/pull/23963)
+- 🐞 修复无遮罩的 Drawer 设置 `50%` 宽度时不显示的问题。[#23925](https://github.com/ant-design/ant-design/pull/23925)
+- 🐞 修复 Textarea 开启 `allowClear` 时高度错误的问题。[#23835](https://github.com/ant-design/ant-design/pull/23835)
+- 💄 调整 Modal.xxx 方法为异步以防止其影响 React 事件响应。[#23826](https://github.com/ant-design/ant-design/pull/23826)
+- 🐞 修复受控模式 Menu `inlineCollapsed` 折叠时的表现。[#23822](https://github.com/ant-design/ant-design/pull/23822)
+- 🐞 修复 Button `loading` 动画切换不平滑的问题。[#23783](https://github.com/ant-design/ant-design/pull/23783)
+- 🐞 修复 Slider 拖拽中选中 `marks` 文本的问题。[#23773](https://github.com/ant-design/ant-design/pull/23773)
+- 🛠 Timeline 使用 React Hooks 重构。[#23631](https://github.com/ant-design/ant-design/pull/23631) [@hengkx](https://github.com/hengkx)
+- 🌎 国际化
+  - 🌐 增加波斯语 `fa_IR` 国际化默认提示模板。[#23926](https://github.com/ant-design/ant-design/pull/23926) [@NarimanMov](https://github.com/NarimanMov)
+  - 🌐 增加 Form `en` 国际化默认提示模板[#23859](https://github.com/ant-design/ant-design/pull/23859) [@mjfwebb](https://github.com/mjfwebb)
+- 📦 包体积优化
+  - 🗑 移除 `react-lifecycles-compat` 依赖以优化包体积。[#23969](https://github.com/ant-design/ant-design/pull/23969)
+  - 🛠 源码中不再引用 `package.json` 从而优化了一点包体积。[#23957](https://github.com/ant-design/ant-design/pull/23957)
+  - 🛠 更新 `rc-animate` 到 3.x 以优化包体积。[#23937](https://github.com/ant-design/ant-design/pull/23937)
+- RTL
+  - 🐞 修复 Input 在 RTL 模式下清空按钮的样式。[#23999](https://github.com/ant-design/ant-design/pull/23999)
+  - 🐞 修复 DatePicker 下拉框在 RTL 模式下样式。[#24028](https://github.com/ant-design/ant-design/pull/24028) [@xrkffgg](https://github.com/xrkffgg)
+  - 💄 优化 DatePick 在 `RTL` 模式下的激活条样式。[#23981](https://github.com/ant-design/ant-design/pull/23981)
+  - 🐞 修复 Transfer 查询框在 `RTL` 模式下的边距样式。[#23962](https://github.com/ant-design/ant-design/pull/23962)
+  - 💄 优化 Layout RTL 样式。[#23921](https://github.com/ant-design/ant-design/pull/23921)
+  - 💄 优化 Button `loading` 状态在 RTL 下样式。[#23776](https://github.com/ant-design/ant-design/pull/23776)
+  - 💄 优化 Input.Search RTL 样式。[#23797](https://github.com/ant-design/ant-design/pull/23797)
+- TypeScript
+  - 🐞 修复 InputNumber `onChange` 类型。[#23871](https://github.com/ant-design/ant-design/pull/23871) [@jjhbw](https://github.com/jjhbw)
+
 ## 4.2.0

 `2020-04-29`
--- a/components/avatar/demo/basic.md
+++ b/components/avatar/demo/basic.md
@ -41,4 +41,8 @@ ReactDOM.render(
  margin-top: 16px;
  margin-right: 16px;
 }
+.ant-row-rtl #components-avatar-demo-basic .ant-avatar {
+  margin-right: 0;
+  margin-left: 16px;
+}
 </style>
--- a/components/avatar/demo/type.md
+++ b/components/avatar/demo/type.md
@ -35,4 +35,8 @@ ReactDOM.render(
  margin-top: 16px;
  margin-right: 16px;
 }
+.ant-row-rtl #components-avatar-demo-type .ant-avatar {
+  margin-right: 0;
+  margin-left: 16px;
+}
 </style>
--- a/components/button/style/index.less
+++ b/components/button/style/index.less
@ -22,13 +22,6 @@
  line-height: @line-height-base;
  .btn;
  .btn-default;
-  // Make sure that the target of Button's click event always be `button`
-  // Ref: https://github.com/ant-design/ant-design/issues/7034
-  > i,
-  > span {
-    display: inline-block;
-    pointer-events: none;
-  }

  &-primary {
    .btn-primary;
--- a/components/cascader/tests/index.test.js
+++ b/components/cascader/tests/index.test.js
@ -53,14 +53,7 @@ describe('Cascader', () => {

  it('popup correctly when panel is hidden', () => {
    const wrapper = mount(<Cascader options={options} />);
-    expect(
-      render(
-        wrapper
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
-    ).toMatchSnapshot();
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
  });

  it('popup correctly when panel is open', () => {
@ -69,14 +62,7 @@ describe('Cascader', () => {
      <Cascader options={options} onPopupVisibleChange={onPopupVisibleChange} />,
    );
    wrapper.find('input').simulate('click');
-    expect(
-      render(
-        wrapper
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
-    ).toMatchSnapshot();
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
    expect(onPopupVisibleChange).toHaveBeenCalledWith(true);
  });

@ -91,97 +77,44 @@ describe('Cascader', () => {
  it('popup correctly with defaultValue', () => {
    const wrapper = mount(<Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />);
    wrapper.find('input').simulate('click');
-    expect(
-      render(
-        wrapper
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
-    ).toMatchSnapshot();
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
  });

  it('should support popupVisible', () => {
    const wrapper = mount(<Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />);
-    expect(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent().props.visible,
-    ).toBe(false);
+    expect(wrapper.find('Trigger').instance().getComponent().props.visible).toBe(false);
    wrapper.setProps({ popupVisible: true });
-    expect(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent().props.visible,
-    ).toBe(true);
+    expect(wrapper.find('Trigger').instance().getComponent().props.visible).toBe(true);
  });

  it('can be selected', () => {
    const onChange = jest.fn();
    const wrapper = mount(<Cascader options={options} onChange={onChange} />);
    wrapper.find('input').simulate('click');
-    let popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    let popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
    popupWrapper
      .find('.ant-cascader-menu')
      .at(0)
      .find('.ant-cascader-menu-item')
      .at(0)
      .simulate('click');
-    expect(
-      render(
-        wrapper
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
-    ).toMatchSnapshot();
-    popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
+    popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
    popupWrapper
      .find('.ant-cascader-menu')
      .at(1)
      .find('.ant-cascader-menu-item')
      .at(0)
      .simulate('click');
-    expect(
-      render(
-        wrapper
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
-    ).toMatchSnapshot();
-    popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
+    popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
    popupWrapper
      .find('.ant-cascader-menu')
      .at(2)
      .find('.ant-cascader-menu-item')
      .at(0)
      .simulate('click');
-    expect(
-      render(
-        wrapper
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
-    ).toMatchSnapshot();
+    expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
    expect(onChange).toHaveBeenCalledWith(['zhejiang', 'hangzhou', 'xihu'], expect.anything());
  });

@ -199,12 +132,7 @@ describe('Cascader', () => {
    wrapper.find('input').simulate('click');
    wrapper.find('input').simulate('change', { target: { value: 'z' } });
    expect(wrapper.state('inputValue')).toBe('z');
-    const popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
    expect(popupWrapper).toMatchSnapshot();
  });

@ -245,12 +173,7 @@ describe('Cascader', () => {
    wrapper.find('input').simulate('click');
    wrapper.find('input').simulate('change', { target: { value: 'z' } });
    expect(wrapper.state('inputValue')).toBe('z');
-    const popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
    expect(popupWrapper.render()).toMatchSnapshot();
  });

@ -259,22 +182,14 @@ describe('Cascader', () => {
    wrapper.find('input').simulate('click');
    wrapper.find('input').simulate('change', { target: { value: '__notfoundkeyword__' } });
    expect(wrapper.state('inputValue')).toBe('__notfoundkeyword__');
-    const popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
    expect(popupWrapper).toMatchSnapshot();
  });

  it('should support to clear selection', () => {
    const wrapper = mount(<Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />);
    expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('Zhejiang / Hangzhou');
-    wrapper
-      .find('.ant-cascader-picker-clear')
-      .at(0)
-      .simulate('click');
+    wrapper.find('.ant-cascader-picker-clear').at(0).simulate('click');
    expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('');
  });

@ -288,10 +203,7 @@ describe('Cascader', () => {
        onPopupVisibleChange={onPopupVisibleChange}
      />,
    );
-    wrapper
-      .find('.ant-cascader-picker-clear')
-      .at(0)
-      .simulate('click');
+    wrapper.find('.ant-cascader-picker-clear').at(0).simulate('click');
    expect(onPopupVisibleChange).toHaveBeenCalledWith(false);
  });

@ -302,10 +214,7 @@ describe('Cascader', () => {
    wrapper.find('input').simulate('click');
    wrapper.find('input').simulate('change', { target: { value: 'xxx' } });
    expect(wrapper.state('inputValue')).toBe('xxx');
-    wrapper
-      .find('.ant-cascader-picker-clear')
-      .at(0)
-      .simulate('click');
+    wrapper.find('.ant-cascader-picker-clear').at(0).simulate('click');
    expect(wrapper.state('inputValue')).toBe('');
  });

@ -393,24 +302,14 @@ describe('Cascader', () => {
      />,
    );
    wrapper.instance().handleChange(['zhejiang', 'hangzhou', 'xihu'], customerOptions);
-    expect(
-      wrapper
-        .find('.ant-cascader-picker-label')
-        .text()
-        .split('/').length,
-    ).toBe(3);
+    expect(wrapper.find('.ant-cascader-picker-label').text().split('/').length).toBe(3);
  });

  it('should show not found content when options.length is 0', () => {
    const customerOptions = [];
    const wrapper = mount(<Cascader options={customerOptions} />);
    wrapper.find('input').simulate('click');
-    const popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
    expect(popupWrapper).toMatchSnapshot();
  });

@ -484,12 +383,7 @@ describe('Cascader', () => {
        fieldNames={{ label: 'name', value: 'code', children: 'items' }}
      />,
    );
-    const popupWrapper = mount(
-      wrapper
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    const popupWrapper = mount(wrapper.find('Trigger').instance().getComponent());
    expect(popupWrapper.render()).toMatchSnapshot();
  });

@ -510,18 +404,9 @@ describe('Cascader', () => {
        <Cascader options={options} defaultValue={['zhejiang', 'hangzhou']} />
      </ConfigProvider>,
    );
-    wrapper
-      .find('Cascader')
-      .find('input')
-      .simulate('click');
+    wrapper.find('Cascader').find('input').simulate('click');
    expect(
-      render(
-        wrapper
-          .find('Cascader')
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
+      render(wrapper.find('Cascader').find('Trigger').instance().getComponent()),
    ).toMatchSnapshot();
  });

@ -572,17 +457,8 @@ describe('Cascader', () => {
      </ConfigProvider>,
    );

-    wrapper
-      .find('Cascader')
-      .find('input')
-      .simulate('click');
-    let popupWrapper = mount(
-      wrapper
-        .find('Cascader')
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    wrapper.find('Cascader').find('input').simulate('click');
+    let popupWrapper = mount(wrapper.find('Cascader').find('Trigger').instance().getComponent());
    popupWrapper
      .find('.ant-cascader-menu')
      .at(0)
@ -590,21 +466,9 @@ describe('Cascader', () => {
      .at(0)
      .simulate('click');
    expect(
-      render(
-        wrapper
-          .find('Cascader')
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
+      render(wrapper.find('Cascader').find('Trigger').instance().getComponent()),
    ).toMatchSnapshot();
-    popupWrapper = mount(
-      wrapper
-        .find('Cascader')
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    popupWrapper = mount(wrapper.find('Cascader').find('Trigger').instance().getComponent());
    popupWrapper
      .find('.ant-cascader-menu')
      .at(1)
@ -612,21 +476,9 @@ describe('Cascader', () => {
      .at(0)
      .simulate('click');
    expect(
-      render(
-        wrapper
-          .find('Cascader')
-          .find('Trigger')
-          .instance()
-          .getComponent(),
-      ),
+      render(wrapper.find('Cascader').find('Trigger').instance().getComponent()),
    ).toMatchSnapshot();
-    popupWrapper = mount(
-      wrapper
-        .find('Cascader')
-        .find('Trigger')
-        .instance()
-        .getComponent(),
-    );
+    popupWrapper = mount(wrapper.find('Cascader').find('Trigger').instance().getComponent());
    popupWrapper
      .find('.ant-cascader-menu')
      .at(2)
@ -635,4 +487,9 @@ describe('Cascader', () => {
      .simulate('click');
    expect(onChange).toHaveBeenCalledWith(['zhejiang', 'hangzhou', 'xihu'], expect.anything());
  });
+
+  it('defaultValue works correctly when no match options', () => {
+    const wrapper = mount(<Cascader options={options} defaultValue={['options1', 'options2']} />);
+    expect(wrapper.find('.ant-cascader-picker-label').text()).toBe('options1 / options2');
+  });
 });
--- a/components/cascader/index.tsx
+++ b/components/cascader/index.tsx
@ -283,7 +283,7 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
      (o: CascaderOptionType, level: number) => o[names.value] === unwrappedValue[level],
      { childrenKeyName: names.children },
    );
-    const label = selectedOptions.map(o => o[names.label]);
+    const label = selectedOptions.length ? selectedOptions.map(o => o[names.label]) : value;
    return displayRender(label, selectedOptions);
  }

@ -522,8 +522,10 @@ class Cascader extends React.Component<CascaderProps, CascaderState> {
        const names: FilledFieldNamesType = getFilledFieldNames(this.props);
        if (options && options.length > 0) {
          if (state.inputValue) {
-             const filteredOptions = this.generateFilteredOptions(prefixCls, renderEmpty);
-             options = isEqual(filteredOptions, this.cachedOptions) ? this.cachedOptions : filteredOptions;
+            const filteredOptions = this.generateFilteredOptions(prefixCls, renderEmpty);
+            options = isEqual(filteredOptions, this.cachedOptions)
+              ? this.cachedOptions
+              : filteredOptions;
          }
        } else {
          options = [
--- a/components/checkbox/Group.tsx
+++ b/components/checkbox/Group.tsx
@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
 import omit from 'omit.js';
 import Checkbox, { CheckboxChangeEvent } from './Checkbox';
@ -48,13 +47,6 @@ class CheckboxGroup extends React.PureComponent<CheckboxGroupProps, CheckboxGrou
    options: [],
  };

-  static propTypes = {
-    defaultValue: PropTypes.array,
-    value: PropTypes.array,
-    options: PropTypes.array.isRequired,
-    onChange: PropTypes.func,
-  };
-
  static getDerivedStateFromProps(nextProps: CheckboxGroupProps) {
    if ('value' in nextProps) {
      return {
--- a/components/config-provider/tests/snapshots/components.test.js.snap
+++ b/components/config-provider/tests/snapshots/components.test.js.snap
@ -13321,7 +13321,7 @@ exports[`ConfigProvider components Dropdown configProvider 1`] = `
    </span>
  </button>
  <button
-    class="config-btn config-dropdown-trigger config-btn-default"
+    class="config-btn config-dropdown-trigger config-btn-default config-btn-icon-only"
    type="button"
  >
    <span
@ -13361,7 +13361,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize large 1
    </span>
  </button>
  <button
-    class="config-btn config-dropdown-trigger config-btn-default config-btn-lg"
+    class="config-btn config-dropdown-trigger config-btn-default config-btn-lg config-btn-icon-only"
    type="button"
  >
    <span
@ -13401,7 +13401,7 @@ exports[`ConfigProvider components Dropdown configProvider componentSize middle
    </span>
  </button>
  <button
-    class="config-btn config-dropdown-trigger config-btn-default"
+    class="config-btn config-dropdown-trigger config-btn-default config-btn-icon-only"
    type="button"
  >
    <span
@ -13441,7 +13441,7 @@ exports[`ConfigProvider components Dropdown configProvider virtual and dropdownM
    </span>
  </button>
  <button
-    class="ant-btn ant-dropdown-trigger ant-btn-default"
+    class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
    type="button"
  >
    <span
@ -13481,7 +13481,7 @@ exports[`ConfigProvider components Dropdown normal 1`] = `
    </span>
  </button>
  <button
-    class="ant-btn ant-dropdown-trigger ant-btn-default"
+    class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
    type="button"
  >
    <span
@ -13521,7 +13521,7 @@ exports[`ConfigProvider components Dropdown prefixCls 1`] = `
    </span>
  </button>
  <button
-    class="ant-btn ant-dropdown-trigger ant-btn-default"
+    class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
    type="button"
  >
    <span
@ -16138,24 +16138,22 @@ exports[`ConfigProvider components Modal configProvider 1`] = `
          <div
            class="config-modal-footer"
          >
-            <div>
-              <button
-                class="config-btn"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="config-btn config-btn-primary"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
+            <button
+              class="config-btn"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="config-btn config-btn-primary"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
          </div>
        </div>
        <div
@ -16233,24 +16231,22 @@ exports[`ConfigProvider components Modal configProvider componentSize large 1`]
          <div
            class="config-modal-footer"
          >
-            <div>
-              <button
-                class="config-btn config-btn-lg"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="config-btn config-btn-primary config-btn-lg"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
+            <button
+              class="config-btn config-btn-lg"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="config-btn config-btn-primary config-btn-lg"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
          </div>
        </div>
        <div
@ -16328,24 +16324,22 @@ exports[`ConfigProvider components Modal configProvider componentSize middle 1`]
          <div
            class="config-modal-footer"
          >
-            <div>
-              <button
-                class="config-btn"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="config-btn config-btn-primary"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
+            <button
+              class="config-btn"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="config-btn config-btn-primary"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
          </div>
        </div>
        <div
@ -16423,24 +16417,22 @@ exports[`ConfigProvider components Modal configProvider virtual and dropdownMatc
          <div
            class="ant-modal-footer"
          >
-            <div>
-              <button
-                class="ant-btn"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
+            <button
+              class="ant-btn"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
          </div>
        </div>
        <div
@ -16518,24 +16510,22 @@ exports[`ConfigProvider components Modal normal 1`] = `
          <div
            class="ant-modal-footer"
          >
-            <div>
-              <button
-                class="ant-btn"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
+            <button
+              class="ant-btn"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
          </div>
        </div>
        <div
@ -16613,24 +16603,22 @@ exports[`ConfigProvider components Modal prefixCls 1`] = `
          <div
            class="prefix-Modal-footer"
          >
-            <div>
-              <button
-                class="ant-btn"
-                type="button"
-              >
-                <span>
-                  Cancel
-                </span>
-              </button>
-              <button
-                class="ant-btn ant-btn-primary"
-                type="button"
-              >
-                <span>
-                  OK
-                </span>
-              </button>
-            </div>
+            <button
+              class="ant-btn"
+              type="button"
+            >
+              <span>
+                Cancel
+              </span>
+            </button>
+            <button
+              class="ant-btn ant-btn-primary"
+              type="button"
+            >
+              <span>
+                OK
+              </span>
+            </button>
          </div>
        </div>
        <div
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -162,6 +162,9 @@ Added in `4.1.0`.
 .code-box-demo .ant-picker {
  margin: 0 8px 12px 0;
 }
+.ant-row-rtl .code-box-demo .ant-picker {
+  margin: 0 0 12px 8px;
+}
 </style>

 ## FAQ
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -164,6 +164,9 @@ import 'moment/locale/zh-cn';
 .code-box-demo .ant-picker {
  margin: 0 8px 12px 0;
 }
+.ant-row-rtl .code-box-demo .ant-picker {
+  margin: 0 0 12px 8px;
+}
 </style>

 ## FAQ
--- a/components/date-picker/style/index.less
+++ b/components/date-picker/style/index.less
@ -293,6 +293,7 @@
    .@{picker-prefix-cls}-panels {
      display: inline-flex;
      flex-wrap: nowrap;
+      direction: ltr;
    }

    .@{picker-prefix-cls}-panel {
--- a/components/drawer/index.tsx
+++ b/components/drawer/index.tsx
@ -136,12 +136,27 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
    }
  };

+  getOffsetStyle() {
+    const { placement, width, height } = this.props;
+    const offsetStyle: any = {};
+    if (placement === 'left' || placement === 'right') {
+      offsetStyle.width = width;
+    } else {
+      offsetStyle.height = height;
+    }
+    return offsetStyle;
+  }
+
  getRcDrawerStyle = () => {
-    const { zIndex, placement, style } = this.props;
+    const { zIndex, placement, mask, style } = this.props;
    const { push } = this.state;
+    // 当无 mask 时，将 width 应用到外层容器上
+    // 解决 https://github.com/ant-design/ant-design/issues/12401 的问题
+    const offsetStyle = mask ? {} : this.getOffsetStyle();
    return {
      zIndex,
      transform: push ? this.getPushTransform(placement) : undefined,
+      ...offsetStyle,
      ...style,
    };
  };
@ -234,18 +249,14 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS

  // render Provider for Multi-level drawer
  renderProvider = (value: Drawer) => {
-    const { prefixCls, placement, className, width, height, mask, direction, ...rest } = this.props;
-    const haveMask = mask ? '' : 'no-mask';
+    const { prefixCls, placement, className, mask, direction, visible, ...rest } = this.props;
    this.parentDrawer = value;
-    const offsetStyle: any = {};
-    if (placement === 'left' || placement === 'right') {
-      offsetStyle.width = width;
-    } else {
-      offsetStyle.height = height;
-    }
-    const drawerClassName = classNames(className, haveMask, {
+    const drawerClassName = classNames(className, {
+      'no-mask': !mask,
      [`${prefixCls}-rtl`]: direction === 'rtl',
    });
+    const offsetStyle = mask ? this.getOffsetStyle() : {};
+
    return (
      <DrawerContext.Provider value={this}>
        <RcDrawer
@ -271,10 +282,12 @@ class Drawer extends React.Component<DrawerProps & ConfigConsumerProps, IDrawerS
            'csp',
            'pageHeader',
            'autoInsertSpaceInButton',
+            'width',
+            'height',
          ])}
          {...offsetStyle}
          prefixCls={prefixCls}
-          open={this.props.visible}
+          open={visible}
          showMask={mask}
          placement={placement}
          style={this.getRcDrawerStyle()}
--- a/components/drawer/style/drawer.less
+++ b/components/drawer/style/drawer.less
@ -19,7 +19,10 @@

  &-content-wrapper {
    position: absolute;
+    width: 100%;
+    height: 100%;
  }
+
  .@{drawer-prefix-cls}-content {
    width: 100%;
    height: 100%;
@ -37,13 +40,6 @@
      width: 100%;
      transition: transform @animation-duration-slow @ease-base-out;
    }
-    &.@{drawer-prefix-cls}-open.no-mask {
-      height: 0%;
-
-      .@{drawer-prefix-cls}-content-wrapper {
-        height: 100vh;
-      }
-    }
  }

  &-left {
@ -95,13 +91,6 @@
      height: 100%;
      transition: transform @animation-duration-slow @ease-base-out;
    }
-    &.@{drawer-prefix-cls}-open.no-mask {
-      width: 0%;
-
-      .@{drawer-prefix-cls}-content-wrapper {
-        width: 100vw;
-      }
-    }
  }

  &-top {
@ -168,7 +157,7 @@
    z-index: @zindex-popup-close;
    display: block;
    padding: @drawer-header-close-padding;
-    color: @text-color-secondary;
+    color: @modal-close-color;
    font-weight: 700;
    font-size: @font-size-lg;
    font-style: normal;
--- a/components/dropdown/tests/snapshots/demo.test.js.snap
+++ b/components/dropdown/tests/snapshots/demo.test.js.snap
@ -53,7 +53,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
      </span>
    </button>
    <button
-      class="ant-btn ant-dropdown-trigger ant-btn-default"
+      class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
      type="button"
    >
      <span
@ -90,7 +90,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
      </span>
    </button>
    <button
-      class="ant-btn ant-dropdown-trigger ant-btn-default"
+      class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
      type="button"
    >
      <span
@ -128,7 +128,7 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
      </span>
    </button>
    <button
-      class="ant-btn ant-dropdown-trigger ant-btn-default"
+      class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
      disabled=""
      type="button"
    >
@ -166,28 +166,32 @@ exports[`renders ./components/dropdown/demo/dropdown-button.md correctly 1`] = `
      </span>
    </button>
    <button
-      class="ant-btn ant-dropdown-trigger ant-btn-default"
+      class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only ant-btn-loading"
      type="button"
    >
      <span
-        aria-label="ellipsis"
-        class="anticon anticon-ellipsis"
-        role="img"
+        class="ant-btn-loading-icon"
      >
-        <svg
-          aria-hidden="true"
-          class=""
-          data-icon="ellipsis"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
+        <span
+          aria-label="loading"
+          class="anticon anticon-loading"
+          role="img"
        >
-          <path
-            d="M176 511a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0zm280 0a56 56 0 10112 0 56 56 0 10-112 0z"
-          />
-        </svg>
+          <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>
      </span>
    </button>
  </div>
--- a/components/dropdown/tests/snapshots/dropdown-button.test.js.snap
+++ b/components/dropdown/tests/snapshots/dropdown-button.test.js.snap
@ -15,7 +15,7 @@ exports[`DropdownButton rtl render component should be rendered correctly in RTL
    type="button"
  />
  <button
-    class="ant-btn ant-dropdown-trigger ant-dropdown-rtl ant-btn-default ant-btn-rtl"
+    class="ant-btn ant-dropdown-trigger ant-dropdown-rtl ant-btn-default ant-btn-icon-only ant-btn-rtl"
    type="button"
  >
    <span
@ -51,7 +51,7 @@ exports[`DropdownButton should support href like Button 1`] = `
    href="https://ant.design"
  />
  <button
-    class="ant-btn ant-dropdown-trigger ant-btn-default"
+    class="ant-btn ant-dropdown-trigger ant-btn-default ant-btn-icon-only"
    type="button"
  >
    <span
--- a/components/dropdown/demo/dropdown-button.md
+++ b/components/dropdown/demo/dropdown-button.md
@ -58,7 +58,7 @@ ReactDOM.render(
        <Tooltip title="tooltip" key="leftButton">
          {leftButton}
        </Tooltip>,
-        rightButton,
+        React.cloneElement(rightButton, { loading: true }),
      ]}
    >
      With Tooltip
--- a/components/dropdown/demo/placement.md
+++ b/components/dropdown/demo/placement.md
@ -67,4 +67,9 @@ ReactDOM.render(
  margin-right: 8px;
  margin-bottom: 8px;
 }
+.ant-row-rtl #components-dropdown-demo-placement .ant-btn {
+  margin-right: 0;
+  margin-bottom: 8px;
+  margin-left: 8px;
+}
 ```
--- a/components/dropdown/dropdown-button.tsx
+++ b/components/dropdown/dropdown-button.tsx
@ -87,7 +87,7 @@ export default class DropdownButton extends React.Component<DropdownButtonProps,
      </Button>
    );

-    const rightButton = <Button type={type}>{icon}</Button>;
+    const rightButton = <Button type={type} icon={icon} />;

    const [leftButtonToRender, rightButtonToRender] = buttonsRender!([leftButton, rightButton]);

--- a/components/dropdown/style/index.less
+++ b/components/dropdown/style/index.less
@ -100,8 +100,8 @@
      cursor: pointer;
      transition: all 0.3s;

-      > .anticon:first-child,
-      > span > .anticon:first-child {
+      > .@{iconfont-css-prefix}:first-child,
+      > span > .@{iconfont-css-prefix}:first-child {
        min-width: 12px;
        margin-right: 8px;
        font-size: @font-size-sm;
@ -251,10 +251,12 @@
 .@{dropdown-prefix-cls}-button {
  white-space: nowrap;

-  &.@{ant-prefix}-btn-group > .@{ant-prefix}-btn:last-child:not(:first-child) {
+  &.@{ant-prefix}-btn-group
+    > .@{ant-prefix}-btn:last-child:not(:first-child):not(.@{ant-prefix}-btn-icon-only) {
    padding-right: @padding-xs;
    padding-left: @padding-xs;
  }
+
  .@{iconfont-css-prefix}.@{iconfont-css-prefix}-down {
    .iconfont-size-under-12px(10px);
  }
--- a/components/icon/demo/basic.md
+++ b/components/icon/demo/basic.md
@ -40,4 +40,8 @@ ReactDOM.render(
  margin-right: 6px;
  font-size: 24px;
 }
+.ant-row-rtl .icons-list > .anticon {
+  margin-right: 0;
+  margin-left: 6px;
+}
 </style>
--- a/components/icon/demo/custom.md
+++ b/components/icon/demo/custom.md
@ -84,4 +84,8 @@ ReactDOM.render(
 .custom-icons-list > .anticon {
  margin-right: 6px;
 }
+.ant-row-rtl .custom-icons-list > .anticon {
+  margin-right: 0;
+  margin-left: 6px;
+}
 ```
--- a/components/input-number/demo/size.md
+++ b/components/input-number/demo/size.md
@ -34,4 +34,8 @@ ReactDOM.render(
 .code-box-demo .ant-input-number {
  margin-right: 10px;
 }
+.ant-row-rtl .code-box-demo .ant-input-number {
+  margin-right: 0;
+  margin-left: 10px;
+}
 ```
--- a/components/locale-provider/tests/snapshots/index.test.js.snap
+++ b/components/locale-provider/tests/snapshots/index.test.js.snap
--- a/components/locale-provider/tests/index.test.js
+++ b/components/locale-provider/tests/index.test.js
@ -220,7 +220,7 @@ describe('Locale Provider', () => {
        '.ant-btn:not(.ant-btn-primary) span',
      )[0].innerHTML;
      let okButtonText = currentConfirmNode.querySelectorAll('.ant-btn-primary span')[0].innerHTML;
-      if (locale.locale === 'zh-cn') {
+      if (locale.locale.indexOf('zh-') === 0) {
        cancelButtonText = cancelButtonText.replace(' ', '');
        okButtonText = okButtonText.replace(' ', '');
      }
--- a/components/locale/zh_TW.tsx
+++ b/components/locale/zh_TW.tsx
@ -1,30 +1,43 @@
+/* eslint-disable no-template-curly-in-string */
 import Pagination from 'rc-pagination/lib/locale/zh_TW';
 import DatePicker from '../date-picker/locale/zh_TW';
 import TimePicker from '../time-picker/locale/zh_TW';
 import Calendar from '../calendar/locale/zh_TW';
 import { Locale } from '../locale-provider';

+const typeTemplate = '${label}不是一個有效的${type}';
+
 const localeValues: Locale = {
  locale: 'zh-tw',
  Pagination,
  DatePicker,
  TimePicker,
  Calendar,
+  global: {
+    placeholder: '請選擇',
+  },
  Table: {
    filterTitle: '篩選器',
-    filterConfirm: '確 定',
-    filterReset: '重 置',
+    filterConfirm: '確定',
+    filterReset: '重置',
    selectAll: '全部選取',
    selectInvert: '反向選取',
+    selectionAll: '全選所有',
+    sortTitle: '排序',
+    expand: '展開行',
+    collapse: '關閉行',
+    triggerDesc: '點擊降序',
+    triggerAsc: '點擊升序',
+    cancelSort: '取消排序',
  },
  Modal: {
-    okText: '確 定',
-    cancelText: '取 消',
-    justOkText: 'OK',
+    okText: '確定',
+    cancelText: '取消',
+    justOkText: '知道了',
  },
  Popconfirm: {
-    okText: '確 定',
-    cancelText: '取 消',
+    okText: '確定',
+    cancelText: '取消',
  },
  Transfer: {
    searchPlaceholder: '搜尋資料',
@ -41,9 +54,67 @@ const localeValues: Locale = {
  Empty: {
    description: '無此資料',
  },
+  Icon: {
+    icon: '圖標',
+  },
+  Text: {
+    edit: '編輯',
+    copy: '複製',
+    copied: '複製成功',
+    expand: '展開',
+  },
  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}',
+        range: '${label}須在${min}-${max}之間',
+      },
+      array: {
+        len: '須為${len}個${label}',
+        min: '最少${min}個${label}',
+        max: '最多${max}個${label}',
+        range: '${label}數量須在${min}-${max}之間',
+      },
+      pattern: {
+        mismatch: '${label}與模式不匹配${pattern}',
+      },
+    },
+  },
 };

 export default localeValues;
--- a/components/menu/style/index.less
+++ b/components/menu/style/index.less
@ -11,6 +11,7 @@
  margin-bottom: 0;
  padding-left: 0; // Override default ul/ol
  color: @menu-item-color;
+  font-size: @menu-item-font-size;
  line-height: 0; // Fix display inline-block gap
  list-style: none;
  background: @menu-bg;
@ -34,7 +35,7 @@
    height: @menu-item-group-height;
    padding: 8px 16px;
    color: @menu-item-group-title-color;
-    font-size: @font-size-base;
+    font-size: @menu-item-group-title-font-size;
    line-height: @menu-item-group-height;
    transition: all 0.3s;
  }
@ -177,7 +178,7 @@
      background 0.3s @ease-in-out, padding 0.15s @ease-in-out;
    .@{iconfont-css-prefix} {
      min-width: 14px;
-      margin-right: @menu-item-icon-margin-right;
+      margin-right: @menu-icon-margin-right;
      font-size: @menu-icon-size;
      transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
      + span {
@ -399,7 +400,6 @@
      margin-bottom: @menu-item-vertical-margin;
      padding: 0 16px;
      overflow: hidden;
-      font-size: @menu-item-font-size;
      line-height: @menu-item-height;
      text-overflow: ellipsis;
    }
--- a/components/menu/style/rtl.less
+++ b/components/menu/style/rtl.less
@ -22,12 +22,10 @@
    }
  }

-  &-dark {
-    .@{menu-prefix-cls}-inline,
-    .@{menu-prefix-cls}-vertical {
-      .@{menu-prefix-cls}-rtl& {
-        border-left: none;
-      }
+  &-dark&-inline,
+  &-dark&-vertical {
+    .@{menu-prefix-cls}-rtl& {
+      border-left: none;
    }
  }

@ -152,6 +150,7 @@
  }

  &-sub&-inline {
+    border: 0;
    & .@{menu-prefix-cls}-item-group-title {
      .@{menu-prefix-cls}-rtl& {
        padding-right: 32px;
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@ -150,7 +150,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
  renderFooter = (locale: ModalLocale) => {
    const { okText, okType, cancelText, confirmLoading } = this.props;
    return (
-      <div>
+      <>
        <Button onClick={this.handleCancel} {...this.props.cancelButtonProps}>
          {cancelText || locale.cancelText}
        </Button>
@ -162,7 +162,7 @@ export default class Modal extends React.Component<ModalProps, {}> {
        >
          {okText || locale.okText}
        </Button>
-      </div>
+      </>
    );
  };

--- a/components/modal/tests/snapshots/Modal.test.js.snap
+++ b/components/modal/tests/snapshots/Modal.test.js.snap
@ -66,24 +66,22 @@ exports[`Modal render correctly 1`] = `
              <div
                class="ant-modal-footer"
              >
-                <div>
-                  <button
-                    class="ant-btn"
-                    type="button"
-                  >
-                    <span>
-                      Cancel
-                    </span>
-                  </button>
-                  <button
-                    class="ant-btn ant-btn-primary"
-                    type="button"
-                  >
-                    <span>
-                      OK
-                    </span>
-                  </button>
-                </div>
+                <button
+                  class="ant-btn"
+                  type="button"
+                >
+                  <span>
+                    Cancel
+                  </span>
+                </button>
+                <button
+                  class="ant-btn ant-btn-primary"
+                  type="button"
+                >
+                  <span>
+                    OK
+                  </span>
+                </button>
              </div>
            </div>
            <div
@ -222,24 +220,22 @@ exports[`Modal support closeIcon 1`] = `
        <div
          class="ant-modal-footer"
        >
-          <div>
-            <button
-              class="ant-btn"
-              type="button"
-            >
-              <span>
-                Cancel
-              </span>
-            </button>
-            <button
-              class="ant-btn ant-btn-primary"
-              type="button"
-            >
-              <span>
-                OK
-              </span>
-            </button>
-          </div>
+          <button
+            class="ant-btn"
+            type="button"
+          >
+            <span>
+              Cancel
+            </span>
+          </button>
+          <button
+            class="ant-btn ant-btn-primary"
+            type="button"
+          >
+            <span>
+              OK
+            </span>
+          </button>
        </div>
      </div>
      <div
--- a/components/modal/style/modal.less
+++ b/components/modal/style/modal.less
@ -48,7 +48,7 @@
    right: 0;
    z-index: @zindex-popup-close;
    padding: 0;
-    color: @text-color-secondary;
+    color: @modal-close-color;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
--- a/components/select/demo/size.md
+++ b/components/select/demo/size.md
@ -85,6 +85,10 @@ ReactDOM.render(<SelectSizesDemo />, mountNode);
  margin: 0 8px 10px 0;
 }

+.ant-row-rtl .code-box-demo .ant-select {
+  margin: 0 0 10px 8px;
+}
+
 #components-select-demo-search-box .code-box-demo .ant-select {
  margin: 0;
 }
--- a/components/style/themes/compact.less
+++ b/components/style/themes/compact.less
@ -59,7 +59,7 @@
@menu-item-height: 32px;
@menu-item-vertical-margin: 0px;
@menu-item-boundary-margin: 0px;
-@menu-item-icon-margin-right: 8px;
+@menu-icon-margin-right: 8px;

 // Checkbox
@checkbox-size: 14px;
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@ -492,6 +492,7 @@
@modal-header-close-size: 56px;
@modal-content-bg: @component-background;
@modal-heading-color: @heading-color;
+@modal-close-color: @text-color-secondary;
@modal-footer-bg: transparent;
@modal-footer-border-color-split: @border-color-split;
@modal-footer-padding-vertical: 10px;
@ -523,15 +524,15 @@
@menu-item-active-danger-bg: @red-1;
@menu-item-active-border-width: 3px;
@menu-item-group-title-color: @text-color-secondary;
-@menu-icon-size: @font-size-base;
-@menu-icon-size-lg: @font-size-lg;
-
@menu-item-vertical-margin: 4px;
@menu-item-font-size: @font-size-base;
@menu-item-boundary-margin: 8px;
@menu-item-padding: 0 20px;
@menu-horizontal-line-height: 46px;
-@menu-item-icon-margin-right: 10px;
+@menu-icon-margin-right: 10px;
+@menu-icon-size: @menu-item-font-size;
+@menu-icon-size-lg: @font-size-lg;
+@menu-item-group-title-font-size: @menu-item-font-size;

 // dark theme
@menu-dark-color: @text-color-secondary-dark;
--- a/components/time-picker/index.en-US.md
+++ b/components/time-picker/index.en-US.md
@ -68,7 +68,10 @@ Same props from [RangePicker](/components/date-picker/#RangePicker) of DatePicke
 | -------- | ------------------------ | ------- | ------- | ------- |
 | order    | Order start and end time | boolean | true    | 4.1.0   |

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

 ## FAQ

--- a/components/time-picker/index.zh-CN.md
+++ b/components/time-picker/index.zh-CN.md
@ -68,7 +68,10 @@ import moment from 'moment';
 | ----- | -------------------- | ------- | ------ | ----- |
 | order | 始末时间是否自动排序 | boolean | true   | 4.1.0 |

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

 ## FAQ

--- a/components/typography/style/rtl.less
+++ b/components/typography/style/rtl.less
@ -18,6 +18,12 @@
    }
  }

+  &-expand {
+    .@{typography-prefix-cls}-rtl & {
+      float: left;
+    }
+  }
+
  // Text input area
  &-edit-content {
    div& {
--- a/docs/react/faq.en-US.md
+++ b/docs/react/faq.en-US.md
@ -60,6 +60,10 @@ Please refer to [Replace Moment.js](/docs/react/replace-moment).

 The `defaultXxxx` (like `defaultValue`) of `Input`/`Select`(etc...) only works on the first render. It is a specification of React. Please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).

+### Why modify props in mutable way not trigger component update?
+
+antd use shallow compare of props to optimize performance. You should always pass new object when state update. Please ref [React's document](https://reactjs.org/docs/thinking-in-react.html)
+
 ### I set the `value` of `Input`/`Select`(etc.), and then it cannot be changed by user's action.

 Try `defaultValue` or `onChange` to change `value`, and please read [React's documentation](https://facebook.github.io/react/docs/forms.html#controlled-components).
--- a/docs/react/faq.zh-CN.md
+++ b/docs/react/faq.zh-CN.md
@ -60,6 +60,10 @@ import { Menu, Breadcrumb, Icon } from 'antd';

 `Input`/`Select` 等的 `defaultXxxx`（例如 `defaultValue`）只有在第一次渲染的时候有效，这是 React 的规范，请阅读 [React 的文档](https://reactjs.org/docs/forms.html#controlled-components)。

+### 为什么修改组件传入的对象或数组属性组件不会更新？
+
+antd 内部会对 props 进行浅比较实现性能优化。当状态变更，你总是应该传递一个新的对象。具体请参考[React 的文档](https://reactjs.org/docs/thinking-in-react.html)
+
 ### 当我设置了 `Input`/`Select` 等的 `value` 时它就无法修改了。

 尝试使用 `defaultValue` 或 `onChange` 来改变 `value`，请参考 [React 的文档](https://reactjs.org/docs/forms.html#controlled-components)。
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "antd",
-  "version": "4.2.0",
+  "version": "4.2.2",
  "description": "An enterprise-class UI design language and React components implementation",
  "keywords": [
    "ant",
@ -50,9 +50,12 @@
    "build": "npm run compile && npm run dist",
    "bundlesize": "bundlesize",
    "check-commit": "node ./scripts/check-commit",
+    "prestart": "npm run version",
    "precompile": "npm run version",
    "pretest": "npm run version",
    "predist": "npm run version",
+    "presite": "npm run version",
+    "color-less": "node ./scripts/generate-color-less",
    "compile": "antd-tools run compile",
    "changelog": "node ./scripts/print-changelog",
    "predeploy": "antd-tools run clean && npm run site && cp netlify.toml CNAME _site && cp -r .circleci/ .github/ _site && npm run site:test",
@ -73,14 +76,13 @@
    "pre-publish": "npm run check-commit && npm run test-all",
    "prettier": "prettier -c --write '**/*'",
    "pretty-quick": "pretty-quick",
-    "pub": "antd-tools run pub",
-    "postinstall": "npm run version",
+    "pub": "npm run version && antd-tools run pub",
    "prepublishOnly": "antd-tools run guard",
-    "site": "cross-env NODE_ICU_DATA=node_modules/full-icu concurrently \"bisheng build --ssr -c ./site/bisheng.config.js\" \"node ./scripts/generateColorLess.js\"",
+    "site": "cross-env NODE_ICU_DATA=node_modules/full-icu concurrently \"bisheng build --ssr -c ./site/bisheng.config.js\" \"npm run color-less\"",
    "sort": "npx sort-package-json",
    "sort-api": "antd-tools run sort-api-table",
-    "start": "rimraf _site && mkdir _site && cross-env NODE_ENV=development concurrently \"node ./scripts/generateColorLess.js\" \"bisheng start -c ./site/bisheng.config.js\"",
-    "start:preact": "node ./scripts/generateColorLess.js && cross-env NODE_ENV=development REACT_ENV=preact bisheng start -c ./site/bisheng.config.js",
+    "start": "antd-tools run clean && cross-env NODE_ENV=development concurrently \"npm run color-less\" \"bisheng start -c ./site/bisheng.config.js\"",
+    "start:preact": "antd-tools run clean && cross-env NODE_ENV=development REACT_ENV=preact concurrently \"npm run color-less\" \"bisheng start -c ./site/bisheng.config.js\"",
    "test": "jest --config .jest.js --no-cache",
    "test:update": "jest --config .jest.js --no-cache --update-snapshot",
    "test-all": "./scripts/test-all.sh",
@ -103,7 +105,7 @@
  "dependencies": {
    "@ant-design/css-animation": "^1.7.2",
    "@ant-design/icons": "^4.1.0",
-    "@ant-design/react-slick": "~0.25.5",
+    "@ant-design/react-slick": "~0.26.1",
    "array-tree-filter": "^2.1.0",
    "classnames": "~2.2.6",
    "copy-to-clipboard": "^3.2.0",
--- a/scripts/generate-color-less.js
+++ b/scripts/generate-color-less.js
--- a/site/theme/static/icons.less
+++ b/site/theme/static/icons.less
@ -1,6 +1,7 @@
 ul.anticons-list {
  margin: 10px 0;
  overflow: hidden;
+  direction: ltr;
  list-style: none;
  li {
    position: relative;
@ -17,6 +18,10 @@ ul.anticons-list {
    border-radius: 4px;
    cursor: pointer;
    transition: color 0.3s ease-in-out, background-color 0.3s ease-in-out;
+    .rtl & {
+      margin: 3px 0;
+      padding: 10px 0 0;
+    }
    .anticon {
      margin: 12px 0 8px;
      font-size: 36px;