[UI Refresh] Reduce default spacing values across UI components #9132

ryankeairns · 2025-10-21T05:40:31Z

Summary

Slightly decrease sizing and spacing for the following components:

Updated EuiFlexGroup's gutterSize from l to m
Updated EuiSpacer's size from l to m
Updated EuiHorizontalRule's margin from l to m
Updated EuiPageHeader's tab size from l to m
Updated EuiEmptyPrompt's spacer size between title and text from m to s
Updated EuiSearchBar's gutterSize from m to s

Why are we making this change?

These changes support the new UI design which, in part, aims to tighten up whitespace which was comparatively abundant in the Amsterdam theme.

Screenshots

Before and after comparison of each component change

EuiFlexGroup's `gutterSize` from `l` to `m`

EuiPageHeader's tab `size` from `l` to `m` & EuiSpacer's `size` from `l` to `m`

EuiHorizontalRule's `margin` from `l` to `m`

EuiEmptyPrompt's spacer `size` between title and text from `m` to `s`

EuiSearchBar's `gutterSize` from `m` to `s`

Impact to users

🟢 No updates required on user side.
ℹ️ Snapshot tests might require updates due to the updated Emotion class names associated to the new prop values.

QA

Remove or strikethrough items that do not apply to your PR.

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)
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)

- EuiFlexGroup: Change default gutterSize from 'l' to 'm' - EuiSpacer: Change default size from 'l' to 'm' - EuiHorizontalRule: Change default margin from 'l' to 'm' - EuiPageHeader: Change tab size from 'l' to 'm' - EuiEmptyPrompt: Change spacer between title and text from 'm' to 's' - EuiSearchBar: Change gutterSize from 'm' to 's' These changes create a more compact UI by default with tighter spacing.

packages/eui/changelogs/upcoming/9132.md

packages/eui/src/components/empty_prompt/empty_prompt.tsx

mgadewoll · 2025-12-10T13:10:23Z

@ryankeairns Please make sure to fill out the PR description as that will help us track information properly.

What I'd suggest to add:

"Why are we making this change?"
- something like" UI updates: modernizes the overall feel by reducing the spacing and make components less floating
Screenshots
- screenshots of before and after for the updated components to show the changes
Impact to users
- 🟢 No updates required on user side. ℹ️ Snapshot tests might require updates due to the updated Emotion class names.

ryankeairns · 2025-12-10T17:47:45Z

Oops, I forgot to update the PR description.
I left this in Draft for so long :)

Thanks for the review, I will clean this and changelog up.

mgadewoll · 2025-12-11T12:17:55Z

ℹ️ After checking the VRT updates, I noticed an unrelated change on EuiFlyoutMenu that needed a bit of tweaking to ensure the VRT image is meaningful. I added the changes here (test(vrt): ensure EuiFlyoutMenu story is properly captured in VRT) for simplicity. I hope you don't mind.

...ference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png

mgadewoll

🟢 The changes are LGTM. Thanks for the updates! 🎉

elasticmachine · 2025-12-11T12:55:51Z

💚 Build Succeeded

History

💚 Build #2195 succeeded 4754120
💚 Build #2193 succeeded 479c6b4
💔 Build #2192 failed 479c6b4
💔 Build #2191 failed 479c6b4
💚 Build #2175 succeeded 9e4bb77
💚 Build #2163 succeeded 3188999

elasticmachine · 2025-12-11T13:11:27Z

💚 Build Succeeded

Buildkite Build
Commit: 325bc55

History

💚 Build #5407 succeeded 479c6b4
💚 Build #5397 succeeded 9e4bb77
💚 Build #5389 succeeded 3188999
💚 Build #5354 succeeded 71194b7
💚 Build #5229 succeeded 75778d4
💚 Build #5205 succeeded 01ff81a

ryankeairns · 2025-12-12T16:01:17Z

Thanks @mgadewoll !

