chore: auto merge branchs (#31454)

chore: merge master into feature
2024-11-28 05:05:48 +08:00 · 2021-07-20 07:32:16 +00:00 · 2021-07-20 07:32:16 +00:00 · 563ebe1982
commit 563ebe1982
parent c59580f215 79825fd318
28 changed files with 565 additions and 75 deletions
--- a/.github/workflows/suggest-related-links.yml
+++ 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
--- 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`
--- 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`
--- 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)
--- 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

--- 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`] = `
--- 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;
+}
+```
--- 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}
      />
    );

--- a/components/input/tests/snapshots/demo.test.js.snap
+++ b/components/input/tests/snapshots/demo.test.js.snap
@ -3208,6 +3208,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>,
 ]
 `;

--- 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 }} />
      </>
    );
  }
--- 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}.@{ant-prefix}-input-clear-icon {
  margin: 0 @input-affix-margin;
  color: @disabled-color;
  font-size: @font-size-sm;
--- 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;
--- 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: 'Развернуть строку',
@ -125,7 +126,7 @@ const localeValues: Locale = {
    },
  },
  Image: {
-    preview: 'Превью',
+    preview: 'Предпросмотр',
  },
 };

--- 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: '正在上傳...',
--- 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

--- 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

@ -117,6 +117,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.
--- 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;
--- 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;
      }
--- 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;
--- a/components/style/themes/default.less
+++ b/components/style/themes/default.less
@ -616,6 +616,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;
--- 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& {
@ -227,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;
    }
  }

@ -641,7 +643,9 @@
    &-holder {
      position: sticky;
      z-index: @table-sticky-zindex;
+      background: @component-background;
    }
+
    &-scroll {
      position: sticky;
      bottom: 0;
--- 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(
--- 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&,
--- 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
--- 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 ✨

--- 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) |

 ## 推荐产品 ✨

--- 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)

--- 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": [