@godxjp/ui 21.0.0 → 23.0.0
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/README.md +4 -4
- package/dist/app/app-provider.js +2 -1
- package/dist/components/data-display/badge.d.ts +28 -1
- package/dist/components/data-display/badge.js +2 -0
- package/dist/components/data-display/data-table.d.ts +18 -2
- package/dist/components/data-display/data-table.js +4 -0
- package/dist/components/data-display/index.d.ts +1 -1
- package/dist/components/data-display/popover.d.ts +19 -1
- package/dist/components/data-display/popover.js +9 -1
- package/dist/components/data-display/progress.d.ts +37 -0
- package/dist/components/data-display/progress.js +57 -5
- package/dist/components/data-display/scroll-area.d.ts +24 -4
- package/dist/components/data-display/scroll-area.js +34 -72
- package/dist/components/data-entry/cascader.js +8 -6
- package/dist/components/data-entry/checkbox.js +2 -0
- package/dist/components/data-entry/choice-hit-target.d.ts +24 -0
- package/dist/components/data-entry/choice-hit-target.js +12 -0
- package/dist/components/data-entry/control-surface.d.ts +8 -0
- package/dist/components/data-entry/control-surface.js +10 -1
- package/dist/components/data-entry/date-picker.d.ts +10 -3
- package/dist/components/data-entry/date-picker.js +503 -238
- package/dist/components/data-entry/form-field.d.ts +1 -1
- package/dist/components/data-entry/form-field.js +7 -3
- package/dist/components/data-entry/form.js +10 -1
- package/dist/components/data-entry/index.d.ts +0 -6
- package/dist/components/data-entry/index.js +0 -6
- package/dist/components/data-entry/label.d.ts +14 -1
- package/dist/components/data-entry/label.js +6 -1
- package/dist/components/data-entry/radio.d.ts +27 -6
- package/dist/components/data-entry/radio.js +89 -43
- package/dist/components/data-entry/search-select.js +226 -89
- package/dist/components/data-entry/select.d.ts +76 -14
- package/dist/components/data-entry/select.js +497 -163
- package/dist/components/data-entry/slider.d.ts +3 -11
- package/dist/components/data-entry/slider.js +582 -93
- package/dist/components/data-entry/switch.d.ts +6 -3
- package/dist/components/data-entry/switch.js +36 -11
- package/dist/components/layout/mobile-shell.d.ts +1 -1
- package/dist/components/layout/mobile-shell.js +2 -0
- package/dist/components/navigation/dropdown-menu.d.ts +11 -3
- package/dist/components/navigation/dropdown-menu.js +190 -15
- package/dist/components/navigation/index.d.ts +0 -3
- package/dist/components/navigation/index.js +0 -78
- package/dist/components/navigation/steps.d.ts +1 -1
- package/dist/components/navigation/steps.js +3 -1
- package/dist/components/navigation/tabs-scroll.d.ts +27 -0
- package/dist/components/navigation/tabs-scroll.js +52 -1
- package/dist/components/navigation/tabs.d.ts +2 -2
- package/dist/components/navigation/tabs.js +88 -23
- package/dist/components/ui/index.d.ts +0 -4
- package/dist/components/ui/index.js +0 -4
- package/dist/components/ui/input-otp.d.ts +1 -1
- package/dist/components/ui/segmented.d.ts +15 -1
- package/dist/components/ui/segmented.js +15 -6
- package/dist/components/ui/tag-input.js +3 -5
- package/dist/i18n/messages/en.json +3 -2
- package/dist/i18n/messages/ja.json +3 -2
- package/dist/i18n/messages/vi.json +3 -2
- package/dist/lib/datetime/picker-format.d.ts +18 -0
- package/dist/lib/datetime/picker-format.js +35 -1
- package/dist/lib/field-a11y.d.ts +12 -0
- package/dist/lib/field-a11y.js +14 -1
- package/dist/lib/select-options.d.ts +21 -0
- package/dist/lib/select-options.js +46 -0
- package/dist/props/components/data-display.prop.d.ts +16 -6
- package/dist/props/components/data-entry.prop.d.ts +503 -129
- package/dist/props/components/index.d.ts +2 -2
- package/dist/props/components/layout.prop.d.ts +12 -1
- package/dist/props/components/navigation.prop.d.ts +93 -1
- package/dist/props/registry.d.ts +79 -16
- package/dist/props/registry.js +85 -15
- package/dist/props/vocabulary/data.prop.d.ts +12 -0
- package/dist/props/vocabulary/index.d.ts +2 -2
- package/dist/props/vocabulary/layout.prop.d.ts +11 -0
- package/dist/styles/badge-layout.css +4 -0
- package/dist/styles/card-layout.css +6 -6
- package/dist/styles/control.css +220 -29
- package/dist/styles/data-display-layout.css +94 -23
- package/dist/styles/focus-ring.css +6 -4
- package/dist/styles/fonts.css +88 -4
- package/dist/styles/navigation-layout.css +36 -236
- package/dist/styles/shell-layout.css +149 -139
- package/dist/styles/table-layout.css +41 -3
- package/dist/tokens/components/control.css +4 -0
- package/dist/tokens/components/data-display.css +9 -5
- package/dist/tokens/components/navigation.css +9 -5
- package/dist/tokens/components/scroll-area.css +7 -0
- package/dist/tokens/components/segmented.css +0 -2
- package/dist/tokens/components/shell.css +2 -0
- package/dist/tokens/components/table.css +3 -0
- package/dist/tokens/foundation.css +7 -0
- package/docs/COMPONENTS.md +14 -14
- package/docs/CONSUMER-RULES.md +24 -1
- package/docs/CUSTOMER-THEMING.md +7 -1
- package/docs/FRAME-COVERAGE-REPORT.md +5 -11
- package/docs/TOKENS.md +65 -0
- package/docs/data-display/badge.tsx +37 -0
- package/docs/data-display/data-table/index.tsx +45 -1
- package/docs/data-display/popover.tsx +43 -5
- package/docs/data-display/progress.tsx +28 -0
- package/docs/data-display/scroll-area.tsx +51 -45
- package/docs/data-entry/calendar.tsx +2 -2
- package/docs/data-entry/date-picker.tsx +144 -5
- package/docs/data-entry/form/examples/invoice-form.tsx +2 -2
- package/docs/data-entry/form-field/examples/a11y-contract.tsx +3 -5
- package/docs/data-entry/form.tsx +4 -4
- package/docs/data-entry/input-otp.tsx +5 -2
- package/docs/data-entry/number-input.tsx +31 -0
- package/docs/data-entry/segmented.tsx +143 -2
- package/docs/data-entry/select-matrix.tsx +1 -2
- package/docs/data-entry/select.tsx +108 -3
- package/docs/data-entry/slider.tsx +125 -47
- package/docs/feedback/dialog.tsx +1 -2
- package/docs/feedback/sheet.tsx +1 -2
- package/docs/layout/app-shell-states.tsx +143 -0
- package/docs/layout/mobile-shell.tsx +5 -0
- package/docs/navigation/dropdown-menu.tsx +75 -4
- package/docs/navigation/tabs.tsx +149 -0
- package/docs/roadmap/antd-parity.md +35 -34
- package/docs/roadmap/parity-audit-data-entry.md +196 -172
- package/docs/roadmap/parity-audit-layout-navigation-general.md +304 -310
- package/docs/roadmap/parity-backlog.md +8 -10
- package/docs/showcase/acme-portal.tsx +7 -0
- package/package.json +28 -64
- package/scripts/ui-audit.mjs +18 -5
- package/scripts/visual-audit-rules.mjs +0 -7
- package/scripts/visual-audit.mjs +6 -27
- package/dist/components/data-entry/date-range-picker.d.ts +0 -11
- package/dist/components/data-entry/date-range-picker.js +0 -349
- package/dist/components/data-entry/month-picker.d.ts +0 -10
- package/dist/components/data-entry/month-picker.js +0 -241
- package/dist/components/data-entry/month-range-picker.d.ts +0 -10
- package/dist/components/data-entry/month-range-picker.js +0 -301
- package/dist/components/navigation/context-menu.d.ts +0 -21
- package/dist/components/navigation/context-menu.js +0 -149
- package/dist/components/navigation/menubar.d.ts +0 -21
- package/dist/components/navigation/menubar.js +0 -136
- package/dist/components/navigation/navigation-menu.d.ts +0 -10
- package/dist/components/navigation/navigation-menu.js +0 -91
- package/dist/components/ui/context-menu.d.ts +0 -1
- package/dist/components/ui/context-menu.js +0 -2
- package/dist/components/ui/date-range-picker.d.ts +0 -1
- package/dist/components/ui/date-range-picker.js +0 -2
- package/dist/components/ui/menubar.d.ts +0 -1
- package/dist/components/ui/menubar.js +0 -2
- package/dist/components/ui/navigation-menu.d.ts +0 -1
- package/dist/components/ui/navigation-menu.js +0 -2
- package/docs/FRAME-A11Y-CI.md +0 -349
- package/docs/data-entry/date-range-picker.tsx +0 -175
- package/docs/data-entry/month-picker.tsx +0 -101
- package/docs/data-entry/month-range-picker.tsx +0 -115
- package/docs/navigation/context-menu.tsx +0 -128
- package/docs/navigation/menubar.tsx +0 -141
- package/docs/navigation/navigation-menu.tsx +0 -158
|
@@ -31,18 +31,19 @@ What is real, ordered by how badly it hurts:
|
|
|
31
31
|
just antd's `defaultCurrent`.
|
|
32
32
|
3. **The shell's collapse contract is half-built.** `AppShell` takes `sidebarCollapsed`
|
|
33
33
|
(`src/components/layout/app-shell.tsx:30`) with **no** change handler and **no** built-in trigger,
|
|
34
|
-
so every consumer hand-rolls the toggle
|
|
34
|
+
so every consumer hand-rolls the toggle _and_ its `aria-expanded`/`aria-controls`; and the 900px
|
|
35
35
|
collapse step is a hardcoded media query (`src/styles/shell-layout.css:1119`,
|
|
36
|
-
`@media (width <= 56.25rem)`), not a token — while the overlay family's equivalent step
|
|
36
|
+
`@media (width <= 56.25rem)`), not a token — while the overlay family's equivalent step _is_ a
|
|
37
37
|
token (`--sheet-responsive-breakpoint-width`). antd's `Sider collapsible`/`trigger`/`breakpoint`/
|
|
38
38
|
`onCollapse`/`onBreakpoint` are all on the far side of that line.
|
|
39
39
|
4. **Submenu open state is unreachable.** `Sidebar` keeps group expansion in local state
|
|
40
40
|
(`src/components/layout/sidebar.tsx:271`), route-synchronised but not controllable — so
|
|
41
41
|
"which sections the user left open" cannot be persisted. antd `openKeys`/`onOpenChange`.
|
|
42
|
-
5. **Horizontal overflow has no affordance
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
42
|
+
5. **Horizontal overflow has no affordance.** `Tabs moreIcon` is still the open P1 (WCAG 1.4.10 /
|
|
43
|
+
2.4.3, not cosmetic). The second instance of this defect, `NavigationMenu`, was DELETED in v23
|
|
44
|
+
along with `ContextMenu` and `Menubar`: no consumer imported any of the three. If a horizontal
|
|
45
|
+
menu is ever wanted again, antd's `Menu mode="horizontal"` is the shape to build — and
|
|
46
|
+
`overflowedIndicator` is part of it from the first commit, not a follow-up.
|
|
46
47
|
|
|
47
48
|
Honourable mention, because it is an i18n/a11y gap rather than a parity one: **there is no
|
|
48
49
|
`copyable` anywhere in the library** (`grep -rn "copyable" src/` → 0 hits), yet `ErrorSurface`
|
|
@@ -59,9 +60,6 @@ renders `requestId` in monospace explicitly "so it can be read out or copied acc
|
|
|
59
60
|
- **`AspectRatio`** (`src/components/ui/aspect-ratio.tsx`) — antd has no counterpart; `ratio` +
|
|
60
61
|
`asChild` is the whole capability.
|
|
61
62
|
- **`Logo`** (`src/components/general/logo.tsx`) — antd has no counterpart.
|
|
62
|
-
- **`ContextMenu`** (`src/components/navigation/context-menu.tsx`) — antd expresses this as
|
|
63
|
-
`Dropdown trigger={['contextMenu']}`; the dedicated primitive here IS the coverage.
|
|
64
|
-
- **`Menubar`** (`src/components/navigation/menubar.tsx`) — antd has no counterpart.
|
|
65
63
|
- **`Topbar` / `TopbarItem`** (`src/props/components/layout.prop.ts:1212`, `:1236`) — antd's
|
|
66
64
|
`Layout.Header` is a bare box; both are ahead of it.
|
|
67
65
|
- **`MobileShell`, `AuthShell`, `CenteredShell`, `LegalDocumentShell`, `MasterDetail`,
|
|
@@ -72,271 +70,269 @@ renders `requestId` in monospace explicitly "so it can be read out or copied acc
|
|
|
72
70
|
|
|
73
71
|
### 2.2 `Button` vs antd `Button`
|
|
74
72
|
|
|
75
|
-
| Ant Design prop / behaviour
|
|
76
|
-
|
|
|
77
|
-
| `type` — `primary`/`dashed`/`link`/`text`/`default`
|
|
78
|
-
| `danger` — destructive styling
|
|
79
|
-
| `shape: round`
|
|
80
|
-
| `shape: circle`
|
|
81
|
-
| `size: large\|middle\|small`
|
|
82
|
-
| `size` includes the alias `"default"`
|
|
83
|
-
| `block` — full parent width
|
|
84
|
-
| `loading` (boolean)
|
|
85
|
-
| `loading: { delay }` — suppress spinner flash
|
|
86
|
-
| `loading: { icon }`
|
|
87
|
-
| `icon` + `iconPlacement`
|
|
88
|
-
| `htmlType`
|
|
89
|
-
| `href` / `target`
|
|
90
|
-
| `ghost` — transparent + inverted on a coloured ground
|
|
91
|
-
| `autoInsertSpace` — CJK two-char spacing
|
|
92
|
-
| `color` × `variant` matrix (v5.21)
|
|
93
|
-
| `classNames` / `styles` semantic DOM
|
|
94
|
-
| **`Button.Group` / `Space.Compact`** — joined controls | `MISSING`
|
|
95
|
-
| `count` / `overflowCount` / `showZero`
|
|
73
|
+
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
74
|
+
| ------------------------------------------------------ | ------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
|
|
75
|
+
| `type` — `primary`/`dashed`/`link`/`text`/`default` | `RENAMED` | `ButtonVariantProp`, `src/props/vocabulary/interaction.prop.ts:17` (`default`/`dashed`/`link`/`ghost`/`bare`/…) | antd `text` = `ghost`; antd `default` = `outline` |
|
|
76
|
+
| `danger` — destructive styling | `RENAMED` | same line — `variant="destructive"` | — |
|
|
77
|
+
| `shape: round` | `RENAMED` | `ShapeProp`, `interaction.prop.ts:24` — `pill` | — |
|
|
78
|
+
| `shape: circle` | `COVERED-ELSEWHERE` | `shape="pill"` + `size="icon"`, `src/components/general/button.tsx:38-51` | Two existing axes; no third |
|
|
79
|
+
| `size: large\|middle\|small` | `RENAMED` | `ButtonSizeProp`, `interaction.prop.ts:101` | but see next row |
|
|
80
|
+
| `size` includes the alias `"default"` | `MISSING` | `ButtonSizeProp = SizeProp \| "default" \| "icon" …`, `interaction.prop.ts:101`; `button.tsx:34-35` maps `default` and `md` to the same class | Deprecate `"default"` → `md` (STANDARDS rule 10: never `"default"`) |
|
|
81
|
+
| `block` — full parent width | `RENAMED` | `fullWidth`, `src/props/components/general.prop.ts` (`ButtonProp.fullWidth`) | — |
|
|
82
|
+
| `loading` (boolean) | `PRESENT` | `ButtonProp.loading`, `general.prop.ts`; spinner + `aria-busy` + activation block | — |
|
|
83
|
+
| `loading: { delay }` — suppress spinner flash | `MISSING` | no `delay` in `ButtonProp`; `grep -n "delay" src/components/general/button.tsx` → nothing | Add `loadingDelay?: number` |
|
|
84
|
+
| `loading: { icon }` | `WONT-PORT` | — | Design knob → `--button-*` token (rule #44) |
|
|
85
|
+
| `icon` + `iconPlacement` | `COVERED-ELSEWHERE` | icons are children; DOM order IS the placement (`button.tsx` icon sizing rules) | No work |
|
|
86
|
+
| `htmlType` | `PRESENT` | `ButtonProp extends React.ButtonHTMLAttributes` → native `type` | — |
|
|
87
|
+
| `href` / `target` | `COVERED-ELSEWHERE` | `asChild` + `<a>`/router `Link`, `ButtonProp.asChild` | Catalog already documents this |
|
|
88
|
+
| `ghost` — transparent + inverted on a coloured ground | `WONT-PORT` | — | Per-region role scoping (`COMPOSITION-VS-COMPONENT.md` §4.3), not a prop |
|
|
89
|
+
| `autoInsertSpace` — CJK two-char spacing | `WONT-PORT` | — | Typographic knob; belongs to `text-spacing-trim` in the token layer |
|
|
90
|
+
| `color` × `variant` matrix (v5.21) | `WONT-PORT` | — | `variant` + `tone` already own this; a third dialect is the defect rule #1 names |
|
|
91
|
+
| `classNames` / `styles` semantic DOM | `WONT-PORT` | — | Ground rule §0.4 (inline-style twins) |
|
|
92
|
+
| **`Button.Group` / `Space.Compact`** — joined controls | `MISSING` | `grep -rn "ButtonGroup\|SplitButton\|Space.Compact" src/ mcp/src/data/components.ts` → 0 hits; `ToggleGroup` (`src/components/ui/toggle-group.tsx`) joins **toggles** only | Add `ButtonGroup` — GATE-0 ledger in §4.1 |
|
|
93
|
+
| `count` / `overflowCount` / `showZero` | `PRESENT` | `general.prop.ts` (`ButtonProp.count`…) | Beyond antd Button (antd needs a wrapping Badge) |
|
|
96
94
|
|
|
97
95
|
### 2.3 `Text` vs antd `Typography.Text` / `.Paragraph` / `.Link`
|
|
98
96
|
|
|
99
|
-
| Ant Design prop / behaviour
|
|
100
|
-
|
|
|
101
|
-
| `type: secondary\|success\|warning\|danger`
|
|
102
|
-
| `strong`
|
|
103
|
-
| `underline` / `delete`
|
|
104
|
-
| `code`
|
|
105
|
-
| `keyboard`
|
|
106
|
-
| `italic`
|
|
107
|
-
| `disabled`
|
|
108
|
-
| `mark` — highlighted run
|
|
109
|
-
| `ellipsis` (boolean)
|
|
110
|
-
| `ellipsis.rows`
|
|
111
|
-
| `ellipsis.expandable` / `expanded` / `defaultExpanded` / `symbol` / `onExpand` | `MISSING`
|
|
112
|
-
| `ellipsis.tooltip` — tooltip only when truncated
|
|
113
|
-
| `ellipsis.suffix` / `onEllipsis`
|
|
114
|
-
| **`copyable`** (+ `text`/`format`/`icon`/`tooltips`/`onCopy`)
|
|
115
|
-
| `editable` (+ `triggerType`/`maxLength`/`autoSize`/`onChange`/`onCancel`)
|
|
116
|
-
| `actions` operation bar (v6.4)
|
|
117
|
-
| `Typography.Paragraph`
|
|
118
|
-
| `Typography.Link`
|
|
119
|
-
| `classNames` / `styles`
|
|
97
|
+
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
98
|
+
| ------------------------------------------------------------------------------ | ------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------- |
|
|
99
|
+
| `type: secondary\|success\|warning\|danger` | `RENAMED` | `TextToneProp`, `src/props/vocabulary/interaction.prop.ts:40` — `tone` | STANDARDS rule 9 |
|
|
100
|
+
| `strong` | `RENAMED` | `TextProp.weight` / `as="strong"`, `src/props/components/general.prop.ts` | — |
|
|
101
|
+
| `underline` / `delete` | `RENAMED` | `TextProp.decoration` (`underline` \| `line-through`) | — |
|
|
102
|
+
| `code` | `RENAMED` | `TextProp.chip` + `as="code"` | — |
|
|
103
|
+
| `keyboard` | `COVERED-ELSEWHERE` | `as="kbd"` — the element union in `general.prop.ts` | — |
|
|
104
|
+
| `italic` | `COVERED-ELSEWHERE` | `as="em"` | Semantic emphasis beats a visual flag |
|
|
105
|
+
| `disabled` | `COVERED-ELSEWHERE` | `tone="muted"` | — |
|
|
106
|
+
| `mark` — highlighted run | `MISSING` | no `mark` in `TextProp`, `general.prop.ts:44-120`; no `<mark>` in the `as` union | Add `as="mark"` to the element union (search-result highlighting) |
|
|
107
|
+
| `ellipsis` (boolean) | `PRESENT` | `TextProp.truncate`, `general.prop.ts:69` | — |
|
|
108
|
+
| `ellipsis.rows` | `RENAMED` | `TextProp.clamp`, `general.prop.ts:72` | — |
|
|
109
|
+
| `ellipsis.expandable` / `expanded` / `defaultExpanded` / `symbol` / `onExpand` | `MISSING` | `grep -rn "expandable" src/props/components/general.prop.ts` → nothing | Add `expandable` + the `expanded`/`defaultExpanded`/`onExpandedChange` triad on `clamp` |
|
|
110
|
+
| `ellipsis.tooltip` — tooltip only when truncated | `MISSING` | not in `TextProp` | Add `truncateTooltip?: boolean`; a bare `<Tooltip>` wrap fires even when nothing is clipped |
|
|
111
|
+
| `ellipsis.suffix` / `onEllipsis` | `MISSING` | not in `TextProp` | P2, add alongside `expandable` |
|
|
112
|
+
| **`copyable`** (+ `text`/`format`/`icon`/`tooltips`/`onCopy`) | `MISSING` | `grep -rn "copyable" src/ mcp/src/data/components.ts` → **0 hits**; nearest is `CredentialReveal.onCopy` (`mcp/src/data/components.ts:4026`), a secret-field component, not a text affordance | Add `copyable` on `Text`/`Heading` (see priority list) |
|
|
113
|
+
| `editable` (+ `triggerType`/`maxLength`/`autoSize`/`onChange`/`onCancel`) | `MISSING` | `grep -rn "editable" src/props/components/general.prop.ts` → nothing | GATE-0 ledger §4.1 — inline edit owns real behaviour |
|
|
114
|
+
| `actions` operation bar (v6.4) | `WONT-PORT` | — | Composition: `Flex` + `Button` |
|
|
115
|
+
| `Typography.Paragraph` | `COVERED-ELSEWHERE` | `Text as="p"` | — |
|
|
116
|
+
| `Typography.Link` | `COVERED-ELSEWHERE` | `TextProp.link` (`general.prop.ts`, with the underline/focus-mark contract) | Better than antd — it is an affordance, not a colour |
|
|
117
|
+
| `classNames` / `styles` | `WONT-PORT` | — | Ground rule §0.4 |
|
|
120
118
|
|
|
121
119
|
### 2.4 `Heading` vs antd `Typography.Title`
|
|
122
120
|
|
|
123
|
-
| Ant Design prop / behaviour
|
|
124
|
-
|
|
|
125
|
-
| `level: 1..5`
|
|
126
|
-
| `type`
|
|
127
|
-
| `ellipsis` (boolean)
|
|
128
|
-
| `ellipsis.rows` / `.expandable` / `.tooltip` | `MISSING`
|
|
129
|
-
| `copyable` / `editable`
|
|
130
|
-
| `code`/`mark`/`underline`/`delete`/`italic`
|
|
121
|
+
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
122
|
+
| -------------------------------------------- | ------------------- | --------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------ |
|
|
123
|
+
| `level: 1..5` | `MISSING` (partial) | `HeadingLevelProp = 1 \| 2 \| 3 \| 4`, `src/props/vocabulary/interaction.prop.ts` | P2 — either add `5` or document the 4-level canon in the catalog entry as deliberate |
|
|
124
|
+
| `type` | `RENAMED` | `HeadingProp.tone` | — |
|
|
125
|
+
| `ellipsis` (boolean) | `PRESENT` | `HeadingProp.truncate`, `general.prop.ts` | — |
|
|
126
|
+
| `ellipsis.rows` / `.expandable` / `.tooltip` | `MISSING` | no `clamp` on `HeadingProp` | P2 — a wrapped two-line page title is common |
|
|
127
|
+
| `copyable` / `editable` | `MISSING` | as 2.3 | Same rows as `Text` |
|
|
128
|
+
| `code`/`mark`/`underline`/`delete`/`italic` | `COVERED-ELSEWHERE` | wrap the run in `Text` | Headings do not need six inline flags |
|
|
131
129
|
|
|
132
130
|
### 2.5 `Flex` vs antd `Flex` + `Space`
|
|
133
131
|
|
|
134
|
-
| Ant Design prop / behaviour
|
|
135
|
-
|
|
|
136
|
-
| `vertical` / `orientation`
|
|
137
|
-
| `justify` / `align`
|
|
138
|
-
| `wrap` (boolean)
|
|
139
|
-
| `wrap: "wrap-reverse"`
|
|
140
|
-
| `gap` presets + numeric
|
|
141
|
-
| per-axis gap `[row, column]`
|
|
142
|
-
| `flex` (CSS shorthand)
|
|
143
|
-
| `component` — render as
|
|
144
|
-
| `Space.separator` / `split` — a rule BETWEEN children | `MISSING`
|
|
145
|
-
| `Space.Compact`
|
|
146
|
-
| `Space.align: baseline`
|
|
132
|
+
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
133
|
+
| ----------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------- |
|
|
134
|
+
| `vertical` / `orientation` | `RENAMED` | `FlexProp.direction`, `src/props/components/layout.prop.ts:161` — and it takes a responsive object, which antd's does not | — |
|
|
135
|
+
| `justify` / `align` | `PRESENT` | `FlexJustifyProp` / `FlexAlignProp`, `layout.prop.ts:142-143` | Closed unions, deliberately |
|
|
136
|
+
| `wrap` (boolean) | `PRESENT` | `layout.prop.ts:216` | — |
|
|
137
|
+
| `wrap: "wrap-reverse"` | `MISSING` | boolean only, `layout.prop.ts:216` | P2 — negligible demand |
|
|
138
|
+
| `gap` presets + numeric | `PRESENT` | `GapProp` + the `gapRaw` escape hatch, `layout.prop.ts:164`,`:193` | Ahead of antd (the escape is counted via `data-gap-raw`) |
|
|
139
|
+
| per-axis gap `[row, column]` | `MISSING` | `gap?: GapProp` is a single step, `layout.prop.ts:164` | P2 — `gap={{row,column}}` |
|
|
140
|
+
| `flex` (CSS shorthand) | `COVERED-ELSEWHERE` | `fill` / `grow` / `shrink` / `width`, `layout.prop.ts:162-163`,`:242`,`:252` | Named axes beat a CSS passthrough |
|
|
141
|
+
| `component` — render as | `RENAMED` | `FlexProp.as`, `layout.prop.ts:154` (closed union) | Narrower on purpose |
|
|
142
|
+
| `Space.separator` / `split` — a rule BETWEEN children | `MISSING` | `grep -n "separator" src/components/layout/flex.tsx` → nothing | **Composition** — interleave `<Separator orientation="vertical" />`; document it in the catalog `related` |
|
|
143
|
+
| `Space.Compact` | `MISSING` | see 2.2 | `ButtonGroup`, §4.1 |
|
|
144
|
+
| `Space.align: baseline` | `PRESENT` | `FlexAlignProp` includes `baseline`, `layout.prop.ts:142` | — |
|
|
147
145
|
|
|
148
146
|
### 2.6 `ResponsiveGrid` vs antd `Grid` (`Row` / `Col`)
|
|
149
147
|
|
|
150
|
-
| Ant Design prop / behaviour
|
|
151
|
-
|
|
|
152
|
-
| `Row.gutter` (number/object)
|
|
153
|
-
| `Row.gutter: [horizontal, vertical]` | `MISSING`
|
|
154
|
-
| `Row.justify` / `Row.align`
|
|
155
|
-
| `Col.span` + responsive `xs..xxl`
|
|
156
|
-
| breakpoint steps above `lg`
|
|
157
|
-
| `Col.order`
|
|
158
|
-
| `Col.offset` / `push` / `pull`
|
|
159
|
-
| `Grid.useBreakpoint()`
|
|
160
|
-
| `Row.wrap`
|
|
148
|
+
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
149
|
+
| ------------------------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------- |
|
|
150
|
+
| `Row.gutter` (number/object) | `RENAMED` | `ResponsiveGridProps.gap`, `src/components/layout/responsive-grid.tsx:16` | — |
|
|
151
|
+
| `Row.gutter: [horizontal, vertical]` | `MISSING` | single `gap`, `responsive-grid.tsx:16` | P2 |
|
|
152
|
+
| `Row.justify` / `Row.align` | `MISSING` | `grep -n "justify\|align" src/components/layout/responsive-grid.tsx` → nothing | P2 — `align` matters for unequal-height cards |
|
|
153
|
+
| `Col.span` + responsive `xs..xxl` | `PRESENT` | `ResponsiveGridItem span`, `responsive-grid.tsx:115-135` (takes `{base,sm,md,lg}`) | **Not in the MCP catalog** — sync gap, see §5 |
|
|
154
|
+
| breakpoint steps above `lg` | `MISSING` | `ResponsiveGridColumnsProp = number \| {base,sm,md,lg}`, `src/props/components/layout.prop.ts:256`, while `BreakpointProp` has `xl` (`interaction.prop.ts:140`) | P2 — add `xl` for consistency |
|
|
155
|
+
| `Col.order` | `MISSING` | not in `ResponsiveGridItem`, `responsive-grid.tsx:115` | P2 — real for mobile reordering |
|
|
156
|
+
| `Col.offset` / `push` / `pull` | `WONT-PORT` | — | 12-column raster arithmetic; this system counts columns, it does not index them |
|
|
157
|
+
| `Grid.useBreakpoint()` | `WONT-PORT` | — | Container queries + `--responsive-grid-*` are the model; a JS viewport hook re-introduces the thing they replace |
|
|
158
|
+
| `Row.wrap` | `PRESENT` | CSS Grid wraps by definition | — |
|
|
161
159
|
|
|
162
160
|
### 2.7 `Separator` vs antd `Divider`
|
|
163
161
|
|
|
164
|
-
| Ant Design prop / behaviour
|
|
165
|
-
|
|
|
166
|
-
| `orientation` (axis)
|
|
167
|
-
| `children` / title
|
|
168
|
-
| `titlePlacement: start\|end\|center`
|
|
169
|
-
| `plain`
|
|
170
|
-
| `size: small\|medium` (spacing)
|
|
171
|
-
| `variant: solid\|dashed\|dotted` / `dashed` | `MISSING`
|
|
172
|
-
| `orientationMargin`
|
|
173
|
-
| `classNames` / `styles`
|
|
162
|
+
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
163
|
+
| ------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------- |
|
|
164
|
+
| `orientation` (axis) | `PRESENT` | `SeparatorProp.orientation`, `src/props/components/layout.prop.ts:573` | — |
|
|
165
|
+
| `children` / title | `PRESENT` | `SeparatorProp.label`, `layout.prop.ts:579` | Plus a real `role="separator"` when labelled — ahead of antd |
|
|
166
|
+
| `titlePlacement: start\|end\|center` | `RENAMED` | `SeparatorProp.labelAlign`, `layout.prop.ts:581` | — |
|
|
167
|
+
| `plain` | `COVERED-ELSEWHERE` | `labelSize` + `tone`, `layout.prop.ts:568`,`:586` | — |
|
|
168
|
+
| `size: small\|medium` (spacing) | `RENAMED` | `SeparatorProp.space: GapProp`, `layout.prop.ts:569` | — |
|
|
169
|
+
| `variant: solid\|dashed\|dotted` / `dashed` | `MISSING` | `grep -n "dashed\|dotted" src/props/components/layout.prop.ts` → nothing in `SeparatorProp` | **Token** — `--separator-rule-style` (rule #44); not a prop |
|
|
170
|
+
| `orientationMargin` | `WONT-PORT` | — | Pixel offset (ground rule §0.4) → `--separator-label-inset`, which already exists |
|
|
171
|
+
| `classNames` / `styles` | `WONT-PORT` | — | Ground rule §0.4 |
|
|
174
172
|
|
|
175
173
|
### 2.8 `AppShell` + `Sidebar` vs antd `Layout` / `Layout.Sider`
|
|
176
174
|
|
|
177
|
-
| Ant Design prop / behaviour
|
|
178
|
-
|
|
|
179
|
-
| `Layout.hasSider` (SSR flicker guard)
|
|
180
|
-
| `Sider.collapsed`
|
|
181
|
-
| **`Sider.onCollapse`**
|
|
182
|
-
| **`Sider.collapsible` + `Sider.trigger`** (built-in toggle) | `MISSING`
|
|
183
|
-
| `Sider.defaultCollapsed`
|
|
184
|
-
| **`Sider.breakpoint` + `onBreakpoint`**
|
|
185
|
-
| `Sider.width` / `collapsedWidth`
|
|
186
|
-
| `Sider.theme: light\|dark`
|
|
187
|
-
| `Sider.reverseArrow` / `zeroWidthTriggerStyle`
|
|
188
|
-
| `Header` / `Content` / `Footer` slots
|
|
175
|
+
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
176
|
+
| ----------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
177
|
+
| `Layout.hasSider` (SSR flicker guard) | `COVERED-ELSEWHERE` | the track is derived from `sidebar` presence at render, `src/components/layout/app-shell.tsx:301` | No work |
|
|
178
|
+
| `Sider.collapsed` | `PRESENT` | `AppShellProp.sidebarCollapsed`, `src/props/components/layout.prop.ts:328`; `SidebarProp.collapsed`, `:1164` | — |
|
|
179
|
+
| **`Sider.onCollapse`** | `MISSING` | `AppShellProp` (`layout.prop.ts:318-421`) has no `onSidebarCollapsedChange`; `grep -n "onCollapse\|CollapsedChange" src/components/layout/app-shell.tsx` → nothing | Add `onSidebarCollapsedChange` — the `open`/`onOpenChange` triad shape the mobile drawer already uses (`layout.prop.ts:418-420`) |
|
|
180
|
+
| **`Sider.collapsible` + `Sider.trigger`** (built-in toggle) | `MISSING` | no toggle in `app-shell.tsx`; `mobileNav` gets one, the docked rail does not | Add a library-owned collapse trigger carrying `aria-expanded` + `aria-controls`. Today every consumer re-authors that ARIA pair |
|
|
181
|
+
| `Sider.defaultCollapsed` | `MISSING` | `sidebarCollapsed = false` is a plain default, `app-shell.tsx:30` | P2 — comes free with the triad above |
|
|
182
|
+
| **`Sider.breakpoint` + `onBreakpoint`** | `MISSING` | the step is a hardcoded query — `src/styles/shell-layout.css:1119` `@media (width <= 56.25rem)`; `grep -n "900\|breakpoint" src/tokens/components/shell.css` returns only prose | Tokenize as `--app-shell-collapse-breakpoint-width`, mirroring `--sheet-responsive-breakpoint-width` (`src/components/feedback/sheet.tsx:46`) |
|
|
183
|
+
| `Sider.width` / `collapsedWidth` | `COVERED-ELSEWHERE` | `--app-shell-sidebar-width` / `--app-shell-nav-rail-width`, documented at `layout.prop.ts:333`,`:349` | Component tokens (rule #44) — no prop |
|
|
184
|
+
| `Sider.theme: light\|dark` | `WONT-PORT` | — | Theme is a global token axis (`AppProviderProp.theme`), never a per-component prop |
|
|
185
|
+
| `Sider.reverseArrow` / `zeroWidthTriggerStyle` | `WONT-PORT` | — | Physical spelling + inline style (ground rule §0.4) |
|
|
186
|
+
| `Header` / `Content` / `Footer` slots | `PRESENT` | `AppShellProp.topbar`/`children`/`footer`, `layout.prop.ts:322`,`:321`,`:327` | Plus `navRail`, `navRailPosition`, `mobileNav` — well ahead |
|
|
189
187
|
|
|
190
188
|
### 2.9 `Sidebar` / `NavList` vs antd `Menu`
|
|
191
189
|
|
|
192
|
-
| Ant Design prop / behaviour
|
|
193
|
-
|
|
|
194
|
-
| `items` config array
|
|
195
|
-
| `mode="inline"` + submenus
|
|
196
|
-
| `inlineCollapsed` + collapsed tooltips/flyout
|
|
197
|
-
| `selectedKeys` / `defaultSelectedKeys`
|
|
198
|
-
| **`openKeys` / `defaultOpenKeys` / `onOpenChange`**
|
|
199
|
-
| `items[].icon`
|
|
200
|
-
| `items[].extra`
|
|
201
|
-
| `items[].title` (collapsed tooltip)
|
|
202
|
-
| `items[].danger`
|
|
203
|
-
| `items[].disabled`
|
|
204
|
-
| `type: "group"` / `"divider"`
|
|
205
|
-
| `inlineIndent`
|
|
206
|
-
| `expandIcon`
|
|
207
|
-
| `multiple` / `selectable={false}`
|
|
208
|
-
| `triggerSubMenuAction` / `subMenuOpenDelay` / `subMenuCloseDelay` | `WONT-PORT`
|
|
209
|
-
| `theme`
|
|
210
|
-
| `overflowedIndicator` (horizontal mode)
|
|
211
|
-
| `forceSubMenuRender`
|
|
212
|
-
|
|
213
|
-
### 2.10 `NavigationMenu` vs antd `Menu mode="horizontal"`
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
|
|
223
|
-
| `items` config array | `WONT-PORT` | — | Compound-part composition is the house style for overlay menus |
|
|
224
|
-
| `theme` / `classNames` / `styles` | `WONT-PORT` | — | Ground rule §0.4 |
|
|
190
|
+
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
191
|
+
| ----------------------------------------------------------------- | --------------------- | ------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------ |
|
|
192
|
+
| `items` config array | `PRESENT` | `SidebarProp.sections` / `NavListProp.items`, `src/props/components/layout.prop.ts:1146`,`:870` | House `items` dialect |
|
|
193
|
+
| `mode="inline"` + submenus | `PRESENT` | `SidebarItemProp.children`, `layout.prop.ts:858` | — |
|
|
194
|
+
| `inlineCollapsed` + collapsed tooltips/flyout | `PRESENT` | `src/components/layout/sidebar.tsx:436-531`; flyout entries at `:398-409` | Ahead of antd (real `menuitem` roles) |
|
|
195
|
+
| `selectedKeys` / `defaultSelectedKeys` | `RENAMED` | `SidebarProp.activeId`, `layout.prop.ts:1144` | Single-selection route rail |
|
|
196
|
+
| **`openKeys` / `defaultOpenKeys` / `onOpenChange`** | `MISSING` | expansion is local state — `src/components/layout/sidebar.tsx:271` `const [open, setOpen] = React.useState(active)` | Add `openIds` / `defaultOpenIds` / `onOpenIdsChange` (house triad spelling for a set) |
|
|
197
|
+
| `items[].icon` | `PRESENT` (required) | `SidebarItemProp.icon`, `layout.prop.ts:840` | Stricter than antd, deliberately |
|
|
198
|
+
| `items[].extra` | `RENAMED` | `SidebarItemProp.badge`, `layout.prop.ts:845` | — |
|
|
199
|
+
| `items[].title` (collapsed tooltip) | `PRESENT` | collapsed-rail tooltip via `SidebarLinkProp["aria-label"]`, `layout.prop.ts:901` | — |
|
|
200
|
+
| `items[].danger` | `MISSING` | `SidebarBadgeToneProp` tones the **badge**, not the row (`layout.prop.ts:829`) | P2 — a destructive row is rare in a route rail; add as `tone` on the item if a screen asks |
|
|
201
|
+
| `items[].disabled` | `PRESENT` | `layout.prop.ts:851` | — |
|
|
202
|
+
| `type: "group"` / `"divider"` | `PRESENT` | `SidebarSectionProp.label`, `layout.prop.ts:945` | — |
|
|
203
|
+
| `inlineIndent` | `COVERED-ELSEWHERE` | `--sidebar-nav-*` component tokens | Rule #44 |
|
|
204
|
+
| `expandIcon` | `MISSING` | fixed `ChevronDown`, `src/components/layout/sidebar.tsx:284`,`:506` | **Token**, not a prop (rule #44) |
|
|
205
|
+
| `multiple` / `selectable={false}` | `WONT-PORT` | — | A route rail has one current page |
|
|
206
|
+
| `triggerSubMenuAction` / `subMenuOpenDelay` / `subMenuCloseDelay` | `WONT-PORT` | — | APG disclosure is click; hover-only expansion fails keyboard parity |
|
|
207
|
+
| `theme` | `WONT-PORT` | — | Global token axis |
|
|
208
|
+
| `overflowedIndicator` (horizontal mode) | `WONT-PORT` (for now) | the horizontal menu that owned this axis, `NavigationMenu`, was deleted in v23 — see 2.10 | — |
|
|
209
|
+
| `forceSubMenuRender` | `WONT-PORT` | — | Renders hidden content to the a11y tree for no user-visible gain |
|
|
210
|
+
|
|
211
|
+
### 2.10 `NavigationMenu` vs antd `Menu mode="horizontal"` — REMOVED in v23
|
|
212
|
+
|
|
213
|
+
`NavigationMenu` was deleted (v23) together with `ContextMenu` and `Menubar`. Measured before
|
|
214
|
+
removing them: across the nine repositories that depend on `@godxjp/ui`, not one file imported any
|
|
215
|
+
of the three, and inside this package they were reachable only through the `components/ui` barrel
|
|
216
|
+
re-export. The rows this section used to track (`overflowedIndicator`, `items[].disabled`,
|
|
217
|
+
`subMenuCloseDelay`) are therefore not gaps any more — there is no component to have them.
|
|
218
|
+
|
|
219
|
+
Nothing replaces a horizontal menu today. If one is wanted, antd's `Menu mode="horizontal"` is the
|
|
220
|
+
shape to build, and its `overflowedIndicator` must ship with it (see §1 item 5).
|
|
225
221
|
|
|
226
222
|
### 2.11 `DropdownMenu` vs antd `Dropdown` (+ `Dropdown.Button`)
|
|
227
223
|
|
|
228
|
-
| Ant Design prop / behaviour
|
|
229
|
-
|
|
|
230
|
-
| `open` / `onOpenChange`
|
|
231
|
-
| `placement` (12 anchors)
|
|
232
|
-
| `arrow`
|
|
233
|
-
| `autoAdjustOverflow`
|
|
234
|
-
| `disabled` | `
|
|
235
|
-
| `menu.items` config array
|
|
236
|
-
| `trigger: ['contextMenu']`
|
|
237
|
-
| `trigger: ['hover']`
|
|
238
|
-
| `destroyOnHidden` / `forceRender`
|
|
239
|
-
| `getPopupContainer`
|
|
240
|
-
| `popupRender` / `dropdownRender`
|
|
241
|
-
| `menu.items[].danger`
|
|
242
|
-
| **`Dropdown.Button`** — split primary + menu | `MISSING`
|
|
243
|
-
| `Dropdown.Button.loading`
|
|
224
|
+
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
225
|
+
| -------------------------------------------- | ---------------------- | ----------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
226
|
+
| `open` / `onOpenChange` | `PRESENT` | `mcp/src/data/components.ts:7588` entry | — |
|
|
227
|
+
| `placement` (12 anchors) | `PRESENT` (6, logical) | `DropdownMenuPlacementProp`, `src/props/components/navigation.prop.ts` — `bottomStart`/`topEnd`… | antd's inline-side `left*`/`right*` are a documented `WONT-PORT` (physical in RTL) |
|
|
228
|
+
| `arrow` | `PRESENT` | `DropdownMenuContentProps.arrow`, `src/components/navigation/dropdown-menu.tsx:353` | Sized from `--dropdown-arrow-*` |
|
|
229
|
+
| `autoAdjustOverflow` | `PRESENT` | RAC popover collision handling, `dropdown-menu.tsx:383-404` | Always on |
|
|
230
|
+
| `disabled` | `PRESENT` | `disabled` on the root (antd's shape: it empties the trigger list), plus the trigger's own `disabled` | — |
|
|
231
|
+
| `menu.items` config array | `WONT-PORT` | — | Compound parts; the catalog `usage` block mandates the full tree |
|
|
232
|
+
| `trigger: ['contextMenu']` | `PRESENT` | `DropdownMenu trigger={['contextMenu']}`, `src/components/navigation/dropdown-menu.tsx` | v23: replaced the dedicated `ContextMenu`, which was deleted |
|
|
233
|
+
| `trigger: ['hover']` | `PRESENT` | `trigger` + `mouseEnterDelay`/`mouseLeaveDelay`, `dropdown-menu.tsx` | The earlier `WONT-PORT` said hover-only is a keyboard trap; it is not one here, because the keyboard opener (Enter / Space / Arrow) stays wired in every trigger mode |
|
|
234
|
+
| `destroyOnHidden` / `forceRender` | `PRESENT` | `forceMount` kept for contract shape, `dropdown-menu.tsx:364` | — |
|
|
235
|
+
| `getPopupContainer` | `WONT-PORT` | — | Portal escape hatch |
|
|
236
|
+
| `popupRender` / `dropdownRender` | `WONT-PORT` | — | Render-prop escape past the a11y contract (ground rule) |
|
|
237
|
+
| `menu.items[].danger` | `PRESENT` | `DropdownMenuItem variant="destructive"`, catalog `usage` | — |
|
|
238
|
+
| **`Dropdown.Button`** — split primary + menu | `MISSING` | `grep -rn "SplitButton\|Dropdown.Button" src/` → 0 hits | **Composition once `ButtonGroup` exists** (§4.1); do not add a third component |
|
|
239
|
+
| `Dropdown.Button.loading` | `MISSING` | as above | Same row |
|
|
244
240
|
|
|
245
241
|
### 2.12 `Breadcrumb` vs antd `Breadcrumb`
|
|
246
242
|
|
|
247
|
-
| Ant Design prop / behaviour
|
|
248
|
-
|
|
|
249
|
-
| `items`
|
|
250
|
-
| `items[].title` / `href`
|
|
251
|
-
| `items[].menu` (sibling dropdown)
|
|
252
|
-
| `separator`
|
|
253
|
-
| `itemRender`
|
|
254
|
-
| `params`
|
|
255
|
-
| `dropdownIcon`
|
|
256
|
-
| `type: "separator"` item (per-gap separator)
|
|
257
|
-
| `items[].onClick`
|
|
258
|
-
| `<nav aria-label>` + `<ol>` + `aria-current="page"` | `PRESENT`
|
|
243
|
+
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
244
|
+
| --------------------------------------------------- | ------------------- | --------------------------------------------------------------------------------------------------------------- | -------------------------------------------------- |
|
|
245
|
+
| `items` | `PRESENT` | `BreadcrumbProp`, `src/props/vocabulary/navigation.prop.ts:43` | — |
|
|
246
|
+
| `items[].title` / `href` | `RENAMED` | `label` / `to`, `navigation.prop.ts:34-37` | — |
|
|
247
|
+
| `items[].menu` (sibling dropdown) | `PRESENT` | `BreadcrumbItemMenuProp`, `navigation.prop.ts:26-30`; rendered at `src/components/layout/breadcrumb.tsx:88-120` | Trigger is a real `<button>` — ahead of antd |
|
|
248
|
+
| `separator` | `PRESENT` | `BreadcrumbSeparatorProp`, `navigation.prop.ts:47`; `breadcrumb.tsx:45-46` | `""` removes it, always `aria-hidden` |
|
|
249
|
+
| `itemRender` | `PRESENT` | `BreadcrumbItemRenderProp`, `navigation.prop.ts:57`; `breadcrumb.tsx:75` | — |
|
|
250
|
+
| `params` | `WONT-PORT` | — | Router concern; `itemRender` covers it |
|
|
251
|
+
| `dropdownIcon` | `MISSING` | fixed `ChevronDown`, `src/components/layout/breadcrumb.tsx:99` | **Token** (`--breadcrumb-menu-icon-*`), not a prop |
|
|
252
|
+
| `type: "separator"` item (per-gap separator) | `MISSING` | one `separator` for the whole trail, `breadcrumb.tsx:45` | P2 — rare |
|
|
253
|
+
| `items[].onClick` | `COVERED-ELSEWHERE` | `itemRender` | — |
|
|
254
|
+
| `<nav aria-label>` + `<ol>` + `aria-current="page"` | `PRESENT` | `breadcrumb.tsx:49-50`,`:128` | Ahead of antd, which emits a bare `<nav>` |
|
|
259
255
|
|
|
260
256
|
### 2.13 `Pagination` vs antd `Pagination`
|
|
261
257
|
|
|
262
|
-
| Ant Design prop / behaviour
|
|
263
|
-
|
|
|
264
|
-
| `current`
|
|
265
|
-
| **`defaultCurrent` / `defaultPageSize`**
|
|
266
|
-
| `total` / `pageSize` / `pageSizeOptions`
|
|
267
|
-
| `showSizeChanger` / `showTotal` / `showQuickJumper` | `PRESENT`
|
|
268
|
-
| `hideOnSinglePage` / `simple` / `disabled`
|
|
269
|
-
| `size: small\|medium`
|
|
270
|
-
| `align`
|
|
271
|
-
| `responsive`
|
|
272
|
-
| `onChange` / `onShowSizeChange`
|
|
273
|
-
| `itemRender` — render pages as real `<a href>`
|
|
274
|
-
| `showLessItems`
|
|
275
|
-
| `showTitle` (native `title=`)
|
|
276
|
-
| `components`
|
|
258
|
+
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
259
|
+
| --------------------------------------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ |
|
|
260
|
+
| `current` | `RENAMED` | `PaginationProp.value`, `src/props/components/navigation.prop.ts` | — |
|
|
261
|
+
| **`defaultCurrent` / `defaultPageSize`** | `MISSING` | `PaginationProp` declares `value`/`total`/`pageSize` but no `defaultValue`/`defaultPageSize`; `grep -n "defaultValue\|useState" src/components/navigation/pagination.tsx` → only `jumperDraft` state (`:156`) | Add `defaultValue` / `defaultPageSize` — **STANDARDS rule 7** requires the whole triad, so this is a vocabulary violation, not only a parity gap |
|
|
262
|
+
| `total` / `pageSize` / `pageSizeOptions` | `PRESENT` | `PaginationProp`, navigation.prop.ts | Catalog entry omits `total`/`pageSize` — sync gap, §5 |
|
|
263
|
+
| `showSizeChanger` / `showTotal` / `showQuickJumper` | `PRESENT` | `PaginationProp` | `showQuickJumper` even takes `{goButton}` |
|
|
264
|
+
| `hideOnSinglePage` / `simple` / `disabled` | `PRESENT` | `PaginationProp` | `hideOnSinglePage` defaults `true` (antd defaults `false`) — documented |
|
|
265
|
+
| `size: small\|medium` | `RENAMED` | `PaginationSizeProp = "sm" \| "md"`, navigation.prop.ts | — |
|
|
266
|
+
| `align` | `PRESENT` | `PaginationAlignProp` — `start`/`center`/`end`, logical | Ahead of antd (RTL-safe) |
|
|
267
|
+
| `responsive` | `PRESENT` | `PaginationProp.responsive` | Documented measurement at 390px |
|
|
268
|
+
| `onChange` / `onShowSizeChange` | `RENAMED` | `onValueChange(page, pageSize)` | One callback carries both |
|
|
269
|
+
| `itemRender` — render pages as real `<a href>` | `MISSING` | `grep -n "itemRender" src/components/navigation/pagination.tsx` → nothing | P2 — needed for crawlable/middle-clickable list pages |
|
|
270
|
+
| `showLessItems` | `MISSING` | not in `PaginationProp` | P2 → token or fold into `responsive` |
|
|
271
|
+
| `showTitle` (native `title=`) | `WONT-PORT` | — | `title` is not an accessible affordance; every control already has `aria-label` (`pagination.tsx:253`,`:332`) |
|
|
272
|
+
| `components` | `WONT-PORT` | — | Render-prop escape hatch |
|
|
277
273
|
|
|
278
274
|
### 2.14 `Dialog` vs antd `Modal`
|
|
279
275
|
|
|
280
|
-
| Ant Design prop / behaviour
|
|
281
|
-
|
|
|
282
|
-
| `open` / `onCancel`
|
|
283
|
-
| `title` / `footer`
|
|
284
|
-
| **`width`**
|
|
285
|
-
| **`maskClosable` / `keyboard`** — refuse dismissal
|
|
286
|
-
| `centered`
|
|
287
|
-
| `loading` (skeleton body)
|
|
288
|
-
| `afterClose`
|
|
289
|
-
| `destroyOnHidden` / `forceRender`
|
|
290
|
-
| `zIndex` / `wrapClassName` / `modalRender` / `styles` | `WONT-PORT` | —
|
|
291
|
-
| `mask: { blur }`
|
|
292
|
-
| **`Modal.confirm/info/success/error/warning`**
|
|
293
|
-
| `Modal.useModal()` / `Modal.destroyAll()`
|
|
276
|
+
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
277
|
+
| ----------------------------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
278
|
+
| `open` / `onCancel` | `PRESENT` | `open`/`onOpenChange`, `src/components/feedback/dialog.tsx:90-94` | — |
|
|
279
|
+
| `title` / `footer` | `PRESENT` | `DialogHeaderProps.title`/`subtitle`/`extra`/`tone`, `dialog.tsx:329-333`; `DialogFooter` part | `extra`/`tone` are ahead of antd |
|
|
280
|
+
| **`width`** | `MISSING` | `DialogContentProps` (`dialog.tsx:287-294`) has `showClose`/`overlayClassName`/`forceMount`/`onCloseAutoFocus` and no size axis; the catalog's own example is `<DialogContent className="max-w-lg">` (`mcp/src/data/components.ts`, Dialog `example`) | Add `width?: WidthProp` — copy `SheetContentProps.width` verbatim (`src/components/feedback/sheet.tsx:264`) |
|
|
281
|
+
| **`maskClosable` / `keyboard`** — refuse dismissal | `MISSING` | `isDismissable` is passed as a hardcoded literal, `dialog.tsx:310` (`<DialogShell isDismissable …>`); `grep -n "onInteractOutside\|onEscapeKeyDown" src/components/feedback/dialog.tsx` → nothing | Add `dismissible?: boolean` (positive boolean, house rule). Today the only escape is switching to `AlertDialog`, which changes the ARIA role |
|
|
282
|
+
| `centered` | `PRESENT` | centred by default | — |
|
|
283
|
+
| `loading` (skeleton body) | `MISSING` | not in `DialogContentProps`, `dialog.tsx:287` | P2 |
|
|
284
|
+
| `afterClose` | `MISSING` | only `onCloseAutoFocus`, `dialog.tsx:294` | P2 — form reset after the exit animation |
|
|
285
|
+
| `destroyOnHidden` / `forceRender` | `PRESENT` | `forceMount`, `dialog.tsx:292` | — |
|
|
286
|
+
| `zIndex` / `wrapClassName` / `modalRender` / `styles` | `WONT-PORT` | — | Tokens + ground rule §0.4 |
|
|
287
|
+
| `mask: { blur }` | `WONT-PORT` | — | `--dialog-overlay-*` token |
|
|
288
|
+
| **`Modal.confirm/info/success/error/warning`** | `WONT-PORT` | — | Imperative API bypassing React state. `AlertDialog` (`mcp/src/data/components.ts:6890`) is the declarative answer — record the refusal in its catalog entry so nobody re-adds it |
|
|
289
|
+
| `Modal.useModal()` / `Modal.destroyAll()` | `WONT-PORT` | — | Same reason |
|
|
294
290
|
|
|
295
291
|
### 2.15 `Sheet` vs antd `Drawer`
|
|
296
292
|
|
|
297
|
-
| Ant Design prop / behaviour
|
|
298
|
-
|
|
|
299
|
-
| `open` / `onClose`
|
|
300
|
-
| `placement`
|
|
301
|
-
| `width` / `size`
|
|
302
|
-
| `height` (top/bottom sheets)
|
|
303
|
-
| `title` / `extra` / `footer`
|
|
304
|
-
| `closable` / `closeIcon`
|
|
305
|
-
| `keyboard` (esc)
|
|
306
|
-
| `maskClosable`
|
|
307
|
-
| responsive side→bottom swap
|
|
308
|
-
| `loading` (skeleton)
|
|
309
|
-
| `afterOpenChange`
|
|
310
|
-
| `resizable` / `maxSize`
|
|
311
|
-
| `push` (nested drawers)
|
|
312
|
-
| `getContainer` / `rootStyle` / `styles` | `WONT-PORT`
|
|
293
|
+
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
294
|
+
| --------------------------------------- | -------------------------------- | ----------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------- |
|
|
295
|
+
| `open` / `onClose` | `PRESENT` | `src/components/feedback/sheet.tsx:135` | — |
|
|
296
|
+
| `placement` | `RENAMED` (physical, deliberate) | `side`, `sheet.tsx:237-249` — carries an explicit `rtl-ignore: named physical side` and a written rationale | Documented exception to the logical-spelling rule; keep, but the reason belongs in the catalog entry too |
|
|
297
|
+
| `width` / `size` | `PRESENT` | `SheetContentProps.width: WidthProp`, `sheet.tsx:264` | Caps at the viewport, `sheet.tsx:327` |
|
|
298
|
+
| `height` (top/bottom sheets) | `MISSING` | `widthSet` only applies when `horizontal`, `sheet.tsx:297` | P2 |
|
|
299
|
+
| `title` / `extra` / `footer` | `PRESENT` | `SheetHeader title/subtitle/extra/tone` + `SheetFooter`, catalog entry | — |
|
|
300
|
+
| `closable` / `closeIcon` | `PRESENT` | `showCloseButton` on `SheetContent` | — |
|
|
301
|
+
| `keyboard` (esc) | `PRESENT` | RAC `ModalOverlay`, `sheet.tsx` | — |
|
|
302
|
+
| `maskClosable` | `MISSING` | same defect as 2.14 | Same `dismissible` fix, applied to both overlays |
|
|
303
|
+
| responsive side→bottom swap | `PRESENT` | `responsive="auto"` + `useSheetResponsiveMode`, `sheet.tsx:75-92` | **No antd equivalent** — ahead |
|
|
304
|
+
| `loading` (skeleton) | `MISSING` | not in `SheetContentProps`, `sheet.tsx:255-270` | P2 |
|
|
305
|
+
| `afterOpenChange` | `MISSING` | not in `SheetProps`, `sheet.tsx:135` | P2 |
|
|
306
|
+
| `resizable` / `maxSize` | `MISSING` | not present | P2 — `ResizablePanel` covers the docked case |
|
|
307
|
+
| `push` (nested drawers) | `WONT-PORT` | — | The catalog already forbids nesting a Sheet in a Dialog |
|
|
308
|
+
| `getContainer` / `rootStyle` / `styles` | `WONT-PORT` | — | Ground rule §0.4 |
|
|
313
309
|
|
|
314
310
|
### 2.16 `SplitPane` / `ResizablePanel` vs antd `Splitter`; `AppProvider` vs antd `App`
|
|
315
311
|
|
|
316
|
-
| Ant Design prop / behaviour
|
|
317
|
-
|
|
|
318
|
-
| `Splitter.orientation`
|
|
319
|
-
| `Panel.defaultSize` / `min` / `max` / `collapsible` | `PRESENT`
|
|
320
|
-
| `onResize`
|
|
321
|
-
| `onResizeStart` / `onResizeEnd`
|
|
322
|
-
| `lazy`
|
|
323
|
-
| `onDraggerDoubleClick` (reset to default)
|
|
324
|
-
| `draggerIcon`
|
|
325
|
-
| `destroyOnHidden`
|
|
326
|
-
| handle a11y (`role="separator"`, arrow-key resize)
|
|
327
|
-
| antd `App.message` / `.notification`
|
|
328
|
-
| antd `App.useApp().modal`
|
|
329
|
-
| antd `App`/`ConfigProvider` scope
|
|
312
|
+
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
313
|
+
| --------------------------------------------------- | -------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------- |
|
|
314
|
+
| `Splitter.orientation` | `PRESENT` | `ResizablePanelGroup orientation`, `mcp/src/data/components.ts:12545` entry | `SplitPane` is inline-axis-only by design (it is a static two-column layout, not a splitter) |
|
|
315
|
+
| `Panel.defaultSize` / `min` / `max` / `collapsible` | `PRESENT` | catalog entry props `defaultSize`, `minSize`, `maxSize`, `collapsible` | — |
|
|
316
|
+
| `onResize` | `PRESENT` | catalog entry | — |
|
|
317
|
+
| `onResizeStart` / `onResizeEnd` | `MISSING` | catalog lists only `onResize`; `grep -n "onResizeEnd\|onDragging" src/components/layout/resizable.tsx` → nothing | P2 — needed to persist a layout only on drop |
|
|
318
|
+
| `lazy` | `MISSING` | not exposed, `src/components/layout/resizable.tsx:6-17` | P2 |
|
|
319
|
+
| `onDraggerDoubleClick` (reset to default) | `MISSING` | not exposed | P2 — a real interaction-feel expectation |
|
|
320
|
+
| `draggerIcon` | `WONT-PORT` | — | Token (`--resizable-handle-*`) |
|
|
321
|
+
| `destroyOnHidden` | `MISSING` | not exposed | P2 |
|
|
322
|
+
| handle a11y (`role="separator"`, arrow-key resize) | `PRESENT` | `ResizablePrimitive.Separator`, `resizable.tsx:57`; plus the library's own scroll-region tab stop, `resizable.tsx:26-38` | Ahead of antd |
|
|
323
|
+
| antd `App.message` / `.notification` | `COVERED-ELSEWHERE` | `Toaster` (`mcp/src/data/components.ts:7299`) | — |
|
|
324
|
+
| antd `App.useApp().modal` | `WONT-PORT` | — | Imperative; `Dialog`/`AlertDialog` are the declarative answer |
|
|
325
|
+
| antd `App`/`ConfigProvider` scope | `PRESENT` and beyond | `AppProviderProp`, `src/props/components/app.prop.ts:27-95` — locale, timezone, date/time format, theme, brand, density, fontSize, scaling, per-axis persistence | No antd counterpart for most of it |
|
|
330
326
|
|
|
331
327
|
### 2.17 `ErrorSurface` vs antd `Result`
|
|
332
328
|
|
|
333
|
-
| Ant Design prop / behaviour
|
|
334
|
-
|
|
|
335
|
-
| `status: 403\|404\|500`
|
|
336
|
-
| `title` / `subTitle` / `extra` / `icon`
|
|
337
|
-
| `status: success\|error\|info\|warning` (non-HTTP result page) | `COVERED-ELSEWHERE` | `EmptyState` + `tone` (`data-display`)
|
|
338
|
-
| `requestId` / `permission` / `organization` / `maintenance`
|
|
339
|
-
| copy control for `requestId`
|
|
329
|
+
| Ant Design prop / behaviour | Status | Evidence | Verdict |
|
|
330
|
+
| -------------------------------------------------------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------- |
|
|
331
|
+
| `status: 403\|404\|500` | `PRESENT` | `ErrorSurfaceStatusProp` (400/403/404/500/503), `src/props/components/layout.prop.ts:763` | Wider than antd |
|
|
332
|
+
| `title` / `subTitle` / `extra` / `icon` | `PRESENT` | `layout.prop.ts:765`,`:767`,`:773`,`:778` | `extra` is deliberately a single slot |
|
|
333
|
+
| `status: success\|error\|info\|warning` (non-HTTP result page) | `COVERED-ELSEWHERE` | `EmptyState` + `tone` (`data-display`) | Add a `related` cross-link on both sides |
|
|
334
|
+
| `requestId` / `permission` / `organization` / `maintenance` | `PRESENT` | `layout.prop.ts:790`,`:795`,`:800`,`:802` | No antd equivalent; ISO-8601 + IANA + `Intl.formatRange` |
|
|
335
|
+
| copy control for `requestId` | `MISSING` | the doc comment says it is rendered "so it can be read out or copied accurately" (`layout.prop.ts:787`) but there is no copy affordance anywhere | Falls out of the `Text copyable` row (2.3) |
|
|
340
336
|
|
|
341
337
|
---
|
|
342
338
|
|
|
@@ -344,47 +340,45 @@ renders `requestId` in monospace explicitly "so it can be read out or copied acc
|
|
|
344
340
|
|
|
345
341
|
### P0 — breaks a real screen
|
|
346
342
|
|
|
347
|
-
|
|
343
|
+
_(none)_. Every gap below has a workaround; the ones that do not are in the other groups
|
|
348
344
|
(`Tree`, count badge, `List`/`Masonry`), already specced.
|
|
349
345
|
|
|
350
346
|
### P1 — a workaround exists but it is hand-rolled and a11y-risky
|
|
351
347
|
|
|
352
|
-
| #
|
|
353
|
-
| --- |
|
|
354
|
-
| 1
|
|
355
|
-
| 2
|
|
356
|
-
| 3
|
|
357
|
-
| 4
|
|
358
|
-
| 5
|
|
359
|
-
| 6
|
|
360
|
-
|
|
|
361
|
-
|
|
|
362
|
-
|
|
|
363
|
-
| 10 | **No joined control group / split button** | `Button` | `grep -rn "ButtonGroup\|SplitButton\|Space.Compact" src/ mcp/` → 0 hits | `ButtonGroup` — GATE-0 ledger §4.1 |
|
|
348
|
+
| # | Gap | Component | Evidence | Fix |
|
|
349
|
+
| --- | -------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------- |
|
|
350
|
+
| 1 | **No `width` on `Dialog`** — the catalog itself teaches `className="max-w-lg"`, the utility geometry `ui-audit` blocks everywhere else | `Dialog` | `src/components/feedback/dialog.tsx:287-294`; catalog `example` | `width?: WidthProp`, copied from `src/components/feedback/sheet.tsx:264` |
|
|
351
|
+
| 2 | **No way to refuse dismissal** on `Dialog`/`Sheet` — a dirty form dies on an outside click; the only escape changes the ARIA role to `alertdialog` | `Dialog`, `Sheet` | `dialog.tsx:310` (`isDismissable` hardcoded); no `onInteractOutside`/`onEscapeKeyDown` | `dismissible?: boolean` on both content parts |
|
|
352
|
+
| 3 | **`Pagination` is controlled-only** — violates STANDARDS rule 7 as well as antd `defaultCurrent` | `Pagination` | `src/props/components/navigation.prop.ts` (`PaginationProp`); `src/components/navigation/pagination.tsx` holds no page state | `defaultValue` + `defaultPageSize` |
|
|
353
|
+
| 4 | **No shell collapse handler or trigger** — every consumer re-authors the toggle's `aria-expanded`/`aria-controls` | `AppShell` | `src/components/layout/app-shell.tsx:30`, `:301`; `AppShellProp` `layout.prop.ts:318-421` | `onSidebarCollapsedChange` + a library-owned trigger |
|
|
354
|
+
| 5 | **Shell collapse breakpoint is a hardcoded media query**, while the overlay family's equivalent is a token | `AppShell` | `src/styles/shell-layout.css:1119` (`@media (width <= 56.25rem)`) vs `--sheet-responsive-breakpoint-width` (`src/components/feedback/sheet.tsx:46`) | Tokenize as `--app-shell-collapse-breakpoint-width` |
|
|
355
|
+
| 6 | **Submenu open state is unreachable** — cannot persist which sections are open | `Sidebar`, `NavList` | `src/components/layout/sidebar.tsx:271` | `openIds` / `defaultOpenIds` / `onOpenIdsChange` |
|
|
356
|
+
| 8 | **No `copyable` anywhere in the library** — an id rendered explicitly _to be copied_ has no copy control | `Text`, `Heading`, `ErrorSurface.requestId` | `grep -rn "copyable" src/` → 0 hits; `src/props/components/layout.prop.ts:787` | `copyable` on `Text`/`Heading` (localized "Copy"/"Copied" via `t()`, `navigator.clipboard`, live-region confirmation) |
|
|
357
|
+
| 9 | **Clamped text cannot expand** — `clamp` with no "show more" is a content dead end | `Text` | `src/props/components/general.prop.ts:69-77` — `truncate`/`clamp` only | `expandable` + `expanded`/`defaultExpanded`/`onExpandedChange` |
|
|
358
|
+
| 10 | **No joined control group / split button** | `Button` | `grep -rn "ButtonGroup\|SplitButton\|Space.Compact" src/ mcp/` → 0 hits | `ButtonGroup` — GATE-0 ledger §4.1 |
|
|
364
359
|
|
|
365
360
|
### P2 — nice to have
|
|
366
361
|
|
|
367
|
-
| Gap
|
|
368
|
-
|
|
|
369
|
-
| `size: "default"` alias should be `md`
|
|
370
|
-
| `loading: { delay }`
|
|
371
|
-
| `mark` (highlighted run)
|
|
372
|
-
| `ellipsis.tooltip` (only when actually clipped)
|
|
373
|
-
| `ellipsis.suffix` / `onEllipsis`
|
|
374
|
-
| `editable` (inline edit)
|
|
375
|
-
| `level: 5`; `clamp`/`ellipsis.tooltip` on headings
|
|
376
|
-
| `wrap: "wrap-reverse"`; per-axis `gap`
|
|
377
|
-
| `Space.separator` (rule between children)
|
|
378
|
-
| `Row.justify` / `Row.align`; `Col.order`; per-axis gutter; `xl` step
|
|
379
|
-
| `variant: dashed\|dotted`
|
|
380
|
-
| `items[].danger`; `expandIcon`
|
|
381
|
-
| `
|
|
382
|
-
| `
|
|
383
|
-
| `
|
|
384
|
-
| `
|
|
385
|
-
| `
|
|
386
|
-
| `
|
|
387
|
-
| `Dropdown.Button` (split button) | `DropdownMenu` | **Composition** over `ButtonGroup` once it exists |
|
|
362
|
+
| Gap | Component | Verdict |
|
|
363
|
+
| -------------------------------------------------------------------------------- | ---------------- | ---------------------------------------------------------------------------- |
|
|
364
|
+
| `size: "default"` alias should be `md` | `Button` | Deprecate the alias (STANDARDS rule 10) |
|
|
365
|
+
| `loading: { delay }` | `Button` | `loadingDelay?: number` |
|
|
366
|
+
| `mark` (highlighted run) | `Text` | Add `"mark"` to the `as` union |
|
|
367
|
+
| `ellipsis.tooltip` (only when actually clipped) | `Text` | `truncateTooltip?: boolean` |
|
|
368
|
+
| `ellipsis.suffix` / `onEllipsis` | `Text` | with `expandable` |
|
|
369
|
+
| `editable` (inline edit) | `Text` | GATE-0 §4.1 — a separate spec, not a `Text` prop |
|
|
370
|
+
| `level: 5`; `clamp`/`ellipsis.tooltip` on headings | `Heading` | Add `5` or document the 4-level canon |
|
|
371
|
+
| `wrap: "wrap-reverse"`; per-axis `gap` | `Flex` | `gap={{row,column}}` |
|
|
372
|
+
| `Space.separator` (rule between children) | `Flex` | **Composition** — interleave `Separator orientation="vertical"`; document it |
|
|
373
|
+
| `Row.justify` / `Row.align`; `Col.order`; per-axis gutter; `xl` step | `ResponsiveGrid` | — |
|
|
374
|
+
| `variant: dashed\|dotted` | `Separator` | **Token** `--separator-rule-style` |
|
|
375
|
+
| `items[].danger`; `expandIcon` | `Sidebar` | `expandIcon` → token |
|
|
376
|
+
| `dropdownIcon`; per-gap `type:"separator"` item | `Breadcrumb` | `dropdownIcon` → token |
|
|
377
|
+
| `itemRender`; `showLessItems` | `Pagination` | `itemRender` matters for crawlable list pages |
|
|
378
|
+
| `loading` (skeleton); `afterClose` | `Dialog` | — |
|
|
379
|
+
| `height` for top/bottom sheets; `loading`; `afterOpenChange`; `resizable` | `Sheet` | — |
|
|
380
|
+
| `onResizeStart`/`onResizeEnd`; `lazy`; `onDraggerDoubleClick`; `destroyOnHidden` | `ResizablePanel` | double-click-to-reset is an interaction-feel expectation |
|
|
381
|
+
| `Dropdown.Button` (split button) | `DropdownMenu` | **Composition** over `ButtonGroup` once it exists |
|
|
388
382
|
|
|
389
383
|
---
|
|
390
384
|
|
|
@@ -396,50 +390,50 @@ Only two things in these three groups survive `docs/COMPOSITION-VS-COMPONENT.md`
|
|
|
396
390
|
|
|
397
391
|
#### `ButtonGroup` — joined controls (antd `Button.Group` / `Space.Compact`, and the base of `Dropdown.Button`)
|
|
398
392
|
|
|
399
|
-
| #
|
|
400
|
-
| --- |
|
|
401
|
-
| C1
|
|
402
|
-
| C2
|
|
403
|
-
| C3
|
|
404
|
-
| C4
|
|
405
|
-
| C5
|
|
406
|
-
| C6
|
|
407
|
-
| C7
|
|
393
|
+
| # | Criterion | Verdict | Reasoning |
|
|
394
|
+
| --- | --------------------------------------------- | --------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
395
|
+
| C1 | Universal, not design-specific | **PASS** | Segmented actions, split buttons and welded input+button rows appear in every admin app; antd, Radix, Fluent and SLDS all ship one. |
|
|
396
|
+
| C2 | Encapsulates reusable BEHAVIOR | **PASS** (borderline) | Little state, but a real contract: an `aria-label`led `role="group"`, and for the split-button shape the primary `<button>` + a separately-named menu-trigger `<button>` pair the APG requires. Comparable to `StatCard`, the documented borderline case. |
|
|
397
|
+
| C3 | Not expressible from primitives + tokens | **PASS** | Joining requires zeroing the inner corner radii and collapsing the shared border per child — per-child geometry the app would have to write as `[&>*:not(:first-child)]` utilities, which `ui-audit`'s `no-utility-layout` blocks. This is exactly the `Flex fill` situation recorded at `src/props/components/layout.prop.ts:229-241`. |
|
|
398
|
+
| C4 | Single responsibility + controlled vocabulary | **PASS** | One job (weld a row of controls). API: `orientation`, `size` (`xs\|sm\|md\|lg`, forwarded to children), `attached`, `label`. No `value`/selection axis — that is `ToggleGroup`/`Segmented`. |
|
|
399
|
+
| C5 | Fully token-themeable | **PASS** | Reads `--button-radius`, `--radius-sharp` and the existing control tokens; nothing new baked. |
|
|
400
|
+
| C6 | Earns the international contract | **PASS** | Needs `role="group"` + a required accessible name, and its joining must be **logical** (`border-start-start-radius`), which is precisely what an app hand-rolling it with `rounded-l-none` gets wrong in RTL. |
|
|
401
|
+
| C7 | Earns its bundle cost | **PASS** | Small (CSS + a thin wrapper), and it unlocks `Dropdown.Button` and welded `Input + Button` rows without a second component. |
|
|
408
402
|
|
|
409
403
|
**Verdict: framework component.** Note the boundary explicitly in the catalog: `ToggleGroup` and
|
|
410
|
-
`Segmented` stay the
|
|
404
|
+
`Segmented` stay the _selection_ controls; `ButtonGroup` is _actions only_.
|
|
411
405
|
|
|
412
406
|
#### `EditableText` — inline edit (antd `Typography editable`)
|
|
413
407
|
|
|
414
|
-
| #
|
|
415
|
-
| --- |
|
|
416
|
-
| C1
|
|
417
|
-
| C2
|
|
418
|
-
| C3
|
|
419
|
-
| C4
|
|
420
|
-
| C5
|
|
421
|
-
| C6
|
|
422
|
-
| C7
|
|
408
|
+
| # | Criterion | Verdict | Reasoning |
|
|
409
|
+
| --- | ---------------------------------- | ----------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
410
|
+
| C1 | Universal | **PASS** | Rename-in-place on a title, a list row, a board card. |
|
|
411
|
+
| C2 | Reusable behaviour | **PASS** | Display↔edit swap, Enter commits / Escape cancels / blur commits, focus return to the trigger, `aria-live` confirmation, `maxLength`, autosize. Every one of these is got wrong by a hand-rolled version. |
|
|
412
|
+
| C3 | Not composable today | **PASS** | `Text` + `Input` + local state reproduces the look and none of the focus/keyboard contract. |
|
|
413
|
+
| C4 | Single responsibility + vocabulary | **PASS** | `value`/`defaultValue`/`onValueChange` + `editing`/`defaultEditing`/`onEditingChange`. |
|
|
414
|
+
| C5 | Token-themeable | **PASS** | Reuses `--input-*` and the type scale. |
|
|
415
|
+
| C6 | International contract | **PASS** | Needs a localized edit/save/cancel accessible name set and IME-safe commit (a JA/VI composition Enter must not commit). That IME rule alone is why this must not be per-app. |
|
|
416
|
+
| C7 | Bundle cost | **PASS** (weaker) | Narrower reach than `ButtonGroup`. |
|
|
423
417
|
|
|
424
418
|
**Verdict: framework component, but P2** — write it as its own spec, not as a `Text` prop. Attaching
|
|
425
419
|
an editing lifecycle to the typographic primitive would make every `<Text>` in the bundle carry it.
|
|
426
420
|
|
|
427
421
|
### 4.2 These antd components are **compositions** here, not gaps
|
|
428
422
|
|
|
429
|
-
| antd
|
|
430
|
-
|
|
|
431
|
-
| `Space`
|
|
432
|
-
| `Divider`
|
|
433
|
-
| `Grid` / `Row` / `Col`
|
|
434
|
-
| `Affix`
|
|
435
|
-
| `Anchor`
|
|
436
|
-
| `FloatButton` / `BackTop`
|
|
437
|
-
| `Layout.Header` / `Content` / `Footer`
|
|
438
|
-
| `App` (static-method context)
|
|
439
|
-
| `PageHeader` (removed from antd core)
|
|
440
|
-
| `Result`
|
|
441
|
-
| `Menu` `items` config array as the only API | Both dialects exist already: config-array for the route rails, compound parts for the overlay menus.
|
|
442
|
-
| `Dropdown.Button`
|
|
423
|
+
| antd | Why it is not a gap | Build it with |
|
|
424
|
+
| ------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- |
|
|
425
|
+
| `Space` | `gap` already lives on the layout primitive, with a counted escape hatch (`data-gap-raw`). C3 fails outright. | `Flex gap` / `ResponsiveGrid gap` |
|
|
426
|
+
| `Divider` | Exists. | `Separator` (`src/props/components/layout.prop.ts:567`) |
|
|
427
|
+
| `Grid` / `Row` / `Col` | Exists, in the house `{base,sm,md,lg}` count model rather than a 12-column raster. | `ResponsiveGrid` + `ResponsiveGrid.Item span` (`src/components/layout/responsive-grid.tsx:115`) |
|
|
428
|
+
| `Affix` | C1/C2/C3 all fail — it is `position: sticky` with a JS shim, and antd's own docs now recommend the CSS property. Sticky chrome is already a first-class slot here. | `PageContainer toolbar` (`layout.prop.ts:82-88`), `PageContainer stickyFooter`, `Toolbar sticky`, `DataTable sticky` |
|
|
429
|
+
| `Anchor` | C1/C7 fail — the one real use (a long document with a contents rail) is already owned end-to-end, including scroll-spy, hash deep-linking, focus handoff and `aria-current="location"`. A second general Anchor would duplicate it. | `LegalDocumentShell` (`layout.prop.ts:1279-1331`) |
|
|
430
|
+
| `FloatButton` / `BackTop` | C1/C2 fail — layout + content + colour, positioned by the screen that wants it. `BackTop` additionally competes with the shell's own scroll ownership (`MobileShell` is deliberately the only scroll container, `layout.prop.ts:504-507`). | `Button shape="pill" size="icon-lg"` placed by the page; a token for the inset if one is missing |
|
|
431
|
+
| `Layout.Header` / `Content` / `Footer` | Bare boxes in antd; real slots here. | `AppShell topbar` / `children` / `footer`, `Topbar`, `PageContainer` |
|
|
432
|
+
| `App` (static-method context) | The context problem it solves does not exist here — nothing is imperative. | `AppProvider` + `Toaster` + declarative `Dialog`/`AlertDialog` |
|
|
433
|
+
| `PageHeader` (removed from antd core) | Exists, and is wider. | `PageContainer` (`layout.prop.ts:64-139`) |
|
|
434
|
+
| `Result` | Exists for HTTP statuses; the non-HTTP shapes are an empty state with an action. | `ErrorSurface` / `EmptyState` |
|
|
435
|
+
| `Menu` `items` config array as the only API | Both dialects exist already: config-array for the route rails, compound parts for the overlay menus. | `Sidebar.sections` / `NavList.items` · `DropdownMenu*` |
|
|
436
|
+
| `Dropdown.Button` | Two existing primitives plus the proposed `ButtonGroup`. | `ButtonGroup` + `Button` + `DropdownMenu` |
|
|
443
437
|
|
|
444
438
|
---
|
|
445
439
|
|
|
@@ -448,17 +442,17 @@ an editing lifecycle to the typographic primitive would make every `<Text>` in t
|
|
|
448
442
|
`pnpm check:mcp-sync` passes on shape, so these are documented-surface omissions rather than
|
|
449
443
|
build failures. Each is a prop that exists in `src/` and is invisible to a consumer asking the MCP:
|
|
450
444
|
|
|
451
|
-
| Component
|
|
452
|
-
|
|
|
453
|
-
| `ResponsiveGrid` | `pad`, `preset`, and the whole `ResponsiveGrid.Item` / `span` API (`src/components/layout/responsive-grid.tsx:115`)
|
|
454
|
-
| `Pagination`
|
|
455
|
-
| `Flex`
|
|
456
|
-
| `Separator`
|
|
457
|
-
| `AppLauncher`
|
|
458
|
-
| `OrgSwitcher`
|
|
459
|
-
| `AppShell`
|
|
460
|
-
| `Button`
|
|
461
|
-
| `ResizablePanel` | `onCollapse` / `onExpand` (react-resizable-panels surface)
|
|
445
|
+
| Component | Props present in `src/` but absent from `mcp/src/data/components.ts` |
|
|
446
|
+
| ---------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
447
|
+
| `ResponsiveGrid` | `pad`, `preset`, and the whole `ResponsiveGrid.Item` / `span` API (`src/components/layout/responsive-grid.tsx:115`) |
|
|
448
|
+
| `Pagination` | `total`, `pageSize` (`src/props/components/navigation.prop.ts`) |
|
|
449
|
+
| `Flex` | `grow`, `shrink`, `bleed` (`src/props/components/layout.prop.ts:158`,`:162-163`) |
|
|
450
|
+
| `Separator` | `space`, `hideBelow`, `hideFrom` (`layout.prop.ts:569-571`) |
|
|
451
|
+
| `AppLauncher` | `error`, `onRetry`, `open` (`layout.prop.ts:1112-1136`) |
|
|
452
|
+
| `OrgSwitcher` | `value`, `error`, `onRetry`, `open` (`layout.prop.ts:985-1015`) |
|
|
453
|
+
| `AppShell` | `navRailLabel` is listed but the `sidebarCollapsed` change handler gap (P1 #4) means the entry documents a half-contract |
|
|
454
|
+
| `Button` | `size` type in the catalog omits `md`, which `src/components/general/button.tsx:33` supports |
|
|
455
|
+
| `ResizablePanel` | `onCollapse` / `onExpand` (react-resizable-panels surface) |
|
|
462
456
|
|
|
463
457
|
These should be folded into whichever fix wave touches each component, per the
|
|
464
458
|
`godxjp-ui-mcp-catalog-sync` contract — not as a separate pass.
|