fix: line Progress gradient should be full width (#46209)

* fix: line Progress gradient should be full width

* chore: code clean

* chore: update snapshot

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>

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,
   };
 

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>

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>

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>

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