From 986ab871609e3267c3da6fcf3ee4c5eea6c7b333 Mon Sep 17 00:00:00 2001
From: fzaninotto <fzaninotto@gmail.com>
Date: Thu, 17 Oct 2019 21:02:00 +0200
Subject: [PATCH] Fix Datagrid has no padding when disabling bulk actions

Closes #3834
---
 examples/demo/public/index.html               | 11 ----
 examples/demo/src/orders/OrderList.js         |  8 ++-
 .../demo/src/reviews/ReviewListDesktop.js     |  1 +
 examples/demo/src/visitors/SegmentsField.js   |  7 ++-
 examples/demo/src/visitors/VisitorList.js     |  3 +-
 examples/simple/src/posts/PostList.js         |  4 +-
 examples/simple/src/users/UserList.js         |  1 +
 .../ra-ui-materialui/src/list/Datagrid.js     | 26 +++-----
 .../src/list/DatagridLoading.js               | 18 ++----
 .../ra-ui-materialui/src/list/DatagridRow.js  |  5 +-
 .../src/list/SingleFieldList.js               | 11 +++-
 yarn.lock                                     | 61 ++-----------------
 12 files changed, 44 insertions(+), 112 deletions(-)

diff --git a/examples/demo/public/index.html b/examples/demo/public/index.html
index 5dde70476a9..3cba5ca72a5 100644
--- a/examples/demo/public/index.html
+++ b/examples/demo/public/index.html
@@ -132,17 +132,6 @@
       To begin the development, run `npm start` or `yarn start`.
       To create a production bundle, use `npm run build` or `yarn build`.
     -->
-  <script>
-    (function (i, s, o, g, r, a, m) {
-      i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
-        (i[r].q = i[r].q || []).push(arguments)
-      }, i[r].l = 1 * new Date(); a = s.createElement(o),
-        m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
-    })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
-
-    ga('create', 'UA-46201426-1', 'auto');
-    ga('send', 'pageview');
-  </script>
 </body>
 
 </html>
