Add ActionBar examples to ListView and TableView docs

packages/@react-spectrum/list/docs/ListView.mdx

@@ -24,12 +24,14 @@ import {ActionGroup} from '@react-spectrum/actiongroup';
 import {ActionMenu} from '@react-spectrum/menu';
 import Delete from '@spectrum-icons/workflow/Delete';
 import Edit from '@spectrum-icons/workflow/Edit';
+import Copy from '@spectrum-icons/workflow/Copy';
 import {Flex} from '@react-spectrum/layout';
 import {Heading, Text} from '@react-spectrum/text';
 import {Image} from '@react-spectrum/image';
 import Info from '@spectrum-icons/workflow/Info';
 import {Item, ListView} from '@react-spectrum/list';
 import {Link} from '@react-spectrum/link';
+import {ActionBar, ActionBarContainer} from '@react-spectrum/actionbar'
 ```
 
 ---
@@ -363,6 +365,52 @@ This behavior is slightly different in the highlight selection style, where sing
 </Flex>
 ```
 
+### Action bar
+
+An [ActionBar](ActionBar.html) can be used when a user needs to perform actions on one or more items at the same time.
+
+```tsx example
+function Example() {
+  let items = [
+    {key: 0, name: 'Adobe Photoshop'},
+    {key: 1, name: 'Adobe Illustrator'},
+    {key: 2, name: 'Adobe XD'}
+  ];
+
+  let [selectedKeys, setSelectedKeys] = React.useState(new Set([0]));
+
+  return (
+    <ActionBarContainer height={300} maxWidth="size-6000">
+      <ListView items={items} maxWidth="size-6000" aria-label="ListView with action bar" selectionMode="multiple" selectedKeys={selectedKeys} onSelectionChange={setSelectedKeys}>
+        {(item) => (
+          <Item>
+            {item.name}
+          </Item>
+        )}
+      </ListView>
+      <ActionBar
+        isEmphasized
+        selectedItemCount={selectedKeys === 'all' ? items.length : selectedKeys.size}
+        onAction={(key) => alert(`Action: ${key}`)}
+        onClearSelection={() => setSelectedKeys(new Set([]))}>
+        <Item key="edit">
+          <Edit />
+          <Text>Edit</Text>
+        </Item>
+        <Item key="copy">
+          <Copy />
+          <Text>Copy</Text>
+        </Item>
+        <Item key="delete">
+          <Delete />
+          <Text>Delete</Text>
+        </Item>
+      </ActionBar>
+    </ActionBarContainer>
+  );
+}
+```
+
 ## Drag and drop
 
 To enable drag and drop in a ListView, you must provide the drag and drop hooks sourced from <TypeLink links={dndDocs.links} type={dndDocs.exports.useDragAndDrop} /> to the ListView's `dragAndDropHooks` prop.

packages/@react-spectrum/table/docs/TableView.mdx

@@ -19,8 +19,13 @@ import packageData from '@react-spectrum/table/package.json';
 ```jsx import
 import {ActionButton} from '@react-spectrum/button';
 import Add from '@spectrum-icons/workflow/Add';
+import Edit from '@spectrum-icons/workflow/Edit';
+import Copy from '@spectrum-icons/workflow/Copy';
+import Delete from '@spectrum-icons/workflow/Delete';
 import {Cell, Column, Row, TableView, TableBody, TableHeader} from '@react-spectrum/table';
 import {Flex} from '@react-spectrum/layout';
+import {ActionBar, ActionBarContainer, Item} from '@react-spectrum/actionbar';
+import {Text} from '@react-spectrum/text';
 ```
 
 ---
@@ -500,6 +505,68 @@ This behavior is slightly different in the highlight selection style, where sing
 </Flex>
 ```
 
+### Action bar
+
+An [ActionBar](ActionBar.html) can be used when a user needs to perform actions on one or more rows at the same time.
+
+```tsx example
+function Example() {
+  let columns = [
+    {name: 'Name', uid: 'name'},
+    {name: 'Type', uid: 'type'},
+    {name: 'Level', uid: 'level'}
+  ];
+
+  let rows = [
+    {id: 1, name: 'Charizard', type: 'Fire, Flying', level: '67'},
+    {id: 2, name: 'Blastoise', type: 'Water', level: '56'},
+    {id: 3, name: 'Venusaur', type: 'Grass, Poison', level: '83'},
+    {id: 4, name: 'Pikachu', type: 'Electric', level: '100'}
+  ];
+
+  let [selectedKeys, setSelectedKeys] = React.useState(new Set([1]));
+
+  return (
+    <ActionBarContainer>
+      <TableView
+        aria-label="TableView with ActionBar"
+        selectedKeys={selectedKeys}
+        selectionMode="multiple"
+        onSelectionChange={setSelectedKeys}>
+        <TableHeader columns={columns}>
+          {column => <Column key={column.uid}>{column.name}</Column>}
+        </TableHeader>
+        <TableBody items={rows}>
+          {item => (
+            <Row>
+              {key => <Cell>{item[key]}</Cell>}
+            </Row>
+          )}
+        </TableBody>
+      </TableView>
+      <ActionBar
+        isEmphasized
+        selectedItemCount={selectedKeys === 'all' ? selectedKeys : selectedKeys.size}
+        onClearSelection={() => setSelectedKeys(new Set())}
+        onAction={(key) => alert(`Action: ${key}`)}>
+        <Item key="edit" textValue="Edit">
+          <Edit />
+          <Text>Edit</Text>
+        </Item>
+        <Item key="copy" textValue="Copy">
+          <Copy />
+          <Text>Copy</Text>
+        </Item>
+        <Item key="delete" textValue="Delete">
+          <Delete />
+          <Text>Delete</Text>
+        </Item>
+      </ActionBar>
+    </ActionBarContainer>
+  );
+}
+```
+
 ## Sorting
 
 TableView supports sorting its data when a column header is pressed. To designate that a Column should support sorting, provide it with