Event chip | Arcadia Design

Renamed to SweeperBud joined the team

import { AgentAvatar, AvatarStack, EventChip } from "@arcadia/ui";

<div {...sx("cmp-bar", cmp.bar, cmp.barCenter)}>
  <EventChip leading="forward" state="delivered" onClick={open}>
    Messaged <AgentAvatar avatar={BUD} name="Bud" size={16} /> Bud
  </EventChip>
  <EventChip leading="pencil">Renamed to Sweeper</EventChip>
  <EventChip leading="plus">Bud joined the team</EventChip>
  <EventChip leading={<AvatarStack size={16} agents={[{ id: "h", avatar: HAZEL, name: "Hazel" }, { id: "b", avatar: BUD, name: "Bud" }]} />} onClick={open}>
    3 messages with Hazel and Bud
  </EventChip>
</div>

TSX

import { EventChip } from "@arcadia/ui";

<EventChip leading="pencil" onClick={open}>Renamed to Sweeper</EventChip>

A system event in a conversation, centred between the messages: one agent messaged another, an agent renamed itself or saved new instructions, a teammate joined. A glyph or an avatar, a few words, and a quieter state word after them. With onClick it is a button that opens what the event is about: the thread between two agents, or a pane.

Keep the words short and plain. The state word is the one thing that changes as the event moves on.

Examples

Caption

variant="caption" draws the event as bare caption text: no fill and no frame, so a run of events never outweighs the messages around it.

Renamed to Sweeper

import { AgentAvatar, EventChip } from "@arcadia/ui";

<div {...sx("cmp-bar", cmp.bar, cmp.barCenter)}>
  <EventChip variant="caption" leading="forward" state="delivered" onClick={open}>
    Messaged <AgentAvatar avatar={BUD} name="Bud" size={16} /> Bud
  </EventChip>
  <EventChip variant="caption" leading="pencil">Renamed to Sweeper</EventChip>
  <EventChip variant="caption" leading="alert" tone="attention" state="held" onClick={open}>Messaged Hazel</EventChip>
</div>

One that opens something steps its ink up under the pointer. An attention event keeps its pill: the one centred thing with weight. enter brings a new event in as a message arrives.

Attention

attention marks an event that waits for the user: a message held by a guard, a refusal.

import { EventChip } from "@arcadia/ui";

<EventChip leading="alert" tone="attention" state="held" onClick={open}>Messaged Bud</EventChip>

Long text

A chip never grows past its column: its end fades, and text alone carries the whole line as its title.

import { EventChip } from "@arcadia/ui";

<div {...sx("cmp-bar", cmp.bar, cmp.barCenter)}>
  <EventChip leading="zap" onClick={open}>Woke: message from Juno, 2 steps, played "eagle" after "turtle", and the reply was held until the exchange is resumed</EventChip>
</div>

Disclosure

expanded makes the chip open what it stands for in place, under it: a finished chat's reply, a reason.

import { useState } from "react";
import { EventChip } from "@arcadia/ui";

function Disclosure() {
  const [expanded, setExpanded] = useState(false);
  return (
    <div {...sx("cmp-bar", cmp.bar, cmp.barCenter)}>
      <EventChip variant="caption" leading="circle-check" expanded={expanded} onClick={() => setExpanded(!expanded)}>lk-withholding-m2 finished</EventChip>
      <EventChip variant="caption" leading="history" navigates onClick={open}>From routine PR queue watch</EventChip>
    </div>
  );
}

It ends on a chevron that turns down while open; the product renders the panel and points aria-controls at it. A chip that already says everything has no chevron. navigates puts an arrow in that place for a chip that goes somewhere else.

rootStyle takes where the chip sits and the knobs below, each a palette token.

--event-chip-fg: PaintDefault var(--text-3); Text colour.
--event-chip-icon: PaintDefault var(--icon-3); Leading glyph colour (an avatar keeps its own).
--event-chip-bg: PaintDefault transparent; The chip's fill at rest.
--event-chip-hover: PaintDefault transparent; Its fill under the pointer, when it opens something.

The leading glyph is decorative; the text is the event. A chip with onClick is a real button, so it takes focus and Enter, and its text is its name. The state word is part of the text a screen reader reads. With expanded it is a disclosure button: aria-expanded follows it, and the chevron is decorative.

EventChip

leading: IconName | ReactNode; An icon name (in the glyph colour) or a node (a 16px AgentAvatar or an AvatarStack).
title: string | null; The native hover, short; null for none (long text, or a Tooltip says it).
state: ReactNode; A state word after the text, quieter ("delivered", "held").
tone: "neutral" | "attention"Default "neutral"; attention: something waits for the user (held, refused).
variant: "chip" | "caption"Default "chip"; caption: bare text, so a run of events never outweighs the messages; chip: the filled pill.
enter: boolean; Comes in once on mount (an event that just happened): it rises and fades like a message. Never under reduced motion or on a hydrated page.
onClick: (e: MouseEvent<HTMLElement>) => void; Opens what the event is about. The chip renders as a button; without it, a span.
expanded: boolean; A disclosure (with onClick): a chevron and aria-expanded; the product renders the panel.
navigates: boolean; It goes somewhere else: an arrow in the chevron's place.
rootStyle: RootStyle<EventChipKnobs>; Typed StyleX override: layout and the --event-chip-* knobs.
childrenrequired: ReactNode; What happened, in a few words. Past the chip's room its end fades (text alone carries it as its title).

Rest props go to HTMLAttributes<HTMLElement>.

Usage

Examples

Caption

Attention

Long text

Disclosure

Customising

Accessibility

API reference

EventChip