Skip to content

Support overflow scrolling in ActionMenu #3926

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
strackoverflow merged 7 commits into from
Dec 19, 2023
Merged

Support overflow scrolling in ActionMenu #3926

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
eb499dc
support overflow scrolling when maxHeight is set
strackoverflow Nov 1, 2023
46d88c7
pass overflow behavior in as a prop
strackoverflow Nov 16, 2023
c73d0f2
only set overflow if prop is provided
strackoverflow Nov 17, 2023
0ba90fe
changeset
strackoverflow Nov 27, 2023
39c8409
update snapshot
strackoverflow Dec 12, 2023
7fabe57
keep overflow hidden as default style
strackoverflow Dec 12, 2023
b831070
Merge branch 'main' into action-menu-max-height
strackoverflow Dec 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/ninety-brooms-speak.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': patch
---

Allow overflow scrolling to be controlled via an optional `overflow` property on Overlay
17 changes: 17 additions & 0 deletions src/ActionMenu/ActionMenu.examples.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -334,3 +334,20 @@ export const OnRightSide = () => (
</ActionMenu.Overlay>
</ActionMenu>
)

export const SettingMaxHeight = () => {
return (
<ActionMenu>
<ActionMenu.Button>Open menu</ActionMenu.Button>
<ActionMenu.Overlay width="auto" maxHeight="large" overflow="auto">
<ActionList>
{Array.from({length: 100}, (_, i) => (
<ActionList.Item key={`item-${i}`} onSelect={() => alert(`Item ${i + 1} clicked`)}>
Item {i + 1}
</ActionList.Item>
))}
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>
)
}
3 changes: 2 additions & 1 deletion src/Overlay/Overlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ type StyledOverlayProps = {
maxHeight?: keyof Omit<typeof heightMap, 'auto' | 'initial'>
maxWidth?: keyof Omit<typeof widthMap, 'auto'>
visibility?: 'visible' | 'hidden'
overflow?: 'auto' | 'hidden' | 'scroll' | 'visible'
anchorSide?: AnchorSide
} & SxProp

Expand Down Expand Up @@ -64,7 +65,7 @@ const StyledOverlay = styled.div<StyledOverlayProps>`
max-height: ${props => props.maxHeight && heightMap[props.maxHeight]};
width: ${props => widthMap[props.width || 'auto']};
border-radius: 12px;
overflow: hidden;
${props => (props.overflow ? `overflow: ${props.overflow};` : '')}

@strackoverflow strackoverflow Dec 12, 2023

Copy link
Copy Markdown
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I just realized we should probably retain the existing overflow behavior if the prop isn't provided so that we don't cause any unexpected side effects. I'll push up a fix for that.

animation: overlay-appear ${animationDuration}ms ${get('animation.easeOutCubic')};

@keyframes overlay-appear {
Expand Down