Reduce `EuiEmptyPrompt` spacing in Borealis theme #9044

ryankeairns · 2025-09-19T21:15:10Z

Closes #9039

Summary

For the Borealis theme:

Decrease title-to-body spacing from 'm' to 's' (16px → 8px)
Decrease body-to-actions spacing from 'l' to 'm' (24px → 16px)
Decrease default padding from 'l' to 'm' (24px → 16px)
Create _spacing.ts file following established theme config patterns
Extend EuiThemeShape to include custom spacing property
Update both light and dark Borealis theme JSON files
Modify EuiEmptyPrompt to use new theme-based spacing values
Update snapshot tests to reflect new spacing values

Amsterdam theme remains unchanged

Screenshots

Borealis before (left) and after (right)

Amsterdam before and after (unchanged)

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)

- Decrease title-to-body spacing from 'm' to 's' (16px → 8px) - Decrease body-to-actions spacing from 'l' to 'm' (24px → 16px) - Decrease default padding from 'l' to 'm' (24px → 16px) - Create _spacing.ts file following established theme patterns - Extend EuiThemeShape to include custom spacing property - Update both light and dark Borealis theme JSON files - Modify EuiEmptyPrompt to use theme-based spacing values - Update snapshot tests to reflect new spacing values - Amsterdam theme remains unchanged Addresses #9039

weronikaolejniczak · 2025-09-22T09:20:29Z

@ryankeairns awesome! 🚀 One thing we're missing is the VRT images. Could you update them by running yarn workspace @elastic/eui test-visual-regression update and verify manually if the changes are as expected?

weronikaolejniczak · 2025-09-22T11:06:36Z

@ryankeairns btw we'd need a changelog for eui-theme-borealis as well. Otherwise, it won't be released 😄

ryankeairns · 2025-09-22T14:27:51Z

Thanks @weronikaolejniczak , will do!

- Update .loki reference images to reflect reduced spacing in Borealis theme - Add changelog entry for emptyPrompt spacing theme defaults

ryankeairns · 2025-09-22T21:37:51Z

@weronikaolejniczak ready for another look!

elasticmachine · 2025-09-22T21:54:09Z

💚 Build Succeeded

History

💚 Build #1298 succeeded 302c1d1
💚 Build #1295 succeeded efd57ad

elasticmachine · 2025-09-22T22:07:17Z

💚 Build Succeeded

Buildkite Build
Commit: df6b3f9

History

💚 Build #4758 succeeded 302c1d1
💚 Build #4756 succeeded efd57ad

weronikaolejniczak · 2025-09-23T18:14:43Z

packages/eui-theme-borealis/src/variables/_spacing.ts

@ryankeairns I'm thinking, we have the "Components" tokens, maybe it'd be better to add an emptyPrompt property there with the spacing values? 🤔 I believe it'd be more consistent and expected. We would have to update the documentation while we're at it.

Let me know what you think! And sorry for the back-and-forth, I just believe it's worth mentioning 💚

Can you explain that further?

No worries on the back and forth. I'm hoping to find some patterns as I intend to do more theme overrides.

So it would be something like adding these new tokens:

euiTheme.components.emptyPrompt.titleBodySpacing

euiTheme.components.emptyPrompt.bodyActionsSpacing

euiTheme.components.emptyPrompt.paddingSize
... and then wiring those in?

Then adding a section to the docs per component? (e.g. as we have Buttons today; or maybe a Components section?)

@weronikaolejniczak Opened a new PR, based on the same branch, that reworks to use theme component tokens
#9057

weronikaolejniczak · 2025-09-23T18:15:44Z

@ryankeairns did you have a chance to run yarn workspace @elastic/eui test-visual-regression update? You can push any updates to this PR, this way we can track visual regression!

ryankeairns · 2025-09-24T00:20:16Z

@ryankeairns did you have a chance to run yarn workspace @elastic/eui test-visual-regression update? You can push any updates to this PR, this way we can track visual regression!

Yes, it added one updated png. Should there be more? I can run it again.

ryankeairns · 2025-09-24T00:27:16Z

packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png

@weronikaolejniczak here's the sole visual regression that was added.

ryankeairns · 2025-09-24T18:54:23Z

Reverted to Draft.
Likely to be replaced by #9057 which take the theme component tokens approach, as suggested.

ryankeairns · 2025-09-25T17:25:42Z

closing in favor of #9057

ryankeairns changed the title ~~feat: reduce EuiEmptyPrompt spacing in Borealis theme~~ Reduce EuiEmptyPrompt spacing in Borealis theme Sep 19, 2025

Add changelog

302c1d1

ryankeairns marked this pull request as ready for review September 19, 2025 21:59

ryankeairns requested a review from a team as a code owner September 19, 2025 21:59

Update visual regression tests for EuiEmptyPrompt spacing changes

df6b3f9

- Update .loki reference images to reflect reduced spacing in Borealis theme - Add changelog entry for emptyPrompt spacing theme defaults

weronikaolejniczak self-requested a review September 23, 2025 09:20

weronikaolejniczak reviewed Sep 23, 2025

View reviewed changes

ryankeairns commented Sep 24, 2025

View reviewed changes

ryankeairns marked this pull request as draft September 24, 2025 21:47

ryankeairns closed this Sep 25, 2025

Reduce EuiEmptyPrompt spacing in Borealis theme #9044

Reduce EuiEmptyPrompt spacing in Borealis theme #9044

Uh oh!

Conversation

ryankeairns commented Sep 19, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screenshots

Borealis before (left) and after (right)

Amsterdam before and after (unchanged)

QA

General checklist

Uh oh!

weronikaolejniczak commented Sep 22, 2025

Uh oh!

weronikaolejniczak commented Sep 22, 2025

Uh oh!

ryankeairns commented Sep 22, 2025

Uh oh!

ryankeairns commented Sep 22, 2025

Uh oh!

elasticmachine commented Sep 22, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Sep 22, 2025

💚 Build Succeeded

History

Uh oh!

weronikaolejniczak Sep 23, 2025

Choose a reason for hiding this comment

Uh oh!

ryankeairns Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

ryankeairns Sep 24, 2025 • 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!

ryankeairns Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

weronikaolejniczak commented Sep 23, 2025

Uh oh!

ryankeairns commented Sep 24, 2025

Uh oh!

ryankeairns Sep 24, 2025

Choose a reason for hiding this comment

Uh oh!

ryankeairns commented Sep 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

ryankeairns commented Sep 25, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Reduce `EuiEmptyPrompt` spacing in Borealis theme #9044

Reduce `EuiEmptyPrompt` spacing in Borealis theme #9044

ryankeairns commented Sep 19, 2025 •

edited

Loading

ryankeairns Sep 24, 2025 •

edited

Loading

ryankeairns commented Sep 24, 2025 •

edited

Loading