Add actionMenu slot to ListView (#2485)

Author: tiffany-sy-lin

packages/@react-spectrum/list/src/ListViewItem.tsx

@@ -118,7 +118,8 @@ export function ListViewItem(props) {
                 UNSAFE_className: listStyles['react-spectrum-ListViewItem-actions'],
                 isQuiet: true,
                 density: 'compact'
-              }
+              },
+              actionMenu: {UNSAFE_className: listStyles['react-spectrum-ListViewItem-actionmenu'], isQuiet: true}
             }}>
             {typeof item.rendered === 'string' ? <Content>{item.rendered}</Content> : item.rendered}
             <ClearSlots>

packages/@react-spectrum/list/src/listview.css

@@ -113,8 +113,8 @@
   grid-template-columns: auto auto auto 1fr auto auto;
   grid-template-rows: 1fr auto;
   grid-template-areas:
-    "checkbox icon image content actions chevron"
-    "checkbox icon image description actions chevron"
+    "checkbox icon image content actions actionmenu chevron"
+    "checkbox icon image description actions actionmenu chevron"
   ;
   align-items: center;
 }
@@ -169,6 +169,10 @@
   flex-shrink: 0;
 }
 
+.react-spectrum-ListViewItem-actionmenu {
+  grid-area: actionmenu;
+}
+
 .react-spectrum-ListView-centeredWrapper {
   display: flex;
   align-items: center;

packages/@react-spectrum/list/stories/ListView.stories.tsx

@@ -11,6 +11,7 @@ import {Flex} from '@react-spectrum/layout';
 import Folder from '@spectrum-icons/workflow/Folder';
 import {Heading, Text} from '@react-spectrum/text';
 import {IllustratedMessage} from '@react-spectrum/illustratedmessage';
+import Info from '@spectrum-icons/workflow/Info';
 import {Item, ListView} from '../';
 import {Link} from '@react-spectrum/link';
 import MoreSmall from '@spectrum-icons/workflow/MoreSmall';
@@ -174,6 +175,27 @@ storiesOf('ListView', module)
         </Item>
       </ActionMenu>
     )))
+  .add('actions: ActionGroup + ActionMenu', () =>
+    renderActionsExample(props => (
+      <>
+        <ActionGroup buttonLabelBehavior="hide" {...props} slot="actionGroup">
+          <Item key="info">
+            <Info />
+            <Text>Info</Text>
+          </Item>
+        </ActionGroup>
+        <ActionMenu {...props} slot="actionMenu">
+          <Item key="add">
+            <Add />
+            <Text>Add</Text>
+          </Item>
+          <Item key="delete">
+            <Delete />
+            <Text>Delete</Text>
+          </Item>
+        </ActionMenu>
+      </>
+    )))
   .add('dynamic items + renderEmptyState', () => (<EmptyTest />))
   .add('selectionStyle: highlight', () => (
     <ListView width="250px" height={400} selectionStyle="highlight" selectionMode="multiple" items={[...Array(20).keys()].map(k => ({key: k, name: `Item ${k}`}))}>