Skip to content

Reduce EuiEmptyPrompt spacing in Borealis theme #9044

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’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
ryankeairns wants to merge 3 commits into from
Closed

Reduce EuiEmptyPrompt spacing in Borealis theme #9044

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
efd57ad
feat: reduce EuiEmptyPrompt spacing in Borealis theme
ryankeairns Sep 19, 2025
302c1d1
Add changelog
ryankeairns Sep 19, 2025
df6b3f9
Update visual regression tests for EuiEmptyPrompt spacing changes
ryankeairns Sep 22, 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
1 change: 1 addition & 0 deletions packages/eui-theme-borealis/changelogs/upcoming/9044.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Added theme defaults for `spacing` of `emptyPrompt` content
9 changes: 8 additions & 1 deletion packages/eui-theme-borealis/src/eui_theme_borealis_dark.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -423,5 +423,12 @@
"euiColorBorderStrongWarning": "#FACB3D",
"euiColorBorderStrongRisk": "#FC8544",
"euiColorBorderStrongDanger": "#F6726A",
"euiColorBorderStrongText": "#8E9FBC"
"euiColorBorderStrongText": "#8E9FBC",
"spacing": {
"emptyPrompt": {
"titleBodySpacing": "s",
"bodyActionsSpacing": "m",
"paddingSize": "m"
}
}
}
9 changes: 8 additions & 1 deletion packages/eui-theme-borealis/src/eui_theme_borealis_light.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -423,5 +423,12 @@
"euiColorBorderStrongWarning": "#966B03",
"euiColorBorderStrongRisk": "#C24411",
"euiColorBorderStrongDanger": "#C61E25",
"euiColorBorderStrongText": "#5A6D8C"
"euiColorBorderStrongText": "#5A6D8C",
"spacing": {
"emptyPrompt": {
"titleBodySpacing": "s",
"bodyActionsSpacing": "m",
"paddingSize": "m"
}
}
}
4 changes: 3 additions & 1 deletion packages/eui-theme-borealis/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ import { levels } from './variables/_levels';
import { font } from './variables/_typography';
import { focus } from './variables/_states';
import { components } from './variables/_components';
import { spacing } from './variables/_spacing';
import { overrides } from './variables/_overrides';

import { colorVisLight } from './variables/colors/_colors_vis_light';
Expand All @@ -26,7 +27,7 @@ export { colorVisLight as colorVis, colorVisLight, colorVisDark };

export const EUI_THEME_BOREALIS_KEY = 'EUI_THEME_BOREALIS';

