From 301dfe73234d51a94ba090b20fe210696ddd4999 Mon Sep 17 00:00:00 2001
From: Kaelig <kaelig.deloumeauprigent@shopify.com>
Date: Wed, 7 Oct 2020 13:36:28 -0700
Subject: [PATCH 1/3] Add color prop to progress bar

---
 UNRELEASED.md                               |  2 ++
 src/components/ProgressBar/ProgressBar.scss | 22 +++++++++++++++++++--
 src/components/ProgressBar/ProgressBar.tsx  | 13 +++++++++++-
 src/components/ProgressBar/README.md        | 12 +++++++++++
 4 files changed, 46 insertions(+), 3 deletions(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index fa215e7a761..3120ec80f6f 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -8,6 +8,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
+- Added new `color` prop to ProgressBar
+
 ### Bug fixes
 
 ### Documentation
diff --git a/src/components/ProgressBar/ProgressBar.scss b/src/components/ProgressBar/ProgressBar.scss
index cf098bc8989..1c46caa25b2 100644
--- a/src/components/ProgressBar/ProgressBar.scss
+++ b/src/components/ProgressBar/ProgressBar.scss
@@ -20,7 +20,7 @@
 .ProgressBar {
   overflow: hidden;
   width: 100%;
-  background-color: var(--p-surface-neutral, color('sky'));
+  background-color: var(--p-progressbar-background);
   border-radius: var(--p-border-radius-base, border-radius());
 
   @media screen and (-ms-high-contrast: active) {
@@ -40,11 +40,29 @@
   height: progress-bar-height(large);
 }
 
+.colorHighlight {
+  --p-progressbar-background: var(--p-surface-neutral, #{color('sky')});
+  --p-progressbar-indicator: var(--p-border-highlight, #{color('teal')});
+}
+
+.colorPrimary {
+  --p-progressbar-background: var(
+    --p-surface-neutral,
+    #{lighten(color('indigo', 'light'), 8%)}
+  );
+  --p-progressbar-indicator: var(--p-action-primary, #{color('indigo')});
+}
+
+.colorSuccess {
+  --p-progressbar-background: var(--p-surface-neutral, #{color('sky')});
+  --p-progressbar-indicator: var(--p-border-success, #{color('green')});
+}
+
 .Indicator {
   height: inherit;
   width: 0;
   will-change: width;
-  background-color: var(--p-border-highlight, color('teal'));
+  background-color: var(--p-progressbar-indicator);
   animation: fillup duration(slowest) easing();
   transition: width duration(slowest) easing();
 
diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
index 24ea54f767a..4ad7f9375a3 100644
--- a/src/components/ProgressBar/ProgressBar.tsx
+++ b/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;
+  /**
+   * Size 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(
diff --git a/src/components/ProgressBar/README.md b/src/components/ProgressBar/README.md
index 1d3fbcd1bfe..b1a4f67dc29 100644
--- a/src/components/ProgressBar/README.md
+++ b/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

From a7755bc3f7a0b0d465b6bcc58123e2eb6e22f45c Mon Sep 17 00:00:00 2001
From: Kaelig Deloumeau-Prigent <kaelig@users.noreply.github.com>
Date: Wed, 7 Oct 2020 14:47:06 -0700
Subject: [PATCH 2/3] Add link to PR in changelog

---
 UNRELEASED.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 3120ec80f6f..803f52877b4 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -8,7 +8,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
-- Added new `color` prop to ProgressBar
+- Added new `color` prop to ProgressBar ([#3415](https://github.com/Shopify/polaris-react/pull/3415))
 
 ### Bug fixes
 

From 24c1f5b51f16de668cb0a85085e1a527e76554f9 Mon Sep 17 00:00:00 2001
From: Kaelig Deloumeau-Prigent <kaelig@users.noreply.github.com>
Date: Mon, 21 Dec 2020 17:43:24 -0800
Subject: [PATCH 3/3] Update ProgressBar.tsx

---
 src/components/ProgressBar/ProgressBar.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/ProgressBar/ProgressBar.tsx b/src/components/ProgressBar/ProgressBar.tsx
index 4ad7f9375a3..0d520cd256d 100644
--- a/src/components/ProgressBar/ProgressBar.tsx
+++ b/src/components/ProgressBar/ProgressBar.tsx
@@ -20,7 +20,7 @@ export interface ProgressBarProps {
    */
   size?: Size;
   /**
-   * Size of progressbar
+   * Color of progressbar
    * @default 'highlight'
    */
   color?: Color;