[EuiLink] Quieter default: paragraph text, dotted underline, primary on hover - #9904
Draft
ryankeairns wants to merge 4 commits into
Draft
[EuiLink] Quieter default: paragraph text, dotted underline, primary on hover#9904ryankeairns wants to merge 4 commits into
ryankeairns wants to merge 4 commits into
Conversation
…over Align default link chrome with the visual refresh hierarchy so body links sit with text until interaction, and primary CTAs stay distinct. `primary` and `text` now share that interactive treatment. Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
Contributor
There was a problem hiding this comment.
Pull request overview
This PR updates EuiLink’s default visual treatment to be quieter at rest (paragraph text + dotted underline) and transition to primary styling on hover/focus, aligning link affordance with the “visual refresh” direction while keeping semantic link colors static. It also updates documentation and Jest snapshots to reflect the new default classes/styling.
Changes:
- Updated shared
euiLinkCSSto use paragraph-colored text + dotted underline at rest, and primary color + solid underline on hover/focus. - Adjusted
EuiLink’s color handling soprimaryandtextshare the same default interactive styling, while semantic colors remain static on hover/focus. - Updated docs and multiple component snapshots for the new generated Emotion classnames/styling output.
Reviewed changes
Copilot reviewed 9 out of 9 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| packages/website/docs/components/navigation/link.mdx | Updates docs to describe the new default/alias behavior and demo labeling. |
| packages/eui/src/components/link/link.tsx | Treats primary + text as the same default interactive styling; semantic colors still get explicit styles. |
| packages/eui/src/components/link/link.styles.ts | Implements the new shared link “chrome” and updates disabled/static color styling behavior. |
| packages/eui/src/components/link/snapshots/link.test.tsx.snap | Snapshot updates for default Emotion class changes. |
| packages/eui/src/components/breadcrumbs/snapshots/breadcrumbs.test.tsx.snap | Snapshot updates reflecting the new default link class output. |
| packages/eui/src/components/page/page_header/snapshots/page_header.test.tsx.snap | Snapshot updates reflecting the new default link class output. |
| packages/eui/src/components/page/page_header/snapshots/page_header_content.test.tsx.snap | Snapshot updates reflecting the new default link class output. |
| packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/snapshots/quick_select_popover.test.tsx.snap | Snapshot updates reflecting the new default link class output. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
Comment on lines
+89
to
92
|
|
||
| &:target { | ||
| color: darken(${color}, 10%); | ||
| } |
Co-authored-by: Cursor <cursoragent@cursor.com>
Co-authored-by: Cursor <cursoragent@cursor.com>
💔 Build Failed
Failed CI StepsHistory
|
💚 Build Succeeded
|
122 visual difference(s) found - expand to review, then click Approve visual changes to update baselineseuiemptyprompt (8 differences)
euimarkdownformat (6 differences)
euicombobox (4 differences)
euiselectable (4 differences)
euisuperdatepicker (4 differences)
euiheader (12 differences)
euibreadcrumbs (8 differences)
euicollapsiblenav (2 differences)
euilink (4 differences)
euibasictable (18 differences)
euidatagrid (50 differences)
|
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
Related to #9899 (visual refresh) — EuiLink default interaction slice. Delivers the global quieter-link treatment; optional transparent row backgrounds remain open on that issue. Sibling action-icon quieting: #9902.
color="primary"/color="text":textParagraph+ dotted underline at rest → primary on hover/focus (solid underline)primaryandtextnow share that interactive treatment (no longer two static paints)subdued,danger, etc.) stay static and override the hover→primary shifteuiLinkCSS(also used by bare anchors inEuiText) gets the same default chromeTest plan
primaryandtextlook the same; semantic colors unchanged at rest/hover<a>) match the quieter treatmentpackages/eui/changelogs/upcoming/9904.mdMade with Cursor