diff --git a/src/ActionMenu/ActionMenu.examples.stories.tsx b/src/ActionMenu/ActionMenu.examples.stories.tsx index 80e929196d8..0a70b3a56f8 100644 --- a/src/ActionMenu/ActionMenu.examples.stories.tsx +++ b/src/ActionMenu/ActionMenu.examples.stories.tsx @@ -1,4 +1,4 @@ -import React from 'react' +import React, {useState} from 'react' import {Box, ActionMenu, ActionList, Button, IconButton} from '../' import { GearIcon, @@ -14,6 +14,7 @@ import { CheckIcon, CopyIcon, } from '@primer/octicons-react' +import Dialog from '../Dialog' export default { title: 'Components/ActionMenu/Examples', @@ -185,6 +186,64 @@ export const CustomAnchor = () => ( ) +export const OpenDialogFromMenuItem = () => { + const [isOpen, setIsOpen] = useState(false) + const [isDialogOpen, setIsDialogOpen] = useState(false) + const closeDialog = () => setIsDialogOpen(false) + const buttonRef = React.useRef(null) + return ( + <> + + + + + + + setIsDialogOpen(true)}> + + + + Change Issue Type + + alert('Copy link clicked')}> + Copy link + ⌘C + + alert('Quote reply clicked')}> + Quote reply + ⌘Q + + alert('Edit comment clicked')}> + Edit comment + ⌘E + + + alert('Delete file clicked')}> + Delete file + ⌘D + + + + + + { + closeDialog() + }} + > + Title + some content + + + + + + + ) +} + export const MixedSelection = () => { const [selectedIndex, setSelectedIndex] = React.useState(1)