複数ステップに分けたフォームを内包するダイアログコンポーネントです。ウィザード形式で複数の操作を順に進めるタスクをダイアログで提供するときに使います。
モーダルなダイアログです。ダイアログの表示中、ダイアログの裏側の領域はスクリム（幕）で隠され、操作を受け付けません。
import
import { StepFormDialog } from 'smarthr-ui'
Props
| Props 名 | 型 | デフォルト値 | 必須 | 説明 |
|---|---|---|---|---|
| size | "XS" | "S" | "M" | "L" | "XL" | "XXL" | "FULL" | - | - | ダイアログの大きさ |
| width | string | number | - | - | @deprecated ダイアログの幅を指定する場合は、width ではなく size を使用してください。 ダイアログの幅 |
| className | string | - | - | - |
| onSubmit | (e: FormEvent |
- | ✓ | アクションボタンをクリックした時に発火するコールバック関数 @param e フォームイベント @param helpers ステップ操作用のヘルパー関数群 |
| heading | ReactNode | ObjectHeadingType | - | ✓ | - |
| closeButton | ButtonArgType | ObjectButtonType | - | - | - |
| responseStatus | ResponseStatus | - | - | - |
| firstFocusTarget | RefObject |
- | - | ダイアログを開いた時にフォーカスする対象 |
| onClickOverlay | () => void | - | - | オーバーレイをクリックした時に発火するコールバック関数 |
| onPressEscape | (() => void) & ((close: () => void) => void) | - | - | エスケープキーを押下した時に発火するコールバック関数 |
| ariaLabel | string | - | - | ダイアログの aria-label |
| ariaLabelledby | string | - | - | ダイアログの aria-labelledby |
| portalParent | HTMLElement | RefObject |
- | - | DOM 上でダイアログの要素を追加する親要素 |
| contentBgColor | "BACKGROUND" | "COLUMN" | "BASE_GREY" | "OVER_BACKGROUND" | "HEAD" | ... 他8個 | - | - | - |
| contentPadding | Gap | { block?: Gap; inline?: Gap; } | - | - | - |
| submitButton | ButtonArgType | ObjectButtonType | - | ✓ | - |
| backButton | ButtonArgType | ObjectButtonType | - | - | - |
| firstStep | { id: string; stepNumber: number; } | - | ✓ | - |
| stepLength | number | - | ✓ | ステップの総数 |
| onClickBack | () => void | - | - | - |
| onClickClose | (close: () => void) => void | - | - | - |
| onToggle | (isOpen: boolean) => void | - | - | - |
| onOpen | () => void | - | - | - |
| onClose | () => void | - | - | - |
実装ルール
StepFormDialog に直接関連する eslint-plugin-smarthr のルールは現時点ではありません。
使い方チェックリスト
モバイル > 表示する情報量に応じて拡大したダイアログの採用を検討する
- [should] モバイルで表示する情報量に応じて拡大したダイアログの採用を検討する
- ダイアログ内で多くのスクロールを伴う場合
- 入力や編集など、キーボードでの入力操作が多い場合
モバイル > レイアウト > 余白
- [must] 拡大したダイアログの左右と裏側の領域（スクリムで隠されている領域）のパディングは
0（0px）とする- 基本的には代表的なダイアログ内レイアウトのパディングに従って配置する
モバイル > レイアウト > フッターエリアのレイアウト
- [must] モバイルで［戻る］ボタンと Primary ボタンを Cluster で横いっぱいに並べる
- ［キャンセル］ボタンは Button 群の下部に配置する