Merge pull request #9060 from marmelab/9050-fix-delete-button-style

Fix delete button style

Author: slax57

packages/ra-ui-materialui/src/button/DeleteButton.stories.tsx

@@ -0,0 +1,61 @@
+import { colors, createTheme } from '@mui/material';
+import polyglotI18nProvider from 'ra-i18n-polyglot';
+import englishMessages from 'ra-language-english';
+import frenchMessages from 'ra-language-french';
+import * as React from 'react';
+import { AdminContext } from '../AdminContext';
+import { DeleteButton } from './DeleteButton';
+
+const theme = createTheme({
+    palette: {
+        primary: {
+            light: colors.orange[100],
+            main: colors.orange[500],
+            contrastText: colors.grey[50],
+        },
+        error: {
+            main: colors.orange[500],
+        },
+    },
+});
+
+const i18nProvider = polyglotI18nProvider(
+    locale => (locale === 'fr' ? frenchMessages : englishMessages),
+    'en'
+);
+
+export default { title: 'ra-ui-materialui/button/DeleteButton' };
+
+export const Basic = () => (
+    <AdminContext>
+        <DeleteButton label="Delete" record={{ id: 1 }} />
+    </AdminContext>
+);
+
+export const Pessimistic = () => (
+    <AdminContext i18nProvider={i18nProvider}>
+        <DeleteButton
+            mutationMode="pessimistic"
+            record={{ id: 1 }}
+            label="Delete"
+            resource="post"
+        />
+    </AdminContext>
+);
+
+export const WithUserDefinedPalette = () => (
+    <AdminContext theme={theme}>
+        <DeleteButton label="Delete" record={{ id: 1 }} />
+    </AdminContext>
+);
+
+export const ContainedWithUserDefinedPalette = () => (
+    <AdminContext theme={theme}>
+        <DeleteButton
+            variant="contained"
+            color="primary"
+            label="Delete"
+            record={{ id: 1 }}
+        />
+    </AdminContext>
+);

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

@@ -1,7 +1,5 @@
 import React, { Fragment, ReactEventHandler, ReactElement } from 'react';
-import { styled } from '@mui/material/styles';
 import PropTypes from 'prop-types';
-import { alpha } from '@mui/material/styles';
 import ActionDelete from '@mui/icons-material/Delete';
 import clsx from 'clsx';
 import inflection from 'inflection';
@@ -34,6 +32,7 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
         redirect = 'list',
         translateOptions = {},
         mutationOptions,
+        color = 'error',
         ...rest
     } = props;
     const translate = useTranslate();
@@ -57,15 +56,16 @@ export const DeleteWithConfirmButton = <RecordType extends RaRecord = any>(
 
     return (
         <Fragment>
-            <StyledButton
+            <Button
                 onClick={handleDialogOpen}
                 label={label}
                 className={clsx('ra-delete-button', className)}
                 key="button"
+                color={color}
                 {...rest}
             >
                 {icon}
-            </StyledButton>
+            </Button>
             <Confirm
                 isOpen={open}
                 loading={isLoading}
@@ -131,19 +131,3 @@ DeleteWithConfirmButton.propTypes = {
     icon: PropTypes.element,
     translateOptions: PropTypes.object,
 };
-
-const PREFIX = 'RaDeleteWithConfirmButton';
-
-const StyledButton = styled(Button, {
-    name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    color: theme.palette.error.main,
-    '&:hover': {
-        backgroundColor: alpha(theme.palette.error.main, 0.12),
-        // Reset on mouse devices
-        '@media (hover: none)': {
-            backgroundColor: 'transparent',
-        },
-    },
-}));

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

@@ -1,8 +1,6 @@
 import * as React from 'react';
-import { styled } from '@mui/material/styles';
 import { ReactElement, ReactEventHandler } from 'react';
 import PropTypes from 'prop-types';
-import { alpha } from '@mui/material/styles';
 import ActionDelete from '@mui/icons-material/Delete';
 import clsx from 'clsx';
 import { UseMutationOptions } from 'react-query';
@@ -27,6 +25,7 @@ export const DeleteWithUndoButton = <RecordType extends RaRecord = any>(
         onClick,
         redirect = 'list',
         mutationOptions,
+        color = 'error',
         ...rest
     } = props;
 
@@ -41,16 +40,17 @@ export const DeleteWithUndoButton = <RecordType extends RaRecord = any>(
     });
 
     return (
-        <StyledButton
+        <Button
             onClick={handleDelete}
             disabled={isLoading}
             label={label}
             className={clsx('ra-delete-button', className)}
             key="button"
+            color={color}
             {...rest}
         >
             {icon}
-        </StyledButton>
+        </Button>
     );
 };
 
@@ -84,19 +84,3 @@ DeleteWithUndoButton.propTypes = {
     resource: PropTypes.string,
     icon: PropTypes.element,
 };
-
-const PREFIX = 'RaDeleteWithUndoButton';
-
-const StyledButton = styled(Button, {
-    name: PREFIX,
-    overridesResolver: (props, styles) => styles.root,
-})(({ theme }) => ({
-    color: theme.palette.error.main,
-    '&:hover': {
-        backgroundColor: alpha(theme.palette.error.main, 0.12),
-        // Reset on mouse devices
-        '@media (hover: none)': {
-            backgroundColor: 'transparent',
-        },
-    },
-}));