ksk-design-system 1.70.0 → 2.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/AGENTS.md +2 -1
- package/CLAUDE.md +2 -1
- package/MIGRATION.md +81 -18
- package/README.md +15 -0
- package/bin/lint.js +51 -18
- package/contracts/components.json +42 -14
- package/contracts/deprecations.json +34 -12
- package/contracts/product-theme-overrides.json +9 -3
- package/contracts/token-hex-cache.json +1 -1
- package/dist/index.js +2489 -2160
- package/dist/native/ui.js +465 -452
- package/dist/types/components/patterns/coach-mark-overlay.d.ts +24 -1
- package/dist/types/components/patterns/responsive-overlay-frame.d.ts +75 -3
- package/dist/types/components/ui/dialog.d.ts +4 -3
- package/dist/types/components/ui/pill-toggle.d.ts +15 -1
- package/dist/types/components/ui/progress-ring.d.ts +26 -3
- package/dist/types/components/ui/sheet.d.ts +3 -2
- package/dist/types/index.d.ts +1 -0
- package/dist/types/lib/compose-ref.d.ts +30 -0
- package/dist/types/lib/described-by.d.ts +36 -0
- package/dist/types/lib/modal-stack.d.ts +50 -2
- package/dist/types/lib/use-value-length.d.ts +1 -1
- package/dist/types/native/components/PillToggle.d.ts +6 -1
- package/dist/types/native/components/ProgressRing.d.ts +15 -1
- package/package.json +4 -4
- package/src/components/COMPONENT_LOOKUP.md +6 -6
- package/src/styles/glass.css +61 -5
- package/src/styles/product-theme.css +18 -0
- package/src/styles/sheet-keyboard.css +100 -0
- package/src/styles/source-safelist.css +2 -0
package/AGENTS.md
CHANGED
|
@@ -50,8 +50,9 @@ UI を書く前に必ず確認すること:
|
|
|
50
50
|
- [ ] **インタラクティブな部品は a11y 既定値を自分で持つか**。`accessibilityRole` と、状態(selected / disabled / checked)の `accessibilityState` 反映は**呼び出し側の義務にしない**。呼び出し側の明示値が優先される形で部品が既定を持つ(#311: Chip が role を持たず、スクリーンリーダーにただのテキストとして扱われた)
|
|
51
51
|
- [ ] **モードを持つ部品(単一/複数選択・開閉など)の既定値は、間違えて使うと壊れる側にしていないか**。既定で済ませた呼び出しが静かに誤動作する組み合わせ(例: ChipSelector の既定 `multiple=true` を単一選択のつもりで使うと、押しても values[0] が現在値のまま切り替わらない)は、既定を安全側へ倒すか、必須 prop にして省略をコンパイルエラーにする
|
|
52
52
|
- [ ] **名前付きスロット(meta / description 等)は「何を・どこに置くか」を JSDoc に書いたか**。書いていないスロットは consumer に流用され、想定外の位置崩れになる(#309: ActionTile の meta に選択チェックを入れられ、左下に浮いた)
|
|
53
|
+
- [ ] **内部で要素を掴む部品は、consumer の `ref` を `useComposedRef` で合成したか**(`src/lib/compose-ref.ts`)。自前で `typeof ref === "function" ? ref(node) : ...` と書くと consumer のコールバック ref が返した cleanup を捨てる。インラインのアロー ref も毎 render で identity が変わり detach → attach を繰り返す(#510: dialog / responsive-overlay-frame / use-value-length / quick-action-grid の4か所で同じ型を出した)
|
|
53
54
|
|
|
54
|
-
いずれも lint では拾えない設計判断なので、レビューではこの
|
|
55
|
+
いずれも lint では拾えない設計判断なので、レビューではこの5点を明示的に見る。
|
|
55
56
|
|
|
56
57
|
---
|
|
57
58
|
|
package/CLAUDE.md
CHANGED
|
@@ -50,8 +50,9 @@ UI を書く前に必ず確認すること:
|
|
|
50
50
|
- [ ] **インタラクティブな部品は a11y 既定値を自分で持つか**。`accessibilityRole` と、状態(selected / disabled / checked)の `accessibilityState` 反映は**呼び出し側の義務にしない**。呼び出し側の明示値が優先される形で部品が既定を持つ(#311: Chip が role を持たず、スクリーンリーダーにただのテキストとして扱われた)
|
|
51
51
|
- [ ] **モードを持つ部品(単一/複数選択・開閉など)の既定値は、間違えて使うと壊れる側にしていないか**。既定で済ませた呼び出しが静かに誤動作する組み合わせ(例: ChipSelector の既定 `multiple=true` を単一選択のつもりで使うと、押しても values[0] が現在値のまま切り替わらない)は、既定を安全側へ倒すか、必須 prop にして省略をコンパイルエラーにする
|
|
52
52
|
- [ ] **名前付きスロット(meta / description 等)は「何を・どこに置くか」を JSDoc に書いたか**。書いていないスロットは consumer に流用され、想定外の位置崩れになる(#309: ActionTile の meta に選択チェックを入れられ、左下に浮いた)
|
|
53
|
+
- [ ] **内部で要素を掴む部品は、consumer の `ref` を `useComposedRef` で合成したか**(`src/lib/compose-ref.ts`)。自前で `typeof ref === "function" ? ref(node) : ...` と書くと consumer のコールバック ref が返した cleanup を捨てる。インラインのアロー ref も毎 render で identity が変わり detach → attach を繰り返す(#510: dialog / responsive-overlay-frame / use-value-length / quick-action-grid の4か所で同じ型を出した)
|
|
53
54
|
|
|
54
|
-
いずれも lint では拾えない設計判断なので、レビューではこの
|
|
55
|
+
いずれも lint では拾えない設計判断なので、レビューではこの5点を明示的に見る。
|
|
55
56
|
|
|
56
57
|
---
|
|
57
58
|
|
package/MIGRATION.md
CHANGED
|
@@ -17,11 +17,12 @@ npx ksk-ds check-migration ./src
|
|
|
17
17
|
|
|
18
18
|
| API | 使われ方 | 移行先 | 非推奨にした版 | 削除予定 |
|
|
19
19
|
| --- | --- | --- | --- | --- |
|
|
20
|
-
| `ListItem.interactive` | `<ListItem interactive>` | href または onClick を ListItem 自体へ渡す | 1.46.0 |
|
|
21
|
-
| `ChipSelector.multiple` | `<ChipSelector multiple>` | selectionMode(multiple={false} は selectionMode="single"、multiple は selectionMode="multiple") |
|
|
22
|
-
| `PillToggle.onValueChange` | `<PillToggle onValueChange>` | onChange | 1.49.0 |
|
|
23
|
-
| `ProductCard.deliveryLabel` | `<ProductCard deliveryLabel>` | なし(v1.30.0 以降は描画されないため、渡している箇所は削除する) | 1.30.1 |
|
|
24
|
-
| `Progress.tone` | `<Progress tone>` | variant | 1.40.1 |
|
|
20
|
+
| `ListItem.interactive` | `<ListItem interactive>` | href または onClick を ListItem 自体へ渡す | 1.46.0 | v3.0.0 |
|
|
21
|
+
| `ChipSelector.multiple` | `<ChipSelector multiple>` | selectionMode(multiple={false} は selectionMode="single"、multiple は selectionMode="multiple") | 2.0.0 | v3.0.0 |
|
|
22
|
+
| `PillToggle.onValueChange` | `<PillToggle onValueChange>` | onChange | 1.49.0 | v3.0.0 |
|
|
23
|
+
| `ProductCard.deliveryLabel` | `<ProductCard deliveryLabel>` | なし(v1.30.0 以降は描画されないため、渡している箇所は削除する) | 1.30.1 | v3.0.0 |
|
|
24
|
+
| `Progress.tone` | `<Progress tone>` | variant | 1.40.1 | v3.0.0 |
|
|
25
|
+
| `ProgressRing.thickness` | `<ProgressRing thickness>` | strokeWidth(Web の同名 prop と語彙を揃えた。値の意味・既定値 6 は同じ) | 2.0.0 | v3.0.0 |
|
|
25
26
|
|
|
26
27
|
各エントリの補足:
|
|
27
28
|
|
|
@@ -30,6 +31,7 @@ npx ksk-ds check-migration ./src
|
|
|
30
31
|
- **PillToggle.onValueChange**(issue #264) — 後方互換エイリアス。onChange を併せて渡した場合は onChange が優先される。 実装: src/components/ui/pill-toggle.tsx
|
|
31
32
|
- **ProductCard.deliveryLabel** — 既存 consumer の型互換のためだけに残している no-op prop。 実装: src/components/patterns/commerce/product-card.tsx
|
|
32
33
|
- **Progress.tone** — React Native 版のみ。既存 RN consumer 向けの互換。 実装: src/native/components/Progress.tsx
|
|
34
|
+
- **ProgressRing.thickness**(issue #495) — Native だけが持っていた別名。同じ「線の太さ」を Web は strokeWidth と呼んでいたため、両方を触る実装者が読み替えを強いられていた。両方渡された場合は strokeWidth を優先する。 実装: src/native/components/ProgressRing.tsx
|
|
33
35
|
|
|
34
36
|
削除は「全消費リポで `check-migration` の残件が 0」を条件に、`削除予定` のメジャーリリースで行います。
|
|
35
37
|
|
|
@@ -37,9 +39,31 @@ npx ksk-ds check-migration ./src
|
|
|
37
39
|
|
|
38
40
|
---
|
|
39
41
|
|
|
40
|
-
## v2.0
|
|
42
|
+
## v2.0.0
|
|
41
43
|
|
|
42
|
-
|
|
44
|
+
**破壊変更は peerDependencies の要件変更 1 点のみ。** 識別子 / prop の削除・rename は
|
|
45
|
+
無いので、コードの書き換えも codemod も要りません。
|
|
46
|
+
|
|
47
|
+
| 項目 | v1 系 | v2.0.0 |
|
|
48
|
+
|---|---|---|
|
|
49
|
+
| `react` / `react-dom` | `^18.0.0 \|\| ^19.0.0` | `^19.0.0` |
|
|
50
|
+
| `react-native` | `>=0.74.0` | `>=0.78.0` |
|
|
51
|
+
|
|
52
|
+
- **React 19 / RN 0.78 以上を使っている場合: 対応不要**。`npm install ksk-design-system@2`
|
|
53
|
+
で上げるだけで、API は v1.70 系+今回の機能追加のまま
|
|
54
|
+
- **React 18 のまま使いたい場合**: `ksk-design-system@^1` に固定してください。
|
|
55
|
+
v1 系に React 19 専用化は入っていません
|
|
56
|
+
|
|
57
|
+
major にした理由は、`^1.x` を指定している React 18 利用者が自動で拾うと
|
|
58
|
+
インストールが失敗しうるため(実装は元から React 19 の ref-as-prop 前提で、
|
|
59
|
+
React 18 では `ref` が無言で無視されていた)。詳細は下の
|
|
60
|
+
「peerDependencies の要件変更」節と issue #502 を参照。
|
|
61
|
+
|
|
62
|
+
なお v1 系で非推奨にした prop(`ListItem.interactive` ほか 5 件)は
|
|
63
|
+
**v2.0.0 では削除していません**。削除は「全消費リポで `check-migration` の
|
|
64
|
+
残件が 0」を条件に v3.0.0 で行います。
|
|
65
|
+
|
|
66
|
+
## v3.0 (未リリース)
|
|
43
67
|
|
|
44
68
|
破壊変更を入れる際にはここに以下を書く:
|
|
45
69
|
1. 削除した識別子 / prop の一覧(rename テーブル)
|
|
@@ -51,9 +75,48 @@ npx ksk-ds check-migration ./src
|
|
|
51
75
|
|
|
52
76
|
---
|
|
53
77
|
|
|
78
|
+
## peerDependencies の要件変更(インストールに影響)
|
|
79
|
+
|
|
80
|
+
### peerDependencies を React 19 のみに狭める(issue #502)
|
|
81
|
+
|
|
82
|
+
**インストール要件が変わります。** `peerDependencies` を実装の実態に合わせました:
|
|
83
|
+
|
|
84
|
+
| 依存 | 変更前 | 変更後 |
|
|
85
|
+
|---|---|---|
|
|
86
|
+
| `react` | `^18.0.0 \|\| ^19.0.0` | `^19.0.0` |
|
|
87
|
+
| `react-dom` | `^18.0.0 \|\| ^19.0.0` | `^19.0.0` |
|
|
88
|
+
| `react-native` | `>=0.74.0` | `>=0.78.0` |
|
|
89
|
+
|
|
90
|
+
理由: `Input` / `Textarea` / `Dialog` / `QuickActionGrid` などは React 19 の
|
|
91
|
+
ref-as-prop(関数コンポーネントが `ref` を通常の prop として受け取る仕様)で書かれており、
|
|
92
|
+
`forwardRef` を一切使っていません。React 18 でこれらに `ref` を渡すと
|
|
93
|
+
`Function components cannot be given refs` の警告が出て `ref` は呼ばれません。
|
|
94
|
+
つまり `^18.0.0` の宣言は**もともと実態と合っていませんでした**。今回は嘘の互換宣言を消す
|
|
95
|
+
だけで、React 19 の利用者にとってのコード変更はありません。
|
|
96
|
+
|
|
97
|
+
`react-native` を `>=0.78.0` にしたのは、React 19 を同梱する最初の RN が 0.78 のため
|
|
98
|
+
(0.74〜0.77 は React 18 系で、`react: ^19.0.0` と両立しません)。
|
|
99
|
+
|
|
100
|
+
**移行手順**
|
|
101
|
+
|
|
102
|
+
- React 19 / RN 0.78 以上を使っている場合: **対応不要**(DS を上げるだけ)
|
|
103
|
+
- React 18 のまま使いたい場合: `ksk-design-system@^1` に固定するか、React 19 へ上げてください。
|
|
104
|
+
DS 側に React 18 互換の実装を残す予定はありません
|
|
105
|
+
|
|
106
|
+
なお `examples/native-sandbox`(リポジトリ内の開発用サンドボックス。npm 配布物には含まれず、
|
|
107
|
+
DS を npm から install もしません)は react-native-web 0.19 の都合で React 18 のままです。
|
|
108
|
+
消費側の要件には影響しません。
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
**リリース種別**: **v2.0.0(major)で公開**。ランタイム API は変わらず React 19 利用者には
|
|
112
|
+
無影響だが、`^1.x` を指定している React 18 / RN 0.74〜0.77 の利用者が自動で拾うと
|
|
113
|
+
install に失敗しうるため、SemVer どおり major に倒した。
|
|
114
|
+
|
|
115
|
+
---
|
|
116
|
+
|
|
54
117
|
## v1 系内の minor 変更(参考)
|
|
55
118
|
|
|
56
|
-
###
|
|
119
|
+
### v1.70.0 — `ResponsiveOverlayFrame` に `preset="plain"` を追加(issue #486)
|
|
57
120
|
|
|
58
121
|
`side="bottom"` の経路は必ず `BottomSheetFrame` の preset を通るため、
|
|
59
122
|
`sm:`(640px 以上)でフロートカード化し、内側 padding も落ちる(`p-0`)。
|
|
@@ -99,7 +162,7 @@ npx ksk-ds check-migration ./src
|
|
|
99
162
|
- `desktopPosition` は `"center"` / `"top"` のみ。`"fullscreen"` は plain の
|
|
100
163
|
幅指定と噛み合わないため型で禁止している。
|
|
101
164
|
|
|
102
|
-
###
|
|
165
|
+
### v1.69.0 — `ResponsiveOverlayFrame` が float / float-glass シートを受けられるようになった(issue #479)
|
|
103
166
|
|
|
104
167
|
#472 で入った `ResponsiveOverlayFrame` は内部で `BottomSheetFrame`(`side="bottom"` 固定)を
|
|
105
168
|
使うため、左右・下に余白を持つカード型のシート(`side="float"` / `"float-glass"`)を
|
|
@@ -163,7 +226,7 @@ global CSS(`!important`)を残す必要があった。
|
|
|
163
226
|
`side="bottom"` 専用なので、`snapPoints` と float 系の併用は snap もデスクトップ変換も
|
|
164
227
|
効かない「何も起きない」組み合わせになる。どちらかに寄せること。
|
|
165
228
|
|
|
166
|
-
###
|
|
229
|
+
### v1.67.0 — `ResponsiveOverlayFrame` 追加(`BottomSheetFrame` + 消費側デスクトップ CSS からの移行 / issue #472)
|
|
167
230
|
|
|
168
231
|
`BottomSheetFrame` はモバイルの preset(`mobile-full` / `mobile-page` /
|
|
169
232
|
`mobile-form`)を持つ一方でデスクトップでは中央モーダルにならず、消費側は
|
|
@@ -235,7 +298,7 @@ global CSS で `position` / `transform` / `width` / `max-height` / `radius` を
|
|
|
235
298
|
既存の `BottomSheetFrame` / `ResponsiveDialogContent` は非推奨ではない
|
|
236
299
|
(モバイル専用面・preset 不要の面では引き続きそのまま使う)。
|
|
237
300
|
|
|
238
|
-
###
|
|
301
|
+
### v1.62.0 — `typescript` が必須依存から optional peer dependency になった(issue #409)
|
|
239
302
|
|
|
240
303
|
CLI の1ルール(P046)のためだけに typescript(24MB)が全 consumer の
|
|
241
304
|
node_modules に入っていたのを解消した。install サイズが減り、`ksk-ds lint` の
|
|
@@ -248,7 +311,7 @@ node_modules に入っていたのを解消した。install サイズが減り
|
|
|
248
311
|
typescript を追加すること
|
|
249
312
|
|
|
250
313
|
|
|
251
|
-
###
|
|
314
|
+
### v1.62.0 — `ksk-ds lint` の severity 語彙が `warn` → `warning` に統一(要確認)
|
|
252
315
|
|
|
253
316
|
`--format json` の `results[].severity` と text 出力の severity 表記が、これまで
|
|
254
317
|
`"warn"` と `"warning"` で不統一だった(contract の `contracts/rules.json` は
|
|
@@ -272,7 +335,7 @@ text 出力の要約行も `0 error / 3 warn` → `0 error / 3 warning` に変
|
|
|
272
335
|
- **未知のオプションはエラー終了**(従来は黙って捨てられ、CI に書いた
|
|
273
336
|
`--strict` が無言で効かないまま緑になっていた)
|
|
274
337
|
|
|
275
|
-
###
|
|
338
|
+
### v1.62.0 — `ksk-ds lint` の escape がルール単位・行単位で書けるようになった
|
|
276
339
|
|
|
277
340
|
ファイル全体・全ルールを無期限に外す `// ksk-ds-allow-custom-ui: 理由` は
|
|
278
341
|
後方互換で残るが**非推奨**。新規はルール単位を使う(issue #405):
|
|
@@ -288,7 +351,7 @@ ignore は効かない。あわせて escape マーカーは**文字列リテラ
|
|
|
288
351
|
無効化されていた)。既に short な理由を書いていたファイルは lint が復活するので、
|
|
289
352
|
理由を書き足すか違反を直すこと。
|
|
290
353
|
|
|
291
|
-
###
|
|
354
|
+
### v1.62.0 — 自動生成物と DS 自身のトークン CSS を lint 対象外にした
|
|
292
355
|
|
|
293
356
|
- 先頭 12 行に自動生成マーカー(`AUTO-GENERATED` / `DO NOT EDIT` / `自動生成` 等)を
|
|
294
357
|
持つファイルは全ルールを skip する(issue #408)。直す先は生成物ではなく生成元。
|
|
@@ -296,7 +359,7 @@ ignore は効かない。あわせて escape マーカーは**文字列リテラ
|
|
|
296
359
|
トークン定義 CSS を対象外にする(issue #407)。`vendor/ksk-design-system/**` のように
|
|
297
360
|
DS を再梱包しているリポで P049 が大量に出ていたのが解消する。
|
|
298
361
|
|
|
299
|
-
###
|
|
362
|
+
### v1.62.0 — `Footer` の `paymentIcons` 既定値が空になった(挙動変更)
|
|
300
363
|
|
|
301
364
|
`Footer` は `paymentIcons` を省略すると `["VISA", "Master", "JCB", "AmEx", "PayPay", "LINE Pay"]`
|
|
302
365
|
の決済バッジを既定で描画していた。EC 以外のプロダクトでも「取り扱っていない決済手段」が
|
|
@@ -313,7 +376,7 @@ ignore は効かない。あわせて escape マーカーは**文字列リテラ
|
|
|
313
376
|
|
|
314
377
|
`paymentIcons` を明示的に渡していた箇所は影響なし。
|
|
315
378
|
|
|
316
|
-
###
|
|
379
|
+
### v1.60.0 — `postinstall` による AI ルールファイル自動設置を廃止(要確認)
|
|
317
380
|
|
|
318
381
|
これまで `npm install ksk-design-system` の `postinstall` フックが、消費側の
|
|
319
382
|
プロジェクトルートに `CLAUDE.md` / `AGENTS.md`(`node_modules` 内の DS ルールを指す
|
|
@@ -334,7 +397,7 @@ npx ksk-ds init --force # 既存ファイルを最新テンプレートで上
|
|
|
334
397
|
`postinstall` を持つ限りバージョンを上げても判定が引き継がれる。あわせて
|
|
335
398
|
`INIT_CWD` 参照も削除し、書き込み先はコマンドを実行したディレクトリに固定した。
|
|
336
399
|
|
|
337
|
-
###
|
|
400
|
+
### v1.49.0 — PillToggle の onChange/onValueChange 統一(破壊変更なし)
|
|
338
401
|
|
|
339
402
|
`PillToggle` のみ他コンポーネント(Switch 等の native 系を除く)と異なり `onValueChange`
|
|
340
403
|
を主 API として案内していたため、`onChange` に統一した(issue #264⑥)。
|
|
@@ -351,7 +414,7 @@ npx ksk-ds init --force # 既存ファイルを最新テンプレートで上
|
|
|
351
414
|
`onChange` と `onValueChange` を両方渡した場合は `onChange` が優先される。
|
|
352
415
|
`onValueChange` は将来のメジャーバージョンで削除予定。
|
|
353
416
|
|
|
354
|
-
###
|
|
417
|
+
### v1.49.0 — Tailwind 4.1 以上が必要(要確認)
|
|
355
418
|
|
|
356
419
|
preset に DS 内部ユーティリティの safelist(`src/styles/source-safelist.css`・自動生成)を同梱した(issue #258)。
|
|
357
420
|
これにより、消費側の `@source ".../ksk-design-system/dist"` の設定漏れやパスずれで
|
package/README.md
CHANGED
|
@@ -42,6 +42,19 @@ Tailwind 4.1 で導入された `@source inline()` を使うため)
|
|
|
42
42
|
|
|
43
43
|
## 🚀 使い方
|
|
44
44
|
|
|
45
|
+
### 動作要件
|
|
46
|
+
|
|
47
|
+
**React 19 以上が必須です。** コンポーネントは React 19 の ref-as-prop(関数コンポーネントが
|
|
48
|
+
`ref` を通常の prop として受け取る仕様)を前提に実装しているため、React 18 では
|
|
49
|
+
`Function components cannot be given refs` の警告が出て `ref` が届きません(issue #502)。
|
|
50
|
+
|
|
51
|
+
| 依存 | 必要バージョン |
|
|
52
|
+
|---|---|
|
|
53
|
+
| react / react-dom | `^19.0.0` |
|
|
54
|
+
| react-native(Native を使う場合) | `>=0.78.0`(React 19 を同梱する最初の RN) |
|
|
55
|
+
| tailwindcss(Web を使う場合) | `^3.4.17 \|\| ^4.1.0` |
|
|
56
|
+
| typescript | `>=5.0.0` |
|
|
57
|
+
|
|
45
58
|
### Web (Next.js / Vite / 任意の React 環境)
|
|
46
59
|
|
|
47
60
|
```bash
|
|
@@ -392,6 +405,8 @@ import { BottomTabBar } from "ksk-design-system"
|
|
|
392
405
|
|
|
393
406
|
### React Native / Expo
|
|
394
407
|
|
|
408
|
+
React Native は **0.78 以上**(React 19 を同梱する最初の RN)が必要です。
|
|
409
|
+
|
|
395
410
|
`ksk-design-system/native/ui` から直接 RN 用コンポーネント export(134 個)を import できます。iOS 26 の **Liquid Glass** にも対応:
|
|
396
411
|
|
|
397
412
|
```tsx
|
package/bin/lint.js
CHANGED
|
@@ -394,31 +394,48 @@ export async function runLintCli(argv, { cwd = process.cwd(), pkgRoot = resolve(
|
|
|
394
394
|
// 手書きファイルにマーカーを書けば lint を丸ごと回避できる構造のため、
|
|
395
395
|
// 何が skip されたかを常に可視化して悪用をレビューで見つけられるようにする)。
|
|
396
396
|
const generatedSkipped = []
|
|
397
|
+
// 列挙後に消えて読めなかったファイルも、generatedSkipped と同じ理由で
|
|
398
|
+
// 無言にしない(issue #498)。黙って飛ばすと、その1ファイルの違反が
|
|
399
|
+
// exit 0 のまま検査から抜け落ちたことに気づけない。
|
|
400
|
+
const missingSkipped = []
|
|
397
401
|
|
|
398
402
|
for (const file of files) {
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
findings.push(
|
|
409
|
-
...lintCssFile(file, cwd, cssRules, productThemeContract, dsCssIdentity, pkgRoot),
|
|
410
|
-
)
|
|
403
|
+
// 列挙してから読むまでの間にファイルが消えることがある(issue #498)。
|
|
404
|
+
// watch ビルドや生成スクリプトと同時に lint を回すと現実に起きるため、
|
|
405
|
+
// ENOENT のときだけ静かに飛ばす(他のエラーは握り潰さず投げる)。
|
|
406
|
+
// lintFile / lintCssFile も内部で同じファイルを読み直すので、
|
|
407
|
+
// 1 ファイル分の処理をまとめて包む。
|
|
408
|
+
try {
|
|
409
|
+
if (isAutoGeneratedSource(readFileSync(file, "utf8"))) {
|
|
410
|
+
generatedSkipped.push(normalize(relative(cwd, file)))
|
|
411
|
+
continue
|
|
411
412
|
}
|
|
412
|
-
|
|
413
|
+
if (CSS_EXTENSIONS.has(extname(file))) {
|
|
414
|
+
// productThemeContract が読めない環境(contracts/product-theme-overrides.json
|
|
415
|
+
// が無い)でも P050 は動かせるので、CSS ルールが 1 件でもあれば走査する
|
|
416
|
+
// (P049 側は contract が null なら lintCssFile 内で個別に skip する)。
|
|
417
|
+
if (cssRules.length > 0) {
|
|
418
|
+
findings.push(
|
|
419
|
+
...lintCssFile(file, cwd, cssRules, productThemeContract, dsCssIdentity, pkgRoot),
|
|
420
|
+
)
|
|
421
|
+
}
|
|
422
|
+
continue
|
|
423
|
+
}
|
|
424
|
+
findings.push(
|
|
425
|
+
...lintFile(file, cwd, sourceRules, { ...options, inspectCardChildSpacing, pkgRoot }),
|
|
426
|
+
)
|
|
427
|
+
} catch (error) {
|
|
428
|
+
if (error && error.code === "ENOENT") {
|
|
429
|
+
missingSkipped.push(normalize(relative(cwd, file)))
|
|
430
|
+
continue
|
|
431
|
+
}
|
|
432
|
+
throw error
|
|
413
433
|
}
|
|
414
|
-
findings.push(
|
|
415
|
-
...lintFile(file, cwd, sourceRules, { ...options, inspectCardChildSpacing, pkgRoot }),
|
|
416
|
-
)
|
|
417
434
|
}
|
|
418
435
|
|
|
419
436
|
const summary = summarize(findings)
|
|
420
437
|
if (options.format === "json") {
|
|
421
|
-
console.log(JSON.stringify({ results: findings, summary, generatedSkipped }, null, 2))
|
|
438
|
+
console.log(JSON.stringify({ results: findings, summary, generatedSkipped, missingSkipped }, null, 2))
|
|
422
439
|
} else {
|
|
423
440
|
printText(findings, summary)
|
|
424
441
|
if (generatedSkipped.length > 0) {
|
|
@@ -428,6 +445,13 @@ export async function runLintCli(argv, { cwd = process.cwd(), pkgRoot = resolve(
|
|
|
428
445
|
(generatedSkipped.length > 5 ? ` ほか ${generatedSkipped.length - 5} 件` : ""),
|
|
429
446
|
)
|
|
430
447
|
}
|
|
448
|
+
if (missingSkipped.length > 0) {
|
|
449
|
+
console.log(
|
|
450
|
+
`[ksk-ds lint] 走査中に読めなくなった ${missingSkipped.length} ファイルを skip: ` +
|
|
451
|
+
missingSkipped.slice(0, 5).join(", ") +
|
|
452
|
+
(missingSkipped.length > 5 ? ` ほか ${missingSkipped.length - 5} 件` : ""),
|
|
453
|
+
)
|
|
454
|
+
}
|
|
431
455
|
}
|
|
432
456
|
|
|
433
457
|
if (summary.errors > 0) return 1
|
|
@@ -611,7 +635,16 @@ function collectTargetFiles(cwd, targets, options) {
|
|
|
611
635
|
function collect(abs, cwd, options, out) {
|
|
612
636
|
const rel = normalize(relative(cwd, abs))
|
|
613
637
|
if (shouldIgnorePath(rel, options)) return
|
|
614
|
-
|
|
638
|
+
// readdirSync で名前を得てから statSync するまでの間に消えることがある
|
|
639
|
+
// (issue #498。watch ビルドや生成スクリプトと同時に走らせたとき)。
|
|
640
|
+
// 列挙できなかったものは対象に入れない。他のエラーはそのまま投げる。
|
|
641
|
+
let stat
|
|
642
|
+
try {
|
|
643
|
+
stat = statSync(abs)
|
|
644
|
+
} catch (error) {
|
|
645
|
+
if (error && error.code === "ENOENT") return
|
|
646
|
+
throw error
|
|
647
|
+
}
|
|
615
648
|
if (stat.isDirectory()) {
|
|
616
649
|
for (const entry of readdirSync(abs)) {
|
|
617
650
|
collect(join(abs, entry), cwd, options, out)
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"meta": {
|
|
3
3
|
"name": "KSK Design System — Component Contracts",
|
|
4
|
-
"version": "
|
|
4
|
+
"version": "2.0.1",
|
|
5
5
|
"description": "全コンポーネントの構造化定義。バリアント・アクセシビリティ要件・使用ルールを機械可読形式で管理。",
|
|
6
6
|
"counts": {
|
|
7
7
|
"ui": 68,
|
|
@@ -272,7 +272,7 @@
|
|
|
272
272
|
"variants": [],
|
|
273
273
|
"accessibility": [
|
|
274
274
|
"Must pair with <Label>",
|
|
275
|
-
"native (src/native/components/CheckboxField.tsx, RadioGroup.tsx): accessibilityState に加え aria-checked / aria-disabled を既定で併記する(react-native-web 0.21 は accessibilityState を aria-* へ変換しないため。RN peerDependency >=0.
|
|
275
|
+
"native (src/native/components/CheckboxField.tsx, RadioGroup.tsx): accessibilityState に加え aria-checked / aria-disabled を既定で併記する(react-native-web 0.21 は accessibilityState を aria-* へ変換しないため。RN peerDependency >=0.78.0 の aria-* props を直接渡す)。行内の装飾用インナー Checkbox/丸印は aria-hidden も併記して二重の role=checkbox/radio を防ぐ"
|
|
276
276
|
],
|
|
277
277
|
"rules": [
|
|
278
278
|
"label を渡すと <label> でラップされ行全体がクリッカブルになる",
|
|
@@ -372,8 +372,10 @@
|
|
|
372
372
|
"safeArea(既定 true) で top/fullscreen の safe-area 回避を制御。false でオプトアウト",
|
|
373
373
|
"autoFocus は first-input / title / ref / false を指定可能",
|
|
374
374
|
"description prop は sr-only description を自動生成する",
|
|
375
|
+
"子として置いた DialogDescription は自動で aria-describedby に紐付く(#485)。呼び出し側で id / aria-describedby を明示した場合はそちらが優先。Description を置かないダイアログでは aria-describedby を出さない(Radix の Missing Description 警告抑制)",
|
|
375
376
|
"DialogTitle は level=\"page\"|\"section\"|\"card\" で見出しの役割を指定する(値は contracts/composition.json の textHierarchy と1対1)。未指定時は position=\"fullscreen\" 配下で page 相当、それ以外は従来の typo-heading-lg",
|
|
376
|
-
"native (src/native/components/Dialog.tsx): position=\"center\"(既定) / \"top\" / \"fullscreen\" を持ち、fullscreen は四辺・top は上端の safe-area を避ける。実測 inset は SafeAreaInsetsProvider から供給し、未供給なら回避量 0(従来どおり)"
|
|
377
|
+
"native (src/native/components/Dialog.tsx): position=\"center\"(既定) / \"top\" / \"fullscreen\" を持ち、fullscreen は四辺・top は上端の safe-area を避ける。実測 inset は SafeAreaInsetsProvider から供給し、未供給なら回避量 0(従来どおり)",
|
|
378
|
+
"modal な Dialog の content は aria-modal=\"true\" を出力する(modal={false} では出さない)。開いているモーダルの横断判定は useHasOpenModal() / useOpenModalCount() を使い、consumer 側で data-state 等の内部属性を直接読まない(#505)"
|
|
377
379
|
],
|
|
378
380
|
"variants": {
|
|
379
381
|
"position": [
|
|
@@ -411,9 +413,11 @@
|
|
|
411
413
|
"safeArea(既定 true) は上記2つの回避をまとめてオプトアウトする prop。他の side には効果なし",
|
|
412
414
|
"autoFocus は first-input / title / ref / false を指定可能",
|
|
413
415
|
"description prop はRadix管理IDの sr-only description を自動生成する",
|
|
416
|
+
"子として置いた SheetDescription は自動で aria-describedby に紐付く(#485)。呼び出し側で aria-describedby を明示した場合はそちらが優先。Description を置かないシートでは aria-describedby を出さない",
|
|
414
417
|
"SheetTitle は level=\"page\"|\"section\"|\"card\" で見出しの役割を指定する(値は contracts/composition.json の textHierarchy と1対1)。未指定時は BottomSheetFrame preset=\"mobile-full\"|\"mobile-page\" 配下で page 相当、それ以外は従来の typo-heading-lg",
|
|
415
418
|
"native (src/native/components/Sheet.tsx): safeArea(既定 true) で side=\"top\" の上端 inset 退避と、画面いっぱいに近い side=\"bottom\" の食い込み分の退避を行う。実測 inset は SafeAreaInsetsProvider から供給し、未供給なら回避量 0(従来どおり)",
|
|
416
|
-
"native (src/native/components/Sheet.tsx): surfaceColor でパネル(および snap モードの footer)の面色を上書きできる。未指定なら theme.surface.primary(従来どおり)。scrim の色は変えない(issue #448)"
|
|
419
|
+
"native (src/native/components/Sheet.tsx): surfaceColor でパネル(および snap モードの footer)の面色を上書きできる。未指定なら theme.surface.primary(従来どおり)。scrim の色は変えない(issue #448)",
|
|
420
|
+
"modal な Sheet の content は aria-modal=\"true\" を出力する(modal={false} では出さない)。開いているモーダルの横断判定は useHasOpenModal() / useOpenModalCount() を使い、consumer 側で data-state 等の内部属性を直接読まない(#505)"
|
|
417
421
|
],
|
|
418
422
|
"variants": {
|
|
419
423
|
"titleLevel": [
|
|
@@ -603,7 +607,8 @@
|
|
|
603
607
|
"両 API は内部で同じ singleton store を共有するため、<Toaster> がある場合はそれを優先し auto-mounted viewport は描画しない",
|
|
604
608
|
"新規 action prop で右側に CTA ボタン (元に戻す / 再試行 等) を表示できる",
|
|
605
609
|
"保存完了・接続復旧・同期開始など一時的な操作結果は Banner ではなく toast.* helper を使う",
|
|
606
|
-
"connectionRestored / saveComplete / retryStarted / retryFailed helper を提供"
|
|
610
|
+
"connectionRestored / saveComplete / retryStarted / retryFailed helper を提供",
|
|
611
|
+
"viewport の下端 offset は product theme の公開変数 --Toast-Viewport-Offset-Bottom(既定 1rem = 従来の bottom-4)で調整する。下部タブバー / FAB と重なるプロダクトは :root で持ち上げる。[data-slot=\"toast-viewport\"] を消費側 CSS から直接狙わない(issue #503)"
|
|
607
612
|
],
|
|
608
613
|
"props": {
|
|
609
614
|
"Toaster.regionLabel": "string (既定 \"通知\") — viewport (role=\"region\") の aria-label(issue #428)",
|
|
@@ -620,15 +625,20 @@
|
|
|
620
625
|
{
|
|
621
626
|
"name": "ProgressRing",
|
|
622
627
|
"path": "src/components/ui/progress-ring.tsx",
|
|
623
|
-
"description": "円形プログレス表示。SVGベース。0〜100
|
|
628
|
+
"description": "円形プログレス表示。SVGベース。0〜100の進捗を円弧で表示。中央にラベル(%またはカスタム)表示。サイズはプリセット4種に加えて px 数値、線の太さは strokeWidth、配色は color / trackColor(semantic トークンのみ)で上書きできる(issue #480)。",
|
|
624
629
|
"sizes": [
|
|
625
630
|
"sm",
|
|
626
631
|
"md",
|
|
627
632
|
"lg",
|
|
628
|
-
"xl"
|
|
633
|
+
"xl",
|
|
634
|
+
"number(px)"
|
|
629
635
|
],
|
|
630
636
|
"rules": [
|
|
631
|
-
"Use for circular progress only. Use <Progress> for linear progress bar."
|
|
637
|
+
"Use for circular progress only. Use <Progress> for linear progress bar.",
|
|
638
|
+
"size はまずプリセット(sm=32 / md=48 / lg=64 / xl=96px)から選ぶ。既存デザインの実寸に合わせる必要があるときだけ px の数値を渡す。",
|
|
639
|
+
"color / trackColor は semantic トークンの var(--...) 文字列のみ。生 hex と --Primitive-* は型で受け付けない(P015)。",
|
|
640
|
+
"strokeWidth が径の半分以上でも描画は消えず、描ける最大幅へ丸められる。",
|
|
641
|
+
"線の太さは Web / Native とも strokeWidth。Native の thickness は非推奨エイリアスで 3.0.0 で削除される(issue #495。2.0.0 では削除していない)。両方渡した場合は strokeWidth が優先される。"
|
|
632
642
|
]
|
|
633
643
|
},
|
|
634
644
|
{
|
|
@@ -656,9 +666,14 @@
|
|
|
656
666
|
"sm",
|
|
657
667
|
"md"
|
|
658
668
|
],
|
|
669
|
+
"props": {
|
|
670
|
+
"fullWidth": "boolean (既定 false) — 横幅いっぱいに広げ、各項目を等幅にする(issue #500)。既定はラベル幅(w-fit)"
|
|
671
|
+
},
|
|
659
672
|
"rules": [
|
|
660
673
|
"Use for 2-4 options only. 1行固定の segmented control で折り返せない。",
|
|
661
|
-
"5択以上・折り返しが要る単一選択は ChipSelector の selectionMode=\"single\" を使う(issue #418)。選択中の1つだけ見せて畳む場合は CollapsibleChipField(issue #419)。パネル連動が要るなら Tabs。"
|
|
674
|
+
"5択以上・折り返しが要る単一選択は ChipSelector の selectionMode=\"single\" を使う(issue #418)。選択中の1つだけ見せて畳む場合は CollapsibleChipField(issue #419)。パネル連動が要るなら Tabs。",
|
|
675
|
+
"等幅・全幅にしたいときは fullWidth を使う。className=\"grid w-full grid-cols-N\" で TabsList に届かせる回避策は内部構造依存なので使わない(issue #500)。",
|
|
676
|
+
"pill の trigger は透明な before 擬似要素でタップ領域を44pxまで確保済み。消費側で [role=\"tab\"] に追加の min-height を当てないこと(見えている面がトラックより高くなる)。"
|
|
662
677
|
]
|
|
663
678
|
},
|
|
664
679
|
{
|
|
@@ -864,7 +879,8 @@
|
|
|
864
879
|
"rules": [
|
|
865
880
|
"Action に variant=destructive でデストラクティブCTA",
|
|
866
881
|
"Cancel は variant=tertiary デフォルト",
|
|
867
|
-
"AlertDialog open時は既存Popoverを閉じ、stale layerを確認面の上に残さない"
|
|
882
|
+
"AlertDialog open時は既存Popoverを閉じ、stale layerを確認面の上に残さない",
|
|
883
|
+
"content は常に aria-modal=\"true\"(Radix の AlertDialog は非 modal にできない)。開いているモーダルの横断判定は useHasOpenModal() / useOpenModalCount()(#505)"
|
|
868
884
|
]
|
|
869
885
|
},
|
|
870
886
|
{
|
|
@@ -2023,15 +2039,24 @@
|
|
|
2023
2039
|
"accessibility": [
|
|
2024
2040
|
"role=dialog",
|
|
2025
2041
|
"aria-modal",
|
|
2026
|
-
"aria-label"
|
|
2042
|
+
"aria-label",
|
|
2043
|
+
"フォーカストラップ(Tab/Shift+Tab を面の中で循環)",
|
|
2044
|
+
"Escape で離脱",
|
|
2045
|
+
"閉じたら元の位置へフォーカス復帰"
|
|
2027
2046
|
],
|
|
2028
2047
|
"rules": [
|
|
2029
2048
|
"isCoachCompleted/markCoachCompleted で完了状態を永続化",
|
|
2030
2049
|
"対象要素が見つからない step は画面中央フォールバック",
|
|
2031
|
-
"ボタン文言・aria-label の i18n は labels prop で渡す(未指定は既定文言のまま・後方互換)"
|
|
2050
|
+
"ボタン文言・aria-label の i18n は labels prop で渡す(未指定は既定文言のまま・後方互換)",
|
|
2051
|
+
"autoFocus / restoreFocusOnClose / closeOnEsc は Dialog / Sheet と同じ prop 名・既定 true。Escape は onSkip(未指定なら onComplete)を呼ぶ",
|
|
2052
|
+
"aria-modal=\"true\" を名乗るため、Tab/Shift+Tab を面の中に閉じ込める。トラップは Radix の FocusScope(trapped + loop)に載せる=下に開いている Dialog / Sheet のスコープを pause できる。自前の document リスナーだとフォーカスの取り合いになり、下のモーダルへ引き戻される(issue #504)",
|
|
2053
|
+
"バルーン(CoachMark の Content)は PortalContainerProvider で FocusScope の中へ描画する。スコープ外に出るとトラップの対象から外れる(issue #504)"
|
|
2032
2054
|
],
|
|
2033
2055
|
"props": {
|
|
2034
|
-
"labels": "{ next?, done?, skip?, ariaLabel? } — ボタン文言と overlay の aria-label。i18n はアプリ側で解決して渡す。done 未指定なら next にフォールバック(issue #477)"
|
|
2056
|
+
"labels": "{ next?, done?, skip?, ariaLabel? } — ボタン文言と overlay の aria-label。i18n はアプリ側で解決して渡す。done 未指定なら next にフォールバック(issue #477)",
|
|
2057
|
+
"autoFocus": "boolean (既定 true) — 表示時に最初の操作子へフォーカスを移す。false は「操作子を自動で選ばない」でフォーカスは面自体へ移る(外に置くとトラップが成立しないため)。Dialog / Sheet と違い ref は受けない(面の中に消費側の要素が無いため。issue #504)",
|
|
2058
|
+
"restoreFocusOnClose": "boolean (既定 true) — 閉じたら開く前のフォーカス位置へ戻す(issue #504)",
|
|
2059
|
+
"closeOnEsc": "boolean (既定 true) — Escape で onSkip(未指定なら onComplete)を呼ぶ(issue #504)"
|
|
2035
2060
|
}
|
|
2036
2061
|
},
|
|
2037
2062
|
{
|
|
@@ -2243,7 +2268,8 @@
|
|
|
2243
2268
|
"preset=\"plain\" は BottomSheetFrame を通さない素の bottom シート(全幅・下端固定・p-6・max-h-90dvh のまま)で、デスクトップだけ中央モーダル(32rem / min(90dvh,46rem))になる。padding が効く(issue #486)",
|
|
2244
2269
|
"description / autoFocus / restoreFocusOnClose / closeOnEsc / zIndex を両分岐へ透過",
|
|
2245
2270
|
"snap sheet はデスクトップでもシートのまま",
|
|
2246
|
-
"ResponsiveOverlayFooter がモバイルのみキーボード追従になる"
|
|
2271
|
+
"ResponsiveOverlayFooter がモバイルのみキーボード追従になる",
|
|
2272
|
+
"デスクトップ(中央モーダル)分岐もソフトキーボードで max-height を縮める(issue #487)。幅 1024px 以上のタッチ端末(iPad 横向き)向け。JS(visualViewport)の inline style と html[data-kb-open] + --kb-h の CSS フォールバックの両方が効く。CSS フォールバックの --kb-h は「キーボードがビューポートを覆っている高さ」で、レイアウトビューポート自体が縮む環境(interactive-widget=resizes-content)では 0 のままにする(書くと二重に引いて面が潰れる)。JS 経路はキーボード高さを layoutHeight - (visualHeight + visualOffsetTop) * scale で求め、ピンチズーム由来の縮みを倍率で打ち消す(visualViewport はズームでも縮むため)。発火は編集可能な要素へのフォーカスをゲートにする"
|
|
2247
2273
|
],
|
|
2248
2274
|
"rules": [
|
|
2249
2275
|
"必ず <ResponsiveDialog> の子として使う(境界の判定は ResponsiveDialog の context が持つ)",
|
|
@@ -2252,6 +2278,8 @@
|
|
|
2252
2278
|
"デスクトップ側にだけ効かせたい className は desktopClassName、モバイル側は mobileClassName を使う",
|
|
2253
2279
|
"左右・下に余白を持つカード型のシートは side=\"float\"(Liquid Glass なら \"float-glass\")を使う。surface=\"glass\"(glass-strong)とは素材が別物で、float-glass との併用は型エラー(ガラスの二重適用防止)",
|
|
2254
2280
|
"side / preset ごとに効く prop が判別ユニオンで分かれている: preset 経路は preset / surface / desktopPosition、float 系と preset=\"plain\" は padding。効かない組み合わせは黙って無視されずコンパイルエラーになる(型テスト test/types/responsive-overlay-frame.tsx)",
|
|
2281
|
+
"デスクトップ分岐のキーボード補正は max-height だけで lift(bottom)は当てない。DialogContent は top:50% + translate-y:-50% で位置決めしているため bottom を足すと両拘束になり高さが縦一杯へ伸びる。中央寄せのキャップは 100dvh - 2*kb(100dvh - kb では下端がキーボードへ潜り込む。desktopPosition=\"top\" / \"fullscreen\" は上端固定なのでキーボード 1 回分 / #487)",
|
|
2282
|
+
"3 つのデスクトップ分岐(preset / plain / float 系)はすべて data-frame=\"responsive-overlay-frame\" + data-side + data-position を出す。consumer が独自のキーボード補正を当てる場合もこの属性で絞る(#487)",
|
|
2255
2283
|
"float-glass の実スクロールは src/styles/sheet-keyboard.css の :is(sheet-content, dialog-content)[data-side=\"float-glass\"] が担う。.glass-specular の overflow:hidden が非レイヤー CSS で className を踏み潰すため、className だけでは効かない(#337 / #479)"
|
|
2256
2284
|
],
|
|
2257
2285
|
"subcomponents": [
|
|
@@ -21,8 +21,8 @@
|
|
|
21
21
|
},
|
|
22
22
|
"policy": "エントリの削除条件は「全消費リポで check-migration の残件が 0」。削除は removeIn のメジャーリリースで行う。",
|
|
23
23
|
"counts": {
|
|
24
|
-
"total":
|
|
25
|
-
"prop":
|
|
24
|
+
"total": 6,
|
|
25
|
+
"prop": 6,
|
|
26
26
|
"export": 0
|
|
27
27
|
}
|
|
28
28
|
},
|
|
@@ -34,8 +34,10 @@
|
|
|
34
34
|
"prop": "interactive",
|
|
35
35
|
"since": "1.46.0",
|
|
36
36
|
"replacement": "href または onClick を ListItem 自体へ渡す",
|
|
37
|
-
"removeIn": "
|
|
38
|
-
"sources": [
|
|
37
|
+
"removeIn": "3.0.0",
|
|
38
|
+
"sources": [
|
|
39
|
+
"src/components/patterns/list-item.tsx"
|
|
40
|
+
],
|
|
39
41
|
"issue": "#207",
|
|
40
42
|
"note": "外側の Link / button でラップする既存コードの視覚互換用に残している。"
|
|
41
43
|
},
|
|
@@ -44,9 +46,9 @@
|
|
|
44
46
|
"kind": "prop",
|
|
45
47
|
"component": "ChipSelector",
|
|
46
48
|
"prop": "multiple",
|
|
47
|
-
"since": "
|
|
49
|
+
"since": "2.0.0",
|
|
48
50
|
"replacement": "selectionMode(multiple={false} は selectionMode=\"single\"、multiple は selectionMode=\"multiple\")",
|
|
49
|
-
"removeIn": "
|
|
51
|
+
"removeIn": "3.0.0",
|
|
50
52
|
"sources": [
|
|
51
53
|
"src/components/patterns/chip-selector.tsx",
|
|
52
54
|
"src/native/components/ChipSelector.tsx"
|
|
@@ -61,8 +63,10 @@
|
|
|
61
63
|
"prop": "onValueChange",
|
|
62
64
|
"since": "1.49.0",
|
|
63
65
|
"replacement": "onChange",
|
|
64
|
-
"removeIn": "
|
|
65
|
-
"sources": [
|
|
66
|
+
"removeIn": "3.0.0",
|
|
67
|
+
"sources": [
|
|
68
|
+
"src/components/ui/pill-toggle.tsx"
|
|
69
|
+
],
|
|
66
70
|
"issue": "#264",
|
|
67
71
|
"note": "後方互換エイリアス。onChange を併せて渡した場合は onChange が優先される。"
|
|
68
72
|
},
|
|
@@ -73,8 +77,10 @@
|
|
|
73
77
|
"prop": "deliveryLabel",
|
|
74
78
|
"since": "1.30.1",
|
|
75
79
|
"replacement": "なし(v1.30.0 以降は描画されないため、渡している箇所は削除する)",
|
|
76
|
-
"removeIn": "
|
|
77
|
-
"sources": [
|
|
80
|
+
"removeIn": "3.0.0",
|
|
81
|
+
"sources": [
|
|
82
|
+
"src/components/patterns/commerce/product-card.tsx"
|
|
83
|
+
],
|
|
78
84
|
"note": "既存 consumer の型互換のためだけに残している no-op prop。"
|
|
79
85
|
},
|
|
80
86
|
{
|
|
@@ -84,9 +90,25 @@
|
|
|
84
90
|
"prop": "tone",
|
|
85
91
|
"since": "1.40.1",
|
|
86
92
|
"replacement": "variant",
|
|
87
|
-
"removeIn": "
|
|
88
|
-
"sources": [
|
|
93
|
+
"removeIn": "3.0.0",
|
|
94
|
+
"sources": [
|
|
95
|
+
"src/native/components/Progress.tsx"
|
|
96
|
+
],
|
|
89
97
|
"note": "React Native 版のみ。既存 RN consumer 向けの互換。"
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
"id": "ProgressRing.thickness",
|
|
101
|
+
"kind": "prop",
|
|
102
|
+
"component": "ProgressRing",
|
|
103
|
+
"prop": "thickness",
|
|
104
|
+
"since": "2.0.0",
|
|
105
|
+
"replacement": "strokeWidth(Web の同名 prop と語彙を揃えた。値の意味・既定値 6 は同じ)",
|
|
106
|
+
"removeIn": "3.0.0",
|
|
107
|
+
"sources": [
|
|
108
|
+
"src/native/components/ProgressRing.tsx"
|
|
109
|
+
],
|
|
110
|
+
"issue": "#495",
|
|
111
|
+
"note": "Native だけが持っていた別名。同じ「線の太さ」を Web は strokeWidth と呼んでいたため、両方を触る実装者が読み替えを強いられていた。両方渡された場合は strokeWidth を優先する。"
|
|
90
112
|
}
|
|
91
113
|
]
|
|
92
114
|
}
|