Merge pull request #47297 from ant-design/master

chore: merge master into feature
2024-11-29 18:50:00 +08:00 · 2024-02-01 23:59:16 +08:00 · 2024-02-01 23:59:16 +08:00 · 326ae986b9
commit 326ae986b9
parent e009ca9d4a b8f8f48b6d
48 changed files with 352 additions and 219 deletions
--- a/.dumi/theme/builtins/IconSearch/fields.ts
+++ b/.dumi/theme/builtins/IconSearch/fields.ts
@ -202,6 +202,25 @@ const logo = [
  'Yahoo',
  'Reddit',
  'Sketch',
+  'WechatWork',
+  'OpenAI',
+  'Discord',
+  'X',
+  'Bilibili',
+  'Pinterest',
+  'TikTok',
+  'Spotify',
+  'Twitch',
+  'Linux',
+  'Java',
+  'JavaScript',
+  'Python',
+  'Ruby',
+  'DotNet',
+  'Kubernetes',
+  'Docker',
+  'Baidu',
+  'HarmonyOS',
 ];

 const datum = [...direction, ...suggestion, ...editor, ...data, ...logo];
--- a/.github/dependabot.yml
+++ b/.github/dependabot.yml
@ -26,3 +26,11 @@ updates:
      dev-dependencies:
        dependency-type: "development"
        update-types: ["major"]
+  - package-ecosystem: "github-actions"
+    directory: "/"
+    schedule:
+      interval: "daily"
+    labels:
+      - "github-actions"
+      - "dependencies"
+      - "skip-verify-files"
--- a/.github/workflows/mock-project-build.yml
+++ b/.github/workflows/mock-project-build.yml
@ -20,11 +20,11 @@ jobs:
      - name: checkout
        uses: actions/checkout@v4

-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
          node-version: 18

-      - uses: actions/cache@v3
+      - uses: actions/cache@v4
        with:
          path: ~tmpProj/yarn.lock
          key: primes-${{ runner.os }}-${{ github.run_id }}
@ -42,7 +42,7 @@ jobs:

      - name: Download success lock file as `success.lock`
        if: ${{ failure() }}
-        uses: actions/cache/restore@v3
+        uses: actions/cache/restore@v4
        with:
          path: ~tmpProj/yarn.lock
          key: primes-${{ runner.os }}-${{ github.run_id }}
--- a/.github/workflows/preview-build.yml
+++ b/.github/workflows/preview-build.yml
@ -24,7 +24,7 @@ jobs:
        uses: actions/checkout@v4

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

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

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

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

      - name: restore cache from node_modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
--- a/.github/workflows/preview-deploy.yml
+++ b/.github/workflows/preview-deploy.yml
@ -22,7 +22,7 @@ jobs:
      build-failure: ${{ steps.prep-summary.outputs.build-failure }}
    steps:
      - name: summary jobs status
-        uses: actions/github-script@v6
+        uses: actions/github-script@v7
        id: prep-summary
        with:
          script: |
@ -61,7 +61,7 @@ jobs:
    steps:
      # We need get PR id first
      - name: download pr artifact
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v3
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
@ -75,7 +75,7 @@ jobs:
      # Download site artifact
      - name: download site artifact
        if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v3
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
--- a/.github/workflows/site-deploy.yml
+++ b/.github/workflows/site-deploy.yml
@ -19,7 +19,7 @@ jobs:
        uses: actions/checkout@v4

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

-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
          node-version: 18

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

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

-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
          node-version: 18

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

-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
          node-version: 18

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

      - name: restore cache from node_modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@ -75,8 +75,8 @@ jobs:
        run: npm run lint

      - name: lint:react-16
-        run: npm run compile && npm run install-react-16 && npm run tsc:old  
-        
+        run: npm run compile && npm run install-react-16 && npm run tsc:old
+
      - name: lint:react-17
        run: npm run compile && npm run install-react-17 && npm run tsc:old
    needs: setup
@ -87,18 +87,18 @@ jobs:
      - name: checkout
        uses: actions/checkout@v4

-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
          node-version: 18

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

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

-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
          node-version: 18

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

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

      - name: cache dist
-        uses: actions/cache@v3
+        uses: actions/cache@v4
        with:
          path: dist
          key: dist-${{ github.sha }}
@ -156,18 +156,18 @@ jobs:
      - name: checkout
        uses: actions/checkout@v4

-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
          node-version: 18

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

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

      - name: restore cache from dist
        if: ${{ matrix.module == 'dist' || matrix.module == 'dist-min' }}
-        uses: actions/cache@v3
+        uses: actions/cache@v4
        with:
          path: dist
          key: dist-${{ github.sha }}
@ -247,7 +247,7 @@ jobs:
    steps:
      - uses: actions/checkout@v4

-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
          node-version: 18

@ -261,7 +261,7 @@ jobs:
          npx nyc report --reporter text -t coverage --report-dir coverage
          rm -rf persist-coverage
      - name: Upload coverage to codecov
-        uses: codecov/codecov-action@v3
+        uses: codecov/codecov-action@v4
        with:
          # use own token to upload coverage reports
          token: ${{ secrets.CODECOV_TOKEN }}
@ -273,30 +273,30 @@ jobs:
      - name: checkout
        uses: actions/checkout@v4

-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
          node-version: 18

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

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

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

      - name: cache es
-        uses: actions/cache@v3
+        uses: actions/cache@v4
        with:
          path: es
          key: es-${{ github.sha }}
@ -328,14 +328,14 @@ jobs:
        if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
        uses: actions/checkout@v4

-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
          node-version: 18

      - name: restore cache from package-lock.json
        # lib only run in master branch not in pull request
        if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
-        uses: actions/cache@v3
+        uses: actions/cache@v4
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}
@ -343,7 +343,7 @@ jobs:
      - name: restore cache from node_modules
        # lib only run in master branch not in pull request
        if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
-        uses: actions/cache@v3
+        uses: actions/cache@v4
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@ -351,7 +351,7 @@ jobs:
      - name: restore cache from ${{ matrix.module }}
        # lib only run in master branch not in pull request
        if: ${{ github.event_name != 'pull_request' || matrix.module != 'lib' }}
-        uses: actions/cache@v3
+        uses: actions/cache@v4
        with:
          path: ${{ matrix.module }}
          key: ${{ matrix.module }}-${{ github.sha }}
--- a/.github/workflows/upgrade-deps.yml
+++ b/.github/workflows/upgrade-deps.yml
@ -22,7 +22,7 @@ jobs:
            package.json

      - name: setup node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
        with:
          node-version: 18

@ -42,7 +42,7 @@ jobs:

      - name: create pull request
        id: cpr
-        uses: peter-evans/create-pull-request@v5
+        uses: peter-evans/create-pull-request@v6
        with:
          token: ${{ secrets.GITHUB_TOKEN }} # Cannot be default!!!
          assignees: 'afc163, zombieJ, xrkffgg, MadCcc'
--- a/.github/workflows/visual-regression-diff-build.yml
+++ b/.github/workflows/visual-regression-diff-build.yml
@ -25,7 +25,7 @@ jobs:
        uses: actions/checkout@v4

      - name: cache package-lock.json
-        uses: actions/cache@v3
+        uses: actions/cache@v4
        with:
          path: package-temp-dir
          key: lock-${{ github.sha }}
@ -42,7 +42,7 @@ jobs:

      - name: cache node_modules
        id: node_modules_cache_id
-        uses: actions/cache@v3
+        uses: actions/cache@v4
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
@ -59,18 +59,18 @@ jobs:
      - name: checkout
        uses: actions/checkout@v4

-      - uses: actions/setup-node@v3
+      - uses: actions/setup-node@v4
        with:
          node-version: 18

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

      - name: restore cache from node_modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
--- a/.github/workflows/visual-regression-diff-finish.yml
+++ b/.github/workflows/visual-regression-diff-finish.yml
@ -21,7 +21,7 @@ jobs:
      build-status: ${{ steps.visual_diff_build_job_status.outputs.build-status }}
    steps:
      - name: summary jobs status
