[tkc310]

Requested by tkc310 · project thread

変更内容

バックログにあった AlertDialog（取り消せない操作の確認）を追加します。bouzu（tkc310/bouzu#73）で読誦セットの削除に確認を足したとき、8341-ui に確認の部品が無く、文言と流れを画面ごとに書いていました。

<AlertDialog
  title="「週次レポート」を削除しますか"
  description="元に戻せません。"
  confirmLabel="削除する"
  trigger={<Button variant="tertiary">削除</Button>}
  onConfirm={() => remove(report.id)}
/>

• Base UI の AlertDialog（role="alertdialog"）。見出しは対象を入れた問いかけ、説明は結果、ボタンは「キャンセル」と動詞（confirmLabel は必須）
• 開くとフォーカスを「キャンセル」に置き、Enter の押し間違いで実行しない。外側を押しても閉じず、Esc とキャンセルで閉じる
• tone: danger（既定）/ primary（送信・公開など失うものが無い確認）
• onConfirm が Promise を返すと、終わるまで実行ボタンを loading にして閉じない（Esc でも閉じない）。例外を投げると開いたままにし、失敗は children に NotificationBanner で出せる
• DESIGN.md に節を追加（行の中で確かめる軽い方法も添えた）、04 の「部品の選び方」、README の一覧に追加。バックログから外した

Storybook プレビュー

プレビュー: https://tkc310.github.io/8341-ui/pr-preview/pr-32/ （5422f36 時点）

ストーリー	ライト	ダーク	見てほしい点
AlertDialog / Default	開く	開く	削除の確認。開くとキャンセルにフォーカス
AlertDialog / Primary	開く	開く	primary の確認
AlertDialog / Failure	開く	開く	1 回目の「削除する」は失敗して開いたまま、バナーが出る

エージェントは 390px 幅のライト（Failure）とダーク（Primary）を Playwright で描画して確かめました。

完了の定義

• PR のタイトルが Conventional Commits の形式
• make check と make test が通る（ストーリーの play 関数と axe を含む）
• changeset を追加した（.changeset/alert-dialog.md。docs/releasing.md の 0.x の規則で部品の追加は patch）
• ライト / ダークの両方で見た目を確認した（上のプレビュー）
• キーボードで操作でき、フォーカス表示が見える（初期フォーカス・Esc・フォーカスの戻りをテスト）
• 新しい semantic カラーは足していない
• 値や方針は変えていない

改善ループ

• docs/improvement/log.md に 1 行追記した
• 再発防止として追加したもの: 単体テスト（名前・説明・初期フォーカス・キャンセル・処理中・失敗・外側を押しても閉じない）とストーリーの play 関数

https://claude.ai/code/session_01S5dPLGGVzZyRz8dob3cTmz

---

Generated by Claude Code