From 2d630c86693cc9c8acd798f70c37d92afd1af717 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Fri, 31 May 2024 12:59:08 -0700
Subject: [PATCH 1/2] test(stepper): add token theming tests

---
 .../src/components/stepper/stepper.e2e.ts     | 80 ++++++++++++++++++-
 1 file changed, 79 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
index 4c8dad75f2b..e3596a8e8a7 100644
--- a/packages/calcite-components/src/components/stepper/stepper.e2e.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -1,8 +1,10 @@
 import { E2EPage, newE2EPage } from "@stencil/core/testing";
-import { defaults, hidden, reflects, renders, t9n } from "../../tests/commonTests";
+import { defaults, hidden, reflects, renders, t9n, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { NumberStringFormatOptions } from "../../utils/locale";
 import { isElementFocused } from "../../tests/utils";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 // we use browser-context function to click on items to workaround `E2EElement#click` error
 async function itemClicker(item: HTMLCalciteStepperItemElement) {
@@ -899,4 +901,80 @@ describe("calcite-stepper", () => {
       expect(displayedItems.length).toBe(1);
     });
   });
+
+  const stepperHTML = html`
+    <calcite-stepper layout="horizontal-single" numbered icon scale="s">
+      <calcite-stepper-item heading="Confirm and complete">
+        <calcite-notice open width="full">
+          <div slot="message">Step 4 Content Goes Here</div>
+        </calcite-notice>
+      </calcite-stepper-item>
+      <calcite-stepper-item heading="Choose method" selected>
+        <calcite-notice open width="full">
+          <div slot="message">Step 1 Content Goes Here</div>
+        </calcite-notice>
+      </calcite-stepper-item>
+      <calcite-stepper-item heading="Compile member list" complete>
+        <calcite-notice open width="full">
+          <div slot="message">Step 2 Content Goes Here</div>
+        </calcite-notice>
+      </calcite-stepper-item>
+      <calcite-stepper-item heading="Set member properties" description="Some subtext" error>
+        <calcite-notice open width="full">
+          <div slot="message">Step 3 Content Goes Here</div>
+        </calcite-notice>
+      </calcite-stepper-item>
+    </calcite-stepper>
+  `;
+  describe("theme", () => {
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-stepper-action-background-color": {
+          shadowSelector: `calcite-action`,
+          targetProp: "--calcite-action-background-color",
+        },
+        "--calcite-stepper-action-background-color-hover": {
+          shadowSelector: `calcite-action`,
+          targetProp: "--calcite-action-background-color",
+          state: { hover: { attribute: "class", value: CSS.actionIcon } },
+        },
+        "--calcite-stepper-action-background-color-active": {
+          shadowSelector: `calcite-action`,
+          targetProp: "--calcite-action-background-color",
+          state: { press: { attribute: "class", value: CSS.actionIcon } },
+        },
+        "--calcite-stepper-step-bar-fill-color": {
+          shadowSelector: `.step-bar rect`,
+          targetProp: "fill",
+        },
+        "--calcite-stepper-step-bar-fill-color-hover": {
+          shadowSelector: `.step-bar rect`,
+          targetProp: "fill",
+          state: "hover",
+        },
+        "--calcite-stepper-step-bar-selected-fill-color": {
+          shadowSelector: `.step-bar rect.step-bar--selected`,
+          targetProp: "fill",
+        },
+        "--calcite-stepper-step-bar-complete-fill-color": {
+          shadowSelector: `.step-bar rect.step-bar--complete`,
+          targetProp: "fill",
+        },
+        "--calcite-stepper-step-bar-completed-fill-color-hover": {
+          shadowSelector: `.step-bar rect.step-bar--complete`,
+          targetProp: "fill",
+          state: "hover",
+        },
+        "--calcite-stepper-step-bar-error-fill-color": {
+          shadowSelector: `.step-bar rect.step-bar--error`,
+          targetProp: "fill",
+        },
+        "--calcite-stepper-step-bar-error-fill-color-hover": {
+          shadowSelector: `.step-bar rect.step-bar--error`,
+          targetProp: "fill",
+        },
+      };
+      themed(stepperHTML, tokens);
+    });
+  });
 });

From f1fdcff20a79aa35b31a8a4b241e2b6d4fb8e6c4 Mon Sep 17 00:00:00 2001
From: eliza <eli97736@esri.com>
Date: Sat, 1 Jun 2024 17:33:19 -0700
Subject: [PATCH 2/2] cleanup per review feedback

---
 .../src/components/stepper/resources.ts       |  5 ++
 .../src/components/stepper/stepper.e2e.ts     | 58 +++++++++----------
 2 files changed, 31 insertions(+), 32 deletions(-)