-        uses: actions/github-script@v6
+        uses: actions/github-script@v7
        id: visual_diff_build_job_status
        with:
          script: |
@ -67,7 +67,7 @@ jobs:

      # We need get persist-index first
      - name: download image snapshot artifact
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v3
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
@ -82,7 +82,7 @@ jobs:
      - name: download report artifact
        id: download_report
        if: ${{ needs.upstream-workflow-summary.outputs.build-status == 'success' || needs.upstream-workflow-summary.outputs.build-status == 'failure' }}
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v3
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
--- a/.github/workflows/visual-regression-persist-finish.yml
+++ b/.github/workflows/visual-regression-persist-finish.yml
@ -21,7 +21,7 @@ jobs:
      build-failure: ${{ steps.persist_start_job_status.outputs.build-failure }}
    steps:
      - name: summary jobs status
-        uses: actions/github-script@v6
+        uses: actions/github-script@v7
        id: persist_start_job_status
        with:
          script: |
@ -65,7 +65,7 @@ jobs:

      # We need get persist key first
      - name: Download Visual Regression Ref
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v3
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
@ -78,7 +78,7 @@ jobs:

      - name: Download Visual-Regression Artifact
        if: ${{ fromJSON(needs.upstream-workflow-summary.outputs.build-success) }}
-        uses: dawidd6/action-download-artifact@v2
+        uses: dawidd6/action-download-artifact@v3
        with:
          workflow: ${{ github.event.workflow_run.workflow_id }}
          run_id: ${{ github.event.workflow_run.id }}
--- a/.github/workflows/visual-regression-persist-start.yml
+++ b/.github/workflows/visual-regression-persist-start.yml
@ -21,7 +21,7 @@ jobs:
        uses: actions/checkout@v4

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

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

      - name: restore cache from node_modules
-        uses: actions/cache@v3
+        uses: actions/cache@v4
        with:
          path: node_modules
          key: node_modules-${{ hashFiles('**/package-temp-dir/package-lock.json') }}
--- a/components/alert/index.en-US.md
+++ b/components/alert/index.en-US.md
@ -42,7 +42,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | action | The action of Alert | ReactNode | - | 4.9.0 |
 | afterClose | Called when close animation is finished | () => void | - |  |
 | banner | Whether to show as banner | boolean | false |  |
-| closeIcon | Custom close icon, >=5.7.0: close button will be hidden when setting to `null` or `false` | boolean \| ReactNode | `<CloseOutlined />` |  |
+| closeIcon | Custom close icon, >=5.7.0: close button will be hidden when setting to `null` or `false` | ReactNode | `<CloseOutlined />` |  |
 | description | Additional content of Alert | ReactNode | - |  |
 | icon | Custom icon, effective when `showIcon` is true | ReactNode | - |  |
 | message | Content of Alert | ReactNode | - |  |
--- a/components/alert/index.zh-CN.md
+++ b/components/alert/index.zh-CN.md
@ -43,7 +43,7 @@ group:
 | action | 自定义操作项 | ReactNode | - | 4.9.0 |
 | afterClose | 关闭动画结束后触发的回调函数 | () => void | - |  |
 | banner | 是否用作顶部公告 | boolean | false |  |
-| closeIcon | 自定义关闭 Icon，>=5.7.0: 设置为 `null` 或 `false` 时隐藏关闭按钮 | boolean \| ReactNode | `<CloseOutlined />` |  |
+| closeIcon | 自定义关闭 Icon，>=5.7.0: 设置为 `null` 或 `false` 时隐藏关闭按钮 | ReactNode | `<CloseOutlined />` |  |
 | description | 警告提示的辅助性文字介绍 | ReactNode | - |  |
 | icon | 自定义图标，`showIcon` 为 true 时有效 | ReactNode | - |  |
 | message | 警告提示内容 | ReactNode | - |  |
--- a/components/avatar/tests/snapshots/Avatar.test.tsx.snap
+++ b/components/avatar/tests/snapshots/Avatar.test.tsx.snap
@ -4,11 +4,11 @@ exports[`Avatar Render adjusts component size to 24 when window size is xs 1`] =
 <div>
  <span
    class="ant-avatar ant-avatar-circle"
-    style="width: 24px; height: 24px; line-height: 24px; font-size: 18px;"
+    style="width: 24px; height: 24px; font-size: 18px;"
  >
    <span
      class="ant-avatar-string"
-      style="transform: scale(0.32) translateX(-50%);"
+      style="transform: scale(0.32);"
    />
  </span>
 </div>
@ -18,11 +18,11 @@ exports[`Avatar Render adjusts component size to 32 when window size is sm 1`] =
 <div>
  <span
    class="ant-avatar ant-avatar-circle"
-    style="width: 32px; height: 32px; line-height: 32px; font-size: 18px;"
+    style="width: 32px; height: 32px; font-size: 18px;"
  >
    <span
      class="ant-avatar-string"
-      style="transform: scale(0.32) translateX(-50%);"
+      style="transform: scale(0.32);"
    />
  </span>
 </div>
@ -32,11 +32,11 @@ exports[`Avatar Render adjusts component size to 40 when window size is md 1`] =
 <div>
  <span
    class="ant-avatar ant-avatar-circle"
-    style="width: 40px; height: 40px; line-height: 40px; font-size: 18px;"
+    style="width: 40px; height: 40px; font-size: 18px;"
  >
    <span
      class="ant-avatar-string"
-      style="transform: scale(0.32) translateX(-50%);"
+      style="transform: scale(0.32);"
    />
  </span>
 </div>
@ -46,11 +46,11 @@ exports[`Avatar Render adjusts component size to 64 when window size is lg 1`] =
 <div>
  <span
    class="ant-avatar ant-avatar-circle"
-    style="width: 64px; height: 64px; line-height: 64px; font-size: 18px;"
+    style="width: 64px; height: 64px; font-size: 18px;"
  >
    <span
      class="ant-avatar-string"
-      style="transform: scale(0.32) translateX(-50%);"
+      style="transform: scale(0.32);"
    />
  </span>
 </div>
@ -60,11 +60,11 @@ exports[`Avatar Render adjusts component size to 80 when window size is xl 1`] =
 <div>
  <span
    class="ant-avatar ant-avatar-circle"
-    style="width: 80px; height: 80px; line-height: 80px; font-size: 18px;"
+    style="width: 80px; height: 80px; font-size: 18px;"
  >
    <span
      class="ant-avatar-string"
-      style="transform: scale(0.32) translateX(-50%);"
+      style="transform: scale(0.32);"
    />
  </span>
 </div>
@ -74,11 +74,11 @@ exports[`Avatar Render adjusts component size to 100 when window size is xxl 1`]
 <div>
  <span
    class="ant-avatar ant-avatar-circle"
-    style="width: 100px; height: 100px; line-height: 100px; font-size: 18px;"
+    style="width: 100px; height: 100px; font-size: 18px;"
  >
    <span
      class="ant-avatar-string"
-      style="transform: scale(0.32) translateX(-50%);"
+      style="transform: scale(0.32);"
    />
  </span>
 </div>
@ -90,7 +90,7 @@ exports[`Avatar Render fallback 1`] = `
 >
  <span
    class="ant-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
  >
    A
  </span>
@ -103,7 +103,7 @@ exports[`Avatar Render rtl render component should be rendered correctly in RTL
 >
  <span
    class="ant-avatar-string"
-    style="transform: scale(0.72) translateX(-50%);"
+    style="transform: scale(0.72);"
  />
 </span>
 `;
@ -111,7 +111,7 @@ exports[`Avatar Render rtl render component should be rendered correctly in RTL
 exports[`Avatar Render should calculate scale of avatar children correctly 1`] = `
 <span
  class="ant-avatar-string"
-  style="transform: scale(0.72) translateX(-50%);"
+  style="transform: scale(0.72);"
 >
  Avatar
 </span>
@ -120,7 +120,7 @@ exports[`Avatar Render should calculate scale of avatar children correctly 1`] =
 exports[`Avatar Render should calculate scale of avatar children correctly 2`] = `
 <span
  class="ant-avatar-string"
