[ProgressBar] Rename color to tone (Shopify#10051)

### WHY are these changes introduced? Fixes Shopify#10049 ### WHAT is this pull request doing? - Renames the `color` prop to `tone` - Remove existing `color` prop
AnnaCheba · Aug 17, 2023 · 537dabf · 537dabf
1 parent ce6f75b
commit 537dabf
Show file tree

Hide file tree

Showing 5 changed files with 23 additions and 18 deletions.
diff --git a/.changeset/healthy-boxes-wave.md 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
@@ -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
@@ -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
@@ -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
@@ -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>
   );
 }