[ProgressBar] Add color prop

UNRELEASED.md

@@ -10,6 +10,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 - Add print styles to `Card`, `Heading`, `Layout`, `Layout.Section`, `Subheading`, `TextStyle` components ([#4142](https://github.com/Shopify/polaris-react/pull/4142))
 - Add `fullWidth` prop to `ColorPicker` so the color picker can take the full width ([#4152](https://github.com/Shopify/polaris-react/pull/4152))
 - Add `noScroll` prop to `Modal` which prevents modal contents from scrolling ([#4153](https://github.com/Shopify/polaris-react/pull/4153))
+- Added new `color` prop to ProgressBar ([#3415](https://github.com/Shopify/polaris-react/pull/3415))
 
 ### Bug fixes
 

src/components/ProgressBar/ProgressBar.scss

@@ -20,7 +20,7 @@
 .ProgressBar {
   overflow: hidden;
   width: 100%;
-  background-color: var(--p-surface-neutral);
+  background-color: var(--p-progressbar-background);
   border-radius: var(--p-border-radius-base);
 
   @media (forced-colors: active) {
@@ -40,11 +40,26 @@
   height: progress-bar-height(large);
 }
 
+.colorHighlight {
+  --p-progressbar-background: var(--p-surface-neutral);
+  --p-progressbar-indicator: var(--p-border-highlight);
+}
+
+.colorPrimary {
+  --p-progressbar-background: var(--p-surface-neutral);
+  --p-progressbar-indicator: var(--p-action-primary);
+}
+
+.colorSuccess {
+  --p-progressbar-background: var(--p-surface-neutral);
+  --p-progressbar-indicator: var(--p-border-success);
+}
+
 .Indicator {
   height: inherit;
   width: 0;
   will-change: width;
-  background-color: var(--p-border-highlight);
+  background-color: var(--p-progressbar-indicator);
   animation: fillup duration(slowest) easing();
   transition: width duration(slowest) easing();
 

src/components/ProgressBar/ProgressBar.tsx

@@ -6,6 +6,7 @@ import {useI18n} from '../../utilities/i18n';
 import styles from './ProgressBar.scss';
 
 type Size = 'small' | 'medium' | 'large';
+type Color = 'highlight' | 'primary' | 'success';
 
 export interface ProgressBarProps {
   /**
@@ -18,14 +19,24 @@ export interface ProgressBarProps {
    * @default 'medium'
    */
   size?: Size;
+  /**
+   * Color of progressbar
+   * @default 'highlight'
+   */
+  color?: Color;
 }
 
-export function ProgressBar({progress = 0, size = 'medium'}: ProgressBarProps) {
+export function ProgressBar({
+  progress = 0,
+  size = 'medium',
+  color = 'highlight',
+}: ProgressBarProps) {
   const i18n = useI18n();
 
   const className = classNames(
     styles.ProgressBar,
     size && styles[variationName('size', size)],
+    color && styles[variationName('color', color)],
   );
 
   const warningMessage = i18n.translate(

src/components/ProgressBar/README.md

@@ -42,6 +42,18 @@ Use the size option when you need to increase or decrease the visual weight of t
 <ProgressBar progress={40} size="small" />
 ```
 
+### Colored progress bars
+
+Use the color option when you need to blend the progress bar in a context that calls for it, such as a progress toward success or where it’s the primary focus.
+
+```jsx
+<div>
+  <ProgressBar progress={70} color="primary" />
+  <br />
+  <ProgressBar progress={30} color="success" />
+</div>
+```
+
 ---
 
 ## Related components