feat: dom attributes for <Item/> in ActionGroup's collapsed menu can now be passed down (#4499)

Co-authored-by: Clint Goodman <[email protected]>

Author: cgood92

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

@@ -474,7 +474,7 @@ function ActionGroupMenu<T>({state, isDisabled, isEmphasized, staticColor, items
         disallowEmptySelection={state.selectionManager.disallowEmptySelection}
         onSelectionChange={(keys) => state.selectionManager.setSelectedKeys(keys)}
         onAction={onAction}>
-        {node => <Item textValue={node.textValue}>{node.rendered}</Item>}
+        {node => <Item textValue={node.textValue} {...filterDOMProps(node.props)}>{node.rendered}</Item>}
       </Menu>
     </MenuTrigger>
   );

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

@@ -276,23 +276,23 @@ function renderOverflow(props) {
   return (
     <div style={{padding: '10px', resize: 'both', overflow: 'auto', width: 250, backgroundColor: 'var(--spectrum-global-color-gray-50)'}}>
       <ActionGroup {...props} summaryIcon={<TextIcon />} maxHeight="100%">
-        <Item key="1">
+        <Item key="1" data-testid="edit">
           <DrawIcon />
           <Text>Edit</Text>
         </Item>
-        <Item key="2">
+        <Item key="2" data-testid="copy">
           <CopyIcon />
           <Text>Copy</Text>
         </Item>
-        <Item key="3">
+        <Item key="3" data-testid="delete">
           <DeleteIcon />
           <Text>Delete</Text>
         </Item>
-        <Item key="4">
+        <Item key="4" data-testid="move">
           <MoveIcon />
           <Text>Move</Text>
         </Item>
-        <Item key="5">
+        <Item key="5" data-testid="duplicate">
           <DuplicateIcon />
           <Text>Duplicate</Text>
         </Item>

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

@@ -744,6 +744,29 @@ describe('ActionGroup', function () {
       expect(onAction).toHaveBeenCalledWith('three');
     });
 
+    it('collapsed menu items can have DOM attributes passed to them', function () {
+      let onAction = jest.fn();
+      let tree = render(
+        <Provider theme={theme}>
+          <ActionGroup overflowMode="collapse" onAction={onAction}>
+            <Item key="one">One</Item>
+            <Item key="two" data-element="two">Two</Item>
+            <Item key="three">Three</Item>
+            <Item key="four">Four</Item>
+          </ActionGroup>
+        </Provider>
+      );
+
+      let actiongroup = tree.getByRole('toolbar');
+      let buttons = within(actiongroup).getAllByRole('button');
+
+      triggerPress(buttons[1]);
+
+      let menu = tree.getByRole('menu');
+      let items = within(menu).getAllByRole('menuitem');
+      expect(items[0]).toHaveAttribute('data-element', 'two');
+    });
+
     it('handles keyboard focus management properly', function () {
       let onAction = jest.fn();
       let tree = render(

packages/@react-spectrum/menu/src/MenuItem.tsx

@@ -13,12 +13,12 @@
 import CheckmarkMedium from '@spectrum-icons/ui/CheckmarkMedium';
 import {classNames, ClearSlots, SlotProvider} from '@react-spectrum/utils';
 import {DOMAttributes, Node} from '@react-types/shared';
+import {filterDOMProps, mergeProps, useSlotId} from '@react-aria/utils';
 import {FocusRing} from '@react-aria/focus';
 import {Grid} from '@react-spectrum/layout';
 import InfoOutline from '@spectrum-icons/workflow/InfoOutline';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import {mergeProps, useSlotId} from '@react-aria/utils';
 import React, {Key, useRef} from 'react';
 import styles from '@adobe/spectrum-css-temp/components/menu/vars.css';
 import {Text} from '@react-spectrum/text';
@@ -51,6 +51,8 @@ export function MenuItem<T>(props: MenuItemProps<T>) {
   if (isMenuDialogTrigger) {
     isUnavailable = menuDialogContext.isUnavailable;
   }
+  
+  let domProps = filterDOMProps(item.props);
 
   let {
     onClose,
@@ -104,7 +106,7 @@ export function MenuItem<T>(props: MenuItemProps<T>) {
   return (
     <FocusRing focusRingClass={classNames(styles, 'focus-ring')}>
       <li
-        {...mergeProps(menuItemProps)}
+        {...mergeProps(menuItemProps, domProps)}
         ref={ref}
         className={classNames(
           styles,