ListRow

The row of phone lists, settings, and the people and agents on a detail page: a leading block, a title and a preview, the time and a badge. The whole row is the target.

Preview#

Anatomy#

import {
  ListRow,
  ListRowBody,
  ListRowBottom,
  ListRowDescription,
  ListRowGroup,
  ListRowMeta,
  ListRowTitle,
  ListRowTop,
} from "raft-ui";

<ListRowGroup>
  <ListRow>
    {/* leading: an avatar, a tile or ListRowIcon */}
    <ListRowBody>
      <ListRowTop>
        <ListRowTitle />
        <ListRowMeta />
      </ListRowTop>
      <ListRowBottom>
        <ListRowDescription />
        {/* at most one badge */}
      </ListRowBottom>
    </ListRowBody>
    {/* trailing: ListRowValue, ListRowChevron, a switch */}
  </ListRow>
</ListRowGroup>

Usage#

Entry rows#

variant="entry" is a shortcut into another page at the top of a list (Search, Activity, Saved): a 20px ListRowIcon and a name, with a badge or a gray count on the right, 48 tall. They are a set of buttons, so no lines run between them.

Settings#

variant="plain" is a setting row inside a ListRowGroup: the current value and a chevron when it opens a choice, or a Switch labelled by the title. A row with a switch takes interactive={false}: the switch is the target, and the description says the consequence.

Agents can merge to mainOff: a person approves every merge.

Tones#

tone carries what the place is to you: unread, muted, or away for one you have not joined. Rows that go somewhere render a link.

BBugen10:42Bugen: #25 is ready for review.SKSamira Khan09:58Samira: Sent you a file.RRelease BotMonNot in this channel yet.

API#WIP

ListRow#

variantdefault: "default"
"default" | "plain" | "entry"
default: at least 64 tall, a hairline from the text start (63px). plain: a setting, 48 tall with one line, the hairline from the edge. entry: a shortcut (Search, Activity), 48 tall, no hairlines.
tonedefault: "default"
"default" | "unread" | "muted" | "away"
unread: bold title, ink preview. muted: ink-2 title. away (not joined yet): ink-3 title and preview.
selecteddefault: false
boolean
The item open beside the list: a cyan wash, no hover. Set aria-current or aria-selected yourself.
interactivedefault: true
boolean
false renders a display-only div with no hover or press, for a row whose switch or buttons are its only targets.
render
ReactElement | (props, state) => ReactElement
Render a link or a router link instead of the button.
...props
useRender.ComponentProps<"button">
Native button attributes: onClick, value, aria-*. disabled (or aria-disabled) greys every part, drops the tone and stops hover and press.

Parts#

ListRowGroup
div
An inset group: rows in a card (surface, hairline border, radius-lg).
ListRowIcon
span
A 20px leading icon in ink-3, for entry rows and settings.
ListRowBody
span
The text column: a title and a description, or a top and a bottom line.
ListRowTop / ListRowBottom
span
The title line (title, time) and the preview line (preview, one badge).
ListRowTitle
span
16/24 600, one line; the row's tone sets its weight and ink.
ListRowDescription
span
14/20 ink-2, one line; wrap lets a setting's consequence run on.
ListRowMeta
span
Space Mono 12 ink-3: the time, a gray count.
ListRowValue
span
A setting's current value, 15/20 ink-3, at most 45% of the row.
ListRowChevron
span
The ink-3 arrow of a row that opens another page; decorative.