From 537dabfe51cba2d15be85032518f3097f7bf0333 Mon Sep 17 00:00:00 2001
From: aveline <aveline@users.noreply.github.com>
Date: Thu, 17 Aug 2023 07:17:01 -0700
Subject: [PATCH] [ProgressBar] Rename `color` to `tone` (#10051)

### WHY are these changes introduced?

Fixes #10049

### WHAT is this pull request doing?

- Renames the `color` prop to `tone`
- Remove existing `color` prop
---
 .changeset/healthy-boxes-wave.md                 |  5 +++++
 .../src/components/ProgressBar/ProgressBar.scss  |  8 ++++----
 .../ProgressBar/ProgressBar.stories.tsx          |  8 ++++----
 .../src/components/ProgressBar/ProgressBar.tsx   | 16 ++++++++--------
 .../pages/examples/progress-bar-colored.tsx      |  4 ++--
 5 files changed, 23 insertions(+), 18 deletions(-)
 create mode 100644 .changeset/healthy-boxes-wave.md

diff --git a/.changeset/healthy-boxes-wave.md b/.changeset/healthy-boxes-wave.md
new file mode 100644
index 00000000000..804d5c3a2ba
--- /dev/null
+++ b/.changeset/healthy-boxes-wave.md
@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': major
+---
+
+Renamed `color` prop to `tone` for `ProgressBar` component
diff --git a/polaris-react/src/components/ProgressBar/ProgressBar.scss b/polaris-react/src/components/ProgressBar/ProgressBar.scss
index 7bc9bd80182..a2d6a681aee 100644
--- a/polaris-react/src/components/ProgressBar/ProgressBar.scss
+++ b/polaris-react/src/components/ProgressBar/ProgressBar.scss
@@ -35,7 +35,7 @@
   height: progress-bar-height(large);
 }
 
-.colorHighlight {
+.toneHighlight {
   // stylelint-disable -- Polaris component custom properties
   --pc-progress-bar-background: var(--p-color-bg-strong);
   --pc-progress-bar-indicator: var(--p-color-border-info);
@@ -47,14 +47,14 @@
   }
 }
 
-.colorPrimary {
+.tonePrimary {
   // stylelint-disable -- Polaris component custom properties
   --pc-progress-bar-background: var(--p-color-bg-strong);
   --pc-progress-bar-indicator: var(--p-color-bg-primary);
   // stylelint-enable
 }
 
-.colorSuccess {
+.toneSuccess {
   // stylelint-disable -- Polaris component custom properties
   --pc-progress-bar-background: var(--p-color-bg-strong);
   --pc-progress-bar-indicator: var(--p-color-border-success);
@@ -66,7 +66,7 @@
   }
 }
 
-.colorCritical {
+.toneCritical {
   // stylelint-disable -- Polaris component custom properties
   --pc-progress-bar-background: var(--p-color-bg-strong);
   --pc-progress-bar-indicator: var(--p-color-bg-critical);
diff --git a/polaris-react/src/components/ProgressBar/ProgressBar.stories.tsx b/polaris-react/src/components/ProgressBar/ProgressBar.stories.tsx
index 4c59cda2435..831ea226434 100644
--- a/polaris-react/src/components/ProgressBar/ProgressBar.stories.tsx
+++ b/polaris-react/src/components/ProgressBar/ProgressBar.stories.tsx
@@ -17,13 +17,13 @@ export function Small() {
 export function WithColors() {
   return (
     <div>
-      <ProgressBar progress={70} color="primary" />
+      <ProgressBar progress={70} tone="primary" />
       <br />
-      <ProgressBar progress={30} color="success" />
+      <ProgressBar progress={30} tone="success" />
       <br />
-      <ProgressBar progress={30} color="critical" />
+      <ProgressBar progress={30} tone="critical" />
       <br />
-      <ProgressBar progress={30} color="highlight" />
+      <ProgressBar progress={30} tone="highlight" />
     </div>
   );
 }
diff --git a/polaris-react/src/components/ProgressBar/ProgressBar.tsx b/polaris-react/src/components/ProgressBar/ProgressBar.tsx
index c9991b5ccb2..73dd5c33801 100644
--- a/polaris-react/src/components/ProgressBar/ProgressBar.tsx
+++ b/polaris-react/src/components/ProgressBar/ProgressBar.tsx
@@ -8,7 +8,7 @@ import {useI18n} from '../../utilities/i18n';
 import styles from './ProgressBar.scss';
 
 type Size = 'small' | 'medium' | 'large';
-type Color = 'highlight' | 'primary' | 'success' | 'critical';
+type Tone = 'highlight' | 'primary' | 'success' | 'critical';
 
 export interface ProgressBarProps {
   /**
@@ -21,11 +21,6 @@ export interface ProgressBarProps {
    * @default 'medium'
    */
   size?: Size;
-  /**
-   * Color of progressbar
-   * @default 'highlight'
-   */
-  color?: Color;
   /**
    * Whether the fill animation is triggered
    * @default 'true'
@@ -35,12 +30,17 @@ export interface ProgressBarProps {
    * Id (ids) of element (elements) that describes progressbar
    */
   ariaLabelledBy?: string;
+  /**
+   * Color of progressbar
+   * @default 'highlight'
+   */
+  tone?: Tone;
 }
 
 export function ProgressBar({
   progress = 0,
   size = 'medium',
-  color = 'highlight',
+  tone = 'highlight',
   animated: hasAppearAnimation = true,
   ariaLabelledBy,
 }: ProgressBarProps) {
@@ -50,7 +50,7 @@ export function ProgressBar({
   const className = classNames(
     styles.ProgressBar,
     size && styles[variationName('size', size)],
-    color && styles[variationName('color', color)],
+    tone && styles[variationName('tone', tone)],
   );
 
   const warningMessage = i18n.translate(
diff --git a/polaris.shopify.com/pages/examples/progress-bar-colored.tsx b/polaris.shopify.com/pages/examples/progress-bar-colored.tsx
index 32923548272..32e53cf6b38 100644
--- a/polaris.shopify.com/pages/examples/progress-bar-colored.tsx
+++ b/polaris.shopify.com/pages/examples/progress-bar-colored.tsx
@@ -5,9 +5,9 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';
 function ProgressBarExample() {
   return (
     <div style={{width: 225}}>
-      <ProgressBar progress={70} color="primary" />
+      <ProgressBar progress={70} tone="primary" />
       <br />
-      <ProgressBar progress={30} color="success" />
+      <ProgressBar progress={30} tone="success" />
     </div>
   );
 }