跳到主要内容

Dialog okButtonProps/cancelButtonProps + 移除 AlertDialog

Pre-release · 类型： ✨ 新功能

改动内容​

移除 AlertDialog 组件​

问题：AlertDialog 没有对应的 Figma 规范，属于冗余组件。

改动文件：

  • 删除 src/components/AlertDialog/ 目录（AlertDialog.tsx、AlertDialog.test.tsx、index.ts）
  • 删除 src/components/ui/alert-dialog.tsx
  • 移除 src/components/index.ts 中的 AlertDialog 相关导出

Dialog 新增 okButtonProps / cancelButtonProps​

问题：原来的确认/取消按钮无法自定义样式，无法表达 Destructive 等场景。

改动文件：src/components/Dialog/Dialog.tsx

改动内容：

  • DialogProps 新增 okButtonProps?: Omit<ButtonProps, 'children'> 和 cancelButtonProps?: Omit<ButtonProps, 'children'>
  • renderDefaultFooter 接受并合并这两个 props，onClick 与原有回调合并
  • 文档新增 "Destructive Confirm Button" 示例（okButtonProps={{ variant: 'destructive' }}）

Dialog 纯内容模式（content-only）​

问题：原来 content 始终被包裹在带内边距的 div 中，无法实现完全自定义布局。

改动内容：

  • 当仅传入 content（无 title、无 footer/button）时，content 直接渲染到 DialogContent 内部，不添加任何包装 div
  • 文档示例改为受控模式（useState + onOpenChange），使内容区域的关闭按钮可以正常关闭 Dialog
  • 文档新增 "Content Only" / "纯内容模式" 示例

Dialog 最大高度约束​

问题：Dialog 没有 max-height 约束，内容过长时会超出视口。

改动文件：src/components/ui/dialog.tsx

改动内容：

  • DialogContent 添加 max-h-[80vh] overflow-y-auto，超出高度时内容区域自动滚动