From 5d8e93b6c1e23076eaf18318b63af2db46056a83 Mon Sep 17 00:00:00 2001
From: Jehu <z_zhihao@foxmail.com>
Date: Mon, 12 Jul 2021 19:57:05 +0800
Subject: [PATCH 01/18] fix: add Table.SELECTION_NONE for Russian localization
 (#31361)

---
 components/locale/ru_RU.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/components/locale/ru_RU.tsx b/components/locale/ru_RU.tsx
index ae2cf4d1d0..d25040e9d2 100644
--- a/components/locale/ru_RU.tsx
+++ b/components/locale/ru_RU.tsx
@@ -25,6 +25,7 @@ const localeValues: Locale = {
     emptyText: 'Нет данных',
     selectAll: 'Выбрать всё',
     selectInvert: 'Инвертировать выбор',
+    selectNone: 'Очистить все данные',
     selectionAll: 'Выбрать все данные',
     sortTitle: 'Сортировка',
     expand: 'Развернуть строку',

From 972e3c2edd5a442733b36cde220bb096fb9a41f0 Mon Sep 17 00:00:00 2001
From: Peach <scdzwyxst@gmail.com>
Date: Tue, 13 Jul 2021 11:47:30 +0800
Subject: [PATCH 02/18] fix: top border of the table summary row (#31363)

* fix: top border of the table summary row (#31337)

* refactor: return to use container box-shadow for summary

* refactor: revert shadow container of table summary
---
 components/table/style/index.less | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/components/table/style/index.less b/components/table/style/index.less
index 42d8f0f9f7..942b9bc5e8 100644
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@@ -166,6 +166,8 @@
 
   // =========================== Summary ============================
   &-summary {
+    position: relative;
+    z-index: @zindex-table-fixed;
     background: @table-bg;
 
     div& {

From c1d52d3b9b24fca3558fc898381dd2a8eec97800 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 13 Jul 2021 12:03:19 +0800
Subject: [PATCH 03/18] fix: Table sticky header background (#31373)

close #31362
---
 components/style/themes/dark.less    | 1 +
 components/style/themes/default.less | 2 ++
 components/table/style/index.less    | 4 +++-
 3 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/components/style/themes/dark.less b/components/style/themes/dark.less
index f11cb04ccb..00ec8c7bdd 100644
--- a/components/style/themes/dark.less
+++ b/components/style/themes/dark.less
@@ -314,6 +314,7 @@
 @table-header-sort-bg: #262626;
 @table-header-filter-active-bg: #434343;
 @table-header-sort-active-bg: #303030;
+@table-fixed-header-sort-active-bg: #222;
 @table-filter-btns-bg: @popover-background;
 @table-expanded-row-bg: @table-header-bg;
 @table-filter-dropdown-bg: @popover-background;
diff --git a/components/style/themes/default.less b/components/style/themes/default.less
index dfaa27ce21..d0f56312dd 100644
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@@ -615,6 +615,8 @@
 // Sorter
 // Legacy: `table-header-sort-active-bg` is used for hover not real active
 @table-header-sort-active-bg: rgba(0, 0, 0, 0.04);
+@table-fixed-header-sort-active-bg: hsv(0, 0, 96%);
+
 // Filter
 @table-header-filter-active-bg: rgba(0, 0, 0, 0.04);
 @table-filter-btns-bg: inherit;
diff --git a/components/table/style/index.less b/components/table/style/index.less
index 942b9bc5e8..20a6c5621e 100644
--- a/components/table/style/index.less
+++ b/components/table/style/index.less
@@ -229,7 +229,7 @@
     // https://github.com/ant-design/ant-design/issues/30969
     &.@{table-prefix-cls}-cell-fix-left:hover,
     &.@{table-prefix-cls}-cell-fix-right:hover {
-      background: lighten(@black, 96%);
+      background: @table-fixed-header-sort-active-bg;
     }
   }
 
@@ -643,7 +643,9 @@
     &-holder {
       position: sticky;
       z-index: @table-sticky-zindex;
+      background: @component-background;
     }
+
     &-scroll {
       position: sticky;
       bottom: 0;

From ba6de5ba1810968885c99950b5a9197bd01e4ce5 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 13 Jul 2021 16:17:48 +0800
Subject: [PATCH 04/18] style: fix input clear icon color css priority (#31378)

---
 components/input/style/allow-clear.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/input/style/allow-clear.less b/components/input/style/allow-clear.less
index ca1bd5e734..57848424d6 100644
--- a/components/input/style/allow-clear.less
+++ b/components/input/style/allow-clear.less
@@ -1,7 +1,7 @@
 @import './index';
 
 // ========================= Input =========================
-.@{ant-prefix}-input-clear-icon {
+.@{ant-prefix}-input-clear-icon.@{iconfont-css-prefix} {
   margin: 0 @input-affix-margin;
   color: @disabled-color;
   font-size: @font-size-sm;

From fe683a475091cf500e0fe4b0e1803cb1268bbf1f Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 13 Jul 2021 20:08:15 +0800
Subject: [PATCH 05/18] fix: clear icon breaking style by #31378

https://www.argos-ci.com/ant-design/ant-design/builds/1341
---
 components/input/style/allow-clear.less | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/input/style/allow-clear.less b/components/input/style/allow-clear.less
index 57848424d6..5284e0d6b3 100644
--- a/components/input/style/allow-clear.less
+++ b/components/input/style/allow-clear.less
@@ -1,7 +1,7 @@
 @import './index';
 
 // ========================= Input =========================
-.@{ant-prefix}-input-clear-icon.@{iconfont-css-prefix} {
+.@{iconfont-css-prefix}.@{ant-prefix}-input-clear-icon {
   margin: 0 @input-affix-margin;
   color: @disabled-color;
   font-size: @font-size-sm;

From 3a1a82970807b140f588eac735787d60357e1ebd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 13 Jul 2021 21:38:19 +0800
Subject: [PATCH 06/18] fix: TextArea style missing (#31391)

---
 components/input/TextArea.tsx                 |  1 +
 .../__tests__/__snapshots__/demo.test.js.snap | 28 +++++++++++++++++++
 components/input/demo/textarea-resize.md      |  1 +
 3 files changed, 30 insertions(+)

diff --git a/components/input/TextArea.tsx b/components/input/TextArea.tsx
index 815ea26555..136b2dca8c 100644
--- a/components/input/TextArea.tsx
+++ b/components/input/TextArea.tsx
@@ -157,6 +157,7 @@ const TextArea = React.forwardRef<TextAreaRef, TextAreaProps>(
         handleReset={handleReset}
         ref={clearableInputRef}
         bordered={bordered}
+        style={showCount ? undefined : style}
       />
     );
 
diff --git a/components/input/__tests__/__snapshots__/demo.test.js.snap b/components/input/__tests__/__snapshots__/demo.test.js.snap
index 48c8abf63d..824a1a749f 100644
--- a/components/input/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/input/__tests__/__snapshots__/demo.test.js.snap
@@ -3207,6 +3207,34 @@ Array [
   >
     The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows. The autoSize property applies to textarea nodes, and only the height changes automatically. In addition, autoSize can be set to an object, specifying the minimum number of rows and the maximum number of rows.
   </textarea>,
+  <span
+    class="ant-input-affix-wrapper ant-input-affix-wrapper-textarea-with-clear-btn"
+    style="width:93px"
+  >
+    <textarea
+      class="ant-input"
+    />
+    <span
+      aria-label="close-circle"
+      class="anticon anticon-close-circle ant-input-clear-icon-hidden ant-input-clear-icon"
+      role="button"
+      tabindex="-1"
+    >
+      <svg
+        aria-hidden="true"
+        data-icon="close-circle"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm165.4 618.2l-66-.3L512 563.4l-99.3 118.4-66.1.3c-4.4 0-8-3.5-8-8 0-1.9.7-3.7 1.9-5.2l130.1-155L340.5 359a8.32 8.32 0 01-1.9-5.2c0-4.4 3.6-8 8-8l66.1.3L512 464.6l99.3-118.4 66-.3c4.4 0 8 3.5 8 8 0 1.9-.7 3.7-1.9 5.2L553.5 514l130 155c1.2 1.5 1.9 3.3 1.9 5.2 0 4.4-3.6 8-8 8z"
+        />
+      </svg>
+    </span>
+  </span>,
 ]
 `;
 
diff --git a/components/input/demo/textarea-resize.md b/components/input/demo/textarea-resize.md
index 41c1bffa6d..eeef822934 100644
--- a/components/input/demo/textarea-resize.md
+++ b/components/input/demo/textarea-resize.md
@@ -39,6 +39,7 @@ class Demo extends React.Component {
           Auto Resize: {String(autoResize)}
         </Button>
         <TextArea rows={4} autoSize={autoResize} defaultValue={defaultValue} />
+        <TextArea allowClear style={{ width: 93 }} />
       </>
     );
   }

From 2f87fee80801b1e2040b3d25b5c5e6458934ffaa Mon Sep 17 00:00:00 2001
From: Andrea Blanco <estefania_8_3@hotmail.com>
Date: Tue, 13 Jul 2021 22:38:10 -0500
Subject: [PATCH 07/18] feat(translate): add missing translations in Spanish
 (es_ES) locale (#31330)

* add missing translations in Spanish (es_ES) locale

* add missing translations in Spanish (es_ES) locale

* feat(translate): add missing translations in Spanish (es_ES) locale

* feat(translate): add missing translations in Spanish (es_ES) locale
---
 components/locale/es_ES.tsx | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/locale/es_ES.tsx b/components/locale/es_ES.tsx
index 91e5797afc..c7968a924e 100644
--- a/components/locale/es_ES.tsx
+++ b/components/locale/es_ES.tsx
@@ -126,6 +126,9 @@ const localeValues: Locale = {
       },
     },
   },
+  Image: {
+    preview: 'Previsualización',
+  },
 };
 
 export default localeValues;

From cded822aa582fe360c45e6e200621be38e666cfd Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Wed, 14 Jul 2021 12:34:42 +0800
Subject: [PATCH 08/18] docs: update Badge.Ribbon demo

---
 .../__tests__/__snapshots__/demo.test.js.snap | 319 ++++++++++++++++--
 components/badge/demo/ribbbon.md              |  51 ++-
 2 files changed, 348 insertions(+), 22 deletions(-)

diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap
index cb5450e608..c31f8b800d 100644
--- a/components/badge/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/badge/__tests__/__snapshots__/demo.test.js.snap
@@ -825,31 +825,312 @@ exports[`renders ./components/badge/demo/overflow.md correctly 1`] = `
 `;
 
 exports[`renders ./components/badge/demo/ribbbon.md correctly 1`] = `
-<div
-  class="ant-ribbon-wrapper"
->
+Array [
   <div
-    class="ant-card ant-card-bordered"
+    class="ant-ribbon-wrapper"
   >
     <div
-      class="ant-card-body"
+      class="ant-card ant-card-bordered ant-card-small"
     >
-      And raises the spyglass.
+      <div
+        class="ant-card-head"
+      >
+        <div
+          class="ant-card-head-wrapper"
+        >
+          <div
+            class="ant-card-head-title"
+          >
+            Pushes open the window
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        and raises the spyglass.
+      </div>
     </div>
-  </div>
-  <div
-    class="ant-ribbon ant-ribbon-placement-end"
-  >
-    <span
-      class="ant-ribbon-text"
-    >
-      Pushes open the window
-    </span>
     <div
-      class="ant-ribbon-corner"
-    />
-  </div>
-</div>
+      class="ant-ribbon ant-ribbon-placement-end"
+    >
+      <span
+        class="ant-ribbon-text"
+      >
+        Hippies
+      </span>
+      <div
+        class="ant-ribbon-corner"
+      />
+    </div>
+  </div>,
+  <div
+    class="ant-ribbon-wrapper"
+  >
+    <div
+      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"
+          >
+            Pushes open the window
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        and raises the spyglass.
+      </div>
+    </div>
+    <div
+      class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-pink"
+    >
+      <span
+        class="ant-ribbon-text"
+      >
+        Hippies
+      </span>
+      <div
+        class="ant-ribbon-corner"
+      />
+    </div>
+  </div>,
+  <div
+    class="ant-ribbon-wrapper"
+  >
+    <div
+      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"
+          >
+            Pushes open the window
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        and raises the spyglass.
+      </div>
+    </div>
+    <div
+      class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-red"
+    >
+      <span
+        class="ant-ribbon-text"
+      >
+        Hippies
+      </span>
+      <div
+        class="ant-ribbon-corner"
+      />
+    </div>
+  </div>,
+  <div
+    class="ant-ribbon-wrapper"
+  >
+    <div
+      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"
+          >
+            Pushes open the window
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        and raises the spyglass.
+      </div>
+    </div>
+    <div
+      class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-cyan"
+    >
+      <span
+        class="ant-ribbon-text"
+      >
+        Hippies
+      </span>
+      <div
+        class="ant-ribbon-corner"
+      />
+    </div>
+  </div>,
+  <div
+    class="ant-ribbon-wrapper"
+  >
+    <div
+      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"
+          >
+            Pushes open the window
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        and raises the spyglass.
+      </div>
+    </div>
+    <div
+      class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-green"
+    >
+      <span
+        class="ant-ribbon-text"
+      >
+        Hippies
+      </span>
+      <div
+        class="ant-ribbon-corner"
+      />
+    </div>
+  </div>,
+  <div
+    class="ant-ribbon-wrapper"
+  >
+    <div
+      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"
+          >
+            Pushes open the window
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        and raises the spyglass.
+      </div>
+    </div>
+    <div
+      class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-purple"
+    >
+      <span
+        class="ant-ribbon-text"
+      >
+        Hippies
+      </span>
+      <div
+        class="ant-ribbon-corner"
+      />
+    </div>
+  </div>,
+  <div
+    class="ant-ribbon-wrapper"
+  >
+    <div
+      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"
+          >
+            Pushes open the window
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        and raises the spyglass.
+      </div>
+    </div>
+    <div
+      class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-volcano"
+    >
+      <span
+        class="ant-ribbon-text"
+      >
+        Hippies
+      </span>
+      <div
+        class="ant-ribbon-corner"
+      />
+    </div>
+  </div>,
+  <div
+    class="ant-ribbon-wrapper"
+  >
+    <div
+      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"
+          >
+            Pushes open the window
+          </div>
+        </div>
+      </div>
+      <div
+        class="ant-card-body"
+      >
+        and raises the spyglass.
+      </div>
+    </div>
+    <div
+      class="ant-ribbon ant-ribbon-placement-end ant-ribbon-color-magenta"
+    >
+      <span
+        class="ant-ribbon-text"
+      >
+        Hippies
+      </span>
+      <div
+        class="ant-ribbon-corner"
+      />
+    </div>
+  </div>,
+]
 `;
 
 exports[`renders ./components/badge/demo/ribbon-debug.md correctly 1`] = `
diff --git a/components/badge/demo/ribbbon.md b/components/badge/demo/ribbbon.md
index 219664c134..2fd2f3e25a 100644
--- a/components/badge/demo/ribbbon.md
+++ b/components/badge/demo/ribbbon.md
@@ -17,9 +17,54 @@ Use ribbon badge.
 import { Badge, Card } from 'antd';
 
 ReactDOM.render(
-  <Badge.Ribbon text="Pushes open the window">
-    <Card>And raises the spyglass.</Card>
-  </Badge.Ribbon>,
+  <>
+    <Badge.Ribbon text="Hippies">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+    <Badge.Ribbon text="Hippies" color="pink">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+    <Badge.Ribbon text="Hippies" color="red">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+    <Badge.Ribbon text="Hippies" color="cyan">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+    <Badge.Ribbon text="Hippies" color="green">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+    <Badge.Ribbon text="Hippies" color="purple">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+    <Badge.Ribbon text="Hippies" color="volcano">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+    <Badge.Ribbon text="Hippies" color="magenta">
+      <Card title="Pushes open the window" size="small">
+        and raises the spyglass.
+      </Card>
+    </Badge.Ribbon>
+  </>,
   mountNode,
 );
 ```
+
+```css
+.ant-card {
+  margin-bottom: 16px;
+}
+```

From 7f8e1777357e4af68c817459ffdaf41aaec72fc9 Mon Sep 17 00:00:00 2001
From: Camol <kwwnjujlc@sina.com>
Date: Wed, 14 Jul 2021 17:21:39 +0800
Subject: [PATCH 09/18] fix: update Transfer locale info in zh_HK.tsx (#31404)

---
 components/locale/zh_HK.tsx | 6 ++++++
 1 file changed, 6 insertions(+)

diff --git a/components/locale/zh_HK.tsx b/components/locale/zh_HK.tsx
index 66fd80703c..24adb287fb 100644
--- a/components/locale/zh_HK.tsx
+++ b/components/locale/zh_HK.tsx
@@ -45,6 +45,12 @@ const localeValues: Locale = {
     searchPlaceholder: '搜尋資料',
     itemUnit: '項目',
     itemsUnit: '項目',
+    remove: '刪除',
+    selectCurrent: '全選當頁',
+    removeCurrent: '刪除當頁',
+    selectAll: '全選所有',
+    removeAll: '刪除全部',
+    selectInvert: '反選當頁',
   },
   Upload: {
     uploading: '正在上傳...',

From fe2604ba36a6c04012dac8e53ca90cc18ab9dd07 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Fri, 16 Jul 2021 12:40:55 +0800
Subject: [PATCH 10/18] docs: update recommendation libs

---
 docs/react/recommendation.en-US.md | 7 ++++---
 docs/react/recommendation.zh-CN.md | 7 ++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/docs/react/recommendation.en-US.md b/docs/react/recommendation.en-US.md
index 69d45ce139..9d55d8d29e 100644
--- a/docs/react/recommendation.en-US.md
+++ b/docs/react/recommendation.en-US.md
@@ -16,18 +16,17 @@ title: Third-Party Libraries
 | Code Editor | [react-codemirror2](https://github.com/scniro/react-codemirror2) [react-monaco-editor](https://github.com/superRaytin/react-monaco-editor) |
 | Rich Text Editor | [react-quill](https://github.com/zenoamaro/react-quill) [braft-editor](https://github.com/margox/braft-editor) |
 | JSON Viewer | [react-json-view](https://github.com/mac-s-g/react-json-view) |
-| Color Picker | [rc-color-picker](https://github.com/react-component/color-picker) [react-color](http://casesandberg.github.io/react-color/) |
+| Color Picker | [react-color](http://casesandberg.github.io/react-color/) |
 | Media Query | [react-responsive](https://github.com/contra/react-responsive) [react-media](https://github.com/ReactTraining/react-media) |
 | Copy to clipboard | [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard) |
 | Document head manager | [react-helmet](https://github.com/nfl/react-helmet) [react-helmet-async](https://github.com/staylor/react-helmet-async) |
 | Icons | [react-fontawesome](https://github.com/FortAwesome/react-fontawesome) [react-icons](https://github.com/gorangajic/react-icons) |
 | QR Code | [qrcode.react](https://github.com/zpao/qrcode.react) |
-| Visual Graph Editor | [GGEditor](https://github.com/gaoli/GGEditor) |
 | Top Progress Bar | [nprogress](https://github.com/rstacruz/nprogress) |
 | i18n | [react-intl](https://github.com/yahoo/react-intl) |
 | Code highlight | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
 | Markdown renderer | [react-markdown](https://remarkjs.github.io/react-markdown/) |
-| Infinite Scroll | [react-virtualized](https://github.com/bvaughn/react-virtualized) [antd-table-infinity](https://github.com/Leonard-Li777/antd-table-infinity) |
+| Infinite Scroll | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [antd-table-infinity](https://github.com/Leonard-Li777/antd-table-infinity) |
 | Map | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap](https://github.com/ElemeFE/react-amap) |
 | Video | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) |
 | Context Menu | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify) |
@@ -38,6 +37,8 @@ title: Third-Party Libraries
 | Keywords highlight | [react-highlight-words](https://github.com/bvaughn/react-highlight-words) |
 | Text Loop | [react-text-loop](https://github.com/braposo/react-text-loop) |
 | Animation | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) |
+| Page Footer | [rc-footer](https://github.com/react-component/footer) |
+| Water Mark | [WaterMark](https://procomponents.ant.design/components/water-mark) |
 
 ## Products we are using ✨
 
diff --git a/docs/react/recommendation.zh-CN.md b/docs/react/recommendation.zh-CN.md
index 35eb85bc29..8542b5af4b 100644
--- a/docs/react/recommendation.zh-CN.md
+++ b/docs/react/recommendation.zh-CN.md
@@ -16,18 +16,17 @@ title: 社区精选组件
 | 代码编辑器 | [react-codemirror2](https://github.com/scniro/react-codemirror2) [react-monaco-editor](https://github.com/superRaytin/react-monaco-editor) |
 | 富文本编辑器 | [react-quill](https://github.com/zenoamaro/react-quill) [braft-editor](https://github.com/margox/braft-editor) |
 | JSON 显示器 | [react-json-view](https://github.com/mac-s-g/react-json-view) |
-| 拾色器 | [rc-color-picker](https://github.com/react-component/color-picker) [react-color](http://casesandberg.github.io/react-color/) |
+| 拾色器 | [react-color](http://casesandberg.github.io/react-color/) |
 | 响应式 | [react-responsive](https://github.com/contra/react-responsive) [react-media](https://github.com/ReactTraining/react-media) |
 | 复制到剪贴板 | [react-copy-to-clipboard](https://github.com/nkbt/react-copy-to-clipboard) |
 | 页面 meta 属性 | [react-helmet](https://github.com/nfl/react-helmet) [react-helmet-async](https://github.com/staylor/react-helmet-async) |
 | 图标 | [react-fontawesome](https://github.com/FortAwesome/react-fontawesome) [react-icons](https://github.com/gorangajic/react-icons) |
 | 二维码 | [qrcode.react](https://github.com/zpao/qrcode.react) |
-| 可视化图编辑器 | [GGEditor](https://github.com/gaoli/GGEditor) |
 | 顶部进度条 | [nprogress](https://github.com/rstacruz/nprogress) |
 | 应用国际化 | [react-intl](https://github.com/yahoo/react-intl) |
 | 代码高亮 | [react-syntax-highlighter](https://github.com/conorhastings/react-syntax-highlighter) |
 | Markdown 渲染 | [react-markdown](https://remarkjs.github.io/react-markdown/) |
-| 无限滚动 | [react-virtualized](https://github.com/bvaughn/react-virtualized) [antd-table-infinity](https://github.com/Leonard-Li777/antd-table-infinity) |
+| 无限滚动 | [rc-virtual-list](https://github.com/react-component/virtual-list/) [react-virtualized](https://github.com/bvaughn/react-virtualized) [antd-table-infinity](https://github.com/Leonard-Li777/antd-table-infinity) |
 | 地图 | [react-google-maps](https://github.com/tomchentw/react-google-maps) [google-map-react](https://github.com/istarkov/google-map-react) [react-amap 高德](https://github.com/ElemeFE/react-amap) |
 | 视频播放 | [react-player](https://github.com/CookPete/react-player) [video-react](https://github.com/video-react/video-react) [video.js](http://docs.videojs.com/tutorial-react.html) |
 | 右键菜单 | [react-contextmenu](https://github.com/vkbansal/react-contextmenu/) [react-contexify](https://github.com/fkhadra/react-contexify) |
@@ -38,6 +37,8 @@ title: 社区精选组件
 | 关键字高亮 | [react-highlight-words](https://github.com/bvaughn/react-highlight-words) |
 | 文字轮播 | [react-text-loop](https://github.com/braposo/react-text-loop) |
 | 动画 | [react-move](https://github.com/react-tools/react-move) [Ant Motion](https://motion.ant.design/components/tween-one) [react-spring](https://www.react-spring.io) |
+| 页脚 | [rc-footer](https://github.com/react-component/footer) |
+| 水印 | [WaterMark](https://procomponents.ant.design/components/water-mark) |
 
 ## 推荐产品 ✨
 

From 56a1bbb7784f9cf8fe4b10435c88f3bbfabee88f Mon Sep 17 00:00:00 2001
From: Geoffrey Bell <gtb104@yahoo.com>
Date: Fri, 16 Jul 2021 04:23:14 -0400
Subject: [PATCH 11/18] fix: remove unnecessary line-height setting for Radio
 (#31421)

---
 components/radio/style/index.less | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/radio/style/index.less b/components/radio/style/index.less
index 4bdea7230f..dcfad58043 100644
--- a/components/radio/style/index.less
+++ b/components/radio/style/index.less
@@ -13,7 +13,6 @@
 
   display: inline-block;
   font-size: 0;
-  line-height: unset;
 
   .@{ant-prefix}-badge-count {
     z-index: 1;

From bca40782aaf38407ffee1f14ba8f528f66b052ae Mon Sep 17 00:00:00 2001
From: Derrick <derricktel@foxmail.com>
Date: Sat, 17 Jul 2021 00:29:43 +0800
Subject: [PATCH 12/18] fix: Select background error (#31430)

* fix: Select background error

* fix: add Select selected background when disabled

* fix: add Select disabled background when selected

* fix: Modify color variables
---
 components/select/style/index.less | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/components/select/style/index.less b/components/select/style/index.less
index 329591f657..ae998c7a16 100644
--- a/components/select/style/index.less
+++ b/components/select/style/index.less
@@ -286,6 +286,9 @@
       }
 
       &-disabled {
+        &.@{select-prefix-cls}-item-option-selected {
+          background-color: @select-multiple-disabled-background;
+        }
         color: @disabled-color;
         cursor: not-allowed;
       }

From d34f40affb5c5d152a1a4e32a40cfb673acd6918 Mon Sep 17 00:00:00 2001
From: John Carlo <johncarloaustria@pm.me>
Date: Mon, 19 Jul 2021 11:38:08 +0800
Subject: [PATCH 13/18] docs: update replace-moment.en-US.md

I improved the grammar of the documentation.
---
 docs/react/replace-moment.en-US.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/react/replace-moment.en-US.md b/docs/react/replace-moment.en-US.md
index 92cb1102ff..6e10e356e7 100644
--- a/docs/react/replace-moment.en-US.md
+++ b/docs/react/replace-moment.en-US.md
@@ -3,11 +3,11 @@ order: 7.1
 title: Replace Moment.js
 ---
 
-You might want to replace Moment.js with another date library (now support [dayjs](https://day.js.org) and [date-fns](https://date-fns.org)) to reduce bundle size. We provide two ways to customize:
+You might want to replace Moment.js with another date library (**Ant design currently supports [dayjs](https://day.js.org) and [date-fns](https://date-fns.org)**) to reduce bundle size. We provide two ways to customize:
 
 ## Custom component
 
-The first way is use `generatePicker` (or `generateCalendar`) helps to create Picker components.
+The first way is to use `generatePicker` (or `generateCalendar`) to help create Picker components.
 
 First, we initialize an antd demo with `create-react-app`. You can refer to [Use in TypeScript](/docs/react/use-in-typescript), or you can start directly here [init antd](https://github.com/xiaohuoni/antd4-generate-picker/commit/47fec964e36d48bd15760f8f5abcb9655c259aa6)
 

From 53dc158390d022406819f3f14f644adb93089cde Mon Sep 17 00:00:00 2001
From: Peach <scdzwyxst@gmail.com>
Date: Mon, 19 Jul 2021 15:46:12 +0800
Subject: [PATCH 14/18] docs: 4.16.8 changelog (#31443)

* docs: 4.16.8 changelog

* docs: improve changelog order

* docs: group changelog again

* docs: use national flags in changelog

* docs: improve bugfix description in changelog

* docs: group i18n in changelog
---
 CHANGELOG.en-US.md | 19 +++++++++++++++++++
 CHANGELOG.zh-CN.md | 19 +++++++++++++++++++
 package.json       |  2 +-
 3 files changed, 39 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.en-US.md b/CHANGELOG.en-US.md
index 2cfc5acff9..bfcfb8b9ba 100644
--- a/CHANGELOG.en-US.md
+++ b/CHANGELOG.en-US.md
@@ -15,6 +15,25 @@ timeline: true
 
 ---
 
+## 4.16.8
+
+`2021-07-19`
+
+- 🐞 Fix TextArea `style` not work when `allowClear` configured. [#31391](https://github.com/ant-design/ant-design/pull/31391)
+- 🐞 Fix BackTop not disappear when fade out. [#31357](https://github.com/ant-design/ant-design/pull/31357)
+- 💄 Fix Cascader style bug inside Input `addonBefore`. [#31350](https://github.com/ant-design/ant-design/pull/31350)
+- 💄 Fix DatePicker disabled cell style when customize `dateRender`. [#31349](https://github.com/ant-design/ant-design/pull/31349)
+- 💄 Fix Select background in disabled. [#31430](https://github.com/ant-design/ant-design/pull/31430) [@DerrickTel](https://github.com/DerrickTel)
+- 💄 Fix alignment between Radio.Group and Button. [#31421](https://github.com/ant-design/ant-design/pull/31421) [@gtb104](https://github.com/gtb104)
+- 💄 Fix Input clear icon color in some situation. [#31378](https://github.com/ant-design/ant-design/pull/31378)
+- Table
+  - 💄 Fix Table `sticky` header background is transparent when has sorters. [#31373](https://github.com/ant-design/ant-design/pull/31373)
+  - 💄 Fix missing top border of the first cell in table summary. [#31363](https://github.com/ant-design/ant-design/pull/31363)
+- 🌐 Internationalization
+  - 🇷🇺 Add Table.SELECTION_NONE for Russian localization. [#31361](https://github.com/ant-design/ant-design/pull/31361) [@wwyx778](https://github.com/wwyx778)
+  - 🇭🇰 Add missing translations for Transfer in zh_HK. [#31404](https://github.com/ant-design/ant-design/pull/31404) [@kanweiwei](https://github.com/kanweiwei)
+  - 🇪🇸 Add missing translation for Image in es_ES. [#31330](https://github.com/ant-design/ant-design/pull/31330) [@Andu15](https://github.com/Andu15)
+
 ## 4.16.7
 
 `2021-07-12`
diff --git a/CHANGELOG.zh-CN.md b/CHANGELOG.zh-CN.md
index e81e68fd2e..9c282efb26 100644
--- a/CHANGELOG.zh-CN.md
+++ b/CHANGELOG.zh-CN.md
@@ -15,6 +15,25 @@ timeline: true
 
 ---
 
+## 4.16.8
+
+`2021-07-19`
+
+- 🐞 修复 TextArea `style` 在配置 `allowClear` 时失效的问题。[#31391](https://github.com/ant-design/ant-design/pull/31391)
+- 🐞 修复 BackTop 隐出后仍然可以交互的问题。[#31357](https://github.com/ant-design/ant-design/pull/31357)
+- 💄 修复 Cascader 在 Input `addonBefore` 中的样式问题。[#31350](https://github.com/ant-design/ant-design/pull/31350)
+- 💄 修复 DatePicker 自定义 `dateRender` 时禁用日期样式错误的问题。[#31349](https://github.com/ant-design/ant-design/pull/31349)
+- 💄 修复 Select 组件 disabled 时背景颜色错误的问题。[#31430](https://github.com/ant-design/ant-design/pull/31430) [@DerrickTel](https://github.com/DerrickTel)
+- 💄 修复 Radio.Group 和 Button 不对齐的问题。[#31421](https://github.com/ant-design/ant-design/pull/31421) [@gtb104](https://github.com/gtb104)
+- 💄 修复 Input 清除按钮某些情况下颜色不对的问题。[#31378](https://github.com/ant-design/ant-design/pull/31378)
+- Table
+  - 💄 修复 Table `sticky` 列头一个背景色透明的问题。[#31373](https://github.com/ant-design/ant-design/pull/31373)
+  - 💄 修复表格总结栏第一个单元格上边框消失的问题。[#31363](https://github.com/ant-design/ant-design/pull/31363)
+- 🌐 国际化
+  - 🇷🇺 俄语本地化增加 Table.SELECTION_NONE 文案。[#31361](https://github.com/ant-design/ant-design/pull/31361) [@wwyx778](https://github.com/wwyx778)
+  - 🇭🇰 补充 zh_HK 中 Transfer 组件缺失的部分字段。[#31404](https://github.com/ant-design/ant-design/pull/31404) [@kanweiwei](https://github.com/kanweiwei)
+  - 🇪🇸 补充 es_ES 中 Image 组件缺失的字段。[#31330](https://github.com/ant-design/ant-design/pull/31330) [@Andu15](https://github.com/Andu15)
+
 ## 4.16.7
 
 `2021-07-12`
diff --git a/package.json b/package.json
index d59c583130..116483f746 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "4.16.7",
+  "version": "4.16.8",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [

From d1dc0eba2c44fc2ee41ba04dc2b6084b45a3f595 Mon Sep 17 00:00:00 2001
From: Joshua Chen <sidachen2003@gmail.com>
Date: Mon, 19 Jul 2021 16:21:09 +0800
Subject: [PATCH 15/18] docs: fix grammar and inconsistencies in en-US (#31385)

Signed-off-by: Josh-Cena <sidachen2003@gmail.com>
---
 components/affix/index.en-US.md         |  6 +++---
 components/auto-complete/index.en-US.md | 16 +++++++++++-----
 components/mentions/index.en-US.md      |  2 +-
 components/menu/index.en-US.md          | 10 +++++-----
 4 files changed, 20 insertions(+), 14 deletions(-)

diff --git a/components/affix/index.en-US.md b/components/affix/index.en-US.md
index 768ed39cd4..64d1859de5 100644
--- a/components/affix/index.en-US.md
+++ b/components/affix/index.en-US.md
@@ -30,14 +30,14 @@ Please note that Affix should not cover other content on the page, especially wh
 
 ## FAQ
 
-### Affix bind container with `target`, sometime move out of container.
+### When binding container with `target` in Affix, elements sometimes move out of the container.
 
-We don't listen window scroll for performance consideration. You can add listener if you still want: <https://codesandbox.io/s/2xyj5zr85p>
+We only listen to container scroll events for performance consideration. You can add custom listeners if you still want to: <https://codesandbox.io/s/2xyj5zr85p>
 
 Related issues：[#3938](https://github.com/ant-design/ant-design/issues/3938) [#5642](https://github.com/ant-design/ant-design/issues/5642) [#16120](https://github.com/ant-design/ant-design/issues/16120)
 
 ### When Affix is ​​used in a horizontal scroll container, the position of the element `left` is incorrect.
 
-Affix is ​​generally only applicable to areas with one-way scrolling, and only supports use in vertical scrolling containers. If you want to use it in a horizontal container, you can consider using the native `position: sticky` implementation.
+Affix is ​​generally only applicable to areas with one-way scrolling, and only supports usage in vertical scrolling containers. If you want to use it in a horizontal container, you can consider implementing with the native `position: sticky` property.
 
 Related issues：[#29108](https://github.com/ant-design/ant-design/issues/29108)
diff --git a/components/auto-complete/index.en-US.md b/components/auto-complete/index.en-US.md
index 1b465c342b..b8de0d0676 100644
--- a/components/auto-complete/index.en-US.md
+++ b/components/auto-complete/index.en-US.md
@@ -10,7 +10,13 @@ Autocomplete function of input field.
 
 ## When To Use
 
-When there is a need for autocomplete functionality.
+- When you need an input box instead of a selector.
+- When you need input suggestions or helping text.
+
+The differences with Select are:
+
+- AutoComplete is an input box with text hints, and users can type freely. The keyword is aiding **input**.
+- Select is selecting among given choices. The keyword is **select**.
 
 ## API
 
@@ -51,15 +57,15 @@ When there is a need for autocomplete functionality.
 
 ### Why doesn't the text composition system work well with onSearch in controlled mode?
 
-Please use `onChange` to manage control state. `onSearch` is used for searching input which is not same as `onChange`. Besides, clicking on the option will not trigger the `onSearch` event.
+Please use `onChange` to manage control state. `onSearch` is used for searching input which is not the same as `onChange`. Besides, clicking on the option will not trigger the `onSearch` event.
 
 Related issue: [#18230](https://github.com/ant-design/ant-design/issues/18230) [#17916](https://github.com/ant-design/ant-design/issues/17916)
 
-### Part of api from v3 not available in v4?
+### Part of the api in v3 are not available in v4?
 
-AutoComplete is a Input component support auto complete tips which should not support `labelInValue` prop to modify dispaly value in input. In v3, AutoComplete realization can not handle case that user type match of both `value` & `label` are the same. v4 not longer support `label` as the value input.
+AutoComplete is an Input component that supports auto complete tips. As such, it should not support props like `labelInValue` that affect value display. In v3, the AutoComplete implementation can not handle the case where the `value` and `label` are identical. v4 not longer support `label` as the value input.
 
-Besides, to unique API, `dataSource` replaced with `options`:
+Besides, to unify the API, `dataSource` is replaced with `options`. You can migrate with the following change:
 
 #### v3
 
diff --git a/components/mentions/index.en-US.md b/components/mentions/index.en-US.md
index e413737749..bc3f4295c4 100644
--- a/components/mentions/index.en-US.md
+++ b/components/mentions/index.en-US.md
@@ -9,7 +9,7 @@ Mention component.
 
 ## When To Use
 
-When need to mention someone or something.
+When you need to mention someone or something.
 
 ## API
 
diff --git a/components/menu/index.en-US.md b/components/menu/index.en-US.md
index b72920eef0..79ac393591 100644
--- a/components/menu/index.en-US.md
+++ b/components/menu/index.en-US.md
@@ -10,14 +10,14 @@ A versatile menu for navigation.
 
 ## When To Use
 
-Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers top and side navigation options. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.
+Navigation is an important part of any website, as a good navigation setup allows users to move around the site quickly and efficiently. Ant Design offers two navigation options: top and side. Top navigation provides all the categories and functions of the website. Side navigation provides the multi-level structure of the website.
 
 More layouts with navigation: [Layout](/components/layout).
 
 ## Notes for developers
 
-- Menu render as `ul` element. So it only support [`li` and `script-supporting` elements](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element) as children node。Your customize node should wrapped by `Menu.Item`.
-- Menu need collect node structure. So it's children node should be `Menu.*` or HOC which used by it.
+- Menu is rendered as a `ul` element, so it only supports [`li` and `script-supporting` elements](https://html.spec.whatwg.org/multipage/grouping-content.html#the-ul-element) as children nodes。Your customized node should be wrapped by `Menu.Item`.
+- Menu needs to collect its node structure, so its children should be `Menu.*` or encapsulated HOCs.
 
 ## API
 
@@ -113,6 +113,6 @@ Divider line in between menu items, only used in vertical popup Menu or Dropdown
 
 ## FAQ
 
-### Why Menu children node will render twice?
+### Why will Menu's children be rendered twice?
 
-Menu collect structure info with [twice-render](https://github.com/react-component/menu/blob/f4684514096d6b7123339cbe72e7b0f68db0bce2/src/Menu.tsx#L543) to support HOC usage. Merge into one render may cause the logic much complex, welcome contribute to help improve collection logic.
+Menu collects structure info with [twice-render](https://github.com/react-component/menu/blob/f4684514096d6b7123339cbe72e7b0f68db0bce2/src/Menu.tsx#L543) to support HOC usage. Merging into one render may cause the logic to become much more complex. Contributions to help improve the collection logic are welcomed.

From 2c560b881f857794f58daa8088e75b93ea7d5210 Mon Sep 17 00:00:00 2001
From: Kirill Barsukov <43782731+KirillSBarsukov@users.noreply.github.com>
Date: Mon, 19 Jul 2021 10:50:58 -0400
Subject: [PATCH 16/18] chore: Update ru_RU.tsx (#31448)

Just a wording. The meaning was not changed but it is the better word that describes "preview".
---
 components/locale/ru_RU.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/locale/ru_RU.tsx b/components/locale/ru_RU.tsx
index d25040e9d2..ae0606e025 100644
--- a/components/locale/ru_RU.tsx
+++ b/components/locale/ru_RU.tsx
@@ -126,7 +126,7 @@ const localeValues: Locale = {
     },
   },
   Image: {
-    preview: 'Превью',
+    preview: 'Предпросмотр',
   },
 };
 

From 88b3cb036156fdb0f7f55cbcb22c8f241dfd974f Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 20 Jul 2021 13:49:49 +0800
Subject: [PATCH 17/18] chore: add Suggest Related Links action

---
 .github/workflows/suggest-related-links.yml | 33 +++++++++++++++++++++
 1 file changed, 33 insertions(+)
 create mode 100644 .github/workflows/suggest-related-links.yml

diff --git a/.github/workflows/suggest-related-links.yml b/.github/workflows/suggest-related-links.yml
new file mode 100644
index 0000000000..2b3677e990
--- /dev/null
+++ b/.github/workflows/suggest-related-links.yml
@@ -0,0 +1,33 @@
+name: 'Suggest Related Links'
+
+on:
+  issues:
+    types:
+      - opened
+      - edited
+  workflow_dispatch:
+  schedule:
+    - cron: '13 13 * * */7'
+
+jobs:
+  action:
+    runs-on: ubuntu-18.04
+    steps:
+      - name: Cache dependencies
+        uses: actions/cache@v2
+        with:
+          path: ~/actions-suggest-related-links-tmp
+          key: ${{ runner.os }}-action-${{ hashFiles('~/actions-suggest-related-links-tmp/training-data.json') }}
+          restore-keys: |
+            ${{ runner.os }}-action-
+
+      - uses: peaceiris/actions-suggest-related-links@v1
+      - uses: peaceiris/actions-suggest-related-links/models/fasttext@v1
+        if: github.event_name == 'issues'
+        with:
+          version: v1
+      - uses: peaceiris/actions-suggest-related-links@v1
+        with:
+          mode: 'suggest'
+          repository: 'peaceiris/actions-gh-pages'
+          unclickable: true
\ No newline at end of file

From 79825fd318c0904cb9c4601b02dff34e79cdc321 Mon Sep 17 00:00:00 2001
From: afc163 <afc163@gmail.com>
Date: Tue, 20 Jul 2021 13:51:03 +0800
Subject: [PATCH 18/18] fix: Typography.Text ellipsis bug (#31449)

* fix: Typography.Text ellipsis bug

* use getBoundingClientRect().height instead of offsetHeight

* reduce code

* revert table demo

* fix test case

* fix test cov

* fix test cov

* fix test cov
---
 components/typography/__tests__/index.test.js | 27 +++++++--
 components/typography/style/index.less        |  1 +
 components/typography/util.tsx                | 60 ++++++++++++-------
 3 files changed, 62 insertions(+), 26 deletions(-)

diff --git a/components/typography/__tests__/index.test.js b/components/typography/__tests__/index.test.js
index 3c74db1444..b7ea52e648 100644
--- a/components/typography/__tests__/index.test.js
+++ b/components/typography/__tests__/index.test.js
@@ -36,13 +36,24 @@ describe('Typography', () => {
     HTMLElement.prototype,
     'offsetHeight',
   ).get;
-  Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
-    get() {
+
+  const mockGetBoundingClientRect = jest.spyOn(HTMLElement.prototype, 'getBoundingClientRect');
+
+  beforeAll(() => {
+    Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
+      get() {
+        let html = this.innerHTML;
+        html = html.replace(/<[^>]*>/g, '');
+        const lines = Math.ceil(html.length / LINE_STR_COUNT);
+        return lines * 16;
+      },
+    });
+    mockGetBoundingClientRect.mockImplementation(function fn() {
       let html = this.innerHTML;
       html = html.replace(/<[^>]*>/g, '');
       const lines = Math.ceil(html.length / LINE_STR_COUNT);
-      return lines * 16;
-    },
+      return { height: lines * 16 };
+    });
   });
 
   // Mock getComputedStyle
@@ -62,6 +73,7 @@ describe('Typography', () => {
     Object.defineProperty(HTMLElement.prototype, 'offsetHeight', {
       get: originOffsetHeight,
     });
+    mockGetBoundingClientRect.mockRestore();
     window.getComputedStyle = originGetComputedStyle;
   });
 
@@ -238,6 +250,13 @@ describe('Typography', () => {
         expect(wrapper.find('.ant-typography-ellipsis-single-line').length).toBeTruthy();
       });
 
+      it('should calculate padding', () => {
+        const wrapper = mount(
+          <Base ellipsis component="p" style={{ paddingTop: '12px', paddingBottom: '12px' }} />,
+        );
+        expect(wrapper.find('.ant-typography-ellipsis-single-line').length).toBeTruthy();
+      });
+
       describe('should tooltip support', () => {
         function getWrapper(tooltip) {
           return mount(
diff --git a/components/typography/style/index.less b/components/typography/style/index.less
index 04f7566856..94b31810a4 100644
--- a/components/typography/style/index.less
+++ b/components/typography/style/index.less
@@ -93,6 +93,7 @@
   a&-ellipsis,
   span&-ellipsis {
     display: inline-block;
+    max-width: 100%;
   }
 
   a&,
diff --git a/components/typography/util.tsx b/components/typography/util.tsx
index 4a53bc6a83..52ce76f9e2 100644
--- a/components/typography/util.tsx
+++ b/components/typography/util.tsx
@@ -26,10 +26,10 @@ const wrapperStyle: React.CSSProperties = {
 };
 
 function pxToNumber(value: string | null): number {
-  if (!value) return 0;
-
+  if (!value) {
+    return 0;
+  }
   const match = value.match(/^\d*(\.\d*)?/);
-
   return match ? Number(match[0]) : 0;
 }
 
@@ -55,8 +55,38 @@ function mergeChildren(children: React.ReactNode[]): React.ReactNode[] {
   return childList;
 }
 
+function resetDomStyles(target: HTMLElement, origin: HTMLElement) {
+  target.setAttribute('aria-hidden', 'true');
+  const originStyle = window.getComputedStyle(origin);
+  const originCSS = styleToString(originStyle);
+  // Set shadow
+  target.setAttribute('style', originCSS);
+  target.style.position = 'fixed';
+  target.style.left = '0';
+  target.style.height = 'auto';
+  target.style.minHeight = 'auto';
+  target.style.maxHeight = 'auto';
+  target.style.top = '-999999px';
+  target.style.zIndex = '-1000';
+  // clean up css overflow
+  target.style.textOverflow = 'clip';
+  target.style.whiteSpace = 'normal';
+  (target.style as any).webkitLineClamp = 'none';
+}
+
+function getRealLineHeight(originElement: HTMLElement) {
+  const heightContainer = document.createElement('div');
+  resetDomStyles(heightContainer, originElement);
+  heightContainer.appendChild(document.createTextNode('text'));
+  document.body.appendChild(heightContainer);
+  const { offsetHeight } = heightContainer;
+  const lineHeight = pxToNumber(window.getComputedStyle(originElement).lineHeight);
+  document.body.removeChild(heightContainer);
+  return offsetHeight > lineHeight ? offsetHeight : lineHeight;
+}
+
 export default (
-  originEle: HTMLElement,
+  originElement: HTMLElement,
   option: Option,
   content: React.ReactNode,
   fixedContent: React.ReactNode[],
@@ -74,28 +104,14 @@ export default (
 
   const { rows, suffix = '' } = option;
   // Get origin style
-  const originStyle = window.getComputedStyle(originEle);
-  const originCSS = styleToString(originStyle);
-  const lineHeight = pxToNumber(originStyle.lineHeight);
+  const originStyle = window.getComputedStyle(originElement);
+  const lineHeight = getRealLineHeight(originElement);
   const maxHeight =
     Math.floor(lineHeight) * (rows + 1) +
     pxToNumber(originStyle.paddingTop) +
     pxToNumber(originStyle.paddingBottom);
 
-  // Set shadow
-  ellipsisContainer.setAttribute('style', originCSS);
-  ellipsisContainer.style.position = 'fixed';
-  ellipsisContainer.style.left = '0';
-  ellipsisContainer.style.height = 'auto';
-  ellipsisContainer.style.minHeight = 'auto';
-  ellipsisContainer.style.maxHeight = 'auto';
-  ellipsisContainer.style.top = '-999999px';
-  ellipsisContainer.style.zIndex = '-1000';
-
-  // clean up css overflow
-  ellipsisContainer.style.textOverflow = 'clip';
-  ellipsisContainer.style.whiteSpace = 'normal';
-  (ellipsisContainer.style as any).webkitLineClamp = 'none';
+  resetDomStyles(ellipsisContainer, originElement);
 
   // Render in the fake container
   const contentList: React.ReactNode[] = mergeChildren(toArray(content));
@@ -112,7 +128,7 @@ export default (
 
   // Check if ellipsis in measure div is height enough for content
   function inRange() {
-    return ellipsisContainer.offsetHeight < maxHeight;
+    return Math.ceil(ellipsisContainer.getBoundingClientRect().height) < maxHeight;
   }
 
   // Skip ellipsis if already match