[EuiHeaderLogo] Add hover style by mgadewoll · Pull Request #9240 · elastic/eui

mgadewoll · 2025-11-26T08:47:01Z

Summary

This PR updates EuiHeaderLogo to have a visible hover style to ensure it's aligned with other interactive elements (like EuiHeaderLink) used inside EuiHeader.

ℹ️ This implementation reuses the base button styles directly instead of reusing e.g. EuiHeaderLink. The reason is that reusing EuiHeaderLink or EuiButtonEmpty would add more complexity (e.g. more DOM nesting) that's not needed for this use case. Instead we can keep it simple and just apply the underlying styles directly.

Why are we making this change?

💅 UI update and consistency: The update is part of the UI update initiative. It ensures that the header logo behaves and looks like other EuiHeaderLink components on hover.

Screenshots #

before	after


Screen.Recording.2025-11-26.at.09.21.58.mov	Screen.Recording.2025-11-26.at.09.22.08.mov

Impact to users

🟢 There are no code changes required on consumer side.

⚠️ Due to the updated Emotion style classes, snapshot tests might require updating.

QA

verify EuiHeaderLogo has a hover style that matches the hover style of text EuiButtonEmpty as well as of EuiHeaderLink with isActive={false}

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)
- If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

- reuses button styles directly instead of using EuiHEaderLink or EuiButtonEmpty to reduce added DOM structure and variant complexity as it's not required for this component

- the updates are kind of random, as there are minute pixel changes on the strokes of the different logo parts

packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_Playground.png

elasticmachine · 2025-11-26T09:04:11Z

💚 Build Succeeded

cc @mgadewoll

elasticmachine · 2025-11-26T09:17:10Z

💚 Build Succeeded

Buildkite Build
Commit: 36de7ce

cc @mgadewoll

tkajtoch

Code changes look great and work as expected. I confirm that the hover color used matches EuiButtonEmpty's text and EuiHeaderLink's hover colors.

JoseLuisGJ

LGTM thanks @mgadewoll for addressing this.

## Dependency updates - `@elastic/eui`: `v109.2.0` ⏩ `v110.0.0` --- ## Changes - Updates usages of the `message` prop on `EuiInMemoryTable` to `noItemsMessage` - Updates usages of `EuiSearchBar`'s `onChange` prop to check for the `query` argument, as it may be `null` now - Removes obsolete `color` props on implementations of `EuiPageTemplate` and `EuiPageTemplate.Header` (`color` prop wasn't applied before either) ## Package updates ### `@elastic/eui` v110.0.0 - Updated `EuiSuperDatePicker` to expose plain text `utcOffset` and `timeZoneName` in `timeZoneDisplayProps.customRender` render function ([#9245](elastic/eui#9245)) - Updated `EuiHeaderLogo` to add a hover style ([#9240](elastic/eui#9240)) - Made `EuiQuickSelectPanel` available for importing from the `@elastic/eui` package ([#9239](elastic/eui#9239)) - Updated `EuiAvatar` to support Emoji Sequence ("advanced") in the `initials` prop ([#9227](elastic/eui#9227)) - Added `color` prop on `EuiPageHeader` to support `transparent` (default) and `plain` backgrounds. ([#9220](elastic/eui#9220)) - Added `color` prop on `EuiPage` to support `transparent` (default) and `plain` backgrounds. ([#9220](elastic/eui#9220)) - Updated `EuiPageTemplate` to ensure `panelled=true` renders a `EuiPageHeader` with a plain background by default ([#9220](elastic/eui#9220)) - Removed the default background style on `EuiPageTemplate`'s outer wrapper ([#9220](elastic/eui#9220)) **Bug fixes** - Fixed icon size in `EuiSuperDatePicker`'s time window buttons when `compressed={true}` ([#9245](elastic/eui#9245)) - Fixed `EuiIcon` visibility issue with `logoElastic` when `color` is set to `text` or `ghost` in light mode ([#9247](elastic/eui#9247)) - Fixed `EuiInMemoryTable` support for controlled search for plain text (when `searchFormat="text"`) by properly handling `search.query` and `search.defaulQuery` ([#9142](elastic/eui#9142)) **Breaking changes** - Removed deprecated `message` prop from `EuiInMemoryTable`, use `noItemsMessage` instead ([#9234](elastic/eui#9234)) **Accessibility** - Improved the accessibility of input fields in the popover of `EuiSuperDatePicker` by properly labeling them ([#9239](elastic/eui#9239)) - Improved the accessibility of `EuiSelectable` by removing empty `aria-activedescendant` attribute when no option is active to ensure the search input is perceivable by screen readers ([#9223](elastic/eui#9223)) --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: Jorge Oliveira <jorge.oliveira@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

