marmelab · slax57 · Jul 24, 2023 · Jul 20, 2023 · Jul 20, 2023 · Jul 20, 2023
diff --git a/docs/Buttons.md b/docs/Buttons.md
@@ -280,7 +280,7 @@ Delete the current record after a confirm dialog has been accepted. To be used i
 | `className`                                                | Optional | `string`                         | -                           | Class name to customize the look and feel of the button element itself  |
 | `label`                                                    | Optional | `string`                         | 'ra.action.delete'          | label or translation message to use                                     |
 | `icon`                                                     | Optional | `ReactElement`                   | `<DeleteIcon>`              | iconElement, e.g. `<CommentIcon />`                                     |
-| `confirmTitle`                                             | Optional | `string`                         | 'ra.message.delete_title'   | Title of the confirm dialog                                             |
+| `confirmTitle`                                             | Optional | `ReactNode`                      | 'ra.message.delete_title'   | Title of the confirm dialog                                             |
 | `confirmContent`                                           | Optional | `ReactNode`                      | 'ra.message.delete_content' | Message or React component to be used as the body of the confirm dialog |
 | `redirect`                                                 | Optional | `string | false | Function`      | 'list'                      | Custom redirection after success side effect                            |
 | `translateOptions`                                         | Optional | `{ id?: string, name?: string }` | {}                          | Custom id and name to be used in the confirm dialog's title             |

diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx
@@ -151,7 +151,7 @@ export interface BulkDeleteWithConfirmButtonProps<
 > extends BulkActionProps,
         ButtonProps {
     confirmContent?: React.ReactNode;
-    confirmTitle?: string;
+    confirmTitle?: React.ReactNode;
     icon?: ReactElement;
     mutationMode: MutationMode;
     mutationOptions?: UseMutationOptions<
@@ -180,8 +180,8 @@ const StyledButton = styled(Button, {
 const defaultIcon = <ActionDelete />;
 
 BulkDeleteWithConfirmButton.propTypes = {
-    confirmTitle: PropTypes.string,
-    confirmContent: PropTypes.string,
+    confirmTitle: PropTypes.node,
+    confirmContent: PropTypes.node,
     icon: PropTypes.element,
     label: PropTypes.string,
     mutationMode: PropTypes.oneOf(['pessimistic', 'optimistic', 'undoable']),

diff --git a/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkUpdateWithConfirmButton.tsx
@@ -157,7 +157,7 @@ export interface BulkUpdateWithConfirmButtonProps<
 > extends BulkActionProps,
         ButtonProps {
     confirmContent?: React.ReactNode;
-    confirmTitle?: string;
+    confirmTitle?: React.ReactNode;
     icon?: ReactElement;
     data: any;
     onSuccess?: () => void;
@@ -171,8 +171,8 @@ export interface BulkUpdateWithConfirmButtonProps<
 }
 
 BulkUpdateWithConfirmButton.propTypes = {
-    confirmTitle: PropTypes.string,
-    confirmContent: PropTypes.string,
+    confirmTitle: PropTypes.node,
+    confirmContent: PropTypes.node,
     label: PropTypes.string,
     resource: PropTypes.string,
     selectedIds: PropTypes.arrayOf(PropTypes.any),

diff --git a/packages/ra-ui-materialui/src/button/DeleteButton.stories.tsx b/packages/ra-ui-materialui/src/button/DeleteButton.stories.tsx
@@ -1,4 +1,4 @@
-import { colors, createTheme } from '@mui/material';
+import { colors, createTheme, Alert } from '@mui/material';
 import polyglotI18nProvider from 'ra-i18n-polyglot';
 import englishMessages from 'ra-language-english';
 import frenchMessages from 'ra-language-french';
@@ -43,6 +43,27 @@ export const Pessimistic = () => (
     </AdminContext>
 );
 
+export const PessimisticWithCustomDialogContent = () => (
+    <AdminContext i18nProvider={i18nProvider}>
+        <DeleteButton
+            mutationMode="pessimistic"
+            record={{ id: 1 }}
+            label="Delete"
+            resource="post"
+            confirmTitle={
+                <>
+                    Delete <strong>Full Name</strong>
+                </>
+            }
+            confirmContent={
+                <Alert severity="warning">
+                    Are you sure you want to delete this user?
+                </Alert>
+            }
+        />
+    </AdminContext>
+);
+
 export const WithUserDefinedPalette = () => (
     <AdminContext theme={theme}>
         <DeleteButton label="Delete" record={{ id: 1 }} />

diff --git a/packages/ra-ui-materialui/src/button/DeleteButton.tsx b/packages/ra-ui-materialui/src/button/DeleteButton.tsx
@@ -84,8 +84,8 @@ export interface DeleteButtonProps<
     MutationOptionsError = unknown
 > extends ButtonProps,
         SaveContextValue {
-    confirmTitle?: string;
-    confirmContent?: string;
+    confirmTitle?: React.ReactNode;
+    confirmContent?: React.ReactNode;
     icon?: ReactElement;
     mutationMode?: MutationMode;
     mutationOptions?: UseMutationOptions<

diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.stories.tsx b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.stories.tsx
@@ -5,6 +5,7 @@ import frenchMessages from 'ra-language-french';
 import { Resource } from 'ra-core';
 import fakeRestDataProvider from 'ra-data-fakerest';
 import { createMemoryHistory } from 'history';
+import { Alert } from '@mui/material';
 
 import { DeleteWithConfirmButton } from './DeleteWithConfirmButton';
 import { AdminContext } from '../AdminContext';
@@ -109,15 +110,15 @@ const dataProvider = fakeRestDataProvider({
 
 const history = createMemoryHistory({ initialEntries: ['/books'] });
 
-const BookList = () => {
+const BookList = ({ children }) => {
     return (
         <List>
             <Datagrid>
                 <TextField source="id" />
                 <TextField source="title" />
                 <TextField source="author" />
                 <TextField source="year" />
-                <DeleteWithConfirmButton />
+                {children}
             </Datagrid>
         </List>
     );
@@ -130,7 +131,44 @@ export const Basic = () => (
         history={history}
     >
         <AdminUI>
-            <Resource name="books" list={BookList} />
+            <Resource
+                name="books"
+                list={
+                    <BookList>
+                        <DeleteWithConfirmButton />
+                    </BookList>
+                }
+            />
+        </AdminUI>
+    </AdminContext>
+);
+
+export const WithCustomDialogContent = () => (
+    <AdminContext
+        dataProvider={dataProvider}
+        i18nProvider={i18nProvider}
+        history={history}
+    >
+        <AdminUI>
+            <Resource
+                name="books"
+                list={
+                    <BookList>
+                        <DeleteWithConfirmButton
+                            confirmTitle={
+                                <>
+                                    Delete <strong>Full Name</strong>
+                                </>
+                            }
+                            confirmContent={
+                                <Alert severity="warning">
+                                    Are you sure you want to delete this user?
+                                </Alert>
+                            }
+                        />
+                    </BookList>
+                }
+            />
         </AdminUI>
     </AdminContext>
 );
diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx
@@ -98,7 +98,7 @@ export interface DeleteWithConfirmButtonProps<
     RecordType extends RaRecord = any,
     MutationOptionsError = unknown
 > extends ButtonProps {
-    confirmTitle?: string;
+    confirmTitle?: React.ReactNode;
     confirmContent?: React.ReactNode;
     icon?: ReactElement;
     mutationMode?: MutationMode;
@@ -117,8 +117,8 @@ export interface DeleteWithConfirmButtonProps<
 
 DeleteWithConfirmButton.propTypes = {
     className: PropTypes.string,
-    confirmTitle: PropTypes.string,
-    confirmContent: PropTypes.string,
+    confirmTitle: PropTypes.node,
+    confirmContent: PropTypes.node,
     label: PropTypes.string,
     mutationMode: PropTypes.oneOf(['pessimistic', 'optimistic', 'undoable']),
     record: PropTypes.any,

diff --git a/packages/ra-ui-materialui/src/button/UpdateWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/UpdateWithConfirmButton.tsx
@@ -149,7 +149,7 @@ export interface UpdateWithConfirmButtonProps<
 > extends BulkActionProps,
         ButtonProps {
     confirmContent?: React.ReactNode;
-    confirmTitle?: string;
+    confirmTitle?: React.ReactNode;
     icon?: ReactElement;
     data: any;
     mutationMode?: MutationMode;
@@ -161,8 +161,8 @@ export interface UpdateWithConfirmButtonProps<
 }
 
 UpdateWithConfirmButton.propTypes = {
-    confirmTitle: PropTypes.string,
-    confirmContent: PropTypes.string,
+    confirmTitle: PropTypes.node,
+    confirmContent: PropTypes.node,
     label: PropTypes.string,
     resource: PropTypes.string,
     selectedIds: PropTypes.arrayOf(PropTypes.any),

diff --git a/packages/ra-ui-materialui/src/layout/Confirm.tsx b/packages/ra-ui-materialui/src/layout/Confirm.tsx
@@ -73,7 +73,9 @@ export const Confirm = (props: ConfirmProps) => {
             {...rest}
         >
             <DialogTitle id="alert-dialog-title">
-                {translate(title, { _: title, ...translateOptions })}
+                {typeof title === 'string'
+                    ? translate(title, { _: title, ...translateOptions })
+                    : title}
             </DialogTitle>
             <DialogContent>
                 {typeof content === 'string' ? (
@@ -114,7 +116,8 @@ export const Confirm = (props: ConfirmProps) => {
     );
 };
 
-export interface ConfirmProps extends Omit<DialogProps, 'open' | 'onClose'> {
+export interface ConfirmProps
+    extends Omit<DialogProps, 'open' | 'onClose' | 'title'> {
     cancel?: string;
     className?: string;
     confirm?: string;
@@ -126,7 +129,7 @@ export interface ConfirmProps extends Omit<DialogProps, 'open' | 'onClose'> {
     loading?: boolean;
     onClose: MouseEventHandler;
     onConfirm: MouseEventHandler;
-    title: string;
+    title: React.ReactNode;
     translateOptions?: object;
 }
 
@@ -142,7 +145,7 @@ Confirm.propTypes = {
     loading: PropTypes.bool,
     onClose: PropTypes.func.isRequired,
     onConfirm: PropTypes.func.isRequired,
-    title: PropTypes.string.isRequired,
+    title: PropTypes.node.isRequired,
     sx: PropTypes.any,
 };