feat(stepper): add horizontal-single layout (#8742)

**Related Issue:** #8461 ## Summary This PR adds a new `layout` option: `horizontal-single` that replaces the current responsive behavior of `horizontal` mode. --------- Co-authored-by: Erik Harper <eriklharper@pm.me>
Esri · Feb 15, 2024 · 80409ff · 80409ff
1 parent 9494d91
commit 80409ff
Show file tree

Hide file tree

Showing 11 changed files with 632 additions and 165 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/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.
          */

diff --git a/packages/calcite-components/src/components/stepper-item/readme.md b/packages/calcite-components/src/components/stepper-item/readme.md
@@ -6,16 +6,16 @@ individual `calcite-stepper-item` item
 
 ## Properties
 
-| Property           | Attribute           | Description                                                                                  | Type                  | Default     |
-| ------------------ | ------------------- | -------------------------------------------------------------------------------------------- | --------------------- | ----------- |
-| `complete`         | `complete`          | When `true`, the step has been completed.                                                    | `boolean`             | `false`     |
-| `description`      | `description`       | A description for the component. Displays below the header text.                             | `string`              | `undefined` |
-| `disabled`         | `disabled`          | When `true`, interaction is prevented and the component is displayed with lower opacity.     | `boolean`             | `false`     |
-| `error`            | `error`             | When `true`, the component contains an error that requires resolution from the user.         | `boolean`             | `false`     |
-| `heading`          | `heading`           | The component header text.                                                                   | `string`              | `undefined` |
-| `iconFlipRtl`      | `icon-flip-rtl`     | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean`             | `false`     |
-| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component.                      | `StepperItemMessages` | `undefined` |
-| `selected`         | `selected`          | When `true`, the component is selected.                                                      | `boolean`             | `false`     |
+| Property           | Attribute       | Description                                                                                  | Type                                                               | Default     |
+| ------------------ | --------------- | -------------------------------------------------------------------------------------------- | ------------------------------------------------------------------ | ----------- |
+| `complete`         | `complete`      | When `true`, the step has been completed.                                                    | `boolean`                                                          | `false`     |
+| `description`      | `description`   | A description for the component. Displays below the header text.                             | `string`                                                           | `undefined` |
+| `disabled`         | `disabled`      | When `true`, interaction is prevented and the component is displayed with lower opacity.     | `boolean`                                                          | `false`     |
+| `error`            | `error`         | When `true`, the component contains an error that requires resolution from the user.         | `boolean`                                                          | `false`     |
+| `heading`          | `heading`       | The component header text.                                                                   | `string`                                                           | `undefined` |
+| `iconFlipRtl`      | `icon-flip-rtl` | When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). | `boolean`                                                          | `false`     |
+| `messageOverrides` | --              | Use this property to override individual strings used by the component.                      | `{ complete?: string; previousStep?: string; nextStep?: string; }` | `undefined` |
+| `selected`         | `selected`      | When `true`, the component is selected.                                                      | `boolean`                                                          | `false`     |
 
 ## Methods
 

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/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"]) {
+  .stepper-item-header {
+    grid-area: 1 / 1 / 1 / -1;
+  }
+}
+
+:host([layout="horizontal"]),
+:host([layout="horizontal-single"]) {
   .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;
   }

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/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

diff --git a/packages/calcite-components/src/components/stepper/interfaces.ts b/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";
diff --git a/packages/calcite-components/src/components/stepper/readme.md b/packages/calcite-components/src/components/stepper/readme.md
@@ -45,15 +45,15 @@ Calcite stepper can be used to present a stepper workflow to a user. It has conf
 
 ## Properties
 
-| Property           | Attribute           | Description                                                                  | Type                            | Default        |
-| ------------------ | ------------------- | ---------------------------------------------------------------------------- | ------------------------------- | -------------- |
-| `icon`             | `icon`              | When `true`, displays a status icon in the `calcite-stepper-item` heading.   | `boolean`                       | `false`        |
-| `layout`           | `layout`            | Defines the layout of the component.                                         | `"horizontal" \| "vertical"`    | `"horizontal"` |
-| `messageOverrides` | `message-overrides` | Use this property to override individual strings used by the component.      | `StepperMessages`               | `undefined`    |
-| `numbered`         | `numbered`          | When `true`, displays the step number in the `calcite-stepper-item` heading. | `boolean`                       | `false`        |
-| `numberingSystem`  | `numbering-system`  | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"` | `undefined`    |
-| `scale`            | `scale`             | Specifies the size of the component.                                         | `"l" \| "m" \| "s"`             | `"m"`          |
-| `selectedItem`     | --                  | Specifies the component's selected item.                                     | `HTMLCalciteStepperItemElement` | `null`         |
+| Property           | Attribute          | Description                                                                  | Type                                                            | Default        |
+| ------------------ | ------------------ | ---------------------------------------------------------------------------- | --------------------------------------------------------------- | -------------- |
+| `icon`             | `icon`             | When `true`, displays a status icon in the `calcite-stepper-item` heading.   | `boolean`                                                       | `false`        |
+| `layout`           | `layout`           | Defines the layout of the component.                                         | `"horizontal" \| "horizontal-single" \| "vertical"`             | `"horizontal"` |
+| `messageOverrides` | --                 | Use this property to override individual strings used by the component.      | `{ label?: string; previousStep?: string; nextStep?: string; }` | `undefined`    |
+| `numbered`         | `numbered`         | When `true`, displays the step number in the `calcite-stepper-item` heading. | `boolean`                                                       | `false`        |
+| `numberingSystem`  | `numbering-system` | Specifies the Unicode numeral system used by the component for localization. | `"arab" \| "arabext" \| "latn"`                                 | `undefined`    |
+| `scale`            | `scale`            | Specifies the size of the component.                                         | `"l" \| "m" \| "s"`                                             | `"m"`          |
+| `selectedItem`     | --                 | Specifies the component's selected item.                                     | `HTMLCalciteStepperItemElement`                                 | `null`         |
 
 ## Events
 

diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -743,11 +743,11 @@ describe("calcite-stepper", () => {
     expect(await stepperItem2.getProperty("selected")).toBe(true);
   });
 
-  describe("responsive layout", () => {
-    it("should display action buttons when width is smaller", async () => {
+  describe("horizontal-single layout", () => {
+    it("should display action buttons when layout is horizontal-single.", async () => {
       const page = await newE2EPage();
       await page.setContent(
-        html`<calcite-stepper style="width: 100px">
+        html`<calcite-stepper layout="horizontal-single">
           <calcite-stepper-item heading="Step 1" id="step-1">
             <div>Step 1 content</div>
           </calcite-stepper-item>
@@ -775,7 +775,7 @@ describe("calcite-stepper", () => {
     it("focus order", async () => {
       const page = await newE2EPage();
       await page.setContent(
-        html`<calcite-stepper style="width: 100px">
+        html`<calcite-stepper layout="horizontal-single">
           <calcite-stepper-item heading="Step 1" id="step-1">
             <calcite-button id="button1">Click</calcite-button>
           </calcite-stepper-item>
@@ -822,7 +822,7 @@ describe("calcite-stepper", () => {
     it("should emit calciteStepperItemChange on user interaction", async () => {
       const page = await newE2EPage();
       await page.setContent(
-        html`<calcite-stepper style="width: 100px">
+        html`<calcite-stepper layout="horizontal-single">
           <calcite-stepper-item heading="Step 1" id="step-1">
             <div>Step 1 content</div>
           </calcite-stepper-item>

diff --git a/packages/calcite-components/src/components/stepper/stepper.scss b/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 {