SmartHR Design System

StepFormDialog

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

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

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

モバイル

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

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

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

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

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

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

レイアウト

余白

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

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

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

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

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

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

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

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

Props

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

ダイアログタイトル

className
string
onSubmit必須
(closeDialog: () => void, e: FormEvent<HTMLFormElement>, currentStep: StepItem) => StepItem

アクションボタンをクリックした時に発火するコールバック関数 @param closeDialog ダイアログを閉じる関数 @param currentStep onSubmitが発火した時のステップ @returns 次のステップに遷移する場合は次のステップ、遷移しない場合はundefined

decorators
DecoratorsType<DecoratorKeyTypes>

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

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

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

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
subtitle
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

ダイアログサブタイトル

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

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

actionTheme
"primary" "danger" "secondary"

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

actionDisabled
false true

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

closeDisabled
false true

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

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 上でダイアログの要素を追加する親要素