feat: add tier-3 tokens to DataBar and ProgressBar (#1628)

- define tokens for background and border for these two components - these point to tier 1 values currently - use new tokens in specified components
chanzuckerberg · May 23, 2023 · ca9da5b · ca9da5b
1 parent 6d174d0
commit ca9da5b
Show file tree

Hide file tree

Showing 12 changed files with 76 additions and 34 deletions.
diff --git a/.storybook/data/tokens.json b/.storybook/data/tokens.json
@@ -355,6 +355,8 @@
   "eds-theme-color-button-icon-error-text-hover": "#BD0044",
   "eds-theme-color-button-icon-error-text-active": "#FFFFFF",
   "eds-theme-color-checkbox-brand-background": "#8984E8",
+  "eds-theme-color-data-bar-background": "#F4F6F8",
+  "eds-theme-color-data-bar-border": "#C0C4C8",
   "eds-theme-color-focus-ring": "#6B65E2",
   "eds-theme-color-focus-ring-inverted": "#FFFFFF",
   "eds-theme-color-form-border": "#878C90",
@@ -363,6 +365,8 @@
   "eds-theme-color-form-background-hover": "#F4F6F8",
   "eds-theme-color-form-label": "#383C43",
   "eds-theme-color-modal-brand-header-background": "#8984E8",
+  "eds-theme-color-progress-bar-background": "#E7E8EA",
+  "eds-theme-color-progress-bar-border": "#E7E8EA",
   "eds-theme-color-radio-brand-background": "#8984E8",
   "eds-theme-color-text-highlight-foreground": "#21272D",
   "eds-theme-color-text-highlight-background": "#F5FF8F",

diff --git a/src/components/DataBar/DataBar.module.css b/src/components/DataBar/DataBar.module.css
@@ -14,9 +14,9 @@
   );
   height: var(--data-bar-height);
 
-  background-color: var(--eds-theme-color-background-neutral-subtle);
+  background-color: var(--eds-theme-color-data-bar-background);
 
-  border: var(--eds-theme-color-border-neutral-default) solid
+  border: var(--eds-theme-color-data-bar-border) solid
     var(--eds-theme-border-width);
   /* Rounds the sides rather than making the bar elliptical. */
   border-radius: var(--eds-border-radius-full);

diff --git a/src/components/DataBar/DataBar.stories.tsx b/src/components/DataBar/DataBar.stories.tsx
@@ -19,18 +19,11 @@ export default {
   },
   parameters: {
     badges: ['1.0'],
+    backgrounds: {
+      default: 'eds-color-neutral-white',
+    },
   },
-  decorators: [
-    (Story) => (
-      <div
-        style={{
-          margin: '0.25rem',
-        }}
-      >
-        {Story()}
-      </div>
-    ),
-  ],
+  decorators: [(Story) => <div className="m-4">{Story()}</div>],
 } as Meta<Args>;
 
 type Args = React.ComponentProps<typeof DataBar>;

