ActionGroup item custom props support (#3279)

Author: reidbarber

packages/@react-spectrum/actiongroup/src/ActionGroup.tsx

@@ -271,6 +271,7 @@ function ActionGroupItem<T>({item, state, isDisabled, isEmphasized, staticColor,
   isDisabled = isDisabled || state.disabledKeys.has(item.key);
   let isSelected = state.selectionManager.isSelected(item.key);
   let {hoverProps, isHovered} = useHover({isDisabled});
+  let domProps = filterDOMProps(item.props);
 
   if (onAction && !isDisabled) {
     buttonProps = mergeProps(buttonProps, {
@@ -291,7 +292,7 @@ function ActionGroupItem<T>({item, state, isDisabled, isEmphasized, staticColor,
   let button = (
     // Use a PressResponder to send DOM props through.
     // ActionButton doesn't allow overriding the role by default.
-    <PressResponder {...mergeProps(buttonProps, hoverProps)}>
+    <PressResponder {...mergeProps(buttonProps, hoverProps, domProps)}>
       <ClearSlots>
         <SlotProvider
           slots={{

packages/@react-spectrum/actiongroup/test/ActionGroup.test.js

@@ -513,6 +513,19 @@ describe('ActionGroup', function () {
     expect(button1).toHaveAttribute('data-testid', 'test');
   });
 
+  it('ActionGroup Item allows custom props', function () {
+    let {getAllByRole} = render(
+      <Provider theme={theme} locale="de-DE">
+        <ActionGroup>
+          <Item data-testid="test">Click me</Item>
+        </ActionGroup>
+      </Provider>
+    );
+
+    let item = getAllByRole('button')[0];
+    expect(item).toHaveAttribute('data-testid', 'test');
+  });
+
   it('fires onAction when a button is pressed', function () {
     let onAction = jest.fn();
     let tree = render(