feat(progress-bar): add alignment variants
MODIFY
packages/components/src/components/progress-bar/_progress-bar.scss
packages/components/src/components/progress-bar/_progress-bar.scss
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') {

MODIFY
packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap
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",
},

MODIFY
packages/react/src/components/ProgressBar/ProgressBar-story.js
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),
});

MODIFY
packages/react/src/components/ProgressBar/ProgressBar.js
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.
*/

MODIFY
packages/styles/scss/components/progress-bar/_progress-bar.scss
packages/styles/scss/components/progress-bar/_progress-bar.scss
@use '../../theme' as *;
@use '../../type' as *;
@use '../../utilities/convert' as *;
+@use '../../utilities/visually-hidden' as *;
/// Progress Bar styles
/// @access public
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;
+ }
}

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

Co-authored-by: Abbey Hart <abbeyhrt@gmail.com>
Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>