on-confirm-disabled-rename (#3918)

Co-authored-by: “nora <[email protected]> Co-authored-by: Nora Krantz <[email protected]>
twilio-labs · May 29, 2024 · 96eb7cf · 96eb7cf
1 parent cd65d9b
commit 96eb7cf
Show file tree

Hide file tree

Showing 5 changed files with 36 additions and 6 deletions.
diff --git a/.changeset/flat-boats-boil.md 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
@@ -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<HTMLDivElement, AlertDialogProps>(
       onDismiss,
       onDismissLabel,
       onConfirmDisabled,
+      isConfirmDisabled,
       ...props
     },
     ref,
@@ -143,7 +153,7 @@ export const AlertDialog = React.forwardRef<HTMLDivElement, AlertDialogProps>(
                     onDismissLabel={onDismissLabel}
                     onConfirm={onConfirm}
                     onConfirmLabel={onConfirmLabel}
-                    onConfirmDisabled={onConfirmDisabled}
+                    isConfirmDisabled={isConfirmDisabled || onConfirmDisabled}
                   />
                 </Box>
               </ModalDialogOverlay>

diff --git 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<BoxP
   onConfirmLabel: string;
   onDismiss: () => 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<HTMLDivElement, AlertDialogFoo
       onConfirmLabel,
       onDismiss,
       onDismissLabel,
-      onConfirmDisabled = false,
+      onConfirmDisabled,
+      isConfirmDisabled = onConfirmDisabled || false,
       ...props
     },
     ref,
@@ -47,7 +50,11 @@ export const AlertDialogFooter = React.forwardRef<HTMLDivElement, AlertDialogFoo
           <Button variant="secondary" onClick={onDismiss}>
             {onDismissLabel}
           </Button>
-          <Button variant={primaryVariant} onClick={onConfirm} disabled={destructive && onConfirmDisabled}>
+          <Button
+            variant={primaryVariant}
+            onClick={onConfirm}
+            disabled={destructive && (isConfirmDisabled || onConfirmDisabled)}
+          >
             {onConfirmLabel}
           </Button>
         </Stack>

diff --git 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&apos;re about to delete &ldquo;Toyota TCB Automobile (Gevelsberg)&ldquo; and all data associated with it.
         This regulatory bundle will be deleted immediately. You can&apos;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
@@ -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<HTMLDivElement>",