fix(action-menu): update component and add E2E tests

packages/calcite-components/src/components/action-menu/action-menu.e2e.ts

@@ -1,4 +1,4 @@
-import { E2EPage, newE2EPage } from "@stencil/core/testing";
+import { newE2EPage } from "@stencil/core/testing";
 import { html } from "../../../support/formatting";
 import {
   accessible,
@@ -9,6 +9,7 @@ import {
   reflects,
   renders,
   slots,
+  themed,
 } from "../../tests/commonTests";
 import { TOOLTIP_OPEN_DELAY_MS } from "../tooltip/resources";
 import { CSS, SLOTS, activeAttr } from "./resources";
@@ -527,49 +528,119 @@ describe("calcite-action-menu", () => {
     });
   });
 
-  describe("Theme-ing", () => {
-    let page: E2EPage;
-    const customTheme = {
-      "--calcite-action-menu-group-separator-border-color": "rgb(192, 255, 238)",
-    };
-
-    beforeEach(async () => {
-      page = await newE2EPage({
-        html: `
-        <calcite-action-menu open>
-          <calcite-action slot="trigger" text="Add" icon="banana"></calcite-action>
-          <calcite-action-group>
-            <calcite-action text="Plus" icon="plus" text-enabled></calcite-action
-            ><calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
-          </calcite-action-group>
-          <calcite-action-group>
-            <calcite-action text="Table" icon="table" text-enabled></calcite-action
-          ></calcite-action-group>
-          <calcite-action-group>
-            <calcite-action text="Save" icon="save" text-enabled></calcite-action>
-          </calcite-action-group>
-        </calcite-action-menu>
-      `,
-      });
-      await page.waitForChanges();
+  describe("theme", () => {
+    describe("default", () => {
+      const tokens = {
+        "--calcite-action-menu-trigger-background-color-active": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-background-color",
+          state: { press: { attribute: "class", value: CSS.defaultTrigger } },
+        },
+        "--calcite-action-menu-trigger-background-color-focus": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-background-color",
+          state: "focus",
+        },
+        "--calcite-action-menu-trigger-background-color-hover": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-background-color",
+          state: "hover",
+        },
+        "--calcite-action-menu-trigger-background-color": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-background-color",
+        },
+        "--calcite-action-menu-trigger-icon-color-active": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-icon-color",
+          state: { press: { attribute: "class", value: CSS.defaultTrigger } },
+        },
+        "--calcite-action-menu-trigger-icon-color-focus": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-icon-color",
+          state: "focus",
+        },
+        "--calcite-action-menu-trigger-icon-color-hover": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-icon-color",
+          state: "hover",
+        },
+        "--calcite-action-menu-trigger-icon-color": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-icon-color",
+        },
+        "--calcite-action-menu-trigger-shadow-active": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-shadow",
+          state: { press: { attribute: "class", value: CSS.defaultTrigger } },
+        },
+        "--calcite-action-menu-trigger-shadow-focus": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-shadow",
+          state: "focus",
+        },
+        "--calcite-action-menu-trigger-shadow-hover": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-shadow",
+          state: "hover",
+        },
+        "--calcite-action-menu-trigger-shadow": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-shadow",
+        },
+        "--calcite-action-menu-trigger-text-color-active": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-text-color",
+          state: { press: { attribute: "class", value: CSS.defaultTrigger } },
+        },
+        "--calcite-action-menu-trigger-text-color-focus": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-text-color",
+          state: "focus",
+        },
+        "--calcite-action-menu-trigger-text-color-hover": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-text-color",
+          state: "hover",
+        },
+        "--calcite-action-menu-trigger-text-color": {
+          shadowSelector: "calcite-action",
+          targetProp: "--calcite-action-text-color",
+        },
+      } as const;
+      themed("calcite-action-menu", tokens);
     });
