docs: 4.3.4 changelog (#24981 )

* docs: 4.3.4 changelog * chore: changelog format * docs: add missing changelogs of 4.3.4 * docs: reorder 4.3.4 changelog * docs: use flag emoji on 4.3.4 i18n changelog * docs: reorder 4.3.4 changelog * docs: reorder 4.3.4 changelog * docs: version 4.3.4 * docs: Update CHANGELOG.zh-CN.md Co-authored-by: 偏右 <afc163@gmail.com> * docs: fix changelog 4.3.4 Co-authored-by: 偏右 <afc163@gmail.com>
fix: Form.validateTrigger not work (#24979 )
2026-02-17 06:42:28 +08:00 · 2020-06-14 21:45:47 +08:00 · 2020-06-14 14:15:17 +08:00 · 2020-06-13 02:29:20 +08:00 · 2020-06-12 23:32:06 +08:00 · 2020-06-12 23:22:45 +08:00
310 changed files with 4271 additions and 1857 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -50,19 +50,29 @@ module.exports = {
        'react/no-multi-comp': 0,
        'jsx-a11y/href-no-hash': 0,
        'import/no-extraneous-dependencies': 0,
-        'import/no-unresolved': 0,
        'jsx-a11y/control-has-associated-label': 0,
      },
    },
  ],
  rules: {
-    camelcase: 0,
    'react/jsx-one-expression-per-line': 0,
    'react/prop-types': 0,
    'react/forbid-prop-types': 0,
    'react/jsx-indent': 0,
    'react/jsx-wrap-multilines': ['error', { declaration: false, assignment: false }],
+    'react/jsx-filename-extension': 0,
+    'react/state-in-constructor': 0,
+    'react/jsx-props-no-spreading': 0,
+    'react/destructuring-assignment': 0, // TODO: remove later
+    'react/require-default-props': 0,
+    'react/sort-comp': 0,
+    'react/display-name': 0,
+    'react/static-property-placement': 0,
+    'react/no-find-dom-node': 0,
+    'react-hooks/rules-of-hooks': 2, // Checks rules of Hooks
+
    'import/extensions': 0,
+    'import/no-cycle': 0,
    'import/no-extraneous-dependencies': [
      'error',
      {
@@ -82,38 +92,26 @@ module.exports = {
    'jsx-a11y/click-events-have-key-events': 0,
    'jsx-a11y/anchor-is-valid': 0,
    'jsx-a11y/no-noninteractive-element-interactions': 0,
-    'comma-dangle': ['error', 'always-multiline'],
-    'react/jsx-filename-extension': 0,
-    'react/state-in-constructor': 0,
-    'react/jsx-props-no-spreading': 0,
-    'prefer-destructuring': 0, // TODO: remove later
-    'consistent-return': 0, // TODO: remove later
-    'no-return-assign': 0, // TODO: remove later
-    'no-param-reassign': 0, // TODO: remove later
-    'react/destructuring-assignment': 0, // TODO: remove later
-    'react/no-did-update-set-state': 0, // TODO: remove later
-    'react/require-default-props': 0,
-    'react/default-props-match-prop-types': 0,
-    'import/no-cycle': 0,
-    'react/no-find-dom-node': 0,
-    'no-underscore-dangle': 0,
-    'react/sort-comp': 0,
    // label-has-for has been deprecated
    // https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/label-has-for.md
    'jsx-a11y/label-has-for': 0,
+
+    'comma-dangle': ['error', 'always-multiline'],
+    'consistent-return': 0, // TODO: remove later
+    'no-param-reassign': 0, // TODO: remove later
+    'no-underscore-dangle': 0,
    // for (let i = 0; i < len; i++)
    'no-plusplus': 0,
    // https://eslint.org/docs/rules/no-continue
    // labeledLoop is conflicted with `eslint . --fix`
    'no-continue': 0,
-    'react/display-name': 0,
    // ban this for Number.isNaN needs polyfill
    'no-restricted-globals': 0,
    'max-classes-per-file': 0,
-    'react/static-property-placement': 0,
+
    'jest/no-test-callback': 0,
    'jest/expect-expect': 0,
-    'react-hooks/rules-of-hooks': 2, // Checks rules of Hooks
+
    'unicorn/better-regex': 2,
    'unicorn/prefer-trim-start-end': 2,
    'unicorn/expiring-todo-comments': 2,
--- a/.jest.js
+++ b/.jest.js
@@ -25,6 +25,7 @@ module.exports = {
    '^react-dnd-touch-backend$': 'react-dnd-touch-backend/dist/cjs',
    '^react-dnd-test-backend$': 'react-dnd-test-backend/dist/cjs',
    '^react-dnd-test-utils$': 'react-dnd-test-utils/dist/cjs',
+    '\\.(css|less)$': 'identity-obj-proxy',
  },
  testPathIgnorePatterns: ['/node_modules/', 'dekko', 'node', 'image.test.js'],
  transform: {
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,68 @@ timeline: true

 ---

+## 4.3.4
+
+`2020-06-14`
+
+- Form
+  - 🐞 Fix `validateTrigger` not works on Form. [#24979](https://github.com/ant-design/ant-design/pull/24979)
+  - 🐞 Fix Form.Item still replace component `id` when `id` configured. [#24929](https://github.com/ant-design/ant-design/pull/24929)
+  - 🐞 Fix Form.List error message display not correct when nested with `noStyle`. [#24867](https://github.com/ant-design/ant-design/pull/24867)
+- Table
+  - 🐞 Fix Table `shouldCellUpdate` missing `prevRecord` param. [#24963](https://github.com/ant-design/ant-design/pull/24963)
+  - 🐞 Fix Table's filter dropdown's display value doesn't sync with controlled `filteredValue`. [#24952](https://github.com/ant-design/ant-design/pull/24952)
+  - 🐞 Fix Table `onChange` get wrong state with multiple sorter operation. [#24852](https://github.com/ant-design/ant-design/pull/24852)
+- 🐞 Fix Modal `confirm()` has no default icon. [#24956](https://github.com/ant-design/ant-design/pull/24956)
+- 🐞 Fix List `grid` not working in React.Fragment or wrapped List.Item. [#24955](https://github.com/ant-design/ant-design/pull/24955)
+- 🐞 Fix Avatar fallback to children when loading image with error. [#24944](https://github.com/ant-design/ant-design/pull/24944) [@sosohime](https://github.com/sosohime)
+- 🐞 Fix Drawer doesn't omit prop `getTargetContainer`. [#24938](https://github.com/ant-design/ant-design/pull/24938)
+- 🐞 Fix Tabs dropdown clip text when tab title too long. [#24928](https://github.com/ant-design/ant-design/pull/24928)
+- 🐞 Fix Carousel under Tabs shaking when tab switch. [#24873](https://github.com/ant-design/ant-design/pull/24873)
+- 🐞 Fix Transfer package size will increase if tree shaking is disabled. [#24847](https://github.com/ant-design/ant-design/pull/24847) [@DavidSichau](https://github.com/DavidSichau)
+- 💄 Add `@rate-star-hover-scale` to control Rate scale when cursor hover. [#24917](https://github.com/ant-design/ant-design/pull/24917)
+- 💄 Add `@divider-orientation-margin` less variable to control Divider's left margin when `orientation` is set. [#24877](https://github.com/ant-design/ant-design/pull/24877)
+- 🌐 Localization
+  - 🇫🇷 Improve fr_FR i18n. [#24962](https://github.com/ant-design/ant-design/pull/24962) [@sharkyze](https://github.com/sharkyze)
+- TypeScript
+  - 🛠 Export Select `OptionProps` interface. [#24870](https://github.com/ant-design/ant-design/pull/24870) [@nitinknolder](https://github.com/nitinknolder)
+  - 🛠 Export Card `CardInterface` interface. [#24866](https://github.com/ant-design/ant-design/pull/24866) [@THPubs](https://github.com/THPubs)
+  - 🛠 Remove `emptyText` from Table `TableProps`. [#24948](https://github.com/ant-design/ant-design/pull/24948) [@hehex9](https://github.com/hehex9)
+  - 🛠 Add `patch` type on Upload `method` prop. [#24936](https://github.com/ant-design/ant-design/pull/24936) [@miclle](https://github.com/miclle)
+
+## 4.3.3
+
+`2020-06-07`
+
+- 🐞 Fix Drawer cannot open. [#24802](https://github.com/ant-design/ant-design/pull/24802)
+- 🐞 Fix Menu.SubMenu cannot scroll. [#24806](https://github.com/ant-design/ant-design/pull/24806)
+
+## 4.3.2
+
+`2020-06-06`
+
+- 🐞 Fix Tag.CheckableTag don't support `onClick`. [#24743](https://github.com/ant-design/ant-design/pull/24743)
+- 🐞 Fix Drawer support set `getPopupContainer` and `getPrefixCls` by ConfigProvider. [#24727](https://github.com/ant-design/ant-design/pull/24727)
+- 🐞 Fix Button `loading.delay` repeat trigger when parent compoent re-render. [#24713](https://github.com/ant-design/ant-design/pull/24713)
+- 🐞 Fix Dropdown menu link color when has `icon`. [#24707](https://github.com/ant-design/ant-design/pull/24707) [#24702](https://github.com/ant-design/ant-design/pull/24702)
+- Select
+  - 🐞 Fix Select virtual scroll display abnormally in compact mode. [#24706](https://github.com/ant-design/ant-design/pull/24706)
+  - ⚡️ Optimize Select multiple mode performance. [#24785](https://github.com/ant-design/ant-design/pull/24785) [@Kermit-Xuan](https://github.com/Kermit-Xuan)
+- 🐞 Fix Calendar trigger `onPanelChange` even when in the same panel. [#24695](https://github.com/ant-design/ant-design/pull/24695)
+- 🐞 Fix Input component height issue in IE11. [#24673](https://github.com/ant-design/ant-design/pull/24673) [@xiaosongxiaosong](https://github.com/xiaosongxiaosong)
+- 🐞 Fix Radio typescript error typo. [#24693](https://github.com/ant-design/ant-design/pull/24693) [@hengkx](https://github.com/hengkx)
+- 🐞 Fix Statistic don't work with Tooltip. [#24782](https://github.com/ant-design/ant-design/pull/24782)
+- 🐞 Fix TimePicker.RangePicker `bordered={false}` not working when has `className`. [#24781](https://github.com/ant-design/ant-design/pull/24781)
+- 🐞 Fix List cannot trigger `onChange` in pagination. [#24514](https://github.com/ant-design/ant-design/pull/24514)
+- 🌐 Localization
+  - 🇮🇱 Add Hebrew localisations for Form. [#24716](https://github.com/ant-design/ant-design/pull/24716) [@israelKusayev](https://github.com/israelKusayev)
+  - 🇰🇷 Add ko_KR localizations for Form. [#24783](https://github.com/ant-design/ant-design/pull/24783) [@Jaewoook](https://github.com/Jaewoook)
+- 💄 Add less variable `@table-font-size`, `@table-font-size-md` and `@table-font-size-sm` to customize the size of Table text. [#24714](https://github.com/ant-design/ant-design/pull/24714) [@morenyang](https://github.com/morenyang)
+- RTL
+  - 💄 Optimize Tabs dropdown style in RTL. [#24715](https://github.com/ant-design/ant-design/pull/24715)
+  - 💄 Add `Modal.method()` RTL supports only use hooks. [#24682](https://github.com/ant-design/ant-design/pull/24682)
+  - 💄 Fix Badge offset in RTL. [#24724](https://github.com/ant-design/ant-design/pull/24724)
+
 ## 4.3.1

 `2020-06-02`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,68 @@ timeline: true

 ---

+## 4.3.4
+
+`2020-06-14`
+
+- Form
+  - 🐞 修复 Form 中配置 `validateTrigger` 无效的问题。[#24979](https://github.com/ant-design/ant-design/pull/24979)
+  - 🐞 修复 Form.Item 在组件设置 `id` 时仍然会替换它的问题。[#24929](https://github.com/ant-design/ant-design/pull/24929)
+  - 🐞 修复 Form.List 嵌套使用 `noStyle` 时，错误信息展示混乱的问题。[#24867](https://github.com/ant-design/ant-design/pull/24867)
+- Table
+  - 🐞 修复 Table 的 `shouldCellUpdate` 缺少 `prevRecord` 参数的问题。[#24963](https://github.com/ant-design/ant-design/pull/24963)
+  - 🐞 修复 Table 受控状态下列的过滤菜单显示的值和 `filteredValue` 不同步的问题。[#24952](https://github.com/ant-design/ant-design/pull/24952)
+  - 🐞 修复 Table 在多列排序时 `onChange` 获得错误排序状态的问题。[#24852](https://github.com/ant-design/ant-design/pull/24852)
+- 🐞 修复 Modal 缺少 `confirm()` 默认图标。[#24956](https://github.com/ant-design/ant-design/pull/24956)
+- 🐞 修复 List `grid` 属性在 React.Framgment 或者封装了的 List.Item 上失效的问题。[#24955](https://github.com/ant-design/ant-design/pull/24955)
+- 🐞 修复 Avatar 图片加载错误的显示问题。[#24944](https://github.com/ant-design/ant-design/pull/24944) [@sosohime](https://github.com/sosohime)
+- 🐞 修复 Drawer `getTargetContainer` 属性没有被忽略的问题。[#24938](https://github.com/ant-design/ant-design/pull/24938)
+- 🐞 修复 Tabs 下拉框标题过长时被截断的问题。[#24928](https://github.com/ant-design/ant-design/pull/24928)
+- 🐞 修复 Carousel 在 Tabs 下切换时会跳跃的问题。[#24873](https://github.com/ant-design/ant-design/pull/24873)
+- 🐞 修复 Transfer 在关闭 tree shaking 后打包尺寸增加的问题。[#24847](https://github.com/ant-design/ant-design/pull/24847) [@DavidSichau](https://github.com/DavidSichau)
+- 💄 新增 `@rate-star-hover-scale` 控制 Rate 鼠标悬浮放大比例。[#24917](https://github.com/ant-design/ant-design/pull/24917)
+- 💄 新增 `@divider-orientation-margin` less 变量，以控制 Divider 设置了 `orientation` 时的左侧距离。[#24877](https://github.com/ant-design/ant-design/pull/24877)
+- 🌐 Localization
+  - 🇫🇷 改进 fr_FR 语言包。[#24962](https://github.com/ant-design/ant-design/pull/24962) [@sharkyze](https://github.com/sharkyze)
+- TypeScript
+  - 🛠 导出 Select 的 `OptionProps` 接口。[#24870](https://github.com/ant-design/ant-design/pull/24870) [@nitinknolder](https://github.com/nitinknolder)
+  - 🛠 导出 Card 的 `CardInterface` 接口。[#24866](https://github.com/ant-design/ant-design/pull/24866) [@THPubs](https://github.com/THPubs)
+  - 🛠 从 Table `TableProps` 中去除 `emptyText` 定义。[#24948](https://github.com/ant-design/ant-design/pull/24948) [@hehex9](https://github.com/hehex9)
+  - 🛠 为 Upload `method` 属性添加 `patch` 类型。[#24936](https://github.com/ant-design/ant-design/pull/24936) [@miclle](https://github.com/miclle)
+
+## 4.3.3
+
+`2020-06-07`
+
+- 🐞 修复 Drawer 无法显示的问题。[#24802](https://github.com/ant-design/ant-design/pull/24802)
+- 🐞 修复 Menu.SubMenu 滚动区域无法交互的问题。[#24806](https://github.com/ant-design/ant-design/pull/24806)
+
+## 4.3.2
+
+`2020-06-06`
+
+- 🐞 修复 Tag.CheckableTag 不支持 `onClick` 和 `stopPropagation` 的问题。[#24743](https://github.com/ant-design/ant-design/pull/24743)
+- 🐞 修复 Drawer 支持通过 ConfigProvider 来全局设置 `getPrefixCls` 和 `getPopupContainer`。[#24727](https://github.com/ant-design/ant-design/pull/24727)
+- 🐞 修复 Button 在父组件重新渲染时 `loading.delay` 会重复触发的问题。[#24713](https://github.com/ant-design/ant-design/pull/24713)
+- 🐞 修复 Dropdown 带图标 `icon` 菜单项的链接色彩。[#24707](https://github.com/ant-design/ant-design/pull/24707) [#24702](https://github.com/ant-design/ant-design/pull/24702)
+- Select
+  - 🐞 修复 Select 在紧凑模式下表现不正常。[#24706](https://github.com/ant-design/ant-design/pull/24706)
+  - ⚡️ 优化 Select 多选模式的性能。[#24785](https://github.com/ant-design/ant-design/pull/24785) [@Kermit-Xuan](https://github.com/Kermit-Xuan)
+- 🐞 修复 Calendar 在同一个面板下选择日期也会触发 `onPanelChange` 的问题。[#24695](https://github.com/ant-design/ant-design/pull/24695)
+- 🐞 修复 Input 组件在 IE11 中高度异常问题。[#24673](https://github.com/ant-design/ant-design/pull/24673) [@xiaosongxiaosong](https://github.com/xiaosongxiaosong)
+- 🐞 修复 Radio 的 TypeScript 定义错误。[#24693](https://github.com/ant-design/ant-design/pull/24693) [@hengkx](https://github.com/hengkx)
+- 🐞 修复 Statistic 不能包裹 Tooltip 的问题。[#24782](https://github.com/ant-design/ant-design/pull/24782)
+- 🐞 修复 TimePicker.RangePicker 指定 `className` 后无边框样式失效的问题。[#24781](https://github.com/ant-design/ant-design/pull/24781)
+- 🐞 修复 List 翻页时 `onChange` 不触发的问题。[#24514](https://github.com/ant-design/ant-design/pull/24514)
+- 🌐 国际化
+  - 🇮🇱 Form 校验文案增加希伯来语（以色列）。[#24716](https://github.com/ant-design/ant-design/pull/24716) [@israelKusayev](https://github.com/israelKusayev)
+  - 🇰🇷 Form 校验文案增加韩文。[#24783](https://github.com/ant-design/ant-design/pull/24783) [@Jaewoook](https://github.com/Jaewoook)
+- 💄 新增 less 变量 `@table-font-size`，`@table-font-size-md` 和 `@table-font-size-sm`，用于自定义 Table 文字大小。[#24714](https://github.com/ant-design/ant-design/pull/24714) [@morenyang](https://github.com/morenyang)
+- RTL
+  - 💄 优化 Tabs 标签下拉框在 RTL 模式下样式。[#24715](https://github.com/ant-design/ant-design/pull/24715)
+  - 💄 增加 `Modal.method()` RTL 模式支持，仅限 hooks 用法。[#24682](https://github.com/ant-design/ant-design/pull/24682)
+  - 💄 修复 Badge RTL 模式位置偏移量设置。[#24724](https://github.com/ant-design/ant-design/pull/24724)
+
 ## 4.3.1

 `2020-06-02`
--- a/README.md
+++ b/README.md
@@ -42,8 +42,8 @@ An enterprise-class UI design language and React UI library.
 [gitter-english-url]: https://gitter.im/ant-design/ant-design-english?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge
 [gitter-chinese-image]: https://img.shields.io/gitter/room/ant-design/ant-design.svg?style=flat-square&logoWidth=18&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjkwMCIgaGVpZ2h0PSI2MDAiIHZpZXdCb3g9IjAgMCAzMCAyMCI%2BDQo8ZGVmcz4NCjxwYXRoIGlkPSJzIiBkPSJNMCwtMSAwLjU4Nzc4NSwwLjgwOTAxNyAtMC45NTEwNTcsLTAuMzA5MDE3SDAuOTUxMDU3TC0wLjU4Nzc4NSwwLjgwOTAxN3oiIGZpbGw9IiNmZmRlMDAiLz4NCjwvZGVmcz4NCjxyZWN0IHdpZHRoPSIzMCIgaGVpZ2h0PSIyMCIgZmlsbD0iI2RlMjkxMCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNSw1KSBzY2FsZSgzKSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsMikgcm90YXRlKDIzLjAzNjI0MykiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEyLDQpIHJvdGF0ZSg0NS44Njk4OTgpIi8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMiw3KSByb3RhdGUoNjkuOTQ1Mzk2KSIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAsOSkgcm90YXRlKDIwLjY1OTgwOCkiLz4NCjwvc3ZnPg%3D%3D
 [gitter-chinese-url]: https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge
-[semver-stability-url]: https://dependabot.com/compatibility-score.html/?dependency-name=antd&package-manager=npm_and_yarn&new-version=latest
-[semver-stability-image]: https://api.dependabot.com/badges/compatibility_score?dependency-name=antd&package-manager=npm_and_yarn&target-version=latest&version-scheme=semver
+[semver-stability-url]: https://dependabot.com/compatibility-score.html/?dependency-name=antd&package-manager=npm_and_yarn
+[semver-stability-image]: https://api.dependabot.com/badges/compatibility_score?dependency-name=antd&package-manager=npm_and_yarn&version-scheme=semver

 </div>

--- a/components/_util/easings.ts
+++ b/components/_util/easings.ts
@@ -5,5 +5,6 @@ export function easeInOutCubic(t: number, b: number, c: number, d: number) {
  if (t < 1) {
    return (cc / 2) * t * t * t + b;
  }
+  // eslint-disable-next-line no-return-assign
  return (cc / 2) * ((t -= 2) * t * t + 2) + b;
 }
--- a/components/_util/reactNode.ts
+++ b/components/_util/reactNode.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';

-export const isValidElement = React.isValidElement;
+export const { isValidElement } = React;

 export function replaceElement(
  element: React.ReactNode,
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@@ -2,7 +2,7 @@
 category: Components
 type: Navigation
 title: Affix
-cover: https://gw.alipayobjects.com/zos/alicdn/SQGCQ7gOO/Affix.svg
+cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
 ---

 Wrap Affix around another component to make it stick the viewport.
--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@@ -107,6 +107,7 @@ class Affix extends React.Component<AffixProps, AffixState> {
        this.updatePosition();
      }

+      // eslint-disable-next-line react/no-did-update-set-state
      this.setState({ prevTarget: newTarget });
    }

--- a/components/affix/index.zh-CN.md
+++ b/components/affix/index.zh-CN.md
@@ -3,7 +3,7 @@ category: Components
 subtitle: 固钉
 type: 导航
 title: Affix
-cover: https://gw.alipayobjects.com/zos/alicdn/SQGCQ7gOO/Affix.svg
+cover: https://gw.alipayobjects.com/zos/alicdn/tX6-md4H6/Affix.svg
 ---

 将页面元素钉在可视范围。
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@@ -2,7 +2,7 @@
 category: Components
 type: Feedback
 title: Alert
-cover: https://gw.alipayobjects.com/zos/antfincdn/nuhf3vdRno/Alert.svg
+cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
 ---

 Alert component for feedback.
--- a/components/alert/index.zh-CN.md
+++ b/components/alert/index.zh-CN.md
@@ -3,7 +3,7 @@ category: Components
 subtitle: 警告提示
 type: 反馈
 title: Alert
-cover: https://gw.alipayobjects.com/zos/antfincdn/nuhf3vdRno/Alert.svg
+cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
 ---

 警告提示，展现需要关注的信息。
--- a/components/anchor/tests/Anchor.test.tsx
+++ b/components/anchor/tests/Anchor.test.tsx
@@ -307,7 +307,8 @@ describe('Anchor Render', () => {
      let start = 0;

      const handler = () => {
-        return (start += 1000);
+        start += 1000;
+        return start;
      };

      return jest.spyOn(Date, 'now').mockImplementation(handler);
@@ -384,7 +385,8 @@ describe('Anchor Render', () => {
      let start = 0;

      const handler = () => {
-        return (start += 1000);
+        start += 1000;
+        return start;
      };

      return jest.spyOn(Date, 'now').mockImplementation(handler);
@@ -432,7 +434,8 @@ describe('Anchor Render', () => {
      let start = 0;

      const handler = () => {
-        return (start += 1000);
+        start += 1000;
+        return start;
      };

      return jest.spyOn(Date, 'now').mockImplementation(handler);
--- a/components/anchor/index.en-US.md
+++ b/components/anchor/index.en-US.md
@@ -3,7 +3,7 @@ category: Components
 type: Other
 cols: 2
 title: Anchor
-cover: https://gw.alipayobjects.com/zos/alicdn/ep_L42LFy/Anchor.svg
+cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
 ---

 Hyperlinks to scroll on one page.
--- a/components/anchor/index.zh-CN.md
+++ b/components/anchor/index.zh-CN.md
@@ -4,7 +4,7 @@ subtitle: 锚点
 cols: 2
 type: 其他
 title: Anchor
-cover: https://gw.alipayobjects.com/zos/alicdn/ep_L42LFy/Anchor.svg
+cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
 ---

 用于跳转到页面指定位置。
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@@ -3,7 +3,7 @@ category: Components
 type: Data Entry
 cols: 2
 title: AutoComplete
-cover: https://gw.alipayobjects.com/zos/alicdn/gtGCgVDKv/AutoComplete.svg
+cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 ---

 Autocomplete function of input field.
--- a/components/auto-complete/index.tsx
+++ b/components/auto-complete/index.tsx
@@ -37,7 +37,7 @@ function isSelectOptionOrSelectOptGroup(child: any): Boolean {
  return child && child.type && (child.type.isSelectOption || child.type.isSelectOptGroup);
 }

-const AutoComplete: React.RefForwardingComponent<Select, AutoCompleteProps> = (props, ref) => {
+const AutoComplete: React.ForwardRefRenderFunction<Select, AutoCompleteProps> = (props, ref) => {
  const { prefixCls: customizePrefixCls, className, children, dataSource } = props;
  const childNodes: React.ReactElement[] = toArray(children);

@@ -53,7 +53,7 @@ const AutoComplete: React.RefForwardingComponent<Select, AutoCompleteProps> = (p
    isValidElement(childNodes[0]) &&
    !isSelectOptionOrSelectOptGroup(childNodes[0])
  ) {
-    customizeInput = childNodes[0];
+    [customizeInput] = childNodes;
  }

  const getInputElement = (): React.ReactElement => customizeInput;
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@@ -4,7 +4,7 @@ subtitle: 自动完成
 type: 数据录入
 cols: 2
 title: AutoComplete
-cover: https://gw.alipayobjects.com/zos/alicdn/gtGCgVDKv/AutoComplete.svg
+cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 ---

 输入框自动完成功能。
--- a/components/avatar/tests/Avatar.test.js
+++ b/components/avatar/tests/Avatar.test.js
@@ -75,11 +75,12 @@ describe('Avatar Render', () => {
    }

    const wrapper = mount(<Foo />, { attachTo: div });
+    expect(div.querySelector('img').getAttribute('src')).toBe(LOAD_FAILURE_SRC);
    // mock img load Error, since jsdom do not load resource by default
    // https://github.com/jsdom/jsdom/issues/1816
    wrapper.find('img').simulate('error');

-    expect(wrapper.find(Avatar).instance().state.isImgExist).toBe(true);
+    expect(wrapper).toMatchSnapshot();
    expect(div.querySelector('img').getAttribute('src')).toBe(LOAD_SUCCESS_SRC);

    wrapper.detach();
@@ -97,14 +98,16 @@ describe('Avatar Render', () => {
    const wrapper = mount(<Avatar src={LOAD_FAILURE_SRC}>Fallback</Avatar>, { attachTo: div });
    wrapper.find('img').simulate('error');

-    expect(wrapper.find(Avatar).instance().state.isImgExist).toBe(false);
+    expect(wrapper).toMatchSnapshot();
    expect(wrapper.find('.ant-avatar-string').length).toBe(1);
+    // children should show, when image load error without onError return false
+    expect(wrapper.find('.ant-avatar-string').prop('style')).not.toHaveProperty('opacity', 0);

    // simulate successful src url
    wrapper.setProps({ src: LOAD_SUCCESS_SRC });
    wrapper.update();

-    expect(wrapper.find(Avatar).instance().state.isImgExist).toBe(true);
+    expect(wrapper).toMatchSnapshot();
    expect(wrapper.find('.ant-avatar-image').length).toBe(1);

    // cleanup
@@ -114,7 +117,8 @@ describe('Avatar Render', () => {

  it('should calculate scale of avatar children correctly', () => {
    const wrapper = mount(<Avatar>Avatar</Avatar>);
-    expect(wrapper.state().scale).toBe(0.72);
+    expect(wrapper.find('.ant-avatar-string')).toMatchSnapshot();
+
    Object.defineProperty(HTMLElement.prototype, 'offsetWidth', {
      get() {
        if (this.className === 'ant-avatar-string') {
@@ -124,12 +128,12 @@ describe('Avatar Render', () => {
      },
    });
    wrapper.setProps({ children: 'xx' });
-    expect(wrapper.state().scale).toBe(0.32);
+    expect(wrapper.find('.ant-avatar-string')).toMatchSnapshot();
  });

  it('should calculate scale of avatar children correctly with gap', () => {
    const wrapper = mount(<Avatar gap={2}>Avatar</Avatar>);
-    expect(wrapper.state().scale).toBe(0.36);
+    expect(wrapper.find('.ant-avatar-string')).toMatchSnapshot();
  });

  it('should warning when pass a string as icon props', () => {
--- a/components/avatar/tests/snapshots/Avatar.test.js.snap
+++ b/components/avatar/tests/snapshots/Avatar.test.js.snap
@@ -11,6 +11,116 @@ exports[`Avatar Render rtl render component should be rendered correctly in RTL
 </span>
 `;

+exports[`Avatar Render should calculate scale of avatar children correctly 1`] = `
+<span
+  className="ant-avatar-string"
+  style={
+    Object {
+      "WebkitTransform": "scale(0.72) translateX(-50%)",
+      "msTransform": "scale(0.72) translateX(-50%)",
+      "transform": "scale(0.72) translateX(-50%)",
+    }
+  }
+>
+  Avatar
+</span>
+`;
+
+exports[`Avatar Render should calculate scale of avatar children correctly 2`] = `
+<span
+  className="ant-avatar-string"
+  style={
+    Object {
+      "WebkitTransform": "scale(0.72) translateX(-50%)",
+      "msTransform": "scale(0.72) translateX(-50%)",
+      "transform": "scale(0.72) translateX(-50%)",
+    }
+  }
+>
+  xx
+</span>
+`;
+
+exports[`Avatar Render should calculate scale of avatar children correctly with gap 1`] = `
+<span
+  className="ant-avatar-string"
+  style={
+    Object {
+      "WebkitTransform": "scale(0.36) translateX(-50%)",
+      "msTransform": "scale(0.36) translateX(-50%)",
+      "transform": "scale(0.36) translateX(-50%)",
+    }
+  }
+>
+  Avatar
+</span>
+`;
+
+exports[`Avatar Render should handle onError correctly 1`] = `
+<Foo>
+  <Avatar
+    onError={[Function]}
+    shape="circle"
+    size="default"
+    src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+  >
+    <span
+      className="ant-avatar ant-avatar-circle ant-avatar-image"
+      style={Object {}}
+    >
+      <img
+        onError={[Function]}
+        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+      />
+    </span>
+  </Avatar>
+</Foo>
+`;
+
+exports[`Avatar Render should show image on success after a failure state 1`] = `
+<Avatar
+  shape="circle"
+  size="default"
+  src="http://error.url"
+>
+  <span
+    className="ant-avatar ant-avatar-circle"
+    style={Object {}}
+  >
+    <span
+      className="ant-avatar-string"
+      style={
+        Object {
+          "WebkitTransform": "scale(0.72) translateX(-50%)",
+          "msTransform": "scale(0.72) translateX(-50%)",
+          "transform": "scale(0.72) translateX(-50%)",
+        }
+      }
+    >
+      Fallback
+    </span>
+  </span>
+</Avatar>
+`;
+
+exports[`Avatar Render should show image on success after a failure state 2`] = `
+<Avatar
+  shape="circle"
+  size="default"
+  src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+>
+  <span
+    className="ant-avatar ant-avatar-circle ant-avatar-image"
+    style={Object {}}
+  >
+    <img
+      onError={[Function]}
+      src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+    />
+  </span>
+</Avatar>
+`;
+
 exports[`Avatar Render support size is number 1`] = `
 <span
  class="ant-avatar ant-avatar-circle"
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@@ -19,3 +19,5 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 | alt | This attribute defines the alternative text describing the image | string | - |  |
 | onError | handler when img load error, return false to prevent default fallback behavior | () => boolean | - |  |
 | gap | Letter type unit distance between left and right sides | number | 4 | 4.3.0 |
+
+> Tip: You can set `icon` or `children` as the fallback for image load error, with the priority of `icon` > `children`
--- a/components/avatar/index.tsx
+++ b/components/avatar/index.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';

-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import devWarning from '../_util/devWarning';

 export interface AvatarProps {
@@ -30,197 +30,186 @@ export interface AvatarProps {
  onError?: () => boolean;
 }

-export interface AvatarState {
-  scale: number;
-  mounted: boolean;
-  isImgExist: boolean;
-}
+const Avatar: React.FC<AvatarProps> = props => {
+  const [scale, setScale] = React.useState(1);
+  const [mounted, setMounted] = React.useState(false);
+  const [isImgExist, setIsImgExist] = React.useState(true);

-export default class Avatar extends React.Component<AvatarProps, AvatarState> {
-  static defaultProps = {
-    shape: 'circle' as AvatarProps['shape'],
-    size: 'default' as AvatarProps['size'],
-  };
+  const avatarNodeRef = React.useRef<HTMLElement>();
+  const avatarChildrenRef = React.useRef<HTMLElement>();

-  state = {
-    scale: 1,
-    mounted: false,
-    isImgExist: true,
-  };
+  let lastChildrenWidth: number;
+  let lastNodeWidth: number;

-  private avatarNode: HTMLElement;
+  const { getPrefixCls } = React.useContext(ConfigContext);

-  private avatarChildren: HTMLElement;
-
-  private lastChildrenWidth: number;
-
-  private lastNodeWidth: number;
-
-  componentDidMount() {
-    this.setScale();
-    this.setState({ mounted: true });
-  }
-
-  componentDidUpdate(prevProps: AvatarProps) {
-    if (prevProps.src !== this.props.src) {
-      this.setState({ isImgExist: true, scale: 1 });
-    }
-    if (prevProps.children !== this.props.children || prevProps.gap !== this.props.gap) {
-      this.setScale();
-    }
-  }
-
-  setScale = () => {
-    if (!this.avatarChildren || !this.avatarNode) {
+  const setScaleParam = () => {
+    if (!avatarChildrenRef.current || !avatarNodeRef.current) {
      return;
    }
-    const childrenWidth = this.avatarChildren.offsetWidth; // offsetWidth avoid affecting be transform scale
-    const nodeWidth = this.avatarNode.offsetWidth;
-    const { gap = 4 } = this.props;
+    const childrenWidth = avatarChildrenRef.current.offsetWidth; // offsetWidth avoid affecting be transform scale
+    const nodeWidth = avatarNodeRef.current.offsetWidth;
+    const { gap = 4 } = props;
    // denominator is 0 is no meaning
    if (
      childrenWidth !== 0 &&
      nodeWidth !== 0 &&
-      (this.lastChildrenWidth !== childrenWidth || this.lastNodeWidth !== nodeWidth)
+      (lastChildrenWidth !== childrenWidth || lastNodeWidth !== nodeWidth)
    ) {
-      this.lastChildrenWidth = childrenWidth;
-      this.lastNodeWidth = nodeWidth;
+      lastChildrenWidth = childrenWidth;
+      lastNodeWidth = nodeWidth;
    }

    if (gap * 2 < nodeWidth) {
-      this.setState({
-        scale: nodeWidth - gap * 2 < childrenWidth ? (nodeWidth - gap * 2) / childrenWidth : 1,
-      });
+      setScale(nodeWidth - gap * 2 < childrenWidth ? (nodeWidth - gap * 2) / childrenWidth : 1);
    }
  };

-  handleImgLoadError = () => {
-    const { onError } = this.props;
+  React.useEffect(() => {
+    setScaleParam();
+    setMounted(true);
+  }, []);
+
+  React.useEffect(() => {
+    setIsImgExist(true);
+    setScale(1);
+  }, [props.src]);
+
+  React.useEffect(() => {
+    setScaleParam();
+  }, [props.children, props.gap]);
+
+  React.useEffect(() => {
+    if (props.children) {
+      setScaleParam();
+    }
+  }, [isImgExist]);
+
+  const handleImgLoadError = () => {
+    const { onError } = props;
    const errorFlag = onError ? onError() : undefined;
    if (errorFlag !== false) {
-      this.setState({ isImgExist: false });
+      setIsImgExist(false);
    }
  };

-  renderAvatar = ({ getPrefixCls }: ConfigConsumerProps) => {
-    const {
-      prefixCls: customizePrefixCls,
-      shape,
-      size,
-      src,
-      srcSet,
-      icon,
-      className,
-      alt,
-      draggable,
-      ...others
-    } = this.props;
+  const {
+    prefixCls: customizePrefixCls,
+    shape,
+    size,
+    src,
+    srcSet,
+    icon,
+    className,
+    alt,
+    draggable,
+    ...others
+  } = props;

-    devWarning(
-      !(typeof icon === 'string' && icon.length > 2),
-      'Avatar',
-      `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
-    );
+  devWarning(
+    !(typeof icon === 'string' && icon.length > 2),
+    'Avatar',
+    `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
+  );

-    const { isImgExist, scale, mounted } = this.state;
+  const prefixCls = getPrefixCls('avatar', customizePrefixCls);

-    const prefixCls = getPrefixCls('avatar', customizePrefixCls);
+  const sizeCls = classNames({
+    [`${prefixCls}-lg`]: size === 'large',
+    [`${prefixCls}-sm`]: size === 'small',
+  });

-    const sizeCls = classNames({
-      [`${prefixCls}-lg`]: size === 'large',
-      [`${prefixCls}-sm`]: size === 'small',
-    });
+  const classString = classNames(prefixCls, className, sizeCls, {
+    [`${prefixCls}-${shape}`]: shape,
+    [`${prefixCls}-image`]: src && isImgExist,
+    [`${prefixCls}-icon`]: icon,
+  });

-    const classString = classNames(prefixCls, className, sizeCls, {
-      [`${prefixCls}-${shape}`]: shape,
-      [`${prefixCls}-image`]: src && isImgExist,
-      [`${prefixCls}-icon`]: icon,
-    });
-
-    const sizeStyle: React.CSSProperties =
-      typeof size === 'number'
-        ? {
-            width: size,
-            height: size,
-            lineHeight: `${size}px`,
-            fontSize: icon ? size / 2 : 18,
-          }
-        : {};
-
-    let { children } = this.props;
-    if (src && isImgExist) {
-      children = (
-        <img
-          src={src}
-          draggable={draggable}
-          srcSet={srcSet}
-          onError={this.handleImgLoadError}
-          alt={alt}
-        />
-      );
-    } else if (icon) {
-      children = icon;
-    } else {
-      const childrenNode = this.avatarChildren;
-      if (childrenNode || scale !== 1) {
-        const transformString = `scale(${scale}) translateX(-50%)`;
-        const childrenStyle: React.CSSProperties = {
-          msTransform: transformString,
-          WebkitTransform: transformString,
-          transform: transformString,
-        };
-
-        const sizeChildrenStyle: React.CSSProperties =
-          typeof size === 'number'
-            ? {
-                lineHeight: `${size}px`,
-              }
-            : {};
-        children = (
-          <span
-            className={`${prefixCls}-string`}
-            ref={(node: HTMLElement) => (this.avatarChildren = node)}
-            style={{ ...sizeChildrenStyle, ...childrenStyle }}
-          >
-            {children}
-          </span>
-        );
-      } else {
-        const childrenStyle: React.CSSProperties = {};
-        if (!mounted) {
-          childrenStyle.opacity = 0;
+  const sizeStyle: React.CSSProperties =
+    typeof size === 'number'
+      ? {
+          width: size,
+          height: size,
+          lineHeight: `${size}px`,
+          fontSize: icon ? size / 2 : 18,
        }
+      : {};

-        children = (
-          <span
-            className={`${prefixCls}-string`}
-            style={{ opacity: 0 }}
-            ref={(node: HTMLElement) => (this.avatarChildren = node)}
-          >
-            {children}
-          </span>
-        );
-      }
-    }
-
-    // The event is triggered twice from bubbling up the DOM tree.
-    // see https://codesandbox.io/s/kind-snow-9lidz
-    delete others.onError;
-    delete others.gap;
-
-    return (
-      <span
-        {...others}
-        style={{ ...sizeStyle, ...others.style }}
-        className={classString}
-        ref={(node: HTMLElement) => (this.avatarNode = node)}
-      >
-        {children}
-      </span>
+  let { children } = props;
+  if (src && isImgExist) {
+    children = (
+      <img src={src} draggable={draggable} srcSet={srcSet} onError={handleImgLoadError} alt={alt} />
    );
-  };
+  } else if (icon) {
+    children = icon;
+  } else {
+    const childrenNode = avatarChildrenRef.current;
+    if (childrenNode || scale !== 1) {
+      const transformString = `scale(${scale}) translateX(-50%)`;
+      const childrenStyle: React.CSSProperties = {
+        msTransform: transformString,
+        WebkitTransform: transformString,
+        transform: transformString,
+      };

-  render() {
-    return <ConfigConsumer>{this.renderAvatar}</ConfigConsumer>;
+      const sizeChildrenStyle: React.CSSProperties =
+        typeof size === 'number'
+          ? {
+              lineHeight: `${size}px`,
+            }
+          : {};
+      children = (
+        <span
+          className={`${prefixCls}-string`}
+          ref={(node: HTMLElement) => {
+            avatarChildrenRef.current = node;
+          }}
+          style={{ ...sizeChildrenStyle, ...childrenStyle }}
+        >
+          {children}
+        </span>
+      );
+    } else {
+      const childrenStyle: React.CSSProperties = {};
+      if (!mounted) {
+        childrenStyle.opacity = 0;
+      }
+
+      children = (
+        <span
+          className={`${prefixCls}-string`}
+          style={{ opacity: 0 }}
+          ref={(node: HTMLElement) => {
+            avatarChildrenRef.current = node;
+          }}
+        >
+          {children}
+        </span>
+      );
+    }
  }
-}
+
+  // The event is triggered twice from bubbling up the DOM tree.
+  // see https://codesandbox.io/s/kind-snow-9lidz
+  delete others.onError;
+  delete others.gap;
+  return (
+    <span
+      {...others}
+      style={{ ...sizeStyle, ...others.style }}
+      className={classString}
+      ref={(node: HTMLElement) => {
+        avatarNodeRef.current = node;
+      }}
+    >
+      {children}
+    </span>
+  );
+};
+
+Avatar.defaultProps = {
+  shape: 'circle' as AvatarProps['shape'],
+  size: 'default' as AvatarProps['size'],
+};
+
+export default Avatar;
--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@@ -24,3 +24,5 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/aBcnbw68hP/Avatar.svg
 | alt | 图像无法显示时的替代文本 | string | - |  |
 | onError | 图片加载失败的事件，返回 false 会关闭组件默认的 fallback 行为 | () => boolean | - |  |
 | gap | 字符类型距离左右两侧边界单位像素 | number | 4 | 4.3.0 |
+
+> Tip：你可以设置 `icon` 或 `children` 作为图片加载失败的默认 fallback 行为，优先级为 `icon` > `children`
--- a/components/back-top/index.en-US.md
+++ b/components/back-top/index.en-US.md
@@ -2,7 +2,7 @@
 category: Components
 type: Other
 title: BackTop
-cover: https://gw.alipayobjects.com/zos/alicdn/Ji3PnAAMT/BackTop.svg
+cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
 ---

 `BackTop` makes it easy to go back to the top of the page.
--- a/components/back-top/index.zh-CN.md
+++ b/components/back-top/index.zh-CN.md
@@ -3,7 +3,7 @@ category: Components
 type: 其他
 subtitle: 回到顶部
 title: BackTop
-cover: https://gw.alipayobjects.com/zos/alicdn/Ji3PnAAMT/BackTop.svg
+cover: https://gw.alipayobjects.com/zos/alicdn/tJZ5jbTwX/BackTop.svg
 ---

 返回页面顶部的操作按钮。
--- a/components/badge/tests/snapshots/demo.test.js.snap
+++ b/components/badge/tests/snapshots/demo.test.js.snap
@@ -1497,6 +1497,179 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
 </div>
 `;

+exports[`renders ./components/badge/demo/offset.md correctly 1`] = `
+<span
+  class="ant-badge"
+>
+  <a
+    class="head-example"
+    href="#"
+  />
+  <sup
+    class="ant-scroll-number ant-badge-count"
+    data-show="true"
+    style="right:-10px;margin-top:10px"
+    title="5"
+  >
+    <span
+      class="ant-scroll-number-only"
+      style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+    >
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit current"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+    </span>
+  </sup>
+</span>
+`;
+
 exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
 <div>
  <span
--- a/components/badge/tests/snapshots/index.test.js.snap
+++ b/components/badge/tests/snapshots/index.test.js.snap
@@ -762,6 +762,181 @@ exports[`Badge rtl render component should be rendered correctly in RTL directio
 />
 `;

+exports[`Badge rtl render component should be rendered correctly in RTL direction 2`] = `
+<span
+  class="ant-badge ant-badge-rtl"
+>
+  <a
+    class="head-example"
+    href="#"
+  >
+    head
+  </a>
+  <sup
+    class="ant-scroll-number ant-badge-count"
+    data-show="true"
+    style="left:10px;margin-top:10px"
+    title="5"
+  >
+    <span
+      class="ant-scroll-number-only"
+      style="transition:none;-ms-transform:translateY(-1500%);-webkit-transform:translateY(-1500%);transform:translateY(-1500%)"
+    >
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit current"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        0
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        1
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        2
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        3
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        4
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        5
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        6
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        7
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        8
+      </p>
+      <p
+        class="ant-scroll-number-only-unit"
+      >
+        9
+      </p>
+    </span>
+  </sup>
+</span>
+`;
+
 exports[`Badge should be compatible with borderColor style 1`] = `
 <span
  class="ant-badge ant-badge-not-a-wrapper"
--- a/components/badge/tests/index.test.js
+++ b/components/badge/tests/index.test.js
@@ -8,6 +8,13 @@ import rtlTest from '../../../tests/shared/rtlTest';
 describe('Badge', () => {
  mountTest(Badge);
  rtlTest(Badge);
+  rtlTest(() => (
+    <Badge count={5} offset={[10, 10]}>
+      <a href="#" className="head-example">
+        head
+      </a>
+    </Badge>
+  ));

  beforeEach(() => {
    jest.useFakeTimers();
--- a/components/badge/demo/offset.md
+++ b/components/badge/demo/offset.md
@@ -0,0 +1,27 @@
+---
+order: 5
+title:
+  zh-CN: 自定义位置偏移
+  en-US: Offset
+---
+
+## zh-CN
+
+设置状态点的位置偏移，格式为 `[left, top]`，表示状态点距默认位置左侧、上方的偏移量。
+
+## en-US
+
+Set offset of the badge dot, the format is `[left, top]`, which represents the offset of the status dot from the left and top of the default position.
+
+```jsx
+import { Badge } from 'antd';
+
+ReactDOM.render(
+  <>
+    <Badge count={5} offset={[10, 10]}>
+      <a href="#" className="head-example" />
+    </Badge>
+  </>,
+  mountNode,
+);
+```
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@@ -13,22 +13,12 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca

 ## API

-```jsx
-<Badge count={5}>
-  <a href="#" className="head-example" />
-</Badge>
-```
-
-```jsx
-<Badge count={5} />
-```
-
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | color | Customize Badge dot color | string | - |  |
 | count | Number to show in badge | ReactNode |  |  |
 | dot | Whether to display a red dot instead of `count` | boolean | `false` |  |
-| offset | set offset of the badge dot, like`[x, y]` | `[number, number]` | - |  |
+| offset | set offset of the badge dot | `[number, number]` | - |  |
 | overflowCount | Max count to show | number | 99 |  |
 | showZero | Whether to show badge when `count` is zero | boolean | `false` |  |
 | status | Set Badge as a status dot | `success` \| `processing` \| `default` \| `error` \| `warning` | `''` |  |
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@@ -87,6 +87,15 @@ const Badge: React.FC<BadgeProps> = ({
  };

  const getStyleWithOffset = () => {
+    if (direction === 'rtl') {
+      return offset
+        ? {
+            left: parseInt(offset[0] as string, 10),
+            marginTop: offset[1],
+            ...style,
+          }
+        : style;
+    }
    return offset
      ? {
          right: -parseInt(offset[0] as string, 10),
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@@ -14,22 +14,12 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/6%26GF9WHwvY/Badge.svg

 ## API

-```jsx
-<Badge count={5}>
-  <a href="#" className="head-example" />
-</Badge>
-```
-
-```jsx
-<Badge count={5} />
-```
-
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | color | 自定义小圆点的颜色 | string | - |  |
 | count | 展示的数字，大于 overflowCount 时显示为 `${overflowCount}+`，为 0 时隐藏 | ReactNode |  |  |
 | dot | 不展示数字，只有一个小红点 | boolean | false |  |
-| offset | 设置状态点的位置偏移，格式为 `[x, y]` | `[number, number]` | - |  |
+| offset | 设置状态点的位置偏移 | `[number, number]` | - |  |
 | overflowCount | 展示封顶的数字值 | number | 99 |  |
 | showZero | 当数值为 0 时，是否展示 Badge | boolean | false |  |
 | status | 设置 Badge 为状态点 | `success` \| `processing` \| `default` \| `error` \| `warning` | '' |  |
--- a/components/button/tests/snapshots/demo.test.ts.snap
+++ b/components/button/tests/snapshots/demo.test.ts.snap
@@ -47,7 +47,7 @@ Array [
 `;

 exports[`renders ./components/button/demo/block.md correctly 1`] = `
-<div>
+Array [
  <button
    class="ant-btn ant-btn-primary ant-btn-block"
    type="button"
@@ -55,7 +55,7 @@ exports[`renders ./components/button/demo/block.md correctly 1`] = `
    <span>
      Primary
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-block"
    type="button"
@@ -63,7 +63,7 @@ exports[`renders ./components/button/demo/block.md correctly 1`] = `
    <span>
      Default
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-dashed ant-btn-block"
    type="button"
@@ -71,7 +71,7 @@ exports[`renders ./components/button/demo/block.md correctly 1`] = `
    <span>
      Dashed
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-link ant-btn-block"
    type="button"
@@ -79,8 +79,8 @@ exports[`renders ./components/button/demo/block.md correctly 1`] = `
    <span>
      Link
    </span>
-  </button>
-</div>
+  </button>,
+]
 `;

 exports[`renders ./components/button/demo/danger.md correctly 1`] = `
@@ -129,7 +129,7 @@ Array [
 `;

 exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
-<div>
+Array [
  <button
    class="ant-btn ant-btn-primary"
    type="button"
@@ -137,7 +137,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Primary
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-primary"
    disabled=""
@@ -146,8 +146,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Primary(disabled)
    </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
  <button
    class="ant-btn"
    type="button"
@@ -155,7 +155,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Default
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn"
    disabled=""
@@ -164,8 +164,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Default(disabled)
    </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
  <button
    class="ant-btn ant-btn-dashed"
    type="button"
@@ -173,7 +173,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Dashed
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-dashed"
    disabled=""
@@ -182,8 +182,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Dashed(disabled)
    </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
  <button
    class="ant-btn ant-btn-text"
    type="button"
@@ -191,7 +191,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Text
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-text"
    disabled=""
@@ -200,8 +200,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Text(disabled)
    </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
  <button
    class="ant-btn ant-btn-link"
    type="button"
@@ -209,7 +209,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Link
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-link"
    disabled=""
@@ -218,8 +218,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Link(disabled)
    </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
  <button
    class="ant-btn ant-btn-dangerous"
    type="button"
@@ -227,7 +227,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Danger Default
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-dangerous"
    disabled=""
@@ -236,8 +236,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Danger Default(disabled)
    </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
  <button
    class="ant-btn ant-btn-text ant-btn-dangerous"
    type="button"
@@ -245,7 +245,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Danger Text
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-text ant-btn-dangerous"
    disabled=""
@@ -254,8 +254,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Danger Text(disabled)
    </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
  <button
    class="ant-btn ant-btn-link ant-btn-dangerous"
    type="button"
@@ -263,7 +263,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Danger Link
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-link ant-btn-dangerous"
    disabled=""
@@ -272,7 +272,7 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
    <span>
      Danger Link(disabled)
    </span>
-  </button>
+  </button>,
  <div
    class="site-button-ghost-wrapper"
  >
@@ -293,8 +293,8 @@ exports[`renders ./components/button/demo/disabled.md correctly 1`] = `
        Ghost(disabled)
      </span>
    </button>
-  </div>
-</div>
+  </div>,
+]
 `;

 exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
@@ -345,7 +345,7 @@ exports[`renders ./components/button/demo/ghost.md correctly 1`] = `
 `;

 exports[`renders ./components/button/demo/icon.md correctly 1`] = `
-<div>
+Array [
  <button
    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-icon-only"
    type="button"
@@ -370,7 +370,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
        />
      </svg>
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-primary ant-btn-circle"
    type="button"
@@ -378,7 +378,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
    <span>
      A
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-primary"
    type="button"
@@ -406,7 +406,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
    <span>
      Search
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-circle ant-btn-icon-only"
    type="button"
@@ -431,7 +431,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
        />
      </svg>
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn"
    type="button"
@@ -459,8 +459,8 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
    <span>
      Search
    </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
  <button
    class="ant-btn ant-btn-circle ant-btn-icon-only"
    type="button"
@@ -485,7 +485,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
        />
      </svg>
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn"
    type="button"
@@ -513,7 +513,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
    <span>
      Search
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-dashed ant-btn-circle ant-btn-icon-only"
    type="button"
@@ -538,7 +538,7 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
        />
      </svg>
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-dashed"
    type="button"
@@ -566,12 +566,12 @@ exports[`renders ./components/button/demo/icon.md correctly 1`] = `
    <span>
      Search
    </span>
-  </button>
-</div>
+  </button>,
+]
 `;

 exports[`renders ./components/button/demo/legacy-group.md correctly 1`] = `
-<div>
+Array [
  <div>
    <div
      class="ant-btn-group ant-btn-group-sm"
@@ -650,8 +650,8 @@ exports[`renders ./components/button/demo/legacy-group.md correctly 1`] = `
        </span>
      </button>
    </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
  <div>
    <div
      class="ant-btn-group"
@@ -730,8 +730,8 @@ exports[`renders ./components/button/demo/legacy-group.md correctly 1`] = `
        </span>
      </button>
    </div>
-  </div>
-  <br />
+  </div>,
+  <br />,
  <div>
    <div
      class="ant-btn-group ant-btn-group-lg"
@@ -810,8 +810,8 @@ exports[`renders ./components/button/demo/legacy-group.md correctly 1`] = `
        </span>
      </button>
    </div>
-  </div>
-</div>
+  </div>,
+]
 `;

 exports[`renders ./components/button/demo/loading.md correctly 1`] = `
@@ -975,7 +975,7 @@ Array [
 `;

 exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
-<div>
+Array [
  <button
    class="ant-btn ant-btn-primary"
    type="button"
@@ -983,7 +983,7 @@ exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
    <span>
      primary
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn"
    type="button"
@@ -991,7 +991,7 @@ exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
    <span>
      secondary
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-dropdown-trigger"
    type="button"
@@ -1019,12 +1019,12 @@ exports[`renders ./components/button/demo/multiple.md correctly 1`] = `
        />
      </svg>
    </span>
-  </button>
-</div>
+  </button>,
+]
 `;

 exports[`renders ./components/button/demo/size.md correctly 1`] = `
-<div>
+Array [
  <div
    class="ant-radio-group ant-radio-group-outline"
  >
@@ -1086,9 +1086,9 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
        Small
      </span>
    </label>
-  </div>
-  <br />
-  <br />
+  </div>,
+  <br />,
+  <br />,
  <button
    class="ant-btn ant-btn-primary ant-btn-lg"
    type="button"
@@ -1096,7 +1096,7 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
    <span>
      Primary
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-lg"
    type="button"
@@ -1104,7 +1104,7 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
    <span>
      Default
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-dashed ant-btn-lg"
    type="button"
@@ -1112,8 +1112,8 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
    <span>
      Dashed
    </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
  <button
    class="ant-btn ant-btn-link ant-btn-lg"
    type="button"
@@ -1121,8 +1121,8 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
    <span>
      Link
    </span>
-  </button>
-  <br />
+  </button>,
+  <br />,
  <button
    class="ant-btn ant-btn-primary ant-btn-lg ant-btn-icon-only"
    type="button"
@@ -1147,7 +1147,7 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
        />
      </svg>
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-primary ant-btn-circle ant-btn-lg ant-btn-icon-only"
    type="button"
@@ -1172,7 +1172,7 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
        />
      </svg>
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg ant-btn-icon-only"
    type="button"
@@ -1197,7 +1197,7 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
        />
      </svg>
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-primary ant-btn-round ant-btn-lg"
    type="button"
@@ -1225,7 +1225,7 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
    <span>
      Download
    </span>
-  </button>
+  </button>,
  <button
    class="ant-btn ant-btn-primary ant-btn-lg"
    type="button"
@@ -1253,6 +1253,6 @@ exports[`renders ./components/button/demo/size.md correctly 1`] = `
    <span>
      Download
    </span>
-  </button>
-</div>
+  </button>,
+]
 `;
--- a/components/button/tests/type.test.tsx
+++ b/components/button/tests/type.test.tsx
@@ -170,6 +170,8 @@ describe('Button', () => {
    jest.useFakeTimers();
    const wrapper = mount(<Button loading={{ delay: 1000 }} />);
    wrapper.update();
+    wrapper.setProps({ loading: { delay: 2000 } });
+    wrapper.update();
    wrapper.setProps({ loading: false });

    act(() => {
--- a/components/button/button.tsx
+++ b/components/button/button.tsx
@@ -121,6 +121,8 @@ interface CompoundedComponent
  __ANT_BUTTON: boolean;
 }

+type Loading = number | boolean;
+
 const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (props, ref) => {
  const {
    loading,
@@ -138,7 +140,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
  } = props;

  const size = React.useContext(SizeContext);
-  const [innerLoading, setLoading] = React.useState(loading);
+  const [innerLoading, setLoading] = React.useState<Loading>(!!loading);
  const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
  const { getPrefixCls, autoInsertSpaceInButton, direction } = React.useContext(ConfigContext);
  const buttonRef = (ref as any) || React.createRef<HTMLElement>();
@@ -163,16 +165,24 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
    }
  };

+  // =============== Update Loading ===============
+  let loadingOrDelay: Loading;
+  if (typeof loading === 'object' && loading.delay) {
+    loadingOrDelay = loading.delay || true;
+  } else {
+    loadingOrDelay = !!loading;
+  }
+
  React.useEffect(() => {
-    if (typeof loading === 'object' && loading.delay) {
+    clearTimeout(delayTimeoutRef.current);
+    if (typeof loadingOrDelay === 'number') {
      delayTimeoutRef.current = window.setTimeout(() => {
-        setLoading(loading);
-      }, loading.delay);
+        setLoading(loadingOrDelay);
+      }, loadingOrDelay);
    } else {
-      clearTimeout(delayTimeoutRef.current);
-      setLoading(loading);
+      setLoading(loadingOrDelay);
    }
-  }, [loading]);
+  }, [loadingOrDelay]);

  React.useEffect(() => {
    fixTwoCNChar();
@@ -230,7 +240,7 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
    icon && !innerLoading ? (
      icon
    ) : (
-      <LoadingIcon existIcon={!!icon} prefixCls={prefixCls} loading={innerLoading} />
+      <LoadingIcon existIcon={!!icon} prefixCls={prefixCls} loading={!!innerLoading} />
    );

  const kids =
--- a/components/button/demo/block.md
+++ b/components/button/demo/block.md
@@ -17,7 +17,7 @@ title:
 import { Button } from 'antd';

 ReactDOM.render(
-  <div>
+  <>
    <Button type="primary" block>
      Primary
    </Button>
@@ -28,7 +28,7 @@ ReactDOM.render(
    <Button type="link" block>
      Link
    </Button>
-  </div>,
+  </>,
  mountNode,
 );
 ```
--- a/components/button/demo/disabled.md
+++ b/components/button/demo/disabled.md
@@ -17,7 +17,7 @@ To mark a button as disabled, add the `disabled` property to the `Button`.
 import { Button } from 'antd';

 ReactDOM.render(
-  <div>
+  <>
    <Button type="primary">Primary</Button>
    <Button type="primary" disabled>
      Primary(disabled)
@@ -65,7 +65,7 @@ ReactDOM.render(
        Ghost(disabled)
      </Button>
    </div>
-  </div>,
+  </>,
  mountNode,
 );
 ```
--- a/components/button/demo/icon.md
+++ b/components/button/demo/icon.md
@@ -22,7 +22,7 @@ import { Button, Tooltip } from 'antd';
 import { SearchOutlined } from '@ant-design/icons';

 ReactDOM.render(
-  <div>
+  <>
    <Tooltip title="search">
      <Button type="primary" shape="circle" icon={<SearchOutlined />} />
    </Tooltip>
@@ -47,7 +47,7 @@ ReactDOM.render(
    <Button type="dashed" icon={<SearchOutlined />}>
      Search
    </Button>
-  </div>,
+  </>,
  mountNode,
 );
 ```
--- a/components/button/demo/legacy-group.md
+++ b/components/button/demo/legacy-group.md
@@ -36,13 +36,13 @@ function getGroup(props) {
 }

 ReactDOM.render(
-  <div>
+  <>
    {getGroup({ size: 'small' })}
    <br />
    {getGroup()}
    <br />
    {getGroup({ size: 'large' })}
-  </div>,
+  </>,
  mountNode,
 );
 ```
--- a/components/button/demo/multiple.md
+++ b/components/button/demo/multiple.md
@@ -30,7 +30,7 @@ const menu = (
 );

 ReactDOM.render(
-  <div>
+  <>
    <Button type="primary">primary</Button>
    <Button>secondary</Button>
    <Dropdown overlay={menu}>
@@ -38,7 +38,7 @@ ReactDOM.render(
        Actions <DownOutlined />
      </Button>
    </Dropdown>
-  </div>,
+  </>,
  mountNode,
 );
 ```
--- a/components/button/demo/size.md
+++ b/components/button/demo/size.md
@@ -33,7 +33,7 @@ class ButtonSize extends React.Component {
  render() {
    const { size } = this.state;
    return (
-      <div>
+      <>
        <Radio.Group value={size} onChange={this.handleSizeChange}>
          <Radio.Button value="large">Large</Radio.Button>
          <Radio.Button value="default">Default</Radio.Button>
@@ -62,7 +62,7 @@ class ButtonSize extends React.Component {
        <Button type="primary" icon={<DownloadOutlined />} size={size}>
          Download
        </Button>
-      </div>
+      </>
    );
  }
 }
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@@ -2,7 +2,7 @@
 category: Components
 type: General
 title: Button
-cover: https://gw.alipayobjects.com/zos/antfincdn/qZWIjVIkQ7/Button.svg
+cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
 ---

 To trigger an operation.
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@@ -3,7 +3,7 @@ category: Components
 type: 通用
 title: Button
 subtitle: 按钮
-cover: https://gw.alipayobjects.com/zos/antfincdn/qZWIjVIkQ7/Button.svg
+cover: https://gw.alipayobjects.com/zos/alicdn/fNUKzY1sk/Button.svg
 ---

 按钮用于开始一个即时操作。
--- a/components/calendar/tests/index.test.js
+++ b/components/calendar/tests/index.test.js
@@ -127,15 +127,27 @@ describe('Calendar', () => {
    MockDate.reset();
  });

-  it('should trigger onPanelChange when click last month of date', () => {
-    const onPanelChange = jest.fn();
-    const date = new Moment('1990-09-03');
-    const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
+  describe('onPanelChange', () => {
+    it('trigger when click last month of date', () => {
+      const onPanelChange = jest.fn();
+      const date = new Moment('1990-09-03');
+      const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);

-    wrapper.find('.ant-picker-cell').at(0).simulate('click');
+      wrapper.find('.ant-picker-cell').at(0).simulate('click');

-    expect(onPanelChange).toHaveBeenCalled();
-    expect(onPanelChange.mock.calls[0][0].month()).toEqual(date.month() - 1);
+      expect(onPanelChange).toHaveBeenCalled();
+      expect(onPanelChange.mock.calls[0][0].month()).toEqual(date.month() - 1);
+    });
+
+    it('not trigger when in same month', () => {
+      const onPanelChange = jest.fn();
+      const date = new Moment('1990-09-03');
+      const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
+
+      wrapper.find('.ant-picker-cell').at(10).simulate('click');
+
+      expect(onPanelChange).not.toHaveBeenCalled();
+    });
  });

  it('switch should work correctly without prop mode', async () => {
--- a/components/calendar/generateCalendar.tsx
+++ b/components/calendar/generateCalendar.tsx
@@ -1,4 +1,5 @@
 import * as React from 'react';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import classNames from 'classnames';
 import padStart from 'lodash/padStart';
 import { PickerPanel as RCPickerPanel } from 'rc-picker';
@@ -62,13 +63,13 @@ export interface CalendarProps<DateType> {
 }

 function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
+  function isSameYear(date1: DateType, date2: DateType) {
+    return date1 && date2 && generateConfig.getYear(date1) === generateConfig.getYear(date2);
+  }
+
  function isSameMonth(date1: DateType, date2: DateType) {
    return (
-      date1 === date2 ||
-      (date1 &&
-        date2 &&
-        generateConfig.getYear(date1) === generateConfig.getYear(date2) &&
-        generateConfig.getMonth(date1) === generateConfig.getMonth(date2))
+      isSameYear(date1, date2) && generateConfig.getMonth(date1) === generateConfig.getMonth(date2)
    );
  }

@@ -106,15 +107,15 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
    // ====================== State =======================

    // Value
-    const [innerValue, setInnerValue] = React.useState(
-      () => value || defaultValue || generateConfig.getNow(),
-    );
-
-    const mergedValue = value || innerValue;
+    const [mergedValue, setMergedValue] = useMergedState(() => value || generateConfig.getNow(), {
+      defaultValue,
+      value,
+    });

    // Mode
-    const [innerMode, setInnerMode] = React.useState(() => mode || 'month');
-    const mergedMode = mode || innerMode;
+    const [mergedMode, setMergedMode] = useMergedState('month', {
+      value: mode,
+    });
    const panelMode = React.useMemo<'month' | 'date'>(
      () => (mergedMode === 'year' ? 'month' : 'date'),
      [mergedMode],
@@ -142,10 +143,16 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
    };

    const triggerChange = (date: DateType) => {
-      setInnerValue(date);
+      setMergedValue(date);

      if (!isSameDate(date, mergedValue)) {
-        triggerPanelChange(date, mergedMode);
+        // Trigger when month panel switch month
+        if (
+          (panelMode === 'date' && !isSameMonth(date, mergedValue)) ||
+          (panelMode === 'month' && !isSameYear(date, mergedValue))
+        ) {
+          triggerPanelChange(date, mergedMode);
+        }

        if (onChange) {
          onChange(date);
@@ -154,7 +161,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
    };

    const triggerModeChange = (newMode: CalendarMode) => {
-      setInnerMode(newMode);
+      setMergedMode(newMode);
      triggerPanelChange(mergedValue, newMode);
    };

--- a/components/calendar/locale/ar_EG.tsx
+++ b/components/calendar/locale/ar_EG.tsx
@@ -1,3 +1,3 @@
-import ar_EG from '../../date-picker/locale/ar_EG';
+import arEG from '../../date-picker/locale/ar_EG';

-export default ar_EG;
+export default arEG;
--- a/components/calendar/locale/az_AZ.tsx
+++ b/components/calendar/locale/az_AZ.tsx
@@ -1,3 +1,3 @@
-import az_AZ from '../../date-picker/locale/az_AZ';
+import azAZ from '../../date-picker/locale/az_AZ';

-export default az_AZ;
+export default azAZ;
--- a/components/calendar/locale/bg_BG.tsx
+++ b/components/calendar/locale/bg_BG.tsx
@@ -1,3 +1,3 @@
-import bg_BG from '../../date-picker/locale/bg_BG';
+import bgBG from '../../date-picker/locale/bg_BG';

-export default bg_BG;
+export default bgBG;
--- a/components/calendar/locale/ca_ES.tsx
+++ b/components/calendar/locale/ca_ES.tsx
@@ -1,3 +1,3 @@
-import ca_ES from '../../date-picker/locale/ca_ES';
+import caES from '../../date-picker/locale/ca_ES';

-export default ca_ES;
+export default caES;
--- a/components/calendar/locale/cs_CZ.tsx
+++ b/components/calendar/locale/cs_CZ.tsx
@@ -1,3 +1,3 @@
-import cs_CZ from '../../date-picker/locale/cs_CZ';
+import csCZ from '../../date-picker/locale/cs_CZ';

-export default cs_CZ;
+export default csCZ;
--- a/components/calendar/locale/da_DK.tsx
+++ b/components/calendar/locale/da_DK.tsx
@@ -1,3 +1,3 @@
-import da_DK from '../../date-picker/locale/da_DK';
+import daDK from '../../date-picker/locale/da_DK';

-export default da_DK;
+export default daDK;
--- a/components/calendar/locale/de_DE.tsx
+++ b/components/calendar/locale/de_DE.tsx
@@ -1,3 +1,3 @@
-import de_DE from '../../date-picker/locale/de_DE';
+import deDE from '../../date-picker/locale/de_DE';

-export default de_DE;
+export default deDE;
--- a/components/calendar/locale/el_GR.tsx
+++ b/components/calendar/locale/el_GR.tsx
@@ -1,3 +1,3 @@
-import el_GR from '../../date-picker/locale/el_GR';
+import elGR from '../../date-picker/locale/el_GR';

-export default el_GR;
+export default elGR;
--- a/components/calendar/locale/en_GB.tsx
+++ b/components/calendar/locale/en_GB.tsx
@@ -1,3 +1,3 @@
-import en_GB from '../../date-picker/locale/en_GB';
+import enGB from '../../date-picker/locale/en_GB';

-export default en_GB;
+export default enGB;
--- a/components/calendar/locale/en_US.tsx
+++ b/components/calendar/locale/en_US.tsx
@@ -1,3 +1,3 @@
-import en_US from '../../date-picker/locale/en_US';
+import enUS from '../../date-picker/locale/en_US';

-export default en_US;
+export default enUS;
--- a/components/calendar/locale/es_ES.tsx
+++ b/components/calendar/locale/es_ES.tsx
@@ -1,3 +1,3 @@
-import es_ES from '../../date-picker/locale/es_ES';
+import esES from '../../date-picker/locale/es_ES';

-export default es_ES;
+export default esES;
--- a/components/calendar/locale/et_EE.tsx
+++ b/components/calendar/locale/et_EE.tsx
@@ -1,3 +1,3 @@
-import et_EE from '../../date-picker/locale/et_EE';
+import etEE from '../../date-picker/locale/et_EE';

-export default et_EE;
+export default etEE;
--- a/components/calendar/locale/fa_IR.tsx
+++ b/components/calendar/locale/fa_IR.tsx
@@ -1,3 +1,3 @@
-import fa_IR from '../../date-picker/locale/fa_IR';
+import faIR from '../../date-picker/locale/fa_IR';

-export default fa_IR;
+export default faIR;
--- a/components/calendar/locale/fi_FI.tsx
+++ b/components/calendar/locale/fi_FI.tsx
@@ -1,3 +1,3 @@
-import fi_FI from '../../date-picker/locale/fi_FI';
+import fiFI from '../../date-picker/locale/fi_FI';

-export default fi_FI;
+export default fiFI;
--- a/components/calendar/locale/fr_BE.tsx
+++ b/components/calendar/locale/fr_BE.tsx
@@ -1,3 +1,3 @@
-import fr_BE from '../../date-picker/locale/fr_BE';
+import frBE from '../../date-picker/locale/fr_BE';

-export default fr_BE;
+export default frBE;
--- a/components/calendar/locale/fr_FR.tsx
+++ b/components/calendar/locale/fr_FR.tsx
@@ -1,3 +1,3 @@
-import fr_FR from '../../date-picker/locale/fr_FR';
+import frFR from '../../date-picker/locale/fr_FR';

-export default fr_FR;
+export default frFR;
--- a/components/calendar/locale/ga_IE.tsx
+++ b/components/calendar/locale/ga_IE.tsx
@@ -1,3 +1,3 @@
-import ga_IE from '../../date-picker/locale/ga_IE';
+import gaIE from '../../date-picker/locale/ga_IE';

-export default ga_IE;
+export default gaIE;
--- a/components/calendar/locale/he_IL.tsx
+++ b/components/calendar/locale/he_IL.tsx
@@ -1,3 +1,3 @@
-import he_IL from '../../date-picker/locale/he_IL';
+import heIL from '../../date-picker/locale/he_IL';

-export default he_IL;
+export default heIL;
--- a/components/calendar/locale/hi_IN.tsx
+++ b/components/calendar/locale/hi_IN.tsx
@@ -1,3 +1,3 @@
-import hi_IN from '../../date-picker/locale/hi_IN';
+import hiIN from '../../date-picker/locale/hi_IN';

-export default hi_IN;
+export default hiIN;
--- a/components/calendar/locale/hr_HR.tsx
+++ b/components/calendar/locale/hr_HR.tsx
@@ -1,3 +1,3 @@
-import hr_HR from '../../date-picker/locale/hr_HR';
+import hrHR from '../../date-picker/locale/hr_HR';

-export default hr_HR;
+export default hrHR;
--- a/components/calendar/locale/hu_HU.tsx
+++ b/components/calendar/locale/hu_HU.tsx
@@ -1,3 +1,3 @@
-import hu_HU from '../../date-picker/locale/hu_HU';
+import huHU from '../../date-picker/locale/hu_HU';

-export default hu_HU;
+export default huHU;
--- a/components/calendar/locale/id_ID.tsx
+++ b/components/calendar/locale/id_ID.tsx
@@ -1,3 +1,3 @@
-import id_ID from '../../date-picker/locale/id_ID';
+import idID from '../../date-picker/locale/id_ID';

-export default id_ID;
+export default idID;
--- a/components/calendar/locale/is_IS.tsx
+++ b/components/calendar/locale/is_IS.tsx
@@ -1,3 +1,3 @@
-import is_IS from '../../date-picker/locale/is_IS';
+import isIS from '../../date-picker/locale/is_IS';

-export default is_IS;
+export default isIS;
--- a/components/calendar/locale/it_IT.tsx
+++ b/components/calendar/locale/it_IT.tsx
@@ -1,3 +1,3 @@
-import it_IT from '../../date-picker/locale/it_IT';
+import itIT from '../../date-picker/locale/it_IT';

-export default it_IT;
+export default itIT;
--- a/components/calendar/locale/ja_JP.tsx
+++ b/components/calendar/locale/ja_JP.tsx
@@ -1,3 +1,3 @@
-import ja_JP from '../../date-picker/locale/ja_JP';
+import jaJP from '../../date-picker/locale/ja_JP';

-export default ja_JP;
+export default jaJP;
--- a/components/calendar/locale/kn_IN.tsx
+++ b/components/calendar/locale/kn_IN.tsx
@@ -1,3 +1,3 @@
-import kn_IN from '../../date-picker/locale/kn_IN';
+import knIN from '../../date-picker/locale/kn_IN';

-export default kn_IN;
+export default knIN;
--- a/components/calendar/locale/ko_KR.tsx
+++ b/components/calendar/locale/ko_KR.tsx
@@ -1,3 +1,3 @@
-import ko_KR from '../../date-picker/locale/ko_KR';
+import koKR from '../../date-picker/locale/ko_KR';

-export default ko_KR;
+export default koKR;
--- a/components/calendar/locale/ku_IQ.tsx
+++ b/components/calendar/locale/ku_IQ.tsx
@@ -1,3 +1,3 @@
-import ku_IQ from '../../date-picker/locale/ku_IQ';
+import kuIQ from '../../date-picker/locale/ku_IQ';

-export default ku_IQ;
+export default kuIQ;
--- a/components/calendar/locale/lv_LV.tsx
+++ b/components/calendar/locale/lv_LV.tsx
@@ -1,3 +1,3 @@
-import lv_LV from '../../date-picker/locale/lv_LV';
+import lvLV from '../../date-picker/locale/lv_LV';

-export default lv_LV;
+export default lvLV;
--- a/components/calendar/locale/mk_MK.tsx
+++ b/components/calendar/locale/mk_MK.tsx
@@ -1,3 +1,3 @@
-import mk_MK from '../../date-picker/locale/mk_MK';
+import mkMK from '../../date-picker/locale/mk_MK';

-export default mk_MK;
+export default mkMK;
--- a/components/calendar/locale/mn_MN.tsx
+++ b/components/calendar/locale/mn_MN.tsx
@@ -1,3 +1,3 @@
-import mn_MN from '../../date-picker/locale/mn_MN';
+import mnMN from '../../date-picker/locale/mn_MN';

-export default mn_MN;
+export default mnMN;
--- a/components/calendar/locale/ms_MY.tsx
+++ b/components/calendar/locale/ms_MY.tsx
@@ -1,3 +1,3 @@
-import ms_MY from '../../date-picker/locale/ms_MY';
+import msMY from '../../date-picker/locale/ms_MY';

-export default ms_MY;
+export default msMY;
--- a/components/calendar/locale/nb_NO.tsx
+++ b/components/calendar/locale/nb_NO.tsx
@@ -1,3 +1,3 @@
-import nb_NO from '../../date-picker/locale/nb_NO';
+import nbNO from '../../date-picker/locale/nb_NO';

-export default nb_NO;
+export default nbNO;
--- a/components/calendar/locale/nl_BE.tsx
+++ b/components/calendar/locale/nl_BE.tsx
@@ -1,3 +1,3 @@
-import nl_BE from '../../date-picker/locale/nl_BE';
+import nlBE from '../../date-picker/locale/nl_BE';

-export default nl_BE;
+export default nlBE;
--- a/components/calendar/locale/nl_NL.tsx
+++ b/components/calendar/locale/nl_NL.tsx
@@ -1,3 +1,3 @@
-import nl_NL from '../../date-picker/locale/nl_NL';
+import nlNL from '../../date-picker/locale/nl_NL';

-export default nl_NL;
+export default nlNL;
--- a/components/calendar/locale/pl_PL.tsx
+++ b/components/calendar/locale/pl_PL.tsx
@@ -1,3 +1,3 @@
-import pl_PL from '../../date-picker/locale/pl_PL';
+import plPL from '../../date-picker/locale/pl_PL';

-export default pl_PL;
+export default plPL;
--- a/components/calendar/locale/pt_BR.tsx
+++ b/components/calendar/locale/pt_BR.tsx
@@ -1,3 +1,3 @@
-import pt_BR from '../../date-picker/locale/pt_BR';
+import ptBR from '../../date-picker/locale/pt_BR';

-export default pt_BR;
+export default ptBR;
--- a/components/calendar/locale/pt_PT.tsx
+++ b/components/calendar/locale/pt_PT.tsx
@@ -1,3 +1,3 @@
-import pt_PT from '../../date-picker/locale/pt_PT';
+import ptPT from '../../date-picker/locale/pt_PT';

-export default pt_PT;
+export default ptPT;
--- a/components/calendar/locale/ro_RO.tsx
+++ b/components/calendar/locale/ro_RO.tsx
@@ -1,3 +1,3 @@
-import ro_RO from '../../date-picker/locale/ro_RO';
+import roRO from '../../date-picker/locale/ro_RO';

-export default ro_RO;
+export default roRO;
--- a/components/calendar/locale/ru_RU.tsx
+++ b/components/calendar/locale/ru_RU.tsx
@@ -1,3 +1,3 @@
-import ru_RU from '../../date-picker/locale/ru_RU';
+import ruRU from '../../date-picker/locale/ru_RU';

-export default ru_RU;
+export default ruRU;
--- a/components/calendar/locale/sk_SK.tsx
+++ b/components/calendar/locale/sk_SK.tsx
@@ -1,3 +1,3 @@
-import sk_SK from '../../date-picker/locale/sk_SK';
+import skSK from '../../date-picker/locale/sk_SK';

-export default sk_SK;
+export default skSK;
--- a/components/calendar/locale/sl_SI.tsx
+++ b/components/calendar/locale/sl_SI.tsx
@@ -1,3 +1,3 @@
-import sl_SI from '../../date-picker/locale/sl_SI';
+import slSI from '../../date-picker/locale/sl_SI';

-export default sl_SI;
+export default slSI;
--- a/components/calendar/locale/sr_RS.tsx
+++ b/components/calendar/locale/sr_RS.tsx
@@ -1,3 +1,3 @@
-import sr_RS from '../../date-picker/locale/sr_RS';
+import srRS from '../../date-picker/locale/sr_RS';

-export default sr_RS;
+export default srRS;
--- a/components/calendar/locale/sv_SE.tsx
+++ b/components/calendar/locale/sv_SE.tsx
@@ -1,3 +1,3 @@
-import sv_SE from '../../date-picker/locale/sv_SE';
+import svSE from '../../date-picker/locale/sv_SE';

-export default sv_SE;
+export default svSE;
--- a/components/calendar/locale/ta_IN.tsx
+++ b/components/calendar/locale/ta_IN.tsx
@@ -1,3 +1,3 @@
-import ta_IN from '../../date-picker/locale/ta_IN';
+import taIN from '../../date-picker/locale/ta_IN';

-export default ta_IN;
+export default taIN;
--- a/components/calendar/locale/th_TH.tsx
+++ b/components/calendar/locale/th_TH.tsx
@@ -1,3 +1,3 @@
-import th_TH from '../../date-picker/locale/th_TH';
+import thTH from '../../date-picker/locale/th_TH';

-export default th_TH;
+export default thTH;
--- a/components/calendar/locale/tr_TR.tsx
+++ b/components/calendar/locale/tr_TR.tsx
@@ -1,3 +1,3 @@
-import tr_TR from '../../date-picker/locale/tr_TR';
+import trTR from '../../date-picker/locale/tr_TR';

-export default tr_TR;
+export default trTR;
--- a/components/calendar/locale/uk_UA.tsx
+++ b/components/calendar/locale/uk_UA.tsx
@@ -1,3 +1,3 @@
-import uk_UA from '../../date-picker/locale/uk_UA';
+import ukUA from '../../date-picker/locale/uk_UA';

-export default uk_UA;
+export default ukUA;
--- a/components/calendar/locale/vi_VN.tsx
+++ b/components/calendar/locale/vi_VN.tsx
@@ -1,3 +1,3 @@
-import vi_VN from '../../date-picker/locale/vi_VN';
+import viVN from '../../date-picker/locale/vi_VN';

-export default vi_VN;
+export default viVN;
--- a/components/calendar/locale/zh_CN.tsx
+++ b/components/calendar/locale/zh_CN.tsx
@@ -1,3 +1,3 @@
-import zh_CN from '../../date-picker/locale/zh_CN';
+import zhCN from '../../date-picker/locale/zh_CN';

-export default zh_CN;
+export default zhCN;
--- a/components/calendar/locale/zh_TW.tsx
+++ b/components/calendar/locale/zh_TW.tsx
@@ -1,3 +1,3 @@
-import zh_TW from '../../date-picker/locale/zh_TW';
+import zhTW from '../../date-picker/locale/zh_TW';

-export default zh_TW;
+export default zhTW;
--- a/components/card/tests/snapshots/demo.test.js.snap
+++ b/components/card/tests/snapshots/demo.test.js.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP

 exports[`renders ./components/card/demo/basic.md correctly 1`] = `
-<div>
+Array [
  <div
    class="ant-card ant-card-bordered"
    style="width:300px"
@@ -41,7 +41,7 @@ exports[`renders ./components/card/demo/basic.md correctly 1`] = `
        Card content
      </p>
    </div>
-  </div>
+  </div>,
  <div
    class="ant-card ant-card-bordered ant-card-small"
    style="width:300px"
@@ -81,8 +81,8 @@ exports[`renders ./components/card/demo/basic.md correctly 1`] = `
        Card content
      </p>
    </div>
-  </div>
-</div>
+  </div>,
+]
 `;

 exports[`renders ./components/card/demo/border-less.md correctly 1`] = `
@@ -408,7 +408,7 @@ exports[`renders ./components/card/demo/inner.md correctly 1`] = `
 `;

 exports[`renders ./components/card/demo/loading.md correctly 1`] = `
-<div>
+Array [
  <button
    aria-checked="false"
    class="ant-switch"
@@ -421,7 +421,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
    <span
      class="ant-switch-inner"
    />
-  </button>
+  </button>,
  <div
    class="ant-card ant-card-loading ant-card-bordered"
    style="width:300px;margin-top:16px"
@@ -539,7 +539,7 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
        </div>
      </div>
    </div>
-  </div>
+  </div>,
  <div
    class="ant-card ant-card-bordered"
    style="width:300px;margin-top:16px"
@@ -655,8 +655,8 @@ exports[`renders ./components/card/demo/loading.md correctly 1`] = `
        </span>
      </li>
    </ul>
-  </div>
-</div>
+  </div>,
+]
 `;

 exports[`renders ./components/card/demo/meta.md correctly 1`] = `
@@ -812,7 +812,7 @@ exports[`renders ./components/card/demo/simple.md correctly 1`] = `
 `;

 exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
-<div>
+Array [
  <div
    class="ant-card ant-card-bordered ant-card-contain-tabs"
    style="width:100%"
@@ -928,7 +928,7 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
              aria-hidden="true"
              class="ant-tabs-tabpane"
              role="tabpanel"
-              style="display:none"
+              style="visibility:hidden;height:0;overflow-y:hidden"
              tabindex="-1"
            />
          </div>
@@ -942,9 +942,9 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
        content1
      </p>
    </div>
-  </div>
-  <br />
-  <br />
+  </div>,
+  <br />,
+  <br />,
  <div
    class="ant-card ant-card-bordered ant-card-contain-tabs"
    style="width:100%"
@@ -1052,12 +1052,13 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
        >
          <div
            class="ant-tabs-content ant-tabs-content-top"
+            style="margin-left:-100%"
          >
            <div
              aria-hidden="true"
              class="ant-tabs-tabpane"
              role="tabpanel"
-              style="display:none"
+              style="visibility:hidden;height:0;overflow-y:hidden"
              tabindex="-1"
            />
            <div
@@ -1070,7 +1071,7 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
              aria-hidden="true"
              class="ant-tabs-tabpane"
              role="tabpanel"
-              style="display:none"
+              style="visibility:hidden;height:0;overflow-y:hidden"
              tabindex="-1"
            />
          </div>
@@ -1084,6 +1085,6 @@ exports[`renders ./components/card/demo/tabs.md correctly 1`] = `
        app content
      </p>
    </div>
-  </div>
-</div>
+  </div>,
+]
 `;
--- a/components/card/demo/basic.md
+++ b/components/card/demo/basic.md
@@ -17,7 +17,7 @@ A basic card containing a title, content and an extra corner content. Supports t
 import { Card } from 'antd';

 ReactDOM.render(
-  <div>
+  <>
    <Card title="Default size card" extra={<a href="#">More</a>} style={{ width: 300 }}>
      <p>Card content</p>
      <p>Card content</p>
@@ -28,7 +28,7 @@ ReactDOM.render(
      <p>Card content</p>
      <p>Card content</p>
    </Card>
-  </div>,
+  </>,
  mountNode,
 );
 ```
--- a/components/card/demo/border-less.md
+++ b/components/card/demo/border-less.md
@@ -30,8 +30,8 @@ ReactDOM.render(

 ```css
 .site-card-border-less-wrapper {
-  background: #ececec;
  padding: 30px;
+  background: #ececec;
 }
 ```

--- a/components/card/demo/in-column.md
+++ b/components/card/demo/in-column.md
@@ -40,15 +40,13 @@ ReactDOM.render(
 );
 ```

-```css
-.site-card-wrapper {
-  background: #ececec;
-  padding: 30px;
-}
-```
-
 <style>
-  [data-theme="dark"] .site-card-wrapper {
-    background: #303030;
-  }
+.site-card-wrapper {
+  padding: 30px;
+  background: #ececec;
+}
+
+[data-theme="dark"] .site-card-wrapper {
+  background: #303030;
+}
 </style>
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
07akioni	a91bd69cda	docs: 4.3.4 changelog (#24981 ) * docs: 4.3.4 changelog * chore: changelog format * docs: add missing changelogs of 4.3.4 * docs: reorder 4.3.4 changelog * docs: use flag emoji on 4.3.4 i18n changelog * docs: reorder 4.3.4 changelog * docs: reorder 4.3.4 changelog * docs: version 4.3.4 * docs: Update CHANGELOG.zh-CN.md Co-authored-by: 偏右 <afc163@gmail.com> * docs: fix changelog 4.3.4 Co-authored-by: 偏右 <afc163@gmail.com>	2020-06-14 21:45:47 +08:00
二货机器人	0f46173410	fix: Form.validateTrigger not work (#24979 ) * fix: Merged validateTrigger * test case	2020-06-14 14:15:17 +08:00
hehe	ae49280ca0	chore: rm incorrect table props (emptyText) (#24948 )	2020-06-13 02:29:20 +08:00
二手掉包工程师	544f407dd1	chore: add displayName Search name (#24965 )	2020-06-12 23:32:06 +08:00
samir elsharkawy	64b7b551e2	feat: Improve fr_FR localisations (#24962 ) - Add missing `Table` fields - Add `PageHeader` - Update one field in `Transfer` to stay consistent - Make all `Text` localisation upper case to stay consistent	2020-06-12 23:22:45 +08:00
zefeng	02021836e1	chore: fix tabs-demo style in compact mode (#24922 )	2020-06-12 23:17:45 +08:00
二货机器人	8a2ccae477	fix: Table shouldCellUpdate (#24963 )	2020-06-12 22:14:42 +08:00
二手掉包工程师	f7934f5df2	refactor: rewrite Search with hook (#24901 ) * wip: rewrite Search with hook * fix: use forwardRef * fix: use forwardRef * test: add prevent test * test: refine code	2020-06-12 18:50:36 +08:00
xrkffgg	6fb38c342f	fix: add modal confirm default icon (#24956 )	2020-06-12 18:11:42 +08:00
偏右	31a9fffeac	fix: List grid not working in React.Fragment or wrapped List.Item (#24955 ) * fix: List grid not working for Fragment or wrapping List.Item close #24553 close #24828 * remove unused code * no need extra wrap div for List without grid prop	2020-06-12 18:11:29 +08:00
07akioni	f6c8f81484	fix: shoundn't keep table filterDropdown inner status in controlled mode (#24952 ) * fix: shoundn't keep table filterDropdown inner status in controlled mode * chore: remove useless code in table.filter.test	2020-06-12 18:05:46 +08:00
sosohime	905ddfc2c7	Avatar falling back to children on image error (#24944 ) Co-authored-by: 贺业晟 <heyesheng@bytedance.com>	2020-06-12 15:26:40 +08:00
07akioni	ec87ea408b	fix: getTargetContainer is not omit in Drawer (#24938 )	2020-06-12 10:39:52 +08:00
zoomdong	e129b0aae9	refactor(avatar): rewrite with hook (#24925 ) * refactor Avatar * add snapshot * fix: lint	2020-06-12 10:36:53 +08:00
Miclle Zheng	3d51c801e6	Upload support patch method (#24936 )	2020-06-12 10:31:07 +08:00
二货机器人	ada59b9d37	fix: Field id (#24929 )	2020-06-11 22:25:58 +08:00
二货机器人	83b028c7fe	fix: Tabs dropdown overflow (#24928 )	2020-06-11 22:08:12 +08:00
xrkffgg	2331ed0b39	docs: reduce typography demo (#24915 )	2020-06-11 21:20:08 +08:00
07akioni	718f362aea	docs: remove combobox related descriptions of Select (#24923 )	2020-06-11 21:19:58 +08:00
07akioni	6cc16fb7f5	docs: adapt table edit-rows demo's style to 4.0 (#24926 )	2020-06-11 21:18:18 +08:00
xrkffgg	7a5939fa37	feat: add `@rate-star-hover-scale` (#24917 )	2020-06-11 20:51:55 +08:00
偏右	86e4cd1c0f	✅ add test case to Select (#24912 )	2020-06-11 18:01:45 +08:00
xrkffgg	cb544f7feb	docs: reduce button demo (#24908 )	2020-06-11 15:24:24 +08:00
Amumu	c7c6e9fe4f	fix Import in Browser link not found (#24910 )	2020-06-11 15:16:11 +08:00
dependabot-preview[bot]	bb947709f9	chore(deps-dev): bump @types/jest from 25.2.3 to 26.0.0 (#24894 ) Bumps [@types/jest](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/jest) from 25.2.3 to 26.0.0. - [Release notes](https://github.com/DefinitelyTyped/DefinitelyTyped/releases) - [Commits](https://github.com/DefinitelyTyped/DefinitelyTyped/commits/HEAD/types/jest) Signed-off-by: dependabot-preview[bot] <support@dependabot.com> Co-authored-by: dependabot-preview[bot] <27856297+dependabot-preview[bot]@users.noreply.github.com>	2020-06-11 13:19:32 +08:00
07akioni	7519fd14df	docs: caveat about testing in contributing.md (#24893 )	2020-06-11 12:32:55 +08:00
Moni	d8181f84b1	docs: fix typos and grammar (#24899 ) * docs: fix typo * docs: fix grammar	2020-06-11 10:02:31 +08:00
南小北	1f04f78707	test: fix jest with less import (#24900 )	2020-06-11 09:59:01 +08:00
Hanz Luo	8af5e65467	style: optimize comment actions style (#24869 )	2020-06-10 12:44:19 +08:00
afc163	18dc8bf961	docs: debounce reportSearch in overview page	2020-06-10 11:46:45 +08:00
二手掉包工程师	57190f197b	refactor: clean up some deprecated APIs (#24881 )	2020-06-10 11:12:31 +08:00
nitinknolder	b2c359cb34	fix: Add interface for Option props. (#24870 ) * nitinknolder:export option props * Add interface for option props in select component * resolve pr comment	2020-06-10 11:00:01 +08:00
zoomdong	9a6c2f667a	docs: fix typo of Typography (#24883 ) * docs:typo of Typography * update snap	2020-06-10 10:06:17 +08:00
xrkffgg	d380a8d3e4	style: add `@divider-orientation-margin` less (#24877 ) * style: add `@divider-text-left-width` less * fix: name	2020-06-10 09:37:48 +08:00
zoomdong	6619c14579	docs: refine typo of Skeleton (#24878 ) * fix: docs of Skeleton * fix: typo	2020-06-09 23:22:28 +08:00
二货机器人	8e6667880f	fix: Tabs shaking of content (#24873 ) * fix: Tabs shaking when component auto size * update test case * update snapshot	2020-06-09 21:01:58 +08:00
Pubudu Kodikara	c72c773e67	fix: export CardInterface from Card resolves #24864 (#24866 )	2020-06-09 19:54:59 +08:00
二货机器人	a9a651ffd5	fix: Form List warning (#24867 ) * fix: Form List warning * clean reaf	2020-06-09 18:10:43 +08:00
afc163	84381e3e6c	docs: fix overview page search close #24860	2020-06-09 13:52:01 +08:00
xrkffgg	4e2118cad0	docs: update picker placeholder (#24861 )	2020-06-09 13:07:39 +08:00
eenlars	7f48f7336c	docs: Update placeholder type for Rangepicker (#24853 ) * Update placeholder possibilities for Rangepicker A rangepicker needs two placeholder fields instead of one. It is an array of two strings.	2020-06-09 12:51:34 +08:00
二货机器人	d6d3de8a1b	fix: table multiple sorter (#24852 ) * fix sort callback * add test case	2020-06-08 22:45:53 +08:00
David Sichau	af5ff52a27	fixed code that increased package size if tree shaking is disabled (#24847 )	2020-06-08 22:11:25 +08:00
zombiej	b2f3596f7d	docs: Update mobile position of tabs close #24831	2020-06-08 20:51:44 +08:00
偏右	862488b41e	🔍 Add search input to overview page (#24843 )	2020-06-08 19:37:23 +08:00
偏右	637aa09bc5	chore: ✅ fix some eslint problems (#24836 ) * 💄 fix lint * 💄 fix lint	2020-06-08 18:01:50 +08:00
二货机器人	1eb702b166	fix: steps nav active line height, 3px -> 2px (#24829 ) Co-authored-by: 愚道 <tingzhao.ytz@antfin.com>	2020-06-08 16:33:37 +08:00
xrkffgg	7071ac7f6e	fix: rewrite drag table demo (#24824 )	2020-06-08 15:28:28 +08:00
07akioni	ece5c03526	doc: select dropdownRender no longer accepts props (#24814 )	2020-06-08 13:54:53 +08:00
信鑫-King	2cd5167685	docs: 4.3.3 release docs (#24810 ) * docs: 4.3.3 release docs * docs: order * docs: version	2020-06-07 22:53:18 +08:00
偏右	98860c64d1	🛡 update dependabot badge	2020-06-07 21:53:32 +08:00
偏右	69db6faebe	✅ Add test cases for Notification (#24808 )	2020-06-07 21:47:07 +08:00
偏右	965fce5d0b	fix: Menu SubMenu scroll problem (#24806 ) close #24064 close #24800	2020-06-07 20:57:43 +08:00
陈帅	30217ade3f	fix: Drawer cannot open (#24802 ) * bugfix: fix drawer getContainer is null error * add test	2020-06-07 19:05:44 +08:00
zoomdong	6129d3a1eb	fix: typo on skeleton element (#24792 )	2020-06-06 23:07:11 +08:00
Webber Takken	4dbb81b88e	Minor grammer fixes (#24790 ) This will make the page slightly easier to read	2020-06-06 22:33:58 +08:00
信鑫-King	00bcdae2ae	docs: 4.3.2 changelog (#24765 ) * docs: 4.3.2 changelog * docs: changelog * docs: changelog * docs: changelog * fix: package * docs: changelog * docs: select * docs: changelog * docs: changelog Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>	2020-06-06 19:28:28 +08:00
Kermit Xuan	f61b32a0f9	⚡️ Optimize Select multiple mode performence (#24785 ) upgarde rc-select to 11.0.0 upgarde rc-tree-select to 4.0.0	2020-06-06 16:56:24 +08:00
Jaewook Ahn	ce0505561a	Add ko_KR localizations for Form (#24783 )	2020-06-06 16:08:20 +08:00
偏右	5e1be364c4	fix: TimePicker.RangePicker bordred when has className (#24781 ) * fix: TimePicker.RangePicker don't support bordred={false} when has className close #24768 * fix snapshot	2020-06-06 15:26:51 +08:00
偏右	e3a7635a2a	fix: Statistic don't work with Tooltip (#24782 ) close #24774	2020-06-06 15:25:47 +08:00
zoomdong	e508ee778d	fix: bugs on pageSize change in List (#24514 ) * fix: bugs on pageSize change in List * fix: update pagination props * fix: delete console * fix: lint * feat: add test case * feat: test case * feat: add test case * fix: update * adjust * fix: lint * feat: adjust code * fix: lint * feat: add test case * feat: complete test case	2020-06-06 15:09:59 +08:00
afc163	4b239d65c0	fix snapshot	2020-06-06 14:53:27 +08:00
afc163	019eeec3ce	fix: TimePicker.RangePicker don't support bordred={false} when has className close #24768	2020-06-06 14:37:08 +08:00
偏右	584f9fd907	🗑️ remove Tag afterClose from docs (#24779 )	2020-06-06 14:14:30 +08:00
afc163	e09ce6284e	🎬 update DatePicker and TimePicker demo	2020-06-06 14:01:29 +08:00
xrkffgg	955fa520f1	fix: badge offset in rtl (#24724 ) * fix: badge offset in rtl * fix: update snap * add test * fix: offset * fix: snap	2020-06-06 13:20:09 +08:00
偏右	e361b30ded	refactor: Card demo and code (#24764 ) * 🎬 update Card demo * refactor card code * 🎬 update Tabs demo * update snapshot	2020-06-05 20:11:25 +08:00
Arvin Xu	dda650cc7b	docs: Update components cover (#24744 ) * docs: Update components cover #24629 * docs: Update components cover	2020-06-05 13:50:09 +08:00
偏右	6f36f4a877	fix: Tag.CheckableTag don't support onClick (#24743 ) close #24733	2020-06-05 12:23:44 +08:00
linye	46f8399f99	Update MorePage.tsx (#24742 )	2020-06-05 11:09:25 +08:00
afc163	f22c5d999b	🎬 update Tag demo	2020-06-05 11:01:02 +08:00
陈帅	6493db80d4	feat: drawer support getPopupContainer and getPrefixCls by ConfigProvider (#24727 ) * feat: drawer support ConfigConsumer.getPopupContainer and getPrefixCls * update snapshot * add getPopupContainer test	2020-06-04 23:12:37 +08:00
Israel kusayev	6cea99be9d	🌐 adds Hebrew localisations for Form (#24716 )	2020-06-04 14:31:25 +08:00
Teng YANG	3d62c44325	feat: allow user customize table font size (#24714 )	2020-06-04 08:57:58 +08:00
xrkffgg	f36576f12d	style: optimize tabs dropdown rtl style (#24715 )	2020-06-03 23:44:28 +08:00
二货机器人	902141f554	fix: btn loading 2 twice (#24713 )	2020-06-03 21:59:54 +08:00
偏右	0d90c585fa	🌑 fix Dropdown dark menu color (#24707 )	2020-06-03 17:35:07 +08:00
xrkffgg	b8fb4c411d	feat: modal method rtl (#24682 ) * fix: modal rtl * fix: use hooks * Update components/modal/index.zh-CN.md	2020-06-03 17:20:04 +08:00
zefeng	3ca11e94ce	fix: Select default listItemHeight for small size & compact mode (#24706 )	2020-06-03 17:13:22 +08:00
偏右	076ed1bf9e	Update index.zh-CN.md	2020-06-03 16:28:06 +08:00
zombiej	33159218cd	refactor: Adjust Tabs export TabPaneProps position	2020-06-03 16:13:09 +08:00
hehe	738ed22871	docs: Update use-in-typescript.md (#24703 ) * docs: Update use-in-typescript.zh-CN.md * docs: Update use-in-typescript.en-US.md	2020-06-03 14:42:14 +08:00
hehe	745c2182a5	docs: update the usage of craco-less (#24701 ) * docs: update use-with-create-react-app.zh-CN.md * docs: update use-with-create-react-app.en-US.md	2020-06-03 13:37:25 +08:00
偏右	cfff7967b3	fix: Dropdown menu item link color when has icon (#24702 ) * 🐛 fix Dropdown menu item link color when has icon close #24700 * fix snapshot	2020-06-03 13:33:37 +08:00
zombiej	2d7a950167	docs: Fix site tabs centered ref #24694	2020-06-03 10:51:31 +08:00
zombiej	f263102500	docs: Update Form add usage desc	2020-06-03 10:40:12 +08:00
二货机器人	d4aca5f343	fix: Cal onPanelChange (#24695 ) * simple code * add test case * patch	2020-06-02 21:26:52 +08:00
xiaosong	46955f9f59	fix: 💄 IE11 input height issue (#23955 ) (#24673 ) * fix: 🏁 fix ie11 input height issue (#23955) * style: fix style order issue * fix: 🏁 fix input height issue with css hack * fix: 💄 Put IE11 css hack in IE.less	2020-06-02 21:17:57 +08:00
Tom Xu	f4ee809e66	fix: Radio typescript error typo (#24693 )	2020-06-02 20:56:23 +08:00
Luke Shiels	d0d75a6e54	docs: Corrected documentation grammar errors on replacing Moment.js (#24689 )	2020-06-02 20:28:23 +08:00