Skip to content

[6.x] Optically centre badge text - #15710

Merged
jaygeorge merged 1 commit into
6.xfrom
15710-optically-centre-badge-text
Oct 23, 2026
Merged

jaygeorge merged 1 commit into
6.xfrom
15710-optically-centre-badge-text

Conversation

@jaygeorge

@jaygeorge jaygeorge commented Oct 23, 2026 •

Copy link
Copy Markdown
Contributor

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.

image

What this PR Does

  • Badge text is trimmed with text-box and nudged so it sits between x-height and cap height, using a new st-text-trim-optical-cap utility. This covers the text prop, plain text in the slot, and the prepend/append labels.
  • Each badge size gets a minimum height, so light and dark badges match, and badges can still grow if you add padding or the text wraps.
  • Badges that pass their own elements through the slot (Bard and Replicator set badges, relationship badges, the asset editor's last modified pill) trim those elements too. The set group chevron loses its 1px nudge, as it was only there to line up with the untrimmed text.
  • The header Search label and the array fieldtype's Close button use the same trim.
  • Collection entry counts keep their cap height trim, as they only ever show digits.
  • The Badge docs explain adding st-text-trim-optical-cap to your own slot content.

Why not just trim to cap height?

That's the obvious choice, and it's what the text-box spec'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

image

How to Reproduce

  1. Add an entries field to a collection's blueprint, make it listable and give a couple of entries a value.
  2. Visit the collection's listing in light and dark mode and compare the relationship and status badges with 6.x.
  3. Open an entry with grouped Bard or Replicator sets and look at the set badges.

- 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
@jaygeorge
jaygeorge added this pull request to stack #15712 October 23, 2026 14:41
@jaygeorge
jaygeorge merged commit c195efc into 6.x Oct 23, 2026
66 checks passed
@jaygeorge
jaygeorge deleted the 15710-optically-centre-badge-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