Repository navigation
[EUILink] Add an explicit underline offset - #10248
Merged
Merged
Conversation
andreadelrio
changed the title
📷 122 visual difference(s) foundLook at the visual diff below. If everything is expected, run Approve visual changes to update baselines, re-run the job or make appropriate fixes. See the visual regression testing wiki for more information. Expand to revieweuibasictable (18 differences)
euibreadcrumbs (2 differences)
euicollapsiblenav (2 differences)
euicombobox (4 differences)
euidatagrid (50 differences)
euiemptyprompt (8 differences)
euiform (2 differences)
euiheader (6 differences)
Table truncated - see the Buildkite annotation for the full diff. |
Contributor
There was a problem hiding this comment.
🟢 Approval recommended
The link underline-spacing update has no active review issues.
No open issues 🎉
What changed in this PR
Adds an explicit underline offset to shared EuiLink styles, improving separation between text and underlines at small font sizes without changing the public API.
Changes:
- Sets
text-underline-offset: 0.15emso spacing scales with font size and remains consistent across interaction states. - Adds a changelog entry documenting the visual fix.
| File | Description |
|---|---|
packages/eui/src/components/link/link.styles.ts |
Adds the underline offset and an explanatory comment. |
packages/eui/changelogs/upcoming/10248.md |
Documents the link underline spacing fix. |
Review effort: Balanced
📷 122 visual difference(s) foundLook at the visual diff below. If everything is expected, run Approve visual changes to update baselines, re-run the job or make appropriate fixes. See the visual regression testing wiki for more information. Expand to revieweuibasictable (18 differences)
euibreadcrumbs (2 differences)
euicollapsiblenav (2 differences)
euicombobox (4 differences)
euidatagrid (50 differences)
euiemptyprompt (8 differences)
euiform (2 differences)
euiheader (6 differences)
Table truncated - see the Buildkite annotation for the full diff. |
angeles-mzb
self-requested a review
October 28, 2026 08:34
angeles-mzb
reviewed
Oct 29, 2026
angeles-mzb
approved these changes
Oct 29, 2026
angeles-mzb
left a comment
angeles-mzb
left a comment
Contributor
There was a problem hiding this comment.
I've tested different links and sizes in docs and storybook and they look better in terms of readability.
I did notice that on keyboard navigation on Chrome the focus ring is now too close to the underline. But since trying to fix that will probably take us back where we started (with an underline to close to the text) and since it is noticeable mainly for Chrome I think changes should be ok:
Chrome:
| Before | After |
|---|---|
 |
 |
Safari:
| Before | After |
|---|---|
 |
 |
Firefox:
| Before | After |
|---|---|
 |
 |
Co-authored-by: Ángeles Martínez Barrio <angeles.martinezbarrio@elastic.co>
💚 Build Succeeded
History
|
💚 Build Succeeded
History
|
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
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.
Summary
text-underline-offset: 0.15emtoEuiLink's underline styles (euiLinkCSS).EuiLinknever set an underline offset, so browsers used the font's default position. In Chrome and Safari that leaves only a ~1px gap between the text and the dotted underline at every font size, which blurs into the letters after anti-aliasing and makes the dots look stuck to the text. It's most visible in Kibana for links insideEuiText size="xs"(12px).EuiLink)¹ Kibana "after" screenshot applies
text-underline-offset: 0.15emto.euiLinkvia browser DevTools.emso it scales with font size: ~2px at 12–16px, and proportionally more for larger text (e.g. links in headings).euiLinkCSSis also used for plain<a>tags insideEuiText/EuiMarkdownFormat, and interactiveEuiBreadcrumbsrenderEuiLink, so all of those get the fix with no extra changes.EuiButtonEmpty, badges, side nav, etc.) are solid hover-only affordances and were left as they are.Gap between text and underline
Before → after, measured on a regular (1×) screen. On Retina screens, 12px text can land half a pixel off because of how browsers round.
Same at 12px, 14px and 16px. With the fix, every browser gets the same ~2px gap, and the gap grows with larger text.
Other values considered
0.125em0.15em0.2em2px0.15emat these sizes, but doesn't scale with larger textRanges show differences between browsers. Measured in Chrome, Firefox and Safari (via Playwright) at 1× and 2× device pixel ratio.
API Changes
Impact Assessment
EuiLink(and plain links insideEuiText/EuiMarkdownFormat) sits slightly lower: ~1px further from the text in Chrome and Safari. Consumers with their owntext-underline-offsetoverride are unaffected; overrides oftext-decorationalone keep the new offset.Impact level: 🟢 Low
Release Readiness
Documentation:No docs changes needed.Figma:{link if the Figma link component should be updated to match}Migration guide:Not needed; no API changes.Adoption plan:Not a new feature.QA instructions for reviewer
EuiLinkandEuiTextpages in the docs site or Storybook.EuiText size="xs"), 14px (size="s") and 16px (default), confirm the dotted underline has a visible gap below the text and doesn't touch the letters.g,p,y): the underline should still break around them.externallink (with the icon) and anEuiBreadcrumbslink.Checklist before marking Ready for Review
QA: Tested docs changesBreaking changes: Addedbreaking changelabel (if applicable)Reviewer checklist