fix(switch): add back missing tokens with e2e tests

Esri · May 31, 2024 · 97dd07d · 97dd07d
1 parent 8f87921
commit 97dd07d
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 14 deletions.
diff --git a/packages/calcite-components/src/components/switch/switch.e2e.ts b/packages/calcite-components/src/components/switch/switch.e2e.ts
@@ -1,5 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
 import { accessible, disabled, formAssociated, hidden, HYDRATED_ATTR, labelable } from "../../tests/commonTests";
+import { ComponentTestTokens, themed } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-switch", () => {
   it("renders with correct default attributes", async () => {
@@ -131,4 +133,40 @@ describe("calcite-switch", () => {
     const element = await page.find("calcite-switch");
     expect(element).toEqualAttribute("scale", "m");
   });
+
+  describe("theme", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-switch-corner-radius": [
+        {
+          shadowSelector: `.${CSS.handle}`,
+          targetProp: "borderRadius",
+        },
+        {
+          shadowSelector: `.${CSS.track}`,
+          targetProp: "borderRadius",
+        },
+      ],
+      "--calcite-switch-handle-background-color": [
+        {
+          shadowSelector: `.${CSS.handle}`,
+          targetProp: "backgroundColor",
+        },
+      ],
+      "--calcite-switch-track-background-color": {
+        shadowSelector: `.${CSS.track}`,
+        targetProp: "backgroundColor",
+      },
+      "--calcite-switch-border-color": [
+        {
+          shadowSelector: `.${CSS.handle}`,
+          targetProp: "borderColor",
+        },
+        {
+          shadowSelector: `.${CSS.track}`,
+          targetProp: "borderColor",
+        },
+      ],
+    };
+    themed(`calcite-switch`, tokens);
+  });
 });
diff --git a/packages/calcite-components/src/components/switch/switch.scss b/packages/calcite-components/src/components/switch/switch.scss
@@ -1,3 +1,14 @@
+/**
+ * CSS Custom Properties
+ *
+ * These properties can be overridden using the component's tag as selector.
+ *
+ * @prop --calcite-switch-corner-radius: Specifies the corner radius of the component.
+ * @prop --calcite-switch-handle-background-color: Specifies the background color of the component handle.
+ * @prop --calcite-switch-track-background-color: Specifies the background color of the component track.
+ * @prop --calcite-switch-border-color: Specifies the border color of the component.
+ */
+
 // sizes
 :host([scale="s"]) {
   .container {
@@ -36,6 +47,8 @@
 }
 
 :host {
+  --calcite-internal-switch-corner-radius: 9999px; // TODO: drop once --calcite-corner-radius is updated
+
   @apply relative
     inline-block
     w-auto
@@ -52,60 +65,61 @@
 }
 
 .track {
-  @apply bg-foreground-2
-    border-color-2
-    pointer-events-none
+  @apply pointer-events-none
     relative
     box-border
     inline-block
-    rounded-full
     border
     border-solid
     align-top
     focus-base;
+  border-radius: var(--calcite-switch-corner-radius, var(--calcite-internal-switch-corner-radius));
+  background-color: var(--calcite-switch-track-background-color, var(--calcite-color-foreground-2));
+  border-color: var(--calcite-switch-border-color, var(--calcite-color-border-2));
 }
 
 :host(:focus) .track {
   @apply focus-outset;
 }
 
 .handle {
-  @apply bg-foreground-1
-    border-color-input
-    pointer-events-none
+  @apply pointer-events-none
     absolute
     block
-    rounded-full
     border-2
     border-solid
     transition-all
     duration-150
     ease-in-out;
+  border-radius: var(--calcite-switch-corner-radius, var(--calcite-internal-switch-corner-radius));
   inset-block-start: -1px;
   inset-inline: -1px theme("inset.auto");
+  background-color: var(--calcite-switch-handle-background-color, var(--calcite-color-foreground-1));
+  border-color: var(--calcite-switch-border-color, var(--calcite-color-border-input));
 }
 
 .container:hover,
 :host(:focus) {
   .handle {
-    @apply border-color-brand;
-    box-shadow: inset 0 0 0 1px var(--calcite-color-brand);
+    box-shadow: inset 0 0 0 1px var(--calcite-switch-handle-shadow-color, var(--calcite-color-brand));
+    border-color: var(--calcite-switch-border-color, var(--calcite-color-brand));
   }
 }
 
 :host([checked]) {
   .track {
-    @apply bg-brand border-color-brand-hover;
+    background-color: var(--calcite-switch-track-background-color, var(--calcite-color-brand));
+    border-color: var(--calcite-switch-border-color, var(--calcite-color-brand-hover));
   }
   .handle {
-    @apply border-color-brand;
     inset-inline: theme("inset.auto") -1px;
+    border-color: var(--calcite-switch-border-color, var(--calcite-color-brand));
   }
 
   .container:hover {
     .handle {
-      @apply border-color-brand-hover;
-      box-shadow: inset 0 0 0 1px var(--calcite-color-brand-hover);
+      box-shadow: inset 0 0 0 1px var(--calcite-switch-handle-shadow-color, var(--calcite-color-brand-hover));
+      border-color: var(--calcite-switch-border-color, var(--calcite-color-brand-hover));
     }
   }
 }