ActionBar expose buttonLabelBehavior prop (#6708)

Author: ktabors

packages/@react-spectrum/actionbar/src/ActionBar.tsx

@@ -58,6 +58,7 @@ function ActionBarInner<T>(props: ActionBarInnerProps<T>, ref: Ref<HTMLDivElemen
     onClearSelection,
     selectedItemCount,
     isOpen,
+    buttonLabelBehavior = 'collapse',
     items
   } = props;
 
@@ -110,7 +111,7 @@ function ActionBarInner<T>(props: ActionBarInnerProps<T>, ref: Ref<HTMLDivElemen
             isQuiet
             staticColor={isEmphasized ? 'white' : undefined}
             overflowMode="collapse"
-            buttonLabelBehavior="collapse"
+            buttonLabelBehavior={buttonLabelBehavior}
             onAction={onAction}
             UNSAFE_className={classNames(styles, 'react-spectrum-ActionBar-actionGroup')}>
             {children}

packages/@react-spectrum/actionbar/stories/ActionBar.stories.tsx

@@ -31,6 +31,10 @@ export default {
     },
     isEmphasized: {
       control: 'boolean'
+    },
+    buttonLabelBehavior: {
+      control: 'select',
+      options: ['show', 'hide', 'collapse']
     }
   }
 } as ComponentMeta<typeof ActionBar>;

packages/@react-types/actionbar/src/index.d.ts

@@ -27,7 +27,15 @@ export interface ActionBarProps<T> {
   /** Whether the ActionBar should be displayed with a emphasized style. */
   isEmphasized?: boolean,
   /** Handler that is called when an ActionBar button is pressed. */
-  onAction?: (key: Key) => void
+  onAction?: (key: Key) => void,
+  /**
+   * Defines when the text within the buttons should be hidden and only the icon should be shown.
+   * When set to 'hide', the text is always shown in a tooltip. When set to 'collapse', the text is visible
+   * if space is available, and hidden when space is limited. The text is always visible when the item
+   * is collapsed into a menu.
+   * @default 'collapse'
+   */
+  buttonLabelBehavior?: 'show' | 'collapse' | 'hide'
 }
 
 export interface SpectrumActionBarProps<T> extends ActionBarProps<T>, DOMProps, StyleProps {}