chore: auto merge branches (#46229)

Feature merge master
2024-12-03 12:38:58 +08:00 · 2023-12-04 03:04:13 +00:00 · 2023-12-04 03:04:13 +00:00 · f97cbff06d
commit f97cbff06d
parent 82781bd1f3 71bd883126
20 changed files with 240 additions and 108 deletions
--- a/.dumi/theme/common/Color/ColorPaletteToolDark.tsx
+++ b/.dumi/theme/common/Color/ColorPaletteToolDark.tsx
@ -44,7 +44,7 @@ const ColorPaletteTool: React.FC = () => {
        text += locale.saturation((s * 100).toFixed(2));
      }
      if (b * 100 < primaryMinBrightness) {
-        text += locale.brightness((s * 100).toFixed(2));
+        text += locale.brightness((b * 100).toFixed(2));
      }
    }
    return (
--- a/.dumi/theme/slots/Header/index.tsx
+++ b/.dumi/theme/slots/Header/index.tsx
@ -25,10 +25,10 @@ const RESPONSIVE_SM = 1200;

 const locales = {
  cn: {
-    message: 'Galacean Effects · 所见即所得的动效新方案。',
-    shortMessage: 'Galacean Effects · 所见即所得的动效新方案。',
+    message: '语雀征文 · 说说你和开源的故事，赢取 Ant Design 精美周边 🎁',
+    shortMessage: '语雀征文 · 说说你和开源的故事，赢取 Ant Design 精美周边 🎁',
    more: '前往了解',
-    link: 'https://galacean.antgroup.com/effects/',
+    link: 'https://www.yuque.com/opensource2023',
  },
  en: {
    message: '',
--- a/README.md
+++ b/README.md
@ -41,6 +41,17 @@ An enterprise-class UI design language and React UI library.
 [dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
 [dumi-url]: https://github.com/umijs/dumi

+<!-- Copy-paste in your Readme.md file -->
+
+<a href="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats?repo_id=34526884" target="_blank" style="display: block" align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats/thumbnail.png?repo_id=34526884&image_size=auto&color_scheme=dark" width="655" height="auto">
+    <img alt="Performance Stats of ant-design/ant-design - Last 28 days" src="https://next.ossinsight.io/widgets/official/compose-last-28-days-stats/thumbnail.png?repo_id=34526884&image_size=auto&color_scheme=light" width="655" height="auto">
+  </picture>
+</a>
+
+<!-- Made with [OSS Insight](https://ossinsight.io/) -->
+
 </div>

 [![](https://user-images.githubusercontent.com/507615/209472919-6f7e8561-be8c-4b0b-9976-eb3c692aa20a.png)](https://ant.design)
@ -83,27 +94,16 @@ pnpm add antd
 ## 🔨 Usage

 ```tsx
-import React from 'react';
 import { Button, DatePicker } from 'antd';

-const App = () => (
+export default () => (
  <>
    <Button type="primary">PRESS ME</Button>
    <DatePicker placeholder="select date" />
  </>
 );
-
-export default App;
 ```

-### TypeScript
-
-`antd` is written in TypeScript with complete definitions, check [Usage with create-react-app](https://ant.design/docs/react/use-with-create-react-app) to get started.
-
-## 🌍 Internationalization
-
-Dozens of languages are supported in `antd`, see [i18n](https://ant.design/docs/react/i18n).
-
 ## 🔗 Links

 - [Home page](https://ant.design/)
@ -146,6 +146,17 @@ Open your browser and visit http://127.0.0.1:8001 , see more at [Development](ht

 ## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

+<!-- Copy-paste in your Readme.md file -->
+
+<a href="https://next.ossinsight.io/widgets/official/compose-recent-active-contributors?repo_id=34526884&limit=30" target="_blank" style="display: block" align="center">
+  <picture>
+    <source media="(prefers-color-scheme: dark)" srcset="https://next.ossinsight.io/widgets/official/compose-recent-active-contributors/thumbnail.png?repo_id=34526884&limit=30&image_size=auto&color_scheme=dark" width="655" height="auto">
+    <img alt="Active Contributors of ant-design/ant-design - Last 28 days" src="https://next.ossinsight.io/widgets/official/compose-recent-active-contributors/thumbnail.png?repo_id=34526884&limit=30&image_size=auto&color_scheme=light" width="655" height="auto">
+  </picture>
+</a>
+
+<!-- Made with [OSS Insight](https://ossinsight.io/) -->
+
 Let's build a better antd together.

 We welcome all contributions. Please read our [Contributing Guide](https://ant.design/docs/react/contributing) first. You can submit any ideas as [Pull Requests](https://github.com/ant-design/ant-design/pulls) or as [GitHub Issues](https://github.com/ant-design/ant-design/issues). If you'd like to improve code, check out the [Development Instructions](https://github.com/ant-design/ant-design/wiki/Development) and have a good time! :)
--- a/antd-image-snapshots-main/README.md
+++ b/antd-image-snapshots-main/README.md
@ -0,0 +1 @@
+# antd-image-snapshots
--- a/components/button/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/button/tests/snapshots/demo-extend.test.ts.snap
@ -1942,6 +1942,39 @@ Array [

 exports[`renders components/button/demo/legacy-group.tsx extend context correctly 2`] = `[]`;

+exports[`renders components/button/demo/linear-gradient.tsx extend context correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Primary Button
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Default Button
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
+exports[`renders components/button/demo/linear-gradient.tsx extend context correctly 2`] = `[]`;
+
 exports[`renders components/button/demo/loading.tsx extend context correctly 1`] = `
 <div
  class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
--- a/components/button/tests/snapshots/demo.test.ts.snap
+++ b/components/button/tests/snapshots/demo.test.ts.snap
@ -1649,6 +1649,37 @@ Array [
 ]
 `;

+exports[`renders components/button/demo/linear-gradient.tsx correctly 1`] = `
+<div
+  class="ant-space ant-space-horizontal ant-space-align-center ant-space-gap-row-small ant-space-gap-col-small"
+>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-primary"
+      type="button"
+    >
+      <span>
+        Primary Button
+      </span>
+    </button>
+  </div>
+  <div
+    class="ant-space-item"
+  >
+    <button
+      class="ant-btn ant-btn-default"
+      type="button"
+    >
+      <span>
+        Default Button
+      </span>
+    </button>
+  </div>
+</div>
+`;
+
 exports[`renders components/button/demo/loading.tsx correctly 1`] = `
 <div
  class="ant-flex ant-flex-align-stretch ant-flex-gap-small ant-flex-vertical"
--- a/components/button/demo/linear-gradient.md
+++ b/components/button/demo/linear-gradient.md
@ -0,0 +1,7 @@
+## zh-CN
+
+自定义为渐变背景按钮。
+
+## en-US
+
+Buttons with gradient background.
--- a/components/button/demo/linear-gradient.tsx
+++ b/components/button/demo/linear-gradient.tsx
@ -0,0 +1,26 @@
+import React from 'react';
+import { Button, ConfigProvider, Space } from 'antd';
+
+const App: React.FC = () => (
+  <ConfigProvider
+    theme={{
+      components: {
+        Button: {
+          colorPrimary: 'linear-gradient(90deg, #FF4E50, #F9D423) !important',
+          primaryShadow: 'none',
+          defaultBg: 'linear-gradient(90deg, #aea4e3, #d3ffe8) !important',
+          defaultShadow: 'none',
+          defaultColor: '#fff !important',
+          lineWidth: 0,
+        },
+      },
+    }}
+  >
+    <Space>
+      <Button type="primary">Primary Button</Button>
+      <Button>Default Button</Button>
+    </Space>
+  </ConfigProvider>
+);
+
+export default App;
--- a/components/button/index.en-US.md
+++ b/components/button/index.en-US.md
@ -48,6 +48,7 @@ And 4 other properties additionally.
 <code src="./demo/legacy-group.tsx" debug>Deprecated Button Group</code>
 <code src="./demo/chinese-chars-loading.tsx" debug>Loading style bug</code>
 <code src="./demo/component-token.tsx" debug>Component Token</code>
+<code src="./demo/linear-gradient.tsx" debug>Gradient Button</code>

 ## API

--- a/components/button/index.zh-CN.md
+++ b/components/button/index.zh-CN.md
@ -51,6 +51,7 @@ group:
 <code src="./demo/legacy-group.tsx" debug>废弃的 Block 组</code>
 <code src="./demo/chinese-chars-loading.tsx" debug>加载中状态 bug 还原</code>
 <code src="./demo/component-token.tsx" debug>组件 Token</code>
+<code src="./demo/linear-gradient.tsx" debug>渐变按钮</code>

 ## API

--- a/components/button/style/index.ts
+++ b/components/button/style/index.ts
@ -171,7 +171,7 @@ const genSharedButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token): CSS
      whiteSpace: 'nowrap',
      textAlign: 'center',
      backgroundImage: 'none',
-      backgroundColor: 'transparent',
+      background: 'transparent',
      border: `${unit(token.lineWidth)} ${token.lineType} transparent`,
      cursor: 'pointer',
      transition: `all ${token.motionDurationMid} ${token.motionEaseInOut}`,
@ -258,7 +258,7 @@ const genDisabledStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
  cursor: 'not-allowed',
  borderColor: token.borderColorDisabled,
  color: token.colorTextDisabled,
-  backgroundColor: token.colorBgContainerDisabled,
+  background: token.colorBgContainerDisabled,
  boxShadow: 'none',
 });

@ -274,18 +274,18 @@ const genGhostButtonStyle = (
 ): CSSObject => ({
  [`&${btnCls}-background-ghost`]: {
    color: textColor || undefined,
-    backgroundColor: background,
+    background,
    borderColor: borderColor || undefined,
    boxShadow: 'none',

    ...genHoverActiveButtonStyle(
      btnCls,
      {
-        backgroundColor: background,
+        background,
        ...hoverStyle,
      },
      {
-        backgroundColor: background,
+        background,
        ...activeStyle,
      },
    ),
@ -319,7 +319,7 @@ const genPureDisabledButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token
 const genDefaultButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
  ...genSolidButtonStyle(token),

-  backgroundColor: token.defaultBg,
+  background: token.defaultBg,
  borderColor: token.defaultBorderColor,
  color: token.defaultColor,

@ -379,7 +379,7 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
  ...genSolidButtonStyle(token),

  color: token.primaryColor,
-  backgroundColor: token.colorPrimary,
+  background: token.colorPrimary,

  boxShadow: token.primaryShadow,

@ -387,11 +387,11 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
    token.componentCls,
    {
      color: token.colorTextLightSolid,
-      backgroundColor: token.colorPrimaryHover,
+      background: token.colorPrimaryHover,
    },
    {
      color: token.colorTextLightSolid,
-      backgroundColor: token.colorPrimaryActive,
+      background: token.colorPrimaryActive,
    },
  ),

@ -413,17 +413,17 @@ const genPrimaryButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) =>
  ),

  [`&${token.componentCls}-dangerous`]: {
-    backgroundColor: token.colorError,
+    background: token.colorError,
    boxShadow: token.dangerShadow,
    color: token.dangerColor,

    ...genHoverActiveButtonStyle(
      token.componentCls,
      {
-        backgroundColor: token.colorErrorHover,
+        background: token.colorErrorHover,
      },
      {
-        backgroundColor: token.colorErrorActive,
+        background: token.colorErrorActive,
      },
    ),

@ -461,7 +461,7 @@ const genLinkButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
    token.componentCls,
    {
      color: token.colorLinkHover,
-      backgroundColor: token.linkHoverBg,
+      background: token.linkHoverBg,
    },
    {
      color: token.colorLinkActive,
@ -493,11 +493,11 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
    token.componentCls,
    {
      color: token.colorText,
-      backgroundColor: token.textHoverBg,
+      background: token.textHoverBg,
    },
    {
      color: token.colorText,
-      backgroundColor: token.colorBgTextActive,
+      background: token.colorBgTextActive,
    },
  ),

@ -511,11 +511,11 @@ const genTextButtonStyle: GenerateStyle<ButtonToken, CSSObject> = (token) => ({
      token.componentCls,
      {
        color: token.colorErrorHover,
-        backgroundColor: token.colorErrorBg,
+        background: token.colorErrorBg,
      },
      {
        color: token.colorErrorHover,
-        backgroundColor: token.colorErrorBg,
+        background: token.colorErrorBg,
      },
    ),
  },
--- a/components/config-provider/tests/snapshots/components.test.tsx.snap
+++ b/components/config-provider/tests/snapshots/components.test.tsx.snap
@ -21734,7 +21734,7 @@ exports[`ConfigProvider components Progress configProvider 1`] = `
    >
      <div
        class="config-progress-bg"
-        style="width: 0%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
      />
    </div>
  </div>
@ -21762,7 +21762,7 @@ exports[`ConfigProvider components Progress configProvider componentDisabled 1`]
    >
      <div
        class="config-progress-bg"
-        style="width: 0%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
      />
    </div>
  </div>
@ -21790,7 +21790,7 @@ exports[`ConfigProvider components Progress configProvider componentSize large 1
    >
      <div
        class="config-progress-bg"
-        style="width: 0%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
      />
    </div>
  </div>
@ -21818,7 +21818,7 @@ exports[`ConfigProvider components Progress configProvider componentSize middle
    >
      <div
        class="config-progress-bg"
-        style="width: 0%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
      />
    </div>
  </div>
@ -21846,7 +21846,7 @@ exports[`ConfigProvider components Progress configProvider componentSize small 1
    >
      <div
        class="config-progress-bg"
-        style="width: 0%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
      />
    </div>
  </div>
@ -21874,7 +21874,7 @@ exports[`ConfigProvider components Progress normal 1`] = `
    >
      <div
        class="ant-progress-bg"
-        style="width: 0%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
      />
    </div>
  </div>
@ -21902,7 +21902,7 @@ exports[`ConfigProvider components Progress prefixCls 1`] = `
    >
      <div
        class="prefix-Progress-bg"
-        style="width: 0%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
      />
    </div>
  </div>
--- a/components/config-provider/tests/cssinjs.test.tsx
+++ b/components/config-provider/tests/cssinjs.test.tsx
@ -30,9 +30,7 @@ describe('ConfigProvider.DynamicTheme', () => {
    expect(
      dynamicStyles.some((style) => {
        const { innerHTML } = style;
-        return (
-          innerHTML.includes('.ant-btn-primary') && innerHTML.includes('background-color:#f00000')
-        );
+        return innerHTML.includes('.ant-btn-primary') && innerHTML.includes('background:#f00000');
      }),
    ).toBeTruthy();
  });
--- a/components/progress/Line.tsx
+++ b/components/progress/Line.tsx
@ -5,6 +5,8 @@ import { devUseWarning } from '../_util/warning';
 import type { DirectionType } from '../config-provider';
 import type { ProgressGradient, ProgressProps, StringGradients } from './progress';
 import { getSize, getSuccessPercent, validProgress } from './utils';
+import { useContext } from 'react';
+import { ConfigContext } from '../config-provider';

 interface LineProps extends ProgressProps {
  prefixCls: string;
@ -82,6 +84,8 @@ const Line: React.FC<LineProps> = (props) => {
    success,
  } = props;

+  const { direction } = useContext(ConfigContext);
+
  const backgroundProps: React.CSSProperties =
    strokeColor && typeof strokeColor !== 'string'
      ? handleGradient(strokeColor, directionConfig)
@ -105,18 +109,26 @@ const Line: React.FC<LineProps> = (props) => {
  }

  const percentStyle: React.CSSProperties = {
-    width: `${validProgress(percent)}%`,
+    width: `100%`,
    height,
    borderRadius,
+    clipPath:
+      direction === 'rtl'
+        ? `inset(0 0 0 ${100 - validProgress(percent)}% round 100px)`
+        : `inset(0 ${100 - validProgress(percent)}% 0 0 round 100px)`,
    ...backgroundProps,
  };

  const successPercent = getSuccessPercent(props);

  const successPercentStyle: React.CSSProperties = {
-    width: `${validProgress(successPercent)}%`,
+    width: `100%`,
    height,
    borderRadius,
+    clipPath:
+      direction === 'rtl'
+        ? `inset(0 0 0 ${100 - validProgress(successPercent)}% round 100px)`
+        : `inset(0 ${100 - validProgress(successPercent)}% 0 0 round 100px)`,
    backgroundColor: success?.strokeColor,
  };

--- a/components/progress/tests/snapshots/demo-extend.test.ts.snap
+++ b/components/progress/tests/snapshots/demo-extend.test.ts.snap
@ -533,7 +533,7 @@ Array [
          >
            <div
              class="ant-progress-bg"
-              style="width: 50%; height: 8px;"
+              style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
            />
          </div>
        </div>
@ -562,7 +562,7 @@ Array [
          >
            <div
              class="ant-progress-bg"
-              style="width: 50%; height: 6px;"
+              style="width: 100%; height: 6px; clip-path: inset(0 50% 0 0 round 100px);"
            />
          </div>
        </div>
@ -591,7 +591,7 @@ Array [
          >
            <div
              class="ant-progress-bg"
-              style="width: 50%; height: 20px;"
+              style="width: 100%; height: 20px; clip-path: inset(0 50% 0 0 round 100px);"
            />
          </div>
        </div>
@ -1275,7 +1275,7 @@ Array [
        >
          <div
            class="ant-progress-bg"
-            style="width: 0%; height: 8px;"
+            style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
          />
        </div>
      </div>
@ -1547,7 +1547,7 @@ exports[`renders components/progress/demo/gradient-line.tsx extend context corre
      >
        <div
          class="ant-progress-bg"
-          style="width: 99.9%; height: 8px;"
+          style="width: 100%; height: 8px; clip-path: inset(0 0.09999999999999432% 0 0 round 100px);"
        />
      </div>
    </div>
@ -1559,7 +1559,7 @@ exports[`renders components/progress/demo/gradient-line.tsx extend context corre
    </span>
  </div>
  <div
-    aria-valuenow="99"
+    aria-valuenow="50"
    class="ant-progress ant-progress-status-active ant-progress-line ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -1572,15 +1572,15 @@ exports[`renders components/progress/demo/gradient-line.tsx extend context corre
      >
        <div
          class="ant-progress-bg"
-          style="width: 99.9%; height: 8px;"
+          style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
        />
      </div>
    </div>
    <span
      class="ant-progress-text"
-      title="99.9%"
+      title="50%"
    >
-      99.9%
+      50%
    </span>
  </div>
  <div
@ -2104,7 +2104,7 @@ Array [
      >
        <div
          class="ant-progress-bg"
-          style="width: 30%; height: 8px;"
+          style="width: 100%; height: 8px; clip-path: inset(0 70% 0 0 round 100px);"
        />
      </div>
    </div>
@ -2129,7 +2129,7 @@ Array [
      >
        <div
          class="ant-progress-bg"
-          style="width: 50%; height: 8px;"
+          style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
        />
      </div>
    </div>
@ -2154,7 +2154,7 @@ Array [
      >
        <div
          class="ant-progress-bg"
-          style="width: 70%; height: 8px;"
+          style="width: 100%; height: 8px; clip-path: inset(0 30% 0 0 round 100px);"
        />
      </div>
    </div>
@ -2197,7 +2197,7 @@ Array [
      >
        <div
          class="ant-progress-bg"
-          style="width: 100%; height: 8px;"
+          style="width: 100%; height: 8px; clip-path: inset(0 0% 0 0 round 100px);"
        />
      </div>
    </div>
@ -2239,7 +2239,7 @@ Array [
      >
        <div
          class="ant-progress-bg"
-          style="width: 50%; height: 8px;"
+          style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
        />
      </div>
    </div>
@ -2267,7 +2267,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
      >
        <div
          class="ant-progress-bg"
-          style="width: 30%; height: 6px;"
+          style="width: 100%; height: 6px; clip-path: inset(0 70% 0 0 round 100px);"
        />
      </div>
    </div>
@ -2292,7 +2292,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
      >
        <div
          class="ant-progress-bg"
-          style="width: 50%; height: 6px;"
+          style="width: 100%; height: 6px; clip-path: inset(0 50% 0 0 round 100px);"
        />
      </div>
    </div>
@ -2317,7 +2317,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
      >
        <div
          class="ant-progress-bg"
-          style="width: 70%; height: 6px;"
+          style="width: 100%; height: 6px; clip-path: inset(0 30% 0 0 round 100px);"
        />
      </div>
    </div>
@ -2360,7 +2360,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
      >
        <div
          class="ant-progress-bg"
-          style="width: 100%; height: 6px;"
+          style="width: 100%; height: 6px; clip-path: inset(0 0% 0 0 round 100px);"
        />
      </div>
    </div>
@ -2410,7 +2410,7 @@ Array [
      >
        <div
          class="ant-progress-bg"
-          style="width: 75%; height: 8px; border-radius: 0;"
+          style="width: 100%; height: 8px; border-radius: 0; clip-path: inset(0 25% 0 0 round 100px);"
        />
      </div>
    </div>
@ -2559,11 +2559,11 @@ Array [
      >
        <div
          class="ant-progress-bg"
-          style="width: 60%; height: 8px;"
+          style="width: 100%; height: 8px; clip-path: inset(0 40% 0 0 round 100px);"
        />
        <div
          class="ant-progress-success-bg"
-          style="width: 30%; height: 8px;"
+          style="width: 100%; height: 8px; clip-path: inset(0 70% 0 0 round 100px);"
        />
      </div>
    </div>
@ -2775,7 +2775,7 @@ Array [
          >
            <div
              class="ant-progress-bg"
-              style="width: 50%; height: 8px;"
+              style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
            />
          </div>
        </div>
@ -2804,7 +2804,7 @@ Array [
          >
            <div
              class="ant-progress-bg"
-              style="width: 50%; height: 6px;"
+              style="width: 100%; height: 6px; clip-path: inset(0 50% 0 0 round 100px);"
            />
          </div>
        </div>
@ -2833,7 +2833,7 @@ Array [
          >
            <div
              class="ant-progress-bg"
-              style="width: 50%; height: 20px;"
+              style="width: 100%; height: 20px; clip-path: inset(0 50% 0 0 round 100px);"
            />
          </div>
        </div>
--- a/components/progress/tests/snapshots/demo.test.ts.snap
+++ b/components/progress/tests/snapshots/demo.test.ts.snap
@ -503,7 +503,7 @@ Array [
          >
            <div
              class="ant-progress-bg"
-              style="width:50%;height:8px"
+              style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)"
            />
          </div>
        </div>
@ -532,7 +532,7 @@ Array [
          >
            <div
              class="ant-progress-bg"
-              style="width:50%;height:6px"
+              style="width:100%;height:6px;clip-path:inset(0 50% 0 0 round 100px)"
            />
          </div>
        </div>
@ -561,7 +561,7 @@ Array [
          >
            <div
              class="ant-progress-bg"
-              style="width:50%;height:20px"
+              style="width:100%;height:20px;clip-path:inset(0 50% 0 0 round 100px)"
            />
          </div>
        </div>
@ -1193,7 +1193,7 @@ Array [
        >
          <div
            class="ant-progress-bg"
-            style="width:0%;height:8px"
+            style="width:100%;height:8px;clip-path:inset(0 100% 0 0 round 100px)"
          />
        </div>
      </div>
@ -1461,7 +1461,7 @@ exports[`renders components/progress/demo/gradient-line.tsx correctly 1`] = `
      >
        <div
          class="ant-progress-bg"
-          style="width:99.9%;height:8px;background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
+          style="width:100%;height:8px;clip-path:inset(0 0.09999999999999432% 0 0 round 100px);background-image:linear-gradient(to right, #108ee9 0%, #87d068 100%)"
        />
      </div>
    </div>
@ -1473,7 +1473,7 @@ exports[`renders components/progress/demo/gradient-line.tsx correctly 1`] = `
    </span>
  </div>
  <div
-    aria-valuenow="99"
+    aria-valuenow="50"
    class="ant-progress ant-progress-status-active ant-progress-line ant-progress-show-info ant-progress-default"
    role="progressbar"
  >
@ -1486,15 +1486,15 @@ exports[`renders components/progress/demo/gradient-line.tsx correctly 1`] = `
      >
        <div
          class="ant-progress-bg"
-          style="width:99.9%;height:8px;background-image:linear-gradient(to right, #108ee9, #87d068)"
+          style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px);background-image:linear-gradient(to right, #108ee9, #87d068)"
        />
      </div>
    </div>
    <span
      class="ant-progress-text"
-      title="99.9%"
+      title="50%"
    >
-      99.9%
+      50%
    </span>
  </div>
  <div
@ -2016,7 +2016,7 @@ Array [
      >
        <div
          class="ant-progress-bg"
-          style="width:30%;height:8px"
+          style="width:100%;height:8px;clip-path:inset(0 70% 0 0 round 100px)"
        />
      </div>
    </div>
@ -2041,7 +2041,7 @@ Array [
      >
        <div
          class="ant-progress-bg"
-          style="width:50%;height:8px"
+          style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)"
        />
      </div>
    </div>
@ -2066,7 +2066,7 @@ Array [
      >
        <div
          class="ant-progress-bg"
-          style="width:70%;height:8px"
+          style="width:100%;height:8px;clip-path:inset(0 30% 0 0 round 100px)"
        />
      </div>
    </div>
@ -2109,7 +2109,7 @@ Array [
      >
        <div
          class="ant-progress-bg"
-          style="width:100%;height:8px"
+          style="width:100%;height:8px;clip-path:inset(0 0% 0 0 round 100px)"
        />
      </div>
    </div>
@ -2151,7 +2151,7 @@ Array [
      >
        <div
          class="ant-progress-bg"
-          style="width:50%;height:8px"
+          style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)"
        />
      </div>
    </div>
@ -2177,7 +2177,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
      >
        <div
          class="ant-progress-bg"
-          style="width:30%;height:6px"
+          style="width:100%;height:6px;clip-path:inset(0 70% 0 0 round 100px)"
        />
      </div>
    </div>
@ -2202,7 +2202,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
      >
        <div
          class="ant-progress-bg"
-          style="width:50%;height:6px"
+          style="width:100%;height:6px;clip-path:inset(0 50% 0 0 round 100px)"
        />
      </div>
    </div>
@ -2227,7 +2227,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
      >
        <div
          class="ant-progress-bg"
-          style="width:70%;height:6px"
+          style="width:100%;height:6px;clip-path:inset(0 30% 0 0 round 100px)"
        />
      </div>
    </div>
@ -2270,7 +2270,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
      >
        <div
          class="ant-progress-bg"
-          style="width:100%;height:6px"
+          style="width:100%;height:6px;clip-path:inset(0 0% 0 0 round 100px)"
        />
      </div>
    </div>
@ -2318,7 +2318,7 @@ Array [
      >
        <div
          class="ant-progress-bg"
-          style="width:75%;height:8px;border-radius:0"
+          style="width:100%;height:8px;border-radius:0;clip-path:inset(0 25% 0 0 round 100px)"
        />
      </div>
    </div>
@ -2465,11 +2465,11 @@ Array [
      >
        <div
          class="ant-progress-bg"
-          style="width:60%;height:8px"
+          style="width:100%;height:8px;clip-path:inset(0 40% 0 0 round 100px)"
        />
        <div
          class="ant-progress-success-bg"
-          style="width:30%;height:8px"
+          style="width:100%;height:8px;clip-path:inset(0 70% 0 0 round 100px)"
        />
      </div>
    </div>
@ -2622,7 +2622,7 @@ Array [
          >
            <div
              class="ant-progress-bg"
-              style="width:50%;height:8px"
+              style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)"
            />
          </div>
        </div>
@ -2651,7 +2651,7 @@ Array [
          >
            <div
              class="ant-progress-bg"
-              style="width:50%;height:6px"
+              style="width:100%;height:6px;clip-path:inset(0 50% 0 0 round 100px)"
            />
          </div>
        </div>
@ -2680,7 +2680,7 @@ Array [
          >
            <div
              class="ant-progress-bg"
-              style="width:50%;height:20px"
+              style="width:100%;height:20px;clip-path:inset(0 50% 0 0 round 100px)"
            />
          </div>
        </div>
--- a/components/progress/tests/snapshots/index.test.tsx.snap
+++ b/components/progress/tests/snapshots/index.test.tsx.snap
@ -180,11 +180,11 @@ exports[`Progress render format 1`] = `
    >
      <div
        class="ant-progress-bg"
-        style="width: 50%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
      />
      <div
        class="ant-progress-success-bg"
-        style="width: 10%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 90% 0 0 round 100px);"
      />
    </div>
  </div>
@ -212,7 +212,7 @@ exports[`Progress render negative progress 1`] = `
    >
      <div
        class="ant-progress-bg"
-        style="width: 0%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
      />
    </div>
  </div>
@ -240,11 +240,11 @@ exports[`Progress render negative successPercent 1`] = `
    >
      <div
        class="ant-progress-bg"
-        style="width: 50%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
      />
      <div
        class="ant-progress-success-bg"
-        style="width: 0%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
      />
    </div>
  </div>
@ -272,7 +272,7 @@ exports[`Progress render normal progress 1`] = `
    >
      <div
        class="ant-progress-bg"
-        style="width: 0%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
      />
    </div>
  </div>
@ -300,7 +300,7 @@ exports[`Progress render out-of-range progress 1`] = `
    >
      <div
        class="ant-progress-bg"
-        style="width: 100%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 0% 0 0 round 100px);"
      />
    </div>
  </div>
@ -345,7 +345,7 @@ exports[`Progress render out-of-range progress with info 1`] = `
    >
      <div
        class="ant-progress-bg"
-        style="width: 100%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 0% 0 0 round 100px);"
      />
    </div>
  </div>
@ -445,7 +445,7 @@ exports[`Progress render strokeColor 2`] = `
    >
      <div
        class="ant-progress-bg"
-        style="width: 50%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
      />
    </div>
  </div>
@ -473,7 +473,7 @@ exports[`Progress render strokeColor 3`] = `
    >
      <div
        class="ant-progress-bg"
-        style="width: 50%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);"
      />
    </div>
  </div>
@ -558,11 +558,11 @@ exports[`Progress render successColor progress 1`] = `
    >
      <div
        class="ant-progress-bg"
-        style="width: 60%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 40% 0 0 round 100px);"
      />
      <div
        class="ant-progress-success-bg"
-        style="width: 30%; height: 8px; background-color: rgb(255, 255, 255);"
+        style="width: 100%; height: 8px; clip-path: inset(0 70% 0 0 round 100px); background-color: rgb(255, 255, 255);"
      />
    </div>
  </div>
@ -701,7 +701,7 @@ exports[`Progress render trailColor progress 1`] = `
    >
      <div
        class="ant-progress-bg"
-        style="width: 0%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);"
      />
    </div>
  </div>
@ -729,7 +729,7 @@ exports[`Progress rtl render component should be rendered correctly in RTL direc
    >
      <div
        class="ant-progress-bg"
-        style="width: 0%; height: 8px;"
+        style="width: 100%; height: 8px; clip-path: inset(0 0 0 100% round 100px);"
      />
    </div>
  </div>
--- a/components/progress/demo/gradient-line.tsx
+++ b/components/progress/demo/gradient-line.tsx
@ -7,7 +7,7 @@ const conicColors = { '0%': '#87d068', '50%': '#ffe58f', '100%': '#ffccc7' };
 const App: React.FC = () => (
  <div style={{ display: 'flex', flexDirection: 'column', rowGap: 16 }}>
    <Progress percent={99.9} strokeColor={twoColors} />
-    <Progress percent={99.9} status="active" strokeColor={{ from: '#108ee9', to: '#87d068' }} />
+    <Progress percent={50} status="active" strokeColor={{ from: '#108ee9', to: '#87d068' }} />
    <Space wrap>
      <Progress type="circle" percent={90} strokeColor={twoColors} />
      <Progress type="circle" percent={100} strokeColor={twoColors} />
--- a/scripts/visual-regression-report.md
+++ b/scripts/visual-regression-report.md
@ -0,0 +1,5 @@
+| expected | actual | diff |
+| --- | --- | --- |
+| ![master image name](test/fixtures/4a.png) | ![pr image name](test/fixtures/4b.png) | ![diff](test/fixtures/4diff.png) |
+| ![master image name](test/fixtures/3a.png) | ![pr image name](test/fixtures/3b.png) | ![diff](test/fixtures/3diff.png) |
+| ![master image name](test/fixtures/6a.png) | ![pr image name](test/fixtures/6b.png) | ![diff](test/fixtures/6diff.png) |
--- a/visual-regression-report.md
+++ b/visual-regression-report.md