From c07144f5c2d2b06d082cda7f0ba41e4803625d14 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Tue, 28 Nov 2023 15:22:26 -0800
Subject: [PATCH] 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
---
 .../components/action-menu/action-menu.scss    | 11 ++++-------
 .../action-menu/action-menu.stories.ts         | 17 +++++++++++++++++
 .../src/components/action-menu/action-menu.tsx | 18 +++++++++++++++++-
 .../src/components/action/action.scss          |  4 ++++
 4 files changed, 42 insertions(+), 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
index d80421f62f9..cdddb5b2a0b 100755
--- 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
index 38c837a0a8b..505126a0b37 100644
--- 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
index a1f977a6dee..368663e2b47 100755
--- 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
index ee2a77c5afd..a8947f7eada 100755
--- 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;