From 0d4058a5f457b1386de32a7418755ac126a0465c Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Tue, 27 Apr 2021 18:19:36 -0300
Subject: [PATCH 01/11] Add children to ListActions component

---
 docs/List.md                                  | 32 ++++++++++++++++++-
 .../ra-ui-materialui/src/list/ListActions.tsx |  7 ++--
 2 files changed, 36 insertions(+), 3 deletions(-)

diff --git a/docs/List.md b/docs/List.md
index a93a1e1ca05..35d0ec46100 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -90,7 +90,37 @@ The title can be either a string or an element of your own.
 
 ![Actions Toolbar](./img/actions-toolbar.png)
 
-You can replace the list of default actions by your own element using the `actions` prop:
+You can add extra actions to a `<List>` by using the `actions` prop:
+
+{% raw %}
+```jsx
+import * as React from 'react';
+import { ListActions, Button } from 'react-admin';
+import IconEvent from '@material-ui/icons/Event';
+
+const CustomListActions = (props) => {
+    return (
+        <ListActions {...props}>
+            {/* Add your custom actions */}
+            <Button
+                onClick={() => { alert('Your custom action'); }}
+                label="Show calendar"
+            >
+                <IconEvent />
+            </Button>
+        </ListActions>
+    );
+};
+
+export const PostList = (props) => (
+    <List {...props} actions={<CustomListActions />}>
+        ...
+    </List>
+);
+```
+{% endraw %}
+
+If you want to have control over default actions as well, you can replace the entire `actions` component by your own:
 
 {% raw %}
 ```jsx
diff --git a/packages/ra-ui-materialui/src/list/ListActions.tsx b/packages/ra-ui-materialui/src/list/ListActions.tsx
index b7baca56783..dc74e00349e 100644
--- a/packages/ra-ui-materialui/src/list/ListActions.tsx
+++ b/packages/ra-ui-materialui/src/list/ListActions.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { cloneElement, useMemo, FC, ReactElement } from 'react';
+import { cloneElement, useMemo, FC, ReactElement, ReactNode } from 'react';
 import PropTypes from 'prop-types';
 import {
     sanitizeListRestProps,
@@ -16,7 +16,7 @@ import TopToolbar from '../layout/TopToolbar';
 import { CreateButton, ExportButton } from '../button';
 
 const ListActions: FC<ListActionsProps> = props => {
-    const { className, exporter, filters, ...rest } = props;
+    const { className, exporter, filters, children, ...rest } = props;
     const {
         currentSort,
         displayedFilters,
@@ -48,6 +48,7 @@ const ListActions: FC<ListActionsProps> = props => {
                         filterValues={filterValues}
                     />
                 )}
+                {children}
             </TopToolbar>
         ),
         [resource, displayedFilters, filterValues, selectedIds, filters, total] // eslint-disable-line react-hooks/exhaustive-deps
@@ -56,6 +57,7 @@ const ListActions: FC<ListActionsProps> = props => {
 
 ListActions.propTypes = {
     basePath: PropTypes.string,
+    children: PropTypes.node,
     className: PropTypes.string,
     currentSort: PropTypes.any,
     displayedFilters: PropTypes.object,
@@ -76,6 +78,7 @@ ListActions.defaultProps = {
 };
 
 export interface ListActionsProps extends ToolbarProps {
+    children?: ReactNode;
     currentSort?: SortPayload;
     className?: string;
     resource?: string;

From 495d506b8ed064b70591a00d0fd229c602eb44ae Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Wed, 28 Apr 2021 07:35:08 -0300
Subject: [PATCH 02/11] Add ListActions jsdoc

---
 .../ra-ui-materialui/src/list/ListActions.tsx | 41 +++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/packages/ra-ui-materialui/src/list/ListActions.tsx b/packages/ra-ui-materialui/src/list/ListActions.tsx
index dc74e00349e..bd2010cc76c 100644
--- a/packages/ra-ui-materialui/src/list/ListActions.tsx
+++ b/packages/ra-ui-materialui/src/list/ListActions.tsx
@@ -15,6 +15,47 @@ import { ToolbarProps } from '@material-ui/core';
 import TopToolbar from '../layout/TopToolbar';
 import { CreateButton, ExportButton } from '../button';
 
+/**
+ * Action Toolbar for the List view
+ *
+ * Internal component. If you want to add or remove actions for a List view,
+ * write your own ListActions Component. Then, in the <List> component,
+ * use it in the `actions` prop to pass a custom component.
+ *
+ * @example
+ *     import Button from '@material-ui/core/Button';
+ *     import { TopToolbar, List, CreateButton, ExportButton } from 'react-admin';
+ *     const {
+ *          currentSort,
+ *          resource,
+ *          filterValues,
+ *          hasCreate,
+ *          basePath,
+ *          selectedIds,
+ *          showFilter,
+ *          total,
+ *     } = useListContext();
+ *
+ *     const PostCreateActions = ({ basePath }) => (
+ *         <TopToolbar>
+ *             <CreateButton basePath={basePath} />
+ *             <ExportButton
+ *                 disabled={total === 0}
+ *                 resource={resource}
+ *                 sort={currentSort}
+ *                 filterValues={filterValues}
+ *             />
+ *             // Add your custom actions here //
+ *             <Button onClick={customAction}>Custom Action</Button>
+ *         </TopToolbar>
+ *     );
+ *
+ *     export const PostList = (props) => (
+ *         <List actions={<PostListActions />} {...props}>
+ *             ...
+ *         </List>
+ *     );
+ */
 const ListActions: FC<ListActionsProps> = props => {
     const { className, exporter, filters, children, ...rest } = props;
     const {

From 2df5f95799c911d650bf73c73c00595884f6018a Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Wed, 28 Apr 2021 07:38:54 -0300
Subject: [PATCH 03/11] Add children prop to Actions components

---
 packages/ra-ui-materialui/src/detail/CreateActions.tsx | 10 +++++++++-
 packages/ra-ui-materialui/src/detail/EditActions.tsx   | 10 +++++++++-
 packages/ra-ui-materialui/src/detail/ShowActions.tsx   | 10 +++++++++-
 3 files changed, 27 insertions(+), 3 deletions(-)

diff --git a/packages/ra-ui-materialui/src/detail/CreateActions.tsx b/packages/ra-ui-materialui/src/detail/CreateActions.tsx
index 9642f185edf..afb3ddb67fb 100644
--- a/packages/ra-ui-materialui/src/detail/CreateActions.tsx
+++ b/packages/ra-ui-materialui/src/detail/CreateActions.tsx
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import TopToolbar from '../layout/TopToolbar';
 import { ListButton } from '../button';
 import { useCreateContext, useResourceDefinition } from 'ra-core';
+import { ReactNode } from 'react';
 
 /**
  * Action Toolbar for the Create view
@@ -30,12 +31,17 @@ import { useCreateContext, useResourceDefinition } from 'ra-core';
  *         </Create>
  *     );
  */
-export const CreateActions = ({ className, ...rest }: CreateActionsProps) => {
+export const CreateActions = ({
+    children,
+    className,
+    ...rest
+}: CreateActionsProps) => {
     const { basePath } = useCreateContext(rest);
     const { hasList } = useResourceDefinition(rest);
     return (
         <TopToolbar className={className} {...sanitizeRestProps(rest)}>
             {hasList && <ListButton basePath={basePath} />}
+            {children}
         </TopToolbar>
     );
 };
@@ -49,6 +55,7 @@ const sanitizeRestProps = ({
 }) => rest;
 
 export interface CreateActionsProps {
+    children?: ReactNode;
     basePath?: string;
     className?: string;
     hasCreate?: boolean;
@@ -60,6 +67,7 @@ export interface CreateActionsProps {
 
 CreateActions.propTypes = {
     basePath: PropTypes.string,
+    children: PropTypes.node,
     className: PropTypes.string,
     hasCreate: PropTypes.bool,
     hasEdit: PropTypes.bool,
diff --git a/packages/ra-ui-materialui/src/detail/EditActions.tsx b/packages/ra-ui-materialui/src/detail/EditActions.tsx
index 814418d99c4..04cba8b0c7d 100644
--- a/packages/ra-ui-materialui/src/detail/EditActions.tsx
+++ b/packages/ra-ui-materialui/src/detail/EditActions.tsx
@@ -4,6 +4,7 @@ import PropTypes from 'prop-types';
 import { Record, useEditContext, useResourceDefinition } from 'ra-core';
 import { ShowButton } from '../button';
 import TopToolbar from '../layout/TopToolbar';
+import { ReactNode } from 'react';
 
 /**
  * Action Toolbar for the Edit view
@@ -30,13 +31,18 @@ import TopToolbar from '../layout/TopToolbar';
  *         </Edit>
  *     );
  */
-export const EditActions = ({ className, ...rest }: EditActionsProps) => {
+export const EditActions = ({
+    children,
+    className,
+    ...rest
+}: EditActionsProps) => {
     const { basePath, record } = useEditContext(rest);
     const { hasShow } = useResourceDefinition(rest);
 
     return (
         <TopToolbar className={className} {...sanitizeRestProps(rest)}>
             {hasShow && <ShowButton basePath={basePath} record={record} />}
+            {children}
         </TopToolbar>
     );
 };
@@ -52,6 +58,7 @@ const sanitizeRestProps = ({
 
 export interface EditActionsProps {
     basePath?: string;
+    children?: ReactNode;
     className?: string;
     data?: Record;
     hasCreate?: boolean;
@@ -63,6 +70,7 @@ export interface EditActionsProps {
 
 EditActions.propTypes = {
     basePath: PropTypes.string,
+    children: PropTypes.node,
     className: PropTypes.string,
     data: PropTypes.object,
     hasCreate: PropTypes.bool,
diff --git a/packages/ra-ui-materialui/src/detail/ShowActions.tsx b/packages/ra-ui-materialui/src/detail/ShowActions.tsx
index 928ceb1d630..0a716cd84fe 100644
--- a/packages/ra-ui-materialui/src/detail/ShowActions.tsx
+++ b/packages/ra-ui-materialui/src/detail/ShowActions.tsx
@@ -4,6 +4,7 @@ import { Record, useResourceDefinition, useShowContext } from 'ra-core';
 
 import { EditButton } from '../button';
 import TopToolbar from '../layout/TopToolbar';
+import { ReactNode } from 'react';
 
 const sanitizeRestProps = ({
     basePath,
@@ -39,18 +40,24 @@ const sanitizeRestProps = ({
  *         </Show>
  *     );
  */
-export const ShowActions = ({ className, ...rest }: ShowActionsProps) => {
+export const ShowActions = ({
+    children,
+    className,
+    ...rest
+}: ShowActionsProps) => {
     const { basePath, record } = useShowContext(rest);
     const { hasEdit } = useResourceDefinition(rest);
     return (
         <TopToolbar className={className} {...sanitizeRestProps(rest)}>
             {hasEdit && <EditButton basePath={basePath} record={record} />}
+            {children}
         </TopToolbar>
     );
 };
 
 export interface ShowActionsProps {
     basePath?: string;
+    children?: ReactNode;
     className?: string;
     data?: Record;
     hasCreate?: boolean;
@@ -62,6 +69,7 @@ export interface ShowActionsProps {
 
 ShowActions.propTypes = {
     basePath: PropTypes.string,
+    children: PropTypes.node,
     className: PropTypes.string,
     data: PropTypes.object,
     hasCreate: PropTypes.bool,

From ab1802f7ef130dc1e5af83837ecdc5275156ab71 Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Wed, 28 Apr 2021 07:53:46 -0300
Subject: [PATCH 04/11] Add documentation for the actions

---
 docs/CreateEdit.md | 35 ++++++++++++++++++++++++++++++++---
 docs/List.md       | 28 ++++++++++++----------------
 docs/Show.md       | 28 ++++++++++++++++++++++++++--
 3 files changed, 70 insertions(+), 21 deletions(-)

diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md
index bf76f2cdb4d..1f04d2f96a6 100644
--- a/docs/CreateEdit.md
+++ b/docs/CreateEdit.md
@@ -158,18 +158,47 @@ const PostTitle = ({ record }) => {
 
 ### Actions
 
-You can replace the list of default actions by your own element using the `actions` prop:
+You can add extra actions to an `<Edit>` or `<Create>`  by using the `actions` prop:
+
+```jsx
+import Button from '@material-ui/core/Button';
+import { Edit, EditActions } from 'react-admin';
+
+const PostEditActions = (props) => (
+    <EditActions {...props}>
+        {/* Add your custom actions */}
+        <Button 
+            color="primary"
+            onClick={() => { alert('Your custom action'); }}
+        >
+            Custom Action
+        </Button>
+    </EditActions>
+);
+
+export const PostEdit = (props) => (
+    <Edit actions={<PostEditActions />} {...props}>
+        ...
+    </Edit>
+);
+```
+If you want to have control over default actions as well, you can replace the entire `actions` component by your own:
 
 ```jsx
 import * as React from "react";
 import Button from '@material-ui/core/Button';
