Record header and action model
Order detail's action model (flagship D01): one dark next-step button by status (Assembly ▾ for Ready For Fulfilment …), a Cloud print ▾ split (Cloud: Order bill / Shirt code · Open PDF: Mark-Up / Order / Shirt Tag / QC Tag), Edit, Raise issue (holds live here), and ⋯ grouped by intent. 4–5 controls instead of 8–10; no Hold button. Front matter, ten tabs, a sticky compact header on scroll.
Covers: record-header primitive, record-header designer. Exports: RecordHeader, SplitButton.
Anatomy
The component as it sits in the product: English, compact, real data shapes.
States
7 states, left to right, top to bottom. A mock poll never finishes, so each state is drawn on purpose.
Density
The phone shell is always comfortable (POWERUPS #15): 44px tap targets, 16px inputs. Compact exists on desktop only; see the desktop page.
English · 中文
Staff pick en or cn (T001 Q25). Labels arrive localised; CJK falls back to PingFang SC / Noto Sans SC.
Long string · permission denied
The long-string case (PL-063) and what a role without the permission sees (the server decides; T003).
Contract
The @rj/admin-kit API for this family. Mirrored in CONTRACT.md.
- Export
RecordHeader·@rj/admin-kit- Props
title·status·badges·sub·facts[]·actions{next, split[], secondary[], overflow: {group, items[]}[]} ·tabs·sticky- Variants
- full · sticky compact
- States
- loading · ready · action-busy · denied (actions absent) · long title
- shadcn / Radix
- DropdownMenu (split + ⋯) · Tabs · Tooltip
- Package underneath
- nuqs (active tab)
- Accessibility
- h1 is the record id; split button = two buttons (action + menu) with distinct labels; destructive items last
- API operations
- admin.orders.show · admin.orders.cloud-print · admin.orders.print-url → admin.signed.orders.print · admin.orders.void (draft / awaiting payment / RFF)
- Phone variant
- status + facts + scrollable tab chips + Cloud print / Raise issue in thumb reach
- Permission
- each action renders only with its permission (edit orders, print orders, settle…)
- Export
SplitButton·@rj/admin-kit- Props
primary·items(grouped)- shadcn / Radix
- Button + DropdownMenu
- Accessibility
- aria-haspopup=menu on the chevron