[EuiSplitButton] Update disabled style

[mgadewoll]

Summary

• What: Updates EuiSplitButton disabled styles, inverting the container behavior.
• Why: This is a follow-up to the previous redesign PR for EuiSplitButton to invert the disabled style when only a single action is disabled.
• How: Applies disabled styles on the container only if both actions are disabled and not only a single one.

API Changes

⚪ No API changes

Screenshots

Description	Before	After
Light
Dark
Light HCM
Dark HCM

Impact Assessment

Note: Most PRs should be tested in Kibana to help gauge their Impact before merging.

• 🔴 Breaking changes — What will break? How many usages in Kibana/Cloud UI are impacted?
• 💅 Visual changes — May impact style overrides; could require visual testing. Explain and estimate impact.
• 🧪 Test impact — May break functional or snapshot tests (e.g., HTML structure, class names, default values).
• 🔧 Hard to integrate — If changes require substantial updates to Kibana, please stage the changes and link them here.

Impact level: 🟢 Low

🧪 The changes have been run in Kibana CI (🟢 build)
Required Kibana changes: commits added here.

Release Readiness

• Documentation: {link to docs page(s)}
• Figma: {link to Figma or issue}
• Migration guide: {steps or link, for breaking/visual changes or deprecations}
• Adoption plan (new features): {link to issue/doc or outline who will integrate this and where}

QA instructions for reviewer

• verify style changes match design expectations (design review)
• verify there are no unexpected regressions

Checklist before marking Ready for Review

• Filled out all sections above
• QA: Tested light/dark modes, high contrast, mobile, Chrome/Safari/Edge/Firefox, keyboard-only, screen reader
• QA: Tested in CodeSandbox and Kibana
• QA: Tested docs changes
• Tests: Added/updated Jest, Cypress, and VRT
• Changelog: Added changelog entry
• Breaking changes: Added breaking change label (if applicable)

Reviewer checklist

• Approved Impact Assessment — Acceptable to merge given the consumer impact.
• Approved Release Readiness — Docs, Figma, and migration info are sufficient to ship.

[elastic-vault-github-plugin-prod]

📷 8 visual difference(s) found

Look at the visual diff below. If everything is expected, run Approve visual changes to update baselines, re-run the job or make appropriate fixes.

See the visual regression testing wiki for more information.

Expand to review

euisplitbutton (8 differences)

Story	Diff %	Before	After	Diff
dark mode desktop	1.91%
high contrast mode dark desktop	1.96%
high contrast mode desktop	1.95%
kitchen sink desktop	1.90%
dark mode mobile	3.12%
high contrast mode dark mobile	3.21%
high contrast mode mobile	3.20%
kitchen sink mobile	3.12%

[mgadewoll]

buildkite test this

[Copilot]

🟢 Approval recommended

The changes align with the stated styling goal and the remaining feedback is limited to minor clarity/simplification opportunities.

Pull request overview

Updates EuiSplitButton styling so the container-level disabled presentation only applies when both split actions are disabled, aligning with the intended “single disabled action should not disable the whole control” behavior.

Changes:

• Added a combined :has() selector to target the “both actions disabled” state and applied container disabled background only in that state.
• Updated border/high-contrast styling logic to key off the “both disabled” condition (instead of “either disabled”).
• Added an upcoming changelog entry for the EuiSplitButton disabled style update.

File summaries

File	Description
packages/eui/src/components/button/split_button/split_button.styles.ts	Adjusts disabled-state selectors so container/divider styling only switches to disabled when both actions are disabled.
packages/eui/changelogs/upcoming/9986.md	Documents the EuiSplitButton disabled style update in the upcoming changelog.

Review details

• Files reviewed: 2/2 changed files
• Comments generated: 2
• Review effort level: Lite

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[elastic-vault-github-plugin-prod]

📷 8 visual difference(s) found

Look at the visual diff below. If everything is expected, run Approve visual changes to update baselines, re-run the job or make appropriate fixes.

See the visual regression testing wiki for more information.

Expand to review

euisplitbutton (8 differences)

Story	Diff %	Before	After	Diff
dark mode desktop	1.91%
high contrast mode dark desktop	1.96%
high contrast mode desktop	1.95%
kitchen sink desktop	1.90%
dark mode mobile	3.12%
high contrast mode dark mobile	3.21%
high contrast mode mobile	3.20%
kitchen sink mobile	3.12%

[elastic-vault-github-plugin-prod]

📷 8 visual difference(s) found

Look at the visual diff below. If everything is expected, run Approve visual changes to update baselines, re-run the job or make appropriate fixes.

See the visual regression testing wiki for more information.

Expand to review

euisplitbutton (8 differences)

Story	Diff %	Before	After	Diff
dark mode desktop	1.91%
high contrast mode dark desktop	1.96%
high contrast mode desktop	1.95%
kitchen sink desktop	1.90%
dark mode mobile	3.12%
high contrast mode dark mobile	3.21%
high contrast mode mobile	3.20%
kitchen sink mobile	3.12%

[mgadewoll]

buildkite test this

[weronikaolejniczak]

LGTM 🟢 Thanks for the change, Lene!

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: a6fc12d

History

• 💚 Build #7808 succeeded 1cc4311
• 💚 Build #7785 succeeded 1122587
• 💚 Build #7783 succeeded 39db74e
• 💔 Build #7779 failed 8b329c6

cc @mgadewoll

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: a6fc12d
• Documentation website
• Storybook
• ✅ Visual regression tests passed

History

• 💔 Build #5224 failed 1cc4311
• 💚 Build #5198 succeeded 1122587
• 💔 Build #5196 failed 39db74e
• 💔 Build #5195 failed 8b329c6
• 💔 Build #5192 failed 8b329c6

cc @mgadewoll