Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
ryankeairns merged 15 commits into from
Dec 12, 2025
Merged

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

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
5f14c36
Reduce default spacing values across UI components
ryankeairns Oct 21, 2025
95bf946
Add chnagelog
ryankeairns Oct 21, 2025
4c2d781
Merge branch 'main' into rk/euizempic
ryankeairns Oct 28, 2025
f5bcbee
Merge branch 'main' into rk/euizempic
ryankeairns Oct 30, 2025
04a2019
Merge branch 'main' into rk/euizempic
ryankeairns Nov 11, 2025
01ff81a
Merge branch 'main' into rk/euizempic
ryankeairns Nov 13, 2025
75778d4
Merge branch 'main' into rk/euizempic
ryankeairns Nov 14, 2025
71194b7
Merge branch 'main' into rk/euizempic
ryankeairns Dec 1, 2025
3188999
Merge branch 'main' into rk/euizempic
ryankeairns Dec 4, 2025
9e4bb77
Merge branch 'main' into rk/euizempic
ryankeairns Dec 8, 2025
178b8ed
chore: update visual regression baselines
ryankeairns Dec 10, 2025
0e56cd5
docs: update changelog for spacing adjustments
ryankeairns Dec 10, 2025
479c6b4
Merge branch 'main' into rk/euizempic
ryankeairns Dec 10, 2025
4754120
test(vrt): ensure EuiFlyoutMenu story is properly captured in VRT
mgadewoll Dec 11, 2025
325bc55
test(vrt): revert dataGrid FullscreenVRT images
mgadewoll Dec 11, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/eui/changelogs/upcoming/9132.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
- Changed default size values for `EuiFlexGroup`, `EuiSpacer`, `EuiHorizontalRule`, `EuiPageHeader`, `EuiEmptyPrompt`, and `EuiSearchBar`
Comment thread
ryankeairns marked this conversation as resolved.
Outdated

