SmartHR Design System

FormDialog

ダイアログコンテンツにフォームが含まれている場合に使用するActionDialogの派生コンポーネントです。
ユーザーに入力や選択などの操作を求め、入力内容をシステムに送信するために使います。

各種基準は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; }
decorators
DecoratorsType<"closeButtonLabel">

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

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; }
actionText必須
string number false true ReactElement<any, string | JSXElementConstructor<any>> Iterable<ReactNode> ReactPortal

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

actionTheme
"primary" "secondary" "danger"

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

actionDisabled
false true

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

closeDisabled
false true

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

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 ダイアログ操作のためのヘルパー関数

decorators
DecoratorsType<"closeButtonLabel">

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

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

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

actionTheme
"primary" "secondary" "danger"

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

actionDisabled
false true

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

closeDisabled
false true

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

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; }