fix(list, list-item, list-item-group): add e2e themed tests (#9616)

**Related Issue:** #7180 ## Summary Made sure components were UTD with /dev to reduce merge conflict churn Updates component tokens Update e2e themed tests
Esri · Jun 19, 2024 · 7f60326 · 7f60326
1 parent f2f37f1
commit 7f60326
Show file tree

Hide file tree

Showing 6 changed files with 359 additions and 219 deletions.
diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts b/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts
@@ -1,4 +1,7 @@
-import { hidden, renders, disabled, defaults } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+import { hidden, renders, disabled, defaults, themed } from "../../tests/commonTests";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
+import { CSS } from "./resources";
 
 describe("calcite-list-item-group", () => {
   describe("renders", () => {
@@ -33,4 +36,33 @@ describe("calcite-list-item-group", () => {
       },
     ]);
   });
+
+  describe("themed", () => {
+    const tokens: ComponentTestTokens = {
+      "--calcite-list-item-group-background-color": {
+        selector: "calcite-list-item-group",
+        targetProp: "backgroundColor",
+      },
+      "--calcite-list-item-group-text-color": {
+        selector: "calcite-list-item-group",
+        shadowSelector: `.${CSS.container}`,
+        targetProp: "color",
+      },
+    };
+    themed(
+      html`<calcite-list selection-mode="single">
+        <calcite-list-item-group>
+          <calcite-list-item label="Apples" description="Apples are cool" value="apples" open></calcite-list-item>
+          <calcite-list-item
+            label="Oranges"
+            description="Oranges are cool"
+            value="oranges"
+            selected
+          ></calcite-list-item>
+          <calcite-list-item label="Pears" description="Pears are cool" value="pears"></calcite-list-item>
+        </calcite-list-item-group>
+      </calcite-list>`,
+      tokens,
+    );
+  });
 });
diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.scss b/packages/calcite-components/src/components/list-item-group/list-item-group.scss
@@ -4,43 +4,27 @@
  * These properties can be overridden using the component's tag as selector.
  *
  * @prop --calcite-list-item-group-background-color: Specifies the background color of the component.
- * @prop --calcite-list-item-group-border-color: Specifies the border color of the component.
- * @prop --calcite-list-item-heading-text-color: Specifies the text color of the component's heading.
+ * @prop --calcite-list-item-group-text-color: Specifies the text color of the component.
  */
 
 :host {
-  display: flex;
-  flex-direction: column;
+  @apply flex flex-col;
+  background-color: var(--calcite-list-item-group-background-color, var(--calcite-color-foreground-1));
 }
 
 :host([filter-hidden]) {
-  display: none;
+  @apply hidden;
 }
 
 @include disabled();
 
 .container {
   @apply text-n1 m-0 flex flex-1 p-3 font-medium;
-
-  color: var(--calcite-list-item-group-heading-text-color, var(--calcite-color-text-2));
+  color: var(--calcite-list-item-group-text-color, var(--calcite-color-text-2));
 }
 
 .heading {
   @apply p-0;
-  padding-inline-start: calc(
-    var(--calcite-internal-list-item-spacing-indent, var(--calcite-spacing-xl)) *
-      var(--calcite-internal-list-item-spacing-indent-multiplier)
-  );
-}
-
-::slotted(calcite-list-item) {
-  border-block-start: var(--calcite-border-width-sm) solid
-    var(--calcite-list-item-group-border-color, var(--calcite-color-border-3));
-}
-
-// removes border for the first item of the group for both filtered and unfiltered items.
-::slotted(calcite-list-item:nth-child(1 of :not([hidden]))) {
-  border: none;
 }
 
 @include base-component();
diff --git a/packages/calcite-components/src/components/list-item/list-item.e2e.ts b/packages/calcite-components/src/components/list-item/list-item.e2e.ts
@@ -1,6 +1,7 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { defaults, disabled, focusable, hidden, renders, slots } from "../../tests/commonTests";
+import { defaults, disabled, focusable, hidden, renders, slots, themed } from "../../tests/commonTests";
 import { html } from "../../../support/formatting";