diff --git a/src/components/DataBar/__snapshots__/DataBar.test.tsx.snap b/src/components/DataBar/__snapshots__/DataBar.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`<DataBar /> LargeValue story renders snapshot 1`] = `
 <div
-  style="margin: 0.25rem;"
+  class="m-4"
 >
   <div>
     <div
@@ -46,7 +46,7 @@ exports[`<DataBar /> LargeValue story renders snapshot 1`] = `
 
 exports[`<DataBar /> NoSegments story renders snapshot 1`] = `
 <div
-  style="margin: 0.25rem;"
+  class="m-4"
 >
   <div>
     <div
@@ -87,7 +87,7 @@ exports[`<DataBar /> NoSegments story renders snapshot 1`] = `
 
 exports[`<DataBar /> SmallValue story renders snapshot 1`] = `
 <div
-  style="margin: 0.25rem;"
+  class="m-4"
 >
   <div>
     <div
@@ -131,7 +131,7 @@ exports[`<DataBar /> SmallValue story renders snapshot 1`] = `
 
 exports[`<DataBar /> TotalsLessThanMax story renders snapshot 1`] = `
 <div
-  style="margin: 0.25rem;"
+  class="m-4"
 >
   <div>
     <div
@@ -189,7 +189,7 @@ exports[`<DataBar /> TotalsLessThanMax story renders snapshot 1`] = `
 
 exports[`<DataBar /> TotalsMax story renders snapshot 1`] = `
 <div
-  style="margin: 0.25rem;"
+  class="m-4"
 >
   <div>
     <div
@@ -247,7 +247,7 @@ exports[`<DataBar /> TotalsMax story renders snapshot 1`] = `
 
 exports[`<DataBar /> TotalsMoreThanMax story renders snapshot 1`] = `
 <div
-  style="margin: 0.25rem;"
+  class="m-4"
 >
   <div>
     <div
@@ -291,7 +291,7 @@ exports[`<DataBar /> TotalsMoreThanMax story renders snapshot 1`] = `
 
 exports[`<DataBar /> TotalsRightUnderMax story renders snapshot 1`] = `
 <div
-  style="margin: 0.25rem;"
+  class="m-4"
 >
   <div>
     <div

diff --git a/src/components/ProgressBar/ProgressBar.module.css b/src/components/ProgressBar/ProgressBar.module.css
@@ -8,7 +8,7 @@
  * Progress Bar indicates the completion progress of a task.
  */
 .progress-bar {
-  border: var(--eds-theme-color-border-neutral-subtle) solid
+  border: var(--eds-theme-color-progress-bar-border) solid
     var(--eds-border-width-sm);
   border-radius: var(--eds-border-radius-full);
 
@@ -17,7 +17,7 @@
 
   height: 0.875rem;
   width: 100%;
-  background-color: var(--eds-theme-color-background-neutral-medium);
+  background-color: var(--eds-theme-color-progress-bar-background);
 }
 
 /**

diff --git a/src/components/ProgressBar/ProgressBar.stories.tsx b/src/components/ProgressBar/ProgressBar.stories.tsx
@@ -12,14 +12,11 @@ export default {
   },
   parameters: {
     badges: ['1.2'],
+    backgrounds: {
+      default: 'eds-color-neutral-white',
+    },
   },
-  decorators: [
-    (Story) => (
-      <div style={{ backgroundColor: 'white', padding: '0.5rem' }}>
-        {Story()}
-      </div>
-    ),
-  ],
+  decorators: [(Story) => <div className="m-4">{Story()}</div>],
 } as Meta<Args>;
 
 type Args = React.ComponentProps<typeof ProgressBar>;

diff --git a/src/components/ProgressBar/__snapshots__/ProgressBar.test.ts.snap b/src/components/ProgressBar/__snapshots__/ProgressBar.test.ts.snap
@@ -2,7 +2,7 @@
 
 exports[`<ProgressBar /> Complete story renders snapshot 1`] = `
 <div
-  style="background-color: white; padding: 0.5rem;"
+  class="m-4"
 >
   <div>
     <div>
@@ -90,7 +90,7 @@ exports[`<ProgressBar /> Complete story renders snapshot 1`] = `
 
 exports[`<ProgressBar /> Default story renders snapshot 1`] = `
 <div
-  style="background-color: white; padding: 0.5rem;"
+  class="m-4"
 >
   <div>
     <div
@@ -132,7 +132,7 @@ exports[`<ProgressBar /> Default story renders snapshot 1`] = `
 
 exports[`<ProgressBar /> Empty story renders snapshot 1`] = `
 <div
-  style="background-color: white; padding: 0.5rem;"
+  class="m-4"
 >
   <div>
     <div
@@ -174,7 +174,7 @@ exports[`<ProgressBar /> Empty story renders snapshot 1`] = `
 
 exports[`<ProgressBar /> TwoSegments story renders snapshot 1`] = `
 <div
-  style="background-color: white; padding: 0.5rem;"
+  class="m-4"
 >
   <div>
     <div
@@ -219,7 +219,7 @@ exports[`<ProgressBar /> TwoSegments story renders snapshot 1`] = `
 
 exports[`<ProgressBar /> WithCustomCaption story renders snapshot 1`] = `
 <div
-  style="background-color: white; padding: 0.5rem;"
+  class="m-4"
 >
   <div>
     <div

