[EuiFilterGroup][EuiFilterButton] Implement redesign by mgadewoll · Pull Request #9961 · elastic/eui

mgadewoll · 2026-08-27T09:19:18Z

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)
- Additional changes:
  - Updates the disabled behavior/styling for EuiButtonGroup to ensure selected buttons keep a background color to distinguish selection

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}`

EuiButtonGroup disabled changes

before	after

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: eui docs
Figma: ideation specs
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

verify EuiFilterGroup and EuiFilterButton styles are aligned with the button group redesign specs
verify display="highlighted" switches correctly to dark grey toggle state
verify showDividers correctly toggles show/hide dividers
verify there is no functional regression with production
verify the responsive behavior has no regression
verify the docs updates are clear and correct

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 · 2026-08-27T09:19:28Z

👋 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?

elastic-vault-github-plugin-prod · 2026-08-27T09:58:34Z

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

elastic-vault-github-plugin-prod · 2026-09-01T08:49:40Z

📷 22 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`	3.84%
high contrast `desktop`	3.91%
multiple buttons `desktop`	n/a
playground `desktop`	n/a
full width and grow `mobile`	n/a
high contrast `mobile`	n/a
multiple buttons `mobile`	n/a
playground `mobile`	2.33%

euifiltergroup (6 differences)

Story	Diff %	Before	After	Diff
multiple popovers `desktop`	n/a
playground `desktop`	n/a
with popover `desktop`	n/a
multiple popovers `mobile`	n/a
playground `mobile`	6.55%
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%

euiinmemorytable (2 differences)

Story	Diff %	Before	After	Diff
kitchen sink `desktop`	0.26%
kitchen sink `mobile`	0.09%

euisearchbar (4 differences)

Story	Diff %	Before	After	Diff
playground `desktop`	3.99%
playground `desktop`	n/a
playground `mobile`	n/a
playground `mobile`	n/a

elastic-vault-github-plugin-prod · 2026-09-01T09:30:13Z

📷 20 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`	3.84%
high contrast `desktop`	3.91%
multiple buttons `desktop`	n/a
playground `desktop`	n/a
full width and grow `mobile`	n/a
high contrast `mobile`	n/a
multiple buttons `mobile`	n/a
playground `mobile`	2.33%

euifiltergroup (6 differences)

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

euiinmemorytable (2 differences)

Story	Diff %	Before	After	Diff
kitchen sink `desktop`	0.26%
kitchen sink `mobile`	0.09%

euisearchbar (4 differences)

Story	Diff %	Before	After	Diff
playground `desktop`	3.99%
playground `desktop`	n/a
playground `mobile`	n/a
playground `mobile`	n/a

mgadewoll · 2026-09-01T09:30:22Z

buildkite test this

elastic-vault-github-plugin-prod · 2026-09-01T09:45:57Z

📷 20 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`	3.84%
high contrast `desktop`	3.91%
multiple buttons `desktop`	n/a
playground `desktop`	n/a
full width and grow `mobile`	n/a
high contrast `mobile`	n/a
multiple buttons `mobile`	n/a
playground `mobile`	2.33%

euifiltergroup (6 differences)

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

euiinmemorytable (2 differences)

Story	Diff %	Before	After	Diff
kitchen sink `desktop`	0.26%
kitchen sink `mobile`	0.09%

euisearchbar (4 differences)

Story	Diff %	Before	After	Diff
playground `desktop`	3.99%
playground `desktop`	n/a
playground `mobile`	n/a
playground `mobile`	n/a

mgadewoll · 2026-09-01T10:17:36Z

buildkite test this

Copilot

🟡 Changes recommended

There are at least two concrete issues to address (a TypeScript-typing problem in the story and a likely unintended divider border color inconsistency in the new styles).

Once you've addressed the issues Copilot identified, you can request another Copilot review.

Pull request overview

Implements the redesign and updated API for EuiFilterGroup/EuiFilterButton, aligning their visuals and behavior with the recent EuiButtonGroup redesign work (incl. new selection display variants and optional dividers).

Changes:

Added display and showDividers props to EuiFilterGroup, plus an internal context to pass inherited styling state to EuiFilterButton.
Updated EuiFilterButton implementation/styling (notably toggle rendering) and adjusted related snapshots.
Updated docs and changelog entries to reflect the new API and visuals.

File summaries