+import { ComponentTestTokens } from "../../tests/commonTests/themed";
 import { CSS, SLOTS } from "./resources";
 
 describe("calcite-list-item", () => {
@@ -341,4 +342,149 @@ describe("calcite-list-item", () => {
     expect(await listItem.getProperty("dragSelected")).toBe(false);
     expect(calciteListItemDragHandleChange).toHaveReceivedEventTimes(2);
   });
+
+  describe("theme", () => {
+    describe("default", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-list-item-background-color-active": {
+          selector: "calcite-list-item",
+          shadowSelector: `.${CSS.container}`,
+          targetProp: "backgroundColor",
+          state: { press: { attribute: "class", value: CSS.container } },
+        },
+        "--calcite-list-item-background-color-hover": {
+          selector: "calcite-list-item",
+          shadowSelector: `.${CSS.containerHover}`,
+          targetProp: "backgroundColor",
+          state: "hover",
+        },
+        "--calcite-list-item-background-color": [
+          {
+            selector: "calcite-list-item",
+            targetProp: "backgroundColor",
+          },
+          {
+            selector: "calcite-list-item",
+            shadowSelector: `.${CSS.container}`,
+            targetProp: "backgroundColor",
+          },
+        ],
+        "--calcite-list-item-border-color": {
+          selector: "calcite-list-item",
+          shadowSelector: `.${CSS.nestedContainer}`,
+          targetProp: "borderBlockEndColor",
+        },
+        "--calcite-list-item-description-text-color-selected": {
+          selector: "calcite-list-item[selected]",
+          shadowSelector: `.${CSS.description}`,
+          targetProp: "color",
+        },
+        "--calcite-list-item-description-text-color": {
+          selector: "calcite-list-item",
+          shadowSelector: `.${CSS.description}`,
+          targetProp: "color",
+        },
+        "--calcite-list-item-label-text-color": {
+          selector: "calcite-list-item",
+          shadowSelector: `.${CSS.label}`,
+          targetProp: "color",
+        },
+        "--calcite-list-item-spacing-indent": {
+          selector: "calcite-list-item",
+          targetProp: "marginInlineStart",
+          shadowSelector: `.${CSS.nestedContainer}`,
+        },
+        "--calcite-list-item-indicator-color": {
+          selector: "calcite-list-item",
+          shadowSelector: `.${CSS.selectionContainer}`,
+          targetProp: "color",
+        },
+        "--calcite-list-item-indicator-color-hover": {
+          selector: "calcite-list-item",
+          shadowSelector: `.${CSS.selectionContainer}`,
+          targetProp: "color",
+          state: "hover",
+        },
+        "--calcite-list-item-indicator-color-selected": {
+          selector: "calcite-list-item[selected]",
+          shadowSelector: `.${CSS.selectionContainer}`,
+          targetProp: "color",
+        },
+      };
+      themed(
+        html`<calcite-list selection-mode="single">
+          <calcite-list-item label="Apples" description="Apples are cool" value="apples" open>
+            <calcite-list>
+              <calcite-list-item label="Red" description="Red is cool" value="red"></calcite-list-item>
+              <calcite-list-item label="Green" description="Green is cool" value="green"></calcite-list-item>
+              <calcite-list-item label="Yellow" description="Yellow is cool" value="yellow"></calcite-list-item>
+            </calcite-list>
+          </calcite-list-item>
+          <calcite-list-item
+            label="Oranges"
+            description="Oranges are cool"
+            value="oranges"
+            selected
+          ></calcite-list-item>
+          <calcite-list-item label="Pears" description="Pears are cool" value="pears"></calcite-list-item>
+        </calcite-list>`,
+        tokens,
+      );
+    });
+    describe("border", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-list-item-border-color": {
+          selector: "calcite-list-item[selected]",
+          shadowSelector: `.${CSS.wrapperBordered}`,
+          targetProp: "borderBlockEndColor",
+        },
+        "--calcite-list-item-indicator-color": {
+          selector: "calcite-list-item[selected]",
+          shadowSelector: `.${CSS.containerBorder}`,
+          targetProp: "borderInlineStartColor",
+        },
+        "--calcite-list-item-indicator-color-hover": {
+          selector: "calcite-list-item[selected]",
+          shadowSelector: `.${CSS.containerBorder}`,
+          targetProp: "borderInlineStartColor",
+          state: "hover",
+        },
+        "--calcite-list-item-indicator-color-selected": {
+          selector: "calcite-list-item[selected]",
+          shadowSelector: `.${CSS.containerBorder}`,
+          targetProp: "borderInlineStartColor",
+        },
+      };
+      themed(
+        html`<calcite-list selection-appearance="border" selection-mode="single">
+          <calcite-list-item label="Apples" description="Apples are cool" value="apples" open selected>
+            <calcite-list>
+              <calcite-list-item label="Red" description="Red is cool" value="red"></calcite-list-item>
+              <calcite-list-item label="Green" description="Green is cool" value="green"></calcite-list-item>
+              <calcite-list-item label="Yellow" description="Yellow is cool" value="yellow"></calcite-list-item>
+            </calcite-list>
+          </calcite-list-item>
+          <calcite-list-item label="Oranges" description="Oranges are cool" value="oranges"></calcite-list-item>
+          <calcite-list-item label="Pears" description="Pears are cool" value="pears"></calcite-list-item>
+        </calcite-list>`,
+        tokens,
+      );
+    });
+    describe("filtered fallback", () => {
+      const tokens: ComponentTestTokens = {
+        "--calcite-list-background-color": {
+          selector: "calcite-list-item",
+          targetProp: "backgroundColor",
+        },
+      };
+      themed(
+        html`<calcite-list>
+          <calcite-list-item label="Apples" value="apples"></calcite-list-item>
+          <calcite-list-item label="Oranges" value="oranges"></calcite-list-item>
+          <calcite-list-item label="Pears" value="pears"></calcite-list-item>
+        </calcite-list>`,
+        tokens,
+      );
+    });
+  });
 });