Dialog

Dialogコンポーネントは、ユーザーに集中してほしい確認や操作を示します。

ユーザーの能動的なアクションを起点に、主に以下の目的で使います。

  • 別の情報を操作する必要がある場合
  • 作業の確認(参照・追加・編集・削除)を促す場合
  • メッセージや警告をユーザーに表示する場合

情報設計をしっかり行ない、ダイアログで表示したい内容が上記に挙げた目的に合うものか、メインコンテンツの画面で表示するよりも適切な整理なのかをよく考えましょう。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
処理中

使用上の注意

ダイアログの乱用は避ける

ダイアログの乱用は避けましょう。
ダイアログの表示中は、メインコンテンツの情報・状態は保持されますが、ユーザーは(それまでの操作を中断し)ダイアログでの操作に集中させられることになります。

また、以下も推奨されません。

  • ダイアログの上にダイアログを表示すること
  • 複数のダイアログを同時に表示すること

種類

ActionDialog

SmartHR UIではActionDialogです。
ActionDialogは、ユーザーに選択の確認や操作を求める場合に使用するモーダルダイアログです。Primaryボタンを使い強調します。

MessageDialog

SmartHR UIではMessageDialogです。
MessageDialogは、ユーザーの操作を中断させて、ユーザーへの警告や確認を明示的にしたい場合に使うモーダルダイアログです。

ユーザーの操作を中断させる必要がない場合は、InformationPanelCompactInformationPanelの使用を検討してください。

ModelessDialog

SmartHR UIではModelessDialogです。
ModelessDialogは、ユーザーに任意のタイミングや順序で、情報の確認や操作をさせたい場合に使います。

レイアウト

基準サイズ

ダイアログの横幅サイズの基準値は以下のとおりです。
サイズに意図がない場合は、下記の値から想定に近い値を選択してください。

