Skip to content

Commit 6bdd398

Browse files
fzaninottofzaninotto
authored
Merge pull request marmelab#10788 from marmelab/fix-bulk-actions-styles
Fix bulk action buttons hover style
2 parents 3b501e2 + 2d03f7a commit 6bdd398

9 files changed

Lines changed: 56 additions & 55 deletions

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

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -197,16 +197,7 @@ const PREFIX = 'RaBulkDeleteWithConfirmButton';
197197
const StyledButton = styled(Button, {
198198
name: PREFIX,
199199
overridesResolver: (props, styles) => styles.root,
200-
})(({ theme }) => ({
201-
color: (theme.vars || theme).palette.error.main,
202-
'&:hover': {
203-
backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.error.main}, transparent 12%)`,
204-
// Reset on mouse devices
205-
'@media (hover: none)': {
206-
backgroundColor: 'transparent',
207-
},
208-
},
209-
}));
200+
})(() => ({}));
210201

211202
const defaultIcon = <ActionDelete />;
212203

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

Lines changed: 2 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ export const BulkDeleteWithUndoButton = (
9898
onClick={handleClick}
9999
label={label}
100100
disabled={isPending}
101+
color="error"
101102
{...sanitizeRestProps(rest)}
102103
>
103104
{icon}
@@ -131,16 +132,7 @@ const PREFIX = 'RaBulkDeleteWithUndoButton';
131132
const StyledButton = styled(Button, {
132133
name: PREFIX,
133134
overridesResolver: (props, styles) => styles.root,
134-
})(({ theme }) => ({
135-
color: (theme.vars || theme).palette.error.main,
136-
'&:hover': {
137-
backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.error.main}, transparent 12%)`,
138-
// Reset on mouse devices
139-
'@media (hover: none)': {
140-
backgroundColor: 'transparent',
141-
},
142-
},
143-
}));
135+
})(() => ({}));
144136

145137
declare module '@mui/material/styles' {
146138
interface ComponentNameToClassKey {

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

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -195,16 +195,7 @@ const PREFIX = 'RaBulkUpdateWithConfirmButton';
195195
const StyledButton = styled(Button, {
196196
name: PREFIX,
197197
overridesResolver: (props, styles) => styles.root,
198-
})(({ theme }) => ({
199-
color: (theme.vars || theme).palette.primary.main,
200-
'&:hover': {
201-
backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`,
202-
// Reset on mouse devices
203-
'@media (hover: none)': {
204-
backgroundColor: 'transparent',
205-
},
206-
},
207-
}));
198+
})(() => ({}));
208199

209200
const defaultIcon = <ActionUpdate />;
210201

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

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -141,16 +141,7 @@ const PREFIX = 'RaBulkUpdateWithUndoButton';
141141
const StyledButton = styled(Button, {
142142
name: PREFIX,
143143
overridesResolver: (props, styles) => styles.root,
144-
})(({ theme }) => ({
145-
color: (theme.vars || theme).palette.primary.main,
146-
'&:hover': {
147-
backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`,
148-
// Reset on mouse devices
149-
'@media (hover: none)': {
150-
backgroundColor: 'transparent',
151-
},
152-
},
153-
}));
144+
})(() => ({}));
154145

