Picker trigger | Arcadia Design

Describe a change, @ to add files

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

<PickerTrigger label="acme-web" icon="folder" />
<PickerTrigger label="main" icon="branch" tone="muted" />
<PickerTrigger label="Large model" sub="High" />

TSX

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

<PickerTrigger label="main" icon="branch" tone="muted" />

The text trigger every picker uses: workspace, branch, model, environment. No background, ever: the colour steps from text-2 to text-1 only after the pointer rests 80ms (hover intent) or while its popup is open, so sweeping across a toolbar doesn't flicker. The label ellipsises at the trigger's maximum width.

Examples

Compose it as a MenuTrigger with render; the menu owns the choice, the trigger shows it.

import { useState } from "react";
import {
  Menu, MenuContent, MenuRadioGroup, MenuRadioItem, MenuTrigger, PickerTrigger,
} from "@arcadia/ui";

function BranchPicker() {
  const [branch, setBranch] = useState("main");
  return (
    <Menu>
      <MenuTrigger
        render={<PickerTrigger label={branch} icon="branch" tone="muted" aria-label={`Branch: ${branch}`} />}
      />
      <MenuContent>
        <MenuRadioGroup
          label="Branches"
          value={branch}
          onValueChange={(v) => setBranch(String(v))}
        >
          <MenuRadioItem value="main">main</MenuRadioItem>
          <MenuRadioItem value="release">release</MenuRadioItem>
          <MenuRadioItem value="feat/settings">feat/settings</MenuRadioItem>
        </MenuRadioGroup>
      </MenuContent>
    </Menu>
  );
}

Tones

neutral (text-2) for the value that matters most, such as the workspace or the model; muted (text-3) for context, such as the branch or the environment; emphasis rests at text-1.

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

<PickerTrigger label="acme-web" icon="folder" />
<PickerTrigger label="This Mac" icon="laptop" tone="muted" />
<PickerTrigger label="acme-web" icon="folder" emphasis />

rootStyle takes where the trigger sits (margins, self-alignment, flex and grid placement, size bounds) and the knobs below, each a token of its kind. A colour, a raw length or any other property is a type error: a look that comes up twice becomes a variant.

TSX

import * as stylex from "@stylexjs/stylex";

const styles = stylex.create({
  // the name sits close to the modifier before it
  tight: { "--pt-ps": "var(--space-1)" },
});

<PickerTrigger label="Large model" rootStyle={styles.tight} />

Takes	Default	Sets
`Ref<Control>`	`var(--control-sm)`	Height.
`Ref<Space>`	`var(--space-2)`	The text side: padding before a label (8, 10 at md), and after it when there is no chevron.
`Ref<Space> \| Derived`	`var(--pt-px)`	Padding before the icon or label: the text side, or (h − 14)/2 before an `icon` (R2). A glyph passed inside the label takes `stylex.env.nest.iconInset("var(--pt-h)", <its box>)`.
`Ref<Space>`	`var(--space-1-5)`	Padding after the chevron: (h − 12)/2, the chevron's own side.
`Ref<Radius>`	`var(--radius-md)`	Corner radius (a pill is full).
`Ref<Measure>`	`240px`	Width past which the label ellipsises.
`Paint`	`var(--text-2)`	Label colour at rest.
`Paint`	`var(--text-1)`	Label colour with hover intent or an open popup.
`Paint`	`var(--icon-3)`	Leading glyph colour at rest.
`Paint`	`var(--icon-1)`	Leading glyph colour with hover intent or an open popup.
`Paint`	`var(--text-3)`	Secondary value colour at rest.
`Paint`	`var(--text-1)`	Secondary value colour with hover intent or an open popup.
`Paint \| Ink`	`currentColor`	Chevron colour (the label's by default).
`number`	`0.7`	Chevron opacity at rest (1: never dimmed).

Each colour has a rest knob and a hover knob (--pt-fg, --pt-fg-hover), and disabled drops them to text-4 and icon-4. Content you put in the label that should take the glyph's live colour, such as a provider mark, reads var(--_pt-icon).

Usage

Examples

With its menu

Tones

Matrix

Customising

Accessibility

API reference

PickerTrigger