diff --git a/packages/eui-theme-borealis/changelogs/upcoming/9044.md b/packages/eui-theme-borealis/changelogs/upcoming/9044.md new file mode 100644 index 00000000000..80041185718 --- /dev/null +++ b/packages/eui-theme-borealis/changelogs/upcoming/9044.md @@ -0,0 +1 @@ +Added theme defaults for `spacing` of `emptyPrompt` content \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json index ed01cd7edb3..6f5555c55ae 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_dark.json @@ -423,5 +423,12 @@ "euiColorBorderStrongWarning": "#FACB3D", "euiColorBorderStrongRisk": "#FC8544", "euiColorBorderStrongDanger": "#F6726A", - "euiColorBorderStrongText": "#8E9FBC" + "euiColorBorderStrongText": "#8E9FBC", + "spacing": { + "emptyPrompt": { + "titleBodySpacing": "s", + "bodyActionsSpacing": "m", + "paddingSize": "m" + } + } } diff --git a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json index 941b63776a6..5ea31808114 100644 --- a/packages/eui-theme-borealis/src/eui_theme_borealis_light.json +++ b/packages/eui-theme-borealis/src/eui_theme_borealis_light.json @@ -423,5 +423,12 @@ "euiColorBorderStrongWarning": "#966B03", "euiColorBorderStrongRisk": "#C24411", "euiColorBorderStrongDanger": "#C61E25", - "euiColorBorderStrongText": "#5A6D8C" + "euiColorBorderStrongText": "#5A6D8C", + "spacing": { + "emptyPrompt": { + "titleBodySpacing": "s", + "bodyActionsSpacing": "m", + "paddingSize": "m" + } + } } diff --git a/packages/eui-theme-borealis/src/index.ts b/packages/eui-theme-borealis/src/index.ts index 078c739583c..38165eaa713 100644 --- a/packages/eui-theme-borealis/src/index.ts +++ b/packages/eui-theme-borealis/src/index.ts @@ -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'; @@ -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, @@ -37,6 +38,7 @@ export const euiThemeBorealis: EuiThemeShape = { levels, focus, components, + spacing, flags: { hasGlobalFocusColor: true, hasVisColorAdjustment: false, diff --git a/packages/eui-theme-borealis/src/variables/_spacing.ts b/packages/eui-theme-borealis/src/variables/_spacing.ts new file mode 100644 index 00000000000..2d7b0077dc7 --- /dev/null +++ b/packages/eui-theme-borealis/src/variables/_spacing.ts @@ -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, +}; diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png index f72fcb20e10..17d8bceee0c 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Page_Template.png differ diff --git a/packages/eui/changelogs/upcoming/9044.md b/packages/eui/changelogs/upcoming/9044.md new file mode 100644 index 00000000000..4de6a536e6a --- /dev/null +++ b/packages/eui/changelogs/upcoming/9044.md @@ -0,0 +1 @@ +- Added `emptyPromptSpacing` theme configuration for `EuiEmptyPrompt` \ No newline at end of file diff --git a/packages/eui/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap b/packages/eui/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap index 847de3a3ef2..234a61ad663 100644 --- a/packages/eui/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap +++ b/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" >
Actions @@ -51,7 +51,7 @@ exports[`EuiEmptyPrompt props actions renders alone 1`] = ` class="euiPanel euiPanel--transparent euiEmptyPrompt emotion-euiPanel-m-transparent-euiEmptyPrompt-vertical" >
@@ -303,7 +303,7 @@ exports[`EuiEmptyPrompt props icon renders alone 1`] = ` class="euiPanel euiPanel--transparent euiEmptyPrompt emotion-euiPanel-m-transparent-euiEmptyPrompt-vertical" >
{ `, horizontal: css` ${euiMinBreakpoint(euiThemeContext, 'l')} { - padding-block: ${euiTheme.size.l}; - padding-inline: 0; + padding: ${euiTheme.size.l}; } `, }, diff --git a/packages/eui/src/components/empty_prompt/empty_prompt.tsx b/packages/eui/src/components/empty_prompt/empty_prompt.tsx index d16fe9539fc..4eb258704de 100644 --- a/packages/eui/src/components/empty_prompt/empty_prompt.tsx +++ b/packages/eui/src/components/empty_prompt/empty_prompt.tsx @@ -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'; @@ -86,7 +86,7 @@ export const EuiEmptyPrompt: FunctionComponent = ({ iconColor: _iconColor, title, titleSize = 'm', - paddingSize = 'l', + paddingSize, body, actions, className, @@ -98,12 +98,22 @@ export const EuiEmptyPrompt: FunctionComponent = ({ }) => { 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, @@ -161,7 +171,7 @@ export const EuiEmptyPrompt: FunctionComponent = ({ 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 = ({ {footer}
); - }, [footer, paddingSize, color, hasBorder, styles.footer]); + }, [footer, finalPaddingSize, color, hasBorder, styles.footer]); return ( = ({ {iconNode}
{title && {title}} - {title && body && } + {title && body && } {body && {body}} - {actionsNode && (body || title) && } + {actionsNode && (body || title) && ( + + )} {actionsNode}