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

[mgadewoll]

Summary

Note

This PR is part 4 of implementing the new button group design and API.
It builds on the selection variant that was added in part 3.

• What: Migrates EuiButtonGroup with the legacy Options API to use the new redesign styles aligning it with the styles of the previously added Children API. Additionally this PR updates all eui-internal usages.
• Why: Part of the button group redesign work. Closes https://github.com/elastic/eui-private/issues/755.
• How:
  • Added redesign styles (inset styles, similar to previous compressed styles) to Options API
  • Changes Options API selected state color to light grey (matching the default from Children API "display="regular")
  • Updated EuiFilterGroup styles (base alignment update only; there will be a standalone PR to fully update the component as part of https://github.com/elastic/eui-private/issues/728)
  • Updated EuiSuperDatePicker's TimeWindowButtons to use the new EuiButtonGroup with Children API
  • Updated EuiDataGrids EuiDataGridColumnSortingDraggable and RowHeightControl and DensityControl button group usages
  • Refactored euiButtonSizeMap to provide an inset height via getInsetHeight

API Changes

component / parent	prop / child	change	description
EuiButtonGroup (Options API only)	options	Deprecated	Use with the new Children API via children instead
EuiButtonGroup (Options API only)	buttonSize="compressed"	Soft deprecated	Renders as s now internally.
EuiButtonGroup (Options API only)	color	Deprecated	color="text" will be a static styling int he future.

Screenshots

Description	Before	After
light mode
dark mode
EuiFilterGroup
EuiSuperDatePicker TimeWindowButtons
EuiDataGrid column sorting
EuiDataGrid display selectors

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

💻 Storybook
💻 Storybook kitchen sink

• verify legacy EuiButtonGroup with Options API styles match the styles of the Children API with variant="selection"
• verify that the selected state for the Options API uses backgrundLightText color instead of regular text filled button
• verify there is no functional regression for the Options API with production
• verify that buttonSize="compressed" renders same as s
• verify that EuiFilterGroup (and internal EuiFilterButton styles are aligned with the new button group styles and there is no unexpected regression
• verify that EuiDataGrids display selection and column sorting use the new Children API button group and there is no functional regression
• verify that EuiSuperDatePickers time window buttons use the new Children API button group and there is no functional regression

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]

📷 36 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 (4 differences)

Story	Diff %	Before	After	Diff
full width and grow desktop	4.55%
full width and grow mobile	0.78%
high contrast desktop	4.61%
high contrast mobile	0.78%

euifiltergroup (2 differences)

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

euisearchbar (4 differences)

Story	Diff %	Before	After	Diff
playground desktop	3.75%
playground mobile	3.02%
playground desktop	n/a
playground mobile	4.83%

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.43%
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.38%

euidatagrid (4 differences)

Story	Diff %	Before	After	Diff
column sorting desktop	0.23%
column sorting mobile	4.63%
display selector desktop	0.35%
display selector mobile	8.63%

euiinmemorytable (2 differences)

Story	Diff %	Before	After	Diff
kitchen sink desktop	0.11%
kitchen sink mobile	0.10%

[infra-vault-gh-plugin-prod]

💔 Build Failed

• Buildkite Build
• Commit: e96822c

Failed CI Steps

• 🔨 EUI pull request test

History

• 💚 Build #7643 succeeded a4499d8
• 💔 Build #7638 failed a68e91f

cc @mgadewoll

[elastic-vault-github-plugin-prod]

📷 36 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 (4 differences)

Story	Diff %	Before	After	Diff
full width and grow desktop	4.55%
full width and grow mobile	0.78%
high contrast desktop	4.61%
high contrast mobile	0.78%

euifiltergroup (2 differences)

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

euisearchbar (4 differences)

Story	Diff %	Before	After	Diff
playground desktop	3.75%
playground mobile	3.02%
playground desktop	n/a
playground mobile	4.83%

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	4.63%
display selector desktop	0.35%
display selector mobile	8.63%

euiinmemorytable (2 differences)

Story	Diff %	Before	After	Diff
kitchen sink desktop	0.11%
kitchen sink mobile	0.10%

[infra-vault-gh-plugin-prod]

💔 Build Failed

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

Failed CI Steps

• 📷 Test visual regression

History

• 💔 Build #5027 failed a4499d8
• 💔 Build #5022 failed a68e91f

cc @mgadewoll