Dialog Panel

Wrapper cho Dialog với layout chuẩn hóa, preset size và khả năng forward toàn bộ props của DialogContent.

1. Import

Import root, trigger và dialog panel wrapper.

import {
  DialogPanel,
  DialogPanelRoot,
  DialogPanelTrigger,
} from "@/design-system/components/ui/dialog-panel"

2. Props

DialogPanel kế thừa toàn bộ props của DialogContent.

Prop	Type	Default
size	"sm" \| "md" \| "lg" \| "xl" \| "auto"	"md"
title	React.ReactNode	--
description	React.ReactNode	--
footer	React.ReactNode	--
showCloseButton	boolean	true
className	string	--

3. Usages

Các pattern phổ biến cho dialog wrapper.

import {
  DialogPanel,
  DialogPanelRoot,
  DialogPanelTrigger,
} from "@/design-system/components/ui/dialog-panel";
import { Button } from "@/design-system/components/ui/button";
import { Input } from "@/design-system/components/ui/input";

export function Example() {
  return (
    <DialogPanelRoot>
      <DialogPanelTrigger render={<Button variant="outline">Mở dialog</Button>} />
      <DialogPanel
        title="Cập nhật hồ sơ"
        description="Dùng wrapper thống nhất cho dialog center."
        footer={
          <>
            <Button variant="outline">Hủy</Button>
            <Button>Lưu thay đổi</Button>
          </>
        }
      >
        <div className="grid gap-3">
          <Input label="Họ và tên" placeholder="Nguyễn Văn A" />
          <Input label="Email" placeholder="name@company.vn" />
        </div>
      </DialogPanel>
    </DialogPanelRoot>
  );
}