elastic / elastic/eui

[HCM] Update hover styling for buttons

Open
#9,082 1 comment 0 reactions 1 assignee Claimed by @mgadewoll View on GitHub
accessibility stale-issue
Dominant language
TypeScript
Stars
6.4k
Forks
911
Avg merge
2d 15h
Merged PRs (30d)
69

Description

**Description**

The hover styling for EUI buttons in HCM mode does currently not result in the best visible distinction.

🔗 [Initial request](https://github.com/elastic/eui-private/issues/421#issuecomment-3355494864)

To improve the visible distinction between default and hover state for buttons, we want to update it to use a dashed border styling.

| current | suggestion |
|---|---|
| | |

ℹ️ This styling was already implemented as temporary custom solution on Kibana for the new SideNav.

**Value / Impact**

:accessibility: Accessibility: Increased visible distinction
💅 UI consistency: Align the styling for all EUI button usages

**Urgency**

It's not urgent but it would be good to align the styling considering we have the custom style already in Kibana.

**Do alternatives or workarounds exist?**

There is a custom implementation in use for the new SideNav on Kibana, to ensure accessibility requirements.

**Additional context (Optional)**

⚠️ The update needs to consider base EUI buttons but also button compositions like `EuiButtonGroup` and `EuiFilterGroup` which handle borders on the wrapper instead of the buttons.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.