fix: vertically align helper-text error icons in inputs - #880
Open
adrienzheng-cb wants to merge 4 commits into
Open
fix: vertically align helper-text error icons in inputs#880adrienzheng-cb wants to merge 4 commits into
adrienzheng-cb wants to merge 4 commits into
Conversation
Collaborator
🟡 Heimdall Review Status
🟡
|
| Code Owner | Status | Calculation | ||||||||
|---|---|---|---|---|---|---|---|---|---|---|
| ui-systems-eng-team |
🟡
0/1
|
Denominator calculation
|
Contributor
cb-ekuersch
previously approved these changes
Sep 11, 2026
github-actions
Bot
added
packages:common
packages:illustrations
packages:mcp-server
labels
The negative-variant icon sat off the text baseline because web used an inline-block wrapper with inherited line-height, and mobile clipped the glyph in a fixed-size box. Align it with the helper text on both platforms. Co-authored-by: Cursor <cursoragent@cursor.com>
cb-ekuersch
force-pushed
the
adrien/cds-2622-helper-text-icon-alignment
branch
from
September 11, 2026 21:42
f43613d to
db13cf0
Compare
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
3 participants
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.
What changed? Why?
Fixes CDS-2622. The error icon in
HelperText(used byTextInput,Select, and other inputs) sat off the text baseline on both web and mobile.Root cause (required for bugfixes)
display: inline-block, so it inheritedlabel2line-height (20px) around a 12px icon and baseline-aligned that taller box with the text.Textused a fixedheight/widthof 12px while still inheritinglabel2line-height (16px), which clipped and shifted the glyph.The web wrapper is now
inline-flexwithvertical-align: middle. Mobile sizes the glyph withfontSize/lineHeightand tokenized end padding instead of a clipped box.This covers every input that renders
HelperText, includingTextInput,Select, and alpha Select/Combobox.UI changes
Figma spec (negative helper text): icon optically centered with “Error message”.
Testing
How has it been tested?
Testing instructions
fgNegative) and CustomColor.negative).TextInputandSelectnegative helper text.Illustrations/Icons Checklist
N/A
Change management
type=routine
risk=low
impact=sev5
automerge=false
Made with Cursor