diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss index 0667483f7e8d..ac461da02eee 100644 --- a/packages/components/src/components/progress-indicator/_progress-indicator.scss +++ b/packages/components/src/components/progress-indicator/_progress-indicator.scss @@ -34,6 +34,11 @@ } } + .#{$prefix}--progress--space-equal .#{$prefix}--progress-step { + min-width: 8rem; + flex-grow: 1; + } + .#{$prefix}--progress-line { position: absolute; left: 0; @@ -42,6 +47,11 @@ border: $progress-indicator-bar-width; } + .#{$prefix}--progress--space-equal .#{$prefix}--progress-line { + min-width: rem(128px); + width: 100%; + } + .#{$prefix}--progress-step svg { position: relative; z-index: 1; @@ -82,6 +92,11 @@ box-shadow: 0 rem(3px) 0 0 $link-01; } + .#{$prefix}--progress--space-equal .#{$prefix}--progress-label { + max-width: 100%; + margin-right: 0.75rem; + } + .#{$prefix}--progress-label:active { color: $interactive-01; box-shadow: 0 rem(3px) 0 0 $interactive-01; diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 5e86faa6d3fc..8d3fe32a9505 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -4024,6 +4024,9 @@ Map { "onChange": Object { "type": "func", }, + "spaceEqually": Object { + "type": "bool", + }, "vertical": Object { "type": "bool", }, diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js index 84782662cadf..e6f751d8acb7 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator-story.js @@ -23,7 +23,8 @@ storiesOf('ProgressIndicator', module) () => ( + currentIndex={number('Current progress (currentIndex)', 1)} + spaceEqually={boolean('Space Equally', false)}>