Skip to content

Commit 9dbada2

Browse files
quqjpquqjp
committed
fix lint
1 parent ad1e8b0 commit 9dbada2

1 file changed

Lines changed: 35 additions & 35 deletions

File tree

‎docs/component/dropdown-specification.md‎

Lines changed: 35 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -76,56 +76,56 @@ const items: DropdownItemType[] = [
7676

7777
#### オプションプロパティ
7878

79-
| プロパティ | 型 | デフォルト値 | 説明 |
80-
| ---------- | --- | ------------ | ---- |
81-
| `size` | `'x-small' \| 'small' \| 'medium' \| 'large'` | `'medium'` | トリガーボタンの高さ・余白・タイポグラフィを切り替える。 |
82-
| `variant` | `'text' \| 'outline'` | `'outline'` | テーマのボタンスタイルを適用する。`text` は境界線なし、`outline` は枠線表示となる。 |
83-
| `title` | `string` | `undefined` | `button` 要素の `title` 属性に渡され、ツールチップやスクリーンリーダー補助として利用できる。 |
84-
| `isDisabled` | `boolean` | `false` | トリガーボタンとメニューを無効化する。`true` の場合は `cursor-not-allowed` と `pointer-events-none` を適用しメニューを開けなくなる。 |
85-
| `isArrowHidden` | `boolean` | `false` | 組み込みの下向き矢印アイコンを非表示にする。カスタムターゲットで矢印が不要な場合に使用する。 |
86-
| `icon` | `IconName` | `undefined` | ラベル付きボタンの先頭に配置する公式アイコン。`target` を使用する場合は無視される。 |
87-
| `portalTargetRef` | `MutableRefObject<HTMLElement \| null>` | `undefined` | メニューを別コンテナへ `createPortal` で描画するためのターゲット要素参照。レイヤーの制約を回避したい場合に利用する。 |
88-
| `children` | `ReactNode` | - | 一般的には `Dropdown.Menu` を渡し、その中で `Dropdown.Item` などを配置する。 |
79+
| プロパティ | 型 | デフォルト値 | 説明 |
80+
| ----------------- | --------------------------------------------- | ------------ | ------------------------------------------------------------------------------------------------------------------------------------ |
81+
| `size` | `'x-small' \| 'small' \| 'medium' \| 'large'` | `'medium'` | トリガーボタンの高さ・余白・タイポグラフィを切り替える。 |
82+
| `variant` | `'text' \| 'outline'` | `'outline'` | テーマのボタンスタイルを適用する。`text` は境界線なし、`outline` は枠線表示となる。 |
83+
| `title` | `string` | `undefined` | `button` 要素の `title` 属性に渡され、ツールチップやスクリーンリーダー補助として利用できる。 |
84+
| `isDisabled` | `boolean` | `false` | トリガーボタンとメニューを無効化する。`true` の場合は `cursor-not-allowed` と `pointer-events-none` を適用しメニューを開けなくなる。 |
85+
| `isArrowHidden` | `boolean` | `false` | 組み込みの下向き矢印アイコンを非表示にする。カスタムターゲットで矢印が不要な場合に使用する。 |
86+
| `icon` | `IconName` | `undefined` | ラベル付きボタンの先頭に配置する公式アイコン。`target` を使用する場合は無視される。 |
87+
| `portalTargetRef` | `MutableRefObject<HTMLElement \| null>` | `undefined` | メニューを別コンテナへ `createPortal` で描画するためのターゲット要素参照。レイヤーの制約を回避したい場合に利用する。 |
88+
| `children` | `ReactNode` | - | 一般的には `Dropdown.Menu` を渡し、その中で `Dropdown.Item` などを配置する。 |
8989

9090
#### 排他的プロパティグループ
9191

92-
| 組み合わせ | 説明 |
93-
| ---------- | ---- |
94-
| `target` | `ReactElement` を渡すと任意の要素をトリガーとして描画し、`label` と `icon` は同時に指定できない。アバターやアイコンボタンとの組み合わせに適する。 |
95-
| `label` + `icon?` | `target` を指定しない場合は `label: string` が必須となり、標準ボタンが描画される。`icon` は任意でラベル先頭に配置できる。 |
92+
| 組み合わせ | 説明 |
93+
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
94+
| `target` | `ReactElement` を渡すと任意の要素をトリガーとして描画し、`label` と `icon` は同時に指定できない。アバターやアイコンボタンとの組み合わせに適する。 |
95+
| `label` + `icon?` | `target` を指定しない場合は `label: string` が必須となり、標準ボタンが描画される。`icon` は任意でラベル先頭に配置できる。 |
9696

9797
#### 継承プロパティ
9898

9999
- なし。DOM属性のスプレッドは行っていないため、追加の `aria-*` や `data-*` を指定する場合はラップ側で実装する。
100100

101101
### Dropdown.Menu のProps
102102

103-
| プロパティ | 型 | デフォルト値 | 説明 |
104-
| ---------- | --- | ------------ | ---- |
105-
| `maxHeight` | `CSSProperties['height']` | `undefined` | メニューリストの最大高さ。値を設定すると `overflow-y-auto` が有効になり、スクロール可能なリストになる。 |
106-
| `isNoPadding` | `boolean` | `false` | `py-1` の内部余白を削除し、完全にカスタムなレイアウトを実装できる。 |
107-
| `verticalPosition` | `'top' \| 'bottom'` | `'bottom'` | トリガーボタンからの表示方向。`top` を指定するとボタンの上側に 4px の余白で配置する。 |
108-
| `horizontalAlign` | `'left' \| 'center' \| 'right'` | `'left'` | トリガーとの水平位置。`right` は右端を揃え、`center` は左右を固定しない（ポータル描画などのカスタム配置向け）。 |
109-
| `children` | `ReactNode` | - | `Dropdown.Item` や任意のリスト要素を受け取り、そのまま `ul` の子要素として描画する。 |
103+
| プロパティ | 型 | デフォルト値 | 説明 |
104+
| ------------------ | ------------------------------- | ------------ | --------------------------------------------------------------------------------------------------------------- |
105+
| `maxHeight` | `CSSProperties['height']` | `undefined` | メニューリストの最大高さ。値を設定すると `overflow-y-auto` が有効になり、スクロール可能なリストになる。 |
106+
| `isNoPadding` | `boolean` | `false` | `py-1` の内部余白を削除し、完全にカスタムなレイアウトを実装できる。 |
107+
| `verticalPosition` | `'top' \| 'bottom'` | `'bottom'` | トリガーボタンからの表示方向。`top` を指定するとボタンの上側に 4px の余白で配置する。 |
108+
| `horizontalAlign` | `'left' \| 'center' \| 'right'` | `'left'` | トリガーとの水平位置。`right` は右端を揃え、`center` は左右を固定しない（ポータル描画などのカスタム配置向け）。 |
109+
| `children` | `ReactNode` | - | `Dropdown.Item` や任意のリスト要素を受け取り、そのまま `ul` の子要素として描画する。 |
110110

111111
### Dropdown.Item のProps
112112

113-
| プロパティ | 型 | デフォルト値 | 説明 |
114-
| ---------- | --- | ------------ | ---- |
115-
| `color` | `'gray' \| 'red'` | `'gray'` | アイテムの配色。`red` を指定すると危険操作向けに `text-supportDanger` を適用する。 |
116-
| `onClick` | `(event: MouseEvent<HTMLButtonElement>) => void` | `undefined` | アイテム選択時のコールバック。実行前にメニューを自動で閉じる。 |
117-
| `children` | `ReactNode` | - | ボタン内に表示する内容。テキスト、アイコン、複合レイアウトに対応する。 |
113+
| プロパティ | 型 | デフォルト値 | 説明 |
114+
| ---------- | ------------------------------------------------ | ------------ | ---------------------------------------------------------------------------------- |
115+
| `color` | `'gray' \| 'red'` | `'gray'` | アイテムの配色。`red` を指定すると危険操作向けに `text-supportDanger` を適用する。 |
116+
| `onClick` | `(event: MouseEvent<HTMLButtonElement>) => void` | `undefined` | アイテム選択時のコールバック。実行前にメニューを自動で閉じる。 |
117+
| `children` | `ReactNode` | - | ボタン内に表示する内容。テキスト、アイコン、複合レイアウトに対応する。 |
118118

119119
## 状態とスタイル
120120

121121
### サイズバリエーション
122122

123-
| `size` | 高さ・余白 | タイポグラフィ | アイコンサイズ |
124-
| ------ | ---------- | -------------- | -------------- |
125-
| `'x-small'` | `h-6 px-2`（ターゲットボタンの場合は `p-1`） | `typography-label12regular` | `small` |
126-
| `'small'` | `h-6 px-2` | `typography-label14regular` | `small` |
127-
| `'medium'` | `h-8 px-4` | `typography-label14regular` | `small` |
128-
| `'large'` | `h-10 px-4` | `typography-label16regular` | `medium` |
123+
| `size` | 高さ・余白 | タイポグラフィ | アイコンサイズ |
124+
| ----------- | -------------------------------------------- | --------------------------- | -------------- |
125+
| `'x-small'` | `h-6 px-2`（ターゲットボタンの場合は `p-1`） | `typography-label12regular` | `small` |
126+
| `'small'` | `h-6 px-2` | `typography-label14regular` | `small` |
127+
| `'medium'` | `h-8 px-4` | `typography-label14regular` | `small` |
128+
| `'large'` | `h-10 px-4` | `typography-label16regular` | `medium` |
129129

130130
### バリアントスタイル
131131

@@ -247,6 +247,6 @@ const PortalizedDropdown = () => {
247247

248248
## 更新履歴
249249

250-
| 日付 | 内容 | 担当者 |
251-
| ---- | ---- | ------ |
252-
| 2025-12-03 08:55 JST | Dropdown仕様書を新規作成し、Props・使用例・アクセシビリティを整理 | - |
250+
| 日付 | 内容 | 担当者 |
251+
| -------------------- | ----------------------------------------------------------------- | ------ |
252+
| 2025-12-03 08:55 JST | Dropdown仕様書を新規作成し、Props・使用例・アクセシビリティを整理 | - |

0 commit comments

Comments
 (0)