155146
declare module '@mui/material/styles' {
156147
interface ComponentNameToClassKey {

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

Lines changed: 1 addition & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -107,15 +107,7 @@ const PREFIX = 'RaSelectAllButton';
107107
const StyledButton = styled(Button, {
108108
name: PREFIX,
109109
overridesResolver: (props, styles) => styles.root,
110-
})(({ theme }) => ({
111-
'&:hover': {
112-
backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`,
113-
// Reset on mouse devices
114-
'@media (hover: none)': {
115-
backgroundColor: 'transparent',
116-
},
117-
},
118-
}));
110+
})(() => ({}));
119111

120112
declare module '@mui/material/styles' {
121113
interface ComponentNameToClassKey {

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

Lines changed: 4 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import {
1010
styled,
1111
useThemeProps,
1212
lighten,
13+
darken,
1314
} from '@mui/material/styles';
1415
import clsx from 'clsx';
1516
import Toolbar from '@mui/material/Toolbar';
@@ -69,7 +70,7 @@ export const BulkActionsToolbar = (inProps: BulkActionsToolbarProps) => {
6970
color: theme =>
7071
(theme.vars || theme).palette.text.primary,
7172
}}
72-
variant="subtitle1"
73+
variant="body1"
7374
>
7475
{translate(label, {
7576
_: label,
@@ -124,7 +125,7 @@ const Root = styled('div', {
124125
? theme.vars.palette.bulkActionsToolbarBackgroundColor
125126
: theme.palette.mode === 'light'
126127
? lighten(theme.palette.primary.light, 0.8)
127-
: theme.palette.primary.dark,
128+
: darken(theme.palette.primary.dark, 0.5),
128129
minHeight: theme.spacing(6),
129130
height: theme.spacing(6),
130131
paddingRight: theme.spacing(2),
@@ -158,14 +159,12 @@ const Root = styled('div', {
158159
[`& .${BulkActionsToolbarClasses.title}`]: {
159160
display: 'flex',
160161
flex: '0 0 auto',
162+
alignItems: 'center',
161163
gap: theme.spacing(1),
162164
},
163165

164166
[`& .${BulkActionsToolbarClasses.icon}`]: {
165167
marginLeft: '-0.5em',
166-
'&:hover': {
167-
backgroundColor: `color-mix(in srgb, ${(theme.vars || theme).palette.primary.main}, transparent 12%)`,
168-
},
169168
},
170169
}));
171170

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,37 @@ const createBWTheme = (mode: 'light' | 'dark'): ThemeOptions => {
144144
},
145145
MuiIconButton: {
146146
defaultProps: { disableRipple: true },
147+
styleOverrides: {
148+
root: {
149+
textTransform: 'none',
150+
boxShadow: 'none',
151+
},
152+
colorPrimary: {
153+
'&:hover': {
154+
backgroundColor: GREY,
155+
},
156+
},
157+
colorSuccess: {
158+
borderColor: isDarkMode
159+
? alpha(green['500'], 0.7)
160+
: alpha(green['800'], 0.5),
161+
'&:hover': {
162+
borderColor: isDarkMode
163+
? green['500']
164+
: green['800'],
165+
},
166+
},
167+
colorError: {
168+
borderColor: isDarkMode
169+
? alpha(deepOrange['600'], 0.7)
170+
: alpha(red['900'], 0.5),
171+
'&:hover': {
172+
borderColor: isDarkMode
173+
? deepOrange['600']
174+
: red['900'],
175+
},
176+
},
177+
},
147178
},
148179
MuiListItemButton: {
149180
defaultProps: { disableRipple: true },

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

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const componentsOverrides = (theme: Theme): ThemeOptions['components'] => ({
6161
},
6262
'&.Mui-selected, &.Mui-selected:hover': {
6363
color: theme.palette.primary.contrastText,
64-
zIndex: 5,
64+
zIndex: 2,
6565
},
6666
'&:hover': {
6767
color: theme.palette.primary.main,
@@ -165,6 +165,13 @@ const componentsOverrides = (theme: Theme): ThemeOptions['components'] => ({
165165
fullWidth: true,
166166
},
167167
},
168+
RaBulkActionsToolbar: {
169+
styleOverrides: {
170+
toolbar: {
171+
zIndex: 10,
172+
},
173+
},
174+
},
168175
});
169176

170177
const alert = {

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

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -144,6 +144,13 @@ const componentsOverrides = (theme: Theme): ThemeOptions['components'] => {
144144
fullWidth: true,
145145
},
146146
},
147+
RaBulkActionsToolbar: {
148+
styleOverrides: {
149+
toolbar: {
150+
zIndex: 10,
151+
},
152+
},
153+
},
147154
};
148155
};
149156

0 commit comments

Comments
 (0)