From 0213b5c77c3ef80821d1554bb61063eda75b08be Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Mon, 4 Mar 2024 13:24:37 -0800
Subject: [PATCH 1/3] Add a ew storybook with dialog trigger in action bar

---
 .../drafts/ActionBar/ActionBar.stories.tsx    | 46 ++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

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 (
     <Box
       sx={{
@@ -106,6 +110,12 @@ export const CommentBox = () => {
             <ActionBar.IconButton icon={ListUnorderedIcon} aria-label="Unordered List"></ActionBar.IconButton>
             <ActionBar.IconButton icon={ListOrderedIcon} aria-label="Ordered List"></ActionBar.IconButton>
             <ActionBar.IconButton icon={TasklistIcon} aria-label="Task List"></ActionBar.IconButton>
+            <ActionBar.IconButton
+              ref={buttonRef}
+              onClick={() => setIsOpen(true)}
+              icon={ReplyIcon}
+              aria-label="Saved Replies"
+            ></ActionBar.IconButton>
           </ActionBar>
         </Box>
       </Box>
@@ -122,6 +132,40 @@ export const CommentBox = () => {
         monospace={false}
         pasteUrlsAsPlainText={false}
       />
+      <Dialog aria-labelledby="header" returnFocusRef={buttonRef} isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
+        <Dialog.Header id="header">Select a reply</Dialog.Header>
+        <Box p={3}>Show saved replies</Box>
+        <Divider />
+        <Button variant="invisible">Create your own saved reply</Button>
+      </Dialog>
+    </Box>
+  )
+}
+
+export const ActionBarWithMenuTrigger = () => {
+  const [isOpen, setIsOpen] = React.useState(false)
+  const buttonRef = React.useRef(null)
+
+  return (
+    <Box>
+      <ActionBar>
+        <ActionBar.IconButton icon={BoldIcon} aria-label="Bold"></ActionBar.IconButton>
+        <ActionBar.IconButton icon={ItalicIcon} aria-label="Italic"></ActionBar.IconButton>
+        <ActionBar.IconButton icon={CodeIcon} aria-label="Code"></ActionBar.IconButton>
+        <ActionBar.IconButton
+          ref={buttonRef}
+          onClick={() => setIsOpen(true)}
+          icon={ReplyIcon}
+          aria-label="Saved Replies"
+        ></ActionBar.IconButton>
+      </ActionBar>
+
+      <Dialog aria-labelledby="header" returnFocusRef={buttonRef} isOpen={isOpen} onDismiss={() => setIsOpen(false)}>
+        <Dialog.Header id="header">Select a reply</Dialog.Header>
+        <Box p={3}>Show saved replies</Box>
+        <Divider />
+        <Button variant="invisible">Create your own saved reply</Button>
+      </Dialog>
     </Box>
   )
 }

From 21906c410a094778ffcbb66b8477d683cb20bb0d Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Tue, 5 Mar 2024 17:21:37 -0800
Subject: [PATCH 2/3] Replace onSelect with onClick

---
 packages/react/src/drafts/ActionBar/ActionBar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

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<React.PropsWithChildren<ActionBarProps>> = 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<React.PropsWithChildren<ActionBarProps>> = prop
                         ) => {
                           closeOverlay()
                           focusOnMoreMenuBtn()
-                          typeof onSelect === 'function' && onSelect(event)
+                          typeof onClick === 'function' && onClick(event)
                         }}
                       >
                         {Icon ? (

From 799b27b19f3ddc4b828b09c295c636b95df44ab1 Mon Sep 17 00:00:00 2001
From: Pavithra Kodmad <pksjce@github.com>
Date: Wed, 6 Mar 2024 12:38:15 +1100
Subject: [PATCH 3/3] Create beige-crews-flow.md

---
 .changeset/beige-crews-flow.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/beige-crews-flow.md

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