diff --git a/packages/eui-theme-borealis/changelogs/upcoming/9057.md b/packages/eui-theme-borealis/changelogs/upcoming/9057.md new file mode 100644 index 00000000000..06e95677559 --- /dev/null +++ b/packages/eui-theme-borealis/changelogs/upcoming/9057.md @@ -0,0 +1 @@ +- Added component tokens for `emptyPrompt` spacing configuration: `titleBodySpacing`, `bodyActionsSpacing` and `paddingSize` \ No newline at end of file diff --git a/packages/eui-theme-borealis/src/variables/_components.ts b/packages/eui-theme-borealis/src/variables/_components.ts index c9891724df3..481213da075 100644 --- a/packages/eui-theme-borealis/src/variables/_components.ts +++ b/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, diff --git a/packages/eui-theme-borealis/src/variables/_empty_prompt.ts b/packages/eui-theme-borealis/src/variables/_empty_prompt.ts new file mode 100644 index 00000000000..7ca9d71a6d6 --- /dev/null +++ b/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', +}; diff --git a/packages/eui-theme-common/changelogs/upcoming/9057.md b/packages/eui-theme-common/changelogs/upcoming/9057.md new file mode 100644 index 00000000000..1368b9d7ca4 --- /dev/null +++ b/packages/eui-theme-common/changelogs/upcoming/9057.md @@ -0,0 +1 @@ +- Added `_EuiThemeEmptyPrompt` type and `emptyPrompt` component token diff --git a/packages/eui-theme-common/src/global_styling/variables/components.ts b/packages/eui-theme-common/src/global_styling/variables/components.ts index cf8ef16ec52..fb33a1ef7c0 100644 --- a/packages/eui-theme-common/src/global_styling/variables/components.ts +++ b/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 */ diff --git a/packages/eui-theme-common/src/global_styling/variables/empty_prompt.ts b/packages/eui-theme-common/src/global_styling/variables/empty_prompt.ts new file mode 100644 index 00000000000..e580be3bceb --- /dev/null +++ b/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; +}; diff --git a/packages/eui-theme-common/src/global_styling/variables/index.ts b/packages/eui-theme-common/src/global_styling/variables/index.ts index 18b3e15971e..abe9c691a1d 100644 --- a/packages/eui-theme-common/src/global_styling/variables/index.ts +++ b/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'; diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast.png index 981ea42e9e3..ac02d3d6feb 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast_Transparent.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast_Transparent.png index 019430f53f9..f1bf60a4197 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast_Transparent.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_High_Contrast_Transparent.png differ 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..df0a855dd34 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/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Playground.png index e72be7d8fcd..9d06bc7f43d 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiEmptyPrompt_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Display_EuiIconTip_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Display_EuiIconTip_Playground.png index 63c7b136574..f916fc4bf80 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Display_EuiIconTip_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Display_EuiIconTip_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png index 2aa2ade8801..d903952bf8e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png index 9b06f24394d..8a5e9a6be26 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png and b/packages/eui/.loki/reference/chrome_desktop_Navigation_EuiCollapsibleNav_EuiCollapsibleNav_Full_Header_Pattern.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png index 55ab7b775db..5ba9429238a 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png and b/packages/eui/.loki/reference/chrome_desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Keyboard_Shortcuts.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast.png index 340bba65cfa..1c51eae03d7 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast_Transparent.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast_Transparent.png index fbdf879bdca..043d7d230df 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast_Transparent.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_High_Contrast_Transparent.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png index e1b4ead216a..865ae106c91 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Page_Template.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Playground.png index 5531291ec85..aa4fffb7f40 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiEmptyPrompt_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Display_EuiIconTip_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Display_EuiIconTip_Playground.png index 6018e8fc170..751ceb41f21 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Display_EuiIconTip_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Display_EuiIconTip_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png index ccb13b6fae1..af85c6e6553 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiSuperDatePicker_EuiSuperDatePicker_Quick_Select_Only.png differ diff --git a/packages/eui/changelogs/upcoming/9057.md b/packages/eui/changelogs/upcoming/9057.md new file mode 100644 index 00000000000..e759401f88b --- /dev/null +++ b/packages/eui/changelogs/upcoming/9057.md @@ -0,0 +1 @@ +- Added component tokens for `EuiEmptyPrompt` spacing configuration \ 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" >
footer
@@ -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..9b2854d0d99 100644 --- a/packages/eui/src/components/empty_prompt/empty_prompt.tsx +++ b/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 = ({ 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.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 = ({ 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}
diff --git a/packages/eui/src/components/spacer/index.ts b/packages/eui/src/components/spacer/index.ts index a07955f5c31..5a5dc0a5cb7 100644 --- a/packages/eui/src/components/spacer/index.ts +++ b/packages/eui/src/components/spacer/index.ts @@ -6,5 +6,5 @@ * Side Public License, v 1. */ -export type { EuiSpacerProps } from './spacer'; +export type { EuiSpacerProps, SpacerSize } from './spacer'; export { EuiSpacer } from './spacer'; diff --git a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts index d4ac080a3bd..12b2e513919 100644 --- a/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts +++ b/packages/eui/src/themes/amsterdam/global_styling/variables/_components.ts @@ -23,6 +23,13 @@ import { buttons } from './_buttons'; import { forms } from './_forms'; import { colorVisLight as colorVis } from './_colors_vis_light'; +// Amsterdam theme uses default spacing values for emptyPrompt +const emptyPrompt = { + titleBodySpacing: 'm', + bodyActionsSpacing: 'l', + paddingSize: 'l', +}; + const component_colors: _EuiThemeComponentColors = { badgeBackground: computed( ([lightShade]) => lightShade, @@ -471,6 +478,7 @@ const component_colors: _EuiThemeComponentColors = { export const components: _EuiThemeComponents = { buttons, forms, + emptyPrompt, LIGHT: component_colors, DARK: { ...component_colors,