MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-82

2.2.8 Status color picker — `ColorSwatchPicker` component + wire into the status form

Done
Description

Estimate: 14m · Depends on: 2.2.5

Subtask 2.2.5 shipped the status color as a free-form hex text Input in the add/edit-status modal — a placeholder. The 2.2.5 card always intended "a color-swatch picker that composes from the existing color tokens"; this Subtask completes that deferred piece (logged as a follow-up during 2.2.5 visual review).

Add a reusable components/ui/ColorSwatchPicker design-system primitive: a keyboard-navigable radiogroup of selectable swatches drawn from the existing design-system color tokens (the category tints + the semantic palette, post-finding-#35), each swatch an accessible radio (aria-checked, arrow-key navigation, visible focus ring), PLUS a "None — derive from category" option that maps to null. A custom-hex escape hatch is optional (a small "Custom…" affordance) but the primary affordance is the curated token swatches so colors stay on-brand and AA-safe. No raw free-text hex as the default path.

Wire it into the StatusFormModal (both Add and Edit) in WorkflowEditor, replacing the hex Input. The selected value (a token hex string or null) flows unchanged to createStatus / updateStatus's existing color field — no service/schema change (2.2.1's color String? already stores it; null = derive-from-category).

Acceptance criteria

  • components/ui/ColorSwatchPicker.tsx — a controlled radiogroup of design-token swatches + a "None (derive from category)" choice; fully keyboard-operable (roving tabindex / arrow keys), each swatch has an accessible name, the group is labelled.
  • StatusFormModal uses it instead of the hex Input; selecting a swatch sets color to that token hex, "None" sets null; the value round-trips through create + edit (the row's swatch reflects the saved color).
  • The page's axe sweep (shared with 1.5.5 / 2.2.5) still passes with the picker open — radiogroup semantics, contrast of the focus ring + selected indicator.
  • A component test (vitest + testing-library): rendering the swatches, selecting one fires onChange with its value, selecting "None" fires null, keyboard arrow navigation moves the selection.
  • Quality gates green (tsc + eslint + prettier + vitest).

Context refs

  • app/(authed)/settings/project/workflow/_components/WorkflowEditor.tsx (2.2.5) — the StatusFormModal the picker slots into
  • The design-system color tokens (category tints + semantic palette) + components/ui/Pill.tsx (post-finding-#35 AA-safe tones)
  • components/ui/FormField.tsx / an existing radio-or-segmented control — the a11y radiogroup pattern to mirror
  • lib/dto/workflows.ts — WorkflowStatusDto.color: string | null (the value shape, unchanged)