A record’s related records in a context panel, such as an account’s Deals, Projects and Meetings, a person’s Companies, or a task’s Related. Each record is a row with its icon or logo, its name, secondary text and trailing details. Built from the People block’s rows; the Figma has no design for these lists yet.
Installation
import { Records } from "@o/pipeline/experimental/blocks/records";Usage
Pass the records as items, in order, with the block’s title and icon. Each row shows its glyph (an icon, logo or photo at 16px), its name, then its description as secondary text, which truncates before the name does, and its details at the row’s end, such as an identifier and stage, or a date.
Give each record a link (the app’s router link) and the whole row opens it. The action, such as a ”…” menu, shows while the row is hovered or holds focus, and sits above the link. renderRow wraps the row, such as in a context-menu trigger, so a right-click opens the same menu.
The block is open by default and collapses from its header; open, defaultOpen and onOpenChange control it, and the block stores nothing, so the app persists it.
Projects
Meetings
Mixed
Rows of different kinds can share a block, each in its own form, as a task’s Related does.
See all
With seeAll, the block shows limit rows (4 by default), and with more, “See all” calls onSeeAll, where the app opens the full list.
Static
A record without a link is a static row: it doesn’t respond to hover or press, and its action still opens. With collapsible={false}, the header doesn’t collapse the rows, as in a chat.
Empty
With no records, the block is one row: its title and a placeholder, such as a Retry button when loading failed.
Loading
A loading block is the block itself inside a loading SkeletonGroup, with placeholder rows.
Record row
RecordRow is one record’s row on its own.
import { RecordRow } from "@o/pipeline/experimental/blocks/records";