Background
In T396519: Message: Improve readability and usability a use of line-height was introduced 8aafb2a333 to vertically align the icon with the surrounding text. This Icon height override in Message component is now vertically misaligning the Message icon in certain contexts.
This fix now breaks icon height, because Vue icon styles override message styles:
.cdx-message .cdx-message__icon, .cdx-message .cdx-message__icon--vue { height: var(--line-height-medium,1.625rem); }
.cdx-message--warning .cdx-message__icon { min-width: 10px; min-height: 10px; width: calc(var(--font-size-medium,1rem) + 4px); height: calc(var(--font-size-medium,1rem) + 4px); display: inline-block; vertical-align: text-bottom; }
For example, see warning message in the hidden diff.
This was reported first by @SerDIDG in T398529#11048062
Developer notes
- We can already see one issue in the output code above. The min-width and min-height of the icon, even at small font-size would be too small with 10px for a medium-sized icon at 18px . This would not fix the issue though.
- Setting a line-height token to height is bad practice and here has actually undiscovered caused a regression. While the Codex docs site falls back to a valid CSS var rem value, the height is set to equivalent of 1.5714285 unit-less hence resulting in the rendering issue.
- The whole concept of min-width and min-height is highly probable not necessary anymore. It was invented at times of Internet Explorer in order to prevent SVG rendering blurriness on lo-dpi screens.
Requirement
Scope: Desktop and mobile web. The Message component icon must display at the correct height without vertical misalignment:
- The .cdx-message__icon styles must not override or distort the icon height.
- Warning messages (and other variants) must show icons sized consistently with surrounding text.
- Vue icon styles must not conflict with base message styles.
BDD
Feature: Correct height for Message component icons
Scenario: Warning message icon alignment
Given a warning message is rendered
When the message icon is displayed
Then the icon height matches the expected size (font-size + 4px)
And the icon is vertically aligned with the textTest Steps
Test Case 1: Warning message icon alignment
- Open a page rendering a warning message (e.g., Codex demo or component sandbox).
- Inspect the message icon in DevTools.
- AC1: The icon height equals calc(var(--font-size-medium,1rem) + 4px).
- AC2: The icon is vertically aligned with the text (CSS vertical-align: text-bottom).
- AC3: No extra line-height override misaligns the icon.
QA Results - Prod
| AC | Status | Details |
|---|---|---|
| 1 | ✅ | T401457#11194828 |
| 2 | ✅ | T401457#11194828 |
| 3 | ✅ | T401457#11194828 |
