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,
 })