diff --git a/packages/react/src/progress/indicator/ProgressIndicator.test.tsx b/packages/react/src/progress/indicator/ProgressIndicator.test.tsx index 3c3b4bb9f8..ae1721bace 100644 --- a/packages/react/src/progress/indicator/ProgressIndicator.test.tsx +++ b/packages/react/src/progress/indicator/ProgressIndicator.test.tsx @@ -44,11 +44,28 @@ describe('', () => { const indicator = getByTestId('indicator'); expect(indicator).toHaveComputedStyle({ - left: '0px', + insetInlineStart: '0px', width: '33%', }); }); + it('sets zero width when value is 0', async () => { + const { getByTestId } = await render( + + + + + , + ); + + const indicator = getByTestId('indicator'); + + expect(indicator).toHaveComputedStyle({ + insetInlineStart: '0px', + width: '0%', + }); + }); + it('indeterminate', async () => { const { getByTestId } = await render( diff --git a/packages/react/src/progress/indicator/useProgressIndicator.ts b/packages/react/src/progress/indicator/useProgressIndicator.ts index 130af5aecc..d44ad728b7 100644 --- a/packages/react/src/progress/indicator/useProgressIndicator.ts +++ b/packages/react/src/progress/indicator/useProgressIndicator.ts @@ -15,7 +15,7 @@ function useProgressIndicator( Number.isFinite(value) && value !== null ? valueToPercent(value, min, max) : null; const getStyles = React.useCallback(() => { - if (!percentageValue) { + if (percentageValue == null) { return {}; }