## Dependency updates - `@elastic/eui`: `v111.0.0` ⏩ `v111.1.0` - `@elastic/eui-theme-borealis`: `v5.2.0` ⏩ `v5.3.0` --- ## Changes - Removed `euiBasicTable.tableCaptionWithPagination`, `euiBasicTable.tableAutoCaptionWithPagination`, `euiBasicTable.tableSimpleAutoCaptionWithPagination`, `euiBasicTable.tableAutoCaptionWithoutPagination` i18n tokens - Added `euiBasicTable.caption.itemCountPart.withTotalItemCount`, `euiBasicTable.caption.paginationPart.withPageCount`, `euiBasicTable.caption.tableName`, `euiBasicTable.caption.emptyState` i18n tokens - Updated snapshot tests - Updated a couple of Jest assertions due to [this EUI change](https://github.com/elastic/eui/pull/9254/changes)), see 127ab80 ## Package updates ### `@elastic/eui` [v111.1.0](https://github.com/elastic/eui/releases/tag/v111.1.0) - Added `dashedCircle` icon ([#9278](elastic/eui#9278)) - Added `crossProjectSearch` icon ([#9275](elastic/eui#9275)) - Added component token `components.tourStepIndicatorInactiveColor` and `components.tourStepIndicatorActiveColor` ([#9271](elastic/eui#9271)) - Remapped `EuiBeacon` component `success` variant to use `success` color token instead of `accentSecondary` ([#9271](elastic/eui#9271)) - Added `EuiSplitButton` and its respective sub-components `EuiSplitButton.ActionPrimary` and `EuiSplitButton.ActionSecondary` ([#9269](elastic/eui#9269)) - Added `productRobot` icon ([#9259](elastic/eui#9259)) - Added beta `euiContainer()`, `euiContainerCSS()`, and `euiContainerQuery()` Emotion utilities to help work with CSS Container Queries ([#9264](elastic/eui#9264)) - Added `useEuiContainerQuery` hook to observe container query changes in JavaScript ([#9251](elastic/eui#9251)) - Updated EuiFlexGroup's `gutterSize` from `l` to `m` ([#9132](elastic/eui#9132)) - Updated EuiSpacer's `size` from `l` to `m` ([#9132](elastic/eui#9132)) - Updated EuiHorizontalRule's `margin` from `l` to `m` ([#9132](elastic/eui#9132)) - Updated EuiPageHeader's tab `size` from `l` to `m` ([#9132](elastic/eui#9132)) - Updated EuiEmptyPrompt's spacer `size` between title and text from `m` to `s` ([#9132](elastic/eui#9132)) - Updated EuiSearchBar's `gutterSize` from `m` to `s` ([#9132](elastic/eui#9132)) <img width="2158" height="392" alt="image" src="https://github.com/user-attachments/assets/e217f5a5-5b4f-48df-830d-a60861939945" /> <img width="1692" height="608" alt="image" src="https://github.com/user-attachments/assets/d1f49e86-ad8c-4d80-9d02-54c73baae616" /> <img width="2182" height="302" alt="image" src="https://github.com/user-attachments/assets/295c768c-a2df-48f5-80cb-1a1ce5b19e00" /> <img width="1904" height="1066" alt="image" src="https://github.com/user-attachments/assets/f96cbde6-0529-4f5b-be5b-b56f28c5d2b7" /> <img width="1566" height="128" alt="image" src="https://github.com/user-attachments/assets/be4df105-9e32-4a9d-89f0-fe973f441495" /> **Bug fixes** - Fixed flyout overlay masks not being visible for `EuiDataGrid`'s fullscreen mode by reducing the `z-index` of the fullscreen mode overlay ([#9267](elastic/eui#9267)) **Accessibility** - Added information about the empty state of `EuiBasicTable` in the table caption ([#9265](elastic/eui#9265)) - Improved `EuiBasicTable` accessibility by ensuring a fallback `tableCaption` is applied if none is provided ([#9254](elastic/eui#9254)) ### `@elastic/eui-theme-borealis` v5.3.0 - Added component token `components.tourStepIndicatorInactiveColor` and `components.tourStepIndicatorActiveColor` ([#9271](elastic/eui#9271))

