chore: merge feature

.github/workflows/compressed-size.yml

@@ -9,8 +9,14 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+
 jobs:
   compressed-size:
+    permissions:
+      contents: read  # for actions/checkout to fetch code
+      pull-requests: write  # for preactjs/compressed-size-action to create PR comments
     runs-on: ubuntu-latest
     env:
       CI_JOB_NUMBER: 1

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

@@ -4,8 +4,14 @@ on:
   schedule:
     - cron: "0 0 */15 * *"
 
+permissions:
+  contents: read
+
 jobs:
   issue-check-inactive:
+    permissions:
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
     runs-on: ubuntu-latest
     steps:
       - name: check-inactive

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

@@ -4,8 +4,14 @@ on:
   schedule:
     - cron: "0 0 * * *"
 
+permissions:
+  contents: read
+
 jobs:
   issue-close-require:
+    permissions:
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
     runs-on: ubuntu-latest
     steps:
       - name: need reproduce

.github/workflows/issue-labeled.yml

@@ -6,8 +6,14 @@ on:
   issues:
     types: [labeled]
 
+permissions:
+  contents: read
+
 jobs:
   issue-labeled:
+    permissions:
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
     runs-on: ubuntu-latest
     steps:
       - name: help wanted

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

@@ -4,8 +4,15 @@ on:
   issues:
     types: [opened]
 
+permissions:
+  contents: read
+
 jobs:
   issue-open-check:
+    permissions:
+      contents: read  # for visiky/dingtalk-release-notify to get latest release
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
     runs-on: ubuntu-latest
     steps:
       - uses: actions-cool/check-user-permission@v2

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

@@ -6,8 +6,14 @@ on:
   issue_comment:
     types: [created, edited]
 
+permissions:
+  contents: read
+
 jobs:
   issue-remove-inactive:
+    permissions:
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
     runs-on: ubuntu-latest
     steps:
       - name: remove inactive

.github/workflows/issues-similarity-analysis.yml

@@ -4,8 +4,13 @@ on:
   issues:
     types: [opened, edited]
 
+permissions:
+  contents: read
+
 jobs:
   similarity-analysis:
+    permissions:
+      issues: write  # for actions-cool/issues-similarity-analysis to create issue comments
     runs-on: ubuntu-latest
     steps:
       - name: analysis

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

@@ -5,8 +5,16 @@ on:
   schedule:
     - cron: "*/10 * * * *"
 
+permissions:
+  contents: read
+
 jobs:
   pr-check-ci:
+    permissions:
+      checks: read  # for actions-cool/check-pr-ci to get check reference
+      contents: write  # for actions-cool/check-pr-ci to merge PRs
+      issues: write  # for actions-cool/check-pr-ci to update issues
+      pull-requests: write  # for actions-cool/check-pr-ci to update PRs
     runs-on: ubuntu-latest
     steps:
       - uses: actions-cool/check-pr-ci@v1

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

@@ -4,8 +4,14 @@ on:
   pull_request_target:
     types: [opened]
 
+permissions:
+  contents: read
+
 jobs:
   pr-check-merge:
+    permissions:
+      issues: write  # for actions-cool/issues-helper to update issues
+      pull-requests: write  # for actions-cool/issues-helper to update PRs
     runs-on: ubuntu-latest
     if: (github.event.pull_request.head.ref == 'feature' || github.event.pull_request.head.ref == 'master') && github.event.pull_request.head.user.login == 'ant-design'
     steps:

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

@@ -4,8 +4,14 @@ on:
   pull_request_target:
     types: [opened, edited, reopened, synchronize]
 
+permissions:
+  contents: read
+
 jobs:
   refuse:
+    permissions:
+      issues: write  # for actions-cool/pr-welcome to create, update & react on issues
+      pull-requests: write  # for actions-cool/pr-welcome to request reviewer
     runs-on: ubuntu-latest
     steps:
       - uses: actions-cool/pr-welcome@v1
@@ -19,6 +25,8 @@ jobs:
           close: true
 
   check-changelog:
+    permissions:
+      pull-requests: write  # for actions-cool/pr-check-fill to create or update PR comments
     runs-on: ubuntu-latest
     steps:
       - name: check fill

.github/workflows/preview-build.yml

@@ -11,6 +11,9 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+
 jobs:
   # Prepare node modules. Reuse cache if available
   setup:

.github/workflows/preview-deploy.yml

@@ -8,8 +8,15 @@ on:
     types:
       - completed
 
+permissions:
+  contents: read
+
 jobs:
   deploy-site:
+    permissions:
+      actions: read  # for dawidd6/action-download-artifact to query and download artifacts
+      issues: write  # for actions-cool/maintain-one-comment to modify or create issue comments
+      pull-requests: write  # for actions-cool/maintain-one-comment to modify or create PR comments
     name: deploy preview
     runs-on: ubuntu-latest
     if: >
@@ -65,6 +72,10 @@ jobs:
           number: ${{ steps.pr.outputs.id }}
 
   build-site-failed:
+    permissions:
+      actions: read  # for dawidd6/action-download-artifact to query and download artifacts
+      issues: write  # for actions-cool/maintain-one-comment to modify or create issue comments
+      pull-requests: write  # for actions-cool/maintain-one-comment to modify or create PR comments
     name: build preview failed
     runs-on: ubuntu-latest
     if: >

.github/workflows/preview-start.yml

@@ -10,8 +10,14 @@ on:
   pull_request_target:
     types: [opened, synchronize, reopened]
 
+permissions:
+  contents: read
+
 jobs:
   preview-start:
+    permissions:
+      issues: write  # for actions-cool/maintain-one-comment to modify or create issue comments
+      pull-requests: write  # for actions-cool/maintain-one-comment to modify or create PR comments
     name: start preview info
     runs-on: ubuntu-latest
     steps:

.github/workflows/rebase.yml

@@ -4,8 +4,14 @@ on:
   issue_comment:
     types: [created]
 
+permissions:
+  contents: read
+
 jobs:
   rebase:
+    permissions:
+      contents: write  # for cirrus-actions/rebase to push code to rebase
+      pull-requests: read  # for cirrus-actions/rebase to get info about PR
     name: Rebase
     if: github.event.issue.pull_request != '' && (contains(github.event.comment.body, '/rebase') || contains(github.event.comment.body, '\rebase'))
     runs-on: ubuntu-latest

.github/workflows/release-helper.yml

@@ -10,8 +10,13 @@ name: Release Helper
 on:
   create
 
+permissions:
+  contents: read
+
 jobs:
   release-helper:
+    permissions:
+      contents: write  # for actions-cool/release-helper to create releases
     if: github.event.ref_type == 'tag'
     runs-on: ubuntu-latest
     steps:

.github/workflows/site-deploy.yml

@@ -4,6 +4,9 @@ name: Deploy website
 on:
   create
 
+permissions:
+  contents: read
+
 jobs:
   setup:
     runs-on: ubuntu-latest

.github/workflows/sync-gitee.yml

@@ -10,8 +10,13 @@ on:
       - 3.x-stable
   create:
 
+permissions:
+  contents: read
+
 jobs:
   mirror:
+    permissions:
+      contents: none
     runs-on: ubuntu-latest
     if: github.repository == 'ant-design/ant-design'
     steps:

.github/workflows/test.yml

@@ -9,6 +9,9 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+
 jobs:
   setup:
     runs-on: ubuntu-latest
@@ -23,7 +26,7 @@ jobs:
           key: lock-${{ github.sha }}
 
       - name: create package-lock.json
-        run: npm i --package-lock-only --ignore-scripts --force
+        run: npm i --package-lock-only --ignore-scripts
 
       - name: hack for single file
         run: |
@@ -40,7 +43,7 @@ jobs:
 
       - name: install
         if: steps.node_modules_cache_id.outputs.cache-hit != 'true'
-        run: npm ci --force
+        run: npm ci
 
   lint:
     runs-on: ubuntu-latest
@@ -228,8 +231,7 @@ jobs:
     name: test
     strategy:
       matrix:
-        react: ['16', '17']
-        # react: ['17', '18']
+        react: ['16', '17', '18']
         module: ['dom', 'node', 'dist']
     env:
       REACT: ${{ matrix.react }}
@@ -346,8 +348,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        react: ['16', '17']
-        # react: ['17', '18']
+        react: ['16', '17', '18']
         module: [lib, es]
     env:
       REACT: ${{ matrix.react }}

.github/workflows/ui-upload.yml

@@ -8,8 +8,14 @@ on:
     types:
       - completed
 
+permissions:
+  contents: read
+
 jobs:
   upload-ui:
+    permissions:
+      actions: read  # for dawidd6/action-download-artifact to query and download artifacts
+      pull-requests: read  # for dawidd6/action-download-artifact to query commit hash
     name: deploy preview
     runs-on: ubuntu-latest
     if: >

.github/workflows/ui.yml

@@ -12,6 +12,9 @@ concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
   cancel-in-progress: true
 
+permissions:
+  contents: read
+
 jobs:
   test:
     runs-on: ubuntu-latest

.github/workflows/verify-files-modify.yml

@@ -4,8 +4,13 @@ on:
   pull_request_target:
     types: [opened, synchronize]
 
+permissions:
+  contents: read
+
 jobs:
   verify:
+    permissions:
+      pull-requests: write  # for actions-cool/verify-files-modify to update status of PRs
     runs-on: ubuntu-latest
     steps:
       - name: verify-version

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

@@ -4,8 +4,14 @@ on:
   pull_request:
     types: [opened, edited, reopened, synchronize, ready_for_review]
 
+permissions:
+  contents: read
+
 jobs:
   verify:
+    permissions:
+      contents: read  # for actions/checkout to fetch code
+      pull-requests: write  # for actions-cool/verify-package-version to comment on PR
     runs-on: ubuntu-latest
     if: contains(github.event.pull_request.title, 'changelog') || contains(github.event.pull_request.title, 'release')
     steps:

CHANGELOG.en-US.md

@@ -15,6 +15,15 @@ timeline: true
 
 ---
 