-import { TopToolbar, ShowButton } from 'react-admin';
+import { Edit, TopToolbar, ShowButton } from 'react-admin';
 
 const PostEditActions = ({ basePath, data, resource }) => (
     <TopToolbar>
         <ShowButton basePath={basePath} record={data} />
         {/* Add your custom actions */}
-        <Button color="primary" onClick={customAction}>Custom Action</Button>
+        <Button 
+          color="primary"
+          onClick={() => { alert('Your custom action'); }}
+        >
+            Custom Action
+        </Button>
     </TopToolbar>
 );
 
diff --git a/docs/List.md b/docs/List.md
index 35d0ec46100..9f0fe68d8cd 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -92,25 +92,22 @@ The title can be either a string or an element of your own.
 
 You can add extra actions to a `<List>` by using the `actions` prop:
 
-{% raw %}
 ```jsx
 import * as React from 'react';
-import { ListActions, Button } from 'react-admin';
+import { List, ListActions, Button } from 'react-admin';
 import IconEvent from '@material-ui/icons/Event';
 
-const CustomListActions = (props) => {
-    return (
-        <ListActions {...props}>
-            {/* Add your custom actions */}
-            <Button
-                onClick={() => { alert('Your custom action'); }}
-                label="Show calendar"
-            >
-                <IconEvent />
-            </Button>
-        </ListActions>
-    );
-};
+const CustomListActions = (props) => (
+    <ListActions {...props}>
+        {/* Add your custom actions */}
+        <Button
+            onClick={() => { alert('Your custom action'); }}
+            label="Show calendar"
+        >
+            <IconEvent />
+        </Button>
+    </ListActions>
+);
 
 export const PostList = (props) => (
     <List {...props} actions={<CustomListActions />}>
@@ -118,7 +115,6 @@ export const PostList = (props) => (
     </List>
 );
 ```