## Dependency updates - `@elastic/eui`: `v111.0.0` ⏩ `v111.1.0` - `@elastic/eui-theme-borealis`: `v5.2.0` ⏩ `v5.3.0` --- ## Changes - Removed `euiBasicTable.tableCaptionWithPagination`, `euiBasicTable.tableAutoCaptionWithPagination`, `euiBasicTable.tableSimpleAutoCaptionWithPagination`, `euiBasicTable.tableAutoCaptionWithoutPagination` i18n tokens - Added `euiBasicTable.caption.itemCountPart.withTotalItemCount`, `euiBasicTable.caption.paginationPart.withPageCount`, `euiBasicTable.caption.tableName`, `euiBasicTable.caption.emptyState` i18n tokens - Updated snapshot tests - Updated a couple of Jest assertions due to [this EUI change](https://github.com/elastic/eui/pull/9254/changes)), see elastic@127ab80 ## Package updates ### `@elastic/eui` [v111.1.0](https://github.com/elastic/eui/releases/tag/v111.1.0) - Added `dashedCircle` icon ([elastic#9278](elastic/eui#9278)) - Added `crossProjectSearch` icon ([elastic#9275](elastic/eui#9275)) - Added component token `components.tourStepIndicatorInactiveColor` and `components.tourStepIndicatorActiveColor` ([elastic#9271](elastic/eui#9271)) - Remapped `EuiBeacon` component `success` variant to use `success` color token instead of `accentSecondary` ([elastic#9271](elastic/eui#9271)) - Added `EuiSplitButton` and its respective sub-components `EuiSplitButton.ActionPrimary` and `EuiSplitButton.ActionSecondary` ([elastic#9269](elastic/eui#9269)) - Added `productRobot` icon ([elastic#9259](elastic/eui#9259)) - Added beta `euiContainer()`, `euiContainerCSS()`, and `euiContainerQuery()` Emotion utilities to help work with CSS Container Queries ([elastic#9264](elastic/eui#9264)) - Added `useEuiContainerQuery` hook to observe container query changes in JavaScript ([elastic#9251](elastic/eui#9251)) - Updated EuiFlexGroup's `gutterSize` from `l` to `m` ([elastic#9132](elastic/eui#9132)) - Updated EuiSpacer's `size` from `l` to `m` ([elastic#9132](elastic/eui#9132)) - Updated EuiHorizontalRule's `margin` from `l` to `m` ([elastic#9132](elastic/eui#9132)) - Updated EuiPageHeader's tab `size` from `l` to `m` ([elastic#9132](elastic/eui#9132)) - Updated EuiEmptyPrompt's spacer `size` between title and text from `m` to `s` ([elastic#9132](elastic/eui#9132)) - Updated EuiSearchBar's `gutterSize` from `m` to `s` ([elastic#9132](elastic/eui#9132)) <img width="2158" height="392" alt="image" src="https://github.com/user-attachments/assets/e217f5a5-5b4f-48df-830d-a60861939945" /> <img width="1692" height="608" alt="image" src="https://github.com/user-attachments/assets/d1f49e86-ad8c-4d80-9d02-54c73baae616" /> <img width="2182" height="302" alt="image" src="https://github.com/user-attachments/assets/295c768c-a2df-48f5-80cb-1a1ce5b19e00" /> <img width="1904" height="1066" alt="image" src="https://github.com/user-attachments/assets/f96cbde6-0529-4f5b-be5b-b56f28c5d2b7" /> <img width="1566" height="128" alt="image" src="https://github.com/user-attachments/assets/be4df105-9e32-4a9d-89f0-fe973f441495" /> **Bug fixes** - Fixed flyout overlay masks not being visible for `EuiDataGrid`'s fullscreen mode by reducing the `z-index` of the fullscreen mode overlay ([elastic#9267](elastic/eui#9267)) **Accessibility** - Added information about the empty state of `EuiBasicTable` in the table caption ([elastic#9265](elastic/eui#9265)) - Improved `EuiBasicTable` accessibility by ensuring a fallback `tableCaption` is applied if none is provided ([elastic#9254](elastic/eui#9254)) ### `@elastic/eui-theme-borealis` v5.3.0 - Added component token `components.tourStepIndicatorInactiveColor` and `components.tourStepIndicatorActiveColor` ([elastic#9271](elastic/eui#9271))

…tic#9132) Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

ryankeairns added 8 commits October 20, 2025 22:36

Add chnagelog

95bf946

Merge branch 'main' into rk/euizempic

4c2d781

Merge branch 'main' into rk/euizempic

f5bcbee

Merge branch 'main' into rk/euizempic

04a2019

