SmartHR Design System

StepFormDialog

複数ステップに分けたフォームを内包するダイアログコンポーネントです。ウィザード形式で複数の操作を順に進めるタスクをダイアログで提供するときに使います。

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

モバイル

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

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

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

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

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

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

レイアウト

余白

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

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

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

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

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

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

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

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

使い方チェックリスト

StepFormDialog
参照元：モバイル > 表示する情報量に応じて拡大したダイアログの採用を検討する 「モバイル > 表示する情報量に応じて拡大したダイアログの採用を検討する」の本文へ移動
  • Should
    モバイルで表示する情報量に応じて拡大したダイアログの採用を検討する
    • ダイアログ内で多くのスクロールを伴う場合
    • 入力や編集など、キーボードでの入力操作が多い場合
参照元：モバイル > レイアウト > 余白 「モバイル > レイアウト > 余白」の本文へ移動
  • Must
    拡大したダイアログの左右と裏側の領域（スクリムで隠されている領域）のパディングは `0（0px）` とする
    • 基本的には代表的なダイアログ内レイアウトのパディングに従って配置する
参照元：モバイル > レイアウト > フッターエリアのレイアウト 「モバイル > レイアウト > フッターエリアのレイアウト」の本文へ移動
  • Must
    モバイルで［戻る］ボタンと Primary ボタンを Cluster で横いっぱいに並べる
    • ［キャンセル］ボタンは Button 群の下部に配置する

Props

StepFormDialog props

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

ダイアログの大きさ

width非推奨
stringnumber

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

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

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

heading必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal{ sub?: ReactNode; text: ReactNode; }
closeButton
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal(currentStep: { id: string; stepNumber: number; }, defaultText: ReactNode) => ReactNodeObjectButtonType
responseStatus
ResponseStatusWithoutProcessing{ status: "processing"; }
firstFocusTarget
RefObject<HTMLElement>

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

onClickOverlay
() => void

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

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

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

ariaLabel
string

ダイアログの aria-label

ariaLabelledby
string

ダイアログの aria-labelledby

portalParent
HTMLElementRefObject<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
0120.250.50.751.251.52.533.548-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; }
submitButton必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal(currentStep: { id: string; stepNumber: number; }, defaultText: ReactNode) => ReactNodeObjectButtonType
backButton
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal(currentStep: { id: string; stepNumber: number; }, defaultText: ReactNode) => ReactNodeObjectButtonType
firstStep必須
{ id: string; stepNumber: number; }
stepLength必須
number

ステップの総数

onClickBack
() => void
onClickClose
(close: () => void) => void
onToggle
(isOpen: boolean) => void
onOpen
() => void
onClose
() => void

ControlledStepFormDialog props

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

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

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
0120.250.50.751.251.52.533.548-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必須
{ id: string; stepNumber: number; }
onClickClose必須
() => void
stepLength必須
number

ステップの総数

onClickBack
() => void
size
"XS""S""M""L""XL""XXL""FULL"

ダイアログの大きさ

width非推奨
stringnumber

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

firstFocusTarget
RefObject<HTMLElement>

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

ariaLabel
string

ダイアログの aria-label

ariaLabelledby
string

ダイアログの aria-labelledby

isOpen必須
falsetrue

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

onClickOverlay
() => void

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

onPressEscape
() => void

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

portalParent
HTMLElementRefObject<HTMLElement>

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

heading必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal{ sub?: ReactNode; text: ReactNode; }
submitButton必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal(currentStep: { id: string; stepNumber: number; }, defaultText: ReactNode) => ReactNodeObjectButtonType
closeButton
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal(currentStep: { id: string; stepNumber: number; }, defaultText: ReactNode) => ReactNodeObjectButtonType
backButton
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal(currentStep: { id: string; stepNumber: number; }, defaultText: ReactNode) => ReactNodeObjectButtonType