SmartHR Design System

FormDialog

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

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

使用上の注意

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

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

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

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

Props

FormDialog props

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

ダイアログの大きさ

width非推奨
string number

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

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

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

heading必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal { sub?: ReactNode; text: ReactNode; }
closeButton
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal { text: ReactNode; disabled?: boolean; }
subActionArea
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

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

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

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

onClickOverlay
() => void

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

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

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

ariaLabel
string

ダイアログの aria-label

ariaLabelledby
string

ダイアログの aria-labelledby

portalParent
HTMLElement RefObject<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
0 1 2 0.25 0.5 0.75 1.25 1.5 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; }
actionButton必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal { text: ReactNode; theme?: "primary" | "danger" | "secondary"; disabled?: boolean; }
onClickClose
(close: () => void) => void
onToggle
(isOpen: boolean) => void
onOpen
() => void
onClose
() => void

ControlledFormDialog props

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

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

subActionArea
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

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

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
0 1 2 0.25 0.5 0.75 1.25 1.5 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; }
onClickClose必須
() => 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 { sub?: ReactNode; text: ReactNode; }
actionButton必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal { text: ReactNode; theme?: "primary" | "danger" | "secondary"; disabled?: boolean; }
closeButton
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal { text: ReactNode; disabled?: boolean; }