ActionHalfModal

画面の下部を占有する、アクションを実行するためのモーダルダイアログ

Example#

Props#

Name	Type	Default	Description
children required	`ReactNode`	`-`	コンテンツとして表示する内容
onClose required	`() => void`	`-`	閉じるアクションが実行された場合のコールバック
header optional	`string`	`-`	ヘッダーに表示する見出しテキスト
primaryActionColor optional	`"primary"` \| `"alert"`	`-`	プライマリーアクションボタンのカラースキーム
closeLabel	`string`	`閉じる`	閉じるボタンのラベル
overlayOpacity	`"normal"` \| `"darker"`	`normal`	オーバーレイの透過度
showClose	`boolean`	`true`	閉じるボタンを表示するかどうか
open	`boolean`	`true`	モーダルを開くかどうか
isStatic	`boolean`	`false`	openを無視してモーダルを開いたままにするかどうか。アニメーションライブラリとの連携で、ActionHalfModal自身が開閉に関与しない場合に使用
fullscreen	`boolean`	`false`	モーダルをフルスクリーンで表示するかどうか
id optional	`string`	`-`	ネイティブ要素のid属性。ページで固有のIDを指定
ariaLabelledby optional	`string`	`-`	ネイティブのaria-labelledby属性。独自の見出しを実装する場合にダイアログとの紐づけに使用。ページで固有のIDを指定
hero optional	`ReactNode`	`-`	ヒーローエリア（見出しの更に上）に配置するコンテンツ
stickyHeader optional	`boolean`	`-`	ヘッダーを固定表示 heroが指定されている場合は無効
stickyFooter optional	`boolean`	`-`	フッターを固定表示
onPrimaryAction optional	`() => void`	`-`	プライマリーアクションボタンが実行された場合のコールバック
primaryActionLabel optional	`string`	`-`	プライマリーアクションボタンのラベル
onSecondaryAction optional	`() => void`	`-`	セカンダリーアクションボタンが実行された場合のコールバック
secondaryActionLabel optional	`string`	`-`	セカンダリーアクションボタンのラベル
data-* optional	`string`	`-`	Custom data attributes

Feature#

覆い被さる画面に対して、何かしらのアクションを実行させるために使用します
- 「シェア」「削除」「通報」など
通常のモーダルダイアログとは違い、コンテンツの中央を占有しないため画面のコンテキストを維持しやすい特徴があります
モバイル環境に最適化されています
- モバイルでは、ユーザーが操作しやすい領域は画面下部になります
- PCユーザーにとっては、逆に操作しづらい可能性があります。画面下部はポインターを置くことが少ないため
領域をアクションで占有できるため、タップエリアを十分確保できます

Usage#

極力1つのモーダルにつき、アクションは1つにとどめましょう
PCやタブレットなどの、広い画面においては使用してはいけません
- 不自然に領域を占めてしまます
- ドロップダウンメニューなどの、代替UIを検討してください
元の画面と全く関係のないコンテンツを表示するのは避けてください

モーダルダイアログは必要？#

一般に、モーダルダイアログは次のような用途で使用されます。

ページの内容とは別のコンテンツを表示・操作する必要がある場合
作業の確認（編集・削除・送信など）を促す場合
重要なメッセージや警告を表示する場合

まず、モーダルダイアログが本当に必要かを検討してください。ページとしてUIを表現することが基本です。
Webの重要な要素として「URLが発行されLinkableであること」が挙げられます。しかし、モーダルダイアログは基本的にURLが発行されません。

ブラウザの戻るボタンに対応しない
例えば管理画面ではURLをマニュアルに記載したいケースがある

など、URLがないことのデメリットが存在します。

モーダルダイアログは「モーダル」の名前の通り、ある特定のモードにユーザーを閉じ込めます。強制的にユーザーの作業が中断されるため、乱用は避ける必要があります。

また、複雑な操作や大量のコンテンツを扱うことには向いていません（デフォルトで領域が狭いため）。そういったケースではページとして分割することを検討してください。

基本的にモーダルダイアログはアンチパターンです。

Header Text#

冗長な表記は避け、なるべく簡潔で具体的に書いてください。ヘッダーテキストでそのモーダルダイアログの目的を理解できる内容としましょう。モバイル環境では2行、それより大きなデバイスでは1行に収まるようにします。

ユーザーが求める操作を、体現止めまたは疑問系で表現します。アクションを表す動名詞とその対象は連体助詞「の」を使って接続します。

❌「ユーザー情報を編集しましょう」
⭕️「ユーザー情報の編集」

データの削除、内容の破棄など破壊的なアクションの場合は疑問形を使用します。例:「この回答履歴を削除しますか？」

汎用的な言葉ではなく、ユースケースに特化した具体的な言葉を使いましょう。

❌「変更をキャンセルする」
⭕️「変更を破棄する」

Button Label#

簡潔で、具体的なテキストをラベルとして用いてください。

❌「OK」
⭕️「保存」
❌「キャンセル」
⭕️「停止」

また、「キャンセル」と「閉じる」は使い分けてください。前者はアクションを中断するニュアンスがあり、後者は単にダイアログを閉じる場合に使います。

`header` and `aria-labelledby`#

header propに渡されたテキストは、aria-labelledby属性を通してダイアログ自体を説明するラベルとなります。
- 特にスクリーンリーダーユーザーにとって意味のあるものとなります
headerpropを使わない場合、モーダルのariaLabelledby prop と見出しとして扱う要素のid属性に共通の文字列を指定し紐づけを行ってください
- custom headerのExampleを参考にしてください