-  style="transform: scale(0.72) translateX(-50%);"
+  style="transform: scale(0.72);"
 >
  xx
 </span>
@ -129,7 +129,7 @@ exports[`Avatar Render should calculate scale of avatar children correctly 2`] =
 exports[`Avatar Render should calculate scale of avatar children correctly with gap 1`] = `
 <span
  class="ant-avatar-string"
-  style="transform: scale(0.36) translateX(-50%);"
+  style="transform: scale(0.36);"
 >
  Avatar
 </span>
@ -151,7 +151,7 @@ exports[`Avatar Render should show image on success after a failure state 1`] =
 >
  <span
    class="ant-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
  >
    Fallback
  </span>
@ -171,11 +171,11 @@ exports[`Avatar Render should show image on success after a failure state 2`] =
 exports[`Avatar Render support size is number 1`] = `
 <span
  class="ant-avatar ant-avatar-circle"
-  style="width: 100px; height: 100px; line-height: 100px; font-size: 18px;"
+  style="width: 100px; height: 100px; font-size: 18px;"
 >
  <span
    class="ant-avatar-string"
-    style="line-height: 100px; transform: scale(0.32) translateX(-50%);"
+    style="transform: scale(0.32);"
  >
    TestString
  </span>
--- a/components/avatar/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/avatar/tests/snapshots/demo-extend.test.ts.snap
@ -111,7 +111,7 @@ exports[`renders components/avatar/demo/basic.tsx extend context correctly 1`] =
      >
        <span
          class="ant-avatar ant-avatar-circle ant-avatar-icon"
-          style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"
+          style="width: 64px; height: 64px; font-size: 32px;"
        >
          <span
            aria-label="user"
@ -215,6 +215,34 @@ exports[`renders components/avatar/demo/basic.tsx extend context correctly 1`] =
          </span>
        </span>
      </div>
+      <div
+        class="ant-space-item"
+      >
+        <span
+          class="ant-avatar ant-avatar-circle ant-avatar-icon"
+          style="width: 14px; height: 14px; font-size: 7px;"
+        >
+          <span
+            aria-label="user"
+            class="anticon anticon-user"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="user"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
    </div>
  </div>
  <div
@ -229,7 +257,7 @@ exports[`renders components/avatar/demo/basic.tsx extend context correctly 1`] =
      >
        <span
          class="ant-avatar ant-avatar-square ant-avatar-icon"
-          style="width: 64px; height: 64px; line-height: 64px; font-size: 32px;"
+          style="width: 64px; height: 64px; font-size: 32px;"
        >
          <span
            aria-label="user"
@ -333,6 +361,34 @@ exports[`renders components/avatar/demo/basic.tsx extend context correctly 1`] =
          </span>
        </span>
      </div>
+      <div
+        class="ant-space-item"
+      >
+        <span
+          class="ant-avatar ant-avatar-square ant-avatar-icon"
+          style="width: 14px; height: 14px; font-size: 7px;"
+        >
+          <span
+            aria-label="user"
+            class="anticon anticon-user"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="user"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
    </div>
  </div>
 </div>
