refactor(stepper, stepper-item): getElementProp is refactored out in favor of inheritable props set directly on parent

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

@@ -12,7 +12,7 @@ import {
   VNode,
   Watch,
 } from "@stencil/core";
-import { getElementProp, toAriaBoolean } from "../../utils/dom";
+import { toAriaBoolean } from "../../utils/dom";
 import { Layout, Scale } from "../interfaces";
 import {
   connectInteractive,
@@ -81,27 +81,9 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
   /** A description for the component. Displays below the header text. */
   @Prop() description: string;
 
-  // internal props inherited from wrapping calcite-stepper
-  /** Defines the layout of the component. */
-  /** @internal */
-  @Prop({ reflect: true, mutable: true }) layout: Extract<"horizontal" | "vertical", Layout> =
-    "horizontal";
-
-  /** When `true`, displays a status icon in the component's heading. */
-  /** @internal */
-  @Prop({ mutable: true }) icon = false;
-
   /** When `true`, the icon will be flipped when the element direction is right-to-left (`"rtl"`). */
   @Prop({ reflect: true }) iconFlipRtl = false;
 
-  /** When `true`, displays the step number in the component's heading. */
-  /** @internal */
-  @Prop({ mutable: true }) numbered = false;
-
-  /** Specifies the size of the component. */
-  /** @internal */
-  @Prop({ reflect: true, mutable: true }) scale: Scale = "m";
-
   /**
    * @internal
    */
@@ -113,6 +95,34 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
     this.registerStepperItem();
   }
 
+  /**
+   * When `true`, displays a status icon in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.
+   *
+   * @internal
+   */
+  @Prop() icon = false;
+
+  /**
+   * Specifies the layout of the `calcite-stepper-item` inherited from parent `calcite-stepper`, defaults to `horizontal`.
+   *
+   * @internal
+   */
+  @Prop({ reflect: true }) layout: Extract<"horizontal" | "vertical", Layout>;
+
+  /**
+   * When `true`, displays the step number in the `calcite-stepper-item` heading inherited from parent `calcite-stepper`.
+   *
+   * @internal
+   */
+  @Prop() numbered = false;
+
+  /**
+   * Specifies the size of the component inherited from the `calcite-stepper`, defaults to `m`.
+   *
+   * @internal
+   */
+  @Prop({ reflect: true }) scale: Scale = "m";
+
   //--------------------------------------------------------------------------
   //
   //  Internal State/Props
