Repository navigation
Conversation
This branch has not been deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Description
This PR adds one shared badge for React and LiveView, with one stylesheet, and moves the first badges in the app onto it.
pillwith one caller and about 20 hand-written badges, and React had a smallcommon/Badge.tsxand about 20 more. Each looked a little different.<.badge>fromlib/lightning_web/components/ui/badge.exand React usesBadgefromassets/js/ui/Badge.tsx. Both use the.ui-badgeclasses inassets/css/ui/badge.css. Options: eight colours, default or small, mono, an icon, an x to remove, and a dot that can pulse.<span>. Real buttons and links keep their element and take the classes frombadge_class/1orbadgeClassName(). The x is always atype="button"with a label.pill/1and the private sandboxbadge/1are deleted.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/componentsshows the LiveView badges next to the React ones.Closes CON-342
Validation steps
/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.mix test test/lightning_web/components/ui/badge_test.exs test/lightning_web/live/run_liveandcd assets && npx vitest run test/ui/Badge.test.tsx.Additional notes for the reviewer
dotandpulseare 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.color={nil}renders neutral, so an unknown run state shows a grey badge instead of crashing the page.tabs.cssbecause 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!):
You can read more details in our Responsible AI Policy
Pre-submission checklist
/reviewwith Claude Code):owner,:admin,:editor,:viewer)