feat(action-menu): set max height of the action menu (#8275)

**Related Issue:** #8274 ## Summary - Sets max-height on action-menu and applies overflow if necessary - Adds screenshot test
Esri · Nov 28, 2023 · ca1be28 · ca1be28
1 parent a30424f
commit ca1be28
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 1 deletion.
diff --git a/packages/calcite-components/src/components/action-menu/action-menu.scss b/packages/calcite-components/src/components/action-menu/action-menu.scss
@@ -32,7 +32,12 @@
 }
 
 .menu {
-  @apply flex-col flex-nowrap outline-none;
+  @apply flex-col
+  flex-nowrap
+  outline-none
+  overflow-y-auto
+  overflow-x-hidden
+  max-h-menu;
 }
 
 @include base-component();
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
@@ -66,4 +66,29 @@ export const keyDownOpen_TestOnly = (): string =>
     </script>
   `;
 
+export const openMaxHeight_TestOnly = (): string =>
+  html`
+    <calcite-action-menu open>
+      <calcite-action slot="trigger" text="Add" icon="banana"></calcite-action>
+      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
+      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
+      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
+      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
+      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
+      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
+      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
+      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
+      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
+      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
+      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
+      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
+      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
+      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
+      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
+      <calcite-action text="Plus" icon="plus" text-enabled></calcite-action>
+      <calcite-action text="Minus" icon="minus" text-enabled></calcite-action>
+      <calcite-action text="Table" icon="table" text-enabled></calcite-action>
+    </calcite-action-menu>
+  `;
+
 keyDownOpen_TestOnly.parameters = { chromatic: { delay: 1000 } };