diff --git a/packages/calcite-components/src/components/stepper/resources.ts b/packages/calcite-components/src/components/stepper/resources.ts
index d45518e5026..6e0b28e335c 100644
--- a/packages/calcite-components/src/components/stepper/resources.ts
+++ b/packages/calcite-components/src/components/stepper/resources.ts
@@ -3,6 +3,11 @@ export const CSS = {
   actionIconStart: "action-icon--start",
   actionIconEnd: "action-icon--end",
   actionContainer: "action-container",
+  rect: "rect",
+  stepBar: "step-bar",
+  stepBarComplete: "step-bar--complete",
+  stepBarError: "step-bar--error",
+  stepBarSelected: "step-bar--selected",
   stepBarContainer: "step-bar-container",
   singleView: "single-view",
 };
diff --git a/packages/calcite-components/src/components/stepper/stepper.e2e.ts b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
index e3596a8e8a7..85df97d95d6 100644
--- a/packages/calcite-components/src/components/stepper/stepper.e2e.ts
+++ b/packages/calcite-components/src/components/stepper/stepper.e2e.ts
@@ -902,30 +902,6 @@ describe("calcite-stepper", () => {
     });
   });
 
-  const stepperHTML = html`
-    <calcite-stepper layout="horizontal-single" numbered icon scale="s">
-      <calcite-stepper-item heading="Confirm and complete">
-        <calcite-notice open width="full">
-          <div slot="message">Step 4 Content Goes Here</div>
-        </calcite-notice>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Choose method" selected>
-        <calcite-notice open width="full">
-          <div slot="message">Step 1 Content Goes Here</div>
-        </calcite-notice>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Compile member list" complete>
-        <calcite-notice open width="full">
-          <div slot="message">Step 2 Content Goes Here</div>
-        </calcite-notice>
-      </calcite-stepper-item>
-      <calcite-stepper-item heading="Set member properties" description="Some subtext" error>
-        <calcite-notice open width="full">
-          <div slot="message">Step 3 Content Goes Here</div>
-        </calcite-notice>
-      </calcite-stepper-item>
-    </calcite-stepper>
-  `;
   describe("theme", () => {
     describe("default", () => {
       const tokens: ComponentTestTokens = {
@@ -944,37 +920,55 @@ describe("calcite-stepper", () => {
           state: { press: { attribute: "class", value: CSS.actionIcon } },
         },
         "--calcite-stepper-step-bar-fill-color": {
-          shadowSelector: `.step-bar rect`,
+          shadowSelector: `.${CSS.stepBar} ${CSS.rect}`,
           targetProp: "fill",
         },
         "--calcite-stepper-step-bar-fill-color-hover": {
-          shadowSelector: `.step-bar rect`,
+          shadowSelector: `.${CSS.stepBar} ${CSS.rect}`,
           targetProp: "fill",
           state: "hover",
         },
         "--calcite-stepper-step-bar-selected-fill-color": {
-          shadowSelector: `.step-bar rect.step-bar--selected`,
+          shadowSelector: `.${CSS.stepBarSelected}`,
           targetProp: "fill",
         },
         "--calcite-stepper-step-bar-complete-fill-color": {
-          shadowSelector: `.step-bar rect.step-bar--complete`,
+          shadowSelector: `.${CSS.stepBarComplete}`,
           targetProp: "fill",
         },
         "--calcite-stepper-step-bar-completed-fill-color-hover": {
-          shadowSelector: `.step-bar rect.step-bar--complete`,
+          shadowSelector: `.${CSS.stepBarComplete}`,
           targetProp: "fill",
           state: "hover",
         },
         "--calcite-stepper-step-bar-error-fill-color": {
-          shadowSelector: `.step-bar rect.step-bar--error`,
+          shadowSelector: `.${CSS.stepBarError}`,
           targetProp: "fill",
         },
         "--calcite-stepper-step-bar-error-fill-color-hover": {
-          shadowSelector: `.step-bar rect.step-bar--error`,
+          shadowSelector: `.${CSS.stepBarError}`,
           targetProp: "fill",
         },
       };
-      themed(stepperHTML, tokens);
+      themed(
+        html`
+          <calcite-stepper layout="horizontal-single" numbered icon scale="s">
+            <calcite-stepper-item heading="Confirm and complete">
+              <div>Step 4 Content Goes Here</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Choose method" selected>
+              <div>Step 1 Content Goes Here</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Compile member list" complete>
+              <div>Step 2 Content Goes Here</div>
+            </calcite-stepper-item>
+            <calcite-stepper-item heading="Set member properties" description="Some subtext" error>
+              <div>Step 3 Content Goes Here</div>
+            </calcite-stepper-item>
+          </calcite-stepper>
+        `,
+        tokens,
+      );
     });
   });
 });