chore: auto merge branchs (#34666)

chore: sync master to feature
2025-06-07 17:44:35 +08:00 · 2022-03-23 06:59:20 +00:00 · 2022-03-23 06:59:20 +00:00 · 6df508d594
commit 6df508d594
parent 80377f2243 10e7337081
26 changed files with 1027 additions and 135 deletions
--- a/.github/workflows/issue-open-check.yml
+++ b/.github/workflows/issue-open-check.yml
@ -83,6 +83,6 @@ jobs:
        with:
          DING_TALK_TOKEN: ${{ secrets.DINGDING_BOT_TOKEN }}
          notify_title: '🔥 @${{ github.event.issue.user.login }} 创建了 issue：${{ github.event.issue.title }}'
-          notify_body: '### 🔥 @${{ github.event.issue.user.login }} 创建了 issue：[${{ github.event.issue.title }}](${{ github.event.issue.html_url }}) <hr /> ![](https://gw.alipayobjects.com/zos/antfincdn/5Cl2G7JjF/jieping2022-03-20%252520xiawu11.06.04.png) <hr /> ${{ github.event.issue.body }}'
+          notify_body: '### 🔥 @${{ github.event.issue.user.login }} 创建了 issue：[${{ github.event.issue.title }}](${{ github.event.issue.html_url }}) <hr /> ![](https://gw.alipayobjects.com/zos/antfincdn/5Cl2G7JjF/jieping2022-03-20%252520xiawu11.06.04.png)'
          notify_footer: '> 💬 欢迎前往 GitHub 进行讨论，社区可能需要你的帮助。'
          at_all: false # whether to ding everybody
--- a/.github/workflows/preview-build.yml
+++ b/.github/workflows/preview-build.yml
@ -16,7 +16,7 @@ jobs:
        uses: actions/checkout@v3

      - name: cache package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}
@ -32,7 +32,7 @@ jobs:
          cp package-lock.json package-temp-dir
      - name: cache node_modules
        id: node_modules_cache_id
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@ -50,13 +50,13 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
--- a/.github/workflows/site-deploy.yml
+++ b/.github/workflows/site-deploy.yml
@ -13,7 +13,7 @@ jobs:
        uses: actions/checkout@v3

      - name: cache package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}
@ -29,7 +29,7 @@ jobs:
          cp package-lock.json package-temp-dir
      - name: cache node_modules
        id: node_modules_cache_id
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@ -46,13 +46,13 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
--- a/.github/workflows/test.yml
+++ b/.github/workflows/test.yml
@ -12,7 +12,7 @@ jobs:
        uses: actions/checkout@v3

      - name: cache package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}
@ -28,7 +28,7 @@ jobs:
          cp package-lock.json package-temp-dir
      - name: cache node_modules
        id: node_modules_cache_id
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@ -44,25 +44,25 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: cache lib
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: lib
          key: lib-${{ github.sha }}

      - name: cache es
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: es
          key: es-${{ github.sha }}
@ -81,13 +81,13 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@ -103,13 +103,13 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@ -125,13 +125,13 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@ -148,13 +148,13 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@ -174,13 +174,13 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@ -197,19 +197,19 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: restore cache from lib
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: lib
          key: lib-${{ github.sha }}
@ -228,19 +228,19 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: restore cache from es
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: es
          key: es-${{ github.sha }}
@ -259,13 +259,13 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@ -299,13 +299,13 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@ -327,13 +327,13 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@ -355,19 +355,19 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: restore cache from lib
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: lib
          key: lib-${{ github.sha }}
@ -391,19 +391,19 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}

      - name: restore cache from es
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: es
          key: es-${{ github.sha }}
@ -427,13 +427,13 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@ -463,13 +463,13 @@ jobs:
        uses: actions/checkout@v3

      - name: restore cache from package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}

      - name: restore cache from node_modules
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
--- a/.github/workflows/ui.yml
+++ b/.github/workflows/ui.yml
@ -15,7 +15,7 @@ jobs:
        uses: actions/checkout@v3

      - name: cache package-lock.json
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}
@ -31,7 +31,7 @@ jobs:
          cp package-lock.json package-temp-dir
      - name: cache node_modules
        id: node_modules_cache_id