export const euiThemeBorealis: EuiThemeShape = {
export const euiThemeBorealis: EuiThemeShape & { spacing: typeof spacing } = {
colors,
base,
size,
Expand All @@ -37,6 +38,7 @@ export const euiThemeBorealis: EuiThemeShape = {
levels,
focus,
components,
spacing,
flags: {
hasGlobalFocusColor: true,
hasVisColorAdjustment: false,
Expand Down
19 changes: 19 additions & 0 deletions packages/eui-theme-borealis/src/variables/_spacing.ts
View file
Open in desktop
Copy link
Contributor

@weronikaolejniczak weronikaolejniczak Sep 23, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@ryankeairns ryankeairns Sep 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

@ryankeairns ryankeairns Sep 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

@ryankeairns ryankeairns Sep 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
/*
* Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
* or more contributor license agreements. Licensed under the Elastic License
* 2.0 and the Server Side Public License, v 1; you may not use this file except
* in compliance with, at your election, the Elastic License 2.0 or the Server
* Side Public License, v 1.
*/

// Component-specific spacing configurations
export const emptyPromptSpacing = {
titleBodySpacing: 's', // Reduced from default 'm' (16px → 8px)
bodyActionsSpacing: 'm', // Reduced from default 'l' (24px → 16px)
paddingSize: 'm', // Reduced from default 'l' (24px → 16px)
};

// Main spacing export (following the same pattern as _typography.ts)
export const spacing = {
emptyPrompt: emptyPromptSpacing,
};
Binary file modified ...ges/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png
View file
Open in desktop
Copy link
Contributor Author

@ryankeairns ryankeairns Sep 24, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
1 change: 1 addition & 0 deletions packages/eui/changelogs/upcoming/9044.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Added `emptyPromptSpacing` theme configuration for `EuiEmptyPrompt`
52 changes: 26 additions & 26 deletions 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 @@ -7,7 +7,7 @@ exports[`EuiEmptyPrompt is rendered 1`] = `
data-test-subj="test subject string"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__icon emotion-euiEmptyPrompt__icon-vertical"
Expand All @@ -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 All @@ -36,7 +36,7 @@ exports[`EuiEmptyPrompt is rendered 1`] = `
</p>
</div>
<div
class="euiSpacer euiSpacer--l emotion-euiSpacer-l"
class="euiSpacer euiSpacer--m emotion-euiSpacer-m"
/>
<div>
Actions
Expand All @@ -51,7 +51,7 @@ exports[`EuiEmptyPrompt props actions renders alone 1`] = `
class="euiPanel euiPanel--transparent euiEmptyPrompt emotion-euiPanel-m-transparent-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand All @@ -67,7 +67,7 @@ exports[`EuiEmptyPrompt props actions renders an array 1`] = `
class="euiPanel euiPanel--transparent euiEmptyPrompt emotion-euiPanel-m-transparent-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand Down Expand Up @@ -96,7 +96,7 @@ exports[`EuiEmptyPrompt props body renders alone 1`] = `
class="euiPanel euiPanel--transparent euiEmptyPrompt emotion-euiPanel-m-transparent-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand All @@ -116,7 +116,7 @@ exports[`EuiEmptyPrompt props color accent is rendered 1`] = `
class="euiPanel euiPanel--accent euiEmptyPrompt emotion-euiPanel-m-accent-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand All @@ -130,7 +130,7 @@ exports[`EuiEmptyPrompt props color accentSecondary is rendered 1`] = `
class="euiPanel euiPanel--accentSecondary euiEmptyPrompt emotion-euiPanel-m-accentSecondary-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand All @@ -144,7 +144,7 @@ exports[`EuiEmptyPrompt props color danger is rendered 1`] = `
class="euiPanel euiPanel--danger euiEmptyPrompt emotion-euiPanel-m-danger-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand All @@ -158,7 +158,7 @@ exports[`EuiEmptyPrompt props color highlighted is rendered 1`] = `
class="euiPanel euiPanel--highlighted euiEmptyPrompt emotion-euiPanel-m-highlighted-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand All @@ -172,7 +172,7 @@ exports[`EuiEmptyPrompt props color neutral is rendered 1`] = `
class="euiPanel euiPanel--neutral euiEmptyPrompt emotion-euiPanel-m-neutral-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand All @@ -186,7 +186,7 @@ exports[`EuiEmptyPrompt props color plain is rendered 1`] = `
class="euiPanel euiPanel--plain euiEmptyPrompt emotion-euiPanel-m-plain-hasShadow-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand All @@ -200,7 +200,7 @@ exports[`EuiEmptyPrompt props color primary is rendered 1`] = `
class="euiPanel euiPanel--primary euiEmptyPrompt emotion-euiPanel-m-primary-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand All @@ -214,7 +214,7 @@ exports[`EuiEmptyPrompt props color risk is rendered 1`] = `
class="euiPanel euiPanel--risk euiEmptyPrompt emotion-euiPanel-m-risk-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand All @@ -228,7 +228,7 @@ exports[`EuiEmptyPrompt props color subdued is rendered 1`] = `
class="euiPanel euiPanel--subdued euiEmptyPrompt emotion-euiPanel-m-subdued-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand All @@ -242,7 +242,7 @@ exports[`EuiEmptyPrompt props color success is rendered 1`] = `
class="euiPanel euiPanel--success euiEmptyPrompt emotion-euiPanel-m-success-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand All @@ -256,7 +256,7 @@ exports[`EuiEmptyPrompt props color transparent is rendered 1`] = `
class="euiPanel euiPanel--transparent euiEmptyPrompt emotion-euiPanel-m-transparent-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand All @@ -270,7 +270,7 @@ exports[`EuiEmptyPrompt props color warning is rendered 1`] = `
class="euiPanel euiPanel--warning euiEmptyPrompt emotion-euiPanel-m-warning-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand All @@ -284,14 +284,14 @@ exports[`EuiEmptyPrompt props footer renders alone 1`] = `
class="euiPanel euiPanel--transparent euiEmptyPrompt emotion-euiPanel-m-transparent-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
/>
</div>
<div
class="euiEmptyPrompt__footer emotion-euiEmptyPrompt__footer-l-transparent-roundedBorders"
class="euiEmptyPrompt__footer emotion-euiEmptyPrompt__footer-m-transparent-roundedBorders"
>
footer
</div>
Expand All @@ -303,7 +303,7 @@ exports[`EuiEmptyPrompt props icon renders alone 1`] = `
class="euiPanel euiPanel--transparent euiEmptyPrompt emotion-euiPanel-m-transparent-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__icon emotion-euiEmptyPrompt__icon-vertical"
Expand All @@ -324,7 +324,7 @@ exports[`EuiEmptyPrompt props iconType renders alone 1`] = `
class="euiPanel euiPanel--transparent euiEmptyPrompt emotion-euiPanel-m-transparent-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__icon emotion-euiEmptyPrompt__icon-vertical"
Expand All @@ -346,7 +346,7 @@ exports[`EuiEmptyPrompt props iconType renders with iconColor 1`] = `
class="euiPanel euiPanel--transparent euiEmptyPrompt emotion-euiPanel-m-transparent-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__icon emotion-euiEmptyPrompt__icon-vertical"
Expand All @@ -368,7 +368,7 @@ exports[`EuiEmptyPrompt props layout renders alone 1`] = `
class="euiPanel euiPanel--transparent euiEmptyPrompt emotion-euiPanel-m-transparent-euiEmptyPrompt-horizontal"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-horizontal-l-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-horizontal-m-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-horizontal"
Expand Down Expand Up @@ -439,7 +439,7 @@ exports[`EuiEmptyPrompt props styles are rendered 1`] = `
style="background: yellow; min-width: 200px; max-width: 600px;"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand All @@ -453,7 +453,7 @@ exports[`EuiEmptyPrompt props title renders alone 1`] = `
class="euiPanel euiPanel--transparent euiEmptyPrompt emotion-euiPanel-m-transparent-euiEmptyPrompt-vertical"
>
<div
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-l"
class="euiEmptyPrompt__main emotion-euiEmptyPrompt__main-vertical-m"
>
<div
class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical"
Expand Down
3 changes: 1 addition & 2 deletions packages/eui/src/components/empty_prompt/empty_prompt.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,8 +88,7 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => {
`,
horizontal: css`
${euiMinBreakpoint(euiThemeContext, 'l')} {
padding-block: ${euiTheme.size.l};
padding-inline: 0;
padding: ${euiTheme.size.l};
}
`,
},
Expand Down
28 changes: 20 additions & 8 deletions 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 @@ -14,7 +14,7 @@ import React, {
} from 'react';
import classNames from 'classnames';

import { useEuiMemoizedStyles } from '../../services';
import { useEuiMemoizedStyles, useEuiTheme } from '../../services';
import { CommonProps } from '../common';
import { EuiTitle, EuiTitleSize } from '../title';
import { EuiFlexGroup, EuiFlexItem } from '../flex';
Expand Down Expand Up @@ -86,7 +86,7 @@ export const EuiEmptyPrompt: FunctionComponent<EuiEmptyPromptProps> = ({
iconColor: _iconColor,
title,
titleSize = 'm',
paddingSize = 'l',
paddingSize,
body,
actions,
className,
Expand All @@ -98,12 +98,22 @@ export const EuiEmptyPrompt: FunctionComponent<EuiEmptyPromptProps> = ({
}) => {
const classes = classNames('euiEmptyPrompt', className);
const styles = useEuiMemoizedStyles(euiEmptyPromptStyles);
const euiTheme = useEuiTheme();

// Get spacing values from theme, fallback to defaults for Amsterdam theme
const titleBodySpacing =
(euiTheme.euiTheme as any).spacing?.emptyPrompt?.titleBodySpacing ?? 'm';
const bodyActionsSpacing =
(euiTheme.euiTheme as any).spacing?.emptyPrompt?.bodyActionsSpacing ?? 'l';
const themePaddingSize =
(euiTheme.euiTheme as any).spacing?.emptyPrompt?.paddingSize ?? 'l';
const cssStyles = [styles.euiEmptyPrompt, styles[layout]];
const finalPaddingSize = (paddingSize ?? themePaddingSize) as PaddingSize;
const mainStyles = [
styles.main.euiEmptyPrompt__main,
styles.main[layout],
styles.main[paddingSize],
layout === 'horizontal' && styles.main.horizontalPadding[paddingSize],
styles.main[finalPaddingSize],
layout === 'horizontal' && styles.main.horizontalPadding[finalPaddingSize],
];
const contentStyles = [
styles.content.euiEmptyPrompt__content,
Expand Down Expand Up @@ -161,7 +171,7 @@ export const EuiEmptyPrompt: FunctionComponent<EuiEmptyPromptProps> = ({
if (!footer) return null;
const footerStyles = [
styles.footer.euiEmptyPrompt__footer,
styles.footer[paddingSize],
styles.footer[finalPaddingSize],
styles.footer[color],
color === 'transparent' && !hasBorder && styles.footer.roundedBorders,
];
Expand All @@ -170,7 +180,7 @@ export const EuiEmptyPrompt: FunctionComponent<EuiEmptyPromptProps> = ({
{footer}
</div>
);
}, [footer, paddingSize, color, hasBorder, styles.footer]);
}, [footer, finalPaddingSize, color, hasBorder, styles.footer]);

return (
<EuiPanel
Expand All @@ -186,9 +196,11 @@ 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={titleBodySpacing} />}
{body && <EuiText color="subdued">{body}</EuiText>}
{actionsNode && (body || title) && <EuiSpacer size="l" />}
{actionsNode && (body || title) && (
<EuiSpacer size={bodyActionsSpacing} />
)}
{actionsNode}
</div>
</div>
Expand Down