diff --git a/src/design-tokens/tier-3-component/data-bar.json b/src/design-tokens/tier-3-component/data-bar.json
@@ -0,0 +1,16 @@
+{
+  "eds": {
+    "theme": {
+      "color": {
+        "data-bar": {
+          "background": {
+            "value": "{eds.color.neutral.100}"
+          },
+          "border": {
+            "value": "{eds.color.neutral.300}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/design-tokens/tier-3-component/progress-bar.json b/src/design-tokens/tier-3-component/progress-bar.json
@@ -0,0 +1,16 @@
+{
+  "eds": {
+    "theme": {
+      "color": {
+        "progress-bar": {
+          "background": {
+            "value": "{eds.color.neutral.200}"
+          },
+          "border": {
+            "value": "{eds.color.neutral.200}"
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/src/tokens-dist/css/variables.css b/src/tokens-dist/css/variables.css
@@ -355,6 +355,8 @@
   --eds-theme-color-button-icon-error-text-hover: #BD0044;
   --eds-theme-color-button-icon-error-text-active: #FFFFFF;
   --eds-theme-color-checkbox-brand-background: #8984E8;
+  --eds-theme-color-data-bar-background: #F4F6F8;
+  --eds-theme-color-data-bar-border: #C0C4C8;
   --eds-theme-color-focus-ring: #6B65E2;
   --eds-theme-color-focus-ring-inverted: #FFFFFF;
   --eds-theme-color-form-border: #878C90;
@@ -363,6 +365,8 @@
   --eds-theme-color-form-background-hover: #F4F6F8;
   --eds-theme-color-form-label: #383C43;
   --eds-theme-color-modal-brand-header-background: #8984E8;
+  --eds-theme-color-progress-bar-background: #E7E8EA;
+  --eds-theme-color-progress-bar-border: #E7E8EA;
   --eds-theme-color-radio-brand-background: #8984E8;
   --eds-theme-color-text-highlight-foreground: #21272D;
   --eds-theme-color-text-highlight-background: #F5FF8F;

diff --git a/src/tokens-dist/json/variables-nested.json b/src/tokens-dist/json/variables-nested.json
@@ -642,6 +642,10 @@
             }
           }
         },
+        "data-bar": {
+          "background": "#F4F6F8",
+          "border": "#C0C4C8"
+        },
         "focus-ring": {
           "@": "#6B65E2",
           "inverted": "#FFFFFF"
@@ -666,6 +670,10 @@
             }
           }
         },
+        "progress-bar": {
+          "background": "#E7E8EA",
+          "border": "#E7E8EA"
+        },
         "radio": {
           "brand": {
             "background": {

diff --git a/src/tokens-dist/ts/colors.ts b/src/tokens-dist/ts/colors.ts
@@ -290,6 +290,8 @@ export const EdsThemeColorButtonIconErrorText = '#BD0044';
 export const EdsThemeColorButtonIconErrorTextHover = '#BD0044';
 export const EdsThemeColorButtonIconErrorTextActive = '#FFFFFF';
 export const EdsThemeColorCheckboxBrandBackground = '#8984E8';
+export const EdsThemeColorDataBarBackground = '#F4F6F8';
+export const EdsThemeColorDataBarBorder = '#C0C4C8';
 export const EdsThemeColorFocusRing = '#6B65E2';
 export const EdsThemeColorFocusRingInverted = '#FFFFFF';
 export const EdsThemeColorFormBorder = '#878C90';
@@ -298,6 +300,8 @@ export const EdsThemeColorFormBackground = '#FFFFFF';
 export const EdsThemeColorFormBackgroundHover = '#F4F6F8';
 export const EdsThemeColorFormLabel = '#383C43';
 export const EdsThemeColorModalBrandHeaderBackground = '#8984E8';
+export const EdsThemeColorProgressBarBackground = '#E7E8EA';
+export const EdsThemeColorProgressBarBorder = '#E7E8EA';
 export const EdsThemeColorRadioBrandBackground = '#8984E8';
 export const EdsThemeColorTextHighlightForeground = '#21272D';
 export const EdsThemeColorTextHighlightBackground = '#F5FF8F';