feat(stepper): add horizontal-single layout

packages/calcite-components/src/components.d.ts

@@ -73,8 +73,8 @@ import { DisplayMode } from "./components/sheet/interfaces";
 import { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
 import { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 import { DragDetail } from "./utils/sortableComponent";
+import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
 import { StepperMessages } from "./components/stepper/assets/stepper/t9n";
-import { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces";
 import { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 import { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
 import { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
@@ -159,8 +159,8 @@ export { DisplayMode } from "./components/sheet/interfaces";
 export { DisplayMode as DisplayMode1 } from "./components/shell-panel/interfaces";
 export { ShellPanelMessages } from "./components/shell-panel/assets/shell-panel/t9n";
 export { DragDetail } from "./utils/sortableComponent";
+export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail, StepperLayout } from "./components/stepper/interfaces";
 export { StepperMessages } from "./components/stepper/assets/stepper/t9n";
-export { StepperItemChangeEventDetail, StepperItemEventDetail, StepperItemKeyEventDetail } from "./components/stepper/interfaces";
 export { StepperItemMessages } from "./components/stepper-item/assets/stepper-item/t9n";
 export { TabID, TabLayout, TabPosition } from "./components/tabs/interfaces";
 export { TabChangeEventDetail, TabCloseEventDetail } from "./components/tab/interfaces";
@@ -4382,7 +4382,7 @@ export namespace Components {
         /**
           * Defines the layout of the component.
          */
-        "layout": Extract<"horizontal" | "vertical", Layout>;
+        "layout": StepperLayout;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -4453,7 +4453,7 @@ export namespace Components {
         /**
           * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.
          */
-        "layout": Extract<"horizontal" | "vertical", Layout>;
+        "layout": StepperLayout;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -11882,7 +11882,7 @@ declare namespace LocalJSX {
         /**
           * Defines the layout of the component.
          */
-        "layout"?: Extract<"horizontal" | "vertical", Layout>;
+        "layout"?: StepperLayout;
         /**
           * Use this property to override individual strings used by the component.
          */
@@ -11949,7 +11949,7 @@ declare namespace LocalJSX {
         /**
           * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.
          */
-        "layout"?: Extract<"horizontal" | "vertical", Layout>;
+        "layout"?: StepperLayout;
         /**
           * Use this property to override individual strings used by the component.
          */

packages/calcite-components/src/components/stepper-item/stepper-item.scss

@@ -247,7 +247,8 @@
   @apply border-color-danger-hover;
 }
 
-:host([layout="horizontal"]) {
+:host([layout="horizontal"]),
+:host([layout="horizontal-single"]) {
   display: contents;
 
   .container {
@@ -275,38 +276,67 @@
   }
 }
 
-:host([layout="horizontal"][disabled]) {
+:host([layout="horizontal"][disabled]),
+:host([layout="horizontal-single"][disabled]) {
   .stepper-item-header {
     @extend %disabled-host-only;
   }
 }
 
-:host([layout="horizontal"][selected]) {
+:host([layout="horizontal-single"][selected]) {
+  .stepper-item-header {
+    grid-area: 1 / 1 / 1 / -1;
+  }
+}
+
+:host([layout="horizontal"][selected]),
+:host([layout="horizontal-single"][selected]) {
   .stepper-item-content {
     grid-area: 2 / 1 / 2 / -1;
   }
 }
 
-:host([layout="horizontal"][complete]) .stepper-item-header {
-  border-color: rgba($h-bb-060, 0.5);
+:host([layout="horizontal"][complete]),
+:host([layout="horizontal-single"][complete]) {
+  .stepper-item-header {
+    border-color: rgba($h-bb-060, 0.5);
+  }
 }
-:host([layout="horizontal"][complete]:hover:not([disabled]):not([selected])) .stepper-item-header,
-:host([layout="horizontal"][complete]:focus:not([disabled]):not([selected])) .stepper-item-header {
-  @apply border-color-brand;
+:host([layout="horizontal"][complete]:hover:not([disabled]):not([selected])),
+:host([layout="horizontal"][complete]:focus:not([disabled]):not([selected])),
+:host([layout="horizontal-single"][complete]:hover:not([disabled]):not([selected])),
+:host([layout="horizontal-single"][complete]:focus:not([disabled]):not([selected])) {
+  .stepper-item-header {
+    @apply border-color-brand;
+  }
 }
-:host([layout="horizontal"][error]) .stepper-item-header {
-  @apply border-color-danger;
+:host([layout="horizontal"][error]),
+:host([layout="horizontal-single"][error]) {
+  .stepper-item-header {
+    @apply border-color-danger;
+  }
 }
-:host([layout="horizontal"][selected][multiple-view-mode]) .stepper-item-header {
-  @apply border-color-brand;
+:host([layout="horizontal"][selected][multiple-view-mode]),
+:host([layout="horizontal-single"][selected][multiple-view-mode]) {
+  .stepper-item-header {
+    @apply border-color-brand;
+  }
 }
-:host([layout="horizontal"]:hover:not([disabled]):not([selected])) .stepper-item-header,
-:host([layout="horizontal"]:focus:not([disabled]):not([selected])) .stepper-item-header {
-  border-color: rgba($h-bb-060, 0.5);
+:host([layout="horizontal"]:hover:not([disabled]):not([selected])),
+:host([layout="horizontal"]:focus:not([disabled]):not([selected])),
+:host([layout="horizontal-single"]:hover:not([disabled]):not([selected])),
+:host([layout="horizontal-single"]:focus:not([disabled]):not([selected])) {
+  .stepper-item-header {
+    border-color: rgba($h-bb-060, 0.5);
+  }
 }
-:host([layout="horizontal"][error]:hover:not([disabled]):not([selected])) .stepper-item-header,
-:host([layout="horizontal"][error]:focus:not([disabled]):not([selected])) .stepper-item-header {
-  @apply border-color-danger-hover;
+:host([layout="horizontal"][error]:hover:not([disabled]):not([selected])),
+:host([layout="horizontal"][error]:focus:not([disabled]):not([selected])),
+:host([layout="horizontal-single"][error]:hover:not([disabled]):not([selected])),
+:host([layout="horizontal-single"][error]:focus:not([disabled]):not([selected])) {
+  .stepper-item-header {
+    @apply border-color-danger-hover;
+  }
 }
 
 @media (forced-colors: active) {
@@ -335,14 +365,14 @@
   }
 }
 
-:host([layout="horizontal"]:not([multiple-view-mode])) .stepper-item-header {
-  @apply border-none 
+:host([layout="horizontal-single"]) .stepper-item-header {
+  @apply border-none box-border
   me-0;
   inline-size: 100%;
   padding-inline: calc(var(--calcite-internal-stepper-action-inline-size) + 0.5rem);
 }
 
-:host([layout="horizontal"][error]:not([multiple-view-mode])) .container {
+:host([layout="horizontal-single"][error]) .container {
   & .stepper-item-number {
     color: theme("backgroundColor.danger");
   }
@@ -352,15 +382,15 @@
   }
 }
 
-:host([layout="horizontal"][error][selected]:not([multiple-view-mode])),
-:host([layout="horizontal"][complete][selected]:not([multiple-view-mode])) .container {
+:host([layout="horizontal-single"][error][selected]),
+:host([layout="horizontal-single"][complete][selected]) .container {
   @apply text-color-3;
   & .stepper-item-heading {
     @apply text-color-2;
   }
 }
 
-:host([layout="horizontal"][complete][selected]:not([multiple-view-mode])) .container {
+:host([layout="horizontal-single"][complete][selected]) .container {
   & .stepper-item-icon {
     @apply opacity-disabled;
   }

packages/calcite-components/src/components/stepper-item/stepper-item.tsx

@@ -12,7 +12,7 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import { Layout, Scale } from "../interfaces";
+import { Scale } from "../interfaces";
 import {
   connectInteractive,
   disconnectInteractive,
@@ -24,6 +24,7 @@ import {
   StepperItemChangeEventDetail,
   StepperItemEventDetail,
   StepperItemKeyEventDetail,
+  StepperLayout,
 } from "../stepper/interfaces";
 import {
   numberStringFormatter,
@@ -119,7 +120,7 @@ export class StepperItem
    *
    * @internal
    */
-  @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout>;
+  @Prop({ reflect: true }) layout: StepperLayout;
 
   /**
    * Made into a prop for testing purposes only

packages/calcite-components/src/components/stepper/interfaces.ts

@@ -9,3 +9,5 @@ export interface StepperItemKeyEventDetail {
 export interface StepperItemChangeEventDetail {
   position: number;
 }
+
+export type StepperLayout = "horizontal" | "vertical" | "horizontal-single";

packages/calcite-components/src/components/stepper/stepper.scss

@@ -37,22 +37,31 @@
   @apply flex-auto flex-col;
 }
 
-:host([layout="horizontal"]) .container {
-  display: grid;
-  // grid-templates-columns are dynamically generated
-  // grid-templates-rows are dynamically generated
-  grid-template-areas:
-    "items"
-    "content";
-  gap: theme("spacing.2") var(--calcite-internal-stepper-item-spacing-unit-s);
+:host([layout="horizontal"]),
+:host([layout="horizontal-single"]) {
+  .container {
+    display: grid;
+    // grid-templates-columns are dynamically generated
+    // grid-templates-rows are dynamically generated
+    grid-template-areas:
+      "items"
+      "content";
+    gap: theme("spacing.2") var(--calcite-internal-stepper-item-spacing-unit-s);
+  }
 }
 
-:host([layout="horizontal"][scale="s"]) .container {
-  gap: theme("spacing.1") var(--calcite-internal-stepper-item-spacing-unit-s);
+:host([layout="horizontal"][scale="s"]),
+:host([layout="horizontal-single"][scale="s"]) {
+  .container {
+    gap: theme("spacing.1") var(--calcite-internal-stepper-item-spacing-unit-s);
+  }
 }
 
-:host([layout="horizontal"][scale="l"]) .container {
-  gap: theme("spacing.3") var(--calcite-internal-stepper-item-spacing-unit-s);
+:host([layout="horizontal"][scale="l"]),
+:host([layout="horizontal-single"][scale="l"]) {
+  .container {
+    gap: theme("spacing.3") var(--calcite-internal-stepper-item-spacing-unit-s);
+  }
 }
 
 :host([layout="horizontal"]) .container.single-view {

packages/calcite-components/src/components/stepper/stepper.tsx

@@ -14,8 +14,12 @@ import {
   readTask,
 } from "@stencil/core";
 import { focusElementInGroup, slotChangeGetAssignedElements } from "../../utils/dom";
-import { Layout, Position, Scale } from "../interfaces";
-import { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from "./interfaces";
+import { Position, Scale } from "../interfaces";
+import {
+  StepperItemChangeEventDetail,
+  StepperItemKeyEventDetail,
+  StepperLayout,
+} from "./interfaces";
 import { createObserver } from "../../utils/observers";
 import { StepBar } from "./functional/step-bar";
 import { ITEM_MIN_WIDTH, CSS } from "./resources";
@@ -56,7 +60,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
   @Prop({ reflect: true }) icon = false;
 
   /** Defines the layout of the component. */
-  @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout> = "horizontal";
+  @Prop({ reflect: true }) layout: StepperLayout = "horizontal";
 
   /** When `true`, displays the step number in the `calcite-stepper-item` heading. */
   @Prop({ reflect: true }) numbered = false;
@@ -175,7 +179,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
           class={{ container: true, [CSS.singleView]: !this.multipleViewMode }}
           ref={this.setContainerEl}
         >
-          {!this.multipleViewMode && this.layout === "horizontal" && (
+          {this.layout === "horizontal-single" && (
             <div class={{ [CSS.stepBarContainer]: true }}>
               {this.items.map((item, index) => (
                 <StepBar
@@ -396,37 +400,32 @@ export class Stepper implements LocalizedComponent, T9nComponent {
 
   private determineActiveStepper(currentActivePositionChanged = false): void {
     const totalItems = this.items.length;
-    if (!this.elWidth || !totalItems || this.layout !== "horizontal" || totalItems === 1) {
+    if (!this.elWidth || !totalItems || this.layout === "vertical" || totalItems === 1) {
       return;
     }
 
     const activePosition = this.currentActivePosition || 0;
-    const totalMinWidthOfItems = totalItems * this.getMinWidthOfStepperItem();
-    const totalRowGap =
-      (totalItems - 1) * (parseInt(window.getComputedStyle(this.containerEl).rowGap) || 0);
-
-    if (this.elWidth <= totalMinWidthOfItems + totalRowGap) {
-      this.multipleViewMode = false;
 
-      this.items.forEach((item: HTMLCalciteStepperItemElement, index) => {
-        if (index !== activePosition) {
-          item.hidden = true;
-        } else {
-          item.hidden = false;
-          item.multipleViewMode = false;
-        }
-      });
-    } else if (this.elWidth > totalMinWidthOfItems + totalRowGap) {
+    if (this.layout === "horizontal") {
       if (this.multipleViewMode && !currentActivePositionChanged) {
         return;
       }
-
       this.multipleViewMode = true;
       this.setGridTemplateColumns(this.items);
       this.items.forEach((item: HTMLCalciteStepperItemElement) => {
         item.hidden = false;
         item.multipleViewMode = true;
       });
+    } else {
+      this.multipleViewMode = false;
+      this.items.forEach((item: HTMLCalciteStepperItemElement, index) => {
+        if (index !== activePosition) {
+          item.hidden = true;
+        } else {
+          item.hidden = false;
+          item.multipleViewMode = false;
+        }
+      });
     }
   }
 
@@ -471,7 +470,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
     const totalItems = this.items.length;
     const id = `${this.guid}-${isPositionStart ? "start" : "end"}`;
 
-    return layout === "horizontal" && !multipleViewMode ? (
+    return layout === "horizontal-single" && !multipleViewMode ? (
       <calcite-action
         alignment="center"
         appearance="transparent"