Skip to content

[6.x] Optically centre chip text - #15711

Merged
jaygeorge merged 1 commit into
15710-optically-centre-badge-textfrom
15711-optically-centre-chip-text
Oct 23, 2026
Merged

jaygeorge merged 1 commit into
15710-optically-centre-badge-textfrom
15711-optically-centre-chip-text

Conversation

@jaygeorge

@jaygeorge jaygeorge commented Oct 23, 2026 •

Copy link
Copy Markdown
Contributor

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.

image

What this PR Does

  • Adds an st-text-trim-optical utility that trims to x-height and nudges the text down so it sits halfway between x-height and cap height.
  • Combobox, validation rule and dictionary chips all use it.
  • Combobox chips drop their own padding override and use the badge's minimum height from [6.x] Optically centre badge text #15710 instead.
  • Replaces the st-text-trim-ex-alphabetic utility, 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

image

How to Reproduce

  1. Add a taggable field to a blueprint and enter a mix of tags like email, News, UK and 2026.
  2. Compare the chips with 6.x in light and dark mode.
  3. Do the same with a dictionary field (e.g. countries) and with the validation rules on any field in the blueprint editor.

- 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
@jaygeorge
jaygeorge added this pull request to stack #15712 October 23, 2026 14:41
@jaygeorge
jaygeorge merged commit 70a0ac5 into 6.x Oct 23, 2026
66 checks passed
@jaygeorge
jaygeorge deleted the 15711-optically-centre-chip-text branch October 23, 2026 14:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant