Document more buttons

docs/Buttons.md

@@ -154,16 +154,99 @@ The following buttons are designed to be used in List views.
 
 Exports the current list, with filter applied, but without pagination. It relies on [the `exporter` function](./List.md#exporter) passed to the `<List>` component, via the `ListContext`. It's disabled for empty lists.
 
+By default, the `<ExportButton>` is included in the List actions.
+
+```jsx
+import { CreateButton, ExportButton, TopToolbar } from 'react-admin';
+
+const PostListActions = ({ basePath }) => (
+    <TopToolbar>
+        <PostFilter context="button" />
+        <CreateButton basePath={basePath} />
+        <ExportButton />
+    </TopToolbar>
+);
+
+export const PostList = (props) => (
+    <List actions={<PostListActions />} {...props}>
+        ...
+    </List>
+);
+```
+
+![Export button](./img/export-button.png)
+
 | Prop         | Required | Type            | Default            | Description                         |
 | ------------ | -------- | --------------- | ------------------ | ----------------------------------- |
 | `maxResults` | Optional | `number`        | 1000               | Maximum number of records to export |
 | `label`      | Optional | `string`        | 'ra.action.export' | label or translation message to use |
-| `icon`       | Optional | `React.element` | -                  | iconElement, e.g. `<CommentIcon />` |
+| `icon`       | Optional | `React.element` | `<DownloadIcon>`   | iconElement, e.g. `<CommentIcon />` |
 | `exporter`   | Optional | `function`      | -                  | Override the List exporter function |
 
+### `<BulkExportButton>`
+
+Same as `<ExportButton>`, except it only exports the selected rows instead of the entire list. To be used inside [the `<List bulkActionButtons>` prop](./List.md#bulkactionbuttons).
+
+```jsx
+import * as React from 'react';
+import { Fragment } from 'react';
+import { BulkDeleteButton, BulkExportButton } from 'react-admin';
+
+const PostBulkActionButtons = ({ basePath }) => (
+    <Fragment>
+        <BulkExportButton />
+        <BulkDeleteButton basePath={basePath} />
+    </Fragment>
+);
+
+export const PostList = (props) => (
+    <List {...props} bulkActionButtons={<PostBulkActionButtons />}>
+        ...
+    </List>
+);
+```
+
+![Bulk Export button](./img/bulk-export-button.png)
+
+| Prop         | Required | Type            | Default            | Description                         |
+| ------------ | -------- | --------------- | ------------------ | ----------------------------------- |
+| `label`      | Optional | `string`        | 'ra.action.export' | label or translation message to use |
+| `icon`       | Optional | `React.element` | `<DownloadIcon>`   | iconElement, e.g. `<CommentIcon />` |
+| `exporter`   | Optional | `function`      | -                  | Override the List exporter function |
 
 ### `<BulkDeleteButton>`
-### `<BulkExportButton>`
+
+Deletes the selected rows. To be used inside [the `<List bulkActionButtons>` prop](./List.md#bulkactionbuttons) (where it's enabled by default).
+
+```jsx
+import * as React from 'react';
+import { Fragment } from 'react';
+import { BulkDeleteButton, BulkExportButton } from 'react-admin';
+
+const PostBulkActionButtons = ({ basePath }) => (
+    <Fragment>
+        <BulkExportButton />
+        <BulkDeleteButton basePath={basePath} />
+    </Fragment>
+);
+
+export const PostList = (props) => (
+    <List {...props} bulkActionButtons={<PostBulkActionButtons />}>
+        ...
+    </List>
+);
+```
+
+![Bulk Delete button](./img/bulk-delete-button.png)
+
+| Prop         | Required | Type            | Default            | Description                         |
+| ------------ | -------- | --------------- | ------------------ | ----------------------------------- |
+| `label`      | Optional | `string`        | 'ra.action.delete' | label or translation message to use |
+| `icon`       | Optional | `React.element` | `<DeleteIcon>`     | iconElement, e.g. `<CommentIcon />` |
+| `exporter`   | Optional | `function`      | -                  | Override the List exporter function |
+| `undoable`   | Optional | `boolean`       | true               | Allow users to cancel the deletion  |
+
+### `<FilterButton>`
 ### `<SortButton>`
 
 ## Record Buttons

packages/ra-core/src/controller/useListContext.ts

@@ -109,6 +109,65 @@ const useListContext = <RecordType extends Record = Record>(
     );
 };
 
+/**
+ * Extract only the list controller props
+ *
+ * @param {Object} props Props passed to the useListContext hook
+ *
+ * @returns {ListControllerProps} List controller props
+ */
+const extractListContextProps = ({
+    basePath,
+    currentSort,
+    data,
+    defaultTitle,
+    displayedFilters,
+    filterValues,
+    hasCreate,
+    hideFilter,
+    ids,
+    loaded,
+    loading,
+    onSelect,
+    onToggleItem,
+    onUnselectItems,
+    page,
+    perPage,
+    resource,
+    selectedIds,
+    setFilters,
+    setPage,
+    setPerPage,
+    setSort,
+    showFilter,
+    total,
+}) => ({
+    basePath,
+    currentSort,
+    data,
+    defaultTitle,
+    displayedFilters,
+    filterValues,
+    hasCreate,
+    hideFilter,
+    ids,
+    loaded,
+    loading,
+    onSelect,
+    onToggleItem,
+    onUnselectItems,
+    page,
+    perPage,
+    resource,
+    selectedIds,
+    setFilters,
+    setPage,
+    setPerPage,
+    setSort,
+    showFilter,
+    total,
+});
+
 export default useListContext;
 
 /**

packages/ra-ui-materialui/src/button/BulkDeleteButton.tsx

@@ -8,6 +8,29 @@ import BulkDeleteWithUndoButton, {
     BulkDeleteWithUndoButtonProps,
 } from './BulkDeleteWithUndoButton';
 
+/**
+ * Deletes the selected rows.
+ *
+ * To be used inside the <List bulkActionButtons> prop (where it's enabled by default).
+ *
+ * @example // basic usage
+ * import * as React from 'react';
+ * import { Fragment } from 'react';
+ * import { BulkDeleteButton, BulkExportButton } from 'react-admin';
+ *
+ * const PostBulkActionButtons = ({ basePath }) => (
+ *     <Fragment>
+ *         <BulkExportButton />
+ *         <BulkDeleteButton basePath={basePath} />
+ *     </Fragment>
+ * );
+ *
+ * export const PostList = (props) => (
+ *     <List {...props} bulkActionButtons={<PostBulkActionButtons />}>
+ *         ...
+ *     </List>
+ * );
+ */
 const BulkDeleteButton: FC<BulkDeleteButtonProps> = ({ undoable, ...props }) =>
     undoable ? (
         <BulkDeleteWithUndoButton {...props} />

packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.tsx

@@ -11,6 +11,7 @@ import {
     useUnselectAll,
     CRUD_DELETE_MANY,
     useResourceContext,
+    useListContext,
 } from 'ra-core';
 
 import Button, { ButtonProps } from './Button';
@@ -39,9 +40,9 @@ const BulkDeleteWithUndoButton: FC<BulkDeleteWithUndoButtonProps> = props => {
         icon,
         label,
         onClick,
-        selectedIds,
         ...rest
     } = props;
+    const { selectedIds } = useListContext(props);
     const classes = useStyles(props);
     const notify = useNotify();
     const unselectAll = useUnselectAll();

packages/ra-ui-materialui/src/button/BulkExportButton.tsx

@@ -13,6 +13,29 @@ import {
 
 import Button, { ButtonProps } from './Button';
 
+/**
+ * Export the selected rows
+ *
+ * To be used inside the <List bulkActionButtons> prop.
+ *
+ * @example // basic usage
+ * import * as React from 'react';
+ * import { Fragment } from 'react';
+ * import { BulkDeleteButton, BulkExportButton } from 'react-admin';
+ *
+ * const PostBulkActionButtons = ({ basePath }) => (
+ *     <Fragment>
+ *         <BulkExportButton />
+ *         <BulkDeleteButton basePath={basePath} />
+ *     </Fragment>
+ * );
+ *
+ * export const PostList = (props) => (
+ *     <List {...props} bulkActionButtons={<PostBulkActionButtons />}>
+ *         ...
+ *     </List>
+ * );
+ */
 const BulkExportButton: FunctionComponent<BulkExportButtonProps> = props => {
     const {
         onClick,

packages/ra-ui-materialui/src/list/BulkActionsToolbar.tsx

@@ -33,6 +33,9 @@ const useStyles = makeStyles(
                 'height'
             )}, ${theme.transitions.create('min-height')}`,
         },
+        topToolbar: {
+            paddingTop: theme.spacing(2),
+        },
         buttons: {},
         collapsed: {
             minHeight: 0,
@@ -93,7 +96,7 @@ const BulkActionsToolbar: FC<BulkActionsToolbarProps> = props => {
                     })}
                 </Typography>
             </div>
-            <TopToolbar>
+            <TopToolbar className={classes.topToolbar}>
                 {Children.map(children, child =>
                     isValidElement(child)
                         ? cloneElement(child, {

packages/ra-ui-materialui/src/list/filter/FilterButton.tsx

@@ -12,6 +12,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import ContentFilter from '@material-ui/icons/FilterList';
 import classnames from 'classnames';
 import lodashGet from 'lodash/get';
+import { useListContext, useResourceContext } from 'ra-core';
 
 import { FilterButtonMenuItem } from './FilterButtonMenuItem';
 import Button from '../../button/Button';
@@ -25,16 +26,11 @@ const useStyles = makeStyles(
 );
 
 const FilterButton = (props: FilterButtonProps): JSX.Element => {
-    const {
-        filters,
-        displayedFilters = {},
-        filterValues,
-        showFilter,
-        classes: classesOverride,
-        className,
-        resource,
-        ...rest
-    } = props;
+    const { filters, classes: classesOverride, className, ...rest } = props;
+    const resource = useResourceContext(props);
+    const { displayedFilters = {}, filterValues, showFilter } = useListContext(
+        props
+    );
     const [open, setOpen] = useState(false);
     const anchorEl = useRef();
     const classes = useStyles(props);