Skip to content
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

Jump to bottom

ActionMenu: Add a story to open a dialog (v1) from an action list item and return focus to the menu anchor not the dialog anchor #3786

Closed
wants to merge 3 commits into from
Closed

ActionMenu: Add a story to open a dialog (v1) from an action list item and return focus to the menu anchor not the dialog anchor #3786

Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
cd8cfa9
Add an example to open a dialog from action menu and return focus to …
broccolinisoup Oct 4, 2023
49bbc31
fix linting
broccolinisoup Oct 4, 2023
025744a
dont use external anchor
broccolinisoup Oct 5, 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
61 changes: 60 additions & 1 deletion src/ActionMenu/ActionMenu.examples.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React from 'react'
import React, {useState} from 'react'
import {Box, ActionMenu, ActionList, Button, IconButton} from '../'
import {
GearIcon,
Expand All @@ -14,6 +14,7 @@
CheckIcon,
CopyIcon,
} from '@primer/octicons-react'
import Dialog from '../Dialog'

export default {
title: 'Components/ActionMenu/Examples',
Expand Down Expand Up @@ -185,6 +186,64 @@
</ActionMenu>
)

export const OpenDialogFromMenuItem = () => {
const [isOpen, setIsOpen] = useState(false)

Check failure on line 190 in src/ActionMenu/ActionMenu.examples.stories.tsx

View workflow job for this annotation

GitHub Actions / lint 

'isOpen' is assigned a value but never used

Check failure on line 190 in src/ActionMenu/ActionMenu.examples.stories.tsx

View workflow job for this annotation

GitHub Actions / lint 

'setIsOpen' is assigned a value but never used
const [isDialogOpen, setIsDialogOpen] = useState(false)
const closeDialog = () => setIsDialogOpen(false)
const buttonRef = React.useRef(null)
return (
<>
<ActionMenu anchorRef={buttonRef}>
<ActionMenu.Anchor>
<IconButton ref={buttonRef} icon={KebabHorizontalIcon} aria-label="Open menu" />
</ActionMenu.Anchor>
<ActionMenu.Overlay width="medium">
<ActionList>
<ActionList.Item onSelect={() => setIsDialogOpen(true)}>
<ActionList.LeadingVisual>
<IssueOpenedIcon />
</ActionList.LeadingVisual>
Change Issue Type
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Copy link clicked')}>
Copy link
<ActionList.TrailingVisual>⌘C</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Quote reply clicked')}>
Quote reply
<ActionList.TrailingVisual>⌘Q</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Item onSelect={() => alert('Edit comment clicked')}>
Edit comment
<ActionList.TrailingVisual>⌘E</ActionList.TrailingVisual>
</ActionList.Item>
<ActionList.Divider />
<ActionList.Item variant="danger" onSelect={() => alert('Delete file clicked')}>
Delete file
<ActionList.TrailingVisual>⌘D</ActionList.TrailingVisual>
</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>

<Dialog
returnFocusRef={buttonRef}
isOpen={isDialogOpen}
onDismiss={() => {
closeDialog()
}}
>
<Dialog.Header id="header-id">Title</Dialog.Header>
some content
<Box display="flex" mt={3} justifyContent="flex-end">
<Button sx={{mr: 1}}>Cancel</Button>
<Button variant="danger">Delete</Button>
</Box>
</Dialog>
</>
)
}

export const MixedSelection = () => {
const [selectedIndex, setSelectedIndex] = React.useState<number | null>(1)

Expand Down
Loading