[UI Refresh] Reduce default spacing values across UI components

[ryankeairns]

• 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.

Summary

Why are we making this change?

Screenshots #

Impact to users

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
  • [x] 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)

[mgadewoll]

@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]

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]

ℹ️ 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.

[elasticmachine]

:green_heart: Build Succeeded

• Buildkite Build
• Commit: 325bc5511598ca118927545c6433470c82351195
• Documentation website
• Storybook

History

• :green_heart: Build #2195 succeeded 4754120cb4485c72635a9f651bd56219ea6c7a04
• :green_heart: Build #2193 succeeded 479c6b4b38eea441cfad8c55c2b75fe3660461c8
• :broken_heart: Build #2192 failed 479c6b4b38eea441cfad8c55c2b75fe3660461c8
• :broken_heart: Build #2191 failed 479c6b4b38eea441cfad8c55c2b75fe3660461c8
• :green_heart: Build #2175 succeeded 9e4bb77697cf4624317c2f1b67192d3fadbb9493
• :green_heart: Build #2163 succeeded 3188999716c47fbb3f092017a62d66f727d06e40

[elasticmachine]

:green_heart: Build Succeeded

• Buildkite Build
• Commit: 325bc5511598ca118927545c6433470c82351195

History

• :green_heart: Build #5407 succeeded 479c6b4b38eea441cfad8c55c2b75fe3660461c8
• :green_heart: Build #5397 succeeded 9e4bb77697cf4624317c2f1b67192d3fadbb9493
• :green_heart: Build #5389 succeeded 3188999716c47fbb3f092017a62d66f727d06e40
• :green_heart: Build #5354 succeeded 71194b77b0a68ac06d47c07297f24c6e3c45e74a
• :green_heart: Build #5229 succeeded 75778d4fe79ce1245001a465eae1625aafe42ce5
• :green_heart: Build #5205 succeeded 01ff81a28a9e1dfdd412fb28e66d23199892d9d9

[ryankeairns]

Thanks @mgadewoll !