Skip to content

Add a shared badge and move the first badges onto it - #5237

Draft
lmac-1 wants to merge 5 commits into
tabs-refactorfrom
badge-refactor
Draft

lmac-1 wants to merge 5 commits into
tabs-refactorfrom
badge-refactor

Conversation

@lmac-1

@lmac-1 lmac-1 commented Oct 9, 2026

Copy link
Copy Markdown
Contributor

Description

This PR adds one shared badge for React and LiveView, with one stylesheet, and moves the first badges in the app onto it.

  • Before, there was no shared badge. LiveView had a pill with one caller and about 20 hand-written badges, and React had a small common/Badge.tsx and about 20 more. Each looked a little different.
  • LiveView uses <.badge> from lib/lightning_web/components/ui/badge.ex and React uses Badge from assets/js/ui/Badge.tsx. Both use the .ui-badge classes in assets/css/ui/badge.css. Options: eight colours, default or small, mono, an icon, an x to remove, and a dot that can pulse.
  • A badge is a look, not a role. Labels render a <span>. Real buttons and links keep their element and take the classes from badge_class/1 or badgeClassName(). The x is always a type="button" with a label.
  • Moved over: sandbox environment badges, audit log events, the trigger type badge, run and channel state pills, the run page's version badge and dataclip types. pill/1 and the private sandbox badge/1 are deleted.
  • Some of these look different now. Run state pills are smaller (20px, down from 28px). Dataclip types are pale instead of strong. Cancelled runs are near-black instead of grey. The version badge is a full pill.
  • Tab and badge icons are now the right size in LiveView. hero-* icons set their own size in Tailwind's utilities layer, which beat the component CSS, so LiveView tab icons were 24px while React's were 20px.
  • /dev/components shows the LiveView badges next to the React ones.

Closes CON-342

Validation steps

  1. Open /dev/components. In the Badge section, the LiveView column on the left and React on the right should look the same. In the Tabs section, the "Icons" and "Icons, small" rows should have the same icon sizes on both sides.
  2. Open Sandboxes in a project with sandboxes. The environment and "active" badges show, and a long environment name ends in "…".
  3. As a superuser, open Settings → Audit. Each event shows as a green badge.
  4. Open a workflow in the editor and click its trigger. The inspector shows a green "Webhook" or "Cron" badge with its icon.
  5. Open History. The Status column, second from the right, shows each work order's state as a smaller pill.
  6. Click a run. The header shows its state and its version. Hover the version: the tooltip still shows.
  7. On History, click a work order's id in the Input column. The Dataclip Details box shows the type as a pale badge.
  8. Run mix test test/lightning_web/components/ui/badge_test.exs test/lightning_web/live/run_live and cd assets && npx vitest run test/ui/Badge.test.tsx.

Additional notes for the reviewer

  1. This is only part of the badge work. The rest of the badges stay as they are until we settle some design questions: pill or square corners, how many sizes, whether a dot with text is a badge, pale or strong fills, the colour for each run state, and borders. Moving them now would mean guessing those answers one badge at a time.
  2. Filter chips on History are left out. They open menus and change filters, so they're controls, and will probably become a kind of button.
  3. dot and pulse are in Badge but nothing in the app uses them yet. They were tried on the workflows list, where the text came out too small next to the table, so that page was put back. They stay while the dot question is open.
  4. An explicit color={nil} renders neutral, so an unknown run state shows a grey badge instead of crashing the page.
  5. Mono badges have 2.5px of padding on top and 1.5px below. Fira Code leaves room below the baseline, so ids sat high with even padding.
  6. This branch is stacked on Move every tab bar onto one shared tabs component #5233 (tabs). It touches tabs.css because the icon size fix covers both components.

AI Usage

Please disclose whether you've used AI anywhere in this PR (it's cool, we just want to know!):

  • I have used Claude Code
  • I have used another model
  • I have not used AI

You can read more details in our Responsible AI Policy

Pre-submission checklist

  • I have performed an AI review of my code (we recommend using /review with Claude Code)
  • I have implemented and tested all related authorization policies. (e.g., :owner, :admin, :editor, :viewer)
  • I have updated the changelog.
  • I have ticked a box in "AI usage" in this PR

@github-project-automation github-project-automation Bot moved this to New Issues in Core Oct 9, 2026
@lmac-1
lmac-1 changed the base branch from main to tabs-refactor October 9, 2026 14:51

This branch has not been deployed

No deployments
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: New Issues

Development

Successfully merging this pull request may close these issues.

1 participant