5.6 KiB
Shared WebUI Primitive Inventory
This 2026-08-18 inventory records the implementation state after the product-wide toolbar, grid, form-section, dialog-anatomy, metric-group, and description-list migrations. It is evidence for prioritization, not a substitute for the normative interface pattern language.
Implemented And Enforced
| Contract | Adoption evidence | Ownership now enforced |
|---|---|---|
ActionToolbar and groups |
39 source files | Raw module-prefixed toolbar elements and local toolbar component definitions are rejected. |
ContentGrid |
15 source files | Former dashboard-grid and settings-grid wrappers are rejected. |
FormGrid and FormLayout |
53 source files | Former form-grid and admin-form-grid wrappers are rejected; equal-column dialog and editor grids were migrated even when they had module-prefixed names. |
FormSection |
2 representative source files | The reusable section API, variants, responsive action placement, and heading anatomy are Core-owned; broader adoption is incremental. |
DialogActions |
Every Core Dialog footer |
Footer wrapping and alignment are no longer repeated by consumers. |
DialogForm |
6 source files | Raw *-dialog-form form wrappers are rejected. |
DialogSection |
6 source files | Repeated dialog field/content grouping is available as a shared primitive. |
MetricGrid |
29 uses in 25 source files | The former metric-grid class and module-specific column overrides were removed. Core now owns 1–5/auto-fit columns, minimum width, density, block/inset/zero spacing, and collapse. |
DescriptionList and DescriptionItem |
51 lists in 28 source files; item composition in 11 files | The former admin-details-grid and detail-list classes were removed. Core now owns stacked and inline property layouts, density, term width, wrapping, and collapse while preserving native dl/dt/dd semantics. |
| Standard dialog sizing | 9 consumers and 6 duplicated width rules removed | Confirmations and compatible Calendar, credential, Campaign, Files, and Voting dialogs use the Core small/large/wide scale. The 61 remaining specialized selectors across 22 CSS files are registered and decrease-only. |
tools/checks/check-shared-webui-primitives.py verifies Core exports and
ownership, representative consumers, the absence of the retired raw anatomy,
and composition of every Dialog footer through DialogActions.
Dialog Width Classification
The remaining 61 width selectors do not duplicate the Core 460/560/680/1040/
1440px scale. They cover bounded editor widths between scale steps, high-density
definition and governance editors, preview/chooser canvases, message and file
overlays with coupled height behavior, and responsive full-canvas workflows.
Their exact selector set lives in
tools/checks/shared-webui-dialog-width-exceptions.txt. The focused check fails
for a new selector, a stale baseline entry, or any local width that duplicates
the Core scale.
Remaining Promotion Candidates
The post-migration scan still finds domain-specific grids, but the repeated generic metric and property-list geometry is gone. Remaining grids are mostly unequal-track editors, visualizations, workflow facts, import mappings, and collection layouts. The next useful candidates depend on interaction semantics:
| Priority | Remaining pattern | Evidence | Proposed contract |
|---|---|---|---|
| 1 | Empty and collection state anatomy | More than 70 module-prefixed empty/state class uses remain; only loading, alerts, blockers, and DataGrid empty actions are centralized | A composable StatePanel/CollectionState covering empty, recoverable error, permission block, partial result, and next action without hiding domain consequences. First distinguish a whole-surface state from a compact empty row or optional-value placeholder. |
| 2 | Filter and search rows | More than 50 filter/search class tokens cover simple text search, facets, popovers, result counts, active filters, bulk selection, and overlay search | Define FilterBar only after the input/submit, live filtering, facet, result-summary, and bulk-action accessibility variants have been compared. Plain action placement already uses ActionToolbar. |
| 3 | Assignment/picker groups | admin-assignment-grid: 5 uses in 4 files |
Promote a selection/assignment composition only after its list, search, empty, policy, and permission variants are compared; plain geometry can already use ContentGrid. |
| 4 | Repeated domain fact and statistic grids | campaign-header-grid (8), review-flow-fact-grid (6), postbox-form-grid (5), plus smaller families |
Compare semantics before promotion. Some can use ContentGrid or DescriptionList; others intentionally own unequal tracks or workflow visualization. |
The other custom grids are mostly bounded domain visualizations or unequal-track editors: conflict mappings, import mapping, campaign review facts, charts, calendar time views, connector synchronization, records lists, and definition editors. They should remain module-owned unless a second domain demonstrates the same semantics and interaction contract. A shared primitive should not be created merely because two implementations both use CSS Grid.
Next Audit
The next bounded slice should compare whole-surface empty states across list, detail, permission, capability, and recoverable-error contexts and promote only their shared anatomy. Filter/search composition follows after its live versus submitted filtering and bulk-selection behavior is explicit. Assignment grids remain deferred until their permission and policy variants are understood.