Repository navigation
Labels: Add an outlined label component and use it for visibility and release labels - #91
Merged
Merged
Conversation
… release labels The pill-shaped outline label was written twice: for the organization's visibility badge and for the Draft, Pre-release and Latest labels beside a release title, each with its own selector. components/common/label/label.css now provides theme-label with three modifiers (muted, solid, large). The org header and the release list add the classes and the two bespoke rules are removed. No visual change. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
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
1 participant
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.
Stacked on #90 (base is its branch).
What
GitHub's pill-shaped outline label was styled in two places with separate selectors:
styles/pages/organization.css: the organization's Private / Limited badge.styles/pages/releases.css: the Draft, Pre-release and Latest labels beside a release title, plus a separate rule making Draft solid.components/common/label/label.css(new, linked fromcomponent_assets.tmpl) provides one class for a Forgejo.ui label:theme-label0 7px, 1px outline in the label's own text colour, pill radius, transparenttheme-label-mutedtheme-label-solidtheme-label-large2px 8px, 24px tall (beside a large title)templates/org/header.tmplandtemplates/repo/release/list.tmpladd the classes; the bespoke rules are removed. The organization page keeps one line removing Forgejo's label margin.The declarations are
!importantbecause the theme's general label rules load later and are more specific; without that the labels changed by a pixel or two.Not converted: labels Forgejo renders itself (pull request and issue state labels, the repository visibility label in the header), which cannot take a class.
Verification
Measured on the previous branch and on this one. All four labels are identical: Draft 47×24px solid grey with its 8px left margin, Pre-release 85×24px orange outline, Latest 54×24px green outline, organization badge 56×20px muted with
0 7pxpadding.bun vitest(403 passed),bun checkand Prettier pass.🤖 Generated with Claude Code