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
+
+
+
+
+
+
+ >
+ )
+}
+
export const MixedSelection = () => {
const [selectedIndex, setSelectedIndex] = React.useState(1)