Add EuiEmptyPrompt theme component tokens for spacing overrides

packages/eui-theme-borealis/changelogs/upcoming/9057.md

@@ -0,0 +1 @@
+- Added component tokens for `emptyPrompt` spacing configuration: `titleBodySpacing`, `bodyActionsSpacing` and `paddingSize`

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

@@ -20,6 +20,7 @@ import {
 import { border_colors } from './colors/_colors_light';
 import { buttons } from './_buttons';
 import { forms } from './_forms';
+import { emptyPrompt } from './_empty_prompt';
 
 const component_colors: _EuiThemeComponentColors = {
   badgeBackground: computed(
@@ -370,6 +371,7 @@ const component_colors: _EuiThemeComponentColors = {
 export const components: _EuiThemeComponents = {
   buttons,
   forms,
+  emptyPrompt,
   LIGHT: component_colors,
   DARK: {
     ...component_colors,

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

@@ -0,0 +1,14 @@
+/*
+ * 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.
+ */
+
+import { _EuiThemeEmptyPrompt } from '@elastic/eui-theme-common';
+
+export const emptyPrompt: _EuiThemeEmptyPrompt = {
+  titleBodySpacing: 's',
+  bodyActionsSpacing: 'm',
+  paddingSize: 'm',
+};

packages/eui-theme-common/changelogs/upcoming/9057.md

@@ -0,0 +1 @@
+- Added `_EuiThemeEmptyPrompt` type and `emptyPrompt` component token

packages/eui-theme-common/src/global_styling/variables/components.ts

@@ -12,6 +12,7 @@ import {
 } from '../../services/theme/types';
 import { _EuiThemeButton } from './buttons';
 import { _EuiThemeForm, _EuiThemeFormColors } from './forms';
+import { _EuiThemeEmptyPrompt } from './empty_prompt';
 
 export type _EuiThemeComponentColors = {
   badgeBackground: ColorModeSwitch;
@@ -157,6 +158,7 @@ export type _EuiThemeComponentColors = {
 export type _EuiThemeComponents = {
   buttons: _EuiThemeButton;
   forms: _EuiThemeForm & StrictColorModeSwitch<_EuiThemeFormColors>;
+  emptyPrompt: _EuiThemeEmptyPrompt;
   /**
    * internal-only key that holds temporary tokens used while migrating themes
    */

packages/eui-theme-common/src/global_styling/variables/empty_prompt.ts

@@ -0,0 +1,12 @@
+/*
+ * 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.
+ */
+
+export type _EuiThemeEmptyPrompt = {
+  titleBodySpacing: string;
+  bodyActionsSpacing: string;
+  paddingSize: string;
+};

packages/eui-theme-common/src/global_styling/variables/index.ts

@@ -19,6 +19,7 @@ export * from './states';
 export * from './typography';
 export * from './buttons';
 export * from './forms';
+export * from './empty_prompt';
 export * from './components';
 export * from './flags';
 export * from './overrides';

packages/eui/changelogs/upcoming/9057.md

@@ -0,0 +1 @@
+- Added component tokens for `EuiEmptyPrompt` spacing configuration

packages/eui/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap

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

packages/eui/src/components/empty_prompt/empty_prompt.styles.ts

@@ -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};
         }
       `,
     },

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

@@ -14,11 +14,11 @@ 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';
-import { EuiSpacer } from '../spacer';
+import { EuiSpacer, SpacerSize } from '../spacer';
 import { EuiIcon, IconColor, IconType } from '../icon';
 import { isNamedColor } from '../icon/named_colors';
 import { EuiText } from '../text';
@@ -86,7 +86,7 @@ export const EuiEmptyPrompt: FunctionComponent<EuiEmptyPromptProps> = ({
   iconColor: _iconColor,
   title,
   titleSize = 'm',
-  paddingSize = 'l',
+  paddingSize,
   body,
   actions,
   className,
@@ -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.components.emptyPrompt
+    ?.titleBodySpacing ?? 'm') as SpacerSize;
+  const bodyActionsSpacing = (euiTheme.euiTheme.components.emptyPrompt
+    ?.bodyActionsSpacing ?? 'l') as SpacerSize;
+  const themePaddingSize =
+    euiTheme.euiTheme.components.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,
@@ -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,
     ];
@@ -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
@@ -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>