test(combobox, combobox-item-group, combobox-item): add component tok…

…en E2E tests (#9599) **Related Issue:** #7180 ## Summary ✨🧪✨
Esri · Jun 18, 2024 · afd2371 · afd2371
1 parent 9ea9f43
commit afd2371
Show file tree

Hide file tree

Showing 9 changed files with 173 additions and 26 deletions.
diff --git a/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.e2e.ts b/packages/calcite-components/src/components/combobox-item-group/combobox-item-group.e2e.ts
@@ -0,0 +1,19 @@
+import { themed } from "../../tests/commonTests";
+import { CSS } from "./resources";
+
+describe("calcite-combobox-item-group", () => {
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-combobox-item-group", {
+        "--calcite-combobox-item-group-border-color": {
+          shadowSelector: `.${CSS.title}`,
+          targetProp: "borderColor",
+        },
+        "--calcite-combobox-item-group-text-color": {
+          shadowSelector: `.${CSS.title}`,
+          targetProp: "color",
+        },
+      });
+    });
+  });
+});
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts b/packages/calcite-components/src/components/combobox-item/combobox-item.e2e.ts
@@ -1,4 +1,5 @@
-import { disabled, hidden, renders, slots } from "../../tests/commonTests";
+import { disabled, hidden, renders, slots, themed } from "../../tests/commonTests";
+import { CSS } from "./resources";
 
 describe("calcite-combobox-item", () => {
   describe("renders", () => {
@@ -16,4 +17,57 @@ describe("calcite-combobox-item", () => {
   describe("disabled", () => {
     disabled("calcite-combobox-item", { focusTarget: "none" });
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      themed("calcite-combobox-item", {
+        "--calcite-combobox-item-background-color": {
+          shadowSelector: `.${CSS.label}`,
+          targetProp: "backgroundColor",
+        },
+        "--calcite-combobox-item-indicator-color": {
+          shadowSelector: `.${CSS.icon}`,
+          targetProp: "color",
+        },
+        "--calcite-combobox-item-shadow": {
+          shadowSelector: `.${CSS.label}`,
+          targetProp: "boxShadow",
+        },
+        "--calcite-combobox-item-text-color": {
+          shadowSelector: `.${CSS.label}`,
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("custom icon", () => {
+      themed("<calcite-combobox-item icon='banana'>test</calcite-combobox-item>", {
+        "--calcite-combobox-item-icon-color": {
+          shadowSelector: `.${CSS.custom}`,
+          targetProp: "color",
+        },
+      });
+    });
+
+    describe("selected", () => {
+      themed("<calcite-combobox-item selected>test</calcite-combobox-item>", {
+        "--calcite-combobox-item-background-color-active": {
+          shadowSelector: `.${CSS.label}`,
+          targetProp: "color",
+        },
+        "--calcite-combobox-item-text-color-active": {
+          shadowSelector: `.${CSS.label}`,
+          targetProp: "color",
+        },
+        "--calcite-combobox-item-icon-color-active": {
+          shadowSelector: `.${CSS.icon}`,
+          targetProp: "color",
+        },
+        "--calcite-combobox-item-indicator-color-active": {
+          shadowSelector: `.${CSS.iconActive}`,
+          targetProp: "color",
+        },
+      });
+    });
+  });
 });
diff --git a/packages/calcite-components/src/components/combobox-item/combobox-item.scss b/packages/calcite-components/src/components/combobox-item/combobox-item.scss
@@ -5,13 +5,13 @@
  *
  * @prop --calcite-combobox-item-background-color-active: defines the background color when the component is active or hovered.
  * @prop --calcite-combobox-item-background-color: defines the background color of the component
- * @prop --calcite-combobox-item-indicator-icon-color-active: defines the color of an indicator icon when the component is active.
- * @prop --calcite-combobox-item-indicator-icon-color: defines the indicator icon color.
-  * @prop --calcite-combobox-item-icon-color: defines the color of a custom icon in the component.
+ * @prop --calcite-combobox-item-icon-color-active: defines the color of a custom icon when the component is active.
+ * @prop --calcite-combobox-item-icon-color: defines the color of a custom icon in the component.
+ * @prop --calcite-combobox-item-indicator-color-active: defines the color of an indicator icon when the component is active.
+ * @prop --calcite-combobox-item-indicator-color: defines the indicator icon color.
  * @prop --calcite-combobox-item-shadow: defines the shadow of the component.
  * @prop --calcite-combobox-item-text-color-active: defines the text color when the component is selected, active, or hovered.
  * @prop --calcite-combobox-item-text-color: defines the text color of the component.
- *
  */
 
 /*
@@ -79,6 +79,7 @@ ul:focus {
      duration-150
      ease-in-out;
   @include word-break();
+  background-color: var(--calcite-combobox-item-background-color, var(--calcite-color-transparent));
   color: var(--calcite-combobox-item-text-color, var(--calcite-color-text-3));
   padding-block: var(--calcite-internal-combobox-item-space-small);
   padding-inline: var(--calcite-internal-combobox-item-space-large);
@@ -104,7 +105,7 @@ ul:focus {
 .label:hover,
 .label:active {
   @apply no-underline;
-  background-color: var(--calcite-combobox-item-background-color-active, --calcite-color-foreground-2);
+  background-color: var(--calcite-combobox-item-background-color-active, var(--calcite-color-foreground-2));
   color: var(--calcite-combobox-item-text-color-active, var(--calcite-color-text-1));
 }
 
@@ -118,7 +119,7 @@ ul:focus {
      duration-150
      ease-in-out;
   opacity: 0;
-  color: var(--calcite-combobox-item-indicator-icon-color, theme("borderColor.color.1"));
+  color: var(--calcite-combobox-item-indicator-color, var(--calcite-color-border-1));
 }
 
 .icon--indent {
@@ -132,15 +133,15 @@ ul:focus {
 }
 
 .icon--active {
-  color: var(--calcite-combobox-item-indicator-icon-color-active, var(--calcite-color-text-1));
+  color: var(--calcite-combobox-item-indicator-color-active, var(--calcite-color-text-1));
 }
 
 .icon--dot {
   @apply flex justify-center;
   min-inline-size: var(--calcite-internal-combobox-item-selector-icon-size);
 }
 
-.icon--dot:before {
+.icon--dot::before {
   text-align: start;
   content: "\2022";
 }
@@ -151,7 +152,7 @@ ul:focus {
 
 .label--selected .icon {
   opacity: var(--calcite-opacity-full);
-  color: var(--calcite-combobox-item-icon-color-selected, theme("backgroundColor.brand"));
+  color: var(--calcite-combobox-item-icon-color-active, var(--calcite-color-brand));
 }
 
 :host(:hover[disabled]) .icon {

diff --git a/packages/calcite-components/src/components/combobox/combobox.e2e.ts b/packages/calcite-components/src/components/combobox/combobox.e2e.ts
@@ -11,6 +11,7 @@ import {
   reflects,
   renders,
   t9n,
+  themed,
 } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
 import { CSS as ComboboxItemCSS } from "../combobox-item/resources";
@@ -2003,6 +2004,73 @@ describe("calcite-combobox", () => {
     expect(chips.length).toBe(2);
   });
 
+  describe("theme", () => {
+    describe("default", () => {
+      themed(
+        html`
+          <calcite-combobox>
+            <calcite-combobox-item value="first" text-label="First" selected></calcite-combobox-item>
+          </calcite-combobox>
+        `,
+        {
+          "--calcite-combobox-border-color": {
+            shadowSelector: `.${CSS.wrapper}`,
+            targetProp: "borderColor",
+          },
+          "--calcite-combobox-background-color": {
+            shadowSelector: `.${CSS.wrapper}`,
+            targetProp: "backgroundColor",
+          },
+          "--calcite-combobox-text-color": {
+            shadowSelector: `.${CSS.wrapper}`,
+            targetProp: "color",
+          },
+        },
+      );
+    });
+
+    describe("active chip", () => {
+      themed(
+        async () => {
+          const page = await newE2EPage();
+          await page.setContent(`html
+          <calcite-combobox>
+            <calcite-combobox-item value="first" text-label="First" selected></calcite-combobox-item>
+          </calcite-combobox>
+        `);
+          const combobox = await page.find("calcite-combobox");
+
+          await combobox.click();
+          await combobox.press("ArrowLeft");
+          await page.waitForChanges();
+
+          return { page, tag: "calcite-combobox" };
+        },
+        {
+          "--calcite-combobox-chip-background-color-active": {
+            shadowSelector: `.${CSS.chipActive}`,
+            targetProp: "--calcite-chip-background-color",
+          },
+        },
+      );
+    });
+
+    describe("deprecated", () => {
+      themed("calcite-combobox", {
+        "--calcite-combobox-input-height": [
+          {
+            shadowSelector: `.${CSS.input}`,
+            targetProp: "blockSize",
+          },
+          {
+            shadowSelector: `.${CSS.input}`,
+            targetProp: "line-height",
+          },
+        ],
+      });
+    });
+  });
+
   it("prevents opening a readonly combobox", async () => {
     const page = await newE2EPage();
     await page.setContent(html`

diff --git a/packages/calcite-components/src/components/combobox/combobox.scss b/packages/calcite-components/src/components/combobox/combobox.scss
@@ -3,11 +3,11 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-combobox-input-height: [Deprecated] Specifies the height of the component's input.
- * @prop --calcite-combobox-border-color: defines the border color of the component
  * @prop --calcite-combobox-background-color: defines the background color of the component
- * @prop --calcite-combobox-text-color: defines the text color of the component
+ * @prop --calcite-combobox-border-color: defines the border color of the component
  * @prop --calcite-combobox-chip-background-color-active: defines the background color of a chip sub-component when active
+ * @prop --calcite-combobox-input-height: [Deprecated] Specifies the height of the component's input.
+ * @prop --calcite-combobox-text-color: defines the text color of the component
  */
 
 /*
@@ -29,23 +29,23 @@
   @apply text-n2;
   --calcite-internal-combobox-space-large: theme("spacing.2");
   --calcite-internal-combobox-space-small: theme("spacing.1");
-  --calcite-internal-combobox-height: theme("spacing.4");
+  --calcite-internal-combobox-height: var(--calcite-combobox-input-height, theme("spacing.4"));
   --calcite-internal-combobox-space-y: calc(theme("spacing.1") - theme("borderWidth.DEFAULT"));
 }
 
 :host([scale="m"]) {
   @apply text-n1;
   --calcite-internal-combobox-space-large: theme("spacing.3");
   --calcite-internal-combobox-space-small: theme("spacing.2");
-  --calcite-internal-combobox-height: theme("spacing.4");
+  --calcite-internal-combobox-height: var(--calcite-combobox-input-height, theme("spacing.4"));
   --calcite-internal-combobox-space-y: calc(theme("spacing.2") - theme("borderWidth.DEFAULT"));
 }
 
 :host([scale="l"]) {
   @apply text-0;
   --calcite-internal-combobox-space-large: theme("spacing.4");
   --calcite-internal-combobox-space-small: theme("spacing.3");
-  --calcite-internal-combobox-height: theme("spacing.6");
+  --calcite-internal-combobox-height: var(--calcite-combobox-input-height, theme("spacing.6"));
   --calcite-internal-combobox-space-y: calc(theme("spacing[2.5]") - theme("borderWidth.DEFAULT"));
 }
 
@@ -244,7 +244,10 @@ calcite-chip {
 }
 
 .chip--active {
-  background-color: var(--calcite-combobox-chip-background-color-active, var(--calcite-color-foreground-3));
+  --calcite-chip-background-color: var(
+    --calcite-combobox-chip-background-color-active,
+    var(--calcite-color-foreground-3)
+  );
 }
 
 .chip--invisible {

diff --git a/packages/calcite-components/src/components/combobox/combobox.tsx b/packages/calcite-components/src/components/combobox/combobox.tsx
@@ -1375,7 +1375,7 @@ export class Combobox
     return this.selectedItems.map((item, i) => {
       const chipClasses = {
         chip: true,
-        "chip--active": activeChipIndex === i,
+        [CSS.chipActive]: activeChipIndex === i,
       };
       const ancestors = [...getItemAncestors(item)].reverse();
       const pathLabel = [...ancestors, item].map((el) => el.textLabel);
@@ -1696,7 +1696,7 @@ export class Combobox
           <div
             aria-live="polite"
             class={{
-              wrapper: true,
+              [CSS.wrapper]: true,
               "wrapper--single": singleSelectionMode || !this.selectedItems.length,
               "wrapper--active": open,
             }}

diff --git a/packages/calcite-components/src/components/combobox/resources.ts b/packages/calcite-components/src/components/combobox/resources.ts
@@ -3,10 +3,12 @@ export const ComboboxItemGroup = "CALCITE-COMBOBOX-ITEM-GROUP";
 export const ComboboxChildSelector = `${ComboboxItem}, ${ComboboxItemGroup}`;
 
 export const CSS = {
-  input: "input",
+  chipActive: "chip--active",
   chipInvisible: "chip--invisible",
+  icon: "icon",
+  input: "input",
+  listContainer: "list-container",
   selectionDisplayFit: "selection-display-fit",
   selectionDisplaySingle: "selection-display-single",
-  listContainer: "list-container",
-  icon: "icon",
+  wrapper: "wrapper",
 };
diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts b/packages/calcite-components/src/components/input-time-zone/input-time-zone.e2e.ts
@@ -529,11 +529,11 @@ describe("calcite-input-time-zone", () => {
         },
         "--calcite-input-combobox-item-indicator-icon-color-active": {
           shadowSelector: "calcite-combobox-item",
-          targetProp: "--calcite-combobox-item-indicator-icon-color-active",
+          targetProp: "--calcite-combobox-item-indicator-color-active",
         },
         "--calcite-input-combobox-item-indicator-icon-color": {
           shadowSelector: "calcite-combobox-item",
-          targetProp: "--calcite-combobox-item-indicator-icon-color",
+          targetProp: "--calcite-combobox-item-indicator-color",
         },
         "--calcite-input-combobox-item-shadow": {
           shadowSelector: "calcite-combobox-item",

diff --git a/packages/calcite-components/src/components/input-time-zone/input-time-zone.scss b/packages/calcite-components/src/components/input-time-zone/input-time-zone.scss
@@ -29,8 +29,8 @@ calcite-combobox {
 calcite-combobox-item {
   --calcite-combobox-item-background-color-active: var(--calcite-input-combobox-item-background-color-active);
   --calcite-combobox-item-background-color: var(--calcite-input-combobox-item-background-color);
-  --calcite-combobox-item-indicator-icon-color-active: var(--calcite-input-combobox-item-indicator-icon-color-active);
-  --calcite-combobox-item-indicator-icon-color: var(--calcite-input-combobox-item-indicator-icon-color);
+  --calcite-combobox-item-indicator-color-active: var(--calcite-input-combobox-item-indicator-icon-color-active);
+  --calcite-combobox-item-indicator-color: var(--calcite-input-combobox-item-indicator-icon-color);
   --calcite-combobox-item-icon-color: var(--calcite-input-combobox-item-icon-color);
   --calcite-combobox-item-shadow: var(--calcite-input-combobox-item-shadow);
   --calcite-combobox-item-text-color-active: var(--calcite-input-combobox-item-text-color-active);