-
-    it("should allow theme-ing of the border-color", async () => {
-      const actionMenu = await page.find("calcite-action-menu");
-      const slottedActionGroup = await page.find("calcite-action-group");
-      const defaultStyle = await slottedActionGroup.getComputedStyle();
-
-      await actionMenu.setAttribute(
-        "style",
-        `--calcite-action-menu-group-separator-border-color: ${customTheme["--calcite-action-menu-group-separator-border-color"]}`,
-      );
-      await page.waitForChanges();
-
-      const styles = await slottedActionGroup.getComputedStyle();
-      expect(defaultStyle.borderBlockEndColor).not.toBe(
-        customTheme["--calcite-action-menu-group-separator-border-color"],
+    describe("popover", () => {
+      const tokens = {
+        "--calcite-action-menu-popover-background-color": {
+          shadowSelector: "calcite-popover",
+          targetProp: "--calcite-popover-background-color",
+        },
+        "--calcite-action-menu-popover-border-color": {
+          shadowSelector: "calcite-popover",
+          targetProp: "--calcite-popover-border-color",
+        },
+        "--calcite-action-menu-popover-corner-radius": {
+          shadowSelector: "calcite-popover",
+          targetProp: "--calcite-popover-corner-radius",
+        },
+        "--calcite-action-menu-popover-shadow": {
+          shadowSelector: "calcite-popover",
+          targetProp: "--calcite-popover-shadow",
+        },
+        "--calcite-action-menu-popover-text-color": {
+          shadowSelector: "calcite-popover",
+          targetProp: "--calcite-popover-text-color",
+        },
+      } as const;
+      themed(
+        html`<calcite-action-menu open>
+          <calcite-action id="triggerAction" slot="${SLOTS.trigger}" text="Add" icon="plus"></calcite-action>
+          <calcite-action text="Add" icon="plus"></calcite-action>
+          <calcite-action text="Add" icon="plus"></calcite-action
+        ></calcite-action-menu>`,
+        tokens,
       );
-      expect(styles.borderBlockEndColor).toBe(customTheme["--calcite-action-menu-group-separator-border-color"]);
     });
   });
 });

packages/calcite-components/src/components/action-menu/action-menu.scss

@@ -3,35 +3,33 @@
  *
  * These properties can be overridden using the component's tag as selector.
  *
- * @prop --calcite-action-menu-close-background-color-active: Specifies the background color of an action sub-component when active inside the component.
- * @prop --calcite-action-menu-close-background-color-hover: Specifies the background color of an action sub-component when hovered or focused inside the component.
- * @prop --calcite-action-menu-close-background-color: Specifies the background color of an action sub-component inside the component.
- * @prop --calcite-action-menu-close-icon-color-active: Specifies the component's close icon color when active.
- * @prop --calcite-action-menu-close-icon-color-hover: Specifies the component's close icon color on hover.
- * @prop --calcite-action-menu-close-icon-color: Specifies the component's close icon color.
- * @prop --calcite-action-menu-close-text-color-active: Specifies the text color of an action sub-component when active inside the component.
- * @prop --calcite-action-menu-close-text-color-hover: Specifies the text color of an action sub-component when hovered or focused inside the component.
- * @prop --calcite-action-menu-close-text-color: Specifies the text color of an action sub-component inside the component.
- * @prop --calcite-action-menu-popover-background-color: Specifies the background color of the component.
- * @prop --calcite-action-menu-popover-border-color: Specifies the border color of the component.
- * @prop --calcite-action-menu-popover-corner-radius: Specifies the corner radius of the component.
- * @prop --calcite-action-menu-popover-shadow: Specifies the shadow of the component.
- * @prop --calcite-action-menu-popover-text-color: Specifies the text color of the component.
  * @prop --calcite-action-menu-trigger-background-color-active: Specifies the background color of the component's default trigger when active.
  * @prop --calcite-action-menu-trigger-background-color-focus: Specifies the background color of the component's default trigger when focused.
  * @prop --calcite-action-menu-trigger-background-color-hover: Specifies the background color of the component's default trigger when hovered.
  * @prop --calcite-action-menu-trigger-background-color: Specifies the background color of the component.
  * @prop --calcite-action-menu-trigger-icon-color-active: Specifies the background color of the component's default trigger when active.
  * @prop --calcite-action-menu-trigger-icon-color-focus: Specifies the background color of the component's default trigger when focused.
  * @prop --calcite-action-menu-trigger-icon-color-hover: Specifies the background color of the component's default trigger when hovered.
- * @prop --calcite-action-menu-trigger-icon-color: Specifies the color of the component's icon.
- * @prop --calcite-action-menu-trigger-indicator-color: Specifies the color of the component's indicator.
- * @prop --calcite-action-menu-trigger-loader-color: Specifies the color of the component's loader.
- * @prop --calcite-action-menu-trigger-shadow: Specifies the shadow of the component.
+ * @prop --calcite-action-menu-trigger-icon-color: Specifies the color of the component's default trigger icon.
+ * @prop --calcite-action-menu-trigger-shadow-active: Specifies the shadow of the component  default trigger  when active.
+ * @prop --calcite-action-menu-trigger-shadow-focus: Specifies the shadow of the component  default trigger  when focused.
+ * @prop --calcite-action-menu-trigger-shadow-hover: Specifies the shadow of the component  default trigger  when hovered.
+ * @prop --calcite-action-menu-trigger-shadow: Specifies the shadow of the component  default trigger .
  * @prop --calcite-action-menu-trigger-text-color-active: Specifies the background color of the component's default trigger when active.
  * @prop --calcite-action-menu-trigger-text-color-focus: Specifies the background color of the component's default trigger when focused.
  * @prop --calcite-action-menu-trigger-text-color-hover: Specifies the background color of the component's default trigger when hovered.
