fix(Progress): StrokeLinecap style

ant-design · Dec 20, 2023 · 1458d88 · 1458d88
1 parent 5393d9c
commit 1458d88
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 6 deletions.
diff --git a/components/progress/Line.tsx b/components/progress/Line.tsx
@@ -108,14 +108,16 @@ const Line: React.FC<LineProps> = (props) => {
     warning.deprecated(!('strokeWidth' in props), 'strokeWidth', 'size');
   }
 
+  const percentBorderRadius = strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : '100px';
+
   const percentStyle: React.CSSProperties = {
     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)`,
+        ? `inset(0 0 0 ${100 - validProgress(percent)}% round ${percentBorderRadius})`
+        : `inset(0 ${100 - validProgress(percent)}% 0 0 round ${percentBorderRadius})`,
     ...backgroundProps,
   };
 
@@ -127,8 +129,8 @@ const Line: React.FC<LineProps> = (props) => {
     borderRadius,
     clipPath:
       direction === 'rtl'
-        ? `inset(0 0 0 ${100 - validProgress(successPercent)}% round 100px)`
-        : `inset(0 ${100 - validProgress(successPercent)}% 0 0 round 100px)`,
+        ? `inset(0 0 0 ${100 - validProgress(successPercent)}% round ${percentBorderRadius})`
+        : `inset(0 ${100 - validProgress(successPercent)}% 0 0 round ${percentBorderRadius})`,
     backgroundColor: success?.strokeColor,
   };
 

diff --git a/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap b/components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
@@ -2410,7 +2410,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width: 100%; height: 8px; border-radius: 0; clip-path: inset(0 25% 0 0 round 100px);"
+          style="width: 100%; height: 8px; border-radius: 0; clip-path: inset(0 25% 0 0 round 0);"
         />
       </div>
     </div>

diff --git a/components/progress/__tests__/__snapshots__/demo.test.ts.snap b/components/progress/__tests__/__snapshots__/demo.test.ts.snap
@@ -2318,7 +2318,7 @@ Array [
       >
         <div
           class="ant-progress-bg"
-          style="width:100%;height:8px;border-radius:0;clip-path:inset(0 25% 0 0 round 100px)"
+          style="width:100%;height:8px;border-radius:0;clip-path:inset(0 25% 0 0 round 0)"
         />
       </div>
     </div>