Dialog

モーダルダイアログコンポーネント。ユーザーの注意を引き、重要な情報や確認を求める際に使用します。

基本的な使い方

Preview

サイズ

Dialogは5つのサイズを提供します。

Small

Preview

Medium (デフォルト)

Preview

Large

Preview

Extra Large

Preview

Full

Preview

閉じるボタン非表示

showClose={false}で右上の閉じるボタンを非表示にできます。

Preview

コンポーネント構成

コンポーネント	説明
`Dialog`	ダイアログのルートコンポーネント
`DialogTrigger`	ダイアログを開くトリガー要素
`DialogContent`	ダイアログの本体
`DialogHeader`	ヘッダーセクション
`DialogTitle`	タイトル
`DialogDescription`	説明文
`DialogFooter`	フッターセクション（アクションボタンなど）

DialogContent Props

Prop	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'`	`'md'`	ダイアログのサイズ
`showClose`	`boolean`	`true`	閉じるボタンの表示/非表示

アクセシビリティ

フォーカストラップ: ダイアログ内でフォーカスが閉じ込められる
ESCキー: ESCキーでダイアログを閉じる
背景クリック: 背景をクリックして閉じる（無効化も可能）
ARIA属性: 適切なARIA属性が自動的に付与される
フォーカス復帰: ダイアログを閉じると、元の要素にフォーカスが戻る

使用例

確認ダイアログ:

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
  DialogFooter,
  Button,
} from '@codeconnect-llc/design-system'
import { useState } from 'react'

export function DeleteConfirmDialog() {
  const [open, setOpen] = useState(false)

  const handleDelete = () => {
    // 削除処理
    console.log('削除しました')
    setOpen(false)
  }

  return (
    <Dialog open={open} onOpenChange={setOpen}>
      <DialogTrigger asChild>
        <Button variant="error">削除</Button>
      </DialogTrigger>
      <DialogContent>
        <DialogHeader>
          <DialogTitle>本当に削除しますか？</DialogTitle>
          <DialogDescription>
            この操作は元に戻せません。削除されたデータは復元できません。
          </DialogDescription>
        </DialogHeader>
        <DialogFooter>
          <Button variant="outline" onClick={() => setOpen(false)}>
            キャンセル
          </Button>
          <Button variant="error" onClick={handleDelete}>
            削除
          </Button>
        </DialogFooter>
      </DialogContent>
    </Dialog>
  )
}

フォーム入力ダイアログ:

import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogFooter,
  Button,
  FormControl,
  Input,
} from '@codeconnect-llc/design-system'

export function AddUserDialog() {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <Button variant="primary">ユーザーを追加</Button>
      </DialogTrigger>
      <DialogContent size="lg">
        <DialogHeader>
          <DialogTitle>新しいユーザーを追加</DialogTitle>
        </DialogHeader>
        <form className="space-y-4">
          <FormControl label="名前" htmlFor="name" required>
            <Input id="name" placeholder="山田太郎" />
          </FormControl>
          <FormControl label="メールアドレス" htmlFor="email" required>
            <Input id="email" type="email" placeholder="user@example.com" />
          </FormControl>
          <DialogFooter>
            <Button variant="outline" type="button">
              キャンセル
            </Button>
            <Button variant="primary" type="submit">
              追加
            </Button>
          </DialogFooter>
        </form>
      </DialogContent>
    </Dialog>
  )
}