[ProgressBar] Add animated prop

UNRELEASED.md

@@ -7,6 +7,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 ### Enhancements
 
 - Prevented `KeypressListener` attaching/detaching on every render ([#4173](https://github.com/Shopify/polaris-react/pull/4173))
+- Added `animated` prop in `ProgressBar` ([#4251](https://github.com/Shopify/polaris-react/pull/4251))
 
 ### Bug fixes
 

src/components/ProgressBar/ProgressBar.scss

@@ -58,16 +58,18 @@
 .Indicator {
   height: inherit;
   width: 0;
-  will-change: width;
   background-color: var(--p-progressbar-indicator);
-  animation: fillup duration(slowest) easing();
-  transition: width duration(slowest) easing();
 
   @media screen and (-ms-high-contrast: active) {
     border: progress-bar-height() solid
       ms-high-contrast-color('selected-text-background');
   }
 }
+.Animated {
+  will-change: width;
+  animation: fillup duration(slowest) easing();
+  transition: width duration(slowest) easing();
+}
 
 .Progress,
 .Label {

src/components/ProgressBar/ProgressBar.tsx

@@ -24,12 +24,18 @@ export interface ProgressBarProps {
    * @default 'highlight'
    */
   color?: Color;
+  /**
+   * Whether the fill animation is triggered
+   * @default 'true'
+   */
+  animated?: boolean;
 }
 
 export function ProgressBar({
   progress = 0,
   size = 'medium',
   color = 'highlight',
+  animated = true,
 }: ProgressBarProps) {
   const i18n = useI18n();
 
@@ -50,7 +56,10 @@ export function ProgressBar({
   return (
     <div className={className}>
       <progress className={styles.Progress} value={parsedProgress} max="100" />
-      <div className={styles.Indicator} style={{width: `${parsedProgress}%`}}>
+      <div
+        className={classNames(styles.Indicator, animated && styles.Animated)}
+        style={{width: `${parsedProgress}%`}}
+      >
         <span className={styles.Label}>{parsedProgress}%</span>
       </div>
     </div>

src/components/ProgressBar/README.md

@@ -54,6 +54,14 @@ Use the color option when you need to blend the progress bar in a context that c
 </div>
 ```
 
+### Non-animated progress bar
+
+Use the animated prop when you want to show a static progress bar.
+
+```jsx
+<ProgressBar progress={80} animated={false} />
+```
+
 ---
 
 ## Related components

src/components/ProgressBar/tests/ProgressBar.test.tsx

@@ -1,28 +1,44 @@
 import React from 'react';
-// eslint-disable-next-line no-restricted-imports
-import {mountWithAppProvider} from 'test-utilities/legacy';
+import {mountWithApp} from 'test-utilities';
 
 import {ProgressBar} from '../ProgressBar';
 
 describe('<ProgressBar />', () => {
   it('sets the progress element to 80 when the progress is 80', () => {
-    const progress = mountWithAppProvider(<ProgressBar progress={80} />);
-    expect(progress.find('progress').prop('value')).toBe(80);
+    const progress = mountWithApp(<ProgressBar progress={80} />);
+    expect(progress).toContainReactComponent('progress', {value: 80});
   });
 
   it('sets the progress element to 0 when the progress is negative', () => {
-    const progress = mountWithAppProvider(<ProgressBar progress={-40} />);
-    expect(progress.find('progress').prop('value')).toBe(0);
+    const progress = mountWithApp(<ProgressBar progress={-40} />);
+    expect(progress).toContainReactComponent('progress', {value: 0});
   });
 
   it('sets the progress element to 100 when the progress is greater than 100', () => {
-    const progress = mountWithAppProvider(<ProgressBar progress={120} />);
-    expect(progress.find('progress').prop('value')).toBe(100);
+    const progress = mountWithApp(<ProgressBar progress={120} />);
+    expect(progress).toContainReactComponent('progress', {value: 100});
   });
 
   it('sets the progress element to 0 when progress is not provided', () => {
-    const progress = mountWithAppProvider(<ProgressBar />);
-    expect(progress.find('progress').prop('value')).toBe(0);
+    const progress = mountWithApp(<ProgressBar />);
+    expect(progress).toContainReactComponent('progress', {value: 0});
+  });
+
+  describe('animated prop', () => {
+    it('sets the progress bar to include the Animated class by default', () => {
+      const progress = mountWithApp(<ProgressBar progress={20} />);
+      expect(progress).toContainReactComponent('div', {
+        className: 'Indicator Animated',
+      });
+    });
+    it('sets the progress bar to exclude the Animated class when animated is false', () => {
+      const progress = mountWithApp(
+        <ProgressBar animated={false} progress={20} />,
+      );
+      expect(progress).toContainReactComponent('div', {
+        className: 'Indicator',
+      });
+    });
   });
 
   describe('console.warn', () => {
@@ -46,7 +62,7 @@ describe('<ProgressBar />', () => {
     it('warns when a negative number is passed to progress in development', () => {
       process.env.NODE_ENV = 'development';
 
-      mountWithAppProvider(<ProgressBar progress={-1} />);
+      mountWithApp(<ProgressBar progress={-1} />);
 
       expect(warnSpy).toHaveBeenCalledWith(
         'Values passed to the progress prop shouldn’t be negative. Resetting -1 to 0.',
@@ -56,7 +72,7 @@ describe('<ProgressBar />', () => {
     it('warns when a number larger than 100 is passed to progress in development', () => {
       process.env.NODE_ENV = 'development';
 
-      mountWithAppProvider(<ProgressBar progress={101} />);
+      mountWithApp(<ProgressBar progress={101} />);
 
       expect(warnSpy).toHaveBeenCalledWith(
         'Values passed to the progress prop shouldn’t exceed 100. Setting 101 to 100.',