## Dependency updates - `@elastic/eui`: `v109.2.0` ⏩ `v110.0.0` --- ## Changes - Updates usages of the `message` prop on `EuiInMemoryTable` to `noItemsMessage` - Updates usages of `EuiSearchBar`'s `onChange` prop to check for the `query` argument, as it may be `null` now - Removes obsolete `color` props on implementations of `EuiPageTemplate` and `EuiPageTemplate.Header` (`color` prop wasn't applied before either) ## Package updates ### `@elastic/eui` v110.0.0 - Updated `EuiSuperDatePicker` to expose plain text `utcOffset` and `timeZoneName` in `timeZoneDisplayProps.customRender` render function ([elastic#9245](elastic/eui#9245)) - Updated `EuiHeaderLogo` to add a hover style ([elastic#9240](elastic/eui#9240)) - Made `EuiQuickSelectPanel` available for importing from the `@elastic/eui` package ([elastic#9239](elastic/eui#9239)) - Updated `EuiAvatar` to support Emoji Sequence ("advanced") in the `initials` prop ([elastic#9227](elastic/eui#9227)) - Added `color` prop on `EuiPageHeader` to support `transparent` (default) and `plain` backgrounds. ([elastic#9220](elastic/eui#9220)) - Added `color` prop on `EuiPage` to support `transparent` (default) and `plain` backgrounds. ([elastic#9220](elastic/eui#9220)) - Updated `EuiPageTemplate` to ensure `panelled=true` renders a `EuiPageHeader` with a plain background by default ([elastic#9220](elastic/eui#9220)) - Removed the default background style on `EuiPageTemplate`'s outer wrapper ([elastic#9220](elastic/eui#9220)) **Bug fixes** - Fixed icon size in `EuiSuperDatePicker`'s time window buttons when `compressed={true}` ([elastic#9245](elastic/eui#9245)) - Fixed `EuiIcon` visibility issue with `logoElastic` when `color` is set to `text` or `ghost` in light mode ([elastic#9247](elastic/eui#9247)) - Fixed `EuiInMemoryTable` support for controlled search for plain text (when `searchFormat="text"`) by properly handling `search.query` and `search.defaulQuery` ([elastic#9142](elastic/eui#9142)) **Breaking changes** - Removed deprecated `message` prop from `EuiInMemoryTable`, use `noItemsMessage` instead ([elastic#9234](elastic/eui#9234)) **Accessibility** - Improved the accessibility of input fields in the popover of `EuiSuperDatePicker` by properly labeling them ([elastic#9239](elastic/eui#9239)) - Improved the accessibility of `EuiSelectable` by removing empty `aria-activedescendant` attribute when no option is active to ensure the search input is perceivable by screen readers ([elastic#9223](elastic/eui#9223)) --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: Jorge Oliveira <jorge.oliveira@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

mgadewoll added 3 commits November 26, 2025 09:39

refactor(euiheaderLogo): add hover styles

ac417b4

- reuses button styles directly instead of using EuiHEaderLink or EuiButtonEmpty to reduce added DOM structure and variant complexity as it's not required for this component

test(vrt): update reference images

59b9a4d

- the updates are kind of random, as there are minute pixel changes on the strokes of the different logo parts

chore: add changelog

36de7ce

mgadewoll self-assigned this Nov 26, 2025

mgadewoll requested a review from JoseLuisGJ November 26, 2025 08:51

mgadewoll commented Nov 26, 2025

View reviewed changes

packages/eui/.loki/reference/chrome_desktop_Layout_EuiHeader_EuiHeaderLogo_Playground.png Show resolved Hide resolved

mgadewoll marked this pull request as ready for review November 26, 2025 09:19

mgadewoll requested a review from a team as a code owner November 26, 2025 09:19

tkajtoch self-requested a review November 26, 2025 09:44

tkajtoch approved these changes Nov 26, 2025

View reviewed changes

JoseLuisGJ approved these changes Nov 26, 2025

View reviewed changes

mgadewoll merged commit 531a048 into elastic:main Nov 26, 2025
11 checks passed

mgadewoll mentioned this pull request Dec 2, 2025

Update EUI to 110.0.0 elastic/kibana#244866

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiHeaderLogo] Add hover style#9240

[EuiHeaderLogo] Add hover style#9240
mgadewoll merged 3 commits intoelastic:mainfrom
mgadewoll:header/add-hover-on-logo

mgadewoll commented Nov 26, 2025 •

edited

Loading

Uh oh!

Uh oh!

elasticmachine commented Nov 26, 2025

Uh oh!

elasticmachine commented Nov 26, 2025

Uh oh!

tkajtoch left a comment

Uh oh!

JoseLuisGJ left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

mgadewoll commented Nov 26, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

Uh oh!

elasticmachine commented Nov 26, 2025

💚 Build Succeeded

Uh oh!

elasticmachine commented Nov 26, 2025

💚 Build Succeeded

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

JoseLuisGJ left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mgadewoll commented Nov 26, 2025 •

edited

Loading