Merge pull request #3946 from DanudeSandstorm/makestyles-options

Add name option to makeStyles
marmelab · Nov 26, 2019 · 5c38c08 · 5c38c08
2 parents 6f9fd6a + 4979a0b
commit 5c38c08
Show file tree

Hide file tree

Showing 68 changed files with 1,103 additions and 894 deletions.
diff --git a/packages/ra-input-rich-text/src/index.js b/packages/ra-input-rich-text/src/index.js
@@ -9,7 +9,7 @@ import { makeStyles } from '@material-ui/core/styles';
 
 import styles from './styles';
 
-const useStyles = makeStyles(styles);
+const useStyles = makeStyles(styles, { name: 'RaRichTextInput' });
 
 const RichTextInput = ({
     options = {}, // Quill editor options

diff --git a/packages/ra-ui-materialui/src/Link.tsx b/packages/ra-ui-materialui/src/Link.tsx
@@ -4,12 +4,15 @@ import classNames from 'classnames';
 import { Link as RRLink } from 'react-router-dom';
 import { makeStyles } from '@material-ui/core/styles';
 
-const useStyles = makeStyles(theme => ({
-    link: {
-        textDecoration: 'none',
-        color: theme.palette.primary.main,
-    },
-}));
+const useStyles = makeStyles(
+    theme => ({
+        link: {
+            textDecoration: 'none',
+            color: theme.palette.primary.main,
+        },
+    }),
+    { name: 'RaLink' }
+);
 
 const Link = ({
     to,

diff --git a/packages/ra-ui-materialui/src/auth/Login.tsx b/packages/ra-ui-materialui/src/auth/Login.tsx
@@ -33,30 +33,33 @@ interface Props {
     theme: object;
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-    main: {
-        display: 'flex',
-        flexDirection: 'column',
-        minHeight: '100vh',
-        height: '1px',
-        alignItems: 'center',
-        justifyContent: 'flex-start',
-        backgroundRepeat: 'no-repeat',
-        backgroundSize: 'cover',
-    },
-    card: {
-        minWidth: 300,
-        marginTop: '6em',
-    },
-    avatar: {
-        margin: '1em',
-        display: 'flex',
-        justifyContent: 'center',
-    },
-    icon: {
-        backgroundColor: theme.palette.secondary[500],
-    },
-}));
+const useStyles = makeStyles(
+    (theme: Theme) => ({
+        main: {
+            display: 'flex',
+            flexDirection: 'column',
+            minHeight: '100vh',
+            height: '1px',
+            alignItems: 'center',
+            justifyContent: 'flex-start',
+            backgroundRepeat: 'no-repeat',
+            backgroundSize: 'cover',
+        },
+        card: {
+            minWidth: 300,
+            marginTop: '6em',
+        },
+        avatar: {
+            margin: '1em',
+            display: 'flex',
+            justifyContent: 'center',
+        },
+        icon: {
+            backgroundColor: theme.palette.secondary[500],
+        },
+    }),
+    { name: 'RaLogin' }
+);
 
 /**
  * A standalone login page, to serve as authentication gate to the admin

diff --git a/packages/ra-ui-materialui/src/auth/LoginForm.tsx b/packages/ra-ui-materialui/src/auth/LoginForm.tsx
@@ -17,20 +17,23 @@ interface FormData {
     password: string;
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-    form: {
-        padding: '0 1em 1em 1em',
-    },
-    input: {
-        marginTop: '1em',
-    },
-    button: {
-        width: '100%',
-    },
-    icon: {
-        marginRight: theme.spacing(1),
-    },
-}));
+const useStyles = makeStyles(
+    (theme: Theme) => ({
+        form: {
+            padding: '0 1em 1em 1em',
+        },
+        input: {
+            marginTop: '1em',
+        },
+        button: {
+            width: '100%',
+        },
+        icon: {
+            marginRight: theme.spacing(1),
+        },
+    }),
+    { name: 'RaLoginForm' }
+);
 
 const Input = ({
     meta: { touched, error }, // eslint-disable-line react/prop-types

diff --git a/packages/ra-ui-materialui/src/auth/Logout.tsx b/packages/ra-ui-materialui/src/auth/Logout.tsx
@@ -13,12 +13,15 @@ interface Props {
     redirectTo?: string;
 }
 
-const useStyles = makeStyles((theme: Theme) => ({
-    menuItem: {
-        color: theme.palette.text.secondary,
-    },
-    icon: { minWidth: theme.spacing(5) },
-}));
+const useStyles = makeStyles(
+    (theme: Theme) => ({
+        menuItem: {
+            color: theme.palette.text.secondary,
+        },
+        icon: { minWidth: theme.spacing(5) },
+    }),
+    { name: 'RaLogout' }
+);
 
 /**
  * Logout button component, to be passed to the Admin component

diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.js
@@ -27,18 +27,21 @@ const sanitizeRestProps = ({
     ...rest
 }) => rest;
 
-const useStyles = makeStyles(theme => ({
-    deleteButton: {
-        color: theme.palette.error.main,
-        '&:hover': {
-            backgroundColor: fade(theme.palette.error.main, 0.12),
-            // Reset on mouse devices
-            '@media (hover: none)': {
-                backgroundColor: 'transparent',
+const useStyles = makeStyles(
+    theme => ({
+        deleteButton: {
+            color: theme.palette.error.main,
+            '&:hover': {
+                backgroundColor: fade(theme.palette.error.main, 0.12),
+                // Reset on mouse devices
+                '@media (hover: none)': {
+                    backgroundColor: 'transparent',
+                },
             },
         },
-    },
-}));
+    }),
+    { name: 'RaBulkDeleteWithConfirmButton' }
+);
 
 const BulkDeleteWithConfirmButton = ({
     basePath,

diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js b/packages/ra-ui-materialui/src/button/BulkDeleteWithUndoButton.js
@@ -26,18 +26,21 @@ const sanitizeRestProps = ({
     ...rest
 }) => rest;
 
-const useStyles = makeStyles(theme => ({
-    deleteButton: {
-        color: theme.palette.error.main,
-        '&:hover': {
-            backgroundColor: fade(theme.palette.error.main, 0.12),
-            // Reset on mouse devices
-            '@media (hover: none)': {
-                backgroundColor: 'transparent',
+const useStyles = makeStyles(
+    theme => ({
+        deleteButton: {
+            color: theme.palette.error.main,
+            '&:hover': {
+                backgroundColor: fade(theme.palette.error.main, 0.12),
+                // Reset on mouse devices
+                '@media (hover: none)': {
+                    backgroundColor: 'transparent',
+                },
             },
         },
-    },
-}));
+    }),
+    { name: 'RaBulkDeleteWithUndoButton' }
+);
 
 const BulkDeleteWithUndoButton = ({
     basePath,

diff --git a/packages/ra-ui-materialui/src/button/Button.js b/packages/ra-ui-materialui/src/button/Button.js
@@ -10,27 +10,30 @@ import {
 import classnames from 'classnames';
 import { useTranslate } from 'ra-core';
 
-const useStyles = makeStyles({
-    button: {
-        display: 'inline-flex',
-        alignItems: 'center',
+const useStyles = makeStyles(
+    {
+        button: {
+            display: 'inline-flex',
+            alignItems: 'center',
+        },
+        label: {
+            paddingLeft: '0.5em',
+        },
+        labelRightIcon: {
+            paddingRight: '0.5em',
+        },
+        smallIcon: {
+            fontSize: 20,
+        },
+        mediumIcon: {
+            fontSize: 22,
+        },
+        largeIcon: {
+            fontSize: 24,
+        },
     },
-    label: {
-        paddingLeft: '0.5em',
-    },
-    labelRightIcon: {
-        paddingRight: '0.5em',
-    },
-    smallIcon: {
-        fontSize: 20,
-    },
-    mediumIcon: {
-        fontSize: 22,
-    },
-    largeIcon: {
-        fontSize: 24,
-    },
-});
+    { name: 'RaButton' }
+);
 
 const Button = ({
     alignIcon = 'left',

diff --git a/packages/ra-ui-materialui/src/button/CreateButton.js b/packages/ra-ui-materialui/src/button/CreateButton.js
@@ -9,21 +9,24 @@ import { useTranslate } from 'ra-core';
 
 import Button from './Button';
 
-const useStyles = makeStyles(theme => ({
-    floating: {
-        color: theme.palette.getContrastText(theme.palette.primary.main),
-        margin: 0,
-        top: 'auto',
-        right: 20,
-        bottom: 60,
-        left: 'auto',
-        position: 'fixed',
-        zIndex: 1000,
-    },
-    floatingLink: {
-        color: 'inherit',
-    },
-}));
+const useStyles = makeStyles(
+    theme => ({
+        floating: {
+            color: theme.palette.getContrastText(theme.palette.primary.main),
+            margin: 0,
+            top: 'auto',
+            right: 20,
+            bottom: 60,
+            left: 'auto',
+            position: 'fixed',
+            zIndex: 1000,
+        },
+        floatingLink: {
+            color: 'inherit',
+        },
+    }),
+    { name: 'RaCreateButton' }
+);
 
 const CreateButton = ({
     basePath = '',

diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.js
@@ -34,18 +34,21 @@ const sanitizeRestProps = ({
     ...rest
 }) => rest;
 
-const useStyles = makeStyles(theme => ({
-    deleteButton: {
-        color: theme.palette.error.main,
-        '&:hover': {
-            backgroundColor: fade(theme.palette.error.main, 0.12),
-            // Reset on mouse devices
-            '@media (hover: none)': {
-                backgroundColor: 'transparent',
+const useStyles = makeStyles(
+    theme => ({
+        deleteButton: {
+            color: theme.palette.error.main,
+            '&:hover': {
+                backgroundColor: fade(theme.palette.error.main, 0.12),
+                // Reset on mouse devices
+                '@media (hover: none)': {
+                    backgroundColor: 'transparent',
+                },
             },
         },
-    },
-}));
+    }),
+    { name: 'RaDeleteWithConfirmButton' }
+);
 
 const DeleteWithConfirmButton = ({
     basePath,

diff --git a/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js b/packages/ra-ui-materialui/src/button/DeleteWithUndoButton.js
@@ -32,18 +32,21 @@ export const sanitizeRestProps = ({
     ...rest
 }) => rest;
 
-const useStyles = makeStyles(theme => ({
-    deleteButton: {
-        color: theme.palette.error.main,
-        '&:hover': {
-            backgroundColor: fade(theme.palette.error.main, 0.12),
-            // Reset on mouse devices
-            '@media (hover: none)': {
-                backgroundColor: 'transparent',
+const useStyles = makeStyles(
+    theme => ({
+        deleteButton: {
+            color: theme.palette.error.main,
+            '&:hover': {
+                backgroundColor: fade(theme.palette.error.main, 0.12),
+                // Reset on mouse devices
+                '@media (hover: none)': {
+                    backgroundColor: 'transparent',
+                },
             },
         },
-    },
-}));
+    }),
+    { name: 'RaDeleteWithUndoButton' }
+);
 
 const DeleteWithUndoButton = ({
     label = 'ra.action.delete',

diff --git a/packages/ra-ui-materialui/src/button/SaveButton.js b/packages/ra-ui-materialui/src/button/SaveButton.js
@@ -7,17 +7,20 @@ import ContentSave from '@material-ui/icons/Save';
 import classnames from 'classnames';
 import { useTranslate, useNotify } from 'ra-core';
 
-const useStyles = makeStyles(theme => ({
-    button: {
-        position: 'relative',
-    },
-    leftIcon: {
-        marginRight: theme.spacing(1),
-    },
-    icon: {
-        fontSize: 18,
-    },
-}));
+const useStyles = makeStyles(
+    theme => ({
+        button: {
+            position: 'relative',
+        },
+        leftIcon: {
+            marginRight: theme.spacing(1),
+        },
+        icon: {
+            fontSize: 18,
+        },
+    }),
+    { name: 'RaSaveButton' }
+);
 
 const sanitizeRestProps = ({
     basePath,