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(({ 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 ( + <> + + Many items + + + {Array.from(new Array(100).keys()).map((item) => ( + + Item {item} + + ))} + + + ); +};