デスクトップ、タブレット(TABLET

サイズ補足説明
S480pxDialogの最小値として使います。
M640px
L768px
MAXcalc(100% - 32px)Dialogの最大値として使います。

スマートフォン(SP

スマートフォンは表示領域が狭いため、サイズの最大値/最小値は同じとします。

サイズ補足説明
標準calc(100% - 32px)Dialogの最大値/最小値として使います。

表示位置

意図的な場合をのぞき、ダイアログは画面の天地中央(上下左右中央)に表示します。

モードレスダイアログ(ModelessDialog)では、操作の起点を示すために、ダイアログを開くボタンやリンクテキストの付近から表示することがあります。

ライティング

タイトルのつけ方

ダイアログは、コンポーネントの用途がそれぞれ明確にあり、タイトルのつけ方もそれぞれ異なります。
冗長な表記をなるべく避けてください。複数行になる長いタイトルは見直しましょう。

ActionDialog

基本的に、Headingの見出しの書き方と同様に、画面上のオブジェクトや操作を簡潔に体言止めで書きます。

MessageDialog

メッセージ確認を促す簡潔な文書を入れます。ユーザーに注意喚起を促す、お知らせをしたいなど、目的に合わせたタイトルを設定してください。

ModelessDialog

[WIP]

デザインパターン

サブタイトルの使い方

原則として、使いません。タイトルだけではオブジェクトや機能を特定できない場合にのみ使ってください。

ダイアログ外領域への操作

ダイアログ表示中における、ダイアログ外の領域に対する操作の基準は以下のとおりです。

操作モーダルダイアログ
(ActionDialog, MessageDialog)
モードレスダイアログ
(MessageDialog)
ダイアログ外のUIに対するインタラクションダイアログ外にスクリム(幕)を表示しているため、受け付けません。受け付けます。
ダイアログ外の領域のクリックMessageDialogなど、ダイアログ内の情報を保持する必要がない用途では、ダイアログを閉じる動作を許容します。モードレスダイアログは閉じず、ダイアログ外のUIに対するインタラクションとして受け付けます。

ダイアログを閉じる操作

ダイアログを閉じるアクションは、ダイアログの種類に応じて異なります。

「キャンセル」ボタン

ユーザーが、ダイアログの操作を明示的に中断するためのアクションボタンです。

主にActionDialogで使用し、ActionDialogのセカンダリアクションとして配置します。

「キャンセル」ボタンの配置

ダイアログ内の情報の保持状態(フォームの入力状態など)を初期化して、ダイアログを閉じる動作をします。
ダイアログ内の情報を途中保存していたり、自動保存している場合は、再表示時にもっとも近い保存時点まで復帰します。

「閉じる」ボタン

ユーザーが、ダイアログを閉じるためのアクションボタンです。

主にMessageDialogおよびModelessDialogで使用し、ダイアログの(唯一の)アクションとして配置します。
同じダイアログ内で、閉じる役割が重複する「キャンセル」ボタンと同時に配置されることはありません。

「閉じる」ボタンの配置

ダイアログ内にフォームなどを含む場合は、閉じる際に入力状態を保存し、再表示時には復帰することを推奨します。

ESCキー

ダイアログ表示中のキーボード操作として機能し、「キャンセル」および「閉じる」と同じ動作をします。

Props

Dialog props

top
number

ダイアログを開いたときの初期 top 位置

bottom
number

ダイアログを開いたときの初期 bottom 位置

left
number

ダイアログを開いたときの初期 left 位置

right
number

ダイアログを開いたときの初期 right 位置

width
stringnumber

ダイアログの幅

firstFocusTarget
RefObject<HTMLElement>

ダイアログを開いた時にフォーカスする対象

ariaLabel
string

ダイアログの aria-label

ariaLabelledby
string

ダイアログの aria-labelledby

isOpen必須
falsetrue

ダイアログを開いているかどうか

onPressEscape
() => void

エスケープキーを押下した時に発火するコールバック関数

onClickOverlay
() => void

オーバーレイをクリックした時に発火するコールバック関数

portalParent
HTMLElementRefObject<HTMLElement>

DOM 上でダイアログの要素を追加する親要素

ActionDialog props

title必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログのタイトル

decorators
DecoratorsType<"closeButtonLabel">

コンポーネント内の文言を変更するための関数を設定

titleTag非推奨
"h1""h2""h3""h4""h5""h6"

@deprecated SectioningContent(Article, Aside, Nav, Section, SectioningFragment)でDialog全体をラップして、ダイアログタイトルのHeadingレベルを設定してください

responseMessage
{ status: "error" | "success"; text: ReactNode; }{ status: "processing"; }
onClickClose必須
() => void
subtitle
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログのサブタイトル

actionText必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

アクションボタンのラベル

actionTheme
"primary""secondary""danger"

アクションボタンのスタイル

actionDisabled
falsetrue

アクションボタンを無効にするかどうか

closeDisabled
falsetrue

閉じるボタンを無効にするかどうか

subActionArea
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログフッターの左端操作領域

onClickAction必須
(closeDialog: () => void) => void

アクションボタンをクリックした時に発火するコールバック関数 @param closeDialog - ダイアログを閉じる関数

top
number

ダイアログを開いたときの初期 top 位置

bottom
number

ダイアログを開いたときの初期 bottom 位置

left
number

ダイアログを開いたときの初期 left 位置

right
number

ダイアログを開いたときの初期 right 位置

width
stringnumber

ダイアログの幅

firstFocusTarget
RefObject<HTMLElement>

ダイアログを開いた時にフォーカスする対象

ariaLabel
string

ダイアログの aria-label

ariaLabelledby
string

ダイアログの aria-labelledby

isOpen必須
falsetrue

ダイアログを開いているかどうか

onPressEscape
() => void

エスケープキーを押下した時に発火するコールバック関数

onClickOverlay
() => void

オーバーレイをクリックした時に発火するコールバック関数

portalParent
HTMLElementRefObject<HTMLElement>

DOM 上でダイアログの要素を追加する親要素

MessageDialog props

title必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログのタイトル

decorators
DecoratorsType<"closeButtonLabel">

コンポーネント内の文言を変更するための関数を設定

titleTag非推奨
"h1""h2""h3""h4""h5""h6"

@deprecated SectioningContent(Article, Aside, Nav, Section, SectioningFragment)でDialog全体をラップして、ダイアログタイトルのHeadingレベルを設定してください

description必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログの説明

onClickClose必須
() => void
subtitle
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログのサブタイトル

top
number

ダイアログを開いたときの初期 top 位置

bottom
number

ダイアログを開いたときの初期 bottom 位置

left
number

ダイアログを開いたときの初期 left 位置

right
number

ダイアログを開いたときの初期 right 位置

width
stringnumber

ダイアログの幅

firstFocusTarget
RefObject<HTMLElement>

ダイアログを開いた時にフォーカスする対象

ariaLabel
string

ダイアログの aria-label

ariaLabelledby
string

ダイアログの aria-labelledby

isOpen必須
falsetrue

ダイアログを開いているかどうか

onPressEscape
() => void

エスケープキーを押下した時に発火するコールバック関数

onClickOverlay
() => void

オーバーレイをクリックした時に発火するコールバック関数

portalParent
HTMLElementRefObject<HTMLElement>

DOM 上でダイアログの要素を追加する親要素

ModelessDialog props

header必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログのヘッダ部分の内容

footer
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログのフッタ部分の内容

isOpen必須
falsetrue

ダイアログが開かれているかどうかの真偽値

onClickClose
(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void

閉じるボタンを押下したときのハンドラ

onPressEscape
() => void

ダイアログが開いている状態で Escape キーを押下したときのハンドラ

width
stringnumber

ダイアログの幅

height
stringnumber

ダイアログの高さ

top
stringnumber

ダイアログを開いたときの初期 top 位置

left
stringnumber

ダイアログを開いたときの初期 left 位置

right
stringnumber

ダイアログを開いたときの初期 right 位置

bottom
stringnumber

ダイアログを開いたときの初期 bottom 位置

portalParent
HTMLElementRefObject<HTMLElement>

ポータルの container となる DOM 要素を追加する親要素

decorators
DecoratorsType<"closeButtonIconAlt"> & { dialogHandlerAriaLabel?: (txt: string) => string; dialogHandlerAriaValuetext?: (txt: string, data: DOMRect) => string; }

コンポーネント内の文言を変更するための関数を設定

ref
(instance: HTMLDivElement) => voidRefObject<HTMLDivElement>