@ -379,7 +435,7 @@ Array [
        >
          <span
            class="ant-avatar-string"
-            style="transform: scale(1) translateX(-50%);"
+            style="transform: scale(1);"
          >
            K
          </span>
@ -390,7 +446,7 @@ Array [
        >
          <span
            class="ant-avatar-string"
-            style="transform: scale(1) translateX(-50%);"
+            style="transform: scale(1);"
          >
            +2
          </span>
@ -588,7 +644,7 @@ Array [
  >
    <span
      class="ant-avatar-string"
-      style="transform: scale(1) translateX(-50%);"
+      style="transform: scale(1);"
    >
      U
    </span>
@ -668,7 +724,7 @@ Array [
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
        >
          K
        </span>
@ -762,7 +818,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
      >
        K
      </span>
@ -773,7 +829,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
      >
        +2
      </span>
@ -888,7 +944,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
      >
        K
      </span>
@ -899,7 +955,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
      >
        +2
      </span>
@ -1014,7 +1070,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
      >
        K
      </span>
@ -1025,7 +1081,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
      >
        +2
      </span>
@ -1133,7 +1189,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
      >
        A
      </span>
@ -1144,7 +1200,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
      >
        K
      </span>
@ -1206,7 +1262,7 @@ exports[`renders components/avatar/demo/group.tsx extend context correctly 2`] =
 exports[`renders components/avatar/demo/responsive.tsx extend context correctly 1`] = `
 <span
  class="ant-avatar ant-avatar-circle ant-avatar-icon"
-  style="width: 24px; height: 24px; line-height: 24px; font-size: 12px;"
+  style="width: 24px; height: 24px; font-size: 12px;"
 >
  <span
    aria-label="ant-design"
@ -1284,7 +1340,7 @@ Array [
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
      >
        Avatar
      </span>
@ -1306,7 +1362,7 @@ Array [
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
        >
          Avatar
        </span>
@ -1366,7 +1422,7 @@ exports[`renders components/avatar/demo/type.tsx extend context correctly 1`] =
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
      >
        U
      </span>
@ -1377,11 +1433,11 @@ exports[`renders components/avatar/demo/type.tsx extend context correctly 1`] =
  >
    <span
      class="ant-avatar ant-avatar-circle"
-      style="width: 40px; height: 40px; line-height: 40px; font-size: 18px;"
+      style="width: 40px; height: 40px; font-size: 18px;"
    >
      <span
        class="ant-avatar-string"
-        style="line-height: 40px; transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
      >
        USER
      </span>
@ -1419,7 +1475,7 @@ exports[`renders components/avatar/demo/type.tsx extend context correctly 1`] =
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
      >
        U
      </span>
--- a/components/avatar/tests/snapshots/demo.test.tsx.snap
+++ b/components/avatar/tests/snapshots/demo.test.tsx.snap
@ -109,7 +109,7 @@ exports[`renders components/avatar/demo/basic.tsx correctly 1`] = `
      >
        <span
          class="ant-avatar ant-avatar-circle ant-avatar-icon"
-          style="width:64px;height:64px;line-height:64px;font-size:32px"
+          style="width:64px;height:64px;font-size:32px"
        >
          <span
            aria-label="user"
@ -213,6 +213,34 @@ exports[`renders components/avatar/demo/basic.tsx correctly 1`] = `
          </span>
        </span>
      </div>
+      <div
+        class="ant-space-item"
+      >
+        <span
+          class="ant-avatar ant-avatar-circle ant-avatar-icon"
+          style="width:14px;height:14px;font-size:7px"
+        >
+          <span
+            aria-label="user"
+            class="anticon anticon-user"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="user"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
    </div>
  </div>
  <div
@ -227,7 +255,7 @@ exports[`renders components/avatar/demo/basic.tsx correctly 1`] = `
      >
        <span
          class="ant-avatar ant-avatar-square ant-avatar-icon"
-          style="width:64px;height:64px;line-height:64px;font-size:32px"
+          style="width:64px;height:64px;font-size:32px"
        >
          <span
            aria-label="user"
@ -331,6 +359,34 @@ exports[`renders components/avatar/demo/basic.tsx correctly 1`] = `
          </span>
        </span>
      </div>
+      <div
+        class="ant-space-item"
+      >
+        <span
+          class="ant-avatar ant-avatar-square ant-avatar-icon"
+          style="width:14px;height:14px;font-size:7px"
+        >
+          <span
+            aria-label="user"
+            class="anticon anticon-user"
+            role="img"
+          >
+            <svg
+              aria-hidden="true"
+              data-icon="user"
+              fill="currentColor"
+              focusable="false"
+              height="1em"
+              viewBox="64 64 896 896"
+              width="1em"
+            >
+              <path
+                d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
+              />
+            </svg>
+          </span>
+        </span>
+      </div>
    </div>
  </div>
 </div>
@ -985,7 +1041,7 @@ exports[`renders components/avatar/demo/type.tsx correctly 1`] = `
  >
    <span
      class="ant-avatar ant-avatar-circle"
-      style="width:40px;height:40px;line-height:40px;font-size:18px"
+      style="width:40px;height:40px;font-size:18px"
    >
      <span
        class="ant-avatar-string"
--- a/components/avatar/avatar.tsx
+++ b/components/avatar/avatar.tsx
@ -128,7 +128,6 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
      ? {
          width: currentSize,
          height: currentSize,
-          lineHeight: `${currentSize}px`,
          fontSize: currentSize && (icon || children) ? currentSize / 2 : 18,
        }
      : {};
@ -178,7 +177,6 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
      ? {
          width: size,
          height: size,
-          lineHeight: `${size}px`,
          fontSize: icon ? size / 2 : 18,
        }
      : {};
@ -200,26 +198,19 @@ const InternalAvatar: React.ForwardRefRenderFunction<HTMLSpanElement, AvatarProp
  } else if (icon) {
    childrenToRender = icon;
  } else if (mounted || scale !== 1) {
-    const transformString = `scale(${scale}) translateX(-50%)`;
+    const transformString = `scale(${scale})`;
    const childrenStyle: React.CSSProperties = {
      msTransform: transformString,
      WebkitTransform: transformString,
      transform: transformString,
    };

-    const sizeChildrenStyle: React.CSSProperties =
-      typeof size === 'number'
-        ? {
-            lineHeight: `${size}px`,
-          }
-        : {};
-
    childrenToRender = (
      <ResizeObserver onResize={setScaleParam}>
        <span
          className={`${prefixCls}-string`}
          ref={avatarChildrenRef}
-          style={{ ...sizeChildrenStyle, ...childrenStyle }}
+          style={{ ...childrenStyle }}
        >
          {children}
        </span>
--- a/components/avatar/demo/basic.tsx
+++ b/components/avatar/demo/basic.tsx
@ -9,12 +9,14 @@ const App: React.FC = () => (
      <Avatar size="large" icon={<UserOutlined />} />
      <Avatar icon={<UserOutlined />} />
      <Avatar size="small" icon={<UserOutlined />} />
+      <Avatar size={14} icon={<UserOutlined />} />
    </Space>
    <Space wrap size={16}>
      <Avatar shape="square" size={64} icon={<UserOutlined />} />
      <Avatar shape="square" size="large" icon={<UserOutlined />} />
      <Avatar shape="square" icon={<UserOutlined />} />
      <Avatar shape="square" size="small" icon={<UserOutlined />} />
+      <Avatar shape="square" size={14} icon={<UserOutlined />} />
    </Space>
  </Space>
 );
--- a/components/avatar/style/index.ts
+++ b/components/avatar/style/index.ts
@ -76,29 +76,18 @@ const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
    borderRadiusSM,
    lineWidth,
    lineType,
-    calc,
  } = token;

  // Avatar size style
  const avatarSizeStyle = (size: number, fontSize: number, radius: number): CSSObject => ({
    width: size,
    height: size,
-    lineHeight: unit(calc(size).sub(calc(lineWidth).mul(2)).equal()),
    borderRadius: '50%',

    [`&${componentCls}-square`]: {
      borderRadius: radius,
    },

-    [`${componentCls}-string`]: {
-      position: 'absolute',
-      left: {
-        _skip_check_: true,
-        value: '50%',
-      },
-      transformOrigin: '0 center',
-    },
-
    [`&${componentCls}-icon`]: {
      fontSize,
      [`> ${iconCls}`]: {
@ -111,7 +100,9 @@ const genBaseStyle: GenerateStyle<AvatarToken> = (token) => {
    [componentCls]: {
      ...resetComponent(token),
      position: 'relative',
-      display: 'inline-block',
+      display: 'inline-flex',
+      justifyContent: 'center',
+      alignItems: 'center',
      overflow: 'hidden',
      color: avatarColor,
      whiteSpace: 'nowrap',
--- a/components/badge/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/badge/tests/snapshots/demo-extend.test.ts.snap
@ -15,7 +15,7 @@ exports[`renders components/badge/demo/basic.tsx extend context correctly 1`] =
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
        />
      </span>
      <sup
@ -49,7 +49,7 @@ exports[`renders components/badge/demo/basic.tsx extend context correctly 1`] =
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
        />
      </span>
      <sup
@ -72,7 +72,7 @@ exports[`renders components/badge/demo/basic.tsx extend context correctly 1`] =
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
        />
      </span>
      <span
@ -126,7 +126,7 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] =
          >
            <span
              class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
            />
          </span>
          <sup
@ -263,7 +263,7 @@ exports[`renders components/badge/demo/change.tsx extend context correctly 1`] =
          >
            <span
              class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
            />
          </span>
          <sup
@ -1386,7 +1386,7 @@ exports[`renders components/badge/demo/component-token.tsx extend context correc
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
        />
      </span>
      <sup
@ -1582,7 +1582,7 @@ exports[`renders components/badge/demo/link.tsx extend context correctly 1`] = `
    >
      <span
        class="ant-avatar-string"
-        style="transform: scale(1) translateX(-50%);"
+        style="transform: scale(1);"
      />
    </span>
    <sup
@ -1632,7 +1632,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
          >
            <span
              class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
            />
          </span>
          <sup
@ -1666,7 +1666,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
          >
            <span
              class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
            />
          </span>
          <sup
@ -1700,7 +1700,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
          >
            <span
              class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
            />
          </span>
          <sup
@ -1734,7 +1734,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
          >
            <span
              class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
            />
          </span>
          <sup
@ -1769,7 +1769,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
          >
            <span
              class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
            />
          </span>
          <sup
@ -1789,7 +1789,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
          >
            <span
              class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
            />
          </span>
          <sup
@ -1809,7 +1809,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
          >
            <span
              class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
            />
          </span>
          <sup
@ -1829,7 +1829,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
          >
            <span
              class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
            />
          </span>
          <sup
@ -1849,7 +1849,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
          >
            <span
              class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
            />
          </span>
          <sup
@ -1925,7 +1925,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
          >
            <span
              class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
            />
          </span>
          <sup
@ -1948,7 +1948,7 @@ exports[`renders components/badge/demo/mix.tsx extend context correctly 1`] = `
          >
            <span
              class="ant-avatar-string"
-              style="transform: scale(1) translateX(-50%);"
+              style="transform: scale(1);"
            />
          </span>
          <sup
@ -2129,7 +2129,7 @@ exports[`renders components/badge/demo/offset.tsx extend context correctly 1`] =
  >
    <span
      class="ant-avatar-string"
-      style="transform: scale(1) translateX(-50%);"
+      style="transform: scale(1);"
    />
  </span>
  <sup
@ -2171,7 +2171,7 @@ exports[`renders components/badge/demo/overflow.tsx extend context correctly 1`]
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
        />
      </span>
      <sup
@ -2215,7 +2215,7 @@ exports[`renders components/badge/demo/overflow.tsx extend context correctly 1`]
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
        />
      </span>
      <sup
@ -2238,7 +2238,7 @@ exports[`renders components/badge/demo/overflow.tsx extend context correctly 1`]
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
        />
      </span>
      <sup
@ -2261,7 +2261,7 @@ exports[`renders components/badge/demo/overflow.tsx extend context correctly 1`]
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
        />
      </span>
      <sup
@ -2800,7 +2800,7 @@ exports[`renders components/badge/demo/size.tsx extend context correctly 1`] = `
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
        />
      </span>
      <sup
@ -2834,7 +2834,7 @@ exports[`renders components/badge/demo/size.tsx extend context correctly 1`] = `
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
        />
      </span>
      <sup
@ -3028,7 +3028,7 @@ exports[`renders components/badge/demo/title.tsx extend context correctly 1`] =
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
        />
      </span>
      <sup
@ -3062,7 +3062,7 @@ exports[`renders components/badge/demo/title.tsx extend context correctly 1`] =
      >
        <span
          class="ant-avatar-string"
-          style="transform: scale(1) translateX(-50%);"
+          style="transform: scale(1);"
        />
      </span>
      <sup
--- a/components/config-provider/tests/snapshots/components.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/components.test.tsx.snap
@ -574,7 +574,7 @@ exports[`ConfigProvider components Avatar configProvider 1`] = `
 >
  <span
    class="config-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
  />
 </span>
 `;
@ -585,7 +585,7 @@ exports[`ConfigProvider components Avatar configProvider componentDisabled 1`] =
 >
  <span
    class="config-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
  />
 </span>
 `;
@ -596,7 +596,7 @@ exports[`ConfigProvider components Avatar configProvider componentSize large 1`]
 >
  <span
    class="config-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
  />
 </span>
 `;
@ -607,7 +607,7 @@ exports[`ConfigProvider components Avatar configProvider componentSize middle 1`
 >
  <span
    class="config-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
  />
 </span>
 `;
@ -618,7 +618,7 @@ exports[`ConfigProvider components Avatar configProvider componentSize small 1`]
 >
  <span
    class="config-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
  />
 </span>
 `;
@ -629,7 +629,7 @@ exports[`ConfigProvider components Avatar normal 1`] = `
 >
  <span
    class="ant-avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
  />
 </span>
 `;
@ -640,7 +640,7 @@ exports[`ConfigProvider components Avatar prefixCls 1`] = `
 >
  <span
    class="prefix-Avatar-string"
-    style="transform: scale(1) translateX(-50%);"
+    style="transform: scale(1);"
  />
 </span>
 `;
--- a/components/drawer/index.en-US.md
+++ b/components/drawer/index.en-US.md
@ -53,7 +53,7 @@ v5 use `rootClassName` & `rootStyle` to config wrapper style instead of `classNa
 | className | Config Drawer Panel className. Use `rootClassName` if want to config top dom style | string | - |  |
 | classNames | Config Drawer build-in module's className | `header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string;` | - |  |
 | styles | Config Drawer build-in module's style | `header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties;` | - | 5.10.0 |
-| closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | boolean \| ReactNode | &lt;CloseOutlined /> |  |
+| closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | ReactNode | &lt;CloseOutlined /> |  |
 | destroyOnClose | Whether to unmount child components on closing drawer or not | boolean | false |  |
 | extra | Extra actions area at corner | ReactNode | - | 4.17.0 |
 | footer | The footer for Drawer | ReactNode | - |  |
--- a/components/drawer/index.zh-CN.md
+++ b/components/drawer/index.zh-CN.md
@ -52,7 +52,7 @@ v5 使用 `rootClassName` 与 `rootStyle` 来配置最外层元素样式。原 v
 | className | Drawer 容器外层 className 设置，如果需要设置最外层，请使用 rootClassName | string | - |  |
 | classNames | 配置抽屉内置模块的 className | `header?: string; body?: string; footer?: string; mask?: string; content?: string; wrapper?: string;` | - |  |
 | styles | 配置抽屉内置模块的 style | `header?: CSSProperties; body?: CSSProperties; footer?: CSSProperties; mask?: CSSProperties; content?: CSSProperties; wrapper?: CSSProperties;` | - | 5.10.0 |
-| closeIcon | 自定义关闭图标。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | boolean \| ReactNode | &lt;CloseOutlined /> |  |
+| closeIcon | 自定义关闭图标。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | ReactNode | &lt;CloseOutlined /> |  |
 | destroyOnClose | 关闭时销毁 Drawer 里的子元素 | boolean | false |  |
 | extra | 抽屉右上角的操作区域 | ReactNode | - | 4.17.0 |
 | footer | 抽屉的页脚 | ReactNode | - |  |
--- a/components/float-button/index.en-US.md
+++ b/components/float-button/index.en-US.md
@ -59,6 +59,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | shape | Setting button shape of children | `circle` \| `square` | `circle` |  |
 | trigger | Which action can trigger menu open/close | `click` \| `hover` | - |  |
 | open | Whether the menu is visible or not, use it with trigger | boolean | - |  |
+| closeIcon | Customize close button icon | React.ReactNode | `<CloseOutlined />` |  |
 | onOpenChange | Callback executed when active menu is changed, use it with trigger | (open: boolean) => void | - |  |

 ### FloatButton.BackTop
--- a/components/float-button/index.zh-CN.md
+++ b/components/float-button/index.zh-CN.md
@ -60,6 +60,7 @@ tag: New
 | shape | 设置包含的 FloatButton 按钮形状 | `circle` \| `square` | `circle` |  |
 | trigger | 触发方式（有触发方式为菜单模式） | `click` \| `hover` | - |  |
 | open | 受控展开，需配合 trigger 一起使用 | boolean | - |  |
+| closeIcon | 自定义关闭按钮 | React.ReactNode | `<CloseOutlined />` |  |
 | onOpenChange | 展开收起时的回调，需配合 trigger 一起使用 | (open: boolean) => void | - |  |

 ### FloatButton.BackTop
--- a/components/input/index.en-US.md
+++ b/components/input/index.en-US.md
@ -107,7 +107,7 @@ The rest of the props of `Input.TextArea` are the same as the original [textarea

 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| enterButton | Whether to show an enter button after input. This property conflicts with the `addonAfter` property | boolean \| ReactNode | false |
+| enterButton | Whether to show an enter button after input. This property conflicts with the `addonAfter` property | ReactNode | false |
 | loading | Search box with loading | boolean | false |
 | onSearch | The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key | function(value, event, { source: "input" \| "clear" }) | - |

--- a/components/input/index.zh-CN.md
+++ b/components/input/index.zh-CN.md
@ -108,7 +108,7 @@ interface CountConfig {

 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
-| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 `addonAfter` 冲突。 | boolean \| ReactNode | false |
+| enterButton | 是否有确认按钮，可设为按钮文字。该属性会与 `addonAfter` 冲突。 | ReactNode | false |
 | loading | 搜索 loading | boolean | false |
 | onSearch | 点击搜索图标、清除图标，或按下回车键时的回调 | function(value, event, { source: "input" \| "clear" }) | - |

--- a/components/input/style/variants.ts
+++ b/components/input/style/variants.ts
@ -16,6 +16,10 @@ export const genDisabledStyle = (token: InputToken): CSSObject => ({
  cursor: 'not-allowed',
  opacity: 1,

+  'input[disabled]': {
+    cursor: 'not-allowed',
+  },
+
  '&:hover:not([disabled])': {
    ...genHoverStyle(
      mergeToken<InputToken>(token, {
@ -78,8 +82,8 @@ export const genOutlinedStyle = (token: InputToken, extraStyles?: CSSObject): CS
  '&-outlined': {
    ...genBaseOutlinedStyle(token, {
      borderColor: token.colorBorder,
-      hoverBorderColor: token.colorPrimaryHover,
-      activeBorderColor: token.colorPrimary,
+      hoverBorderColor: token.hoverBorderColor,
+      activeBorderColor: token.activeBorderColor,
      activeShadow: token.activeShadow,
    }),

--- a/components/modal/index.en-US.md
+++ b/components/modal/index.en-US.md
@ -53,7 +53,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | cancelButtonProps | The cancel button props | [ButtonProps](/components/button/#api) | - |  |
 | cancelText | Text of the Cancel button | ReactNode | `Cancel` |  |
 | centered | Centered Modal | boolean | false |  |
-| closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | boolean \| ReactNode | &lt;CloseOutlined /> |  |
+| closeIcon | Custom close icon. 5.7.0: close button will be hidden when setting to `null` or `false` | ReactNode | &lt;CloseOutlined /> |  |
 | confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false |  |
 | destroyOnClose | Whether to unmount child components on onClose | boolean | false |  |
 | focusTriggerAfterClose | Whether need to focus trigger element after dialog is closed | boolean | true | 4.9.0 |
--- a/components/modal/index.zh-CN.md
+++ b/components/modal/index.zh-CN.md
@ -54,7 +54,7 @@ demo:
 | cancelButtonProps | cancel 按钮 props | [ButtonProps](/components/button-cn#api) | - |  |
 | cancelText | 取消按钮文字 | ReactNode | `取消` |  |
 | centered | 垂直居中展示 Modal | boolean | false |  |
-| closeIcon | 自定义关闭图标。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | boolean \| ReactNode | &lt;CloseOutlined /> |  |
+| closeIcon | 自定义关闭图标。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | ReactNode | &lt;CloseOutlined /> |  |
 | confirmLoading | 确定按钮 loading | boolean | false |  |
 | destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |  |
 | focusTriggerAfterClose | 对话框关闭后是否需要聚焦触发元素 | boolean | true | 4.9.0 |
--- a/components/notification/index.en-US.md
+++ b/components/notification/index.en-US.md
@ -51,7 +51,7 @@ The properties of config are as follows:
 | --- | --- | --- | --- | --- |
 | btn | Customized close button | ReactNode | - | - |
 | className | Customized CSS class | string | - | - |
-| closeIcon | Custom close icon | boolean \| ReactNode | true | 5.7.0: close button will be hidden when setting to null or false |
+| closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false |
 | description | The content of notification box (required) | ReactNode | - | - |
 | duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 | - |
 | icon | Customized icon | ReactNode | - | - |
@ -71,7 +71,7 @@ The properties of config are as follows:
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | bottom | Distance from the bottom of the viewport, when `placement` is `bottom` `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 |  |
-| closeIcon | Custom close icon | boolean \| ReactNode | true | 5.7.0: close button will be hidden when setting to null or false |
+| closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false |
 | getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |  |
 | placement | Position of Notification, can be one of `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |
 | rtl | Whether to enable RTL mode | boolean | false |  |
@ -103,7 +103,7 @@ notification.config({
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | bottom | Distance from the bottom of the viewport, when `placement` is `bottom` `bottomRight` or `bottomLeft` (unit: pixels) | number | 24 |  |
-| closeIcon | Custom close icon | boolean \| ReactNode | true | 5.7.0: close button will be hidden when setting to null or false |
+| closeIcon | Custom close icon | ReactNode | true | 5.7.0: close button will be hidden when setting to null or false |
 | duration | Time in seconds before Notification is closed. When set to 0 or null, it will never be closed automatically | number | 4.5 |  |
 | getContainer | Return the mount node for Notification, but still display at fullScreen | () => HTMLNode | () => document.body |  |
 | placement | Position of Notification, can be one of `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |
--- a/components/notification/index.zh-CN.md
+++ b/components/notification/index.zh-CN.md
@ -52,7 +52,7 @@ config 参数如下：
 | --- | --- | --- | --- | --- |
 | btn | 自定义关闭按钮 | ReactNode | - | - |
 | className | 自定义 CSS class | string | - | - |
-| closeIcon | 自定义关闭图标 | boolean \| ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
+| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
 | description | 通知提醒内容，必选 | ReactNode | - | - |
 | duration | 默认 4.5 秒后自动关闭，配置为 null 则不自动关闭 | number | 4.5 | - |
 | icon | 自定义图标 | ReactNode | - | - |
@ -72,7 +72,7 @@ config 参数如下：
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |  |
-| closeIcon | 自定义关闭图标 | boolean \| ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
+| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
 | getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |  |
 | placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |
 | rtl | 是否开启 RTL 模式 | boolean | false |  |
@ -104,7 +104,7 @@ notification.config({
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | bottom | 消息从底部弹出时，距离底部的位置，单位像素 | number | 24 |  |
-| closeIcon | 自定义关闭图标 | boolean \| ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
+| closeIcon | 自定义关闭图标 | ReactNode | true | 5.7.0：设置为 null 或 false 时隐藏关闭按钮 |
 | duration | 默认自动关闭延时，单位秒 | number | 4.5 |  |
 | getContainer | 配置渲染节点的输出位置，但依旧为全屏展示 | () => HTMLNode | () => document.body |  |
 | placement | 弹出位置，可选 `top` `topLeft` `topRight` `bottom` `bottomLeft` `bottomRight` | string | `topRight` |  |
--- a/components/segmented/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/segmented/tests/snapshots/demo-extend.test.ts.snap
@ -446,7 +446,7 @@ exports[`renders components/segmented/demo/custom.tsx extend context correctly 1
            >
              <span
                class="ant-avatar-string"
-                style="transform: scale(1) translateX(-50%);"
+                style="transform: scale(1);"
              >
                K
              </span>
--- a/components/tabs/index.en-US.md
+++ b/components/tabs/index.en-US.md
@ -65,10 +65,10 @@ Common props ref：[Common props](/docs/react/common-props)
 | tabPosition | Position of tabs | `top` \| `right` \| `bottom` \| `left` | `top` |  |
 | destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false |  |
 | type | Basic style of tabs | `line` \| `card` \| `editable-card` | `line` |  |
-| onChange | Callback executed when active tab is changed | function(activeKey) {} | - |  |
-| onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (action === 'add' ? event : targetKey, action): void | - |  |
-| onTabClick | Callback executed when tab is clicked | function(key: string, event: MouseEvent) | - |  |
-| onTabScroll | Trigger when tab scroll | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 |
+| onChange | Callback executed when active tab is changed | (activeKey: string) => void | - |  |
+| onEdit | Callback executed when tab is added or removed. Only works while `type="editable-card"` | (action === 'add' ? event : targetKey, action) => void | - |  |
+| onTabClick | Callback executed when tab is clicked | (key: string, event: MouseEvent) => void | - |  |
+| onTabScroll | Trigger when tab scroll | ({ direction: `left` \| `right` \| `top` \| `bottom` }) => void | - | 4.3.0 |

 More option at [rc-tabs tabs](https://github.com/react-component/tabs#tabs)

@ -76,7 +76,7 @@ More option at [rc-tabs tabs](https://github.com/react-component/tabs#tabs)

 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"`. 5.7.0: close button will be hidden when setting to `null` or `false` | boolean \| ReactNode | - |  |
+| closeIcon | Customize close icon in TabPane's head. Only works while `type="editable-card"`. 5.7.0: close button will be hidden when setting to `null` or `false` | ReactNode | - |  |
 | destroyInactiveTabPane | Whether destroy inactive TabPane when change tab | boolean | false | 5.11.0 |
 | disabled | Set TabPane disabled | boolean | false |  |
 | forceRender | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |  |
--- a/components/tabs/index.zh-CN.md
+++ b/components/tabs/index.zh-CN.md
@ -67,10 +67,10 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | tabPosition | 页签位置，可选值有 `top` `right` `bottom` `left` | string | `top` |  |
 | destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false |  |
 | type | 页签的基本样式，可选 `line`、`card` `editable-card` 类型 | string | `line` |  |
-| onChange | 切换面板的回调 | function(activeKey) {} | - |  |
-| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (action === 'add' ? event : targetKey, action): void | - |  |
-| onTabClick | tab 被点击的回调 | function(key: string, event: MouseEvent) | - |  |
-| onTabScroll | tab 滚动时触发 | function({ direction: `left` \| `right` \| `top` \| `bottom` }) | - | 4.3.0 |
+| onChange | 切换面板的回调 | (activeKey: string) => void | - |  |
+| onEdit | 新增和删除页签的回调，在 `type="editable-card"` 时有效 | (action === 'add' ? event : targetKey, action) => void | - |  |
+| onTabClick | tab 被点击的回调 | (key: string, event: MouseEvent) => void | - |  |
+| onTabScroll | tab 滚动时触发 | ({ direction: `left` \| `right` \| `top` \| `bottom` }) => void | - | 4.3.0 |

 > 更多属性查看 [rc-tabs tabs](https://github.com/react-component/tabs#tabs)

@ -78,7 +78,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。

 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| closeIcon | 自定义关闭图标，在 `type="editable-card"` 时有效。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | boolean \| ReactNode | - |  |
+| closeIcon | 自定义关闭图标，在 `type="editable-card"` 时有效。5.7.0：设置为 `null` 或 `false` 时隐藏关闭按钮 | ReactNode | - |  |
 | destroyInactiveTabPane | 被隐藏时是否销毁 DOM 结构 | boolean | false | 5.11.0 |
 | disabled | 禁用某一项 | boolean | false |  |
 | forceRender | 被隐藏时是否渲染 DOM 结构 | boolean | false |  |
--- a/components/timeline/index.en-US.md
+++ b/components/timeline/index.en-US.md
@ -56,7 +56,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
 | mode | By sending `alternate` the timeline will distribute the nodes to the left and right | `left` \| `alternate` \| `right` | - |
-| pending | Set the last ghost node's existence or its content | boolean \| ReactNode | false |
+| pending | Set the last ghost node's existence or its content | ReactNode | false |
 | pendingDot | Set the dot of the last ghost node when pending is true | ReactNode | &lt;LoadingOutlined /&gt; |
 | reverse | Whether reverse nodes or not | boolean | false |
 | items | Each node of timeline | [Items](#Items)[] | 5.2.0 |
--- a/components/timeline/index.zh-CN.md
+++ b/components/timeline/index.zh-CN.md
@ -57,7 +57,7 @@ return (
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | mode | 通过设置 `mode` 可以改变时间轴和内容的相对位置 | `left` \| `alternate` \| `right` | - |
-| pending | 指定最后一个幽灵节点是否存在或内容 | boolean \| ReactNode | false |
+| pending | 指定最后一个幽灵节点是否存在或内容 | ReactNode | false |
 | pendingDot | 当最后一个幽灵节点存在時，指定其时间图点 | ReactNode | &lt;LoadingOutlined /&gt; |
 | reverse | 节点排序 | boolean | false |
 | items | 选项配置 | [Items](#Items)[] | 5.2.0 |
--- a/components/tree/index.en-US.md
+++ b/components/tree/index.en-US.md
@ -66,7 +66,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | selectable | Whether can be selected | boolean | true |  |
 | selectedKeys | (Controlled) Specifies the keys of the selected treeNodes, multiple selection needs to set `multiple` to true | string\[] | - |  |
 | showIcon | Shows the icon before a TreeNode's title. There is no default style; you must set a custom style for it if set to true | boolean | false |  |
-| showLine | Shows a connecting line | boolean \| {showLeafIcon: boolean \| ReactNode \| ((props: AntTreeNodeProps) => ReactNode)} | false |  |
+| showLine | Shows a connecting line | boolean \| {showLeafIcon: ReactNode \| ((props: AntTreeNodeProps) => ReactNode)} | false |  |
 | switcherIcon | Customize collapse/expand icon of tree node | ReactNode \| ((props: AntTreeNodeProps) => ReactNode) | - | renderProps: 4.20.0 |
 | titleRender | Customize tree node title render | (nodeData) => ReactNode | - | 4.5.0 |
 | treeData | The treeNodes data Array, if set it then you need not to construct children TreeNode. (key should be unique across the whole array) | array&lt;{ key, title, children, \[disabled, selectable] }> | - |  |
--- a/components/tree/index.zh-CN.md
+++ b/components/tree/index.zh-CN.md
@ -68,7 +68,7 @@ demo:
 | selectable | 是否可选中 | boolean | true |  |
 | selectedKeys | （受控）设置选中的树节点，多选需设置 `multiple` 为 true | string\[] | - |  |
 | showIcon | 是否展示 TreeNode title 前的图标，没有默认样式，如设置为 true，需要自行定义图标相关样式 | boolean | false |  |
-| showLine | 是否展示连接线 | boolean \| {showLeafIcon: boolean \| ReactNode \| ((props: AntTreeNodeProps) => ReactNode)} | false |  |
+| showLine | 是否展示连接线 | boolean \| { showLeafIcon: ReactNode \| ((props: AntTreeNodeProps) => ReactNode) } | false |  |
 | switcherIcon | 自定义树节点的展开/折叠图标 | ReactNode \| ((props: AntTreeNodeProps) => ReactNode) | - | renderProps: 4.20.0 |
 | titleRender | 自定义渲染节点 | (nodeData) => ReactNode | - | 4.5.0 |
 | treeData | treeNodes 数据，如果设置则不需要手动构造 TreeNode 节点（key 在整个树范围内唯一） | array&lt;{key, title, children, \[disabled, selectable]}> | - |  |
--- a/components/typography/index.en-US.md
+++ b/components/typography/index.en-US.md
@ -125,7 +125,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | editing | Whether to be editable | boolean | false |  |
 | icon | Custom editable icon | ReactNode | &lt;EditOutlined /> | 4.6.0 |
 | maxLength | `maxLength` attribute of textarea | number | - | 4.4.0 |
-| tooltip | Custom tooltip text, hide when it is false | boolean \| ReactNode | `Edit` | 4.6.0 |
+| tooltip | Custom tooltip text, hide when it is false | ReactNode | `Edit` | 4.6.0 |
 | text | Edit text, specify the editing content instead of using the children implicitly | string | - | 4.24.0 |
 | onChange | Called when input at textarea | function(value: string) | - |  |
 | onCancel | Called when type ESC to exit editable state | function | - |  |
@ -152,7 +152,7 @@ Common props ref：[Common props](/docs/react/common-props)
 | rows | Max rows of content | number | - |  |
 | suffix | Suffix of ellipsis content | string | - |  |
 | symbol | Custom description of ellipsis | ReactNode | `Expand` |  |
-| tooltip | Show tooltip when ellipsis | boolean \| ReactNode \| [TooltipProps](/components/tooltip/#api) | - | 4.11.0 |
+| tooltip | Show tooltip when ellipsis | ReactNode \| [TooltipProps](/components/tooltip/#api) | - | 4.11.0 |
 | onEllipsis | Called when enter or leave ellipsis state | function(ellipsis) | - | 4.2.0 |
 | onExpand | Called when expand content | function(event) | - |  |

--- a/components/typography/index.zh-CN.md
+++ b/components/typography/index.zh-CN.md
@ -126,7 +126,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 | editing | 控制是否是编辑中状态 | boolean | false |  |
 | icon | 自定义编辑图标 | ReactNode | &lt;EditOutlined /> | 4.6.0 |
 | maxLength | 编辑中文本域最大长度 | number | - | 4.4.0 |
-| tooltip | 自定义提示文本，为 false 时关闭 | boolean \| ReactNode | `编辑` | 4.6.0 |
+| tooltip | 自定义提示文本，为 false 时关闭 | ReactNode | `编辑` | 4.6.0 |
 | text | 显式地指定编辑文案，为空时将隐式地使用 children | string | - | 4.24.0 |
 | onChange | 文本域编辑时触发 | function(value: string) | - |  |
 | onCancel | 按 ESC 退出编辑状态时触发 | function | - |  |
@ -153,7 +153,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*LT2jR41Uj2EAAA
 | rows | 最多显示的行数 | number | - |  |
 | suffix | 自定义省略内容后缀 | string | - |  |
 | symbol | 自定义展开描述文案 | ReactNode | `展开` |  |
-| tooltip | 省略时，展示提示信息 | boolean \| ReactNode \| [TooltipProps](/components/tooltip-cn/#api) | - | 4.11.0 |
+| tooltip | 省略时，展示提示信息 | ReactNode \| [TooltipProps](/components/tooltip-cn/#api) | - | 4.11.0 |
 | onEllipsis | 触发省略时的回调 | function(ellipsis) | - | 4.2.0 |
 | onExpand | 点击展开时的回调 | function(event) | - |  |

--- a/docs/blog/github-actions-workflow.en-US.md
+++ b/docs/blog/github-actions-workflow.en-US.md
@ -233,7 +233,7 @@ To further optimize dependency installation speed, we can add pnpm caching. Afte
    echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT

 - name: Setup pnpm cache
-  uses: actions/cache@v3
+  uses: actions/cache@v4
  with:
    path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
    key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
--- a/docs/blog/github-actions-workflow.zh-CN.md
+++ b/docs/blog/github-actions-workflow.zh-CN.md
@ -238,7 +238,7 @@ jobs:
    echo "STORE_PATH=$(pnpm store path)" >> $GITHUB_OUTPUT

 - name: Setup pnpm cache (设置 pnpm 缓存)
-  uses: actions/cache@v3
+  uses: actions/cache@v4
  with:
    path: ${{ steps.pnpm-cache.outputs.STORE_PATH }}
    key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
--- a/docs/blog/mock-project-build.en-US.md
+++ b/docs/blog/mock-project-build.en-US.md
@ -44,7 +44,7 @@ Pass `--depth=1` to only pull the last commit. Then execute `yarn` to install de
 Every time the build is successful, CI will cache the current `yarn.lock` file. In this way, if the next build fails, we can easily pull the two files for comparison to troubleshoot the problem. Although `actions/cache` does not allow cache keys with the same name, it allows `restore-keys` to get the latest cache, which is very convenient:

 ```yml
- uses: actions/cache@v3
+- uses: actions/cache@v4
  with:
    path: ~tmpProj/yarn.lock
    key: primes-${{ runner.os }}-${{ github.run_id }}
--- a/docs/blog/mock-project-build.zh-CN.md
+++ b/docs/blog/mock-project-build.zh-CN.md
@ -44,7 +44,7 @@ on:
 每次构建成功，CI 都会缓存当下的 `yarn.lock` 文件。这样，我们在下次构建如果失败了，就可以很方便的拉取两份文件进行对比去排查问题。`actions/cache` 虽然不允许同名 cache key，但是允许通过 `restore-keys` 来获取最近的 cache，这就非常方便了：

 ```yml
- uses: actions/cache@v3
+- uses: actions/cache@v4
  with:
    path: ~tmpProj/yarn.lock
    key: primes-${{ runner.os }}-${{ github.run_id }}
--- a/package.json
+++ b/package.json
@ -118,7 +118,7 @@
  "dependencies": {
    "@ant-design/colors": "^7.0.2",
    "@ant-design/cssinjs": "^1.18.4",
-    "@ant-design/icons": "^5.2.6",
+    "@ant-design/icons": "^5.3.0",
    "@ant-design/react-slick": "~1.0.2",
    "@ctrl/tinycolor": "^3.6.1",
    "@rc-component/color-picker": "~1.5.1",
@ -157,7 +157,7 @@
    "rc-tabs": "~14.0.0",
    "rc-textarea": "~1.6.3",
    "rc-tooltip": "~6.1.3",
-    "rc-tree": "~5.8.3",
+    "rc-tree": "~5.8.5",
    "rc-tree-select": "~5.17.0",
    "rc-upload": "~4.5.2",
    "rc-util": "^5.38.1",
@ -184,8 +184,8 @@
    "@size-limit/file": "^11.0.2",
    "@stackblitz/sdk": "^1.9.0",
    "@testing-library/dom": "^9.3.4",
-    "@testing-library/jest-dom": "^6.3.0",
-    "@testing-library/react": "^14.1.2",
+    "@testing-library/jest-dom": "^6.4.1",
+    "@testing-library/react": "^14.2.0",
    "@testing-library/user-event": "^14.5.2",
    "@types/ali-oss": "^6.16.11",
    "@types/fs-extra": "^11.0.4",
@ -201,14 +201,14 @@
    "@types/jsdom": "^21.1.6",
    "@types/lodash": "^4.14.202",
    "@types/minimist": "^1.2.5",
-    "@types/node": "^20.11.10",
+    "@types/node": "^20.11.15",
    "@types/nprogress": "^0.2.3",
    "@types/pixelmatch": "^5.2.6",
    "@types/pngjs": "^6.0.4",
    "@types/prismjs": "^1.26.3",
    "@types/progress": "^2.0.7",
    "@types/qs": "^6.9.11",
-    "@types/react": "^18.2.48",
+    "@types/react": "^18.2.51",
    "@types/react-copy-to-clipboard": "^5.0.7",
    "@types/react-dom": "^18.2.18",
    "@types/react-highlight-words": "^0.16.7",
@ -217,8 +217,8 @@
    "@types/tar": "^6.1.11",
    "@types/throttle-debounce": "^5.0.2",
    "@types/warning": "^3.0.3",
-    "@typescript-eslint/eslint-plugin": "^6.19.1",
-    "@typescript-eslint/parser": "^6.19.1",
+    "@typescript-eslint/eslint-plugin": "^6.20.0",
+    "@typescript-eslint/parser": "^6.20.0",
    "ali-oss": "^6.20.0",
    "antd-img-crop": "^4.21.0",
    "antd-style": "^3.6.1",
@ -253,7 +253,7 @@
    "glob": "^10.3.10",
    "html2sketch": "^1.0.2",
    "http-server": "^14.1.1",
-    "husky": "^9.0.6",
+    "husky": "^9.0.7",
    "identity-obj-proxy": "^3.0.0",
    "immer": "^10.0.3",
    "inquirer": "^9.2.13",
@ -270,9 +270,9 @@
    "jsdom": "^24.0.0",
    "jsonml-to-react-element": "^1.1.11",
    "jsonml.js": "^0.1.0",
-    "lint-staged": "^15.2.0",
+    "lint-staged": "^15.2.1",
    "lodash": "^4.17.21",
-    "lunar-typescript": "^1.7.0",
+    "lunar-typescript": "^1.7.1",
    "lz-string": "^1.5.0",
    "minimist": "^1.2.8",
    "mockdate": "^3.0.5",
@ -287,11 +287,11 @@
    "pretty-format": "^29.7.0",
    "prismjs": "^1.29.0",
    "progress": "^2.0.3",
-    "puppeteer": "^21.9.0",
+    "puppeteer": "^21.10.0",
    "qs": "^6.11.2",
    "rc-footer": "^0.6.8",
    "rc-tween-one": "^3.0.6",
-    "rc-virtual-list": "^3.11.3",
+    "rc-virtual-list": "^3.11.4",
    "react": "^18.2.0",
    "react-copy-to-clipboard": "^5.1.0",
    "react-countup": "^6.5.0",
@ -300,7 +300,7 @@
    "react-fast-marquee": "^1.6.3",
    "react-highlight-words": "^0.20.0",
    "react-infinite-scroll-component": "^6.1.0",
-    "react-intersection-observer": "^9.5.3",
+    "react-intersection-observer": "^9.6.0",
    "react-resizable": "^3.0.5",
    "react-router-dom": "^6.21.3",
    "react-sticky-box": "^2.0.5",
@ -312,7 +312,7 @@
    "remark-lint": "^9.1.2",
    "remark-lint-no-undefined-references": "^4.2.1",
    "remark-preset-lint-recommended": "^6.1.3",
-    "runes2": "^1.1.3",
+    "runes2": "^1.1.4",
    "semver": "^7.5.4",
    "sharp": "^0.33.2",
    "simple-git": "^3.22.0",
--- a/scripts/visual-regression/upload.js
+++ b/scripts/visual-regression/upload.js
@ -93,6 +93,10 @@ async function uploadFile(client, filePath, refValue) {
    // https://help.aliyun.com/zh/oss/developer-reference/prevent-objects-from-being-overwritten-by-objects-that-have-the-same-names-3
    'x-oss-forbid-overwrite': 'false',
  };
+  // Set content-type to allow individual preview of images
+  if (path.extname(filePath) === '.png') {
+    headers['Content-Type'] = 'image/png';
+  }

  console.log('Uploading file: %s', filePath);
  try {