Repository navigation
Conversation
- Combobox, validation rule and dictionary chips trim to x-height and nudge the text halfway to cap height, so lowercase and Capitalised labels both look centred - Combobox chips drop their own padding and use the badge's minimum height - Replaces the st-text-trim-ex-alphabetic utility with st-text-trim-optical
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.
Depends on #15710.
Description of the Problem
Combobox chips trim their text to x-height, which centres lowercase labels like field handles, but anything with capitals or digits ("UK", "2026", "United Kingdom") sits visibly high.
Validation rule chips and dictionary chips aren't trimmed at all, so they don't line up with combobox chips either.
What this PR Does
st-text-trim-opticalutility that trims to x-height and nudges the text down so it sits halfway between x-height and cap height.st-text-trim-ex-alphabeticutility, which was only used by combobox chips.Why halfway?
Chips hold whatever people type or pick, so a single field can easily mix lowercase handles, capitalised names and numbers. Trimming to x-height favours lowercase and trimming to cap height favours capitals, and either way half the chips look off.
Halfway keeps both close enough to centre that neither stands out. It's a slightly bigger nudge than badges get, as chips are larger and roomier.
Trimming per label would put chips on the same row on different baselines, which looks worse than either.
Before / After
How to Reproduce
email,News,UKand2026.