diff --git a/.changeset/famous-coats-watch.md b/.changeset/famous-coats-watch.md
new file mode 100644
index 00000000000..da355b50914
--- /dev/null
+++ b/.changeset/famous-coats-watch.md
@@ -0,0 +1,5 @@
+---
+"@razorpay/blade": patch
+---
+
+fix(ProgressBar): show percentage with decimal when using as meter
diff --git a/packages/blade/src/components/ProgressBar/ProgressBar.tsx b/packages/blade/src/components/ProgressBar/ProgressBar.tsx
index d4cf028513b..7caff5a83f2 100644
--- a/packages/blade/src/components/ProgressBar/ProgressBar.tsx
+++ b/packages/blade/src/components/ProgressBar/ProgressBar.tsx
@@ -166,7 +166,10 @@ const ProgressBar = ({
const isMeter = progressType === 'meter';
const isCircular = progressVariant === 'circular';
const progressValue = clamp(value, min, max);
- const percentageProgressValue = Math.floor(((progressValue - min) * 100) / (max - min));
+ const percentageValue = ((progressValue - min) * 100) / (max - min);
+ const percentageProgressValue = isMeter
+ ? parseFloat(percentageValue.toFixed(1))
+ : Math.floor(percentageValue);
const shouldShowPercentage = showPercentage && !isMeter && !isIndeterminate;
const accessibilityProps: Pick<
AccessibilityProps,
diff --git a/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.web.test.tsx b/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.web.test.tsx
index 60ea343ae2e..8697fb99555 100644
--- a/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.web.test.tsx
+++ b/packages/blade/src/components/ProgressBar/__tests__/ProgressBar.web.test.tsx
@@ -69,6 +69,14 @@ describe('', () => {
expect(getByRole('meter')).toBeTruthy();
});
+ it('should render meter variant of ProgressBar with decimal value', () => {
+ const { getByRole } = renderWithTheme(
+ ,
+ );
+
+ expect(getByRole('meter')).toHaveAttribute('aria-valuetext', '0.1');
+ });
+
colors.forEach((color) => {
it(`should render color=${color} ProgressBar`, () => {
const { container } = renderWithTheme();
diff --git a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap
index 56ea7f9906c..57b51afb95b 100644
--- a/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap
+++ b/packages/blade/src/components/ProgressBar/__tests__/__snapshots__/ProgressBar.web.test.tsx.snap
@@ -173,7 +173,7 @@ exports[` should render ProgressBar without label and percentage
aria-valuetext="50%"
class=""
data-blade-component="base-box"
- id="undefined-circular-43"
+ id="undefined-circular-45"
role="progressbar"
>
should render circular variant ProgressBar with default
aria-valuetext="20%"
class=""
data-blade-component="base-box"
- id="undefined-circular-32"
+ id="undefined-circular-34"
role="progressbar"
>
should render circular variant ProgressBar with large s
aria-valuetext="20%"
class=""
data-blade-component="base-box"
- id="undefined-circular-41"
+ id="undefined-circular-43"
role="progressbar"
>
should render circular variant ProgressBar with medium
aria-valuetext="20%"
class=""
data-blade-component="base-box"
- id="undefined-circular-39"
+ id="undefined-circular-41"
role="progressbar"
>
should render circular variant ProgressBar with small s
aria-valuetext="20%"
class=""
data-blade-component="base-box"
- id="undefined-circular-37"
+ id="undefined-circular-39"
role="progressbar"
>
should render color=information ProgressBar 1`] = `
aria-valuetext="20%"
class=""
data-blade-component="base-box"
- id="progress-linear-18"
+ id="progress-linear-20"
role="progressbar"
>
should render color=information ProgressBar 2`] = `
aria-valuetext="20%"
class=""
data-blade-component="base-box"
- id="progress-linear-47"
+ id="progress-linear-51"
role="progressbar"
>
should render color=negative ProgressBar 1`] = `
aria-valuetext="20%"
class=""
data-blade-component="base-box"
- id="progress-linear-20"
+ id="progress-linear-22"
role="progressbar"
>
should render color=negative ProgressBar 2`] = `
aria-valuetext="20%"
class=""
data-blade-component="base-box"
- id="progress-linear-49"
+ id="progress-linear-53"
role="progressbar"
>
should render color=neutral ProgressBar 1`] = `
aria-valuetext="20%"
class=""
data-blade-component="base-box"
- id="progress-linear-22"
+ id="progress-linear-24"
role="progressbar"
>
should render color=neutral ProgressBar 2`] = `
aria-valuetext="20%"
class=""
data-blade-component="base-box"
- id="progress-linear-51"
+ id="progress-linear-55"
role="progressbar"
>
should render color=notice ProgressBar 1`] = `
aria-valuetext="20%"
class=""
data-blade-component="base-box"
- id="progress-linear-24"
+ id="progress-linear-26"
role="progressbar"
>
should render color=notice ProgressBar 2`] = `
aria-valuetext="20%"
class=""
data-blade-component="base-box"
- id="progress-linear-53"
+ id="progress-linear-57"
role="progressbar"
>
should render color=positive ProgressBar 1`] = `
aria-valuetext="20%"
class=""
data-blade-component="base-box"
- id="progress-linear-26"
+ id="progress-linear-28"
role="progressbar"
>
should render color=positive ProgressBar 2`] = `
aria-valuetext="20%"
class=""
data-blade-component="base-box"
- id="progress-linear-55"
+ id="progress-linear-59"
role="progressbar"
>
should render meter variant of ProgressBar 2`] = `
aria-valuetext="70"
class=""
data-blade-component="base-box"
- id="meter-circular-45"
+ id="meter-circular-47"
role="meter"
>
should update the progress value appropriately 3`] = `
aria-valuetext="0%"
class=""
data-blade-component="base-box"
- id="undefined-circular-34"
+ id="undefined-circular-36"
role="progressbar"
>
should update the progress value appropriately 4`] = `
aria-valuetext="0%"
class=""
data-blade-component="base-box"
- id="undefined-circular-34"
+ id="undefined-circular-36"
role="progressbar"
>