diff --git a/src/__screenshot_tests__/progress-bar-screenshot-test.tsx b/src/__screenshot_tests__/progress-bar-screenshot-test.tsx index 8649a31bcd..aa3debde66 100644 --- a/src/__screenshot_tests__/progress-bar-screenshot-test.tsx +++ b/src/__screenshot_tests__/progress-bar-screenshot-test.tsx @@ -3,7 +3,7 @@ import {openStoryPage, screen} from '../test-utils'; const COLORS = ['default', 'red']; test.each(COLORS)('ProgressBar - color={%s}', async (color) => { - await openStoryPage({id: 'components-progressbar--default', args: {color}}); + await openStoryPage({id: 'components-progress-bar--progress-bar-story', args: {color}}); const stepper = await screen.findByTestId('progress-bar'); diff --git a/src/progress-bar.tsx b/src/progress-bar.tsx index 97e8ae46f0..5bad5dbdb3 100644 --- a/src/progress-bar.tsx +++ b/src/progress-bar.tsx @@ -70,14 +70,9 @@ export const ProgressBarStepped: React.FC = ({ const [step, setStep] = React.useState(reverse ? steps : 0); const [isAnimating, setIsAnimating] = React.useState(false); - /** If reverse value changed, we reset the initial state of all the progress bars */ - const reverseValue = React.useRef(reverse); + /** If reverse or steps value changed, we reset the initial state of all the progress bars */ React.useEffect(() => { - const initialStep = reverse ? steps : 0; - if (reverseValue.current !== reverse) { - reverseValue.current = reverse; - setStep(initialStep); - } + setStep(reverse ? steps : 0); }, [reverse, steps]); React.useEffect(() => { @@ -108,8 +103,8 @@ export const ProgressBarStepped: React.FC = ({ {Array.from({length: steps}, (_, idx) => { return (