diff --git a/.changeset/beige-crews-flow.md b/.changeset/beige-crews-flow.md
new file mode 100644
index 00000000000..a5844281d47
--- /dev/null
+++ b/.changeset/beige-crews-flow.md
@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+ActionBar: Overflow menu items should be able to trigger dialogs
diff --git a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
index 5b1d020bf07..01a8dfc9e2c 100644
--- a/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
+++ b/packages/react/src/drafts/ActionBar/ActionBar.stories.tsx
@@ -13,11 +13,13 @@ import {
ListUnorderedIcon,
ListOrderedIcon,
TasklistIcon,
+ ReplyIcon,
} from '@primer/octicons-react'
import {MarkdownInput} from '../MarkdownEditor/_MarkdownInput'
import {ViewSwitch} from '../MarkdownEditor/_ViewSwitch'
import type {MarkdownViewMode} from '../MarkdownEditor/_ViewSwitch'
-import {Box} from '../..'
+import {Box, Dialog, Button} from '../..'
+import {Divider} from '../../deprecated/ActionList/Divider'
export default {
title: 'Drafts/Components/ActionBar',
@@ -59,6 +61,8 @@ export const CommentBox = () => {
//console.log('loadPreview')
}, [])
const [value, setValue] = React.useState('')
+ const [isOpen, setIsOpen] = React.useState(false)
+ const buttonRef = React.useRef(null)
return (
{
+ setIsOpen(true)}
+ icon={ReplyIcon}
+ aria-label="Saved Replies"
+ >
@@ -122,6 +132,40 @@ export const CommentBox = () => {
monospace={false}
pasteUrlsAsPlainText={false}
/>
+
+
+ )
+}
+
+export const ActionBarWithMenuTrigger = () => {
+ const [isOpen, setIsOpen] = React.useState(false)
+ const buttonRef = React.useRef(null)
+
+ return (
+
+
+
+
+
+ setIsOpen(true)}
+ icon={ReplyIcon}
+ aria-label="Saved Replies"
+ >
+
+
+
)
}
diff --git a/packages/react/src/drafts/ActionBar/ActionBar.tsx b/packages/react/src/drafts/ActionBar/ActionBar.tsx
index 189b5fc8a91..e9d88ec06c3 100644
--- a/packages/react/src/drafts/ActionBar/ActionBar.tsx
+++ b/packages/react/src/drafts/ActionBar/ActionBar.tsx
@@ -280,7 +280,7 @@ export const ActionBar: React.FC> = prop
const {
children: menuItemChildren,
//'aria-current': ariaCurrent,
- onSelect,
+ onClick,
icon: Icon,
'aria-label': ariaLabel,
} = menuItem.props
@@ -293,7 +293,7 @@ export const ActionBar: React.FC> = prop
) => {
closeOverlay()
focusOnMoreMenuBtn()
- typeof onSelect === 'function' && onSelect(event)
+ typeof onClick === 'function' && onClick(event)
}}
>
{Icon ? (