Consolidate “chip” UIs into a single, reusable component
@theroinaochieng is already working on this.
Since Apr 30, 2025.
- Dominant language
- Elixir
- Stars
- 296
- Forks
- 86
- Avg merge
- 1d 13h
- Merged PRs (30d)
- 50
Description
Context
Chips (those little rounded pills that show tags, filters, project names, scopes, etc.) appear in four separate areas today:
- the Publish Template flow (template tags)
- the Credential-permissions dialog (project names)
- the History page (active filters)
- the OAuth Client editor (granted scopes)
Each screen ships its own implementation and its own styles. Unsurprisingly, the visual treatment and behaviour of chips now diverge, and any tweak requires touching four code paths.
Why this matters
Maintaining multiple variants for the same UI element is costly:
- Inconsistent look-and-feel chips away at perceived quality.
- Design tokens evolve, but updates never propagate everywhere.
- Bug fixes get duplicated (or forgotten) across implementations.
Objective
Create a single chip component that every screen can import. The component must be flexible but opinionated, exposing only the options we actually need:
- Appearance — choose among a small set of colour variants (default / success / warning / danger) and two sizes (regular, small).
- Behaviour — static or “dismissible” via an × button; optional click handler.
- Accessibility — proper
aria-labels, focus ring, and keyboard removal for dismissible chips.
Once the new component lands, migrate the four existing screens so they all render chips through this shared API. From that point on, any future feature that needs chips will rely on the same component.
Done when
- The only chip-related code lives in
components/chip.ex(or similar). - All four screens render visually identical chips and retain their current UX (adding, removing, filtering, etc.).
Centralising chips will give us a single source of truth for thid UI element in the app, cutting design drift and maintenance overhead.
Screenshots
Contributor guide
No contributing guide indexed for this repository
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.