diff --git a/.changeset/flat-boats-boil.md b/.changeset/flat-boats-boil.md new file mode 100644 index 0000000000..03fd1f9b78 --- /dev/null +++ b/.changeset/flat-boats-boil.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/alert-dialog": patch +"@twilio-paste/core": patch +--- + +Changing the property name, onConfirmDisabled, in AlertDialog component. The property is called isConfirmDisabled. Non breaking change. diff --git a/packages/paste-core/components/alert-dialog/src/AlertDialog.tsx b/packages/paste-core/components/alert-dialog/src/AlertDialog.tsx index 741a93b25e..e8d0dcb71f 100644 --- a/packages/paste-core/components/alert-dialog/src/AlertDialog.tsx +++ b/packages/paste-core/components/alert-dialog/src/AlertDialog.tsx @@ -75,13 +75,22 @@ export interface AlertDialogProps extends HTMLPasteProps<"div"> { */ onDismissLabel: string; /** - * Disable the confirm button + * Disable the confirm button. Use isConfirmDisabled + * @deprecated This prop has been deprecated in favor of the `isConfirmDisabled` prop. * * @default false * @type {boolean} * @memberof AlertDialogProps */ onConfirmDisabled?: boolean; + /** + * Disable the confirm button + * + * @default false + * @type {boolean} + * @memberof AlertDialogProps + */ + isConfirmDisabled?: boolean; /** * Overrides the default element name to apply unique styles with the Customization Provider * @@ -105,6 +114,7 @@ export const AlertDialog = React.forwardRef( onDismiss, onDismissLabel, onConfirmDisabled, + isConfirmDisabled, ...props }, ref, @@ -143,7 +153,7 @@ export const AlertDialog = React.forwardRef( onDismissLabel={onDismissLabel} onConfirm={onConfirm} onConfirmLabel={onConfirmLabel} - onConfirmDisabled={onConfirmDisabled} + isConfirmDisabled={isConfirmDisabled || onConfirmDisabled} /> diff --git a/packages/paste-core/components/alert-dialog/src/AlertDialogFooter.tsx b/packages/paste-core/components/alert-dialog/src/AlertDialogFooter.tsx index 253ba95bf6..2a991fd08a 100644 --- a/packages/paste-core/components/alert-dialog/src/AlertDialogFooter.tsx +++ b/packages/paste-core/components/alert-dialog/src/AlertDialogFooter.tsx @@ -11,6 +11,8 @@ export interface AlertDialogFooterProps extends HTMLPasteProps<"div">, Pick void; onDismissLabel: string; + isConfirmDisabled?: boolean; + /** @deprecated This prop has been deprecated in favor of the `isConfirmDisabled` prop. */ onConfirmDisabled?: boolean; } @@ -23,7 +25,8 @@ export const AlertDialogFooter = React.forwardRef {onDismissLabel} - diff --git a/packages/paste-core/components/alert-dialog/stories/index.stories.tsx b/packages/paste-core/components/alert-dialog/stories/index.stories.tsx index 1ebee777a8..4e3e47c1b4 100644 --- a/packages/paste-core/components/alert-dialog/stories/index.stories.tsx +++ b/packages/paste-core/components/alert-dialog/stories/index.stories.tsx @@ -129,7 +129,7 @@ export const DisabledButtonDestructiveAlertDialog = ({ dialogIsOpen = false }): onDismiss={handleDismiss} onDismissLabel="Cancel" destructive - onConfirmDisabled={isDisabled} + isConfirmDisabled={isDisabled} > You're about to delete “Toyota TCB Automobile (Gevelsberg)“ and all data associated with it. This regulatory bundle will be deleted immediately. You can't undo this action. diff --git a/packages/paste-core/components/alert-dialog/type-docs.json b/packages/paste-core/components/alert-dialog/type-docs.json index 566e5c68cf..71d9b373e1 100644 --- a/packages/paste-core/components/alert-dialog/type-docs.json +++ b/packages/paste-core/components/alert-dialog/type-docs.json @@ -502,6 +502,13 @@ "externalProp": true, "description": "Specify that a standard HTML element should behave like a defined custom built-in element" }, + "isConfirmDisabled": { + "type": "boolean", + "defaultValue": false, + "required": false, + "externalProp": false, + "description": "Disable the confirm button" + }, "itemID": { "type": "string", "defaultValue": null, @@ -723,7 +730,7 @@ "defaultValue": false, "required": false, "externalProp": false, - "description": "Disable the confirm button" + "description": "Disable the confirm button. Use isConfirmDisabled" }, "onContextMenu": { "type": "MouseEventHandler",