feat(action-menu): support action-groups (#8273)

**Related Issue:** #8202 ## Summary - Adds support for `calcite-action-group` within `calcite-action-menu` - Adds screenshot test - Adds e2e test
Esri · Nov 28, 2023 · c07144f · c07144f
1 parent 5813985
commit c07144f
Show file tree

Hide file tree

Showing 4 changed files with 42 additions and 8 deletions.
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.scss b/packages/calcite-components/src/components/action-menu/action-menu.scss
@@ -6,15 +6,12 @@
   flex-col;
 }
 
-.menu ::slotted(calcite-action) {
-  @apply focus-base
-  m-0.5
-  flex;
+::slotted(calcite-action-group) {
+  border-block-end: 1px solid var(--calcite-ui-border-3);
 }
 
-.menu ::slotted(calcite-action[data-active]) {
-  @apply focus-outset;
-  outline-offset: 0px;
+::slotted(calcite-action-group:last-child) {
+  border-block-end: 0;
 }
 
 .default-trigger {

diff --git a/packages/calcite-components/src/components/action-menu/action-menu.stories.ts b/packages/calcite-components/src/components/action-menu/action-menu.stories.ts
@@ -39,6 +39,23 @@ export const open = (): string =>
     </calcite-action-menu>
   `;
 
+export const openWithGroups = (): string =>
+  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>
+  `;
+
 export const keyDownOpen_TestOnly = (): string =>
   html`
     <calcite-action-menu>

diff --git a/packages/calcite-components/src/components/action-menu/action-menu.tsx b/packages/calcite-components/src/components/action-menu/action-menu.tsx
@@ -401,7 +401,23 @@ export class ActionMenu implements LoadableComponent {
       .assignedElements({
         flatten: true,
       })
-      .filter((el) => el?.matches("calcite-action")) as HTMLCalciteActionElement[];
+      .reduce(
+        (previousValue: HTMLCalciteActionElement[], currentValue): HTMLCalciteActionElement[] => {
+          if (currentValue?.matches("calcite-action")) {
+            previousValue.push(currentValue as HTMLCalciteActionElement);
+            return previousValue;
+          }
+
+          if (currentValue?.matches("calcite-action-group")) {
+            return previousValue.concat(
+              Array.from(currentValue.querySelectorAll("calcite-action"))
+            );
+          }
+
+          return previousValue;
+        },
+        []
+      );
 
     this.actionElements = actions;
   };

diff --git a/packages/calcite-components/src/components/action/action.scss b/packages/calcite-components/src/components/action/action.scss
@@ -87,6 +87,10 @@
   }
 }
 
+:host([data-active]) .button {
+  @apply focus-inset;
+}
+
 :host([scale="s"]) {
   .button {
     @apply text-n2h px-2 py-1 font-normal;