test(segmented-control, segmented-control-item): add component token …

…E2E tests (#9592) **Related Issue:** #7180 ## Summary ✨🧪✨
Esri · Jun 18, 2024 · 5626ed8 · 5626ed8
1 parent 63c4c0f
commit 5626ed8
Show file tree

Hide file tree

Showing 3 changed files with 80 additions and 16 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,43 @@ 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: `.${CSS.label}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-segmented-control-item-text-color": {
+          shadowSelector: `.${CSS.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: `.${CSS.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: `.${CSS.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
@@ -5,14 +5,12 @@
  *
  * @prop --calcite-segmented-control-item-background-color: Specifies the background color of the component.
  * @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.
  */
 
 :host {
-  display: flex;
+  @apply focus-base;
   cursor: pointer;
   align-self: stretch;
   font-weight: var(--calcite-font-weight-normal);
@@ -42,11 +40,8 @@
 }
 
 :host(:focus) {
-  --calcite-internal-segmented-control-item-focus-offset: -1px;
-  @include focusInset(
-    "--calcite-segmented-control-item-focus",
-    "--calcite-internal-segmented-control-item-focus-offset"
-  );
+  @apply focus-inset;
+  outline-offset: -1px;
 }
 
 .label--scale-s {
@@ -79,19 +74,29 @@
   background-color: var(--calcite-segmented-control-item-background-color, var(--calcite-color-foreground-3));
 }
 
-:host([checked]) label {
-  background-color: var(--calcite-segmented-control-item-background-color, var(--calcite-color-brand));
-  border-color: var(calcite-segmented-control-item-border-color, var(--calcite-color-brand));
-  cursor: default;
-  color: var(--calcite-segmented-control-item-text-color, var(--calcite-color-text-inverse));
+:host([checked]) {
+  label {
+    background-color: var(--calcite-segmented-control-item-background-color, var(--calcite-color-brand));
+    border-color: var(calcite-segmented-control-item-border-color, var(--calcite-color-brand));
+    cursor: default;
+    color: var(--calcite-segmented-control-item-text-color, var(--calcite-color-text-inverse));
+  }
+
+  .icon {
+    --calcite-icon-color: var(--calcite-segmented-control-item-icon-color, var(--calcite-color-text-inverse));
+  }
 }
 
 :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: inset 0 0 0 1px var(--calcite-segmented-control-item-border-color, var(--calcite-color-brand));
+
+  .icon {
+    --calcite-icon-color: var(--calcite-segmented-control-item-icon-color, var(--calcite-color-brand));
+  }
 }
 
 :host([checked]) .label--outline {
@@ -121,6 +126,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",
+        },
+      });
+    });
+  });
 });