Pipeline redesign: stage chip and stage bar components #1195

New issue

Open

opened 2026-11-01 14:17:37 +00:00 by tiagoagueda · 0 comments

tiagoagueda commented

2026-11-01 14:17:37 +00:00

Owner

Two Cotton components that every Bold screen uses.

What

<c-stage-chip status=…>: the stage's name on its chip colours. It replaces the ad hoc status badges, wherever an application's status shows.
<c-stage-bar>: the six stages as segments in their colours.
- Progress form, on the application page: stages reached are filled, the current one is ringed, each with its date.
- Proportion form, on the dashboard and boards: each segment is as wide as its count, and Ended stands apart after a gap.
Accessibility: a text alternative states every stage and count (for example "Draft 3, Applied 3…"). The current stage carries aria-current="step". Colour is never the only signal.

Acceptance

Unit tests cover both forms and the ended case: the bar is greyed after the last stage reached, with an Ended segment carrying the reason.
Browser tests check the accessible names.
The components are documented in CONTRIBUTING's component list.

Depends on #1193.

🤖 Generated with Claude Code

Part of #1191. Design: the redesign canvas, https://claude.ai/artifact/CTfX5t4BQiVq9cH97XFvcZ (private to the maintainer until shared). Each screen has three artboards: *today*, *polished* and *bold*; this milestone builds **bold**. (see *One application · bold* and *Dashboard · bold*.) Two Cotton components that every Bold screen uses. ## What - **`<c-stage-chip status=…>`:** the stage's name on its chip colours. It replaces the ad hoc status badges, wherever an application's status shows. - **`<c-stage-bar>`:** the six stages as segments in their colours. - *Progress form*, on the application page: stages reached are filled, the current one is ringed, each with its date. - *Proportion form*, on the dashboard and boards: each segment is as wide as its count, and Ended stands apart after a gap. - **Accessibility:** a text alternative states every stage and count (for example "Draft 3, Applied 3…"). The current stage carries `aria-current="step"`. Colour is never the only signal. ## Acceptance - Unit tests cover both forms and the ended case: the bar is greyed after the last stage reached, with an Ended segment carrying the reason. - Browser tests check the accessible names. - The components are documented in CONTRIBUTING's component list. Depends on #1193. 🤖 Generated with [Claude Code](https://claude.com/claude-code)

tiagoagueda added this to the 0.7.0 milestone

2026-11-01 14:17:37 +00:00

tiagoagueda added the

accessibility

interface

labels

2026-11-01 14:17:37 +00:00

tiagoagueda referenced this issue

2026-11-01 14:17:42 +00:00

Pipeline redesign: Today (the dashboard) #1204

tiagoagueda referenced this issue

2026-11-01 14:17:43 +00:00