Disclosure row | Arcadia Design

Resets Fri 11:48

Resets in 3h 30m

One account to sign in again

import { Button, DisclosureList, DisclosureRow, Meter } from "@arcadia/ui";

<div {...sx("cmp-disclosure-card", s.card)}>
  <DisclosureList rootStyle={s.tracks}>
    <DisclosureRow leading={<Who name="Weekly plan" />} detail={<span {...sx("cmp-disclosure-meter", s.meter)}><Meter value={52} /></span>}
      summary={<span {...sx("cmp-disclosure-value", s.value)}>52% left</span>}>
      <div {...sx("cmp-disclosure-panel", s.panel)}><span {...sx("cmp-disclosure-quiet", s.quiet)}>Resets Fri 11:48</span></div>
    </DisclosureRow>
    <DisclosureRow defaultOpen leading={<Who name="Daily plan" />} detail={<span {...sx("cmp-disclosure-meter", s.meter)}><Meter value={0} tone="danger" /></span>}
      summary={<span {...sx("cmp-disclosure-value", s.value, s.danger)}>Limit reached</span>} action={<Button size="sm" variant="ghost">Manage</Button>}>
      <div {...sx("cmp-disclosure-panel", s.panel)}><span {...sx("cmp-disclosure-quiet", s.quiet)}>Resets in 3h 30m</span></div>
    </DisclosureRow>
    <DisclosureRow leading={<Who name="Signed out" />} summary={<span {...sx("cmp-disclosure-value", s.value)}>Sign-in expired</span>}
      action={<Button size="sm" variant="secondary">Sign in again</Button>}>
      <div {...sx("cmp-disclosure-panel", s.panel)}><span {...sx("cmp-disclosure-quiet", s.quiet)}>One account to sign in again</span></div>
    </DisclosureRow>
  </DisclosureList>
</div>

Three rows on one set of columns: closed, open with Manage beside the toggle, and a row whose remedy is a button.

TSX

import { Button, DisclosureList, DisclosureRow } from "@arcadia/ui";

<DisclosureList>
  <DisclosureRow leading="Weekly plan" summary="52% left" action={<Button size="sm">Manage</Button>}>Resets Fri 11:48</DisclosureRow>
</DisclosureList>

A full-width row of a card that opens a panel under it. The toggle is a real button holding the row's parts: leading (who), detail (a meter), summary (what it says) and meta (quiet text at the end). action is one control beside the toggle, never inside it, after it in tab order. Open, the chevron turns, what the row summarised fades in place (the columns stay put) and the panel unfolds on the kit's one fold, Unfold; an action that changes with the open state arrives with a short slide. end puts one control in the chevron's place, beside the toggle, while the row still opens on a click: the queue's Discard on the message being edited.

DisclosureList puts every row of a card on one set of columns, so details and values line up down the list, and moves one highlight between rows. It is a size container: at 560px or under a row drops to one compact line, or, with stack, to two (who and what it says, then its detail and its remedy); a row with nothing that paints for the second line stays one line, centred in its box.

rootStyle on the list takes layout and these knobs: the two leading columns' tracks, the chevron's track, the row's height, its fills. A row of the card that does not open reads --disclosure-end for its last track, so its action ends where the toggles' actions do.

--disclosure-leading: DisclosureTrackDefault minmax(0, 1fr); The leading column (who the row is): minmax(0, 1fr)-like tracks let a long name fade at its end.
--disclosure-detail: DisclosureTrackDefault auto; The detail column (a meter, a spark): fixed, so every row's detail starts and ends on the same edges.
--disclosure-end: "auto" | Size | `calc(${Ref<IconSize>} + ${Ref<Space>})`Default auto; The chevron's column: fixed, a row that does not open ends its action on the toggles' edge.
--disclosure-row-h: Ref<Space | Control>Default var(--space-10); A row's height.
--disclosure-px: Ref<Space> | DerivedDefault calc(var(--card-text-inset) - 1px - var(--space-1)); Where a row's text starts and its chevron ends: by default the card's text edge (--card-text-inset).
--disclosure-indent: SizeDefault var(--space-8); How far a stacked row's second line starts from the row's edge: under the leading's text, past its mark.
--disclosure-fill: PaintDefault var(--fill-4); The row's fill under the pointer.
--disclosure-fill-kbd: PaintDefault var(--fill-3); The row's fill under the keyboard.

The toggle carries aria-expanded and aria-controls; its panel is a region named by it. Give the row a label when its content is not words enough (a meter is no sentence). In a list, Up and Down move between rows, Home and End to the ends, Right opens and Left closes. Find in page reaches a closed panel's text and opens it.

DisclosureList

glide: booleanDefault true; One shared highlight gliding between rows. false: each row lights itself.
rootStyle: RootStyle<DisclosureKnobs>; Typed StyleX override: where the list sits and its --disclosure-* knobs.

Rest props go to <div> props.

open: boolean; Controlled open state.
defaultOpen: booleanDefault false; Initial open state when uncontrolled.
onOpenChange: (open: boolean) => void; Called when the toggle, an arrow key or a find-in-page match opens or closes it.
leadingrequired: ReactNode; Who the row is: a mark and a name. It stays when the row opens.
detail: ReactNode; What the row shows of itself after its name (a meter). Gives way while open; a stacked row puts it on its second line.
summary: ReactNode; What the row says, at its end (a value, a state). Gives way while open.
meta: ReactNode; Quiet text in the end cell (when it resets): inside the toggle. Gives way while open.
action: ReactNode; One control in the end cell, beside the toggle and after it in tab order (never nested in it).
openAction: ReactNode; action while open, over the summary's cell.
end: ReactNode; A control in the chevron's place, beside the toggle.
holdSummary: booleanDefault false; The summary stays while open (a pool's count); a narrow list drops it.
label: string; The toggle's accessible name, when its content is not words enough (a meter is no sentence).
stack: booleanDefault false; On a narrow list the row takes two lines: who and what it says, then its detail and remedy, if they paint.
disabled: booleanDefault false
keyshortcuts: string
children: ReactNode; The panel: what the row summarised, in full. Find-in-page reaches it while closed, and opens it.

Rest props go to <div> props.

Usage

Customising

Accessibility

API reference

DisclosureList

DisclosureRow 16 props