SmartHR Design System

StepFormDialog

ステップを複数に分けたダイアログです。タスクの完了に複数の操作が必要な場合に使います。

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

詳しくはウィザードを参照してください。

モバイル

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

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

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

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

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

  • ダイアログ内で多くのスクロールを伴う場合
  • 入力や編集など、キーボードでの入力操作が多い場合
Do
Do
通常のダイアログで表示する
Do
Do
拡大したダイアログで表示する

レイアウト

余白

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

ステップフォームダイアログの余白の説明図

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

拡大したステップフォームダイアログの余白の説明図

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

［戻る］ボタンとPrimaryボタンをClusterで横いっぱいに並べます。

［キャンセル］ボタンは、上記のButton群の下部に配置します。

キャンセルボタンを表示した拡大したステップフォームダイアログの例

Props

className
string
onSubmit必須
(e: FormEvent<HTMLFormElement>, helpers: StepFormHelpers) => void

アクションボタンをクリックした時に発火するコールバック関数 @param e フォームイベント @param helpers ステップ操作用のヘルパー関数群

responseStatus
ResponseStatusWithoutProcessing { status: "processing"; }
contentBgColor
"GREY_5" "GREY_6" "GREY_7" "GREY_9" "GREY_20" "WHITE" "BACKGROUND" "COLUMN" "BASE_GREY" "OVER_BACKGROUND" "HEAD" "BORDER" "ACTION_BACKGROUND"
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 "X3S" "XXS" "XS" "S" "M" "L" "XL" "XXL" "X3L" { block?: Gap; inline?: Gap; }
firstStep必須
StepItem
onClickClose必須
() => void
stepLength必須
number

ステップの総数

onClickBack
() => void
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 ObjectHeadingType
submitButton必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal (currentStep: StepItem, defaultText: ReactNode) => ReactNode ObjectButtonType
closeButton
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal (currentStep: StepItem, defaultText: ReactNode) => ReactNode ObjectButtonType
backButton
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal (currentStep: StepItem, defaultText: ReactNode) => ReactNode ObjectButtonType