- * @prop --calcite-action-menu-trigger-text-color: Specifies the text color of the component.
+ * @prop --calcite-action-menu-trigger-text-color: Specifies the text color of the  default trigger .
+ * @prop --calcite-action-menu-popover-background-color: Specifies the background color of the popover sub-componen.
+ * @prop --calcite-action-menu-popover-border-color: Specifies the border color of the popover sub-componen.
+ * @prop --calcite-action-menu-popover-close-background-color-active: Specifies the background color of an popover sub-component close button when active inside the component.
+ * @prop --calcite-action-menu-popover-close-background-color-hover: Specifies the background color of an popover sub-component close button when hovered inside the component.
+ * @prop --calcite-action-menu-popover-close-background-color: Specifies the background color of an popover sub-component close button.
+ * @prop --calcite-action-menu-popover-close-icon-color-active: Specifies the icon color of an popover sub-component close button when active inside the component.
+ * @prop --calcite-action-menu-popover-close-icon-color-hover: Specifies the icon color of an popover sub-component close button when hovered inside the component.
+ * @prop --calcite-action-menu-popover-close-icon-color: Specifies the icon color of an popover sub-component close button.
+ * @prop --calcite-action-menu-popover-corner-radius: Specifies the corner radius of an popover sub-component.
+ * @prop --calcite-action-menu-popover-shadow: Specifies the shadow of an popover sub-component.
+ * @prop --calcite-action-menu-popover-text-color: Specifies the text color of an popover sub-component.
  *
  */
 
@@ -42,13 +40,15 @@
   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);
   --calcite-action-icon-color: var(--calcite-action-menu-trigger-icon-color);
   --calcite-action-shadow: var(--calcite-action-menu-trigger-shadow);
-  --calcite-action-indicator-color: var(--calcite-action-menu-trigger-indicator-color);
-  --calcite-action-loader-color: var(--calcite-action-menu-trigger-loader-color);
 
   &:hover {
     --calcite-action-background-color: var(--calcite-action-menu-trigger-background-color-hover);
@@ -70,39 +70,9 @@ calcite-action {
 calcite-popover {
   --calcite-popover-background-color: var(--calcite-action-menu-popover-background-color);
   --calcite-popover-border-color: var(--calcite-action-menu-popover-border-color);
-  --calcite-popover-close-background-color-active: var(
-    --calcite-action-menu-close-background-color-active,
-    var(--calcite-action-menu-trigger-background-color-active)
-  );
-  --calcite-popover-close-background-color-hover: var(
-    --calcite-action-menu-close-background-color-hover,
-    var(--calcite-action-menu-trigger-background-color-hover)
-  );
-  --calcite-popover-close-background-color: var(
-    --calcite-action-menu-close-background-color,
-    var(--calcite-action-menu-trigger-background-color)
-  );
-  --calcite-popover-close-icon-color-active: var(--calcite-action-menu-close-icon-color-active);
-  --calcite-popover-close-icon-color-hover: var(--calcite-action-menu-close-icon-color-hover);
-  --calcite-popover-close-icon-color: var(--calcite-action-menu-close-icon-color);
-  --calcite-popover-close-text-color-active: var(
-    --calcite-action-menu-close-text-color-active,
-    var(--calcite-action-menu-trigger-text-color-active)
-  );
-  --calcite-popover-close-text-color-hover: var(
-    --calcite-action-menu-close-text-color-hover,
-    var(--calcite-action-menu-trigger-text-color-hover)
-  );
-  --calcite-popover-close-text-color: var(
-    --calcite-action-menu-close-text-color,
-    var(--calcite-action-menu-trigger-text-color)
-  );
   --calcite-popover-corner-radius: var(--calcite-action-menu-popover-corner-radius);
   --calcite-popover-shadow: var(--calcite-action-menu-popover-shadow);
-  --calcite-popover-text-color: var(
-    --calcite-action-menu-popover-text-color,
-    var(--calcite-action-menu-trigger-text-color)
-  );
+  --calcite-popover-text-color: var(--calcite-action-menu-popover-text-color);
 }
 
 .default-trigger {

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>
     );
   }
 

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 = {