[HCM] Update hover styling for buttons
- 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
Assessment
This issue has not been assessed yet.