From 6b0a65ec1a61201aaef185065164f295680331e1 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 25 Jan 2024 12:47:15 -0800 Subject: [PATCH 01/14] Set up empty_prompt.styles.ts --- .../empty_prompt/_empty_prompt.scss | 7 ----- .../empty_prompt/empty_prompt.styles.ts | 27 +++++++++++++++++++ src/components/empty_prompt/empty_prompt.tsx | 26 +++++++++++------- 3 files changed, 43 insertions(+), 17 deletions(-) create mode 100644 src/components/empty_prompt/empty_prompt.styles.ts diff --git a/src/components/empty_prompt/_empty_prompt.scss b/src/components/empty_prompt/_empty_prompt.scss index 188da8b0365..4c84d1add30 100644 --- a/src/components/empty_prompt/_empty_prompt.scss +++ b/src/components/empty_prompt/_empty_prompt.scss @@ -1,11 +1,4 @@ .euiEmptyPrompt { - text-align: center; - margin: auto; - - @include euiBreakpoint('l', 'xl') { - max-width: max-content; // the width becomes as wide as necessary to contain all of its contents - } - .euiEmptyPrompt__icon { // Consumers should use an EuiImage (recommended) with the horizontal layout // But they can use for example an img or other react node diff --git a/src/components/empty_prompt/empty_prompt.styles.ts b/src/components/empty_prompt/empty_prompt.styles.ts new file mode 100644 index 00000000000..58a16b33bff --- /dev/null +++ b/src/components/empty_prompt/empty_prompt.styles.ts @@ -0,0 +1,27 @@ +/* + * 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 { css } from '@emotion/react'; +import { euiBreakpoint, logicalCSS } from '../../global_styling'; +import { UseEuiTheme } from '../../services'; + +export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + return { + euiEmptyPrompt: css` + text-align: center; + margin: auto; + + ${euiBreakpoint(euiThemeContext, ['l', 'xl'])} { + /* the width becomes as wide as necessary to contain all of its contents */ + ${logicalCSS('max-width', 'max-content')} + } + `, + }; +}; diff --git a/src/components/empty_prompt/empty_prompt.tsx b/src/components/empty_prompt/empty_prompt.tsx index 477f7575f98..4f9ee6398ec 100644 --- a/src/components/empty_prompt/empty_prompt.tsx +++ b/src/components/empty_prompt/empty_prompt.tsx @@ -9,6 +9,7 @@ import React, { FunctionComponent, ReactElement, ReactNode } from 'react'; import classNames from 'classnames'; +import { useEuiTheme } from '../../services'; import { CommonProps, keysOf } from '../common'; import { EuiTitle, EuiTitleSize } from '../title'; import { EuiFlexGroup, EuiFlexItem } from '../flex'; @@ -18,6 +19,8 @@ import { isNamedColor } from '../icon/named_colors'; import { EuiText } from '../text'; import { EuiPanel, _EuiPanelDivlike } from '../panel/panel'; +import { euiEmptyPromptStyles } from './empty_prompt.styles'; + const paddingSizeToClassNameMap = { none: null, s: 'euiEmptyPrompt--paddingSmall', @@ -96,6 +99,10 @@ export const EuiEmptyPrompt: FunctionComponent = ({ footer, ...rest }) => { + const euiTheme = useEuiTheme(); + const styles = euiEmptyPromptStyles(euiTheme); + const cssStyles = [styles.euiEmptyPrompt, styles[layout]]; + const isVerticalLayout = layout === 'vertical'; // Default the iconColor to `subdued`, // otherwise try to match the iconColor with the panel color unless iconColor is specified @@ -171,17 +178,16 @@ export const EuiEmptyPrompt: FunctionComponent = ({ className ); - const panelProps: _EuiPanelDivlike = { - className: classes, - color: color, - paddingSize: 'none', - hasBorder: hasBorder, - grow: false, - ...rest, - }; - return ( - +
{iconNode &&
{iconNode}
}
From 742db430b3c1b8a2cd545f58270364a5253a6726 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 25 Jan 2024 12:54:39 -0800 Subject: [PATCH 02/14] Convert more sub element CSS --- .../empty_prompt/_empty_prompt.scss | 51 ---------------- .../empty_prompt/empty_prompt.styles.ts | 60 ++++++++++++++++++- src/components/empty_prompt/empty_prompt.tsx | 15 ++++- 3 files changed, 72 insertions(+), 54 deletions(-) diff --git a/src/components/empty_prompt/_empty_prompt.scss b/src/components/empty_prompt/_empty_prompt.scss index 4c84d1add30..651c70d8cb0 100644 --- a/src/components/empty_prompt/_empty_prompt.scss +++ b/src/components/empty_prompt/_empty_prompt.scss @@ -1,13 +1,4 @@ .euiEmptyPrompt { - .euiEmptyPrompt__icon { - // Consumers should use an EuiImage (recommended) with the horizontal layout - // But they can use for example an img or other react node - > * { - flex-shrink: 1; - max-width: convertToRem(360px); - } - } - // Footer background colors @each $modifier, $color in $euiPanelBackgroundColorModifiers { @if ($modifier == 'transparent') { @@ -46,49 +37,13 @@ $euiEmptyPromptContentMaxWidth: 36em; .euiEmptyPrompt--vertical { - .euiEmptyPrompt__main { - display: flex; - flex-direction: column; - justify-content: center; - } - .euiEmptyPrompt__contentInner { max-width: $euiEmptyPromptContentMaxWidth; margin: auto; } - - .euiEmptyPrompt__icon { - margin-bottom: $euiSize; - } } .euiEmptyPrompt--horizontal { - @include euiBreakpoint('l', 'xl') { - justify-content: flex-start; - text-align: left; - } - - .euiEmptyPrompt__main { - display: flex; - flex-direction: column; - align-items: center; - - @include euiBreakpoint('l', 'xl') { - flex-direction: row-reverse; - } - } - - .euiEmptyPrompt__icon { - display: flex; - align-items: center; - justify-content: center; - - @include euiBreakpoint('l', 'xl') { - min-width: 40%; - max-width: 50%; - } - } - .euiEmptyPrompt__content { max-width: $euiEmptyPromptContentMaxWidth; @@ -96,12 +51,6 @@ $euiEmptyPromptContentMaxWidth: 36em; padding: $euiSizeL 0; } } - - .euiEmptyPrompt__actions { - @include euiBreakpoint('l', 'xl') { - justify-content: flex-start; - } - } } // Padding diff --git a/src/components/empty_prompt/empty_prompt.styles.ts b/src/components/empty_prompt/empty_prompt.styles.ts index 58a16b33bff..d7b04a7dfd1 100644 --- a/src/components/empty_prompt/empty_prompt.styles.ts +++ b/src/components/empty_prompt/empty_prompt.styles.ts @@ -7,7 +7,7 @@ */ import { css } from '@emotion/react'; -import { euiBreakpoint, logicalCSS } from '../../global_styling'; +import { euiBreakpoint, logicalCSS, mathWithUnits } from '../../global_styling'; import { UseEuiTheme } from '../../services'; export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { @@ -23,5 +23,63 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { ${logicalCSS('max-width', 'max-content')} } `, + vertical: css``, + horizontal: css` + ${euiBreakpoint(euiThemeContext, ['l', 'xl'])} { + justify-content: flex-start; + text-align: start; + } + `, + main: { + euiEmptyPrompt__main: css` + display: flex; + flex-direction: column; + `, + vertical: css` + justify-content: center; + `, + horizontal: css` + align-items: center; + + ${euiBreakpoint(euiThemeContext, ['l', 'xl'])} { + flex-direction: row-reverse; + } + `, + }, + icon: { + euiEmptyPrompt__icon: css` + /* Consumers should use an EuiImage (recommended) with the horizontal layout + * But they can use for example an img or other react node */ + & > * { + flex-shrink: 1; + ${logicalCSS( + 'max-width', + mathWithUnits(euiTheme.size.l, (x) => x * 24) + )} + } + `, + vertical: css` + ${logicalCSS('margin-bottom', euiTheme.size.base)} + `, + horizontal: css` + display: flex; + align-items: center; + justify-content: center; + + ${euiBreakpoint(euiThemeContext, ['l', 'xl'])} { + ${logicalCSS('min-width', '40%')} + ${logicalCSS('max-width', '50%')} + } + `, + }, + actions: { + euiEmptyPrompt__actions: css``, + vertical: css``, + horizontal: css` + ${euiBreakpoint(euiThemeContext, ['l', 'xl'])} { + justify-content: flex-start; + } + `, + }, }; }; diff --git a/src/components/empty_prompt/empty_prompt.tsx b/src/components/empty_prompt/empty_prompt.tsx index 4f9ee6398ec..720d34e3122 100644 --- a/src/components/empty_prompt/empty_prompt.tsx +++ b/src/components/empty_prompt/empty_prompt.tsx @@ -139,6 +139,7 @@ export const EuiEmptyPrompt: FunctionComponent = ({ actionsRow = ( = ({ hasBorder={hasBorder} {...rest} > -
- {iconNode &&
{iconNode}
} +
+ {iconNode && ( +
+ {iconNode} +
+ )}
{contentNodes}
From 4dc48e1a4c00747c7fffcd648df39dba5e8015e4 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 25 Jan 2024 13:26:07 -0800 Subject: [PATCH 03/14] Convert content wrapper + remove unnecessary extra div --- .../empty_prompt/_empty_prompt.scss | 19 ------------ .../empty_prompt/empty_prompt.styles.ts | 29 ++++++++++++++----- src/components/empty_prompt/empty_prompt.tsx | 7 +++-- 3 files changed, 26 insertions(+), 29 deletions(-) diff --git a/src/components/empty_prompt/_empty_prompt.scss b/src/components/empty_prompt/_empty_prompt.scss index 651c70d8cb0..a1eb8e6bb95 100644 --- a/src/components/empty_prompt/_empty_prompt.scss +++ b/src/components/empty_prompt/_empty_prompt.scss @@ -34,25 +34,6 @@ } } -$euiEmptyPromptContentMaxWidth: 36em; - -.euiEmptyPrompt--vertical { - .euiEmptyPrompt__contentInner { - max-width: $euiEmptyPromptContentMaxWidth; - margin: auto; - } -} - -.euiEmptyPrompt--horizontal { - .euiEmptyPrompt__content { - max-width: $euiEmptyPromptContentMaxWidth; - - @include euiBreakpoint('l', 'xl') { - padding: $euiSizeL 0; - } - } -} - // Padding @each $modifier, $amount in $euiPanelPaddingModifiers { .euiEmptyPrompt--#{$modifier} { diff --git a/src/components/empty_prompt/empty_prompt.styles.ts b/src/components/empty_prompt/empty_prompt.styles.ts index d7b04a7dfd1..2249740d3d9 100644 --- a/src/components/empty_prompt/empty_prompt.styles.ts +++ b/src/components/empty_prompt/empty_prompt.styles.ts @@ -46,26 +46,39 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { } `, }, + content: { + euiEmptyPrompt__content: css` + ${logicalCSS('max-width', '36em')} + `, + vertical: css` + margin: auto; + `, + horizontal: css` + ${euiBreakpoint(euiThemeContext, ['l', 'xl'])} { + padding-block: ${euiTheme.size.l}; + padding-inline: 0; + } + `, + }, icon: { euiEmptyPrompt__icon: css` + ${logicalCSS( + 'max-width', + mathWithUnits(euiTheme.size.l, (x) => x * 15) + )} + margin: auto; + /* Consumers should use an EuiImage (recommended) with the horizontal layout * But they can use for example an img or other react node */ & > * { flex-shrink: 1; - ${logicalCSS( - 'max-width', - mathWithUnits(euiTheme.size.l, (x) => x * 24) - )} + ${logicalCSS('max-width', '100%')} } `, vertical: css` ${logicalCSS('margin-bottom', euiTheme.size.base)} `, horizontal: css` - display: flex; - align-items: center; - justify-content: center; - ${euiBreakpoint(euiThemeContext, ['l', 'xl'])} { ${logicalCSS('min-width', '40%')} ${logicalCSS('max-width', '50%')} diff --git a/src/components/empty_prompt/empty_prompt.tsx b/src/components/empty_prompt/empty_prompt.tsx index 720d34e3122..8051a674117 100644 --- a/src/components/empty_prompt/empty_prompt.tsx +++ b/src/components/empty_prompt/empty_prompt.tsx @@ -201,8 +201,11 @@ export const EuiEmptyPrompt: FunctionComponent = ({ {iconNode}
)} -
-
{contentNodes}
+
+ {contentNodes}
{footer &&
{footer}
} From d7fb77877650be9288778cb02adb5b5763e07dbc Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 25 Jan 2024 13:55:08 -0800 Subject: [PATCH 04/14] Convert padding CSS to Emotion --- .../empty_prompt/_empty_prompt.scss | 16 ------------ .../empty_prompt/empty_prompt.styles.ts | 26 ++++++++++++++++++- src/components/empty_prompt/empty_prompt.tsx | 19 ++++++++++++-- 3 files changed, 42 insertions(+), 19 deletions(-) diff --git a/src/components/empty_prompt/_empty_prompt.scss b/src/components/empty_prompt/_empty_prompt.scss index a1eb8e6bb95..7e296d784cc 100644 --- a/src/components/empty_prompt/_empty_prompt.scss +++ b/src/components/empty_prompt/_empty_prompt.scss @@ -33,19 +33,3 @@ } } } - -// Padding -@each $modifier, $amount in $euiPanelPaddingModifiers { - .euiEmptyPrompt--#{$modifier} { - .euiEmptyPrompt__main, - .euiEmptyPrompt__footer { - padding: $amount; - } - - &.euiEmptyPrompt--horizontal { - .euiEmptyPrompt__main { - gap: $amount; - } - } - } -} diff --git a/src/components/empty_prompt/empty_prompt.styles.ts b/src/components/empty_prompt/empty_prompt.styles.ts index 2249740d3d9..cc2bc7c920c 100644 --- a/src/components/empty_prompt/empty_prompt.styles.ts +++ b/src/components/empty_prompt/empty_prompt.styles.ts @@ -7,12 +7,30 @@ */ import { css } from '@emotion/react'; -import { euiBreakpoint, logicalCSS, mathWithUnits } from '../../global_styling'; +import { + euiBreakpoint, + euiPaddingSize, + logicalCSS, + mathWithUnits, +} from '../../global_styling'; import { UseEuiTheme } from '../../services'; export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; + const generatePaddingStyles = (property = 'padding') => ({ + none: css``, + s: css` + ${property}: ${euiPaddingSize(euiThemeContext, 's')} + `, + m: css` + ${property}: ${euiPaddingSize(euiThemeContext, 'm')} + `, + l: css` + ${property}: ${euiPaddingSize(euiThemeContext, 'l')} + `, + }); + return { euiEmptyPrompt: css` text-align: center; @@ -45,6 +63,8 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { flex-direction: row-reverse; } `, + ...generatePaddingStyles(), + horizontalPadding: generatePaddingStyles('gap'), }, content: { euiEmptyPrompt__content: css` @@ -94,5 +114,9 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { } `, }, + footer: { + euiEmptyPrompt__footer: css``, + ...generatePaddingStyles(), + }, }; }; diff --git a/src/components/empty_prompt/empty_prompt.tsx b/src/components/empty_prompt/empty_prompt.tsx index 8051a674117..61fc7b91477 100644 --- a/src/components/empty_prompt/empty_prompt.tsx +++ b/src/components/empty_prompt/empty_prompt.tsx @@ -191,7 +191,12 @@ export const EuiEmptyPrompt: FunctionComponent = ({ >
{iconNode && (
= ({ {contentNodes}
- {footer &&
{footer}
} + {footer && ( +
+ {footer} +
+ )} ); }; From 5999bf590dbe35bd860292d129e6307de9e66145 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 25 Jan 2024 15:05:17 -0800 Subject: [PATCH 05/14] Footer: simplify border-radius CSS + use logical properties --- src/components/empty_prompt/_empty_prompt.scss | 11 ----------- src/components/empty_prompt/empty_prompt.styles.ts | 10 +++++++++- src/components/empty_prompt/empty_prompt.tsx | 3 +++ 3 files changed, 12 insertions(+), 12 deletions(-) diff --git a/src/components/empty_prompt/_empty_prompt.scss b/src/components/empty_prompt/_empty_prompt.scss index 7e296d784cc..c7ab767cde6 100644 --- a/src/components/empty_prompt/_empty_prompt.scss +++ b/src/components/empty_prompt/_empty_prompt.scss @@ -6,29 +6,18 @@ .euiEmptyPrompt__footer { background-color: $euiPageBackgroundColor; } - - &:not(.euiPanel--hasBorder) .euiEmptyPrompt__footer { - border-radius: $euiBorderRadius; - } - - &.euiPanel--hasBorder .euiEmptyPrompt__footer { - border-radius: 0 0 $euiBorderRadius $euiBorderRadius; - } } } @else if ($modifier == 'plain') { &.euiPanel--#{$modifier} .euiEmptyPrompt__footer { background-color: $euiPageBackgroundColor; - border-radius: 0 0 $euiBorderRadius $euiBorderRadius; } } @else if ($modifier == 'subdued') { &.euiPanel--#{$modifier} .euiEmptyPrompt__footer { border-top: $euiBorderThin; - border-radius: 0 0 $euiBorderRadius $euiBorderRadius; } } @else { &.euiPanel--#{$modifier} .euiEmptyPrompt__footer { border-top: 1px solid lightOrDarkTheme(darken($color, 10%), lighten($color, 6%)); - border-radius: 0 0 $euiBorderRadius $euiBorderRadius; } } } diff --git a/src/components/empty_prompt/empty_prompt.styles.ts b/src/components/empty_prompt/empty_prompt.styles.ts index cc2bc7c920c..7be8af65099 100644 --- a/src/components/empty_prompt/empty_prompt.styles.ts +++ b/src/components/empty_prompt/empty_prompt.styles.ts @@ -115,7 +115,15 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { `, }, footer: { - euiEmptyPrompt__footer: css``, + euiEmptyPrompt__footer: css` + /* Round bottom corners only */ + border-end-end-radius: inherit; + border-end-start-radius: inherit; + `, + roundedBorders: css` + /* Round all corners */ + border-radius: inherit; + `, ...generatePaddingStyles(), }, }; diff --git a/src/components/empty_prompt/empty_prompt.tsx b/src/components/empty_prompt/empty_prompt.tsx index 61fc7b91477..88858e877c4 100644 --- a/src/components/empty_prompt/empty_prompt.tsx +++ b/src/components/empty_prompt/empty_prompt.tsx @@ -219,6 +219,9 @@ export const EuiEmptyPrompt: FunctionComponent = ({ css={[ styles.footer.euiEmptyPrompt__footer, styles.footer[paddingSize], + color === 'transparent' && + !hasBorder && + styles.footer.roundedBorders, ]} > {footer} From 40aa2d62b7608944b9a33cb254e3aa2af3bdd744 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 25 Jan 2024 15:06:14 -0800 Subject: [PATCH 06/14] Create global mixin for border colors - in same pattern as the background color mixin + DRY out border colors in `EuiCommentEvent`, which this mixin was based on + add snapshot tests + bonus memoization --- .../comment_list/comment_event.styles.ts | 35 +------------ src/components/comment_list/comment_event.tsx | 4 +- .../empty_prompt/_empty_prompt.scss | 24 --------- .../empty_prompt/empty_prompt.styles.ts | 31 +++++++++++ src/components/empty_prompt/empty_prompt.tsx | 1 + .../mixins/__snapshots__/_color.test.ts.snap | 16 ++++++ src/global_styling/mixins/_color.test.ts | 13 +++++ src/global_styling/mixins/_color.ts | 52 +++++++++++++++++++ 8 files changed, 116 insertions(+), 60 deletions(-) diff --git a/src/components/comment_list/comment_event.styles.ts b/src/components/comment_list/comment_event.styles.ts index 42530c43101..8ef8471d794 100644 --- a/src/components/comment_list/comment_event.styles.ts +++ b/src/components/comment_list/comment_event.styles.ts @@ -7,42 +7,9 @@ */ import { css } from '@emotion/react'; -import { UseEuiTheme, tintOrShade } from '../../services'; +import { UseEuiTheme } from '../../services'; import { logicalCSS } from '../../global_styling'; -export const euiCommentEventBorderColors = ({ - euiTheme, - colorMode, -}: UseEuiTheme) => { - const ratio = 0.6; - return { - warning: css` - border-color: ${tintOrShade(euiTheme.colors.warning, 0.4, colorMode)}; - `, - accent: css` - border-color: ${tintOrShade(euiTheme.colors.accent, ratio, colorMode)}; - `, - primary: css` - border-color: ${tintOrShade(euiTheme.colors.primary, ratio, colorMode)}; - `, - success: css` - border-color: ${tintOrShade(euiTheme.colors.success, ratio, colorMode)}; - `, - danger: css` - border-color: ${tintOrShade(euiTheme.colors.danger, ratio, colorMode)}; - `, - subdued: css` - border-color: ${euiTheme.border.color}; - `, - transparent: css` - border-color: ${euiTheme.border.color}; - `, - plain: css` - border-color: ${euiTheme.border.color}; - `, - }; -}; - export const euiCommentEventStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; return { diff --git a/src/components/comment_list/comment_event.tsx b/src/components/comment_list/comment_event.tsx index 4747e3910c9..7e1a56af706 100644 --- a/src/components/comment_list/comment_event.tsx +++ b/src/components/comment_list/comment_event.tsx @@ -10,13 +10,13 @@ import React, { FunctionComponent, ReactNode, useMemo } from 'react'; import classNames from 'classnames'; import { useEuiTheme } from '../../services'; +import { useEuiBorderColorCSS } from '../../global_styling'; import { CommonProps } from '../common'; import { IconType } from '../icon'; import { EuiPanel, EuiPanelProps } from '../panel'; import { EuiAvatar } from '../avatar'; import { - euiCommentEventBorderColors, euiCommentEventStyles, euiCommentEventHeaderStyles, euiCommentEventBodyStyles, @@ -119,7 +119,7 @@ export const EuiCommentEvent: FunctionComponent = ({ * Styles */ const euiTheme = useEuiTheme(); - const borderStyles = euiCommentEventBorderColors(euiTheme); + const borderStyles = useEuiBorderColorCSS(); const styles = euiCommentEventStyles(euiTheme); const cssStyles = [ diff --git a/src/components/empty_prompt/_empty_prompt.scss b/src/components/empty_prompt/_empty_prompt.scss index c7ab767cde6..e69de29bb2d 100644 --- a/src/components/empty_prompt/_empty_prompt.scss +++ b/src/components/empty_prompt/_empty_prompt.scss @@ -1,24 +0,0 @@ -.euiEmptyPrompt { - // Footer background colors - @each $modifier, $color in $euiPanelBackgroundColorModifiers { - @if ($modifier == 'transparent') { - &.euiPanel--#{$modifier} { - .euiEmptyPrompt__footer { - background-color: $euiPageBackgroundColor; - } - } - } @else if ($modifier == 'plain') { - &.euiPanel--#{$modifier} .euiEmptyPrompt__footer { - background-color: $euiPageBackgroundColor; - } - } @else if ($modifier == 'subdued') { - &.euiPanel--#{$modifier} .euiEmptyPrompt__footer { - border-top: $euiBorderThin; - } - } @else { - &.euiPanel--#{$modifier} .euiEmptyPrompt__footer { - border-top: 1px solid lightOrDarkTheme(darken($color, 10%), lighten($color, 6%)); - } - } - } -} diff --git a/src/components/empty_prompt/empty_prompt.styles.ts b/src/components/empty_prompt/empty_prompt.styles.ts index 7be8af65099..afe039320f5 100644 --- a/src/components/empty_prompt/empty_prompt.styles.ts +++ b/src/components/empty_prompt/empty_prompt.styles.ts @@ -10,6 +10,7 @@ import { css } from '@emotion/react'; import { euiBreakpoint, euiPaddingSize, + euiBorderColor, logicalCSS, mathWithUnits, } from '../../global_styling'; @@ -30,6 +31,11 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { ${property}: ${euiPaddingSize(euiThemeContext, 'l')} `, }); + const generateFooterBorder = (color: Parameters[1]) => + `${euiTheme.border.width.thin} solid ${euiBorderColor( + euiThemeContext, + color + )}`; return { euiEmptyPrompt: css` @@ -124,6 +130,31 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { /* Round all corners */ border-radius: inherit; `, + // Colors + transparent: css` + background-color: ${euiTheme.colors.body}; + `, + plain: css` + background-color: ${euiTheme.colors.body}; + `, + subdued: css` + ${logicalCSS('border-top', generateFooterBorder('subdued'))} + `, + primary: css` + ${logicalCSS('border-top', generateFooterBorder('primary'))} + `, + accent: css` + ${logicalCSS('border-top', generateFooterBorder('accent'))} + `, + danger: css` + ${logicalCSS('border-top', generateFooterBorder('danger'))} + `, + warning: css` + ${logicalCSS('border-top', generateFooterBorder('warning'))} + `, + success: css` + ${logicalCSS('border-top', generateFooterBorder('success'))} + `, ...generatePaddingStyles(), }, }; diff --git a/src/components/empty_prompt/empty_prompt.tsx b/src/components/empty_prompt/empty_prompt.tsx index 88858e877c4..8993aa2424c 100644 --- a/src/components/empty_prompt/empty_prompt.tsx +++ b/src/components/empty_prompt/empty_prompt.tsx @@ -219,6 +219,7 @@ export const EuiEmptyPrompt: FunctionComponent = ({ css={[ styles.footer.euiEmptyPrompt__footer, styles.footer[paddingSize], + styles.footer[color], color === 'transparent' && !hasBorder && styles.footer.roundedBorders, diff --git a/src/global_styling/mixins/__snapshots__/_color.test.ts.snap b/src/global_styling/mixins/__snapshots__/_color.test.ts.snap index 683633a24d1..4bb1d1a0dc4 100644 --- a/src/global_styling/mixins/__snapshots__/_color.test.ts.snap +++ b/src/global_styling/mixins/__snapshots__/_color.test.ts.snap @@ -47,3 +47,19 @@ exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-c exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: transparent 1`] = `"background-color:transparent;;label:transparent;"`; exports[`useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties for each color: warning 1`] = `"background-color:#fff9e8;;label:warning;"`; + +exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: accent 1`] = `"border-color:#f9b8d6;;label:accent;"`; + +exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: danger 1`] = `"border-color:#e5a9a5;;label:danger;"`; + +exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: plain 1`] = `"border-color:#D3DAE6;;label:plain;"`; + +exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: primary 1`] = `"border-color:#99c9eb;;label:primary;"`; + +exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: subdued 1`] = `"border-color:#D3DAE6;;label:subdued;"`; + +exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: success 1`] = `"border-color:#99e5e1;;label:success;"`; + +exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: transparent 1`] = `"border-color:#D3DAE6;;label:transparent;"`; + +exports[`useEuiBorderColorCSS hook returns an object of Emotion border-color properties for each color: warning 1`] = `"border-color:#fedc72;;label:warning;"`; diff --git a/src/global_styling/mixins/_color.test.ts b/src/global_styling/mixins/_color.test.ts index 7f7470c31e5..bd0dc237dc5 100644 --- a/src/global_styling/mixins/_color.test.ts +++ b/src/global_styling/mixins/_color.test.ts @@ -11,6 +11,7 @@ import { BACKGROUND_COLORS, useEuiBackgroundColor, useEuiBackgroundColorCSS, + useEuiBorderColorCSS, } from './_color'; describe('useEuiBackgroundColor mixin returns a calculated background version', () => { @@ -46,3 +47,15 @@ describe('useEuiBackgroundColorCSS hook returns an object of Emotion background- }); }); }); + +describe('useEuiBorderColorCSS hook returns an object of Emotion border-color properties', () => { + const colors = renderHook(useEuiBorderColorCSS).result.current as any; + + describe('for each color:', () => { + Object.entries(colors).map(([color, cssObj]) => { + it(color, () => { + expect((cssObj as any).styles).toMatchSnapshot(); + }); + }); + }); +}); diff --git a/src/global_styling/mixins/_color.ts b/src/global_styling/mixins/_color.ts index 4c2090c5e50..aeee5aba2fb 100644 --- a/src/global_styling/mixins/_color.ts +++ b/src/global_styling/mixins/_color.ts @@ -6,10 +6,12 @@ * Side Public License, v 1. */ +import { useMemo } from 'react'; import { css } from '@emotion/react'; import { shade, tint, + tintOrShade, transparentize, useEuiTheme, UseEuiTheme, @@ -104,3 +106,53 @@ export const useEuiBackgroundColorCSS = () => { `, }; }; + +export const euiBorderColor = ( + { euiTheme, colorMode }: UseEuiTheme, + color: _EuiBackgroundColor +) => { + switch (color) { + case 'transparent': + case 'plain': + case 'subdued': + return euiTheme.border.color; + case 'warning': + return tintOrShade(euiTheme.colors.warning, 0.4, colorMode); + default: + return tintOrShade(euiTheme.colors[color], 0.6, colorMode); + } +}; + +export const useEuiBorderColorCSS = () => { + const euiThemeContext = useEuiTheme(); + + return useMemo( + () => ({ + transparent: css` + border-color: ${euiBorderColor(euiThemeContext, 'transparent')}; + `, + plain: css` + border-color: ${euiBorderColor(euiThemeContext, 'plain')}; + `, + subdued: css` + border-color: ${euiBorderColor(euiThemeContext, 'subdued')}; + `, + accent: css` + border-color: ${euiBorderColor(euiThemeContext, 'accent')}; + `, + primary: css` + border-color: ${euiBorderColor(euiThemeContext, 'primary')}; + `, + success: css` + border-color: ${euiBorderColor(euiThemeContext, 'success')}; + `, + warning: css` + border-color: ${euiBorderColor(euiThemeContext, 'warning')}; + `, + danger: css` + border-color: ${euiBorderColor(euiThemeContext, 'danger')}; + `, + }), + [euiThemeContext] + ); +}; From 179cedae79e73352ff072c360ca40cd272b03af8 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 25 Jan 2024 15:11:44 -0800 Subject: [PATCH 07/14] [bonus perf] memoize `useEuiBackgroundColorCSS` as well --- src/global_styling/mixins/_color.ts | 57 ++++++++++++++++------------- 1 file changed, 31 insertions(+), 26 deletions(-) diff --git a/src/global_styling/mixins/_color.ts b/src/global_styling/mixins/_color.ts index aeee5aba2fb..80c35b5c336 100644 --- a/src/global_styling/mixins/_color.ts +++ b/src/global_styling/mixins/_color.ts @@ -79,32 +79,37 @@ export const useEuiBackgroundColor = ( }; export const useEuiBackgroundColorCSS = () => { - return { - transparent: css` - background-color: ${useEuiBackgroundColor('transparent')}; - `, - plain: css` - background-color: ${useEuiBackgroundColor('plain')}; - `, - subdued: css` - background-color: ${useEuiBackgroundColor('subdued')}; - `, - accent: css` - background-color: ${useEuiBackgroundColor('accent')}; - `, - primary: css` - background-color: ${useEuiBackgroundColor('primary')}; - `, - success: css` - background-color: ${useEuiBackgroundColor('success')}; - `, - warning: css` - background-color: ${useEuiBackgroundColor('warning')}; - `, - danger: css` - background-color: ${useEuiBackgroundColor('danger')}; - `, - }; + const euiThemeContext = useEuiTheme(); + + return useMemo( + () => ({ + transparent: css` + background-color: ${euiBackgroundColor(euiThemeContext, 'transparent')}; + `, + plain: css` + background-color: ${euiBackgroundColor(euiThemeContext, 'plain')}; + `, + subdued: css` + background-color: ${euiBackgroundColor(euiThemeContext, 'subdued')}; + `, + accent: css` + background-color: ${euiBackgroundColor(euiThemeContext, 'accent')}; + `, + primary: css` + background-color: ${euiBackgroundColor(euiThemeContext, 'primary')}; + `, + success: css` + background-color: ${euiBackgroundColor(euiThemeContext, 'success')}; + `, + warning: css` + background-color: ${euiBackgroundColor(euiThemeContext, 'warning')}; + `, + danger: css` + background-color: ${euiBackgroundColor(euiThemeContext, 'danger')}; + `, + }), + [euiThemeContext] + ); }; export const euiBorderColor = ( From bae9859b0b699e40a1857dc3690600818ce55cff Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 25 Jan 2024 16:18:24 -0800 Subject: [PATCH 08/14] [misc] Clean up & performance improvements - reorder vars, remove `let` jsx nodes in favor of useMemo --- .../empty_prompt/empty_prompt.styles.ts | 2 +- src/components/empty_prompt/empty_prompt.tsx | 170 +++++++----------- 2 files changed, 69 insertions(+), 103 deletions(-) diff --git a/src/components/empty_prompt/empty_prompt.styles.ts b/src/components/empty_prompt/empty_prompt.styles.ts index afe039320f5..7ae1bdafef8 100644 --- a/src/components/empty_prompt/empty_prompt.styles.ts +++ b/src/components/empty_prompt/empty_prompt.styles.ts @@ -20,7 +20,7 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; const generatePaddingStyles = (property = 'padding') => ({ - none: css``, + none: null, s: css` ${property}: ${euiPaddingSize(euiThemeContext, 's')} `, diff --git a/src/components/empty_prompt/empty_prompt.tsx b/src/components/empty_prompt/empty_prompt.tsx index 8993aa2424c..fb919eecbf7 100644 --- a/src/components/empty_prompt/empty_prompt.tsx +++ b/src/components/empty_prompt/empty_prompt.tsx @@ -6,11 +6,16 @@ * Side Public License, v 1. */ -import React, { FunctionComponent, ReactElement, ReactNode } from 'react'; +import React, { + FunctionComponent, + ReactElement, + ReactNode, + useMemo, +} from 'react'; import classNames from 'classnames'; import { useEuiTheme } from '../../services'; -import { CommonProps, keysOf } from '../common'; +import { CommonProps } from '../common'; import { EuiTitle, EuiTitleSize } from '../title'; import { EuiFlexGroup, EuiFlexItem } from '../flex'; import { EuiSpacer } from '../spacer'; @@ -21,15 +26,7 @@ import { EuiPanel, _EuiPanelDivlike } from '../panel/panel'; import { euiEmptyPromptStyles } from './empty_prompt.styles'; -const paddingSizeToClassNameMap = { - none: null, - s: 'euiEmptyPrompt--paddingSmall', - m: 'euiEmptyPrompt--paddingMedium', - l: 'euiEmptyPrompt--paddingLarge', -}; - -export const PADDING_SIZES = keysOf(paddingSizeToClassNameMap); - +export const PADDING_SIZES = ['none', 's', 'm', 'l'] as const; export type PaddingSize = (typeof PADDING_SIZES)[number]; export type EuiEmptyPromptProps = CommonProps & @@ -99,51 +96,55 @@ export const EuiEmptyPrompt: FunctionComponent = ({ footer, ...rest }) => { + const classes = classNames('euiEmptyPrompt', className); const euiTheme = useEuiTheme(); - const styles = euiEmptyPromptStyles(euiTheme); + const styles = useMemo(() => euiEmptyPromptStyles(euiTheme), [euiTheme]); const cssStyles = [styles.euiEmptyPrompt, styles[layout]]; + const mainStyles = [ + styles.main.euiEmptyPrompt__main, + styles.main[layout], + styles.main[paddingSize], + layout === 'horizontal' && styles.main.horizontalPadding[paddingSize], + ]; + const contentStyles = [ + styles.content.euiEmptyPrompt__content, + styles.content[layout], + ]; - const isVerticalLayout = layout === 'vertical'; // Default the iconColor to `subdued`, // otherwise try to match the iconColor with the panel color unless iconColor is specified const iconColor = _iconColor ?? (isNamedColor(color) ? color : 'subdued'); + const iconNode = useMemo(() => { + if (!iconType && !icon) return null; + + const iconStyles = [styles.icon.euiEmptyPrompt__icon, styles.icon[layout]]; + return ( +
+ {iconType ? ( + + ) : ( + icon + )} +
+ ); + }, [icon, iconType, iconColor, layout, styles.icon]); - const iconNode = iconType ? ( - - ) : ( - icon - ); - - let titleNode; - let bodyNode; - if (body || title) { - if (title) { - titleNode = {title}; - } - - if (body) { - bodyNode = ( - <> - {title && } - {body} - - ); - } - } - - let actionsNode; - if (actions) { - let actionsRow; + const actionsNode = useMemo(() => { + if (!actions) return null; if (Array.isArray(actions)) { - actionsRow = ( + const actionStyles = [ + styles.actions.euiEmptyPrompt__actions, + styles.actions[layout], + ]; + return ( {actions.map((action, index) => ( @@ -153,31 +154,24 @@ export const EuiEmptyPrompt: FunctionComponent = ({ ); } else { - actionsRow = actions; + return actions; } - - actionsNode = ( - <> - - {actionsRow} - + }, [actions, layout, styles.actions]); + + const footerNode = useMemo(() => { + if (!footer) return null; + const footerStyles = [ + styles.footer.euiEmptyPrompt__footer, + styles.footer[paddingSize], + styles.footer[color], + color === 'transparent' && !hasBorder && styles.footer.roundedBorders, + ]; + return ( +
+ {footer} +
); - } - - const contentNodes = ( - <> - {titleNode} - {bodyNode} - {actionsNode} - - ); - - const classes = classNames( - 'euiEmptyPrompt', - [`euiEmptyPrompt--${layout}`], - paddingSizeToClassNameMap[paddingSize], - className - ); + }, [footer, paddingSize, color, hasBorder, styles.footer]); return ( = ({ hasBorder={hasBorder} {...rest} > -
- {iconNode && ( -
- {iconNode} -
- )} -
- {contentNodes} +
+ {iconNode} +
+ {title && {title}} + {title && body && } + {body && {body}} + {actionsNode && (body || title) && } + {actionsNode}
- {footer && ( -
- {footer} -
- )} + {footerNode} ); }; From ab7f117d5aa6d5fce0a0307a51f85277732a1fae Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 25 Jan 2024 16:19:36 -0800 Subject: [PATCH 09/14] Snapshot updates --- .../__snapshots__/empty_prompt.test.tsx.snap | 342 +++++++----------- .../page_empty_prompt.test.tsx.snap | 196 ++++------ 2 files changed, 188 insertions(+), 350 deletions(-) diff --git a/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap b/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap index 8682a97dbf0..b0316cdf1ab 100644 --- a/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap +++ b/src/components/empty_prompt/__snapshots__/empty_prompt.test.tsx.snap @@ -3,14 +3,14 @@ exports[`EuiEmptyPrompt is rendered 1`] = `
+

+ Title +

+
-

- Title -

-
-
-

- Body -

-
-
-
- Actions -
+

+ Body +

+
+
+
+ Actions
@@ -52,22 +48,15 @@ exports[`EuiEmptyPrompt is rendered 1`] = ` exports[`EuiEmptyPrompt props actions renders alone 1`] = `
-
-
- actions -
+ actions
@@ -75,33 +64,26 @@ exports[`EuiEmptyPrompt props actions renders alone 1`] = ` exports[`EuiEmptyPrompt props actions renders an array 1`] = `
+ class="euiFlexItem emotion-euiFlexItem-growZero" + > + action1 +
-
- action1 -
-
- action2 -
+ action2
@@ -111,22 +93,18 @@ exports[`EuiEmptyPrompt props actions renders an array 1`] = ` exports[`EuiEmptyPrompt props body renders alone 1`] = `
-
- body -
+ body
@@ -135,165 +113,129 @@ exports[`EuiEmptyPrompt props body renders alone 1`] = ` exports[`EuiEmptyPrompt props color accent is rendered 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props color danger is rendered 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props color plain is rendered 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props color primary is rendered 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props color subdued is rendered 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props color success is rendered 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props color transparent is rendered 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props color warning is rendered 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props footer renders alone 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
footer
@@ -302,38 +244,34 @@ exports[`EuiEmptyPrompt props footer renders alone 1`] = ` exports[`EuiEmptyPrompt props icon renders alone 1`] = `
Custom icon
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props iconType renders alone 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props iconType renders with iconColor 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props layout renders alone 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-horizontal" + />
`; exports[`EuiEmptyPrompt props paddingSize l is rendered 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props paddingSize m is rendered 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props paddingSize none is rendered 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props paddingSize s is rendered 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props styles are rendered 1`] = `
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
`; exports[`EuiEmptyPrompt props title renders alone 1`] = `
-
- title -
+ title
diff --git a/src/components/page_template/empty_prompt/__snapshots__/page_empty_prompt.test.tsx.snap b/src/components/page_template/empty_prompt/__snapshots__/page_empty_prompt.test.tsx.snap index 60e931b2974..e9932078add 100644 --- a/src/components/page_template/empty_prompt/__snapshots__/page_empty_prompt.test.tsx.snap +++ b/src/components/page_template/empty_prompt/__snapshots__/page_empty_prompt.test.tsx.snap @@ -8,13 +8,13 @@ exports[`_EuiPageEmptyPrompt EuiEmptyPromptProps is rendered 1`] = ` class="emotion-euiPageSection__content-l-center" >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-horizontal" + />
Footer
@@ -47,18 +43,14 @@ exports[`_EuiPageEmptyPrompt EuiPageSectionProps is rendered 1`] = ` class="emotion-euiPageSection__content-l-center" >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
@@ -74,19 +66,15 @@ exports[`_EuiPageEmptyPrompt is rendered 1`] = ` >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
@@ -101,18 +89,14 @@ exports[`_EuiPageEmptyPrompt paddingSize l is rendered 1`] = ` class="emotion-euiPageSection__content-l-center" >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
@@ -127,18 +111,14 @@ exports[`_EuiPageEmptyPrompt paddingSize m is rendered 1`] = ` class="emotion-euiPageSection__content-m-center" >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
@@ -153,18 +133,14 @@ exports[`_EuiPageEmptyPrompt paddingSize none is rendered 1`] = ` class="emotion-euiPageSection__content-center" >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
@@ -179,18 +155,14 @@ exports[`_EuiPageEmptyPrompt paddingSize s is rendered 1`] = ` class="emotion-euiPageSection__content-s-center" >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
@@ -205,18 +177,14 @@ exports[`_EuiPageEmptyPrompt paddingSize xl is rendered 1`] = ` class="emotion-euiPageSection__content-xl-center" >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
@@ -231,18 +199,14 @@ exports[`_EuiPageEmptyPrompt paddingSize xs is rendered 1`] = ` class="emotion-euiPageSection__content-xs-center" >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
@@ -257,18 +221,14 @@ exports[`_EuiPageEmptyPrompt panelled is false and color is defined, then the pr class="emotion-euiPageSection__content-l-center" >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
@@ -283,18 +243,14 @@ exports[`_EuiPageEmptyPrompt panelled is false and color is not defined, then th class="emotion-euiPageSection__content-l-center" >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
@@ -309,18 +265,14 @@ exports[`_EuiPageEmptyPrompt panelled is true and color is defined, then the pro class="emotion-euiPageSection__content-l-center" >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
@@ -335,18 +287,14 @@ exports[`_EuiPageEmptyPrompt panelled is true and color is not defined, then the class="emotion-euiPageSection__content-l-center" >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
@@ -362,18 +310,14 @@ exports[`_EuiPageEmptyPrompt restrict width can be set to a custom number 1`] = style="max-width: 1024px;" >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
@@ -389,18 +333,14 @@ exports[`_EuiPageEmptyPrompt restrict width can be set to a custom value and mea style="max-width: 24rem;" >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
@@ -416,18 +356,14 @@ exports[`_EuiPageEmptyPrompt restrict width can be set to a default 1`] = ` style="max-width: 1200px;" >
-
-
+ class="euiEmptyPrompt__content emotion-euiEmptyPrompt__content-vertical" + />
From 25377d4a14174d1def60e101f4ac298df4aca9dd Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 25 Jan 2024 16:20:01 -0800 Subject: [PATCH 10/14] Delete Sass --- src/components/empty_prompt/_empty_prompt.scss | 0 src/components/empty_prompt/_index.scss | 1 - src/components/index.scss | 1 - 3 files changed, 2 deletions(-) delete mode 100644 src/components/empty_prompt/_empty_prompt.scss delete mode 100644 src/components/empty_prompt/_index.scss diff --git a/src/components/empty_prompt/_empty_prompt.scss b/src/components/empty_prompt/_empty_prompt.scss deleted file mode 100644 index e69de29bb2d..00000000000 diff --git a/src/components/empty_prompt/_index.scss b/src/components/empty_prompt/_index.scss deleted file mode 100644 index 7b7dacf4a1d..00000000000 --- a/src/components/empty_prompt/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'empty_prompt'; diff --git a/src/components/index.scss b/src/components/index.scss index 0cba396fc05..89b68c2b2f9 100644 --- a/src/components/index.scss +++ b/src/components/index.scss @@ -4,7 +4,6 @@ @import 'combo_box/index'; @import 'date_picker/index'; @import 'datagrid/index'; -@import 'empty_prompt/index'; @import 'form/index'; @import 'markdown_editor/index'; @import 'tree_view/index'; From 85cd772882f96f0112fa4210f064bea2c94f310c Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 29 Jan 2024 15:04:26 -0800 Subject: [PATCH 11/14] changelog --- changelogs/upcoming/7494.md | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 changelogs/upcoming/7494.md diff --git a/changelogs/upcoming/7494.md b/changelogs/upcoming/7494.md new file mode 100644 index 00000000000..760e10f64f6 --- /dev/null +++ b/changelogs/upcoming/7494.md @@ -0,0 +1,4 @@ +**CSS-in-JS conversions** + +- Converted `EuiEmptyPrompt` to Emotion +- Added `euiBorderColor` and `useEuiBorderColorCSS` style utilities From 668f1b03f137cf063bdea3bd95427887aa3f3b01 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 29 Jan 2024 15:44:08 -0800 Subject: [PATCH 12/14] Unit test --- src/components/empty_prompt/empty_prompt.test.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/empty_prompt/empty_prompt.test.tsx b/src/components/empty_prompt/empty_prompt.test.tsx index e63ecf36f18..dd87ba4166e 100644 --- a/src/components/empty_prompt/empty_prompt.test.tsx +++ b/src/components/empty_prompt/empty_prompt.test.tsx @@ -8,11 +8,15 @@ import React from 'react'; import { requiredProps } from '../../test'; +import { shouldRenderCustomStyles } from '../../test/internal'; import { render } from '../../test/rtl'; -import { EuiEmptyPrompt, PADDING_SIZES } from './empty_prompt'; + import { COLORS } from '../panel/panel'; +import { EuiEmptyPrompt, PADDING_SIZES } from './empty_prompt'; describe('EuiEmptyPrompt', () => { + shouldRenderCustomStyles(); + test('is rendered', () => { const { container } = render( Date: Mon, 29 Jan 2024 16:54:31 -0800 Subject: [PATCH 13/14] Fix layout CSS regression with comment :| --- .../empty_prompt/empty_prompt.styles.ts | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/src/components/empty_prompt/empty_prompt.styles.ts b/src/components/empty_prompt/empty_prompt.styles.ts index 7ae1bdafef8..0a611e591f9 100644 --- a/src/components/empty_prompt/empty_prompt.styles.ts +++ b/src/components/empty_prompt/empty_prompt.styles.ts @@ -19,6 +19,8 @@ import { UseEuiTheme } from '../../services'; export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { const { euiTheme } = euiThemeContext; + const iconMaxWidth = mathWithUnits(euiTheme.size.l, (x) => x * 15); + const generatePaddingStyles = (property = 'padding') => ({ none: null, s: css` @@ -31,6 +33,7 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { ${property}: ${euiPaddingSize(euiThemeContext, 'l')} `, }); + const generateFooterBorder = (color: Parameters[1]) => `${euiTheme.border.width.thin} solid ${euiBorderColor( euiThemeContext, @@ -88,10 +91,7 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { }, icon: { euiEmptyPrompt__icon: css` - ${logicalCSS( - 'max-width', - mathWithUnits(euiTheme.size.l, (x) => x * 15) - )} + ${logicalCSS('max-width', iconMaxWidth)} margin: auto; /* Consumers should use an EuiImage (recommended) with the horizontal layout @@ -108,6 +108,15 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { ${euiBreakpoint(euiThemeContext, ['l', 'xl'])} { ${logicalCSS('min-width', '40%')} ${logicalCSS('max-width', '50%')} + + /* I'm not totally sure why setting a percentage max width on the wrapper and a static + max-width on the underlying image/icon makes sense, but this ports over the previous Sass + styles as-is to avoid UI changes/regressions 🤷 Also for some bizarre reason, & > * + isn't enough specificity to override .euiImageWrapper's CSS */ + & > *, + & > .euiImageWrapper { + ${logicalCSS('max-width', iconMaxWidth)} + } } `, }, From 68fb642f80bd5d1b9744248e86b55f65ce1fd45b Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 1 Feb 2024 09:21:02 -0800 Subject: [PATCH 14/14] [PR feedback/discussion] Make selectors more goodly --- src/components/empty_prompt/empty_prompt.styles.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/components/empty_prompt/empty_prompt.styles.ts b/src/components/empty_prompt/empty_prompt.styles.ts index 0a611e591f9..81a18d02ef9 100644 --- a/src/components/empty_prompt/empty_prompt.styles.ts +++ b/src/components/empty_prompt/empty_prompt.styles.ts @@ -111,10 +111,9 @@ export const euiEmptyPromptStyles = (euiThemeContext: UseEuiTheme) => { /* I'm not totally sure why setting a percentage max width on the wrapper and a static max-width on the underlying image/icon makes sense, but this ports over the previous Sass - styles as-is to avoid UI changes/regressions 🤷 Also for some bizarre reason, & > * - isn't enough specificity to override .euiImageWrapper's CSS */ - & > *, - & > .euiImageWrapper { + styles as-is to avoid UI changes/regressions 🤷 */ + /* Note: The extra && selector specificity is there to override euiImageWrapper's CSS */ + && > * { ${logicalCSS('max-width', iconMaxWidth)} } }