-        uses: actions/cache@v2
+        uses: actions/cache@v3
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
--- a/README-ja_JP.md
+++ b/README-ja_JP.md
@ -0,0 +1,161 @@
+<p align="center">
+  <a href="https://ant.design">
+    <img width="200" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg">
+  </a>
+</p>
+
+<h1 align="center">Ant Design</h1>
+
+<div align="center">
+
+エンタープライズクラスのUI設計言語とReact UIライブラリです。
+
+[![CI status][github-action-image]][github-action-url] [![codecov][codecov-image]][codecov-url] [![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url]
+
+[![Renovate status][renovate-image]][renovate-dashboard-url] [![Total alerts][lgtm-image]][lgtm-url] [![][bundlesize-js-image]][unpkg-js-url] [![][bundlesize-css-image]][unpkg-css-url]
+
+[![Follow Twitter][twitter-image]][twitter-url] [![FOSSA Status][fossa-image]][fossa-url] [![Discussions][discussions-image]][discussions-url] [![][issues-helper-image]][issues-helper-url] [![Issues need help][help-wanted-image]][help-wanted-url]
+
+[npm-image]: http://img.shields.io/npm/v/antd.svg?style=flat-square
+[npm-url]: http://npmjs.org/package/antd
+[github-action-image]: https://github.com/ant-design/ant-design/workflows/%E2%9C%85%20test/badge.svg
+[github-action-url]: https://github.com/ant-design/ant-design/actions?query=workflow%3A%22%E2%9C%85+test%22
+[codecov-image]: https://img.shields.io/codecov/c/github/ant-design/ant-design/master.svg?style=flat-square
+[codecov-url]: https://codecov.io/gh/ant-design/ant-design/branch/master
+[download-image]: https://img.shields.io/npm/dm/antd.svg?style=flat-square
+[download-url]: https://npmjs.org/package/antd
+[lgtm-image]: https://flat.badgen.net/lgtm/alerts/g/ant-design/ant-design
+[lgtm-url]: https://lgtm.com/projects/g/ant-design/ant-design/alerts/
+[fossa-image]: https://app.fossa.io/api/projects/git%2Bgithub.com%2Fant-design%2Fant-design.svg?type=shield
+[fossa-url]: https://app.fossa.io/projects/git%2Bgithub.com%2Fant-design%2Fant-design?ref=badge_shield
+[help-wanted-image]: https://flat.badgen.net/github/label-issues/ant-design/ant-design/help%20wanted/open
+[help-wanted-url]: https://github.com/ant-design/ant-design/issues?q=is%3Aopen+is%3Aissue+label%3A%22help+wanted%22
+[twitter-image]: https://img.shields.io/twitter/follow/AntDesignUI.svg?label=Ant%20Design&style=social
+[twitter-url]: https://twitter.com/AntDesignUI
+[discussions-image]: https://img.shields.io/badge/discussions-on%20github-blue?style=flat-square
+[discussions-url]: https://github.com/ant-design/ant-design/discussions
+[bundlesize-js-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.js?label=antd.min.js&compression=gzip&style=flat-square
+[bundlesize-css-image]: https://img.badgesize.io/https:/unpkg.com/antd/dist/antd.min.css?label=antd.min.css&compression=gzip&style=flat-square
+[unpkg-js-url]: https://unpkg.com/browse/antd/dist/antd.min.js
+[unpkg-css-url]: https://unpkg.com/browse/antd/dist/antd.min.css
+[issues-helper-image]: https://img.shields.io/badge/using-issues--helper-orange?style=flat-square
+[issues-helper-url]: https://github.com/actions-cool/issues-helper
+[renovate-image]: https://img.shields.io/badge/renovate-enabled-brightgreen.svg?style=flat-square
+[renovate-dashboard-url]: https://github.com/ant-design/ant-design/issues/32498
+
+</div>
+
+[![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://ant.design)
+
+[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | 日本語
+
+## ✨ 機能
+
+- 🌈 ウェブアプリケーション用に設計されたエンタープライズクラスの UI。
+- 📦 高品質な React コンポーネントのセットが箱から出されます。
+- 🛡 TypeScript で書かれており、予測可能な静的型がある。
+- ⚙️ デザインリソースと開発ツールの全体的なパッケージ。
+- 🌍 数十の言語に対応した国際化サポート。
+- 🎨 強力なテーマのカスタマイズを細部にわたって実現。
+
+## 🖥 環境対応
+
+- モダンブラウザ、Internet Explorer 11 (with [polyfills](https://stackoverflow.com/questions/57020976/polyfills-in-2019-for-ie11))
+- サーバーサイド レンダリング
+- [Electron](https://www.electronjs.org/)
+
+| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>IE / Edge | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/electron/electron_48x48.png" alt="Electron" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)<br>Electron |
+| --- | --- | --- | --- | --- |
+| IE11, Edge | 直近の 2 バージョン | 直近の 2 バージョン | 直近の 2 バージョン | 直近の 2 バージョン |
+
+## 📦 インストール
+
+```bash
+npm install antd
+```
+
+```bash
+yarn add antd
+```
+
+## 🔨 使い方
+
+```jsx
+import { Button, DatePicker } from 'antd';
+
+const App = () => (
+  <>
+    <Button type="primary">PRESS ME</Button>
+    <DatePicker placeholder="select date" />
+  </>
+);
+```
+
+そして、手動でスタイルをインポートする:
+
+```jsx
+import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
+```
+
+### TypeScript
+
+`antd` は TypeScript で書かれており、完全な定義がなされています。まずは [TypeScript で使う](https://ant.design/docs/react/use-in-typescript)をチェックしてください。
+
+## 🌍 国際化対応
+
+数十の言語が `antd` でサポートされています。[i18n](https://ant.design/docs/react/i18n) を参照してください。
+
+## 🔗 リンク
+
+- [ホームページ](https://ant.design/)
+- [コンポーネントの概要](https://ant.design/components/overview)
+- [Ant Design Pro](http://pro.ant.design/)
+- [変更ログ](CHANGELOG.en-US.md)
+- [rc-components](http://react-component.github.io/)
+- [Mobile UI](http://mobile.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)
+- [Ant Design カラー](https://github.com/ant-design/ant-design-colors)
+- [ランディングページ](https://landing.ant.design)
+- [動作](https://motion.ant.design)
+- [足場マーケット](http://scaffold.ant.design)
+- [開発者向けインストラクション](https://github.com/ant-design/ant-design/wiki/Development)
+- [バージョン管理リリースノート](https://github.com/ant-design/ant-design/wiki/%E8%BD%AE%E5%80%BC%E8%A7%84%E5%88%99%E5%92%8C%E7%89%88%E6%9C%AC%E5%8F%91%E5%B8%83%E6%B5%81%E7%A8%8B)
+- [FAQ](https://ant.design/docs/react/faq)
+- バグレポート用の [CodeSandbox テンプレート](https://u.ant.design/codesandbox-repro)
+- [テーマのカスタマイズ](https://ant.design/docs/react/customize-theme)
+- [コラボレーターへの応募方法](https://github.com/ant-design/ant-design/wiki/Collaborators#how-to-apply-for-being-a-collaborator)
+
+## ⌨️ 開発
+
+GitHub の無料オンライン開発環境である Gitpod を利用する。
+
+[![Gitpod で開く](https://gitpod.io/button/open-in-gitpod.svg)](https://gitpod.io/#https://github.com/ant-design/ant-design)
+
+またはローカルにクローンする:
+
+```bash
+$ git clone git@github.com:ant-design/ant-design.git
+$ cd ant-design
+$ npm install
+$ npm start
+```
+
+ブラウザを起動し、http://127.0.0.1:8001 にアクセスして[開発セクション](https://github.com/ant-design/ant-design/wiki/Development)の続きをもっと見る.
+
+## 🤝 貢献 [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)
+
+[貢献ガイド](https://ant.design/docs/react/contributing)を読んで、よりよい antd を一緒の作り上げましょう。
+
+すべての貢献に感謝します。まずは [CONTRIBUTING.md](https://github.com/ant-design/ant-design/blob/master/.github/CONTRIBUTING.md) をお読みください. どんなアイデアも [Pull Request](https://github.com/ant-design/ant-design/pulls) や [GitHub issues](https://github.com/ant-design/ant-design/issues) で応募することができます. コードの改良をしたい方は、[開発手順](https://github.com/ant-design/ant-design/wiki/Development) を確認してください。あとは楽しみましょう! :)
+
+コラボレーターの方は、[コラボレーター テンプレート](https://github.com/ant-design/ant-design/compare?expand=1&template=collaborator.md)を使い、Pull Request を作成するための[プルリクエストの原則](https://github.com/ant-design/ant-design/wiki/PR-principle)に従ってください。
+
+[![このレポジトリの課題に資金を提供しよう](https://issuehunt.io/static/embed/issuehunt-button-v1.svg)](https://issuehunt.io/repos/34526884)
+
+## ❤️ スポンサーと後援者 [![](https://opencollective.com/ant-design/tiers/sponsors/badge.svg?label=Sponsors&color=brightgreen)](https://opencollective.com/ant-design#support) [![](https://opencollective.com/ant-design/tiers/backers/badge.svg?label=Backers&color=brightgreen)](https://opencollective.com/ant-design#support)
+
+[![](https://opencollective.com/ant-design/tiers/sponsors.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
+
+[![](https://opencollective.com/ant-design/tiers/backers.svg?avatarHeight=36)](https://opencollective.com/ant-design#support)
--- a/README-pt_BR.md
+++ b/README-pt_BR.md
@ -49,7 +49,7 @@ Uma solução empresarial de design e biblioteca UI para React.

 [![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://ant.design)

-[English](./README.md) | Português | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md)
+[English](./README.md) | Português | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md)

 ## ✨ Funcionalidades

--- a/README-sp_MX.md
+++ b/README-sp_MX.md
@ -47,7 +47,7 @@ Un lenguaje de diseño de interfaz de usuario de clase empresarial y una bibliot

 [![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://ant.design)

-[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | Spanish 
+[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | [Українською](./README-uk_UA.md) | Spanish | [日本語](./README-ja_JP.md)

 ## ✨ Características

--- a/README-uk_UA.md
+++ b/README-uk_UA.md
@ -49,7 +49,7 @@

 [![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Yl83RJhUE7kAAAAAAAAAAABkARQnAQ)](https://ant.design)

-[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | Українською | [Spanish](./README-sp_MX.md)
+[English](./README.md) | [Português](./README-pt_BR.md) | [简体中文](./README-zh_CN.md) | Українською | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md)

 ## ✨ Особливості

--- a/README-zh_CN.md
+++ b/README-zh_CN.md
@ -49,7 +49,7 @@

 [![](https://gw.alipayobjects.com/mdn/rms_08e378/afts/img/A*Ey3wTo-5__QAAAAAAAAAAABkARQnAQ)](https://ant.design/index-cn)

-[English](./README.md) | [Português](./README-pt_BR.md) | 简体中文 | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md)
+[English](./README.md) | [Português](./README-pt_BR.md) | 简体中文 | [Українською](./README-uk_UA.md) | [Spanish](./README-sp_MX.md) | [日本語](./README-ja_JP.md)

 ## ✨ 特性

--- a/components/affix/index.tsx
+++ b/components/affix/index.tsx
@ -33,7 +33,7 @@ export interface AffixProps {
  children: React.ReactNode;
 }

-export interface InternalAffixProps extends AffixProps {
+interface InternalAffixProps extends AffixProps {
  affixPrefixCls: string;
 }

@ -302,13 +302,13 @@ const AffixFC = React.forwardRef<Affix, AffixProps>((props, ref) => {

  const affixPrefixCls = getPrefixCls('affix', customizePrefixCls);

-  const AffixProps: InternalAffixProps = {
+  const affixProps: InternalAffixProps = {
    ...props,

    affixPrefixCls,
  };

-  return <Affix {...AffixProps} ref={ref} />;
+  return <Affix {...affixProps} ref={ref} />;
 });

 if (process.env.NODE_ENV !== 'production') {
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@ -35,7 +35,7 @@ A Drawer is a panel that is typically overlaid on top of a page and slides in fr
 | forceRender | Prerender Drawer component forcely | boolean | false |  |
 | getContainer | Return the mounted node for Drawer | HTMLElement \| () => HTMLElement \| Selectors \| false | body |  |
 | headerStyle | Style of the drawer header part | object | - |  |
-| height | Placement is `top` or `bottom`, height of the Drawer dialog | string \| number | 256 |  |
+| height | Placement is `top` or `bottom`, height of the Drawer dialog | string \| number | 378 |  |
 | keyboard | Whether support press esc to close | boolean | true |  |
 | mask | Whether to show mask or not | boolean | true |  |
 | maskClosable | Clicking on the mask (area outside the Drawer) to close the Drawer or not | boolean | true |  |
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@ -34,7 +34,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/7z8NJQhFb/Drawer.svg
 | forceRender | 预渲染 Drawer 内元素 | boolean | false |  |
 | getContainer | 指定 Drawer 挂载的 HTML 节点, false 为挂载在当前 dom | HTMLElement \| () => HTMLElement \| Selectors \| false | body |  |
 | headerStyle | 用于设置 Drawer 头部的样式 | CSSProperties | - |  |
-| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 256 |  |
+| height | 高度, 在 `placement` 为 `top` 或 `bottom` 时使用 | string \| number | 378 |  |
 | keyboard | 是否支持键盘 esc 关闭 | boolean | true |  |
 | mask | 是否展示遮罩 | boolean | true |  |
 | maskClosable | 点击蒙层是否允许关闭 | boolean | true |  |
--- a/components/layout/tests/index.test.js
+++ b/components/layout/tests/index.test.js
@ -6,7 +6,7 @@ import Menu from '../../menu';
 import mountTest from '../../../tests/shared/mountTest';
 import rtlTest from '../../../tests/shared/rtlTest';

-const { Sider, Content } = Layout;
+const { Sider, Content, Footer, Header } = Layout;

 describe('Layout', () => {
  mountTest(Layout);
@ -285,15 +285,19 @@ describe('Sider', () => {
    expect(wrapper.find('.ant-layout-sider-zero-width-trigger').find('.my-trigger').length).toBe(1);
  });

-  it('should get aside element from ref', () => {
-    const ref = React.createRef();
-    const onSelect = jest.fn();
+  ['Layout', 'Header', 'Footer', 'Sider'].forEach(tag => {
+    const ComponentMap = { Layout, Header, Footer, Sider };
+    it(`should get ${tag} element from ref`, () => {
+      const ref = React.createRef();
+      const onSelect = jest.fn();
+      const Component = ComponentMap[tag];

-    mount(
-      <Sider onSelect={onSelect} ref={ref}>
-        Sider
-      </Sider>,
-    );
-    expect(ref.current instanceof HTMLElement).toBe(true);
+      mount(
+        <Component onSelect={onSelect} ref={ref}>
+          {tag}
+        </Component>,
+      );
+      expect(ref.current instanceof HTMLElement).toBe(true);
+    });
  });
 });
--- a/components/layout/index.tsx
+++ b/components/layout/index.tsx
@ -1,10 +1,12 @@
-import InternalLayout, { BasicProps, Content, Footer, Header } from './layout';
+import InternalLayout, { Content, Footer, Header } from './layout';
 import Sider from './Sider';

 export { BasicProps as LayoutProps } from './layout';
 export { SiderProps } from './Sider';

-interface LayoutType extends React.FC<BasicProps> {
+type InternalLayoutType = typeof InternalLayout;
+
+interface LayoutType extends InternalLayoutType {
  Header: typeof Header;
  Footer: typeof Footer;
  Content: typeof Content;
--- a/components/layout/layout.tsx
+++ b/components/layout/layout.tsx
@ -31,25 +31,25 @@ interface BasicPropsWithTagName extends BasicProps {

 function generator({ suffixCls, tagName, displayName }: GeneratorProps) {
  return (BasicComponent: any) => {
-    const Adapter: React.FC<BasicProps> = props => {
+    const Adapter = React.forwardRef<HTMLElement, BasicProps>((props, ref) => {
      const { getPrefixCls } = React.useContext(ConfigContext);
      const { prefixCls: customizePrefixCls } = props;
      const prefixCls = getPrefixCls(suffixCls, customizePrefixCls);

-      return <BasicComponent prefixCls={prefixCls} tagName={tagName} {...props} />;
-    };
+      return <BasicComponent ref={ref} prefixCls={prefixCls} tagName={tagName} {...props} />;
+    });
    Adapter.displayName = displayName;
    return Adapter;
  };
 }

-const Basic = (props: BasicPropsWithTagName) => {
+const Basic = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props, ref) => {
  const { prefixCls, className, children, tagName, ...others } = props;
  const classString = classNames(prefixCls, className);
-  return React.createElement(tagName, { className: classString, ...others }, children);
-};
+  return React.createElement(tagName, { className: classString, ...others, ref }, children);
+});

-const BasicLayout: React.FC<BasicPropsWithTagName> = props => {
+const BasicLayout = React.forwardRef<HTMLElement, BasicPropsWithTagName>((props, ref) => {
  const { direction } = React.useContext(ConfigContext);

  const [siders, setSiders] = React.useState<string[]>([]);
@ -80,12 +80,12 @@ const BasicLayout: React.FC<BasicPropsWithTagName> = props => {

  return (
    <LayoutContext.Provider value={contextValue}>
-      <Tag className={classString} {...others}>
+      <Tag ref={ref} className={classString} {...others}>
        {children}
      </Tag>
    </LayoutContext.Provider>
  );
-};
+});

 const Layout = generator({
  suffixCls: 'layout',
--- a/components/locale-provider/tests/snapshots/index.test.js.snap
+++ b/components/locale-provider/tests/snapshots/index.test.js.snap
@ -246411,25 +246411,25 @@ exports[`Locale Provider should display the text as pt 1`] = `
                <thead>
                  <tr>
                    <th>
-                      2ª
+                      Seg
                    </th>
                    <th>
-                      3ª
+                      Ter
                    </th>
                    <th>
-                      4ª
+                      Qua
                    </th>
                    <th>
-                      5ª
+                      Qui
                    </th>
                    <th>
-                      6ª
+                      Sex
                    </th>
                    <th>
-                      Sá
+                      Sáb
                    </th>
                    <th>
-                      Do
+                      Dom
                    </th>
                  </tr>
                </thead>
@ -248467,25 +248467,25 @@ exports[`Locale Provider should display the text as pt 1`] = `
                    <thead>
                      <tr>
                        <th>
-                          2ª
+                          Seg
                        </th>
                        <th>
-                          3ª
+                          Ter
                        </th>
                        <th>
-                          4ª
+                          Qua
                        </th>
                        <th>
-                          5ª
+                          Qui
                        </th>
                        <th>
-                          6ª
+                          Sex
                        </th>
                        <th>
-                          Sá
+                          Sáb
                        </th>
                        <th>
-                          Do
+                          Dom
                        </th>
                      </tr>
                    </thead>
@ -249003,25 +249003,25 @@ exports[`Locale Provider should display the text as pt 1`] = `
                    <thead>
                      <tr>
                        <th>
-                          2ª
+                          Seg
                        </th>
                        <th>
-                          3ª
+                          Ter
                        </th>
                        <th>
-                          4ª
+                          Qua
                        </th>
                        <th>
-                          5ª
+                          Qui
                        </th>
                        <th>
-                          6ª
+                          Sex
                        </th>
                        <th>
-                          Sá
+                          Sáb
                        </th>
                        <th>
-                          Do
+                          Dom
                        </th>
                      </tr>
                    </thead>
@ -250042,9 +250042,9 @@ exports[`Locale Provider should display the text as pt 1`] = `
          </span>
          <span
            class="ant-select-selection-item"
-            title="set"
+            title="Set"
          >
-            set
+            Set
          </span>
        </div>
        <span
@ -250134,25 +250134,25 @@ exports[`Locale Provider should display the text as pt 1`] = `
            <thead>
              <tr>
                <th>
-                  2ª
+                  Seg
                </th>
                <th>
-                  3ª
+                  Ter
                </th>
                <th>
-                  4ª
+                  Qua
                </th>
                <th>
-                  5ª
+                  Qui
                </th>
                <th>
-                  6ª
+                  Sex
                </th>
                <th>
-                  Sá
+                  Sáb
                </th>
                <th>
-                  Do
+                  Dom
                </th>
              </tr>
            </thead>
--- a/components/message/hooks/useMessage.tsx
+++ b/components/message/hooks/useMessage.tsx
@ -12,7 +12,7 @@ import {
  attachTypeApi,
  ThenableArgument,
  getKeyThenIncreaseKey,
-  NoticeType,
+  typeList,
 } from '..';

 export default function createUseMessage(
@ -78,9 +78,7 @@ export default function createUseMessage(

    hookApiRef.current.open = notify;

-    (['success', 'info', 'warning', 'error', 'loading'] as NoticeType[]).forEach(type =>
-      attachTypeApi(hookApiRef.current, type),
-    );
+    typeList.forEach(type => attachTypeApi(hookApiRef.current, type));

    return [
      hookApiRef.current,
--- a/components/message/index.tsx
+++ b/components/message/index.tsx
@ -13,8 +13,6 @@ import InfoCircleFilled from '@ant-design/icons/InfoCircleFilled';
 import createUseMessage from './hooks/useMessage';
 import ConfigProvider, { globalConfig } from '../config-provider';

-export type NoticeType = 'info' | 'success' | 'error' | 'warning' | 'loading';
-
 let messageInstance: RCNotificationInstance | null;
 let defaultDuration = 3;
 let defaultTop: number;
@ -128,6 +126,11 @@ const typeToIcon = {
  warning: ExclamationCircleFilled,
  loading: LoadingOutlined,
 };
+
+export type NoticeType = keyof typeof typeToIcon;
+
+export const typeList = Object.keys(typeToIcon) as NoticeType[];
+
 export interface ArgsProps {
  content: React.ReactNode;
  duration?: number;
@ -247,9 +250,7 @@ export function attachTypeApi(originalApi: MessageApi, type: NoticeType) {
  };
 }

-(['success', 'info', 'warning', 'error', 'loading'] as NoticeType[]).forEach(type =>
-  attachTypeApi(api, type),
-);
+typeList.forEach(type => attachTypeApi(api, type));

 api.warn = api.warning;
 api.useMessage = createUseMessage(getRCNotificationInstance, getRCNoticeProps);
--- a/components/space/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/space/tests/snapshots/demo-extend.test.ts.snap
@ -894,14 +894,46 @@ exports[`renders ./components/space/demo/split.md extend context correctly 1`] =
 exports[`renders ./components/space/demo/vertical.md extend context correctly 1`] = `
 <div
  class="ant-space ant-space-vertical"
+  style="display:flex"
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom:16px"
  >
    <div
-      class="ant-card ant-card-bordered"
-      style="width:300px"
+      class="ant-card ant-card-bordered ant-card-small"
+    >
+      <div
+        class="ant-card-head"
+      >
+        <div
+          class="ant-card-head-wrapper"
+        >
+          <div
+            class="ant-card-head-title"
+          >
+            Card
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:16px"
+  >
+    <div
+      class="ant-card ant-card-bordered ant-card-small"
    >
      <div
        class="ant-card-head"
@ -932,8 +964,7 @@ exports[`renders ./components/space/demo/vertical.md extend context correctly 1`
    class="ant-space-item"
  >
    <div
-      class="ant-card ant-card-bordered"
-      style="width:300px"
+      class="ant-card ant-card-bordered ant-card-small"
    >
      <div
        class="ant-card-head"
--- a/components/space/tests/snapshots/demo.test.js.snap
+++ b/components/space/tests/snapshots/demo.test.js.snap
@ -645,14 +645,46 @@ exports[`renders ./components/space/demo/split.md correctly 1`] = `
 exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
 <div
  class="ant-space ant-space-vertical"
+  style="display:flex"
 >
  <div
    class="ant-space-item"
-    style="margin-bottom:8px"
+    style="margin-bottom:16px"
  >
    <div
-      class="ant-card ant-card-bordered"
-      style="width:300px"
+      class="ant-card ant-card-bordered ant-card-small"
+    >
+      <div
+        class="ant-card-head"
+      >
+        <div
+          class="ant-card-head-wrapper"
+        >
+          <div
+            class="ant-card-head-title"
+          >
+            Card
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        <p>
+          Card content
+        </p>
+        <p>
+          Card content
+        </p>
+      </div>
+    </div>
+  </div>
+  <div
+    class="ant-space-item"
+    style="margin-bottom:16px"
+  >
+    <div
+      class="ant-card ant-card-bordered ant-card-small"
    >
      <div
        class="ant-card-head"
@ -683,8 +715,7 @@ exports[`renders ./components/space/demo/vertical.md correctly 1`] = `
    class="ant-space-item"
  >
    <div
-      class="ant-card ant-card-bordered"
-      style="width:300px"
+      class="ant-card ant-card-bordered ant-card-small"
    >
      <div
        class="ant-card-head"
--- a/components/space/demo/vertical.md
+++ b/components/space/demo/vertical.md
@ -9,25 +9,25 @@ title:

 相邻组件垂直间距。

-可以设置 `width: 100%` 独占一行。
-
 ## en-US

 Crowded components vertical spacing.

-Can set `width: 100%` to fill a row.
-
 ```jsx
 import { Space, Card } from 'antd';

 function SpaceVertical() {
  return (
-    <Space direction="vertical">
-      <Card title="Card" style={{ width: 300 }}>
+    <Space direction="vertical" size="middle" style={{ display: 'flex' }}>
+      <Card title="Card" size="small">
        <p>Card content</p>
        <p>Card content</p>
      </Card>
-      <Card title="Card" style={{ width: 300 }}>
+      <Card title="Card" size="small">
+        <p>Card content</p>
+        <p>Card content</p>
+      </Card>
+      <Card title="Card" size="small">
        <p>Card content</p>
        <p>Card content</p>
      </Card>
--- a/components/steps/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/steps/tests/snapshots/demo-extend.test.ts.snap
@ -2599,6 +2599,311 @@ Array [
 ]
 `;

+exports[`renders ./components/steps/demo/progress-dot-small.md extend context correctly 1`] = `
+Array [
+  <div
+    class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-vertical ant-steps-dot"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-finish"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Finished
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            In Progress
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Waiting
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />,
+  <div
+    class="ant-steps ant-steps-vertical ant-steps-small ant-steps-dot"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-finish"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Finished
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description. This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Finished
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description. This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            In Progress
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description. This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Waiting
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Waiting
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders ./components/steps/demo/simple.md extend context correctly 1`] = `
 <div
  class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
--- a/components/steps/tests/snapshots/demo.test.js.snap
+++ b/components/steps/tests/snapshots/demo.test.js.snap
@ -2479,6 +2479,311 @@ Array [
 ]
 `;

+exports[`renders ./components/steps/demo/progress-dot-small.md correctly 1`] = `
+Array [
+  <div
+    class="ant-steps ant-steps-horizontal ant-steps-small ant-steps-label-vertical ant-steps-dot"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-finish"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Finished
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            In Progress
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Waiting
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+  <div
+    class="ant-divider ant-divider-horizontal"
+    role="separator"
+  />,
+  <div
+    class="ant-steps ant-steps-vertical ant-steps-small ant-steps-dot"
+  >
+    <div
+      class="ant-steps-item ant-steps-item-finish"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Finished
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description. This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-process ant-steps-item-active"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Finished
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description. This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            In Progress
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description. This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Waiting
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ant-steps-item ant-steps-item-wait"
+    >
+      <div
+        class="ant-steps-item-container"
+      >
+        <div
+          class="ant-steps-item-tail"
+        />
+        <div
+          class="ant-steps-item-icon"
+        >
+          <span
+            class="ant-steps-icon"
+          >
+            <span
+              class="ant-steps-icon-dot"
+            />
+          </span>
+        </div>
+        <div
+          class="ant-steps-item-content"
+        >
+          <div
+            class="ant-steps-item-title"
+          >
+            Waiting
+          </div>
+          <div
+            class="ant-steps-item-description"
+          >
+            This is a description.
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>,
+]
+`;
+
 exports[`renders ./components/steps/demo/simple.md correctly 1`] = `
 <div
  class="ant-steps ant-steps-horizontal ant-steps-label-horizontal"
--- a/components/steps/demo/progress-dot-small.md
+++ b/components/steps/demo/progress-dot-small.md
@ -0,0 +1,40 @@
+---
+order: 9
+title:
+  zh-CN: 迷你版点状步骤条
+  en-US: Dot Style Size Small
+debug: true
+---
+
+## zh-CN
+
+包含步骤点的进度条。
+
+## en-US
+
+Steps with progress dot style.
+
+```jsx
+import { Steps, Divider } from 'antd';
+
+const { Step } = Steps;
+
+ReactDOM.render(
+  <>
+    <Steps progressDot current={1} size="small">
+      <Step title="Finished" description="This is a description." />
+      <Step title="In Progress" description="This is a description." />
+      <Step title="Waiting" description="This is a description." />
+    </Steps>
+    <Divider />
+    <Steps progressDot current={1} direction="vertical" size="small">
+      <Step title="Finished" description="This is a description. This is a description." />
+      <Step title="Finished" description="This is a description. This is a description." />
+      <Step title="In Progress" description="This is a description. This is a description." />
+      <Step title="Waiting" description="This is a description." />
+      <Step title="Waiting" description="This is a description." />
+    </Steps>
+  </>,
+  mountNode,
+);
+```
--- a/components/steps/style/progress-dot.less
+++ b/components/steps/style/progress-dot.less
@ -76,6 +76,7 @@
    margin-left: 0;
    background: none;
  }
+
  // https://github.com/ant-design/ant-design/issues/18354
  .@{steps-prefix-cls}-item > .@{steps-prefix-cls}-item-container > .@{steps-prefix-cls}-item-tail {
    top: 6.5px;
@ -83,6 +84,19 @@
    margin: 0;
    padding: 22px 0 4px;
  }
+
+  &.@{steps-prefix-cls}-small {
+    .@{steps-prefix-cls}-item-icon {
+      margin-top: 10px;
+    }
+
+    .@{steps-prefix-cls}-item
+      > .@{steps-prefix-cls}-item-container
+      > .@{steps-prefix-cls}-item-tail {
+      top: 3.5px;
+    }
+  }
+
  .@{steps-prefix-cls}-item:first-child .@{steps-prefix-cls}-icon-dot {
    left: 0;
  }