ActionDialog

ユーザーに確認や単純な操作を求めるためのダイアログコンポーネントです。フォーム要素を含まない確認・実行のダイアログを表示するときに使います。

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

使用上の注意

ダイアログを乱用しない

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

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

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

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

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

ダイアログコンテンツにフォームが含まれている場合は、FormDialogの使用を検討する

ダイアログコンテンツにフォーム要素を含む場合にはFormDialogの使用を検討します。
詳しくはFormDialogを参照してください。

レイアウト

基準サイズ

ダイアログの横幅の基準値は幅のセマンティックトークンを参照してください。
SmartHR UIでは、サイズ（sizeprops）で指定できます。

表示位置

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

アクセシビリティ

キーボード操作

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

デザインパターン

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

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

モバイル

拡大したActionDialogはsmarthr-uiに実装予定です。

モバイルでは、通常のダイアログに加えて、拡大したダイアログを使用できます。

表示する情報量に応じて拡大したダイアログの採用を検討する

デスクトップに比べて、モバイルでは表示できる情報量に限りがあります。
拡大したダイアログを利用することで、モバイルの表示領域を最大限使って情報を表示できます。

例えば、次のような場合に拡大したダイアログが有効です。

ダイアログ内で多くのスクロールを伴う場合
入力や編集など、キーボードでの入力操作が多い場合

通常のダイアログで表示する

拡大したダイアログで表示する

レイアウト

余白

モバイルで通常のダイアログを使用する場合、余白は以下の通りです。

拡大したダイアログの画面や、コンポーネント内の余白は以下のとおりです。
基本的には、代表的なダイアログ内レイアウトのパディングに従って配置しますが、ダイアログの左右と裏側の領域（スクリムで隠されている領域）のパディングは0（0px）とします。

フッターエリアのレイアウト

［キャンセル］ボタンとPrimaryボタンをClusterで横いっぱいに並べます。

SubActionArea（任意）は、上記のButton群の下部に配置します。

使い方チェックリスト

ActionDialog

参照元：使用上の注意 > ダイアログを乱用しない「使用上の注意 > ダイアログを乱用しない」の本文へ移動

Should
ダイアログとして表示する・操作させるべき内容なのか慎重にユースケースを定義し、使用を検討する

参照元：使用上の注意 > 複数のモーダルダイアログを同時に表示しない「使用上の注意 > 複数のモーダルダイアログを同時に表示しない」の本文へ移動

Avoid
モーダルダイアログを 1 つの操作で複数個表示したり、モーダルダイアログ上の操作によって 2 つ目のモーダルダイアログを表示したりしない

Props

ActionDialog props

size

"XS" "S" "M" "L" "XL" "XXL" "FULL"

ダイアログの大きさ

width非推奨

string number

@deprecated ダイアログの幅を指定する場合は、width ではなく size を使用してください。ダイアログの幅

className

string

heading必須

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal { sub?: ReactNode; text: ReactNode; }

closeButton

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal { text: ReactNode; disabled?: boolean; }

subActionArea

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

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

responseStatus

ResponseStatusWithoutProcessing { status: "processing"; }

firstFocusTarget

RefObject<HTMLElement>

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

onClickOverlay

() => void

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

onPressEscape

(() => void) & ((close: () => void) => void)

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

ariaLabel

string

ダイアログの aria-label

ariaLabelledby

string

ダイアログの aria-labelledby

portalParent

HTMLElement RefObject<HTMLElement>

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

contentBgColor

"BACKGROUND" "COLUMN" "BASE_GREY" "OVER_BACKGROUND" "HEAD" "BORDER" "ACTION_BACKGROUND" "WHITE" "GREY_5" "GREY_6" "GREY_7" "GREY_9" "GREY_20"

contentPadding

0 1 2 0.25 0.5 0.75 1.25 1.5 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 "X3S" "XXS" "XS" "S" "M" "L" "XL" "XXL" "X3L" { block?: Gap; inline?: Gap; }

actionButton必須

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal { text: ReactNode; theme?: "primary" | "danger" | "secondary"; disabled?: boolean; }

onClickAction必須

(e: MouseEvent<Element, MouseEvent>, helpers: ActionDialogHelpers) => void

アクションボタンをクリックした時に発火するコールバック関数 @param e マウスイベント @param helpers ダイアログ操作のためのヘルパー関数

onClickClose

(close: () => void) => void

onToggle

(isOpen: boolean) => void

onOpen

() => void

onClose

() => void

ControlledActionDialog props

className

string

subActionArea

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

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

responseStatus

ResponseStatusWithoutProcessing { status: "processing"; }

contentBgColor

"BACKGROUND" "COLUMN" "BASE_GREY" "OVER_BACKGROUND" "HEAD" "BORDER" "ACTION_BACKGROUND" "WHITE" "GREY_5" "GREY_6" "GREY_7" "GREY_9" "GREY_20"

contentPadding

0 1 2 0.25 0.5 0.75 1.25 1.5 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 "X3S" "XXS" "XS" "S" "M" "L" "XL" "XXL" "X3L" { block?: Gap; inline?: Gap; }

onClickClose必須

() => void

onClickAction必須

(e: MouseEvent<Element, MouseEvent>, helpers: ActionDialogHelpers) => void

アクションボタンをクリックした時に発火するコールバック関数 @param e マウスイベント @param helpers ダイアログ操作のためのヘルパー関数

size

"XS" "S" "M" "L" "XL" "XXL" "FULL"

ダイアログの大きさ

width非推奨

string number

@deprecated ダイアログの幅を指定する場合は、width ではなく size を使用してください。ダイアログの幅

firstFocusTarget

RefObject<HTMLElement>

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

ariaLabel

string

ダイアログの aria-label

ariaLabelledby

string

ダイアログの aria-labelledby

isOpen必須

false true

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

onClickOverlay

() => void

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

onPressEscape

() => void

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

portalParent

HTMLElement RefObject<HTMLElement>

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

heading必須

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal { sub?: ReactNode; text: ReactNode; }

actionButton必須

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal { text: ReactNode; theme?: "primary" | "danger" | "secondary"; disabled?: boolean; }

closeButton

string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal { text: ReactNode; disabled?: boolean; }

プロダクト

ページ内目次

ActionDialog