chore: auto merge branchs (#34800)

chore: sync master to feature

.github/workflows/compressed-size.yml

@@ -4,6 +4,11 @@ on:
   pull_request:
     types: [opened, synchronize]
 
+# Cancel prev CI if new commit come
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   compressed-size:
     runs-on: ubuntu-latest

.github/workflows/pr-check-ci.yml

@@ -13,7 +13,7 @@ jobs:
         with:
           filter-label: 'BranchAutoMerge'
           filter-creator-authority: 'write'
-          filter-head-ref: 'master, feature, next, master-merge-feature, feature-merge-master, next-merge-master'
+          filter-head-ref: 'master, feature, next, master-merge-feature, feature-merge-master, next-merge-master, next-merge-feature'
           filter-support-fork: false
           skip-run-names: 'deploy preview, pr-check-ci, build preview failed, suggest-related-links'
           conflict-review-body: '😅 This branch has conflicts that must be resolved!'

.github/workflows/preview-build.yml

@@ -6,6 +6,11 @@ on:
   pull_request:
     types: [opened, synchronize, reopened]
 
+# Cancel prev CI if new commit come
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   # Prepare node modules. Reuse cache if available
   setup:

.github/workflows/test.yml

@@ -4,6 +4,11 @@ name: ✅ test
 
 on: [push, pull_request]
 
+# Cancel prev CI if new commit come
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   setup:
     runs-on: ubuntu-latest
@@ -18,7 +23,7 @@ jobs:
           key: lock-${{ github.sha }}
 
       - name: create package-lock.json
-        run: npm i --package-lock-only --ignore-scripts
+        run: npm i --package-lock-only --ignore-scripts --force
 
       - name: hack for single file
         run: |
@@ -35,44 +40,7 @@ jobs:
 
       - name: install
         if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
-        run: npm ci
+        run: npm ci --force
-
-  compile:
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v3
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v3
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: cache lib
-        uses: actions/cache@v3
-        with:
-          path: lib
-          key: lib-${{ github.sha }}
-
-      - name: cache es
-        uses: actions/cache@v3
-        with:
-          path: es
-          key: es-${{ github.sha }}
-
-      - name: compile
-        run: npm run compile
-
-      - name: check
-        run: node ./tests/dekko/lib.test.js
-    needs: setup
 
   lint:
     runs-on: ubuntu-latest
@@ -140,8 +108,9 @@ jobs:
         run: node ./scripts/check-demo.js
     needs: setup
 
-  react-17-dom:
+  ################################ Dist ################################
-    name: react@17.x / dom
+  dist:
+    name: dist
     runs-on: ubuntu-latest
     steps:
       - name: checkout
@@ -159,38 +128,21 @@ jobs:
           path: node_modules
           key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
 
-      - name: test
+      - name: cache dist
-        run: npm test -- -w 1 --coverage
-
-      - name: coverage
-        run: bash <(curl -s https://codecov.io/bash)
-    needs: setup
-
-  react-17-node:
-    name: react@17.x / node
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v3
-
-      - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
-          path: package-temp-dir
+          path: dist
-          key: lock-${{ github.sha }}
+          key: dist-${{ github.sha }}
 
-      - name: restore cache from node_modules
+      - name: dist
-        uses: actions/cache@v3
+        run: npm run dist
-        with:
+        env:
-          path: node_modules
+          NODE_OPTIONS: --max_old_space_size=4096
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: test
-        run: npm run test-node
     needs: setup
 
-  react-17-lib:
+  ############################### Style ################################
-    name: react@17.x / lib
+  style-compile:
+    name: es style compile
     runs-on: ubuntu-latest
     steps:
       - name: checkout
@@ -214,142 +166,22 @@ jobs:
           path: lib
           key: lib-${{ github.sha }}
 
-      - name: test
-        run: npm test
-        env:
-          LIB_DIR: lib
-    needs: compile
-
-  react-17-es:
-    name: react@17.x / es
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v3
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v3
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
       - name: restore cache from es
         uses: actions/cache@v3
         with:
           path: es
           key: es-${{ github.sha }}
 
-      - name: test
+      - name: lessc component
-        run: npm test
+        run: npx lessc --js ./es/button/style/index.less
-        env:
+
-          LIB_DIR: es
+      - name: lessc mixins
+        run: npx lessc --js ./es/style/mixins/index.less
     needs: compile
 
-  react-17-dist:
+  style-dist:
-    name: react@17.x / dist
+    name: dist style compile
     runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v3
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v3
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v3
-        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@v3
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v3
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v3
-        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@v3
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v3
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v3
-        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@v3
@@ -372,115 +204,17 @@ jobs:
           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@v3
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v3
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
       - name: restore cache from es
         uses: actions/cache@v3
         with:
           path: es
           key: es-${{ github.sha }}
 
-      - name: install react 16
+      - name: restore cache from dist
-        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@v3
-
-      - name: restore cache from package-lock.json
         uses: actions/cache@v3
         with:
-          path: package-temp-dir
+          path: dist
-          key: lock-${{ github.sha }}
+          key: dist-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v3
-        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
-
-  style:
-    name: style compile
-    runs-on: ubuntu-latest
-    steps:
-      - name: checkout
-        uses: actions/checkout@v3
-
-      - name: restore cache from package-lock.json
-        uses: actions/cache@v3
-        with:
-          path: package-temp-dir
-          key: lock-${{ github.sha }}
-
-      - name: restore cache from node_modules
-        uses: actions/cache@v3
-        with:
-          path: node_modules
-          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
-
-      - name: compile
-        run: npm run compile
-
-      - name: dist
-        run: npm run dist
-        env:
-          NODE_OPTIONS: --max_old_space_size=4096
 
       - name: lessc default
         run: npx lessc --js ./dist/antd.less
@@ -490,10 +224,182 @@ jobs:
 
       - name: lessc variable
         run: npx lessc --js ./dist/antd.variable.less
+    needs: [compile, dist]
 
-      - name: lessc component
+  ################################ Test ################################
-        run: npx lessc --js ./es/button/style/index.less
+  normal-test:
+    name: test
+    strategy:
+      matrix:
+        react: ['16', '17']
+        # react: ['17', '18']
+        module: ['dom', 'node', 'dist']
+    env:
+      REACT: ${{ matrix.react }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
 
-      - name: lessc mixins
+      - name: restore cache from package-lock.json
-        run: npx lessc --js ./es/style/mixins/index.less
+        uses: actions/cache@v3
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: install react 16
+        if: ${{ matrix.react == '16' }}
+        run: npm run install-react-16
+
+      - name: install react 17
+        if: ${{ matrix.react == '17' }}
+        run: npm run install-react-17
+
+      - name: install react 18
+        if: ${{ matrix.react == '18' }}
+        run: npm run install-react-18
+
+      - name: restore cache from dist
+        if: ${{ matrix.module == 'dist' }}
+        uses: actions/cache@v3
+        with:
+          path: dist
+          key: dist-${{ github.sha }}
+
+      - name: check
+        if: ${{ matrix.module == 'dist' }}
+        run: node ./tests/dekko/dist.test.js
+
+      # 17 only
+      - name: bundlesize
+        if: ${{ matrix.module == 'dist' && matrix.react == '17' }}
+        run: npm run bundlesize
+        env:
+          BUNDLESIZE_GITHUB_TOKEN: ${{ secrets.BUNDLESIZE_GITHUB_TOKEN }}
+
+      # dom test
+      - name: dom test
+        if: ${{ matrix.module == 'dom' }}
+        run: npm test -- -w 1 --coverage
+
+      # > 17 only
+      - name: coverage
+        if: ${{ matrix.module == 'dom' && matrix.react == '17' }}
+        run: bash <(curl -s https://codecov.io/bash)
+
+      # node test
+      - name: node test
+        if: ${{ matrix.module == 'node' }}
+        run: npm run test-node
+
+      # dist test
+      - name: dist test
+        if: ${{ matrix.module == 'dist' }}
+        run: npm test
+        env:
+          LIB_DIR: dist
+    needs: [setup, dist]
+
+  ########################### Compile & Test ###########################
+  compile:
+    runs-on: ubuntu-latest
+    steps:
+      - name: checkout
+        uses: actions/checkout@v3
+
+      - name: restore cache from package-lock.json
+        uses: actions/cache@v3
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: cache lib
+        uses: actions/cache@v3
+        with:
+          path: lib
+          key: lib-${{ github.sha }}
+
+      - name: cache es
+        uses: actions/cache@v3
+        with:
+          path: es
+          key: es-${{ github.sha }}
+
+      - name: compile
+        run: npm run compile
+
+      - name: check
+        run: node ./tests/dekko/lib.test.js
     needs: setup
+
+  compiled-module-test:
+    name: module test
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        react: ['16', '17']
+        # react: ['17', '18']
+        module: [lib, es]
+    env:
+      REACT: ${{ matrix.react }}
+    steps:
+      - name: checkout
+        # lib only run in master branch not in pull request
+        if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
+        uses: actions/checkout@v3
+
+      - name: restore cache from package-lock.json
+        # lib only run in master branch not in pull request
+        if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
+        uses: actions/cache@v3
+        with:
+          path: package-temp-dir
+          key: lock-${{ github.sha }}
+
+      - name: restore cache from node_modules
+        # lib only run in master branch not in pull request
+        if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
+        uses: actions/cache@v3
+        with:
+          path: node_modules
+          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
+
+      - name: restore cache from ${{ matrix.module }}
+        # lib only run in master branch not in pull request
+        if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
+        uses: actions/cache@v3
+        with:
+          path: ${{ matrix.module }}
+          key: ${{ matrix.module }}-${{ github.sha }}
+
+      - name: install react 16
+        if: ${{ matrix.react == '16' && (github.event_name != 'pull_request' || matrix.module != 'lib') }}
+        run: npm run install-react-16
+
+      - name: install react 17
+        if: ${{ matrix.react == '17' && (github.event_name != 'pull_request' || matrix.module != 'lib') }}
+        run: npm run install-react-17
+
+      - name: install react 18
+        if: ${{ matrix.react == '18' && (github.event_name != 'pull_request' || matrix.module != 'lib') }}
+        run: npm run install-react-18
+
+      - name: test
+        # lib only run in master branch not in pull request
+        if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
+        run: npm test
+        env:
+          LIB_DIR: ${{ matrix.module }}
+    needs: compile

.github/workflows/ui.yml

@@ -7,6 +7,11 @@ on:
     branches:
       - master
 
+# Cancel prev CI if new commit come
+concurrency:
+  group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
+  cancel-in-progress: true
+
 jobs:
   test:
     runs-on: ubuntu-latest

CHANGELOG.en-US.md

@@ -15,6 +15,16 @@ timeline: true
 
 ---
 
+## 4.19.4
+
+`2022-03-27`
+
+- 🐞 Fix when `fullscreen` of the Calendar is `false`, the element returned by `dateFullCellRender` cannot be interactive. [#34614](https://github.com/ant-design/ant-design/pull/34614) [@imoctopus](https://github.com/imoctopus)
+- 🐞 fix BackTop responsive in RTL. [#34626](https://github.com/ant-design/ant-design/pull/34626) [@hmz22](https://github.com/hmz22)
+- 🐞 Fix text position in Steps with `small` size and `dot` mode. [#34651](https://github.com/ant-design/ant-design/pull/34651)
+- 🐞 Fix Descriptions `contentStyle` not working when children is 0. [#34696](https://github.com/ant-design/ant-design/pull/34696) [@zhao-huo-long](https://github.com/zhao-huo-long)
+- 🐞 Fix notification prevent interaction on elements which under it. [#34716](https://github.com/ant-design/ant-design/pull/34716)
+
 ## 4.19.3
 
 `2022-03-21`

CHANGELOG.zh-CN.md

@@ -15,6 +15,16 @@ timeline: true
 
 ---
 
+## 4.19.4
+
+`2022-03-27`
+
+- 🐞 修复当 Calendar 的 `fullscreen` 为 `false` 时，`dateFullCellRender` 返回的元素不可交互的问题。[#34614](https://github.com/ant-design/ant-design/pull/34614) [@imoctopus](https://github.com/imoctopus)
+- 🐞 修复 BackTop 的部分 `rtl` 样式问题。[#34626](https://github.com/ant-design/ant-design/pull/34626) [@hmz22](https://github.com/hmz22)
+- 🐞 修复小尺寸 Steps `dot` 模式下文字位置偏移的问题。[#34651](https://github.com/ant-design/ant-design/pull/34651)
+- 🐞 修复 Descriptions 内容为 0 时 `contentStyle` 不生效的问题。[#34696](https://github.com/ant-design/ant-design/pull/34696) [@zhao-huo-long](https://github.com/zhao-huo-long)
+- 🐞 修复 notification 会遮挡后面元素交互的问题。[#34716](https://github.com/ant-design/ant-design/pull/34716)
+
 ## 4.19.3
 
 `2022-03-21`

components/breadcrumb/BreadcrumbItem.tsx

@@ -62,9 +62,7 @@ const BreadcrumbItem: BreadcrumbItemInterface = ({
     return (
       <li>
         {link}
-        {separator && (
+        {separator && <span className={`${prefixCls}-separator`}>{separator}</span>}
-          <span className={`${prefixCls}-separator`}>{separator}</span>
-        )}
       </li>
     );
   }

components/breadcrumb/__tests__/Breadcrumb.test.js

@@ -3,12 +3,12 @@ import { mount, render } from 'enzyme';
 import Breadcrumb from '../index';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
-import accessibilityTest from "../../../tests/shared/accessibilityTest";
+import accessibilityTest from '../../../tests/shared/accessibilityTest';
 
 describe('Breadcrumb', () => {
   mountTest(Breadcrumb);
   rtlTest(Breadcrumb);
-  accessibilityTest(Breadcrumb)
+  accessibilityTest(Breadcrumb);
 
   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 

components/carousel/__tests__/index.test.js

@@ -108,11 +108,6 @@ describe('Carousel', () => {
     });
 
     it('should keep initialSlide', () => {
-      // react unsafe lifecycle don't works in React 15
-      // https://github.com/akiran/react-slick/commit/97988e897750e1d8f7b10a86b655f50d75d38298
-      if (process.env.REACT === '15') {
-        return;
-      }
       const wrapper = mount(<Carousel initialSlide={1} />);
       wrapper.setProps({
         children: [<div key="1" />, <div key="2" />, <div key="3" />],

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -16645,7 +16645,7 @@ exports[`ConfigProvider components Pagination configProvider componentSize large
     >
       <div
         aria-label="Page Size"
-        class="config-select config-select-lg config-pagination-options-size-changer config-select-single config-select-show-arrow"
+        class="config-select config-pagination-options-size-changer config-select-single config-select-show-arrow"
       >
         <div
           class="config-select-selector"
@@ -18746,7 +18746,7 @@ exports[`ConfigProvider components Progress configProvider 1`] = `
     >
       <div
         class="config-progress-bg"
-        style="width:0%;height:8px;border-radius:"
+        style="width:0%;height:8px"
       />
     </div>
   </div>
@@ -18771,7 +18771,7 @@ exports[`ConfigProvider components Progress configProvider componentSize large 1
     >
       <div
         class="config-progress-bg"
-        style="width:0%;height:8px;border-radius:"
+        style="width:0%;height:8px"
       />
     </div>
   </div>
@@ -18796,7 +18796,7 @@ exports[`ConfigProvider components Progress configProvider componentSize middle
     >
       <div
         class="config-progress-bg"
-        style="width:0%;height:8px;border-radius:"
+        style="width:0%;height:8px"
       />
     </div>
   </div>
@@ -18821,7 +18821,7 @@ exports[`ConfigProvider components Progress configProvider virtual and dropdownM
     >
       <div
         class="ant-progress-bg"
-        style="width:0%;height:8px;border-radius:"
+        style="width:0%;height:8px"
       />
     </div>
   </div>
@@ -18846,7 +18846,7 @@ exports[`ConfigProvider components Progress normal 1`] = `
     >
       <div
         class="ant-progress-bg"
-        style="width:0%;height:8px;border-radius:"
+        style="width:0%;height:8px"
       />
     </div>
   </div>
@@ -18871,7 +18871,7 @@ exports[`ConfigProvider components Progress prefixCls 1`] = `
     >
       <div
         class="prefix-Progress-bg"
-        style="width:0%;height:8px;border-radius:"
+        style="width:0%;height:8px"
       />
     </div>
   </div>

components/date-picker/style/index.less

@@ -23,7 +23,7 @@
   align-items: center;
   background: @picker-bg;
   border: @border-width-base @border-style-base @select-border-color;
-  border-radius: @border-radius-base;
+  border-radius: @control-border-radius;
   transition: border @animation-duration-slow, box-shadow @animation-duration-slow;
 
   &:hover,

components/descriptions/Cell.tsx

@@ -60,7 +60,7 @@ const Cell: React.FC<CellProps> = ({
       colSpan={span}
     >
       <div className={`${itemPrefixCls}-item-container`}>
-        {label && (
+        {(label || label === 0) && (
           <span
             className={classNames(`${itemPrefixCls}-item-label`, {
               [`${itemPrefixCls}-item-no-colon`]: !colon,
@@ -70,7 +70,7 @@ const Cell: React.FC<CellProps> = ({
             {label}
           </span>
         )}
-        {content && (
+        {(content || content === 0) && (
           <span className={classNames(`${itemPrefixCls}-item-content`)} style={contentStyle}>
             {content}
           </span>

components/descriptions/__tests__/__snapshots__/index.test.js.snap

@@ -209,6 +209,46 @@ exports[`Descriptions column is number 1`] = `
 </div>
 `;
 
+exports[`Descriptions number 0 should render correct 1`] = `
+<div
+  class="ant-descriptions"
+>
+  <div
+    class="ant-descriptions-view"
+  >
+    <table>
+      <tbody>
+        <tr
+          class="ant-descriptions-row"
+        >
+          <td
+            class="ant-descriptions-item"
+            colspan="1"
+          >
+            <div
+              class="ant-descriptions-item-container"
+            >
+              <span
+                class="ant-descriptions-item-label"
+                style="color: red;"
+              >
+                0
+              </span>
+              <span
+                class="ant-descriptions-item-content"
+                style="color: red;"
+              >
+                0
+              </span>
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</div>
+`;
+
 exports[`Descriptions should work with React Fragment 1`] = `
 <div
   class="ant-descriptions"

components/descriptions/__tests__/index.test.js

@@ -238,4 +238,15 @@ describe('Descriptions', () => {
     wrapper.setProps({ extra: undefined });
     expect(wrapper.find('.ant-descriptions-extra').exists()).toBe(false);
   });
+
+  it('number 0 should render correct', () => {
+    const wrapper = mount(
+      <Descriptions>
+        <Descriptions.Item label={0} labelStyle={{ color: 'red' }} contentStyle={{ color: 'red' }}>
+          {0}
+        </Descriptions.Item>
+      </Descriptions>,
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

components/grid/index.en-US.md

@@ -11,52 +11,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
 ## Design concept
 
 <div class="grid-demo">
-<div class="ant-row demo-row">
+  <img src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
-  <div class="ant-col-24 demo-col demo-col-1">
-    100%
-  </div>
-</div>
-<div class="ant-row demo-row">
-  <div class="ant-col-6 demo-col demo-col-2">
-    25%
-  </div>
-  <div class="ant-col-6 demo-col demo-col-3">
-    25%
-  </div>
-  <div class="ant-col-6 demo-col demo-col-2">
-    25%
-  </div>
-  <div class="ant-col-6 demo-col demo-col-3">
-    25%
-  </div>
-</div>
-<div class="ant-row demo-row">
-  <div class="ant-col-8 demo-col demo-col-4">
-    33.33%
-  </div>
-  <div class="ant-col-8 demo-col demo-col-5">
-    33.33%
-  </div>
-  <div class="ant-col-8 demo-col demo-col-4">
-    33.33%
-  </div>
-</div>
-<div class="ant-row demo-row">
-  <div class="ant-col-12 demo-col demo-col-1">
-    50%
-  </div>
-  <div class="ant-col-12 demo-col demo-col-3">
-    50%
-  </div>
-</div>
-<div class="ant-row demo-row">
-  <div class="ant-col-16 demo-col demo-col-4">
-    66.66%
-  </div>
-  <div class="ant-col-8 demo-col demo-col-5">
-    33.33%
-  </div>
-</div>
 </div>
 
 In most business situations, Ant Design needs to solve a lot of information storage problems within the design area, so based on 12 Grids System, we divided the design area into 24 sections.

components/grid/index.zh-CN.md

@@ -12,52 +12,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5rWLU27so/Grid.svg
 ## 设计理念
 
 <div class="grid-demo">
-<div class="ant-row demo-row">
+  <img src="https://gw.alipayobjects.com/zos/bmw-prod/9189c9ef-c601-40dc-9960-c11dbb681888.svg" alt="grid design" />
-  <div class="ant-col-24 demo-col demo-col-1">
-    100%
-  </div>
-</div>
-<div class="ant-row demo-row">
-  <div class="ant-col-6 demo-col demo-col-2">
-    25%
-  </div>
-  <div class="ant-col-6 demo-col demo-col-3">
-    25%
-  </div>
-  <div class="ant-col-6 demo-col demo-col-2">
-    25%
-  </div>
-  <div class="ant-col-6 demo-col demo-col-3">
-    25%
-  </div>
-</div>
-<div class="ant-row demo-row">
-  <div class="ant-col-8 demo-col demo-col-4">
-    33.33%
-  </div>
-  <div class="ant-col-8 demo-col demo-col-5">
-    33.33%
-  </div>
-  <div class="ant-col-8 demo-col demo-col-4">
-    33.33%
-  </div>
-</div>
-<div class="ant-row demo-row">
-  <div class="ant-col-12 demo-col demo-col-1">
-    50%
-  </div>
-  <div class="ant-col-12 demo-col demo-col-3">
-    50%
-  </div>
-</div>
-<div class="ant-row demo-row">
-  <div class="ant-col-16 demo-col demo-col-4">
-    66.66%
-  </div>
-  <div class="ant-col-8 demo-col demo-col-5">
-    33.33%
-  </div>
-</div>
 </div>
 
 在多数业务情况下，Ant Design 需要在设计区域内解决大量信息收纳的问题，因此在 12 栅格系统的基础上，我们将整个设计建议区域按照 24 等分的原则进行划分。

components/input/style/mixin.less

@@ -66,7 +66,7 @@
   background-color: @input-bg;
   background-image: none;
   border: @border-width-base @border-style-base @input-border-color;
-  border-radius: @border-radius-base;
+  border-radius: @control-border-radius;
   transition: all 0.3s;
   .placeholder(); // Reset placeholder
 
@@ -193,7 +193,7 @@
     text-align: center;
     background-color: @input-addon-bg;
     border: @border-width-base @border-style-base @input-border-color;
-    border-radius: @border-radius-base;
+    border-radius: @control-border-radius;
     transition: all 0.3s;
 
     // Reset Select's style in addon
@@ -297,8 +297,8 @@
       border-top-right-radius: 0;
       border-bottom-right-radius: 0;
       .@{ant-prefix}-input-search & {
-        border-top-left-radius: @border-radius-base;
+        border-top-left-radius: @control-border-radius;
-        border-bottom-left-radius: @border-radius-base;
+        border-bottom-left-radius: @control-border-radius;
       }
     }
 
@@ -384,8 +384,8 @@
     & > .@{ant-prefix}-select:first-child > .@{ant-prefix}-select-selector,
     & > .@{ant-prefix}-select-auto-complete:first-child .@{ant-prefix}-input,
     & > .@{ant-prefix}-cascader-picker:first-child .@{ant-prefix}-input {
-      border-top-left-radius: @border-radius-base;
+      border-top-left-radius: @control-border-radius;
-      border-bottom-left-radius: @border-radius-base;
+      border-bottom-left-radius: @control-border-radius;
     }
 
     & > *:last-child,
@@ -393,8 +393,8 @@
     & > .@{ant-prefix}-cascader-picker:last-child .@{ant-prefix}-input,
     & > .@{ant-prefix}-cascader-picker-focused:last-child .@{ant-prefix}-input {
       border-right-width: @border-width-base;
-      border-top-right-radius: @border-radius-base;
+      border-top-right-radius: @control-border-radius;
-      border-bottom-right-radius: @border-radius-base;
+      border-bottom-right-radius: @control-border-radius;
     }
 
     // https://github.com/ant-design/ant-design/issues/12493
@@ -416,7 +416,7 @@
         }
 
         & > .@{ant-prefix}-input {
-          border-radius: @border-radius-base 0 0 @border-radius-base;
+          border-radius: @control-border-radius 0 0 @control-border-radius;
         }
       }
     }

components/list/__tests__/Item.test.js

@@ -151,7 +151,7 @@ describe('List Item Layout', () => {
         renderItem={item => <List.Item>{item.title}</List.Item>}
       />,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('rowKey could be function', () => {
@@ -176,6 +176,6 @@ describe('List Item Layout', () => {
         renderItem={item => <List.Item>{item.title}</List.Item>}
       />,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 });

components/list/__tests__/__snapshots__/Item.test.js.snap

@@ -58,139 +58,71 @@ exports[`List Item Layout horizontal itemLayout List should accept extra node 1`
 `;
 
 exports[`List Item Layout rowKey could be function 1`] = `
-<List
+<div
-  dataSource={
+  class="ant-list ant-list-split"
-    Array [
-      Object {
-        "id": 1,
-        "title": "ant design",
-      },
-      Object {
-        "id": 2,
-        "title": "ant design",
-      },
-      Object {
-        "id": 3,
-        "title": "ant design",
-      },
-    ]
-  }
-  renderItem={[Function]}
-  rowKey={[Function]}
 >
   <div
-    className="ant-list ant-list-split"
+    class="ant-spin-nested-loading"
   >
-    <Spin
+    <div
-      size="default"
+      class="ant-spin-container"
-      spinning={false}
-      wrapperClassName=""
     >
-      <div
+      <ul
-        className="ant-spin-nested-loading"
+        class="ant-list-items"
       >
-        <div
+        <li
-          className="ant-spin-container"
+          class="ant-list-item"
-          key="container"
         >
-          <ul
+          ant design
-            className="ant-list-items"
+        </li>
-          >
+        <li
-            <Item>
+          class="ant-list-item"
-              <li
+        >
-                className="ant-list-item"
+          ant design
-              >
+        </li>
-                ant design
+        <li
-              </li>
+          class="ant-list-item"
-            </Item>
+        >
-            <Item>
+          ant design
-              <li
+        </li>
-                className="ant-list-item"
+      </ul>
-              >
+    </div>
-                ant design
-              </li>
-            </Item>
-            <Item>
-              <li
-                className="ant-list-item"
-              >
-                ant design
-              </li>
-            </Item>
-          </ul>
-        </div>
-      </div>
-    </Spin>
   </div>
-</List>
+</div>
 `;
 
 exports[`List Item Layout rowKey could be string 1`] = `
-<List
+<div
-  dataSource={
+  class="ant-list ant-list-split"
-    Array [
-      Object {
-        "id": 1,
-        "title": "ant design",
-      },
-      Object {
-        "id": 2,
-        "title": "ant design",
-      },
-      Object {
-        "id": 3,
-        "title": "ant design",
-      },
-    ]
-  }
-  renderItem={[Function]}
-  rowKey="id"
 >
   <div
-    className="ant-list ant-list-split"
+    class="ant-spin-nested-loading"
   >
-    <Spin
+    <div
-      size="default"
+      class="ant-spin-container"
-      spinning={false}
-      wrapperClassName=""
     >
-      <div
+      <ul
-        className="ant-spin-nested-loading"
+        class="ant-list-items"
       >
-        <div
+        <li
-          className="ant-spin-container"
+          class="ant-list-item"
-          key="container"
         >
-          <ul
+          ant design
-            className="ant-list-items"
+        </li>
-          >
+        <li
-            <Item>
+          class="ant-list-item"
-              <li
+        >
-                className="ant-list-item"
+          ant design
-              >
+        </li>
-                ant design
+        <li
-              </li>
+          class="ant-list-item"
-            </Item>
+        >
-            <Item>
+          ant design
-              <li
+        </li>
-                className="ant-list-item"
+      </ul>
-              >
+    </div>
-                ant design
-              </li>
-            </Item>
-            <Item>
-              <li
-                className="ant-list-item"
-              >
-                ant design
-              </li>
-            </Item>
-          </ul>
-        </div>
-      </div>
-    </Spin>
   </div>
-</List>
+</div>
 `;
 
 exports[`List Item Layout should render in RTL direction 1`] = `

components/notification/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -188,7 +188,7 @@ Array [
 `;
 
 exports[`renders ./components/notification/demo/placement.md extend context correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
@@ -255,11 +255,11 @@ exports[`renders ./components/notification/demo/placement.md extend context corr
         </span>
       </button>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
-  />
+  />,
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
@@ -326,11 +326,11 @@ exports[`renders ./components/notification/demo/placement.md extend context corr
         </span>
       </button>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
-  />
+  />,
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
@@ -397,8 +397,8 @@ exports[`renders ./components/notification/demo/placement.md extend context corr
         </span>
       </button>
     </div>
-  </div>
+  </div>,
-</div>
+]
 `;
 
 exports[`renders ./components/notification/demo/update.md extend context correctly 1`] = `

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

@@ -188,7 +188,7 @@ Array [
 `;
 
 exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
@@ -255,11 +255,11 @@ exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
         </span>
       </button>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
-  />
+  />,
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
@@ -326,11 +326,11 @@ exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
         </span>
       </button>
     </div>
-  </div>
+  </div>,
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
-  />
+  />,
   <div
     class="ant-space ant-space-horizontal ant-space-align-center"
   >
@@ -397,8 +397,8 @@ exports[`renders ./components/notification/demo/placement.md correctly 1`] = `
         </span>
       </button>
     </div>
-  </div>
+  </div>,
-</div>
+]
 `;
 
 exports[`renders ./components/notification/demo/update.md correctly 1`] = `

components/notification/__tests__/placement.test.js

@@ -41,8 +41,9 @@ describe('Notification.placement', () => {
       });
       style = getStyle($$('.ant-notification-top')[0]);
       expect(style.top).toBe('50px');
-      expect(style.left).toBe('0px');
+      expect(style.left).toBe('50%');
-      expect(style.right).toBe('0px');
+      expect(style.transform).toBe('translateX(-50%)');
+      expect(style.right).toBe('');
       expect(style.bottom).toBe('');
 
       open({
@@ -86,8 +87,9 @@ describe('Notification.placement', () => {
       });
       style = getStyle($$('.ant-notification-bottom')[0]);
       expect(style.top).toBe('');
-      expect(style.left).toBe('0px');
+      expect(style.left).toBe('50%');
-      expect(style.right).toBe('0px');
+      expect(style.transform).toBe('translateX(-50%)');
+      expect(style.right).toBe('');
       expect(style.bottom).toBe('100px');
 
       open({

components/notification/demo/placement.md

@@ -7,11 +7,11 @@ title:
 
 ## zh-CN
 
-通知从右上角、右下角、左下角、左上角弹出。
+使用 `placement` 可以配置通知从右上角、右下角、左下角、左上角弹出。
 
 ## en-US
 
-A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport.
+A notification box can appear from the `topRight`, `bottomRight`, `bottomLeft` or `topLeft` of the viewport via `placement`.
 
 ```jsx
 import { Button, notification, Divider, Space } from 'antd';
@@ -34,40 +34,54 @@ const openNotification = placement => {
 };
 
 ReactDOM.render(
-  <div>
+  <>
     <Space>
-      <Button type="primary" onClick={() => openNotification('top')}>
+      <Button type="primary" onClick={() => openNotification('top')} icon={<BorderTopOutlined />}>
-        <BorderTopOutlined />
         top
       </Button>
-      <Button type="primary" onClick={() => openNotification('bottom')}>
+      <Button
-        <BorderBottomOutlined />
+        type="primary"
+        onClick={() => openNotification('bottom')}
+        icon={<BorderBottomOutlined />}
+      >
         bottom
       </Button>
     </Space>
     <Divider />
     <Space>
-      <Button type="primary" onClick={() => openNotification('topLeft')}>
+      <Button
-        <RadiusUpleftOutlined />
+        type="primary"
+        onClick={() => openNotification('topLeft')}
+        icon={<RadiusUpleftOutlined />}
+      >
         topLeft
       </Button>
-      <Button type="primary" onClick={() => openNotification('topRight')}>
+      <Button
-        <RadiusUprightOutlined />
+        type="primary"
+        onClick={() => openNotification('topRight')}
+        icon={<RadiusUprightOutlined />}
+      >
         topRight
       </Button>
     </Space>
     <Divider />
     <Space>
-      <Button type="primary" onClick={() => openNotification('bottomLeft')}>
+      <Button
-        <RadiusBottomleftOutlined />
+        type="primary"
+        onClick={() => openNotification('bottomLeft')}
+        icon={<RadiusBottomleftOutlined />}
+      >
         bottomLeft
       </Button>
-      <Button type="primary" onClick={() => openNotification('bottomRight')}>
+      <Button
-        <RadiusBottomrightOutlined />
+        type="primary"
+        onClick={() => openNotification('bottomRight')}
+        icon={<RadiusBottomrightOutlined />}
+      >
         bottomRight
       </Button>
     </Space>
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/notification/index.tsx

@@ -87,8 +87,9 @@ function getPlacementStyle(
   switch (placement) {
     case 'top':
       style = {
-        left: 0,
+        left: '50%',
-        right: 0,
+        transform: 'translateX(-50%)',
+        right: 'auto',
         top,
         bottom: 'auto',
       };
@@ -109,8 +110,9 @@ function getPlacementStyle(
       break;
     case 'bottom':
       style = {
-        left: 0,
+        left: '50%',
-        right: 0,
+        transform: 'translateX(-50%)',
+        right: 'auto',
         top: 'auto',
         bottom,
       };

components/notification/style/index.less

@@ -16,25 +16,6 @@
   z-index: @zindex-notification;
   margin-right: @notification-margin-edge;
 
-  &-top,
-  &-bottom,
-  &-topLeft,
-  &-bottomLeft {
-    margin-right: 0;
-    margin-left: @notification-margin-edge;
-
-    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
-    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
-      animation-name: NotificationLeftFadeIn;
-    }
-  }
-
-  &-top,
-  &-bottom {
-    margin-right: auto;
-    margin-left: auto;
-  }
-
   &-close-icon {
     font-size: @font-size-base;
     cursor: pointer;
@@ -206,18 +187,6 @@
   }
 }
 
-@keyframes NotificationLeftFadeIn {
-  0% {
-    right: @notification-width;
-    opacity: 0;
-  }
-
-  100% {
-    right: 0;
-    opacity: 1;
-  }
-}
-
 @keyframes NotificationFadeOut {
   0% {
     max-height: 150px;
@@ -235,3 +204,4 @@
 }
 
 @import './rtl';
+@import './placement';

components/notification/style/placement.less

@@ -0,0 +1,68 @@
+.@{notification-prefix-cls} {
+  &-top,
+  &-bottom {
+    margin-right: 0;
+    margin-left: 0;
+  }
+
+  &-top {
+    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
+    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
+      animation-name: NotificationTopFadeIn;
+    }
+  }
+
+  &-bottom {
+    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
+    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
+      animation-name: NotificationBottomFadeIn;
+    }
+  }
+
+  &-topLeft,
+  &-bottomLeft {
+    margin-right: 0;
+    margin-left: @notification-margin-edge;
+
+    .@{notification-prefix-cls}-fade-enter.@{notification-prefix-cls}-fade-enter-active,
+    .@{notification-prefix-cls}-fade-appear.@{notification-prefix-cls}-fade-appear-active {
+      animation-name: NotificationLeftFadeIn;
+    }
+  }
+}
+
+@keyframes NotificationTopFadeIn {
+  0% {
+    margin-top: -100%;
+    opacity: 0;
+  }
+
+  100% {
+    margin-top: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes NotificationBottomFadeIn {
+  0% {
+    margin-bottom: -100%;
+    opacity: 0;
+  }
+
+  100% {
+    margin-bottom: 0;
+    opacity: 1;
+  }
+}
+
+@keyframes NotificationLeftFadeIn {
+  0% {
+    right: @notification-width;
+    opacity: 0;
+  }
+
+  100% {
+    right: 0;
+    opacity: 1;
+  }
+}

components/pagination/MiniSelect.tsx

@@ -1,12 +0,0 @@
-import * as React from 'react';
-import Select from '../select';
-
-interface MiniSelectInterface extends React.FC<any> {
-  Option: typeof Select.Option;
-}
-
-const MiniSelect: MiniSelectInterface = props => <Select size="small" {...props} />;
-
-MiniSelect.Option = Select.Option;
-
-export default MiniSelect;

components/pagination/Pagination.tsx

@@ -9,9 +9,7 @@ import LeftOutlined from '@ant-design/icons/LeftOutlined';
 import RightOutlined from '@ant-design/icons/RightOutlined';
 import DoubleLeftOutlined from '@ant-design/icons/DoubleLeftOutlined';
 import DoubleRightOutlined from '@ant-design/icons/DoubleRightOutlined';
-
+import { MiniSelect, MiddleSelect } from './Select';
-import MiniSelect from './MiniSelect';
-import Select from '../select';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import { ConfigContext } from '../config-provider';
 import useBreakpoint from '../grid/hooks/useBreakpoint';
@@ -109,7 +107,7 @@ const Pagination: React.FC<PaginationProps> = ({
         prefixCls={prefixCls}
         selectPrefixCls={selectPrefixCls}
         className={extendedClassName}
-        selectComponentClass={selectComponentClass || (isSmall ? MiniSelect : Select)}
+        selectComponentClass={selectComponentClass || (isSmall ? MiniSelect : MiddleSelect)}
         locale={locale}
       />
     );

components/pagination/Select.tsx

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Select from '../select';
+import type { SelectProps } from '../select';
+
+interface MiniOrMiddleSelectInterface extends React.FC<SelectProps> {
+  Option: typeof Select.Option;
+}
+
+const MiniSelect: MiniOrMiddleSelectInterface = props => <Select {...props} size="small" />;
+const MiddleSelect: MiniOrMiddleSelectInterface = props => <Select {...props} size="middle" />;
+
+MiniSelect.Option = Select.Option;
+MiddleSelect.Option = Select.Option;
+
+export { MiniSelect, MiddleSelect };
+

components/pagination/__tests__/__snapshots__/index.test.js.snap

@@ -1,89 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Pagination rtl render component should be rendered correctly in RTL direction 1`] = `
+exports[`Pagination ConfigProvider should be rendered correctly in RTL 1`] = `
-<ul
-  class="ant-pagination ant-pagination-rtl"
-  unselectable="unselectable"
->
-  <li
-    aria-disabled="true"
-    class="ant-pagination-prev ant-pagination-disabled"
-    title="Previous Page"
-  >
-    <button
-      class="ant-pagination-item-link"
-      disabled=""
-      tabindex="-1"
-      type="button"
-    >
-      <span
-        aria-label="right"
-        class="anticon anticon-right"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="right"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
-          />
-        </svg>
-      </span>
-    </button>
-  </li>
-  <li
-    class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-disabled"
-    tabindex="0"
-    title="1"
-  >
-    <a
-      rel="nofollow"
-    >
-      1
-    </a>
-  </li>
-  <li
-    aria-disabled="true"
-    class="ant-pagination-next ant-pagination-disabled"
-    title="Next Page"
-  >
-    <button
-      class="ant-pagination-item-link"
-      disabled=""
-      tabindex="-1"
-      type="button"
-    >
-      <span
-        aria-label="left"
-        class="anticon anticon-left"
-        role="img"
-      >
-        <svg
-          aria-hidden="true"
-          data-icon="left"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
-        >
-          <path
-            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
-          />
-        </svg>
-      </span>
-    </button>
-  </li>
-</ul>
-`;
-
-exports[`Pagination should be rendered correctly in RTL 1`] = `
 <ul
   class="ant-pagination ant-pagination-rtl"
   unselectable="unselectable"
@@ -209,3 +126,280 @@ exports[`Pagination should be rendered correctly in RTL 1`] = `
   </li>
 </ul>
 `;
+
+exports[`Pagination ConfigProvider should be rendered correctly when componentSize is large 1`] = `
+<ul
+  class="ant-pagination"
+  unselectable="unselectable"
+>
+  <li
+    aria-disabled="true"
+    class="ant-pagination-prev ant-pagination-disabled"
+    title="Previous Page"
+  >
+    <button
+      class="ant-pagination-item-link"
+      disabled=""
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        aria-label="left"
+        class="anticon anticon-left"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="left"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-active"
+    tabindex="0"
+    title="1"
+  >
+    <a
+      rel="nofollow"
+    >
+      1
+    </a>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-2"
+    tabindex="0"
+    title="2"
+  >
+    <a
+      rel="nofollow"
+    >
+      2
+    </a>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-3"
+    tabindex="0"
+    title="3"
+  >
+    <a
+      rel="nofollow"
+    >
+      3
+    </a>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-4"
+    tabindex="0"
+    title="4"
+  >
+    <a
+      rel="nofollow"
+    >
+      4
+    </a>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-5"
+    tabindex="0"
+    title="5"
+  >
+    <a
+      rel="nofollow"
+    >
+      5
+    </a>
+  </li>
+  <li
+    aria-disabled="false"
+    class="ant-pagination-next"
+    tabindex="0"
+    title="Next Page"
+  >
+    <button
+      class="ant-pagination-item-link"
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        aria-label="right"
+        class="anticon anticon-right"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="right"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
+  <li
+    class="ant-pagination-options"
+  >
+    <div
+      aria-label="Page Size"
+      class="ant-select ant-pagination-options-size-changer ant-select-single ant-select-show-arrow"
+    >
+      <div
+        class="ant-select-selector"
+      >
+        <span
+          class="ant-select-selection-search"
+        >
+          <input
+            aria-activedescendant="rc_select_TEST_OR_SSR_list_0"
+            aria-autocomplete="list"
+            aria-controls="rc_select_TEST_OR_SSR_list"
+            aria-expanded="false"
+            aria-haspopup="listbox"
+            aria-label="Page Size"
+            aria-owns="rc_select_TEST_OR_SSR_list"
+            autocomplete="off"
+            class="ant-select-selection-search-input"
+            id="rc_select_TEST_OR_SSR"
+            readonly=""
+            role="combobox"
+            style="opacity: 0;"
+            type="search"
+            unselectable="on"
+            value=""
+          />
+        </span>
+        <span
+          class="ant-select-selection-item"
+          title="10 / page"
+        >
+          10 / page
+        </span>
+      </div>
+      <span
+        aria-hidden="true"
+        class="ant-select-arrow"
+        style="user-select: none;"
+        unselectable="on"
+      >
+        <span
+          aria-label="down"
+          class="anticon anticon-down ant-select-suffix"
+          role="img"
+        >
+          <svg
+            aria-hidden="true"
+            data-icon="down"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M884 256h-75c-5.1 0-9.9 2.5-12.9 6.6L512 654.2 227.9 262.6c-3-4.1-7.8-6.6-12.9-6.6h-75c-6.5 0-10.3 7.4-6.5 12.7l352.6 486.1c12.8 17.6 39 17.6 51.7 0l352.6-486.1c3.9-5.3.1-12.7-6.4-12.7z"
+            />
+          </svg>
+        </span>
+      </span>
+    </div>
+  </li>
+</ul>
+`;
+
+exports[`Pagination rtl render component should be rendered correctly in RTL direction 1`] = `
+<ul
+  class="ant-pagination ant-pagination-rtl"
+  unselectable="unselectable"
+>
+  <li
+    aria-disabled="true"
+    class="ant-pagination-prev ant-pagination-disabled"
+    title="Previous Page"
+  >
+    <button
+      class="ant-pagination-item-link"
+      disabled=""
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        aria-label="right"
+        class="anticon anticon-right"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="right"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M765.7 486.8L314.9 134.7A7.97 7.97 0 00302 141v77.3c0 4.9 2.3 9.6 6.1 12.6l360 281.1-360 281.1c-3.9 3-6.1 7.7-6.1 12.6V883c0 6.7 7.7 10.4 12.9 6.3l450.8-352.1a31.96 31.96 0 000-50.4z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
+  <li
+    class="ant-pagination-item ant-pagination-item-1 ant-pagination-item-disabled"
+    tabindex="0"
+    title="1"
+  >
+    <a
+      rel="nofollow"
+    >
+      1
+    </a>
+  </li>
+  <li
+    aria-disabled="true"
+    class="ant-pagination-next ant-pagination-disabled"
+    title="Next Page"
+  >
+    <button
+      class="ant-pagination-item-link"
+      disabled=""
+      tabindex="-1"
+      type="button"
+    >
+      <span
+        aria-label="left"
+        class="anticon anticon-left"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          data-icon="left"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M724 218.3V141c0-6.7-7.7-10.4-12.9-6.3L260.3 486.8a31.86 31.86 0 000 50.3l450.8 352.1c5.3 4.1 12.9.4 12.9-6.3v-77.3c0-4.9-2.3-9.6-6.1-12.6l-360-281 360-281.1c3.8-3 6.1-7.7 6.1-12.6z"
+          />
+        </svg>
+      </span>
+    </button>
+  </li>
+</ul>
+`;

components/pagination/__tests__/index.test.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, mount } from 'enzyme';
+import { mount } from 'enzyme';
 import Pagination from '..';
 import Select from '../../select';
 import ConfigProvider from '../../config-provider';
@@ -10,15 +10,6 @@ describe('Pagination', () => {
   mountTest(Pagination);
   rtlTest(Pagination);
 
-  it('should be rendered correctly in RTL', () => {
-    const wrapper = mount(
-      <ConfigProvider direction="rtl">
-        <Pagination defaultCurrent={1} total={50} />
-      </ConfigProvider>,
-    );
-    expect(render(wrapper)).toMatchSnapshot();
-  });
-
   it('should pass disabled to prev and next buttons', () => {
     const itemRender = (current, type, originalElement) => {
       if (type === 'prev') {
@@ -69,4 +60,25 @@ describe('Pagination', () => {
     );
     expect(wrapper.find('.custom-select').length).toBeTruthy();
   });
+
+  describe('ConfigProvider', () => {
+    it('should be rendered correctly in RTL', () => {
+      const wrapper = mount(
+        <ConfigProvider direction="rtl">
+          <Pagination defaultCurrent={1} total={50} />
+        </ConfigProvider>,
+      );
+      expect(wrapper.render()).toMatchSnapshot();
+    });
+
+    it('should be rendered correctly when componentSize is large', () => {
+      const wrapper = mount(
+        <ConfigProvider componentSize="large">
+          <Pagination defaultCurrent={1} total={50} showSizeChanger />
+        </ConfigProvider>,
+      );
+      expect(wrapper.render()).toMatchSnapshot();
+      expect(wrapper.find('.ant-select-lg').length).toBe(0);
+    });
+  });
 });

components/progress/Line.tsx

@@ -92,7 +92,7 @@ const Line: React.FC<LineProps> = props => {
   const percentStyle = {
     width: `${validProgress(percent)}%`,
     height: strokeWidth || (size === 'small' ? 6 : 8),
-    borderRadius: strokeLinecap === 'square' ? 0 : '',
+    borderRadius: strokeLinecap === 'square' ? 0 : undefined,
     ...backgroundProps,
   } as React.CSSProperties;
 
@@ -101,7 +101,7 @@ const Line: React.FC<LineProps> = props => {
   const successPercentStyle = {
     width: `${validProgress(successPercent)}%`,
     height: strokeWidth || (size === 'small' ? 6 : 8),
-    borderRadius: strokeLinecap === 'square' ? 0 : '',
+    borderRadius: strokeLinecap === 'square' ? 0 : undefined,
     backgroundColor: success?.strokeColor,
   } as React.CSSProperties;
 

components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap

@@ -643,7 +643,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:0%;height:8px;border-radius:"
+          style="width:0%;height:8px"
         />
       </div>
     </div>
@@ -839,7 +839,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:99.9%;height:8px;border-radius:;background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
+          style="width:99.9%;height:8px;background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
         />
       </div>
     </div>
@@ -861,7 +861,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:99.9%;height:8px;border-radius:;background-image:linear-gradient(to right, #108ee9, #87d068)"
+          style="width:99.9%;height:8px;background-image:linear-gradient(to right, #108ee9, #87d068)"
         />
       </div>
     </div>
@@ -1049,7 +1049,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:30%;height:8px;border-radius:"
+          style="width:30%;height:8px"
         />
       </div>
     </div>
@@ -1071,7 +1071,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:50%;height:8px;border-radius:"
+          style="width:50%;height:8px"
         />
       </div>
     </div>
@@ -1093,7 +1093,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:70%;height:8px;border-radius:"
+          style="width:70%;height:8px"
         />
       </div>
     </div>
@@ -1132,7 +1132,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:8px;border-radius:"
+          style="width:100%;height:8px"
         />
       </div>
     </div>
@@ -1171,7 +1171,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:50%;height:8px;border-radius:"
+          style="width:50%;height:8px"
         />
       </div>
     </div>
@@ -1194,7 +1194,7 @@ exports[`renders ./components/progress/demo/line-mini.md extend context correctl
       >
         <div
           class="ant-progress-bg"
-          style="width:30%;height:6px;border-radius:"
+          style="width:30%;height:6px"
         />
       </div>
     </div>
@@ -1216,7 +1216,7 @@ exports[`renders ./components/progress/demo/line-mini.md extend context correctl
       >
         <div
           class="ant-progress-bg"
-          style="width:50%;height:6px;border-radius:"
+          style="width:50%;height:6px"
         />
       </div>
     </div>
@@ -1238,7 +1238,7 @@ exports[`renders ./components/progress/demo/line-mini.md extend context correctl
       >
         <div
           class="ant-progress-bg"
-          style="width:70%;height:6px;border-radius:"
+          style="width:70%;height:6px"
         />
       </div>
     </div>
@@ -1277,7 +1277,7 @@ exports[`renders ./components/progress/demo/line-mini.md extend context correctl
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:6px;border-radius:"
+          style="width:100%;height:6px"
         />
       </div>
     </div>
@@ -1456,11 +1456,11 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:60%;height:8px;border-radius:"
+          style="width:60%;height:8px"
         />
         <div
           class="ant-progress-success-bg"
-          style="width:30%;height:8px;border-radius:"
+          style="width:30%;height:8px"
         />
       </div>
     </div>

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

@@ -643,7 +643,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:0%;height:8px;border-radius:"
+          style="width:0%;height:8px"
         />
       </div>
     </div>
@@ -839,7 +839,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:99.9%;height:8px;border-radius:;background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
+          style="width:99.9%;height:8px;background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
         />
       </div>
     </div>
@@ -861,7 +861,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:99.9%;height:8px;border-radius:;background-image:linear-gradient(to right, #108ee9, #87d068)"
+          style="width:99.9%;height:8px;background-image:linear-gradient(to right, #108ee9, #87d068)"
         />
       </div>
     </div>
@@ -1049,7 +1049,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:30%;height:8px;border-radius:"
+          style="width:30%;height:8px"
         />
       </div>
     </div>
@@ -1071,7 +1071,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:50%;height:8px;border-radius:"
+          style="width:50%;height:8px"
         />
       </div>
     </div>
@@ -1093,7 +1093,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:70%;height:8px;border-radius:"
+          style="width:70%;height:8px"
         />
       </div>
     </div>
@@ -1132,7 +1132,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:8px;border-radius:"
+          style="width:100%;height:8px"
         />
       </div>
     </div>
@@ -1171,7 +1171,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:50%;height:8px;border-radius:"
+          style="width:50%;height:8px"
         />
       </div>
     </div>
@@ -1194,7 +1194,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width:30%;height:6px;border-radius:"
+          style="width:30%;height:6px"
         />
       </div>
     </div>
@@ -1216,7 +1216,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width:50%;height:6px;border-radius:"
+          style="width:50%;height:6px"
         />
       </div>
     </div>
@@ -1238,7 +1238,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width:70%;height:6px;border-radius:"
+          style="width:70%;height:6px"
         />
       </div>
     </div>
@@ -1277,7 +1277,7 @@ exports[`renders ./components/progress/demo/line-mini.md correctly 1`] = `
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:6px;border-radius:"
+          style="width:100%;height:6px"
         />
       </div>
     </div>
@@ -1456,11 +1456,11 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:60%;height:8px;border-radius:"
+          style="width:60%;height:8px"
         />
         <div
           class="ant-progress-success-bg"
-          style="width:30%;height:8px;border-radius:"
+          style="width:30%;height:8px"
         />
       </div>
     </div>

components/progress/__tests__/__snapshots__/index.test.js.snap

@@ -421,129 +421,53 @@ exports[`Progress render strokeColor 1`] = `
 `;
 
 exports[`Progress render strokeColor 2`] = `
-<Progress
+<div
-  percent={50}
+  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
-  showInfo={true}
-  size="default"
-  strokeColor={
-    Object {
-      "from": "#108ee9",
-      "to": "#87d068",
-    }
-  }
-  strokeLinecap="round"
-  trailColor={null}
-  type="line"
 >
   <div
-    className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
+    class="ant-progress-outer"
   >
-    <Line
+    <div
-      percent={50}
+      class="ant-progress-inner"
-      prefixCls="ant-progress"
-      showInfo={true}
-      size="default"
-      strokeColor={
-        Object {
-          "from": "#108ee9",
-          "to": "#87d068",
-        }
-      }
-      strokeLinecap="round"
-      trailColor={null}
-      type="line"
     >
       <div
-        className="ant-progress-outer"
+        class="ant-progress-bg"
-      >
+        style="width: 50%; height: 8px;"
-        <div
+      />
-          className="ant-progress-inner"
+    </div>
-        >
-          <div
-            className="ant-progress-bg"
-            style={
-              Object {
-                "backgroundImage": "linear-gradient(to right, #108ee9, #87d068)",
-                "borderRadius": "",
-                "height": 8,
-                "width": "50%",
-              }
-            }
-          />
-        </div>
-      </div>
-      <span
-        className="ant-progress-text"
-        title="50%"
-      >
-        50%
-      </span>
-    </Line>
   </div>
-</Progress>
+  <span
+    class="ant-progress-text"
+    title="50%"
+  >
+    50%
+  </span>
+</div>
 `;
 
 exports[`Progress render strokeColor 3`] = `
-<Progress
+<div
-  percent={50}
+  class="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
-  showInfo={true}
-  size="default"
-  strokeColor={
-    Object {
-      "0%": "#108ee9",
-      "100%": "#87d068",
-    }
-  }
-  strokeLinecap="round"
-  trailColor={null}
-  type="line"
 >
   <div
-    className="ant-progress ant-progress-line ant-progress-status-normal ant-progress-show-info ant-progress-default"
+    class="ant-progress-outer"
   >
-    <Line
+    <div
-      percent={50}
+      class="ant-progress-inner"
-      prefixCls="ant-progress"
-      showInfo={true}
-      size="default"
-      strokeColor={
-        Object {
-          "0%": "#108ee9",
-          "100%": "#87d068",
-        }
-      }
-      strokeLinecap="round"
-      trailColor={null}
-      type="line"
     >
       <div
-        className="ant-progress-outer"
+        class="ant-progress-bg"
-      >
+        style="width: 50%; height: 8px;"
-        <div
+      />
-          className="ant-progress-inner"
+    </div>
-        >
-          <div
-            className="ant-progress-bg"
-            style={
-              Object {
-                "backgroundImage": "linear-gradient(to right, #108ee9 0%, #87d068 100%)",
-                "borderRadius": "",
-                "height": 8,
-                "width": "50%",
-              }
-            }
-          />
-        </div>
-      </div>
-      <span
-        className="ant-progress-text"
-        title="50%"
-      >
-        50%
-      </span>
-    </Line>
   </div>
-</Progress>
+  <span
+    class="ant-progress-text"
+    title="50%"
+  >
+    50%
+  </span>
+</div>
 `;
 
 exports[`Progress render successColor progress 1`] = `

components/progress/__tests__/index.test.js

@@ -62,14 +62,14 @@ describe('Progress', () => {
       },
       type: 'line',
     });
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
     wrapper.setProps({
       strokeColor: {
         '0%': '#108ee9',
         '100%': '#87d068',
       },
     });
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('render normal progress', () => {

components/select/style/index.less

@@ -13,7 +13,7 @@
   position: relative;
   background-color: @select-background;
   border: @border-width-base @border-style-base @select-border-color;
-  border-radius: @border-radius-base;
+  border-radius: @control-border-radius;
   transition: all 0.3s @ease-in-out;
 
   input {

components/skeleton/Avatar.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import omit from 'rc-util/lib/omit';
 import classNames from 'classnames';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import Element, { SkeletonElementProps } from './Element';
 
 export interface AvatarProps extends Omit<SkeletonElementProps, 'shape'> {
@@ -9,25 +9,24 @@ export interface AvatarProps extends Omit<SkeletonElementProps, 'shape'> {
 }
 
 const SkeletonAvatar = (props: AvatarProps) => {
-  const renderSkeletonAvatar = ({ getPrefixCls }: ConfigConsumerProps) => {
+  const { prefixCls: customizePrefixCls, className, active } = props;
-    const { prefixCls: customizePrefixCls, className, active } = props;
+  const { getPrefixCls } = React.useContext(ConfigContext);
-    const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
+  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const otherProps = omit(props, ['prefixCls', 'className']);
+
-    const cls = classNames(
+  const otherProps = omit(props, ['prefixCls', 'className']);
-      prefixCls,
+  const cls = classNames(
-      `${prefixCls}-element`,
+    prefixCls,
-      {
+    `${prefixCls}-element`,
-        [`${prefixCls}-active`]: active,
+    {
-      },
+      [`${prefixCls}-active`]: active,
-      className,
+    },
-    );
+    className,
-    return (
+  );
-      <div className={cls}>
+  return (
-        <Element prefixCls={`${prefixCls}-avatar`} {...otherProps} />
+    <div className={cls}>
-      </div>
+      <Element prefixCls={`${prefixCls}-avatar`} {...otherProps} />
-    );
+    </div>
-  };
+  );
-  return <ConfigConsumer>{renderSkeletonAvatar}</ConfigConsumer>;
 };
 
 SkeletonAvatar.defaultProps = {

components/skeleton/Button.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import omit from 'rc-util/lib/omit';
 import classNames from 'classnames';
 import Element, { SkeletonElementProps } from './Element';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 
 export interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'> {
   size?: 'large' | 'small' | 'default';
@@ -10,26 +10,25 @@ export interface SkeletonButtonProps extends Omit<SkeletonElementProps, 'size'>
 }
 
 const SkeletonButton = (props: SkeletonButtonProps) => {
-  const renderSkeletonButton = ({ getPrefixCls }: ConfigConsumerProps) => {
+  const { prefixCls: customizePrefixCls, className, active, block = false } = props;
-    const { prefixCls: customizePrefixCls, className, active, block = false } = props;
+  const { getPrefixCls } = React.useContext(ConfigContext);
-    const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
+  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const otherProps = omit(props, ['prefixCls']);
+
-    const cls = classNames(
+  const otherProps = omit(props, ['prefixCls']);
-      prefixCls,
+  const cls = classNames(
-      `${prefixCls}-element`,
+    prefixCls,
-      {
+    `${prefixCls}-element`,
-        [`${prefixCls}-active`]: active,
+    {
-        [`${prefixCls}-block`]: block,
+      [`${prefixCls}-active`]: active,
-      },
+      [`${prefixCls}-block`]: block,
-      className,
+    },
-    );
+    className,
-    return (
+  );
-      <div className={cls}>
+  return (
-        <Element prefixCls={`${prefixCls}-button`} {...otherProps} />
+    <div className={cls}>
-      </div>
+      <Element prefixCls={`${prefixCls}-button`} {...otherProps} />
-    );
+    </div>
-  };
+  );
-  return <ConfigConsumer>{renderSkeletonButton}</ConfigConsumer>;
 };
 
 SkeletonButton.defaultProps = {

components/skeleton/Image.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import classNames from 'classnames';
 import { SkeletonElementProps } from './Element';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 
 export interface SkeletonImageProps
   extends Omit<SkeletonElementProps, 'size' | 'shape' | 'active'> {}
@@ -10,26 +10,24 @@ const path =
   'M365.714286 329.142857q0 45.714286-32.036571 77.677714t-77.677714 32.036571-77.677714-32.036571-32.036571-77.677714 32.036571-77.677714 77.677714-32.036571 77.677714 32.036571 32.036571 77.677714zM950.857143 548.571429l0 256-804.571429 0 0-109.714286 182.857143-182.857143 91.428571 91.428571 292.571429-292.571429zM1005.714286 146.285714l-914.285714 0q-7.460571 0-12.873143 5.412571t-5.412571 12.873143l0 694.857143q0 7.460571 5.412571 12.873143t12.873143 5.412571l914.285714 0q7.460571 0 12.873143-5.412571t5.412571-12.873143l0-694.857143q0-7.460571-5.412571-12.873143t-12.873143-5.412571zM1097.142857 164.571429l0 694.857143q0 37.741714-26.843429 64.585143t-64.585143 26.843429l-914.285714 0q-37.741714 0-64.585143-26.843429t-26.843429-64.585143l0-694.857143q0-37.741714 26.843429-64.585143t64.585143-26.843429l914.285714 0q37.741714 0 64.585143 26.843429t26.843429 64.585143z';
 
 const SkeletonImage = (props: SkeletonImageProps) => {
-  const renderSkeletonImage = ({ getPrefixCls }: ConfigConsumerProps) => {
+  const { prefixCls: customizePrefixCls, className, style } = props;
-    const { prefixCls: customizePrefixCls, className, style } = props;
+  const { getPrefixCls } = React.useContext(ConfigContext);
-    const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
+  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const cls = classNames(prefixCls, `${prefixCls}-element`, className);
+  const cls = classNames(prefixCls, `${prefixCls}-element`, className);
 
-    return (
+  return (
-      <div className={cls}>
+    <div className={cls}>
-        <div className={classNames(`${prefixCls}-image`, className)} style={style}>
+      <div className={classNames(`${prefixCls}-image`, className)} style={style}>
-          <svg
+        <svg
-            viewBox="0 0 1098 1024"
+          viewBox="0 0 1098 1024"
-            xmlns="http://www.w3.org/2000/svg"
+          xmlns="http://www.w3.org/2000/svg"
-            className={`${prefixCls}-image-svg`}
+          className={`${prefixCls}-image-svg`}
-          >
+        >
-            <path d={path} className={`${prefixCls}-image-path`} />
+          <path d={path} className={`${prefixCls}-image-path`} />
-          </svg>
+        </svg>
-        </div>
       </div>
-    );
+    </div>
-  };
+  );
-  return <ConfigConsumer>{renderSkeletonImage}</ConfigConsumer>;
 };
 
 export default SkeletonImage;

components/skeleton/Input.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import omit from 'rc-util/lib/omit';
 import classNames from 'classnames';
 import Element, { SkeletonElementProps } from './Element';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 
 export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' | 'shape'> {
   size?: 'large' | 'small' | 'default';
@@ -10,26 +10,25 @@ export interface SkeletonInputProps extends Omit<SkeletonElementProps, 'size' |
 }
 
 const SkeletonInput = (props: SkeletonInputProps) => {
-  const renderSkeletonInput = ({ getPrefixCls }: ConfigConsumerProps) => {
+  const { prefixCls: customizePrefixCls, className, active, block } = props;
-    const { prefixCls: customizePrefixCls, className, active, block } = props;
+  const { getPrefixCls } = React.useContext(ConfigContext);
-    const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
+  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
-    const otherProps = omit(props, ['prefixCls']);
+
-    const cls = classNames(
+  const otherProps = omit(props, ['prefixCls']);
-      prefixCls,
+  const cls = classNames(
-      `${prefixCls}-element`,
+    prefixCls,
-      {
+    `${prefixCls}-element`,
-        [`${prefixCls}-active`]: active,
+    {
-        [`${prefixCls}-block`]: block,
+      [`${prefixCls}-active`]: active,
-      },
+      [`${prefixCls}-block`]: block,
-      className,
+    },
-    );
+    className,
-    return (
+  );
-      <div className={cls}>
+  return (
-        <Element prefixCls={`${prefixCls}-input`} {...otherProps} />
+    <div className={cls}>
-      </div>
+      <Element prefixCls={`${prefixCls}-input`} {...otherProps} />
-    );
+    </div>
-  };
+  );
-  return <ConfigConsumer>{renderSkeletonInput}</ConfigConsumer>;
 };
 
 SkeletonInput.defaultProps = {

components/skeleton/Skeleton.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import Title, { SkeletonTitleProps } from './Title';
 import Paragraph, { SkeletonParagraphProps } from './Paragraph';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext } from '../config-provider';
 import Element from './Element';
 import SkeletonAvatar, { AvatarProps } from './Avatar';
 import SkeletonButton from './Button';
@@ -72,99 +72,96 @@ function getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): Skeleton
 }
 
 const Skeleton = (props: SkeletonProps) => {
-  const renderSkeleton = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
+  const {
-    const {
+    prefixCls: customizePrefixCls,
-      prefixCls: customizePrefixCls,
+    loading,
-      loading,
+    className,
-      className,
+    style,
-      style,
+    children,
-      children,
+    avatar,
-      avatar,
+    title,
-      title,
+    paragraph,
-      paragraph,
+    active,
-      active,
+    round,
-      round,
+  } = props;
-    } = props;
 
-    const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
+  const { getPrefixCls, direction } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('skeleton', customizePrefixCls);
 
-    if (loading || !('loading' in props)) {
+  if (loading || !('loading' in props)) {
-      const hasAvatar = !!avatar;
+    const hasAvatar = !!avatar;
-      const hasTitle = !!title;
+    const hasTitle = !!title;
-      const hasParagraph = !!paragraph;
+    const hasParagraph = !!paragraph;
 
-      // Avatar
+    // Avatar
-      let avatarNode;
+    let avatarNode;
-      if (hasAvatar) {
+    if (hasAvatar) {
-        const avatarProps: SkeletonAvatarProps = {
+      const avatarProps: SkeletonAvatarProps = {
-          prefixCls: `${prefixCls}-avatar`,
+        prefixCls: `${prefixCls}-avatar`,
-          ...getAvatarBasicProps(hasTitle, hasParagraph),
+        ...getAvatarBasicProps(hasTitle, hasParagraph),
-          ...getComponentProps(avatar),
+        ...getComponentProps(avatar),
-        };
+      };
-        // We direct use SkeletonElement as avatar in skeleton internal.
+      // We direct use SkeletonElement as avatar in skeleton internal.
-        avatarNode = (
+      avatarNode = (
-          <div className={`${prefixCls}-header`}>
+        <div className={`${prefixCls}-header`}>
-            <Element {...avatarProps} />
+          <Element {...avatarProps} />
-          </div>
-        );
-      }
-
-      let contentNode;
-      if (hasTitle || hasParagraph) {
-        // Title
-        let $title;
-        if (hasTitle) {
-          const titleProps: SkeletonTitleProps = {
-            prefixCls: `${prefixCls}-title`,
-            ...getTitleBasicProps(hasAvatar, hasParagraph),
-            ...getComponentProps(title),
-          };
-
-          $title = <Title {...titleProps} />;
-        }
-
-        // Paragraph
-        let paragraphNode;
-        if (hasParagraph) {
-          const paragraphProps: SkeletonParagraphProps = {
-            prefixCls: `${prefixCls}-paragraph`,
-            ...getParagraphBasicProps(hasAvatar, hasTitle),
-            ...getComponentProps(paragraph),
-          };
-
-          paragraphNode = <Paragraph {...paragraphProps} />;
-        }
-
-        contentNode = (
-          <div className={`${prefixCls}-content`}>
-            {$title}
-            {paragraphNode}
-          </div>
-        );
-      }
-
-      const cls = classNames(
-        prefixCls,
-        {
-          [`${prefixCls}-with-avatar`]: hasAvatar,
-          [`${prefixCls}-active`]: active,
-          [`${prefixCls}-rtl`]: direction === 'rtl',
-          [`${prefixCls}-round`]: round,
-        },
-        className,
-      );
-
-      return (
-        <div className={cls} style={style}>
-          {avatarNode}
-          {contentNode}
         </div>
       );
     }
 
-    return children;
+    let contentNode;
-  };
+    if (hasTitle || hasParagraph) {
-  return <ConfigConsumer>{renderSkeleton}</ConfigConsumer>;
+      // Title
+      let $title;
+      if (hasTitle) {
+        const titleProps: SkeletonTitleProps = {
+          prefixCls: `${prefixCls}-title`,
+          ...getTitleBasicProps(hasAvatar, hasParagraph),
+          ...getComponentProps(title),
+        };
+
+        $title = <Title {...titleProps} />;
+      }
+
+      // Paragraph
+      let paragraphNode;
+      if (hasParagraph) {
+        const paragraphProps: SkeletonParagraphProps = {
+          prefixCls: `${prefixCls}-paragraph`,
+          ...getParagraphBasicProps(hasAvatar, hasTitle),
+          ...getComponentProps(paragraph),
+        };
+
+        paragraphNode = <Paragraph {...paragraphProps} />;
+      }
+
+      contentNode = (
+        <div className={`${prefixCls}-content`}>
+          {$title}
+          {paragraphNode}
+        </div>
+      );
+    }
+
+    const cls = classNames(
+      prefixCls,
+      {
+        [`${prefixCls}-with-avatar`]: hasAvatar,
+        [`${prefixCls}-active`]: active,
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+        [`${prefixCls}-round`]: round,
+      },
+      className,
+    );
+
+    return (
+      <div className={cls} style={style}>
+        {avatarNode}
+        {contentNode}
+      </div>
+    );
+  }
+  return children as React.ReactElement;
 };
 
 Skeleton.defaultProps = {

components/skeleton/__tests__/index.test.js

@@ -34,6 +34,11 @@ describe('Skeleton', () => {
     expect(wrapperSmall.render()).toMatchSnapshot();
   });
 
+  it('should display children', () => {
+    const wrapper = mount(<Skeleton loading={false}>{[1, 2, 3]}</Skeleton>);
+    expect(wrapper.text()).toBe('123');
+  });
+
   describe('avatar', () => {
     it('size', () => {
       const wrapperSmall = genSkeleton({ avatar: { size: 'small' } });

components/space/__tests__/index.test.js

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { render, mount } from 'enzyme';
-import { act } from 'react-test-renderer';
+import { act } from 'react-dom/test-utils';
 import Space from '..';
 import ConfigProvider from '../../config-provider';
 import mountTest from '../../../tests/shared/mountTest';

components/spin/__tests__/__snapshots__/index.test.js.snap

@@ -1,18 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Spin if indicator set null should not be render default indicator 1`] = `
-<Spin
+<div
-  indicator={null}
+  aria-busy="true"
-  size="default"
+  aria-live="polite"
-  spinning={true}
+  class="ant-spin ant-spin-spinning"
-  wrapperClassName=""
+/>
->
-  <div
-    aria-busy={true}
-    aria-live="polite"
-    className="ant-spin ant-spin-spinning"
-  />
-</Spin>
 `;
 
 exports[`Spin rtl render component should be rendered correctly in RTL direction 1`] = `
@@ -53,19 +46,13 @@ exports[`Spin should render custom indicator when it's set 1`] = `
 `;
 
 exports[`Spin should support static method Spin.setDefaultIndicator 1`] = `
-<Spin
+<div
-  size="default"
+  aria-busy="true"
-  spinning={true}
+  aria-live="polite"
-  wrapperClassName=""
+  class="ant-spin ant-spin-spinning"
 >
-  <div
+  <em
-    aria-busy={true}
+    class="custom-spinner ant-spin-dot"
-    aria-live="polite"
+  />
-    className="ant-spin ant-spin-spinning"
+</div>
-  >
-    <em
-      className="custom-spinner ant-spin-dot"
-    />
-  </div>
-</Spin>
 `;

components/spin/__tests__/index.test.js

@@ -33,13 +33,13 @@ describe('Spin', () => {
 
   it('if indicator set null should not be render default indicator', () => {
     const wrapper = mount(<Spin indicator={null} />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should support static method Spin.setDefaultIndicator', () => {
     Spin.setDefaultIndicator(<em className="custom-spinner" />);
     const wrapper = mount(<Spin />);
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
     Spin.setDefaultIndicator(null);
   });
 

components/style/mixins/modal-mask.less

@@ -4,7 +4,7 @@
   pointer-events: none;
 
   &.@{ant-prefix}-zoom-enter,
-  &.@{ant-prefix}zoom-appear {
+  &.@{ant-prefix}-zoom-appear {
     transform: none; // reset scale avoid mousePosition bug
     opacity: 0;
     animation-duration: @animation-duration-slow;

components/style/mixins/rounded-arrow.less

@@ -3,7 +3,7 @@
 
   @width-without-unit: unit(@width);
   @outer-radius-without-unit: unit(@outer-radius);
-  @inner-radius-without-unit: unit(@border-radius-base);
+  @inner-radius-without-unit: unit(@arrow-border-radius);
 
   @a-x: @width-without-unit - @corner-height;
   @a-y: 2 * @width-without-unit + @corner-height;

components/style/themes/default.less

@@ -108,6 +108,12 @@
 @border-radius-base: 2px;
 @border-radius-sm: @border-radius-base;
 
+// control border
+@control-border-radius: @border-radius-base;
+
+// arrow border
+@arrow-border-radius: @border-radius-sm;
+
 // vertical paddings
 @padding-lg: 24px; // containers
 @padding-md: 16px; // small containers and buttons
@@ -521,6 +527,7 @@
 @tooltip-distance: @tooltip-arrow-width - 1px + 4px;
 // Tooltip arrow color
 @tooltip-arrow-color: @tooltip-bg;
+@tooltip-border-radius: @border-radius-base;
 
 // Popover
 // ---
@@ -668,6 +675,7 @@
 
 // Tag
 // --
+@tag-border-radius: @border-radius-base;
 @tag-default-bg: @background-color-light;
 @tag-default-color: @text-color;
 @tag-font-size: @font-size-sm;

components/style/themes/variable.less

@@ -163,6 +163,12 @@ html {
 @border-radius-base: 2px;
 @border-radius-sm: @border-radius-base;
 
+// control border
+@control-border-radius: @border-radius-base;
+
+// arrow border
+@arrow-border-radius: @border-radius-sm;
+
 // vertical paddings
 @padding-lg: 24px; // containers
 @padding-md: 16px; // small containers and buttons
@@ -576,6 +582,7 @@ html {
 @tooltip-distance: @tooltip-arrow-width - 1px + 4px;
 // Tooltip arrow color
 @tooltip-arrow-color: @tooltip-bg;
+@tooltip-border-radius: @border-radius-base;
 
 // Popover
 // ---
@@ -723,6 +730,7 @@ html {
 
 // Tag
 // --
+@tag-border-radius: @border-radius-base;
 @tag-default-bg: @background-color-light;
 @tag-default-color: @text-color;
 @tag-font-size: @font-size-sm;

components/tabs/index.en-US.md

@@ -33,7 +33,7 @@ Ant Design has 3 types of Tabs for different situations.
 | size | Preset tab bar size | `large` \| `default` \| `small` | `default` |  |
 | tabBarExtraContent | Extra content in tab bar | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
 | tabBarGutter | The gap between tabs | number | - |  |
-| tabBarStyle | Tab bar style object | object | - |  |
+| tabBarStyle | Tab bar style object | CSSProperties | - |  |
 | tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |  |
 | destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false |  |
 | type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` |  |

components/tabs/index.zh-CN.md

@@ -36,7 +36,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | size | 大小，提供 `large` `default` 和 `small` 三种大小 | string | `default` |  |
 | tabBarExtraContent | tab bar 上额外的元素 | ReactNode \| {left?: ReactNode, right?: ReactNode} | - | object: 4.6.0 |
 | tabBarGutter | tabs 之间的间隙 | number | - |  |
-| tabBarStyle | tab bar 的样式对象 | object | - |  |
+| tabBarStyle | tab bar 的样式对象 | CSSProperties | - |  |
 | tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` |  |
 | destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false |  |
 | type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` |  |

components/tag/style/index.less

@@ -15,7 +15,7 @@
   white-space: nowrap;
   background: @tag-default-bg;
   border: @border-width-base @border-style-base @border-color-base;
-  border-radius: @border-radius-base;
+  border-radius: @tag-border-radius;
   opacity: 1;
   transition: all 0.3s;
 

components/tooltip/style/index.less

@@ -61,7 +61,7 @@
     text-decoration: none;
     word-wrap: break-word;
     background-color: @tooltip-bg;
-    border-radius: @border-radius-base;
+    border-radius: @tooltip-border-radius;
     box-shadow: @box-shadow-base;
   }
 

docs/react/recommendation.zh-CN.md

@@ -7,7 +7,7 @@ title: 社区精选组件
 
 | 类型 | 推荐组件 |
 | --- | --- |
-| 可视化图表 | [Ant Design Charts](https://charts.ant.design/zh-CN/) [AntV 数据可视化解决方案](https://antv.vision/zh) |
+| 可视化图表 | [Ant Design Charts](https://charts.ant.design/zh) [AntV 数据可视化解决方案](https://antv.vision/zh) |
 | React Hooks 库 | [ahooks](https://github.com/alibaba/hooks) |
 | 表单 | [ProForm](https://procomponents.ant.design/components/form) [Formily](https://github.com/alibaba/formily) [react-hook-form](https://github.com/react-hook-form/react-hook-form) [formik](https://github.com/formium/formik) |
 | 路由 | [react-router](https://github.com/ReactTraining/react-router) |

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "4.19.3",
+  "version": "4.19.5-alpha.0",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [
@@ -99,7 +99,9 @@
     "site:test": "jest --config .jest.site.js --cache=false --force-exit",
     "test-image": "npm run dist && docker-compose run tests",
     "version": "node ./scripts/generate-version",
-    "install-react-16": "npm i --no-save --legacy-peer-deps react@16 react-dom@16 react-test-renderer@16 enzyme-adapter-react-16",
+    "install-react-16": "npm i --no-save --legacy-peer-deps react@16 react-dom@16 enzyme-adapter-react-16",
+    "install-react-17": "npm i --no-save --legacy-peer-deps react@17 react-dom@17",
+    "install-react-18": "npm i --no-save --legacy-peer-deps react@18 react-dom@18",
     "argos": "argos upload imageSnapshots"
   },
   "browserslist": [
@@ -247,12 +249,12 @@
     "rc-footer": "^0.6.6",
     "rc-tween-one": "^3.0.3",
     "rc-virtual-list": "^3.4.2",
-    "react": "^17.0.1",
+    "react": "^17.0.0",
     "react-color": "^2.17.3",
     "react-copy-to-clipboard": "^5.0.1",
     "react-dnd": "^15.0.0",
     "react-dnd-html5-backend": "^15.0.0",
-    "react-dom": "^17.0.1",
+    "react-dom": "^17.0.0",
     "react-draggable": "^4.4.3",
     "react-fast-marquee": "^1.2.1",
     "react-github-button": "^0.1.11",
@@ -264,7 +266,6 @@
     "react-router-dom": "^6.0.2",
     "react-sortable-hoc": "^2.0.0",
     "react-sticky": "^6.0.3",
-    "react-test-renderer": "^17.0.1",
     "react-text-loop-next": "0.0.3",
     "react-window": "^1.8.5",
     "remark": "^14.0.1",