Repository navigation
[6.x] Optically centre badge text - #15710
Merged
Merged
Conversation
- Badge text (the text prop, plain text in the slot, and the labels before and after the value) trims to x-height and nudges down to sit between x-height and cap height, so lowercase and Capitalised labels both look centred - Each badge size gets a minimum height, so dark mode badges match light ones and badges can still grow - Bard and Replicator set badges, relationship badges and the asset editor's last-modified pill trim their own text elements; the set group chevron loses its 1px nudge - The header Search label and the array Close button use the same trim - Collection entry counts keep the cap trim, as they only show digits - Badge docs explain adding st-text-trim-optical-cap to custom slot content
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 of the Problem
Badge text isn't trimmed, so it sits wherever the font's line box puts it. Capitals end up roughly centred, but lowercase labels sit noticeably low.
Dark mode badges also drop their border and get a small bottom padding nudge to compensate, which leaves them a pixel or two shorter than the same badges in light mode.
What this PR Does
text-boxand nudged so it sits between x-height and cap height, using a newst-text-trim-optical-caputility. This covers thetextprop, plain text in the slot, and the prepend/append labels.st-text-trim-optical-capto your own slot content.Why not just trim to cap height?
That's the obvious choice, and it's what the
text-boxspec's examples use. It centres capitals perfectly, but most badge labels are mostly lowercase (statuses, titles, field handles), and those sit low.Trimming to x-height has the opposite problem, so this sits in between, a touch nearer cap height. That suits small, tight boxes like badges, where capitals sitting high is the more noticeable of the two.
Trimming each badge differently depending on its label would put neighbouring badges on different baselines, which looks worse than either.
Why a minimum height rather than a fixed one?
A fixed height would keep every badge exactly the same size, but it would also stop addons making a badge taller with padding, and clip text that wraps. Badges have always been able to grow, so a minimum height keeps that working.
Before / After
How to Reproduce