Skip to content

Commit 14f70c9

Browse files
snitin315snitin315
authored
fix: update circular progress percentage color (#2185)
1 parent b605d45 commit 14f70c9

File tree

5 files changed

+96
-23
lines changed

5 files changed

+96
-23
lines changed

‎.changeset/new-suns-turn.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@razorpay/blade": patch
3+
---
4+
5+
fix: update circular progress percentage color

‎packages/blade/src/components/ProgressBar/CircularProgressBar.web.tsx

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -19,13 +19,13 @@ import getBaseTextStyles from '~components/Typography/BaseText/getBaseTextStyles
1919

2020
const pulseKeyframes = keyframes`
2121
0% {
22-
opacity: 100;
22+
opacity: 1;
2323
}
2424
50% {
2525
opacity: 0.65;
2626
}
2727
100% {
28-
opacity: 100;
28+
opacity: 1;
2929
}
3030
`;
3131

@@ -60,10 +60,13 @@ const getPulseAnimationStyles = ({
6060

6161
const StyledSVGText = styled.text<Pick<TextProps<{ variant: 'body' }>, 'size' | 'weight'>>(
6262
({ theme, size, weight }) => {
63-
return getBaseTextStyles({
64-
theme,
65-
...getTextProps({ variant: 'body', size, weight }),
66-
});
63+
return {
64+
...getBaseTextStyles({
65+
theme,
66+
...getTextProps({ variant: 'body', size, weight }),
67+
}),
68+
fill: theme.colors.surface.text.gray.normal,
69+
};
6770
},
6871
);
6972

‎packages/blade/src/components/ProgressBar/ProgressBar.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -239,7 +239,7 @@ const ProgressBar = ({
239239
label={label}
240240
progressPercent={percentageProgressValue}
241241
isMeter={isMeter}
242-
showPercentage={shouldShowPercentage}
242+
showPercentage={showPercentage}
243243
backgroundColor={unfilledBackgroundColor as string}
244244
fillColor={filledBackgroundColor}
245245
pulseMotionDuration="duration.2xgentle"

‎packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.native.test.tsx.snap

Lines changed: 38 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3982,7 +3982,44 @@ exports[`<ProgressBar /> should render meter variant of ProgressBar 2`] = `
39823982
},
39833983
]
39843984
}
3985-
/>
3985+
>
3986+
<Text
3987+
accessible={true}
3988+
color="surface.text.gray.normal"
3989+
data-blade-component="text"
3990+
fontFamily="text"
3991+
fontSize={75}
3992+
fontStyle="normal"
3993+
fontWeight="semibold"
3994+
lineHeight={75}
3995+
marginTop="spacing.3"
3996+
style={
3997+
[
3998+
{
3999+
"color": "hsla(212, 39%, 16%, 1)",
4000+
"fontFamily": "Inter",
4001+
"fontSize": 12,
4002+
"fontStyle": "normal",
4003+
"fontWeight": "600",
4004+
"letterSpacing": 0,
4005+
"lineHeight": 18,
4006+
"marginBottom": 0,
4007+
"marginLeft": 0,
4008+
"marginRight": 0,
4009+
"marginTop": 8,
4010+
"paddingBottom": 0,
4011+
"paddingLeft": 0,
4012+
"paddingRight": 0,
4013+
"paddingTop": 0,
4014+
"textDecorationLine": "none",
4015+
},
4016+
]
4017+
}
4018+
>
4019+
70
4020+
%
4021+
</Text>
4022+
</View>
39864023
</View>
39874024
</View>
39884025
</View>

‎packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap

Lines changed: 43 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -153,8 +153,8 @@ exports[`<ProgressBar /> should render ProgressBar without label and percentage
153153
background-color: white;
154154
-webkit-transition: stroke-dashoffset 900ms cubic-bezier(0.5,0,0,1);
155155
transition: stroke-dashoffset 900ms cubic-bezier(0.5,0,0,1);
156-
-webkit-animation: IuWll-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
157-
animation: IuWll-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
156+
-webkit-animation: dorXNl-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
157+
animation: dorXNl-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
158158
}
159159
160160
<div>
@@ -308,8 +308,8 @@ exports[`<ProgressBar /> should render circular variant ProgressBar with default
308308
background-color: white;
309309
-webkit-transition: stroke-dashoffset 900ms cubic-bezier(0.5,0,0,1);
310310
transition: stroke-dashoffset 900ms cubic-bezier(0.5,0,0,1);
311-
-webkit-animation: IuWll-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
312-
animation: IuWll-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
311+
-webkit-animation: dorXNl-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
312+
animation: dorXNl-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
313313
}
314314
315315
<div>
@@ -468,6 +468,7 @@ exports[`<ProgressBar /> should render circular variant ProgressBar with large s
468468
letter-spacing: 0px;
469469
margin: 0;
470470
padding: 0;
471+
fill: hsla(212,39%,16%,1);
471472
}
472473
473474
.c2.c2.c2.c2.c2 {
@@ -477,8 +478,8 @@ exports[`<ProgressBar /> should render circular variant ProgressBar with large s
477478
background-color: white;
478479
-webkit-transition: stroke-dashoffset 900ms cubic-bezier(0.5,0,0,1);
479480
transition: stroke-dashoffset 900ms cubic-bezier(0.5,0,0,1);
480-
-webkit-animation: IuWll-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
481-
animation: IuWll-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
481+
-webkit-animation: dorXNl-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
482+
animation: dorXNl-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
482483
}
483484
484485
<div>
@@ -640,6 +641,7 @@ exports[`<ProgressBar /> should render circular variant ProgressBar with medium
640641
letter-spacing: 0px;
641642
margin: 0;
642643
padding: 0;
644+
fill: hsla(212,39%,16%,1);
643645
}
644646
645647
.c2.c2.c2.c2.c2 {
@@ -649,8 +651,8 @@ exports[`<ProgressBar /> should render circular variant ProgressBar with medium
649651
background-color: white;
650652
-webkit-transition: stroke-dashoffset 900ms cubic-bezier(0.5,0,0,1);
651653
transition: stroke-dashoffset 900ms cubic-bezier(0.5,0,0,1);
652-
-webkit-animation: IuWll-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
653-
animation: IuWll-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
654+
-webkit-animation: dorXNl-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
655+
animation: dorXNl-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
654656
}
655657
656658
<div>
@@ -822,8 +824,8 @@ exports[`<ProgressBar /> should render circular variant ProgressBar with small s
822824
background-color: white;
823825
-webkit-transition: stroke-dashoffset 900ms cubic-bezier(0.5,0,0,1);
824826
transition: stroke-dashoffset 900ms cubic-bezier(0.5,0,0,1);
825-
-webkit-animation: IuWll-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
826-
animation: IuWll-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
827+
-webkit-animation: dorXNl-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
828+
animation: dorXNl-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
827829
}
828830
829831
<div>
@@ -2948,6 +2950,24 @@ exports[`<ProgressBar /> should render meter variant of ProgressBar 2`] = `
29482950
align-items: center;
29492951
}
29502952
2953+
.c4.c4.c4.c4.c4 {
2954+
color: hsla(212,39%,16%,1);
2955+
font-family: "Inter","Inter Fallback Arial",Arial;
2956+
font-size: 0.75rem;
2957+
font-weight: 600;
2958+
font-style: normal;
2959+
-webkit-text-decoration-line: none;
2960+
text-decoration-line: none;
2961+
line-height: 1.125rem;
2962+
-webkit-letter-spacing: 0px;
2963+
-moz-letter-spacing: 0px;
2964+
-ms-letter-spacing: 0px;
2965+
letter-spacing: 0px;
2966+
margin: 0;
2967+
padding: 0;
2968+
margin-top: 8px;
2969+
}
2970+
29512971
.c2.c2.c2.c2.c2 {
29522972
height: 100%;
29532973
width: 100%;
@@ -3011,7 +3031,15 @@ exports[`<ProgressBar /> should render meter variant of ProgressBar 2`] = `
30113031
<div
30123032
class="c3"
30133033
data-blade-component="base-box"
3014-
/>
3034+
>
3035+
<p
3036+
class="c4"
3037+
data-blade-component="text"
3038+
>
3039+
70
3040+
%
3041+
</p>
3042+
</div>
30153043
</div>
30163044
</div>
30173045
</div>
@@ -3710,8 +3738,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 3`] = `
37103738
background-color: white;
37113739
-webkit-transition: stroke-dashoffset 900ms cubic-bezier(0.5,0,0,1);
37123740
transition: stroke-dashoffset 900ms cubic-bezier(0.5,0,0,1);
3713-
-webkit-animation: IuWll-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
3714-
animation: IuWll-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
3741+
-webkit-animation: dorXNl-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
3742+
animation: dorXNl-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
37153743
}
37163744
37173745
.c0.c0.c0.c0.c0 {
@@ -4020,8 +4048,8 @@ exports[`<ProgressBar /> should update the progress value appropriately 4`] = `
40204048
background-color: white;
40214049
-webkit-transition: stroke-dashoffset 900ms cubic-bezier(0.5,0,0,1);
40224050
transition: stroke-dashoffset 900ms cubic-bezier(0.5,0,0,1);
4023-
-webkit-animation: IuWll-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
4024-
animation: IuWll-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
4051+
-webkit-animation: dorXNl-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
4052+
animation: dorXNl-450290765 900ms cubic-bezier(0.5,0,0,1) infinite;
40254053
}
40264054
40274055
.c0.c0.c0.c0.c0 {

0 commit comments

Comments
 (0)