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} /> + setIsOpen(false)}> + Select a reply + Show saved replies + + + + + ) +} + +export const ActionBarWithMenuTrigger = () => { + const [isOpen, setIsOpen] = React.useState(false) + const buttonRef = React.useRef(null) + + return ( + + + + + + setIsOpen(true)} + icon={ReplyIcon} + aria-label="Saved Replies" + > + + + setIsOpen(false)}> + Select a reply + Show 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 ? (