+## 4.19.5
+
+`2022-04-02`
+
+- 🐞 Fix Form that not keep store value when unmount and mount again. [#34845](https://github.com/ant-design/ant-design/pull/34845)
+- 🐞 Fix Pagination under `<ConfigProvider componentSize="large" />` should display middle size Select. [#34756](https://github.com/ant-design/ant-design/pull/34756)
+- 🐞 fix Skeleton to unable to render `childten` of non-react element. [#34751](https://github.com/ant-design/ant-design/pull/34751) [@1247748612](https://github.com/1247748612)
+- 💄 Fix Tag `@tag-border-radius` less variable not work. [#34741](https://github.com/ant-design/ant-design/pull/34741)
+
 ## 4.19.4
 
 `2022-03-27`
@@ -38,7 +47,8 @@ timeline: true
 - 💄 Fix missing `status` style in RangePicker. [#34509](https://github.com/ant-design/ant-design/pull/34509)
 - 🛎 Add warning for Input getting blurred when dynamically add `hasFeedback`. [#34475](https://github.com/ant-design/ant-design/pull/34475)
 - 🐞 Fix missing classname in input when Input has `prefix` or `suffix`. [#34474](https://github.com/ant-design/ant-design/pull/34474)
-- 🌐 Updated it_LT locale for `typeTemplate`. [#34567](https://github.com/ant-design/ant-design/pull/34567) [@Anizcus](https://gitit_LTit_LThub.com/Anizcus)
+- 🇱🇹 Updated lt_LT locale for `typeTemplate`. [#34567](https://github.com/ant-design/ant-design/pull/34567) [@Anizcus](https://gitit_LTit_LThub.com/Anizcus)
+- 🇮🇹 Updated it_iT locale for `Table`. [#34566](https://github.com/ant-design/ant-design/pull/34566) [@freshgiammi](https://gitit_LTit_LThub.com/freshgiammi)
 
 ## 4.19.2
 

CHANGELOG.zh-CN.md

@@ -15,6 +15,15 @@ timeline: true
 
 ---
 
+## 4.19.5
+
+`2022-04-02`
+
+- 🐞 修复 Form 在整个被 unmount 后再次 mount，原 Form 的值会被重置的问题。[#34845](https://github.com/ant-design/ant-design/pull/34845)
+- 🐞 修复 Pagination 在 `<ConfigProvider componentSize="large" />` 下的 Select 大小问题。[#34756](https://github.com/ant-design/ant-design/pull/34756)
+- 🐞 修复 Skeleton 不渲染非 react element 类型的 `children` 问题。[#34751](https://github.com/ant-design/ant-design/pull/34751) [@1247748612](https://github.com/1247748612)
+- 💄 修复 Tag `@tag-border-radius` less 变量不生效的问题。[#34741](https://github.com/ant-design/ant-design/pull/34741)
+
 ## 4.19.4
 
 `2022-03-27`
@@ -38,7 +47,8 @@ timeline: true
 - 💄 修复 RangePicker `status` 相关样式丢失的问题。[#34509](https://github.com/ant-design/ant-design/pull/34509)
 - 🛎 为动态改变 Form.Item 的 `hasFeedback` 时 Input 焦点丢失添加警告。[#34475](https://github.com/ant-design/ant-design/pull/34475)
 - 🐞 修复 Input 有 `prefix` 或者 `suffix` 时 input 缺少某些 className 的问题。[#34474](https://github.com/ant-design/ant-design/pull/34474)
-- 🌐 更新 it_LT 的 locale。[#34567](https://github.com/ant-desin/ant-design/pull/34567) [@Anizcus](https://github.com/Anizcus)
+- 🇱🇹 更新 lt_LT 的 locale。[#34567](https://github.com/ant-design/ant-design/pull/34567) [@Anizcus](https://github.com/Anizcus)
+- 🇮🇹 更新 it_iT 的 locale。[#34566](https://github.com/ant-design/ant-design/pull/34566) [@freshgiammi](https://gitit_LTit_LThub.com/freshgiammi)
 
 ## 4.19.2
 

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

@@ -45,6 +45,7 @@ Array [
   "Rate",
   "Result",
   "Row",
+  "Segmented",
   "Select",
   "Skeleton",
   "Slider",

components/_util/ActionButton.tsx

@@ -12,6 +12,7 @@ export interface ActionButtonProps {
   buttonProps?: ButtonProps;
   emitEvent?: boolean;
   quitOnNullishReturnValue?: boolean;
+  children?: React.ReactNode;
 }
 
 function isThenable(thing?: PromiseLike<any>): boolean {

components/_util/throttleByAnimationFrame.tsx

@@ -1,20 +1,26 @@
 import raf from 'rc-util/lib/raf';
 
-export function throttleByAnimationFrame(fn: (...args: any[]) => void) {
+export function throttleByAnimationFrame<T extends unknown[]>(fn: (...args: T) => void) {
   let requestId: number | null;
 
-  const later = (args: any[]) => () => {
+  const later = (args: T) => () => {
     requestId = null;
     fn(...args);
   };
 
-  const throttled = (...args: any[]) => {
+  const throttled: {
+    (...args: T): void;
+    cancel: () => void;
+  } = (...args: T) => {
     if (requestId == null) {
       requestId = raf(later(args));
     }
   };
 
-  (throttled as any).cancel = () => raf.cancel(requestId!);
+  throttled.cancel = () => {
+    raf.cancel(requestId!);
+    requestId = null;
+  };
 
   return throttled;
 }

components/_util/wave.tsx

@@ -27,6 +27,7 @@ function isNotGrey(color: string) {
 export interface WaveProps {
   insertExtraNode?: boolean;
   disabled?: boolean;
+  children?: React.ReactNode;
 }
 
 export default class Wave extends React.Component<WaveProps> {

components/affix/demo/basic.md

@@ -38,5 +38,5 @@ const Demo: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```

components/affix/demo/debug.md

@@ -35,5 +35,5 @@ const Demo: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```

components/affix/demo/on-change.md

@@ -16,10 +16,9 @@ Callback with affixed state.
 ```tsx
 import { Affix, Button } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Affix offsetTop={120} onChange={affixed => console.log(affixed)}>
     <Button>120px to affix top</Button>
-  </Affix>,
-  mountNode,
+  </Affix>
 );
 ```

components/affix/demo/target.md

@@ -30,7 +30,7 @@ const Demo: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```
 
 <style>

components/alert/ErrorBoundary.tsx

@@ -4,6 +4,7 @@ import Alert from '.';
 interface ErrorBoundaryProps {
   message?: React.ReactNode;
   description?: React.ReactNode;
+  children?: React.ReactNode;
 }
 
 export default class ErrorBoundary extends React.Component<

components/alert/demo/action.md

@@ -17,7 +17,7 @@ Custom action.
 import React from 'react';
 import { Alert, Button, Space } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert
       message="Success Tips"
@@ -69,8 +69,7 @@ ReactDOM.render(
       }
       closable
     />
-  </>,
-  mountNode,
+  </>
 );
 ```
 

components/alert/demo/banner.md

@@ -17,7 +17,7 @@ Display Alert as a banner at top of page.
 ```tsx
 import { Alert } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert message="Warning text" banner />
     <br />
@@ -30,7 +30,6 @@ ReactDOM.render(
     <Alert showIcon={false} message="Warning text without icon" banner />
     <br />
     <Alert type="error" message="Error text" banner />
-  </>,
-  mountNode,
+  </>
 );
 ```

components/alert/demo/basic.md

@@ -16,7 +16,7 @@ The simplest usage for short messages.
 ```tsx
 import { Alert } from 'antd';
 
-ReactDOM.render(<Alert message="Success Text" type="success" />, mountNode);
+export default () => <Alert message="Success Text" type="success" />;
 ```
 
 <style>

components/alert/demo/closable.md

@@ -20,7 +20,7 @@ const onClose = (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
   console.log(e, 'I was closed.');
 };
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert
       message="Warning Text Warning Text Warning TextW arning Text Warning Text Warning TextWarning Text"
@@ -35,7 +35,6 @@ ReactDOM.render(
       closable
       onClose={onClose}
     />
-  </>,
-  mountNode,
+  </>
 );
 ```

components/alert/demo/close-text.md

@@ -16,5 +16,5 @@ Replace the default icon with customized text.
 ```tsx
 import { Alert } from 'antd';
 
-ReactDOM.render(<Alert message="Info Text" type="info" closeText="Close Now" />, mountNode);
+export default () => <Alert message="Info Text" type="info" closeText="Close Now" />;
 ```

components/alert/demo/custom-icon.md

@@ -20,7 +20,7 @@ import { SmileOutlined } from '@ant-design/icons';
 
 const icon = <SmileOutlined />;
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert icon={icon} message="showIcon = false" type="success" />
     <Alert icon={icon} message="Success Tips" type="success" showIcon />
@@ -55,7 +55,6 @@ ReactDOM.render(
       type="error"
       showIcon
     />
-  </>,
-  mountNode,
+  </>
 );
 ```

components/alert/demo/description.md

@@ -16,7 +16,7 @@ Additional description for alert message.
 ```tsx
 import { Alert } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert
       message="Success Text"
@@ -38,7 +38,6 @@ ReactDOM.render(
       description="Error Description Error Description Error Description Error Description"
       type="error"
     />
-  </>,
-  mountNode,
+  </>
 );
 ```

components/alert/demo/error-boundary.md

@@ -34,10 +34,9 @@ const ThrowError: React.FC = () => {
   );
 };
 
-ReactDOM.render(
+export default () => (
   <ErrorBoundary>
     <ThrowError />
-  </ErrorBoundary>,
-  mountNode,
+  </ErrorBoundary>
 );
 ```

components/alert/demo/icon.md

@@ -16,7 +16,7 @@ A relevant icon will make information clearer and more friendly.
 ```tsx
 import { Alert } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert message="Success Tips" type="success" showIcon />
     <Alert message="Informational Notes" type="info" showIcon />
@@ -47,7 +47,6 @@ ReactDOM.render(
       type="error"
       showIcon
     />
-  </>,
-  mountNode,
+  </>
 );
 ```

components/alert/demo/loop-banner.md

@@ -18,7 +18,7 @@ import { Alert } from 'antd';
 import { TextLoop } from 'react-text-loop-next';
 import Marquee from 'react-fast-marquee';
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert
       banner
@@ -39,7 +39,6 @@ ReactDOM.render(
         </Marquee>
       }
     />
-  </>,
-  mountNode,
+  </>
 );
 ```

components/alert/demo/smooth-closed.md

@@ -32,5 +32,5 @@ const App: React.FC = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```

components/alert/demo/style.md

@@ -16,14 +16,13 @@ There are 4 types of Alert: `success`, `info`, `warning`, `error`.
 ```tsx
 import { Alert } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Alert message="Success Text" type="success" />
     <Alert message="Info Text" type="info" />
     <Alert message="Warning Text" type="warning" />
     <Alert message="Error Text" type="error" />
-  </>,
-  mountNode,
+  </>
 );
 ```
 

components/anchor/Anchor.tsx

@@ -98,7 +98,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
     activeLink: null,
   };
 
-  content: ConfigConsumerProps;
+  context: ConfigConsumerProps;
 
   private wrapperRef = React.createRef<HTMLDivElement>();
 

components/anchor/demo/basic.md

@@ -18,7 +18,7 @@ import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 
-ReactDOM.render(
+export default () => (
   <Anchor>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -26,8 +26,7 @@ ReactDOM.render(
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />
     </Link>
-  </Anchor>,
-  mountNode,
+  </Anchor>
 );
 ```
 

components/anchor/demo/customizeHighlight.md

@@ -20,7 +20,7 @@ const { Link } = Anchor;
 
 const getCurrentAnchor = () => '#components-anchor-demo-static';
 
-ReactDOM.render(
+export default () => (
   <Anchor affix={false} getCurrentAnchor={getCurrentAnchor}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -28,7 +28,6 @@ ReactDOM.render(
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />
     </Link>
-  </Anchor>,
-  mountNode,
+  </Anchor>
 );
 ```

components/anchor/demo/onChange.md

@@ -22,7 +22,7 @@ const onChange = (link: string) => {
   console.log('Anchor:OnChange', link);
 };
 
-ReactDOM.render(
+export default () => (
   <Anchor affix={false} onChange={onChange}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -30,7 +30,6 @@ ReactDOM.render(
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />
     </Link>
-  </Anchor>,
-  mountNode,
+  </Anchor>
 );
 ```

components/anchor/demo/onClick.md

@@ -29,7 +29,7 @@ const handleClick = (
   console.log(link);
 };
 
-ReactDOM.render(
+export default () => (
   <Anchor affix={false} onClick={handleClick}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -37,7 +37,6 @@ ReactDOM.render(
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />
     </Link>
-  </Anchor>,
-  mountNode,
+  </Anchor>
 );
 ```

components/anchor/demo/static.md

@@ -18,7 +18,7 @@ import { Anchor } from 'antd';
 
 const { Link } = Anchor;
 
-ReactDOM.render(
+export default () => (
   <Anchor affix={false}>
     <Link href="#components-anchor-demo-basic" title="Basic demo" />
     <Link href="#components-anchor-demo-static" title="Static demo" />
@@ -26,7 +26,6 @@ ReactDOM.render(
       <Link href="#Anchor-Props" title="Anchor Props" />
       <Link href="#Link-Props" title="Link Props" />
     </Link>
-  </Anchor>,
-  mountNode,
+  </Anchor>
 );
 ```

components/anchor/demo/targetOffset.md

@@ -36,5 +36,5 @@ const AnchorExample: React.FC = () => {
   );
 };
 
-ReactDOM.render(<AnchorExample />, mountNode);
+export default () => <AnchorExample />;
 ```

components/auto-complete/demo/basic.md

@@ -58,5 +58,5 @@ const Complete: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```

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

@@ -74,7 +74,7 @@ const Complete: React.FC = () => (
   </AutoComplete>
 );
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```
 
 ```css

components/auto-complete/demo/custom.md

@@ -52,5 +52,5 @@ const Complete: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```

components/auto-complete/demo/form-debug.md

@@ -21,7 +21,7 @@ const formItemLayout = {
   },
 };
 
-ReactDOM.render(
+export default () => (
   <Form style={{ margin: '0 auto' }} {...formItemLayout}>
     <Form.Item label="单独 AutoComplete">
       <AutoComplete />
@@ -67,7 +67,6 @@ ReactDOM.render(
         </Button>
       </Input.Group>
     </Form.Item>
-  </Form>,
-  mountNode,
+  </Form>
 );
 ```

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

@@ -33,5 +33,5 @@ const Complete: React.FC = () => (
   />
 );
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```

components/auto-complete/demo/options.md

@@ -41,5 +41,5 @@ const Complete: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```

components/auto-complete/demo/status.md

@@ -38,5 +38,5 @@ const ValidateInputs: React.FC = () => {
   );
 };
 
-ReactDOM.render(<ValidateInputs />, mountNode);
+export default () => <ValidateInputs />;
 ```

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

@@ -77,5 +77,5 @@ const Complete: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Complete />, mountNode);
+export default () => <Complete />;
 ```

components/avatar/SizeContext.tsx

@@ -7,6 +7,7 @@ const SizeContext = React.createContext<AvatarSize>('default');
 
 export interface SizeContextProps {
   size?: AvatarSize;
+  children?: React.ReactNode;
 }
 
 export const SizeContextProvider: React.FC<SizeContextProps> = ({ children, size }) => (

components/avatar/__tests__/Avatar.test.js

@@ -2,6 +2,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Avatar from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -144,9 +146,10 @@ describe('Avatar Render', () => {
 
   it('should warning when pass a string as icon props', () => {
     const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(<Avatar size={64} icon="aa" />);
+    render(<Avatar size={64} icon="aa" />);
     expect(warnSpy).not.toHaveBeenCalled();
-    mount(<Avatar size={64} icon="user" />);
+
+    render(<Avatar size={64} icon="user" />);
     expect(warnSpy).toHaveBeenCalledWith(
       `Warning: [antd: Avatar] \`icon\` is using ReactNode instead of string naming in v4. Please check \`user\` at https://ant.design/components/icon`,
     );

components/avatar/demo/badge.md

@@ -17,7 +17,7 @@ Usually used for reminders and notifications.
 import { Avatar, Badge } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <span className="avatar-item">
       <Badge count={1}>
@@ -29,8 +29,7 @@ ReactDOM.render(
         <Avatar shape="square" icon={<UserOutlined />} />
       </Badge>
     </span>
-  </>,
-  mountNode,
+  </>
 );
 ```
 

components/avatar/demo/basic.md

@@ -17,7 +17,7 @@ Three sizes and two shapes are available.
 import { Avatar } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <div>
       <Avatar size={64} icon={<UserOutlined />} />
@@ -31,8 +31,7 @@ ReactDOM.render(
       <Avatar shape="square" icon={<UserOutlined />} />
       <Avatar shape="square" size="small" icon={<UserOutlined />} />
     </div>
-  </>,
-  mountNode,
+  </>
 );
 ```
 

components/avatar/demo/dynamic.md

@@ -53,5 +53,5 @@ const Autoset: React.FC = () => {
   );
 };
 
-ReactDOM.render(<Autoset />, mountNode);
+export default () => <Autoset />;
 ```

components/avatar/demo/fallback.md

@@ -17,7 +17,7 @@ debug: true
 ```tsx
 import { Avatar } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Avatar shape="circle" src="http://abc.com/not-exist.jpg">
       A
@@ -25,7 +25,6 @@ ReactDOM.render(
     <Avatar shape="circle" src="http://abc.com/not-exist.jpg">
       ABC
     </Avatar>
-  </>,
-  mountNode,
+  </>
 );
 ```

components/avatar/demo/group.md

@@ -66,5 +66,5 @@ const Demo = () => (
   </>
 );
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```

components/avatar/demo/responsive.md

@@ -17,11 +17,10 @@ Avatar size can be automatically adjusted based on the screen size.
 import { Avatar } from 'antd';
 import { AntDesignOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Avatar
     size={{ xs: 24, sm: 32, md: 40, lg: 64, xl: 80, xxl: 100 }}
     icon={<AntDesignOutlined />}
-  />,
-  mountNode,
+  />
 );
 ```

components/avatar/demo/toggle-debug.md

@@ -71,5 +71,5 @@ const App: React.FC = () => {
   );
 };
 
-ReactDOM.render(<App />, mountNode);
+export default () => <App />;
 ```

components/avatar/demo/type.md

@@ -17,7 +17,7 @@ Image, Icon and letter are supported, and the latter two kinds of avatar can hav
 import { Avatar, Image } from 'antd';
 import { UserOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Avatar icon={<UserOutlined />} />
     <Avatar>U</Avatar>
@@ -26,8 +26,7 @@ ReactDOM.render(
     <Avatar src={<Image src="https://joeschmoe.io/api/v1/random" style={{ width: 32 }} />} />
     <Avatar style={{ color: '#f56a00', backgroundColor: '#fde3cf' }}>U</Avatar>
     <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
-  </>,
-  mountNode,
+  </>
 );
 ```
 

components/back-top/demo/basic.md

@@ -16,14 +16,13 @@ The most basic usage.
 ```jsx
 import { BackTop } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <BackTop />
     Scroll down to see the bottom-right
     <strong className="site-back-top-basic"> gray </strong>
     button.
-  </>,
-  mountNode,
+  </>
 );
 ```
 

components/back-top/demo/custom.md

@@ -28,7 +28,7 @@ const style = {
   fontSize: 14,
 };
 
-ReactDOM.render(
+export default () => (
   <div style={{ height: '600vh', padding: 8 }}>
     <div>Scroll to bottom</div>
     <div>Scroll to bottom</div>
@@ -40,7 +40,6 @@ ReactDOM.render(
     <BackTop>
       <div style={style}>UP</div>
     </BackTop>
-  </div>,
-  mountNode,
+  </div>
 );
 ```

components/badge/demo/basic.md

@@ -17,7 +17,7 @@ Simplest Usage. Badge will be hidden when `count` is `0`, but we can use `showZe
 import { Badge, Avatar } from 'antd';
 import { ClockCircleOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge count={5}>
       <Avatar shape="square" size="large" />
@@ -28,8 +28,7 @@ ReactDOM.render(
     <Badge count={<ClockCircleOutlined style={{ color: '#f5222d' }} />}>
       <Avatar shape="square" size="large" />
     </Badge>
-  </>,
-  mountNode,
+  </>
 );
 ```
 

components/badge/demo/change.md

@@ -74,5 +74,5 @@ class Demo extends React.Component {
   }
 }
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```

components/badge/demo/colorful.md

@@ -32,7 +32,7 @@ const colors = [
   'lime',
 ];
 
-ReactDOM.render(
+export default () => (
   <>
     <Divider orientation="left">Presets</Divider>
     <div>
@@ -52,8 +52,7 @@ ReactDOM.render(
       <br />
       <Badge color="#108ee9" text="#108ee9" />
     </>
-  </>,
-  mountNode,
+  </>
 );
 ```
 

components/badge/demo/dot.md

@@ -17,7 +17,7 @@ This will simply display a red badge, without a specific count. If count equals
 import { Badge } from 'antd';
 import { NotificationOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge dot>
       <NotificationOutlined style={{ fontSize: 16 }} />
@@ -25,7 +25,6 @@ ReactDOM.render(
     <Badge dot>
       <a href="#">Link something</a>
     </Badge>
-  </>,
-  mountNode,
+  </>
 );
 ```

components/badge/demo/link.md

@@ -16,12 +16,11 @@ The badge can be wrapped with `a` tag to make it linkable.
 ```jsx
 import { Badge, Avatar } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <a href="#">
     <Badge count={5}>
       <Avatar shape="square" size="large" />
     </Badge>
-  </a>,
-  mountNode,
+  </a>
 );
 ```

components/badge/demo/mix.md

@@ -17,7 +17,7 @@ Using `count/dot` with custom `stauts/color`.
 ```jsx
 import { Badge, Avatar } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge count={5} status="success">
       <Avatar shape="square" size="large" />
@@ -43,7 +43,6 @@ ReactDOM.render(
     <Badge dot color="#fa541c">
       <Avatar shape="square" size="large" />
     </Badge>
-  </>,
-  mountNode,
+  </>
 );
 ```

components/badge/demo/no-wrapper.md

@@ -36,5 +36,5 @@ const Demo = () => {
   );
 };
 
-ReactDOM.render(<Demo />, mountNode);
+export default () => <Demo />;
 ```

components/badge/demo/offset.md

@@ -16,10 +16,9 @@ Set offset of the badge dot, the format is `[left, top]`, which represents the o
 ```jsx
 import { Badge, Avatar } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Badge count={5} offset={[10, 10]}>
     <Avatar shape="square" size="large" />
-  </Badge>,
-  mountNode,
+  </Badge>
 );
 ```

components/badge/demo/overflow.md

@@ -16,7 +16,7 @@ title:
 ```jsx
 import { Badge, Avatar } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge count={99}>
       <Avatar shape="square" size="large" />
@@ -30,7 +30,6 @@ ReactDOM.render(
     <Badge count={1000} overflowCount={999}>
       <Avatar shape="square" size="large" />
     </Badge>
-  </>,
-  mountNode,
+  </>
 );
 ```

components/badge/demo/ribbbon.md

@@ -16,7 +16,7 @@ Use ribbon badge.
 ```jsx
 import { Badge, Card } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge.Ribbon text="Hippies">
       <Card title="Pushes open the window" size="small">
@@ -58,8 +58,7 @@ ReactDOM.render(
         and raises the spyglass.
       </Card>
     </Badge.Ribbon>
-  </>,
-  mountNode,
+  </>
 );
 ```
 

components/badge/demo/ribbon-debug.md

@@ -17,7 +17,7 @@ Buggy!
 ```jsx
 import { Badge, Card, Space } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Space direction="vertical" style={{ width: '100%' }}>
     <Badge.Ribbon text="啦啦啦啦">
       <Card>推开窗户举起望远镜</Card>
@@ -34,7 +34,6 @@ ReactDOM.render(
     <Badge.Ribbon text="啦啦啦啦" color="#2db7f5" placement="end">
       <Card>推开窗户举起望远镜</Card>
     </Badge.Ribbon>
-  </Space>,
-  mountNode,
+  </Space>
 );
 ```

components/badge/demo/size.md

@@ -16,7 +16,7 @@ Set size of numeral Badge.
 ```jsx
 import { Badge, Avatar } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge size="default" count={5}>
       <Avatar shape="square" size="large" />
@@ -24,7 +24,6 @@ ReactDOM.render(
     <Badge size="small" count={5}>
       <Avatar shape="square" size="large" />
     </Badge>
-  </>,
-  mountNode,
+  </>
 );
 ```

components/badge/demo/status.md

@@ -16,7 +16,7 @@ Standalone badge with status.
 ```jsx
 import { Badge } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge status="success" />
     <Badge status="error" />
@@ -33,7 +33,6 @@ ReactDOM.render(
     <Badge status="processing" text="Processing" />
     <br />
     <Badge status="warning" text="Warning" />
-  </>,
-  mountNode,
+  </>
 );
 ```

components/badge/demo/title.md

@@ -17,7 +17,7 @@ The badge will display `title` when hovered over, instead of `count`.
 ```jsx
 import { Badge, Avatar } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <>
     <Badge count={5} title="Custom hover text">
       <Avatar shape="square" size="large" />
@@ -25,7 +25,6 @@ ReactDOM.render(
     <Badge count={-5} title="Negative">
       <Avatar shape="square" size="large" />
     </Badge>
-  </>,
-  mountNode,
+  </>
 );
 ```

components/badge/index.tsx

@@ -35,6 +35,7 @@ export interface BadgeProps {
   size?: 'default' | 'small';
   offset?: [number | string, number | string];
   title?: string;
+  children?: React.ReactNode;
 }
 
 const Badge: CompoundedComponent = ({

components/badge/style/rtl.less

@@ -31,15 +31,13 @@
     }
   }
 
-  &-zoom-appear,
-  &-zoom-enter {
-    .@{badge-prefix-cls}-rtl & {
+  &:not(&-not-a-wrapper).@{badge-prefix-cls}-rtl {
+    .@{badge-prefix-cls}-zoom-appear,
+    .@{badge-prefix-cls}-zoom-enter {
       animation-name: antZoomBadgeInRtl;
     }
-  }
 
-  &-zoom-leave {
-    .@{badge-prefix-cls}-rtl & {
+    .@{badge-prefix-cls}-zoom-leave {
       animation-name: antZoomBadgeOutRtl;
     }
   }

components/breadcrumb/Breadcrumb.tsx

@@ -27,6 +27,7 @@ export interface BreadcrumbProps {
   ) => React.ReactNode;
   style?: React.CSSProperties;
   className?: string;
+  children?: React.ReactNode;
 }
 
 function getBreadcrumbName(route: Route, params: any) {

components/breadcrumb/BreadcrumbItem.tsx

@@ -12,6 +12,7 @@ export interface BreadcrumbItemProps {
   dropdownProps?: DropDownProps;
   onClick?: React.MouseEventHandler<HTMLAnchorElement | HTMLSpanElement>;
   className?: string;
+  children?: React.ReactNode;
 }
 interface BreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {
   __ANT_BREADCRUMB_ITEM: boolean;

components/breadcrumb/BreadcrumbSeparator.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { ConfigContext } from '../config-provider';
 
-interface BreadcrumbSeparatorInterface extends React.FC {
+interface BreadcrumbSeparatorInterface extends React.FC<{ children?: React.ReactNode }> {
   __ANT_BREADCRUMB_SEPARATOR: boolean;
 }
 

components/breadcrumb/__tests__/Breadcrumb.test.js

@@ -1,5 +1,7 @@
 import React from 'react';
-import { mount, render } from 'enzyme';
+import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import Breadcrumb from '../index';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
@@ -23,7 +25,7 @@ describe('Breadcrumb', () => {
   // https://github.com/airbnb/enzyme/issues/875
   it('warns on non-Breadcrumb.Item and non-Breadcrumb.Separator children', () => {
     const MyCom = () => <div>foo</div>;
-    mount(
+    render(
       <Breadcrumb>
         <MyCom />
       </Breadcrumb>,
@@ -36,7 +38,7 @@ describe('Breadcrumb', () => {
 
   // https://github.com/ant-design/ant-design/issues/5015
   it('should allow Breadcrumb.Item is null or undefined', () => {
-    const wrapper = render(
+    const { asFragment } = render(
       <Breadcrumb>
         {null}
         <Breadcrumb.Item>Home</Breadcrumb.Item>
@@ -44,24 +46,24 @@ describe('Breadcrumb', () => {
       </Breadcrumb>,
     );
     expect(errorSpy).not.toHaveBeenCalled();
-    expect(wrapper).toMatchSnapshot();
+    expect(asFragment().firstChild).toMatchSnapshot();
   });
 
   // https://github.com/ant-design/ant-design/issues/5542
   it('should not display Breadcrumb Item when its children is falsy', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Breadcrumb>
         <Breadcrumb.Item />
         <Breadcrumb.Item>xxx</Breadcrumb.Item>
         <Breadcrumb.Item>yyy</Breadcrumb.Item>
       </Breadcrumb>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   // https://github.com/ant-design/ant-design/issues/18260
   it('filter React.Fragment', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Breadcrumb separator="">
         <Breadcrumb.Item>Location</Breadcrumb.Item>
         <Breadcrumb.Separator>:</Breadcrumb.Separator>
@@ -71,7 +73,7 @@ describe('Breadcrumb', () => {
         </>
       </Breadcrumb>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should render a menu', () => {
@@ -106,27 +108,27 @@ describe('Breadcrumb', () => {
         path: 'third',
       },
     ];
-    const wrapper = render(<Breadcrumb routes={routes} />);
-    expect(wrapper).toMatchSnapshot();
+    const wrapper = mount(<Breadcrumb routes={routes} />);
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should accept undefined routes', () => {
-    const wrapper = render(<Breadcrumb routes={undefined} />);
-    expect(wrapper).toMatchSnapshot();
+    const wrapper = mount(<Breadcrumb routes={undefined} />);
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should support custom attribute', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Breadcrumb data-custom="custom">
         <Breadcrumb.Item data-custom="custom-item">xxx</Breadcrumb.Item>
         <Breadcrumb.Item>yyy</Breadcrumb.Item>
       </Breadcrumb>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('should support React.Fragment and falsy children', () => {
-    const wrapper = render(
+    const wrapper = mount(
       <Breadcrumb>
         <>
           <Breadcrumb.Item>yyy</Breadcrumb.Item>
@@ -138,7 +140,7 @@ describe('Breadcrumb', () => {
         {undefined}
       </Breadcrumb>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 
   // https://github.com/ant-design/ant-design/issues/25975
@@ -148,13 +150,13 @@ describe('Breadcrumb', () => {
         <Breadcrumb.Item>Mock Node</Breadcrumb.Item>
       </span>
     );
-    const wrapper = render(
+    const wrapper = mount(
       <Breadcrumb>
         <Breadcrumb.Item>Location</Breadcrumb.Item>
         <MockComponent />
         <Breadcrumb.Item>Application Center</Breadcrumb.Item>
       </Breadcrumb>,
     );
-    expect(wrapper).toMatchSnapshot();
+    expect(wrapper.render()).toMatchSnapshot();
   });
 });

components/breadcrumb/demo/basic.md

@@ -16,7 +16,7 @@ The simplest use.
 ```jsx
 import { Breadcrumb } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Breadcrumb>
     <Breadcrumb.Item>Home</Breadcrumb.Item>
     <Breadcrumb.Item>
@@ -26,7 +26,6 @@ ReactDOM.render(
       <a href="">Application List</a>
     </Breadcrumb.Item>
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
-  </Breadcrumb>,
-  mountNode,
+  </Breadcrumb>
 );
 ```

components/breadcrumb/demo/overlay.md

@@ -44,7 +44,7 @@ const menu = (
   />
 );
 
-ReactDOM.render(
+export default () => (
   <Breadcrumb>
     <Breadcrumb.Item>Ant Design</Breadcrumb.Item>
     <Breadcrumb.Item>
@@ -54,7 +54,6 @@ ReactDOM.render(
       <a href="">General</a>
     </Breadcrumb.Item>
     <Breadcrumb.Item>Button</Breadcrumb.Item>
-  </Breadcrumb>,
-  mountNode,
+  </Breadcrumb>
 );
 ```

components/breadcrumb/demo/react-router.md

@@ -69,11 +69,10 @@ const Home = props => {
   );
 };
 
-ReactDOM.render(
+export default () => (
   <HashRouter>
     <Home />
-  </HashRouter>,
-  mountNode,
+  </HashRouter>
 );
 ```
 

components/breadcrumb/demo/separator-component.md

@@ -16,7 +16,7 @@ The separator can be customized by setting the separator property: `Breadcrumb.S
 ```jsx
 import { Breadcrumb } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Breadcrumb separator="">
     <Breadcrumb.Item>Location</Breadcrumb.Item>
     <Breadcrumb.Separator>:</Breadcrumb.Separator>
@@ -25,7 +25,6 @@ ReactDOM.render(
     <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
     <Breadcrumb.Separator />
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
-  </Breadcrumb>,
-  mountNode,
+  </Breadcrumb>
 );
 ```

components/breadcrumb/demo/separator.md

@@ -16,13 +16,12 @@ The separator can be customized by setting the separator property: `separator=">
 ```jsx
 import { Breadcrumb } from 'antd';
 
-ReactDOM.render(
+export default () => (
   <Breadcrumb separator=">">
     <Breadcrumb.Item>Home</Breadcrumb.Item>
     <Breadcrumb.Item href="">Application Center</Breadcrumb.Item>
     <Breadcrumb.Item href="">Application List</Breadcrumb.Item>
     <Breadcrumb.Item>An Application</Breadcrumb.Item>
-  </Breadcrumb>,
-  mountNode,
+  </Breadcrumb>
 );
 ```

components/breadcrumb/demo/withIcon.md

@@ -17,7 +17,7 @@ The icon should be placed in front of the text.
 import { Breadcrumb } from 'antd';
 import { HomeOutlined, UserOutlined } from '@ant-design/icons';
 
-ReactDOM.render(
+export default () => (
   <Breadcrumb>
     <Breadcrumb.Item href="">
       <HomeOutlined />
@@ -27,7 +27,6 @@ ReactDOM.render(
       <span>Application List</span>
     </Breadcrumb.Item>
     <Breadcrumb.Item>Application</Breadcrumb.Item>
-  </Breadcrumb>,
-  mountNode,
+  </Breadcrumb>
 );
 ```

components/button/__tests__/index.test.tsx

@@ -1,5 +1,7 @@
 import React, { Component } from 'react';
-import { mount, render } from 'enzyme';
+import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
+import '@testing-library/jest-dom';
 import { act } from 'react-dom/test-utils';
 import { SearchOutlined } from '@ant-design/icons';
 import { resetWarned } from 'rc-util/lib/warning';
@@ -39,7 +41,7 @@ describe('Button', () => {
     const mockWarn = jest.fn();
     jest.spyOn(console, 'warn').mockImplementation(mockWarn);
     const size = 'who am I' as any as SizeType;
-    render(<Button.Group size={size} />);
+    mount(<Button.Group size={size} />);
     expect(mockWarn).toHaveBeenCalledTimes(1);
     expect(mockWarn.mock.calls[0][0]).toMatchObject({
       message: 'unreachable case: "who am I"',
@@ -51,12 +53,14 @@ describe('Button', () => {
     // should not insert space when there is icon
     expect(mount(<Button icon={<SearchOutlined />}>按钮</Button>).render()).toMatchSnapshot();
     // should not insert space when there is icon
-    expect(mount(
-      <Button>
-        <SearchOutlined />
-        按钮
-      </Button>,
-    ).render()).toMatchSnapshot();
+    expect(
+      mount(
+        <Button>
+          <SearchOutlined />
+          按钮
+        </Button>,
+      ).render(),
+    ).toMatchSnapshot();
     // should not insert space when there is icon
     expect(mount(<Button icon={<SearchOutlined />}>按钮</Button>).render()).toMatchSnapshot();
     // should not insert space when there is icon while loading
@@ -261,12 +265,15 @@ describe('Button', () => {
   it('should warning when pass a string as icon props', () => {
     resetWarned();
     const warnSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
-    mount(<Button type="primary" icon="ab" />);
+
+    render(<Button type="primary" icon="ab" />);
     expect(warnSpy).not.toHaveBeenCalled();
-    mount(<Button type="primary" icon="search" />);
+
+    render(<Button type="primary" icon="search" />);
     expect(warnSpy).toHaveBeenCalledWith(
       `Warning: [antd: Button] \`icon\` is using ReactNode instead of string naming in v4. Please check \`search\` at https://ant.design/components/icon`,
     );
+
     warnSpy.mockRestore();
   });
 

components/button/button-group.tsx

@@ -9,6 +9,7 @@ export interface ButtonGroupProps {
   style?: React.CSSProperties;
   className?: string;
   prefixCls?: string;
+  children?: React.ReactNode;
 }
 
 const ButtonGroup: React.FC<ButtonGroupProps> = props => (