refactor(action-group, action-menu): add classes for E2E tests (#9059)

**Related Issue:** #7180 ## Summary This adds a container class and an expand class to the shadowDom which are necessary for correctly targeting elements in E2E tests.
Esri · Apr 12, 2024 · 32041e5 · 32041e5
1 parent 490a5ef
commit 32041e5
Show file tree

Hide file tree

Showing 6 changed files with 136 additions and 4 deletions.
diff --git a/packages/calcite-components/src/components/action-group/action-group.e2e.ts b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
@@ -1,5 +1,15 @@
 import { newE2EPage } from "@stencil/core/testing";
-import { accessible, defaults, focusable, hidden, renders, slots, t9n } from "../../tests/commonTests";
+import {
+  TestSelectToken,
+  accessible,
+  defaults,
+  focusable,
+  hidden,
+  renders,
+  slots,
+  t9n,
+  themed,
+} from "../../tests/commonTests";
 import { CSS, SLOTS } from "./resources";
 
 const actionGroupHTML = `<calcite-action-group scale="l">
@@ -72,4 +82,119 @@ describe("calcite-action-group", () => {
   describe("translation support", () => {
     t9n("calcite-action-group");
   });
+
+  describe("theme", () => {
+    const tokens = {
+      "--calcite-action-group-border-color": [
+        {
+          targetProp: "borderLeftColor",
+        },
+        {
+          shadowSelector: "calcite-action-menu",
+          targetProp: "--calcite-action-menu-popover-border-color",
+        },
+      ] as TestSelectToken[],
+      "--calcite-action-group-popover-background-color": {
+        shadowSelector: "calcite-action-menu",
+        targetProp: "--calcite-action-menu-popover-background-color",
+      },
+      "--calcite-action-group-popover-border-color": {
+        shadowSelector: "calcite-action-menu",
+        targetProp: "--calcite-action-menu-popover-border-color",
+      },
+      "--calcite-action-group-popover-corner-radius": {
+        shadowSelector: "calcite-action-menu",
+        targetProp: "--calcite-action-menu-popover-corner-radius",
+      },
+      "--calcite-action-group-popover-shadow": {
+        shadowSelector: "calcite-action-menu",
+        targetProp: "--calcite-action-menu-popover-shadow",
+      },
+      "--calcite-action-group-trigger-background-color-active": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-background-color",
+        state: { press: { attribute: "class", value: CSS.expandToggle } },
+      },
+      "--calcite-action-group-trigger-background-color-focus": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-background-color",
+        state: "focus",
+      },
+      "--calcite-action-group-trigger-background-color-hover": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-background-color",
+        state: "hover",
+      },
+      "--calcite-action-group-trigger-background-color": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-background-color",
+      },
+      "--calcite-action-group-trigger-icon-color-active": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-icon-color",
+        state: { press: { attribute: "class", value: CSS.expandToggle } },
+      },
+      "--calcite-action-group-trigger-icon-color-focus": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-icon-color",
+        state: "focus",
+      },
+      "--calcite-action-group-trigger-icon-color-hover": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-icon-color",
+        state: "hover",
+      },
+      "--calcite-action-group-trigger-icon-color": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-icon-color",
+      },
+      "--calcite-action-group-trigger-indicator-color": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-indicator-color",
+      },
+      "--calcite-action-group-trigger-loader-color": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-loader-color",
+      },
+      "--calcite-action-group-trigger-shadow-active": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-shadow",
+        state: { press: { attribute: "class", value: CSS.expandToggle } },
+      },
+      "--calcite-action-group-trigger-shadow-hover": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-shadow",
+        state: "hover",
+      },
+      "--calcite-action-group-trigger-shadow-focus": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-shadow",
+        state: "focus",
+      },
+      "--calcite-action-group-trigger-shadow": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-shadow",
+      },
+      "--calcite-action-group-trigger-text-color-active": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-text-color",
+        state: { press: { attribute: "class", value: CSS.expandToggle } },
+      },
+      "--calcite-action-group-trigger-text-color-hover": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-text-color",
+        state: "hover",
+      },
+      "--calcite-action-group-trigger-text-color-focus": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-text-color",
+        state: "focus",
+      },
+      "--calcite-action-group-trigger-text-color": {
+        shadowSelector: "calcite-action",
+        targetProp: "--calcite-action-text-color",
+      },
+    } as const;
+    themed(`calcite-action-group`, tokens);
+  });
 });
diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx
@@ -193,6 +193,7 @@ export class ActionGroup
         scale={scale}
       >
         <calcite-action
+          class={CSS.expandToggle}
           icon={ICONS.menu}
           scale={scale}
           slot={ACTION_MENU_SLOTS.trigger}

diff --git a/packages/calcite-components/src/components/action-group/resources.ts b/packages/calcite-components/src/components/action-group/resources.ts
@@ -9,4 +9,5 @@ export const ICONS = {
 
 export const CSS = {
   container: "container",
+  expandToggle: "expand-toggle",
 };
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.scss b/packages/calcite-components/src/components/action-menu/action-menu.scss
@@ -42,6 +42,10 @@
   flex-col;
 }
 
+.container {
+  display: contents;
+}
+
 calcite-action {
   --calcite-action-background-color: var(--calcite-action-menu-trigger-background-color);
   --calcite-action-text-color: var(--calcite-action-menu-trigger-text-color);

diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -9,7 +9,7 @@ import {
   State,
   Watch,
 } from "@stencil/core";
-import { Fragment, VNode } from "@stencil/core/internal";
+import { VNode } from "@stencil/core/internal";
 import { getRoundRobinIndex } from "../../utils/array";
 import { focusElement, toAriaBoolean } from "../../utils/dom";
 import { EffectivePlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui";
@@ -322,11 +322,11 @@ export class ActionMenu implements LoadableComponent {
 
   render(): VNode {
     return (
-      <Fragment>
+      <div class={CSS.container}>
         {this.renderMenuButton()}
         {this.renderMenuItems()}
         <slot name={SLOTS.tooltip} onSlotchange={this.updateTooltip} />
-      </Fragment>
+      </div>
     );
   }
 

diff --git a/packages/calcite-components/src/components/action-menu/resources.ts b/packages/calcite-components/src/components/action-menu/resources.ts
@@ -1,6 +1,7 @@
 export const CSS = {
   menu: "menu",
   defaultTrigger: "default-trigger",
+  container: "container",
 };
 
 export const SLOTS = {