diff --git a/examples/demo/src/orders/OrderList.js b/examples/demo/src/orders/OrderList.js
index dd427087b32..2964ba7e780 100644
--- a/examples/demo/src/orders/OrderList.js
+++ b/examples/demo/src/orders/OrderList.js
@@ -98,7 +98,12 @@ class TabbedDatagrid extends React.Component {
                 ) : (
                     <div>
                         {filterValues.status === 'ordered' && (
-                            <Datagrid {...props} ids={this.state.ordered}>
+                            <Datagrid
+                                {...props}
+                                ids={this.state.ordered}
+                                optimized
+                                rowClick="edit"
+                            >
                                 <DateField source="date" showTime />
                                 <TextField source="reference" />
                                 <CustomerReferenceField />
@@ -111,7 +116,6 @@ class TabbedDatagrid extends React.Component {
                                     }}
                                     className={classes.total}
                                 />
-                                <EditButton />
                             </Datagrid>
                         )}
                         {filterValues.status === 'delivered' && (
diff --git a/examples/demo/src/reviews/ReviewListDesktop.js b/examples/demo/src/reviews/ReviewListDesktop.js
index 5410bfe440a..f20dd469be7 100644
--- a/examples/demo/src/reviews/ReviewListDesktop.js
+++ b/examples/demo/src/reviews/ReviewListDesktop.js
@@ -29,6 +29,7 @@ const ReviewListDesktop = props => {
             rowClick="edit"
             rowStyle={rowStyle}
             classes={{ headerRow: classes.headerRow }}
+            optimized
             {...props}
         >
             <DateField source="date" />
diff --git a/examples/demo/src/visitors/SegmentsField.js b/examples/demo/src/visitors/SegmentsField.js
index c4d4473aa7e..d05913fb8ac 100644
--- a/examples/demo/src/visitors/SegmentsField.js
+++ b/examples/demo/src/visitors/SegmentsField.js
@@ -4,7 +4,12 @@ import { useTranslate } from 'react-admin';
 import segments from '../segments/data';
 
 const styles = {
-    main: { display: 'flex', flexWrap: 'wrap' },
+    main: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        marginTop: -8,
+        marginBottom: -8,
+    },
     chip: { margin: 4 },
 };
 
diff --git a/examples/demo/src/visitors/VisitorList.js b/examples/demo/src/visitors/VisitorList.js
index 7cadce8de38..1ba8895d190 100644
--- a/examples/demo/src/visitors/VisitorList.js
+++ b/examples/demo/src/visitors/VisitorList.js
@@ -46,7 +46,7 @@ const VisitorList = props => {
             {isXsmall ? (
                 <MobileGrid />
             ) : (
-                <Datagrid>
+                <Datagrid optimized rowClick="edit">
                     <CustomerLinkField />
                     <DateField source="last_seen" type="date" />
                     <NumberField
@@ -61,7 +61,6 @@ const VisitorList = props => {
                     <DateField source="latest_purchase" showTime />
                     <BooleanField source="has_newsletter" label="News." />
                     <SegmentsField />
-                    <EditButton />
                 </Datagrid>
             )}
         </List>
diff --git a/examples/simple/src/posts/PostList.js b/examples/simple/src/posts/PostList.js
index 6412d36d629..e365f1dd9dc 100644
--- a/examples/simple/src/posts/PostList.js
+++ b/examples/simple/src/posts/PostList.js
@@ -90,6 +90,8 @@ const usePostListActionToolbarStyles = makeStyles({
     toolbar: {
         alignItems: 'center',
         display: 'flex',
+        marginTop: -1,
+        marginBottom: -1,
     },
 });
 
@@ -134,7 +136,7 @@ const PostList = props => {
                     }
                 />
             ) : (
-                <Datagrid rowClick={rowClick} expand={PostPanel}>
+                <Datagrid rowClick={rowClick} expand={PostPanel} optimized>
                     <TextField source="id" />
                     <TextField source="title" cellClassName={classes.title} />
                     <DateField
diff --git a/examples/simple/src/users/UserList.js b/examples/simple/src/users/UserList.js
index b6f495ac05a..2e892c1a90f 100644
--- a/examples/simple/src/users/UserList.js
+++ b/examples/simple/src/users/UserList.js
@@ -56,6 +56,7 @@ const UserList = ({ permissions, ...props }) => (
             <Datagrid
                 rowClick={rowClick(permissions)}
                 expand={<UserEditEmbedded />}
+                optimized
             >
                 <TextField source="id" />
                 <TextField source="name" />
diff --git a/packages/ra-ui-materialui/src/list/Datagrid.js b/packages/ra-ui-materialui/src/list/Datagrid.js
index f9cd6b33019..e6a7c27bcd7 100644
--- a/packages/ra-ui-materialui/src/list/Datagrid.js
+++ b/packages/ra-ui-materialui/src/list/Datagrid.js
@@ -23,18 +23,9 @@ const useStyles = makeStyles(theme => ({
         tableLayout: 'auto',
     },
     thead: {},
-    tbody: {
-        height: 'inherit',
-    },
+    tbody: {},
     headerRow: {},
-    headerCell: {
-        height: 42,
-        minHeight: 42,
-        padding: '0 12px',
-        '&:last-child': {
-            padding: '0 12px',
-        },
-    },
+    headerCell: {},
     checkbox: {},
     row: {},
     clickableRow: {
@@ -42,12 +33,7 @@ const useStyles = makeStyles(theme => ({
     },
     rowEven: {},
     rowOdd: {},
-    rowCell: {
-        padding: '0 12px',
-        '&:last-child': {
-            padding: '0 12px',
-        },
-    },
+    rowCell: {},
     expandHeader: {
         padding: 0,
         width: theme.spacing(6),
@@ -122,6 +108,7 @@ function Datagrid({ classes: classesOverride, ...props }) {
         rowStyle,
         selectedIds,
         setSort,
+        size = 'small',
         total,
         version,
         ...rest
@@ -161,6 +148,7 @@ function Datagrid({ classes: classesOverride, ...props }) {
                 expand={expand}
                 hasBulkActions={hasBulkActions}
                 nbChildren={React.Children.count(children)}
+                size={size}
             />
         );
     }
@@ -182,6 +170,7 @@ function Datagrid({ classes: classesOverride, ...props }) {
     return (
         <Table
             className={classnames(classes.table, className)}
+            size={size}
             {...sanitizeListRestProps(rest)}
         >
             <TableHead className={classes.thead}>
@@ -195,7 +184,7 @@ function Datagrid({ classes: classesOverride, ...props }) {
                         />
                     )}
                     {hasBulkActions && (
-                        <TableCell padding="none">
+                        <TableCell padding="checkbox">
                             <Checkbox
                                 className="select-all"
                                 color="primary"
@@ -221,7 +210,6 @@ function Datagrid({ classes: classesOverride, ...props }) {
                                 key={field.props.source || index}
                                 resource={resource}
                                 updateSort={updateSort}
-                                padding="none"
                             />
                         ) : null
                     )}
diff --git a/packages/ra-ui-materialui/src/list/DatagridLoading.js b/packages/ra-ui-materialui/src/list/DatagridLoading.js
index 4488770e4cf..9ca6eb70f29 100644
--- a/packages/ra-ui-materialui/src/list/DatagridLoading.js
+++ b/packages/ra-ui-materialui/src/list/DatagridLoading.js
@@ -32,8 +32,9 @@ const DatagridLoading = ({
     hasBulkActions,
     nbChildren,
     nbFakeLines = 5,
+    size,
 }) => (
-    <Table className={classnames(classes.table, className)}>
+    <Table className={classnames(classes.table, className)} size={size}>
         <TableHead>
             <TableRow className={classes.row}>
                 {expand && (
@@ -44,7 +45,7 @@ const DatagridLoading = ({
                 )}
                 {hasBulkActions && (
                     <TableCell
-                        padding="none"
+                        padding="checkbox"
                         className={classes.expandIconCell}
                     >
                         <Checkbox
@@ -59,9 +60,6 @@ const DatagridLoading = ({
                         variant="head"
                         className={classes.headerCell}
                         key={key}
-                        padding={
-                            !!expand || hasBulkActions ? 'none' : undefined
-                        }
                     >
                         <Placeholder />
                     </TableCell>
@@ -87,7 +85,7 @@ const DatagridLoading = ({
                     )}
                     {hasBulkActions && (
                         <TableCell
-                            padding="none"
+                            padding="checkbox"
                             className={classes.expandIconCell}
                         >
                             <Checkbox
@@ -98,13 +96,7 @@ const DatagridLoading = ({
                         </TableCell>
                     )}
                     {times(nbChildren, key2 => (
-                        <TableCell
-                            padding={
-                                !!expand || hasBulkActions ? 'none' : undefined
-                            }
-                            className={classes.rowCell}
-                            key={key2}
-                        >
+                        <TableCell className={classes.rowCell} key={key2}>
                             <Placeholder />
                         </TableCell>
                     ))}
diff --git a/packages/ra-ui-materialui/src/list/DatagridRow.js b/packages/ra-ui-materialui/src/list/DatagridRow.js
index 6dafcf09153..2ef4f5d39db 100644
--- a/packages/ra-ui-materialui/src/list/DatagridRow.js
+++ b/packages/ra-ui-materialui/src/list/DatagridRow.js
@@ -134,7 +134,7 @@ const DatagridRow = ({
                     </TableCell>
                 )}
                 {hasBulkActions && (
-                    <TableCell padding="none">
+                    <TableCell padding="checkbox">
                         <Checkbox
                             color="primary"
                             className={`select-item ${classes.checkbox}`}
@@ -152,9 +152,6 @@ const DatagridRow = ({
                                 classes.rowCell
                             )}
                             record={record}
-                            padding={
-                                !!expand || hasBulkActions ? 'none' : undefined
-                            }
                             {...{ field, basePath, resource }}
                         />
                     ) : null
diff --git a/packages/ra-ui-materialui/src/list/SingleFieldList.js b/packages/ra-ui-materialui/src/list/SingleFieldList.js
index b7936f2935a..75eb61e9ce8 100644
--- a/packages/ra-ui-materialui/src/list/SingleFieldList.js
+++ b/packages/ra-ui-materialui/src/list/SingleFieldList.js
@@ -7,9 +7,14 @@ import { linkToRecord } from 'ra-core';
 
 import Link from '../Link';
 
-const useStyles = makeStyles({
-    root: { display: 'flex', flexWrap: 'wrap' },
-});
+const useStyles = makeStyles(theme => ({
+    root: {
+        display: 'flex',
+        flexWrap: 'wrap',
+        marginTop: -theme.spacing(1),
+        marginBottom: -theme.spacing(1),
+    },
+}));
 
 // useful to prevent click bubbling in a datagrid with rowClick
 const stopPropagation = e => e.stopPropagation();
diff --git a/yarn.lock b/yarn.lock
index c583ef929ea..1b58365bd4e 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2274,7 +2274,7 @@ arrify@^1.0.0, arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
-asap@^2.0.6, asap@~2.0.3, asap@~2.0.6:
+asap@~2.0.3, asap@~2.0.6:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
   integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
@@ -5284,16 +5284,6 @@ discontinuous-range@1.0.0:
   resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
   integrity sha1-44Mx8IRLukm5qctxx3FYWqsbxlo=
 
-dnd-core@^4.0.5:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/dnd-core/-/dnd-core-4.0.5.tgz#3b83d138d0d5e265c73ec978dec5e1ed441dc665"
-  integrity sha1-O4PRONDV4mXHPsl43sXh7UQdxmU=
-  dependencies:
-    asap "^2.0.6"
-    invariant "^2.2.4"
-    lodash "^4.17.10"
-    redux "^4.0.0"
-
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
@@ -6577,7 +6567,7 @@ final-form-arrays@^3.0.1:
   resolved "https://registry.yarnpkg.com/final-form-arrays/-/final-form-arrays-3.0.1.tgz#862e5e946d391039ebcdfadbe55fc3a63849e559"
   integrity sha512-GKXecufCNCjDcz1+3peL21LuuTlApoxCcnpOnmfeJfC3xAlFKGdytYMfifP7W1IEWTGC8twTv3zItESkej8qpg==
 
-final-form@^4.18.4, final-form@^4.18.5:
+final-form@^4.18.5:
   version "4.18.5"
   resolved "https://registry.yarnpkg.com/final-form/-/final-form-4.18.5.tgz#e359cfaf2892ef135d92fcf22e06b475dda3a885"
   integrity sha512-DH/I2W7fWxU8J8ZsbYJ5jLvUbhbatCvLhIKlsU17MvY6W3QnetPEyuX5mcxXgIGFNFKxfvqsG3pDy/1/VwOiTw==
@@ -7566,7 +7556,7 @@ hmac-drbg@^1.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
-hoist-non-react-statics@^2.3.1, hoist-non-react-statics@^2.5.0:
+hoist-non-react-statics@^2.3.1:
   version "2.5.5"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz#c5903cf409c0dfd908f388e619d86b9c1174cb47"
   integrity sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw==
@@ -8111,7 +8101,7 @@ into-stream@^3.1.0:
     from2 "^2.1.1"
     p-is-promise "^1.1.0"
 
-invariant@^2.1.0, invariant@^2.2.2, invariant@^2.2.4:
+invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
   integrity sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==
@@ -11447,11 +11437,6 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
-performant-array-to-tree@^1.1.2:
-  version "1.1.4"
-  resolved "https://registry.yarnpkg.com/performant-array-to-tree/-/performant-array-to-tree-1.1.4.tgz#bc8f11e3fe203f656262e1f240590e9120d5834f"
-  integrity sha512-VdQxR58SHHIgfbX6dKCTkFlgGOJmYF1lmZVaxao/lhfWiYWDJLifOZUkDVWbFv/g+AZIbFeCJI+90Y9oskamMQ==
-
 pify@^2.0.0, pify@^2.2.0, pify@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
@@ -12666,25 +12651,6 @@ react-dev-utils@^9.0.3:
     strip-ansi "5.2.0"
     text-table "0.2.0"
 
-react-dnd-touch-backend@^0.5.1:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/react-dnd-touch-backend/-/react-dnd-touch-backend-0.5.2.tgz#188759fc941f38bbadc7a7e2a733eccce23434cc"
-  integrity sha512-d7Mgq2D5556Dq70l5ePU3RAY7HLGhioYIoGYan0IWGU3iEMFdpbhdKT4iPaYGNfCseo1610afF3yLvRacv5CLQ==
-  dependencies:
-    invariant "^2.2.4"
-
-react-dnd@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/react-dnd/-/react-dnd-5.0.0.tgz#c4a17c70109e456dad8906be838e6ee8f32b06b5"
-  integrity sha1-xKF8cBCeRW2tiQa+g45u6PMrBrU=
-  dependencies:
-    dnd-core "^4.0.5"
-    hoist-non-react-statics "^2.5.0"
-    invariant "^2.1.0"
-    lodash "^4.17.10"
-    recompose "^0.27.1"
-    shallowequal "^1.0.2"
-
 react-dom@16.9.0, react-dom@^16.9.0:
   version "16.9.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.9.0.tgz#5e65527a5e26f22ae3701131bcccaee9fb0d3962"
@@ -12729,7 +12695,7 @@ react-is@^16.5.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.9.0.tgz#21ca9561399aad0ff1a7701c01683e8ca981edcb"
   integrity sha512-tJBzzzIgnnRfEm046qRcURvwQnZVXmuCbscxUO5RWrGTXpon2d4c8mI0D8WE6ydVIm29JiLB6+RslkIvym9Rjw==
 
-react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
+react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
@@ -13045,18 +13011,6 @@ rechoir@^0.6.2:
   dependencies:
     resolve "^1.1.6"
 
-recompose@^0.27.1:
-  version "0.27.1"
-  resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.27.1.tgz#1a49e931f183634516633bbb4f4edbfd3f38a7ba"
-  integrity sha512-p7xsyi/rfNjHfdP7vPU02uSFa+Q1eHhjKrvO+3+kRP4Ortj+MxEmpmd+UQtBGM2D2iNAjzNI5rCyBKp9Ob5McA==
-  dependencies:
-    babel-runtime "^6.26.0"
-    change-emitter "^0.1.2"
-    fbjs "^0.8.1"
-    hoist-non-react-statics "^2.3.1"
-    react-lifecycles-compat "^3.0.2"
-    symbol-observable "^1.0.4"
-
 recompose@~0.26.0:
   version "0.26.0"
   resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.26.0.tgz#9babff039cb72ba5bd17366d55d7232fbdfb2d30"
@@ -13897,11 +13851,6 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallowequal@^1.0.2:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
-  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
-
 shebang-command@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/shebang-command/-/shebang-command-1.2.0.tgz#44aac65b695b03398968c39f363fee5deafdf1ea"