test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-12-02 03:59:01 +08:00
Code Issues Actions 84 Packages Projects Releases Wiki Activity

fix(Progress): StrokeLinecap style (#46551)

Browse Source
This commit is contained in:
ZN1996 2023-12-22 10:26:23 +08:00 committed by GitHub
parent 4bfdfdccdb
commit 142b4d7b4e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 8 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
components/progress/Line.tsx
View File

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

2
components/progress/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

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

2
components/progress/__tests__/__snapshots__/demo.test.ts.snap
View File

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