fix(stepper): no longer adds default min-width for items when `layo…

…ut='horizontal'` (#8758) **Related Issue:** #8461 ## Summary When `layout="horizontal"`, allows `stepper-item's` to shrink with container width.
Esri · Feb 15, 2024 · 23a7439 · 23a7439
1 parent 04c8e24
commit 23a7439
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 70 deletions.
diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -4462,10 +4462,6 @@ export namespace Components {
           * Made into a prop for testing purposes only
          */
         "messages": StepperItemMessages;
-        /**
-          * Specifies if the user is viewing one `stepper-item` at a time. Helps in determining if header region is tabbable.
-         */
-        "multipleViewMode": boolean;
         /**
           * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.
          */
@@ -11957,10 +11953,6 @@ declare namespace LocalJSX {
           * Made into a prop for testing purposes only
          */
         "messages"?: StepperItemMessages;
-        /**
-          * Specifies if the user is viewing one `stepper-item` at a time. Helps in determining if header region is tabbable.
-         */
-        "multipleViewMode"?: boolean;
         /**
           * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.
          */

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -316,8 +316,8 @@
     @apply border-color-danger;
   }
 }
-:host([layout="horizontal"][selected][multiple-view-mode]),
-:host([layout="horizontal-single"][selected][multiple-view-mode]) {
+:host([layout="horizontal"][selected]),
+:host([layout="horizontal-single"][selected]) {
   .stepper-item-header {
     @apply border-color-brand;
   }

diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.tsx b/packages/calcite-components/src/components/stepper-item/stepper-item.tsx
@@ -144,13 +144,6 @@ 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.
    */
@@ -271,7 +264,7 @@ export class StepperItem
               class={CSS.stepperItemHeader}
               tabIndex={
                 /* additional tab index logic needed because of display: contents */
-                this.layout === "horizontal" && !this.disabled && this.multipleViewMode ? 0 : null
+                this.layout === "horizontal" && !this.disabled ? 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)}
@@ -372,7 +365,7 @@ export class StepperItem
   private renderIcon(): VNode {
     let path = "circle";
 
-    if (this.selected && (this.multipleViewMode || (!this.error && !this.complete))) {
+    if (this.selected && (this.layout !== "horizontal-single" || (!this.error && !this.complete))) {
       path = "circleF";
     } else if (this.error) {
       path = "exclamationMarkCircleF";
@@ -432,7 +425,7 @@ export class StepperItem
 
   private getItemPosition(): number {
     return Array.from(this.parentStepperEl?.querySelectorAll("calcite-stepper-item")).indexOf(
-      this.el,
+      this.el
     );
   }
 

diff --git a/packages/calcite-components/src/components/stepper/resources.ts b/packages/calcite-components/src/components/stepper/resources.ts
@@ -1,9 +1,3 @@
-export const ITEM_MIN_WIDTH = {
-  s: 120,
-  m: 180,
-  l: 200,
-};
-
 export const CSS = {
   actionIcon: "action-icon",
   actionIconStart: "action-icon--start",

diff --git a/packages/calcite-components/src/components/stepper/stepper.tsx b/packages/calcite-components/src/components/stepper/stepper.tsx
@@ -22,7 +22,7 @@ import {
 } from "./interfaces";
 import { createObserver } from "../../utils/observers";
 import { StepBar } from "./functional/step-bar";
-import { ITEM_MIN_WIDTH, CSS } from "./resources";
+import { CSS } from "./resources";
 import { guid } from "../../utils/guid";
 
 import {
@@ -176,7 +176,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
     return (
       <Host aria-label={this.messages.label} role="region">
         <div
-          class={{ container: true, [CSS.singleView]: !this.multipleViewMode }}
+          class={{ container: true, [CSS.singleView]: this.layout === "horizontal-single" }}
           ref={this.setContainerEl}
         >
           {this.layout === "horizontal-single" && (
@@ -192,10 +192,12 @@ export class Stepper implements LocalizedComponent, T9nComponent {
               ))}
             </div>
           )}
-          <div class={{ [CSS.actionContainer]: true }}>
-            {this.renderAction("start")}
-            {this.renderAction("end")}
-          </div>
+          {this.layout === "horizontal-single" && (
+            <div class={{ [CSS.actionContainer]: true }}>
+              {this.renderAction("start")}
+              {this.renderAction("end")}
+            </div>
+          )}
           <slot onSlotchange={this.handleDefaultSlotChange} />
         </div>
       </Host>
@@ -350,7 +352,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
   @Watch("currentActivePosition")
   handlePositionChange(): void {
     readTask((): void => {
-      this.determineActiveStepper(true);
+      this.determineActiveStepper();
     });
   }
 
@@ -386,7 +388,7 @@ export class Stepper implements LocalizedComponent, T9nComponent {
 
   private resizeObserver = createObserver(
     "resize",
-    (entries) => (this.elWidth = entries[0].contentRect.width),
+    (entries) => (this.elWidth = entries[0].contentRect.width)
   );
 
   private updateItems(): void {
@@ -398,46 +400,30 @@ export class Stepper implements LocalizedComponent, T9nComponent {
     });
   }
 
-  private determineActiveStepper(currentActivePositionChanged = false): void {
+  private determineActiveStepper(): void {
     const totalItems = this.items.length;
-    if (!this.elWidth || !totalItems || this.layout === "vertical" || totalItems === 1) {
+    if (!this.elWidth || !totalItems || this.layout !== "horizontal-single" || totalItems === 1) {
       return;
     }
-
     const activePosition = this.currentActivePosition || 0;
 
-    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 {
+    if (this.layout === "horizontal-single") {
       this.multipleViewMode = false;
       this.items.forEach((item: HTMLCalciteStepperItemElement, index) => {
-        if (index !== activePosition) {
-          item.hidden = true;
-        } else {
-          item.hidden = false;
-          item.multipleViewMode = false;
-        }
+        item.hidden = index !== activePosition;
       });
     }
   }
 
   private getEnabledStepIndex(
     startIndex: number,
-    direction: "next" | "previous" = "next",
+    direction: "next" | "previous" = "next"
   ): number | null {
     const { items, currentActivePosition } = this;
 
     let newIndex = startIndex;
 
-    while (items[newIndex]?.disabled && this.multipleViewMode) {
+    while (items[newIndex]?.disabled && this.layout !== "horizontal-single") {
       newIndex = newIndex + (direction === "previous" ? -1 : 1);
     }
 
@@ -517,7 +503,6 @@ export class Stepper implements LocalizedComponent, T9nComponent {
     if (enabledStepIndex > -1) {
       return enabledStepIndex;
     }
-
     return 0;
   }
 
@@ -527,21 +512,12 @@ export class Stepper implements LocalizedComponent, T9nComponent {
 
   handleDefaultSlotChange = (event: Event): void => {
     const items = slotChangeGetAssignedElements(event).filter(
-      (el) => el?.tagName === "CALCITE-STEPPER-ITEM",
+      (el) => el?.tagName === "CALCITE-STEPPER-ITEM"
     );
     this.items = items as HTMLCalciteStepperItemElement[];
-    this.setGridTemplateColumns(items);
-    this.setStepperItemNumberingSystem();
-  };
-
-  private setGridTemplateColumns(items: Element[]): void {
-    const minWidth = this.getMinWidthOfStepperItem();
-    const spacing = Array(items.length).fill(`minmax(${minWidth}px, 1fr)`).join(" ");
+    const spacing = Array(items.length).fill("1fr").join(" ");
     this.containerEl.style.gridTemplateAreas = spacing;
     this.containerEl.style.gridTemplateColumns = spacing;
-  }
-
-  private getMinWidthOfStepperItem(): number {
-    return ITEM_MIN_WIDTH[this.scale];
-  }
+    this.setStepperItemNumberingSystem();
+  };
 }