feat(progress-bar): add "small" size variant (#10708)

* feat(progress-bar): add "small" size variant * chore: update react public api snapshot Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 18, 2022 · f41b038 · f41b038
1 parent 785c417
commit f41b038
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 4 deletions.
diff --git a/packages/components/src/components/progress-bar/_progress-bar.scss b/packages/components/src/components/progress-bar/_progress-bar.scss
@@ -28,6 +28,14 @@
     background-color: $layer;
   }
 
+  .#{$prefix}--progress-bar--big .#{$prefix}--progress-bar__track {
+    height: rem(8px);
+  }
+
+  .#{$prefix}--progress-bar--small .#{$prefix}--progress-bar__track {
+    height: rem(4px);
+  }
+
   .#{$prefix}--progress-bar__bar {
     display: block;
     width: 100%;

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -8456,6 +8456,15 @@ Map {
       "max": Object {
         "type": "number",
       },
+      "size": Object {
+        "args": Array [
+          Array [
+            "small",
+            "big",
+          ],
+        ],
+        "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
@@ -7,15 +7,27 @@
 
 import React, { useState, useEffect } from 'react';
 
-import { withKnobs, text, boolean, number } from '@storybook/addon-knobs';
+import {
+  withKnobs,
+  text,
+  boolean,
+  number,
+  select,
+} from '@storybook/addon-knobs';
 import ProgressBar from '../ProgressBar';
 
+const sizes = {
+  'Small  (small)': 'small',
+  'Big (big) - default': 'big',
+};
+
 const props = () => ({
-  label: text('Label text (label)', 'Progress bar label'),
   helperText: text('Helper text (helperText)', 'Optional helper text'),
   hideLabel: boolean('Hide the label (hideLabel)', false),
-  value: number('Current value (value)', 75),
+  label: text('Label text (label)', 'Progress bar label'),
   max: number('Maximum value (max)', 100),
+  size: select('Size (size)', sizes, 'big'),
+  value: number('Current value (value)', 75),
 });
 
 export default {

diff --git a/packages/react/src/components/ProgressBar/ProgressBar.js b/packages/react/src/components/ProgressBar/ProgressBar.js
@@ -15,11 +15,12 @@ const { prefix } = settings;
 
 function ProgressBar({
   className,
+  helperText,
   hideLabel,
   label,
   max = 100,
+  size = 'big',
   value,
-  helperText,
 }) {
   const labelId = useId('progress-bar');
   const helperId = useId('progress-bar-helper');
@@ -38,6 +39,7 @@ function ProgressBar({
 
   const wrapperClasses = classNames(
     `${prefix}--progress-bar`,
+    `${prefix}--progress-bar--${size}`,
     {
       [`${prefix}--progress-bar--indeterminate`]: indeterminate,
     },
@@ -101,6 +103,11 @@ ProgressBar.propTypes = {
    */
   max: PropTypes.number,
 
+  /**
+   * Specify the size of the ProgressBar.
+   */
+  size: PropTypes.oneOf(['small', 'big']),
+
   /**
    * 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
@@ -31,6 +31,14 @@
     background-color: $layer;
   }
 
+  .#{$prefix}--progress-bar--big .#{$prefix}--progress-bar__track {
+    height: rem(8px);
+  }
+
+  .#{$prefix}--progress-bar--small .#{$prefix}--progress-bar__track {
+    height: rem(4px);
+  }
+
   .#{$prefix}--progress-bar__bar {
     display: block;
     width: 100%;