diff --git a/packages/components/src/components/progress-indicator/_progress-indicator.scss b/packages/components/src/components/progress-indicator/_progress-indicator.scss index 06bad35e2efe..c991dd835802 100644 --- a/packages/components/src/components/progress-indicator/_progress-indicator.scss +++ b/packages/components/src/components/progress-indicator/_progress-indicator.scss @@ -268,12 +268,17 @@ flex-direction: column; } + .#{$prefix}--progress--vertical, + .#{$prefix}--progress-text { + display: flex; + flex-direction: column; + } + .#{$prefix}--progress--vertical .#{$prefix}--progress-step, .#{$prefix}--progress--vertical .#{$prefix}--progress-step-button { width: initial; min-width: initial; min-height: 3.625rem; - flex-wrap: wrap; align-content: flex-start; } @@ -302,8 +307,7 @@ .#{$prefix}--progress--vertical .#{$prefix}--progress-optional { position: static; width: 100%; - margin-top: auto; - margin-left: $carbon--spacing-07; + margin: auto 0; } .#{$prefix}--progress--vertical .#{$prefix}--progress-line { diff --git a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js index 4dd15fc4bc47..88077a9e90af 100644 --- a/packages/react/src/components/ProgressIndicator/ProgressIndicator.js +++ b/packages/react/src/components/ProgressIndicator/ProgressIndicator.js @@ -127,12 +127,14 @@ export function ProgressStep({ invalid={invalid} prefix={prefix} /> - - {label} - - {secondaryLabel !== null && secondaryLabel !== undefined ? ( -

{secondaryLabel}

- ) : null} +
+ + {label} + + {secondaryLabel !== null && secondaryLabel !== undefined ? ( +

{secondaryLabel}

+ ) : null} +