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

refactor: Line Progress use pseudo (#46789)

Browse Source 
* refactor: Line Progress use pseudo

* chore: code clean

* chore: update snapshot
This commit is contained in:
MadCcc 2024-01-05 10:11:37 +08:00 committed by GitHub
parent 4304e7718c
commit 5ee391f191
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 102 additions and 94 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
components/config-provider/__tests__/__snapshots__/components.test.tsx.snap
View File

@ -21839,7 +21839,7 @@ exports[`ConfigProvider components Progress configProvider 1`] = `
> >
<div <div
class="config-progress-bg" class="config-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);" style="width: 0%; height: 8px; --progress-percent: 0;"
/> />
</div> </div>
</div> </div>
@ -21867,7 +21867,7 @@ exports[`ConfigProvider components Progress configProvider componentDisabled 1`]
> >
<div <div
class="config-progress-bg" class="config-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);" style="width: 0%; height: 8px; --progress-percent: 0;"
/> />
</div> </div>
</div> </div>
@ -21895,7 +21895,7 @@ exports[`ConfigProvider components Progress configProvider componentSize large 1
> >
<div <div
class="config-progress-bg" class="config-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);" style="width: 0%; height: 8px; --progress-percent: 0;"
/> />
</div> </div>
</div> </div>
@ -21923,7 +21923,7 @@ exports[`ConfigProvider components Progress configProvider componentSize middle
> >
<div <div
class="config-progress-bg" class="config-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);" style="width: 0%; height: 8px; --progress-percent: 0;"
/> />
</div> </div>
</div> </div>
@ -21951,7 +21951,7 @@ exports[`ConfigProvider components Progress configProvider componentSize small 1
> >
<div <div
class="config-progress-bg" class="config-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);" style="width: 0%; height: 8px; --progress-percent: 0;"
/> />
</div> </div>
</div> </div>
@ -21979,7 +21979,7 @@ exports[`ConfigProvider components Progress normal 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);" style="width: 0%; height: 8px; --progress-percent: 0;"
/> />
</div> </div>
</div> </div>
@ -22007,7 +22007,7 @@ exports[`ConfigProvider components Progress prefixCls 1`] = `
> >
<div <div
class="prefix-Progress-bg" class="prefix-Progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);" style="width: 0%; height: 8px; --progress-percent: 0;"
/> />
</div> </div>
</div> </div>

44
components/progress/Line.tsx
View File

@ -5,8 +5,7 @@ import { devUseWarning } from '../_util/warning';
import type { DirectionType } from '../config-provider'; import type { DirectionType } from '../config-provider';
import type { ProgressGradient, ProgressProps, StringGradients } from './progress'; import type { ProgressGradient, ProgressProps, StringGradients } from './progress';
import { getSize, getSuccessPercent, validProgress } from './utils'; import { getSize, getSuccessPercent, validProgress } from './utils';
import { useContext } from 'react'; import { LineStrokeColorVar, Percent } from './style';
import { ConfigContext } from '../config-provider';
interface LineProps extends ProgressProps { interface LineProps extends ProgressProps {
prefixCls: string; prefixCls: string;
@ -65,9 +64,11 @@ export const handleGradient = (
} = strokeColor; } = strokeColor;
if (Object.keys(rest).length !== 0) { if (Object.keys(rest).length !== 0) {
const sortedGradients = sortGradient(rest as StringGradients); const sortedGradients = sortGradient(rest as StringGradients);
return { backgroundImage: `linear-gradient(${direction}, ${sortedGradients})` }; const background = `linear-gradient(${direction}, ${sortedGradients})`;
return { background, [LineStrokeColorVar]: background } as React.CSSProperties;
} }
return { backgroundImage: `linear-gradient(${direction}, ${from}, ${to})` }; const background = `linear-gradient(${direction}, ${from}, ${to})`;
return { background, [LineStrokeColorVar]: background } as React.CSSProperties;
}; };
const Line: React.FC<LineProps> = (props) => { const Line: React.FC<LineProps> = (props) => {
@ -84,20 +85,13 @@ const Line: React.FC<LineProps> = (props) => {
success, success,
} = props; } = props;
const { direction } = useContext(ConfigContext); const backgroundProps =
const backgroundProps: React.CSSProperties =
strokeColor && typeof strokeColor !== 'string' strokeColor && typeof strokeColor !== 'string'
? handleGradient(strokeColor, directionConfig) ? handleGradient(strokeColor, directionConfig)
: { backgroundColor: strokeColor }; : { [LineStrokeColorVar]: strokeColor, background: strokeColor };
const borderRadius = strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : undefined; const borderRadius = strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : undefined;
const trailStyle: React.CSSProperties = {
backgroundColor: trailColor || undefined,
borderRadius,
};
const mergedSize = size ?? [-1, strokeWidth || (size === 'small' ? 6 : 8)]; const mergedSize = size ?? [-1, strokeWidth || (size === 'small' ? 6 : 8)];
const [width, height] = getSize(mergedSize, 'line', { strokeWidth }); const [width, height] = getSize(mergedSize, 'line', { strokeWidth });
@ -108,31 +102,27 @@ const Line: React.FC<LineProps> = (props) => {
warning.deprecated(!('strokeWidth' in props), 'strokeWidth', 'size'); warning.deprecated(!('strokeWidth' in props), 'strokeWidth', 'size');
} }
const percentBorderRadius = strokeLinecap === 'square' || strokeLinecap === 'butt' ? 0 : '100px'; const trailStyle: React.CSSProperties = {
backgroundColor: trailColor || undefined,
borderRadius,
};
const percentStyle: React.CSSProperties = { const percentStyle = {
width: `100%`, width: `${validProgress(percent)}%`,
height, height,
borderRadius, borderRadius,
clipPath:
direction === 'rtl'
? `inset(0 0 0 ${100 - validProgress(percent)}% round ${percentBorderRadius})`
: `inset(0 ${100 - validProgress(percent)}% 0 0 round ${percentBorderRadius})`,
...backgroundProps, ...backgroundProps,
[Percent]: validProgress(percent) / 100,
}; };
const successPercent = getSuccessPercent(props); const successPercent = getSuccessPercent(props);
const successPercentStyle: React.CSSProperties = { const successPercentStyle = {
width: `100%`, width: `${validProgress(successPercent)}%`,
height, height,
borderRadius, borderRadius,
clipPath:
direction === 'rtl'
? `inset(0 0 0 ${100 - validProgress(successPercent)}% round ${percentBorderRadius})`
: `inset(0 ${100 - validProgress(successPercent)}% 0 0 round ${percentBorderRadius})`,
backgroundColor: success?.strokeColor, backgroundColor: success?.strokeColor,
}; } as React.CSSProperties;
const outerStyle: React.CSSProperties = { const outerStyle: React.CSSProperties = {
width: width < 0 ? '100%' : width, width: width < 0 ? '100%' : width,

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

@ -533,7 +533,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);" style="width: 50%; height: 8px; --progress-percent: 0.5;"
/> />
</div> </div>
</div> </div>
@ -562,7 +562,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 6px; clip-path: inset(0 50% 0 0 round 100px);" style="width: 50%; height: 6px; --progress-percent: 0.5;"
/> />
</div> </div>
</div> </div>
@ -591,7 +591,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 20px; clip-path: inset(0 50% 0 0 round 100px);" style="width: 50%; height: 20px; --progress-percent: 0.5;"
/> />
</div> </div>
</div> </div>
@ -1275,7 +1275,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);" style="width: 0%; height: 8px; --progress-percent: 0;"
/> />
</div> </div>
</div> </div>
@ -1547,7 +1547,7 @@ exports[`renders components/progress/demo/gradient-line.tsx extend context corre
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 0.09999999999999432% 0 0 round 100px);" style="width: 99.9%; height: 8px; --progress-line-stroke-color: linear-gradient(to right, #108ee9 0%, #87d068 100%); --progress-percent: 0.9990000000000001;"
/> />
</div> </div>
</div> </div>
@ -1572,7 +1572,7 @@ exports[`renders components/progress/demo/gradient-line.tsx extend context corre
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);" style="width: 50%; height: 8px; --progress-line-stroke-color: linear-gradient(to right, #108ee9, #87d068); --progress-percent: 0.5;"
/> />
</div> </div>
</div> </div>
@ -2104,7 +2104,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 70% 0 0 round 100px);" style="width: 30%; height: 8px; --progress-percent: 0.3;"
/> />
</div> </div>
</div> </div>
@ -2129,7 +2129,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);" style="width: 50%; height: 8px; --progress-percent: 0.5;"
/> />
</div> </div>
</div> </div>
@ -2154,7 +2154,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 30% 0 0 round 100px);" style="width: 70%; height: 8px; --progress-percent: 0.7;"
/> />
</div> </div>
</div> </div>
@ -2197,7 +2197,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 0% 0 0 round 100px);" style="width: 100%; height: 8px; --progress-percent: 1;"
/> />
</div> </div>
</div> </div>
@ -2239,7 +2239,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);" style="width: 50%; height: 8px; --progress-percent: 0.5;"
/> />
</div> </div>
</div> </div>
@ -2267,7 +2267,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 6px; clip-path: inset(0 70% 0 0 round 100px);" style="width: 30%; height: 6px; --progress-percent: 0.3;"
/> />
</div> </div>
</div> </div>
@ -2292,7 +2292,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 6px; clip-path: inset(0 50% 0 0 round 100px);" style="width: 50%; height: 6px; --progress-percent: 0.5;"
/> />
</div> </div>
</div> </div>
@ -2317,7 +2317,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 6px; clip-path: inset(0 30% 0 0 round 100px);" style="width: 70%; height: 6px; --progress-percent: 0.7;"
/> />
</div> </div>
</div> </div>
@ -2360,7 +2360,7 @@ exports[`renders components/progress/demo/line-mini.tsx extend context correctly
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 6px; clip-path: inset(0 0% 0 0 round 100px);" style="width: 100%; height: 6px; --progress-percent: 1;"
/> />
</div> </div>
</div> </div>
@ -2410,7 +2410,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; border-radius: 0; clip-path: inset(0 25% 0 0 round 0);" style="width: 75%; height: 8px; border-radius: 0; --progress-percent: 0.75;"
/> />
</div> </div>
</div> </div>
@ -2559,11 +2559,11 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 40% 0 0 round 100px);" style="width: 60%; height: 8px; --progress-percent: 0.6;"
/> />
<div <div
class="ant-progress-success-bg" class="ant-progress-success-bg"
style="width: 100%; height: 8px; clip-path: inset(0 70% 0 0 round 100px);" style="width: 30%; height: 8px;"
/> />
</div> </div>
</div> </div>
@ -2775,7 +2775,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);" style="width: 50%; height: 8px; --progress-percent: 0.5;"
/> />
</div> </div>
</div> </div>
@ -2804,7 +2804,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 6px; clip-path: inset(0 50% 0 0 round 100px);" style="width: 50%; height: 6px; --progress-percent: 0.5;"
/> />
</div> </div>
</div> </div>
@ -2833,7 +2833,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 20px; clip-path: inset(0 50% 0 0 round 100px);" style="width: 50%; height: 20px; --progress-percent: 0.5;"
/> />
</div> </div>
</div> </div>

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

@ -503,7 +503,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)" style="width:50%;height:8px;--progress-percent:0.5"
/> />
</div> </div>
</div> </div>
@ -532,7 +532,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:6px;clip-path:inset(0 50% 0 0 round 100px)" style="width:50%;height:6px;--progress-percent:0.5"
/> />
</div> </div>
</div> </div>
@ -561,7 +561,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:20px;clip-path:inset(0 50% 0 0 round 100px)" style="width:50%;height:20px;--progress-percent:0.5"
/> />
</div> </div>
</div> </div>
@ -1193,7 +1193,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:8px;clip-path:inset(0 100% 0 0 round 100px)" style="width:0%;height:8px;--progress-percent:0"
/> />
</div> </div>
</div> </div>
@ -1461,7 +1461,7 @@ exports[`renders components/progress/demo/gradient-line.tsx correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
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%)" style="width:99.9%;height:8px;background:linear-gradient(to right, #108ee9 0%, #87d068 100%);--progress-line-stroke-color:linear-gradient(to right, #108ee9 0%, #87d068 100%);--progress-percent:0.9990000000000001"
/> />
</div> </div>
</div> </div>
@ -1486,7 +1486,7 @@ exports[`renders components/progress/demo/gradient-line.tsx correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px);background-image:linear-gradient(to right, #108ee9, #87d068)" style="width:50%;height:8px;background:linear-gradient(to right, #108ee9, #87d068);--progress-line-stroke-color:linear-gradient(to right, #108ee9, #87d068);--progress-percent:0.5"
/> />
</div> </div>
</div> </div>
@ -2016,7 +2016,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:8px;clip-path:inset(0 70% 0 0 round 100px)" style="width:30%;height:8px;--progress-percent:0.3"
/> />
</div> </div>
</div> </div>
@ -2041,7 +2041,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)" style="width:50%;height:8px;--progress-percent:0.5"
/> />
</div> </div>
</div> </div>
@ -2066,7 +2066,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:8px;clip-path:inset(0 30% 0 0 round 100px)" style="width:70%;height:8px;--progress-percent:0.7"
/> />
</div> </div>
</div> </div>
@ -2109,7 +2109,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:8px;clip-path:inset(0 0% 0 0 round 100px)" style="width:100%;height:8px;--progress-percent:1"
/> />
</div> </div>
</div> </div>
@ -2151,7 +2151,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)" style="width:50%;height:8px;--progress-percent:0.5"
/> />
</div> </div>
</div> </div>
@ -2177,7 +2177,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:6px;clip-path:inset(0 70% 0 0 round 100px)" style="width:30%;height:6px;--progress-percent:0.3"
/> />
</div> </div>
</div> </div>
@ -2202,7 +2202,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:6px;clip-path:inset(0 50% 0 0 round 100px)" style="width:50%;height:6px;--progress-percent:0.5"
/> />
</div> </div>
</div> </div>
@ -2227,7 +2227,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:6px;clip-path:inset(0 30% 0 0 round 100px)" style="width:70%;height:6px;--progress-percent:0.7"
/> />
</div> </div>
</div> </div>
@ -2270,7 +2270,7 @@ exports[`renders components/progress/demo/line-mini.tsx correctly 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:6px;clip-path:inset(0 0% 0 0 round 100px)" style="width:100%;height:6px;--progress-percent:1"
/> />
</div> </div>
</div> </div>
@ -2318,7 +2318,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:8px;border-radius:0;clip-path:inset(0 25% 0 0 round 0)" style="width:75%;height:8px;border-radius:0;--progress-percent:0.75"
/> />
</div> </div>
</div> </div>
@ -2465,11 +2465,11 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:8px;clip-path:inset(0 40% 0 0 round 100px)" style="width:60%;height:8px;--progress-percent:0.6"
/> />
<div <div
class="ant-progress-success-bg" class="ant-progress-success-bg"
style="width:100%;height:8px;clip-path:inset(0 70% 0 0 round 100px)" style="width:30%;height:8px"
/> />
</div> </div>
</div> </div>
@ -2622,7 +2622,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:8px;clip-path:inset(0 50% 0 0 round 100px)" style="width:50%;height:8px;--progress-percent:0.5"
/> />
</div> </div>
</div> </div>
@ -2651,7 +2651,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:6px;clip-path:inset(0 50% 0 0 round 100px)" style="width:50%;height:6px;--progress-percent:0.5"
/> />
</div> </div>
</div> </div>
@ -2680,7 +2680,7 @@ Array [
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width:100%;height:20px;clip-path:inset(0 50% 0 0 round 100px)" style="width:50%;height:20px;--progress-percent:0.5"
/> />
</div> </div>
</div> </div>

28
components/progress/__tests__/__snapshots__/index.test.tsx.snap
View File

@ -180,11 +180,11 @@ exports[`Progress render format 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);" style="width: 50%; height: 8px; --progress-percent: 0.5;"
/> />
<div <div
class="ant-progress-success-bg" class="ant-progress-success-bg"
style="width: 100%; height: 8px; clip-path: inset(0 90% 0 0 round 100px);" style="width: 10%; height: 8px;"
/> />
</div> </div>
</div> </div>
@ -212,7 +212,7 @@ exports[`Progress render negative progress 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);" style="width: 0%; height: 8px; --progress-percent: 0;"
/> />
</div> </div>
</div> </div>
@ -240,11 +240,11 @@ exports[`Progress render negative successPercent 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);" style="width: 50%; height: 8px; --progress-percent: 0.5;"
/> />
<div <div
class="ant-progress-success-bg" class="ant-progress-success-bg"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);" style="width: 0%; height: 8px;"
/> />
</div> </div>
</div> </div>
@ -272,7 +272,7 @@ exports[`Progress render normal progress 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);" style="width: 0%; height: 8px; --progress-percent: 0;"
/> />
</div> </div>
</div> </div>
@ -300,7 +300,7 @@ exports[`Progress render out-of-range progress 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 0% 0 0 round 100px);" style="width: 100%; height: 8px; --progress-percent: 1;"
/> />
</div> </div>
</div> </div>
@ -345,7 +345,7 @@ exports[`Progress render out-of-range progress with info 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 0% 0 0 round 100px);" style="width: 100%; height: 8px; --progress-percent: 1;"
/> />
</div> </div>
</div> </div>
@ -445,7 +445,7 @@ exports[`Progress render strokeColor 2`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);" style="width: 50%; height: 8px; --progress-line-stroke-color: linear-gradient(to right, #108ee9, #87d068); --progress-percent: 0.5;"
/> />
</div> </div>
</div> </div>
@ -473,7 +473,7 @@ exports[`Progress render strokeColor 3`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 50% 0 0 round 100px);" style="width: 50%; height: 8px; --progress-line-stroke-color: linear-gradient(to right, #108ee9 0%, #87d068 100%); --progress-percent: 0.5;"
/> />
</div> </div>
</div> </div>
@ -558,11 +558,11 @@ exports[`Progress render successColor progress 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 40% 0 0 round 100px);" style="width: 60%; height: 8px; --progress-percent: 0.6;"
/> />
<div <div
class="ant-progress-success-bg" class="ant-progress-success-bg"
style="width: 100%; height: 8px; clip-path: inset(0 70% 0 0 round 100px); background-color: rgb(255, 255, 255);" style="width: 30%; height: 8px; background-color: rgb(255, 255, 255);"
/> />
</div> </div>
</div> </div>
@ -701,7 +701,7 @@ exports[`Progress render trailColor progress 1`] = `
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 100% 0 0 round 100px);" style="width: 0%; height: 8px; --progress-percent: 0;"
/> />
</div> </div>
</div> </div>
@ -729,7 +729,7 @@ exports[`Progress rtl render component should be rendered correctly in RTL direc
> >
<div <div
class="ant-progress-bg" class="ant-progress-bg"
style="width: 100%; height: 8px; clip-path: inset(0 0 0 100% round 100px);" style="width: 0%; height: 8px; --progress-percent: 0;"
/> />
</div> </div>
</div> </div>

6
components/progress/__tests__/index.test.tsx
View File

@ -137,11 +137,11 @@ describe('Progress', () => {
}); });
it('get correct line-gradient', () => { it('get correct line-gradient', () => {
expect(handleGradient({ from: 'test', to: 'test' }).backgroundImage).toBe( expect(handleGradient({ from: 'test', to: 'test' }).background).toBe(
'linear-gradient(to right, test, test)', 'linear-gradient(to right, test, test)',
); );
expect(handleGradient({}).backgroundImage).toBe('linear-gradient(to right, #1677FF, #1677FF)'); expect(handleGradient({}).background).toBe('linear-gradient(to right, #1677FF, #1677FF)');
expect(handleGradient({ from: 'test', to: 'test', '0%': 'test' }).backgroundImage).toBe( expect(handleGradient({ from: 'test', to: 'test', '0%': 'test' }).background).toBe(
'linear-gradient(to right, test 0%)', 'linear-gradient(to right, test 0%)',
); );
}); });

20
components/progress/style/index.ts
View File

@ -37,6 +37,9 @@ export interface ComponentToken {
circleIconFontSize: string; circleIconFontSize: string;
} }
export const LineStrokeColorVar = '--progress-line-stroke-color';
export const Percent = '--progress-percent';
interface ProgressToken extends FullToken<'Progress'> { interface ProgressToken extends FullToken<'Progress'> {
progressStepMinWidth: number | string; progressStepMinWidth: number | string;
progressStepMarginInlineEnd: number | string; progressStepMarginInlineEnd: number | string;
@ -112,11 +115,26 @@ const genBaseStyle: GenerateStyle<ProgressToken> = (token) => {
[`${progressCls}-success-bg, ${progressCls}-bg`]: { [`${progressCls}-success-bg, ${progressCls}-bg`]: {
position: 'relative', position: 'relative',
backgroundColor: token.defaultColor, background: token.defaultColor,
borderRadius: token.lineBorderRadius, borderRadius: token.lineBorderRadius,
transition: `all ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`, transition: `all ${token.motionDurationSlow} ${token.motionEaseInOutCirc}`,
}, },
[`${progressCls}-bg`]: {
overflow: 'hidden',
'&::after': {
content: '""',
background: {
_multi_value_: true,
value: ['inherit', `var(${LineStrokeColorVar})`],
},
height: '100%',
width: `calc(1 / var(${Percent}) * 100%)`,
display: 'block',
},
},
[`${progressCls}-success-bg`]: { [`${progressCls}-success-bg`]: {
position: 'absolute', position: 'absolute',
insetBlockStart: 0, insetBlockStart: 0,