| AnneT | |
| Jun 17 2025, 4:37 PM |
| F62365807: image.png | |
| Jun 17 2025, 4:37 PM |
| F62365797: Screenshot 2025-06-17 at 12.31.25 PM.png | |
| Jun 17 2025, 4:37 PM |
Steps to replicate the issue:
What happens?: The descenders of the g and y are cut off:
What should have happened instead?:
The chips should be tall enough to show the full text. Here's a screenshot from Codex v1.23.0:
Software version: Codex v2.1.0, likely since 2.0.0-rc.1. The InputChip's line height used to be 1.57 and is now 1.
| Subject | Author | Repo | Branch | Lines +/- | |
|---|---|---|---|---|---|
| Update Codex from v2.2.0 to v2.2.1 | Catrope | mediawiki/core | master | +175 -111 | |
| InputChip, tokens: Update max-height of chips | Dtorsani | design/codex | main | +9 -3 |
Since inputs do not currently scale across text modes, all InputChips are meant to remain 22px tall in all text modes. Could a potential solution be to change the max-height to 22px? This would solve the problem. The only issue is Codex doesn't currently have a size token for 22px (or 1.375rem) and I'm not sure if we would want to add one for this.
The effective height at the medium font mode is currently 22px, which seems to be too small, and we should never set max-height in pixels anyway (current max-height is 1.5rem which works out to 24px). Setting the line-height to @line-height-small (1.375rem) seems to resolve the issue without exceeding the current max-height.
Setting the line-height to @line-height-small makes the InputChip 22px at the small mode, and 24px at all other modes, while the input itself never changes size. This was not the design intention, and feels like a mistake. The design intention was that everything within inputs stays the same size (for now), except for text and icons. And the intended height for an InputChip across all modes was 22px, or 1.375rem. Is there another way to keep these at 22px without adding a new sizing token? We could consider a component token.
Alternatively, we could also consider dynamically change the size of inputs and buttons based on the size of the text, which is something we wanted to consider at some point anyways.
You could change max-height to @line-height-small as well - we use line height tokens for heights in a few places in the library, although this one is slightly less justified since we're not trying to match the height with the line height, it's just a coincidence that the line height token is exactly what we need. Otherwise, you'd need to add a new size token. I'm not sure if that's preferable - I feel like we limited the size token scale for consistency's sake.
A third option would be to create a component token, max-height-chip or something?
Unfortunately, that wouldn't work, since the @line-height-small token changes at every text mode, and what we need is a fixed size. I think adding a new component token would be the best solution at this time.
Change #1165069 had a related patch set uploaded (by Dtorsani; author: Dtorsani):
[design/codex@main] InputChip, tokens: Update max-height of chips
Change #1165069 merged by jenkins-bot:
[design/codex@main] InputChip, tokens: Update max-height of chips
Change #1171718 had a related patch set uploaded (by Catrope; author: Catrope):
[mediawiki/core@master] Update Codex from v2.2.0 to v2.2.1
Change #1171718 merged by jenkins-bot:
[mediawiki/core@master] Update Codex from v2.2.0 to v2.2.1