Skip to content

Commit 4533f0b

Browse files
quqjpquqjp
committed
fix lint
1 parent e48307a commit 4533f0b

File tree

1 file changed

+26
-26
lines changed

1 file changed

+26
-26
lines changed

‎docs/component/select-sort-specification.md‎

Lines changed: 26 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -65,34 +65,34 @@ export const SortableHeader = () => {
6565

6666
### 必須プロパティ
6767

68-
| プロパティ | 型 | 説明 |
69-
| ---------- | -------------- | ------------------------------------------------------------------------------------ |
70-
| `label` | `string` | トリガーボタン内に表示する列名。長い文は自動でトランケートされるため 1 行で収まる文言を推奨する。 |
71-
| `sortOrder` | `SortOrder` | 現在の並び替え方向。`'ascend'` / `'descend'` / `null` のいずれかで状態を制御する。 |
68+
| プロパティ | 型 | 説明 |
69+
| ----------- | ----------- | ------------------------------------------------------------------------------------------------- |
70+
| `label` | `string` | トリガーボタン内に表示する列名。長い文は自動でトランケートされるため 1 行で収まる文言を推奨する。 |
71+
| `sortOrder` | `SortOrder` | 現在の並び替え方向。`'ascend'` / `'descend'` / `null` のいずれかで状態を制御する。 |
7272

7373
### オプションプロパティ
7474

75-
| プロパティ | 型 | デフォルト値 | 説明 |
76-
| ----------------- | ------------------------------------ | ------------- | ------------------------------------------------------------------------------------ |
77-
| `size` | `'x-small' \| 'small' \| 'medium' \| 'large'` | `'medium'` | トリガーボタンとドロップダウンの高さ・タイポグラフィを切り替える。 |
78-
| `variant` | `'outline' \| 'text'` | `'outline'` | `@zenkigen-inc/component-theme` の `buttonColors` を用いた見た目のバリエーション。 |
79-
| `width` | `CSSProperties['width']` | `undefined` | ラッパー要素の幅。省略時は内容幅に合わせる。 |
80-
| `isDisabled` | `boolean` | `false` | `true` の場合は入力不可にし、開閉や項目クリックを無効化する。 |
81-
| `isSortKey` | `boolean` | `false` | 対象列が現在のソートキーであるかを示すフラグ。`true` で選択状態のスタイルと矢印アイコンを表示する。 |
82-
| `onChange` | `(value: SortOrder) => void` | `undefined` | 並び替え方向を選択したときに発火するコールバック。`value` に `'ascend'` または `'descend'` が渡る。 |
83-
| `onClickDeselect` | `() => void` | `undefined` | ドロップダウン最下段の「選択解除」ボタンを押したときに呼び出されるコールバック。 |
75+
| プロパティ | 型 | デフォルト値 | 説明 |
76+
| ----------------- | --------------------------------------------- | ------------ | --------------------------------------------------------------------------------------------------- |
77+
| `size` | `'x-small' \| 'small' \| 'medium' \| 'large'` | `'medium'` | トリガーボタンとドロップダウンの高さ・タイポグラフィを切り替える。 |
78+
| `variant` | `'outline' \| 'text'` | `'outline'` | `@zenkigen-inc/component-theme` の `buttonColors` を用いた見た目のバリエーション。 |
79+
| `width` | `CSSProperties['width']` | `undefined` | ラッパー要素の幅。省略時は内容幅に合わせる。 |
80+
| `isDisabled` | `boolean` | `false` | `true` の場合は入力不可にし、開閉や項目クリックを無効化する。 |
81+
| `isSortKey` | `boolean` | `false` | 対象列が現在のソートキーであるかを示すフラグ。`true` で選択状態のスタイルと矢印アイコンを表示する。 |
82+
| `onChange` | `(value: SortOrder) => void` | `undefined` | 並び替え方向を選択したときに発火するコールバック。`value` に `'ascend'` または `'descend'` が渡る。 |
83+
| `onClickDeselect` | `() => void` | `undefined` | ドロップダウン最下段の「選択解除」ボタンを押したときに呼び出されるコールバック。 |
8484

8585
### 特殊機能の詳細
8686

8787
#### SortOrder 型
8888

8989
`SortOrder` は `packages/component-ui/src/select-sort/type.ts` で定義され、下表の 3 値を取る。
9090

91-
| 値 | 説明 |
92-
| ---------- | -------------------------------------------- |
93-
| `'ascend'` | 昇順ソートを指示する。ドロップダウンにチェックが入り、上向き矢印アイコンを表示する。 |
94-
| `'descend'` | 降順ソートを指示する。下向き矢印アイコンを表示する。 |
95-
| `null` | 並び替え未選択の状態。`isSortKey` が `false` ならケアアイコンを表示する。 |
91+
| 値 | 説明 |
92+
| ----------- | ------------------------------------------------------------------------------------ |
93+
| `'ascend'` | 昇順ソートを指示する。ドロップダウンにチェックが入り、上向き矢印アイコンを表示する。 |
94+
| `'descend'` | 降順ソートを指示する。下向き矢印アイコンを表示する。 |
95+
| `null` | 並び替え未選択の状態。`isSortKey` が `false` ならケアアイコンを表示する。 |
9696

9797
#### 選択解除ボタン
9898

@@ -106,12 +106,12 @@ export const SortableHeader = () => {
106106

107107
### サイズバリエーション
108108

109-
| サイズ | ボタン高さ | 横方向パディング | ラベルタイポグラフィ | アイコンサイズ | ドロップダウン位置 |
110-
| ----------- | ---------- | ---------------- | ---------------------------------- | --------------------- | ------------------ |
111-
| `x-small` | `h-6` (24px)| `px-2` | `typography-label12regular` | `small` | `top-7` |
112-
| `small` | `h-6` (24px)| `px-2` | `typography-label14regular` | `small` | `top-7` |
113-
| `medium` | `h-8` (32px)| `px-4` | `typography-label14regular` | `small` | `top-9` |
114-
| `large` | `h-10`(40px)| `px-4` | `typography-label16regular` | `medium` | `top-11` |
109+
| サイズ | ボタン高さ | 横方向パディング | ラベルタイポグラフィ | アイコンサイズ | ドロップダウン位置 |
110+
| --------- | ------------ | ---------------- | --------------------------- | -------------- | ------------------ |
111+
| `x-small` | `h-6` (24px) | `px-2` | `typography-label12regular` | `small` | `top-7` |
112+
| `small` | `h-6` (24px) | `px-2` | `typography-label14regular` | `small` | `top-7` |
113+
| `medium` | `h-8` (32px) | `px-4` | `typography-label14regular` | `small` | `top-9` |
114+
| `large` | `h-10`(40px) | `px-4` | `typography-label16regular` | `medium` | `top-11` |
115115

116116
ラベルテキストは `truncate` を付与しており、`x-small` のみ `mr-1`、それ以外は `mr-2` の余白でアイコンとの距離を確保する。
117117

@@ -255,6 +255,6 @@ const [order, setOrder] = useState<SortOrder>(null);
255255

256256
## 更新履歴
257257

258-
| 日付 | 内容 | 担当者 |
259-
| ------------------- | -------------------------------------- | ------ |
258+
| 日付 | 内容 | 担当者 |
259+
| -------------------- | ------------------------------------------ | ------ |
260260
| 2025-12-03 09:17 JST | Select Sort コンポーネント仕様書を新規作成 | - |

0 commit comments

Comments
 (0)