diff --git a/docs/Buttons.md b/docs/Buttons.md index 03384e23f3c..4b4d21e41fd 100644 --- a/docs/Buttons.md +++ b/docs/Buttons.md @@ -246,14 +246,15 @@ export const PostList = () => ( ![Bulk Delete button](./img/bulk-delete-button.png) -| Prop | Required | Type | Default | Description | -|-------------------|----------|----------------|--------------------|---------------------------------------------------------------------------------------------------------------------| -| `confirmContent` | Optional | React node | - | Lets you customize the content of the confirm dialog. Only used in `'pessimistic'` or `'optimistic'` mutation modes | -| `confirmTitle` | Optional | `string` | - | Lets you customize the title of the confirm dialog. Only used in `'pessimistic'` or `'optimistic'` mutation modes | -| `label` | Optional | `string` | 'ra.action.delete' | label or translation message to use | -| `icon` | Optional | `ReactElement` | `` | iconElement, e.g. `` | -| `mutationMode` | Optional | `string` | `'undoable'` | Mutation mode (`'undoable'`, `'pessimistic'` or `'optimistic'`) | -| `mutationOptions` | Optional | `object` | null | options for react-query `useMutation` hook | +| Prop | Required | Type | Default | Description | +|-------------------|----------|-----------------------------------------|--------------------|--------------------------------------------------------------------------------------------------------------------------------------| +| `confirmContent` | Optional | React node | - | Lets you customize the content of the confirm dialog. Only used in `'pessimistic'` or `'optimistic'` mutation modes | +| `confirmTitle` | Optional | `string` | - | Lets you customize the title of the confirm dialog. Only used in `'pessimistic'` or `'optimistic'` mutation modes | +| `confirmColor` | Optional | 'primary' | 'warning' | 'primary' | Lets you customize the color of the confirm dialog's "Confirm" button. Only used in `'pessimistic'` or `'optimistic'` mutation modes | +| `label` | Optional | `string` | 'ra.action.delete' | label or translation message to use | +| `icon` | Optional | `ReactElement` | `` | iconElement, e.g. `` | +| `mutationMode` | Optional | `string` | `'undoable'` | Mutation mode (`'undoable'`, `'pessimistic'` or `'optimistic'`) | +| `mutationOptions` | Optional | `object` | null | options for react-query `useMutation` hook | **Tip:** If you choose the `'pessimistic'` or `'optimistic'` mutation mode, a confirm dialog will be displayed to the user before the mutation is executed. @@ -658,16 +659,17 @@ See [its documentation](./UpdateButton.md) for more details. Delete the current record after a confirm dialog has been accepted. To be used inside a `` component. -| Prop | Required | Type | Default | Description | -|------------------------------------------------------------|----------|----------------------------------|-----------------------------|-------------------------------------------------------------------------| -| `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` | `` | iconElement, e.g. `` | -| `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 | -| `mutationOptions` | Optional | | null | options for react-query `useMutation` hook | +| Prop | Required | Type | Default | Description | +|--------------------|----------|--------------------------------------------------|-----------------------------|-------------------------------------------------------------------------| +| `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` | `` | iconElement, e.g. `` | +| `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 | +| `confirmColor` | Optional | 'primary' | 'warning' | 'primary' | The color of the confirm dialog's "Confirm" button | +| `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 | +| `mutationOptions` | Optional | | null | options for react-query `useMutation` hook | {% raw %} ```jsx @@ -681,6 +683,7 @@ const EditToolbar = props => { diff --git a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx index aef36ed379a..4ae3d63f8d6 100644 --- a/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx +++ b/packages/ra-ui-materialui/src/button/BulkDeleteWithConfirmButton.tsx @@ -28,6 +28,7 @@ export const BulkDeleteWithConfirmButton = ( const { confirmTitle = 'ra.message.bulk_delete_title', confirmContent = 'ra.message.bulk_delete_content', + confirmColor = 'primary', icon = defaultIcon, label = 'ra.action.delete', mutationMode = 'pessimistic', @@ -111,6 +112,7 @@ export const BulkDeleteWithConfirmButton = ( loading={isLoading} title={confirmTitle} content={confirmContent} + confirmColor={confirmColor} translateOptions={{ smart_count: selectedIds.length, name: translate(`resources.${resource}.forcedCaseName`, { @@ -152,6 +154,7 @@ export interface BulkDeleteWithConfirmButtonProps< ButtonProps { confirmContent?: React.ReactNode; confirmTitle?: React.ReactNode; + confirmColor?: 'primary' | 'warning'; icon?: ReactElement; mutationMode: MutationMode; mutationOptions?: UseMutationOptions< @@ -182,6 +185,7 @@ const defaultIcon = ; BulkDeleteWithConfirmButton.propTypes = { confirmTitle: PropTypes.node, confirmContent: PropTypes.node, + confirmColor: PropTypes.string, icon: PropTypes.element, label: PropTypes.string, mutationMode: PropTypes.oneOf(['pessimistic', 'optimistic', 'undoable']), diff --git a/packages/ra-ui-materialui/src/button/DeleteButton.tsx b/packages/ra-ui-materialui/src/button/DeleteButton.tsx index 1334a8727ba..64802b9b7dd 100644 --- a/packages/ra-ui-materialui/src/button/DeleteButton.tsx +++ b/packages/ra-ui-materialui/src/button/DeleteButton.tsx @@ -67,7 +67,6 @@ export const DeleteButton = ( : 'undoable'; return finalMutationMode === 'undoable' ? ( - // @ts-ignore I looked for the error for one hour without finding it record={record} {...rest} /> ) : ( @@ -86,6 +85,7 @@ export interface DeleteButtonProps< SaveContextValue { confirmTitle?: React.ReactNode; confirmContent?: React.ReactNode; + confirmColor?: 'primary' | 'warning'; 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 index d15bff19091..268fdda0117 100644 --- a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.stories.tsx +++ b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.stories.tsx @@ -165,6 +165,7 @@ export const WithCustomDialogContent = () => ( Are you sure you want to delete this user? } + confirmColor="warning" /> } diff --git a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx index a6d47f5dfa0..f165ae098f8 100644 --- a/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx +++ b/packages/ra-ui-materialui/src/button/DeleteWithConfirmButton.tsx @@ -25,6 +25,7 @@ export const DeleteWithConfirmButton = ( className, confirmTitle = 'ra.message.delete_title', confirmContent = 'ra.message.delete_content', + confirmColor = 'primary', icon = defaultIcon, label = 'ra.action.delete', mutationMode = 'pessimistic', @@ -71,6 +72,7 @@ export const DeleteWithConfirmButton = ( loading={isLoading} title={confirmTitle} content={confirmContent} + confirmColor={confirmColor} translateOptions={{ name: translate(`resources.${resource}.forcedCaseName`, { smart_count: 1, @@ -100,6 +102,7 @@ export interface DeleteWithConfirmButtonProps< > extends ButtonProps { confirmTitle?: React.ReactNode; confirmContent?: React.ReactNode; + confirmColor?: 'primary' | 'warning'; icon?: ReactElement; mutationMode?: MutationMode; onClick?: ReactEventHandler; @@ -119,6 +122,7 @@ DeleteWithConfirmButton.propTypes = { className: PropTypes.string, confirmTitle: PropTypes.node, confirmContent: PropTypes.node, + confirmColor: PropTypes.string, label: PropTypes.string, mutationMode: PropTypes.oneOf(['pessimistic', 'optimistic', 'undoable']), record: PropTypes.any, diff --git a/packages/ra-ui-materialui/src/layout/Confirm.tsx b/packages/ra-ui-materialui/src/layout/Confirm.tsx index 753b5411c46..30b447d565d 100644 --- a/packages/ra-ui-materialui/src/layout/Confirm.tsx +++ b/packages/ra-ui-materialui/src/layout/Confirm.tsx @@ -121,7 +121,7 @@ export interface ConfirmProps cancel?: string; className?: string; confirm?: string; - confirmColor?: string; + confirmColor?: 'primary' | 'warning'; ConfirmIcon?: ReactComponentLike; CancelIcon?: ReactComponentLike; content: React.ReactNode;