@godxjp/ui 19.4.0 → 19.4.2
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/dist/components/data-display/badge.d.ts +1 -1
- package/dist/components/data-display/list-row.d.ts +2 -0
- package/dist/components/data-display/list-row.js +16 -12
- package/dist/components/data-display/popover.d.ts +1 -1
- package/dist/components/data-display/table.d.ts +1 -1
- package/dist/components/data-display/timeline-grid.js +5 -3
- package/dist/components/data-entry/checkbox.js +1 -1
- package/dist/components/data-entry/form-field.js +5 -5
- package/dist/components/data-entry/input.js +1 -1
- package/dist/components/data-entry/radio.js +1 -1
- package/dist/components/data-entry/search-input.d.ts +2 -18
- package/dist/components/data-entry/search-input.js +3 -0
- package/dist/components/data-entry/select.js +1 -1
- package/dist/components/general/button.d.ts +2 -0
- package/dist/components/general/button.js +5 -1
- package/dist/components/general/inert-background.js +2 -1
- package/dist/components/layout/app-shell.js +1 -1
- package/dist/components/layout/master-detail.d.ts +1 -1
- package/dist/components/layout/master-detail.js +47 -3
- package/dist/components/layout/mobile-shell.d.ts +1 -1
- package/dist/components/layout/responsive-grid.js +7 -4
- package/dist/components/navigation/app-setting-picker.js +10 -1
- package/dist/email/tokens.generated.d.ts +1 -1
- package/dist/email/tokens.generated.js +1 -1
- package/dist/props/components/data-display.prop.d.ts +1 -1
- package/dist/props/components/data-entry.prop.d.ts +10 -5
- package/dist/props/components/general.prop.d.ts +4 -0
- package/dist/props/components/layout.prop.d.ts +8 -2
- package/dist/props/registry.d.ts +2 -2
- package/dist/props/registry.js +2 -1
- package/dist/props/vocabulary/layout.prop.d.ts +1 -1
- package/dist/styles/control.css +29 -0
- package/dist/styles/data-display-layout.css +22 -1
- package/dist/styles/focus-ring.css +9 -0
- package/dist/styles/form-layout.css +6 -0
- package/dist/styles/layout.css +36 -1
- package/dist/styles/navigation-layout.css +2 -1
- package/dist/tokens/components/data-display.css +2 -1
- package/dist/tokens/foundation.css +2 -1
- package/docs/FRAME-A11Y-CI.md +99 -17
- package/docs/FRAME-COVERAGE-REPORT.md +4 -2
- package/docs/data-display/list-row.tsx +21 -0
- package/docs/data-display/popover.tsx +4 -1
- package/docs/data-entry/date-picker.tsx +2 -1
- package/docs/data-entry/form-field/index.tsx +2 -2
- package/docs/data-entry/search-input.tsx +1 -0
- package/docs/data-entry/select-matrix.tsx +2 -1
- package/docs/data-entry/select.tsx +3 -1
- package/docs/feedback/dialog.tsx +2 -1
- package/docs/feedback/sheet.tsx +2 -1
- package/docs/general/button/index.md +4 -0
- package/docs/layout/app-shell.tsx +4 -4
- package/docs/layout/master-detail.tsx +3 -0
- package/docs/layout/responsive-grid.tsx +21 -4
- package/docs/layout/sidebar.tsx +3 -3
- package/docs/layout/split-pane.tsx +4 -5
- package/docs/navigation/context-menu.tsx +6 -1
- package/docs/navigation/dropdown-menu.tsx +2 -1
- package/docs/navigation/tabs.tsx +2 -2
- package/docs/showcase/case6-agency-handy.tsx +2 -2
- package/docs/showcase/org-switcher.tsx +1 -1
- package/docs/showcase/settings-account-sections.tsx +2 -2
- package/docs/showcase/table-master-detail.tsx +1 -1
- package/docs/showcase/table-view-tabs.tsx +1 -1
- package/package.json +2 -2
package/docs/layout/sidebar.tsx
CHANGED
|
@@ -402,7 +402,7 @@ export default function Demo() {
|
|
|
402
402
|
<CardDescription>
|
|
403
403
|
行の中身まで利用側が書く旧エスケープハッチ。これが原因で
|
|
404
404
|
<code><Link>{"{item.label}"}</Link></code>
|
|
405
|
-
|
|
405
|
+
がアイコンを全て落とす回帰が発生しました。 現在は rowProps.children
|
|
406
406
|
にライブラリ製の行内容が入るので、それを描画すれば 正規の行が復元されます(ここでは
|
|
407
407
|
その右にお気に入りスターを添えています)。 新規コードでは linkComponent か
|
|
408
408
|
SidebarItem asChild を使ってください。
|
|
@@ -436,7 +436,7 @@ export default function Demo() {
|
|
|
436
436
|
sections を使わず SidebarSection / SidebarItem を直接組み立てて、
|
|
437
437
|
ナビゲーション全体を 自前で構成します。右は同じ構成に SidebarItem の asChild
|
|
438
438
|
を足したものです。子として ルーターの Link
|
|
439
|
-
を「要素だけ」渡すと、アイコン・ラベル・バッジは
|
|
439
|
+
を「要素だけ」渡すと、アイコン・ラベル・バッジは ライブラリが差し込みます(。
|
|
440
440
|
children は書きません)。
|
|
441
441
|
</CardDescription>
|
|
442
442
|
</CardHeader>
|
|
@@ -590,7 +590,7 @@ export default function Demo() {
|
|
|
590
590
|
"badgeTone で未読(neutral)と自分宛て(destructive)を色だけで区別",
|
|
591
591
|
"disabled=true で項目を非活性化(クリック不可)",
|
|
592
592
|
"footer prop でスクロール外にユーザー情報を固定",
|
|
593
|
-
"linkComponent · ルーター Link
|
|
593
|
+
"linkComponent · ルーター Link は「要素だけ」渡す。行の中身はライブラリが組み立てる",
|
|
594
594
|
"linkComponent は葉・サブメニュー・折りたたみレール・フライアウトの全てに適用される",
|
|
595
595
|
"グループのトリガーは aria-expanded を持つ開閉ボタンのままなので linkComponent は適用されない",
|
|
596
596
|
].map((note) => (
|
|
@@ -302,8 +302,8 @@ export default function Demo() {
|
|
|
302
302
|
</Text>
|
|
303
303
|
<Text as="p" tone="muted">
|
|
304
304
|
パネル自身の幅が 48rem 未満になると縦積みにフォールバックします
|
|
305
|
-
|
|
306
|
-
|
|
305
|
+
(ビューポートではなくコンテナ基準)。 常にサイドバイサイドが必要な場合は CSS
|
|
306
|
+
Grid を使用してください。
|
|
307
307
|
</Text>
|
|
308
308
|
</Flex>
|
|
309
309
|
</CardContent>
|
|
@@ -410,9 +410,8 @@ export default function Demo() {
|
|
|
410
410
|
<CardHeader>
|
|
411
411
|
<CardTitle level={2}>Container stress · narrow vs wide embed</CardTitle>
|
|
412
412
|
<CardDescription>
|
|
413
|
-
大きな viewport
|
|
414
|
-
|
|
415
|
-
幅は同一。
|
|
413
|
+
大きな viewport 内でも、パネル自身の幅で分割が決まる。狭い埋め込み(約 28rem)は 1
|
|
414
|
+
カラムに潰れ、広い埋め込み(約 56rem)は 2 カラムに分割する。ビューポート 幅は同一。
|
|
416
415
|
</CardDescription>
|
|
417
416
|
</CardHeader>
|
|
418
417
|
<CardContent>
|
|
@@ -48,7 +48,12 @@ export default function Demo() {
|
|
|
48
48
|
<CardContent>
|
|
49
49
|
<ContextMenu>
|
|
50
50
|
{/* ui-audit-disable-next-line no-hand-rolled-surface — the dashed area is the right-click target the demo asks you to use */}
|
|
51
|
-
|
|
51
|
+
{/* data-axe-open="contextmenu": check-frame-axe right-clicks here before its
|
|
52
|
+
overlay scan. */}
|
|
53
|
+
<ContextMenuTrigger
|
|
54
|
+
data-axe-open="contextmenu"
|
|
55
|
+
className="border-border h-36 w-full cursor-context-menu rounded-md border border-dashed"
|
|
56
|
+
>
|
|
52
57
|
<Flex align="center" justify="center" gap="xs">
|
|
53
58
|
<Text tone="muted">ここを右クリックしてください</Text>
|
|
54
59
|
</Flex>
|
|
@@ -52,7 +52,8 @@ export default function Demo() {
|
|
|
52
52
|
<Text>JE-0042 · 売上計上 ¥480,000</Text>
|
|
53
53
|
<DropdownMenu>
|
|
54
54
|
<DropdownMenuTrigger asChild>
|
|
55
|
-
|
|
55
|
+
{/* data-axe-open: opened by check-frame-axe before its overlay scan. */}
|
|
56
|
+
<Button data-axe-open variant="ghost" size="icon-sm" aria-label="行アクション">
|
|
56
57
|
<MoreHorizontal />
|
|
57
58
|
</Button>
|
|
58
59
|
</DropdownMenuTrigger>
|
package/docs/navigation/tabs.tsx
CHANGED
|
@@ -73,7 +73,7 @@ export default function Demo() {
|
|
|
73
73
|
<CardTitle level={2}>先頭タブが disabled · フォールバック選択</CardTitle>
|
|
74
74
|
<CardDescription>
|
|
75
75
|
defaultValue/value を渡さない場合、Tabs は先頭の ENABLED タブを自動選択する(disabled
|
|
76
|
-
の先頭タブは選ばない)。全タブが disabled
|
|
76
|
+
の先頭タブは選ばない)。全タブが disabled の場合は何も選択しない。
|
|
77
77
|
</CardDescription>
|
|
78
78
|
</CardHeader>
|
|
79
79
|
<CardContent>
|
|
@@ -106,7 +106,7 @@ export default function Demo() {
|
|
|
106
106
|
<CardTitle level={2}>320px stress · 長いローカライズラベル</CardTitle>
|
|
107
107
|
<CardDescription>
|
|
108
108
|
狭いコンテナでも長いラベルはクリップされず、水平タブリストが自身でスクロールする
|
|
109
|
-
|
|
109
|
+
。compact navigation への変換は Tabs API に存在しないため擬似実装しない —
|
|
110
110
|
スクロールが意図した縮退動作。
|
|
111
111
|
</CardDescription>
|
|
112
112
|
</CardHeader>
|
|
@@ -333,7 +333,7 @@ function SectionHeader({ children, count }: { children: React.ReactNode; count?:
|
|
|
333
333
|
// ── Phone shell ──────────────────────────────────────────────────────────────
|
|
334
334
|
|
|
335
335
|
/**
|
|
336
|
-
*
|
|
336
|
+
* This file used to BUILD the shell: a `Card` + `CardContent flush` phone frame, a
|
|
337
337
|
* `ui-card-inset-x h-9` status row, an `h-14 border-b` header, a `flex-1 overflow-y-auto` body, a
|
|
338
338
|
* `shrink-0 border-t` action strip and a `ResponsiveGrid` tab bar. It reproduced the look and
|
|
339
339
|
* neither behaviour that matters on a device — the document still scrolled, and nothing padded out
|
|
@@ -962,7 +962,7 @@ export default function AgencyHandyShowcase() {
|
|
|
962
962
|
|
|
963
963
|
// SELECT MODE REPLACES THE APP BAR — it does not stack a second strip under it. That is the
|
|
964
964
|
// platform pattern on both iOS and Android, and it is what the `header` slot is for: one bar to
|
|
965
|
-
// read at a time.
|
|
965
|
+
// read at a time. This file once rendered the title bar AND a contextual strip, because
|
|
966
966
|
// there was no bar to swap.
|
|
967
967
|
const header = selectMode ? (
|
|
968
968
|
<Flex align="center" justify="between" gap="xs" className="w-full">
|
|
@@ -120,7 +120,7 @@ function OrgSwitcher({ organizations, currentId, onSelect, onCreate, onJoin }: O
|
|
|
120
120
|
className="w-full justify-between"
|
|
121
121
|
>
|
|
122
122
|
{/* Inside a Button, i.e. inside a <button>, whose content model is phrasing content
|
|
123
|
-
only — so every Flex on this branch renders as a <span
|
|
123
|
+
only — so every Flex on this branch renders as a <span>. */}
|
|
124
124
|
<Flex as="span" align="center" gap="sm" className="min-w-0">
|
|
125
125
|
<Avatar className="size-7 rounded-md">
|
|
126
126
|
<AvatarFallback>{monogram(current.name)}</AvatarFallback>
|
|
@@ -61,7 +61,7 @@ import { AlertDialog } from "@godxjp/ui/feedback";
|
|
|
61
61
|
import { Flex, PageContainer } from "@godxjp/ui/layout";
|
|
62
62
|
|
|
63
63
|
// ── Label bundles: the SAME screen at its longest JA / EN / VI wording ────────────────────────
|
|
64
|
-
// Long-label stress is a first-class acceptance criterion
|
|
64
|
+
// Long-label stress is a first-class acceptance criterion, so the bundle intentionally
|
|
65
65
|
// carries the verbose form of each label instead of the tidy demo form.
|
|
66
66
|
|
|
67
67
|
type LabelBundle = {
|
|
@@ -348,7 +348,7 @@ export default function SettingsAccountSectionsShowcase() {
|
|
|
348
348
|
title={b.pageTitle}
|
|
349
349
|
subtitle={b.pageSubtitle}
|
|
350
350
|
breadcrumb={[{ label: b.pageTitle }]}
|
|
351
|
-
// PageHeader action composition
|
|
351
|
+
// PageHeader action composition: the header owns the page-level actions through
|
|
352
352
|
// `extra`. It wraps at 390 instead of overflowing, so no page-local header geometry.
|
|
353
353
|
extra={
|
|
354
354
|
<Flex direction="row" align="end" gap="sm" wrap>
|
|
@@ -417,7 +417,7 @@ export default function Demo() {
|
|
|
417
417
|
</Card>
|
|
418
418
|
|
|
419
419
|
{/* ── Empty detail state (nothing selected) ──
|
|
420
|
-
Fixed-track split, so the geometry belongs to MasterDetail, not this page
|
|
420
|
+
Fixed-track split, so the geometry belongs to MasterDetail, not this page:
|
|
421
421
|
rail="master" keeps the leading 一覧 on the fixed track while the detail surface stays
|
|
422
422
|
fluid, and collapseBelow="md" stacks 一覧→詳細 once the card body itself is too narrow
|
|
423
423
|
for two tracks. No grid tracks, no per-breakpoint widths, no page-local spacing. */}
|
|
@@ -369,7 +369,7 @@ const DOT_CLASS: Record<SavedView["dot"], string> = {
|
|
|
369
369
|
|
|
370
370
|
// TabsTrigger renders a <button>, whose content model is phrasing content only — so the row and
|
|
371
371
|
// the count chip take `as="span"`. Before Flex/Badge had that seam the only valid shape here was a
|
|
372
|
-
// raw `<span className="flex …">`, i.e. utility layout
|
|
372
|
+
// raw `<span className="flex …">`, i.e. utility layout.
|
|
373
373
|
function ViewTrigger({ view, count }: { view: SavedView; count: number }) {
|
|
374
374
|
return (
|
|
375
375
|
<Flex as="span" align="center" gap="sm">
|