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
+24 −1
Merged

Support overflow scrolling in ActionMenu #3926

Show file tree
Hide file tree
Changes from all 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 numberDiff line numberDiff 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 numberDiff line numberDiff line change
Expand Up@@ -340,6 +340,23 @@ export const OnRightSide = () => (
</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>
)
}

export const OnlyInactiveItems = () => (
<ActionMenu>
<ActionMenu.Button inactive>Open menu</ActionMenu.Button>
Expand Down
3 changes: 2 additions & 1 deletion src/Overlay/Overlay.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff 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 DownExpand 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;
overflow: ${props => (props.overflow ? props.overflow : 'hidden')};
animation: overlay-appear ${animationDuration}ms ${get('animation.easeOutCubic')};

@keyframes overlay-appear {
Expand Down