Merge branch 'master' into feature-merge-master

2025-01-18 14:13:37 +08:00 · 2023-04-17 19:38:12 +08:00 · 2023-04-17 19:38:12 +08:00 · 1babfef998
commit 1babfef998
parent 308f486d58 099b0fc52a
154 changed files with 1946 additions and 242 deletions
--- a/.dumi/hooks/useMenu.tsx
+++ b/.dumi/hooks/useMenu.tsx
@ -1,8 +1,9 @@
 import type { ReactNode } from 'react';
 import React, { useMemo } from 'react';
 import type { MenuProps } from 'antd';
-import { Link, useFullSidebarData, useSidebarData } from 'dumi';
+import { useFullSidebarData, useSidebarData } from 'dumi';
 import useLocation from './useLocation';
+import Link from '../theme/common/Link';

 export type UseMenuOptions = {
  before?: ReactNode;
--- a/.dumi/theme/builtins/DemoWrapper/index.tsx
+++ b/.dumi/theme/builtins/DemoWrapper/index.tsx
@ -1,14 +1,15 @@
-import React, { useContext, useState } from 'react';
+import React, { useContext } from 'react';
 import { DumiDemoGrid, FormattedMessage } from 'dumi';
 import { Tooltip } from 'antd';
 import { BugFilled, BugOutlined, CodeFilled, CodeOutlined } from '@ant-design/icons';
 import classNames from 'classnames';
 import DemoContext from '../../slots/DemoContext';
+import useLayoutState from '../../../hooks/useLayoutState';

 const DemoWrapper: typeof DumiDemoGrid = ({ items }) => {
  const { showDebug, setShowDebug } = useContext(DemoContext);

-  const [expandAll, setExpandAll] = useState(false);
+  const [expandAll, setExpandAll] = useLayoutState(false);

  const expandTriggerClass = classNames('code-box-expand-trigger', {
    'code-box-expand-trigger-active': expandAll,
--- a/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
+++ b/.dumi/theme/builtins/Previewer/CodePreviewer.tsx
@ -8,7 +8,6 @@ import type { Project } from '@stackblitz/sdk';
 import stackblitzSdk from '@stackblitz/sdk';
 import { Alert, Badge, Space, Tooltip } from 'antd';
 import classNames from 'classnames';
-import type { IPreviewerProps } from 'dumi';
 import { FormattedMessage, useSiteData } from 'dumi';
 import toReactElement from 'jsonml-to-react-element';
 import JsonML from 'jsonml.js/lib/utils';
@ -28,6 +27,7 @@ import RiddleIcon from '../../common/RiddleIcon';
 import type { SiteContextProps } from '../../slots/SiteContext';
 import SiteContext from '../../slots/SiteContext';
 import { ping } from '../../utils';
+import type { AntdPreviewerProps } from '.';

 const { ErrorBoundary } = Alert;

@ -88,7 +88,7 @@ function useShowRiddleButton() {
  return showRiddleButton;
 }

-const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
+const CodePreviewer: React.FC<AntdPreviewerProps> = (props) => {
  const {
    asset,
    expand,
@ -97,7 +97,7 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {
    children,
    title,
    description,
-    debug,
+    originDebug,
    jsx,
    style,
    compact,
@ -189,7 +189,7 @@ const CodePreviewer: React.FC<IPreviewerProps> = (props) => {

  const codeBoxClass = classNames('code-box', {
    expand: codeExpand,
-    'code-box-debug': debug,
+    'code-box-debug': originDebug,
  });

  const localizedTitle = title;
@ -394,7 +394,7 @@ createRoot(document.getElementById('container')).render(<Demo />);
      </section>
      <section className="code-box-meta markdown">
        <div className="code-box-title">
-          <Tooltip title={debug ? <FormattedMessage id="app.demo.debug" /> : ''}>
+          <Tooltip title={originDebug ? <FormattedMessage id="app.demo.debug" /> : ''}>
            <a href={`#${asset.id}`} ref={anchorRef}>
              {localizedTitle}
            </a>
--- a/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx
+++ b/.dumi/theme/builtins/Previewer/DesignPreviewer.tsx
@ -1,11 +1,11 @@
 import type { FC } from 'react';
 import React, { useRef } from 'react';
-import type { IPreviewerProps } from 'dumi';
 import { createStyles, css } from 'antd-style';
 import { CheckOutlined, SketchOutlined } from '@ant-design/icons';
 import { nodeToGroup } from 'html2sketch';
 import copy from 'copy-to-clipboard';
 import { App } from 'antd';
+import type { AntdPreviewerProps } from '.';

 const useStyle = createStyles(({ token }) => ({
  wrapper: css`
@ -52,7 +52,7 @@ const useStyle = createStyles(({ token }) => ({
  `,
 }));

-const DesignPreviewer: FC<IPreviewerProps> = ({ children, title, description, tip, asset }) => {
+const DesignPreviewer: FC<AntdPreviewerProps> = ({ children, title, description, tip, asset }) => {
  const { styles } = useStyle();
  const demoRef = useRef<HTMLDivElement>(null);
  const [copied, setCopied] = React.useState<boolean>(false);
--- a/.dumi/theme/builtins/Previewer/index.tsx
+++ b/.dumi/theme/builtins/Previewer/index.tsx
@ -5,7 +5,11 @@ import { useTabMeta } from 'dumi';
 import CodePreviewer from './CodePreviewer';
 import DesignPreviewer from './DesignPreviewer';

-const Previewer: FC<IPreviewerProps> = ({ ...props }) => {
+export interface AntdPreviewerProps extends IPreviewerProps {
+  originDebug?: IPreviewerProps['debug'];
+}
+
+const Previewer: FC<AntdPreviewerProps> = ({ ...props }) => {
  const tab = useTabMeta();

  if (tab?.frontmatter.title === 'Design') {
--- a/.dumi/theme/builtins/TokenTable/index.tsx
+++ b/.dumi/theme/builtins/TokenTable/index.tsx
@ -104,7 +104,7 @@ const TokenTable: FC<TokenTableProps> = ({ type }) => {
          name: token,
          desc: lang === 'cn' ? meta.desc : meta.descEn,
          type: meta.type,
-          value: (defaultToken as any)[token],
+          value: defaultToken[token],
        })),
    [type, lang],
  );
--- a/.dumi/theme/common/Link.tsx
+++ b/.dumi/theme/common/Link.tsx
@ -0,0 +1,30 @@
+import type { MouseEvent } from 'react';
+import React, { forwardRef, startTransition } from 'react';
+import { useNavigate } from 'dumi';
+
+export type LinkProps = {
+  to?: string;
+  children?: React.ReactNode;
+};
+
+const Link = forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => {
+  const { to, children } = props;
+  const navigate = useNavigate();
+
+  const handleClick = (e: MouseEvent<HTMLAnchorElement>) => {
+    if (!to.startsWith('http')) {
+      e.preventDefault();
+      startTransition(() => {
+        navigate(to);
+      });
+    }
+  };
+
+  return (
+    <a ref={ref} href={to} onClick={handleClick}>
+      {children}
+    </a>
+  );
+});
+
+export default Link;
--- a/.dumi/theme/layouts/DocLayout/index.tsx
+++ b/.dumi/theme/layouts/DocLayout/index.tsx
@ -1,18 +1,18 @@
-import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
-import 'dayjs/locale/zh-cn';
-import dayjs from 'dayjs';
-import { Helmet, useOutlet, useSiteData } from 'dumi';
-import '../../static/style';
 import ConfigProvider from 'antd/es/config-provider';
-import classNames from 'classnames';
 import zhCN from 'antd/es/locale/zh_CN';
-import SiteContext from '../../slots/SiteContext';
-import Header from '../../slots/Header';
-import Footer from '../../slots/Footer';
+import classNames from 'classnames';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
+import { Helmet, useOutlet, useSiteData } from 'dumi';
+import React, { useContext, useEffect, useLayoutEffect, useMemo, useRef } from 'react';
 import useLocale from '../../../hooks/useLocale';
 import useLocation from '../../../hooks/useLocation';
-import ResourceLayout from '../ResourceLayout';
 import GlobalStyles from '../../common/GlobalStyles';
+import Footer from '../../slots/Footer';
+import Header from '../../slots/Header';
+import SiteContext from '../../slots/SiteContext';
+import '../../static/style';
+import ResourceLayout from '../ResourceLayout';
 import SidebarLayout from '../SidebarLayout';

 const locales = {
@ -96,7 +96,7 @@ const DocLayout: React.FC = () => {
        <html
          lang={lang}
          data-direction={direction}
-          className={classNames({ [`rtl`]: direction === 'rtl' })}
+          className={classNames({ rtl: direction === 'rtl' })}
        />
        <title>{locale?.title}</title>
        <link
--- a/.dumi/theme/slots/Content/index.tsx
+++ b/.dumi/theme/slots/Content/index.tsx
@ -15,6 +15,7 @@ import type { DemoContextProps } from '../DemoContext';
 import DemoContext from '../DemoContext';
 import Footer from '../Footer';
 import SiteContext from '../SiteContext';
+import useLayoutState from '../../../hooks/useLayoutState';

 const useStyle = () => {
  const { token } = useSiteToken();
@ -141,7 +142,7 @@ const Content: React.FC<{ children: ReactNode }> = ({ children }) => {
  const { token } = useSiteToken();
  const { direction } = useContext(SiteContext);

-  const [showDebug, setShowDebug] = useState(false);
+  const [showDebug, setShowDebug] = useLayoutState(false);
  const debugDemos = useMemo(
    () => meta.toc?.filter((item) => item._debug_demo).map((item) => item.id) || [],
    [meta],
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@ -15,6 +15,37 @@ timeline: true

 ---

+## 5.4.2
+
+`2023-04-11`
+
+- 🐞 Fix unexpected deprecated warning in DatePicker. [#41753](https://github.com/ant-design/ant-design/pull/41753) [@kiner-tang](https://github.com/kiner-tang)
+- 🇩🇪 Add missing translations for `de_DE`. [#41747](https://github.com/ant-design/ant-design/pull/41747) [@eldarcodes](https://github.com/eldarcodes)
+- TypeScript
+  - 🤖 Optimize type of TimePicker `hourStep`. [1fc3675](https://github.com/ant-design/ant-design/commit/1fc3675) [@Wuxh](https://github.com/Wuxh)
+
+## 5.4.1
+
+`2023-04-11`
+
+- 💄 Optimize Select-like component popup logic. Now always try to display it in the visible area first to reduce the user's extra scrolling cost. [#41619](https://github.com/ant-design/ant-design/pull/41619)
+- 💄 Remove fixed height in Badge.Ribbon. [#41661](https://github.com/ant-design/ant-design/pull/41661) [@MuxinFeng](https://github.com/MuxinFeng)
+- 🐞 Fix Select width becomes 0px when search after select something. [#41722](https://github.com/ant-design/ant-design/pull/41722)
+- 🐞 Fix Empty style in small width container. [#41727](https://github.com/ant-design/ant-design/pull/41727)
+- 🐞 Improve Form.Item `noStyle` validation message reveal logic. [#41698](https://github.com/ant-design/ant-design/pull/41698) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix that Form.Item should not support `requiredMark`. [#41725](https://github.com/ant-design/ant-design/pull/41725) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 Fix Space should not affect font style and font family. [#40326](https://github.com/ant-design/ant-design/pull/40326)
+- 🐞 Fix the problem that the hover style of the Previous/Next button in Pagination simple mode is lost. [#41685](https://github.com/ant-design/ant-design/pull/41685)
+- 🐞 Fix Tree `switcherIcon` cannot be hidden. [#41708](https://github.com/ant-design/ant-design/pull/41708) [@acyza](https://github.com/acyza)
+- 🐞 Fix `List.Item.Meta` avatar and title are not aligned. [#41688](https://github.com/ant-design/ant-design/pull/41688) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix Row justify setting `space-evenly` does not work. [#41679](https://github.com/ant-design/ant-design/pull/41679) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 Fix Button type to support custom data attributes. [#41650](https://github.com/ant-design/ant-design/pull/41650)
+- 🐞 Fix Table column width issue when `rowSelection.selections` is not empty. [#41626](https://github.com/ant-design/ant-design/pull/41626)
+- 🐞 Fix Mentions dropdown style. [#41660](https://github.com/ant-design/ant-design/pull/41660)
+- 🐞 Improve Form.Item on `require` judgment logic. [#41623](https://github.com/ant-design/ant-design/pull/41623) [@Wxh16144](https://github.com/Wxh16144)
+- Locales
+  - 🇹🇭 add Tour, Image, and QRCode Thai locale. [#41697](https://github.com/ant-design/ant-design/pull/41697) [@buildingwatsize](https://github.com/buildingwatsize)
+
 ## 5.4.0

 `2023-04-03`
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@ -15,6 +15,37 @@ timeline: true

 ---

+## 5.4.2
+
+`2023-04-11`
+
+- 🐞 修复 DatePicker 组件异常显示废弃警告的问题。[#41753](https://github.com/ant-design/ant-design/pull/41753) [@kiner-tang](https://github.com/kiner-tang)
+- 🇩🇪 补充 `de_DE` 遗漏的国际化。[#41747](https://github.com/ant-design/ant-design/pull/41747) [@eldarcodes](https://github.com/eldarcodes)
+- TypeScript
+  - 🤖 优化 TimePicker `hourStep` 的类型。[1fc3675](https://github.com/ant-design/ant-design/commit/1fc3675) [@Wuxh](https://github.com/Wuxh)
+
+## 5.4.1
+
+`2023-04-11`
+
+- 💄 优化类 Select 组件弹窗逻辑，现在总是会尝试优先在可视区域展示以减少用户额外滚动成本。[#41619](https://github.com/ant-design/ant-design/pull/41619)
+- 💄 去除 Badge.Ribbon 里固定的高度。[#41661](https://github.com/ant-design/ant-design/pull/41661) [@MuxinFeng](https://github.com/MuxinFeng)
+- 🐞 修复 Select 在搜索时宽度变为 `0px` 的问题。[#41722](https://github.com/ant-design/ant-design/pull/41722)
+- 🐞 修复 Empty 空数据组件在宽度不够的容器内样式错位的问题。[#41727](https://github.com/ant-design/ant-design/pull/41727)
+- 🐞 改进 Form.Item `noStyle` 验证消息显隐逻辑。[#41698](https://github.com/ant-design/ant-design/pull/41698) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修正 Form.Item 不应支持设置 `requiredMark` 的问题。[#41725](https://github.com/ant-design/ant-design/pull/41725) [@Wxh16144](https://github.com/Wxh16144)
+- 🐞 修复 Space 影响父元素字体大小和样式的问题。[#40326](https://github.com/ant-design/ant-design/pull/40326)
+- 🐞 修复 Pagination 简洁模式中的上一页下一页按钮 hover 样式丢失的问题。[#41685](https://github.com/ant-design/ant-design/pull/41685)
+- 🐞 修复 Tree `switcherIcon` 无法隐藏。[#41708](https://github.com/ant-design/ant-design/pull/41708) [@acyza](https://github.com/acyza)
+- 🐞 修复 `List.Item.Meta` 的 `avatar` 和 `title` 不对齐的问题。[#41688](https://github.com/ant-design/ant-design/pull/41688) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 Row 的 `justify` 设置为 `space-evenly` 无效。[#41679](https://github.com/ant-design/ant-design/pull/41679) [@Yuiai01](https://github.com/Yuiai01)
+- 🐞 修复 Button 类型定义不支持 `data-*` 属性的问题。[#41650](https://github.com/ant-design/ant-design/pull/41650)
+- 🐞 修复 Table `rowSelection.selections` 有值时选择列宽度不够的问题。[#41626](https://github.com/ant-design/ant-design/pull/41626)
+- 🐞 修复 Mentions 弹层样式。[#41660](https://github.com/ant-design/ant-design/pull/41660)
+- 🐞 改进 Form.Item 关于 `require` 的判断逻辑。[#41623](https://github.com/ant-design/ant-design/pull/41623) [@Wxh16144](https://github.com/Wxh16144)
+- 国际化
+  - 🇹🇭 添加 Tour、Image 和 QRCode 泰语语言环境。[#41697](https://github.com/ant-design/ant-design/pull/41697) [@buildingwatsize](https://github.com/buildingwatsize)
+
 ## 5.4.0

 `2023-04-03`
--- a/components/tests/snapshots/setup.test.tsx.snap
+++ b/components/tests/snapshots/setup.test.tsx.snap
@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`SetUp.Test diff of React 18 & React 17 1`] = `
+NodeList [
+  <div>
+  bamboo
+  little
+</div>,
+  <div />,
+]
+`;
--- a/components/tests/node.test.tsx
+++ b/components/tests/node.test.tsx
@ -1,4 +1,4 @@
-import glob from 'glob';
+import { globSync } from 'glob';
 import * as React from 'react';
 import { renderToString } from 'react-dom/server';
 import type { Options } from '../../tests/shared/demoTest';
@ -21,14 +21,14 @@ describe('node', () => {
  });

  // Find the component exist demo test file
-  const files = glob.globSync(`./components/*/__tests__/demo.test.@(j|t)s?(x)`);
+  const files = globSync(`./components/*/__tests__/demo.test.@(j|t)s?(x)`);

  files.forEach((componentTestFile) => {
    const componentName = componentTestFile.match(/components\/([^/]*)\//)![1];

    // Test for ssr
    describe(componentName, () => {
-      const demoList = glob.globSync(`./components/${componentName}/demo/*.tsx`);
+      const demoList = globSync(`./components/${componentName}/demo/*.tsx`);

      // Use mock to get config
      require(`../../${componentTestFile}`); // eslint-disable-line global-require, import/no-dynamic-require
--- a/components/tests/setup.test.tsx
+++ b/components/tests/setup.test.tsx
@ -0,0 +1,14 @@
+import * as React from 'react';
+import { render } from '../../tests/utils';
+
+describe('SetUp.Test', () => {
+  it('diff of React 18 & React 17', () => {
+    const { container } = render(
+      <>
+        <div>{['bamboo', '', 'little']}</div>
+        <div>{['', '']}</div>
+      </>,
+    );
+    expect(container.childNodes).toMatchSnapshot();
+  });
+});
--- a/components/app/index.en-US.md
+++ b/components/app/index.en-US.md
@ -126,3 +126,7 @@ export default () => {
 | --- | --- | --- | --- | --- |
 | message | Global config for Message | [MessageConfig](/components/message/#messageconfig) | - | 5.3.0 |
 | notification | Global config for Notification | [NotificationConfig](/components/notification/#notificationconfig) | - | 5.3.0 |
+
+## Design Token
+
+<ComponentTokenTable component="App"></ComponentTokenTable>
--- a/components/app/index.zh-CN.md
+++ b/components/app/index.zh-CN.md
@ -128,3 +128,7 @@ export default () => {
 | --- | --- | --- | --- | --- |
 | message | App 内 Message 的全局配置 | [MessageConfig](/components/message-cn/#messageconfig) | - | 5.3.0 |
 | notification | App 内 Notification 的全局配置 | [NotificationConfig](/components/notification-cn/#notificationconfig) | - | 5.3.0 |
+
+## Design Token
+
+<ComponentTokenTable component="App"></ComponentTokenTable>
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@ -72,6 +72,10 @@ The differences with Select are:
 | blur()  | Remove focus |         |
 | focus() | Get focus    |         |

+## Design Token
+
+<ComponentTokenTable component="Select"></ComponentTokenTable>
+
 ## FAQ

 ### Why doesn't the text composition system work well with onSearch in controlled mode?
--- a/components/auto-complete/index.zh-CN.md
+++ b/components/auto-complete/index.zh-CN.md
@ -74,6 +74,10 @@ demo:
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |

+## Design Token
+
+<ComponentTokenTable component="Select"></ComponentTokenTable>
+
 ## FAQ

 ### 为何受控状态下使用 onSearch 无法输入中文？
--- a/components/avatar/index.en-US.md
+++ b/components/avatar/index.en-US.md
@ -52,3 +52,7 @@ Avatars can be used to represent people or objects. It supports images, `Icon`s,
 | maxPopoverTrigger | Set the trigger of excess avatar Popover | `hover` \| `focus` \| `click` | `hover` | 4.17.0 |
 | maxStyle | The style of excess avatar style | CSSProperties | - |  |
 | size | The size of the avatar | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
+
+## Design Token
+
+<ComponentTokenTable component="Avatar"></ComponentTokenTable>
--- a/components/avatar/index.zh-CN.md
+++ b/components/avatar/index.zh-CN.md
@ -57,3 +57,7 @@ group:
 | maxPopoverTrigger | 设置多余头像 Popover 的触发方式 | `hover` \| `focus` \| `click` | `hover` | 4.17.0 |
 | maxStyle | 多余头像样式 | CSSProperties | - |  |
 | size | 设置头像的大小 | number \| `large` \| `small` \| `default` \| { xs: number, sm: number, ...} | `default` | 4.8.0 |
+
+## Design Token
+
+<ComponentTokenTable component="Avatar"></ComponentTokenTable>
--- a/components/badge/index.en-US.md
+++ b/components/badge/index.en-US.md
@ -57,3 +57,7 @@ Badge normally appears in proximity to notifications or user avatars with eye-ca
 | color | Customize Ribbon color | string | - |  |
 | placement | The placement of the Ribbon, `start` and `end` follow text direction (RTL or LTR) | `start` \| `end` | `end` |  |
 | text | Content inside the Ribbon | ReactNode | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="Badge"></ComponentTokenTable>
--- a/components/badge/index.tsx
+++ b/components/badge/index.tsx
@ -14,7 +14,9 @@ import useStyle from './style';

 export type { ScrollNumberProps } from './ScrollNumber';

-type CompoundedComponent = React.FC<BadgeProps> & {
+type CompoundedComponent = React.ForwardRefExoticComponent<
+  BadgeProps & React.RefAttributes<HTMLSpanElement>
+> & {
  Ribbon: typeof Ribbon;
 };

@ -40,25 +42,26 @@ export interface BadgeProps {
  children?: React.ReactNode;
 }

-const Badge: CompoundedComponent = ({
-  prefixCls: customizePrefixCls,
-  scrollNumberPrefixCls: customizeScrollNumberPrefixCls,
-  children,
-  status,
-  text,
-  color,
-  count = null,
-  overflowCount = 99,
-  dot = false,
-  size = 'default',
-  title,
-  offset,
-  style,
-  className,
-  rootClassName,
-  showZero = false,
-  ...restProps
-}) => {
+const InternalBadge: React.ForwardRefRenderFunction<HTMLSpanElement, BadgeProps> = (props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    scrollNumberPrefixCls: customizeScrollNumberPrefixCls,
+    children,
+    status,
+    text,
+    color,
+    count = null,
+    overflowCount = 99,
+    dot = false,
+    size = 'default',
+    title,
+    offset,
+    style,
+    className,
+    rootClassName,
+    showZero = false,
+    ...restProps
+  } = props;
  const { getPrefixCls, direction } = React.useContext(ConfigContext);
  const prefixCls = getPrefixCls('badge', customizePrefixCls);

@ -191,7 +194,7 @@ const Badge: CompoundedComponent = ({
  }

  return wrapSSR(
-    <span {...restProps} className={badgeClassName}>
+    <span ref={ref} {...restProps} className={badgeClassName}>
      {children}
      <CSSMotion
        visible={!isHidden}
@ -199,7 +202,7 @@ const Badge: CompoundedComponent = ({
        motionAppear={false}
        motionDeadline={1000}
      >
-        {({ className: motionClassName, ref }) => {
+        {({ className: motionClassName, ref: scrollNumberRef }) => {
          const scrollNumberPrefixCls = getPrefixCls(
            'scroll-number',
            customizeScrollNumberPrefixCls,
@ -233,7 +236,7 @@ const Badge: CompoundedComponent = ({
              title={titleNode}
              style={scrollNumberStyle}
              key="scrollNumber"
-              ref={ref}
+              ref={scrollNumberRef}
            >
              {displayNode}
            </ScrollNumber>
@ -245,6 +248,8 @@ const Badge: CompoundedComponent = ({
  );
 };

+const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(InternalBadge) as CompoundedComponent;
+
 Badge.Ribbon = Ribbon;

 if (process.env.NODE_ENV !== 'production') {
--- a/components/badge/index.zh-CN.md
+++ b/components/badge/index.zh-CN.md
@ -58,3 +58,7 @@ group: 数据展示
 | color | 自定义缎带的颜色 | string | - |  |
 | placement | 缎带的位置，`start` 和 `end` 随文字方向（RTL 或 LTR）变动 | `start` \| `end` | `end` |  |
 | text | 缎带中填入的内容 | ReactNode | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="Badge"></ComponentTokenTable>
--- a/components/calendar/index.en-US.md
+++ b/components/calendar/index.en-US.md
@ -57,6 +57,10 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 | onPanelChange | Callback for when panel changes | function(date: Dayjs, mode: string) | - |  |
 | onSelect | Callback for when a date is selected | function(date: Dayjs） | - |  |

+## Design Token
+
+<ComponentTokenTable component="Calendar"></ComponentTokenTable>
+
 ## FAQ

 ### How to use Calendar with customize date library?
--- a/components/calendar/index.zh-CN.md
+++ b/components/calendar/index.zh-CN.md
@ -62,6 +62,10 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-p-wQLik200AAA
 | onPanelChange | 日期面板变化回调 | function(date: Dayjs, mode: string) | - |  |
 | onSelect | 点击选择日期回调 | function(date: Dayjs） | - |  |

+## Design Token
+
+<ComponentTokenTable component="Calendar"></ComponentTokenTable>
+
 ## FAQ

 ### 如何在 Calendar 中使用自定义日期库
--- a/components/card/index.en-US.md
+++ b/components/card/index.en-US.md
@ -71,3 +71,7 @@ A card can be used to display content related to a single subject. The content c
 | description | Description content           | ReactNode     | -       |         |
 | style       | The style object of container | CSSProperties | -       |         |
 | title       | Title content                 | ReactNode     | -       |         |
+
+## Design Token
+
+<ComponentTokenTable component="Card"></ComponentTokenTable>
--- a/components/card/index.zh-CN.md
+++ b/components/card/index.zh-CN.md
@ -72,3 +72,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*a-8zR6rrupgAAA
 | description | 描述内容           | ReactNode     | -      |      |
 | style       | 定义容器类名的样式 | CSSProperties | -      |      |
 | title       | 标题内容           | ReactNode     | -      |      |
+
+## Design Token
+
+<ComponentTokenTable component="Card"></ComponentTokenTable>
--- a/components/carousel/index.en-US.md
+++ b/components/carousel/index.en-US.md
@ -46,6 +46,10 @@ A carousel component. Scales with its container.

 Find more APIs in react-slick [documentation](https://react-slick.neostack.com/docs/api).

+## Design Token
+
+<ComponentTokenTable component="Carousel"></ComponentTokenTable>
+
 ## FAQ

 ### How to add custom arrows?
--- a/components/carousel/index.zh-CN.md
+++ b/components/carousel/index.zh-CN.md
@ -47,6 +47,10 @@ demo:

 更多 API 可参考：<https://react-slick.neostack.com/docs/api>

+## Design Token
+
+<ComponentTokenTable component="Carousel"></ComponentTokenTable>
+
 ## FAQ

 ### 如何自定义箭头？
--- a/components/cascader/index.en-US.md
+++ b/components/cascader/index.en-US.md
@ -117,3 +117,7 @@ interface Option {
 | ------- | ------------ | ------- |
 | blur()  | Remove focus |         |
 | focus() | Get focus    |         |
+
+## Design Token
+
+<ComponentTokenTable component="Cascader"></ComponentTokenTable>
--- a/components/cascader/index.zh-CN.md
+++ b/components/cascader/index.zh-CN.md
@ -120,3 +120,7 @@ interface Option {
 | focus() | 获取焦点 |      |

 > 注意，如果需要获得中国省市区数据，可以参考 [china-division](https://gist.github.com/afc163/7582f35654fd03d5be7009444345ea17)。
+
+## Design Token
+
+<ComponentTokenTable component="Cascader"></ComponentTokenTable>
--- a/components/checkbox/index.en-US.md
+++ b/components/checkbox/index.en-US.md
@ -69,3 +69,7 @@ interface Option {
 | ------- | ------------ | ------- |
 | blur()  | Remove focus |         |
 | focus() | Get focus    |         |
+
+## Design Token
+
+<ComponentTokenTable component="Checkbox"></ComponentTokenTable>
--- a/components/checkbox/index.zh-CN.md
+++ b/components/checkbox/index.zh-CN.md
@ -70,3 +70,7 @@ interface Option {
 | ------- | -------- | ---- |
 | blur()  | 移除焦点 |      |
 | focus() | 获取焦点 |      |
+
+## Design Token
+
+<ComponentTokenTable component="Checkbox"></ComponentTokenTable>
--- a/components/collapse/index.en-US.md
+++ b/components/collapse/index.en-US.md
@ -55,3 +55,7 @@ A content area which can be collapsed and expanded.
 | header | Title of the panel | ReactNode | - |  |
 | key | Unique key identifying the panel from among its siblings | string \| number | - |  |
 | showArrow | If false, panel will not show arrow icon. If false, collapsible can't be set as icon | boolean | true |  |
+
+## Design Token
+
+<ComponentTokenTable component="Collapse"></ComponentTokenTable>
--- a/components/collapse/index.zh-CN.md
+++ b/components/collapse/index.zh-CN.md
@ -56,3 +56,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*sir-TK0HkWcAAA
 | header | 面板头内容 | ReactNode | - |  |
 | key | 对应 activeKey | string \| number | - |  |
 | showArrow | 是否展示当前面板上的箭头（为 false 时，collapsible 不能置为 icon） | boolean | true |  |
+
+## Design Token
+
+<ComponentTokenTable component="Collapse"></ComponentTokenTable>
--- a/components/config-provider/tests/snapshots/components.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/components.test.tsx.snap
@ -15190,7 +15190,7 @@ exports[`ConfigProvider components List prefixCls 1`] = `
 `;

 exports[`ConfigProvider components Menu configProvider 1`] = `
-HTMLCollection [
+Array [
  <ul
    class="config-menu config-menu-root config-menu-inline config-menu-light"
    data-menu-list="true"
@ -15267,7 +15267,7 @@ HTMLCollection [
 `;

 exports[`ConfigProvider components Menu configProvider componentDisabled 1`] = `
-HTMLCollection [
+Array [
  <ul
    class="config-menu config-menu-root config-menu-inline config-menu-light"
    data-menu-list="true"
@ -15344,7 +15344,7 @@ HTMLCollection [
 `;

 exports[`ConfigProvider components Menu configProvider componentSize large 1`] = `
-HTMLCollection [
+Array [
  <ul
    class="config-menu config-menu-root config-menu-inline config-menu-light"
    data-menu-list="true"
@ -15421,7 +15421,7 @@ HTMLCollection [
 `;

 exports[`ConfigProvider components Menu configProvider componentSize middle 1`] = `
-HTMLCollection [
+Array [
  <ul
    class="config-menu config-menu-root config-menu-inline config-menu-light"
    data-menu-list="true"
@ -15498,7 +15498,7 @@ HTMLCollection [
 `;

 exports[`ConfigProvider components Menu normal 1`] = `
-HTMLCollection [
+Array [
  <ul
    class="ant-menu ant-menu-root ant-menu-inline ant-menu-light"
    data-menu-list="true"
@ -15575,7 +15575,7 @@ HTMLCollection [
 `;

 exports[`ConfigProvider components Menu prefixCls 1`] = `
-HTMLCollection [
+Array [
  <ul
    class="prefix-Menu prefix-Menu-root prefix-Menu-inline prefix-Menu-light"
    data-menu-list="true"
@ -25200,7 +25200,7 @@ exports[`ConfigProvider components Tags prefixCls 1`] = `
 `;

 exports[`ConfigProvider components TimePicker configProvider 1`] = `
-HTMLCollection [
+Array [
  <div
    class="config-picker"
  >
@ -26613,7 +26613,7 @@ HTMLCollection [
 `;

 exports[`ConfigProvider components TimePicker configProvider componentDisabled 1`] = `
-HTMLCollection [
+Array [
  <div
    class="config-picker config-picker-disabled"
  >
@ -26661,7 +26661,7 @@ HTMLCollection [
 `;

 exports[`ConfigProvider components TimePicker configProvider componentSize large 1`] = `
-HTMLCollection [
+Array [
  <div
    class="config-picker config-picker-large"
  >
@ -28074,7 +28074,7 @@ HTMLCollection [
 `;

 exports[`ConfigProvider components TimePicker configProvider componentSize middle 1`] = `
-HTMLCollection [
+Array [
  <div
    class="config-picker config-picker-middle"
  >
@ -29487,7 +29487,7 @@ HTMLCollection [
 `;

 exports[`ConfigProvider components TimePicker normal 1`] = `
-HTMLCollection [
+Array [
  <div
    class="ant-picker"
  >
@ -30900,7 +30900,7 @@ HTMLCollection [
 `;

 exports[`ConfigProvider components TimePicker prefixCls 1`] = `
-HTMLCollection [
+Array [
  <div
    class="prefix-TimePicker"
  >
@ -32445,7 +32445,7 @@ exports[`ConfigProvider components Timeline prefixCls 1`] = `
 `;

 exports[`ConfigProvider components Tooltip configProvider 1`] = `
-HTMLCollection [
+Array [
  <span
    class="config-tooltip-open"
  >
@ -32474,7 +32474,7 @@ HTMLCollection [
 `;

 exports[`ConfigProvider components Tooltip configProvider componentDisabled 1`] = `
-HTMLCollection [
+Array [
  <span
    class="config-tooltip-open"
  >
@ -32503,7 +32503,7 @@ HTMLCollection [
 `;

 exports[`ConfigProvider components Tooltip configProvider componentSize large 1`] = `
-HTMLCollection [
+Array [
  <span
    class="config-tooltip-open"
  >
@ -32532,7 +32532,7 @@ HTMLCollection [
 `;

 exports[`ConfigProvider components Tooltip configProvider componentSize middle 1`] = `
-HTMLCollection [
+Array [
  <span
    class="config-tooltip-open"
  >
@ -32561,7 +32561,7 @@ HTMLCollection [
 `;

 exports[`ConfigProvider components Tooltip normal 1`] = `
-HTMLCollection [
+Array [
  <span
    class="ant-tooltip-open"
  >
@ -32590,7 +32590,7 @@ HTMLCollection [
 `;

 exports[`ConfigProvider components Tooltip prefixCls 1`] = `
-HTMLCollection [
+Array [
  <span
    class="prefix-Tooltip-open"
  >
--- a/components/date-picker/generatePicker/index.tsx
+++ b/components/date-picker/generatePicker/index.tsx
@ -72,19 +72,15 @@ export function getTimeProps<DateType, DisabledTime>(
 const DataPickerPlacements = ['bottomLeft', 'bottomRight', 'topLeft', 'topRight'] as const;
 type DataPickerPlacement = typeof DataPickerPlacements[number];

-const HourStep = [0.5, 1, 1.5, 2, 3, 4, 6, 8, 12] as const;
-type THourStep = typeof HourStep[number];
-
 type InjectDefaultProps<Props> = Omit<
  Props,
-  'locale' | 'generateConfig' | 'hideHeader' | 'components' | 'hourStep'
+  'locale' | 'generateConfig' | 'hideHeader' | 'components'
 > & {
  locale?: PickerLocale;
  size?: SizeType;
  placement?: DataPickerPlacement;
  bordered?: boolean;
  status?: InputStatus;
-  hourStep?: THourStep;
 };

 export type PickerLocale = {
--- a/components/date-picker/index.en-US.md
+++ b/components/date-picker/index.en-US.md
@ -212,6 +212,10 @@ type GenericFn = (value: Dayjs) => string;
 export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
 ```

+## Design Token
+
+<ComponentTokenTable component="DatePicker"></ComponentTokenTable>
+
 ## FAQ

 ### When set mode to DatePicker/RangePicker, cannot select year or month anymore?
--- a/components/date-picker/index.zh-CN.md
+++ b/components/date-picker/index.zh-CN.md
@ -213,6 +213,10 @@ type GenericFn = (value: Dayjs) => string;
 export type FormatType = Generic | GenericFn | Array<Generic | GenericFn>;
 ```

+## Design Token
+
+<ComponentTokenTable component="DatePicker"></ComponentTokenTable>
+
 ## FAQ

 ### 当我指定了 DatePicker/RangePicker 的 mode 属性后，点击后无法选择年份/月份？
--- a/components/descriptions/index.en-US.md
+++ b/components/descriptions/index.en-US.md
@ -50,3 +50,7 @@ Commonly displayed on the details page.
 | span         | The number of columns included | number        | 1       |         |

 > The number of span Description.Item. Span={2} takes up the width of two DescriptionItems. When both `style` and `labelStyle`(or `contentStyle`) configured, both of them will work. And next one will overwrite first when conflict.
+
+## Design Token
+
+<ComponentTokenTable component="Descriptions"></ComponentTokenTable>
--- a/components/descriptions/index.zh-CN.md
+++ b/components/descriptions/index.zh-CN.md
@ -51,3 +51,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*d27AQJrowGAAAA
 | span         | 包含列的数量   | number        | 1      |       |

 > span 是 Description.Item 的数量。 span={2} 会占用两个 DescriptionItem 的宽度。当同时配置 `style` 和 `labelStyle`（或 `contentStyle`）时，两者会同时作用。样式冲突时，后者会覆盖前者。
+
+## Design Token
+
+<ComponentTokenTable component="Descriptions"></ComponentTokenTable>
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@ -71,3 +71,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | width | Width of the Drawer dialog | string \| number | 378 |  |
 | zIndex | The `z-index` of the Drawer | number | 1000 |  |
 | onClose | Specify a callback that will be called when a user clicks mask, close button or Cancel button | function(e) | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="Drawer"></ComponentTokenTable>
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@ -70,3 +70,7 @@ demo:
 | width | 宽度 | string \| number | 378 |  |
 | zIndex | 设置 Drawer 的 `z-index` | number | 1000 |  |
 | onClose | 点击遮罩层或左上角叉或取消按钮的回调 | function(e) | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="Drawer"></ComponentTokenTable>
--- a/components/empty/index.en-US.md
+++ b/components/empty/index.en-US.md
@ -62,3 +62,7 @@ Empty state placeholder.
    background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
  }
 </style>
+
+## Design Token
+
+<ComponentTokenTable component="Empty"></ComponentTokenTable>
--- a/components/empty/index.zh-CN.md
+++ b/components/empty/index.zh-CN.md
@ -63,3 +63,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*obM7S5lIxeMAAA
    background-image: url("https://user-images.githubusercontent.com/507615/54591670-ac0a0180-4a65-11e9-846c-e55ffce0fe7b.png");
  }
 </style>
+
+## Design Token
+
+<ComponentTokenTable component="Empty"></ComponentTokenTable>
--- a/components/float-button/index.en-US.md
+++ b/components/float-button/index.en-US.md
@ -65,3 +65,7 @@ FloatButton. Available since `5.0.0`.
 | target | Specifies the scrollable area dom node | () => HTMLElement | () => window |  |
 | visibilityHeight | The BackTop button will not show until the scroll height reaches this value | number | 400 |  |
 | onClick | A callback function, which can be executed when you click the button | () => void | - |  |
+
+## Design Token
+
+<ComponentTokenTable component="FloatButton"></ComponentTokenTable>
--- a/components/float-button/index.zh-CN.md
+++ b/components/float-button/index.zh-CN.md
@ -66,3 +66,7 @@ demo:
 | target           | 设置需要监听其滚动事件的元素       | () => HTMLElement | () => window |      |
 | visibilityHeight | 滚动高度达到此参数值才出现 BackTop | number            | 400          |      |
 | onClick          | 点击按钮的回调函数                 | () => void        | -            |      |
+
+## Design Token
+
+<ComponentTokenTable component="FloatButton"></ComponentTokenTable>
--- a/components/form/FormItem/index.tsx
+++ b/components/form/FormItem/index.tsx
@ -6,18 +6,19 @@ import type { Meta, NamePath } from 'rc-field-form/lib/interface';
 import useState from 'rc-util/lib/hooks/useState';
 import { supportRef } from 'rc-util/lib/ref';
 import * as React from 'react';
-import useFormItemStatus from '../hooks/useFormItemStatus';
-import { ConfigContext } from '../../config-provider';
 import { cloneElement, isValidElement } from '../../_util/reactNode';
 import warning from '../../_util/warning';
-import { FormContext, NoStyleItemContext } from '../context';
+import { ConfigContext } from '../../config-provider';
 import type { FormItemInputProps } from '../FormItemInput';
 import type { FormItemLabelProps, LabelTooltipType } from '../FormItemLabel';
+import { FormContext, NoStyleItemContext } from '../context';
+import useFormItemStatus from '../hooks/useFormItemStatus';
 import useFrameState from '../hooks/useFrameState';
 import useItemRef from '../hooks/useItemRef';
 import { getFieldId, toArray } from '../util';
 import ItemHolder from './ItemHolder';

+import useChildren from '../hooks/useChildren';
 import useStyle from '../style';

 const NAME_SPLIT = '__SPLIT__';
@ -110,7 +111,10 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
  } = props;
  const { getPrefixCls } = React.useContext(ConfigContext);
  const { name: formName } = React.useContext(FormContext);
-  const isRenderProps = typeof children === 'function';
+
+  const mergedChildren = useChildren(children);
+
+  const isRenderProps = typeof mergedChildren === 'function';
  const notifyParentMetaChange = React.useContext(NoStyleItemContext);

  const { validateTrigger: contextValidateTrigger } = React.useContext(FieldContext);
@ -232,7 +236,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
  }

  if (!hasName && !isRenderProps && !dependencies) {
-    return wrapSSR(renderLayout(children) as JSX.Element);
+    return wrapSSR(renderLayout(mergedChildren) as JSX.Element);
  }

  let variables: Record<string, string> = {};
@ -287,13 +291,13 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
          'Form.Item',
          "`shouldUpdate` and `dependencies` shouldn't be used together. See https://u.ant.design/form-deps.",
        );
-        if (Array.isArray(children) && hasName) {
+        if (Array.isArray(mergedChildren) && hasName) {
          warning(
            false,
            'Form.Item',
            'A `Form.Item` with a `name` prop must have a single child element. For information on how to render more complex form items, see https://u.ant.design/complex-form-item.',
          );
-          childNode = children;
+          childNode = mergedChildren;
        } else if (isRenderProps && (!(shouldUpdate || dependencies) || hasName)) {
          warning(
            !!(shouldUpdate || dependencies),
@ -311,14 +315,14 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
            'Form.Item',
            'Must set `name` or use a render function when `dependencies` is set.',
          );
-        } else if (isValidElement(children)) {
+        } else if (isValidElement(mergedChildren)) {
          warning(
-            children.props.defaultValue === undefined,
+            mergedChildren.props.defaultValue === undefined,
            'Form.Item',
            '`defaultValue` will not work on controlled Field. You should use `initialValues` of Form instead.',
          );

-          const childProps = { ...children.props, ...mergedControl };
+          const childProps = { ...mergedChildren.props, ...mergedControl };
          if (!childProps.id) {
            childProps.id = fieldId;
          }
@ -342,8 +346,8 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
            childProps['aria-required'] = 'true';
          }

-          if (supportRef(children)) {
-            childProps.ref = getItemRef(mergedName, children);
+          if (supportRef(mergedChildren)) {
+            childProps.ref = getItemRef(mergedName, mergedChildren);
          }

          // We should keep user origin event handler
@ -355,7 +359,7 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
          triggers.forEach((eventName) => {
            childProps[eventName] = (...args: any[]) => {
              mergedControl[eventName]?.(...args);
-              children.props[eventName]?.(...args);
+              mergedChildren.props[eventName]?.(...args);
            };
          });

@ -369,21 +373,21 @@ function InternalFormItem<Values = any>(props: FormItemProps<Values>): React.Rea
          childNode = (
            <MemoInput
              value={mergedControl[props.valuePropName || 'value']}
-              update={children}
+              update={mergedChildren}
              childProps={watchingChildProps}
            >
-              {cloneElement(children, childProps)}
+              {cloneElement(mergedChildren, childProps)}
            </MemoInput>
          );
        } else if (isRenderProps && (shouldUpdate || dependencies) && !hasName) {
-          childNode = children(context);
+          childNode = mergedChildren(context);
        } else {
          warning(
            !mergedName.length,
            'Form.Item',
            '`name` is only used for validate React element. If you are using Form.Item as layout display, please remove `name` instead.',
          );
-          childNode = children as React.ReactNode;
+          childNode = mergedChildren as React.ReactNode;
        }

        return renderLayout(childNode, fieldId, isRequired);
--- a/components/form/tests/index.test.tsx
+++ b/components/form/tests/index.test.tsx
@ -8,6 +8,7 @@ import Form from '..';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';
 import { fireEvent, pureRender, render, screen, waitFakeTimer } from '../../../tests/utils';
+import { resetWarned } from '../../_util/warning';
 import Button from '../../button';
 import Cascader from '../../cascader';
 import Checkbox from '../../checkbox';
@ -1459,7 +1460,7 @@ describe('Form', () => {
    render(
      <Modal open>
        <Form>
-          <Form.Item help='This is a help message'>
+          <Form.Item help="This is a help message">
            <Input />
          </Form.Item>
        </Form>
@ -1547,7 +1548,7 @@ describe('Form', () => {
      const [form] = Form.useForm();

      return (
-        <Form form={form} name='test-form'>
+        <Form form={form} name="test-form">
          <Form.Item name="error" rules={[{ required: true, message: 'This is a error message.' }]}>
            <ErrorItem />
          </Form.Item>
@ -1859,4 +1860,22 @@ describe('Form', () => {
    expect(container.querySelectorAll('.ant-form-item-required')).toHaveLength(2);
    expect(container.querySelectorAll('.ant-form-item-required-mark-optional')).toHaveLength(2);
  });
+
+  it('children support comment', () => {
+    resetWarned();
+
+    const { container } = render(
+      <Form initialValues={{ name: 'bamboo', age: '14' }}>
+        <Form.Item name="name">
+          {/* Comment here */}
+          <Input />
+        </Form.Item>
+        <Form.Item name="age">{[null, <Input key="input" />]}</Form.Item>
+      </Form>,
+    );
+
+    expect(container.querySelectorAll('input')[0].value).toEqual('bamboo');
+    expect(container.querySelectorAll('input')[1].value).toEqual('14');
+    expect(errorSpy).not.toHaveBeenCalled();
+  });
 });
--- a/components/form/demo/disabled.tsx
+++ b/components/form/demo/disabled.tsx
@ -1,23 +1,30 @@
-import React, { useState } from 'react';
 import { PlusOutlined } from '@ant-design/icons';
 import {
+  Button,
+  Cascader,
+  Checkbox,
+  DatePicker,
  Form,
  Input,
-  Button,
+  InputNumber,
  Radio,
  Select,
-  Cascader,
-  DatePicker,
-  InputNumber,
-  TreeSelect,
  Switch,
-  Checkbox,
+  TreeSelect,
  Upload,
 } from 'antd';
+import React, { useState } from 'react';

 const { RangePicker } = DatePicker;
 const { TextArea } = Input;

+const normFile = (e: any) => {
+  if (Array.isArray(e)) {
+    return e;
+  }
+  return e?.fileList;
+};
+
 const FormDisabledDemo: React.FC = () => {
  const [componentDisabled, setComponentDisabled] = useState<boolean>(true);

@ -91,7 +98,7 @@ const FormDisabledDemo: React.FC = () => {
        <Form.Item label="Switch" valuePropName="checked">
          <Switch />
        </Form.Item>
-        <Form.Item label="Upload" valuePropName="fileList">
+        <Form.Item label="Upload" valuePropName="fileList" getValueFromEvent={normFile}>
          <Upload action="/upload.do" listType="picture-card">
            <div>
              <PlusOutlined />
--- a/components/form/hooks/useChildren.ts
+++ b/components/form/hooks/useChildren.ts
@ -0,0 +1,13 @@
+import toArray from 'rc-util/lib/Children/toArray';
+import type { FormItemProps } from '../FormItem';
+
+export default function useChildren(
+  children?: FormItemProps['children'],
+): FormItemProps['children'] {
+  if (typeof children === 'function') {
+    return children;
+  }
+
+  const childList = toArray(children);
+  return childList.length <= 1 ? childList[0] : childList;
+}
--- a/components/form/index.en-US.md
+++ b/components/form/index.en-US.md
@ -481,6 +481,10 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | form | Form instance | FormInstance | Current form in context | 5.4.0 |
 | preserve | Whether to watch the field which has no matched `Form.Item` | boolean | false | 5.4.0 |

+## Design Token
+
+<ComponentTokenTable component="Form"></ComponentTokenTable>
+
 ## FAQ

 ### Custom validator not working
--- a/components/form/index.zh-CN.md
+++ b/components/form/index.zh-CN.md
@ -480,6 +480,10 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
 | form     | 指定 Form 实例                        | FormInstance | 当前 context 中的 Form | 5.4.0 |
 | preserve | 是否监视没有对应的 `Form.Item` 的字段 | boolean      | false                  | 5.4.0 |

+## Design Token
+
+<ComponentTokenTable component="Form"></ComponentTokenTable>
+
 ## FAQ

 ### 自定义 validator 没有效果
--- a/components/grid/index.en-US.md
+++ b/components/grid/index.en-US.md
@ -85,3 +85,7 @@ 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`).
+
+## Design Token
+
+<ComponentTokenTable component="Grid"></ComponentTokenTable>
--- a/components/grid/index.zh-CN.md
+++ b/components/grid/index.zh-CN.md
@ -84,3 +84,7 @@ 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` 的部分)。
+
+## Design Token
+
+<ComponentTokenTable component="Grid"></ComponentTokenTable>
--- a/components/icon/index.en-US.md
+++ b/components/icon/index.en-US.md
@ -177,3 +177,7 @@ The following properties are available for the component:
 | height | The height of the `svg` element | string \| number | `1em` |  |
 | style | The computed style of the `svg` element | CSSProperties | - |  |
 | width | The width of the `svg` element | string \| number | `1em` |  |
+
+## Design Token
+
+<ComponentTokenTable component="Icon"></ComponentTokenTable>
--- a/components/icon/index.zh-CN.md
+++ b/components/icon/index.zh-CN.md
@ -172,3 +172,7 @@ ReactDOM.createRoot(mountNode).render(<Icon component={MessageSvg} />);
 | height    | `svg` 元素高度          | string \| number | `1em`          |      |
 | style     | 计算后的 `svg` 元素样式 | CSSProperties    | -              |      |
 | width     | `svg` 元素宽度          | string \| number | `1em`          |      |
+
+## Design Token
+
+<ComponentTokenTable component="Icon"></ComponentTokenTable>
--- a/components/image/index.en-US.md
+++ b/components/image/index.en-US.md
@ -60,3 +60,7 @@ Previewable image.
 ```

 Other attributes [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+
+## Design Token
+
+<ComponentTokenTable component="Image"></ComponentTokenTable>
--- a/components/image/index.zh-CN.md
+++ b/components/image/index.zh-CN.md
@ -62,3 +62,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LVQ3R5JjjJEAAA
 ```

 其他属性见 [&lt;img>](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#Attributes)
+
+## Design Token
+
+<ComponentTokenTable component="Image"></ComponentTokenTable>
--- a/components/input-number/index.en-US.md
+++ b/components/input-number/index.en-US.md
@ -68,6 +68,10 @@ When a numeric value needs to be provided.
 | blur()  | Remove focus |
 | focus() | Get focus    |

+## Design Token
+
+<ComponentTokenTable component="InputNumber"></ComponentTokenTable>
+
 ## Notes

 Per issues [#21158](https://github.com/ant-design/ant-design/issues/21158), [#17344](https://github.com/ant-design/ant-design/issues/17344), [#9421](https://github.com/ant-design/ant-design/issues/9421), and [documentation about inputs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number#Using_number_inputs), it appears this community does not support native inclusion of the `type="number"` in the `<Input />` attributes, so please feel free to include it as needed, and be aware that it is heavily suggested that server side validation be utilized, as client side validation can be edited by power users.
--- a/components/input-number/index.zh-CN.md
+++ b/components/input-number/index.zh-CN.md
@ -71,6 +71,10 @@ demo:
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |

+## Design Token
+
+<ComponentTokenTable component="InputNumber"></ComponentTokenTable>
+
 ## FAQ

 ### 为何受控模式下，`value` 可以超出 `min` 和 `max` 范围？
--- a/components/input/style/index.ts
+++ b/components/input/style/index.ts
@ -610,6 +610,10 @@ const genAffixStyle: GenerateStyle<InputToken> = (token: InputToken) => {
        borderRadius: 0,
        outline: 'none',

+        '&::-ms-reveal': {
+          display: 'none',
+        },
+
        '&:focus': {
          boxShadow: 'none !important',
        },
--- a/components/layout/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/layout/tests/snapshots/demo-extend.test.ts.snap
@ -384,32 +384,37 @@ exports[`renders components/layout/demo/custom-trigger.tsx extend context correc
    </div>
  </aside>
  <section
-    class="ant-layout site-layout"
+    class="ant-layout"
  >
    <header
      class="ant-layout-header"
      style="padding: 0px; background: rgb(255, 255, 255);"
    >
-      <span
-        aria-label="menu-fold"
-        class="anticon anticon-menu-fold trigger"
-        role="img"
-        tabindex="-1"
+      <button
+        class="ant-btn ant-btn-text ant-btn-icon-only"
+        style="font-size: 16px; width: 64px; height: 64px;"
+        type="button"
      >
-        <svg
-          aria-hidden="true"
-          data-icon="menu-fold"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
+        <span
+          aria-label="menu-fold"
+          class="anticon anticon-menu-fold"
+          role="img"
        >
-          <path
-            d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"
-          />
-        </svg>
-      </span>
+          <svg
+            aria-hidden="true"
+            data-icon="menu-fold"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"
+            />
+          </svg>
+        </span>
+      </button>
    </header>
    <main
      class="ant-layout-content"
--- a/components/layout/tests/snapshots/demo.test.ts.snap
+++ b/components/layout/tests/snapshots/demo.test.ts.snap
@ -278,32 +278,37 @@ exports[`renders components/layout/demo/custom-trigger.tsx correctly 1`] = `
    </div>
  </aside>
  <section
-    class="ant-layout site-layout"
+    class="ant-layout"
  >
    <header
      class="ant-layout-header"
      style="padding:0;background:#ffffff"
    >
-      <span
-        aria-label="menu-fold"
-        class="anticon anticon-menu-fold trigger"
-        role="img"
-        tabindex="-1"
+      <button
+        class="ant-btn ant-btn-text ant-btn-icon-only"
+        style="font-size:16px;width:64px;height:64px"
+        type="button"
      >
-        <svg
-          aria-hidden="true"
-          data-icon="menu-fold"
-          fill="currentColor"
-          focusable="false"
-          height="1em"
-          viewBox="64 64 896 896"
-          width="1em"
+        <span
+          aria-label="menu-fold"
+          class="anticon anticon-menu-fold"
+          role="img"
        >
-          <path
-            d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"
-          />
-        </svg>
-      </span>
+          <svg
+            aria-hidden="true"
+            data-icon="menu-fold"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
+          >
+            <path
+              d="M408 442h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8zm-8 204c0 4.4 3.6 8 8 8h480c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8H408c-4.4 0-8 3.6-8 8v56zm504-486H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zm0 632H120c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h784c4.4 0 8-3.6 8-8v-56c0-4.4-3.6-8-8-8zM115.4 518.9L271.7 642c5.8 4.6 14.4.5 14.4-6.9V388.9c0-7.4-8.5-11.5-14.4-6.9L115.4 505.1a8.74 8.74 0 000 13.8z"
+            />
+          </svg>
+        </span>
+      </button>
    </header>
    <main
      class="ant-layout-content"
--- a/components/layout/demo/custom-trigger-debug.md
+++ b/components/layout/demo/custom-trigger-debug.md
@ -1,17 +1,3 @@
 ## zh-CN

 修改内容前，请尝试此 Demo 查看样式是否抖动。
-
-```css
-#components-layout-demo-custom-trigger .trigger {
-  padding: 0 24px;
-  font-size: 18px;
-  line-height: 64px;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-#components-layout-demo-custom-trigger .trigger:hover {
-  color: #1890ff;
-}
-```
--- a/components/layout/demo/custom-trigger-debug.tsx
+++ b/components/layout/demo/custom-trigger-debug.tsx
@ -9,7 +9,7 @@ import {
  UserOutlined,
 } from '@ant-design/icons';
 import type { MenuProps } from 'antd';
-import { Layout, Menu, theme } from 'antd';
+import { Layout, Menu, Button, theme } from 'antd';

 const { Header, Sider, Content } = Layout;

@ -84,10 +84,16 @@ const App: React.FC = () => {
      </Sider>
      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
-          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
-            className: 'trigger',
-            onClick: () => setCollapsed(!collapsed),
-          })}
+          <Button
+            type="text"
+            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+            onClick={() => setCollapsed(!collapsed)}
+            style={{
+              fontSize: '16px',
+              width: 64,
+              height: 64,
+            }}
+          />
        </Header>
        <Content
          style={{
--- a/components/layout/demo/custom-trigger.md
+++ b/components/layout/demo/custom-trigger.md
@ -5,23 +5,3 @@
 ## en-US

 If you want to use a customized trigger, you can hide the default one by setting `trigger={null}`.
-
-```css
-#components-layout-demo-custom-trigger .trigger {
-  padding: 0 24px;
-  font-size: 18px;
-  line-height: 64px;
-  cursor: pointer;
-  transition: color 0.3s;
-}
-
-#components-layout-demo-custom-trigger .trigger:hover {
-  color: #1890ff;
-}
-
-#components-layout-demo-custom-trigger .logo {
-  height: 32px;
-  margin: 16px;
-  background: rgba(255, 255, 255, 0.3);
-}
-```
--- a/components/layout/demo/custom-trigger.tsx
+++ b/components/layout/demo/custom-trigger.tsx
@ -6,7 +6,7 @@ import {
  UserOutlined,
  VideoCameraOutlined,
 } from '@ant-design/icons';
-import { Layout, Menu, theme } from 'antd';
+import { Layout, Menu, Button, theme } from 'antd';

 const { Header, Sider, Content } = Layout;

@ -43,12 +43,18 @@ const App: React.FC = () => {
          ]}
        />
      </Sider>
-      <Layout className="site-layout">
+      <Layout>
        <Header style={{ padding: 0, background: colorBgContainer }}>
-          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
-            className: 'trigger',
-            onClick: () => setCollapsed(!collapsed),
-          })}
+          <Button
+            type="text"
+            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+            onClick={() => setCollapsed(!collapsed)}
+            style={{
+              fontSize: '16px',
+              width: 64,
+              height: 64,
+            }}
+          />
        </Header>
        <Content
          style={{
--- a/components/layout/style/index.ts
+++ b/components/layout/style/index.ts
@ -72,7 +72,6 @@ const genLayoutStyle: GenerateStyle<LayoutToken, CSSObject> = (token) => {
        // fix firefox can't set width smaller than content on flex item
        minWidth: 0,
        background: colorBgHeader,
-        transition: `all ${motionDurationMid}`,

        '&-children': {
          height: '100%',
--- a/components/list/index.en-US.md
+++ b/components/list/index.en-US.md
@ -85,3 +85,7 @@ More about pagination, please check [`Pagination`](/components/pagination/).
 | avatar      | The avatar of list item      | ReactNode | -       |         |
 | description | The description of list item | ReactNode | -       |         |
 | title       | The title of list item       | ReactNode | -       |         |
+
+## Design Token
+
+<ComponentTokenTable component="List"></ComponentTokenTable>
--- a/components/list/index.zh-CN.md
+++ b/components/list/index.zh-CN.md
@ -88,3 +88,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*tBzwQ7raKX8AAA
 | avatar      | 列表元素的图标     | ReactNode | -      |      |
 | description | 列表元素的描述内容 | ReactNode | -      |      |
 | title       | 列表元素的标题     | ReactNode | -      |      |
+
+## Design Token
+
+<ComponentTokenTable component="List"></ComponentTokenTable>
--- a/components/locale/de_DE.ts
+++ b/components/locale/de_DE.ts
@ -20,6 +20,7 @@ const localeValues: Locale = {
    filterTitle: 'Filter-Menü',
    filterConfirm: 'OK',
    filterReset: 'Zurücksetzen',
+    filterEmptyText: 'Keine Filter',
    filterSearchPlaceholder: 'Suche in Filtern',
    filterCheckall: 'Alle auswählen',
    selectAll: 'Selektiere Alle',
@ -33,6 +34,11 @@ const localeValues: Locale = {
    triggerAsc: 'Klicken zur aufsteigenden Sortierung',
    cancelSort: 'Klicken zum Abbrechen der Sortierung',
  },
+  Tour: {
+    Next: 'Weiter',
+    Previous: 'Zurück',
+    Finish: 'Fertig',
+  },
  Modal: {
    okText: 'OK',
    cancelText: 'Abbrechen',
@ -118,13 +124,17 @@ const localeValues: Locale = {
        range: 'Die Anzahl an ${label} muss zwischen ${min} und ${max} liegen',
      },
      pattern: {
-        mismatch: '${label} enspricht nicht dem ${pattern} Muster',
+        mismatch: '${label} entspricht nicht dem ${pattern} Muster',
      },
    },
  },
  Image: {
    preview: 'Vorschau',
  },
+  QRCode: {
+    expired: 'QR-Code abgelaufen',
+    refresh: 'Aktualisieren',
+  },
 };

 export default localeValues;
--- a/components/mentions/index.en-US.md
+++ b/components/mentions/index.en-US.md
@ -87,3 +87,7 @@ return (
 | disabled | Optional | boolean | - |
 | className | className | string | - |
 | style | The style of the option | React.CSSProperties | - |
+
+## Design Token
+
+<ComponentTokenTable component="Mentions"></ComponentTokenTable>
--- a/components/mentions/index.zh-CN.md
+++ b/components/mentions/index.zh-CN.md
@ -88,3 +88,7 @@ return (
 | disabled  | 是否可选       | boolean             | -      |
 | className | css 类名       | string              | -      |
 | style     | 选项样式       | React.CSSProperties | -      |
+
+## Design Token
+
+<ComponentTokenTable component="Mentions"></ComponentTokenTable>
--- a/components/message/index.en-US.md
+++ b/components/message/index.en-US.md
@ -108,6 +108,10 @@ message.config({
 | rtl | Whether to enable RTL mode | boolean | false |  |
 | top | Distance from top | number | 8 |  |

+## Design Token
+
+<ComponentTokenTable component="Message"></ComponentTokenTable>
+
 ## FAQ

 ### Why I can not access context, redux, ConfigProvider `locale/prefixCls/theme` in message?
--- a/components/message/index.zh-CN.md
+++ b/components/message/index.zh-CN.md
@ -109,6 +109,10 @@ message.config({
 | rtl | 是否开启 RTL 模式 | boolean | false |  |
 | top | 消息距离顶部的位置 | number | 8 |  |

+## Design Token
+
+<ComponentTokenTable component="Message"></ComponentTokenTable>
+
 ## FAQ

 ### 为什么 message 不能获取 context、redux 的内容和 ConfigProvider 的 `locale/prefixCls/theme` 等配置？
--- a/components/modal/Modal.tsx
+++ b/components/modal/Modal.tsx
@ -36,34 +36,36 @@ if (canUseDocElement()) {
 }

 export interface ModalProps {
-  /** 对话框是否可见 */
+  /** Whether the modal dialog is visible or not */
  open?: boolean;
-  /** 确定按钮 loading */
+  /** Whether to apply loading visual effect for OK button or not */
  confirmLoading?: boolean;
-  /** 标题 */
+  /** The modal dialog's title */
  title?: React.ReactNode;
-  /** 是否显示右上角的关闭按钮 */
+  /** Whether a close (x) button is visible on top right of the modal dialog or not */
  closable?: boolean;
-  /** 点击确定回调 */
+  /** Specify a function that will be called when a user clicks the OK button */
  onOk?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-  /** 点击模态框右上角叉、取消按钮、Props.maskClosable 值为 true 时的遮罩层或键盘按下 Esc 时的回调 */
+  /** Specify a function that will be called when a user clicks mask, close button on top right or Cancel button */
  onCancel?: (e: React.MouseEvent<HTMLButtonElement>) => void;
  afterClose?: () => void;
-  /** 垂直居中 */
+  /** Callback when the animation ends when Modal is turned on and off */
+  afterOpenChange?: (open: boolean) => void;
+  /** Centered Modal */
  centered?: boolean;
-  /** 宽度 */
+  /** Width of the modal dialog */
  width?: string | number;
-  /** 底部内容 */
+  /** Footer content */
  footer?: React.ReactNode;
-  /** 确认按钮文字 */
+  /** Text of the OK button */
  okText?: React.ReactNode;
-  /** 确认按钮类型 */
+  /** Button `type` of the OK button */
  okType?: LegacyButtonType;
-  /** 取消按钮文字 */
+  /** Text of the Cancel button */
  cancelText?: React.ReactNode;
-  /** 点击蒙层是否允许关闭 */
+  /** Whether to close the modal dialog when the mask (area outside the modal) is clicked */
  maskClosable?: boolean;
-  /** 强制渲染 Modal */
+  /** Force render Modal */
  forceRender?: boolean;
  okButtonProps?: ButtonProps;
  cancelButtonProps?: ButtonProps;
--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@ -168,6 +168,10 @@ React.useEffect(() => {
 return <div>{contextHolder}</div>;
 ```

+## Design Token
+
+<ComponentTokenTable component="Modal"></ComponentTokenTable>
+
 ## FAQ

 ### Why content not update when Modal closed?
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@ -169,6 +169,10 @@ React.useEffect(() => {
 return <div>{contextHolder}</div>;
 ```

+## Design Token
+
+<ComponentTokenTable component="Modal"></ComponentTokenTable>
+
 ## FAQ

 ### 为什么 Modal 关闭时，内容不会更新？
--- a/components/notification/index.en-US.md
+++ b/components/notification/index.en-US.md
@ -95,6 +95,10 @@ notification.config({
 | top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels) | number | 24 |  |
 | maxCount | Max Notification show, drop oldest if exceed limit | number | - | 4.17.0 |

+## Design Token
+
+<ComponentTokenTable component="Notification"></ComponentTokenTable>
+
 ## FAQ

 ### Why I can not access context, redux, ConfigProvider `locale/prefixCls/theme` in notification?
--- a/components/notification/index.zh-CN.md
+++ b/components/notification/index.zh-CN.md
@ -96,6 +96,10 @@ notification.config({
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素 | number | 24 |  |
 | maxCount | 最大显示数, 超过限制时，最早的消息会被自动关闭 | number | - | 4.17.0 |

+## Design Token
+
+<ComponentTokenTable component="Notification"></ComponentTokenTable>
+
 ## FAQ

 ### 为什么 notification 不能获取 context、redux 的内容和 ConfigProvider 的 `locale/prefixCls/theme` 等配置？
--- a/components/popconfirm/index.en-US.md
+++ b/components/popconfirm/index.en-US.md
@ -48,6 +48,10 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha

 Consult [Tooltip's documentation](/components/tooltip/#api) to find more APIs.

+## Design Token
+
+<ComponentTokenTable component="Popconfirm"></ComponentTokenTable>
+
 ## Note

 Please ensure that the child node of `Popconfirm` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events.
--- a/components/popconfirm/index.zh-CN.md
+++ b/components/popconfirm/index.zh-CN.md
@ -49,6 +49,10 @@ demo:

 更多属性请参考 [Tooltip](/components/tooltip-cn/#api)。

+## Design Token
+
+<ComponentTokenTable component="Popconfirm"></ComponentTokenTable>
+
 ## 注意

 请确保 `Popconfirm` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
--- a/components/popover/index.en-US.md
+++ b/components/popover/index.en-US.md
@ -40,3 +40,7 @@ Consult [Tooltip's documentation](/components/tooltip/#api) to find more APIs.
 ## Note

 Please ensure that the child node of `Popover` accepts `onMouseEnter`, `onMouseLeave`, `onFocus`, `onClick` events.
+
+## Design Token
+
+<ComponentTokenTable component="Popover"></ComponentTokenTable>
--- a/components/popover/index.zh-CN.md
+++ b/components/popover/index.zh-CN.md
@ -41,3 +41,7 @@ demo:
 ## 注意

 请确保 `Popover` 的子元素能接受 `onMouseEnter`、`onMouseLeave`、`onFocus`、`onClick` 事件。
+
+## Design Token
+
+<ComponentTokenTable component="Popover"></ComponentTokenTable>
--- a/components/progress/index.en-US.md
+++ b/components/progress/index.en-US.md
@ -73,3 +73,7 @@ Properties that shared by all types.
 | gapDegree | The gap degree of half circle, 0 ~ 295 | number | 75 |
 | gapPosition | The gap position, options: `top` `bottom` `left` `right` | string | `bottom` |
 | strokeWidth | To set the width of the dashboard progress, unit: percentage of the canvas width | number | 6 |
+
+## Design Token
+
+<ComponentTokenTable component="Progress"></ComponentTokenTable>
--- a/components/progress/index.zh-CN.md
+++ b/components/progress/index.zh-CN.md
@ -74,3 +74,7 @@ demo:
 | gapDegree | 仪表盘进度条缺口角度，可取值 0 ~ 295 | number | 75 | - |
 | gapPosition | 仪表盘进度条缺口位置 | `top` \| `bottom` \| `left` \| `right` | `bottom` | - |
 | strokeWidth | 仪表盘进度条线的宽度，单位是进度条画布宽度的百分比 | number | 6 | - |
+
+## Design Token
+
+<ComponentTokenTable component="Progress"></ComponentTokenTable>
--- a/components/qrcode/index.en-US.md
+++ b/components/qrcode/index.en-US.md
@ -12,7 +12,7 @@ group:

 Components that can convert text into QR codes, and support custom color and logo. Available since `antd@5.1.0`.

-<Alert message="If the QR code cannot be scanned for identification, it may be because the link address is too long, which leads to too dense pixels. You can configure the QR code to be larger through `size`, or shorten the link through short link services."></Alert>
+<Alert message="If the QR code cannot be scanned for identification, it may be because the link address is too long, which leads to too dense pixels. You can configure the QR code to be larger through size, or shorten the link through short link services."></Alert>

 ## When To Use

@ -46,6 +46,10 @@ Used when the text needs to be converted into a QR Code.
 | status | QRCode status | `active \| expired \| loading ` | `active` |
 | onRefresh | callback | `() => void` | - |

+## Design Token
+
+<ComponentTokenTable component="QRCode"></ComponentTokenTable>
+
 ## FAQ

 ### About QRCode ErrorLevel
--- a/components/qrcode/index.zh-CN.md
+++ b/components/qrcode/index.zh-CN.md
@ -13,7 +13,7 @@ group:

 能够将文本转换生成二维码的组件，支持自定义配色和 Logo 配置，自 `antd@5.1.0` 版本开始提供该组件。

-<Alert message="若二维码无法扫码识别，可能是因为链接地址过长导致像素过于密集，可以通过 `size` 配置二维码更大，或者通过短链接服务等方式将链接变短。"></Alert>
+<Alert message="若二维码无法扫码识别，可能是因为链接地址过长导致像素过于密集，可以通过 size 配置二维码更大，或者通过短链接服务等方式将链接变短。"></Alert>

 ## 何时使用

@ -47,6 +47,10 @@ group:
 | status | 二维码状态 | `active \| expired \| loading ` | `active` |
 | onRefresh | 点击"点击刷新"的回调 | `() => void` | - |

+## Design Token
+
+<ComponentTokenTable component="QRCode"></ComponentTokenTable>
+
 ## FAQ

 ### 关于二维码纠错等级
--- a/components/radio/index.en-US.md
+++ b/components/radio/index.en-US.md
@ -67,3 +67,7 @@ Radio group can wrap a group of `Radio`。
 | ------- | ------------ |
 | blur()  | Remove focus |
 | focus() | Get focus    |
+
+## Design Token
+
+<ComponentTokenTable component="Radio"></ComponentTokenTable>
--- a/components/radio/index.zh-CN.md
+++ b/components/radio/index.zh-CN.md
@ -70,3 +70,7 @@ demo:
 | ------- | -------- |
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |
+
+## Design Token
+
+<ComponentTokenTable component="Radio"></ComponentTokenTable>
--- a/components/rate/index.en-US.md
+++ b/components/rate/index.en-US.md
@ -53,3 +53,7 @@ Rate component.
 | ------- | ------------ |
 | blur()  | Remove focus |
 | focus() | Get focus    |
+
+## Design Token
+
+<ComponentTokenTable component="Rate"></ComponentTokenTable>
--- a/components/rate/index.zh-CN.md
+++ b/components/rate/index.zh-CN.md
@ -54,3 +54,7 @@ demo:
 | ------- | -------- |
 | blur()  | 移除焦点 |
 | focus() | 获取焦点 |
+
+## Design Token
+
+<ComponentTokenTable component="Rate"></ComponentTokenTable>
--- a/components/result/index.en-US.md
+++ b/components/result/index.en-US.md
@ -33,3 +33,7 @@ Use when important operations need to inform the user to process the results and
 | status | Result status, decide icons and colors | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | `info` |
 | subTitle | The subTitle | ReactNode | - |
 | title | The title | ReactNode | - |
+
+## Design Token
+
+<ComponentTokenTable component="Result"></ComponentTokenTable>
--- a/components/result/index.zh-CN.md
+++ b/components/result/index.zh-CN.md
@ -34,3 +34,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*-0kxQrbHx2kAAA
 | status | 结果的状态，决定图标和颜色 | `success` \| `error` \| `info` \| `warning` \| `404` \| `403` \| `500` | `info` |
 | subTitle | subTitle 文字 | ReactNode | - |
 | title | title 文字 | ReactNode | - |
+
+## Design Token
+
+<ComponentTokenTable component="Result"></ComponentTokenTable>
--- a/components/segmented/index.en-US.md
+++ b/components/segmented/index.en-US.md
@ -43,3 +43,7 @@ Segmented Controls. This component is available since `antd@4.20.0`.
 | options | Set children optional | string\[] \| number\[] \| Array<{ label: ReactNode value: string icon? ReactNode disabled?: boolean className?: string }> | [] |  |
 | size | The size of the Segmented. | `large` \| `middle` \| `small` | `middle` |  |
 | value | Currently selected value | string \| number |  |  |
+
+## Design Token
+
+<ComponentTokenTable component="Segmented"></ComponentTokenTable>
--- a/components/segmented/index.zh-CN.md
+++ b/components/segmented/index.zh-CN.md
@ -46,3 +46,7 @@ demo:
 | options | 数据化配置选项内容 | string\[] \| number\[] \| Array<{ label: ReactNode value: string icon? ReactNode disabled?: boolean className?: string }> | [] |  |
 | size | 控件尺寸 | `large` \| `middle` \| `small` | `middle` |  |
 | value | 当前选中的值 | string \| number |  |  |
+
+## Design Token
+
+<ComponentTokenTable component="Segmented"></ComponentTokenTable>
--- a/components/select/index.en-US.md
+++ b/components/select/index.en-US.md
@ -91,7 +91,7 @@ Select component to select value from options.
 | placement | The position where the selection box pops up | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | removeIcon | The custom remove icon | ReactNode | - |  |
 | searchValue | The current input "search" text | string | - |  |
-| showArrow | Whether to show the drop-down arrow | boolean | true(for single select), false(for multiple select) |  |
+| showArrow | Whether to show the drop-down arrow | boolean | `true` |  |
 | showSearch | Whether select is searchable | boolean | single: false, multiple: true |  |
 | size | Size of Select input | `large` \| `middle` \| `small` | `middle` |  |
 | status | Set validation status | 'error' \| 'warning' | - | 4.19.0 |
--- a/components/select/index.zh-CN.md
+++ b/components/select/index.zh-CN.md
@ -92,7 +92,7 @@ demo:
 | placement | 选择框弹出的位置 | `bottomLeft` `bottomRight` `topLeft` `topRight` | bottomLeft |  |
 | removeIcon | 自定义的多选框清除图标 | ReactNode | - |  |
 | searchValue | 控制搜索文本 | string | - |  |
-| showArrow | 是否显示下拉小箭头 | boolean | 单选为 true，多选为 false |  |
+| showArrow | 是否显示下拉小箭头 | boolean | `true` |  |
 | showSearch | 配置是否可搜索 | boolean | 单选为 false，多选为 true |  |
 | size | 选择框大小 | `large` \| `middle` \| `small` | `middle` |  |
 | status | 设置校验状态 | 'error' \| 'warning' | - | 4.19.0 |
--- a/components/skeleton/index.en-US.md
+++ b/components/skeleton/index.en-US.md
@ -74,3 +74,7 @@ Provide a placeholder while you wait for content to load, or to visualize conten
 | -------- | --------------------- | ------------------------------- | ------- |
 | active   | Show animation effect | boolean                         | false   |
 | size     | Set the size of input | `large` \| `small` \| `default` | -       |
+
+## Design Token
+
+<ComponentTokenTable component="Skeleton"></ComponentTokenTable>
--- a/Show More
+++ b/Show More