Merge pull request #1381 from artsy/DIA-631-support-dropdowns-that-sc…

…roll-when-otherwise-unable-to-fit-on-screen feat(dropdown): handles potentially overflowing content
artsy · May 3, 2024 · da5a464 · da5a464
2 parents f4d0df0 + 9792c4d
commit da5a464
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 0 deletions.
diff --git a/packages/palette/src/elements/Dropdown/Dropdown.story.tsx b/packages/palette/src/elements/Dropdown/Dropdown.story.tsx
@@ -252,3 +252,35 @@ export const FilterExample = () => {
  </Dropdown>
  )
 }
+
+export const OverflowingContent = () => {
+ const dropdown = (
+ <Text variant="sm-display">
+ {new Array(100).fill(null).map((_, i) => (
+ <Clickable key={i} display="block" width="100%" py={1} px={2}>
+ Item {i}
+ </Clickable>
+ ))}
+ </Text>
+ )
+
+ return (
+ <Flex>
+ <Dropdown dropdown={dropdown} openDropdownByClick>
+ {({ anchorRef, anchorProps }) => {
+ return (
+ <Button
+ ref={anchorRef}
+ variant="secondaryBlack"
+ size="small"
+ mr={1}
+ {...anchorProps}
+ >
+ Click to display dropdown
+ </Button>
+ )
+ }}
+ </Dropdown>
+ </Flex>
+ )
+}
diff --git a/packages/palette/src/elements/Dropdown/Dropdown.tsx b/packages/palette/src/elements/Dropdown/Dropdown.tsx
@@ -315,4 +315,8 @@ const Container = styled(Box)<{ placement: Position } & BoxProps>`
 const Panel = styled(Box)`
  transition: opacity 250ms ease-out, transform 250ms ease-out;
  box-shadow: ${themeGet("effects.flatShadow")};
+ > div {
+ max-height: 100vh;
+ overflow-y: auto;
+ }
 `