fix(progress-indicator): fix vertical small screen bug (#9598)

* feat(ContentSwitcher): preliminary unstable refactor * fix(progress-indicator): fix veertical small screen bug * whoops * whoops - pt.2 * whoops - 3 * whoops - pt.3 * fix(progress-indicator): fix veertical small screen bug * fix(progress-indicator): fix vertical small screen bug pt.2
carbon-design-system · Sep 22, 2021 · 49e5a26 · 49e5a26
1 parent 6b96dc0
commit 49e5a26
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git 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
@@ -127,12 +127,14 @@ export function ProgressStep({
           invalid={invalid}
           prefix={prefix}
         />
-        <ProgressStepLabel className={`${prefix}--progress-label`}>
-          {label}
-        </ProgressStepLabel>
-        {secondaryLabel !== null && secondaryLabel !== undefined ? (
-          <p className={`${prefix}--progress-optional`}>{secondaryLabel}</p>
-        ) : null}
+        <div className={`${prefix}--progress-text`}>
+          <ProgressStepLabel className={`${prefix}--progress-label`}>
+            {label}
+          </ProgressStepLabel>
+          {secondaryLabel !== null && secondaryLabel !== undefined ? (
+            <p className={`${prefix}--progress-optional`}>{secondaryLabel}</p>
+          ) : null}
+        </div>
         <span className={`${prefix}--progress-line`} />
       </button>
     </li>