6 changes: 3 additions & 3 deletions ...onents/color_picker/color_palette_picker/__snapshots__/color_palette_picker.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -427,7 +427,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
class="euiColorPalettePicker__item"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-m-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-grow-1"
Expand Down Expand Up @@ -495,7 +495,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
class="euiColorPalettePicker__item"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-m-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-grow-1"
Expand Down Expand Up @@ -543,7 +543,7 @@ exports[`EuiColorPalettePicker more props are propagated to each option 1`] = `
class="euiColorPalettePicker__item"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-m-flexStart-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-grow-1"
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ exports[`EuiEmptyPrompt is rendered 1`] = `
Title
</h2>
<div
class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
class="euiSpacer euiSpacer--s emotion-euiSpacer-s"
/>
<div
class="euiText emotion-euiText-m-euiTextColor-subdued"
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/empty_prompt/empty_prompt.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -186,7 +186,7 @@ export const EuiEmptyPrompt: FunctionComponent<EuiEmptyPromptProps> = ({
{iconNode}
<div className="euiEmptyPrompt__content" css={contentStyles}>
{title && <EuiTitle size={titleSize}>{title}</EuiTitle>}
{title && body && <EuiSpacer size="m" />}
{title && body && <EuiSpacer size="s" />}
Comment thread
mgadewoll marked this conversation as resolved.
{body && <EuiText color="subdued">{body}</EuiText>}
{actionsNode && (body || title) && <EuiSpacer size="l" />}
{actionsNode}
Expand Down
40 changes: 20 additions & 20 deletions packages/eui/src/components/flex/__snapshots__/flex_group.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`EuiFlexGroup is rendered 1`] = `
<div
aria-label="aria-label"
class="euiFlexGroup testClass1 testClass2 emotion-euiFlexGroup-responsive-l-flexStart-stretch-row-euiTestCss"
class="euiFlexGroup testClass1 testClass2 emotion-euiFlexGroup-responsive-m-flexStart-stretch-row-euiTestCss"
data-test-subj="test subject string"
>
<h2>
Expand All @@ -14,55 +14,55 @@ exports[`EuiFlexGroup is rendered 1`] = `

exports[`EuiFlexGroup props alignItems baseline is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-baseline-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-baseline-row"
/>
`;

exports[`EuiFlexGroup props alignItems center is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-center-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-center-row"
/>
`;

exports[`EuiFlexGroup props alignItems flexEnd is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-flexEnd-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-flexEnd-row"
/>
`;

exports[`EuiFlexGroup props alignItems flexStart is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-flexStart-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-flexStart-row"
/>
`;

exports[`EuiFlexGroup props alignItems stretch is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-stretch-row"
/>
`;

exports[`EuiFlexGroup props direction column is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-stretch-column"
class="euiFlexGroup emotion-euiFlexGroup-m-flexStart-stretch-column"
/>
`;

exports[`EuiFlexGroup props direction columnReverse is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-stretch-columnReverse"
class="euiFlexGroup emotion-euiFlexGroup-m-flexStart-stretch-columnReverse"
/>
`;

exports[`EuiFlexGroup props direction row is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-stretch-row"
/>
`;

exports[`EuiFlexGroup props direction rowReverse is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-stretch-rowReverse"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-stretch-rowReverse"
/>
`;

Expand Down Expand Up @@ -104,60 +104,60 @@ exports[`EuiFlexGroup props gutterSize xs is rendered 1`] = `

exports[`EuiFlexGroup props justifyContent center is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-center-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-center-stretch-row"
/>
`;

exports[`EuiFlexGroup props justifyContent flexEnd is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexEnd-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexEnd-stretch-row"
/>
`;

exports[`EuiFlexGroup props justifyContent flexStart is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-stretch-row"
/>
`;

exports[`EuiFlexGroup props justifyContent spaceAround is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceAround-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-spaceAround-stretch-row"
/>
`;

exports[`EuiFlexGroup props justifyContent spaceBetween is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceBetween-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-spaceBetween-stretch-row"
/>
`;

exports[`EuiFlexGroup props justifyContent spaceEvenly is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceEvenly-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-spaceEvenly-stretch-row"
/>
`;

exports[`EuiFlexGroup props responsive false is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-l-flexStart-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-m-flexStart-stretch-row"
/>
`;

exports[`EuiFlexGroup props responsive true is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-stretch-row"
/>
`;

exports[`EuiFlexGroup props wrap false is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-flexStart-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-flexStart-stretch-row"
/>
`;

exports[`EuiFlexGroup props wrap true is rendered 1`] = `
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-wrap-l-flexStart-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-wrap-m-flexStart-stretch-row"
/>
`;
2 changes: 1 addition & 1 deletion packages/eui/src/components/flex/flex_group.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ const EuiFlexGroupInternal = <TComponent extends ElementType>(
{
className,
component = 'div' as TComponent,
gutterSize = 'l',
gutterSize = 'm',
alignItems = 'stretch',
responsive = true,
justifyContent = 'flexStart',
Expand Down
8 changes: 4 additions & 4 deletions packages/eui/src/components/header/header_alert/__snapshots__/header_alert.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ exports[`EuiHeaderAlert renders action 1`] = `
data-test-subj="test subject string"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceBetween-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-spaceBetween-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-grow-1"
Expand Down Expand Up @@ -47,7 +47,7 @@ exports[`EuiHeaderAlert renders badge 1`] = `
data-test-subj="test subject string"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceBetween-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-spaceBetween-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-grow-1"
Expand Down Expand Up @@ -97,7 +97,7 @@ exports[`EuiHeaderAlert renders text 1`] = `
data-test-subj="test subject string"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceBetween-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-spaceBetween-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-grow-1"
Expand Down Expand Up @@ -133,7 +133,7 @@ exports[`EuiHeaderAlert renders title and date 1`] = `
data-test-subj="test subject string"
>
<div
class="euiFlexGroup emotion-euiFlexGroup-responsive-l-spaceBetween-stretch-row"
class="euiFlexGroup emotion-euiFlexGroup-responsive-m-spaceBetween-stretch-row"
>
<div
class="euiFlexItem emotion-euiFlexItem-grow-1"
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/horizontal_rule/__snapshots__/horizontal_rule.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`EuiHorizontalRule is rendered 1`] = `
<hr
aria-label="aria-label"
class="euiHorizontalRule testClass1 testClass2 emotion-euiHorizontalRule-full-l-euiTestCss"
class="euiHorizontalRule testClass1 testClass2 emotion-euiHorizontalRule-full-m-euiTestCss"
data-test-subj="test subject string"
/>
`;
2 changes: 1 addition & 1 deletion packages/eui/src/components/horizontal_rule/horizontal_rule.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ export interface EuiHorizontalRuleProps
export const EuiHorizontalRule: FunctionComponent<EuiHorizontalRuleProps> = ({
className,
size = 'full',
margin = 'l',
margin = 'm',
...rest
}) => {
const classes = classNames('euiHorizontalRule', className);
Expand Down
12 changes: 6 additions & 6 deletions packages/eui/src/components/page/page_header/__snapshots__/page_header.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -289,7 +289,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
Page title
</h1>
<div
class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
/>
<div
class="euiText emotion-euiText-constrainedWidth-m"
Expand All @@ -299,7 +299,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
</p>
</div>
<div
class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
/>
<p>
Anything
Expand Down Expand Up @@ -330,11 +330,11 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
class="euiPageHeaderContent__bottom"
>
<div
class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
/>
<div
aria-label="aria-label"
class="euiTabs testClass1 testClass2 emotion-euiTabs-l-euiTestCss"
class="euiTabs testClass1 testClass2 emotion-euiTabs-m-euiTestCss"
data-test-subj="test subject string"
role="tablist"
>
Expand All @@ -346,7 +346,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
type="button"
>
<span
class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
>
Tab 1
</span>
Expand All @@ -359,7 +359,7 @@ exports[`EuiPageHeader props page content props are passed down is rendered 1`]
type="button"
>
<span
class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
>
Tab 2
</span>
Expand Down
22 changes: 11 additions & 11 deletions packages/eui/src/components/page/page_header/__snapshots__/page_header_content.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -263,7 +263,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
Page title
</h1>
<div
class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
/>
Child
</div>
Expand All @@ -290,10 +290,10 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
class="euiPageHeaderContent__bottom"
>
<div
class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
/>
<div
class="euiTabs emotion-euiTabs-l"
class="euiTabs emotion-euiTabs-m"
role="tablist"
>
<button
Expand All @@ -304,7 +304,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
type="button"
>
<span
class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
>
Tab 1
</span>
Expand All @@ -317,7 +317,7 @@ exports[`EuiPageHeaderContent props children is rendered even if content props a
type="button"
>
<span
class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
>
Tab 2
</span>
Expand Down Expand Up @@ -552,7 +552,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
Tab 1
</h1>
<div
class="euiTabs emotion-euiTabs-l"
class="euiTabs emotion-euiTabs-m"
role="tablist"
>
<button
Expand All @@ -563,7 +563,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
type="button"
>
<span
class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
>
Tab 1
</span>
Expand All @@ -576,7 +576,7 @@ exports[`EuiPageHeaderContent props tabs is rendered 1`] = `
type="button"
>
<span
class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
>
Tab 2
</span>
Expand Down Expand Up @@ -604,7 +604,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
</h1>
<div
aria-label="aria-label"
class="euiTabs testClass1 testClass2 emotion-euiTabs-l-euiTestCss"
class="euiTabs testClass1 testClass2 emotion-euiTabs-m-euiTestCss"
data-test-subj="test subject string"
role="tablist"
>
Expand All @@ -616,7 +616,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
type="button"
>
<span
class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
>
Tab 1
</span>
Expand All @@ -629,7 +629,7 @@ exports[`EuiPageHeaderContent props tabs is rendered with tabsProps 1`] = `
type="button"
>
<span
class="euiTab__content eui-textTruncate emotion-euiTab__content-l"
class="euiTab__content eui-textTruncate emotion-euiTab__content-m"
>
Tab 2
</span>
Expand Down
Loading