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/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 7ba72aea4bd9..92bf709c83d6 100644 --- 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 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%;