chore: feature merge master

2024-11-29 18:50:00 +08:00 · 2023-01-19 17:21:02 +08:00 · 2023-01-19 17:21:02 +08:00 · 56f76c79ec
commit 56f76c79ec
parent 8b3868ac63 1bcb25166b
227 changed files with 21652 additions and 20031 deletions
--- a/.dumi/pages/404/index.tsx
+++ b/.dumi/pages/404/index.tsx
@ -1,7 +1,7 @@
-import React, { useEffect } from 'react';
-import { Result, Button } from 'antd';
 import { HomeOutlined } from '@ant-design/icons';
+import { Button, Result } from 'antd';
 import { Link, useLocation } from 'dumi';
+import React, { useEffect } from 'react';
 import * as utils from '../../theme/utils';

 export interface NotFoundProps {
@ -29,6 +29,15 @@ const NotFoundPage: React.FC<NotFoundProps> = ({ router }) => {
        router.replace(utils.getLocalizedPathname(`/${DIRECT_MAP[matchPath]}`, isZhCN).pathname);
      }
    }
+
+    // Report if necessary
+    const { yuyanMonitor } = window as any;
+    if (yuyanMonitor) {
+      yuyanMonitor.log({
+        code: 11,
+        msg: `Page not found: ${location.href}; Source: ${document.referrer}`,
+      });
+    }
  }, []);

  return (
--- a/.dumi/theme/builtins/Previewer/fromDumiProps.tsx
+++ b/.dumi/theme/builtins/Previewer/fromDumiProps.tsx
@ -54,7 +54,6 @@ export default function fromDumiProps<P extends object>(
            [
              (node: any) => JsonML.isElement(node) && JsonML.getTagName(node) === 'pre',
              (node: any, index: any) => {
-                // @ts-ignore
                // ref: https://github.com/benjycui/bisheng/blob/master/packages/bisheng/src/bisheng-plugin-highlight/lib/browser.js#L7
                const attr = JsonML.getAttributes(node);
                return React.createElement(
--- a/.dumi/theme/builtins/TokenTable/index.tsx
+++ b/.dumi/theme/builtins/TokenTable/index.tsx
@ -1,7 +1,6 @@
 import type { FC } from 'react';
 import React, { useMemo } from 'react';
 /* eslint import/no-unresolved: 0 */
-// @ts-ignore
 import tokenMeta from 'antd/es/version/token-meta.json';
 import { getDesignToken } from 'antd-token-previewer';
 import { Table } from 'antd';
--- a/.dumi/theme/common/styles/Demo.tsx
+++ b/.dumi/theme/common/styles/Demo.tsx
@ -2,7 +2,7 @@ import { css, Global } from '@emotion/react';
 import React from 'react';
 import useSiteToken from '../../../hooks/useSiteToken';

-export default () => {
+const GlobalDemoStyles: React.FC = () => {
  const { token } = useSiteToken();

  const { antCls, iconCls } = token;
@ -24,9 +24,9 @@ export default () => {
          display: inline-block;
          width: 100%;
          margin: 0 0 16px;
+          background-color: ${token.colorBgContainer};
          border: 1px solid ${token.colorSplit};
          border-radius: ${token.borderRadius}px;
-          background-color: ${token.colorBgContainer};
          transition: all 0.2s;

          .code-box-title {
@ -373,3 +373,5 @@ export default () => {
    />
  );
 };
+
+export default GlobalDemoStyles;
--- a/.dumi/theme/layouts/GlobalLayout.tsx
+++ b/.dumi/theme/layouts/GlobalLayout.tsx
@ -1,11 +1,16 @@
-import React, { startTransition, useCallback, useEffect, useMemo } from 'react';
-import { createSearchParams, useOutlet, useSearchParams } from 'dumi';
+import {
+  createCache,
+  legacyNotSelectorLinter,
+  logicalPropertiesLinter,
+  StyleProvider,
+} from '@ant-design/cssinjs';
 import { ConfigProvider, theme as antdTheme } from 'antd';
-import { createCache, StyleProvider, logicalPropertiesLinter } from '@ant-design/cssinjs';
 import type { DirectionType } from 'antd/es/config-provider';
-import ThemeSwitch from '../common/ThemeSwitch';
-import type { ThemeName } from '../common/ThemeSwitch';
+import { createSearchParams, useOutlet, useSearchParams } from 'dumi';
+import React, { startTransition, useCallback, useEffect, useMemo } from 'react';
 import useLocation from '../../hooks/useLocation';
+import type { ThemeName } from '../common/ThemeSwitch';
+import ThemeSwitch from '../common/ThemeSwitch';
 import type { SiteContextProps } from '../slots/SiteContext';
 import SiteContext from '../slots/SiteContext';

@ -102,7 +107,7 @@ const GlobalLayout: React.FC = () => {
  );

  return (
-    <StyleProvider cache={styleCache} linters={[logicalPropertiesLinter]}>
+    <StyleProvider cache={styleCache} linters={[logicalPropertiesLinter, legacyNotSelectorLinter]}>
      <SiteContext.Provider value={siteContextValue}>
        <ConfigProvider
          theme={{
--- a/.dumi/theme/slots/Footer/index.tsx
+++ b/.dumi/theme/slots/Footer/index.tsx
@ -120,6 +120,11 @@ const Footer = () => {
          url: 'https://mobile.ant.design',
          openExternal: true,
        },
+        {
+          title: 'Ant Design Mini',
+          url: 'https://mini.ant.design',
+          openExternal: true,
+        },
        {
          title: 'Ant Design Landing',
          description: <FormattedMessage id="app.footer.landing" />,
--- a/README-ja_JP.md
+++ b/README-ja_JP.md
@ -106,6 +106,7 @@ const App = () => (
 - [変更ログ](CHANGELOG.en-US.md)
 - [rc-components](http://react-component.github.io/)
 - [Mobile UI](http://mobile.ant.design)
+- [Mini Program UI](http://mini.ant.design)
 - [Ant Design Pro コンポーネント](https://procomponents.ant.design)
 - [Ant Design チャート](https://charts.ant.design)
 - [Ant Design アイコン](https://github.com/ant-design/ant-design-icons)
--- a/README-pt_BR.md
+++ b/README-pt_BR.md
@ -107,6 +107,7 @@ Veja [i18n](https://ant.design/docs/react/i18n).
 - [Change Log](CHANGELOG.en-US.md)
 - [rc-components](http://react-component.github.io/)
 - [Mobile UI](http://mobile.ant.design)
+- [Mini Program UI](http://mini.ant.design)
 - [Ant Design Icones](https://github.com/ant-design/ant-design-icons)
 - [Ant Design Cores](https://github.com/ant-design/ant-design-colors)
 - [Ant Design Pro Layout](https://github.com/ant-design/ant-design-pro-layout)
--- a/README-uk_UA.md
+++ b/README-uk_UA.md
@ -106,6 +106,7 @@ const App = () => (
 - [Change Log](CHANGELOG.en-US.md)
 - [rc-components](http://react-component.github.io/)
 - [Mobile UI](http://mobile.ant.design)
+- [Mini Program UI](http://mini.ant.design)
 - [Ant Design Pro Components](https://procomponents.ant.design)
 - [Ant Design Charts](https://charts.ant.design)
 - [Ant Design Icons](https://github.com/ant-design/ant-design-icons)
--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@ -110,6 +110,7 @@ const App = () => (
 - [更新日志](CHANGELOG.zh-CN.md)
 - [React 底层基础组件](http://react-component.github.io/)
 - [移动端组件](http://mobile.ant.design)
+- [小程序组件](http://mini.ant.design)
 - [页面级组件](https://procomponents.ant.design)
 - [Ant Design 图表](https://charts.ant.design)
 - [Ant Design 图标](https://github.com/ant-design/ant-design-icons)
--- a/README.md
+++ b/README.md
@ -104,6 +104,7 @@ Dozens of languages supported in `antd`, see [i18n](https://ant.design/docs/reac
 - [Change Log](CHANGELOG.en-US.md)
 - [rc-components](http://react-component.github.io/)
 - [Mobile UI](http://mobile.ant.design)
+- [Mini Program UI](http://mini.ant.design)
 - [Ant Design Pro Components](https://procomponents.ant.design)
 - [Ant Design Charts](https://charts.ant.design)
 - [Ant Design Icons](https://github.com/ant-design/ant-design-icons)
--- a/components/_util/wave/WaveEffect.tsx
+++ b/components/_util/wave/WaveEffect.tsx
@ -50,8 +50,8 @@ const WaveEffect: React.FC<WaveEffectProps> = (props) => {

    // Rect
    const { borderLeftWidth, borderTopWidth } = nodeStyle;
-    setLeft(isStatic ? target.offsetLeft : -parseFloat(borderLeftWidth));
-    setTop(isStatic ? target.offsetTop : -parseFloat(borderTopWidth));
+    setLeft(isStatic ? target.offsetLeft : validateNum(-parseFloat(borderLeftWidth)));
+    setTop(isStatic ? target.offsetTop : validateNum(-parseFloat(borderTopWidth)));
    setWidth(target.offsetWidth);
    setHeight(target.offsetHeight);

--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@ -215,7 +215,6 @@ class Affix extends React.Component<InternalAffixProps, AffixState> {
    this.setState(newState as AffixState);
  };

-  // @ts-ignore TS6133
  prepareMeasure = () => {
    // event param is used before. Keep compatible ts define here.
    this.setState({
--- a/components/anchor/tests/Anchor.test.tsx
+++ b/components/anchor/tests/Anchor.test.tsx
@ -363,7 +363,6 @@ describe('Anchor Render', () => {
        ]}
      />,
      // https://github.com/testing-library/react-testing-library/releases/tag/v13.0.0
-      // @ts-ignore
      { legacyRoot: true },
    );

@ -492,7 +491,6 @@ describe('Anchor Render', () => {
          ]}
        />,
        // https://github.com/testing-library/react-testing-library/releases/tag/v13.0.0
-        // @ts-ignore
        { legacyRoot: true },
      );

--- a/components/anchor/demo/basic.md
+++ b/components/anchor/demo/basic.md
@ -5,9 +5,3 @@
 ## en-US

 The simplest usage.
-
-<style>
-.code-box-demo .ant-affix {
-  z-index: 11;
-}
-</style>
--- a/components/anchor/demo/legacy-anchor.md
+++ b/components/anchor/demo/legacy-anchor.md
@ -1,6 +1,6 @@
 ## zh-CN

-Debug usage
+调试使用

 ## en-US

--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@ -77,6 +77,6 @@ demo:

 ### 为何受控状态下使用 onSearch 无法输入中文？

-请使用 `onChange` 进行受控管理。`onSearch` 触发于搜索输入，与 `onChange` 时机不同。此外，点选选项时也不会触发 `onSearch` 事件。
+请使用 `onChange` 进行受控管理。`onSearch` 触发于搜索输入，与 `onChange` 时机不同。此外，点击选项时也不会触发 `onSearch` 事件。

 相关 issue：[#18230](https://github.com/ant-design/ant-design/issues/18230) [#17916](https://github.com/ant-design/ant-design/issues/17916)
--- a/components/back-top/demo/basic.md
+++ b/components/back-top/demo/basic.md
@ -11,9 +11,3 @@ The most basic usage.
  color: rgba(64, 64, 64, 0.6);
 }
 ```
-
-<style>
-[data-theme="dark"] .site-back-top-basic {
-  color: rgba(255,255,255,.45);
-}
-</style>
--- a/components/breadcrumb/BreadcrumbItem.tsx
+++ b/components/breadcrumb/BreadcrumbItem.tsx
@ -48,8 +48,14 @@ const BreadcrumbItem: CompoundedComponent = (props) => {
  /** If overlay is have Wrap a Dropdown */
  const renderBreadcrumbNode = (breadcrumbItem: React.ReactNode) => {
    if (menu || overlay) {
+      const mergeDropDownProps: DropdownProps = {
+        ...dropdownProps,
+      };
+      if ('overlay' in props) {
+        mergeDropDownProps.overlay = overlay;
+      }
      return (
-        <Dropdown menu={menu} overlay={overlay} placement="bottom" {...dropdownProps}>
+        <Dropdown menu={menu} placement="bottom" {...mergeDropDownProps}>
          <span className={`${prefixCls}-overlay-link`}>
            {breadcrumbItem}
            <DownOutlined />
--- a/components/breadcrumb/tests/Breadcrumb.test.tsx
+++ b/components/breadcrumb/tests/Breadcrumb.test.tsx
@ -46,6 +46,30 @@ describe('Breadcrumb', () => {
    );
  });

+  // https://github.com/ant-design/ant-design/issues/40204
+  it('wrong overlay deprecation warning in Dropdown', () => {
+    const items = [
+      {
+        key: '1',
+        label: (
+          <a target="_blank" rel="noopener noreferrer" href="http://www.alipay.com/">
+            General
+          </a>
+        ),
+      },
+    ];
+    render(
+      <Breadcrumb>
+        <Breadcrumb.Item menu={{ items }}>
+          <a href="">General</a>
+        </Breadcrumb.Item>
+      </Breadcrumb>,
+    );
+    expect(errorSpy).not.toHaveBeenCalledWith(
+      'Warning: [antd: Dropdown] `overlay` is deprecated. Please use `menu` instead.',
+    );
+  });
+
  // https://github.com/ant-design/ant-design/issues/5015
  it('should allow Breadcrumb.Item is null or undefined', () => {
    const { asFragment } = render(
--- a/components/breadcrumb/demo/react-router.md
+++ b/components/breadcrumb/demo/react-router.md
@ -24,9 +24,3 @@ Used together with `react-router@6+`.
  margin-top: 16px;
 }
 ```
-
-<style>
-  [data-theme="dark"] .demo-nav {
-    background: #141414;
-  }
-</style>
--- a/components/button/buttonHelpers.tsx
+++ b/components/button/buttonHelpers.tsx
@ -8,7 +8,7 @@ export function isString(str: any) {
  return typeof str === 'string';
 }

-export function isUnBorderedButtonType(type: ButtonType | undefined) {
+export function isUnBorderedButtonType(type?: ButtonType) {
  return type === 'text' || type === 'link';
 }

--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@ -82,8 +82,4 @@ Following the Ant Design specification, we will add one space between if Button
  padding: 16px;
  background: rgb(190, 200, 200);
 }
-
-[data-theme="dark"] .site-button-ghost-wrapper {
-  background: rgba(255, 255, 255, 0.2);
-}
 </style>
--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@ -87,10 +87,6 @@ group:
  padding: 16px;
  background: rgb(190, 200, 200);
 }
-
-[data-theme="dark"] .site-button-ghost-wrapper {
-  background: rgba(255, 255, 255, 0.2);
-}
 </style>

 ## 设计指引
--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@ -46,6 +46,10 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
        marginInlineStart: token.marginXS,
      },

+      '> a': {
+        color: 'currentColor',
+      },
+
      '&:not(:disabled)': {
        ...genFocusStyle(token),
      },
--- a/components/card/tests/index.test.tsx
+++ b/components/card/tests/index.test.tsx
@ -61,7 +61,7 @@ describe('Card', () => {
  it('should not render when actions is number', () => {
    const numberStub = 11;
    render(
-      // @ts-ignore ingnore for the wrong action value
+      // @ts-ignore ignore for the wrong action value
      <Card title="Card title" actions={numberStub}>
        <p>Card content</p>
      </Card>,
--- a/components/card/demo/basic.md
+++ b/components/card/demo/basic.md
@ -5,10 +5,3 @@
 ## en-US

 A basic card containing a title, content and an extra corner content. Supports two sizes: `default` and `small`.
-
-<style>
-.code-box-demo p {
-  margin: 0;
-}
-#components-card-demo-basic .ant-card { margin-bottom: 30px; }
-</style>
--- a/components/collapse/demo/basic.md
+++ b/components/collapse/demo/basic.md
@ -5,9 +5,3 @@
 ## en-US

 By default, any number of panels can be expanded at a time. The first panel is expanded in this example.
-
-<style>
-[data-theme="compact"] p, p {
-  margin: 0;
-}
-</style>
--- a/components/collapse/demo/collapsible.md
+++ b/components/collapse/demo/collapsible.md
@ -7,9 +7,6 @@
 Specify the trigger area of collapsible by `collapsible`.

 <style>
-[data-theme="compact"] p, p {
-  margin: 0;
-}
 #components-collapse-demo-collapsible .ant-space {
  width: 100%;
 }
--- a/components/config-provider/tests/snapshots/components.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/components.test.tsx.snap
@ -17700,18 +17700,22 @@ HTMLCollection [
        class="config-menu config-menu-sub config-menu-inline"
        data-menu-list="true"
        id="rc-menu-uuid-test-bamboo-popup"
+        role="menu"
      >
        <li
          class="config-menu-item-group"
+          role="presentation"
        >
          <div
            class="config-menu-item-group-title"
+            role="presentation"
            title="Item 1"
          >
            Item 1
          </div>
          <ul
            class="config-menu-item-group-list"
+            role="group"
          >
            <li
              class="config-menu-item config-menu-item-only-child"
@ -17773,18 +17777,22 @@ HTMLCollection [
        class="config-menu config-menu-sub config-menu-inline"
        data-menu-list="true"
        id="rc-menu-uuid-test-bamboo-popup"
+        role="menu"
      >
        <li
          class="config-menu-item-group"
+          role="presentation"
        >
          <div
            class="config-menu-item-group-title"
+            role="presentation"
            title="Item 1"
          >
            Item 1
          </div>
          <ul
            class="config-menu-item-group-list"
+            role="group"
          >
            <li
              class="config-menu-item config-menu-item-only-child"
@ -17846,18 +17854,22 @@ HTMLCollection [
        class="config-menu config-menu-sub config-menu-inline"
        data-menu-list="true"
        id="rc-menu-uuid-test-bamboo-popup"
+        role="menu"
      >
        <li
          class="config-menu-item-group"
+          role="presentation"
        >
          <div
            class="config-menu-item-group-title"
+            role="presentation"
            title="Item 1"
          >
            Item 1
          </div>
          <ul
            class="config-menu-item-group-list"
+            role="group"
          >
            <li
              class="config-menu-item config-menu-item-only-child"
@ -17919,18 +17931,22 @@ HTMLCollection [
        class="config-menu config-menu-sub config-menu-inline"
        data-menu-list="true"
        id="rc-menu-uuid-test-bamboo-popup"
+        role="menu"
      >
        <li
          class="config-menu-item-group"
+          role="presentation"
        >
          <div
            class="config-menu-item-group-title"
+            role="presentation"
            title="Item 1"
          >
            Item 1
          </div>
          <ul
            class="config-menu-item-group-list"
+            role="group"
          >
            <li
              class="config-menu-item config-menu-item-only-child"
@ -17992,18 +18008,22 @@ HTMLCollection [
        class="ant-menu ant-menu-sub ant-menu-inline"
        data-menu-list="true"
        id="rc-menu-uuid-test-bamboo-popup"
+        role="menu"
      >
        <li
          class="ant-menu-item-group"
+          role="presentation"
        >
          <div
            class="ant-menu-item-group-title"
+            role="presentation"
            title="Item 1"
          >
            Item 1
          </div>
          <ul
            class="ant-menu-item-group-list"
+            role="group"
          >
            <li
              class="ant-menu-item ant-menu-item-only-child"
@ -18065,18 +18085,22 @@ HTMLCollection [
        class="ant-menu ant-menu-sub ant-menu-inline"
        data-menu-list="true"
        id="rc-menu-uuid-test-bamboo-popup"
+        role="menu"
      >
        <li
          class="ant-menu-item-group"
+          role="presentation"
        >
          <div
            class="ant-menu-item-group-title"
+            role="presentation"
            title="Item 1"
          >
            Item 1
          </div>
          <ul
            class="ant-menu-item-group-list"
+            role="group"
          >
            <li
              class="ant-menu-item ant-menu-item-only-child"
@ -18138,19 +18162,23 @@ HTMLCollection [
        class="prefix-Menu prefix-Menu-sub prefix-Menu-inline"
        data-menu-list="true"
        id="rc-menu-uuid-test-bamboo-popup"
+        role="menu"
      >
        <li
          class="prefix-Menu-item-group"
          prefixcls="prefix-Menu"
+          role="presentation"
        >
          <div
            class="prefix-Menu-item-group-title"
+            role="presentation"
            title="Item 1"
          >
            Item 1
          </div>
          <ul
            class="prefix-Menu-item-group-list"
+            role="group"
          >
            <li
              class="prefix-Menu-item prefix-Menu-item-only-child"
--- a/components/config-provider/demo/direction.md
+++ b/components/config-provider/demo/direction.md
@ -35,9 +35,3 @@ Components which support rtl direction are listed here, you can toggle the direc
  margin-left: 20px;
 }
 ```
-
-<style>
-[data-theme="dark"] .head-example {
-  background: rgba(255,255,255,.12);
-}
-</style>
--- a/components/config-provider/demo/locale.md
+++ b/components/config-provider/demo/locale.md
@ -5,37 +5,3 @@
 ## en-US

 Components which need localization support are listed here, you can toggle the language in the demo.
-
-```css
-.site-config-provider-calendar-wrapper {
-  width: 319px;
-  border: 1px solid #d9d9d9;
-  border-radius: 2px;
-}
-
-.locale-components {
-  padding-top: 16px;
-  border-top: 1px solid #d9d9d9;
-}
-
-.code-box-demo .example {
-  margin: 16px 0;
-}
-
-.code-box-demo .example > * {
-  margin-right: 8px;
-}
-
-.change-locale {
-  margin-bottom: 16px;
-}
-```
-
-<style>
-[data-theme="dark"] .locale-components {
-  border-top: 1px solid #303030;
-}
-[data-theme="dark"] .site-config-provider-calendar-wrapper {
-  border: 1px solid #303030;
-}
-</style>
--- a/components/config-provider/demo/locale.tsx
+++ b/components/config-provider/demo/locale.tsx
@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import type { RadioChangeEvent } from 'antd';
 import {
  Button,
@ -10,14 +9,16 @@ import {
  Popconfirm,
  Radio,
  Select,
+  Space,
  Table,
  TimePicker,
  Transfer,
 } from 'antd';
-import dayjs from 'dayjs';
-import 'dayjs/locale/zh-cn';
 import enUS from 'antd/locale/en_US';
 import zhCN from 'antd/locale/zh_CN';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import React, { useState } from 'react';

 dayjs.locale('en');

@ -28,12 +29,7 @@ const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
-    filters: [
-      {
-        text: 'filter1',
-        value: 'filter1',
-      },
-    ],
+    filters: [{ text: 'filter1', value: 'filter1' }],
  },
  {
    title: 'Age',
@ -41,7 +37,7 @@ const columns = [
  },
 ];

-const Page = () => {
+const Page: React.FC = () => {
  const [open, setOpen] = useState(false);

  const showModal = () => {
@ -67,11 +63,13 @@ const Page = () => {
  };

  return (
-    <div className="locale-components">
-      <div className="example">
-        <Pagination defaultCurrent={1} total={50} showSizeChanger />
-      </div>
-      <div className="example">
+    <Space
+      direction="vertical"
+      size={[0, 16]}
+      style={{ width: '100%', paddingTop: 16, borderTop: `1px solid #d9d9d9` }}
+    >
+      <Pagination defaultCurrent={1} total={50} showSizeChanger />
+      <Space wrap>
        <Select showSearch style={{ width: 200 }}>
          <Option value="jack">jack</Option>
          <Option value="lucy">lucy</Option>
@ -79,8 +77,8 @@ const Page = () => {
        <DatePicker />
        <TimePicker />
        <RangePicker style={{ width: 200 }} />
-      </div>
-      <div className="example">
+      </Space>
+      <Space wrap>
        <Button type="primary" onClick={showModal}>
          Show Modal
        </Button>
@ -89,20 +87,16 @@ const Page = () => {
        <Popconfirm title="Question?">
          <a href="#">Click to confirm</a>
        </Popconfirm>
-      </div>
-      <div className="example">
-        <Transfer dataSource={[]} showSearch targetKeys={[]} />
-      </div>
-      <div className="site-config-provider-calendar-wrapper">
+      </Space>
+      <Transfer dataSource={[]} showSearch targetKeys={[]} />
+      <div style={{ width: 320, border: `1px solid #d9d9d9`, borderRadius: 8 }}>
        <Calendar fullscreen={false} value={dayjs()} />
      </div>
-      <div className="example">
-        <Table dataSource={[]} columns={columns} />
-      </div>
+      <Table dataSource={[]} columns={columns} />
      <Modal title="Locale Modal" open={open} onCancel={hideModal}>
        <p>Locale Modal</p>
      </Modal>
-    </div>
+    </Space>
  );
 };

@ -121,7 +115,7 @@ const App: React.FC = () => {

  return (
    <div>
-      <div className="change-locale">
+      <div style={{ marginBottom: 16 }}>
        <span style={{ marginRight: 16 }}>Change locale of components: </span>
        <Radio.Group value={locale} onChange={changeLocale}>
          <Radio.Button key="en" value={enUS}>
--- a/components/config-provider/demo/prefixCls.tsx
+++ b/components/config-provider/demo/prefixCls.tsx
@ -1,6 +1,6 @@
-import React, { useState } from 'react';
 import { SmileOutlined } from '@ant-design/icons';
 import { Button, ConfigProvider, Select } from 'antd';
+import React, { useState } from 'react';

 // Ant Design site use `es` module for view
 // but do not replace related lib `lib` with `es`
@ -8,19 +8,17 @@ import { Button, ConfigProvider, Select } from 'antd';
 // We may need do convert in site also.
 const App: React.FC = () => {
  const [prefixCls, setPrefixCls] = useState('light');
-
  return (
-    <div>
+    <>
      <Button style={{ marginBottom: '12px' }} type="primary" onClick={() => setPrefixCls('dark')}>
        toggle prefixCls
      </Button>
-      <div>
-        <ConfigProvider prefixCls={prefixCls} iconPrefixCls="bamboo">
-          <SmileOutlined />
-          <Select />
-        </ConfigProvider>
-      </div>
-    </div>
+      <br />
+      <ConfigProvider prefixCls={prefixCls} iconPrefixCls="bamboo">
+        <SmileOutlined />
+        <Select style={{ width: 120 }} />
+      </ConfigProvider>
+    </>
  );
 };

--- a/components/config-provider/demo/size.tsx
+++ b/components/config-provider/demo/size.tsx
@ -1,4 +1,3 @@
-import React, { useState } from 'react';
 import {
  Button,
  Card,
@ -8,10 +7,12 @@ import {
  Input,
  Radio,
  Select,
+  Space,
  Table,
  Tabs,
 } from 'antd';
 import type { SizeType } from 'antd/es/config-provider/SizeContext';
+import React, { useState } from 'react';

 const { TabPane } = Tabs;

@ -19,7 +20,7 @@ const App: React.FC = () => {
  const [componentSize, setComponentSize] = useState<SizeType>('small');

  return (
-    <div>
+    <>
      <Radio.Group
        value={componentSize}
        onChange={(e) => {
@ -32,10 +33,8 @@ const App: React.FC = () => {
      </Radio.Group>
      <Divider />
      <ConfigProvider componentSize={componentSize}>
-        <div className="example">
+        <Space size={[0, 16]} style={{ width: '100%' }} direction="vertical">
          <Input />
-        </div>
-        <div className="example">
          <Tabs defaultActiveKey="1">
            <TabPane tab="Tab 1" key="1">
              Content of Tab Pane 1
@ -47,26 +46,12 @@ const App: React.FC = () => {
              Content of Tab Pane 3
            </TabPane>
          </Tabs>
-        </div>
-        <div className="example">
          <Input.Search allowClear />
-        </div>
-        <div className="example">
          <Input.TextArea allowClear />
-        </div>
-        <div className="example">
          <Select defaultValue="demo" options={[{ value: 'demo' }]} />
-        </div>
-        <div className="example">
          <DatePicker />
-        </div>
-        <div className="example">
          <DatePicker.RangePicker />
-        </div>
-        <div className="example">
          <Button>Button</Button>
-        </div>
-        <div className="example">
          <Card title="Card">
            <Table
              columns={[
@ -74,27 +59,15 @@ const App: React.FC = () => {
                { title: 'Age', dataIndex: 'age' },
              ]}
              dataSource={[
-                {
-                  key: '1',
-                  name: 'John Brown',
-                  age: 32,
-                },
-                {
-                  key: '2',
-                  name: 'Jim Green',
-                  age: 42,
-                },
-                {
-                  key: '3',
-                  name: 'Joe Black',
-                  age: 32,
-                },
+                { key: '1', name: 'John Brown', age: 32 },
+                { key: '2', name: 'Jim Green', age: 42 },
+                { key: '3', name: 'Joe Black', age: 32 },
              ]}
            />
          </Card>
-        </div>
+        </Space>
      </ConfigProvider>
-    </div>
+    </>
  );
 };

--- a/components/config-provider/demo/theme.tsx
+++ b/components/config-provider/demo/theme.tsx
@ -1,5 +1,5 @@
-import React from 'react';
 import { Button, ConfigProvider, Form, InputNumber } from 'antd';
+import React from 'react';
 import { SketchPicker } from 'react-color';

 type ThemeData = {
--- a/components/config-provider/index.en-US.md
+++ b/components/config-provider/index.en-US.md
@ -11,23 +11,25 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAA

 This component provides a configuration to all React components underneath itself via the [context API](https://facebook.github.io/react/docs/context.html). In the render tree all components will have access to the provided config.

-```jsx
+```tsx
 import { ConfigProvider } from 'antd';
+import React from 'react';

 // ...
-
-export default () => (
+const Demo: React.FC = () => (
  <ConfigProvider direction="rtl">
    <App />
  </ConfigProvider>
 );
+
+export default Demo;
 ```

 ### Content Security Policy

 Some components use dynamic style to support wave effect. You can config `csp` prop if Content Security Policy (CSP) is enabled:

-```jsx
+```tsx
 <ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
  <Button>My Button</Button>
 </ConfigProvider>
@ -69,7 +71,7 @@ Some components use dynamic style to support wave effect. You can config `csp` p

 Setting `Modal`、`Message`、`Notification` rootPrefixCls.

-```jsx
+```ts
 ConfigProvider.config({
  prefixCls: 'ant', // 4.13.0+
  iconPrefixCls: 'anticon', // 4.17.0+
--- a/components/config-provider/index.zh-CN.md
+++ b/components/config-provider/index.zh-CN.md
@ -12,23 +12,25 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*NVKORa7BCVwAAAAAAA

 ConfigProvider 使用 React 的 [context](https://facebook.github.io/react/docs/context.html) 特性，只需在应用外围包裹一次即可全局生效。

-```jsx
+```tsx
 import { ConfigProvider } from 'antd';
+import React from 'react';

 // ...
-
-export default () => (
+const Demo: React.FC = () => (
  <ConfigProvider direction="rtl">
    <App />
  </ConfigProvider>
 );
+
+export default Demo;
 ```

 ### Content Security Policy

 部分组件为了支持波纹效果，使用了动态样式。如果开启了 Content Security Policy (CSP)，你可以通过 `csp` 属性来进行配置：

-```jsx
+```tsx
 <ConfigProvider csp={{ nonce: 'YourNonceCode' }}>
  <Button>My Button</Button>
 </ConfigProvider>
@ -70,7 +72,7 @@ export default () => (

 设置 `Modal`、`Message`、`Notification` rootPrefixCls。

-```jsx
+```ts
 ConfigProvider.config({
  prefixCls: 'ant', // 4.13.0+
  iconPrefixCls: 'anticon', // 4.17.0+
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@ -117,7 +117,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
              disabled={mergedDisabled}
              ref={innerRef}
              dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
-              placeholder={getRangePlaceholder(picker, locale, placeholder)}
+              placeholder={getRangePlaceholder(locale, picker, placeholder)}
              suffixIcon={suffixNode}
              clearIcon={<CloseCircleFilled />}
              prevIcon={<span className={`${prefixCls}-prev-icon`} />}
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@ -128,7 +128,7 @@ export default function generatePicker<DateType>(generateConfig: GenerateConfig<
              return (
                <RCPicker<DateType>
                  ref={innerRef}
-                  placeholder={getPlaceholder(mergedPicker, locale, placeholder)}
+                  placeholder={getPlaceholder(locale, mergedPicker, placeholder)}
                  suffixIcon={suffixNode}
                  dropdownAlign={transPlacement2DropdownAlign(direction, placement)}
                  clearIcon={<CloseCircleFilled />}
--- a/components/date-picker/style/index.ts
+++ b/components/date-picker/style/index.ts
@ -29,6 +29,7 @@ export interface ComponentToken {
 }

 export type PickerPanelToken = {
+  pickerCellCls: string;
  pickerCellInnerCls: string;
  pickerTextHeight: number;
  pickerPanelCellWidth: number;
@ -71,6 +72,7 @@ const genPikerPadding = (
 const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
  const {
    componentCls,
+    pickerCellCls,
    pickerCellInnerCls,
    pickerPanelCellHeight,
    motionDurationSlow,
@ -117,8 +119,8 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
    },

    // >>> Hover
-    [`&:hover:not(&-in-view),
-    &:hover:not(&-selected):not(&-range-start):not(&-range-end):not(&-range-hover-start):not(&-range-hover-end)`]:
+    [`&:hover:not(${pickerCellCls}-in-view),
+    &:hover:not(${pickerCellCls}-selected):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end):not(${pickerCellCls}-range-hover-start):not(${pickerCellCls}-range-hover-end)`]:
      {
        [pickerCellInnerCls]: {
          background: controlItemBgHover,
@ -126,7 +128,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
      },

    // >>> Today
-    [`&-in-view:is(&-today) ${pickerCellInnerCls}`]: {
+    [`&-in-view${pickerCellCls}-today ${pickerCellInnerCls}`]: {
      '&::before': {
        position: 'absolute',
        top: 0,
@ -141,7 +143,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
    },

    // >>> In Range
-    '&-in-view:is(&-in-range)': {
+    [`&-in-view${pickerCellCls}-in-range`]: {
      position: 'relative',

      '&::before': {
@ -150,36 +152,36 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
    },

    // >>> Selected
-    [`&-in-view:is(&-selected) ${pickerCellInnerCls},
-    &-in-view:is(&-range-start) ${pickerCellInnerCls},
-    &-in-view:is(&-range-end) ${pickerCellInnerCls}`]: {
+    [`&-in-view${pickerCellCls}-selected ${pickerCellInnerCls},
+      &-in-view${pickerCellCls}-range-start ${pickerCellInnerCls},
+      &-in-view${pickerCellCls}-range-end ${pickerCellInnerCls}`]: {
      color: colorTextLightSolid,
      background: colorPrimary,
    },

-    [`&-in-view:is(&-range-start):not(&-range-start-single),
-      &-in-view:is(&-range-end):not(&-range-end-single)`]: {
+    [`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single),
+      &-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)`]: {
      '&::before': {
        background: controlItemBgActive,
      },
    },

-    '&-in-view:is(&-range-start)::before': {
+    [`&-in-view${pickerCellCls}-range-start::before`]: {
      insetInlineStart: '50%',
    },

-    '&-in-view:is(&-range-end)::before': {
+    [`&-in-view${pickerCellCls}-range-end::before`]: {
      insetInlineEnd: '50%',
    },

    // >>> Range Hover
-    [`&-in-view:is(&-range-hover-start):not(&-in-range):not(&-range-start):not(&-range-end),
-      &-in-view:is(&-range-hover-end):not(&-in-range):not(&-range-start):not(&-range-end),
-      &-in-view:is(&-range-hover-start):is(&-range-start-single),
-      &-in-view:is(&-range-hover-start):is(&-range-start):is(&-range-end):is(&-range-end-near-hover),
-      &-in-view:is(&-range-hover-end):is(&-range-start):is(&-range-end):is(&-range-start-near-hover),
-      &-in-view:is(&-range-hover-end):is(&-range-end-single),
-      &-in-view:is(&-range-hover):not(&-in-range)`]: {
+    [`&-in-view${pickerCellCls}-range-hover-start:not(${pickerCellCls}-in-range):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end),
+      &-in-view${pickerCellCls}-range-hover-end:not(${pickerCellCls}-in-range):not(${pickerCellCls}-range-start):not(${pickerCellCls}-range-end),
+      &-in-view${pickerCellCls}-range-hover-start${pickerCellCls}-range-start-single,
+      &-in-view${pickerCellCls}-range-hover-start${pickerCellCls}-range-start${pickerCellCls}-range-end${pickerCellCls}-range-end-near-hover,
+      &-in-view${pickerCellCls}-range-hover-end${pickerCellCls}-range-start${pickerCellCls}-range-end${pickerCellCls}-range-start-near-hover,
+      &-in-view${pickerCellCls}-range-hover-end${pickerCellCls}-range-end-single,
+      &-in-view${pickerCellCls}-range-hover:not(${pickerCellCls}-in-range)`]: {
      '&::after': {
        position: 'absolute',
        top: '50%',
@ -202,22 +204,22 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
    },

    // Hover with in range
-    [`&-in-view:is(&-in-range):is(&-range-hover)::before,
-      &-in-view:is(&-range-start):is(&-range-hover)::before,
-      &-in-view:is(&-range-end):is(&-range-hover)::before,
-      &-in-view:is(&-range-start):not(&-range-start-single):is(&-range-hover-start)::before,
-      &-in-view:is(&-range-end):not(&-range-end-single):is(&-range-hover-end)::before,
+    [`&-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover::before,
+      &-in-view${pickerCellCls}-range-start${pickerCellCls}-range-hover::before,
+      &-in-view${pickerCellCls}-range-end${pickerCellCls}-range-hover::before,
+      &-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single)${pickerCellCls}-range-hover-start::before,
+      &-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single)${pickerCellCls}-range-hover-end::before,
      ${componentCls}-panel
      > :not(${componentCls}-date-panel)
-      &-in-view:is(&-in-range):is(&-range-hover-start)::before,
+      &-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-start::before,
      ${componentCls}-panel
      > :not(${componentCls}-date-panel)
-      &-in-view:is(&-in-range):is(&-range-hover-end)::before`]: {
+      &-in-view${pickerCellCls}-in-range${pickerCellCls}-range-hover-end::before`]: {
      background: pickerBasicCellHoverWithRangeColor,
    },

    // range start border-radius
-    [`&-in-view:is(&-range-start):not(&-range-start-single):not(&-range-end) ${pickerCellInnerCls}`]:
+    [`&-in-view${pickerCellCls}-range-start:not(${pickerCellCls}-range-start-single):not(${pickerCellCls}-range-end) ${pickerCellInnerCls}`]:
      {
        borderStartStartRadius: borderRadiusSM,
        borderEndStartRadius: borderRadiusSM,
@ -226,7 +228,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
      },

    // range end border-radius
-    [`&-in-view:is(&-range-end):not(&-range-end-single):not(&-range-start) ${pickerCellInnerCls}`]:
+    [`&-in-view${pickerCellCls}-range-end:not(${pickerCellCls}-range-end-single):not(${pickerCellCls}-range-start) ${pickerCellInnerCls}`]:
      {
        borderStartStartRadius: 0,
        borderEndStartRadius: 0,
@ -234,16 +236,16 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
        borderEndEndRadius: borderRadiusSM,
      },

-    '&-range-hover:is(&-range-end)::after': {
+    [`&-range-hover${pickerCellCls}-range-end::after`]: {
      insetInlineStart: '50%',
    },

    // Edge start
-    [`tr > &-in-view:is(&-range-hover):first-child::after,
-      tr > &-in-view:is(&-range-hover-end):first-child::after,
-      &-in-view:is(&-start):is(&-range-hover-edge-start):is(&-range-hover-edge-start-near-range)::after,
-      &-in-view:is(&-range-hover-edge-start):not(&-range-hover-edge-start-near-range)::after,
-      &-in-view:is(&-range-hover-start)::after`]: {
+    [`tr > &-in-view${pickerCellCls}-range-hover:first-child::after,
+      tr > &-in-view${pickerCellCls}-range-hover-end:first-child::after,
+      &-in-view${pickerCellCls}-start${pickerCellCls}-range-hover-edge-start${pickerCellCls}-range-hover-edge-start-near-range::after,
+      &-in-view${pickerCellCls}-range-hover-edge-start:not(${pickerCellCls}-range-hover-edge-start-near-range)::after,
+      &-in-view${pickerCellCls}-range-hover-start::after`]: {
      insetInlineStart: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
      borderInlineStart: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
      borderStartStartRadius: lineWidth,
@ -251,11 +253,11 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
    },

    // Edge end
-    [`tr > &-in-view:is(&-range-hover):last-child::after,
-      tr > &-in-view:is(&-range-hover-start):last-child::after,
-      &-in-view:is(&-end):is(&-range-hover-edge-end):is(&-range-hover-edge-end-near-range)::after,
-      &-in-view:is(&-range-hover-edge-end):not(&-range-hover-edge-end-near-range)::after,
-      &-in-view:is(&-range-hover-end)::after`]: {
+    [`tr > &-in-view${pickerCellCls}-range-hover:last-child::after,
+      tr > &-in-view${pickerCellCls}-range-hover-start:last-child::after,
+      &-in-view${pickerCellCls}-end${pickerCellCls}-range-hover-edge-end${pickerCellCls}-range-hover-edge-end-near-range::after,
+      &-in-view${pickerCellCls}-range-hover-edge-end:not(${pickerCellCls}-range-hover-edge-end-near-range)::after,
+      &-in-view${pickerCellCls}-range-hover-end::after`]: {
      insetInlineEnd: (pickerPanelCellWidth - pickerPanelCellHeight) / 2,
      borderInlineEnd: `${lineWidth}px dashed ${pickerDateHoverRangeBorderColor}`,
      borderStartEndRadius: lineWidth,
@ -275,7 +277,7 @@ const genPickerCellInnerStyle = (token: SharedPickerToken): CSSObject => {
        background: colorBgContainerDisabled,
      },
    },
-    [`&-disabled:is(&-today) ${pickerCellInnerCls}::before`]: {
+    [`&-disabled${pickerCellCls}-today ${pickerCellInnerCls}::before`]: {
      borderColor: colorTextDisabled,
    },
  };
@ -542,7 +544,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
        },

      // Hover with range start & end
-      '&-range-hover:is(&-range-start)::after': {
+      [`&-range-hover${componentCls}-range-start::after`]: {
        insetInlineEnd: '50%',
      },

@ -602,7 +604,7 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
          color: colorLinkActive,
        },

-        '&:is(&-disabled)': {
+        [`&${componentCls}-today-btn-disabled`]: {
          color: colorTextDisabled,
          cursor: 'not-allowed',
        },
@ -680,8 +682,8 @@ export const genPanelStyle = (token: SharedPickerToken): CSSObject => {
        // Clear cell style
        [`${componentCls}-cell`]: {
          [`&:hover ${pickerCellInnerCls},
-      &-selected ${pickerCellInnerCls},
-      ${pickerCellInnerCls}`]: {
+            &-selected ${pickerCellInnerCls},
+            ${pickerCellInnerCls}`]: {
            background: 'transparent !important',
          },
        },
@ -1395,6 +1397,7 @@ export const initPickerPanelToken = (token: TokenWithCommonCls<GlobalToken>): Pi
  const { componentCls, controlHeightLG, controlHeightSM, colorPrimary, paddingXXS } = token;

  return {
+    pickerCellCls: `${componentCls}-cell`,
    pickerCellInnerCls: `${componentCls}-cell-inner`,
    pickerTextHeight: controlHeightLG,
    pickerPanelCellWidth: controlHeightSM * 1.5,
--- a/components/date-picker/util.ts
+++ b/components/date-picker/util.ts
@ -4,8 +4,8 @@ import type { SelectCommonPlacement } from '../_util/motion';
 import type { PickerLocale } from './generatePicker';

 export function getPlaceholder(
-  picker: PickerMode | undefined,
  locale: PickerLocale,
+  picker?: PickerMode,
  customizePlaceholder?: string,
 ): string {
  if (customizePlaceholder !== undefined) {
@ -31,8 +31,8 @@ export function getPlaceholder(
 }

 export function getRangePlaceholder(
-  picker: PickerMode | undefined,
  locale: PickerLocale,
+  picker?: PickerMode,
  customizePlaceholder?: [string, string],
 ) {
  if (customizePlaceholder !== undefined) {
--- a/components/descriptions/index.tsx
+++ b/components/descriptions/index.tsx
@ -47,8 +47,8 @@ function getColumn(column: DescriptionsProps['column'], screens: ScreenMap): num

 function getFilledItem(
  node: React.ReactElement,
-  span: number | undefined,
  rowRestCol: number,
+  span?: number,
 ): React.ReactElement {
  let clone = node;

@ -79,7 +79,7 @@ function getRows(children: React.ReactNode, column: number) {

    // Additional handle last one
    if (index === childNodes.length - 1) {
-      tmpRow.push(getFilledItem(node, span, rowRestCol));
+      tmpRow.push(getFilledItem(node, rowRestCol, span));
      rows.push(tmpRow);
      return;
    }
@ -88,7 +88,7 @@ function getRows(children: React.ReactNode, column: number) {
      rowRestCol -= mergedSpan;
      tmpRow.push(node);
    } else {
-      tmpRow.push(getFilledItem(node, mergedSpan, rowRestCol));
+      tmpRow.push(getFilledItem(node, rowRestCol, mergedSpan));
      rows.push(tmpRow);
      rowRestCol = column;
      tmpRow = [];
--- a/components/drawer/demo/basic-right.md
+++ b/components/drawer/demo/basic-right.md
@ -5,9 +5,3 @@
 ## en-US

 Basic drawer.
-
-<style>
-[data-theme='compact'] .ant-drawer-body p {
-  margin-bottom: 0;
-}
-</style>
--- a/components/drawer/demo/form-in-drawer.md
+++ b/components/drawer/demo/form-in-drawer.md
@ -18,10 +18,3 @@ Use a form in Drawer with a submit button.
  border-top: 1px solid #e9e9e9;
 }
 ```
-
-<style>
-[data-theme="dark"] .site-form-in-drawer-wrapper {
-  border-top: 1px solid #303030;
-  background: #1f1f1f;
-}
-</style>
--- a/components/drawer/demo/multi-level-drawer.md
+++ b/components/drawer/demo/multi-level-drawer.md
@ -5,10 +5,3 @@
 ## en-US

 Open a new drawer on top of an existing drawer to handle multi branch tasks.
-
-<style>
-[data-theme="dark"] .site-multi-level-drawer-footer {
-  border-top: 1px solid #303030;
-  background: #1f1f1f;
-}
-</style>
--- a/components/drawer/demo/user-profile.md
+++ b/components/drawer/demo/user-profile.md
@ -14,11 +14,6 @@ Use Drawer to quickly preview details of an object, such as those in a list.
  line-height: 1.5715;
 }

-[data-theme='compact'] .site-description-item-profile-wrapper {
-  font-size: 12px;
-  line-height: 1.66667;
-}
-
 .ant-drawer-body p.site-description-item-profile-p {
  display: block;
  margin-bottom: 16px;
@ -27,23 +22,9 @@ Use Drawer to quickly preview details of an object, such as those in a list.
  line-height: 1.5715;
 }

-[data-theme='compact'] .ant-drawer-body p.site-description-item-profile-p {
-  font-size: 14px;
-  line-height: 1.66667;
-}
-
 .site-description-item-profile-p-label {
  display: inline-block;
  margin-right: 8px;
  color: rgba(0, 0, 0, 0.85);
 }
 ```
-
-<style>
-[data-theme="dark"] .site-description-item-profile-p {
-  color: rgba(255,255,255,0.85);
-}
-[data-theme="dark"] .site-description-item-profile-wrapper {
-  color: rgba(255,255,255,0.65);
-}
-</style>
--- a/components/dropdown/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/dropdown/tests/snapshots/demo-extend.test.ts.snap
@ -6561,15 +6561,18 @@ Array [
      >
        <li
          class="ant-dropdown-menu-item-group"
+          role="presentation"
        >
          <div
            class="ant-dropdown-menu-item-group-title"
+            role="presentation"
            title="Item Group"
          >
            Item Group
          </div>
          <ul
            class="ant-dropdown-menu-item-group-list"
+            role="group"
          >
            <li
              class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@ -6706,18 +6709,22 @@ Array [
              <ul
                class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
                data-menu-list="true"
+                role="menu"
              >
                <li
                  class="ant-dropdown-menu-item-group"
+                  role="presentation"
                >
                  <div
                    class="ant-dropdown-menu-item-group-title"
+                    role="presentation"
                    title="Item 1"
                  >
                    Item 1
                  </div>
                  <ul
                    class="ant-dropdown-menu-item-group-list"
+                    role="group"
                  >
                    <li
                      class="ant-dropdown-menu-item ant-dropdown-menu-item-selected ant-dropdown-menu-item-only-child"
@ -6789,15 +6796,18 @@ Array [
                </li>
                <li
                  class="ant-dropdown-menu-item-group"
+                  role="presentation"
                >
                  <div
                    class="ant-dropdown-menu-item-group-title"
+                    role="presentation"
                    title="Item 2"
                  >
                    Item 2
                  </div>
                  <ul
                    class="ant-dropdown-menu-item-group-list"
+                    role="group"
                  >
                    <li
                      class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@ -6938,6 +6948,7 @@ Array [
              <ul
                class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
                data-menu-list="true"
+                role="menu"
              >
                <li
                  class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@ -7053,6 +7064,7 @@ Array [
                      <ul
                        class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
                        data-menu-list="true"
+                        role="menu"
                      >
                        <li
                          class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@ -7195,6 +7207,7 @@ Array [
              <ul
                class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
                data-menu-list="true"
+                role="menu"
              >
                <li
                  class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@ -9757,15 +9770,18 @@ Array [
      >
        <li
          class="ant-dropdown-menu-item-group"
+          role="presentation"
        >
          <div
            class="ant-dropdown-menu-item-group-title"
+            role="presentation"
            title="Group title"
          >
            Group title
          </div>
          <ul
            class="ant-dropdown-menu-item-group-list"
+            role="group"
          >
            <li
              class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@ -9883,6 +9899,7 @@ Array [
              <ul
                class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
                data-menu-list="true"
+                role="menu"
              >
                <li
                  class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
@ -10002,6 +10019,7 @@ Array [
              <ul
                class="ant-dropdown-menu ant-dropdown-menu-sub ant-dropdown-menu-vertical"
                data-menu-list="true"
+                role="menu"
              >
                <li
                  class="ant-dropdown-menu-item ant-dropdown-menu-item-only-child"
--- a/components/empty/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/empty/tests/snapshots/demo-extend.test.ts.snap
--- a/components/empty/tests/snapshots/demo.test.ts.snap
+++ b/components/empty/tests/snapshots/demo.test.ts.snap
--- a/components/empty/demo/config-provider.md
+++ b/components/empty/demo/config-provider.md
@ -5,10 +5,3 @@
 ## en-US

 Use ConfigProvider set global Empty style.
-
-<style>
-.code-box-demo .config-provider h4 {
-  font-size: inherit;
-  margin: 16px 0 8px 0;
-}
-</style>
--- a/components/empty/demo/config-provider.tsx
+++ b/components/empty/demo/config-provider.tsx
@ -6,6 +6,7 @@ import {
  Divider,
  List,
  Select,
+  Space,
  Switch,
  Table,
  Transfer,
@ -19,60 +20,42 @@ const customizeRenderEmpty = () => (
  </div>
 );

-const style = { width: 200 };
+const style: React.CSSProperties = { width: 200 };

 const App: React.FC = () => {
  const [customize, setCustomize] = useState(false);
-
  return (
-    <div>
+    <>
      <Switch
        unCheckedChildren="default"
        checkedChildren="customize"
        checked={customize}
-        onChange={(val) => {
-          setCustomize(val);
-        }}
+        onChange={setCustomize}
      />
-
      <Divider />
-
      <ConfigProvider renderEmpty={customize ? customizeRenderEmpty : undefined}>
-        <div className="config-provider">
+        <Space direction="vertical" style={{ width: '100%' }}>
          <h4>Select</h4>
          <Select style={style} />
-
          <h4>TreeSelect</h4>
          <TreeSelect style={style} treeData={[]} />
-
          <h4>Cascader</h4>
          <Cascader style={style} options={[]} showSearch />
-
          <h4>Transfer</h4>
          <Transfer />
-
          <h4>Table</h4>
          <Table
            style={{ marginTop: 8 }}
            columns={[
-              {
-                title: 'Name',
-                dataIndex: 'name',
-                key: 'name',
-              },
-              {
-                title: 'Age',
-                dataIndex: 'age',
-                key: 'age',
-              },
+              { title: 'Name', dataIndex: 'name', key: 'name' },
+              { title: 'Age', dataIndex: 'age', key: 'age' },
            ]}
          />
-
          <h4>List</h4>
          <List />
-        </div>
+        </Space>
      </ConfigProvider>
-    </div>
+    </>
  );
 };

--- a/components/empty/demo/customize.tsx
+++ b/components/empty/demo/customize.tsx
@ -4,9 +4,7 @@ import { Button, Empty } from 'antd';
 const App: React.FC = () => (
  <Empty
    image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg"
-    imageStyle={{
-      height: 60,
-    }}
+    imageStyle={{ height: 60 }}
    description={
      <span>
        Customize <a href="#API">Description</a>
--- a/components/empty/index.en-US.md
+++ b/components/empty/index.en-US.md
@ -60,10 +60,4 @@ Empty state placeholder.
    height: 116px;
    background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
  }
-  [data-theme="dark"] .site-empty-buildIn-simple {
-    background-image: url("https://gw.alipayobjects.com/zos/antfincdn/ldFsHUh3Xh/ea62c5fe-07bb-4fcd-9d35-19220cef372e.png");
-  }
-  [data-theme="dark"] .site-empty-buildIn-default {
-    background-image: url("https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gfq-SoT3wF0AAAAAAAAAAABkARQnAQ");
-  }
 </style>
--- a/components/empty/index.zh-CN.md
+++ b/components/empty/index.zh-CN.md
@ -61,10 +61,4 @@ cover: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ZdiZSLzEV0wAAAAAAA
    height: 116px;
    background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
  }
-  [data-theme="dark"] .site-empty-buildIn-simple {
-    background-image: url("https://gw.alipayobjects.com/zos/antfincdn/ldFsHUh3Xh/ea62c5fe-07bb-4fcd-9d35-19220cef372e.png");
-  }
-  [data-theme="dark"] .site-empty-buildIn-default {
-    background-image: url("https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*gfq-SoT3wF0AAAAAAAAAAABkARQnAQ");
-  }
 </style>
--- a/components/form/ErrorList.tsx
+++ b/components/form/ErrorList.tsx
@ -19,8 +19,8 @@ interface ErrorEntity {

 function toErrorEntity(
  error: React.ReactNode,
-  errorStatus: ValidateStatus | undefined,
  prefix: string,
+  errorStatus?: ValidateStatus,
  index: number = 0,
 ): ErrorEntity {
  return {
@ -62,9 +62,9 @@ export default function ErrorList({
  const debounceErrors = useDebounce(errors);
  const debounceWarnings = useDebounce(warnings);

-  const fullKeyList = React.useMemo(() => {
+  const fullKeyList = React.useMemo<ErrorEntity[]>(() => {
    if (help !== undefined && help !== null) {
-      return [toErrorEntity(help, helpStatus, 'help')];
+      return [toErrorEntity(help, 'help', helpStatus)];
    }

    return [
--- a/components/form/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/form/tests/snapshots/demo-extend.test.ts.snap
@ -612,6 +612,7 @@ exports[`renders ./components/form/demo/basic.tsx extend context correctly 1`] =
  autocomplete="off"
  class="ant-form ant-form-horizontal"
  id="basic"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -797,6 +798,7 @@ Array [
    autocomplete="off"
    class="ant-form ant-form-horizontal"
    id="basic"
+    style="max-width:600px"
  >
    <div
      class="ant-form-item"
@ -1583,6 +1585,7 @@ exports[`renders ./components/form/demo/control-hooks.tsx extend context correct
 <form
  class="ant-form ant-form-horizontal"
  id="control-hooks"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -1864,6 +1867,7 @@ exports[`renders ./components/form/demo/control-ref.tsx extend context correctly
 <form
  class="ant-form ant-form-horizontal"
  id="control-ref"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -2381,6 +2385,7 @@ Array [
  </label>,
  <form
    class="ant-form ant-form-horizontal"
+    style="max-width:600px"
  >
    <div
      class="ant-form-item"
@ -5177,6 +5182,7 @@ Array [
 exports[`renders ./components/form/demo/disabled-input-debug.tsx extend context correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -5687,6 +5693,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.tsx extend context cor
 <form
  class="ant-form ant-form-horizontal"
  id="dynamic_form_item"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -5812,6 +5819,7 @@ exports[`renders ./components/form/demo/dynamic-form-items.tsx extend context co
  autocomplete="off"
  class="ant-form ant-form-horizontal"
  id="dynamic_form_nest_item"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -5902,6 +5910,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.tsx extend co
  autocomplete="off"
  class="ant-form ant-form-horizontal"
  id="dynamic_form_complex"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -6164,6 +6173,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-no-style.tsx extend c
  autocomplete="off"
  class="ant-form ant-form-horizontal"
  id="dynamic_form_no_style"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -6283,6 +6293,7 @@ exports[`renders ./components/form/demo/dynamic-rule.tsx extend context correctl
 <form
  class="ant-form ant-form-horizontal"
  id="dynamic_rule"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -6434,6 +6445,7 @@ exports[`renders ./components/form/demo/form-context.tsx extend context correctl
 <form
  class="ant-form ant-form-horizontal"
  id="basicForm"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -6923,6 +6935,7 @@ exports[`renders ./components/form/demo/label-debug.tsx extend context correctly
 <form
  class="ant-form ant-form-horizontal"
  id="label-ellipsis"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -7077,6 +7090,7 @@ exports[`renders ./components/form/demo/label-debug.tsx extend context correctly
 exports[`renders ./components/form/demo/layout.tsx extend context correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -7279,6 +7293,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.tsx extend context corre
 <form
  class="ant-form ant-form-horizontal"
  id="wrap"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -7406,6 +7421,7 @@ exports[`renders ./components/form/demo/nest-messages.tsx extend context correct
 <form
  class="ant-form ant-form-horizontal"
  id="nest-messages"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -7891,6 +7907,7 @@ exports[`renders ./components/form/demo/normal-login.tsx extend context correctl
 exports[`renders ./components/form/demo/ref-item.tsx extend context correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -7978,6 +7995,7 @@ exports[`renders ./components/form/demo/register.tsx extend context correctly 1`
 <form
  class="ant-form ant-form-horizontal"
  id="register"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -9665,6 +9683,7 @@ exports[`renders ./components/form/demo/required-mark.tsx extend context correct
 exports[`renders ./components/form/demo/size.tsx extend context correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal ant-form-default"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -11084,6 +11103,7 @@ exports[`renders ./components/form/demo/time-related-controls.tsx extend context
 <form
  class="ant-form ant-form-horizontal"
  id="time_related_controls"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -18849,6 +18869,7 @@ exports[`renders ./components/form/demo/validate-other.tsx extend context correc
 <form
  class="ant-form ant-form-horizontal"
  id="validate_other"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -20443,6 +20464,7 @@ exports[`renders ./components/form/demo/validate-other.tsx extend context correc
 exports[`renders ./components/form/demo/validate-static.tsx extend context correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
@ -26687,6 +26709,7 @@ exports[`renders ./components/form/demo/warning-only.tsx extend context correctl
 exports[`renders ./components/form/demo/without-form-create.tsx extend context correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item ant-form-item-with-help"
--- a/components/form/tests/snapshots/demo.test.ts.snap
+++ b/components/form/tests/snapshots/demo.test.ts.snap
@ -448,6 +448,7 @@ exports[`renders ./components/form/demo/basic.tsx correctly 1`] = `
  autocomplete="off"
  class="ant-form ant-form-horizontal"
  id="basic"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -633,6 +634,7 @@ Array [
    autocomplete="off"
    class="ant-form ant-form-horizontal"
    id="basic"
+    style="max-width:600px"
  >
    <div
      class="ant-form-item"
@ -1205,6 +1207,7 @@ exports[`renders ./components/form/demo/control-hooks.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
  id="control-hooks"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -1387,6 +1390,7 @@ exports[`renders ./components/form/demo/control-ref.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
  id="control-ref"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -1723,6 +1727,7 @@ Array [
  </label>,
  <form
    class="ant-form ant-form-horizontal"
+    style="max-width:600px"
  >
    <div
      class="ant-form-item"
@ -2650,6 +2655,7 @@ Array [
 exports[`renders ./components/form/demo/disabled-input-debug.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -3160,6 +3166,7 @@ exports[`renders ./components/form/demo/dynamic-form-item.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
  id="dynamic_form_item"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -3285,6 +3292,7 @@ exports[`renders ./components/form/demo/dynamic-form-items.tsx correctly 1`] = `
  autocomplete="off"
  class="ant-form ant-form-horizontal"
  id="dynamic_form_nest_item"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -3375,6 +3383,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-complex.tsx correctly
  autocomplete="off"
  class="ant-form ant-form-horizontal"
  id="dynamic_form_complex"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -3555,6 +3564,7 @@ exports[`renders ./components/form/demo/dynamic-form-items-no-style.tsx correctl
  autocomplete="off"
  class="ant-form ant-form-horizontal"
  id="dynamic_form_no_style"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -3674,6 +3684,7 @@ exports[`renders ./components/form/demo/dynamic-rule.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
  id="dynamic_rule"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -3825,6 +3836,7 @@ exports[`renders ./components/form/demo/form-context.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
  id="basicForm"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -4314,6 +4326,7 @@ exports[`renders ./components/form/demo/label-debug.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
  id="label-ellipsis"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -4468,6 +4481,7 @@ exports[`renders ./components/form/demo/label-debug.tsx correctly 1`] = `
 exports[`renders ./components/form/demo/layout.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -4670,6 +4684,7 @@ exports[`renders ./components/form/demo/layout-can-wrap.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
  id="wrap"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -4797,6 +4812,7 @@ exports[`renders ./components/form/demo/nest-messages.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
  id="nest-messages"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -5282,6 +5298,7 @@ exports[`renders ./components/form/demo/normal-login.tsx correctly 1`] = `
 exports[`renders ./components/form/demo/ref-item.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -5369,6 +5386,7 @@ exports[`renders ./components/form/demo/register.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
  id="register"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -6617,6 +6635,7 @@ exports[`renders ./components/form/demo/required-mark.tsx correctly 1`] = `
 exports[`renders ./components/form/demo/size.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal ant-form-default"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -7270,6 +7289,7 @@ exports[`renders ./components/form/demo/time-related-controls.tsx correctly 1`]
 <form
  class="ant-form ant-form-horizontal"
  id="time_related_controls"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -7984,6 +8004,7 @@ exports[`renders ./components/form/demo/validate-other.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
  id="validate_other"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item"
@ -9391,6 +9412,7 @@ exports[`renders ./components/form/demo/validate-other.tsx correctly 1`] = `
 exports[`renders ./components/form/demo/validate-static.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item ant-form-item-with-help ant-form-item-has-error"
@ -11282,6 +11304,7 @@ exports[`renders ./components/form/demo/warning-only.tsx correctly 1`] = `
 exports[`renders ./components/form/demo/without-form-create.tsx correctly 1`] = `
 <form
  class="ant-form ant-form-horizontal"
+  style="max-width:600px"
 >
  <div
    class="ant-form-item ant-form-item-with-help"
--- a/components/form/demo/basic.tsx
+++ b/components/form/demo/basic.tsx
@ -1,52 +1,51 @@
 import React from 'react';
 import { Button, Checkbox, Form, Input } from 'antd';

-const App: React.FC = () => {
-  const onFinish = (values: any) => {
-    console.log('Success:', values);
-  };
-
-  const onFinishFailed = (errorInfo: any) => {
-    console.log('Failed:', errorInfo);
-  };
-
-  return (
-    <Form
-      name="basic"
-      labelCol={{ span: 8 }}
-      wrapperCol={{ span: 16 }}
-      initialValues={{ remember: true }}
-      onFinish={onFinish}
-      onFinishFailed={onFinishFailed}
-      autoComplete="off"
-    >
-      <Form.Item
-        label="Username"
-        name="username"
-        rules={[{ required: true, message: 'Please input your username!' }]}
-      >
-        <Input />
-      </Form.Item>
-
-      <Form.Item
-        label="Password"
-        name="password"
-        rules={[{ required: true, message: 'Please input your password!' }]}
-      >
-        <Input.Password />
-      </Form.Item>
-
-      <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
-        <Checkbox>Remember me</Checkbox>
-      </Form.Item>
-
-      <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
-  );
+const onFinish = (values: any) => {
+  console.log('Success:', values);
 };

+const onFinishFailed = (errorInfo: any) => {
+  console.log('Failed:', errorInfo);
+};
+
+const App: React.FC = () => (
+  <Form
+    name="basic"
+    labelCol={{ span: 8 }}
+    wrapperCol={{ span: 16 }}
+    style={{ maxWidth: 600 }}
+    initialValues={{ remember: true }}
+    onFinish={onFinish}
+    onFinishFailed={onFinishFailed}
+    autoComplete="off"
+  >
+    <Form.Item
+      label="Username"
+      name="username"
+      rules={[{ required: true, message: 'Please input your username!' }]}
+    >
+      <Input />
+    </Form.Item>
+
+    <Form.Item
+      label="Password"
+      name="password"
+      rules={[{ required: true, message: 'Please input your password!' }]}
+    >
+      <Input.Password />
+    </Form.Item>
+
+    <Form.Item name="remember" valuePropName="checked" wrapperCol={{ offset: 8, span: 16 }}>
+      <Checkbox>Remember me</Checkbox>
+    </Form.Item>
+
+    <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+      <Button type="primary" htmlType="submit">
+        Submit
+      </Button>
+    </Form.Item>
+  </Form>
+);
+
 export default App;
--- a/components/form/demo/col-24-debug.tsx
+++ b/components/form/demo/col-24-debug.tsx
@ -38,6 +38,7 @@ const App: React.FC = () => {
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
+        style={{ maxWidth: 600 }}
        autoComplete="off"
      >
        <Form.Item
--- a/components/form/demo/complex-form-control.tsx
+++ b/components/form/demo/complex-form-control.tsx
@ -3,71 +3,75 @@ import { Button, Form, Input, Select, Space, Tooltip, Typography } from 'antd';

 const { Option } = Select;

-const App: React.FC = () => {
-  const onFinish = (values: any) => {
-    console.log('Received values of form: ', values);
-  };
-
-  return (
-    <Form name="complex-form" onFinish={onFinish} labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
-      <Form.Item label="Username">
-        <Space>
-          <Form.Item
-            name="username"
-            noStyle
-            rules={[{ required: true, message: 'Username is required' }]}
-          >
-            <Input style={{ width: 160 }} placeholder="Please input" />
-          </Form.Item>
-          <Tooltip title="Useful information">
-            <Typography.Link href="#API">Need Help?</Typography.Link>
-          </Tooltip>
-        </Space>
-      </Form.Item>
-      <Form.Item label="Address">
-        <Input.Group compact>
-          <Form.Item
-            name={['address', 'province']}
-            noStyle
-            rules={[{ required: true, message: 'Province is required' }]}
-          >
-            <Select placeholder="Select province">
-              <Option value="Zhejiang">Zhejiang</Option>
-              <Option value="Jiangsu">Jiangsu</Option>
-            </Select>
-          </Form.Item>
-          <Form.Item
-            name={['address', 'street']}
-            noStyle
-            rules={[{ required: true, message: 'Street is required' }]}
-          >
-            <Input style={{ width: '50%' }} placeholder="Input street" />
-          </Form.Item>
-        </Input.Group>
-      </Form.Item>
-      <Form.Item label="BirthDate" style={{ marginBottom: 0 }}>
-        <Form.Item
-          name="year"
-          rules={[{ required: true }]}
-          style={{ display: 'inline-block', width: 'calc(50% - 8px)' }}
-        >
-          <Input placeholder="Input birth year" />
-        </Form.Item>
-        <Form.Item
-          name="month"
-          rules={[{ required: true }]}
-          style={{ display: 'inline-block', width: 'calc(50% - 8px)', margin: '0 8px' }}
-        >
-          <Input placeholder="Input birth month" />
-        </Form.Item>
-      </Form.Item>
-      <Form.Item label=" " colon={false}>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
-  );
+const onFinish = (values: any) => {
+  console.log('Received values of form: ', values);
 };

+const App: React.FC = () => (
+  <Form
+    name="complex-form"
+    onFinish={onFinish}
+    labelCol={{ span: 8 }}
+    wrapperCol={{ span: 16 }}
+    style={{ maxWidth: 600 }}
+  >
+    <Form.Item label="Username">
+      <Space>
+        <Form.Item
+          name="username"
+          noStyle
+          rules={[{ required: true, message: 'Username is required' }]}
+        >
+          <Input style={{ width: 160 }} placeholder="Please input" />
+        </Form.Item>
+        <Tooltip title="Useful information">
+          <Typography.Link href="#API">Need Help?</Typography.Link>
+        </Tooltip>
+      </Space>
+    </Form.Item>
+    <Form.Item label="Address">
+      <Input.Group compact>
+        <Form.Item
+          name={['address', 'province']}
+          noStyle
+          rules={[{ required: true, message: 'Province is required' }]}
+        >
+          <Select placeholder="Select province">
+            <Option value="Zhejiang">Zhejiang</Option>
+            <Option value="Jiangsu">Jiangsu</Option>
+          </Select>
+        </Form.Item>
+        <Form.Item
+          name={['address', 'street']}
+          noStyle
+          rules={[{ required: true, message: 'Street is required' }]}
+        >
+          <Input style={{ width: '50%' }} placeholder="Input street" />
+        </Form.Item>
+      </Input.Group>
+    </Form.Item>
+    <Form.Item label="BirthDate" style={{ marginBottom: 0 }}>
+      <Form.Item
+        name="year"
+        rules={[{ required: true }]}
+        style={{ display: 'inline-block', width: 'calc(50% - 8px)' }}
+      >
+        <Input placeholder="Input birth year" />
+      </Form.Item>
+      <Form.Item
+        name="month"
+        rules={[{ required: true }]}
+        style={{ display: 'inline-block', width: 'calc(50% - 8px)', margin: '0 8px' }}
+      >
+        <Input placeholder="Input birth month" />
+      </Form.Item>
+    </Form.Item>
+    <Form.Item label=" " colon={false}>
+      <Button type="primary" htmlType="submit">
+        Submit
+      </Button>
+    </Form.Item>
+  </Form>
+);
+
 export default App;
--- a/components/form/demo/control-hooks.tsx
+++ b/components/form/demo/control-hooks.tsx
@ -1,5 +1,5 @@
-import React from 'react';
 import { Button, Form, Input, Select } from 'antd';
+import React from 'react';

 const { Option } = Select;

@ -7,6 +7,7 @@ const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
 };
+
 const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
 };
@ -18,10 +19,10 @@ const App: React.FC = () => {
    switch (value) {
      case 'male':
        form.setFieldsValue({ note: 'Hi, man!' });
-        return;
+        break;
      case 'female':
        form.setFieldsValue({ note: 'Hi, lady!' });
-        return;
+        break;
      case 'other':
        form.setFieldsValue({ note: 'Hi there!' });
        break;
@ -38,14 +39,17 @@ const App: React.FC = () => {
  };

  const onFill = () => {
-    form.setFieldsValue({
-      note: 'Hello world!',
-      gender: 'male',
-    });
+    form.setFieldsValue({ note: 'Hello world!', gender: 'male' });
  };

  return (
-    <Form {...layout} form={form} name="control-hooks" onFinish={onFinish}>
+    <Form
+      {...layout}
+      form={form}
+      name="control-hooks"
+      onFinish={onFinish}
+      style={{ maxWidth: 600 }}
+    >
      <Form.Item name="note" label="Note" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
--- a/components/form/demo/control-ref.tsx
+++ b/components/form/demo/control-ref.tsx
@ -8,6 +8,7 @@ const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
 };
+
 const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
 };
@ -19,10 +20,10 @@ const App: React.FC = () => {
    switch (value) {
      case 'male':
        formRef.current?.setFieldsValue({ note: 'Hi, man!' });
-        return;
+        break;
      case 'female':
        formRef.current?.setFieldsValue({ note: 'Hi, lady!' });
-        return;
+        break;
      case 'other':
        formRef.current?.setFieldsValue({ note: 'Hi there!' });
        break;
@ -44,7 +45,13 @@ const App: React.FC = () => {
  };

  return (
-    <Form {...layout} ref={formRef} name="control-ref" onFinish={onFinish}>
+    <Form
+      {...layout}
+      ref={formRef}
+      name="control-ref"
+      onFinish={onFinish}
+      style={{ maxWidth: 600 }}
+    >
      <Form.Item name="note" label="Note" rules={[{ required: true }]}>
        <Input />
      </Form.Item>
--- a/components/form/demo/dep-debug.tsx
+++ b/components/form/demo/dep-debug.tsx
@ -9,10 +9,8 @@ const App: React.FC = () => {
    <Form
      form={form}
      name="debug"
-      initialValues={{
-        debug1: 'debug1',
-        debug2: 'debug2',
-      }}
+      initialValues={{ debug1: 'debug1', debug2: 'debug2' }}
+      style={{ maxWidth: 600 }}
    >
      <Form.Item noStyle dependencies={['debug1']}>
        {
--- a/components/form/demo/disabled-input-debug.md
+++ b/components/form/demo/disabled-input-debug.md
@ -4,4 +4,4 @@ Test disabled Input with validate state

 ## en-US

-Test disabled Input with validate state
+Test disabled Input with validate state.
--- a/components/form/demo/disabled-input-debug.tsx
+++ b/components/form/demo/disabled-input-debug.tsx
@ -2,7 +2,7 @@ import React from 'react';
 import { Form, Input } from 'antd';

 const App: React.FC = () => (
-  <Form>
+  <Form style={{ maxWidth: 600 }}>
    <Form.Item label="Normal0">
      <Input placeholder="unavailable choice" value="Buggy!" />
    </Form.Item>
--- a/components/form/demo/disabled.tsx
+++ b/components/form/demo/disabled.tsx
@ -18,7 +18,7 @@ import {
 const { RangePicker } = DatePicker;
 const { TextArea } = Input;

-const FormDisabledDemo = () => {
+const FormDisabledDemo: React.FC = () => {
  const [componentDisabled, setComponentDisabled] = useState<boolean>(true);
  const onFormLayoutChange = ({ disabled }: { disabled: boolean }) => {
    setComponentDisabled(disabled);
@ -38,6 +38,7 @@ const FormDisabledDemo = () => {
        layout="horizontal"
        onValuesChange={onFormLayoutChange}
        disabled={componentDisabled}
+        style={{ maxWidth: 600 }}
      >
        <Form.Item label="Checkbox" name="disabled" valuePropName="checked">
          <Checkbox>Checkbox</Checkbox>
--- a/components/form/demo/dynamic-form-item.md
+++ b/components/form/demo/dynamic-form-item.md
@ -24,12 +24,3 @@ Add or remove form items dynamically. `add` function support config initial valu
  opacity: 0.5;
 }
 ```
-
-<style>
-  [data-theme="dark"] .dynamic-delete-button {
-    color: rgba(255,255,255,.45);
-  }
-  [data-theme="dark"] .dynamic-delete-button:hover {
-    color: rgba(255,255,255,.65);
-  }
-</style>
--- a/components/form/demo/dynamic-form-item.tsx
+++ b/components/form/demo/dynamic-form-item.tsx
@ -12,6 +12,7 @@ const formItemLayout = {
    sm: { span: 20 },
  },
 };
+
 const formItemLayoutWithOutLabel = {
  wrapperCol: {
    xs: { span: 24, offset: 0 },
@ -25,7 +26,12 @@ const App: React.FC = () => {
  };

  return (
-    <Form name="dynamic_form_item" {...formItemLayoutWithOutLabel} onFinish={onFinish}>
+    <Form
+      name="dynamic_form_item"
+      {...formItemLayoutWithOutLabel}
+      onFinish={onFinish}
+      style={{ maxWidth: 600 }}
+    >
      <Form.List
        name="names"
        rules={[
--- a/components/form/demo/dynamic-form-items-complex.tsx
+++ b/components/form/demo/dynamic-form-items-complex.tsx
@ -28,7 +28,13 @@ const App: React.FC = () => {
  };

  return (
-    <Form form={form} name="dynamic_form_complex" onFinish={onFinish} autoComplete="off">
+    <Form
+      form={form}
+      name="dynamic_form_complex"
+      onFinish={onFinish}
+      style={{ maxWidth: 600 }}
+      autoComplete="off"
+    >
      <Form.Item name="area" label="Area" rules={[{ required: true, message: 'Missing area' }]}>
        <Select options={areas} onChange={handleChange} />
      </Form.Item>
--- a/components/form/demo/dynamic-form-items-no-style.tsx
+++ b/components/form/demo/dynamic-form-items-no-style.tsx
@ -2,48 +2,51 @@ import React from 'react';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Form, Input, Space } from 'antd';

-const App: React.FC = () => {
-  const onFinish = (values: any) => {
-    console.log('Received values of form:', values);
-  };
-
-  return (
-    <Form name="dynamic_form_no_style" onFinish={onFinish} autoComplete="off">
-      <Form.Item label="Users">
-        <Form.List name="users">
-          {(fields, { add, remove }) => (
-            <>
-              {fields.map((field) => (
-                <Space key={field.key} style={{ marginBottom: 16 }}>
-                  <Form.Item noStyle name={[field.name, 'lastName']} rules={[{ required: true }]}>
-                    <Input placeholder="Last Name" />
-                  </Form.Item>
-                  <Form.Item noStyle name={[field.name, 'firstName']} rules={[{ required: true }]}>
-                    <Input placeholder="First Name" />
-                  </Form.Item>
-                  <MinusCircleOutlined
-                    onClick={() => {
-                      remove(field.name);
-                    }}
-                  />
-                </Space>
-              ))}
-              <Form.Item>
-                <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
-                  Add field
-                </Button>
-              </Form.Item>
-            </>
-          )}
-        </Form.List>
-      </Form.Item>
-      <Form.Item>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
-  );
+const onFinish = (values: any) => {
+  console.log('Received values of form:', values);
 };

+const App: React.FC = () => (
+  <Form
+    name="dynamic_form_no_style"
+    onFinish={onFinish}
+    style={{ maxWidth: 600 }}
+    autoComplete="off"
+  >
+    <Form.Item label="Users">
+      <Form.List name="users">
+        {(fields, { add, remove }) => (
+          <>
+            {fields.map((field) => (
+              <Space key={field.key} style={{ marginBottom: 16 }}>
+                <Form.Item noStyle name={[field.name, 'lastName']} rules={[{ required: true }]}>
+                  <Input placeholder="Last Name" />
+                </Form.Item>
+                <Form.Item noStyle name={[field.name, 'firstName']} rules={[{ required: true }]}>
+                  <Input placeholder="First Name" />
+                </Form.Item>
+                <MinusCircleOutlined
+                  onClick={() => {
+                    remove(field.name);
+                  }}
+                />
+              </Space>
+            ))}
+            <Form.Item>
+              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
+                Add field
+              </Button>
+            </Form.Item>
+          </>
+        )}
+      </Form.List>
+    </Form.Item>
+    <Form.Item>
+      <Button type="primary" htmlType="submit">
+        Submit
+      </Button>
+    </Form.Item>
+  </Form>
+);
+
 export default App;
--- a/components/form/demo/dynamic-form-items.tsx
+++ b/components/form/demo/dynamic-form-items.tsx
@ -2,50 +2,53 @@ import React from 'react';
 import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
 import { Button, Form, Input, Space } from 'antd';

-const App: React.FC = () => {
-  const onFinish = (values: any) => {
-    console.log('Received values of form:', values);
-  };
-
-  return (
-    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
-      <Form.List name="users">
-        {(fields, { add, remove }) => (
-          <>
-            {fields.map(({ key, name, ...restField }) => (
-              <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
-                <Form.Item
-                  {...restField}
-                  name={[name, 'first']}
-                  rules={[{ required: true, message: 'Missing first name' }]}
-                >
-                  <Input placeholder="First Name" />
-                </Form.Item>
-                <Form.Item
-                  {...restField}
-                  name={[name, 'last']}
-                  rules={[{ required: true, message: 'Missing last name' }]}
-                >
-                  <Input placeholder="Last Name" />
-                </Form.Item>
-                <MinusCircleOutlined onClick={() => remove(name)} />
-              </Space>
-            ))}
-            <Form.Item>
-              <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
-                Add field
-              </Button>
-            </Form.Item>
-          </>
-        )}
-      </Form.List>
-      <Form.Item>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
-  );
+const onFinish = (values: any) => {
+  console.log('Received values of form:', values);
 };

+const App: React.FC = () => (
+  <Form
+    name="dynamic_form_nest_item"
+    onFinish={onFinish}
+    style={{ maxWidth: 600 }}
+    autoComplete="off"
+  >
+    <Form.List name="users">
+      {(fields, { add, remove }) => (
+        <>
+          {fields.map(({ key, name, ...restField }) => (
+            <Space key={key} style={{ display: 'flex', marginBottom: 8 }} align="baseline">
+              <Form.Item
+                {...restField}
+                name={[name, 'first']}
+                rules={[{ required: true, message: 'Missing first name' }]}
+              >
+                <Input placeholder="First Name" />
+              </Form.Item>
+              <Form.Item
+                {...restField}
+                name={[name, 'last']}
+                rules={[{ required: true, message: 'Missing last name' }]}
+              >
+                <Input placeholder="Last Name" />
+              </Form.Item>
+              <MinusCircleOutlined onClick={() => remove(name)} />
+            </Space>
+          ))}
+          <Form.Item>
+            <Button type="dashed" onClick={() => add()} block icon={<PlusOutlined />}>
+              Add field
+            </Button>
+          </Form.Item>
+        </>
+      )}
+    </Form.List>
+    <Form.Item>
+      <Button type="primary" htmlType="submit">
+        Submit
+      </Button>
+    </Form.Item>
+  </Form>
+);
+
 export default App;
--- a/components/form/demo/dynamic-rule.tsx
+++ b/components/form/demo/dynamic-rule.tsx
@ -33,17 +33,12 @@ const App: React.FC = () => {
  };

  return (
-    <Form form={form} name="dynamic_rule">
+    <Form form={form} name="dynamic_rule" style={{ maxWidth: 600 }}>
      <Form.Item
        {...formItemLayout}
        name="username"
        label="Name"
-        rules={[
-          {
-            required: true,
-            message: 'Please input your name',
-          },
-        ]}
+        rules={[{ required: true, message: 'Please input your name' }]}
      >
        <Input placeholder="Please input your name" />
      </Form.Item>
@ -51,12 +46,7 @@ const App: React.FC = () => {
        {...formItemLayout}
        name="nickname"
        label="Nickname"
-        rules={[
-          {
-            required: checkNick,
-            message: 'Please input your nickname',
-          },
-        ]}
+        rules={[{ required: checkNick, message: 'Please input your nickname' }]}
      >
        <Input placeholder="Please input your nickname" />
      </Form.Item>
--- a/components/form/demo/form-context.md
+++ b/components/form/demo/form-context.md
@ -5,18 +5,3 @@
 ## en-US

 Use `Form.Provider` to process data between forms. In this case, submit button is in the Modal which is out of Form. You can use `form.submit` to submit form. Besides, we recommend native `<Button htmlType="submit" />` to submit a form.
-
-```css
-#components-form-demo-form-context .user {
-  margin-bottom: 8px;
-}
-
-#components-form-demo-form-context .user .ant-avatar {
-  margin-right: 8px;
-}
-
-.ant-row-rtl #components-form-demo-form-context .user .ant-avatar {
-  margin-right: 0;
-  margin-left: 8px;
-}
-```
--- a/components/form/demo/form-context.tsx
+++ b/components/form/demo/form-context.tsx
@ -7,6 +7,7 @@ const layout = {
  labelCol: { span: 8 },
  wrapperCol: { span: 16 },
 };
+
 const tailLayout = {
  wrapperCol: { offset: 8, span: 16 },
 };
@ -88,7 +89,7 @@ const App: React.FC = () => {
        }
      }}
    >
-      <Form {...layout} name="basicForm" onFinish={onFinish}>
+      <Form {...layout} name="basicForm" onFinish={onFinish} style={{ maxWidth: 600 }}>
        <Form.Item name="group" label="Group Name" rules={[{ required: true }]}>
          <Input />
        </Form.Item>
--- a/components/form/demo/label-debug.tsx
+++ b/components/form/demo/label-debug.tsx
@ -2,7 +2,12 @@ import React from 'react';
 import { Form, Input, Typography } from 'antd';

 const App: React.FC = () => (
-  <Form name="label-ellipsis" labelCol={{ span: 8 }} wrapperCol={{ span: 16 }}>
+  <Form
+    name="label-ellipsis"
+    labelCol={{ span: 8 }}
+    wrapperCol={{ span: 16 }}
+    style={{ maxWidth: 600 }}
+  >
    <Form.Item
      label={
        <Typography.Text ellipsis>
--- a/components/form/demo/layout-can-wrap.tsx
+++ b/components/form/demo/layout-can-wrap.tsx
@ -9,6 +9,7 @@ const App: React.FC = () => (
    labelWrap
    wrapperCol={{ flex: 1 }}
    colon={false}
+    style={{ maxWidth: 600 }}
  >
    <Form.Item label="正常标签文案" name="username" rules={[{ required: true }]}>
      <Input />
--- a/components/form/demo/layout.tsx
+++ b/components/form/demo/layout.tsx
@ -12,19 +12,10 @@ const App: React.FC = () => {
  };

  const formItemLayout =
-    formLayout === 'horizontal'
-      ? {
-          labelCol: { span: 4 },
-          wrapperCol: { span: 14 },
-        }
-      : null;
+    formLayout === 'horizontal' ? { labelCol: { span: 4 }, wrapperCol: { span: 14 } } : null;

  const buttonItemLayout =
-    formLayout === 'horizontal'
-      ? {
-          wrapperCol: { span: 14, offset: 4 },
-        }
-      : null;
+    formLayout === 'horizontal' ? { wrapperCol: { span: 14, offset: 4 } } : null;

  return (
    <Form
@ -33,6 +24,7 @@ const App: React.FC = () => {
      form={form}
      initialValues={{ layout: formLayout }}
      onValuesChange={onFormLayoutChange}
+      style={{ maxWidth: 600 }}
    >
      <Form.Item label="Form Layout" name="layout">
        <Radio.Group value={formLayout}>
--- a/components/form/demo/nest-messages.tsx
+++ b/components/form/demo/nest-messages.tsx
@ -19,35 +19,39 @@ const validateMessages = {
 };
 /* eslint-enable no-template-curly-in-string */

-const App: React.FC = () => {
-  const onFinish = (values: any) => {
-    console.log(values);
-  };
-
-  return (
-    <Form {...layout} name="nest-messages" onFinish={onFinish} validateMessages={validateMessages}>
-      <Form.Item name={['user', 'name']} label="Name" rules={[{ required: true }]}>
-        <Input />
-      </Form.Item>
-      <Form.Item name={['user', 'email']} label="Email" rules={[{ type: 'email' }]}>
-        <Input />
-      </Form.Item>
-      <Form.Item name={['user', 'age']} label="Age" rules={[{ type: 'number', min: 0, max: 99 }]}>
-        <InputNumber />
-      </Form.Item>
-      <Form.Item name={['user', 'website']} label="Website">
-        <Input />
-      </Form.Item>
-      <Form.Item name={['user', 'introduction']} label="Introduction">
-        <Input.TextArea />
-      </Form.Item>
-      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
-  );
+const onFinish = (values: any) => {
+  console.log(values);
 };

+const App: React.FC = () => (
+  <Form
+    {...layout}
+    name="nest-messages"
+    onFinish={onFinish}
+    style={{ maxWidth: 600 }}
+    validateMessages={validateMessages}
+  >
+    <Form.Item name={['user', 'name']} label="Name" rules={[{ required: true }]}>
+      <Input />
+    </Form.Item>
+    <Form.Item name={['user', 'email']} label="Email" rules={[{ type: 'email' }]}>
+      <Input />
+    </Form.Item>
+    <Form.Item name={['user', 'age']} label="Age" rules={[{ type: 'number', min: 0, max: 99 }]}>
+      <InputNumber />
+    </Form.Item>
+    <Form.Item name={['user', 'website']} label="Website">
+      <Input />
+    </Form.Item>
+    <Form.Item name={['user', 'introduction']} label="Introduction">
+      <Input.TextArea />
+    </Form.Item>
+    <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
+      <Button type="primary" htmlType="submit">
+        Submit
+      </Button>
+    </Form.Item>
+  </Form>
+);
+
 export default App;
--- a/components/form/demo/ref-item.tsx
+++ b/components/form/demo/ref-item.tsx
@ -7,7 +7,7 @@ const App: React.FC = () => {
  const ref = React.useRef<InputRef>(null);

  return (
-    <Form form={form} initialValues={{ list: ['light'] }}>
+    <Form form={form} initialValues={{ list: ['light'] }} style={{ maxWidth: 600 }}>
      <Form.Item name="test" label="test">
        <Input ref={ref} />
      </Form.Item>
--- a/components/form/demo/register.tsx
+++ b/components/form/demo/register.tsx
@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import type { CascaderProps } from 'antd';
 import {
  AutoComplete,
  Button,
@ -11,10 +11,17 @@ import {
  Row,
  Select,
 } from 'antd';
+import React, { useState } from 'react';

 const { Option } = Select;

-const residences = [
+interface DataNodeType {
+  value: string;
+  label: string;
+  children?: DataNodeType[];
+}
+
+const residences: CascaderProps<DataNodeType>['options'] = [
  {
    value: 'zhejiang',
    label: 'Zhejiang',
@ -59,6 +66,7 @@ const formItemLayout = {
    sm: { span: 16 },
  },
 };
+
 const tailFormItemLayout = {
  wrapperCol: {
    xs: {
@ -118,10 +126,8 @@ const App: React.FC = () => {
      form={form}
      name="register"
      onFinish={onFinish}
-      initialValues={{
-        residence: ['zhejiang', 'hangzhou', 'xihu'],
-        prefix: '86',
-      }}
+      initialValues={{ residence: ['zhejiang', 'hangzhou', 'xihu'], prefix: '86' }}
+      style={{ maxWidth: 600 }}
      scrollToFirstError
    >
      <Form.Item
--- a/components/form/demo/size.tsx
+++ b/components/form/demo/size.tsx
@ -29,6 +29,7 @@ const App: React.FC = () => {
      initialValues={{ size: componentSize }}
      onValuesChange={onFormLayoutChange}
      size={componentSize as SizeType}
+      style={{ maxWidth: 600 }}
    >
      <Form.Item label="Form Size" name="size">
        <Radio.Group>
@ -58,12 +59,7 @@ const App: React.FC = () => {
            {
              value: 'zhejiang',
              label: 'Zhejiang',
-              children: [
-                {
-                  value: 'hangzhou',
-                  label: 'Hangzhou',
-                },
-              ],
+              children: [{ value: 'hangzhou', label: 'Hangzhou' }],
            },
          ]}
        />
--- a/components/form/demo/time-related-controls.tsx
+++ b/components/form/demo/time-related-controls.tsx
@ -13,65 +13,65 @@ const formItemLayout = {
    sm: { span: 16 },
  },
 };
+
 const config = {
  rules: [{ type: 'object' as const, required: true, message: 'Please select time!' }],
 };
+
 const rangeConfig = {
  rules: [{ type: 'array' as const, required: true, message: 'Please select time!' }],
 };

-const App: React.FC = () => {
-  const onFinish = (fieldsValue: any) => {
-    // Should format date value before submit.
-    const rangeValue = fieldsValue['range-picker'];
-    const rangeTimeValue = fieldsValue['range-time-picker'];
-    const values = {
-      ...fieldsValue,
-      'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
-      'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),
-      'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
-      'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
-      'range-time-picker': [
-        rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
-        rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
-      ],
-      'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
-    };
-    console.log('Received values of form: ', values);
+const onFinish = (fieldsValue: any) => {
+  // Should format date value before submit.
+  const rangeValue = fieldsValue['range-picker'];
+  const rangeTimeValue = fieldsValue['range-time-picker'];
+  const values = {
+    ...fieldsValue,
+    'date-picker': fieldsValue['date-picker'].format('YYYY-MM-DD'),
+    'date-time-picker': fieldsValue['date-time-picker'].format('YYYY-MM-DD HH:mm:ss'),
+    'month-picker': fieldsValue['month-picker'].format('YYYY-MM'),
+    'range-picker': [rangeValue[0].format('YYYY-MM-DD'), rangeValue[1].format('YYYY-MM-DD')],
+    'range-time-picker': [
+      rangeTimeValue[0].format('YYYY-MM-DD HH:mm:ss'),
+      rangeTimeValue[1].format('YYYY-MM-DD HH:mm:ss'),
+    ],
+    'time-picker': fieldsValue['time-picker'].format('HH:mm:ss'),
  };
-
-  return (
-    <Form name="time_related_controls" {...formItemLayout} onFinish={onFinish}>
-      <Form.Item name="date-picker" label="DatePicker" {...config}>
-        <DatePicker />
-      </Form.Item>
-      <Form.Item name="date-time-picker" label="DatePicker[showTime]" {...config}>
-        <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
-      </Form.Item>
-      <Form.Item name="month-picker" label="MonthPicker" {...config}>
-        <DatePicker picker="month" />
-      </Form.Item>
-      <Form.Item name="range-picker" label="RangePicker" {...rangeConfig}>
-        <RangePicker />
-      </Form.Item>
-      <Form.Item name="range-time-picker" label="RangePicker[showTime]" {...rangeConfig}>
-        <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
-      </Form.Item>
-      <Form.Item name="time-picker" label="TimePicker" {...config}>
-        <TimePicker />
-      </Form.Item>
-      <Form.Item
-        wrapperCol={{
-          xs: { span: 24, offset: 0 },
-          sm: { span: 16, offset: 8 },
-        }}
-      >
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
-  );
+  console.log('Received values of form: ', values);
 };

+const App: React.FC = () => (
+  <Form
+    name="time_related_controls"
+    {...formItemLayout}
+    onFinish={onFinish}
+    style={{ maxWidth: 600 }}
+  >
+    <Form.Item name="date-picker" label="DatePicker" {...config}>
+      <DatePicker />
+    </Form.Item>
+    <Form.Item name="date-time-picker" label="DatePicker[showTime]" {...config}>
+      <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" />
+    </Form.Item>
+    <Form.Item name="month-picker" label="MonthPicker" {...config}>
+      <DatePicker picker="month" />
+    </Form.Item>
+    <Form.Item name="range-picker" label="RangePicker" {...rangeConfig}>
+      <RangePicker />
+    </Form.Item>
+    <Form.Item name="range-time-picker" label="RangePicker[showTime]" {...rangeConfig}>
+      <RangePicker showTime format="YYYY-MM-DD HH:mm:ss" />
+    </Form.Item>
+    <Form.Item name="time-picker" label="TimePicker" {...config}>
+      <TimePicker />
+    </Form.Item>
+    <Form.Item wrapperCol={{ xs: { span: 24, offset: 0 }, sm: { span: 16, offset: 8 } }}>
+      <Button type="primary" htmlType="submit">
+        Submit
+      </Button>
+    </Form.Item>
+  </Form>
+);
+
 export default App;
--- a/components/form/demo/useWatch.tsx
+++ b/components/form/demo/useWatch.tsx
@ -1,7 +1,7 @@
 import React from 'react';
 import { Form, Input, InputNumber, Typography } from 'antd';

-const Demo = () => {
+const Demo: React.FC = () => {
  const [form] = Form.useForm<{ name: string; age: number }>();
  const nameValue = Form.useWatch('name', form);

--- a/components/form/demo/validate-other.tsx
+++ b/components/form/demo/validate-other.tsx
@ -30,167 +30,162 @@ const normFile = (e: any) => {
  return e?.fileList;
 };

-const App: React.FC = () => {
-  const onFinish = (values: any) => {
-    console.log('Received values of form: ', values);
-  };
-
-  return (
-    <Form
-      name="validate_other"
-      {...formItemLayout}
-      onFinish={onFinish}
-      initialValues={{
-        'input-number': 3,
-        'checkbox-group': ['A', 'B'],
-        rate: 3.5,
-      }}
-    >
-      <Form.Item label="Plain Text">
-        <span className="ant-form-text">China</span>
-      </Form.Item>
-      <Form.Item
-        name="select"
-        label="Select"
-        hasFeedback
-        rules={[{ required: true, message: 'Please select your country!' }]}
-      >
-        <Select placeholder="Please select a country">
-          <Option value="china">China</Option>
-          <Option value="usa">U.S.A</Option>
-        </Select>
-      </Form.Item>
-
-      <Form.Item
-        name="select-multiple"
-        label="Select[multiple]"
-        rules={[{ required: true, message: 'Please select your favourite colors!', type: 'array' }]}
-      >
-        <Select mode="multiple" placeholder="Please select favourite colors">
-          <Option value="red">Red</Option>
-          <Option value="green">Green</Option>
-          <Option value="blue">Blue</Option>
-        </Select>
-      </Form.Item>
-
-      <Form.Item label="InputNumber">
-        <Form.Item name="input-number" noStyle>
-          <InputNumber min={1} max={10} />
-        </Form.Item>
-        <span className="ant-form-text" style={{ marginLeft: 8 }}>
-          machines
-        </span>
-      </Form.Item>
-
-      <Form.Item name="switch" label="Switch" valuePropName="checked">
-        <Switch />
-      </Form.Item>
-
-      <Form.Item name="slider" label="Slider">
-        <Slider
-          marks={{
-            0: 'A',
-            20: 'B',
-            40: 'C',
-            60: 'D',
-            80: 'E',
-            100: 'F',
-          }}
-        />
-      </Form.Item>
-
-      <Form.Item name="radio-group" label="Radio.Group">
-        <Radio.Group>
-          <Radio value="a">item 1</Radio>
-          <Radio value="b">item 2</Radio>
-          <Radio value="c">item 3</Radio>
-        </Radio.Group>
-      </Form.Item>
-
-      <Form.Item
-        name="radio-button"
-        label="Radio.Button"
-        rules={[{ required: true, message: 'Please pick an item!' }]}
-      >
-        <Radio.Group>
-          <Radio.Button value="a">item 1</Radio.Button>
-          <Radio.Button value="b">item 2</Radio.Button>
-          <Radio.Button value="c">item 3</Radio.Button>
-        </Radio.Group>
-      </Form.Item>
-
-      <Form.Item name="checkbox-group" label="Checkbox.Group">
-        <Checkbox.Group>
-          <Row>
-            <Col span={8}>
-              <Checkbox value="A" style={{ lineHeight: '32px' }}>
-                A
-              </Checkbox>
-            </Col>
-            <Col span={8}>
-              <Checkbox value="B" style={{ lineHeight: '32px' }} disabled>
-                B
-              </Checkbox>
-            </Col>
-            <Col span={8}>
-              <Checkbox value="C" style={{ lineHeight: '32px' }}>
-                C
-              </Checkbox>
-            </Col>
-            <Col span={8}>
-              <Checkbox value="D" style={{ lineHeight: '32px' }}>
-                D
-              </Checkbox>
-            </Col>
-            <Col span={8}>
-              <Checkbox value="E" style={{ lineHeight: '32px' }}>
-                E
-              </Checkbox>
-            </Col>
-            <Col span={8}>
-              <Checkbox value="F" style={{ lineHeight: '32px' }}>
-                F
-              </Checkbox>
-            </Col>
-          </Row>
-        </Checkbox.Group>
-      </Form.Item>
-
-      <Form.Item name="rate" label="Rate">
-        <Rate />
-      </Form.Item>
-
-      <Form.Item
-        name="upload"
-        label="Upload"
-        valuePropName="fileList"
-        getValueFromEvent={normFile}
-        extra="longgggggggggggggggggggggggggggggggggg"
-      >
-        <Upload name="logo" action="/upload.do" listType="picture">
-          <Button icon={<UploadOutlined />}>Click to upload</Button>
-        </Upload>
-      </Form.Item>
-
-      <Form.Item label="Dragger">
-        <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
-          <Upload.Dragger name="files" action="/upload.do">
-            <p className="ant-upload-drag-icon">
-              <InboxOutlined />
-            </p>
-            <p className="ant-upload-text">Click or drag file to this area to upload</p>
-            <p className="ant-upload-hint">Support for a single or bulk upload.</p>
-          </Upload.Dragger>
-        </Form.Item>
-      </Form.Item>
-
-      <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
-        <Button type="primary" htmlType="submit">
-          Submit
-        </Button>
-      </Form.Item>
-    </Form>
-  );
+const onFinish = (values: any) => {
+  console.log('Received values of form: ', values);
 };

+const App: React.FC = () => (
+  <Form
+    name="validate_other"
+    {...formItemLayout}
+    onFinish={onFinish}
+    initialValues={{ 'input-number': 3, 'checkbox-group': ['A', 'B'], rate: 3.5 }}
+    style={{ maxWidth: 600 }}
+  >
+    <Form.Item label="Plain Text">
+      <span className="ant-form-text">China</span>
+    </Form.Item>
+    <Form.Item
+      name="select"
+      label="Select"
+      hasFeedback
+      rules={[{ required: true, message: 'Please select your country!' }]}
+    >
+      <Select placeholder="Please select a country">
+        <Option value="china">China</Option>
+        <Option value="usa">U.S.A</Option>
+      </Select>
+    </Form.Item>
+
+    <Form.Item
+      name="select-multiple"
+      label="Select[multiple]"
+      rules={[{ required: true, message: 'Please select your favourite colors!', type: 'array' }]}
+    >
+      <Select mode="multiple" placeholder="Please select favourite colors">
+        <Option value="red">Red</Option>
+        <Option value="green">Green</Option>
+        <Option value="blue">Blue</Option>
+      </Select>
+    </Form.Item>
+
+    <Form.Item label="InputNumber">
+      <Form.Item name="input-number" noStyle>
+        <InputNumber min={1} max={10} />
+      </Form.Item>
+      <span className="ant-form-text" style={{ marginLeft: 8 }}>
+        machines
+      </span>
+    </Form.Item>
+
+    <Form.Item name="switch" label="Switch" valuePropName="checked">
+      <Switch />
+    </Form.Item>
+
+    <Form.Item name="slider" label="Slider">
+      <Slider
+        marks={{
+          0: 'A',
+          20: 'B',
+          40: 'C',
+          60: 'D',
+          80: 'E',
+          100: 'F',
+        }}
+      />
+    </Form.Item>
+
+    <Form.Item name="radio-group" label="Radio.Group">
+      <Radio.Group>
+        <Radio value="a">item 1</Radio>
+        <Radio value="b">item 2</Radio>
+        <Radio value="c">item 3</Radio>
+      </Radio.Group>
+    </Form.Item>
+
+    <Form.Item
+      name="radio-button"
+      label="Radio.Button"
+      rules={[{ required: true, message: 'Please pick an item!' }]}
+    >
+      <Radio.Group>
+        <Radio.Button value="a">item 1</Radio.Button>
+        <Radio.Button value="b">item 2</Radio.Button>
+        <Radio.Button value="c">item 3</Radio.Button>
+      </Radio.Group>
+    </Form.Item>
+
+    <Form.Item name="checkbox-group" label="Checkbox.Group">
+      <Checkbox.Group>
+        <Row>
+          <Col span={8}>
+            <Checkbox value="A" style={{ lineHeight: '32px' }}>
+              A
+            </Checkbox>
+          </Col>
+          <Col span={8}>
+            <Checkbox value="B" style={{ lineHeight: '32px' }} disabled>
+              B
+            </Checkbox>
+          </Col>
+          <Col span={8}>
+            <Checkbox value="C" style={{ lineHeight: '32px' }}>
+              C
+            </Checkbox>
+          </Col>
+          <Col span={8}>
+            <Checkbox value="D" style={{ lineHeight: '32px' }}>
+              D
+            </Checkbox>
+          </Col>
+          <Col span={8}>
+            <Checkbox value="E" style={{ lineHeight: '32px' }}>
+              E
+            </Checkbox>
+          </Col>
+          <Col span={8}>
+            <Checkbox value="F" style={{ lineHeight: '32px' }}>
+              F
+            </Checkbox>
+          </Col>
+        </Row>
+      </Checkbox.Group>
+    </Form.Item>
+
+    <Form.Item name="rate" label="Rate">
+      <Rate />
+    </Form.Item>
+
+    <Form.Item
+      name="upload"
+      label="Upload"
+      valuePropName="fileList"
+      getValueFromEvent={normFile}
+      extra="longgggggggggggggggggggggggggggggggggg"
+    >
+      <Upload name="logo" action="/upload.do" listType="picture">
+        <Button icon={<UploadOutlined />}>Click to upload</Button>
+      </Upload>
+    </Form.Item>
+
+    <Form.Item label="Dragger">
+      <Form.Item name="dragger" valuePropName="fileList" getValueFromEvent={normFile} noStyle>
+        <Upload.Dragger name="files" action="/upload.do">
+          <p className="ant-upload-drag-icon">
+            <InboxOutlined />
+          </p>
+          <p className="ant-upload-text">Click or drag file to this area to upload</p>
+          <p className="ant-upload-hint">Support for a single or bulk upload.</p>
+        </Upload.Dragger>
+      </Form.Item>
+    </Form.Item>
+
+    <Form.Item wrapperCol={{ span: 12, offset: 6 }}>
+      <Button type="primary" htmlType="submit">
+        Submit
+      </Button>
+    </Form.Item>
+  </Form>
+);
+
 export default App;
--- a/components/form/demo/validate-static.tsx
+++ b/components/form/demo/validate-static.tsx
@ -26,7 +26,7 @@ const formItemLayout = {
 };

 const App: React.FC = () => (
-  <Form {...formItemLayout}>
+  <Form {...formItemLayout} style={{ maxWidth: 600 }}>
    <Form.Item
      label="Fail"
      validateStatus="error"
--- a/components/form/demo/without-form-create.tsx
+++ b/components/form/demo/without-form-create.tsx
@ -26,17 +26,15 @@ const formItemLayout = {
  wrapperCol: { span: 12 },
 };

+const tips =
+  'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
+
 const App: React.FC = () => {
  const [number, setNumber] = useState<{
    value: number;
    validateStatus?: ValidateStatus;
    errorMsg?: string | null;
-  }>({
-    value: 11,
-  });
-
-  const tips =
-    'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.';
+  }>({ value: 11 });

  const onNumberChange = (value: number) => {
    setNumber({
@ -46,7 +44,7 @@ const App: React.FC = () => {
  };

  return (
-    <Form>
+    <Form style={{ maxWidth: 600 }}>
      <Form.Item
        {...formItemLayout}
        label="Prime between 8 & 12"
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@ -441,16 +441,6 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | warningOnly | Warning only. Not block form submit | boolean | 4.17.0 |
 | whitespace | Failed if only has whitespace, only work with `type: 'string'` rule | boolean |  |

-<style>
-.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
-  max-width: 600px;
-}
-.markdown.api-container table td:nth-of-type(4) {
-  white-space: nowrap;
-  word-wrap: break-word;
-}
-</style>
-
 ## FAQ

 ### Custom validator not working
@ -540,12 +530,9 @@ dependencies should be `['users', 0, 'name']`
 React can not get correct interaction of controlled component with async value update. When user trigger `onChange`, component will do no response since `value` update is async. If you want to trigger value update async, you should use customize component to handle value state internal and pass sync value control to Form instead.

 <style>
-  .site-form-item-icon {
-    color: rgba(0, 0, 0, 0.25);
-  }
-  [data-theme="dark"] .site-form-item-icon {
-    color: rgba(255,255,255,.3);
-  }
+.site-form-item-icon {
+  color: rgba(0, 0, 0, 0.25);
+}
 </style>

 ### `scrollToFirstError` and `scrollToField` not working on custom form control?
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@ -440,16 +440,6 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | warningOnly | 仅警告，不阻塞表单提交 | boolean | 4.17.0 |
 | whitespace | 如果字段仅包含空格则校验不通过，只在 `type: 'string'` 时生效 | boolean |  |

-<style>
-.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
-  max-width: 600px;
-}
-.markdown.api-container table td:nth-of-type(4) {
-  white-space: nowrap;
-  word-wrap: break-word;
-}
-</style>
-
 ## FAQ

 ### 自定义 validator 没有效果
@ -539,12 +529,9 @@ Form.List 下的字段需要包裹 Form.List 本身的 `name`，比如：
 React 中异步更新会导致受控组件交互行为异常。当用户交互触发 `onChange` 后，通过异步改变值会导致组件 `value` 不会立刻更新，使得组件呈现假死状态。如果你需要异步触发变更，请通过自定义组件实现内部异步状态。

 <style>
-  .site-form-item-icon {
-    color: rgba(0, 0, 0, 0.25);
-  }
-  [data-theme="dark"] .site-form-item-icon {
-    color: rgba(255,255,255,.3);
-  }
+.site-form-item-icon {
+  color: rgba(0, 0, 0, 0.25);
+}
 </style>

 ### 自定义表单控件 `scrollToFirstError` 和 `scrollToField` 失效？
--- a/components/grid/demo/gutter.md
+++ b/components/grid/demo/gutter.md
@ -24,9 +24,3 @@ You can use an array to set vertical spacing, `[horizontal, vertical]` `[16, { x
  background: #00a0e9;
 }
 ```
-
-<style>
-[data-theme="dark"] .gutter-box {
-  background: #028ac8;
-}
-</style>
--- a/components/grid/demo/playground.md
+++ b/components/grid/demo/playground.md
@ -31,9 +31,3 @@ A simple playground for column count and gutter.
  padding: 0;
 }
 ```
-
-<style>
-[data-theme="dark"] #components-grid-demo-playground [class~='ant-col'] > div {
-  background: #028ac8;
-}
-</style>
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@ -84,10 +84,3 @@ If the Ant Design grid layout component does not meet your needs, you can use th
 You can modify the breakpoints values using by modifying `screen[XS|SM|MD|LG|XL|XXL]` with [theme customization](/docs/react/customize-theme) (since 5.1.0, [sandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)).

 The breakpoints of responsive grid follow [BootStrap 4 media queries rules](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints) (not including `occasionally part`).
-
-<style>
-  [data-theme="dark"] #components-grid-demo-playground pre {
-    background: rgba(255,255,255,0.8);
-    color: rgba(255,255,255,.65);
-  }
-</style>
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@ -83,10 +83,3 @@ Ant Design 的布局组件若不能满足你的需求，你也可以直接使用
 您可以使用 [主题定制](/docs/react/customize-theme-cn) 修改 `screen[XS|SM|MD|LG|XL|XXL]` 来修改断点值（自 5.1.0 起，[codesandbox demo](https://codesandbox.io/s/antd-reproduction-template-forked-dlq3r9?file=/index.js)）。

 响应式栅格的断点扩展自 [BootStrap 4 的规则](https://getbootstrap.com/docs/4.0/layout/overview/#responsive-breakpoints)（不包含链接里 `occasionally` 的部分)。
-
-<style>
-  [data-theme="dark"] #components-grid-demo-playground pre {
-    background: rgba(255,255,255,0.08);
-    color: rgba(255,255,255,.65);
-  }
-</style>
--- a/components/input-number/style/index.ts
+++ b/components/input-number/style/index.ts
@ -54,7 +54,7 @@ const genInputNumberStyles: GenerateStyle<InputNumberToken> = (token: InputNumbe
      [componentCls]: {
        ...resetComponent(token),
        ...genBasicInputStyle(token),
-        ...genStatusStyle(token),
+        ...genStatusStyle(token, componentCls),

        display: 'inline-block',
        width: controlWidth,
@ -308,7 +308,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
  return {
    [`${componentCls}-affix-wrapper`]: {
      ...genBasicInputStyle(token),
-      ...genStatusStyle(token),
+      ...genStatusStyle(token, `${componentCls}-affix-wrapper`),
      // or number handler will cover form status
      position: 'relative',
      display: 'inline-flex',
@ -324,7 +324,7 @@ const genAffixWrapperStyles: GenerateStyle<InputNumberToken> = (token: InputNumb
        borderRadius: borderRadiusSM,
      },

-      '&:not(&-disabled):hover': {
+      [`&:not(${componentCls}-affix-wrapper-disabled):hover`]: {
        ...genHoverStyle(token),
        zIndex: 1,
      },
--- a/components/input/demo/group.md
+++ b/components/input/demo/group.md
@ -33,9 +33,3 @@ Note: You don't need `Col` to control the width in the `compact` mode.
  border-right-width: 1px;
 }
 ```
-
-<style>
-[data-theme="dark"] .site-input-group-wrapper .site-input-split {
-  background-color: transparent;
-}
-</style>
--- a/components/input/style/index.ts
+++ b/components/input/style/index.ts
@ -78,7 +78,7 @@ export const genInputSmallStyle = (token: InputToken): CSSObject => ({
  borderRadius: token.borderRadiusSM,
 });

-export const genStatusStyle = (token: InputToken): CSSObject => {
+export const genStatusStyle = (token: InputToken, parentCls: string): CSSObject => {
  const {
    componentCls,
    colorError,
@ -90,7 +90,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
  } = token;

  return {
-    '&-status-error:not(&-disabled):not(&-borderless)&': {
+    [`&-status-error:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
      borderColor: colorError,

      '&:hover': {
@ -111,7 +111,7 @@ export const genStatusStyle = (token: InputToken): CSSObject => {
        color: colorError,
      },
    },
-    '&-status-warning:not(&-disabled):not(&-borderless)&': {
+    [`&-status-warning:not(${parentCls}-disabled):not(${parentCls}-borderless)${parentCls}`]: {
      borderColor: colorWarning,

      '&:hover': {
@ -511,10 +511,10 @@ const genInputStyle: GenerateStyle<InputToken> = (token: InputToken) => {
  const colorSmallPadding = (controlHeightSM - lineWidth * 2 - FIXED_CHROME_COLOR_HEIGHT) / 2;

  return {
-    [`${componentCls}`]: {
+    [componentCls]: {
      ...resetComponent(token),
      ...genBasicInputStyle(token),
-      ...genStatusStyle(token),
+      ...genStatusStyle(token, componentCls),

      '&[type="color"]': {
        height: token.controlHeight,
@ -581,7 +581,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
      ...genBasicInputStyle(token),
      display: 'inline-flex',

-      '&:not(&-disabled):hover': {
+      [`&:not(${componentCls}-affix-wrapper-disabled):hover`]: {
        ...genHoverStyle(token),
        zIndex: 1,
        [`${componentCls}-search-with-button &`]: {
@ -659,7 +659,7 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
      },

      // status
-      ...genStatusStyle(token),
+      ...genStatusStyle(token, `${componentCls}-affix-wrapper`),
    },
  };
 };
--- a/components/layout/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/layout/tests/snapshots/demo-extend.test.ts.snap
@ -577,6 +577,7 @@ exports[`renders ./components/layout/demo/fixed.tsx extend context correctly 1`]
            <ul
              class="ant-menu ant-menu-sub ant-menu-vertical"
              data-menu-list="true"
+              role="menu"
            />
          </div>
        </div>
@ -2104,6 +2105,7 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
              <ul
                class="ant-menu ant-menu-sub ant-menu-inline"
                data-menu-list="true"
+                role="menu"
              >
                <li
                  class="ant-menu-item ant-menu-item-only-child"
@ -2259,6 +2261,7 @@ exports[`renders ./components/layout/demo/side.tsx extend context correctly 1`]
              <ul
                class="ant-menu ant-menu-sub ant-menu-inline"
                data-menu-list="true"
+                role="menu"
              >
                <li
                  class="ant-menu-item ant-menu-item-only-child"
@ -3221,6 +3224,7 @@ exports[`renders ./components/layout/demo/top.tsx extend context correctly 1`] =
            <ul
              class="ant-menu ant-menu-sub ant-menu-vertical"
              data-menu-list="true"
+              role="menu"
            />
          </div>
        </div>
@ -3787,6 +3791,7 @@ exports[`renders ./components/layout/demo/top-side.tsx extend context correctly
            <ul
              class="ant-menu ant-menu-sub ant-menu-vertical"
              data-menu-list="true"
+              role="menu"
            />
          </div>
        </div>
@ -3977,6 +3982,7 @@ exports[`renders ./components/layout/demo/top-side.tsx extend context correctly
                  <ul
                    class="ant-menu ant-menu-sub ant-menu-inline"
                    data-menu-list="true"
+                    role="menu"
                  >
                    <li
                      class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
@ -4120,6 +4126,7 @@ exports[`renders ./components/layout/demo/top-side.tsx extend context correctly
              <ul
                class="ant-menu ant-menu-sub ant-menu-inline"
                data-menu-list="true"
+                role="menu"
              >
                <li
                  class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
@ -4307,6 +4314,7 @@ exports[`renders ./components/layout/demo/top-side.tsx extend context correctly
                  <ul
                    class="ant-menu ant-menu-sub ant-menu-inline"
                    data-menu-list="true"
+                    role="menu"
                  >
                    <li
                      class="ant-menu-item ant-menu-item-only-child"
@ -4496,6 +4504,7 @@ exports[`renders ./components/layout/demo/top-side.tsx extend context correctly
                  <ul
                    class="ant-menu ant-menu-sub ant-menu-inline"
                    data-menu-list="true"
+                    role="menu"
                  >
                    <li
                      class="ant-menu-item ant-menu-item-only-child"
@ -5088,6 +5097,7 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
            <ul
              class="ant-menu ant-menu-sub ant-menu-vertical"
              data-menu-list="true"
+              role="menu"
            />
          </div>
        </div>
@ -5230,6 +5240,7 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
                <ul
                  class="ant-menu ant-menu-sub ant-menu-inline"
                  data-menu-list="true"
+                  role="menu"
                >
                  <li
                    class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
@ -5373,6 +5384,7 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
            <ul
              class="ant-menu ant-menu-sub ant-menu-inline"
              data-menu-list="true"
+              role="menu"
            >
              <li
                class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
@ -5560,6 +5572,7 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
                <ul
                  class="ant-menu ant-menu-sub ant-menu-inline"
                  data-menu-list="true"
+                  role="menu"
                >
                  <li
                    class="ant-menu-item ant-menu-item-only-child"
@ -5749,6 +5762,7 @@ exports[`renders ./components/layout/demo/top-side-2.tsx extend context correctl
                <ul
                  class="ant-menu ant-menu-sub ant-menu-inline"
                  data-menu-list="true"
+                  role="menu"
                >
                  <li
                    class="ant-menu-item ant-menu-item-only-child"
--- a/components/layout/tests/snapshots/demo.test.ts.snap
+++ b/components/layout/tests/snapshots/demo.test.ts.snap
@ -1912,6 +1912,7 @@ exports[`renders ./components/layout/demo/top-side.tsx correctly 1`] = `
              <ul
                class="ant-menu ant-menu-sub ant-menu-inline"
                data-menu-list="true"
+                role="menu"
              >
                <li
                  class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
@ -2224,6 +2225,7 @@ exports[`renders ./components/layout/demo/top-side-2.tsx correctly 1`] = `
            <ul
              class="ant-menu ant-menu-sub ant-menu-inline"
              data-menu-list="true"
+              role="menu"
            >
              <li
                class="ant-menu-item ant-menu-item-selected ant-menu-item-only-child"
--- a/components/layout/demo/basic.md
+++ b/components/layout/demo/basic.md
@ -5,31 +5,3 @@
 ## en-US

 Classic page layouts.
-
-<style>
-#components-layout-demo-basic .code-box-demo {
-  text-align: center;
-}
-#components-layout-demo-basic .ant-layout-header,
-#components-layout-demo-basic .ant-layout-footer {
-  color: #fff;
-  background: #7dbcea;
-}
-#components-layout-demo-basic .ant-layout-footer {
-  line-height: 1.5;
-}
-#components-layout-demo-basic .ant-layout-sider {
-  color: #fff;
-  line-height: 120px;
-  background: #3ba0e9;
-}
-#components-layout-demo-basic .ant-layout-content {
-  min-height: 120px;
-  color: #fff;
-  line-height: 120px;
-  background: rgba(16, 142, 233, 1);
-}
-#components-layout-demo-basic > .code-box-demo > .ant-layout + .ant-layout {
-  margin-top: 48px;
-}
-</style>
--- a/components/locale/pt_BR.ts
+++ b/components/locale/pt_BR.ts
@ -21,6 +21,8 @@ const localeValues: Locale = {
    filterConfirm: 'OK',
    filterReset: 'Resetar',
    filterEmptyText: 'Sem filtros',
+    filterCheckall: 'Selecionar todos os itens',
+    filterSearchPlaceholder: 'Pesquisar nos filtros',
    emptyText: 'Sem conteúdo',
    selectAll: 'Selecionar página atual',
    selectInvert: 'Inverter seleção',
@ -33,6 +35,11 @@ const localeValues: Locale = {
    triggerAsc: 'Clique organiza por ascendente',
    cancelSort: 'Clique para cancelar organização',
  },
+  Tour: {
+    Next: 'Próximo',
+    Previous: 'Anterior',
+    Finish: 'Finalizar',
+  },
  Modal: {
    okText: 'OK',
    cancelText: 'Cancelar',
--- a/Show More
+++ b/Show More