fix: allow for scrolling long menus (#3709)

Co-authored-by: Nora Krantz <[email protected]>

.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

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" }}

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>
+    </>
+  );
+};