[EuiButtonGroup] Ensure square button sizing with `isIconOnly` by mgadewoll · Pull Request #9170 · elastic/eui

mgadewoll · 2025-11-04T09:59:45Z

Summary

This PR updates EuiButtonGroupButton to ensure the buttons are square when used with isIconOnly. To achieve this, we set fixed widths as done also for EuiButtonIcon.

Additionally, this PR updates what size is applied. The end result stays the same, but the variable context changes.
Previously the styles we're linked to form variables. Considering future plans to align button components and make EuiButtonGroup more generically usable, this PR changes the size variable context from form to button.

Why are we making this change?

💅 UI consistency: Ensures expected output based on designs.

Screenshots #

`buttonSize`	before	after
`s`
`m`
`compressed`

Impact to users

🟢 There are no updates required on consumer side.

QA

verify the buttons are square and match designs (storybook, figma)
verify there are no other unexpected regressions for EuiButtonGroup

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)

JoseLuisGJ

LGTM, thanks for addressing this issue Lene.

acstll

🟩 I checked the shape is square in all three variants/sizes. Thank you @mgadewoll for addressing this so promptly. (I left a couple of nits)

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

packages/eui/src/components/button/button_group/button_group.stories.tsx

elasticmachine · 2025-11-05T13:38:38Z

💚 Build Succeeded

History

💚 Build #1813 succeeded eed48de
💚 Build #1811 succeeded b6400ad

cc @mgadewoll

elasticmachine · 2025-11-05T13:48:27Z

💚 Build Succeeded

Buildkite Build
Commit: 59ad384

History

💚 Build #5130 succeeded eed48de
💚 Build #5128 succeeded b6400ad

cc @mgadewoll

- `@elastic/eui`: `v109.0.0` ⏩ `v109.1.0` - `@elastic/eslint-plugin-eui`: `v2.5.0` ⏩ `v2.6.0` --- ## Changes - Updated i18n EUI mapping 6cc95b0 - Updated test in Unified Search 668948f ## Package updates ### `@elastic/eui` [`v109.1.0`](https://github.com/elastic/eui/releases/v109.1.0) - Added `--euiBottomBarOffset` CSS variable to `EuiBottomBar` for positioning other fixed elements relative to the bottom bar's height ([#9211](elastic/eui#9211)) - Updated `boxesVertical` icon and restored `checkInCircleFilled`, `errorFilled`, and `warningFilled` icons. ([#9194](elastic/eui#9194)) - Updated `EuiSuperDatePicker` with new time zone information, opt-in via `timeZoneDisplayProps`. ([#9191](elastic/eui#9191)) - Updated the position of `EuiModal` by removing bottom padding in `EuiOverlayMask` ([#9190](elastic/eui#9190)) - Added `EuiPopover` and `EuiToolTip`'s `repositionOnScroll` to `componentDefaults` ([#9152](elastic/eui#9152)) - Updated `EuiSuperDatePicker` with new time window buttons for time shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop. ([#9151](elastic/eui#9151)) - Added beta prop `hasAriaDisabled` to all base button components: `EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`, `EuiFilterButton` ([#9201](elastic/eui#9201)) - Added `euiDisabledSelector` variable that combines CSS selectors `:disabled` and `[aria-disabled="true"]` ([#9201](elastic/eui#9201)) - Added custom test matchers that check for both `disabled` and `aria-disabled` attributes: ([#9201](elastic/eui#9201)) - React testing Library: `.toBeEuiDisabled()` - Enzyme: `.toHaveEuiDisabledProp()` - Cypress: `should('be.euiDisabled)` **Bug fixes** - Fixed unexpected duplicate columns in `EuiDataGrid` crashing the column sorting by removing duplicate columns entirely ([#9209](elastic/eui#9209)) - Fixed a visual bug in `EuiTable` where long table row content would be cut off on mobile screens ([#9206](elastic/eui#9206)) - Fixed virtualized `EuiCodeBlock` rendering blank lines when content updates if scrolled. ([#9196](elastic/eui#9196)) - Fixed `EuiButtonGroup` button sizing to ensure square buttons when used with `isIconOnly=true` ([#9170](elastic/eui#9170)) **Accessibility** - Fixed an issue where portalled components like `EuiPopover` were not included in `EuiFlyout`'s focus trap through `includeSelectorInFocusTrap`, making them inaccessible to keyboard users ([#9103](elastic/eui#9103)) ### `@elastic/eslint-plugin-eui` [`v2.6.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v260) - Added new `require-table-caption` rule. ([#9168](elastic/eui#9168)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

