From ca9f35a13e4bb6c293d11349e22cee0628a87c35 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Mon, 24 Jul 2023 14:32:11 -0700
Subject: [PATCH] feat(action-group): Adds overlayPositioning property. (#7366)

**Related Issue:** N/A

## Summary

- Adds overlayPositioning property
- Allows a user to set the `overlayPositioning` on the internal
`calcite-action-menu`
---
 .../components/action-group/action-group.e2e.ts   | 15 +++++++++++++++
 .../src/components/action-group/action-group.tsx  | 13 ++++++++++++-
 2 files changed, 27 insertions(+), 1 deletion(-)

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
index 89166e16715..5a80f6b1b47 100755
--- a/packages/calcite-components/src/components/action-group/action-group.e2e.ts
+++ b/packages/calcite-components/src/components/action-group/action-group.e2e.ts
@@ -14,6 +14,10 @@ describe("calcite-action-group", () => {
         propertyName: "layout",
         defaultValue: "vertical",
       },
+      {
+        propertyName: "overlayPositioning",
+        defaultValue: "absolute",
+      },
     ]);
   });
 
@@ -43,6 +47,17 @@ describe("calcite-action-group", () => {
     expect(await menu.getProperty("scale")).toBe("l");
   });
 
+  it("should honor overlayPositioning", async () => {
+    const page = await newE2EPage();
+    await page.setContent(`<calcite-action-group scale="l" overlay-positioning="fixed">
+    <calcite-action id="plus" slot="menu-actions" text="Add" icon="plus"></calcite-action>
+    <calcite-action id="banana" slot="menu-actions" text="Banana" icon="banana"></calcite-action>
+    </calcite-action-group>`);
+    await page.waitForChanges();
+    const menu = await page.find(`calcite-action-group >>> calcite-action-menu`);
+    expect(await menu.getProperty("overlayPositioning")).toBe("fixed");
+  });
+
   describe("translation support", () => {
     t9n("calcite-action-group");
   });
diff --git a/packages/calcite-components/src/components/action-group/action-group.tsx b/packages/calcite-components/src/components/action-group/action-group.tsx
index 15683010e17..cffa97c179c 100755
--- a/packages/calcite-components/src/components/action-group/action-group.tsx
+++ b/packages/calcite-components/src/components/action-group/action-group.tsx
@@ -24,6 +24,7 @@ import { SLOTS as ACTION_MENU_SLOTS } from "../action-menu/resources";
 import { Columns, Layout, Scale } from "../interfaces";
 import { ActionGroupMessages } from "./assets/action-group/t9n";
 import { ICONS, SLOTS } from "./resources";
+import { OverlayPositioning } from "../../utils/floating-ui";
 
 /**
  * @slot - A slot for adding a group of `calcite-action`s.
@@ -74,6 +75,15 @@ export class ActionGroup
    */
   @Prop({ reflect: true, mutable: true }) menuOpen = false;
 
+  /**
+   * Determines the type of positioning to use for the overlaid content.
+   *
+   * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.
+   * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+   *
+   */
+  @Prop({ reflect: true }) overlayPositioning: OverlayPositioning = "absolute";
+
   /**
    * Specifies the size of the `calcite-action-menu`.
    */
@@ -167,7 +177,7 @@ export class ActionGroup
   }
 
   renderMenu(): VNode {
-    const { el, expanded, menuOpen, scale, layout, messages } = this;
+    const { el, expanded, menuOpen, scale, layout, messages, overlayPositioning } = this;
 
     const hasMenuItems = getSlotted(el, SLOTS.menuActions);
 
@@ -178,6 +188,7 @@ export class ActionGroup
         label={messages.more}
         onCalciteActionMenuOpen={this.setMenuOpen}
         open={menuOpen}
+        overlayPositioning={overlayPositioning}
         placement={layout === "horizontal" ? "bottom-start" : "leading-start"}
         scale={scale}
       >