MessageDialog
ユーザーに情報を提示するためのダイアログコンポーネントです。入力などの操作を伴わずにメッセージや情報をダイアログで提示するときに使います。
モーダルなダイアログです。ダイアログの表示中、ダイアログの裏側の領域はスクリム（幕）で隠され、操作を受け付けません。
使用上の注意
モーダルなUIの使いどころもあわせて参照してください。
ダイアログを乱用しない
MessageDialogの表示中、ユーザーの操作範囲は強制的に制限されます。
ダイアログが表示されることによってユーザーの操作を妨げてしまわないか、ダイアログとして表示する・操作させるべき内容なのか、慎重にユースケースを定義し、使用を検討してください。
複数のモーダルダイアログを同時に表示しない
モーダルダイアログ（ActionDialogやMessageDialog）を1つの操作で複数個表示したり、モーダルダイアログ上の操作によって2つ目のモーダルダイアログを表示したりすることは、原則として推奨されません。3つの画面が重なり、画面どうしの関係性や、どんな操作をすれば何が起こるのかが予測しづらくなるためです。
なお、モーダルダイアログ上の操作によってModelessDialogを表示したり、ModelessDialogが開いている状態でモーダルダイアログを開いたりすることは問題ありません。
フィードバックとして使わない
MessageDialogは、表示したままダイアログ外の操作ができず、以下の理由で処理結果のフィードバックには不適切なため、原則としてフィードバックとしては使いません。
- 処理が成功した場合、ユーザーは次の操作をする前にダイアログを閉じる一手間が発生する
- 処理が失敗した場合、表示されたエラーメッセージを参照しながら操作できない
フィードバックにはNotificationBarやResponseMessageなどを使います。詳しくは、フィードバックを参照してください。
レイアウト
基準サイズ
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キーを押すことでダイアログを閉じることができます。
構成
MessageDialogは以下の要素で構成されます。
- タイトル
- 本文
- アクションボタン
1. タイトル
このダイアログで表示する情報を簡潔に表現するタイトルをつけます。
なお、サブタイトルは基本的に使いません。
2. 本文
ユーザーに提示したい情報を表示します。
通常、FormControlなどの入力要素が含まれることはありません。入力要素を含めたい場合はActionDialogを使用してください。
3. アクションボタン
ダイアログを閉じるボタンを配置し、ラベルは閉じるとします。
モバイル
モバイルでは、通常のダイアログに加えて、拡大したダイアログを使用できます。
表示する情報量に応じて拡大したダイアログの採用を検討する
デスクトップに比べて、モバイルでは表示できる情報量に限りがあります。
拡大したダイアログを利用することで、モバイルの表示領域を最大限使って情報を表示できます。
例えば、次のような場合に拡大したダイアログが有効です。
- ダイアログ内で多くのスクロールを伴う場合
- 入力や編集など、キーボードでの入力操作が多い場合
レイアウト
［閉じる］ボタンはタイトルの右端に配置します。
余白
拡大したダイアログの画面や、コンポーネント内の余白は以下のとおりです。
基本的には、代表的なダイアログ内レイアウトのパディングに従って配置しますが、ダイアログの左右と裏側の領域（スクリムで隠されている領域）のパディングは0（0px）とします。
使い方チェックリスト
MessageDialog
- Shouldダイアログとして表示する・操作させるべき内容なのか、慎重にユースケースを定義し使用を検討する
- Avoidモーダルダイアログ（ActionDialog や MessageDialog）を 1 つの操作で複数個表示したり、モーダルダイアログ上の操作によって 2 つ目のモーダルダイアログを表示しない
- MustMessageDialog を原則として処理結果のフィードバックには使わず、フィードバックには NotificationBar や ResponseMessage などを使う
- Should入力要素を 1 つだけ持つなど、内容が極めて少ないダイアログには `XS` を使う
- Should要素が少なく、要素が垂直方向に並ぶ、広い横幅を必要としないダイアログには `S` を使う
- Should数行に渡るテキストの表示や、水平方向に要素を並べて表示する標準的なダイアログには `M` を使う
- Shouldテーブルの表示やダイアログを複数カラムに分割するなど、広い横幅が必要なダイアログには `L` を使う
- Should広い横幅が必要で、`L` ではコンテンツが収まりきらないダイアログには `XL` を使う
- Should広い横幅が必要で、`XL` ではコンテンツが収まりきらないダイアログには `XXL` を使う
- Should広い横幅が必要で、`XXL` ではコンテンツが収まりきらないダイアログには `FULL` を使う
- Mustこのダイアログで表示する情報を簡潔に表現するタイトルをつける
- Shouldサブタイトルは基本的に使わない
- Must入力要素を含めたい場合は MessageDialog ではなく ActionDialog を使用する
- Mustダイアログを閉じるボタンを配置し、ラベルは `閉じる` とする
Props
MessageDialog props
ダイアログの説明
ダイアログの大きさ
@deprecated ダイアログの幅を指定する場合は、width ではなく size を使用してください。
ダイアログの幅
ダイアログを開いた時にフォーカスする対象
オーバーレイをクリックした時に発火するコールバック関数 @todo イベントハンドラー命名規則に従い handleClickOverlay に変更すべき（影響範囲大のため別PR）
エスケープキーを押下した時に発火するコールバック関数 @todo イベントハンドラー命名規則に従い handlePressEscape に変更すべき（影響範囲大のため別PR）
ダイアログの aria-label
ダイアログの aria-labelledby
DOM 上でダイアログの要素を追加する親要素
コンテンツ部分の背景色
閉じるボタン
ControlledMessageDialog props
ダイアログの説明
コンテンツ部分の背景色
閉じるボタン
ダイアログの大きさ
@deprecated ダイアログの幅を指定する場合は、width ではなく size を使用してください。
ダイアログの幅
ダイアログを開いた時にフォーカスする対象
ダイアログの aria-label
ダイアログの aria-labelledby
DOM 上でダイアログの要素を追加する親要素
ダイアログを開いているかどうか
オーバーレイをクリックした時に発火するコールバック関数 @todo イベントハンドラー命名規則に従い handleClickOverlay に変更すべき（影響範囲大のため別PR）
エスケープキーを押下した時に発火するコールバック関数 @todo イベントハンドラー命名規則に従い handlePressEscape に変更すべき（影響範囲大のため別PR）