Skip to content

chore: graduate primer_react_action_menu_display_in_viewport_inside_dialog #7700

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
liuliu-dev merged 5 commits into from
Mar 25, 2026
Merged

chore: graduate primer_react_action_menu_display_in_viewport_inside_dialog #7700

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
5aaed6d
chore: graduate primer_react_action_menu_display_in_viewport_inside_d…
francinelucca Mar 25, 2026
1e4b6ad
Merge branch 'main' into chore/graduate-actionmenu-ff
francinelucca Mar 25, 2026
6d90683
remove unused import
francinelucca Mar 25, 2026
9b726e8
Add changeset
francinelucca Mar 25, 2026
6cb7f10
Merge branch 'main' into chore/graduate-actionmenu-ff
francinelucca Mar 25, 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/graduate-actionmenu-display-in-viewport-ff.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/react': minor
---

ActionMenu: Graduate `primer_react_action_menu_display_in_viewport_inside_dialog` feature flag. ActionMenu now automatically uses `displayInViewport` when rendered inside a Dialog, without requiring the feature flag.
162 changes: 79 additions & 83 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,7 +21,6 @@ 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 @@ -673,90 +672,87 @@ export const InsideDialog = () => {
))

return (
<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>
<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>

<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>
)}
{/* Show more content after the button to make it scrollable */}
{scrollableContent}
</div>
</FeatureFlags>

{/* 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>
)
}

Expand Down
Loading
Loading