fixing border token tests

Esri · Jun 6, 2024 · 4112ed8 · 4112ed8
1 parent cc6b744
commit 4112ed8
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 13 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/time-picker/time-picker.e2e.ts b/packages/calcite-components/src/components/time-picker/time-picker.e2e.ts
@@ -1240,12 +1240,6 @@ describe("calcite-time-picker", () => {
 
   describe("theme", () => {
     const tokens: ComponentTestTokens = {
-      "--calcite-time-picker-text-color": [
-        {
-          targetProp: "color",
-          shadowSelector: `.${CSS.timePicker}`,
-        },
-      ],
       "--calcite-time-picker-background-color": [
         {
           targetProp: "backgroundColor",
@@ -1276,6 +1270,25 @@ describe("calcite-time-picker", () => {
           state: "hover",
         },
       ],
+      "--calcite-time-picker-input-border-focus-color": [
+        {
+          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
@@ -9,8 +9,8 @@
  * @prop --calcite-time-picker-icon-color: Specifies the color of the component's icons.
  * @prop --calcite-time-picker-input-border-focus-color: Specifies the color of the border around the number and meridiem inputs when focused.
  * @prop --calcite-time-picker-input-border-hover-color: Specifies the color of the border around the number and meridiem inputs when hovered.
- * @prop --calcite-time-picker-text-color: Specifies the text color of the component.
  * @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;
@@ -77,10 +77,7 @@
     background-color: var(--calcite-time-picker-background-color, var(--calcite-color-foreground-1));
 
     &:hover {
-      box-shadow: var(
-        --calcite-time-picker-input-border-hover-color,
-        inset 0 0 0 2px var(--calcite-color-foreground-2)
-      );
+      box-shadow: inset 0 0 0 2px var(--calcite-time-picker-input-border-hover-color, var(--calcite-color-foreground-2));
       z-index: theme("zIndex.header");
     }
     &:focus,
@@ -90,7 +87,7 @@
     }
     &.inputFocus,
     &:hover.inputFocus {
-      box-shadow: var(--calcite-time-picker-input-border-focus-color, inset 0 0 0 2px var(--calcite-color-brand));
+      box-shadow: inset 0 0 0 2px var(--calcite-time-picker-input-border-focus-color, var(--calcite-color-brand));
       z-index: theme("zIndex.header");
     }
   }