@@ -175,10 +185,6 @@ export class StepperItem implements InteractiveComponent, LocalizedComponent, Lo
 
   componentWillLoad(): void {
     setUpLoadableComponent(this);
-    this.icon = getElementProp(this.el, "icon", false);
-    this.numbered = getElementProp(this.el, "numbered", false);
-    this.layout = getElementProp(this.el, "layout", false);
-    this.scale = getElementProp(this.el, "scale", "m");
     this.parentStepperEl = this.el.parentElement as HTMLCalciteStepperElement;
     this.itemPosition = this.getItemPosition();
     this.registerStepperItem();

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

@@ -1,10 +1,52 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { renders, hidden } from "../../tests/commonTests";
+import { defaults, hidden, reflects, renders } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { NumberStringFormatOptions } from "../../utils/locale";
 
 // todo test the automatic setting of first item to selected
 describe("calcite-stepper", () => {
+  describe("defaults", () => {
+    defaults("calcite-stepper", [
+      {
+        propertyName: "icon",
+        defaultValue: false,
+      },
+      {
+        propertyName: "layout",
+        defaultValue: "horizontal",
+      },
+      {
+        propertyName: "numbered",
+        defaultValue: false,
+      },
+      {
+        propertyName: "scale",
+        defaultValue: "m",
+      },
+    ]);
+  });
+
+  describe("reflects", () => {
+    reflects("calcite-stepper", [
+      {
+        propertyName: "icon",
+        value: true,
+      },
+      {
+        propertyName: "layout",
+        value: "horizontal",
+      },
+      {
+        propertyName: "numbered",
+        value: true,
+      },
+      {
+        propertyName: "scale",
+        value: "m",
+      },
+    ]);
+  });
+
   describe("renders", () => {
     renders(
       html`<calcite-stepper>
@@ -25,50 +67,32 @@ describe("calcite-stepper", () => {
     );
   });
 
-  it("renders default props when none are provided", async () => {
-    const page = await newE2EPage();
-    await page.setContent(html`<calcite-stepper>
-      <calcite-stepper-item heading="Step 1" id="step-1">
-        <div>Step 1 content</div>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Step 2" id="step-2">
-        <div>Step 2 content</div>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Step 3" id="step-3">
-        <div>Step 3 content</div>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Step 4" id="step-4">
-        <div>Step 4 content</div>
-      </calcite-stepper-item>
-    </calcite-stepper>`);
-    const element = await page.find("calcite-stepper");
-    expect(element).toEqualAttribute("layout", "horizontal");
-    expect(element).toEqualAttribute("scale", "m");
-    expect(element).not.toHaveAttribute("numbered");
-    expect(element).not.toHaveAttribute("icon");
-  });
-
-  it("renders requested props when valid props are provided", async () => {
+  it("inheritable props: `icon`, `layout`, `numbered`, and `scale` get passed to items from parents", async () => {
     const page = await newE2EPage();
-    await page.setContent(html`<calcite-stepper layout="vertical" scale="l" numbered icon>
-      <calcite-stepper-item heading="Step 1" id="step-1">
-        <div>Step 1 content</div>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Step 2" id="step-2">
-        <div>Step 2 content</div>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Step 3" id="step-3">
-        <div>Step 3 content</div>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Step 4" id="step-4">
-        <div>Step 4 content</div>
-      </calcite-stepper-item>
-    </calcite-stepper>`);
-    const element = await page.find("calcite-stepper");
-    expect(element).toEqualAttribute("layout", "vertical");
-    expect(element).toEqualAttribute("scale", "l");
-    expect(element).toHaveAttribute("numbered");
-    expect(element).toHaveAttribute("icon");
+    await page.setContent(html`
+      <calcite-stepper layout="vertical" scale="l" numbered icon>
+        <calcite-stepper-item heading="Step 1" id="step-1">
+          <div>Step 1 content</div>
+        </calcite-stepper-item>
+        <calcite-stepper-item heading="Step 2" id="step-2">
+          <div>Step 2 content</div>
+        </calcite-stepper-item>
+        <calcite-stepper-item heading="Step 3" id="step-3">
+          <div>Step 3 content</div>
+        </calcite-stepper-item>
+        <calcite-stepper-item heading="Step 4" id="step-4">
+          <div>Step 4 content</div>
+        </calcite-stepper-item>
+      </calcite-stepper>
+    `);
+    const stepperItems = await page.findAll("calcite-stepper-items");
+
+    stepperItems.forEach(async (item) => {
+      expect(await item.getProperty("icon")).toBe(true);
+      expect(await item.getProperty("layout")).toBe("vertical");
+      expect(await item.getProperty("scale")).toBe("l");
+      expect(await item.getProperty("numbered")).toBe(true);
+    });
   });
 
   // eslint-disable-next-line jest/no-disabled-tests

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

@@ -15,6 +15,7 @@ import { focusElementInGroup } from "../../utils/dom";
 import { NumberingSystem } from "../../utils/locale";
 import { Layout, Scale } from "../interfaces";
 import { StepperItemChangeEventDetail, StepperItemKeyEventDetail } from "./interfaces";
+import { createObserver } from "../../utils/observers";
 
 /**
  * @slot - A slot for adding `calcite-stepper-item` elements.
@@ -40,6 +41,17 @@ export class Stepper {
   /** When `true`, displays the step number in the `calcite-stepper-item` heading. */
   @Prop({ reflect: true }) numbered = false;
 
+  /** Specifies the size of the component. */
+  @Prop({ reflect: true }) scale: Scale = "m";
+
+  @Watch("icon")
+  @Watch("layout")
+  @Watch("numbered")
+  @Watch("scale")
+  handleItemPropChange(): void {
+    this.updateItems();
+  }
+
   /**
    * Specifies the Unicode numeral system used by the component for localization.
    */
@@ -57,9 +69,6 @@ export class Stepper {
    */
   @Prop({ mutable: true }) selectedItem: HTMLCalciteStepperItemElement = null;
 
-  /** Specifies the size of the component. */
-  @Prop({ reflect: true }) scale: Scale = "m";
-
   //--------------------------------------------------------------------------
   //
   //  Events
@@ -86,6 +95,12 @@ export class Stepper {
   //  Lifecycle
   //
   //--------------------------------------------------------------------------
+
+  connectedCallback(): void {
+    this.mutationObserver?.observe(this.el, { childList: true });
+    this.updateItems();
+  }
+
   componentDidLoad(): void {
     // if no stepper items are set as active, default to the first one
     if (typeof this.currentPosition !== "number") {
@@ -258,6 +273,17 @@ export class Stepper {
   /** keep track of the currently active item position */
   private currentPosition: number;
 
+  private mutationObserver = createObserver("mutation", () => this.updateItems());
+
+  private updateItems(): void {
+    this.el.querySelectorAll("calcite-stepper-item").forEach((item) => {
+      item.icon = this.icon;
+      item.numbered = this.numbered;
+      item.layout = this.layout;
+      item.scale = this.scale;
+    });
+  }
+
   //--------------------------------------------------------------------------
   //
   //  Private Methods