ActionBar: Add disabled support to ActionBar

.changeset/sixty-otters-lie.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": minor
+---
+
+ActionBar: Improves `disabled` state on `ActionBar.IconButton`; includes `disabled` state in overflow menu

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

@@ -75,6 +75,12 @@
           "type": "string",
           "defaultValue": "",
           "description": "Use an aria label to describe the functionality of the button. Please refer to [our guidance on alt text](https://primer.style/guides/accessibility/alternative-text-for-images) for tips on writing good alternative text."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "",
+          "description": "Provides a disabled state for the button. The button will remain focusable, and have `aria-disabled` applied."
         }
       ],
       "passthrough": {

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

@@ -47,6 +47,22 @@ export const SmallActionBar = () => (
   </ActionBar>
 )
 
+export const WithDisabledItems = () => (
+  <ActionBar aria-label="Toolbar">
+    <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 icon={LinkIcon} aria-label="Link"></ActionBar.IconButton>
+    <ActionBar.Divider />
+    <ActionBar.IconButton disabled icon={FileAddedIcon} aria-label="File Added"></ActionBar.IconButton>
+    <ActionBar.IconButton disabled icon={SearchIcon} aria-label="Search"></ActionBar.IconButton>
+    <ActionBar.IconButton disabled icon={QuoteIcon} aria-label="Insert Quote"></ActionBar.IconButton>
+    <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>
+)
+
 type CommentBoxProps = {'aria-label': string}
 
 export const CommentBox = (props: CommentBoxProps) => {

packages/react/src/ActionBar/ActionBar.test.tsx

@@ -1,6 +1,7 @@
 import React from 'react'
 import {behavesAsComponent} from '../utils/testing'
-import {render as HTMLRender} from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
+import {render as HTMLRender, act} from '@testing-library/react'
 import axe from 'axe-core'
 
 import ActionBar from './'
@@ -32,4 +33,72 @@ describe('ActionBar', () => {
     const results = await axe.run(container)
     expect(results).toHaveNoViolations()
   })
+
+  it('should not trigger disabled button', () => {
+    const onClick = jest.fn()
+    const {getByRole} = HTMLRender(
+      <ActionBar aria-label="Toolbar">
+        <ActionBar.IconButton icon={BoldIcon} aria-label="Default" onClick={onClick} disabled></ActionBar.IconButton>
+      </ActionBar>,
+    )
+
+    const button = getByRole('button')
+    button.click()
+
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('should trigger non-disabled button', () => {
+    const onClick = jest.fn()
+    const {getByRole} = HTMLRender(
+      <ActionBar aria-label="Toolbar">
+        <ActionBar.IconButton icon={BoldIcon} aria-label="Default" onClick={onClick}></ActionBar.IconButton>
+      </ActionBar>,
+    )
+
+    const button = getByRole('button')
+    button.click()
+
+    expect(onClick).toHaveBeenCalled()
+  })
+
+  it('should not trigger disabled button with spacebar or enter', async () => {
+    const user = userEvent.setup()
+    const onClick = jest.fn()
+    const {getByRole} = HTMLRender(
+      <ActionBar aria-label="Toolbar">
+        <ActionBar.IconButton icon={BoldIcon} aria-label="Default" onClick={onClick} disabled></ActionBar.IconButton>
+      </ActionBar>,
+    )
+
+    const button = getByRole('button')
+
+    act(() => {
+      button.focus()
+    })
+
+    await user.keyboard('{Enter}')
+
+    expect(onClick).not.toHaveBeenCalled()
+  })
+
+  it('should trigger non-disabled button with spacebar or enter', async () => {
+    const user = userEvent.setup()
+    const onClick = jest.fn()
+    const {getByRole} = HTMLRender(
+      <ActionBar aria-label="Toolbar">
+        <ActionBar.IconButton icon={BoldIcon} aria-label="Default" onClick={onClick}></ActionBar.IconButton>
+      </ActionBar>,
+    )
+
+    const button = getByRole('button')
+
+    act(() => {
+      button.focus()
+    })
+
+    await user.keyboard('{Enter}')
+
+    expect(onClick).toHaveBeenCalled()
+  })
 })

packages/react/src/ActionBar/ActionBar.tsx

@@ -46,7 +46,7 @@ export type ActionBarProps = {
   className?: string
 } & A11yProps
 
-export type ActionBarIconButtonProps = IconButtonProps
+export type ActionBarIconButtonProps = {disabled?: boolean} & IconButtonProps
 
 const MORE_BTN_WIDTH = 86
 
@@ -215,7 +215,13 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
                     if (menuItem.type === ActionList.Divider) {
                       return <ActionList.Divider key={index} />
                     } else {
-                      const {children: menuItemChildren, onClick, icon: Icon, 'aria-label': ariaLabel} = menuItem.props
+                      const {
+                        children: menuItemChildren,
+                        onClick,
+                        icon: Icon,
+                        'aria-label': ariaLabel,
+                        disabled,
+                      } = menuItem.props
                       return (
                         <ActionList.Item
                           key={menuItemChildren}
@@ -224,6 +230,7 @@ export const ActionBar: React.FC<React.PropsWithChildren<ActionBarProps>> = prop
                             focusOnMoreMenuBtn()
                             typeof onClick === 'function' && onClick(event)
                           }}
+                          disabled={disabled}
                         >
                           {Icon ? (
                             <ActionList.LeadingVisual>
@@ -245,17 +252,37 @@ 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" />
-})
+export const ActionBarIconButton = forwardRef(
+  ({disabled, onClick, ...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])
+
+    const clickHandler = useCallback(
+      (event: React.MouseEvent<HTMLButtonElement>) => {
+        if (disabled) return
+        onClick?.(event)
+      },
+      [disabled, onClick],
+    )
+
+    return (
+      <IconButton
+        aria-disabled={disabled}
+        ref={ref}
+        size={size}
+        onClick={clickHandler}
+        {...props}
+        variant="invisible"
+      />
+    )
+  },
+)
 
 export const VerticalDivider = () => {
   const ref = useRef<HTMLDivElement>(null)