test(time-picker, action, input-time-picker): add token theming tests…

… and fix action, input-time-picker token theming tests (#9475) **Related Issue:** #7180 ## Summary Add token theming tests for `time-picker`.
Esri · Jun 6, 2024 · b34aff3 · b34aff3
1 parent 51236da
commit b34aff3
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 14 deletions.
diff --git a/packages/calcite-components/src/components/action/action.e2e.ts b/packages/calcite-components/src/components/action/action.e2e.ts
@@ -227,7 +227,7 @@ describe("calcite-action", () => {
         },
         "--calcite-action-indicator-color": {
           shadowSelector: `.${CSS.actionIndicator}::after`,
-          targetProp: "background-color",
+          targetProp: "backgroundColor",
         },
       } as const;
       themed(

diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts b/packages/calcite-components/src/components/input-time-picker/input-time-picker.e2e.ts
@@ -1040,11 +1040,11 @@ describe("calcite-input-time-picker", () => {
         "--calcite-input-time-picker-shadow-focus": {
           selector: "calcite-input-time-picker",
           shadowSelector: "calcite-time-picker",
-          targetProp: "--calcite-time-picker-input-box-shadow-focus",
+          targetProp: "--calcite-time-picker-input-border-color-focus",
         },
         "--calcite-input-time-picker-shadow": {
           shadowSelector: "calcite-time-picker",
-          targetProp: "--calcite-time-picker-input-box-shadow",
+          targetProp: "--calcite-time-picker-input-border-color-hover",
         },
         "--calcite-input-time-picker-icon-color": {
           shadowSelector: "calcite-time-picker",

diff --git a/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss b/packages/calcite-components/src/components/input-time-picker/input-time-picker.scss
@@ -92,10 +92,10 @@ calcite-time-picker {
   --calcite-time-picker-text-color: var(--calcite-input-time-picker-text-color);
   --calcite-time-picker-background-color: var(--calcite-input-time-picker-background-color);
   --calcite-time-picker-background-color-hover: var(--calcite-input-time-picker-background-color-hover);
-  --calcite-time-picker-background-color-active: var(--calcite-input-time-picker-background-color-active);
+  --calcite-time-picker-button-background-color-active: var(--calcite-input-time-picker-background-color-active);
   --calcite-time-picker-icon-color: var(--calcite-input-time-picker-icon-color);
-  --calcite-time-picker-input-box-shadow: var(--calcite-input-time-picker-shadow);
-  --calcite-time-picker-input-box-shadow-focus: var(--calcite-input-time-picker-shadow-focus);
+  --calcite-time-picker-input-border-color-hover: var(--calcite-input-time-picker-shadow);
+  --calcite-time-picker-input-border-color-focus: var(--calcite-input-time-picker-shadow-focus);
 }
 
 calcite-icon {

diff --git a/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts b/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts
@@ -1,7 +1,8 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, hidden, renders, t9n } from "../../tests/commonTests";
+import { accessible, defaults, focusable, hidden, renders, t9n, themed } from "../../tests/commonTests";
 import { formatTimePart } from "../../utils/time";
 import { getElementXY, getFocusedElementProp } from "../../tests/utils";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
 import { CSS } from "./resources";
 
 const letterKeys = [
@@ -1236,4 +1237,59 @@ describe("calcite-time-picker", () => {
       expect(fractionalSecondEl.innerHTML).toEqual("000");
     });
   });
+
+  describe("theme", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-time-picker-background-color": [
+        {
+          targetProp: "backgroundColor",
+          shadowSelector: `.${CSS.timePicker}`,
+        },
+        {
+          targetProp: "backgroundColor",
+          shadowSelector: `.${CSS.button}`,
+        },
+      ],
+      "--calcite-time-picker-background-color-hover": [
+        {
+          targetProp: "backgroundColor",
+          shadowSelector: `.${CSS.button}`,
+          state: "hover",
+        },
+      ],
+      "--calcite-time-picker-icon-color": [
+        {
+          targetProp: "--calcite-icon-color",
+          shadowSelector: `calcite-icon`,
+        },
+      ],
+      "--calcite-time-picker-input-border-color-hover": [
+        {
+          targetProp: "boxShadow",
+          shadowSelector: `.${CSS.input}`,
+          state: "hover",
+        },
+      ],
+      "--calcite-time-picker-input-border-color-focus": [
+        {
+          targetProp: "boxShadow",
+          shadowSelector: `.${CSS.input}`,
+          state: "focus",
+        },
+      ],
+      "--calcite-time-picker-shadow": [
+        {
+          targetProp: "boxShadow",
+          shadowSelector: `.${CSS.timePicker}`,
+        },
+      ],
+      "--calcite-time-picker-text-color": [
+        {
+          targetProp: "color",
+          shadowSelector: `.${CSS.timePicker}`,
+        },
+      ],
+    };
+    themed(`calcite-time-picker`, tokens);
+  });
 });
diff --git a/packages/calcite-components/src/components/time-picker/time-picker.scss b/packages/calcite-components/src/components/time-picker/time-picker.scss
@@ -3,13 +3,14 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-time-picker-text-color: Specifies the text color of the component.
  * @prop --calcite-time-picker-background-color: Specifies the background color of the component.
  * @prop --calcite-time-picker-background-color-hover: Specifies the background color of the component when hovered.
- * @prop --calcite-time-picker-background-color-active: Specifies the background color of the component when active.
+ * @prop --calcite-time-picker-button-background-color-active: Specifies the background color of the component when active.
  * @prop --calcite-time-picker-icon-color: Specifies the color of the component's icons.
- * @prop --calcite-time-picker-input-box-shadow: Specifies the box shadow around the numbers inside the open component.
- * @prop --calcite-time-picker-input-box-shadow-focus: Specifies the box shadow around the numbers inside the open component when focused.
+ * @prop --calcite-time-picker-input-border-color-focus: Specifies the color of the border around the number and meridiem inputs when focused.
+ * @prop --calcite-time-picker-input-border-color-hover: Specifies the color of the border around the number and meridiem inputs when hovered.
+ * @prop --calcite-time-picker-shadow: Specifies the box-shadow around the component.
+ * @prop --calcite-time-picker-text-color: Specifies the text color of the component.
  */
 :host {
   @apply inline-block;
@@ -50,7 +51,7 @@
       outline-offset: 0;
     }
     &:active {
-      background-color: var(--calcite-time-picker-background-color-active, var(--calcite-color-foreground-3));
+      background-color: var(--calcite-time-picker-button-background-color-active, var(--calcite-color-foreground-3));
     }
     &.top-left {
       border-start-start-radius: var(--calcite-border-radius);
@@ -76,7 +77,7 @@
     background-color: var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1));
 
     &:hover {
-      box-shadow: var(--calcite-time-picker-input-box-shadow, inset 0 0 0 2px var(--calcite-color-foreground-2));
+      box-shadow: inset 0 0 0 2px var(--calcite-time-picker-input-border-color-hover, var(--calcite-color-foreground-2));
       z-index: theme("zIndex.header");
     }
     &:focus,
@@ -86,7 +87,7 @@
     }
     &.inputFocus,
     &:hover.inputFocus {
-      box-shadow: var(--calcite-time-picker-input-box-shadow-focus, inset 0 0 0 2px var(--calcite-color-brand));
+      box-shadow: inset 0 0 0 2px var(--calcite-time-picker-input-border-color-focus, var(--calcite-color-brand));
       z-index: theme("zIndex.header");
     }
   }