Patterns overview
Components are the nouns; patterns are the sentences. A pattern is a reusable composition of components that solves a recurring product problem the same way every time — so a workflow in CommerceOS reads like the same workflow in CampusOS. Live demos are in the Design System → Patterns group; the building-block components are indexed in COMPONENTS.
Workflow
Process-heavy products (CommerceOS, CampusOS, HealthOS, FinanceOS) share one record lifecycle. Prism provides the pieces:
| Pattern | Built from | Use |
|---|---|---|
| Record lifecycle | StatusPipeline | Read-only state of a record moving through a process (draft → submitted → in review → decision). Distinct from Stepper (a wizard the user fills in). A rejected node ends the rail in --negative. |
| Review & decision | ReviewActionBar | The sticky footer for a record under review: approve / request changes / reject, primary weighted, destructive held to the side. Pass summary + meta (reviewer, SLA). |
| Activity & audit trail | ActivityTimeline (over AuditLogEntry) | Chronological "who did what, when", optionally date-grouped, tone-coded (create/edit/delete/view/access/alert). |
| Draft & autosave | AutosaveIndicator + Alert | The save lifecycle: idle → unsaved → saving → saved → error, plus the leave-guard on navigating away from a dirty form. |
| Multi-step / wizard | MultiStepForm + Stepper | Long applications and guided setup; review-before-submit; save-as-draft between steps. |
| Locking & conflict resolution | ReadOnlyBanner + side-by-side resolver | Record locked by another user; on save-conflict, choose which version to keep field-by-field. |
| Assignment / SLA queue | Table/DataGrid + Badge + StatusPipeline | Reviewer queues with ownership, SLA countdown, escalation. |
Lifecycle copy is status-led and neutral ("Sent for approval.", "Changes requested.") — see CONTENT.
Forms
The form system spans simple fields to long, conditional, multi-step applications:
- Scaffold:
Fieldwires label + helper + error +aria-describedbyfor any control.FormSection/FormRowlay them out on the grid. - Validation: inline
aria-liveerrors at the field;ErrorSummaryat the top of long forms with in-page links. State constraints before the user errs. - Orchestration:
MultiStepForm, save-as-draft +AutosaveIndicator, dirty-tracking + leave-guard, review-before-submit, read-only / partially-editable / locked forms. - Test under RTL, pseudo-localisation, both densities (QA).
Tables & data
- Table — sortable, multi-select, zebra-striped, right-aligned numerics in
--font-mono. - DataGrid — search, filters, saved views, column pin/resize/reorder/visibility, inline edit + cell validation, sticky header, density switching, ERP row states (pending approval, partially fulfilled, failed sync, overdue, low stock, locked, draft, archived).
- Always provide an accessible summary and a sensible empty/loading/error state.
Permissions & roles
RestrictedState (no-access / locked / read-only), LockedOverlay (premium gate in place), ReadOnlyBanner, RoleBadge. Choose the right non-availability treatment: hidden vs visible-but-disabled vs visible-with-explanation vs request-access vs requires-upgrade. Use --role-* hues for "viewing as" and scope cues. Permission copy says why it's blocked and the path forward (COMPLIANCE for privacy-sensitive cases).
Empty, loading, error & offline
EmptyState covers first-run · no-results · error · offline · success in page/section/inline sizes. Pair each with the right copy register and a single clear next action. Loading uses Spinner/ProgressBar (and skeletons for structured content) — only show a loading message past ~1s.
Privacy & compliance
Consent (ConsentBanner), sensitive-value masking (MaskedField), data classification (SensitivityTag), audit (AuditLogEntry / ActivityTimeline), inactivity (SessionTimeoutDialog). Especially for HealthOS / FinanceOS / CampusOS / HospitalityOS — see COMPLIANCE.
Authoring a pattern
- Compose existing components — don't reinvent the parts. If a genuinely reusable piece is missing, add it as a component first (COMPONENTS), then compose.
- Keep the shape identical across products; vary only copy register (per the product tone matrix) and signature.
- Add a
@dsCardin the Patterns group so the composition is discoverable and reviewable. - Hold it to the full ACCESSIBILITY and QA checklists — patterns are where focus order, live regions and reflow most often break.