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