feat(stepper): enable responsive layout (#7744)

**Related Issue:** #6694

Enables responsive layout for stepper component.

- stepper element `host` display is changed to `flex` from `grid`
- grid column width will use `minmax( )` instead of fixed fractional
units.
- When none of the stepper item's are selected and the first one is
disabled, the first available enabled stepper will be selected.

Author: anveshmekala

packages/calcite-components/calcite-preset.ts

@@ -221,6 +221,7 @@ export default {
         4.5: "1.125rem",
         9: "2.25rem",
         11: "2.75rem",
+        13: "3.25rem",
       },
       transitionProperty: {
         margin: "margin",

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

@@ -142,7 +142,14 @@ export class Icon {
       return;
     }
 
-    this.pathData = await fetchIcon({ icon, scale });
+    const pathData = await fetchIcon({ icon, scale });
+
+    // While the fetchIcon method is awaiting response, the icon requested can change. This check is to verify the response received belongs to the current icon.
+    if (icon !== this.icon) {
+      return;
+    }
+
+    this.pathData = pathData;
   }
 
   private waitUntilVisible(callback: () => void): void {

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

@@ -2,6 +2,7 @@
   --calcite-stepper-item-spacing-unit-s: theme("spacing.1");
   --calcite-stepper-item-spacing-unit-m: theme("spacing.3");
   --calcite-stepper-item-spacing-unit-l: theme("spacing.4");
+  --calcite-internal-stepper-action-inline-size: theme("spacing.8");
   @apply text-n1h;
   margin-inline-end: theme("margin.1");
   .stepper-item-description {
@@ -13,6 +14,7 @@
   --calcite-stepper-item-spacing-unit-s: theme("spacing.2");
   --calcite-stepper-item-spacing-unit-m: theme("spacing.4");
   --calcite-stepper-item-spacing-unit-l: theme("spacing.5");
+  --calcite-internal-stepper-action-inline-size: theme("spacing.10");
   @apply text-0h;
   margin-inline-end: theme("margin.2");
   .stepper-item-description {
@@ -24,6 +26,7 @@
   --calcite-stepper-item-spacing-unit-s: theme("spacing.3");
   --calcite-stepper-item-spacing-unit-m: theme("spacing.5");
   --calcite-stepper-item-spacing-unit-l: theme("spacing.6");
+  --calcite-internal-stepper-action-inline-size: theme("spacing.12");
   @apply text-1h;
   margin-inline-end: theme("margin.3");
   .stepper-item-description {
@@ -257,10 +260,7 @@
     border-solid
     border-t-2
     focus-base;
-
     grid-row: items;
-    margin-inline-end: theme("margin.2");
-    margin-block-end: var(--calcite-stepper-item-spacing-unit-s);
 
     &:focus {
       @apply focus-outset;
@@ -287,19 +287,6 @@
   }
 }
 
-:host([layout="horizontal"][scale="s"]) {
-  .stepper-item-header {
-    margin-inline-end: theme("margin.1");
-    margin-block-end: var(--calcite-stepper-item-spacing-unit-s);
-  }
-}
-:host([layout="horizontal"][scale="l"]) {
-  .stepper-item-header {
-    margin-inline-end: theme("margin.3");
-    margin-block-end: var(--calcite-stepper-item-spacing-unit-s);
-  }
-}
-
 :host([layout="horizontal"][complete]) .stepper-item-header {
   border-color: rgba($h-bb-060, 0.5);
 }
@@ -310,7 +297,7 @@
 :host([layout="horizontal"][error]) .stepper-item-header {
   @apply border-color-danger;
 }
-:host([layout="horizontal"][selected]) .stepper-item-header {
+:host([layout="horizontal"][selected][multiple-view-mode]) .stepper-item-header {
   @apply border-color-brand;
 }
 :host([layout="horizontal"]:hover:not([disabled]):not([selected])) .stepper-item-header,
@@ -348,6 +335,40 @@
   }
 }
 
+:host([layout="horizontal"]:not([multiple-view-mode])) .stepper-item-header {
+  @apply border-none 
+  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 {
+  & .stepper-item-number {
+    color: theme("backgroundColor.danger");
+  }
+  & .stepper-item-icon {
+    @apply opacity-100;
+    color: theme("backgroundColor.danger");
+  }
+}
+
+:host([layout="horizontal"][error][selected]:not([multiple-view-mode])),
+:host([layout="horizontal"][complete][selected]:not([multiple-view-mode])) .container {
+  @apply text-color-3;
+  & .stepper-item-heading {
+    @apply text-color-2;
+  }
+}
+
+:host([layout="horizontal"][complete][selected]:not([multiple-view-mode])) .container {
+  & .stepper-item-icon {
+    @apply opacity-disabled;
+  }
+  & .stepper-item-number {
+    @apply text-color-3;
+  }
+}
+
 .visually-hidden {
   @apply sr-only;
 }

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

@@ -142,6 +142,13 @@ export class StepperItem
    */
   @Prop({ reflect: true }) scale: Scale = "m";
 
+  /**
+   * Specifies if the user is viewing one `stepper-item` at a time.
+   * Helps in determining if header region is tabbable.
+   * @internal
+   */
+  @Prop({ reflect: true }) multipleViewMode = false;
+
   /**
    * Use this property to override individual strings used by the component.
    */
@@ -260,7 +267,7 @@ export class StepperItem
             class={CSS.stepperItemHeader}
             tabIndex={
               /* additional tab index logic needed because of display: contents */
-              this.layout === "horizontal" && !this.disabled ? 0 : null
+              this.layout === "horizontal" && !this.disabled && this.multipleViewMode ? 0 : null
             }
             // eslint-disable-next-line react/jsx-sort-props -- ref should be last so node attrs/props are in sync (see https://github.com/Esri/calcite-design-system/pull/6530)
             ref={(el) => (this.headerEl = el)}
@@ -358,13 +365,15 @@ export class StepperItem
   };
 
   private renderIcon(): VNode {
-    const path = this.selected
-      ? "circleF"
-      : this.error
-      ? "exclamationMarkCircleF"
-      : this.complete
-      ? "checkCircleF"
-      : "circle";
+    let path = "circle";
+
+    if (this.selected && (this.multipleViewMode || (!this.error && !this.complete))) {
+      path = "circleF";
+    } else if (this.error) {
+      path = "exclamationMarkCircleF";
+    } else if (this.complete) {
+      path = "checkCircleF";
+    }
 
     return (
       <calcite-icon class="stepper-item-icon" flipRtl={this.iconFlipRtl} icon={path} scale="s" />

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages.json

@@ -1,3 +1,5 @@
 {
-  "label": "Progress steps"
+  "label": "Progress steps",
+  "previousStep": "Previous step",
+  "nextStep": "Next step"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_ar.json

@@ -1,3 +1,5 @@
 {
-  "label": "خطوات التقدم"
+  "label": "خطوات التقدم",
+  "previousStep": "الخطوة السابقة",
+  "nextStep": "الخطوة التالية"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_bg.json

@@ -1,3 +1,5 @@
 {
-  "label": "Стъпки на напредъка"
+  "label": "Стъпки на напредъка",
+  "previousStep": "Предишна стъпка",
+  "nextStep": "Следваща стъпка"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_bs.json

@@ -1,3 +1,5 @@
 {
-  "label": "Koraci napretka"
+  "label": "Koraci napretka",
+  "previousStep": "Prethodni korak",
+  "nextStep": "Sljedeći korak"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_ca.json

@@ -1,3 +1,5 @@
 {
-  "label": "Passos de progrés"
+  "label": "Passos de progrés",
+  "previousStep": "Pas anterior",
+  "nextStep": "Pas següent"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_cs.json

@@ -1,3 +1,5 @@
 {
-  "label": "Kroky průběhu"
+  "label": "Kroky průběhu",
+  "previousStep": "Předchozí krok",
+  "nextStep": "Další krok"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_da.json

@@ -1,3 +1,5 @@
 {
-  "label": "Statustrin"
+  "label": "Statustrin",
+  "previousStep": "Forrige trin",
+  "nextStep": "Næste trin"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_de.json

@@ -1,3 +1,5 @@
 {
-  "label": "Statusschritte"
+  "label": "Statusschritte",
+  "previousStep": "Vorheriger Schritt",
+  "nextStep": "Nächster Schritt"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_el.json

@@ -1,3 +1,5 @@
 {
-  "label": "Βήματα προόδου"
+  "label": "Βήματα προόδου",
+  "previousStep": "Προηγούμενο βήμα",
+  "nextStep": "Επόμενο βήμα"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_en.json

@@ -1,3 +1,5 @@
 {
-  "label": "Progress steps"
+  "label": "Progress steps",
+  "previousStep": "Previous step",
+  "nextStep": "Next step"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_es.json

@@ -1,3 +1,5 @@
 {
-  "label": "Pasos de progreso"
+  "label": "Pasos de progreso",
+  "previousStep": "Paso anterior",
+  "nextStep": "Paso siguiente"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_et.json

@@ -1,3 +1,5 @@
 {
-  "label": "Edenemise etapid"
+  "label": "Edenemise etapid",
+  "previousStep": "Eelmine toiming",
+  "nextStep": "Järgmine toiming"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_fi.json

@@ -1,3 +1,5 @@
 {
-  "label": "Edistymisen vaiheet"
+  "label": "Edistymisen vaiheet",
+  "previousStep": "Edellinen vaihe",
+  "nextStep": "Seuraava vaihe"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_fr.json

@@ -1,3 +1,5 @@
 {
-  "label": "Étapes de progression"
+  "label": "Étapes de progression",
+  "previousStep": "Étape précédente",
+  "nextStep": "Étape suivante"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_he.json

@@ -1,3 +1,5 @@
 {
-  "label": "שלבי התקדמות"
+  "label": "שלבי התקדמות",
+  "previousStep": "השלב הקודם",
+  "nextStep": "השלב הבא"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_hr.json

@@ -1,3 +1,5 @@
 {
-  "label": "Koraci napretka"
+  "label": "Koraci napretka",
+  "previousStep": "Prethodni korak",
+  "nextStep": "Sljedeći korak"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_hu.json

@@ -1,3 +1,5 @@
 {
-  "label": "Előrehaladás lépései"
+  "label": "Előrehaladás lépései",
+  "previousStep": "Előző lépés",
+  "nextStep": "Következő lépés"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_id.json

@@ -1,3 +1,5 @@
 {
-  "label": "Langkah dalam proses"
+  "label": "Langkah dalam proses",
+  "previousStep": "Langkah sebelumnya",
+  "nextStep": "Langkah berikutnya"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_it.json

@@ -1,3 +1,5 @@
 {
-  "label": "Passi di avanzamento"
+  "label": "Passi di avanzamento",
+  "previousStep": "Passaggio precedente",
+  "nextStep": "Passaggio successivo"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_ja.json

@@ -1,3 +1,5 @@
 {
-  "label": "ステップの進行状況"
+  "label": "ステップの進行状況",
+  "previousStep": "前のステップ",
+  "nextStep": "次のステップ"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_ko.json

@@ -1,3 +1,5 @@
 {
-  "label": "진행 단계"
+  "label": "진행 단계",
+  "previousStep": "이전 단계",
+  "nextStep": "다음 단계"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_lt.json

@@ -1,3 +1,5 @@
 {
-  "label": "Eigos žingsniai"
+  "label": "Eigos žingsniai",
+  "previousStep": "Ankstesnis žingsnis",
+  "nextStep": "Kitas žingsnis"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_lv.json

@@ -1,3 +1,5 @@
 {
-  "label": "Progresa soļi"
+  "label": "Progresa soļi",
+  "previousStep": "Iepriekšējā darbība",
+  "nextStep": "Nākamā darbība"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_nl.json

@@ -1,3 +1,5 @@
 {
-  "label": "Voortgangsstappen"
+  "label": "Voortgangsstappen",
+  "previousStep": "Vorige stap",
+  "nextStep": "Volgende stap"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_no.json

@@ -1,3 +1,5 @@
 {
-  "label": "Fremdriftstrinn"
+  "label": "Fremdriftstrinn",
+  "previousStep": "Forrige trinn",
+  "nextStep": "Neste trinn"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_pl.json

@@ -1,3 +1,5 @@
 {
-  "label": "Etapy postępu"
+  "label": "Etapy postępu",
+  "previousStep": "Poprzedni etap",
+  "nextStep": "Następny etap"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_pt-BR.json

@@ -1,3 +1,5 @@
 {
-  "label": "Etapas de progresso"
+  "label": "Etapas de progresso",
+  "previousStep": "Etapa anterior",
+  "nextStep": "Próxima etapa"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_pt-PT.json

@@ -1,3 +1,5 @@
 {
-  "label": "Passos de progresso"
+  "label": "Passos de progresso",
+  "previousStep": "Passo anterior",
+  "nextStep": "Próximo passo"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_ro.json

@@ -1,3 +1,5 @@
 {
-  "label": "Pași de progres"
+  "label": "Pași de progres",
+  "previousStep": "Pasul anterior",
+  "nextStep": "Pasul următor"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_ru.json

@@ -1,3 +1,5 @@
 {
-  "label": "Шаги выполнения"
+  "label": "Шаги выполнения",
+  "previousStep": "Предыдущий шаг",
+  "nextStep": "Следующий шаг"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_sk.json

@@ -1,3 +1,5 @@
 {
-  "label": "Kroky postupu"
+  "label": "Kroky postupu",
+  "previousStep": "Predchádzajúci krok",
+  "nextStep": "Ďaľší krok"
 }

packages/calcite-components/src/components/stepper/assets/stepper/t9n/messages_sl.json

@@ -1,3 +1,5 @@
 {
-  "label": "Koraki napredka"
+  "label": "Koraki napredka",
+  "previousStep": "Prejšnji korak",
+  "nextStep": "Naslednji korak"
 }