File	Description
packages/website/docs/components/navigation/buttons/filter-group.mdx	Updates docs copy + example to include `display`/`showDividers` usage.
packages/eui/src/components/search_bar/filters/snapshots/is_filter.test.tsx.snap	Snapshot updates for filter button markup/classes.
packages/eui/src/components/search_bar/filters/snapshots/field_value_toggle_group_filter.test.tsx.snap	Snapshot updates for toggle group filter rendering.
packages/eui/src/components/search_bar/filters/snapshots/field_value_toggle_filter.test.tsx.snap	Snapshot updates for toggle filter rendering.
packages/eui/src/components/search_bar/snapshots/search_filters.test.tsx.snap	Snapshot updates reflecting new `data-*` attributes + wrapper classes.
packages/eui/src/components/search_bar/snapshots/search_bar.test.tsx.snap	Snapshot updates reflecting new `data-*` attributes + wrapper classes.
packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts	Removes wrapper padding for filter buttons within form control side nodes.
packages/eui/src/components/filter_group/filter_group.tsx	Adds `display`/`showDividers`, provides internal context, and sets `data-*` attributes.
packages/eui/src/components/filter_group/filter_group.styles.ts	Adds divider gap + display-based CSS var; updates radius handling.
packages/eui/src/components/filter_group/filter_group.stories.tsx	Updates Storybook to exercise new props and toggle behavior.
packages/eui/src/components/filter_group/filter_group_context.tsx	New internal context for propagating group-only state to buttons.
packages/eui/src/components/filter_group/filter_button.tsx	Updates toggle rendering to use `EuiButton` and consumes group context.
packages/eui/src/components/filter_group/filter_button.styles.ts	Significant styling changes: inset sizing, dividers, compressed handling.
packages/eui/src/components/filter_group/snapshots/filter_group.test.tsx.snap	Snapshot updates for new `data-*` attributes.
packages/eui/src/components/filter_group/snapshots/filter_button.test.tsx.snap	Snapshot updates for wrapper/button class changes.
packages/eui/changelogs/upcoming/9961.md	Adds changelog entry for FilterGroup/FilterButton redesign + new props.
packages/eui/changelogs/upcoming/9953.md	Removes now-superseded FilterGroup/FilterButton note from prior PR entry.

Review details

Files reviewed: 17/37 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.

…buttons

elastic-vault-github-plugin-prod · 2026-09-02T09:12:35Z

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

euidatagrid (4 differences)

Story	Diff %	Before	After	Diff
column sorting `desktop`	0.16%
display selector `desktop`	0.27%
column sorting `mobile`	0.25%
display selector `mobile`	0.91%

mgadewoll · 2026-09-02T09:20:22Z

