Merge pull request #29300 from ant-design/release-4.12.3

docs(✨): release changelog 4.12.3

.circleci/config.yml

@@ -1,173 +0,0 @@
-version: 2
-
-references:
-  container_config: &container_config
-    docker:
-      - image: circleci/node:14
-    working_directory: ~/ant-design
-
-  attach_workspace: &attach_workspace
-    attach_workspace:
-      at: ~/ant-design
-
-  react_16: &react_16
-    environment:
-      REACT: 16
-
-  workflow: &workflow
-    jobs:
-      - setup:
-          filters:
-            branches:
-              ignore: gh-pages
-      - dist:
-          requires:
-            - setup
-      - compile:
-          requires:
-            - setup
-      - lint:
-          requires:
-            - setup
-      - test_dist:
-          requires:
-            - dist
-      - test_lib:
-          requires:
-            - compile
-      - test_es:
-          requires:
-            - compile
-      - test_dom:
-          requires:
-            - setup
-      - test_node:
-          requires:
-            - setup
-      - check_metadata:
-          requires:
-            - setup
-
-jobs:
-  setup:
-    <<: *container_config
-    steps:
-      - checkout
-      - run: node -v
-      - run: npm -v
-      - run: npm install
-      - run:
-          command: |
-            set +eo
-            npm ls
-            true
-      - persist_to_workspace:
-          root: ~/ant-design
-          paths:
-            - node_modules
-      - store_artifacts:
-          path: package-lock.json
-
-  dist:
-    <<: *container_config
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: npm run dist
-      - run: node ./tests/dekko/dist.test.js
-      - run: npm run bundlesize
-      - persist_to_workspace:
-          root: ~/ant-design
-          paths:
-            - dist
-
-  compile:
-    <<: *container_config
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: npm run compile
-      - run: node ./tests/dekko/lib.test.js
-      - persist_to_workspace:
-          root: ~/ant-design
-          paths:
-            - lib
-            - es
-
-  lint:
-    <<: *container_config
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: npm run lint
-
-  test_dist:
-    <<: *container_config
-    <<: *react_16
-    steps:
-      - checkout
-      - *attach_workspace
-      - run:
-          command: npm test -- -w 1
-          environment:
-            LIB_DIR: dist
-
-  test_lib:
-    <<: *container_config
-    <<: *react_16
-    steps:
-      - checkout
-      - *attach_workspace
-      - run:
-          command: npm test -- -w 1
-          environment:
-            LIB_DIR: lib
-
-  test_es:
-    <<: *container_config
-    <<: *react_16
-    steps:
-      - checkout
-      - *attach_workspace
-      - run:
-          command: npm test -- -w 1
-          environment:
-            LIB_DIR: es
-
-  test_dom:
-    <<: *container_config
-    <<: *react_16
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: npm test -- -w 1 --coverage
-      - run: bash <(curl -s https://codecov.io/bash)
-
-  test_node:
-    <<: *container_config
-    <<: *react_16
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: npm run test-node -- -w 1
-
-  check_metadata:
-    <<: *container_config
-    steps:
-      - checkout
-      - *attach_workspace
-      - run: node ./scripts/check-demo.js
-
-workflows:
-  version: 2
-  build_test:
-    <<: *workflow
-  nightly:
-    <<: *workflow
-    triggers:
-      - schedule:
-          cron: '0 0 * * *'
-          filters:
-            branches:
-              only:
-                - master

.codesandbox/ci.json

@@ -1,3 +1,4 @@
 {
-  "sandboxes": ["antd-reproduction-template-6e93z"]
+  "sandboxes": ["antd-reproduction-template-6e93z"],
+  "node": "14"
 }

.eslintignore

@@ -3,6 +3,7 @@ components/**/*.jsx
 !components/*/__tests__/**/*.js
 !components/*/demo/*
 !.*.js
+~*
 # Docs templates
 site/theme/template/Color/ColorPicker.jsx
 site/theme/template/IconDisplay/*.js

.eslintrc.js

@@ -118,7 +118,7 @@ module.exports = {
     'jest/no-conditional-expect': 0,
 
     'unicorn/better-regex': 2,
-    'unicorn/prefer-trim-start-end': 2,
+    'unicorn/prefer-string-trim-start-end': 2,
     'unicorn/expiring-todo-comments': 2,
     'unicorn/no-abusive-eslint-disable': 2,
 

.github/config.yml

@@ -1,10 +0,0 @@
-# Configuration for request-info - https://github.com/behaviorbot/request-info
-
-# *Required* Comment to reply with
-requestInfoReplyComment: >
-  We would appreciate it if you could provide us with more info about this issue/pr!
-  Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository.
-  Issues labeled by Need Reproduce will be closed if no activities in 7 days.
-
-# *OPTIONAL* Label to be added to Issues and Pull Requests with insufficient information given
-requestInfoLabelToAdd: needs-more-info

.github/workflows/auto-close.yml

@@ -1,16 +0,0 @@
-name: 🧐 Auto Closer
-
-on:
-  issues:
-    types: [labeled]
-
-jobs:
-  close-by-label:
-    runs-on: ubuntu-latest
-    if: github.event.label.name == '3.x'
-    steps:
-      - name: Comment on issue
-        uses: peter-evans/close-issue@v1
-        with:
-          comment: "Hi @${{ github.event.issue.user.login }},<br />Current branch is off the maintenance period. We may not accept pull request or fix bug with it anymore. This topic will be auto closed.<br /><br />你好 @${{ github.event.issue.user.login }},<br />当前分支已经过了维护期。我们不会再接受对其的相关 PR 与 issue。当前 topic 会被自动关闭。"
-      

.github/workflows/codeql-analysis.yml

@@ -1,54 +0,0 @@
-name: "CodeQL"
-
-on:
-  push:
-    branches: [master, 0.12-stable, 1.x-stable, 2.x-stable, 3.x-stable, feature, gh-pages]
-  pull_request:
-    # The branches below must be a subset of the branches above
-    branches: [master]
-  schedule:
-    - cron: '0 13 * * 1'
-
-jobs:
-  analyse:
-    name: Analyse
-    runs-on: ubuntu-latest
-
-    steps:
-    - name: Checkout repository
-      uses: actions/checkout@v2
-      with:
-        # We must fetch at least the immediate parents so that if this is
-        # a pull request then we can checkout the head.
-        fetch-depth: 2
-
-    # If this run was triggered by a pull request event, then checkout
-    # the head of the pull request instead of the merge commit.
-    - run: git checkout HEAD^2
-      if: ${{ github.event_name == 'pull_request' }}
-
-    # Initializes the CodeQL tools for scanning.
-    - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
-      # Override language selection by uncommenting this and choosing your languages
-      # with:
-      #   languages: go, javascript, csharp, python, cpp, java
-
-    # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
-    # If this step fails, then you should remove it and run the build manually (see below)
-    - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
-
-    # ℹ️ Command-line programs to run using the OS shell.
-    # 📚 https://git.io/JvXDl
-
-    # ✏️ If the Autobuild fails above, remove it and uncomment the following three lines
-    #    and modify them (or add more) to build your code if your project
-    #    uses a compiled language
-
-    #- run: |
-    #   make bootstrap
-    #   make release
-
-    - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1

.github/workflows/compressed-size.yml

@@ -15,4 +15,4 @@ jobs:
       with:
         repo-token: "${{ secrets.GITHUB_TOKEN }}"
         pattern: "./dist/**/*.min.{js,css}"
-        build-script: "dist"
+        build-script: "dist:esbuild"

.github/workflows/gitleaks.yml

@@ -8,7 +8,7 @@ jobs:
     steps:
     - uses: actions/checkout@v2
       with:
-        fetch-depth: '1'
+        fetch-depth: '2'
     - name: wget
       uses: wei/wget@v1
       with:

.github/workflows/issue-check-inactive.yml

@@ -0,0 +1,17 @@
+name: Issue Check Inactive
+
+on:
+  schedule:
+    - cron: "0 0 */15 * *"
+
+jobs:
+  check-inactive:
+    runs-on: ubuntu-latest
+    steps:
+      - name: check-inactive
+        uses: actions-cool/issues-helper@v1.7
+        with:
+          actions: 'check-inactive'
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          inactive-label: 'Inactive'
+          inactive-day: 30

.github/workflows/issue-close-require.yml

@@ -0,0 +1,29 @@
+name: Issue Close Require
+
+on:
+  schedule:
+    - cron: "0 0 * * *"
+
+jobs:
+  close-issues:
+    runs-on: ubuntu-latest
+    steps:
+      - name: need reproduce
+        uses: actions-cool/issues-helper@v1.7
+        with:
+          actions: 'close-issues'
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          labels: '🤔 Need Reproduce'
+          inactive-day: 3
+      
+      - name: needs more info
+        uses: actions-cool/issues-helper@v1.7
+        with:
+          actions: 'close-issues'
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          labels: 'needs-more-info'
+          inactive-day: 3
+          body: |
+            Since the issue was labeled with `needs-more-info`, but no response in 3 days. This issue will be closed. If you have any questions, you can comment and reply.
+
+            由于该 issue 被标记为需要更多信息，却 3 天未收到回应。现关闭 issue，若有任何问题，可评论回复。

.github/workflows/issue-open-check.yml

@@ -0,0 +1,69 @@
+name: Issue Open Check
+
+on:
+  issues:
+    types: [opened]
+
+jobs:
+  check-issue:
+    runs-on: ubuntu-latest
+    steps:
+      - name: check invalid
+        if: contains(github.event.issue.body, 'ant-design-issue-helper') == false
+        uses: actions-cool/issues-helper@v1.2
+        with:
+          actions: 'create-comment,add-labels,close-issue'
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          labels: 'Invalid'
+          body: |
+            Hello @${{ github.event.issue.user.login }}, your issue has been closed because it does not conform to our issue requirements. Please use the [Issue Helper](http://new-issue.ant.design) to create an issue, thank you!
+
+            你好 @${{ github.event.issue.user.login }}，为了能够进行高效沟通，我们对 issue 有一定的格式要求，你的 issue 因为不符合要求而被自动关闭。你可以通过 [issue 助手](http://new-issue.ant.design) 来创建 issue 以方便我们定位错误。谢谢配合！
+
+      - name: check-website
+        if: contains(github.event.issue.body, 'ant-design-issue-helper') == true
+        uses: actions-cool/issues-helper@v1.2
+        id: checkid
+        with:
+          actions: 'check-issue'
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          # 格式如：'x1,x2' or  'x1,x2/y1,y2' 最多支持 2 个数组           
+          title-includes: '官网,网站,国内,镜像,mobile ant design,mobile.ant.design,ant design,ant.design,pro/挂了,无法访问,不能访问,访问不了,出问题,打不开,登不上,can not open,can not be reached'
+
+      - name: deal-website
+        if: steps.checkid.outputs.check-result == 'true'
+        uses: actions-cool/issues-helper@v1.2
+        with:
+          actions: 'create-comment,close-issue'
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Ant Design 系列官网由于某些众所周知的原因无法访问，建议翻墙或访问国内镜像站点。
+
+            ## 官网
+            * Ant Design: https://ant.design
+            * Ant Design Pro: https://pro.ant.design
+            * Ant Design Pro Preview : https://preview.pro.ant.design
+            * Ant Design Mobile: https://mobile.ant.design
+            * Ant Motion: https://motion.ant.design
+
+            ## 国内镜像
+            * Ant Design: http://ant-design.gitee.io
+            * Ant Design 3.x: http://ant-design-3x.gitee.io
+            * Ant Design 2.x: http://ant-design-2x.gitee.io
+            * Ant Design 1.x: http://ant-design-1x.gitee.io
+            * Ant Design Pro: http://ant-design-pro.gitee.io
+            * Ant Design Mobile: http://antd-mobile.gitee.io
+            * Ant Motion: http://ant-motion.gitee.io
+            * Ant Design Pro Preview : https://prosite.z23.web.core.windows.net
+            
+      - name: check-ie
+        if: contains(github.event.issue.body, 'ant-design-issue-helper') == true && contains(github.event.issue.title, 'IE9') == true || contains(github.event.issue.title, 'IE 9') == true || contains(github.event.issue.title, 'IE10') == true || contains(github.event.issue.title, 'IE 10') == true || contains(github.event.issue.title, 'IE11') == true || contains(github.event.issue.title, 'IE 11') == true || contains(github.event.issue.title, 'Internet Explorer') == true || contains(github.event.issue.body, 'IE9') == true || contains(github.event.issue.body, 'IE 9') == true || contains(github.event.issue.body, 'IE10') == true || contains(github.event.issue.body, 'IE 10') == true || contains(github.event.issue.body, 'IE11') == true || contains(github.event.issue.body, 'IE 11') == true || contains(github.event.issue.body, 'Internet Explorer') == true
+        uses: actions-cool/issues-helper@v1.2
+        with:
+          actions: 'add-labels'
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          labels: 'IE | Firefox | Safari,Internet Explorer'

.github/workflows/issue-remove-inactive.yml

@@ -0,0 +1,20 @@
+name: Issue Remove Inactive
+
+on:
+  issues:
+    types: [edited, reopened]
+  issue_comment:
+    types: [created, edited]
+
+jobs:
+  remove-inactive:
+    runs-on: ubuntu-latest
+    steps:
+      - name: remove inactive
+        if: github.event.issue.state == 'open'
+        uses: actions-cool/issues-helper@v1.2
+        with:
+          actions: 'remove-labels'
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          labels: 'Inactive,needs-more-info'

.github/workflows/issue-reply.yml

@@ -0,0 +1,61 @@
+name: Issue Reply
+
+on:
+  issues:
+    types: [labeled]
+
+jobs:
+  reply-helper:
+    runs-on: ubuntu-latest
+    steps:
+      - name: help wanted
+        if: github.event.label.name == 'help wanted'
+        uses: actions-cool/issues-helper@v1.2
+        with:
+          actions: 'create-comment'
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Hello @${{ github.event.issue.user.login }}. We totally like your proposal/feedback, welcome to [send us a Pull Request](https://help.github.com/en/articles/creating-a-pull-request) for it. Please send your Pull Request to proper branch (feature branch for the new feature, master for bugfix and other changes), fill the [Pull Request Template](https://github.com/ant-design/ant-design/blob/master/.github/PULL_REQUEST_TEMPLATE.md) here, provide changelog/TypeScript/documentation/test cases if needed and make sure CI passed, we will review it soon. We appreciate your effort in advance and looking forward to your contribution!
+
+            你好 @${{ github.event.issue.user.login }}，我们完全同意你的提议/反馈，欢迎直接在此仓库 [创建一个 Pull Request](https://help.github.com/en/articles/creating-a-pull-request) 来解决这个问题。请将 Pull Request 发到正确的分支（新特性发到 feature 分支，其他发到 master 分支），务必填写 Pull Request 内的[预设模板](https://github.com/ant-design/ant-design/blob/master/.github/PULL_REQUEST_TEMPLATE.md)，提供改动所需相应的 changelog、TypeScript 定义、测试用例、文档等，并确保 CI 通过，我们会尽快进行 Review，提前感谢和期待您的贡献。
+
+            ![giphy](https://user-images.githubusercontent.com/507615/62342668-4735dc00-b51a-11e9-92a7-d46fbb1cc0c7.gif)
+
+      - name: 🤔 Need Reproduce
+        if: github.event.label.name == '🤔 Need Reproduce'
+        uses: actions-cool/issues-helper@v1.2
+        with:
+          actions: 'create-comment'
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Hello @${{ github.event.issue.user.login }}. Please provide a online reproduction by forking this link https://u.ant.design/codesandbox-repro or a minimal GitHub repository. Issues labeled by `Need Reproduce` will be closed if no activities in 3 days.
+
+            你好 @${{ github.event.issue.user.login }}, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 [此处](https://u.ant.design/codesandbox-repro) 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。3 天内未跟进此 issue 将会被自动关闭。
+
+            ![](https://gw.alipayobjects.com/zos/antfincdn/y9kwg7DVCd/reproduce.gif)
+      
+      - name: Usage
+        if: github.event.label.name == 'Usage' || github.event.label.name == 'Question'
+        uses: actions-cool/issues-helper@v1.2
+        with:
+          actions: 'create-comment,close-issue'
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Hello @${{ github.event.issue.user.login }}, we use GitHub issues to trace bugs or discuss plans of Ant Design. So, please [don't ask usage questions](https://github.com/ant-design/ant-design/issues/2320) here. You can try to open a new discussion in [antd discussions](https://github.com/ant-design/ant-design/discussions), select `Q&A` to ask questions, also can ask questions on [Stack Overflow](http://stackoverflow.com/questions/tagged/antd) or [Segment Fault](https://segmentfault.com/t/antd), then apply tag `antd` and `react` to your question.
+
+            你好 @${{ github.event.issue.user.login }}，Ant Design Issue 板块是用于 bug 反馈与需求讨论的地方。请[勿询问如何使用的问题](https://github.com/ant-design/ant-design/issues/2320)，你可以试着在 [antd discussions](https://github.com/ant-design/ant-design/discussions) 新开一个 discussion，选择 `Q&A` 类别进行提问，也可以在 [Stack Overflow](http://stackoverflow.com/questions/tagged/antd) 或者 [Segment Fault](https://segmentfault.com/t/antd) 中提问（记得添加 `antd` 和 `react` 标签哦~）。
+      
+      - name: 3.x
+        if: github.event.label.name == '3.x'
+        uses: actions-cool/issues-helper@v1.2
+        with:
+          actions: 'create-comment,close-issue'
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          issue-number: ${{ github.event.issue.number }}
+          body: |
+            Hi @${{ github.event.issue.user.login }}. Current version (3.x) is off the maintenance period. We may not accept pull request or fix bug with it anymore. This topic will be auto closed.
+
+            你好 @${{ github.event.issue.user.login }}，当前版本（3.x）已经过了维护期。我们不会再接受对其的相关 PR 与 issue。当前 topic 会被自动关闭。

.github/workflows/label-merge.yml

@@ -0,0 +1,21 @@
+name: Automatic Merge by label
+on:
+  pull_request:
+    types:
+      - labeled
+jobs:
+  auto-merge:
+    runs-on: ubuntu-latest
+    if: github.event.label.name == 'BranchAutoMerge' && github.event.pull_request.head.repo.full_name == 'ant-design/ant-design' && (github.event.pull_request.head.ref == 'master' || github.event.pull_request.head.ref == 'feature')
+    steps:
+      - name: Auto Approve
+        uses: "hmarr/auto-approve-action@v2.0.0"
+        with:
+          github-token: "${{ secrets.ANT_BOT_TOKEN }}"
+
+      - name: Auto Merge
+        uses: "zombieJ/automerge-action@0.0.2"
+        env:
+          GITHUB_TOKEN: "${{ secrets.ANT_BOT_TOKEN }}"
+          MERGE_LABELS: "BranchAutoMerge"
+          MERGE_REMOVE_LABELS: "BranchAutoMerge"

.github/workflows/lighthouse-ci.yml

@@ -1,5 +1,7 @@
-name: CI
+name: lighthouse ci
+
 on: [push]
+
 jobs:
   lighthouseci:
     runs-on: ubuntu-latest

.github/workflows/make-release.yml

@@ -0,0 +1,19 @@
+name: 🤖 Auto Make Release
+
+on:
+  create
+
+jobs:
+  release-helper:
+    runs-on: ubuntu-latest
+    steps:
+      - name: make release
+        if: github.event.ref_type == 'tag'
+        uses: actions-cool/release-helper@v1
+        with:
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          triger: 'tag'
+          changelogs: 'CHANGELOG.en-US.md, CHANGELOG.zh-CN.md'
+          branch: 'master'
+          dingding-token: ${{ secrets.DINGDING_BOT_TOKEN }}
+          dingding-msg: 'CHANGELOG.zh-CN.md'

.github/workflows/mirror.yml

@@ -1,14 +1,26 @@
-name: Mirror
+name: 🔀 Mirror to Gitee
 
-on: [push]
+on:
+  push:
+    branches:
+      - master
+      - gh-pages
+      - feature
+      - 2.x-stable
+      - 3.x-stable
+  create:
 
 jobs:
-  to_gitee:
+  git-mirror:
     runs-on: ubuntu-latest
     if: github.repository == 'ant-design/ant-design'
     steps:
-      - uses: actions/checkout@v1
-      - uses: pixta-dev/repository-mirroring-action@v1
+      - name: mirror
+        continue-on-error: true
+        if: github.event_name == 'push' || (github.event_name == 'create' && github.event.ref_type == 'tag')
+        uses: wearerequired/git-mirror-action@v1
+        env:
+          SSH_PRIVATE_KEY: ${{ secrets.GITEE_SSH_PRIVATE_KEY }}
         with:
-          target_repo_url: git@gitee.com:ant-design/ant-design.git
-          ssh_private_key: ${{ secrets.GITEE_SSH_PRIVATE_KEY }}
+          source-repo: 'git@github.com:ant-design/ant-design.git'
+          destination-repo: 'git@gitee.com:ant-design/ant-design.git'

.github/workflows/pr-welcome.yml

@@ -0,0 +1,22 @@
+name: PR Welcome
+
+on:
+  pull_request_target:
+    types: [opened, edited, reopened]
+
+jobs:
+  welcome:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions-cool/pr-welcome@v1.1.0
+        with:
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          refuse-issue-label: '🎱 Collaborate PR only'
+          need-creator-authority: 'write'
+          comment: |
+            Hi @${{ github.event.pull_request.user.login }}. The issue mentioned in this PR needs to be confirmed with the designer or core team. This PR is temporarily not accepted. Thank you again for your contribution! 😊
+
+            你好 @${{ github.event.pull_request.user.login }}。这个 PR 提及的 issue 需要和设计师或核心团队进行确认，暂时不接受 PR，再次感谢你的贡献！😊   
+          emoji: 'heart'
+          pr-emoji: 'heart'
+          close: true

.github/workflows/test.yml

@@ -1,4 +1,4 @@
-name: test
+name: ✅ test
 
 on: [push, pull_request]
 
@@ -18,7 +18,7 @@ jobs:
       - name: create package-lock.json
         run: npm i --package-lock-only
 
-      - name: hack for singe file
+      - name: hack for single file
         run: |
           if [ ! -d "package-temp-dir" ]; then
             mkdir package-temp-dir
@@ -73,38 +73,6 @@ jobs:
         run: node ./tests/dekko/lib.test.js
     needs: setup
 
-  dist:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@master
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v2
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: dist
-        run: npm run dist
-        env:
-          NODE_OPTIONS: --max_old_space_size=4096
-
-      - name: check
-        run: node ./tests/dekko/dist.test.js
-
-      - name: test
-        run: npm test
-        env:
-          LIB_DIR: dist
-    needs: setup
-
   lint:
     runs-on: ubuntu-latest
     steps:
@@ -127,7 +95,52 @@ jobs:
         run: npm run lint
     needs: setup
 
-  node:
+  tsx-demo:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: tsx-demo
+        run: npm run check-ts-demo
+    needs: setup
+
+  check_metadata:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: check demo
+        run: node ./scripts/check-demo.js
+    needs: setup
+
+  react-17-dom:
+    name: react@17.x / dom
     runs-on: ubuntu-latest
     steps:
       - name: checkout
@@ -146,10 +159,37 @@ jobs:
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
 
       - name: test
-        run: npm test
+        run: npm test -- -w 1 --coverage
+
+      - name: coverage
+        run: bash <(curl -s https://codecov.io/bash)
     needs: setup
 
-  lib:
+  react-17-node:
+    name: react@17.x / node
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: test
+        run: npm run test-node
+    needs: setup
+
+  react-17-lib:
+    name: react@17.x / lib
     runs-on: ubuntu-latest
     steps:
       - name: checkout
@@ -179,7 +219,8 @@ jobs:
           LIB_DIR: lib
     needs: compile
 
-  es:
+  react-17-es:
+    name: react@17.x / es
     runs-on: ubuntu-latest
     steps:
       - name: checkout
@@ -208,3 +249,207 @@ jobs:
         env:
           LIB_DIR: es
     needs: compile
+
+  react-17-dist:
+    name: react@17.x / dist
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: dist
+        run: npm run dist
+        env:
+          NODE_OPTIONS: --max_old_space_size=4096
+
+      - name: check
+        run: node ./tests/dekko/dist.test.js
+
+      - name: bundlesize
+        run: npm run bundlesize
+        env:
+          BUNDLESIZE_GITHUB_TOKEN: ${{ secrets.BUNDLESIZE_GITHUB_TOKEN }}
+
+      - name: test
+        run: npm test
+        env:
+          LIB_DIR: dist
+    needs: setup
+
+  react-16-dom:
+    name: react@16.x / dom
+    runs-on: ubuntu-latest
+    env:
+      REACT: 16
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: install react 16
+        run: npm run install-react-16
+
+      - name: test
+        run: npm test -- -w 1 --coverage
+    needs: setup
+
+  react-16-node:
+    name: react@16.x / node
+    runs-on: ubuntu-latest
+    env:
+      REACT: 16
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: install react 16
+        run: npm run install-react-16
+
+      - name: test
+        run: npm run test-node
+    needs: setup
+
+  react-16-lib:
+    name: react@16.x / lib
+    runs-on: ubuntu-latest
+    env:
+      REACT: 16
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: restore cache from lib
+        uses: actions/cache@v2
+        with:
+          path: lib
+          key: lib-${{ github.sha }}
+
+      - name: install react 16
+        run: npm run install-react-16
+
+      - name: test
+        run: npm test
+        env:
+          LIB_DIR: lib
+    needs: compile
+
+  react-16-es:
+    name: react@16.x / es
+    runs-on: ubuntu-latest
+    env:
+      REACT: 16
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: restore cache from es
+        uses: actions/cache@v2
+        with:
+          path: es
+          key: es-${{ github.sha }}
+
+      - name: install react 16
+        run: npm run install-react-16
+
+      - name: test
+        run: npm test
+        env:
+          LIB_DIR: es
+    needs: compile
+
+  react-16-dist:
+    name: react@16.x / dist
+    runs-on: ubuntu-latest
+    env:
+      REACT: 16
+    steps:
+      - name: checkout
+        uses: actions/checkout@master
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v2
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v2
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: install react 16
+        run: npm run install-react-16
+
+      - name: dist
+        run: npm run dist
+        env:
+          NODE_OPTIONS: --max_old_space_size=4096
+
+      - name: check
+        run: node ./tests/dekko/dist.test.js
+
+      - name: test
+        run: npm test
+        env:
+          LIB_DIR: dist
+    needs: setup

.github/workflows/ui.yml

@@ -11,6 +11,13 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: checkout
+        if: github.event_name == 'pull_request_target'
+        uses: actions/checkout@master
+        with:
+          ref: refs/pull/${{ github.event.pull_request.number }}/head
+
+      - name: checkout
+        if: github.event_name == 'push'
         uses: actions/checkout@master
 
       - name: install
@@ -20,7 +27,8 @@ jobs:
         run: npm run test-image
 
       - name: argos-ci
-        if: github.event_name == 'pull_request_target'
+        # argos-ci only support base branch, so we should expect master
+        if: github.event_name == 'pull_request_target' && github.base_ref == 'master'
         run: npm run argos -- --token ${{ secrets.ARGOS_TOKEN }} --branch pull/${{ github.event.pull_request.number }}/merge --commit ${{ github.event.pull_request.head.sha }}
 
       - name: argos-ci

.github/workflows/verify-package-version.yml

@@ -0,0 +1,19 @@
+name: Verify Package Version
+
+on:
+  pull_request:
+    types: [opened, edited, reopened, synchronize, ready_for_review]
+
+jobs:
+  verify:
+    runs-on: ubuntu-latest
+    if: contains(github.event.pull_request.title, 'changelog') || contains(github.event.pull_request.title, 'release')
+    steps:
+      - uses: actions/checkout@v2
+      - name: verify-version
+        uses: actions-cool/verify-package-version@v1.1.1
+        with:
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          title-include-content: 'docs'
+          title-include-version: true
+          open-comment: true

.jest.image.js

@@ -12,7 +12,6 @@ module.exports = {
     '\\.(jpg|png|gif|svg)$': './node_modules/@ant-design/tools/lib/jest/imagePreprocessor',
   },
   testRegex: 'image\\.test\\.(j|t)s$',
-  testEnvironment: 'node',
   transformIgnorePatterns,
   snapshotSerializers: ['enzyme-to-json/serializer'],
   globals: {
@@ -20,4 +19,6 @@ module.exports = {
       tsConfigFile: './tsconfig.test.json',
     },
   },
+  preset: 'jest-puppeteer',
+  testTimeout: 10000,
 };

.prettierignore

@@ -21,13 +21,12 @@ yarn-error.log
 *.snap
 components/*/*.js
 components/*/*.jsx
-components/*/*.md
-docs/**/*.md
 .gitignore
 .npmignore
 .prettierignore
 .DS_Store
 .editorconfig
 .eslintignore
+.history
 **/*.yml
 components/style/color/*.less

.stylelintrc.json

@@ -4,7 +4,7 @@
     "stylelint-config-rational-order",
     "stylelint-config-prettier"
   ],
-  "plugins": ["stylelint-order", "stylelint-declaration-block-no-ignored-properties"],
+  "plugins": ["stylelint-declaration-block-no-ignored-properties"],
   "rules": {
     "comment-empty-line-before": null,
     "function-name-case": ["lower", { "ignoreFunctions": ["/colorPalette/"] }],

.travis.yml

@@ -1,23 +0,0 @@
-sudo: false
-
-language: node_js
-
-node_js:
-  - 11
-
-cache:
-  directories:
-    - $HOME/.npm
-
-matrix:
-  fast_finish: true
-  include:
-    - env: TEST_TYPE=lint
-    - env: TEST_TYPE=test:dist
-    - env: TEST_TYPE=test:lib
-    - env: TEST_TYPE=test:es
-    - env: TEST_TYPE=test:dom
-    - env: TEST_TYPE=test:node
-
-script:
-  - scripts/travis-script.sh

AUTHORS.txt

@@ -155,6 +155,7 @@ Dave <ci713@qq.com>
 David Broder-Rodgers <david.broder-rodgers@softwire.com>
 David Hatten <dhatten@covermymeds.com>
 David Schneider <davschne@gmail.com>
+Davide Bianchi <bianchidavide12@gmail.com>
 Dean van Niekerk <deanvniekerk@gmail.com>
 DengYun <tdzl2003@gmail.com>
 Denis <shumkovdenis@gmail.com>
@@ -306,6 +307,7 @@ Jennie <jennie.ji@hotmail.com>
 JeromeLin <jerome.lin@zhongan.com>
 Jerry Bendy <jerry@icewingcc.com>
 Jesper We <jesper@journeyman.se>
+Jesus The Hun <iletaitunefoisfenghuang@gmail.com>
 Jiabin Peng <png.inside@gmail.com>
 Jiahao <jahowchen@outlook.com>
 Jialei <jialeicui@126.com>
@@ -342,6 +344,7 @@ Juan Carlos Lloret H <juan.carlos.lloret@lansweeper.com>
 Juan Rodrigo Venegas Boesch <jrvboesch@gmail.com>
 Julia Passynkova <ipassynk@hotmail.com>
 Julien Confetti <julien.confetti@ulg.ac.be>
+JuniorTour <juniortour@qq.com>
 Junyu Zhan <irrigator@yeah.net>
 Juraj Carnogursky <durisvk2@gmail.com>
 Justin Reich <reich.justin@gmail.com>
@@ -370,6 +373,7 @@ Kiho · Cham <monkindey@163.com>
 Kim, Harim <harimkims@gmail.com>
 Kimmo Saari <kimmo.saari@compile.fi>
 Kimmo Saari <kimmo.saari@revolt.fi>
+KingxBeta <wyk17@qq.com>
 Kirill Alexander Khalitov <voronar@gmail.com>
 Kirill Stiopin <kirill.stiopin@hotmail.com>
 Knacktus <knacktus@gmail.com>
@@ -447,9 +451,11 @@ Michael Krog <mic@apaq.dk>
 Michael Salaverry <michaels@axonize.com>
 Michael Salaverry <barakplasma@gmail.com>
 Michael Shing <mikeyshing88@hotmail.com>
+Michael Waddell <michael@waddellnet.com>
 Michael Wang <ylzcylx@gmail.com>
 Michal Pekar <pekac45@gmail.com>
 Michalis Macheras <diodosier@gmail.com>
+Michał Jasikowski <michal@jasikowski.pl>
 Michelle Zhang <michelle.chsy@gmail.com>
 Miclle Zheng <miclle.zheng@gmail.com>
 Mikasa33 <mikasa33@qq.com>
@@ -469,6 +475,7 @@ Mohamed Seada <mohamed.seada.1994@gmail.com>
 Mohammad Faisal <faisalhmohd@gmail.com>
 Mohan Ban <banmohan@outlook.com>
 Mohelm97 <mohelm97@gmail.com>
+Mongkii <mongkii@hotmail.com>
 Moni <usmoni@gmail.com>
 Mounish Sai <pvsmounish@gmail.com>
 Mr.Biscuit <sunshuaiqi@gmail.com>
@@ -476,6 +483,7 @@ Mr.Tone <vector@malubei.com>
 Mr.jiangzhiguo <jiangzhiguo2010@qq.com>
 Ms. Wang <767074895@qq.com>
 MuYu <mr.muzea@gmail.com>
+Muhammad Sameer <contact@mdsameer.com.np>
 Mário Gonçalves <mario.mc.goncalves@gmail.com>
 Nariman Movaffaghi <nariman.movaffaghi@gmail.com>
 Nathan Broadbent <git@ndbroadbent.com>
@@ -562,6 +570,7 @@ Ricardo Raphael Joson <rrjoson08@gmail.com>
 Richard D. Worth <rdworth@gmail.com>
 Rick Zhou <rinick@gmail.com>
 Robert Wilkinson <wilkinson.robert.a@gmail.com>
+Robin Pokorny <me@robinpokorny.com>
 Rodrigo Ehlers <rodrigoehlers@outlook.com>
 Rohan Bagchi <rohan.bagchi01@gmail.com>
 Rohan Malhotra <rohan.root@gmail.com>
@@ -611,6 +620,7 @@ Simon Altschuler <simon@altschuler.dk>
 Simon Knott <simoknott@gmail.com>
 Sivaraj <contact@sdev.in>
 SkyAo <csvwolf@qq.com>
+Skylar艺璇 <mengxue.yx@gmail.com>
 Snyk bot <github+bot@snyk.io>
 Sonjeet Paul <sonjeetcp.98@gmail.com>
 SoraYama <sorayamahou@gmail.com>
@@ -649,6 +659,7 @@ Tomás Francisco <mail@tomasfrancisco.com>
 Tomáš Hylský <thylsky@gmail.com>
 Tomáš Szabo <tomas.szabo@deftomat.com>
 Trotyl Yu <trotyl@qq.com>
+Troy Li <a@tianyi.li>
 Troy Thompson <troynt@gmail.com>
 TsesamLi <tsesamli17@gmail.com>
 Ty Mick <ty@tymick.me>
@@ -686,6 +697,7 @@ Wenqi Chen <1264578441@qq.com>
 Wensheng Xu <xws@superid.cn>
 Will <will_workhard@163.com>
 Will Chen <willchen90@gmail.com>
+Will Soares <willamesoares65@gmail.com>
 William Cai <williamcai@easyops.cn>
 William Stein <wstein@gmail.com>
 WingGao <wing.gao@live.com>
@@ -711,9 +723,12 @@ Yevhen Hryhorevskyi <evgeniygrigorevskiy@gmail.com>
 Yiming <ymjrcc@qq.com>
 Yogesh <yogeshkumar180592@gmail.com>
 Yu <yutingzhao1991@sina.com>
+Yu Mao <maoyulore@outlook.com>
 Yu Mao <maoyu960320@hotmail.com>
 YuChao Liang <l.yuch@foxmail.com>
+Yuan <1076849402@qq.com>
 Yuhang Liu <644186735@qq.com>
+Yulia Maximova <juliam2007@mail.ru>
 Yunfly <120562638@qq.com>
 Yunus EŞ <yunus@yunuses.com>
 Yuri Pirola <yuri.pirola@unimi.it>
@@ -743,6 +758,7 @@ alekslario <aleksandlario@gmail.com>
 alex89lj <379118572@qq.com>
 alexchen <alexchen@easyops.cn>
 amedora <americandragsterracing@gmail.com>
+appleshell <appleshell@outlook.com>
 arifemrecelik <ce.arifemre@gmail.com>
 arturpfb <arturpfb@gmail.com>
 ascoders <576625322@qq.com>
@@ -770,6 +786,7 @@ chen wen jun <731028571@qq.com>
 chencheng (云谦) <sorrycc@gmail.com>
 chenlei <745512023@qq.com>
 chenlong <long.chen@abssqr.com>
+chenshuai2144 <qixian.cs@outlook.com>
 chenxiaochun <sjzchenxiaochun@gmail.com>
 chisus <chisus@smartstudy.co.kr>
 chunlea <ichunlea@me.com>
@@ -809,6 +826,7 @@ ezpub <ez.foro@gmail.com>
 feeng <feengqi@gmail.com>
 feng zhi hao <fzhihao@outlook.com>
 fengmk2 <m@fengmk2.com>
+fish yu <501254061@qq.com>
 fkysly <fkysly@gmail.com>
 flashback313 <windmark2012@gmail.com>
 flyerH <hzw758@qq.com>
@@ -825,6 +843,7 @@ hanpei <75189218@qq.com>
 hansnow <hansnow2012@gmail.com>
 haoxin <coderhaoxin@outlook.com>
 hardfist <yangjianzju@gmail.com>
+hatanon <sthtnr@gmail.com>
 hauwa123 <hauwa.aminu@outlook.com>
 hebingchang <hebingchang1@live.com>
 hehe <xpc1993@gmail.com>
@@ -853,6 +872,7 @@ jeessy2 <454207171@qq.com>
 jiajiangxu <minesaner@163.com>
 jiang <155259966@qq.com>
 jiang.an <jarancn@gmail.com>
+jiang.he <573748150jh@163.com>
 jieniu$ <jienius@outlook.com>
 jinouwuque <ee2win@gmail.com>
 jinyaqiao1102 <405782493@QQ.com>
@@ -943,11 +963,13 @@ pizn <pizner@gmail.com>
 plainnany <plainnany@gmail.com>
 popomore <sakura9515@gmail.com>
 prettyboyweiwei <523141385@qq.com>
+qianbin <1797661770@qq.com>
 qiaojie <1454763497@qq.com>
 qiqiboy <imqiqiboy@gmail.com>
 qliu <1403927509@qq.com>
 qubaoming <qubaoming@didichuxing.com>
 ravirambles <ravirambles@gmail.com>
+realEago <774855001@qq.com>
 richardison <richard.ison@carleton.ca>
 ryangun <ryangun@foxmail.com>
 ryanhoho <hswacoal@gmail.com>
@@ -1031,13 +1053,15 @@ xiaohuoni <448627663@qq.com>
 xiaosong <kunkkaco@gmail.com>
 xiaoxintang <15707971810@163.com>
 xilihuasi <2857818553@qq.com>
-xrk <xrkffgg@gmail.com>
+xrkffgg <xrkffgg@gmail.com>
 xrkffgg <xrkffgg@vip.qq.com>
 xuqiang <xuqiang@xiaoshouyi.com>
+xyb <576420147@qq.com>
 xz <limxz97@gmail.com>
 y-take <y.takey@gmail.com>
 yangwukang <yangwukang@boco.com.cn>
 yangxiaolin <yangxiao2810279802@gmail.com>
+ycjcl868 <45808948@qq.com>
 ye4241 <ye4241@gmail.com>
 yehq <yedi728@qq.com>
 yeliex <yeliex@yeliex.com>
@@ -1081,6 +1105,7 @@ zytjs <yitongzhao@163.com>
 रोहन मल्होत्रा <rohan.malhotra@adwyze.com>
 一喵呜 <hyb628@gmail.com>
 丁文涛 <wynterding@gmail.com>
+不吃猫的鱼 <michael2ib1989@gmail.com>
 丶尘殇 <sean.snow@live.com>
 乔奕轩 <qiao_yixuan@163.com>
 二哲 <kodo@forchange.cn>
@@ -1090,20 +1115,23 @@ zytjs <yitongzhao@163.com>
 何志勇 <15988134176@163.com>
 何锦余 <cadenho@hotmail.com>
 佛门耶稣 <fomenyesu@gmail.com>
-信鑫-King <45808948@qq.com>
+信鑫-King <chaolinjin@gmail.com>
 偏右 <afc163@gmail.com>
 刘红 <liuhong1.happy@163.com>
 初心Yearth <Yearthmain@gmail.com>
+南北 <chersquwn@gmail.com>
 南小北 <nanxiaobei@gmail.com>
 只捱宅 <zy410419243@gmail.com>
 可乐 <zaxlct@foxmail.com>
 吕立青 <jimmy.jinglv@gmail.com>
 吴泽康 <wu.zekang@outlook.com>
 啸生 <ikobe621@gmail.com>
+大猫 <rdmclin2@gmail.com>
 大猫 <rdmclin2@163.com>
 宝码 <noyobo@gmail.com>
 小哈husky <951565664@qq.com>
 小菜 <645801890@qq.com>
+小鹅鹅鹅 <littleee.lau@gmail.com>
 山客 <zeakhold@gmail.com>
 崔宏森 <948346354@qq.com>
 广彬-梁 <326741518@qq.com>
@@ -1153,7 +1181,6 @@ zytjs <yitongzhao@163.com>
 郑旭 <332171564@qq.com>
 闲耘™ <hotoo.cn@gmail.com>
 陆离 <surgesoft@gmail.com>
-陈帅 <qixian.cs@outlook.com>
 陈帅 <wasd2144@hotmail.com>
 陈广亮 <geraldchen890806@gmail.com>
 陈立林 <245839124@qq.com>

CHANGELOG.en-US.md

@@ -15,6 +15,359 @@ timeline: true
 
 ---
 
+## 4.12.3
+
+`2021-02-10`
+
+- 🛠 Refactor Drawer with React hooks. [#29229](https://github.com/ant-design/ant-design/pull/29229)
+- 🐞 Fix Table pagination not disappear when `pagination.position` is `['none', 'none']`. [#29256](https://github.com/ant-design/ant-design/pull/29256) [@mumiao](https://github.com/mumiao)
+- 🐞 Fix TextArea `showCount` should not be interactive. [#29245](https://github.com/ant-design/ant-design/pull/29245)
+- 🐞 Fix abnormal background color for `multiple` and `disabled` Select in dark. [#29242](https://github.com/ant-design/ant-design/pull/29242)
+- ⚡️ Optimize Slider align performance of tooltip. [#29308](https://github.com/ant-design/ant-design/pull/29308) [@kerm1it](https://github.com/kerm1it)
+- ⚡️ Upgrade `@ant-design/colors` to 6.x to reduce gzipped bundle size `1KB`. [#29307](https://github.com/ant-design/ant-design/pull/29307) [@07akioni](https://github.com/07akioni)
+- 🇷🇺 Add `ru_RU` locale text for Image. [#29271](https://github.com/ant-design/ant-design/pull/29271) [@mumiao](https://github.com/mumiao)
+- 🇮🇷 Add `fa_IR` locale text for DatePicker, Form, Table, TimePicker and Transfer. [#29232](https://github.com/ant-design/ant-design/pull/29232) [@amiralitaheri](https://github.com/amiralitaheri)
+- TypeScript
+  - 🤖 Fix type definition for Table FilterDropdownProps `confirm` parameter. [#29241](https://github.com/ant-design/ant-design/pull/29241) [@mumiao](https://github.com/mumiao)
+
+## 4.12.2
+
+`2021-02-04`
+
+- 💄 Make Table expand icon and checkbox same size and aligned. [#29214](https://github.com/ant-design/ant-design/pull/29214)
+- 🐞 Fix List with `gutter` makes column break line. [#29211](https://github.com/ant-design/ant-design/pull/29211)
+
+## 4.12.1
+
+`2021-02-03`
+
+- 🐞 Fix antd crash when load before page ready. [#29202](https://github.com/ant-design/ant-design/pull/29202)
+- 🐞 Fix Table pagination `current` change logic when `pageSize` changes. [#29184](https://github.com/ant-design/ant-design/pull/29184)
+
+## 4.12.0
+
+`2021-02-03`
+
+- 🆕 Image.PreviewGroup add `current` prop. [#29153](https://github.com/ant-design/ant-design/pull/29153)
+- InputNumber
+  - 🆕 InputNumber support `bordered` prop. [#29105](https://github.com/ant-design/ant-design/pull/29105)
+  - 🆕 InputNumber add `keyboard` prop which could disable keyboard behavior. [#29110](https://github.com/ant-design/ant-design/pull/29110) [@kerm1it](https://github.com/kerm1it)
+- 💄 Darken Tag text color to enhance readability. [#29144](https://github.com/ant-design/ant-design/pull/29144)
+- 💄 Fix Row with vertical `gutter` provides additional `margin-bottom` style. [#29059](https://github.com/ant-design/ant-design/pull/29059)
+- 🐞 Fix Collapse header disappers with delay. [#29158](https://github.com/ant-design/ant-design/pull/29158)
+- 🐞 Fix the problem that `showCount` display data is incorrect when TextArea input emoji. [#29057](https://github.com/ant-design/ant-design/pull/29057) [@HomyeeKing](https://github.com/HomyeeKing)
+- 📦 Optimize ConfigProvider to avoid import all icons when tree shaking is not enabled. [#29045](https://github.com/ant-design/ant-design/pull/29045)
+- 🌐 Add en-GB missing translations for table. [#29131](https://github.com/ant-design/ant-design/pull/29131) [@eberjoe](https://github.com/eberjoe)
+- Table
+  - 🆕 Table `showSorterTooltip` now could be a object for more configuration. [#29002](https://github.com/ant-design/ant-design/pull/29002) [@harrisoff](https://github.com/harrisoff)
+  - ⚡️ Optimize calling sequence of `onChange` and `onSelectAll` in `rowSelection` of Table. [#29079](https://github.com/ant-design/ant-design/pull/29079) [@kerm1it](https://github.com/kerm1it)
+- Badge
+  - 💄 Fix Badge change `count` content to hide miss style. [#29089](https://github.com/ant-design/ant-design/pull/29089)
+  - 🐞 Fix Badge digital animation problem. [#29100](https://github.com/ant-design/ant-design/pull/29100)
+- TypeScript
+  - 🤖 Table TS definition update `dataSource` to `readonly`. [#29084](https://github.com/ant-design/ant-design/pull/29084)
+- Less
+  - 💄 Add less variable `@progress-info-text-color`. [#28981](https://github.com/ant-design/ant-design/pull/28981) [@yuxuan](https://github.com/yuxuan)
+
+## 4.11.3
+
+`2021-02-03`
+
+Wrong release is the same as `4.12.0`, if you need to lock the version, you need to lock it to `4.11.2`.
+
+## 4.11.2
+
+`2021-01-26`
+
+- 🐞 Fix rc-trigger BuildInPlacements TypeScript compile error. [#29029](https://github.com/ant-design/ant-design/pull/29029) [@waiwaiku](https://github.com/waiwaiku)
+
+## 4.11.1
+
+`2021-01-24`
+
+- 💄 Layout inline sub menu now has grey background. [#28842](https://github.com/ant-design/ant-design/pull/28842)
+- 🆕 PageHeader supports `breadcrumbRender`. [#28999](https://github.com/ant-design/ant-design/pull/28999)
+- 🆕 Typography `ellipsis` support `tooltip` to customize tooltip when ellipsis. [#28821](https://github.com/ant-design/ant-design/pull/28821)
+- Image
+  - 🆕 Image supports `preview.maskClassName`. [#28681](https://github.com/ant-design/ant-design/pull/28681)
+  - 🐞 Fix preview image will move after click it. [react-component/image#61](https://github.com/react-component/image/pull/61) [@simonwong](https://github.com/simonwong)
+  - 🐞 Fix Image `placeholder` disappear issue. [#28953](https://github.com/ant-design/ant-design/issues/28953)
+  - 🐞 Fix multiple Image.PreviewGroup contain same image. [#28881](https://github.com/ant-design/ant-design/issues/28881)
+- ConfigProvider
+  - 🆕 ConfigProvider supports `iconPrefixCls`. [#28924](https://github.com/ant-design/ant-design/pull/28924)
+  - ⚡️ Optimize ConfigProvider props updating perfermance. [#28792](https://github.com/ant-design/ant-design/pull/28792) [@zxc0328](https://github.com/zxc0328)
+- 💄 Tweak TreeSelect filter highlight color. [#28984](https://github.com/ant-design/ant-design/pull/28984)
+- 💄 Fix Select item align style with custom `tagRender`. [#28962](https://github.com/ant-design/ant-design/pull/28962)
+- Form
+  - 🐞 Fix Form.Item can not clear nested `noStyle` error message. [#28918](https://github.com/ant-design/ant-design/pull/28918)
+  - 🐞 Form.Item with `preserve=false` will reset value to `initialValues` when removed. [#28908](https://github.com/ant-design/ant-design/pull/28908)
+- 🐞 Fix Button click effect style not working in shadow root. [#28995](https://github.com/ant-design/ant-design/pull/28995) [@rinick](https://github.com/rinick)
+- 🐞 Fix Table custom filter menu cannot close bug. [#28688](https://github.com/ant-design/ant-design/pull/28688) [@alekye](https://github.com/alekye)
+- Less
+  - 💄 Add `@menu-inline-submenu-bg` less variable and rename `@menu-dark-submenu-bg` to `@menu-dark-inline-submenu-bg`. [#28842](https://github.com/ant-design/ant-design/pull/28842)
+  - 💄 Add less variable `@drawer-footer-padding-horizontal`. [#28975](https://github.com/ant-design/ant-design/pull/28975) [@yuxuan](https://github.com/yuxuan)
+- RTL
+  - 💄 Fix Card actions divider style in RTL. [#28915](https://github.com/ant-design/ant-design/pull/28915) [@Aghosey](https://github.com/Aghosey)
+- TypeScript
+  - 🤖 Expose interfaces and types from default entry of antd. [#28963](https://github.com/ant-design/ant-design/pull/28963)
+  - 🤖 Improve Input/Skeleton `style` definition. [#28966](https://github.com/ant-design/ant-design/pull/28966) [@yingpengsha](https://github.com/yingpengsha)
+
+## 4.11.0
+
+`2021-01-24`
+
+It is a wrong release which same as `4.10.3`, don't use it.
+
+## 4.10.3
+
+`2021-01-18`
+
+- 🐞 Fix Button not adapting to the `@btn-border-width` when loading. [#28886](https://github.com/ant-design/ant-design/pull/28886) [@jjanssen](https://github.com/jjanssen)
+- Table
+  - 💄 Add `@table-border-color` less variable. [#28903](https://github.com/ant-design/ant-design/pull/28903)
+  - 🐞 Fix that invalid params passed to `onChange` event if define custom filterDropdown and nested filters. [#28850](https://github.com/ant-design/ant-design/pull/28850) [@Meowu](https://github.com/Meowu)
+  - 💄 Tweak Table selection column width to `32px`. [#28073](https://github.com/ant-design/ant-design/pull/28073)
+- Transfer
+  - 🛠 Refactor Transfer Search with React hooks. [#28895](https://github.com/ant-design/ant-design/pull/28895) [@susiwen8](https://github.com/susiwen8)
+  - 🌐 Added German translations for the Transfer component. [#28826](https://github.com/ant-design/ant-design/pull/28826) [@aequi42](https://github.com/aequi42)
+- Upload
+  - 🐞 Support for capturing Error message for the Upload error tooltip. [#28716](https://github.com/ant-design/ant-design/pull/28716) [@wangcch](https://github.com/wangcch)
+  - 🆕 Upload auto fills `uid` of `fileList` when not provided. [#28832](https://github.com/ant-design/ant-design/pull/28832)
+- 🐞 Fix Slider `getPopupContainer` prop has no default value `document.body`. [#28865](https://github.com/ant-design/ant-design/pull/28865) [@rinick](https://github.com/rinick)
+- 🐞 Fix Empty description validateDOMNesting warning. [#28862](https://github.com/ant-design/ant-design/pull/28862)
+- 💄 Fix Tree `filterTreeNode` missing style. [#28866](https://github.com/ant-design/ant-design/pull/28866)
+- 💄 fix Badge `dot` width issue when `size="small"`. [#28854](https://github.com/ant-design/ant-design/pull/28854)
+
+## 4.10.2
+
+`2021-01-11`
+
+- 🐞 Fix import error when use antd in commonjs. [#28715](https://github.com/ant-design/ant-design/issues/28804)
+
+## 4.10.1
+
+`2021-01-10`
+
+- 🛠 Optimize Select search performance. [#28715](https://github.com/ant-design/ant-design/pull/28715) [@kerm1it](https://github.com/kerm1it)
+- 🐞 Fix Slider throw `forcePopupAlign` error when unmounted. [#28699](https://github.com/ant-design/ant-design/pull/28699) [@Kerumen](https://github.com/Kerumen)
+- 🐞 Fix Transfer throws `Cannot add property key, object is not extensible` when `dataSource` is immutable. [#28675](https://github.com/ant-design/ant-design/pull/28675)
+- 🐞 Fix Notification box closing height issue generated by `useNotification`. [#28660](https://github.com/ant-design/ant-design/pull/28660)
+- 🐞 Fix Drawer and Modal disabled scrollbar after closing. [#28749](https://github.com/ant-design/ant-design/pull/28749)
+- 🛠 Reduce gzipped bundle size `2kB`. [#28678](https://github.com/ant-design/ant-design/pull/28678)
+- TypeScript
+  - 🤖 InputNumber `onChange` support `null` as `value`. [#28769](https://github.com/ant-design/ant-design/pull/28769) [@lengfangbing](https://github.com/lengfangbing)
+
+## 4.10.0
+
+`2021-01-04`
+
+🎉 Happy New Year!
+
+- 🐞 Fix the compatibility issue of less 4.0.0.
+- 🐞 Fix the problem of cursor jumping when Typography is editable. [#28545](https://github.com/ant-design/ant-design/pull/28545)
+- 🐞 Fix the problem that repeatedly clicking on expanded nodes when Tree dynamically loads data will lead to wrong status.[#28349](https://github.com/ant-design/ant-design/issues/28349) [@liuchao233](https://github.com/react-component/tree/pull/401)
+- 🐞 Fix the problem that TreeSelect & Select cannot open the dropdown menu when it's `searchValue` has value. [#28574](https://github.com/ant-design/ant-design/pull/28574)
+- 🐞 Fix Dropdown disabled menu item link style. [#28578](https://github.com/ant-design/ant-design/pull/28578)
+- 🐞 Fix Progress `steps` display accuracy issue. [#28530](https://github.com/ant-design/ant-design/pull/28530) [@gaoryrt](https://github.com/gaoryrt)
+- 🐞 Fix Radio align issue in Chrome. [#28616](https://github.com/ant-design/ant-design/pull/28616)
+- 🐞 Fix Collapse arrow position not aligned when change @collapse-header-padding variable. [#28507](https://github.com/ant-design/ant-design/pull/28507)
+- 💄 Optimize the white border style of Card images. [#28624](https://github.com/ant-design/ant-design/pull/28624)
+- Input
+  - 🐞 Fix TextArea value get cut when input chinese words. [#28456](https://github.com/ant-design/ant-design/pull/28456)
+  - 🆕 The `showCount` property of Input.TextArea now supports passing in a method to customize the display format of the number. [#28145](https://github.com/ant-design/ant-design/pull/28145) [@MrHeer](https://github.com/MrHeer)
+  - 🆕 Input `focus` supports configuring the cursor position when getting focus. [#28602](https://github.com/ant-design/ant-design/pull/28602)
+- Modal
+  - 🆕 Modal.method adds an `afterClose` callback that will be triggered after the Modal is completely closed. [#28053](https://github.com/ant-design/ant-design/pull/28053) [@liuchao233](https://github.com/liuchao233)
+  - 🐞 Fix the problem that Modal can be dragged outside the viewport. [#28438](https://github.com/ant-design/ant-design/pull/28527) [@mumiao](https://github.com/mumiao)
+- Table
+  - 🐞 Fix the problem that Table childrenColumnName and checkStrictly={false} cannot be used together. [#28568](https://github.com/ant-design/ant-design/pull/28568)
+  - 🐞 Fix Table selection abnormal behavior when inside Checkbox.Group. [#28576](https://github.com/ant-design/ant-design/pull/28576)
+  - 🐞 Fix the problem that the sticky header style is messy when there is no data. [#28323](https://github.com/ant-design/ant-design/issues/28323)
+  - 🐞 Fix the problem that `onChange` listener always receives empty list as `filters` parameter if use a custom `filterDropdown`. [#28627](https://github.com/ant-design/ant-design/pull/28627) [@Meowu](https://github.com/Meowu)
+  - 🆕 Adds `expandable.columnWidth` to customize the width of the expanded column. [#28249](https://github.com/ant-design/ant-design/pull/28249)
+  - 🆕 Adds clear all option from selection. [#28580](https://github.com/ant-design/ant-design/pull/28580) [@n0ruSh](https://github.com/ant-design/ant-design/pull/285)
+- Image
+  - 🐞 Fix the misalignment issue of Image component.[#28439](https://github.com/ant-design/ant-design/pull/28439) [@MoeCasts](https://github.com/MoeCasts)
+  - 💄 Adds preview style. [#28235](https://github.com/ant-design/ant-design/pull/28235)
+  - 🆕 Adds functionality for zoom in\out by sliding the wheel. [#react-component/image/52](https://github.com/react-component/image/pull/52) [@OmriGM](https://github.com/OmriGM)
+  - 🆕 Support separate settings url for preview images. [#react-component/image/56](https://github.com/react-component/image/pull/56) [@wangcch](https://github.com/wangcch)
+- Upload
+  - 🐞 Fix a warning even when not using `transformFile`. [#28455](https://github.com/ant-design/ant-design/pull/28455) [@YanYuanFE](https://github.com/YanYuanFE)
+  - 🐞 Fix Upload `fileList` cannot work with data that is produced by immer. [#28636](https://github.com/ant-design/ant-design/pull/28636) [@mumiao](https://github.com/mumiao)
+  - 🆕 Upload adds a new `maxCount` property to limit the number of files. [#28367](https://github.com/ant-design/ant-design/pull/28367)
+- DatePicker
+  - 🚀 Optimize the logic of `disabledDate`. [#react-component/picker/191](https://github.com/react-component/picker/pull/191)
+  - 🆕 Adds `onKeyDown` callback. [#react-component/picker/138](https://github.com/react-component/picker/pull/138) [@conquera99](https://github.com/react-component/picker/pull/138)
+- Select
+  - 🐞 Fix issue where `options` update does not trigger the selection box content update. [#react-component/select/580](https://github.com/react-component/select/pull/580) [@jameslahm](https://github.com/jameslahm)
+  - 🐞 Fix the problem that the dropdown box cannot be opened after clicking the option with `tagRender`. [react-component/select/582](https://github.com/react-component/select/pull/582) [@mumiao](https://github.com/mumiao)
+  - 🐞 Fix the problem that `tokenSeparators` can not recognize the separator correctly under Chinese input method. [#28564](https://github.com/ant-design/ant-design/issues/28564)
+  - 🆕 Adds `scrollTo` to the `ref`. [#react-component/select/565](https://github.com/react-component/select/pull/565)
+  - 🆕 `maxTagCount` supports `responsive` in `multiple` mode. [#28520](https://github.com/ant-design/ant-design/pull/28520)
+- 🆕 Slider add a new `range.draggableTrack` prop. [#28592](https://github.com/ant-design/ant-design/pull/28592)
+- 🆕 Descriptions support setting `labelStyle` & `contentStyle` directly. [#28613](https://github.com/ant-design/ant-design/pull/28613)
+- 🆕 message added a new `onClick` callback that will be triggered when the message is clicked. [#28148](https://github.com/ant-design/ant-design/pull/28148) [@ZeroTo0ne](https://github.com/ant-design/ant-design/pull/28148)
+- 🆕 The `scrollToFirstError` property of the Form adds support for setting the position for scrolling. [#28272](https://github.com/ant-design/ant-design/pull/28272) [@vouis](https://github.com/vouis)
+- 🆕 Steps support reponsive which allows to turn off reponsive change. [#28459](https://github.com/ant-design/ant-design/pull/28459)
+- 🌐 Localization
+  - 🇭🇷 Improved Croatian language support. [#28458](https://github.com/ant-design/ant-design/pull/28458)
+- TypeScript
+  - ⚒️ Fix `title` type of PageHeader. [#28374](https://github.com/ant-design/ant-design/pull/28374) [@zhukovvandrei](https://github.com/zhukovvandrei)
+
+## 4.9.4
+
+`2020-12-16`
+
+- 🐞 Fix Menu delayed hover color transition in Chrome. [#28372](https://github.com/ant-design/ant-design/pull/28372)
+- 🐞 Fix Tree node connection line position problem. [#28354](https://github.com/ant-design/ant-design/pull/28354) [@maksnester](https://github.com/maksnester)
+- 💄 Fix Table fixed column `z-index` which makes Dropdown not showing on top. [#28346](https://github.com/ant-design/ant-design/pull/28346)
+- TypeScript
+  - 🤖 Fix `message.loading()` return type. [#28362](https://github.com/ant-design/ant-design/pull/28362)
+
+## 4.9.3
+
+`2020-12-14`
+
+- 💄 Fix Badge standalone motion blink when show/hide. [#28240](https://github.com/ant-design/ant-design/pull/28240)
+- 🐞 Fix Table `filters` not support number and boolean type. [#28220](https://github.com/ant-design/ant-design/pull/28220) [@Meowu](https://github.com/Meowu)
+- 💄 Remove Tree hover background color when `selectable={false}`. [#28269](https://github.com/ant-design/ant-design/pull/28269)
+- 💄 Fix Statistics decimal font size. [#28223](https://github.com/ant-design/ant-design/pull/28223)
+- TypeScript
+  - 🤖 Fix Tree `draggable` TS definition. [#28262](https://github.com/ant-design/ant-design/pull/28262) [@DavidSichau](https://github.com/DavidSichau)
+  - 🤖 Fix Image.PreviewGroup TS definition. [#28263](https://github.com/ant-design/ant-design/pull/28263) [@liuchao233](https://github.com/liuchao233)
+  - 🤖 Improve `message().then` TS definition. [#28304](https://github.com/ant-design/ant-design/pull/28304)
+  - 🤖 Fix TransferProps `titles` to ReactNode. [#28326](https://github.com/ant-design/ant-design/pull/28326) [@jacklee814](https://github.com/jacklee814)
+
+## 4.9.2
+
+`2020-12-06`
+
+- Table
+  - 🐞 Fix Table selecting crash sometimes. [#28193](https://github.com/ant-design/ant-design/pull/28193) [@yanguoyu](https://github.com/yanguoyu)
+  - 💄 Fix Table selection column header align issue. [#28173](https://github.com/ant-design/ant-design/pull/28173)
+- Dropdown
+  - 💄 Fix Dropdown subMenu arrow style. [#28181](https://github.com/ant-design/ant-design/pull/28181)
+  - 🐞 Fix Dropdown click area not matched. [#28180](https://github.com/ant-design/ant-design/pull/28180)
+- 🐞 Fix `overlayInnerStyle` not work in Tooltip. [#27682](https://github.com/ant-design/ant-design/pull/27682) [@jasepellerin](https://github.com/jasepellerin)
+- 💄 Fix Layout overflow style for Table `sticky`. [#28176](https://github.com/ant-design/ant-design/pull/28176)
+- 💄 Fix Steps `progressDot` broken style of first step. [#28126](https://github.com/ant-design/ant-design/pull/28126) [@ZeroTo0ne](https://github.com/ZeroTo0ne)
+- 💄 Optimize Modal `useModal` performance by isolating elements render to avoid the component to rerender. [#28122](https://github.com/ant-design/ant-design/pull/28122) [@TotooriaHyperion](https://github.com/TotooriaHyperion)
+- 💄 Fix TextArea showCount style while using with Form. [#28130](https://github.com/ant-design/ant-design/pull/28130) [@AlanCutFlim](https://github.com/AlanCutFlim)
+- 💄 Fix Tag cursor style in Tree node. [#28219](https://github.com/ant-design/ant-design/pull/28219)
+- 🛠 Remove `@ant-design/css-animation` for better bundle size. [#28201](https://github.com/ant-design/ant-design/pull/28201)
+- RTL
+  - 💄 Fix the style of Alert. [#28108](https://github.com/ant-design/ant-design/pull/28108) [@jesse3mh9a](https://github.com/jesse3mh9a)
+  - 🐞 Fix Tree `dropIndicator` style of default `ltr` direction. [#28150](https://github.com/ant-design/ant-design/pull/28150) [@kagawagao](https://github.com/kagawagao)
+- TypeScript
+  - 🤖 Fix Table `selectedRows` in `SelectionSelectFn` return generic type. [#28206](https://github.com/ant-design/ant-design/pull/28206) [@weiyuc](https://github.com/weiyuc)
+  - 🤖 Add `className` in `BreadcrumbItemProps`. [#28182](https://github.com/ant-design/ant-design/pull/28182) [@ccloveak](https://github.com/ccloveak)
+  - 🤖 Form.List `initialValue` types are supported. [#28153](https://github.com/ant-design/ant-design/pull/28153) [@Debiancc](https://github.com/Debiancc)
+  - 🤖 Fix `dontAnimate` optional in Carousel. [#28090](https://github.com/ant-design/ant-design/pull/28090) [@jarretmoses](https://github.com/jarretmoses)
+
+## 4.9.1
+
+`2020-12-01`
+
+- TypeScript
+  - 🤖 Fix Collapse.Panel `collapsible` property to optional. [#28092](https://github.com/ant-design/ant-design/pull/28092) [@sammarks](https://github.com/sammarks)
+
+## 4.9.0
+
+`2020-11-30`
+
+- Modal
+  - 🆕 Modal support `focusTriggerAfterClose` to disable auto focus back. [#27985](https://github.com/ant-design/ant-design/pull/27985) [@molokovev](https://github.com/molokovev)
+  - 🐞 Fix Modal hooks not trigger `onCancel`. [#28063](https://github.com/ant-design/ant-design/pull/28063) [@JuniorTour](https://github.com/JuniorTour)
+  - 🐞 Fix Modal sometime not popup from the click position. [#28037](https://github.com/ant-design/ant-design/pull/28037)
+  - 🆕 Support `closable` and `closeIcon` api for Modal.method. [#27909](https://github.com/ant-design/ant-design/pull/27909) [@MrHeer](https://github.com/MrHeer)
+- 💄 Reduce Table selection column width to `32px`. [#28073](https://github.com/ant-design/ant-design/pull/28073)
+- Image
+  - 🔥 Image add PreviewGroup component to support multiple images preview. [#28069](https://github.com/ant-design/ant-design/pull/28069)
+  - 🐞 Fix Image style prop not acting on img element. [#27446](https://github.com/ant-design/ant-design/pull/27446)
+- Collapse
+  - 🔥 Collapse support `collapsible` to customize trigger region and deprecated Panel `disabled` prop. [#27790](https://github.com/ant-design/ant-design/pull/27790)
+  - 🐞 Fix Collapse cannot contains `<Table sticky />`. [#28039](https://github.com/ant-design/ant-design/pull/28039)
+- 🐞 Fix Cascader bug that empty data can be selected. [#28062](https://github.com/ant-design/ant-design/pull/28062) [@n0ruSh](https://github.com/n0ruSh)
+- 🆕 Alert support `action` prop. [#25892](https://github.com/ant-design/ant-design/pull/25892) [@jesse3mh9a](https://github.com/jesse3mh9a)
+- 🔥 Tree refactor drag behavior. Add `dropIndicatorRender` and `allowDrop` prop. [#26462](https://github.com/ant-design/ant-design/pull/26462) [@07akioni](https://github.com/07akioni)
+- 🆕 Space support `wrap` for auto break line. [#27910](https://github.com/ant-design/ant-design/pull/27910)
+- 🆕 Descriptions.Item support `labelStyle` &amp; `contentStyle` props. [#27897](https://github.com/ant-design/ant-design/pull/27897)
+- 🆕 Form.List support `initialValue`. [#27872](https://github.com/ant-design/ant-design/pull/27872)
+- 🆕 Menu supports `expandIcon`, and optimize default expand icon style. [#27565](https://github.com/ant-design/ant-design/pull/27565)
+- 🆕 Input and TextArea add `setSelectionRange` of `ref`. [#27584](https://github.com/ant-design/ant-design/pull/27584) [@appleshell](https://github.com/appleshell)
+- 🆕 Select support `filterSort` to order the filtered options. [#27523](https://github.com/ant-design/ant-design/pull/27523) [@n0ruSh](https://github.com/n0ruSh)
+- 🇰🇿 Add Kazakh locale. [#27589](https://github.com/ant-design/ant-design/pull/27589) [@nodkz](https://github.com/nodkz)
+
+## 4.8.6
+
+`2020-11-27`
+
+- 🐞 Fix Badge style blink when mounted. [#28003](https://github.com/ant-design/ant-design/pull/28003)
+- 💄 Reduce Modal style size. [#27998](https://github.com/ant-design/ant-design/pull/27998)
+- 🐞 Fix Layout.Sider can not collapse when `width='0'`. [#28000](https://github.com/ant-design/ant-design/pull/28000)
+- 🐞 Fix Menu style when using none Ant Design icons. [#27983](https://github.com/ant-design/ant-design/pull/27983)
+- Input
+  - 🐞 Fix Input.Search button height when customize less variables. [#27986](https://github.com/ant-design/ant-design/pull/27986)
+  - 🐞 Fix Input.Search `addonBefore` abnormal style. [#27960](https://github.com/ant-design/ant-design/pull/27960)
+- 🐞 Fix Typography.Link clicking copy button will redirect. [#27982](https://github.com/ant-design/ant-design/pull/27982)
+- 🐞 Fix Carousel throws error `Unable to preventDefault inside passive event listener`. [#27957](https://github.com/ant-design/ant-design/pull/27957)
+- 🌐 Improve data picker locale for `en_GB` and `zh_TW`. [#28016](https://github.com/ant-design/ant-design/pull/28016) [@abz53378](https://github.com/abz53378)
+- RTL
+  - 💄 Optimize the border style of Descriptions in RTL model. [#28010](https://github.com/ant-design/ant-design/pull/28010)
+  - 💄 Fix the vertical style of Steps in RTL mode. [#27996](https://github.com/ant-design/ant-design/pull/27996)
+- TypeScript
+  - 🤖 Fix Upload `beforeUpload` definition. [#27946](https://github.com/ant-design/ant-design/pull/27946) [@bingling0084](https://github.com/bingling0084)
+  - 🤖 Provided a separate type definition for Carousel reference. [#27935](https://github.com/ant-design/ant-design/pull/27935) [@ocassio](https://github.com/ocassio)
+
+## 4.8.5
+
+`2020-11-22`
+
+- 🐞 Fix that Spin can't render children `0`. [#27839](https://github.com/ant-design/ant-design/pull/27839) [@liuchao233](https://github.com/liuchao233)
+- 💄 Fix the RangePicker panel interaction style. [#27894](https://github.com/ant-design/ant-design/pull/27894)
+- 💄 Fix Switch `loading` style. [#27860](https://github.com/ant-design/ant-design/pull/27860)
+- 💄 Optimize Skeleton color to fit dark background. [#27836](https://github.com/ant-design/ant-design/pull/27836)
+- 💄 Adjust Statistic `deciaml` font size. [#27884](https://github.com/ant-design/ant-design/pull/27884)
+- 🛠 Refactor Checkbox、Layout.Sider and TextArea with React hooks. [#27739](https://github.com/ant-design/ant-design/pull/27739) [#27719](https://github.com/ant-design/ant-design/pull/27719) [#27693](https://github.com/ant-design/ant-design/pull/27693)
+- 🛠 Refactor BackTop、Badge、UploadList with `rc-motion` instead of `rc-animate`. [#27840](https://github.com/ant-design/ant-design/pull/27840) [#27848](https://github.com/ant-design/ant-design/pull/27848) [#27923](https://github.com/ant-design/ant-design/pull/27923)
+- RTL
+  - 💄 Fix the style of the Tree switch icon in RTL mode. [#27876](https://github.com/ant-design/ant-design/pull/27876)
+- TypeScript
+  - 🤖 Fix AutoComplete `DataSourceItemType` type definition. [#27892](https://github.com/ant-design/ant-design/pull/27892)
+  - 🤖 Export Image `ImageProps` interface. [#27846](https://github.com/ant-design/ant-design/pull/27846) [@wangcch](https://github.com/wangcch)
+
+## 4.8.4
+
+`2020-11-16`
+
+- 💄 Fix Button and Form loading style. [#27794](https://github.com/ant-design/ant-design/pull/27794)
+- 🐞 Fix Modal.confirm locale missing after close it. [#27797](https://github.com/ant-design/ant-design/pull/27797)
+- 🐞 Fix Button/Anchor throws `findDOMNode is deprecated` in React 17. [#27755](https://github.com/ant-design/ant-design/pull/27755) [@hosseinmd](https://github.com/hosseinmd)
+
+## 4.8.3
+
+`2020-11-14`
+
+- 🛠 Refactor Carousel with React hooks. [#27694](https://github.com/ant-design/ant-design/pull/27694)
+- 🛠 Refactor `<Typography editable />` with React hooks. [#27655](https://github.com/ant-design/ant-design/pull/27655)
+- 🐞 Fixed the problem that form behaves abnormally when namepath is an array.. [#27664](https://github.com/ant-design/ant-design/pull/27664)
+- 💄 Fix DateRangePicker hover effect position when hover over start or end cell of in range row. [#27731](https://github.com/ant-design/ant-design/pull/27731) [@AlanCutFlim](https://github.com/AlanCutFlim)
+- 🐞 Fix Select `mode=tags` cannot input whitespace normally. [#27726](https://github.com/ant-design/ant-design/pull/27726) [@baxtergu](https://github.com/baxtergu)
+- 💄 Fix the mouse style when Typography.Link is `disabled`. [#27734](https://github.com/ant-design/ant-design/pull/27734)
+- 🐞 Fix Menu dropdown animation start twice when appear. [#27663](https://github.com/ant-design/ant-design/pull/27663)
+- 💄 Fix Avatar style when `src` is Image component. [#27691](https://github.com/ant-design/ant-design/pull/27691)
+- 💄 Fix Select multiple cursor position. [#27689](https://github.com/ant-design/ant-design/pull/27689)
+- 🐞 Fix TextArea emoji been cut when enable `maxLength`. [#27679](https://github.com/ant-design/ant-design/pull/27679) [@372623460jh](https://github.com/372623460jh)
+- 🐞 Fix small size RangePicker active bar align issue. [#27673](https://github.com/ant-design/ant-design/pull/27673) [@Ifeinstein](https://github.com/Ifeinstein)
+- 💄 Add `@radio-border-width`. [#27703](https://github.com/ant-design/ant-design/pull/27703)
+
+## 4.8.2
+
+`2020-11-09`
+
+- 🐞 Fix Pagination lost jumper margin style. [#27650](https://github.com/ant-design/ant-design/pull/27650)
+- 🐞 Fix Steps `type="navigation"` last item broken style. [#27654](https://github.com/ant-design/ant-design/pull/27654)
+
 ## 4.8.1
 
 `2020-11-08`

CHANGELOG.zh-CN.md

@@ -15,6 +15,359 @@ timeline: true
 
 ---
 
+## 4.12.3
+
+`2021-02-10`
+
+- 🛠 使用 React hooks 重构 Drawer。[#29229](https://github.com/ant-design/ant-design/pull/29229)
+- 🐞 修复 Table 的 `pagination. position` 为 `['none', 'none']`时分页器仍然展示的问题。[#29256](https://github.com/ant-design/ant-design/pull/29256) [@mumiao](https://github.com/mumiao)
+- 🐞 修复 TextArea `showCount` 字数会遮挡 Form.Item `extra` 的问题。[#29245](https://github.com/ant-design/ant-design/pull/29245)
+- 🐞 修复多选 Select 在暗黑模式下禁用的背景颜色异常的问题。[#29242](https://github.com/ant-design/ant-design/pull/29242)
+- ⚡️ 优化 Slider 提示的对齐性能。[#29308](https://github.com/ant-design/ant-design/pull/29308) [@kerm1it](https://github.com/kerm1it)
+- ⚡️ 升级 `@ant-design/colors` 依赖到 6.x，减少 gzipped 包体积 `1KB`。[#29307](https://github.com/ant-design/ant-design/pull/29307) [@07akioni](https://github.com/07akioni)
+- 🇷🇺 为 Image 组件添加 `ru_RU` 俄语翻译。[#29271](https://github.com/ant-design/ant-design/pull/29271) [@mumiao](https://github.com/mumiao)
+- 🇮🇷 为 DatePicker、Form、Table、TimePicker 和 Transfer 组件添加 `fa_IR` 波斯语翻译。[#29232](https://github.com/ant-design/ant-design/pull/29232) [@amiralitaheri](https://github.com/amiralitaheri)
+- TypeScript
+  - 🤖 修复 Table FilterDropdownProps 的 `confirm` 入参为可选类型。[#29241](https://github.com/ant-design/ant-design/pull/29241) [@mumiao](https://github.com/mumiao)
+
+## 4.12.2
+
+`2021-02-04`
+
+- 💄 调整 Table 展开图标和选择框的大小一致并对齐。[#29214](https://github.com/ant-design/ant-design/pull/29214)
+- 🐞 修复 List 配置 `gutter` 时列会折行的问题。[#29211](https://github.com/ant-design/ant-design/pull/29211)
+
+## 4.12.1
+
+`2021-02-03`
+
+- 🐞 修复 antd 在页面加载之前载入导致的页面崩溃问题。[#29202](https://github.com/ant-design/ant-design/pull/29202)
+- 🐞 修正 Table 改变 `pageSize` 重置 `current` 的逻辑，现在若超出会重置到最大页数。[#29184](https://github.com/ant-design/ant-design/pull/29184)
+
+## 4.12.0
+
+`2021-02-03`
+
+- 🆕 Image.PreviewGroup 添加 `current` 属性支持受控模式。[#29153](https://github.com/ant-design/ant-design/pull/29153)
+- InputNumber
+  - 🆕 InputNumber 支持 `bordered` 属性。[#29105](https://github.com/ant-design/ant-design/pull/29105)
+  - 🆕 InputNumber 添加 `keyboard` 属性以支持禁用键盘行为。[#29110](https://github.com/ant-design/ant-design/pull/29110) [@kerm1it](https://github.com/kerm1it)
+- 💄 加深 Tag 文字颜色以提升可读性。[#29144](https://github.com/ant-design/ant-design/pull/29144)
+- 💄 修复 Row 配置垂直 `gutter` 时会额外添加 `margin-bottom` 样式的问题。[#29059](https://github.com/ant-design/ant-design/pull/29059)
+- 🐞 修复 Collapse 标题区域隐藏延迟的问题。[#29158](https://github.com/ant-design/ant-design/pull/29158)
+- 🐞 修复 TextArea 输入 emoji 时 `showCount` 展示数据不正确的问题。[#29057](https://github.com/ant-design/ant-design/pull/29057) [@HomyeeKing](https://github.com/HomyeeKing)
+- 📦 优化 ConfigProvider 在未开启 tree shaking 的项目中引入所有图标的问题。[#29045](https://github.com/ant-design/ant-design/pull/29045)
+- 🇬🇧 为表格添加 `en-GB` 翻译。[#29131](https://github.com/ant-design/ant-design/pull/29131) [@eberjoe](https://github.com/eberjoe)
+- Badge
+  - 🐞 修复 Badge 的数字动画方向问题。[#29100](https://github.com/ant-design/ant-design/pull/29100)
+  - 💄 修复 Badge 修改 `count` 内容以隐藏时的样式问题。[#29089](https://github.com/ant-design/ant-design/pull/29089)
+- Table
+  - 🆕 Table `showSorterTooltip` 属性支持 Tooltip 的配置。[#29002](https://github.com/ant-design/ant-design/pull/29002) [@harrisoff](https://github.com/harrisoff)
+  - ⚡️ 优化 Table `rowSelection` 中 `onChange` 和 `onSelectAll` 的调用顺序。[#29079](https://github.com/ant-design/ant-design/pull/29079) [@kerm1it](https://github.com/kerm1it)
+- TypeScript
+  - 🤖 更新 Table TypeScript 定义 `dataSource` 至 `readonly`。[#29084](https://github.com/ant-design/ant-design/pull/29084)
+- Less
+  - 💄 增加 less 变量 `@progress-info-text-color`。 [#28981](https://github.com/ant-design/ant-design/pull/28981) [@yuxuan](https://github.com/yuxuan)
+
+## 4.11.3
+
+`2021-02-03`
+
+错误的发布，与 `4.12.0` 相同，如果需要锁定版本，需要锁定到 `4.11.2`。
+
+## 4.11.2
+
+`2021-01-26`
+
+- 🐞 修复 rc-trigger BuildInPlacements TypeScript 编译错误。[#29029](https://github.com/ant-design/ant-design/pull/29029) [@waiwaiku](https://github.com/waiwaiku)
+
+## 4.11.1
+
+`2021-01-24`
+
+- 💄 Layout 内联子表单添加背景颜色以更好的区分层级。[#28842](https://github.com/ant-design/ant-design/pull/28842)
+- 🆕 PageHeader 支持 `breadcrumbRender` 属性。[#28999](https://github.com/ant-design/ant-design/pull/28999)
+- 🆕 Typography `ellipsis` 属性添加 `tooltip` 支持以自定义收缩时的提示信息。[#28821](https://github.com/ant-design/ant-design/pull/28821)
+- Image
+  - 🆕 Image 支持配置 `preview.maskClassName`。[#28681](https://github.com/ant-design/ant-design/pull/28681)
+  - 🐞 修复预览图片会跟随鼠标移动的问题。[react-component/image#61](https://github.com/react-component/image/pull/61) [@simonwong](https://github.com/simonwong)
+  - 🐞 修复 Image `placeholder` 不显示的问题。[#28953](https://github.com/ant-design/ant-design/issues/28953)
+  - 🐞 修复多个 Image.PreviewGroup 之间图片互串的问题。[#28881](https://github.com/ant-design/ant-design/issues/28881)
+- ConfigProvider
+  - 🆕 ConfigProvider 支持 `iconPrefixCls` 修改图标样式前缀。[#28924](https://github.com/ant-design/ant-design/pull/28924)
+  - ⚡️ 优化 ConfigProvider 切换属性的性能。[#28792](https://github.com/ant-design/ant-design/pull/28792) [@zxc0328](https://github.com/zxc0328)
+- 💄 调整 TreeSelect 搜索高亮条目的颜色。[#28984](https://github.com/ant-design/ant-design/pull/28984)
+- 💄 修复 Select 自定义 `tagRender` 时不对齐的问题。[#28962](https://github.com/ant-design/ant-design/pull/28962)
+- Form
+  - 🐞 修复 Form.Item 无法正确清理嵌套的 `noStyle` 错误信息问题。[#28918](https://github.com/ant-design/ant-design/pull/28918)
+  - 🐞 Form.Item 配置 `preserve=false` 时，移除该字段将自动重置对应值为 `initialValues`。[#28908](https://github.com/ant-design/ant-design/pull/28908)
+- 🐞 修复 Button 点击效果在 Shadow Root 下不生效的问题。[#28995](https://github.com/ant-design/ant-design/pull/28995) [@rinick](https://github.com/rinick)
+- 🐞 修复 Table 自定义筛选器时未正确关闭菜单的问题。[#28688](https://github.com/ant-design/ant-design/pull/28688) [@alekye](https://github.com/alekye)
+- Less
+  - 💄 新增 less 变量 `@drawer-footer-padding-horizontal`。[#28975](https://github.com/ant-design/ant-design/pull/28975) [@yuxuan](https://github.com/yuxuan)
+  - 💄 新增 `@menu-inline-submenu-bg` 变量，且 `@menu-dark-submenu-bg` 改名为 `@menu-dark-inline-submenu-bg`。[#28842](https://github.com/ant-design/ant-design/pull/28842)
+- RTL
+  - 💄 修复 Card 按钮在 RTL 模式下的样式问题。[#28915](https://github.com/ant-design/ant-design/pull/28915) [@Aghosey](https://github.com/Aghosey)
+- TypeScript
+  - 🤖 从 antd 默认入口中直接暴露 TypeScript 定义。[#28963](https://github.com/ant-design/ant-design/pull/28963)
+  - 🤖 优化 Input/Skeleton 组件的 `style` 定义。[#28966](https://github.com/ant-design/ant-design/pull/28966) [@yingpengsha](https://github.com/yingpengsha)
+
+## 4.11.0
+
+`2021-01-24`
+
+发布失误，此版本与 `4.10.3` 无区别，不要使用这个版本。
+
+## 4.10.3
+
+`2021-01-18`
+
+- 🐞 修复按钮在 loading 加载时 `@btn-border-width` 失效问题。[#28886](https://github.com/ant-design/ant-design/pull/28886) [@jjanssen](https://github.com/jjanssen)
+- Table
+  - 🐞 修复 Table 自定义过滤器时 `onChange` 参数 `filters` 被错误转换及为空数组的问题。[#28850](https://github.com/ant-design/ant-design/pull/28850) [@Meowu](https://github.com/Meowu)
+  - 💄 调整 Table 选中列宽度至 `32px`。[#28073](https://github.com/ant-design/ant-design/pull/28073)
+  - 💄 新增 `@table-border-color` less 变量。[#28903](https://github.com/ant-design/ant-design/pull/28903)
+- Transfer
+  - 🛠 穿梭框 Search 组件使用 React Hooks 重构。[#28895](https://github.com/ant-design/ant-design/pull/28895) [@susiwen8](https://github.com/susiwen8)
+  - 🌐 增加了 German 德语翻译。[#28826](https://github.com/ant-design/ant-design/pull/28826) [@aequi42](https://github.com/aequi42)
+- Upload
+  - 🐞 支持 Upload 报错提示对 Error 文本信息的捕获（Tooltip）。[#28716](https://github.com/ant-design/ant-design/pull/28716) [@wangcch](https://github.com/wangcch)
+  - 🆕 Upload 在 `fileList` 没有提供 `uid` 时，会自动对其进行填充。[#28832](https://github.com/ant-design/ant-design/pull/28832)
+- 🐞 修复 Slider `getPopupContainer` 属性没有默认值 `document.body` 问题。[#28865](https://github.com/ant-design/ant-design/pull/28865) [@rinick](https://github.com/rinick)
+- 🐞 修复 Empty `description` 内使用 div 会报 `validateDOMNesting` 的问题。[#28862](https://github.com/ant-design/ant-design/pull/28862)
+- 💄 修复 Tree `filterTreeNode` 高亮样式丢失的问题。[#28866](https://github.com/ant-design/ant-design/pull/28866)
+- 💄 修复 Badge `dot` 宽度样式。[#28854](https://github.com/ant-design/ant-design/pull/28854)
+
+## 4.10.2
+
+`2021-01-11`
+
+- 🐞 修复 commonjs 下引入 antd 报错的问题。[#28715](https://github.com/ant-design/ant-design/issues/28804)
+
+## 4.10.1
+
+`2021-01-10`
+
+- 🛠 优化 Select 搜索性能。[#28715](https://github.com/ant-design/ant-design/pull/28715) [@kerm1it](https://github.com/kerm1it)
+- 🐞 修复 Slider 在卸载时报 `forcePopupAlign` 错的问题。[#28699](https://github.com/ant-design/ant-design/pull/28699) [@Kerumen](https://github.com/Kerumen)
+- 🐞 修复 Transfer `dataSource` 为 immutable 数据时报 `Cannot add property key, object is not extensible` 的问题。[#28675](https://github.com/ant-design/ant-design/pull/28675)
+- 🐞 修复 Notification 使用 `useNotification` 生成的提示框关闭时高度跳动的问题。[#28660](https://github.com/ant-design/ant-design/pull/28660)
+- 🐞 修复 Drawer 和 Modal 关闭后滚动条被禁用的问题。[#28749](https://github.com/ant-design/ant-design/pull/28749)
+- 🛠 优化包体积 gzipped `2kB`。[#28678](https://github.com/ant-design/ant-design/pull/28678)
+- TypeScript
+  - 🤖 InputNumber `onChange` 的 `value` 的类型增加 `null`。[#28769](https://github.com/ant-design/ant-design/pull/28769) [@lengfangbing](https://github.com/lengfangbing)
+
+## 4.10.0
+
+`2021-01-04`
+
+🎉 新年快乐！
+
+- 🐞 修复不兼容 less 4.0.0 的问题。
+- 🐞 修复 Typography 可编辑态光标跳动的问题。[#28545](https://github.com/ant-design/ant-design/pull/28545)
+- 🐞 修复 Tree 动态加载数据时重复点击展开节点会导致状态错误的问题。[#28349](https://github.com/ant-design/ant-design/issues/28349) [@liuchao233](https://github.com/react-component/tree/pull/401)
+- 🐞 修复 TreeSelect & Select `searchValue` 在受控且有值时，下拉菜单无法打开的问题。[#28574](https://github.com/ant-design/ant-design/pull/28574)
+- 🐞 修复 Dropdown 禁用菜单项内的链接样式。[#28578](https://github.com/ant-design/ant-design/pull/28578)
+- 🐞 修复 Progress `steps` 显示精度问题。[#28530](https://github.com/ant-design/ant-design/pull/28530) [@gaoryrt](https://github.com/gaoryrt)
+- 🐞 修复 Radio 在 Chrome 下的对齐样式问题。[#28616](https://github.com/ant-design/ant-design/pull/28616)
+- 🐞 修复 Collapse 修改 `@collapse-header-padding` 时箭头位置不居中的问题。[#28507](https://github.com/ant-design/ant-design/pull/28507)
+- 💄 优化 Card 图片白边样式。[#28624](https://github.com/ant-design/ant-design/pull/28624)
+- Input
+  - 🐞 修复 Input.TextArea 有 `maxLength` 时输入中文被截断的问题。[#28456](https://github.com/ant-design/ant-design/pull/28456)
+  - 🆕 Input.TextArea 的 `showCount` 属性现在支持传入一个方法来自定义数字的展示格式了。[#28145](https://github.com/ant-design/ant-design/pull/28145) [@MrHeer](https://github.com/MrHeer)
+  - 🆕 Input `focus` 支持配置获取焦点时的光标位置。[#28602](https://github.com/ant-design/ant-design/pull/28602)
+- Modal
+  - 🐞 修复 Modal 可以被拖拽到窗口外的问题。[#28438](https://github.com/ant-design/ant-design/pull/28527) [@mumiao](https://github.com/mumiao)
+  - 🆕 Modal.method 新增 `afterClose` 回调，会在 Modal 完全关闭后触发。[#28053](https://github.com/ant-design/ant-design/pull/28053) [@liuchao233](https://github.com/liuchao233)
+- Table
+  - 🐞 修复 `childrenColumnName` 和 `checkStrictly={false}` 无法一起使用的问题。[#28568](https://github.com/ant-design/ant-design/pull/28568)
+  - 🐞 修复 Checkbox.Group 内选择行为异常的问题。[#28576](https://github.com/ant-design/ant-design/pull/28576)
+  - 🐞 修复无数据时固定表头样式错乱的问题。[#28323](https://github.com/ant-design/ant-design/issues/28323)
+  - 🐞 修复自定义 `filterDropdown` 时 `onChange` 事件的 `filters` 参数总是接收空数组的问题。[#28627](https://github.com/ant-design/ant-design/pull/28627) [@Meowu](https://github.com/Meowu)
+  - 🆕 新增 `expandable.columnWidth` 以自定义展开列的宽度。[#28249](https://github.com/ant-design/ant-design/pull/28249)
+  - 🆕 选择项新增清空所有选项。[#28580](https://github.com/ant-design/ant-design/pull/28580) [@n0ruSh](https://github.com/ant-design/ant-design/pull/285)
+- Image
+  - 🐞 修复错位问题。[#28439](https://github.com/ant-design/ant-design/pull/28439) [@MoeCasts](https://github.com/MoeCasts)
+  - 💄 添加预览样式。[#28235](https://github.com/ant-design/ant-design/pull/28235)
+  - 🆕 支持使用鼠标滚轮缩放图片。[#react-component/image/52](https://github.com/react-component/image/pull/52) [@OmriGM](https://github.com/OmriGM)
+  - 🆕 支持单独设置预览图片。[#react-component/image/56](https://github.com/react-component/image/pull/56) [@wangcch](https://github.com/wangcch)
+- Upload
+  - 🐞 修复不使用 `transformFile` 时也会有警告的问题。[#28455](https://github.com/ant-design/ant-design/pull/28455) [@YanYuanFE](https://github.com/YanYuanFE)
+  - 🐞 修复 Upload 的 `fileList` 和 immer 数据配合使用报错问题。[#28636](https://github.com/ant-design/ant-design/pull/28636) [@mumiao](https://github.com/mumiao)
+  - 🆕 Upload 新增 `maxCount` 属性以限制文件数量。[#28367](https://github.com/ant-design/ant-design/pull/28367)
+- DatePicker
+  - 🚀 优化 `disabledDate` 逻辑。[#react-component/picker/191](https://github.com/react-component/picker/pull/191)
+  - 🆕 新增 `onKeyDown` 回调。[#react-component/picker/138](https://github.com/react-component/picker/pull/138) [@conquera99](https://github.com/react-component/picker/pull/138)
+- Select
+  - 🐞 修复 `options` 更新不会触发选择框内容更新的问题。[#react-component/select/580](https://github.com/react-component/select/pull/580) [@jameslahm](https://github.com/jameslahm)
+  - 🐞 修复使用 `tagRender` 后点击选项无法打开下拉框的问题。[react-component/select/582](https://github.com/react-component/select/pull/582) [@mumiao](https://github.com/mumiao)
+  - 🐞 修复 `tokenSeparators` 在中文输入法下无法正确识别分隔符的问题。[#28564](https://github.com/ant-design/ant-design/issues/28564)
+  - 🆕 `ref` 新增 `scrollTo` 方法。[#react-component/select/565](https://github.com/react-component/select/pull/565)
+  - 🆕 多选模式下 `maxTagCount` 支持 `responsive`。[#28520](https://github.com/ant-design/ant-design/pull/28520)
+- 🆕 Slider 新增 range.draggableTrack 以支持范围刻度整体可拖拽。[#28592](https://github.com/ant-design/ant-design/pull/28592)
+- 🆕 `message` 新增 `onClick` 回调，会在消息被点击时触发。[#28148](https://github.com/ant-design/ant-design/pull/28148) [@ZeroTo0ne](https://github.com/ant-design/ant-design/pull/28148)
+- 🆕 Descriptions 上可以统一设置 `labelStyle` 和 `contentStyle`。 [#28613](https://github.com/ant-design/ant-design/pull/28613)
+- 🆕 Form 的 `scrollToFirstError` 属性支持设置滚动的位置参数。[#28272](https://github.com/ant-design/ant-design/pull/28272) [@vouis](https://github.com/vouis)
+- 🆕 Steps 新增 reponsive 属性用于关闭响应式样式。[#28459](https://github.com/ant-design/ant-design/pull/28459)
+- 🌐 国际化
+  - 🇭🇷 改进克罗地亚语的支持。[#28458](https://github.com/ant-design/ant-design/pull/28458)
+- TypeScript
+  - 🛠 修复 PageHeader 的 `title` 的类型问题。[#28374](https://github.com/ant-design/ant-design/pull/28374) [@zhukovvandrei](https://github.com/zhukovvandrei)
+
+## 4.9.4
+
+`2020-12-16`
+
+- 🐞 修复 Menu 在 Chrome 下 hover 色延迟变化的问题。[#28372](https://github.com/ant-design/ant-design/pull/28372)
+- 🐞 修复 Tree 的节点连接线在滚动时位置偏移的问题。[#28354](https://github.com/ant-design/ant-design/pull/28354) [@maksnester](https://github.com/maksnester)
+- 💄 修复 Table 固定列 `z-index` 样式让 Dropdown 无法展示在最顶层的问题。[#28346](https://github.com/ant-design/ant-design/pull/28346)
+- TypeScript
+  - 🤖 修复 `message.loading()` 返回函数的定义。[#28362](https://github.com/ant-design/ant-design/pull/28362)
+
+## 4.9.3
+
+`2020-12-14`
+
+- 💄 修复 Badge 独立使用时展示/收起动画跳动的问题。[#28240](https://github.com/ant-design/ant-design/pull/28240)
+- 🐞 修复 Table `filters` 不支持数字和 boolean 类型的问题。[#28220](https://github.com/ant-design/ant-design/pull/28220) [@Meowu](https://github.com/Meowu)
+- 💄 修复 Tree 当 `selectable={false}` 时节点依然有 hover 背景色的问题。[#28269](https://github.com/ant-design/ant-design/pull/28269)
+- 💄 修复 Statistics 小数点字体大小问题。[#28223](https://github.com/ant-design/ant-design/pull/28223)
+- TypeScript
+  - 🤖 修复 Tree `draggable` 支持函数的定义。[#28262](https://github.com/ant-design/ant-design/pull/28262) [@DavidSichau](https://github.com/DavidSichau)
+  - 🤖 修复 Image.PreviewGroup 类型。[#28263](https://github.com/ant-design/ant-design/pull/28263) [@liuchao233](https://github.com/liuchao233)
+  - 🤖 优化 `message().then` 的 TS 定义。[#28304](https://github.com/ant-design/ant-design/pull/28304)
+  - 🤖 修正 TransferProps 的 `titles` 类型为 ReactNode。[#28326](https://github.com/ant-design/ant-design/pull/28326) [@jacklee814](https://github.com/jacklee814)
+
+## 4.9.2
+
+`2020-12-06`
+
+- Table
+  - 🐞 修复 Table 选择功能有时会 crash 的问题。[#28193](https://github.com/ant-design/ant-design/pull/28193) [@yanguoyu](https://github.com/yanguoyu)
+  - 💄 修复 Table 选择列标题的对齐样式问题。[#28173](https://github.com/ant-design/ant-design/pull/28173)
+- Dropdown
+  - 💄 修复 Dropdown 下拉菜单箭头样式。[#28181](https://github.com/ant-design/ant-design/pull/28181)
+  - 🐞 修复 Dropdown 点击触发区域不匹配的问题。[#28180](https://github.com/ant-design/ant-design/pull/28180)
+- 🐞 修复 Tooltip `overlayInnerStyle` 属性无效。[#27682](https://github.com/ant-design/ant-design/pull/27682) [@jasepellerin](https://github.com/jasepellerin)
+- 💄 修复 Layout 内部使用 Table `sticky` 属性失效的问题。[#28176](https://github.com/ant-design/ant-design/pull/28176)
+- 💄 修复 Steps `progressDot` 第一个步骤点错位的问题。[#28126](https://github.com/ant-design/ant-design/pull/28126) [@ZeroTo0ne](https://github.com/ZeroTo0ne)
+- 💄 优化 Modal `useModal` 性能，避免元素渲染导致组件渲染。[#28122](https://github.com/ant-design/ant-design/pull/28122) [@TotooriaHyperion](https://github.com/TotooriaHyperion)
+- 💄 修复 TextArea 结合 Form 使用时的字数提示样式问题。[#28130](https://github.com/ant-design/ant-design/pull/28130) [@AlanCutFlim](https://github.com/AlanCutFlim)
+- 💄 修复 Tree 里使用 Tag 时鼠标手型样式问题。[#28219](https://github.com/ant-design/ant-design/pull/28219)
+- 🛠 移除对 `@ant-design/css-animation` 的依赖以优化包体积。[#28201](https://github.com/ant-design/ant-design/pull/28201)
+- RTL
+  - 💄 修复 Alert rtl 样式。[#28108](https://github.com/ant-design/ant-design/pull/28108) [@jesse3mh9a](https://github.com/jesse3mh9a)
+  - 🐞 修复 Tree `dropIndicator` 默认 ltr 方向下的样式问题。[#28150](https://github.com/ant-design/ant-design/pull/28150) [@kagawagao](https://github.com/kagawagao)
+- TypeScript
+  - 🤖 修复 Table `SelectionSelectFn` 类型定义中 `selectedRows` 属性改为 T 范型。[#28206](https://github.com/ant-design/ant-design/pull/28206) [@weiyuc](https://github.com/weiyuc)
+  - 🤖 Breadcrumb 的 `BreadcrumbItem` 中增加 `className` 类型。[#28182](https://github.com/ant-design/ant-design/pull/28182) [@ccloveak](https://github.com/ccloveak)
+  - 🤖 Form.List `initialValue` 增加类型支持。[#28153](https://github.com/ant-design/ant-design/pull/28153) [@Debiancc](https://github.com/Debiancc)
+  - 🤖 修复 Carousel 中 `dontAnimate` 参数为可选类型。[#28090](https://github.com/ant-design/ant-design/pull/28090) [@jarretmoses](https://github.com/jarretmoses)
+
+## 4.9.1
+
+`2020-12-01`
+
+- TypeScript
+  - 🤖 修复 Collapse.Panel 可折叠属性 `collapsible` 为可选。[#28092](https://github.com/ant-design/ant-design/pull/28092) [@sammarks](https://github.com/sammarks)
+
+## 4.9.0
+
+`2020-11-30`
+
+- Modal
+  - 🆕 Modal 支持 `focusTriggerAfterClose` 以关闭自动恢复焦点的功能。[#27985](https://github.com/ant-design/ant-design/pull/27985) [@molokovev](https://github.com/molokovev)
+  - 🐞 修复 Modal hooks 没有触发 `onCancel` 的问题。[#28063](https://github.com/ant-design/ant-design/pull/28063) [@JuniorTour](https://github.com/JuniorTour)
+  - 🐞 修复 Modal 有时不在点击位置弹出的问题。[#28037](https://github.com/ant-design/ant-design/pull/28037)
+  - 🆕 Modal.method 支持 `closable` 和 `closeIcon`。[#27909](https://github.com/ant-design/ant-design/pull/27909) [@MrHeer](https://github.com/MrHeer)
+- 💄 减少 Table 选中列宽度至 `32px`。[#28073](https://github.com/ant-design/ant-design/pull/28073)
+- Image
+  - 🔥 Image 增加 PreviewGroup 组件支持多张图片预览。[#28069](https://github.com/ant-design/ant-design/pull/28069)
+  - 🐞 修复 Image style 属性未作用于 img 元素的问题。[#27446](https://github.com/ant-design/ant-design/pull/27446)
+- Collapse
+  - 🔥 Collapse 添加 `collapsible` 以支持指定可折叠触发区域并废弃 Panel 的 `disabled` 属性。[#27790](https://github.com/ant-design/ant-design/pull/27790)
+  - 🐞 修复 Collapse 内使用 `<Table sticky />` 时不生效的问题。[#28039](https://github.com/ant-design/ant-design/pull/28039)
+- 🐞 修复 Cascader 空数据可以被选择的问题。[#28062](https://github.com/ant-design/ant-design/pull/28062) [@n0ruSh](https://github.com/n0ruSh)
+- 🆕 Alert 支持 `action` 属性。[#25892](https://github.com/ant-design/ant-design/pull/25892) [@jesse3mh9a](https://github.com/jesse3mh9a)
+- 🔥 Tree 重构拖拽行为，增加 `dropIndicatorRender` 和 `allowDrop` 属性。[#26462](https://github.com/ant-design/ant-design/pull/26462) [@07akioni](https://github.com/07akioni)
+- 🆕 Space 增加 `wrap` 属性以配置自动换行。[#27910](https://github.com/ant-design/ant-design/pull/27910)
+- 🆕 Descriptions.Item 支持 `labelStyle` 和 `contentStyle` 属性。[#27897](https://github.com/ant-design/ant-design/pull/27897)
+- 🆕 Form.List 支持 `initialValue`。[#27872](https://github.com/ant-design/ant-design/pull/27872)
+- 🆕 Menu 新增 `expandIcon` 属性以支持自定义展开图标，同时优化了默认图标的样式。[#27565](https://github.com/ant-design/ant-design/pull/27565)
+- 🆕 Input 和 TextArea 组件的 `ref` 属性增加`setSelectionRange`方法。[#27584](https://github.com/ant-design/ant-design/pull/27584) [@appleshell](https://github.com/appleshell)
+- 🆕 Select 组件新增 `filterSort` 属性以支持筛选模式下选项排序功能。[#27523](https://github.com/ant-design/ant-design/pull/27523) [@n0ruSh](https://github.com/n0ruSh)
+- 🇰🇿 新增哈萨克语。[#27589](https://github.com/ant-design/ant-design/pull/27589) [@nodkz](https://github.com/nodkz)
+
+## 4.8.6
+
+`2020-11-27`
+
+- 🐞 修复 Badge 在初始化时样式抖动的问题。[#28003](https://github.com/ant-design/ant-design/pull/28003)
+- 💄 优化 Modal 相关样式的冗余。[#27998](https://github.com/ant-design/ant-design/pull/27998)
+- 🐞 修复 Layout.Sider 在 `width='0'` 时不能展开的问题。[#28000](https://github.com/ant-design/ant-design/pull/28000)
+- 🐞 修复 Menu 使用非 Ant Design 图标时的样式问题。[#27983](https://github.com/ant-design/ant-design/pull/27983)
+- Input
+  - 🐞 修复 Input.Search 自定义 less 变量时的按钮高度问题。[#27986](https://github.com/ant-design/ant-design/pull/27986)
+  - 🐞 修复 Input.Search `addonBefore` 样式异常。[#27960](https://github.com/ant-design/ant-design/pull/27960)
+- 🐞 修复 Typography.Link 点击复制按钮会触发链接跳转的问题。[#27982](https://github.com/ant-design/ant-design/pull/27982)
+- 🐞 修复 Carousel `Unable to preventDefault inside passive event listener` 报错问题。[#27957](https://github.com/ant-design/ant-design/pull/27957)
+- 🌐 改进 DatePicker 的 `en_GB` 与 `zh_TW` 本地化支持。[#28016](https://github.com/ant-design/ant-design/pull/28016) [@abz53378](https://github.com/abz53378)
+- RTL
+  - 💄 优化 Descriptions 在 RTL 模型下的边框样式。[#28010](https://github.com/ant-design/ant-design/pull/28010)
+  - 💄 修复 Steps 垂直方向在 RTL 模式下的样式。[#27996](https://github.com/ant-design/ant-design/pull/27996)
+- TypeScript
+  - 🤖 修复 Upload 的 `beforeUpload` 定义问题。[#27946](https://github.com/ant-design/ant-design/pull/27946) [@bingling0084](https://github.com/bingling0084)
+  - 🤖 为 Carousel 提供单独的 ref 定义。[#27935](https://github.com/ant-design/ant-design/pull/27935) [@ocassio](https://github.com/ocassio)
+
+## 4.8.5
+
+`2020-11-22`
+
+- 🐞 修复 Spin 组件不能渲染 `0` 的问题。[#27839](https://github.com/ant-design/ant-design/pull/27839) [@liuchao233](https://github.com/liuchao233)
+- 💄 修复 RangePicker 面板的交互样式。[#27894](https://github.com/ant-design/ant-design/pull/27894)
+- 💄 修复 Switch `loading` 的样式问题。[#27860](https://github.com/ant-design/ant-design/pull/27860)
+- 💄 优化 Skeleton 默认色彩使其能放置在暗色背景中。[#27836](https://github.com/ant-design/ant-design/pull/27836)
+- 💄 调整 Statistic 小数的字体大小。[#27884](https://github.com/ant-design/ant-design/pull/27884)
+- 🛠 使用 React hooks 重构 Checkbox、Layout.Sider 和 TextArea。[#27739](https://github.com/ant-design/ant-design/pull/27739) [#27719](https://github.com/ant-design/ant-design/pull/27719) [#27693](https://github.com/ant-design/ant-design/pull/27693)
+- 🛠 使用 `rc-motion` 动画库代替 `rc-animate` 重构 BackTop、Badge、UploadList。[#27840](https://github.com/ant-design/ant-design/pull/27840) [#27848](https://github.com/ant-design/ant-design/pull/27848) [#27923](https://github.com/ant-design/ant-design/pull/27923)
+- RTL
+  - 💄 修复 Tree 切换按钮在 RTL 模式下的样式问题。[#27876](https://github.com/ant-design/ant-design/pull/27876)
+- TypeScript
+  - 🤖 修复 AutoComplete `DataSourceItemType` 的类型定义。[#27892](https://github.com/ant-design/ant-design/pull/27892)
+  - 🤖 导出 Image 的 `ImageProps` 接口。[#27846](https://github.com/ant-design/ant-design/pull/27846) [@wangcch](https://github.com/wangcch)
+
+## 4.8.4
+
+`2020-11-16`
+
+- 💄 修复 Button 和 Form 校验 loading 样式错误的问题。[#27794](https://github.com/ant-design/ant-design/pull/27794)
+- 🐞 修复 Modal.confirm 关闭时国际化丢失的问题。[#27797](https://github.com/ant-design/ant-design/pull/27797)
+- 🐞 修复 Button 和 Anchor 等组件在 React 17 下 `findDOMNode is deprecated` 的警告。[#27755](https://github.com/ant-design/ant-design/pull/27755) [@hosseinmd](https://github.com/hosseinmd)
+
+## 4.8.3
+
+`2020-11-14`
+
+- 🛠 使用 React hooks 重构 Carousel。[#27694](https://github.com/ant-design/ant-design/pull/27694)
+- 🛠 使用 React hooks 重构 `<Typography editable />`。[#27655](https://github.com/ant-design/ant-design/pull/27655)
+- 🐞 修复 Form 在 namePath 为数组的时候表现异常的问题。[#27664](https://github.com/ant-design/ant-design/pull/27664)
+- 💄 修复 DateRangePicker 选择已选范围内一行的首尾日期时的悬浮样式位置异常问题。[#27731](https://github.com/ant-design/ant-design/pull/27731) [@AlanCutFlim](https://github.com/AlanCutFlim)
+- 🐞 修复 Select `tags` 模式下无法输入空格的问题。[#27726](https://github.com/ant-design/ant-design/pull/27726) [@baxtergu](https://github.com/baxtergu)
+- 💄 修复 Typography.Link 禁用时鼠标样式问题。[#27734](https://github.com/ant-design/ant-design/pull/27734)
+- 🐞 修复 Menu 下拉框显示时动画会播放两次的问题。[#27663](https://github.com/ant-design/ant-design/pull/27663)
+- 💄 修复 Avatar src 为 Image 时的样式问题。[#27691](https://github.com/ant-design/ant-design/pull/27691)
+- 💄 修复 Select `mode="multiple"` 的光标位置偏左的问题。[#27689](https://github.com/ant-design/ant-design/pull/27689)
+- 🐞 修复 TextArea 使用 emoji 时被裁切的问题。[#27679](https://github.com/ant-design/ant-design/pull/27679) [@372623460jh](https://github.com/372623460jh)
+- 🐞 修复 RangePicker `size="small"` 时高亮线没有对齐的问题。[#27673](https://github.com/ant-design/ant-design/pull/27673) [@Ifeinstein](https://github.com/Ifeinstein)
+- 💄 新增 `@radio-border-width` less 变量。[#27703](https://github.com/ant-design/ant-design/pull/27703)
+
+## 4.8.2
+
+`2020-11-09`
+
+- 🐞 修复 Pagination 快速跳转 margin 丢失的问题。[#27650](https://github.com/ant-design/ant-design/pull/27650)
+- 🐞 修复 Steps `type="navigation"` 最后一项的样式问题。[#27654](https://github.com/ant-design/ant-design/pull/27654)
+
 ## 4.8.1
 
 `2020-11-08`

README-pt_BR.md

@@ -10,18 +10,16 @@
 
 Uma solução empresarial de design e biblioteca UI para React.
 
-[![CircleCI status][circleci-image]][circleci-url] [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
+[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
 
-[![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![FOSSA Status][fossa-image]][fossa-url] [![Issues need help][help-wanted-image]][help-wanted-url]
+[![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![][bundlesize-js-image]][unpkg-js-url] [![][bundlesize-css-image]][unpkg-css-url]
 
-[![Follow Twitter][twitter-image]][twitter-url] [![Gitter][gitter-english-image]][gitter-english-url] [![Gitter][gitter-chinese-image]][gitter-chinese-url] [![[SemVer stability]][semver-stability-image]][semver-stability-url]
+[![Follow Twitter][twitter-image]][twitter-url] [![FOSSA Status][fossa-image]][fossa-url] [![Discussions][discussions-image]][discussions-url] [![Issues need help][help-wanted-image]][help-wanted-url]
 
 [npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/antd
-[circleci-image]: https://img.shields.io/travis/com/ant-design/ant-design.svg?style=flat-square
-[circleci-url]: https://travis-ci.com/ant-design/ant-design
-[github-action-image]: https://github.com/ant-design/ant-design/workflows/test/badge.svg
-[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3Atest
+[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
+[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
 [codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
 [codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
 [david-image]: https://img.shields.io/david/ant-design/ant-design?style=flat-square
@@ -38,12 +36,12 @@ Uma solução empresarial de design e biblioteca UI para React.
 [help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
 [twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social
 [twitter-url]: https://twitter.com/AntDesignUI
-[gitter-english-image]: https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=18&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D
-[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
+[discussions-image]: https://img.shields.io/badge/discussions-on%20github-blue?style=flat-square
+[discussions-url]: https://github.com/ant-design/ant-design/discussions
+[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
+[bundlesize-css-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.css?label=antd.min.css&compression=gzip&style=flat-square
+[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
+[unpkg-css-url]: https://unpkg.com/browse/antd/dist/antd.min.css
 
 </div>
 

README-zh_CN.md

@@ -10,18 +10,16 @@
 
 一套企业级 UI 设计语言和 React 组件库。
 
-[![CircleCI status][circleci-image]][circleci-url] [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
+[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
 
-[![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![FOSSA Status][fossa-image]][fossa-url] [![Issues need help][help-wanted-image]][help-wanted-url]
+[![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![][bundlesize-js-image]][unpkg-js-url] [![][bundlesize-css-image]][unpkg-css-url]
 
-[![Follow Twitter][twitter-image]][twitter-url] [![Gitter][gitter-english-image]][gitter-english-url] [![Gitter][gitter-chinese-image]][gitter-chinese-url] [![[SemVer stability]][semver-stability-image]][semver-stability-url]
+[![Follow Twitter][twitter-image]][twitter-url] [![FOSSA Status][fossa-image]][fossa-url] [![Discussions][discussions-image]][discussions-url] [![Issues need help][help-wanted-image]][help-wanted-url]
 
 [npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/antd
-[circleci-image]: https://img.shields.io/circleci/build/github/ant-design/ant-design/master?style=flat-square
-[circleci-url]: https://circleci.com/gh/ant-design/ant-design
-[github-action-image]: https://github.com/ant-design/ant-design/workflows/test/badge.svg
-[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3Atest
+[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
+[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
 [codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
 [codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
 [david-image]: https://img.shields.io/david/ant-design/ant-design?style=flat-square
@@ -38,12 +36,12 @@
 [help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
 [twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social
 [twitter-url]: https://twitter.com/AntDesignUI
-[gitter-english-image]: https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=18&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D
-[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
-[semver-stability-image]: https://api.dependabot.com/badges/compatibility_score?dependency-name=antd&package-manager=npm_and_yarn&version-scheme=semver
+[discussions-image]: https://img.shields.io/badge/discussions-on%20github-blue?style=flat-square
+[discussions-url]: https://github.com/ant-design/ant-design/discussions
+[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
+[bundlesize-css-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.css?label=antd.min.css&compression=gzip&style=flat-square
+[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
+[unpkg-css-url]: https://unpkg.com/browse/antd/dist/antd.min.css
 
 </div>
 
@@ -114,17 +112,15 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
 ## 🔗 链接
 
 - [首页](https://ant.design/)
-- [组件库](https://ant.design/components/overview-cn)
+- [所有组件](https://ant.design/components/overview-cn)
 - [Ant Design Pro](http://pro.ant.design/)
-- [Ant Design Charts](https://charts.ant.design)
 - [更新日志](CHANGELOG.en-US.md)
 - [React 底层基础组件](http://react-component.github.io/)
 - [移动端组件](http://mobile.ant.design)
+- [页面级组件](https://procomponents.ant.design)
+- [Ant Design 图表](https://charts.ant.design)
 - [Ant Design 图标](https://github.com/ant-design/ant-design-icons)
 - [Ant Design 色彩](https://github.com/ant-design/ant-design-colors)
-- [Ant Design Pro 布局组件](https://github.com/ant-design/ant-design-pro-layout)
-- [Ant Design Pro 区块集](https://github.com/ant-design/pro-blocks)
-- [Dark Theme](https://github.com/ant-design/ant-design-dark-theme)
 - [首页模板集](https://landing.ant.design)
 - [动效](https://motion.ant.design)
 - [脚手架市场](http://scaffold.ant.design)
@@ -133,8 +129,8 @@ import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
 - [版本发布规则](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
 - [常见问题](https://ant.design/docs/react/faq-cn)
 - [CodeSandbox 模板](https://u.ant.design/codesandbox-repro) for bug reports
-- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
 - [定制主题](https://ant.design/docs/react/customize-theme-cn)
+- [国际化](https://ant.design/docs/react/i18n-cn)
 - [成为社区协作成员](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
 
 ## ⌨️ 本地开发
@@ -166,11 +162,13 @@ $ npm start
 
 如果您在使用的过程中碰到问题，可以通过下面几个途径寻求帮助，同时我们也鼓励资深用户通过下面的途径给新人提供帮助。
 
+通过 GitHub Discussions 提问时，建议使用 `Q&A` 标签。
+
 通过 Stack Overflow 或者 Segment Fault 提问时，建议加上 `antd` 标签。
 
-1. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（英文）
-2. [Segment Fault](https://segmentfault.com/t/antd)（中文）
-3. [![Join the chat at https://gitter.im/ant-design/ant-design](https://badges.gitter.im/Join%20Chat.svg)](https://gitter.im/ant-design/ant-design?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
+1. [GitHub Discussions](https://github.com/ant-design/ant-design/discussions)
+2. [Stack Overflow](http://stackoverflow.com/questions/tagged/antd)（英文）
+3. [Segment Fault](https://segmentfault.com/t/antd)（中文）
 
 ## ❤️ 赞助者 ![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen) ![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)
 

README.md

@@ -10,18 +10,16 @@
 
 An enterprise-class UI design language and React UI library.
 
-[![CircleCI status][circleci-image]][circleci-url] [![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
+[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
 
-[![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![FOSSA Status][fossa-image]][fossa-url] [![Issues need help][help-wanted-image]][help-wanted-url]
+[![david deps][david-image]][david-url] [![david devDeps][david-dev-image]][david-dev-url] [![Total alerts][lgtm-image]][lgtm-url] [![][bundlesize-js-image]][unpkg-js-url] [![][bundlesize-css-image]][unpkg-css-url]
 
-[![Follow Twitter][twitter-image]][twitter-url] [![Gitter][gitter-english-image]][gitter-english-url] [![Gitter][gitter-chinese-image]][gitter-chinese-url] [![[SemVer stability]][semver-stability-image]][semver-stability-url]
+[![Follow Twitter][twitter-image]][twitter-url] [![FOSSA Status][fossa-image]][fossa-url] [![Discussions][discussions-image]][discussions-url] [![Issues need help][help-wanted-image]][help-wanted-url]
 
 [npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
 [npm-url]: http://npmjs.org/package/antd
-[circleci-image]: https://img.shields.io/circleci/build/github/ant-design/ant-design/master?style=flat-square
-[circleci-url]: https://circleci.com/gh/ant-design/ant-design
-[github-action-image]: https://github.com/ant-design/ant-design/workflows/test/badge.svg
-[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3Atest
+[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
+[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
 [codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
 [codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
 [david-image]: https://img.shields.io/david/ant-design/ant-design?style=flat-square
@@ -38,12 +36,12 @@ An enterprise-class UI design language and React UI library.
 [help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
 [twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social
 [twitter-url]: https://twitter.com/AntDesignUI
-[gitter-english-image]: https://img.shields.io/gitter/room/ant-design/ant-design-english.svg?style=flat-square&logoWidth=18&logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4NCjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgd2lkdGg9IjEyMzUiIGhlaWdodD0iNjUwIiB2aWV3Qm94PSIwIDAgNzQxMCAzOTAwIj4NCjxyZWN0IHdpZHRoPSI3NDEwIiBoZWlnaHQ9IjM5MDAiIGZpbGw9IiNiMjIyMzQiLz4NCjxwYXRoIGQ9Ik0wLDQ1MEg3NDEwbTAsNjAwSDBtMCw2MDBINzQxMG0wLDYwMEgwbTAsNjAwSDc0MTBtMCw2MDBIMCIgc3Ryb2tlPSIjZmZmIiBzdHJva2Utd2lkdGg9IjMwMCIvPg0KPHJlY3Qgd2lkdGg9IjI5NjQiIGhlaWdodD0iMjEwMCIgZmlsbD0iIzNjM2I2ZSIvPg0KPGcgZmlsbD0iI2ZmZiI%2BDQo8ZyBpZD0iczE4Ij4NCjxnIGlkPSJzOSI%2BDQo8ZyBpZD0iczUiPg0KPGcgaWQ9InM0Ij4NCjxwYXRoIGlkPSJzIiBkPSJNMjQ3LDkwIDMxNy41MzQyMzAsMzA3LjA4MjAzOSAxMzIuODczMjE4LDE3Mi45MTc5NjFIMzYxLjEyNjc4MkwxNzYuNDY1NzcwLDMwNy4wODIwMzl6Ii8%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzIiB5PSI0MjAiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3MiIHk9Ijg0MCIvPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTI2MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjcyIgeT0iMTY4MCIvPg0KPC9nPg0KPHVzZSB4bGluazpocmVmPSIjczQiIHg9IjI0NyIgeT0iMjEwIi8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzOSIgeD0iNDk0Ii8%2BDQo8L2c%2BDQo8dXNlIHhsaW5rOmhyZWY9IiNzMTgiIHg9Ijk4OCIvPg0KPHVzZSB4bGluazpocmVmPSIjczkiIHg9IjE5NzYiLz4NCjx1c2UgeGxpbms6aHJlZj0iI3M1IiB4PSIyNDcwIi8%2BDQo8L2c%2BDQo8L3N2Zz4%3D
-[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
-[semver-stability-image]: https://api.dependabot.com/badges/compatibility_score?dependency-name=antd&package-manager=npm_and_yarn&version-scheme=semver
+[discussions-image]: https://img.shields.io/badge/discussions-on%20github-blue?style=flat-square
+[discussions-url]: https://github.com/ant-design/ant-design/discussions
+[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
+[bundlesize-css-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.css?label=antd.min.css&compression=gzip&style=flat-square
+[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
+[unpkg-css-url]: https://unpkg.com/browse/antd/dist/antd.min.css
 
 </div>
 
@@ -110,17 +108,15 @@ Dozens of languages supported in `antd`, see [i18n](https://ant.design/docs/reac
 ## 🔗 Links
 
 - [Home page](https://ant.design/)
-- [Components](https://ant.design/components/overview)
+- [Components Overview](https://ant.design/components/overview)
 - [Ant Design Pro](http://pro.ant.design/)
-- [Ant Design Charts](https://charts.ant.design)
 - [Change Log](CHANGELOG.en-US.md)
 - [rc-components](http://react-component.github.io/)
 - [Mobile UI](http://mobile.ant.design)
+- [Ant Design Pro Components](https://procomponents.ant.design)
+- [Ant Design Charts](https://charts.ant.design)
 - [Ant Design Icons](https://github.com/ant-design/ant-design-icons)
 - [Ant Design Colors](https://github.com/ant-design/ant-design-colors)
-- [Ant Design Pro Layout](https://github.com/ant-design/ant-design-pro-layout)
-- [Ant Design Pro Blocks](https://github.com/ant-design/pro-blocks)
-- [Dark Theme](https://github.com/ant-design/ant-design-dark-theme)
 - [Landing Pages](https://landing.ant.design)
 - [Motion](https://motion.ant.design)
 - [Scaffold Market](http://scaffold.ant.design)
@@ -128,7 +124,6 @@ Dozens of languages supported in `antd`, see [i18n](https://ant.design/docs/reac
 - [Versioning Release Note](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
 - [FAQ](https://ant.design/docs/react/faq)
 - [CodeSandbox Template](https://u.ant.design/codesandbox-repro) for bug reports
-- [Awesome Ant Design](https://github.com/websemantics/awesome-ant-design)
 - [Customize Theme](https://ant.design/docs/react/customize-theme)
 - [How to Apply for Being A Collaborator](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
 

components/_util/__tests__/getScrollNode.test.ts

@@ -1,6 +1,4 @@
-/**
- * @jest-environment node
- */
+/** @jest-environment node */
 import getScroll from '../getScroll';
 
 describe('getScroll node', () => {

components/_util/__tests__/util.test.js

@@ -1,4 +1,4 @@
-import raf from 'raf';
+import raf from 'rc-util/lib/raf';
 import React from 'react';
 import { mount } from 'enzyme';
 import KeyCode from 'rc-util/lib/KeyCode';
@@ -10,13 +10,10 @@ import {
 import getDataOrAriaProps from '../getDataOrAriaProps';
 import Wave from '../wave';
 import TransButton from '../transButton';
-import { isStyleSupport, isFlexSupported } from '../styleChecker';
+import { isStyleSupport } from '../styleChecker';
 import { sleep } from '../../../tests/utils';
-import focusTest from '../../../tests/shared/focusTest';
 
 describe('Test utils function', () => {
-  focusTest(TransButton);
-
   describe('throttle', () => {
     it('throttle function should work', async () => {
       const callback = jest.fn();
@@ -193,9 +190,10 @@ describe('Test utils function', () => {
 
   describe('TransButton', () => {
     it('can be focus/blur', () => {
-      const wrapper = mount(<TransButton>TransButton</TransButton>);
-      expect(typeof wrapper.instance().focus).toBe('function');
-      expect(typeof wrapper.instance().blur).toBe('function');
+      const ref = React.createRef();
+      mount(<TransButton ref={ref}>TransButton</TransButton>);
+      expect(typeof ref.current.focus).toBe('function');
+      expect(typeof ref.current.blur).toBe('function');
     });
 
     it('should trigger onClick when press enter', () => {
@@ -210,10 +208,6 @@ describe('Test utils function', () => {
   });
 
   describe('style', () => {
-    it('isFlexSupported', () => {
-      expect(isFlexSupported).toBe(true);
-    });
-
     it('isStyleSupport', () => {
       expect(isStyleSupport('color')).toBe(true);
       expect(isStyleSupport('not-existed')).toBe(false);

components/_util/hooks/useCombinedRefs.tsx

@@ -1,19 +0,0 @@
-import * as React from 'react';
-import { fillRef } from '../ref';
-
-function useCombinedRefs<T>(
-  ...refs: Array<React.MutableRefObject<T> | ((instance: T) => void) | null>
-) {
-  const targetRef = React.useRef<T>();
-
-  React.useEffect(() => {
-    refs.forEach(ref => {
-      if (!ref) return;
-      fillRef(ref, targetRef.current);
-    });
-  }, [refs]);
-
-  return targetRef;
-}
-
-export default useCombinedRefs;

components/_util/hooks/usePatchElement.tsx

@@ -6,7 +6,7 @@ export default function usePatchElement(): [
 ] {
   const [elements, setElements] = React.useState<React.ReactElement[]>([]);
 
-  function patchElement(element: React.ReactElement) {
+  const patchElement = React.useCallback((element: React.ReactElement) => {
     // append a new element to elements (and create a new ref)
     setElements(originElements => [...originElements, element]);
 
@@ -15,7 +15,7 @@ export default function usePatchElement(): [
     return () => {
       setElements(originElements => originElements.filter(ele => ele !== element));
     };
-  }
+  }, []);
 
   return [elements, patchElement];
 }

components/_util/isNumeric.ts

@@ -1,5 +1,3 @@
-const isNumeric = (value: any): boolean => {
-  return !isNaN(parseFloat(value)) && isFinite(value);
-};
+const isNumeric = (value: any): boolean => !isNaN(parseFloat(value)) && isFinite(value);
 
 export default isNumeric;

components/_util/raf.ts

@@ -1,4 +1,4 @@
-import raf from 'raf';
+import raf from 'rc-util/lib/raf';
 
 interface RafMap {
   [id: number]: number;

components/_util/reactNode.ts

@@ -2,16 +2,23 @@ import * as React from 'react';
 
 export const { isValidElement } = React;
 
+type AnyObject = Record<any, any>;
+
+type RenderProps = undefined | AnyObject | ((originProps: AnyObject) => AnyObject | undefined);
+
 export function replaceElement(
   element: React.ReactNode,
   replacement: React.ReactNode,
-  props: any,
+  props: RenderProps,
 ): React.ReactNode {
   if (!isValidElement(element)) return replacement;
 
-  return React.cloneElement(element, typeof props === 'function' ? props() : props);
+  return React.cloneElement(
+    element,
+    typeof props === 'function' ? props(element.props || {}) : props,
+  );
 }
 
-export function cloneElement(element: React.ReactNode, props?: any): React.ReactElement {
+export function cloneElement(element: React.ReactNode, props?: RenderProps): React.ReactElement {
   return replaceElement(element, element, props) as React.ReactElement;
 }

components/_util/ref.ts

@@ -1,17 +0,0 @@
-import * as React from 'react';
-
-export function fillRef<T>(ref: React.Ref<T>, node: T) {
-  if (typeof ref === 'function') {
-    ref(node);
-  } else if (typeof ref === 'object' && ref && 'current' in ref) {
-    (ref as any).current = node;
-  }
-}
-
-export function composeRef<T>(...refs: React.Ref<T>[]): React.Ref<T> {
-  return (node: T) => {
-    refs.forEach(ref => {
-      fillRef(ref, node);
-    });
-  };
-}

components/_util/scrollTo.ts

@@ -1,4 +1,4 @@
-import raf from 'raf';
+import raf from 'rc-util/lib/raf';
 import getScroll, { isWindow } from './getScroll';
 import { easeInOutCubic } from './easings';
 

components/_util/styleChecker.tsx

@@ -1,5 +1,9 @@
+import canUseDom from 'rc-util/lib/Dom/canUseDom';
+
+export const canUseDocElement = () => canUseDom() && window.document.documentElement;
+
 export const isStyleSupport = (styleName: string | Array<string>): boolean => {
-  if (typeof window !== 'undefined' && window.document && window.document.documentElement) {
+  if (canUseDocElement()) {
     const styleNameList = Array.isArray(styleName) ? styleName : [styleName];
     const { documentElement } = window.document;
 
@@ -8,4 +12,30 @@ export const isStyleSupport = (styleName: string | Array<string>): boolean => {
   return false;
 };
 
-export const isFlexSupported = isStyleSupport(['flex', 'webkitFlex', 'Flex', 'msFlex']);
+let flexGapSupported: boolean | undefined;
+export const detectFlexGapSupported = () => {
+  if (!canUseDocElement()) {
+    return false;
+  }
+
+  if (flexGapSupported !== undefined) {
+    return flexGapSupported;
+  }
+
+  // create flex container with row-gap set
+  const flex = document.createElement('div');
+  flex.style.display = 'flex';
+  flex.style.flexDirection = 'column';
+  flex.style.rowGap = '1px';
+
+  // create two, elements inside it
+  flex.appendChild(document.createElement('div'));
+  flex.appendChild(document.createElement('div'));
+
+  // append to the DOM (needed to obtain scrollHeight)
+  document.body.appendChild(flex);
+  flexGapSupported = flex.scrollHeight === 1; // flex container should be 1px high from the row-gap
+  document.body.removeChild(flex);
+
+  return flexGapSupported;
+};

components/_util/throttleByAnimationFrame.tsx

@@ -1,4 +1,4 @@
-import raf from 'raf';
+import raf from 'rc-util/lib/raf';
 
 export function throttleByAnimationFrame(fn: (...args: any[]) => void) {
   let requestId: number | null;

components/_util/transButton.tsx

@@ -1,5 +1,6 @@
 /**
  * Wrap of sub component which need use as Button capacity (like Icon component).
+ *
  * This helps accessibility reader to tread as a interactive button to operation.
  */
 import * as React from 'react';
@@ -20,81 +21,52 @@ const inlineStyle: React.CSSProperties = {
   display: 'inline-block',
 };
 
-class TransButton extends React.Component<TransButtonProps> {
-  div?: HTMLDivElement;
-
-  lastKeyCode?: number;
-
-  componentDidMount() {
-    const { autoFocus } = this.props;
-    if (autoFocus) {
-      this.focus();
-    }
-  }
-
-  onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {
+const TransButton = React.forwardRef<HTMLDivElement, TransButtonProps>((props, ref) => {
+  const onKeyDown: React.KeyboardEventHandler<HTMLDivElement> = event => {
     const { keyCode } = event;
     if (keyCode === KeyCode.ENTER) {
       event.preventDefault();
     }
   };
 
-  onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = event => {
+  const onKeyUp: React.KeyboardEventHandler<HTMLDivElement> = event => {
     const { keyCode } = event;
-    const { onClick } = this.props;
+    const { onClick } = props;
     if (keyCode === KeyCode.ENTER && onClick) {
       onClick();
     }
   };
 
-  setRef = (btn: HTMLDivElement) => {
-    this.div = btn;
+  const { style, noStyle, disabled, ...restProps } = props;
+
+  let mergedStyle: React.CSSProperties = {};
+
+  if (!noStyle) {
+    mergedStyle = {
+      ...inlineStyle,
+    };
+  }
+
+  if (disabled) {
+    mergedStyle.pointerEvents = 'none';
+  }
+
+  mergedStyle = {
+    ...mergedStyle,
+    ...style,
   };
 
-  focus() {
-    if (this.div) {
-      this.div.focus();
-    }
-  }
-
-  blur() {
-    if (this.div) {
-      this.div.blur();
-    }
-  }
-
-  render() {
-    const { style, noStyle, disabled, ...restProps } = this.props;
-
-    let mergedStyle: React.CSSProperties = {};
-
-    if (!noStyle) {
-      mergedStyle = {
-        ...inlineStyle,
-      };
-    }
-
-    if (disabled) {
-      mergedStyle.pointerEvents = 'none';
-    }
-
-    mergedStyle = {
-      ...mergedStyle,
-      ...style,
-    };
-
-    return (
-      <div
-        role="button"
-        tabIndex={0}
-        ref={this.setRef}
-        {...restProps}
-        onKeyDown={this.onKeyDown}
-        onKeyUp={this.onKeyUp}
-        style={mergedStyle}
-      />
-    );
-  }
-}
+  return (
+    <div
+      role="button"
+      tabIndex={0}
+      ref={ref}
+      {...restProps}
+      onKeyDown={onKeyDown}
+      onKeyUp={onKeyUp}
+      style={mergedStyle}
+    />
+  );
+});
 
 export default TransButton;

components/_util/type.ts

@@ -5,12 +5,10 @@ export const tuple = <T extends string[]>(...args: T) => args;
 export const tupleNum = <T extends number[]>(...args: T) => args;
 
 /**
- * https://stackoverflow.com/a/59187769
- * Extract the type of an element of an array/tuple without performing indexing
+ * https://stackoverflow.com/a/59187769 Extract the type of an element of an array/tuple without
+ * performing indexing
  */
 export type ElementOf<T> = T extends (infer E)[] ? E : T extends readonly (infer F)[] ? F : never;
 
-/**
- * https://github.com/Microsoft/TypeScript/issues/29729
- */
+/** https://github.com/Microsoft/TypeScript/issues/29729 */
 export type LiteralUnion<T extends U, U> = T | (U & {});

components/_util/wave.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import { findDOMNode } from 'react-dom';
-import TransitionEvents from '@ant-design/css-animation/lib/Event';
+import { supportRef, composeRef } from 'rc-util/lib/ref';
 import raf from './raf';
 import { ConfigConsumer, ConfigConsumerProps, CSPConfig, ConfigContext } from '../config-provider';
+import { cloneElement } from './reactNode';
 
 let styleForPseudo: HTMLStyleElement | null;
 
@@ -11,7 +11,7 @@ function isHidden(element: HTMLElement) {
   if (process.env.NODE_ENV === 'test') {
     return false;
   }
-  return !element || element.offsetParent === null;
+  return !element || element.offsetParent === null || element.hidden;
 }
 
 function isNotGrey(color: string) {
@@ -30,6 +30,8 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
     cancel: () => void;
   };
 
+  private containerRef = React.createRef<HTMLDivElement>();
+
   private extraNode: HTMLDivElement;
 
   private clickWaveTimeoutId: number;
@@ -45,7 +47,7 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
   context: ConfigConsumerProps;
 
   componentDidMount() {
-    const node = findDOMNode(this) as HTMLElement;
+    const node = this.containerRef.current as HTMLDivElement;
     if (!node || node.nodeType !== 1) {
       return;
     }
@@ -96,15 +98,17 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
       )}-click-animating-node {
         --antd-wave-shadow-color: ${waveColor};
       }`;
-      if (!document.body.contains(styleForPseudo)) {
-        document.body.appendChild(styleForPseudo);
+      if (!node.ownerDocument.body.contains(styleForPseudo)) {
+        node.ownerDocument.body.appendChild(styleForPseudo);
       }
     }
     if (insertExtraNode) {
       node.appendChild(extraNode);
     }
-    TransitionEvents.addStartEventListener(node, this.onTransitionStart);
-    TransitionEvents.addEndEventListener(node, this.onTransitionEnd);
+    ['transition', 'animation'].forEach(name => {
+      node.addEventListener(`${name}start`, this.onTransitionStart);
+      node.addEventListener(`${name}end`, this.onTransitionEnd);
+    });
   };
 
   onTransitionStart = (e: AnimationEvent) => {
@@ -112,7 +116,7 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
       return;
     }
 
-    const node = findDOMNode(this) as HTMLElement;
+    const node = this.containerRef.current as HTMLDivElement;
     if (!e || e.target !== node || this.animationStart) {
       return;
     }
@@ -187,15 +191,24 @@ export default class Wave extends React.Component<{ insertExtraNode?: boolean }>
     if (insertExtraNode && this.extraNode && node.contains(this.extraNode)) {
       node.removeChild(this.extraNode);
     }
-    TransitionEvents.removeStartEventListener(node, this.onTransitionStart);
-    TransitionEvents.removeEndEventListener(node, this.onTransitionEnd);
+    ['transition', 'animation'].forEach(name => {
+      node.removeEventListener(`${name}start`, this.onTransitionStart);
+      node.removeEventListener(`${name}end`, this.onTransitionEnd);
+    });
   }
 
   renderWave = ({ csp }: ConfigConsumerProps) => {
     const { children } = this.props;
     this.csp = csp;
 
-    return children;
+    if (!React.isValidElement(children)) return children;
+
+    let ref: React.Ref<any> = this.containerRef;
+    if (supportRef(children)) {
+      ref = composeRef((children as any).ref, this.containerRef as any);
+    }
+
+    return cloneElement(children, { ref });
   };
 
   render() {

components/affix/demo/target.md

@@ -18,7 +18,7 @@ import React, { useState } from 'react';
 import { Affix, Button } from 'antd';
 
 const Demo: React.FC = () => {
-  const [container, setContainer] = useState(null);
+  const [container, setContainer] = useState<HTMLDivElement | null>(null);
   return (
     <div className="scrollable-container" ref={setContainer}>
       <div className="background">

components/affix/index.en-US.md

@@ -9,7 +9,7 @@ Wrap Affix around another component to make it stick the viewport.
 
 ## When To Use
 
-On longer web pages, its helpful for some content to stick to the viewport. This is common for menus and actions.
+On longer web pages, it's helpful to stick component into the viewport. This is common for menus and actions.
 
 Please note that Affix should not cover other content on the page, especially when the size of the viewport is small.
 

components/affix/index.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import classNames from 'classnames';
-import omit from 'omit.js';
+import omit from 'rc-util/lib/omit';
 import ResizeObserver from 'rc-resize-observer';
 import { ConfigContext, ConfigConsumerProps } from '../config-provider';
 import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
@@ -19,9 +19,7 @@ function getDefaultTarget() {
 
 // Affix
 export interface AffixProps {
-  /**
-   * 距离窗口顶部达到指定偏移量后触发
-   */
+  /** 距离窗口顶部达到指定偏移量后触发 */
   offsetTop?: number;
   /** 距离窗口底部达到指定偏移量后触发 */
   offsetBottom?: number;
@@ -138,9 +136,7 @@ class Affix extends React.Component<AffixProps, AffixState> {
     return offsetTop;
   };
 
-  getOffsetBottom = () => {
-    return this.props.offsetBottom;
-  };
+  getOffsetBottom = () => this.props.offsetBottom;
 
   savePlaceholderNode = (node: HTMLDivElement) => {
     this.placeholderNode = node;
@@ -273,7 +269,7 @@ class Affix extends React.Component<AffixProps, AffixState> {
     let props = omit(this.props, ['prefixCls', 'offsetTop', 'offsetBottom', 'target', 'onChange']);
     // Omit this since `onTestUpdatePosition` only works on test.
     if (process.env.NODE_ENV === 'test') {
-      props = omit(props, ['onTestUpdatePosition']);
+      props = omit(props as typeof props & { onTestUpdatePosition: any }, ['onTestUpdatePosition']);
     }
 
     return (

components/alert/__tests__/__snapshots__/index.test.tsx.snap

@@ -1,25 +1,79 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Alert ErrorBoundary 1`] = `
+exports[`Alert action of Alert custom action 1`] = `
 <div
-  class="ant-alert ant-alert-error ant-alert-with-description ant-alert-no-icon"
+  class="ant-alert ant-alert-success"
   data-show="true"
   role="alert"
 >
   <span
-    class="ant-alert-message"
+    aria-label="check-circle"
+    class="anticon anticon-check-circle ant-alert-icon"
+    role="img"
   >
-    ReferenceError: NotExisted is not defined
+    <svg
+      aria-hidden="true"
+      data-icon="check-circle"
+      fill="currentColor"
+      focusable="false"
+      height="1em"
+      viewBox="64 64 896 896"
+      width="1em"
+    >
+      <path
+        d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"
+      />
+    </svg>
   </span>
-  <span
-    class="ant-alert-description"
+  <div
+    class="ant-alert-content"
   >
-    <pre>
-          in ThrowError
-    in ErrorBoundary (created by WrapperComponent)
-    in WrapperComponent
-    </pre>
-  </span>
+    <div
+      class="ant-alert-message"
+    >
+      Success Tips
+    </div>
+    <div
+      class="ant-alert-description"
+    />
+  </div>
+  <div
+    class="ant-alert-action"
+  >
+    <button
+      class="ant-btn ant-btn-text ant-btn-sm"
+      type="button"
+    >
+      <span>
+        UNDO
+      </span>
+    </button>
+  </div>
+  <button
+    class="ant-alert-close-icon"
+    tabindex="0"
+    type="button"
+  >
+    <span
+      aria-label="close"
+      class="anticon anticon-close"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="close"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M563.8 512l262.5-312.9c4.4-5.2.7-13.1-6.1-13.1h-79.8c-4.7 0-9.2 2.1-12.3 5.7L511.6 449.8 295.1 191.7c-3-3.6-7.5-5.7-12.3-5.7H203c-6.8 0-10.5 7.9-6.1 13.1L459.4 512 196.9 824.9A7.95 7.95 0 00203 838h79.8c4.7 0 9.2-2.1 12.3-5.7l216.5-258.1 216.5 258.1c3 3.6 7.5 5.7 12.3 5.7h79.8c6.8 0 10.5-7.9 6.1-13.1L563.8 512z"
+        />
+      </svg>
+    </span>
+  </button>
 </div>
 `;
 
@@ -34,14 +88,18 @@ exports[`Alert could accept none react element icon 1`] = `
   >
     icon
   </span>
-  <span
-    class="ant-alert-message"
+  <div
+    class="ant-alert-content"
   >
-    Success Tips
-  </span>
-  <span
-    class="ant-alert-description"
-  />
+    <div
+      class="ant-alert-message"
+    >
+      Success Tips
+    </div>
+    <div
+      class="ant-alert-description"
+    />
+  </div>
 </div>
 `;
 
@@ -51,11 +109,15 @@ exports[`Alert rtl render component should be rendered correctly in RTL directio
   data-show="true"
   role="alert"
 >
-  <span
-    class="ant-alert-message"
-  />
-  <span
-    class="ant-alert-description"
-  />
+  <div
+    class="ant-alert-content"
+  >
+    <div
+      class="ant-alert-message"
+    />
+    <div
+      class="ant-alert-description"
+    />
+  </div>
 </div>
 `;

components/alert/__tests__/index.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { mount, render } from 'enzyme';
 import Alert from '..';
+import Button from '../../button';
 import Tooltip from '../../tooltip';
 import Popconfirm from '../../popconfirm';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -34,6 +35,25 @@ describe('Alert', () => {
     expect(onClose).toHaveBeenCalled();
   });
 
+  describe('action of Alert', () => {
+    it('custom action', () => {
+      const wrapper = render(
+        <Alert
+          message="Success Tips"
+          type="success"
+          showIcon
+          action={
+            <Button size="small" type="text">
+              UNDO
+            </Button>
+          }
+          closable
+        />,
+      );
+      expect(wrapper).toMatchSnapshot();
+    });
+  });
+
   describe('data and aria props', () => {
     it('sets data attributes on input', () => {
       const wrapper = mount(<Alert data-test="test-id" data-id="12345" message={null} />);
@@ -55,8 +75,7 @@ describe('Alert', () => {
     });
   });
 
-  const testIt = process.env.REACT === '15' ? it.skip : it;
-  testIt('ErrorBoundary', () => {
+  it('ErrorBoundary', () => {
     // @ts-expect-error
     // eslint-disable-next-line react/jsx-no-undef
     const ThrowError = () => <NotExisted />;
@@ -66,7 +85,7 @@ describe('Alert', () => {
       </ErrorBoundary>,
     );
     // eslint-disable-next-line jest/no-standalone-expect
-    expect(wrapper.render()).toMatchSnapshot();
+    expect(wrapper.text()).toContain('ReferenceError: NotExisted is not defined');
   });
 
   it('could be used with Tooltip', async () => {

components/alert/demo/action.md

@@ -0,0 +1,81 @@
+---
+order: 13
+title:
+  zh-CN: 操作
+  en-US: Custom action
+---
+
+## zh-CN
+
+可以在右上角自定义操作项。
+
+## en-US
+
+Custom action.
+
+```tsx
+import React from 'react';
+import { Alert, Button, Space } from 'antd';
+
+ReactDOM.render(
+  <>
+    <Alert
+      message="Success Tips"
+      type="success"
+      showIcon
+      action={
+        <Button size="small" type="text">
+          UNDO
+        </Button>
+      }
+      closable
+    />
+    <Alert
+      message="Error Text"
+      showIcon
+      description="Error Description Error Description Error Description Error Description"
+      type="error"
+      action={
+        <Button size="small" danger>
+          Detail
+        </Button>
+      }
+    />
+    <Alert
+      message="Warning Text"
+      type="warning"
+      action={
+        <Space>
+          <Button size="small" type="ghost">
+            Done
+          </Button>
+        </Space>
+      }
+      closable
+    />
+    <Alert
+      message="Info Text"
+      description="Info Description Info Description Info Description Info Description"
+      type="info"
+      action={
+        <Space direction="vertical">
+          <Button size="small" type="primary">
+            Accept
+          </Button>
+          <Button size="small" danger type="ghost">
+            Decline
+          </Button>
+        </Space>
+      }
+      closable
+    />
+  </>,
+  mountNode,
+);
+```
+
+<style>
+.code-box-demo .ant-alert {
+  margin-bottom: 16px;
+}
+</style>

components/alert/demo/error-boundary.md

@@ -28,7 +28,7 @@ const ThrowError: React.FC = () => {
     throw error;
   }
   return (
-    <Button type="danger" onClick={onClick}>
+    <Button danger onClick={onClick}>
       Click me to throw a error
     </Button>
   );

components/alert/index.en-US.md

@@ -14,22 +14,23 @@ Alert component for feedback.
 
 ## API
 
-| Property | Description | Type | Default |
-| --- | --- | --- | --- |
-| afterClose | Called when close animation is finished | () => void | - |
-| banner | Whether to show as banner | boolean | false |
-| closable | Whether Alert can be closed | boolean | - |
-| closeText | Close text to show | ReactNode | - |
-| description | Additional content of Alert | ReactNode | - |
-| icon | Custom icon, effective when `showIcon` is true | ReactNode | - |
-| message | Content of Alert | ReactNode | - |
-| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |
-| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |
-| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |
+| Property | Description | Type | Default | Version |
+| --- | --- | --- | --- | --- |
+| action | The action of Alert | ReactNode | - | 4.9.0 |
+| afterClose | Called when close animation is finished | () => void | - |  |
+| banner | Whether to show as banner | boolean | false |  |
+| closable | Whether Alert can be closed | boolean | - |  |
+| closeText | Close text to show | ReactNode | - |  |
+| description | Additional content of Alert | ReactNode | - |  |
+| icon | Custom icon, effective when `showIcon` is true | ReactNode | - |  |
+| message | Content of Alert | ReactNode | - |  |
+| showIcon | Whether to show icon | boolean | false, in `banner` mode default is true |  |
+| type | Type of Alert styles, options: `success`, `info`, `warning`, `error` | string | `info`, in `banner` mode default is `warning` |  |
+| onClose | Callback when Alert is closed | (e: MouseEvent) => void | - |  |
 
 ### Alert.ErrorBoundary
 
-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| description | Custom error description to show | ReactNode | {{ error stack }} |  |
-| message | Custom error message to show | ReactNode | {{ error }} |  |
+| Property    | Description                      | Type      | Default           | Version |
+| ----------- | -------------------------------- | --------- | ----------------- | ------- |
+| description | Custom error description to show | ReactNode | {{ error stack }} |         |
+| message     | Custom error message to show     | ReactNode | {{ error }}       |         |

components/alert/index.tsx

@@ -17,9 +17,7 @@ import ErrorBoundary from './ErrorBoundary';
 import { replaceElement } from '../_util/reactNode';
 
 export interface AlertProps {
-  /**
-   * Type of Alert styles, options:`success`, `info`, `warning`, `error`
-   */
+  /** Type of Alert styles, options:`success`, `info`, `warning`, `error` */
   type?: 'success' | 'info' | 'warning' | 'error';
   /** Whether Alert can be closed */
   closable?: boolean;
@@ -42,6 +40,7 @@ export interface AlertProps {
   className?: string;
   banner?: boolean;
   icon?: React.ReactNode;
+  action?: React.ReactNode;
   onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
   onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
   onClick?: React.MouseEventHandler<HTMLDivElement>;
@@ -79,6 +78,7 @@ const Alert: AlertInterface = ({
   showIcon,
   closable,
   closeText,
+  action,
   ...props
 }) => {
   const [closed, setClosed] = React.useState(false);
@@ -119,8 +119,8 @@ const Alert: AlertInterface = ({
     return React.createElement(iconType, { className: `${prefixCls}-icon` });
   };
 
-  const renderCloseIcon = () => {
-    return isClosable ? (
+  const renderCloseIcon = () =>
+    isClosable ? (
       <button
         type="button"
         onClick={handleClose}
@@ -134,7 +134,6 @@ const Alert: AlertInterface = ({
         )}
       </button>
     ) : null;
-  };
 
   // banner 模式默认有 Icon
   const isShowIcon = banner && showIcon === undefined ? true : showIcon;
@@ -146,7 +145,6 @@ const Alert: AlertInterface = ({
       [`${prefixCls}-with-description`]: !!description,
       [`${prefixCls}-no-icon`]: !isShowIcon,
       [`${prefixCls}-banner`]: !!banner,
-      [`${prefixCls}-closable`]: isClosable,
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
     className,
@@ -178,8 +176,13 @@ const Alert: AlertInterface = ({
           {...dataOrAriaProps}
         >
           {isShowIcon ? renderIconNode() : null}
-          <span className={`${prefixCls}-message`}>{message}</span>
-          <span className={`${prefixCls}-description`}>{description}</span>
+          <div className={`${prefixCls}-content`}>
+            <div className={`${prefixCls}-message`}>{message}</div>
+            <div className={`${prefixCls}-description`}>{description}</div>
+          </div>
+
+          {action ? <div className={`${prefixCls}-action`}>{action}</div> : null}
+
           {renderCloseIcon()}
         </div>
       )}

components/alert/index.zh-CN.md

@@ -15,18 +15,19 @@ cover: https://gw.alipayobjects.com/zos/alicdn/8emPa3fjl/Alert.svg
 
 ## API
 
-| 参数 | 说明 | 类型 | 默认值 |
-| --- | --- | --- | --- |
-| afterClose | 关闭动画结束后触发的回调函数 | () => void | - |
-| banner | 是否用作顶部公告 | boolean | false |
-| closable | 默认不显示关闭按钮 | boolean | - |
-| closeText | 自定义关闭按钮 | ReactNode | - |
-| description | 警告提示的辅助性文字介绍 | ReactNode | - |
-| icon | 自定义图标，`showIcon` 为 true 时有效 | ReactNode | - |
-| message | 警告提示内容 | ReactNode | - |
-| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |
-| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |
-| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - |
+| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| --- | --- | --- | --- | --- |
+| action | 自定义操作项 | ReactNode | - | 4.9.0 |
+| afterClose | 关闭动画结束后触发的回调函数 | () => void | - |  |
+| banner | 是否用作顶部公告 | boolean | false |  |
+| closable | 默认不显示关闭按钮 | boolean | - |  |
+| closeText | 自定义关闭按钮 | ReactNode | - |  |
+| description | 警告提示的辅助性文字介绍 | ReactNode | - |  |
+| icon | 自定义图标，`showIcon` 为 true 时有效 | ReactNode | - |  |
+| message | 警告提示内容 | ReactNode | - |  |
+| showIcon | 是否显示辅助图标 | boolean | false，`banner` 模式下默认值为 true |  |
+| type | 指定警告提示的样式，有四种选择 `success`、`info`、`warning`、`error` | string | `info`，`banner` 模式下默认值为 `warning` |  |
+| onClose | 关闭时触发的回调函数 | (e: MouseEvent) => void | - |  |
 
 ### Alert.ErrorBoundary
 

components/alert/style/index.less

@@ -4,29 +4,22 @@
 @alert-prefix-cls: ~'@{ant-prefix}-alert';
 
 .@{alert-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   position: relative;
-  padding: 8px 15px 8px 37px;
+  display: flex;
+  align-items: center;
+  padding: 8px 15px;
   word-wrap: break-word;
   border-radius: @border-radius-base;
 
-  &&-no-icon {
-    padding: @alert-no-icon-padding-vertical 15px;
-    .@{alert-prefix-cls}-close-icon {
-      top: @alert-no-icon-padding-vertical + @font-size-base * @line-height-base / 2 -
-        @font-size-base / 2;
-    }
-  }
-
-  &&-closable {
-    padding-right: 30px;
+  &-content {
+    flex: 1;
+    min-width: 0;
   }
 
   &-icon {
-    position: absolute;
-    top: @alert-icon-top;
-    left: 16px;
+    margin-right: @margin-xs;
   }
 
   &-description {
@@ -73,10 +66,12 @@
     }
   }
 
+  &-action {
+    margin-left: @margin-xs;
+  }
+
   &-close-icon {
-    position: absolute;
-    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
-    right: @padding-md;
+    margin-left: @margin-xs;
     padding: 0;
     overflow: hidden;
     font-size: @font-size-sm;
@@ -104,11 +99,8 @@
   }
 
   &-with-description {
-    position: relative;
+    align-items: flex-start;
     padding: @alert-with-description-padding;
-    color: @alert-text-color;
-    line-height: @line-height-base;
-    border-radius: @border-radius-base;
   }
 
   &-with-description&-no-icon {
@@ -116,20 +108,9 @@
   }
 
   &-with-description &-icon {
-    position: absolute;
-    top: @alert-with-description-icon-top;
-    left: @alert-with-description-icon-size;
+    margin-right: @alert-with-description-padding-vertical;
     font-size: @alert-with-description-icon-size;
   }
-
-  &-with-description &-close-icon {
-    position: absolute;
-    top: @padding-md;
-    right: @padding-md;
-    font-size: @font-size-base;
-    cursor: pointer;
-  }
-
   &-with-description &-message {
     display: block;
     margin-bottom: 4px;

components/alert/style/rtl.less

@@ -1,11 +1,5 @@
-@import '../../style/themes/index';
-@import '../../style/mixins/index';
-
-@alert-prefix-cls: ~'@{ant-prefix}-alert';
-
 .@{alert-prefix-cls} {
   &&-rtl {
-    padding: 8px 37px 8px 15px;
     direction: rtl;
   }
 
@@ -15,60 +9,31 @@
     }
   }
 
-  &&-closable {
-    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
-      padding-right: 37px;
-      padding-left: 30px;
-    }
-  }
-
-  &&-no-icon&-closable {
-    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
-      padding-right: 15px;
-      padding-left: 30px;
-    }
-  }
-
   &-icon {
     .@{alert-prefix-cls}-rtl & {
-      right: @padding-md;
-      left: auto;
+      margin-right: auto;
+      margin-left: @margin-xs;
+    }
+  }
+
+  &-action {
+    .@{alert-prefix-cls}-rtl & {
+      margin-right: @margin-xs;
+      margin-left: auto;
     }
   }
 
   &-close-icon {
     .@{alert-prefix-cls}-rtl & {
-      right: auto;
-      left: @padding-md;
-    }
-  }
-
-  &-with-description,
-  &-with-description&-closable {
-    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
-      padding: @alert-with-description-padding-vertical @alert-with-description-icon-size * 2 +
-        @alert-with-description-padding-vertical @alert-with-description-no-icon-padding-vertical
-        15px;
-    }
-  }
-
-  &-with-description&-no-icon {
-    .@{alert-prefix-cls}.@{alert-prefix-cls}-rtl& {
-      padding: 15px;
+      margin-right: @margin-xs;
+      margin-left: auto;
     }
   }
 
   &-with-description &-icon {
     .@{alert-prefix-cls}-rtl& {
-      right: @alert-with-description-icon-size;
-      left: auto;
-    }
-  }
-
-  &-with-description &-close-icon {
-    .@{alert-prefix-cls}-rtl& {
-      right: auto;
-      left: @padding-md;
+      margin-right: auto;
+      margin-left: @alert-with-description-padding-vertical;
     }
   }
 }

components/anchor/Anchor.tsx

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom';
 import classNames from 'classnames';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import Affix from '../affix';
@@ -100,6 +99,8 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
 
   content: ConfigConsumerProps;
 
+  private wrapperRef = React.createRef<HTMLDivElement>();
+
   private inkNode: HTMLSpanElement;
 
   // scroll scope's container
@@ -253,9 +254,10 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
   };
 
   updateInk = () => {
-    const { prefixCls } = this;
-    const anchorNode = ReactDOM.findDOMNode(this) as Element;
-    const linkNode = anchorNode.getElementsByClassName(`${prefixCls}-link-title-active`)[0];
+    const { prefixCls, wrapperRef } = this;
+    const anchorNode = wrapperRef.current;
+    const linkNode = anchorNode?.getElementsByClassName(`${prefixCls}-link-title-active`)[0];
+
     if (linkNode) {
       this.inkNode.style.top = `${(linkNode as any).offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
     }
@@ -304,7 +306,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
     };
 
     const anchorContent = (
-      <div className={wrapperClass} style={wrapperStyle}>
+      <div ref={this.wrapperRef} className={wrapperClass} style={wrapperStyle}>
         <div className={anchorClass}>
           <div className={`${prefixCls}-ink`}>
             <span className={inkClass} ref={this.saveInkNode} />

components/anchor/index.en-US.md

@@ -30,8 +30,8 @@ For displaying anchor hyperlinks on page and jumping between them.
 
 ### Link Props
 
-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| href | The target of hyperlink | string |  |  |
-| target | Specifies where to display the linked URL | string |  |  |
-| title | The content of hyperlink | ReactNode |  |  |
+| Property | Description                               | Type      | Default | Version |
+| -------- | ----------------------------------------- | --------- | ------- | ------- |
+| href     | The target of hyperlink                   | string    |         |         |
+| target   | Specifies where to display the linked URL | string    |         |         |
+| title    | The content of hyperlink                  | ReactNode |         |         |

components/anchor/index.zh-CN.md

@@ -31,8 +31,8 @@ cover: https://gw.alipayobjects.com/zos/alicdn/_1-C1JwsC/Anchor.svg
 
 ### Link Props
 
-| 成员 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| href | 锚点链接 | string | - |  |
-| target | 该属性指定在何处显示链接的资源。 | string | - |  |
-| title | 文字内容 | ReactNode | - |  |
+| 成员   | 说明                             | 类型      | 默认值 | 版本 |
+| ------ | -------------------------------- | --------- | ------ | ---- |
+| href   | 锚点链接                         | string    | -      |      |
+| target | 该属性指定在何处显示链接的资源。 | string    | -      |      |
+| title  | 文字内容                         | ReactNode | -      |      |

components/anchor/style/index.less

@@ -4,7 +4,7 @@
 @anchor-border-width: 2px;
 
 .@{ant-prefix}-anchor {
-  .reset-component;
+  .reset-component();
 
   position: relative;
   padding-left: @anchor-border-width;

components/auto-complete/__tests__/__snapshots__/demo.test.js.snap

@@ -111,7 +111,6 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
               >
                 <svg
                   aria-hidden="true"
-                  class=""
                   data-icon="search"
                   fill="currentColor"
                   focusable="false"
@@ -290,7 +289,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class=""
                   data-icon="down"
                   fill="currentColor"
                   focusable="false"
@@ -377,7 +375,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                 >
                   <svg
                     aria-hidden="true"
-                    class=""
                     data-icon="down"
                     fill="currentColor"
                     focusable="false"
@@ -480,7 +477,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                     >
                       <svg
                         aria-hidden="true"
-                        class=""
                         data-icon="search"
                         fill="currentColor"
                         focusable="false"
@@ -573,7 +569,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                 >
                   <svg
                     aria-hidden="true"
-                    class=""
                     data-icon="down"
                     fill="currentColor"
                     focusable="false"
@@ -622,7 +617,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                       >
                         <svg
                           aria-hidden="true"
-                          class=""
                           data-icon="search"
                           fill="currentColor"
                           focusable="false"
@@ -716,7 +710,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                 >
                   <svg
                     aria-hidden="true"
-                    class=""
                     data-icon="down"
                     fill="currentColor"
                     focusable="false"
@@ -772,7 +765,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                           >
                             <svg
                               aria-hidden="true"
-                              class=""
                               data-icon="search"
                               fill="currentColor"
                               focusable="false"
@@ -868,7 +860,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                 >
                   <svg
                     aria-hidden="true"
-                    class=""
                     data-icon="down"
                     fill="currentColor"
                     focusable="false"
@@ -924,7 +915,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                           >
                             <svg
                               aria-hidden="true"
-                              class=""
                               data-icon="search"
                               fill="currentColor"
                               focusable="false"
@@ -958,7 +948,6 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
               >
                 <svg
                   aria-hidden="true"
-                  class=""
                   data-icon="search"
                   fill="currentColor"
                   focusable="false"
@@ -1093,7 +1082,6 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
               >
                 <svg
                   aria-hidden="true"
-                  class=""
                   data-icon="search"
                   fill="currentColor"
                   focusable="false"

components/auto-complete/demo/non-case-sensitive.md

@@ -28,7 +28,7 @@ const Complete: React.FC = () => (
     options={options}
     placeholder="try to type `b`"
     filterOption={(inputValue, option) =>
-      option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
+      option!.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1
     }
   />
 );

components/auto-complete/demo/uncertain-category.md

@@ -26,7 +26,7 @@ const searchResult = (query: string) => {
   return new Array(getRandomInt(5))
     .join('.')
     .split('.')
-    .map((item, idx) => {
+    .map((_, idx) => {
       const category = `${query}${idx}`;
       return {
         value: category,

components/auto-complete/index.en-US.md

@@ -16,7 +16,7 @@ When there is a need for autocomplete functionality.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| allowClear | Show clear button, effective in multiple mode only | boolean | false |  |
+| allowClear | Show clear button | boolean | false |  |
 | autoFocus | If get focus when component mounted | boolean | false |  |
 | backfill | If backfill selected item the input when using keyboard | boolean | false |  |
 | children (for customize input element) | Customize input element | HTMLInputElement \| HTMLTextAreaElement \| React.ReactElement<InputProps> | <Input /> |  |
@@ -42,10 +42,10 @@ When there is a need for autocomplete functionality.
 
 ## Methods
 
-| Name | Description | Version |
-| --- | --- | --- |
-| blur() | Remove focus |  |
-| focus() | Get focus |  |
+| Name    | Description  | Version |
+| ------- | ------------ | ------- |
+| blur()  | Remove focus |         |
+| focus() | Get focus    |         |
 
 ## FAQ
 

components/auto-complete/index.tsx

@@ -1,14 +1,15 @@
 /**
  * TODO: 4.0
- * - remove `dataSource`
+ *
+ * - Remove `dataSource`
  * - `size` not work with customizeInput
- * - customizeInput not feedback `ENTER` key since accessibility enhancement
+ * - CustomizeInput not feedback `ENTER` key since accessibility enhancement
  */
 
 import * as React from 'react';
 import toArray from 'rc-util/lib/Children/toArray';
 import classNames from 'classnames';
-import omit from 'omit.js';
+import omit from 'rc-util/lib/omit';
 import Select, { InternalSelectProps, OptionType, RefSelectProps } from '../select';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
 import devWarning from '../_util/devWarning';
@@ -20,7 +21,7 @@ export interface DataSourceItemObject {
   value: string;
   text: string;
 }
-export type DataSourceItemType = string | DataSourceItemObject;
+export type DataSourceItemType = DataSourceItemObject | React.ReactNode;
 
 export interface AutoCompleteProps
   extends Omit<
@@ -115,7 +116,10 @@ const AutoComplete: React.ForwardRefRenderFunction<RefSelectProps, AutoCompleteP
             prefixCls={prefixCls}
             className={classNames(`${prefixCls}-auto-complete`, className)}
             mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as any}
-            getInputElement={getInputElement}
+            {...{
+              // Internal api
+              getInputElement,
+            }}
           >
             {optionChildren}
           </Select>

components/auto-complete/index.zh-CN.md

@@ -23,7 +23,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| allowClear | 支持清除, 单选模式有效 | boolean | false |  |
+| allowClear | 支持清除 | boolean | false |  |
 | autoFocus | 自动获取焦点 | boolean | false |  |
 | backfill | 使用键盘选择选项的时候把选中项回填到输入框中 | boolean | false |  |
 | children (自动完成的数据源) | 自动完成的数据源 | React.ReactElement<OptionProps> \| Array<React.ReactElement<OptionProps>> | - |  |
@@ -50,10 +50,10 @@ cover: https://gw.alipayobjects.com/zos/alicdn/qtJm4yt45/AutoComplete.svg
 
 ## 方法
 
-| 名称 | 描述 | 版本 |
-| --- | --- | --- |
-| blur() | 移除焦点 |  |
-| focus() | 获取焦点 |  |
+| 名称    | 描述     | 版本 |
+| ------- | -------- | ---- |
+| blur()  | 移除焦点 |      |
+| focus() | 获取焦点 |      |
 
 ## FAQ
 

components/auto-complete/style/index.less

@@ -7,7 +7,7 @@
 @autocomplete-prefix-cls: ~'@{select-prefix-cls}-auto-complete';
 
 .@{autocomplete-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   // https://github.com/ant-design/ant-design/issues/22302
   .@{select-prefix-cls}-clear {

components/avatar/__tests__/__snapshots__/demo.test.js.snap

@@ -18,7 +18,6 @@ Array [
         >
           <svg
             aria-hidden="true"
-            class=""
             data-icon="user"
             fill="currentColor"
             focusable="false"
@@ -39,158 +38,13 @@ Array [
       >
         <span
           class="ant-scroll-number-only"
-          style="transition:none;-ms-transform:translateY(-1100%);-webkit-transform:translateY(-1100%);transform:translateY(-1100%)"
+          style="transition:none"
         >
-          <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 current"
           >
             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"
-          >
-            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>
@@ -209,7 +63,6 @@ Array [
         >
           <svg
             aria-hidden="true"
-            class=""
             data-icon="user"
             fill="currentColor"
             focusable="false"
@@ -246,7 +99,6 @@ Array [
       >
         <svg
           aria-hidden="true"
-          class=""
           data-icon="user"
           fill="currentColor"
           focusable="false"
@@ -270,7 +122,6 @@ Array [
       >
         <svg
           aria-hidden="true"
-          class=""
           data-icon="user"
           fill="currentColor"
           focusable="false"
@@ -294,7 +145,6 @@ Array [
       >
         <svg
           aria-hidden="true"
-          class=""
           data-icon="user"
           fill="currentColor"
           focusable="false"
@@ -318,7 +168,6 @@ Array [
       >
         <svg
           aria-hidden="true"
-          class=""
           data-icon="user"
           fill="currentColor"
           focusable="false"
@@ -345,7 +194,6 @@ Array [
       >
         <svg
           aria-hidden="true"
-          class=""
           data-icon="user"
           fill="currentColor"
           focusable="false"
@@ -369,7 +217,6 @@ Array [
       >
         <svg
           aria-hidden="true"
-          class=""
           data-icon="user"
           fill="currentColor"
           focusable="false"
@@ -393,7 +240,6 @@ Array [
       >
         <svg
           aria-hidden="true"
-          class=""
           data-icon="user"
           fill="currentColor"
           focusable="false"
@@ -417,7 +263,6 @@ Array [
       >
         <svg
           aria-hidden="true"
-          class=""
           data-icon="user"
           fill="currentColor"
           focusable="false"
@@ -522,7 +367,6 @@ Array [
       >
         <svg
           aria-hidden="true"
-          class=""
           data-icon="user"
           fill="currentColor"
           focusable="false"
@@ -547,7 +391,6 @@ Array [
       >
         <svg
           aria-hidden="true"
-          class=""
           data-icon="ant-design"
           fill="currentColor"
           focusable="false"
@@ -650,7 +493,6 @@ exports[`renders ./components/avatar/demo/responsive.md correctly 1`] = `
   >
     <svg
       aria-hidden="true"
-      class=""
       data-icon="ant-design"
       fill="currentColor"
       focusable="false"
@@ -755,7 +597,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="user"
         fill="currentColor"
         focusable="false"
@@ -807,6 +648,34 @@ Array [
         class="ant-image-img"
         src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
       />
+      <div
+        class="ant-image-mask"
+      >
+        <div
+          class="ant-image-mask-info"
+        >
+          <span
+            aria-label="eye"
+            class="anticon anticon-eye"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="eye"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M942.2 486.2C847.4 286.5 704.1 186 512 186c-192.2 0-335.4 100.5-430.2 300.3a60.3 60.3 0 000 51.5C176.6 737.5 319.9 838 512 838c192.2 0 335.4-100.5 430.2-300.3 7.7-16.2 7.7-35 0-51.5zM512 766c-161.3 0-279.4-81.8-362.7-254C232.6 339.8 350.7 258 512 258c161.3 0 279.4 81.8 362.7 254C791.5 684.2 673.4 766 512 766zm-4-430c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm0 288c-61.9 0-112-50.1-112-112s50.1-112 112-112 112 50.1 112 112-50.1 112-112 112z"
+              />
+            </svg>
+          </span>
+          Preview
+        </div>
+      </div>
     </div>
   </span>,
   <span
@@ -831,7 +700,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="user"
         fill="currentColor"
         focusable="false"

components/avatar/avatar.tsx

@@ -1,10 +1,9 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import ResizeObserver from 'rc-resize-observer';
-
+import { composeRef } from 'rc-util/lib/ref';
 import { ConfigContext } from '../config-provider';
 import devWarning from '../_util/devWarning';
-import { composeRef } from '../_util/ref';
 import { Breakpoint, responsiveArray } from '../_util/responsiveObserve';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
 import SizeContext, { AvatarSize } from './SizeContext';
@@ -23,7 +22,7 @@ export interface AvatarProps {
   /** Srcset of image avatar */
   srcSet?: string;
   draggable?: boolean;
-  /** icon to be used in avatar */
+  /** Icon to be used in avatar */
   icon?: React.ReactNode;
   style?: React.CSSProperties;
   prefixCls?: string;

components/avatar/group.tsx

@@ -37,11 +37,11 @@ const Group: React.FC<GroupProps> = props => {
   );
 
   const { children, maxPopoverPlacement = 'top' } = props;
-  const childrenWithProps = toArray(children).map((child, index) => {
-    return cloneElement(child, {
+  const childrenWithProps = toArray(children).map((child, index) =>
+    cloneElement(child, {
       key: `avatar-key-${index}`,
-    });
-  });
+    }),
+  );
 
   const numOfChildren = childrenWithProps.length;
   if (maxCount && maxCount < numOfChildren) {

components/avatar/style/index.less

@@ -4,7 +4,7 @@
 @avatar-prefix-cls: ~'@{ant-prefix}-avatar';
 
 .@{avatar-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   position: relative;
   display: inline-block;
@@ -19,6 +19,10 @@
     background: transparent;
   }
 
+  .@{ant-prefix}-image-img {
+    display: block;
+  }
+
   .avatar-size(@avatar-size-base, @avatar-font-size-base);
 
   &-lg {

components/back-top/index.tsx

@@ -1,13 +1,15 @@
 import * as React from 'react';
-import Animate from 'rc-animate';
+import CSSMotion from 'rc-motion';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
+import useMergedState from 'rc-util/lib/hooks/useMergedState';
 import classNames from 'classnames';
-import omit from 'omit.js';
+import omit from 'rc-util/lib/omit';
 import VerticalAlignTopOutlined from '@ant-design/icons/VerticalAlignTopOutlined';
 import { throttleByAnimationFrame } from '../_util/throttleByAnimationFrame';
 import { ConfigContext } from '../config-provider';
 import getScroll from '../_util/getScroll';
 import scrollTo from '../_util/scrollTo';
+import { cloneElement } from '../_util/reactNode';
 
 export interface BackTopProps {
   visibilityHeight?: number;
@@ -22,14 +24,15 @@ export interface BackTopProps {
 }
 
 const BackTop: React.FC<BackTopProps> = props => {
-  const [visible, setVisible] = React.useState(false);
+  const [visible, setVisible] = useMergedState(false, {
+    value: props.visible,
+  });
 
   const ref = React.createRef<HTMLDivElement>();
   const scrollEvent = React.useRef<any>();
 
-  const getDefaultTarget = () => {
-    return ref.current && ref.current.ownerDocument ? ref.current.ownerDocument : window;
-  };
+  const getDefaultTarget = () =>
+    ref.current && ref.current.ownerDocument ? ref.current.ownerDocument : window;
 
   const handleScroll = throttleByAnimationFrame(
     (e: React.UIEvent<HTMLElement> | { target: any }) => {
@@ -61,13 +64,6 @@ const BackTop: React.FC<BackTopProps> = props => {
     };
   }, [props.target]);
 
-  const getVisible = () => {
-    if ('visible' in props) {
-      return props.visible;
-    }
-    return visible;
-  };
-
   const scrollToTop = (e: React.MouseEvent<HTMLDivElement>) => {
     const { onClick, target, duration = 450 } = props;
     scrollTo(0, {
@@ -89,9 +85,18 @@ const BackTop: React.FC<BackTopProps> = props => {
       </div>
     );
     return (
-      <Animate component="" transitionName="fade">
-        {getVisible() ? <div>{children || defaultElement}</div> : null}
-      </Animate>
+      <CSSMotion visible={visible} motionName="fade" removeOnLeave>
+        {({ className: motionClassName }) => {
+          const childNode = children || defaultElement;
+          return (
+            <div>
+              {cloneElement(childNode, ({ className }) => ({
+                className: classNames(motionClassName, className),
+              }))}
+            </div>
+          );
+        }}
+      </CSSMotion>
     );
   };
 

components/back-top/style/index.less

@@ -4,7 +4,7 @@
 @backtop-prefix-cls: ~'@{ant-prefix}-back-top';
 
 .@{backtop-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   position: fixed;
   right: 100px;

components/badge/ScrollNumber.tsx

@@ -2,47 +2,18 @@ import * as React from 'react';
 import classNames from 'classnames';
 import { ConfigContext } from '../config-provider';
 import { cloneElement } from '../_util/reactNode';
-
-function getNumberArray(num: string | number | undefined | null) {
-  return num
-    ? num
-        .toString()
-        .split('')
-        .reverse()
-        .map(i => {
-          const current = Number(i);
-          return isNaN(current) ? i : current;
-        })
-    : [];
-}
-
-function renderNumberList(position: number, className: string) {
-  const childrenToReturn: React.ReactElement<any>[] = [];
-  for (let i = 0; i < 30; i++) {
-    childrenToReturn.push(
-      <p
-        key={i.toString()}
-        className={classNames(className, {
-          current: position === i,
-        })}
-      >
-        {i % 10}
-      </p>,
-    );
-  }
-
-  return childrenToReturn;
-}
+import SingleNumber from './SingleNumber';
 
 export interface ScrollNumberProps {
   prefixCls?: string;
   className?: string;
+  motionClassName?: string;
   count?: string | number | null;
-  displayComponent?: React.ReactElement<HTMLElement>;
+  children?: React.ReactElement<HTMLElement>;
   component?: string;
-  onAnimated?: Function;
   style?: React.CSSProperties;
   title?: string | number | null;
+  show: boolean;
 }
 
 export interface ScrollNumberState {
@@ -52,112 +23,44 @@ export interface ScrollNumberState {
 
 const ScrollNumber: React.FC<ScrollNumberProps> = ({
   prefixCls: customizePrefixCls,
-  count: customizeCount,
+  count,
   className,
+  motionClassName,
   style,
   title,
+  show,
   component = 'sup',
-  displayComponent,
-  onAnimated = () => {},
+  children,
   ...restProps
 }) => {
-  const [animateStarted, setAnimateStarted] = React.useState(true);
-  const [count, setCount] = React.useState(customizeCount);
-  const [prevCount, setPrevCount] = React.useState(customizeCount);
-  const [lastCount, setLastCount] = React.useState(customizeCount);
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('scroll-number', customizePrefixCls);
 
-  if (prevCount !== customizeCount) {
-    setAnimateStarted(true);
-    setPrevCount(customizeCount);
-  }
-
-  React.useEffect(() => {
-    setLastCount(count);
-    let timeout: number;
-    if (animateStarted) {
-      // Let browser has time to reset the scroller before actually
-      // performing the transition.
-      timeout = setTimeout(() => {
-        setAnimateStarted(false);
-        setCount(customizeCount);
-        onAnimated();
-      });
-    }
-    return () => {
-      if (timeout) {
-        clearTimeout(timeout);
-      }
-    };
-  }, [animateStarted, customizeCount, onAnimated]);
-
-  const getPositionByNum = (num: number, i: number) => {
-    const currentCount = Math.abs(Number(count));
-    const lstCount = Math.abs(Number(lastCount));
-    const currentDigit = Math.abs(getNumberArray(count)[i] as number);
-    const lastDigit = Math.abs(getNumberArray(lstCount)[i] as number);
-
-    if (animateStarted) {
-      return 10 + num;
-    }
-
-    // 同方向则在同一侧切换数字
-    if (currentCount > lstCount) {
-      if (currentDigit >= lastDigit) {
-        return 10 + num;
-      }
-      return 20 + num;
-    }
-    if (currentDigit <= lastDigit) {
-      return 10 + num;
-    }
-    return num;
-  };
-
-  const renderCurrentNumber = (num: number | string, i: number) => {
-    if (typeof num === 'number') {
-      const position = getPositionByNum(num, i);
-      const removeTransition = animateStarted || getNumberArray(lastCount)[i] === undefined;
-      return React.createElement(
-        'span',
-        {
-          className: `${prefixCls}-only`,
-          style: {
-            transition: removeTransition ? 'none' : undefined,
-            msTransform: `translateY(${-position * 100}%)`,
-            WebkitTransform: `translateY(${-position * 100}%)`,
-            transform: `translateY(${-position * 100}%)`,
-          },
-          key: i,
-        },
-        renderNumberList(position, `${prefixCls}-only-unit`),
-      );
-    }
-
-    return (
-      <span key="symbol" className={`${prefixCls}-symbol`}>
-        {num}
-      </span>
-    );
-  };
-
-  const renderNumberElement = () => {
-    if (count && Number(count) % 1 === 0) {
-      return getNumberArray(count)
-        .map((num, i) => renderCurrentNumber(num, i))
-        .reverse();
-    }
-    return count;
-  };
-
+  // ============================ Render ============================
   const newProps = {
     ...restProps,
+    'data-show': show,
     style,
-    className: classNames(prefixCls, className),
+    className: classNames(prefixCls, className, motionClassName),
     title: title as string,
   };
 
+  // Only integer need motion
+  let numberNodes: React.ReactNode = count;
+  if (count && Number(count) % 1 === 0) {
+    const numberList = String(count).split('');
+
+    numberNodes = numberList.map((num, i) => (
+      <SingleNumber
+        prefixCls={prefixCls}
+        count={Number(count)}
+        value={num}
+        // eslint-disable-next-line react/no-array-index-key
+        key={numberList.length - i}
+      />
+    ));
+  }
+
   // allow specify the border
   // mock border-color by box-shadow for compatible with old usage:
   // <Badge count={4} style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }} />
@@ -167,15 +70,12 @@ const ScrollNumber: React.FC<ScrollNumberProps> = ({
       boxShadow: `0 0 0 1px ${style.borderColor} inset`,
     };
   }
-  if (displayComponent) {
-    return cloneElement(displayComponent, {
-      className: classNames(
-        `${prefixCls}-custom-component`,
-        displayComponent.props && displayComponent.props.className,
-      ),
-    });
+  if (children) {
+    return cloneElement(children, oriProps => ({
+      className: classNames(`${prefixCls}-custom-component`, oriProps?.className, motionClassName),
+    }));
   }
-  return React.createElement(component as any, newProps, renderNumberElement());
+  return React.createElement(component as any, newProps, numberNodes);
 };
 
 export default ScrollNumber;

components/badge/SingleNumber.tsx

@@ -0,0 +1,124 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+export interface UnitNumberProps {
+  prefixCls: string;
+  value: string | number;
+  offset?: number;
+  current?: boolean;
+}
+
+function UnitNumber({ prefixCls, value, current, offset = 0 }: UnitNumberProps) {
+  let style: React.CSSProperties | undefined;
+
+  if (offset) {
+    style = {
+      position: 'absolute',
+      top: `${offset}00%`,
+      left: 0,
+    };
+  }
+
+  return (
+    <p
+      style={style}
+      className={classNames(`${prefixCls}-only-unit`, {
+        current,
+      })}
+    >
+      {value}
+    </p>
+  );
+}
+
+export interface SingleNumberProps {
+  prefixCls: string;
+  value: string;
+  count: number;
+}
+
+function getOffset(start: number, end: number, unit: -1 | 1) {
+  let index = start;
+  let offset = 0;
+
+  while ((index + 10) % 10 !== end) {
+    index += unit;
+    offset += unit;
+  }
+
+  return offset;
+}
+
+export default function SingleNumber(props: SingleNumberProps) {
+  const { prefixCls, count: originCount, value: originValue } = props;
+  const value = Number(originValue);
+  const count = Math.abs(originCount);
+  const [prevValue, setPrevValue] = React.useState(value);
+  const [prevCount, setPrevCount] = React.useState(count);
+
+  // ============================= Events =============================
+  const onTransitionEnd = () => {
+    setPrevValue(value);
+    setPrevCount(count);
+  };
+
+  // Fallback if transition event not support
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      onTransitionEnd();
+    }, 1000);
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [value]);
+
+  // ============================= Render =============================
+  // Render unit list
+  let unitNodes: React.ReactElement[];
+  let offsetStyle: React.CSSProperties | undefined;
+
+  if (prevValue === value || Number.isNaN(value) || Number.isNaN(prevValue)) {
+    // Nothing to change
+    unitNodes = [<UnitNumber {...props} key={value} current />];
+    offsetStyle = {
+      transition: 'none',
+    };
+  } else {
+    unitNodes = [];
+
+    // Fill basic number units
+    const end = value + 10;
+    const unitNumberList: number[] = [];
+    for (let index = value; index <= end; index += 1) {
+      unitNumberList.push(index);
+    }
+
+    // Fill with number unit nodes
+    const prevIndex = unitNumberList.findIndex(n => n % 10 === prevValue);
+    unitNodes = unitNumberList.map((n, index) => {
+      const singleUnit = n % 10;
+      return (
+        <UnitNumber
+          {...props}
+          key={n}
+          value={singleUnit}
+          offset={index - prevIndex}
+          current={index === prevIndex}
+        />
+      );
+    });
+
+    // Calculate container offset value
+    const unit = prevCount < count ? 1 : -1;
+    offsetStyle = {
+      transform: `translateY(${-getOffset(prevValue, value, unit)}00%)`,
+    };
+  }
+
+  return (
+    <span className={`${prefixCls}-only`} style={offsetStyle} onTransitionEnd={onTransitionEnd}>
+      {unitNodes}
+    </span>
+  );
+}

components/badge/__tests__/index.test.js

@@ -1,5 +1,6 @@
 import React from 'react';
-import { mount, render } from 'enzyme';
+import { mount } from 'enzyme';
+import { act } from 'react-dom/test-utils';
 import Badge from '../index';
 import Tooltip from '../../tooltip';
 import mountTest from '../../../tests/shared/mountTest';
@@ -30,10 +31,11 @@ describe('Badge', () => {
   });
 
   it('badge should support float number', () => {
-    let wrapper = render(<Badge count={3.5} />);
-    expect(wrapper).toMatchSnapshot();
+    let wrapper = mount(<Badge count={3.5} />);
+    expect(wrapper.find('.ant-badge-multiple-words').first().text()).toEqual('3.5');
+
     wrapper = mount(<Badge count="3.5" />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.find('.ant-badge-multiple-words').first().text()).toEqual('3.5');
     expect(() => wrapper.unmount()).not.toThrow();
   });
 
@@ -57,53 +59,55 @@ describe('Badge', () => {
         <Badge status="error" />
       </Tooltip>,
     );
-    wrapper.find('Badge').simulate('mouseenter');
-    jest.runAllTimers();
-    expect(ref.current.props.visible).toBe(true);
+
+    act(() => {
+      wrapper.find('Badge').simulate('mouseenter');
+      jest.runAllTimers();
+    });
+    expect(ref.current.props.visible).toBeTruthy();
   });
 
   it('should render when count is changed', () => {
     const wrapper = mount(<Badge count={9} />);
-    wrapper.setProps({ count: 10 });
-    jest.runAllTimers();
-    expect(wrapper).toMatchSnapshot();
-    wrapper.setProps({ count: 11 });
-    jest.runAllTimers();
-    expect(wrapper).toMatchSnapshot();
-    wrapper.setProps({ count: 11 });
-    jest.runAllTimers();
-    expect(wrapper).toMatchSnapshot();
-    wrapper.setProps({ count: 111 });
-    jest.runAllTimers();
-    expect(wrapper).toMatchSnapshot();
-    wrapper.setProps({ count: 10 });
-    jest.runAllTimers();
-    expect(wrapper).toMatchSnapshot();
-    jest.runAllTimers();
-    wrapper.setProps({ count: 9 });
-    expect(wrapper).toMatchSnapshot();
+
+    function updateMatch(count) {
+      wrapper.setProps({ count });
+
+      act(() => {
+        jest.runAllTimers();
+        wrapper.update();
+        expect(wrapper.render()).toMatchSnapshot();
+      });
+    }
+
+    updateMatch(10);
+    updateMatch(11);
+    updateMatch(11);
+    updateMatch(111);
+    updateMatch(10);
+    updateMatch(9);
   });
 
   it('should be compatible with borderColor style', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Badge
         count={4}
         style={{ backgroundColor: '#fff', color: '#999', borderColor: '#d9d9d9' }}
       />,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   // https://github.com/ant-design/ant-design/issues/13694
   it('should support offset when count is a ReactNode', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Badge count={<span className="custom" style={{ color: '#f5222d' }} />} offset={[10, 20]}>
         <a href="#" className="head-example">
           head
         </a>
       </Badge>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   // https://github.com/ant-design/ant-design/issues/15349
@@ -114,19 +118,19 @@ describe('Badge', () => {
 
   // https://github.com/ant-design/ant-design/issues/15799
   it('render correct with negative number', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <div>
         <Badge count="-10" />
         <Badge count={-10} />
       </div>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   // https://github.com/ant-design/ant-design/issues/21331
   it('render Badge status/color when contains children', () => {
-    const wrapper = render(
-      <>
+    const wrapper = mount(
+      <div>
         <Badge count={5} status="success">
           <a />
         </Badge>
@@ -136,9 +140,9 @@ describe('Badge', () => {
         <Badge count={5} color="#08c">
           <a />
         </Badge>
-      </>,
+      </div>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('Badge should work when status/color is empty string', () => {
@@ -151,20 +155,6 @@ describe('Badge', () => {
 
     expect(wrapper.find('.ant-badge')).toHaveLength(2);
   });
-
-  it('render Badge size when contains children', () => {
-    const wrapper = render(
-      <>
-        <Badge size="default" count={5}>
-          <a />
-        </Badge>
-        <Badge size="small" count={5}>
-          <a />
-        </Badge>
-      </>,
-    );
-    expect(wrapper).toMatchSnapshot();
-  });
 });
 
 describe('Ribbon', () => {

components/badge/demo/change.md

@@ -15,7 +15,7 @@ The count will be animated as it changes.
 
 ```jsx
 import { Badge, Button, Switch } from 'antd';
-import { MinusOutlined, PlusOutlined } from '@ant-design/icons';
+import { MinusOutlined, PlusOutlined, QuestionOutlined } from '@ant-design/icons';
 
 const ButtonGroup = Button.Group;
 
@@ -38,6 +38,11 @@ class Demo extends React.Component {
     this.setState({ count });
   };
 
+  random = () => {
+    const count = Math.floor(Math.random() * 100);
+    this.setState({ count });
+  };
+
   onChange = show => {
     this.setState({ show });
   };
@@ -56,6 +61,9 @@ class Demo extends React.Component {
             <Button onClick={this.increase}>
               <PlusOutlined />
             </Button>
+            <Button onClick={this.random}>
+              <QuestionOutlined />
+            </Button>
           </ButtonGroup>
         </div>
         <div style={{ marginTop: 10 }}>

components/badge/demo/no-wrapper.md

@@ -16,34 +16,44 @@ title:
 Used in standalone when children is empty.
 
 ```jsx
-import { Badge } from 'antd';
+import { Badge, Space, Switch } from 'antd';
+import { ClockCircleOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
-  <div>
-    <Badge count={25} />
-    <Badge count={4} className="site-badge-count-4" />
-    <Badge className="site-badge-count-109" count={109} style={{ backgroundColor: '#52c41a' }} />
-  </div>,
-  mountNode,
-);
+const Demo = () => {
+  const [show, setShow] = React.useState(true);
+
+  return (
+    <Space>
+      <Switch
+        checked={show}
+        onChange={() => {
+          setShow(!show);
+        }}
+      />
+      <Badge count={show ? 25 : 0} />
+      <Badge count={show ? <ClockCircleOutlined style={{ color: '#f5222d' }} /> : 0} />
+      <Badge count={show ? 4 : 0} className="site-badge-count-4" />
+      <Badge
+        className="site-badge-count-109"
+        count={show ? 109 : 0}
+        style={{ backgroundColor: '#52c41a' }}
+      />
+    </Space>
+  );
+};
+
+ReactDOM.render(<Demo />, mountNode);
 ```
 
 ```css
 .site-badge-count-4 .ant-badge-count {
-  background-color: #fff;
   color: #999;
+  background-color: #fff;
   box-shadow: 0 0 0 1px #d9d9d9 inset;
 }
 ```
 
 <style>
-.ant-badge-not-a-wrapper:not(.ant-badge-status) {
-  margin-right: 8px;
-}
-.ant-badge.ant-badge-rtl:not(.ant-badge-not-a-wrapper) {
-  margin-right: 0;
-  margin-left: 20px;
-}
 [data-theme="dark"] .site-badge-count-4 .ant-badge-count {
   background-color: #141414;
   box-shadow: 0 0 0 1px #434343 inset;

components/badge/demo/title.md

@@ -22,6 +22,9 @@ ReactDOM.render(
     <Badge count={5} title="Custom hover text">
       <a href="#" className="head-example" />
     </Badge>
+    <Badge count={-5} title="Negative">
+      <a href="#" className="head-example" />
+    </Badge>
   </div>,
   mountNode,
 );

components/badge/index.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
-import Animate from 'rc-animate';
+import { useMemo, useRef } from 'react';
+import CSSMotion from 'rc-motion';
 import classNames from 'classnames';
 import ScrollNumber from './ScrollNumber';
 import Ribbon from './Ribbon';
@@ -21,7 +22,7 @@ export interface BadgeProps {
   showZero?: boolean;
   /** Max count to show */
   overflowCount?: number;
-  /** whether to show red dot without number */
+  /** Whether to show red dot without number */
   dot?: boolean;
   style?: React.CSSProperties;
   prefixCls?: string;
@@ -56,123 +57,92 @@ const Badge: CompoundedComponent = ({
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('badge', customizePrefixCls);
 
-  const getNumberedDisplayCount = () => {
-    const displayCount =
-      (count as number) > (overflowCount as number) ? `${overflowCount}+` : count;
-    return displayCount as string | number | null;
-  };
+  // ================================ Misc ================================
+  const numberedDisplayCount = ((count as number) > (overflowCount as number)
+    ? `${overflowCount}+`
+    : count) as string | number | null;
 
-  const hasStatus = (): boolean =>
+  const hasStatus =
     (status !== null && status !== undefined) || (color !== null && color !== undefined);
 
-  const isZero = () => {
-    const numberedDisplayCount = getNumberedDisplayCount();
-    return numberedDisplayCount === '0' || numberedDisplayCount === 0;
-  };
+  const isZero = numberedDisplayCount === '0' || numberedDisplayCount === 0;
 
-  const isDot = () => {
-    return (dot && !isZero()) || hasStatus();
-  };
+  const showAsDot = (dot && !isZero) || hasStatus;
 
-  const getDisplayCount = () => {
-    // dot mode don't need count
-    if (isDot()) {
-      return '';
+  const mergedCount = showAsDot ? '' : numberedDisplayCount;
+
+  const isHidden = useMemo(() => {
+    const isEmpty = mergedCount === null || mergedCount === undefined || mergedCount === '';
+    return (isEmpty || (isZero && !showZero)) && !showAsDot;
+  }, [mergedCount, isZero, showZero, showAsDot]);
+
+  // Count should be cache in case hidden change it
+  const countRef = useRef(count);
+  if (!isHidden) {
+    countRef.current = count;
+  }
+  const livingCount = countRef.current;
+
+  // We need cache count since remove motion should not change count display
+  const displayCountRef = useRef(mergedCount);
+  if (!isHidden) {
+    displayCountRef.current = mergedCount;
+  }
+  const displayCount = displayCountRef.current;
+
+  // We will cache the dot status to avoid shaking on leaved motion
+  const isDotRef = useRef(showAsDot);
+  if (!isHidden) {
+    isDotRef.current = showAsDot;
+  }
+
+  // =============================== Styles ===============================
+  const mergedStyle = useMemo<React.CSSProperties>(() => {
+    if (!offset) {
+      return { ...style };
     }
-    return getNumberedDisplayCount();
-  };
 
-  const getScrollNumberTitle = () => {
-    if (title) {
-      return title;
-    }
-    return typeof count === 'string' || typeof count === 'number' ? count : undefined;
-  };
-
-  const getStyleWithOffset = () => {
+    const offsetStyle: React.CSSProperties = { marginTop: offset[1] };
     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),
-          marginTop: offset[1],
-          ...style,
-        }
-      : style;
-  };
-
-  const isHidden = () => {
-    const displayCount = getDisplayCount();
-    const isEmpty = displayCount === null || displayCount === undefined || displayCount === '';
-    return (isEmpty || (isZero() && !showZero)) && !isDot();
-  };
-
-  const renderStatusText = () => {
-    const hidden = isHidden();
-    return hidden || !text ? null : <span className={`${prefixCls}-status-text`}>{text}</span>;
-  };
-
-  const renderDisplayComponent = () => {
-    const customNode = count as React.ReactElement<any>;
-    if (!customNode || typeof customNode !== 'object') {
-      return undefined;
-    }
-    return cloneElement(customNode, {
-      style: {
-        ...getStyleWithOffset(),
-        ...(customNode.props && customNode.props.style),
-      },
-    });
-  };
-
-  const renderBadgeNumber = () => {
-    const scrollNumberPrefixCls = getPrefixCls('scroll-number', customizeScrollNumberPrefixCls);
-    const displayCount = getDisplayCount();
-    const bDot = isDot();
-    const hidden = isHidden();
-
-    const scrollNumberCls = classNames({
-      [`${prefixCls}-dot`]: bDot,
-      [`${prefixCls}-count`]: !bDot,
-      [`${prefixCls}-count-sm`]: size === 'small',
-      [`${prefixCls}-multiple-words`]:
-        !bDot && count && count.toString && count.toString().length > 1,
-      [`${prefixCls}-status-${status}`]: !!status,
-      [`${prefixCls}-status-${color}`]: isPresetColor(color),
-    });
-
-    let statusStyle: React.CSSProperties | undefined = getStyleWithOffset();
-    if (color && !isPresetColor(color)) {
-      statusStyle = statusStyle || {};
-      statusStyle.background = color;
+      offsetStyle.left = parseInt(offset[0] as string, 10);
+    } else {
+      offsetStyle.right = -parseInt(offset[0] as string, 10);
     }
 
-    return hidden ? null : (
-      <ScrollNumber
-        prefixCls={scrollNumberPrefixCls}
-        data-show={!hidden}
-        className={scrollNumberCls}
-        count={displayCount}
-        displayComponent={renderDisplayComponent()} // <Badge status="success" count={<Icon type="xxx" />}></Badge>
-        title={getScrollNumberTitle()}
-        style={statusStyle}
-        key="scrollNumber"
-      />
-    );
-  };
+    return {
+      ...offsetStyle,
+      ...style,
+    };
+  }, [direction, offset, style]);
 
+  // =============================== Render ===============================
+  // >>> Title
+  const titleNode =
+    title ??
+    (typeof livingCount === 'string' || typeof livingCount === 'number' ? livingCount : undefined);
+
+  // >>> Status Text
+  const statusTextNode =
+    isHidden || !text ? null : <span className={`${prefixCls}-status-text`}>{text}</span>;
+
+  // >>> Display Component
+  const displayNode =
+    !livingCount || typeof livingCount !== 'object'
+      ? undefined
+      : cloneElement(livingCount, oriProps => ({
+          style: {
+            ...mergedStyle,
+            ...oriProps.style,
+          },
+        }));
+
+  // Shared styles
   const statusCls = classNames({
-    [`${prefixCls}-status-dot`]: hasStatus(),
+    [`${prefixCls}-status-dot`]: hasStatus,
     [`${prefixCls}-status-${status}`]: !!status,
     [`${prefixCls}-status-${color}`]: isPresetColor(color),
   });
+
   const statusStyle: React.CSSProperties = {};
   if (color && !isPresetColor(color)) {
     statusStyle.background = color;
@@ -181,7 +151,7 @@ const Badge: CompoundedComponent = ({
   const badgeClassName = classNames(
     prefixCls,
     {
-      [`${prefixCls}-status`]: hasStatus(),
+      [`${prefixCls}-status`]: hasStatus,
       [`${prefixCls}-not-a-wrapper`]: !children,
       [`${prefixCls}-rtl`]: direction === 'rtl',
     },
@@ -189,11 +159,10 @@ const Badge: CompoundedComponent = ({
   );
 
   // <Badge status="success" />
-  if (!children && hasStatus()) {
-    const styleWithOffset = getStyleWithOffset();
-    const statusTextColor = styleWithOffset && styleWithOffset.color;
+  if (!children && hasStatus) {
+    const statusTextColor = mergedStyle.color;
     return (
-      <span {...restProps} className={badgeClassName} style={styleWithOffset}>
+      <span {...restProps} className={badgeClassName} style={mergedStyle}>
         <span className={statusCls} style={statusStyle} />
         <span style={{ color: statusTextColor }} className={`${prefixCls}-status-text`}>
           {text}
@@ -202,18 +171,52 @@ const Badge: CompoundedComponent = ({
     );
   }
 
+  // <Badge status="success" count={<Icon type="xxx" />}></Badge>
   return (
     <span {...restProps} className={badgeClassName}>
       {children}
-      <Animate
-        component=""
-        showProp="data-show"
-        transitionName={children ? `${prefixCls}-zoom` : ''}
-        transitionAppear
-      >
-        {renderBadgeNumber()}
-      </Animate>
-      {renderStatusText()}
+      <CSSMotion visible={!isHidden} motionName={`${prefixCls}-zoom`} motionAppear={false}>
+        {({ className: motionClassName }) => {
+          const scrollNumberPrefixCls = getPrefixCls(
+            'scroll-number',
+            customizeScrollNumberPrefixCls,
+          );
+
+          const isDot = isDotRef.current;
+
+          const scrollNumberCls = classNames({
+            [`${prefixCls}-dot`]: isDot,
+            [`${prefixCls}-count`]: !isDot,
+            [`${prefixCls}-count-sm`]: size === 'small',
+            [`${prefixCls}-multiple-words`]:
+              !isDot && displayCount && displayCount?.toString().length > 1,
+            [`${prefixCls}-status-${status}`]: !!status,
+            [`${prefixCls}-status-${color}`]: isPresetColor(color),
+          });
+
+          let scrollNumberStyle: React.CSSProperties = { ...mergedStyle };
+          if (color && !isPresetColor(color)) {
+            scrollNumberStyle = scrollNumberStyle || {};
+            scrollNumberStyle.background = color;
+          }
+
+          return (
+            <ScrollNumber
+              prefixCls={scrollNumberPrefixCls}
+              show={!isHidden}
+              motionClassName={motionClassName}
+              className={scrollNumberCls}
+              count={displayCount}
+              title={titleNode}
+              style={scrollNumberStyle}
+              key="scrollNumber"
+            >
+              {displayNode}
+            </ScrollNumber>
+          );
+        }}
+      </CSSMotion>
+      {statusTextNode}
     </span>
   );
 };

components/badge/style/index.less

@@ -5,7 +5,7 @@
 @number-prefix-cls: ~'@{ant-prefix}-scroll-number';
 
 .@{badge-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   position: relative;
   display: inline-block;
@@ -23,7 +23,7 @@
     white-space: nowrap;
     text-align: center;
     background: @badge-color;
-    border-radius: @badge-height / 2;
+    border-radius: (@badge-height / 2);
     box-shadow: 0 0 0 1px @shadow-color-inverse;
     a,
     a:hover {
@@ -37,7 +37,7 @@
     padding: 0;
     font-size: @badge-font-size-sm;
     line-height: @badge-height-sm;
-    border-radius: @badge-height-sm / 2;
+    border-radius: (@badge-height-sm / 2);
   }
 
   &-multiple-words {
@@ -47,6 +47,7 @@
   &-dot {
     z-index: @zindex-badge;
     width: @badge-dot-size;
+    min-width: @badge-dot-size;
     height: @badge-dot-size;
     background: @highlight-color;
     border-radius: 100%;
@@ -124,24 +125,39 @@
 
   &-zoom-appear,
   &-zoom-enter {
-    animation: antZoomBadgeIn 0.3s @ease-out-back;
+    animation: antZoomBadgeIn @animation-duration-slow @ease-out-back;
     animation-fill-mode: both;
   }
 
   &-zoom-leave {
-    animation: antZoomBadgeOut 0.3s @ease-in-back;
+    animation: antZoomBadgeOut @animation-duration-slow @ease-in-back;
     animation-fill-mode: both;
   }
 
   &-not-a-wrapper {
+    .@{badge-prefix-cls}-zoom-appear,
+    .@{badge-prefix-cls}-zoom-enter {
+      animation: antNoWrapperZoomBadgeIn @animation-duration-slow @ease-out-back;
+    }
+
+    .@{badge-prefix-cls}-zoom-leave {
+      animation: antNoWrapperZoomBadgeOut @animation-duration-slow @ease-in-back;
+    }
+
     &:not(.@{badge-prefix-cls}-status) {
       vertical-align: middle;
     }
 
+    .@{number-prefix-cls}-custom-component {
+      transform: none;
+    }
+
+    .@{number-prefix-cls}-custom-component,
     .@{ant-prefix}-scroll-number {
       position: relative;
       top: auto;
       display: block;
+      transform-origin: 50% 50%;
     }
 
     .@{badge-prefix-cls}-count {
@@ -161,15 +177,25 @@
   }
 }
 
+// Safari will blink with transform when inner element has absolute style.
+.safari-fix-motion() {
+  -webkit-transform-style: preserve-3d;
+  -webkit-backface-visibility: hidden;
+}
+
 .@{number-prefix-cls} {
   overflow: hidden;
   &-only {
+    position: relative;
     display: inline-block;
     height: @badge-height;
-    transition: all 0.3s @ease-in-out;
+    transition: all @animation-duration-slow @ease-in-out;
+    .safari-fix-motion;
+
     > p.@{number-prefix-cls}-only-unit {
       height: @badge-height;
       margin: 0;
+      .safari-fix-motion;
     }
   }
 
@@ -198,5 +224,25 @@
   }
 }
 
+@keyframes antNoWrapperZoomBadgeIn {
+  0% {
+    transform: scale(0);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+@keyframes antNoWrapperZoomBadgeOut {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+    opacity: 0;
+  }
+}
+
 @import './ribbon';
 @import './rtl';

components/badge/style/ribbon.less

@@ -9,7 +9,7 @@
 }
 
 .@{ribbon-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   position: absolute;
   top: 8px;

components/breadcrumb/BreadcrumbItem.tsx

@@ -11,6 +11,7 @@ export interface BreadcrumbItemProps {
   overlay?: DropDownProps['overlay'];
   dropdownProps?: DropDownProps;
   onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
+  className?: string;
 }
 interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
   __ANT_BREADCRUMB_ITEM: boolean;
@@ -25,10 +26,7 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
 }) => {
   const { getPrefixCls } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('breadcrumb', customizePrefixCls);
-  /**
-   * if overlay is have
-   * Wrap a DropDown
-   */
+  /** If overlay is have Wrap a DropDown */
   const renderBreadcrumbNode = (breadcrumbItem: React.ReactNode) => {
     if (overlay) {
       return (

components/breadcrumb/__tests__/Breadcrumb.test.js

@@ -141,13 +141,11 @@ describe('Breadcrumb', () => {
 
   // https://github.com/ant-design/ant-design/issues/25975
   it('should support Breadcrumb.Item default separator', () => {
-    const MockComponent = () => {
-      return (
-        <span>
-          <Breadcrumb.Item>Mock Node</Breadcrumb.Item>
-        </span>
-      );
-    };
+    const MockComponent = () => (
+      <span>
+        <Breadcrumb.Item>Mock Node</Breadcrumb.Item>
+      </span>
+    );
     const wrapper = render(
       <Breadcrumb>
         <Breadcrumb.Item>Location</Breadcrumb.Item>

components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap

@@ -134,7 +134,6 @@ exports[`Breadcrumb should render a menu 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
           data-icon="down"
           fill="currentColor"
           focusable="false"

components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap

@@ -115,7 +115,6 @@ exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
           data-icon="down"
           fill="currentColor"
           focusable="false"
@@ -275,7 +274,6 @@ exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
           data-icon="home"
           fill="currentColor"
           focusable="false"
@@ -307,7 +305,6 @@ exports[`renders ./components/breadcrumb/demo/withIcon.md correctly 1`] = `
       >
         <svg
           aria-hidden="true"
-          class=""
           data-icon="user"
           fill="currentColor"
           focusable="false"

components/breadcrumb/demo/router-4.md

@@ -83,13 +83,13 @@ ReactDOM.render(
 }
 .demo-nav {
   height: 30px;
-  line-height: 30px;
   margin-bottom: 16px;
+  line-height: 30px;
   background: #f8f8f8;
 }
 .demo-nav a {
-  line-height: 30px;
   padding: 0 8px;
+  line-height: 30px;
 }
 .app-list {
   margin-top: 16px;

components/breadcrumb/index.en-US.md

@@ -28,6 +28,7 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
+| className | The additional css class | string | - |  |
 | dropdownProps | The dropdown props | [Dropdown](/components/dropdown) | - |  |
 | href | Target of hyperlink | string | - |  |
 | overlay | The dropdown menu | [Menu](/components/menu) \| () => Menu | - |  |
@@ -35,9 +36,9 @@ A breadcrumb displays the current location within a hierarchy. It allows going b
 
 ### Breadcrumb.Separator
 
-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| children | Custom separator | ReactNode | `/` |  |
+| Property | Description      | Type      | Default | Version |
+| -------- | ---------------- | --------- | ------- | ------- |
+| children | Custom separator | ReactNode | `/`     |         |
 
 > When using `Breadcrumb.Separator`,its parent component must be set to `separator=""`, otherwise the default separator of the parent component will appear.
 

components/breadcrumb/index.zh-CN.md

@@ -29,6 +29,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
+| className | 自定义类名 | string | - |  |
 | dropdownProps | 弹出下拉菜单的自定义配置 | [Dropdown](/components/dropdown) | - |  |
 | href | 链接的目的地 | string | - |  |
 | overlay | 下拉菜单的内容 | [Menu](/components/menu) \| () => Menu | - |  |
@@ -36,9 +37,9 @@ cover: https://gw.alipayobjects.com/zos/alicdn/9Ltop8JwH/Breadcrumb.svg
 
 ### Breadcrumb.Separator
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| children | 要显示的分隔符 | ReactNode | `/` |  |
+| 参数     | 说明           | 类型      | 默认值 | 版本 |
+| -------- | -------------- | --------- | ------ | ---- |
+| children | 要显示的分隔符 | ReactNode | `/`    |      |
 
 > 注意：在使用 `Breadcrumb.Separator` 时，其父组件的分隔符必须设置为 `separator=""`，否则会出现父组件默认的分隔符。
 

components/breadcrumb/style/index.less

@@ -4,7 +4,7 @@
 @breadcrumb-prefix-cls: ~'@{ant-prefix}-breadcrumb';
 
 .@{breadcrumb-prefix-cls} {
-  .reset-component;
+  .reset-component();
 
   color: @breadcrumb-base-color;
   font-size: @breadcrumb-font-size;

components/breadcrumb/style/index.tsx

@@ -1,5 +1,6 @@
 import '../../style/index.less';
 import './index.less';
 
+// style dependencies
 import '../../menu/style';
 import '../../dropdown/style';

components/breadcrumb/style/rtl.less

@@ -1,6 +1,6 @@
 .@{breadcrumb-prefix-cls} {
   &-rtl {
-    .clearfix;
+    .clearfix();
     direction: rtl;
 
     > span {

components/button/LoadingIcon.tsx

@@ -1,5 +1,4 @@
-import * as React from 'react';
-import classNames from 'classnames';
+import React from 'react';
 import CSSMotion from 'rc-motion';
 import LoadingOutlined from '@ant-design/icons/LoadingOutlined';
 
@@ -8,7 +7,6 @@ export interface LoadingIconProps {
   existIcon: boolean;
   loading?: boolean | object;
 }
-
 const getCollapsedWidth = () => ({ width: 0, opacity: 0, transform: 'scale(0)' });
 const getRealWidth = (node: HTMLElement) => ({
   width: node.scrollWidth,
@@ -16,7 +14,7 @@ const getRealWidth = (node: HTMLElement) => ({
   transform: 'scale(1)',
 });
 
-export default function LoadingIcon({ prefixCls, loading, existIcon }: LoadingIconProps) {
+const LoadingIcon: React.FC<LoadingIconProps> = ({ prefixCls, loading, existIcon }) => {
   const visible = !!loading;
 
   if (existIcon) {
@@ -40,13 +38,13 @@ export default function LoadingIcon({ prefixCls, loading, existIcon }: LoadingIc
       onLeaveStart={getRealWidth}
       onLeaveActive={getCollapsedWidth}
     >
-      {({ className, style }: { className: string; style: React.CSSProperties }, ref: any) => {
-        return (
-          <span className={`${prefixCls}-loading-icon`} style={style} ref={ref}>
-            <LoadingOutlined className={classNames(className)} />
-          </span>
-        );
-      }}
+      {({ className, style }: { className?: string; style?: React.CSSProperties }, ref: any) => (
+        <span className={`${prefixCls}-loading-icon`} style={style} ref={ref}>
+          <LoadingOutlined className={className} />
+        </span>
+      )}
     </CSSMotion>
   );
-}
+};
+
+export default LoadingIcon;

components/button/__tests__/__snapshots__/demo.test.ts.snap

@@ -341,7 +341,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="search"
         fill="currentColor"
         focusable="false"
@@ -374,7 +373,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="search"
         fill="currentColor"
         focusable="false"
@@ -402,7 +400,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="search"
         fill="currentColor"
         focusable="false"
@@ -427,7 +424,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="search"
         fill="currentColor"
         focusable="false"
@@ -456,7 +452,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="search"
         fill="currentColor"
         focusable="false"
@@ -481,7 +476,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="search"
         fill="currentColor"
         focusable="false"
@@ -509,7 +503,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="search"
         fill="currentColor"
         focusable="false"
@@ -534,7 +527,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="search"
         fill="currentColor"
         focusable="false"
@@ -593,7 +585,6 @@ Array [
           >
             <svg
               aria-hidden="true"
-              class=""
               data-icon="download"
               fill="currentColor"
               focusable="false"
@@ -619,7 +610,6 @@ Array [
         >
           <svg
             aria-hidden="true"
-            class=""
             data-icon="download"
             fill="currentColor"
             focusable="false"
@@ -673,7 +663,6 @@ Array [
           >
             <svg
               aria-hidden="true"
-              class=""
               data-icon="download"
               fill="currentColor"
               focusable="false"
@@ -699,7 +688,6 @@ Array [
         >
           <svg
             aria-hidden="true"
-            class=""
             data-icon="download"
             fill="currentColor"
             focusable="false"
@@ -753,7 +741,6 @@ Array [
           >
             <svg
               aria-hidden="true"
-              class=""
               data-icon="download"
               fill="currentColor"
               focusable="false"
@@ -779,7 +766,6 @@ Array [
         >
           <svg
             aria-hidden="true"
-            class=""
             data-icon="download"
             fill="currentColor"
             focusable="false"
@@ -809,12 +795,11 @@ Array [
     >
       <span
         aria-label="loading"
-        class="anticon anticon-loading"
+        class="anticon anticon-loading anticon-spin"
         role="img"
       >
         <svg
           aria-hidden="true"
-          class="anticon-spin"
           data-icon="loading"
           fill="currentColor"
           focusable="false"
@@ -841,12 +826,11 @@ Array [
     >
       <span
         aria-label="loading"
-        class="anticon anticon-loading"
+        class="anticon anticon-loading anticon-spin"
         role="img"
       >
         <svg
           aria-hidden="true"
-          class="anticon-spin"
           data-icon="loading"
           fill="currentColor"
           focusable="false"
@@ -873,12 +857,11 @@ Array [
     >
       <span
         aria-label="loading"
-        class="anticon anticon-loading"
+        class="anticon anticon-loading anticon-spin"
         role="img"
       >
         <svg
           aria-hidden="true"
-          class="anticon-spin"
           data-icon="loading"
           fill="currentColor"
           focusable="false"
@@ -913,7 +896,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="poweroff"
         fill="currentColor"
         focusable="false"
@@ -941,7 +923,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="poweroff"
         fill="currentColor"
         focusable="false"
@@ -998,7 +979,6 @@ Array [
       >
         <svg
           aria-hidden="true"
-          class=""
           data-icon="ellipsis"
           fill="currentColor"
           focusable="false"
@@ -1127,7 +1107,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="download"
         fill="currentColor"
         focusable="false"
@@ -1152,7 +1131,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="download"
         fill="currentColor"
         focusable="false"
@@ -1177,7 +1155,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="download"
         fill="currentColor"
         focusable="false"
@@ -1202,7 +1179,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="download"
         fill="currentColor"
         focusable="false"
@@ -1230,7 +1206,6 @@ Array [
     >
       <svg
         aria-hidden="true"
-        class=""
         data-icon="download"
         fill="currentColor"
         focusable="false"

components/button/__tests__/__snapshots__/index.test.tsx.snap

@@ -50,7 +50,6 @@ exports[`Button renders Chinese characters correctly 2`] = `
   >
     <svg
       aria-hidden="true"
-      class=""
       data-icon="search"
       fill="currentColor"
       focusable="false"
@@ -81,7 +80,6 @@ exports[`Button renders Chinese characters correctly 3`] = `
   >
     <svg
       aria-hidden="true"
-      class=""
       data-icon="search"
       fill="currentColor"
       focusable="false"
@@ -112,7 +110,6 @@ exports[`Button renders Chinese characters correctly 4`] = `
   >
     <svg
       aria-hidden="true"
-      class=""
       data-icon="search"
       fill="currentColor"
       focusable="false"
@@ -141,12 +138,11 @@ exports[`Button renders Chinese characters correctly 5`] = `
   >
     <span
       aria-label="loading"
-      class="anticon anticon-loading"
+      class="anticon anticon-loading anticon-spin"
       role="img"
     >
       <svg
         aria-hidden="true"
-        class="anticon-spin"
         data-icon="loading"
         fill="currentColor"
         focusable="false"
@@ -176,12 +172,11 @@ exports[`Button renders Chinese characters correctly 6`] = `
   >
     <span
       aria-label="loading"
-      class="anticon anticon-loading"
+      class="anticon anticon-loading anticon-spin"
       role="img"
     >
       <svg
         aria-hidden="true"
-        class="anticon-spin"
         data-icon="loading"
         fill="currentColor"
         focusable="false"