Merge branch 'main' into rk/euizempic

01ff81a

Merge branch 'main' into rk/euizempic

75778d4

Merge branch 'main' into rk/euizempic

71194b7

ryankeairns marked this pull request as ready for review December 4, 2025 14:55

ryankeairns requested a review from a team as a code owner December 4, 2025 14:55

ryankeairns added 2 commits December 4, 2025 06:56

Merge branch 'main' into rk/euizempic

3188999

Merge branch 'main' into rk/euizempic

9e4bb77

mgadewoll self-requested a review December 10, 2025 08:02

mgadewoll reviewed Dec 10, 2025

View reviewed changes

packages/eui/changelogs/upcoming/9132.md Outdated Show resolved Hide resolved

packages/eui/src/components/empty_prompt/empty_prompt.tsx Show resolved Hide resolved

ryankeairns marked this pull request as draft December 10, 2025 17:51

ryankeairns added 3 commits December 10, 2025 11:16

chore: update visual regression baselines

178b8ed

docs: update changelog for spacing adjustments

0e56cd5

Merge branch 'main' into rk/euizempic

479c6b4

ryankeairns marked this pull request as ready for review December 10, 2025 23:32

ryankeairns requested a review from mgadewoll December 10, 2025 23:32

test(vrt): ensure EuiFlyoutMenu story is properly captured in VRT

4754120

mgadewoll reviewed Dec 11, 2025

View reviewed changes

...ference/chrome_desktop_Tabular_Content_EuiDataGrid_FullscreenVRT_Full_Screen_With_Flyout.png Show resolved Hide resolved

test(vrt): revert dataGrid FullscreenVRT images

325bc55

mgadewoll approved these changes Dec 11, 2025

View reviewed changes

ryankeairns merged commit afa4380 into main Dec 12, 2025
5 checks passed

ryankeairns deleted the rk/euizempic branch December 12, 2025 16:01

weronikaolejniczak mentioned this pull request Jan 5, 2026

Update EUI to 111.1.0 elastic/kibana#247843

Merged

weronikaolejniczak pushed a commit to weronikaolejniczak/eui that referenced this pull request Jan 23, 2026

[UI Refresh] Reduce default spacing values across UI components (elas…

c31aa79

…tic#9132) Co-authored-by: Lene Gadewoll <lene.gadewoll@elastic.co>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[UI Refresh] Reduce default spacing values across UI components #9132

[UI Refresh] Reduce default spacing values across UI components #9132

Uh oh!

ryankeairns commented Oct 21, 2025 •

edited

Loading

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Dec 10, 2025

Uh oh!

ryankeairns commented Dec 10, 2025

Uh oh!

mgadewoll commented Dec 11, 2025

Uh oh!

Uh oh!

mgadewoll left a comment

Uh oh!

elasticmachine commented Dec 11, 2025

Uh oh!

elasticmachine commented Dec 11, 2025

Uh oh!

Uh oh!

ryankeairns commented Dec 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

[UI Refresh] Reduce default spacing values across UI components #9132

[UI Refresh] Reduce default spacing values across UI components #9132

Uh oh!

Conversation

ryankeairns commented Oct 21, 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

EuiFlexGroup's gutterSize from l to m

EuiPageHeader's tab size from l to m & EuiSpacer's size from l to m

EuiHorizontalRule's margin from l to m

EuiEmptyPrompt's spacer size between title and text from m to s

EuiSearchBar's gutterSize from m to s

Impact to users

QA

General checklist

Uh oh!

Uh oh!

Uh oh!

mgadewoll commented Dec 10, 2025

Uh oh!

ryankeairns commented Dec 10, 2025

Uh oh!

mgadewoll commented Dec 11, 2025

Uh oh!

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Dec 11, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Dec 11, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

ryankeairns commented Dec 12, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

ryankeairns commented Oct 21, 2025 •

edited

Loading

EuiFlexGroup's `gutterSize` from `l` to `m`

EuiPageHeader's tab `size` from `l` to `m` & EuiSpacer's `size` from `l` to `m`

EuiHorizontalRule's `margin` from `l` to `m`

EuiEmptyPrompt's spacer `size` between title and text from `m` to `s`

EuiSearchBar's `gutterSize` from `m` to `s`