-{% endraw %}
 
 If you want to have control over default actions as well, you can replace the entire `actions` component by your own:
 
diff --git a/docs/Show.md b/docs/Show.md
index d9059b0cd62..a2e815dfe40 100644
--- a/docs/Show.md
+++ b/docs/Show.md
@@ -102,11 +102,35 @@ export const PostShow = (props) => (
 
 ### Actions
 
-You can replace the list of default actions by your own component using the `actions` prop:
+You can add extra actions to a `<Show>` by using the `actions` prop:
 
 ```jsx
 import Button from '@material-ui/core/Button';
-import { EditButton, TopToolbar } from 'react-admin';
+import { Show, ShowActions } from 'react-admin';
+
+const PostShowActions = (props) => (
+    <ShowActions {...props}>
+        {/* Add your custom actions */}
+        <Button 
+            color="primary"
+            onClick={() => { alert('Your custom action'); }}
+        >
+            Custom Action
+        </Button>
+    </ShowActions>
+);
+
+export const PostShow = (props) => (
+    <Show actions={<PostShowActions />} {...props}>
+        ...
+    </Show>
+);
+```
+If you want to have control over default actions as well, you can replace the entire `actions` component by your own:
+
+```jsx
+import Button from '@material-ui/core/Button';
+import { Show, EditButton, TopToolbar } from 'react-admin';
 
 const PostShowActions = ({ basePath, data, resource }) => (
     <TopToolbar>

From 74a7e0ef0d3296937f644cad5af9fbfcb48b4c39 Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Thu, 3 Jun 2021 00:38:37 -0300
Subject: [PATCH 05/11] Improve documentation

---
 docs/List.md | 28 +++-------------------------
 1 file changed, 3 insertions(+), 25 deletions(-)

diff --git a/docs/List.md b/docs/List.md
index 9f0fe68d8cd..f19f20ab2a1 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -136,39 +136,17 @@ import IconEvent from '@material-ui/icons/Event';
 const ListActions = (props) => {
     const {
         className,
-        exporter,
-        filters,
         maxResults,
         ...rest
     } = props;
     const {
-        currentSort,
-        resource,
-        displayedFilters,
-        filterValues,
-        hasCreate,
-        basePath,
-        selectedIds,
-        showFilter,
         total,
     } = useListContext();
     return (
         <TopToolbar className={className} {...sanitizeListRestProps(rest)}>
-            {filters && cloneElement(filters, {
-                resource,
-                showFilter,
-                displayedFilters,
-                filterValues,
-                context: 'button',
-            })}
-            <CreateButton basePath={basePath} />
-            <ExportButton
-                disabled={total === 0}
-                resource={resource}
-                sort={currentSort}
-                filterValues={filterValues}
-                maxResults={maxResults}
-            />
+            {cloneElement(filters, { context: 'button' })}
+            <CreateButton />
+            <ExportButton disabled={total === 0} maxResults={maxResults} />
             {/* Add your custom actions */}
             <Button
                 onClick={() => { alert('Your custom action'); }}

From c859fc1ffaed6f9c2cfcf0c7aa356b392b33ac97 Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Mon, 7 Jun 2021 11:05:06 -0300
Subject: [PATCH 06/11] Revert changes related to Create, Edit and Show actions
 views

---
 docs/CreateEdit.md                            | 35 ++-----------------
 docs/Show.md                                  | 28 ++-------------
 .../src/detail/CreateActions.tsx              | 10 +-----
 .../src/detail/EditActions.tsx                | 10 +-----
 .../src/detail/ShowActions.tsx                | 10 +-----
 5 files changed, 8 insertions(+), 85 deletions(-)

diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md
index 1f04d2f96a6..bf76f2cdb4d 100644
--- a/docs/CreateEdit.md
+++ b/docs/CreateEdit.md
@@ -158,47 +158,18 @@ const PostTitle = ({ record }) => {
 
 ### Actions
 
-You can add extra actions to an `<Edit>` or `<Create>`  by using the `actions` prop:
-
-```jsx
-import Button from '@material-ui/core/Button';
-import { Edit, EditActions } from 'react-admin';
-
-const PostEditActions = (props) => (
-    <EditActions {...props}>
-        {/* Add your custom actions */}
-        <Button 
-            color="primary"
-            onClick={() => { alert('Your custom action'); }}
-        >
-            Custom Action
-        </Button>
-    </EditActions>
-);
-
-export const PostEdit = (props) => (
-    <Edit actions={<PostEditActions />} {...props}>
-        ...
-    </Edit>
-);
-```
-If you want to have control over default actions as well, you can replace the entire `actions` component by your own:
+You can replace the list of default actions by your own element using the `actions` prop:
 
 ```jsx
 import * as React from "react";
 import Button from '@material-ui/core/Button';
-import { Edit, TopToolbar, ShowButton } from 'react-admin';
+import { TopToolbar, ShowButton } from 'react-admin';
 
 const PostEditActions = ({ basePath, data, resource }) => (
     <TopToolbar>
         <ShowButton basePath={basePath} record={data} />
         {/* Add your custom actions */}
-        <Button 
-          color="primary"
-          onClick={() => { alert('Your custom action'); }}
-        >
-            Custom Action
-        </Button>
+        <Button color="primary" onClick={customAction}>Custom Action</Button>
     </TopToolbar>
 );
 
diff --git a/docs/Show.md b/docs/Show.md
index a2e815dfe40..d9059b0cd62 100644
--- a/docs/Show.md
+++ b/docs/Show.md
@@ -102,35 +102,11 @@ export const PostShow = (props) => (
 
 ### Actions
 
-You can add extra actions to a `<Show>` by using the `actions` prop:
+You can replace the list of default actions by your own component using the `actions` prop:
 
 ```jsx
 import Button from '@material-ui/core/Button';
-import { Show, ShowActions } from 'react-admin';
-
-const PostShowActions = (props) => (
-    <ShowActions {...props}>
-        {/* Add your custom actions */}
-        <Button 
-            color="primary"
-            onClick={() => { alert('Your custom action'); }}
-        >
-            Custom Action
-        </Button>
-    </ShowActions>
-);
-
-export const PostShow = (props) => (
-    <Show actions={<PostShowActions />} {...props}>
-        ...
-    </Show>
-);
-```
-If you want to have control over default actions as well, you can replace the entire `actions` component by your own:
-
-```jsx
-import Button from '@material-ui/core/Button';
-import { Show, EditButton, TopToolbar } from 'react-admin';
+import { EditButton, TopToolbar } from 'react-admin';
 
 const PostShowActions = ({ basePath, data, resource }) => (
     <TopToolbar>
diff --git a/packages/ra-ui-materialui/src/detail/CreateActions.tsx b/packages/ra-ui-materialui/src/detail/CreateActions.tsx
index afb3ddb67fb..9642f185edf 100644
--- a/packages/ra-ui-materialui/src/detail/CreateActions.tsx
+++ b/packages/ra-ui-materialui/src/detail/CreateActions.tsx
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import TopToolbar from '../layout/TopToolbar';
 import { ListButton } from '../button';
 import { useCreateContext, useResourceDefinition } from 'ra-core';
-import { ReactNode } from 'react';
 
 /**
  * Action Toolbar for the Create view
@@ -31,17 +30,12 @@ import { ReactNode } from 'react';
  *         </Create>
  *     );
  */
-export const CreateActions = ({
-    children,
-    className,
-    ...rest
-}: CreateActionsProps) => {
+export const CreateActions = ({ className, ...rest }: CreateActionsProps) => {
     const { basePath } = useCreateContext(rest);
     const { hasList } = useResourceDefinition(rest);
     return (
         <TopToolbar className={className} {...sanitizeRestProps(rest)}>
             {hasList && <ListButton basePath={basePath} />}
-            {children}
         </TopToolbar>
     );
 };
@@ -55,7 +49,6 @@ const sanitizeRestProps = ({
 }) => rest;
 
 export interface CreateActionsProps {
-    children?: ReactNode;
     basePath?: string;
     className?: string;
     hasCreate?: boolean;
@@ -67,7 +60,6 @@ export interface CreateActionsProps {
 
 CreateActions.propTypes = {
     basePath: PropTypes.string,
-    children: PropTypes.node,
     className: PropTypes.string,
     hasCreate: PropTypes.bool,
     hasEdit: PropTypes.bool,
diff --git a/packages/ra-ui-materialui/src/detail/EditActions.tsx b/packages/ra-ui-materialui/src/detail/EditActions.tsx
index 04cba8b0c7d..814418d99c4 100644
--- a/packages/ra-ui-materialui/src/detail/EditActions.tsx
+++ b/packages/ra-ui-materialui/src/detail/EditActions.tsx
@@ -4,7 +4,6 @@ import PropTypes from 'prop-types';
 import { Record, useEditContext, useResourceDefinition } from 'ra-core';
 import { ShowButton } from '../button';
 import TopToolbar from '../layout/TopToolbar';
-import { ReactNode } from 'react';
 
 /**
  * Action Toolbar for the Edit view
@@ -31,18 +30,13 @@ import { ReactNode } from 'react';
  *         </Edit>
  *     );
  */
-export const EditActions = ({
-    children,
-    className,
-    ...rest
-}: EditActionsProps) => {
+export const EditActions = ({ className, ...rest }: EditActionsProps) => {
     const { basePath, record } = useEditContext(rest);
     const { hasShow } = useResourceDefinition(rest);
 
     return (
         <TopToolbar className={className} {...sanitizeRestProps(rest)}>
             {hasShow && <ShowButton basePath={basePath} record={record} />}
-            {children}
         </TopToolbar>
     );
 };
@@ -58,7 +52,6 @@ const sanitizeRestProps = ({
 
 export interface EditActionsProps {
     basePath?: string;
-    children?: ReactNode;
     className?: string;
     data?: Record;
     hasCreate?: boolean;
@@ -70,7 +63,6 @@ export interface EditActionsProps {
 
 EditActions.propTypes = {
     basePath: PropTypes.string,
-    children: PropTypes.node,
     className: PropTypes.string,
     data: PropTypes.object,
     hasCreate: PropTypes.bool,
diff --git a/packages/ra-ui-materialui/src/detail/ShowActions.tsx b/packages/ra-ui-materialui/src/detail/ShowActions.tsx
index 0a716cd84fe..928ceb1d630 100644
--- a/packages/ra-ui-materialui/src/detail/ShowActions.tsx
+++ b/packages/ra-ui-materialui/src/detail/ShowActions.tsx
@@ -4,7 +4,6 @@ import { Record, useResourceDefinition, useShowContext } from 'ra-core';
 
 import { EditButton } from '../button';
 import TopToolbar from '../layout/TopToolbar';
-import { ReactNode } from 'react';
 
 const sanitizeRestProps = ({
     basePath,
@@ -40,24 +39,18 @@ const sanitizeRestProps = ({
  *         </Show>
  *     );
  */
-export const ShowActions = ({
-    children,
-    className,
-    ...rest
-}: ShowActionsProps) => {
+export const ShowActions = ({ className, ...rest }: ShowActionsProps) => {
     const { basePath, record } = useShowContext(rest);
     const { hasEdit } = useResourceDefinition(rest);
     return (
         <TopToolbar className={className} {...sanitizeRestProps(rest)}>
             {hasEdit && <EditButton basePath={basePath} record={record} />}
-            {children}
         </TopToolbar>
     );
 };
 
 export interface ShowActionsProps {
     basePath?: string;
-    children?: ReactNode;
     className?: string;
     data?: Record;
     hasCreate?: boolean;
@@ -69,7 +62,6 @@ export interface ShowActionsProps {
 
 ShowActions.propTypes = {
     basePath: PropTypes.string,
-    children: PropTypes.node,
     className: PropTypes.string,
     data: PropTypes.object,
     hasCreate: PropTypes.bool,

From dd8f78a3cf1e529a80301cd9040ca54c029ac19a Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Mon, 7 Jun 2021 11:17:40 -0300
Subject: [PATCH 07/11] Revert changes related to ListActions and updated docs

---
 docs/List.md                                  | 20 ++++++++++++-------
 .../ra-ui-materialui/src/list/ListActions.tsx |  9 +++------
 2 files changed, 16 insertions(+), 13 deletions(-)

diff --git a/docs/List.md b/docs/List.md
index f19f20ab2a1..61d39d71d65 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -94,25 +94,29 @@ You can add extra actions to a `<List>` by using the `actions` prop:
 
 ```jsx
 import * as React from 'react';
+import { cloneElement } from 'react';
 import { List, ListActions, Button } from 'react-admin';
 import IconEvent from '@material-ui/icons/Event';
 
-const CustomListActions = (props) => (
-    <ListActions {...props}>
+const ListActions = (props) => (
+    <TopToolbar>
+        {cloneElement(props.filters, { context: 'button' })}
+        <CreateButton/>
+        <ExportButton/>
         {/* Add your custom actions */}
         <Button
             onClick={() => { alert('Your custom action'); }}
             label="Show calendar"
         >
-            <IconEvent />
+            <IconEvent/>
         </Button>
-    </ListActions>
+    </TopToolbar>
 );
 
 export const PostList = (props) => (
-    <List {...props} actions={<CustomListActions />}>
-        ...
-    </List>
+        <List {...props} actions={<ListActions/>}>
+          ...
+        </List>
 );
 ```
 
@@ -130,12 +134,14 @@ import {
     ExportButton,
     Button,
     sanitizeListRestProps,
+    useListContext
 } from 'react-admin';
 import IconEvent from '@material-ui/icons/Event';
 
 const ListActions = (props) => {
     const {
         className,
+        filters,
         maxResults,
         ...rest
     } = props;
diff --git a/packages/ra-ui-materialui/src/list/ListActions.tsx b/packages/ra-ui-materialui/src/list/ListActions.tsx
index bd2010cc76c..272c5bf19d9 100644
--- a/packages/ra-ui-materialui/src/list/ListActions.tsx
+++ b/packages/ra-ui-materialui/src/list/ListActions.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { cloneElement, useMemo, FC, ReactElement, ReactNode } from 'react';
+import { cloneElement, useMemo, FC, ReactElement } from 'react';
 import PropTypes from 'prop-types';
 import {
     sanitizeListRestProps,
@@ -36,7 +36,7 @@ import { CreateButton, ExportButton } from '../button';
  *          total,
  *     } = useListContext();
  *
- *     const PostCreateActions = ({ basePath }) => (
+ *     const PostListActions = ({ basePath }) => (
  *         <TopToolbar>
  *             <CreateButton basePath={basePath} />
  *             <ExportButton
@@ -57,7 +57,7 @@ import { CreateButton, ExportButton } from '../button';
  *     );
  */
 const ListActions: FC<ListActionsProps> = props => {
-    const { className, exporter, filters, children, ...rest } = props;
+    const { className, exporter, filters, ...rest } = props;
     const {
         currentSort,
         displayedFilters,
@@ -89,7 +89,6 @@ const ListActions: FC<ListActionsProps> = props => {
                         filterValues={filterValues}
                     />
                 )}
-                {children}
             </TopToolbar>
         ),
         [resource, displayedFilters, filterValues, selectedIds, filters, total] // eslint-disable-line react-hooks/exhaustive-deps
@@ -98,7 +97,6 @@ const ListActions: FC<ListActionsProps> = props => {
 
 ListActions.propTypes = {
     basePath: PropTypes.string,
-    children: PropTypes.node,
     className: PropTypes.string,
     currentSort: PropTypes.any,
     displayedFilters: PropTypes.object,
@@ -119,7 +117,6 @@ ListActions.defaultProps = {
 };
 
 export interface ListActionsProps extends ToolbarProps {
-    children?: ReactNode;
     currentSort?: SortPayload;
     className?: string;
     resource?: string;

From 4b4dbf3031500fa55dc19363d5de58dcae11b061 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?An=C3=ADbal=20Svarcas?= <WiXSL@users.noreply.github.com>
Date: Thu, 17 Jun 2021 09:25:43 -0300
Subject: [PATCH 08/11] Update docs/List.md

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
---
 docs/List.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/List.md b/docs/List.md
index 61d39d71d65..b94ee1e8f00 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -120,7 +120,7 @@ export const PostList = (props) => (
 );
 ```
 
-If you want to have control over default actions as well, you can replace the entire `actions` component by your own:
+This allows you to further control how the default actions behaves. For example, you could disable the `<ExportButton>` when the list is empty:
 
 {% raw %}
 ```jsx

From 2e7f6f122c04f13f6bdf5a9c21a8ebee6e548475 Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Thu, 17 Jun 2021 09:28:50 -0300
Subject: [PATCH 09/11] Applied review

---
 docs/List.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/List.md b/docs/List.md
index b94ee1e8f00..ae4f698974e 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -90,7 +90,7 @@ The title can be either a string or an element of your own.
 
 ![Actions Toolbar](./img/actions-toolbar.png)
 
-You can add extra actions to a `<List>` by using the `actions` prop:
+You can replace the list of default actions by your own element using the `actions` prop:
 
 ```jsx
 import * as React from 'react';

From 47a454591f360e70a12dc13f31d6697c403f90ba Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?An=C3=ADbal=20Svarcas?= <WiXSL@users.noreply.github.com>
Date: Thu, 17 Jun 2021 09:40:11 -0300
Subject: [PATCH 10/11] Update docs/List.md

Co-authored-by: Gildas Garcia <1122076+djhi@users.noreply.github.com>
---
 docs/List.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/List.md b/docs/List.md
index ae4f698974e..ca885be86bf 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -120,7 +120,7 @@ export const PostList = (props) => (
 );
 ```
 
-This allows you to further control how the default actions behaves. For example, you could disable the `<ExportButton>` when the list is empty:
+This allows you to further control how the default actions behave. For example, you could disable the `<ExportButton>` when the list is empty:
 
 {% raw %}
 ```jsx

From 2e78254d0247da506478609ac1f4dd1b1fcec3fc Mon Sep 17 00:00:00 2001
From: asvarcas <asvarcas@etriek.com.uy>
Date: Thu, 17 Jun 2021 15:49:07 -0300
Subject: [PATCH 11/11] Applied review

---
 docs/List.md                                  |  3 +--
 .../ra-ui-materialui/src/list/ListActions.tsx | 23 ++++---------------
 2 files changed, 6 insertions(+), 20 deletions(-)

diff --git a/docs/List.md b/docs/List.md
index ca885be86bf..18273c3d154 100644
--- a/docs/List.md
+++ b/docs/List.md
@@ -133,8 +133,7 @@ import {
     CreateButton,
     ExportButton,
     Button,
-    sanitizeListRestProps,
-    useListContext
+    sanitizeListRestProps    
 } from 'react-admin';
 import IconEvent from '@material-ui/icons/Event';
 
diff --git a/packages/ra-ui-materialui/src/list/ListActions.tsx b/packages/ra-ui-materialui/src/list/ListActions.tsx
index 272c5bf19d9..0e68b5a278b 100644
--- a/packages/ra-ui-materialui/src/list/ListActions.tsx
+++ b/packages/ra-ui-materialui/src/list/ListActions.tsx
@@ -23,28 +23,15 @@ import { CreateButton, ExportButton } from '../button';
  * use it in the `actions` prop to pass a custom component.
  *
  * @example
+ *     import { cloneElement } from 'react';
  *     import Button from '@material-ui/core/Button';
  *     import { TopToolbar, List, CreateButton, ExportButton } from 'react-admin';
- *     const {
- *          currentSort,
- *          resource,
- *          filterValues,
- *          hasCreate,
- *          basePath,
- *          selectedIds,
- *          showFilter,
- *          total,
- *     } = useListContext();
  *
- *     const PostListActions = ({ basePath }) => (
+ *     const PostListActions = ({ basePath, filters }) => (
  *         <TopToolbar>
- *             <CreateButton basePath={basePath} />
- *             <ExportButton
- *                 disabled={total === 0}
- *                 resource={resource}
- *                 sort={currentSort}
- *                 filterValues={filterValues}
- *             />
+ *             { cloneElement(filters, { context: 'button' }) }
+ *             <CreateButton/>
+ *             <ExportButton/>
  *             // Add your custom actions here //
  *             <Button onClick={customAction}>Custom Action</Button>
  *         </TopToolbar>