- `@elastic/eui`: `v109.0.0` ⏩ `v109.1.0` - `@elastic/eslint-plugin-eui`: `v2.5.0` ⏩ `v2.6.0` --- ## Changes - Updated i18n EUI mapping 6cc95b0 - Updated test in Unified Search 668948f ## Package updates ### `@elastic/eui` [`v109.1.0`](https://github.com/elastic/eui/releases/v109.1.0) - Added `--euiBottomBarOffset` CSS variable to `EuiBottomBar` for positioning other fixed elements relative to the bottom bar's height ([elastic#9211](elastic/eui#9211)) - Updated `boxesVertical` icon and restored `checkInCircleFilled`, `errorFilled`, and `warningFilled` icons. ([elastic#9194](elastic/eui#9194)) - Updated `EuiSuperDatePicker` with new time zone information, opt-in via `timeZoneDisplayProps`. ([elastic#9191](elastic/eui#9191)) - Updated the position of `EuiModal` by removing bottom padding in `EuiOverlayMask` ([elastic#9190](elastic/eui#9190)) - Added `EuiPopover` and `EuiToolTip`'s `repositionOnScroll` to `componentDefaults` ([elastic#9152](elastic/eui#9152)) - Updated `EuiSuperDatePicker` with new time window buttons for time shifting and zoom out, opt-in via `showTimeWindowButtons` boolean prop. ([elastic#9151](elastic/eui#9151)) - Added beta prop `hasAriaDisabled` to all base button components: `EuiButton`, `EuiButtonEmpty`, `EuiButtonIcon`, `EuibuttonGroup`, `EuiFilterButton` ([elastic#9201](elastic/eui#9201)) - Added `euiDisabledSelector` variable that combines CSS selectors `:disabled` and `[aria-disabled="true"]` ([elastic#9201](elastic/eui#9201)) - Added custom test matchers that check for both `disabled` and `aria-disabled` attributes: ([elastic#9201](elastic/eui#9201)) - React testing Library: `.toBeEuiDisabled()` - Enzyme: `.toHaveEuiDisabledProp()` - Cypress: `should('be.euiDisabled)` **Bug fixes** - Fixed unexpected duplicate columns in `EuiDataGrid` crashing the column sorting by removing duplicate columns entirely ([elastic#9209](elastic/eui#9209)) - Fixed a visual bug in `EuiTable` where long table row content would be cut off on mobile screens ([elastic#9206](elastic/eui#9206)) - Fixed virtualized `EuiCodeBlock` rendering blank lines when content updates if scrolled. ([elastic#9196](elastic/eui#9196)) - Fixed `EuiButtonGroup` button sizing to ensure square buttons when used with `isIconOnly=true` ([elastic#9170](elastic/eui#9170)) **Accessibility** - Fixed an issue where portalled components like `EuiPopover` were not included in `EuiFlyout`'s focus trap through `includeSelectorInFocusTrap`, making them inaccessible to keyboard users ([elastic#9103](elastic/eui#9103)) ### `@elastic/eslint-plugin-eui` [`v2.6.0`](https://github.com/elastic/eui/blob/main/packages/eslint-plugin/changelogs/CHANGELOG_2025.md#v260) - Added new `require-table-caption` rule. ([elastic#9168](elastic/eui#9168)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

mgadewoll self-assigned this Nov 4, 2025

mgadewoll requested a review from JoseLuisGJ November 4, 2025 09:59

mgadewoll added 3 commits November 4, 2025 11:52

refactor: ensure square isIconOnly sizes for EuiButtonGroupButton

9f34a52

test(vrt): add/update reference images

fdf7b2d

chore: add changelog

eed48de

mgadewoll force-pushed the button/ensure-square-icon-only-sizes branch from b6400ad to eed48de Compare November 4, 2025 10:56

mgadewoll marked this pull request as ready for review November 4, 2025 11:33

mgadewoll requested a review from a team as a code owner November 4, 2025 11:33

JoseLuisGJ approved these changes Nov 5, 2025

View reviewed changes

acstll self-requested a review November 5, 2025 11:13

acstll approved these changes Nov 5, 2025

View reviewed changes

packages/eui/src/components/button/button_group/button_group_button.styles.ts Outdated Show resolved Hide resolved

packages/eui/src/components/button/button_group/button_group.stories.tsx Outdated Show resolved Hide resolved

mgadewoll added 2 commits November 5, 2025 14:18

test: rename isIconOnly VRT story + update reference images

1d51834

style: rewrite comment

59ad384

mgadewoll merged commit cdd91fb into elastic:main Nov 6, 2025
7 checks passed

acstll mentioned this pull request Nov 17, 2025

Update EUI to v109.1.0 elastic/kibana#243270

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiButtonGroup] Ensure square button sizing with `isIconOnly`#9170

[EuiButtonGroup] Ensure square button sizing with `isIconOnly`#9170
mgadewoll merged 5 commits intoelastic:mainfrom
mgadewoll:button/ensure-square-icon-only-sizes

mgadewoll commented Nov 4, 2025 •

edited

Loading

Uh oh!

JoseLuisGJ left a comment

Uh oh!

acstll left a comment

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Nov 5, 2025

Uh oh!

elasticmachine commented Nov 5, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

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

Uh oh!

Summary

Why are we making this change?

Screenshots #

Impact to users

QA

General checklist

Uh oh!

JoseLuisGJ left a comment

Choose a reason for hiding this comment

Uh oh!

acstll left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

elasticmachine commented Nov 5, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Nov 5, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

mgadewoll commented Nov 4, 2025 •

edited

Loading