Merge pull request #10788 from marmelab/fix-bulk-actions-styles

Fix bulk action buttons hover style

Author: fzaninotto

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

@@ -197,16 +197,7 @@ const PREFIX = 'RaBulkDeleteWithConfirmButton';
 const StyledButton = styled(Button, {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    color: (theme.vars || theme).palette.error.main,
-    '&:hover': {
-        backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.error.main}, transparent 12%)`,
-        // Reset on mouse devices
-        '@media (hover: none)': {
-            backgroundColor: 'transparent',
-        },
-    },
-}));
+})(() => ({}));
 
 const defaultIcon = <ActionDelete />;
 

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

@@ -98,6 +98,7 @@ export const BulkDeleteWithUndoButton = (
             onClick={handleClick}
             label={label}
             disabled={isPending}
+            color="error"
             {...sanitizeRestProps(rest)}
         >
             {icon}
@@ -131,16 +132,7 @@ const PREFIX = 'RaBulkDeleteWithUndoButton';
 const StyledButton = styled(Button, {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    color: (theme.vars || theme).palette.error.main,
-    '&:hover': {
-        backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.error.main}, transparent 12%)`,
-        // Reset on mouse devices
-        '@media (hover: none)': {
-            backgroundColor: 'transparent',
-        },
-    },
-}));
+})(() => ({}));
 
 declare module '@mui/material/styles' {
     interface ComponentNameToClassKey {

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

@@ -195,16 +195,7 @@ const PREFIX = 'RaBulkUpdateWithConfirmButton';
 const StyledButton = styled(Button, {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    color: (theme.vars || theme).palette.primary.main,
-    '&:hover': {
-        backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`,
-        // Reset on mouse devices
-        '@media (hover: none)': {
-            backgroundColor: 'transparent',
-        },
-    },
-}));
+})(() => ({}));
 
 const defaultIcon = <ActionUpdate />;
 

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

@@ -141,16 +141,7 @@ const PREFIX = 'RaBulkUpdateWithUndoButton';
 const StyledButton = styled(Button, {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    color: (theme.vars || theme).palette.primary.main,
-    '&:hover': {
-        backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`,
-        // Reset on mouse devices
-        '@media (hover: none)': {
-            backgroundColor: 'transparent',
-        },
-    },
-}));
+})(() => ({}));
 
 declare module '@mui/material/styles' {
     interface ComponentNameToClassKey {

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

@@ -107,15 +107,7 @@ const PREFIX = 'RaSelectAllButton';
 const StyledButton = styled(Button, {
     name: PREFIX,
     overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    '&:hover': {
-        backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`,
-        // Reset on mouse devices
-        '@media (hover: none)': {
-            backgroundColor: 'transparent',
-        },
-    },
-}));
+})(() => ({}));
 
 declare module '@mui/material/styles' {
     interface ComponentNameToClassKey {

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

@@ -10,6 +10,7 @@ import {
     styled,
     useThemeProps,
     lighten,
+    darken,
 } from '@mui/material/styles';
 import clsx from 'clsx';
 import Toolbar from '@mui/material/Toolbar';
@@ -69,7 +70,7 @@ export const BulkActionsToolbar = (inProps: BulkActionsToolbarProps) => {
                             color: theme =>
                                 (theme.vars || theme).palette.text.primary,
                         }}
-                        variant="subtitle1"
+                        variant="body1"
                     >
                         {translate(label, {
                             _: label,
@@ -124,7 +125,7 @@ const Root = styled('div', {
             ? theme.vars.palette.bulkActionsToolbarBackgroundColor
             : theme.palette.mode === 'light'
               ? lighten(theme.palette.primary.light, 0.8)
-              : theme.palette.primary.dark,
+              : darken(theme.palette.primary.dark, 0.5),
         minHeight: theme.spacing(6),
         height: theme.spacing(6),
         paddingRight: theme.spacing(2),
@@ -158,14 +159,12 @@ const Root = styled('div', {
     [`& .${BulkActionsToolbarClasses.title}`]: {
         display: 'flex',
         flex: '0 0 auto',
+        alignItems: 'center',
         gap: theme.spacing(1),
     },
 
     [`& .${BulkActionsToolbarClasses.icon}`]: {
         marginLeft: '-0.5em',
-        '&:hover': {
-            backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`,
-        },
     },
 }));
 

packages/ra-ui-materialui/src/theme/bwTheme.ts

@@ -144,6 +144,37 @@ const createBWTheme = (mode: 'light' | 'dark'): ThemeOptions => {
             },
             MuiIconButton: {
                 defaultProps: { disableRipple: true },
+                styleOverrides: {
+                    root: {
+                        textTransform: 'none',
+                        boxShadow: 'none',
+                    },
+                    colorPrimary: {
+                        '&:hover': {
+                            backgroundColor: GREY,
+                        },
+                    },
+                    colorSuccess: {
+                        borderColor: isDarkMode
+                            ? alpha(green['500'], 0.7)
+                            : alpha(green['800'], 0.5),
+                        '&:hover': {
+                            borderColor: isDarkMode
+                                ? green['500']
+                                : green['800'],
+                        },
+                    },
+                    colorError: {
+                        borderColor: isDarkMode
+                            ? alpha(deepOrange['600'], 0.7)
+                            : alpha(red['900'], 0.5),
+                        '&:hover': {
+                            borderColor: isDarkMode
+                                ? deepOrange['600']
+                                : red['900'],
+                        },
+                    },
+                },
             },
             MuiListItemButton: {
                 defaultProps: { disableRipple: true },

packages/ra-ui-materialui/src/theme/houseTheme.ts

@@ -61,7 +61,7 @@ const componentsOverrides = (theme: Theme): ThemeOptions['components'] => ({
                 },
                 '&.Mui-selected, &.Mui-selected:hover': {
                     color: theme.palette.primary.contrastText,
-                    zIndex: 5,
+                    zIndex: 2,
                 },
                 '&:hover': {
                     color: theme.palette.primary.main,
@@ -165,6 +165,13 @@ const componentsOverrides = (theme: Theme): ThemeOptions['components'] => ({
             fullWidth: true,
         },
     },
+    RaBulkActionsToolbar: {
+        styleOverrides: {
+            toolbar: {
+                zIndex: 10,
+            },
+        },
+    },
 });
 
 const alert = {

packages/ra-ui-materialui/src/theme/radiantTheme.ts

@@ -144,6 +144,13 @@ const componentsOverrides = (theme: Theme): ThemeOptions['components'] => {
                 fullWidth: true,
             },
         },
+        RaBulkActionsToolbar: {
+            styleOverrides: {
+                toolbar: {
+                    zIndex: 10,
+                },
+            },
+        },
     };
 };