OpenFn / OpenFn/lightning

Consolidate “chip” UIs into a single, reusable component

Open
#3,176 0 comments 0 reactions 1 assignee View on GitHub

@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:

  1. the Publish Template flow (template tags)
  2. the Credential-permissions dialog (project names)
  3. the History page (active filters)
  4. 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
Image
Image
Image

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.