diff --git a/.changeset/ninety-brooms-speak.md b/.changeset/ninety-brooms-speak.md new file mode 100644 index 00000000000..24dfe9d9163 --- /dev/null +++ b/.changeset/ninety-brooms-speak.md @@ -0,0 +1,5 @@ +--- +'@primer/react': patch +--- + +Allow overflow scrolling to be controlled via an optional `overflow` property on Overlay diff --git a/src/ActionMenu/ActionMenu.examples.stories.tsx b/src/ActionMenu/ActionMenu.examples.stories.tsx index 849e5778200..64ed4fd176a 100644 --- a/src/ActionMenu/ActionMenu.examples.stories.tsx +++ b/src/ActionMenu/ActionMenu.examples.stories.tsx @@ -340,6 +340,23 @@ export const OnRightSide = () => ( ) +export const SettingMaxHeight = () => { + return ( + + Open menu + + + {Array.from({length: 100}, (_, i) => ( + alert(`Item ${i + 1} clicked`)}> + Item {i + 1} + + ))} + + + + ) +} + export const OnlyInactiveItems = () => ( Open menu diff --git a/src/Overlay/Overlay.tsx b/src/Overlay/Overlay.tsx index 817e80ec992..3b1c867fe5d 100644 --- a/src/Overlay/Overlay.tsx +++ b/src/Overlay/Overlay.tsx @@ -17,6 +17,7 @@ type StyledOverlayProps = { maxHeight?: keyof Omit maxWidth?: keyof Omit visibility?: 'visible' | 'hidden' + overflow?: 'auto' | 'hidden' | 'scroll' | 'visible' anchorSide?: AnchorSide } & SxProp @@ -64,7 +65,7 @@ const StyledOverlay = styled.div` max-height: ${props => props.maxHeight && heightMap[props.maxHeight]}; width: ${props => widthMap[props.width || 'auto']}; border-radius: 12px; - overflow: hidden; + overflow: ${props => (props.overflow ? props.overflow : 'hidden')}; animation: overlay-appear ${animationDuration}ms ${get('animation.easeOutCubic')}; @keyframes overlay-appear {