ActionDialog
ユーザーに確認や単純な操作を求めるためのダイアログコンポーネントです。フォーム要素を含まない確認・実行のダイアログを表示するときに使います。
モーダルなダイアログです。ダイアログの表示中、ダイアログの裏側の領域はスクリム（幕）で隠され、操作を受け付けません。
使用上の注意
モーダルなUIの使いどころもあわせて参照してください。
ダイアログを乱用しない
ActionDialogの表示中、ユーザーの操作範囲は強制的に制限されます。
ダイアログが表示されることによってユーザーの操作を妨げてしまわないか、ダイアログとして表示する・操作させるべき内容なのか、慎重にユースケースを定義し、使用を検討してください。
複数のモーダルダイアログを同時に表示しない
モーダルダイアログ（ActionDialogやMessageDialog）を1つの操作で複数個表示したり、モーダルダイアログ上の操作によって2つ目のモーダルダイアログを表示したりすることは、原則として推奨されません。3つの画面が重なり、画面どうしの関係性や、どんな操作をすれば何が起こるのかが予測しづらくなるためです。
なお、モーダルダイアログ上の操作によってModelessDialogを表示したり、ModelessDialogが開いている状態でモーダルダイアログを開いたりすることは問題ありません。
ダイアログコンテンツにフォームが含まれている場合は、FormDialogの使用を検討する
ダイアログコンテンツにフォーム要素を含む場合にはFormDialogの使用を検討します。
詳しくはFormDialogを参照してください。
レイアウト
基準サイズ
SmartHR UIでは、ダイアログの横幅をサイズ（sizeprops）で指定できます。各サイズの基準値は幅のセマンティックトークンを参照しています。
| 大きさ | 幅トークン | 値（px） |
|---|---|---|
XS | col3 | 424px |
S | col4 | 576px |
M | col5 | 728px |
L | col6 | 880px |
XL | col7 | 1032px |
XXL | col8 | 1184px |
FULL | - | width: 100% |
XS
入力要素を1つだけ持つダイアログなど、内容が極めて少ないダイアログに使います。
S
要素が少なく、要素が垂直方向に並ぶ、広い横幅を必要としないダイアログに使います。
M
数行に渡るテキストを表示したり、水平方向に要素を並べて表示したりする標準的なダイアログに使います。
L
テーブルを表示したり、ダイアログを複数カラムに分割するなど、広い横幅が必要なダイアログに使います。
XL
テーブルを表示したり、ダイアログを複数カラムに分割するなど、広い横幅が必要なダイアログに使います。Lではどうしてもコンテンツが収まりきらない場合に使います。
XXL
テーブルを表示したり、ダイアログを複数カラムに分割するなど、広い横幅が必要なダイアログに使います。XLではどうしてもコンテンツが収まりきらない場合に使います。
FULL
テーブルを表示したり、ダイアログを複数カラムに分割するなど、広い横幅が必要なダイアログに使います。XXLではどうしてもコンテンツが収まりきらない場合に使います。
表示位置
表示位置は、画面の上下左右中央に表示されます。
アクセシビリティ
基本的なアクセシビリティ機能
キーボード操作
ESCキーを押すことでダイアログを閉じることができます。
デザインパターン
削除操作をする際の確認のダイアログについては、削除ダイアログを参照してください。
それ以外のパターンについては、モーダルなUIを参照してください。
モバイル
モバイルでは、通常のダイアログに加えて、拡大したダイアログを使用できます。
表示する情報量に応じて拡大したダイアログの採用を検討する
デスクトップに比べて、モバイルでは表示できる情報量に限りがあります。
拡大したダイアログを利用することで、モバイルの表示領域を最大限使って情報を表示できます。
例えば、次のような場合に拡大したダイアログが有効です。
- ダイアログ内で多くのスクロールを伴う場合
- 入力や編集など、キーボードでの入力操作が多い場合
レイアウト
余白
モバイルで通常のダイアログを使用する場合、余白は以下の通りです。
拡大したダイアログの画面や、コンポーネント内の余白は以下のとおりです。
基本的には、代表的なダイアログ内レイアウトのパディングに従って配置しますが、ダイアログの左右と裏側の領域（スクリムで隠されている領域）のパディングは0（0px）とします。
フッターエリアのレイアウト
［キャンセル］ボタンとPrimaryボタンをClusterで横いっぱいに並べます。
SubActionArea（任意）は、上記のButton群の下部に配置します。
使い方チェックリスト
ActionDialog
- Shouldダイアログとして表示する・操作させるべき内容なのか慎重にユースケースを定義し、使用を検討する
- Avoidモーダルダイアログを 1 つの操作で複数個表示したり、モーダルダイアログ上の操作によって 2 つ目のモーダルダイアログを表示したりしない
- Shouldダイアログコンテンツにフォーム要素を含む場合は FormDialog の使用を検討する
- Should入力要素を 1 つだけ持つなど、内容が極めて少ないダイアログには `XS` を使う
- Should要素が少なく、要素が垂直方向に並ぶ、広い横幅を必要としないダイアログには `S` を使う
- Should数行に渡るテキストの表示や、水平方向に要素を並べて表示する標準的なダイアログには `M` を使う
- Shouldテーブルの表示やダイアログを複数カラムに分割するなど、広い横幅が必要なダイアログには `L` を使う
- Should広い横幅が必要で、`L` ではコンテンツが収まりきらないダイアログには `XL` を使う
- Should広い横幅が必要で、`XL` ではコンテンツが収まりきらないダイアログには `XXL` を使う
- Should広い横幅が必要で、`XXL` ではコンテンツが収まりきらないダイアログには `FULL` を使う
Props
ActionDialog props
@deprecated ダイアログの幅を指定する場合は、width ではなく size を使用してください。
ダイアログの幅
ダイアログの大きさ
ダイアログフッターの左端操作領域
ダイアログを開いた時にフォーカスする対象
オーバーレイをクリックした時に発火するコールバック関数 @todo イベントハンドラー命名規則に従い handleClickOverlay に変更すべき（影響範囲大のため別PR）
ダイアログの aria-label
ダイアログの aria-labelledby
コンテンツ部分の背景色
DOM 上でダイアログの要素を追加する親要素。 ダイアログのマウントと同時に確定していない要素（例: ダイアログの祖先要素の ref）を 渡すと、その要素がまだ DOM に存在しない可能性があるため意図通りに動作しない。 呼び出し側で要素が確定してから渡すこと。
アクションボタンをクリックした時に発火するコールバック関数
ControlledActionDialog props
@deprecated ダイアログの幅を指定する場合は、width ではなく size を使用してください。
ダイアログの幅
ダイアログの大きさ
ダイアログフッターの左端操作領域
ダイアログを開いた時にフォーカスする対象
ダイアログを開いているかどうか
オーバーレイをクリックした時に発火するコールバック関数 @todo イベントハンドラー命名規則に従い handleClickOverlay に変更すべき（影響範囲大のため別PR）
エスケープキーを押下した時に発火するコールバック関数 @todo イベントハンドラー命名規則に従い handlePressEscape に変更すべき（影響範囲大のため別PR）
ダイアログの aria-label
ダイアログの aria-labelledby
コンテンツ部分の背景色
DOM 上でダイアログの要素を追加する親要素。 ダイアログのマウントと同時に確定していない要素（例: ダイアログの祖先要素の ref）を 渡すと、その要素がまだ DOM に存在しない可能性があるため意図通りに動作しない。 呼び出し側で要素が確定してから渡すこと。
閉じるボタンをクリックした時に発火するコールバック関数
アクションボタンをクリックした時に発火するコールバック関数