Skip to content

chore: always render ActionMenu in viewport when inside Dialog under feature flag #7524

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

Open
francinelucca wants to merge 15 commits into
base: main
Choose a base branch
from
Open

chore: always render ActionMenu in viewport when inside Dialog under feature flag #7524

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
97585b9
chore: always render ActionMenu in viewport when inside portal udner …
francinelucca Feb 11, 2026
eda30aa
allow displayInViewport to override default behavior
francinelucca Feb 11, 2026
c4f0c1a
PortalContext fix
francinelucca Feb 11, 2026
b661602
lint fix
francinelucca Feb 11, 2026
a54a445
Change '@primer/react' version and update ActionMenu
francinelucca Feb 11, 2026
97c46df
ensureDefaultPortal if the containerName is the default
francinelucca Feb 11, 2026
3c57fcc
Merge branch 'chore/action-menu-display-in-viewport-enhancement' of g…
francinelucca Feb 11, 2026
06ed903
Add unit tests for primer_react_action_menu_display_in_viewport_insid…
Copilot Feb 11, 2026
7c18df4
Merge branch 'main' of github.com:primer/react into chore/action-menu…
francinelucca Feb 13, 2026
f7b8831
revert Portal changes
francinelucca Feb 13, 2026
f9e940a
adds DiailogContext, renames FF
francinelucca Feb 13, 2026
eea8174
fix ActionMenu tests
francinelucca Feb 13, 2026
b43f157
fix Dialog exports
francinelucca Feb 13, 2026
c0510d4
lint
francinelucca Feb 13, 2026
1680a45
Update ActionMenu rendering context in changeset
francinelucca Feb 13, 2026
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/stupid-bees-marry.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
Copy link
Member

@siddharthkp siddharthkp Feb 11, 2026

Choose a reason for hiding this comment

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

lol the filename, didn't know changesets was anti-marriage

"@primer/react": minor
---

chore: always render ActionMenu in viewport when inside Dialog under feature flag
162 changes: 83 additions & 79 deletions packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,6 +21,7 @@ import {
} from '@primer/octicons-react'
import type {AnchorPosition, AnchorSide} from '@primer/behaviors'
import classes from './ActionMenu.examples.stories.module.css'
import {FeatureFlags} from '../FeatureFlags'

export default {
title: 'Components/ActionMenu/Examples',
Expand Down Expand Up @@ -672,86 +673,89 @@ export const InsideDialog = () => {
))

return (
<div style={{padding: '20px'}}>
{/* Main scrollable content */}
<div>
<Text as="h1" style={{marginBottom: '16px'}}>
Main Page Content
</Text>

<Button onClick={openDialog} style={{margin: '16px 0'}}>
Open Dialog with ActionMenu
</Button>

{/* Show more content after the button to make it scrollable */}
{scrollableContent}
</div>

{/* Dialog containing ActionMenu */}
{isDialogOpen && (
<Dialog title="Dialog with ActionMenu" onClose={onDialogClose} width="medium">
<Text as="p" style={{marginBottom: '12px'}}>
This dialog contains an ActionMenu. The main page content behind is long enough to be scrollable.
<FeatureFlags flags={{primer_react_action_menu_display_in_viewport_inside_dialog: true}}>
<div style={{padding: '20px'}}>
{/* Main scrollable content */}
<div>
<Text as="h1" style={{marginBottom: '16px'}}>
Main Page Content
</Text>

<Text as="h3" style={{marginBottom: '8px', fontWeight: '600'}}>
Document Settings
</Text>

<Text as="p" style={{marginBottom: '16px', color: '#656d76'}}>
Configure the document properties and sharing settings. These options allow you to control how the document
is displayed and who has access to it.
</Text>

<ActionMenu>
<ActionMenu.Button>Actions</ActionMenu.Button>
<ActionMenu.Overlay width="medium" displayInViewport={true}>
<ActionList>
<ActionList.Item onSelect={() => alert('Save clicked')}>
Save
<ActionList.TrailingVisual>⌘S</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Save as clicked')}>
Save as...
<ActionList.TrailingVisual>⌘⇧S</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Export clicked')}>
Export
<ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Print clicked')}>
Print
<ActionList.TrailingVisual>⌘P</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Divider />
<ActionList.Item onSelect={() => alert('Copy clicked')}>
Copy
<ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Paste clicked')}>
Paste
<ActionList.TrailingVisual>⌘V</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Duplicate clicked')}>
Duplicate
<ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Divider />
<ActionList.Item onSelect={() => alert('Share clicked')}>
Share
<ActionList.TrailingVisual>⌘⇧U</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Share via email clicked')}>Share via email</ActionList.Item>
<ActionList.Item onSelect={() => alert('Share via link clicked')}>Share via link</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>

<Text as="p" style={{marginTop: '12px'}}>
You can interact with the ActionMenu above while the main page content remains scrollable in the background.
</Text>
</Dialog>
)}
</div>
<Button onClick={openDialog} style={{margin: '16px 0'}}>
Open Dialog with ActionMenu
</Button>

{/* Show more content after the button to make it scrollable */}
{scrollableContent}
</div>

{/* Dialog containing ActionMenu */}
{isDialogOpen && (
<Dialog title="Dialog with ActionMenu" onClose={onDialogClose} width="medium">
<Text as="p" style={{marginBottom: '12px'}}>
This dialog contains an ActionMenu. The main page content behind is long enough to be scrollable.
</Text>

<Text as="h3" style={{marginBottom: '8px', fontWeight: '600'}}>
Document Settings
</Text>

<Text as="p" style={{marginBottom: '16px', color: '#656d76'}}>
Configure the document properties and sharing settings. These options allow you to control how the
document is displayed and who has access to it.
</Text>

<ActionMenu>
<ActionMenu.Button>Actions</ActionMenu.Button>
<ActionMenu.Overlay width="medium">
<ActionList>
<ActionList.Item onSelect={() => alert('Save clicked')}>
Save
<ActionList.TrailingVisual>⌘S</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Save as clicked')}>
Save as...
<ActionList.TrailingVisual>⌘⇧S</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Export clicked')}>
Export
<ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Print clicked')}>
Print
<ActionList.TrailingVisual>⌘P</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Divider />
<ActionList.Item onSelect={() => alert('Copy clicked')}>
Copy
<ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Paste clicked')}>
Paste
<ActionList.TrailingVisual>⌘V</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Duplicate clicked')}>
Duplicate
<ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Divider />
<ActionList.Item onSelect={() => alert('Share clicked')}>
Share
<ActionList.TrailingVisual>⌘⇧U</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Share via email clicked')}>Share via email</ActionList.Item>
<ActionList.Item onSelect={() => alert('Share via link clicked')}>Share via link</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>

<Text as="p" style={{marginTop: '12px'}}>
You can interact with the ActionMenu above while the main page content remains scrollable in the
background.
</Text>
</Dialog>
)}
</div>
</FeatureFlags>
)
}
Loading
Loading