add segmented-control tests

Esri · May 29, 2024 · 48ce504 · 48ce504
1 parent c02acc6
commit 48ce504
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 6 deletions.
diff --git a/...es/calcite-components/src/components/segmented-control-item/segmented-control-item.e2e.ts b/...es/calcite-components/src/components/segmented-control-item/segmented-control-item.e2e.ts
@@ -1,5 +1,6 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { renders, hidden } from "../../tests/commonTests";
+import { renders, hidden, themed } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
 import { CSS } from "./resources";
 
 describe("calcite-segmented-control-item", () => {
@@ -107,4 +108,44 @@ describe("calcite-segmented-control-item", () => {
       expect(element).not.toHaveAttribute("icon-end");
     });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-segmented-control-item", {
+        "--calcite-segmented-control-item-background-color": {
+          targetProp: "backgroundColor",
+        },
+        "--calcite-segmented-control-item-border-color": {
+          shadowSelector: ".label",
+          targetProp: "borderColor",
+        },
+        // TODO: is focus token needed?
+        "--calcite-segmented-control-item-text-color": {
+          shadowSelector: ".label",
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("checked", () => {
+      themed(
+        html`<calcite-segmented-control-item checked appearance="outline-fill"></calcite-segmented-control-item>`,
+        {
+          "--calcite-segmented-control-item-border-color": {
+            shadowSelector: ".label",
+            targetProp: "borderColor",
+          },
+        },
+      );
+    });
+
+    describe("with icon", () => {
+      themed(html`<calcite-segmented-control-item icon-start="3d-glasses">3d!</calcite-segmented-control-item>`, {
+        "--calcite-segmented-control-item-icon-color": {
+          shadowSelector: ".icon",
+          targetProp: "--calcite-icon-color",
+        },
+      });
+    });
+  });
 });
diff --git a/...ages/calcite-components/src/components/segmented-control-item/segmented-control-item.scss b/...ages/calcite-components/src/components/segmented-control-item/segmented-control-item.scss
@@ -7,7 +7,6 @@
  * @prop --calcite-segmented-control-item-border-color: Specifies the border color of the component.
  * @prop --calcite-segmented-control-item-focus: Specifies the focus color of the component.
  * @prop --calcite-segmented-control-item-icon-color: Specifies the icon color of the component.
- * @prop --calcite-segmented-control-item-shadow: Specifies the shadow of the component.
  * @prop --calcite-segmented-control-item-text-color: Specifies the text color of the component.
  */
 
@@ -88,10 +87,9 @@
 
 :host([checked]) .label--outline,
 :host([checked]) .label--outline-fill {
-  background-color: var(--calcite-segmented-control-item-background-color, var(--calcite-color-foreground-1));
-  border-color: var(calcite-segmented-control-item-border-color, var(--calcite-color-brand));
+  border-color: var(--calcite-segmented-control-item-border-color, var(--calcite-color-brand));
   color: var(--calcite-segmented-control-item-text-color, var(--calcite-color-brand));
-  box-shadow: var(--calcite-segmented-control-item-shadow, inset 0 0 0 1px var(--calcite-color-brand));
+  box-shadow: var(--calcite-segmented-control-item-border-color, inset 0 0 0 1px var(--calcite-color-brand));
 }
 
 :host([checked]) .label--outline {
@@ -121,6 +119,8 @@
     inline-flex;
   line-height: inherit;
 
+  --calcite-icon-color: var(--calcite-segmented-control-item-icon-color, var(--calcite-color-text-3));
+
   margin-inline-start: var(--calcite-internal-segmented-control-icon-margin-start);
   margin-inline-end: var(--calcite-internal-segmented-control-icon-margin-end);
 }

diff --git a/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts b/packages/calcite-components/src/components/segmented-control/segmented-control.e2e.ts
@@ -9,7 +9,9 @@ import {
   labelable,
   reflects,
   renders,
+  themed,
 } from "../../tests/commonTests";
+import { CSS } from "./resources";
 
 describe("calcite-segmented-control", () => {
   describe("defaults", () => {
@@ -433,4 +435,19 @@ describe("calcite-segmented-control", () => {
   describe("updates items when children are modified after initialization", () => {
     // TODO:
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-segmented-control", {
+        "--calcite-segmented-control-background-color": {
+          shadowSelector: `.${CSS.itemWrapper}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-segmented-control-border-color": {
+          shadowSelector: `.${CSS.itemWrapper}`,
+          targetProp: "outline",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/tests/commonTests/themed.ts b/packages/calcite-components/src/tests/commonTests/themed.ts
@@ -371,7 +371,9 @@ async function assertThemedProps(page: E2EPage, options: TestTarget): Promise<vo
   }
 
   const styles = await targetEl.getComputedStyle(pseudoElement);
-  const isFakeBorderToken = token.includes("border-color") && targetProp === "boxShadow";
+  const isFakeBorderToken =
+    token.includes("border-color") &&
+    (targetProp === "boxShadow" || targetProp === "outline" || targetProp === "outlineColor");
   const isLinearGradientUnderlineToken = token.includes("link-underline-color") && targetProp === "backgroundImage";
 
   if (isFakeBorderToken || isLinearGradientUnderlineToken) {