smarthr-ui-dialog · Design

ページ前面に表示されるダイアログ領域のプリミティブコンポーネントです。ActionDialog/MessageDialog/ModelessDialog/FormDialog/StepFormDialogで実現できない独自のダイアログを提供するときに使います。

ダイアログは、ユーザーに入力や選択などの操作を求めたり、情報を提示するために使われます。ユーザーの操作を起点として表示され、ユーザーの操作によって閉じられます。

import

import { DialogWrapper, DialogTrigger, DialogContent, DialogCloser, Dialog } from 'smarthr-ui'

（固有 Props なし）

（固有 Props なし）

Props 名	型	デフォルト値	必須	説明
size	"XS" \| "S" \| "M" \| "L" \| "XL" \| "XXL" \| "FULL"	-	-	ダイアログの大きさ
width	string \| number	-	-	@deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。ダイアログの幅
firstFocusTarget	RefObject	-	-	ダイアログを開いた時にフォーカスする対象
ariaLabel	string	-	-	ダイアログの `aria-label`
ariaLabelledby	string	-	-	ダイアログの `aria-labelledby`
portalParent	HTMLElement \| RefObject	-	-	DOM 上でダイアログの要素を追加する親要素

（固有 Props なし）

Props 名	型	デフォルト値	必須	説明
size	"XS" \| "S" \| "M" \| "L" \| "XL" \| "XXL" \| "FULL"	-	-	ダイアログの大きさ
width	string \| number	-	-	@deprecated ダイアログの幅を指定する場合は、`width` ではなく `size` を使用してください。ダイアログの幅
firstFocusTarget	RefObject	-	-	ダイアログを開いた時にフォーカスする対象
ariaLabel	string	-	-	ダイアログの `aria-label`
ariaLabelledby	string	-	-	ダイアログの `aria-labelledby`
isOpen	boolean	-	✓	ダイアログを開いているかどうか
onClickOverlay	() => void	-	-	オーバーレイをクリックした時に発火するコールバック関数
onPressEscape	() => void	-	-	エスケープキーを押下した時に発火するコールバック関数
portalParent	HTMLElement \| RefObject	-	-	DOM 上でダイアログの要素を追加する親要素

DropdownTriggerやDialogTrigger, DisclosureTrigger内にbutton要素を設置することを強制するルールです。

❌ NG:

// Triggerの子はbutton要素のみである必要がある
<DialogTrigger>
  <Button />
  <Any />
</DialogTrigger>

✅ OK:

<DialogTrigger>
  <XxxButton />
</DialogTrigger>

RemoteDialogTrigger、RemoteTriggerXxxxDialogのベストプラクティスをチェックするルールです。

Dialogのボタンテキストにアイコンコンポーネント（名前が"Icon"で終わるコンポーネント）を含めることを禁止するルールです。

詳細は eslint-plugin-smarthr の各ルール README を参照してください。