-        *:where(.euiButton, .euiButtonIcon):is([aria-pressed='true']) {
-          background-color: ${euiTheme.colors.backgroundLightText};
+        *:where(.euiButton, .euiButtonIcon) {
+          &:where(:is([aria-pressed='true']):not(${euiDisabledSelector})) {


ℹ️ I realized that the disabled state for EuiButtonGroup wasn't quite right for selected buttons, as the selected background color was not correct and in some places removed.
I figured we can just add it onto this PR as it's somewhat related 😅

before after

elastic-vault-github-plugin-prod · 2026-09-02T09:33:09Z

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

euidatagrid (4 differences)

Story	Diff %	Before	After	Diff
column sorting `desktop`	0.16%
display selector `desktop`	0.27%
column sorting `mobile`	0.25%
display selector `mobile`	0.91%

elastic-vault-github-plugin-prod · 2026-09-02T10:07:04Z

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

euidatagrid (4 differences)

Story	Diff %	Before	After	Diff
column sorting `desktop`	0.16%
display selector `desktop`	0.27%
column sorting `mobile`	0.25%
display selector `mobile`	0.91%

mgadewoll · 2026-09-02T10:08:11Z

buildkite test this

elastic-vault-github-plugin-prod · 2026-09-02T10:23:52Z

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

euidatagrid (4 differences)

Story	Diff %	Before	After	Diff
column sorting `desktop`	0.16%
display selector `desktop`	0.27%
column sorting `mobile`	0.25%
display selector `mobile`	0.91%

…ckground/fill for selected buttons

weronikaolejniczak

LGTM 🟢 Thanks for the change, Lene!

infra-vault-gh-plugin-prod · 2026-09-02T13:36:15Z

💚 Build Succeeded

Buildkite Build
Commit: 6bfdef7
Documentation website
Storybook
✅ Visual regression tests passed

History

💚 Build #5203 succeeded d3cb170
💔 Build #5199 failed f6ba0b5
💔 Build #5197 failed f6ba0b5
💔 Build #5194 failed 3be7f79
💔 Build #5193 failed 089fa40
💚 Build #5188 succeeded ff3e9f2

cc @mgadewoll

infra-vault-gh-plugin-prod · 2026-09-02T13:39:14Z

💚 Build Succeeded

Buildkite Build
Commit: 6bfdef7

History

💚 Build #7790 succeeded d3cb170
💚 Build #7786 succeeded f6ba0b5
💚 Build #7784 succeeded f6ba0b5
💚 Build #7781 succeeded 3be7f79
💚 Build #7780 succeeded 089fa40
💚 Build #7776 succeeded ff3e9f2

cc @mgadewoll

mgadewoll self-assigned this Aug 27, 2026

github-actions Bot added the community contribution (Don't delete - used for automation) label Aug 27, 2026

mgadewoll removed the community contribution (Don't delete - used for automation) label Aug 27, 2026

mgadewoll force-pushed the buttongroup/filterbutton-redesign branch from 3c384f4 to 7573287 Compare August 27, 2026 09:27

mgadewoll mentioned this pull request Aug 27, 2026

[EuiButtonGroup] Implement redesign #4 - Update Options API styles and implementations #9953

Merged

24 tasks

refactor(filterGroup): implement redesign styles

c70c7ee

mgadewoll force-pushed the buttongroup/filterbutton-redesign branch from 7c9e37c to 90208fc Compare September 1, 2026 08:27

mgadewoll added 4 commits September 1, 2026 11:10

refactor: adjust usage in form layout

743fe15

docs: update docs and stories

fec7373

test: update snapshots

fc22f48

chore: add/update changelogs

da5d11b

mgadewoll force-pushed the buttongroup/filterbutton-redesign branch from 4326c2b to da5d11b Compare September 1, 2026 09:14

chore(eui): update VRT baseline screenshots

ac2908c

mgadewoll requested a lite review from Copilot September 1, 2026 10:35

Copilot started reviewing on behalf of mgadewoll September 1, 2026 10:35 View session

Copilot AI reviewed Sep 1, 2026

View reviewed changes

Comment thread packages/eui/src/components/filter_group/filter_group.stories.tsx Outdated

Comment thread packages/eui/src/components/filter_group/filter_button.styles.ts Outdated

mgadewoll added 2 commits September 1, 2026 13:08

refactor: align border colors

80a0929

docs: add type

0a1fab9

mgadewoll marked this pull request as ready for review September 1, 2026 11:28

mgadewoll requested a review from a team as a code owner September 1, 2026 11:28

mgadewoll requested a review from JoseLuisGJ September 1, 2026 11:28

chore: add release prep commits

ff3e9f2

weronikaolejniczak self-requested a review September 2, 2026 07:35

refactor: adjust disabled styles to ensure a background for selected …

49f9df4

…buttons

mgadewoll force-pushed the buttongroup/filterbutton-redesign branch from 089fa40 to 3be7f79 Compare September 2, 2026 09:18

mgadewoll commented Sep 2, 2026

View reviewed changes

mgadewoll force-pushed the buttongroup/filterbutton-redesign branch from 3be7f79 to f6ba0b5 Compare September 2, 2026 09:51

refactor(EuiButtonGroup): update the disabled behavior to ensure a ba…

d3cb170

…ckground/fill for selected buttons

mgadewoll force-pushed the buttongroup/filterbutton-redesign branch from f6ba0b5 to d3cb170 Compare September 2, 2026 10:34

weronikaolejniczak reviewed Sep 2, 2026

View reviewed changes

Comment thread packages/eui/src/components/filter_group/filter_group.styles.ts Outdated

weronikaolejniczak reviewed Sep 2, 2026

View reviewed changes

Comment thread packages/eui/src/components/filter_group/filter_button.tsx

weronikaolejniczak reviewed Sep 2, 2026

View reviewed changes

Comment thread packages/eui/changelogs/upcoming/9961.md

weronikaolejniczak approved these changes Sep 2, 2026

View reviewed changes

refactor: remove obsolete style

6bfdef7

Uh oh!

Conversation

mgadewoll commented Aug 27, 2026 • edited by weronikaolejniczak Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

API Changes

Screenshots

Impact Assessment

Release Readiness

QA instructions for reviewer

Checklist before marking Ready for Review

Reviewer checklist

Uh oh!

github-actions Bot commented Aug 27, 2026

Uh oh!

elastic-vault-github-plugin-prod Bot commented Aug 27, 2026

📷 46 visual difference(s) found

Uh oh!

elastic-vault-github-plugin-prod Bot commented Sep 1, 2026

📷 22 visual difference(s) found

Uh oh!

elastic-vault-github-plugin-prod Bot commented Sep 1, 2026

📷 20 visual difference(s) found

Uh oh!

mgadewoll commented Sep 1, 2026

Uh oh!

elastic-vault-github-plugin-prod Bot commented Sep 1, 2026

📷 20 visual difference(s) found

Uh oh!

mgadewoll commented Sep 1, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

🟡 Changes recommended

Uh oh!

Uh oh!

Uh oh!

elastic-vault-github-plugin-prod Bot commented Sep 2, 2026

📷 4 visual difference(s) found

Uh oh!

mgadewoll Sep 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elastic-vault-github-plugin-prod Bot commented Sep 2, 2026

📷 4 visual difference(s) found

Uh oh!

elastic-vault-github-plugin-prod Bot commented Sep 2, 2026

📷 4 visual difference(s) found

Uh oh!

mgadewoll commented Sep 2, 2026

Uh oh!

elastic-vault-github-plugin-prod Bot commented Sep 2, 2026

📷 4 visual difference(s) found

Uh oh!

Uh oh!

Uh oh!

Uh oh!

weronikaolejniczak left a comment

Choose a reason for hiding this comment

Uh oh!

infra-vault-gh-plugin-prod Bot commented Sep 2, 2026

💚 Build Succeeded

History

Uh oh!

infra-vault-gh-plugin-prod Bot commented Sep 2, 2026

💚 Build Succeeded

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mgadewoll commented Aug 27, 2026 •

edited by weronikaolejniczak

Loading

mgadewoll Sep 2, 2026 •

edited

Loading