[EuiButton] Use `euiDisabledSelector` in `useEuiButtonColorCSS` #9226

mgadewoll · 2025-11-20T11:01:04Z

Summary

This PR is a tiny follow-up to #9201 which introduced custom disabled behavior for buttons via aria-disabled. To support the change in styles, we added the helper selector euiDisabledSelector that combines :disabled and [aria-disabled="true"] selectors.

This PR updates the shared button styles in useEuiButtonColorCSS to use the new euiDisabledSelector. This update is mainly a cleanup/enhancement as the styles were also working as expected before for EUI button components as pointer events are removed.

Why are we making this change?

💪 Robustness: Ensures that potential custom usages of useEuiButtonColorCSS would correctly handle custom disabled selectors via aria-disabled too.

🐛 Fix: Ensures High contrast mode styles apply correctly on EuiButtonGroup buttons

Impact to users

🟢 There are no changes required on consumer side.

QA

🧪 Storybook:

Checks:

verify hover states work as expected for EUI button components (with hasDisabled set to true or false as well as isDisabled set to true or false) and that there is no regression with production

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)

weronikaolejniczak

I tested all button components in staging, aria-disabled="true" and :disabled are correctly applying styles on hover.

I have found some places that should likely reuse euiDisabledSelector:

packages/eui/src/components/button/button_group/button_group_button.styles.ts:227
packages/eui/src/components/button/button_group/button_group.styles.ts:94
packages/eui/src/components/button/button_group/button_group.styles.ts:101 - uses [disabled] explicitly so for full HCM support it could be updated to :is(${euiDisabledSelector})

- ensures that HCM styles apply correctly

mgadewoll · 2025-11-24T11:03:37Z

I tested all button components in staging, aria-disabled="true" and :disabled are correctly applying styles on hover.

I have found some places that should likely reuse euiDisabledSelector:

packages/eui/src/components/button/button_group/button_group_button.styles.ts:227

packages/eui/src/components/button/button_group/button_group.styles.ts:94

packages/eui/src/components/button/button_group/button_group.styles.ts:101 - uses [disabled] explicitly so for full HCM support it could be updated to :is(${euiDisabledSelector})

@weronikaolejniczak Woops, yeah good catch! 🙏
Updated in d220ccb

packages/eui/changelogs/upcoming/9226.md

weronikaolejniczak

I re-tested, everything works as expected 👌🏻 Thank you for the clean-up and quick updates, Lene! I left a small nit but I'll approve to unblock this PR 🟢

- aka, fix my fat finger typos

elasticmachine · 2025-11-24T11:45:35Z

💚 Build Succeeded

History

💚 Build #2045 succeeded a925a42
💚 Build #2005 succeeded 1f5a113

cc @mgadewoll

elasticmachine · 2025-11-24T11:59:44Z

💚 Build Succeeded

Buildkite Build
Commit: aca5f55

History

💚 Build #5268 succeeded 1f5a113

cc @mgadewoll

- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0` - `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - Only snapshot updates related to EuiPopover, ToolTip and Table changes (see below) ## Package updates ### `@elastic/eui` v109.2.0 - Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values for `grow` are passed ([#9228](elastic/eui#9228)) - Updated shared button styles in `useEuiButtonColorCSS` to use `euiDisabledSelector` ([#9226](elastic/eui#9226)) - Added `euiTextTruncateCSS` Emotion style utility ([#9231](elastic/eui#9231)) - Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` ([#9224](elastic/eui#9224)) - Added component token `components.tableFooterBackground` ([#9224](elastic/eui#9224)) - Updated the color of mobile table header cells to use `colors.textSubdued` ([#9224](elastic/eui#9224)) - Updated `EuiSuperDatePicker` to show a tooltip with the full range details when the button displays a pretty duration e.g. "Last 15 minutes" ([#9221](elastic/eui#9221)) - Updated `EuiPopover` default prop values of `hasArrow`, `position` and `offset`: ([#9218](elastic/eui#9218)) - Changed `hasArrow` to `false` - Changed `position` to `downLeft` - Changed `offset` to `4` when `hasArrow=false` - Updated `EuiInputPopover` `offset` default value to `2` ([#9218](elastic/eui#9218)) - Updated `EuiTourStep` to not apply `hasArrow=true` by default when `decoration="none"` ([#9218](elastic/eui#9218)) - Updated `EuiSuperDatePicker` to have a more forgiving manual input for absolute dates. ([#9199](elastic/eui#9199)) **Bug fixes** - Updated EuiButtonGroup disabled style selectors to use `euiDisabledSelector` to ensure high contrast mode styles apply correctly ([#9226](elastic/eui#9226)) - Updated `EuiSuperDatePicker` to ensure its pretty format button dates are truncated correctly ([#9231](elastic/eui#9231)) - Fixed a visual bug for mobile table action buttons that causes shifting positions when changing color mode ([#8231](elastic/eui#8231)) ([#9224](elastic/eui#9224)) **Accessibility** - Improved the navigation of sibling `EuiToolTip` anchor elements in NVDA browse mode by adding an `id` to ensure they are unique ([#9208](elastic/eui#9208)) ### `@elastic/eui-theme-borealis` v5.1.0 - Added component token `components.tableFooterBackground` ([#9224](elastic/eui#9224)) --------- Co-authored-by: Jorge Sanz <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

