Add disabled prop to ActionBar

Author: TylerJDev

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.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>
@@ -254,7 +261,7 @@ export const ActionBarIconButton = forwardRef((props: ActionBarIconButtonProps,
     const domRect = (ref as MutableRefObject<HTMLElement>).current.getBoundingClientRect()
     setChildrenWidth({text, width: domRect.width})
   }, [ref, setChildrenWidth])
-  return <IconButton ref={ref} size={size} {...props} variant="invisible" />
+  return <IconButton aria-disabled={props.disabled} ref={ref} size={size} {...props} variant="invisible" />
 })
 
 export const VerticalDivider = () => {