ActionModal
View on GitHub: Copmonent
View on GitHubユーザーに確認や操作などを求める場合に使用するモーダルダイアログ
Example#
Props#
| Name | Type | Default | Description |
|---|---|---|---|
| children required | ReactNode | - | コンテンツとして表示する内容 |
| onClose required | () => void | - | 閉じるアクションが実行された場合のコールバック |
| onPrimaryAction optional | () => void | - | プライマリーアクションボタンが実行された場合のコールバック |
| header optional | string | - | ヘッダーに表示する見出しテキスト |
| primaryActionLabel optional | string | - | プライマリーアクションボタンのラベル |
| primaryActionColor optional | "primary" | "alert" | - | プライマリーアクションボタンのカラースキーム |
| closeLabel | string | 閉じる | 閉じるボタンのラベル |
| overlayOpacity | "normal" | "darker" | normal | オーバーレイの透過度 |
| fixedHeight | boolean | false | 画面を占有する高さで固定するかどうか |
| showClose | boolean | true | 閉じるボタンを表示するかどうか |
| open | boolean | true | モーダルダイアログを開くかどうか |
| isStatic | boolean | false | openを無視してモーダルを開いたままにするかどうか。アニメーションライブラリとの連携で、ActionHalfModal自身が開閉に関与しない場合に使用 |
| id optional | string | - | ネイティブ要素のid属性。ページで固有のIDを指定 |
| ariaLabelledby optional | string | - | ネイティブのaria-labelledby属性。独自の見出しを実装する場合にダイアログとの紐づけに使用。ページで固有のIDを指定 |
| hero optional | ReactNode | - | ヒーローエリア（見出しの更に上）に配置するコンテンツ |
| stickyHeader optional | boolean | - | ヘッダーを固定表示 heroが指定されている場合は無効 |
| stickyFooter optional | boolean | - | フッターを固定表示 |
| onSecondaryAction optional | () => void | - | セカンダリーアクションが実行された場合のコールバック |
| secondaryActionLabel optional | string | - | セカンダリーアクションボタンのラベル |
| data-* optional | string | - | Custom data attributes |
Feature#
- ユーザーの作業を中断し、強制的にダイアログを表示します
- 確実に操作させたい/コンテンツを見せたい場合に有効です
- 画面上下を専有してモーダルを表示したい場合は、
<ActionHalfModal>を利用してください
Usage#
- 極力1つのモーダルにつき、アクションは1つにとどめましょう
- 2つのアクションを含めることもできますが、アンチパターンです
モーダルダイアログは必要？#
一般に、モーダルダイアログは次のような用途で使用されます。
- ページの内容とは別のコンテンツを表示・操作する必要がある場合
- 作業の確認（編集・削除・送信など）を促す場合
- 重要なメッセージや警告を表示する場合
まず、モーダルダイアログが本当に必要かを検討してください。ページとしてUIを表現することが基本です。
Webの重要な要素として「URLが発行されLinkableであること」が挙げられます。しかし、モーダルダイアログは基本的にURLが発行されません。
- ブラウザの戻るボタンに対応しない
- 例えば管理画面ではURLをマニュアルに記載したいケースがある
など、URLがないことのデメリットが存在します。
モーダルダイアログは「モーダル」の名前の通り、ある特定のモードにユーザーを閉じ込めます。強制的にユーザーの作業が中断されるため、乱用は避ける必要があります。
また、複雑な操作や大量のコンテンツを扱うことには向いていません（デフォルトで領域が狭いため）。そういったケースではページとして分割することを検討してください。
基本的にモーダルダイアログはアンチパターンです。
Header Text#
冗長な表記は避け、なるべく簡潔で具体的に書いてください。ヘッダーテキストでそのモーダルダイアログの目的を理解できる内容としましょう。 モバイル環境では2行、それより大きなデバイスでは1行に収まるようにします。
ユーザーが求める操作を、体現止めまたは疑問系で表現します。アクションを表す動名詞とその対象は連体助詞「の」を使って接続します。
- ❌「ユーザー情報を編集しましょう」
- ⭕️「ユーザー情報の編集」
データの削除、内容の破棄など破壊的なアクションの場合は疑問形を使用します。例:「この回答履歴を削除しますか？」
汎用的な言葉ではなく、ユースケースに特化した具体的な言葉を使いましょう。
- ❌「変更をキャンセルする」
- ⭕️「変更を破棄する」
Button Label#
簡潔で、具体的なテキストをラベルとして用いてください。
-
❌「OK」
-
⭕️「保存」
-
❌「キャンセル」
-
⭕️「停止」
また、「キャンセル」と「閉じる」は使い分けてください。前者はアクションを中断するニュアンスがあり、後者は単にダイアログを閉じる場合に使います。
header and aria-labelledby#
headerpropに渡されたテキストは、aria-labelledby属性を通してダイアログ自体を説明するラベルとなります。- 特にスクリーンリーダーユーザーにとって意味のあるものとなります
headerpropを使わない場合、モーダルのariaLabelledbyprop と見出しとして扱う要素のid属性に共通の文字列を指定し紐づけを行ってください- custom headerのExampleを参考にしてください