- `@elastic/eui`: `v109.1.0` ⏩ `v109.2.0` - `@elastic/eui-theme-borealis`: `v5.0.0` ⏩ `v5.1.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) --- ## Changes - Only snapshot updates related to EuiPopover, ToolTip and Table changes (see below) ## Package updates ### `@elastic/eui` v109.2.0 - Updated `EuiFlexItem` to fall back to `grow={true}` if invalid values for `grow` are passed ([elastic#9228](elastic/eui#9228)) - Updated shared button styles in `useEuiButtonColorCSS` to use `euiDisabledSelector` ([elastic#9226](elastic/eui#9226)) - Added `euiTextTruncateCSS` Emotion style utility ([elastic#9231](elastic/eui#9231)) - Added `hasBackground` prop on `EuiTable`, `EuiBasicTable` and `EuiInMemoryTable` ([elastic#9224](elastic/eui#9224)) - Added component token `components.tableFooterBackground` ([elastic#9224](elastic/eui#9224)) - Updated the color of mobile table header cells to use `colors.textSubdued` ([elastic#9224](elastic/eui#9224)) - Updated `EuiSuperDatePicker` to show a tooltip with the full range details when the button displays a pretty duration e.g. "Last 15 minutes" ([elastic#9221](elastic/eui#9221)) - Updated `EuiPopover` default prop values of `hasArrow`, `position` and `offset`: ([elastic#9218](elastic/eui#9218)) - Changed `hasArrow` to `false` - Changed `position` to `downLeft` - Changed `offset` to `4` when `hasArrow=false` - Updated `EuiInputPopover` `offset` default value to `2` ([elastic#9218](elastic/eui#9218)) - Updated `EuiTourStep` to not apply `hasArrow=true` by default when `decoration="none"` ([elastic#9218](elastic/eui#9218)) - Updated `EuiSuperDatePicker` to have a more forgiving manual input for absolute dates. ([elastic#9199](elastic/eui#9199)) **Bug fixes** - Updated EuiButtonGroup disabled style selectors to use `euiDisabledSelector` to ensure high contrast mode styles apply correctly ([elastic#9226](elastic/eui#9226)) - Updated `EuiSuperDatePicker` to ensure its pretty format button dates are truncated correctly ([elastic#9231](elastic/eui#9231)) - Fixed a visual bug for mobile table action buttons that causes shifting positions when changing color mode ([elastic#8231](elastic/eui#8231)) ([elastic#9224](elastic/eui#9224)) **Accessibility** - Improved the navigation of sibling `EuiToolTip` anchor elements in NVDA browse mode by adding an `id` to ensure they are unique ([elastic#9208](elastic/eui#9208)) ### `@elastic/eui-theme-borealis` v5.1.0 - Added component token `components.tableFooterBackground` ([elastic#9224](elastic/eui#9224)) --------- Co-authored-by: Jorge Sanz <[email protected]> Co-authored-by: Lene Gadewoll <[email protected]>

mgadewoll added 2 commits November 20, 2025 09:53

refactor: use euiDisabledSelector in shared button styles

6e30bfe

chore: add changelog

1f5a113

mgadewoll self-assigned this Nov 20, 2025

mgadewoll marked this pull request as ready for review November 20, 2025 12:02

mgadewoll requested a review from a team as a code owner November 20, 2025 12:02

weronikaolejniczak self-requested a review November 24, 2025 10:05

weronikaolejniczak reviewed Nov 24, 2025

View reviewed changes

mgadewoll added 2 commits November 24, 2025 12:02

refactor(euiButtonGroup): use euiDisabledSelector

d220ccb

- ensures that HCM styles apply correctly

chore: update changelog

a925a42

mgadewoll requested a review from weronikaolejniczak November 24, 2025 11:03

weronikaolejniczak reviewed Nov 24, 2025

View reviewed changes

packages/eui/changelogs/upcoming/9226.md Outdated Show resolved Hide resolved

weronikaolejniczak approved these changes Nov 24, 2025

View reviewed changes

chore: update changelog

aca5f55

- aka, fix my fat finger typos

mgadewoll enabled auto-merge (squash) November 24, 2025 11:30

mgadewoll merged commit 9a590b3 into elastic:main Nov 24, 2025
7 checks passed

weronikaolejniczak mentioned this pull request Nov 24, 2025

Update EUI to 109.2.0 elastic/kibana#244032

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

[EuiButton] Use `euiDisabledSelector` in `useEuiButtonColorCSS` #9226

[EuiButton] Use `euiDisabledSelector` in `useEuiButtonColorCSS` #9226

Uh oh!

mgadewoll commented Nov 20, 2025 •

edited

Loading

Uh oh!

weronikaolejniczak left a comment

Uh oh!

mgadewoll commented Nov 24, 2025

Uh oh!

Uh oh!

weronikaolejniczak left a comment

Uh oh!

elasticmachine commented Nov 24, 2025

Uh oh!

elasticmachine commented Nov 24, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[EuiButton] Use euiDisabledSelector in useEuiButtonColorCSS #9226

[EuiButton] Use euiDisabledSelector in useEuiButtonColorCSS #9226

Uh oh!

Conversation

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

Uh oh!

Summary

Why are we making this change?

Impact to users

QA

General checklist

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

mgadewoll commented Nov 24, 2025

Uh oh!

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Nov 24, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Nov 24, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

[EuiButton] Use `euiDisabledSelector` in `useEuiButtonColorCSS` #9226

[EuiButton] Use `euiDisabledSelector` in `useEuiButtonColorCSS` #9226

mgadewoll commented Nov 20, 2025 •

edited

Loading