From ba0d7bcfbd6fa8e6413597966667ec7d68f954bf Mon Sep 17 00:00:00 2001
From: Simon Taggart <me@simontaggart.com>
Date: Thu, 11 Jan 2024 14:17:44 -0800
Subject: [PATCH] fix: allow for scrolling long menus (#3709)

Co-authored-by: Nora Krantz <75342690+nkrantz@users.noreply.github.com>
---
 .changeset/ninety-penguins-rule.md            |  6 ++++++
 .../paste-core/components/menu/src/Menu.tsx   |  3 +++
 .../components/menu/stories/index.stories.tsx | 20 +++++++++++++++++++
 3 files changed, 29 insertions(+)
 create mode 100644 .changeset/ninety-penguins-rule.md

diff --git a/.changeset/ninety-penguins-rule.md b/.changeset/ninety-penguins-rule.md
new file mode 100644
index 0000000000..9afebb18d3
--- /dev/null
+++ b/.changeset/ninety-penguins-rule.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/menu": patch
+"@twilio-paste/core": patch
+---
+
+[Menu]: Adds overflow scrolling behaviour on menus with a large number of items in, currently defaulting to 10 items
diff --git a/packages/paste-core/components/menu/src/Menu.tsx b/packages/paste-core/components/menu/src/Menu.tsx
index 2551c6490a..66a5b92963 100644
--- a/packages/paste-core/components/menu/src/Menu.tsx
+++ b/packages/paste-core/components/menu/src/Menu.tsx
@@ -15,8 +15,11 @@ const StyledMenu = React.forwardRef<HTMLDivElement, BoxElementProps>(({ style, .
       borderColor="colorBorderWeaker"
       borderRadius="borderRadius30"
       boxShadow="shadow"
+      // scroll at roughly 10 items
+      maxHeight="size40"
       maxWidth="size30"
       minWidth="size20"
+      overflowY="auto"
       zIndex="zIndex20"
       paddingY="space30"
       _focus={{ outline: "none" }}
diff --git a/packages/paste-core/components/menu/stories/index.stories.tsx b/packages/paste-core/components/menu/stories/index.stories.tsx
index 30d038172d..c8f4595715 100644
--- a/packages/paste-core/components/menu/stories/index.stories.tsx
+++ b/packages/paste-core/components/menu/stories/index.stories.tsx
@@ -1,3 +1,4 @@
+import type { StoryFn } from "@storybook/react";
 import { Box } from "@twilio-paste/box";
 import { AttachIcon } from "@twilio-paste/icons/esm/AttachIcon";
 import { ChevronDownIcon } from "@twilio-paste/icons/esm/ChevronDownIcon";
@@ -457,3 +458,22 @@ export const AutoPlacementMenuStory = (): React.ReactNode => {
 };
 
 AutoPlacementMenuStory.storyName = "auto placed menu";
+
+export const ManyItemsMenu: StoryFn = () => {
+  const menu = useMenuState({ visible: true });
+
+  return (
+    <>
+      <MenuButton {...menu} variant="primary">
+        Many items <ChevronDownIcon decorative />
+      </MenuButton>
+      <Menu {...menu} aria-label="Preferences">
+        {Array.from(new Array(100).keys()).map((item) => (
+          <MenuItem {...menu} key={item}>
+            Item {item}
+          </MenuItem>
+        ))}
+      </Menu>
+    </>
+  );
+};