[EuiFilterGroup][EuiFilterButton] Implement redesign

[mgadewoll]

Summary

Note

This PR is related to the updates for new button group designs and API.
This PR should merge after #9953.

• What: Implements redesign changes for EuiFilterGroup and EuiFilterButton to fully align them with the updates done for EuiButtonGroup.
• Why: Closes https://github.com/elastic/eui-private/issues/728.
• How:
  • Added showDividers prop on EuiFilterGroup to optionally show/hide dividers between group children
  • Added display prop ('regular' | 'highlighted') to render different visual selection state variants
  • Updates styles for EuiFilterGroup and EuiFilterButton
  • Adds internal EuiFilterGroupContext to pass non public props to EuiFilterButton (inherited from EuiFilterGroup)

API Changes

component / parent	prop / child	change	description
EuiFilterGroup	display	Added	Defines the visual selection state sub-variant. Values: regular | highlighted. Defaults regular
EuiFilterGroup	showDividers	Added	Optionally renders dividers between group children. Defaults to true.

Screenshots

Description	Before	After
light mode
dark mode
HCM
mobile
isSelected
display="highlighted"
showDividers={false}

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: 🟢 None / 🟢 Low / 🟡 Moderate / 🔴 High

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

💻 EuiFilterGroup Storybook
💻 EuiFilterButton Storybook

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.

[github-actions]

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?

[infra-vault-gh-plugin-prod]

💚 Build Succeeded

• Buildkite Build
• Commit: 7c9e37c

cc @mgadewoll

[elastic-vault-github-plugin-prod]

📷 46 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

euifilterbutton (8 differences)

Story	Diff %	Before	After	Diff
full width and grow desktop	4.54%
full width and grow mobile	n/a
high contrast desktop	4.59%
high contrast mobile	n/a
multiple buttons desktop	n/a
multiple buttons mobile	n/a
playground desktop	n/a
playground mobile	2.33%

euifiltergroup (6 differences)

Story	Diff %	Before	After	Diff
multiple popovers desktop	n/a
multiple popovers mobile	n/a
playground desktop	n/a
playground mobile	3.96%
with popover desktop	n/a
with popover mobile	3.62%

euiform (2 differences)

Story	Diff %	Before	After	Diff
append prepend api kitchen sink desktop	0.02%
append prepend api kitchen sink mobile	0.05%

euisearchbar (4 differences)

Story	Diff %	Before	After	Diff
playground desktop	3.10%
playground mobile	n/a
playground desktop	n/a
playground mobile	n/a

euisuperdatepicker (6 differences)

Story	Diff %	Before	After	Diff
time window buttons compressed desktop	0.68%
time window buttons compressed mobile	2.66%
time window buttons desktop	0.73%
time window buttons mobile	2.84%
time window buttons with zoom in desktop	1.06%
time window buttons with zoom in mobile	4.21%

euibuttongroup (14 differences)

Story	Diff %	Before	After	Diff
disabled with tooltips desktop	0.36%
disabled with tooltips mobile	1.42%
high contrast desktop	n/a
high contrast mobile	n/a
icon only desktop	21.24%
icon only mobile	21.24%
kitchen sink desktop	0.89%
kitchen sink mobile	3.02%
multi selection desktop	n/a
multi selection mobile	n/a
single selection desktop	n/a
single selection mobile	n/a
with tooltips desktop	0.35%
with tooltips mobile	1.39%

euidatagrid (4 differences)

Story	Diff %	Before	After	Diff
column sorting desktop	0.23%
column sorting mobile	1.14%
display selector desktop	0.37%
display selector mobile	1.23%

euiinmemorytable (2 differences)

Story	Diff %	Before	After	Diff
kitchen sink desktop	0.25%
kitchen sink mobile	0.08%

[infra-vault-gh-plugin-prod]

💔 Build Failed

• Buildkite Build
• Commit: 7c9e37c
• Documentation website
• Storybook
• ❌ Visual regression tests failed (view diff table)

Failed CI Steps

• 📷 Test visual regression

History

cc @mgadewoll