Details

A record’s fields in a context panel, such as a deal’s Source or an account’s Size and Domains: each field is a row with its label beside its value. Each row holds the field’s own editor, so the block edits what it shows.

Installation

import {
  Details,
  DetailRow,
  DetailValue,
} from "@o/pipeline/experimental/blocks/details";

Usage

Pass the block’s title, such as “Deal data”, and its rows as children, each a DetailRow with a key and the field’s label. A row’s child is the field’s editor: a ghost choice or date trigger, or an Entry. At rest the editor draws none of its own fill or frame, so the row reads as a label, an icon and a value. The whole row is the editor’s: clicking anywhere on it, its label included, opens the trigger or puts the cursor in the input, and the row hovers, presses and draws the focus ring while its text and icon step a shade darker.

A field nothing edits, such as a time derived from another field, is a readOnly row with a DetailValue: the field’s icon, its value, and an optional note after it. A read-only row doesn’t hover or press.

A label longer than its 80px column truncates and shows in full in a tooltip.

onAdd shows the + in the header, where the app opens its “Add field” menu. The block is open by default and closes from its header; open, defaultOpen and onOpenChange control it, and the block stores nothing, so the app persists it.

Several values

A field that holds a list, such as a person’s email addresses, puts each value on its own line, and the row grows with it, its label beside the first. Clicking the row puts the cursor in the first value.

Custom fields

The app shows a record’s custom fields, the ones its connected service brings, as a second block titled “Custom fields”, built from the same rows. The card lists the filled fields only. A field people can edit uses its editor. One HubSpot owns is read-only, with a lock whose tooltip says why, and “Edit in HubSpot” when HubSpot has a page for the record. Hover the lock on “Lead score”, or follow the link on “ARR”.

Its “See all” lists every field, empty ones included, so they can be filled, such as “Region” and “Segment” below. The card passes the count of every field as total, so “See all” shows while any field is empty, though only three are filled.

See all

With seeAll, the block shows its first BLOCK_ROWS_SHOWN rows (4), as every block does, and with more, “See all” calls onSeeAll, where the app opens every field in a drawer. total sets how many rows See all lists when that’s more than the rows passed, so “See all” can show with 4 rows or fewer. revealThrough shows a row past the first 4 by its index, with every row before it, such as a field just picked from “Add field”.

Empty

With no fields, the block is one row: its title, a placeholder, and the + when onAdd is passed.

Loading

A loading block is the block itself inside a loading SkeletonGroup, with placeholder rows.