SmartHR Design System

ActionDialog

ユーザーに入力や選択などの操作を求めるためのダイアログです。ユーザーは操作内容をシステムに送信できます。

モーダルなダイアログです。ダイアログの表示中、ダイアログの裏側の領域はスクリム（幕）で隠され、操作を受け付けません。

使用上の注意

モーダルなUIの使いどころもあわせて参照してください。

ダイアログを乱用しない

ActionDialogの表示中、ユーザーの操作範囲は強制的に制限されます。

ダイアログが表示されることによってユーザーの操作を妨げてしまわないか、ダイアログとして表示する・操作させるべき内容なのか、慎重にユースケースを定義し、使用を検討してください。

複数のモーダルダイアログを同時に表示しない

モーダルダイアログ（ActionDialogやMessageDialog）を1つの操作で複数個表示したり、モーダルダイアログ上の操作によって2つ目のモーダルダイアログを表示したりすることは、原則として推奨されません。3つの画面が重なり、画面どうしの関係性や、どんな操作をすれば何が起こるのかが予測しづらくなるためです。

なお、モーダルダイアログ上の操作によってModelessDialogを表示したり、ModelessDialogが開いている状態でモーダルダイアログを開いたりすることは問題ありません。

レイアウト

基準サイズ

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

デスクトップ、タブレット（TABLET）

サイズ値補足説明
XS480px（30rem）幅の最小値として使います。
S560px（35rem）
M640px（40rem）
L880px（55rem）
XL1120px（70rem）
MAXcalc(100vw - 16px)幅の最大値として使います。

スマートフォン（SP）

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

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

表示位置

表示位置は、画面の天地左右中央に表示されます。

アクセシビリティ

キーボード操作

ESCキーを押すことでダイアログを閉じることができます。

デザインパターン

削除操作をする際の確認のダイアログについては、削除ダイアログを参照してください。

それ以外のパターンについては、モーダルなUIを参照してください。

Props

title必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

ダイアログタイトル

className
string
decorators
DecoratorsType<"closeButtonLabel">

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

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

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

responseMessage
{ status: "error" | "success"; text: ReactNode; } { status: "processing"; }
contentBgColor
"GREY_5" "GREY_6" "GREY_7" "GREY_9" "GREY_20" "WHITE" "BACKGROUND" "COLUMN" "BASE_GREY" "OVER_BACKGROUND" "HEAD" "BORDER" "ACTION_BACKGROUND"
onClickClose必須
() => void
contentPadding
0 0.25 0.5 0.75 1 1.25 1.5 2 2.5 3 3.5 4 8 -0.25 -0.5 -0.75 -1 -1.25 -1.5 -2 -2.5 -3 -3.5 -4 -8 "XXS" "XS" "S" "M" "L" "XL" "XXL" "X3S" "X3L" { block?: Gap; inline?: Gap; }
subtitle
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

ダイアログサブタイトル

actionText必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

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

actionTheme
"primary" "danger" "secondary"

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

actionDisabled
false true

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

closeDisabled
false true

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

subActionArea
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

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

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

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

width
string number

ダイアログの幅

firstFocusTarget
RefObject<HTMLElement>

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

ariaLabel
string

ダイアログの aria-label

ariaLabelledby
string

ダイアログの aria-labelledby

isOpen必須
false true

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

onPressEscape
() => void

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

onClickOverlay
() => void

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

portalParent
HTMLElement RefObject<HTMLElement>

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