From 9d2d38f3ad5235d15d6ed6401b153c8731b873c9 Mon Sep 17 00:00:00 2001
From: Jan Hassel <jan.hassel@ibm.com>
Date: Fri, 11 Feb 2022 14:26:46 +0100
Subject: [PATCH 1/2] feat(progress-bar): add "small" size variant

---
 .../components/progress-bar/_progress-bar.scss |  8 ++++++++
 .../ProgressBar/ProgressBar-story.js           | 18 +++++++++++++++---
 .../src/components/ProgressBar/ProgressBar.js  |  9 ++++++++-
 .../components/progress-bar/_progress-bar.scss |  8 ++++++++
 4 files changed, 39 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/components/progress-bar/_progress-bar.scss b/packages/components/src/components/progress-bar/_progress-bar.scss
index 59f9c1764c34..e21c7ef79541 100644
--- 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/src/components/ProgressBar/ProgressBar-story.js b/packages/react/src/components/ProgressBar/ProgressBar-story.js
index 9cac9f3ac278..7a4660dcd7f3 100644
--- 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
index bf2eb60d8eef..c607be4d2f00 100644
--- 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
index 2e11cdbd5e28..6333ebb4b9ea 100644
--- 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%;

From 9460d36cde141ecae952baab07f4feed0bd2ee4f Mon Sep 17 00:00:00 2001
From: Jan Hassel <jan.hassel@ibm.com>
Date: Fri, 11 Feb 2022 14:59:51 +0100
Subject: [PATCH 2/2] chore: update react public api snapshot

---
 .../react/__tests__/__snapshots__/PublicAPI-test.js.snap | 9 +++++++++
 1 file changed, 9 insertions(+)

diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
index 5f80db5af331..98b5ff7601c5 100644
--- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
+++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
@@ -8472,6 +8472,15 @@ Map {
       "max": Object {
         "type": "number",
       },
+      "size": Object {
+        "args": Array [
+          Array [
+            "small",
+            "big",
+          ],
+        ],
+        "type": "oneOf",
+      },
       "value": Object {
         "type": "number",
       },