Merge branch 'epic/7180-component-tokens' of github.com:Esri/calcite-…

…components into epic/7180-component-tokens
Esri · Jun 3, 2024 · 1ce3148 · 1ce3148
2 parents d275331 + df6bf86
commit 1ce3148
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 3 deletions.
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts b/packages/calcite-components/src/components/stepper-item/stepper-item.e2e.ts
@@ -1,6 +1,8 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { disabled, renders, hidden, t9n } from "../../tests/commonTests";
+import { disabled, renders, hidden, t9n, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-stepper-item", () => {
   describe("renders", () => {
@@ -36,4 +38,39 @@ describe("calcite-stepper-item", () => {
     await stepperItem.click();
     expect(stepperItemSelect).toHaveReceivedEventTimes(1);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-stepper-item-description-text-color": {
+          shadowSelector: `.${CSS.stepperItemDescription}`,
+          targetProp: "color",
+        },
+        "--calcite-stepper-item-heading-text-color": {
+          shadowSelector: `.${CSS.stepperItemHeading}`,
+          targetProp: "color",
+        },
+        "--calcite-stepper-item-icon-color": {
+          shadowSelector: `calcite-icon`,
+          targetProp: "--calcite-icon-color",
+        },
+        "--calcite-stepper-item-number-text-color": {
+          shadowSelector: `.${CSS.stepperItemNumber}`,
+          targetProp: "color",
+        },
+        "--calcite-stepper-item-text-color": {
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "color",
+        },
+      };
+      themed(
+        html`
+          <calcite-stepper-item heading="Confirm and complete" icon numbered description="Some subtext">
+            <div>Step 1 Content Goes Here</div>
+          </calcite-stepper-item>
+        `,
+        tokens,
+      );
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/stepper-item/stepper-item.scss b/packages/calcite-components/src/components/stepper-item/stepper-item.scss
@@ -113,7 +113,7 @@
     h-3
     flex-shrink-0
     self-start;
-  color: var(
+  --calcite-icon-color: var(
     --calcite-stepper-item-icon-color,
     var(--calcite-internal-stepper-item-icon-color, var(--calcite-color-text-3))
   );

diff --git 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
@@ -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,74 @@ describe("calcite-stepper", () => {
       expect(displayedItems.length).toBe(1);
     });
   });
+
+  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: `.${CSS.stepBar} ${CSS.rect}`,
+          targetProp: "fill",
+        },
+        "--calcite-stepper-step-bar-fill-color-hover": {
+          shadowSelector: `.${CSS.stepBar} ${CSS.rect}`,
+          targetProp: "fill",
+          state: "hover",
+        },
+        "--calcite-stepper-step-bar-selected-fill-color": {
+          shadowSelector: `.${CSS.stepBarSelected}`,
+          targetProp: "fill",
+        },
+        "--calcite-stepper-step-bar-complete-fill-color": {
+          shadowSelector: `.${CSS.stepBarComplete}`,
+          targetProp: "fill",
+        },
+        "--calcite-stepper-step-bar-completed-fill-color-hover": {
+          shadowSelector: `.${CSS.stepBarComplete}`,
+          targetProp: "fill",
+          state: "hover",
+        },
+        "--calcite-stepper-step-bar-error-fill-color": {
+          shadowSelector: `.${CSS.stepBarError}`,
+          targetProp: "fill",
+        },
+        "--calcite-stepper-step-bar-error-fill-color-hover": {
+          shadowSelector: `.${CSS.stepBarError}`,
+          targetProp: "fill",
+        },
+      };
+      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,
+      );
+    });
+  });
 });