Merge pull request #3214 from marmelab/ui-card

[RFR] Move Actions out of the Card
marmelab · May 16, 2019 · eb9c2f0 · eb9c2f0
2 parents 86cfda4 + 18bf2dd
commit eb9c2f0
Show file tree

Hide file tree

Showing 26 changed files with 547 additions and 437 deletions.
diff --git a/UPGRADE.md b/UPGRADE.md
@@ -110,3 +110,31 @@ import {
 
 export default withDataProvider(ApproveButton);
 ```
+
+## `<CardActions>` renamed to `<TopToolbar>`
+
+The `<CardActions>` component, which used to wrap the action buttons in the `Edit`, `Show` and `Create` views, is now named `<TopToolbar>`. That's because actions aren't located inside the `Card` anymore, but above it.
+
+```diff
+import Button from '@material-ui/core/Button';
+-import { CardActions, ShowButton } from 'react-admin';
++import { TopToolbar, ShowButton } from 'react-admin';
+
+const PostEditActions = ({ basePath, data, resource }) => (
+-   <CardActions>
++   <TopToolbar>
+        <ShowButton basePath={basePath} record={data} />
+        {/* Add your custom actions */}
+        <Button color="primary" onClick={customAction}>Custom Action</Button>
+-   </CardActions>
++   </TopToolbar>
+);
+
+export const PostEdit = (props) => (
+    <Edit actions={<PostEditActions />} {...props}>
+        ...
+    </Edit>
+);
+```
+
+But watch out, you can't just replace "CardActions" by "TopToolbar" in your entire codebase, because you probably also use Material-ui's `<CardActions>`, and that component still exists. The fact that react-admin exported a component with the same name but with a different look and feel than the material-iu component was also a motivation to rename it.
diff --git a/cypress/integration/list.js b/cypress/integration/list.js
@@ -126,7 +126,9 @@ describe('List Page', () => {
         it('should allow to select all items on the current page', () => {
             cy.contains('1-10 of 13'); // wait for data
             ListPagePosts.toggleSelectAll();
-            cy.get(ListPagePosts.elements.bulkActionsToolbar).should('exist');
+            cy.get(ListPagePosts.elements.bulkActionsToolbar).should(
+                'be.visible'
+            );
             cy.contains('10 items selected');
             cy.get(ListPagePosts.elements.selectedItem).should(els =>
                 expect(els).to.have.length(10)
@@ -136,10 +138,12 @@ describe('List Page', () => {
         it('should allow to unselect all items on the current page', () => {
             cy.contains('1-10 of 13'); // wait for data
             ListPagePosts.toggleSelectAll();
-            cy.get(ListPagePosts.elements.bulkActionsToolbar).should('exist');
+            cy.get(ListPagePosts.elements.bulkActionsToolbar).should(
+                'be.visible'
+            );
             ListPagePosts.toggleSelectAll();
             cy.get(ListPagePosts.elements.bulkActionsToolbar).should(
-                'not.exist'
+                'not.be.visible'
             );
             cy.get(ListPagePosts.elements.selectedItem).should(els =>
                 expect(els).to.have.length(0)
@@ -160,7 +164,7 @@ describe('List Page', () => {
             ListPagePosts.toggleSelectAll();
             ListPagePosts.applyUpdateBulkAction();
             cy.get(ListPagePosts.elements.bulkActionsToolbar).should(
-                'not.exist'
+                'not.be.visible'
             );
             cy.get(ListPagePosts.elements.selectedItem).should(els =>
                 expect(els).to.have.length(0)

diff --git a/docs/CreateEdit.md b/docs/CreateEdit.md
@@ -119,14 +119,14 @@ You can replace the list of default actions by your own element using the `actio
 
 ```jsx
 import Button from '@material-ui/core/Button';
-import { CardActions, ShowButton } from 'react-admin';
+import { TopToolbar, ShowButton } from 'react-admin';
 
 const PostEditActions = ({ basePath, data, resource }) => (
-    <CardActions>
+    <TopToolbar>
         <ShowButton basePath={basePath} record={data} />
         {/* Add your custom actions */}
         <Button color="primary" onClick={customAction}>Custom Action</Button>
-    </CardActions>
+    </TopToolbar>
 );
 
 export const PostEdit = (props) => (

diff --git a/docs/List.md b/docs/List.md
@@ -87,10 +87,10 @@ You can replace the list of default actions by your own element using the `actio
 
 ```jsx
 import Button from '@material-ui/core/Button';
-import { CardActions, CreateButton, ExportButton, RefreshButton } from 'react-admin';
+import { CreateButton, ExportButton, RefreshButton } from 'react-admin';
+import Toolbar from '@material-ui/core/Toolbar';
 
 const PostActions = ({
-    bulkActions,
     basePath,
     currentSort,
     displayedFilters,
@@ -103,14 +103,7 @@ const PostActions = ({
     showFilter,
     total
 }) => (
-    <CardActions>
-        {bulkActions && React.cloneElement(bulkActions, {
-            basePath,
-            filterValues,
-            resource,
-            selectedIds,
-            onUnselectItems,
-        })}
+    <Toolbar>
         {filters && React.cloneElement(filters, {
             resource,
             showFilter,
@@ -126,10 +119,9 @@ const PostActions = ({
             filter={filterValues}
             exporter={exporter}
         />
-        <RefreshButton />
         {/* Add your custom actions */}
         <Button color="primary" onClick={customAction}>Custom Action</Button>
-    </CardActions>
+    </Toolbar>
 );
 
 export const PostList = (props) => (

diff --git a/docs/Show.md b/docs/Show.md
@@ -91,22 +91,15 @@ export const PostShow = (props) => (
 You can replace the list of default actions by your own element using the `actions` prop:
 
 ```jsx
-import CardActions from '@material-ui/core/CardActions';
 import Button from '@material-ui/core/Button';
-import { EditButton } from 'react-admin';
-
-const cardActionStyle = {
-    zIndex: 2,
-    display: 'inline-block',
-    float: 'right',
-};
+import { EditButton, TopToolbar } from 'react-admin';
 
 const PostShowActions = ({ basePath, data, resource }) => (
-    <CardActions style={cardActionStyle}>
+    <TopToolbar>
         <EditButton basePath={basePath} record={data} />
         {/* Add your custom actions */}
         <Button color="primary" onClick={customAction}>Custom Action</Button>
-    </CardActions>
+    </TopToolbar>
 );
 
 export const PostShow = (props) => (
@@ -285,23 +278,17 @@ Here's an example inside a `Show` view with a `SimpleShowLayout` and a custom `a
 
 {% raw %}
 ```jsx
-import CardActions from '@material-ui/core/CardActions';
+import TopToolbar from '@material-ui/core/TopToolbar';
 import Button from '@material-ui/core/Button';
 import { EditButton, DeleteButton } from 'react-admin';
 
-const cardActionStyle = {
-    zIndex: 2,
-    display: 'inline-block',
-    float: 'right',
-};
-
 const PostShowActions = ({ permissions, basePath, data, resource }) => (
-    <CardActions style={cardActionStyle}>
+    <TopToolbar>
         <EditButton basePath={basePath} record={data} />
         {permissions === 'admin' &&
             <DeleteButton basePath={basePath} record={data} resource={resource} />
         }
-    </CardActions>
+    </TopToolbar>
 );
 
 export const PostShow = ({ permissions, ...props }) => (

diff --git a/examples/demo/src/segments/Segments.js b/examples/demo/src/segments/Segments.js
@@ -5,15 +5,23 @@ import TableBody from '@material-ui/core/TableBody';
 import TableCell from '@material-ui/core/TableCell';
 import TableHead from '@material-ui/core/TableHead';
 import TableRow from '@material-ui/core/TableRow';
+import { makeStyles } from '@material-ui/core/styles';
 import { useTranslate, Title } from 'react-admin';
 
 import LinkToRelatedCustomers from './LinkToRelatedCustomers';
 import segments from './data';
 
+const useStyles = makeStyles({
+    root: {
+        marginTop: 16,
+    },
+});
+
 const Segments = () => {
     const translate = useTranslate();
+    const classes = useStyles();
     return (
-        <Card>
+        <Card className={classes.root}>
             <Title title={translate('resources.segments.name')} />
             <Table size="small">
                 <TableHead>

diff --git a/examples/simple/src/comments/CommentList.js b/examples/simple/src/comments/CommentList.js
@@ -124,7 +124,7 @@ const CommentGrid = withStyles(listStyles)(
     ({ classes, ids, data, basePath }) => {
         const translate = useTranslate();
         return (
-            <Grid spacing={2} container style={{ padding: '0 1em' }}>
+            <Grid spacing={2} container>
                 {ids.map(id => (
                     <Grid item key={id} sm={12} md={6} lg={4}>
                         <Card className={classes.card}>
@@ -210,6 +210,7 @@ const CommentList = props => (
         exporter={exporter}
         filters={<CommentFilter />}
         pagination={<CommentPagination />}
+        component="div"
     >
         <Responsive small={<CommentMobileList />} medium={<CommentGrid />} />
     </List>

diff --git a/examples/simple/src/posts/PostEdit.js b/examples/simple/src/posts/PostEdit.js
@@ -1,6 +1,7 @@
 import RichTextInput from 'ra-input-rich-text';
 import React from 'react';
 import {
+    TopToolbar,
     AutocompleteArrayInput,
     ArrayInput,
     BooleanInput,
@@ -10,7 +11,6 @@ import {
     DateInput,
     DisabledInput,
     Edit,
-    CardActions,
     CloneButton,
     ShowButton,
     EditButton,
@@ -32,23 +32,15 @@ import {
 } from 'react-admin'; // eslint-disable-line import/no-unresolved
 import PostTitle from './PostTitle';
 
-const EditActions = ({
-    basePath,
-    className,
-    data,
-    hasShow,
-    hasList,
-    resource,
-    ...rest
-}) => (
-    <CardActions className={className} {...rest}>
+const EditActions = ({ basePath, data, hasShow }) => (
+    <TopToolbar>
         <CloneButton
             className="button-clone"
             basePath={basePath}
             record={data}
         />
         {hasShow && <ShowButton basePath={basePath} record={data} />}
-    </CardActions>
+    </TopToolbar>
 );
 
 const PostEdit = props => (

diff --git a/examples/simple/src/users/Aside.js b/examples/simple/src/users/Aside.js
@@ -1,18 +1,36 @@
 import React from 'react';
 import Typography from '@material-ui/core/Typography';
+import { makeStyles } from '@material-ui/core/styles';
 
-const Aside = () => (
-    <div style={{ width: 200, margin: '1em' }}>
-        <Typography variant="h6">App Users</Typography>
-        <Typography variant="body2">
-            Eiusmod adipisicing tempor duis qui. Ullamco aliqua tempor
-            incididunt aliquip aliquip qui ad minim aliqua. Aute et magna quis
-            pariatur irure sunt. Aliquip velit consequat dolore ullamco laborum
-            voluptate cupidatat. Proident minim reprehenderit id dolore elit sit
-            occaecat ad amet tempor esse occaecat enim. Laborum aliqua excepteur
-            qui ipsum in dolor et cillum est.
-        </Typography>
-    </div>
-);
+const useStyles = makeStyles(theme => ({
+    root: {
+        [theme.breakpoints.up('sm')]: {
+            width: 200,
+            margin: '1em',
+        },
+        [theme.breakpoints.down('sm')]: {
+            width: 0,
+            overflowX: 'hidden',
+            margin: 0,
+        },
+    },
+}));
+
+const Aside = () => {
+    const classes = useStyles();
+    return (
+        <div className={classes.root}>
+            <Typography variant="h6">App Users</Typography>
+            <Typography variant="body2">
+                Eiusmod adipisicing tempor duis qui. Ullamco aliqua tempor
+                incididunt aliquip aliquip qui ad minim aliqua. Aute et magna
+                quis pariatur irure sunt. Aliquip velit consequat dolore ullamco
+                laborum voluptate cupidatat. Proident minim reprehenderit id
+                dolore elit sit occaecat ad amet tempor esse occaecat enim.
+                Laborum aliqua excepteur qui ipsum in dolor et cillum est.
+            </Typography>
+        </div>
+    );
+};
 
 export default Aside;
diff --git a/packages/ra-ui-materialui/src/button/Button.js b/packages/ra-ui-materialui/src/button/Button.js
@@ -45,7 +45,7 @@ const Button = ({
     const translate = useTranslate();
     return (
         <Responsive
-            small={
+            xsmall={
                 label && !disabled ? (
                     <Tooltip title={translate(label, { _: label })}>
                         <IconButton
@@ -68,7 +68,7 @@ const Button = ({
                     </IconButton>
                 )
             }
-            medium={
+            small={
                 <MuiButton
                     className={classnames(classes.button, className)}
                     color={color}