ActionBar: Add new component for submenu

.changeset/rotten-horses-applaud.md

@@ -0,0 +1,6 @@
+---
+"@primer/react": patch
+"docs": patch
+---
+
+ActionBar: Add new component for submenu

packages/react/src/drafts/ActionBar/ActionBar.docs.json

@@ -54,6 +54,19 @@
  {
  "name": "ActionBar.Divider",
  "props": []
+ },
+ {
+ "name": "ActionBar.SubMenu",
+ "description": "Component to be used when having a menu in the actionbar. This facilitates smooth transition to submenu during overflow cases",
+ "props": [
+ {
+ "name": "anchor",
+ "type": "React.ReactElement",
+ "required": true,
+ "description": "This is the anchor element to be used as menu trigger. Ideally ActionBar.IconButton"
+ },
+ {"name": "children", "type": "React.ReactElement", "required": true}
+ ]
  }
  ]
 }

packages/react/src/drafts/ActionBar/ActionBar.stories.tsx

@@ -120,6 +120,13 @@ export const CommentBox = () => {
  icon={ReplyIcon}
  aria-label="Saved Replies"
  ></ActionBar.IconButton>
+ <ActionBar.SubMenu anchor={<ActionBar.IconButton icon={ThreeBarsIcon} aria-label="Random Menu" />}>
+ <ActionList>
+ <ActionList.Item>First Item</ActionList.Item>
+ <ActionList.Item>Second Item</ActionList.Item>
+ <ActionList.Item>Third Item</ActionList.Item>
+ </ActionList>
+ </ActionBar.SubMenu>
  </ActionBar>
  </Box>
  </Box>

packages/react/src/drafts/ActionBar/ActionBar.tsx

@@ -13,7 +13,8 @@ import {useOnOutsideClick} from '../../hooks/useOnOutsideClick'
 import type {IconButtonProps} from '../../Button'
 import {IconButton} from '../../Button'
 import Box from '../../Box'
-import {ActionMenu} from '../..'
+import {ActionMenu} from '../../ActionMenu'
+import {Action} from 'history'
 
 type ChildSize = {
  text: string
@@ -43,6 +44,31 @@ export type ActionBarProps = {
 
 export type ActionBarIconButtonProps = IconButtonProps
 
+export const ActionBarIconButton = forwardRef((props: ActionBarIconButtonProps, forwardedRef) => {
+ const backupRef = useRef<HTMLElement>(null)
+ const ref = (forwardedRef ?? backupRef) as RefObject<HTMLAnchorElement>
+ const {size, setChildrenWidth} = React.useContext(ActionBarContext)
+ useIsomorphicLayoutEffect(() => {
+ const text = props['aria-label'] ? props['aria-label'] : ''
+ const domRect = (ref as MutableRefObject<HTMLElement>).current.getBoundingClientRect()
+ setChildrenWidth({text, width: domRect.width})
+ }, [ref, setChildrenWidth])
+ return <IconButton ref={ref} size={size} {...props} variant="invisible" />
+})
+
+export type ActionBarSubMenuProps = {anchor: React.ReactElement; children: React.ReactElement[] | React.ReactElement}
+
+export const ActionBarSubMenu = (props: ActionBarSubMenuProps) => {
+ const {anchor, children} = props
+
+ return (
+ <ActionMenu>
+ <ActionMenu.Anchor>{anchor}</ActionMenu.Anchor>
+ <ActionMenu.Overlay>{children}</ActionMenu.Overlay>
+ </ActionMenu>
+ )
+}
+
 const NavigationList = styled.div`
  ${sx};
 `
@@ -239,6 +265,24 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
  {menuItems.map((menuItem, index) => {
  if (menuItem.type === ActionList.Divider) {
  return <ActionList.Divider key={index} />
+ } else if (menuItem.type === ActionBarSubMenu) {
+ const {children: menuItemChildren, anchor} = menuItem.props
+ const {icon: Icon, 'aria-label': ariaLabel} = anchor.props
+ return (
+ <ActionMenu>
+ <ActionMenu.Anchor>
+ <ActionList.Item>
+ {Icon ? (
+ <ActionList.LeadingVisual>
+ <Icon />
+ </ActionList.LeadingVisual>
+ ) : null}
+ {ariaLabel}
+ </ActionList.Item>
+ </ActionMenu.Anchor>
+ <ActionMenu.Overlay>{menuItemChildren}</ActionMenu.Overlay>
+ </ActionMenu>
+ )
  } else {
  const {
  children: menuItemChildren,
@@ -279,18 +323,6 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
  )
 }
 
-export const ActionBarIconButton = forwardRef((props: ActionBarIconButtonProps, forwardedRef) => {
- const backupRef = useRef<HTMLElement>(null)
- const ref = (forwardedRef ?? backupRef) as RefObject<HTMLAnchorElement>
- const {size, setChildrenWidth} = React.useContext(ActionBarContext)
- useIsomorphicLayoutEffect(() => {
- const text = props['aria-label'] ? props['aria-label'] : ''
- const domRect = (ref as MutableRefObject<HTMLElement>).current.getBoundingClientRect()
- setChildrenWidth({text, width: domRect.width})
- }, [ref, setChildrenWidth])
- return <IconButton ref={ref} size={size} {...props} variant="invisible" />
-})
-
 const sizeToHeight = {
  small: '24px',
  medium: '28px',

packages/react/src/drafts/ActionBar/index.ts

@@ -1,8 +1,9 @@
-import {ActionBar as Bar, ActionBarIconButton, VerticalDivider} from './ActionBar'
+import {ActionBar as Bar, ActionBarIconButton, ActionBarSubMenu, VerticalDivider} from './ActionBar'
 export type {ActionBarProps} from './ActionBar'
 
 const ActionBar = Object.assign(Bar, {
  IconButton: ActionBarIconButton,
+ SubMenu: ActionBarSubMenu,
  Divider: VerticalDivider,
 })