SmartHR Design System

FormDialog

フォーム要素を内包し、ユーザーに入力や選択などの操作を求めるためのActionDialog派生のダイアログコンポーネントです。ダイアログ内で入力フォームを送信するとき、Enterキーでの送信が必要なときに使います。

各種基準はActionDialogと共通です。

使用上の注意

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

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

FormDialogは内部でコンテンツを<form>要素で包むため、ActionDialogにはない以下の挙動を持ちます。ユースケースに合わせて使い分けてください。

  • Enterキーの押下でアクションボタンの送信処理を実行します。
  • アクション系コールバックはonSubmitで、引数はFormEvent<HTMLFormElement>を受け取ります（ActionDialogのonClickActionはMouseEventを受け取ります）。

使い方チェックリスト

FormDialog
参照元：使用上の注意 > ダイアログコンテンツにフォームが含まれている場合は、FormDialogの使用を検討する 「使用上の注意 > ダイアログコンテンツにフォームが含まれている場合は、FormDialogの使用を検討する」の本文へ移動
  • Should
    ダイアログコンテンツにフォーム要素を含む場合は FormDialog の使用を検討する
    • `Enter` キーの押下でアクションボタンの送信処理を実行する
    • アクション系コールバックは `onSubmit` で、引数は `FormEvent<HTMLFormElement>` を受け取る

Props

FormDialog props

onToggle
(isOpen: boolean) => void
onClose
() => void
onOpen
() => void
onPressEscape
(close: () => void) => void
onClickClose
(close: () => void) => void
ref
(instance: HTMLDivElement) => voidRefObject<HTMLDivElement>
width非推奨
stringnumber

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

onSubmit必須
(e: FormEvent<HTMLFormElement>, helpers: { close: () => void; }) => void

フォーム送信時に発火するコールバック関数

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

ダイアログの大きさ

heading必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal{ [x: string]: any; [x: number]: any; [x: symbol]: any; }
subActionArea
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

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

responseStatus
ResponseStatusWithoutProcessing{ status: "processing"; }
firstFocusTarget
RefObject<HTMLElement>

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

onClickOverlay
() => void

オーバーレイをクリックした時に発火するコールバック関数 @todo イベントハンドラー命名規則に従い handleClickOverlay に変更すべき（影響範囲大のため別PR）

ariaLabel
string

ダイアログの aria-label

ariaLabelledby
string

ダイアログの aria-labelledby

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

コンテンツ部分の背景色

contentPadding
012"XS""S""M""XXS""L""XL""XXL"340.250.50.751.251.52.53.58-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8"X3S""X3L"{ block?: Gap; inline?: Gap; }
portalParent
HTMLElement

DOM 上でダイアログの要素を追加する親要素。 ダイアログのマウントと同時に確定していない要素（例: ダイアログの祖先要素の ref）を 渡すと、その要素がまだ DOM に存在しない可能性があるため意図通りに動作しない。 呼び出し側で要素が確定してから渡すこと。

closeButton
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortalany
actionButton必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortalany

ControlledFormDialog props

ref
(instance: HTMLDivElement) => voidRefObject<HTMLDivElement>
width非推奨
stringnumber

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

onSubmit必須
(e: FormEvent<HTMLFormElement>, helpers: { close: () => void; }) => void

フォーム送信時に発火するコールバック関数

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

ダイアログの大きさ

heading必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal{ [x: string]: any; [x: number]: any; [x: symbol]: any; }
subActionArea
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

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

responseStatus
ResponseStatusWithoutProcessing{ status: "processing"; }
firstFocusTarget
RefObject<HTMLElement>

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

isOpen必須
falsetrue

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

onClickOverlay
() => void

オーバーレイをクリックした時に発火するコールバック関数 @todo イベントハンドラー命名規則に従い handleClickOverlay に変更すべき（影響範囲大のため別PR）

onPressEscape
(e: KeyboardEvent) => void

エスケープキーを押下した時に発火するコールバック関数 @todo イベントハンドラー命名規則に従い handlePressEscape に変更すべき（影響範囲大のため別PR）

ariaLabel
string

ダイアログの aria-label

ariaLabelledby
string

ダイアログの aria-labelledby

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

コンテンツ部分の背景色

contentPadding
012"XS""S""M""XXS""L""XL""XXL"340.250.50.751.251.52.53.58-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8"X3S""X3L"{ block?: Gap; inline?: Gap; }
portalParent
HTMLElement

DOM 上でダイアログの要素を追加する親要素。 ダイアログのマウントと同時に確定していない要素（例: ダイアログの祖先要素の ref）を 渡すと、その要素がまだ DOM に存在しない可能性があるため意図通りに動作しない。 呼び出し側で要素が確定してから渡すこと。

closeButton
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortalany
onClickClose必須
(e?: MouseEvent<HTMLButtonElement, MouseEvent> | KeyboardEvent) => void

閉じるボタンをクリックした時に発火するコールバック関数

actionButton必須
stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortalany