Skip to main content

Dialog okButtonProps/cancelButtonProps + AlertDialog removed

Pre-release · Type: ✨ Feature

Changes​

Remove the AlertDialog component​

Problem: AlertDialog has no corresponding Figma spec and is a redundant component.

Changed Files:

  • Deleted the src/components/AlertDialog/ directory (AlertDialog.tsx, AlertDialog.test.tsx, index.ts)
  • Deleted src/components/ui/alert-dialog.tsx
  • Removed the AlertDialog-related exports from src/components/index.ts

Dialog adds okButtonProps / cancelButtonProps​

Problem: The original confirm / cancel buttons could not be styled, so scenarios such as Destructive could not be expressed.

Changed Files: src/components/Dialog/Dialog.tsx

Changes:

  • DialogProps adds okButtonProps?: Omit<ButtonProps, 'children'> and cancelButtonProps?: Omit<ButtonProps, 'children'>
  • renderDefaultFooter accepts and merges these two props, with onClick merged with the existing callbacks
  • Added a "Destructive Confirm Button" example to the docs (okButtonProps={{ variant: 'destructive' }})

Dialog content-only mode​

Problem: The content was always wrapped in a div with padding, so a fully custom layout was impossible.

Changes:

  • When only content is passed (no title, no footer/button), the content is rendered directly inside DialogContent without adding any wrapper div
  • The docs example switches to controlled mode (useState + onOpenChange) so that a close button inside the content area can close the Dialog normally
  • Added a "Content Only" example to the docs

Dialog max-height constraint​

Problem: The Dialog had no max-height constraint, so overly long content would overflow the viewport.

Changed Files: src/components/ui/dialog.tsx

Changes:

  • DialogContent adds max-h-[80vh] overflow-y-auto, so the content area scrolls automatically when it exceeds the height