feat(progress-bar): add alignment variants (#10769)

janhassel · abbeyhrt · tay1orjones · web-flow · commit e3f7edc8d6d2 · 2022-03-15T17:12:08.000Z
Co-authored-by: Abbey Hart &lt;abbeyhrt@gmail.com&gt;
Co-authored-by: Taylor Jones &lt;tay1orjones@users.noreply.github.com&gt;
Co-authored-by: kodiakhq[bot] &lt;49736102+kodiakhq[bot]@users.noreply.github.com&gt;
diff --git a/packages/components/src/components/progress-bar/_progress-bar.scss b/packages/components/src/components/progress-bar/_progress-bar.scss
@@ -84,6 +84,27 @@
       background-position-x: -105%;
     }
   }
+
+  .#{$prefix}--progress-bar--inline {
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__label {
+    flex-shrink: 0;
+    margin-right: $spacing-05;
+    margin-bottom: 0;
+  }
+
+  .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__helper-text {
+    @include hidden;
+  }
+
+  .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__label,
+  .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__helper-text {
+    padding-right: $spacing-05;
+    padding-left: $spacing-05;
+  }
 }
 
 @include exports('progress-bar') {
diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -8718,6 +8718,16 @@ Map {
         ],
         "type": "oneOf",
       },
+      "type": Object {
+        "args": Array [
+          Array [
+            "default",
+            "inline",
+            "indented",
+          ],
+        ],
+        "type": "oneOf",
+      },
       "value": Object {
         "type": "number",
       },
diff --git a/packages/react/src/components/ProgressBar/ProgressBar-story.js b/packages/react/src/components/ProgressBar/ProgressBar-story.js
@@ -21,12 +21,19 @@ const sizes = {
   'Big (big) - default': 'big',
 };
 
+const types = {
+  'Default  (default)': 'default',
+  'Inline (inline)': 'inline',
+  'indented (indented)': 'indented',
+};
+
 const props = () => ({
   helperText: text('Helper text (helperText)', 'Optional helper text'),
   hideLabel: boolean('Hide the label (hideLabel)', false),
   label: text('Label text (label)', 'Progress bar label'),
   max: number('Maximum value (max)', 100),
   size: select('Size (size)', sizes, 'big'),
+  type: select('Type (type)', types, 'default'),
   value: number('Current value (value)', 75),
 });
 
diff --git a/packages/react/src/components/ProgressBar/ProgressBar.js b/packages/react/src/components/ProgressBar/ProgressBar.js
@@ -20,6 +20,7 @@ function ProgressBar({
   label,
   max = 100,
   size = 'big',
+  type = 'default',
   value,
 }) {
   const labelId = useId('progress-bar');
@@ -40,6 +41,7 @@ function ProgressBar({
   const wrapperClasses = classNames(
     `${prefix}--progress-bar`,
     `${prefix}--progress-bar--${size}`,
+    `${prefix}--progress-bar--${type}`,
     {
       [`${prefix}--progress-bar--indeterminate`]: indeterminate,
     },
@@ -108,6 +110,11 @@ ProgressBar.propTypes = {
    */
   size: PropTypes.oneOf(['small', 'big']),
 
+  /**
+   * Defines the alignment variant of the progress bar.
+   */
+  type: PropTypes.oneOf(['default', 'inline', 'indented']),
+
   /**
    * The current value.
    */
diff --git a/packages/styles/scss/components/progress-bar/_progress-bar.scss b/packages/styles/scss/components/progress-bar/_progress-bar.scss
@@ -11,6 +11,7 @@
 @use '../../theme' as *;
 @use '../../type' as *;
 @use '../../utilities/convert' as *;
+@use '../../utilities/visually-hidden' as *;
 
 /// Progress Bar styles
 /// @access public
@@ -87,4 +88,24 @@
       background-position-x: -105%;
     }
   }
+
+  .#{$prefix}--progress-bar--inline {
+    display: flex;
+    align-items: center;
+  }
+
+  .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__label {
+    flex-shrink: 0;
+    margin-bottom: 0;
+    margin-inline-end: $spacing-05;
+  }
+
+  .#{$prefix}--progress-bar--inline .#{$prefix}--progress-bar__helper-text {
+    @include visually-hidden;
+  }
+
+  .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__label,
+  .#{$prefix}--progress-bar--indented .#{$prefix}--progress-bar__helper-text {
+    padding-inline: $spacing-05;
+  }
 }
