fix(stepper-item): update component to take full width when parent's …

…layout is "vertical" (#10009) **Related Issue:** [#8930](#8930) ## Summary Update `stepper-item` to take full width when parent `stepper`'s layout is "vertical".
Esri · Aug 9, 2024 · 03a5a30 · 03a5a30
1 parent ecd34a0
commit 03a5a30
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 0 deletions.
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -188,6 +188,10 @@
   }
 }
 
+:host([layout="vertical"]) {
+  @apply w-full;
+}
+
 :host([layout="vertical"]) .container {
   @apply border-color-3
   mx-0

diff --git a/packages/calcite-components/src/components/stepper/stepper.stories.ts b/packages/calcite-components/src/components/stepper/stepper.stories.ts
@@ -296,3 +296,22 @@ export const horizontalSingleLayout_TestOnly = (): string => html`
     </calcite-stepper>
   </div>
 `;
+
+export const verticalLayoutFullWidth = (): string =>
+  html`<calcite-stepper layout="vertical" scale="s" style="width: 1000px;">
+      <calcite-stepper-item heading="Scale s" description="Add members without sending invitations"
+        >Step 1 Content Goes Here</calcite-stepper-item
+      >
+    </calcite-stepper>
+
+    <calcite-stepper layout="vertical">
+      <calcite-stepper-item heading="Scale m" description="Add members without sending invitations"
+        >Step 1 Content Goes Here</calcite-stepper-item
+      >
+    </calcite-stepper>
+
+    <calcite-stepper layout="vertical" scale="l">
+      <calcite-stepper-item heading="Scale l" description="Add members without sending invitations"
+        >Step 1 Content Goes Here</calcite-stepper-item
+      >
+    </calcite-stepper>`;