{
};
};
-export const euiExpressionValueStyles = ({}: UseEuiTheme) => {
- return {
- euiExpression__value: css``,
- truncate: css`
- ${euiTextTruncate()}
- display: inline-block;
- vertical-align: bottom;
- `,
- columns: css`
- flex-grow: 1;
- `,
- };
+export const euiExpressionValueStyles = {
+ euiExpression__value: css``,
+ truncate: css`
+ ${euiTextTruncate()}
+ display: inline-block;
+ vertical-align: bottom;
+ `,
+ columns: css`
+ flex-grow: 1;
+ `,
};
export const euiExpressionIconStyles = ({ euiTheme }: UseEuiTheme) => {
diff --git a/packages/eui/src/components/expression/expression.tsx b/packages/eui/src/components/expression/expression.tsx
index 91f3b952dac..63a184e4aba 100644
--- a/packages/eui/src/components/expression/expression.tsx
+++ b/packages/eui/src/components/expression/expression.tsx
@@ -14,14 +14,15 @@ import React, {
FunctionComponent,
} from 'react';
import classNames from 'classnames';
+
+import { useEuiMemoizedStyles } from '../../services';
import { CommonProps, ExclusiveUnion } from '../common';
import { EuiIcon } from '../icon';
-import { useEuiTheme } from '../../services';
import {
euiExpressionStyles,
euiExpressionDescriptionStyles,
- euiExpressionValueStyles,
+ euiExpressionValueStyles as valueStyles,
euiExpressionIconStyles,
} from './expression.styles';
@@ -112,8 +113,7 @@ export const EuiExpression: FunctionComponent<
}) => {
const calculatedColor = isInvalid ? 'danger' : color;
- const theme = useEuiTheme();
- const styles = euiExpressionStyles(theme);
+ const styles = useEuiMemoizedStyles(euiExpressionStyles);
const cssStyles = [
styles.euiExpression,
onClick && styles.isClickable,
@@ -123,7 +123,9 @@ export const EuiExpression: FunctionComponent<
display === 'columns' && styles.columns,
textWrap === 'truncate' && styles.truncate,
];
- const descriptionStyles = euiExpressionDescriptionStyles(theme);
+ const descriptionStyles = useEuiMemoizedStyles(
+ euiExpressionDescriptionStyles
+ );
const cssDescriptionStyles = [
descriptionStyles.euiExpression__description,
isInvalid ? descriptionStyles.danger : descriptionStyles[color],
@@ -131,14 +133,13 @@ export const EuiExpression: FunctionComponent<
textWrap === 'truncate' && descriptionStyles.truncate,
display === 'columns' && descriptionStyles.columns,
];
- const valueStyles = euiExpressionValueStyles(theme);
const cssValueStyles = [
valueStyles.euiExpression__value,
textWrap === 'truncate' && valueStyles.truncate,
display === 'columns' && valueStyles.columns,
];
- const iconStyles = euiExpressionIconStyles(theme);
+ const iconStyles = useEuiMemoizedStyles(euiExpressionIconStyles);
const cssIconStyles = [
iconStyles.euiExpression__icon,
display === 'columns' && iconStyles.columns,
@@ -153,15 +154,6 @@ export const EuiExpression: FunctionComponent<
? { flexBasis: descriptionWidth }
: undefined;
- const invalidIcon = isInvalid ? (
-
- ) : undefined;
-
return (
)}
- {invalidIcon}
+ {isInvalid && (
+
+ )}
);
};
diff --git a/packages/eui/src/components/facet/__snapshots__/facet_button.test.tsx.snap b/packages/eui/src/components/facet/__snapshots__/facet_button.test.tsx.snap
index 248b3527d61..91b88a09a8a 100644
--- a/packages/eui/src/components/facet/__snapshots__/facet_button.test.tsx.snap
+++ b/packages/eui/src/components/facet/__snapshots__/facet_button.test.tsx.snap
@@ -31,7 +31,7 @@ exports[`EuiFacetButton props icon is rendered 1`] = `
class="emotion-euiButtonDisplayContent"
>
@@ -66,7 +66,7 @@ exports[`EuiFacetButton props isDisabled is rendered 1`] = `
Content
6
@@ -92,7 +92,7 @@ exports[`EuiFacetButton props isLoading is rendered 1`] = `
@@ -134,7 +134,7 @@ exports[`EuiFacetButton props quantity is rendered 1`] = `
Content
60
diff --git a/packages/eui/src/components/facet/facet_button.styles.ts b/packages/eui/src/components/facet/facet_button.styles.ts
index b35e67dd78c..a3f2432b095 100644
--- a/packages/eui/src/components/facet/facet_button.styles.ts
+++ b/packages/eui/src/components/facet/facet_button.styles.ts
@@ -54,20 +54,7 @@ export const euiFacetButtonTextStyles = ({ euiTheme }: UseEuiTheme) => ({
unSelected: css``,
});
-export const euiFacetButtonIconStyles = () => ({
- euiFacetButton__icon: css``,
- isDisabled: css`
- opacity: 0.5;
- `,
-});
-
-export const euiFacetButtonLoadingSpinnerStyles = () => ({
- euiFacetButton__loadingSpinner: css``,
-});
-
-export const euiFacetButtonQuantityStyles = () => ({
- euiFacetButton__quantity: css``,
- isDisabled: css`
- opacity: 0.5;
- `,
-});
+// Used by both icon and quantity siblings
+export const euiFacetButton__disabled = css`
+ opacity: 0.5;
+`;
diff --git a/packages/eui/src/components/facet/facet_button.tsx b/packages/eui/src/components/facet/facet_button.tsx
index 5f6000659ae..2d058613345 100644
--- a/packages/eui/src/components/facet/facet_button.tsx
+++ b/packages/eui/src/components/facet/facet_button.tsx
@@ -11,7 +11,7 @@ import React, {
HTMLAttributes,
ReactNode,
RefCallback,
- ReactElement,
+ useMemo,
} from 'react';
import classNames from 'classnames';
@@ -20,13 +20,11 @@ import { EuiNotificationBadge } from '../badge';
import { EuiLoadingSpinner } from '../loading';
import { EuiInnerText } from '../inner_text';
-import { useEuiTheme, cloneElementWithCss } from '../../services';
+import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
import {
euiFacetButtonStyles,
euiFacetButtonTextStyles,
- euiFacetButtonIconStyles,
- euiFacetButtonQuantityStyles,
- euiFacetButtonLoadingSpinnerStyles,
+ euiFacetButton__disabled,
} from './facet_button.styles';
import {
EuiButtonDisplay,
@@ -79,63 +77,49 @@ export const EuiFacetButton: FunctionComponent
= ({
const classes = classNames('euiFacetButton', className);
- const theme = useEuiTheme();
-
- const styles = euiFacetButtonStyles(theme);
+ const styles = useEuiMemoizedStyles(euiFacetButtonStyles);
const cssStyles = [styles.euiFacetButton];
- const textStyles = euiFacetButtonTextStyles(theme);
+ const textStyles = useEuiMemoizedStyles(euiFacetButtonTextStyles);
const cssTextStyles = [
textStyles.euiFacetButton__text,
textStyles[selection],
];
- const quantityStyles = euiFacetButtonQuantityStyles();
- const cssQuantityStyles = [
- quantityStyles.euiFacetButton__quantity,
- isDisabled && quantityStyles.isDisabled,
- ];
-
- const iconStyles = euiFacetButtonIconStyles();
- const cssIconStyles = [
- iconStyles.euiFacetButton__icon,
- isDisabled && quantityStyles.isDisabled,
- ];
-
- const loadingSpinnerStyles = euiFacetButtonLoadingSpinnerStyles();
- const cssLoadingSpinnerStyles = [
- loadingSpinnerStyles.euiFacetButton__loadingSpinner,
- ];
+ // Spreading an obj/conditionally passing the `css` prop makes it so
+ // an empty `css-0` className isn't rendered in the DOM
+ const disabledStyles = useMemo(
+ () => (isDisabled ? { css: euiFacetButton__disabled } : undefined),
+ [isDisabled]
+ );
// Add quantity number if provided or loading indicator
- let buttonQuantity: ReactElement;
-
- if (isLoading) {
- buttonQuantity = (
-
- );
- } else if (typeof quantity === 'number') {
- buttonQuantity = (
-
- {quantity}
-
- );
- }
+ const buttonQuantity = useMemo(() => {
+ if (isLoading) {
+ return ;
+ } else if (typeof quantity === 'number') {
+ return (
+
+ {quantity}
+
+ );
+ }
+ }, [quantity, isLoading, isDisabled, disabledStyles, isSelected]);
// Add an icon to the button if one exists.
- let buttonIcon: ReactElement;
-
- if (React.isValidElement<{ className?: string }>(icon)) {
- buttonIcon = cloneElementWithCss(icon, {
- css: cssIconStyles,
- className: 'euiFacetButton__icon',
- });
- }
+ const buttonIcon = useMemo(() => {
+ if (React.isValidElement(icon)) {
+ return cloneElementWithCss(icon, {
+ className: 'euiFacetButton__icon',
+ ...disabledStyles,
+ });
+ }
+ }, [icon, disabledStyles]);
return (
diff --git a/packages/eui/src/components/facet/facet_group.styles.ts b/packages/eui/src/components/facet/facet_group.styles.ts
index 3ec589c56ef..0fd07bed4f0 100644
--- a/packages/eui/src/components/facet/facet_group.styles.ts
+++ b/packages/eui/src/components/facet/facet_group.styles.ts
@@ -7,66 +7,56 @@
*/
import { css } from '@emotion/react';
-import { UseEuiTheme, useEuiTheme } from '../../services';
-import { EuiFacetGroupLayout } from './facet_group';
+import { UseEuiTheme } from '../../services';
+import { mathWithUnits } from '../../global_styling';
-const _facetGroupGutterSize = ({
- gutterSize,
- layout,
-}: {
- gutterSize: string;
- layout: EuiFacetGroupLayout;
-}) => {
- const { euiTheme } = useEuiTheme();
- const isHorizontalLayout = layout === 'horizontal';
- const gutterHorizontal = `calc(${euiTheme.size.m} + ${gutterSize})`;
- const gutterVertical = gutterSize;
+import type { EuiFacetGroupGutterSizes } from './facet_group';
- return isHorizontalLayout
- ? `gap: ${gutterVertical} ${gutterHorizontal};`
- : `gap: ${gutterVertical} 0;`;
-};
+export const euiFacetGroupStyles = ({ euiTheme }: UseEuiTheme) => {
+ const gutterSizesMap = {
+ none: 0,
+ s: euiTheme.size.xs,
+ m: euiTheme.size.s,
+ l: euiTheme.size.m,
+ };
+ const _getVerticalGutters = (sizeKey: EuiFacetGroupGutterSizes) => {
+ const size = gutterSizesMap[sizeKey];
+ return `gap: ${size} 0;`;
+ };
+ const _getHorizontalGutters = (sizeKey: EuiFacetGroupGutterSizes) => {
+ const size = gutterSizesMap[sizeKey];
+ return `
+ gap: ${size} ${mathWithUnits([size, euiTheme.size.m], (x, y) => x + y)};
+ `;
+ };
-export const euiFacetGroupStyles = (
- { euiTheme }: UseEuiTheme,
- layout: EuiFacetGroupLayout
-) => ({
- // Base
- euiFacetGroup: css`
- display: flex;
- flex-grow: 1;
- `,
- // Gutter sizes
- none: css(
- _facetGroupGutterSize({
- gutterSize: '0',
- layout,
- })
- ),
- s: css(
- _facetGroupGutterSize({
- gutterSize: euiTheme.size.xs,
- layout,
- })
- ),
- m: css(
- _facetGroupGutterSize({
- gutterSize: euiTheme.size.s,
- layout,
- })
- ),
- l: css(
- _facetGroupGutterSize({
- gutterSize: euiTheme.size.m,
- layout,
- })
- ),
- // layouts
- horizontal: css`
- flex-direction: row;
- flex-wrap: wrap;
- `,
- vertical: css`
- flex-direction: column;
- `,
-});
+ return {
+ // Base
+ euiFacetGroup: css`
+ display: flex;
+ flex-grow: 1;
+ `,
+ // layouts
+ horizontal: css`
+ flex-direction: row;
+ flex-wrap: wrap;
+ `,
+ vertical: css`
+ flex-direction: column;
+ `,
+ gutterSizes: {
+ vertical: {
+ none: css(_getVerticalGutters('none')),
+ s: css(_getVerticalGutters('s')),
+ m: css(_getVerticalGutters('m')),
+ l: css(_getVerticalGutters('l')),
+ },
+ horizontal: {
+ none: css(_getHorizontalGutters('none')),
+ s: css(_getHorizontalGutters('s')),
+ m: css(_getHorizontalGutters('m')),
+ l: css(_getHorizontalGutters('l')),
+ },
+ },
+ };
+};
diff --git a/packages/eui/src/components/facet/facet_group.tsx b/packages/eui/src/components/facet/facet_group.tsx
index 5fc33057574..b921310b929 100644
--- a/packages/eui/src/components/facet/facet_group.tsx
+++ b/packages/eui/src/components/facet/facet_group.tsx
@@ -11,7 +11,7 @@ import classNames from 'classnames';
import { CommonProps } from '../common';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
import { euiFacetGroupStyles } from './facet_group.styles';
export const LAYOUTS = ['vertical', 'horizontal'] as const;
@@ -40,9 +40,12 @@ export const EuiFacetGroup: FunctionComponent = ({
gutterSize = 'm',
...rest
}) => {
- const theme = useEuiTheme();
- const styles = euiFacetGroupStyles(theme, layout);
- const cssStyles = [styles.euiFacetGroup, styles[gutterSize], styles[layout]];
+ const styles = useEuiMemoizedStyles(euiFacetGroupStyles);
+ const cssStyles = [
+ styles.euiFacetGroup,
+ styles.gutterSizes[layout][gutterSize],
+ styles[layout],
+ ];
const classes = classNames('euiFacetGroup', className);
diff --git a/packages/eui/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap b/packages/eui/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
index 49e6de6c254..fb5d70d5db0 100644
--- a/packages/eui/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
+++ b/packages/eui/src/components/filter_group/__snapshots__/filter_button.test.tsx.snap
@@ -110,7 +110,7 @@ exports[`EuiFilterButton props numActiveFilters and hasActiveFilters renders 1`]
/>
5
@@ -132,7 +132,7 @@ exports[`EuiFilterButton props numFilters renders 1`] = `
/>
5
@@ -203,7 +203,7 @@ exports[`EuiFilterButton renders zero properly 1`] = `
/>
0
diff --git a/packages/eui/src/components/filter_group/filter_button.tsx b/packages/eui/src/components/filter_group/filter_button.tsx
index 247e44e615b..db3e8b2f847 100644
--- a/packages/eui/src/components/filter_group/filter_button.tsx
+++ b/packages/eui/src/components/filter_group/filter_button.tsx
@@ -9,7 +9,7 @@
import React, { FunctionComponent } from 'react';
import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
import { useEuiI18n } from '../i18n';
import { useInnerText } from '../inner_text';
import { DistributiveOmit } from '../common';
@@ -78,8 +78,7 @@ export const EuiFilterButton: FunctionComponent = ({
const numActiveFiltersDefined =
numActiveFilters != null && numActiveFilters > 0;
- const euiTheme = useEuiTheme();
- const styles = euiFilterButtonStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiFilterButtonStyles);
const cssStyles = [
styles.euiFilterButton,
withNext && styles.withNext,
@@ -91,7 +90,7 @@ export const EuiFilterButton: FunctionComponent = ({
content: contentStyles,
text: textStyles,
notification: notificationStyles,
- } = euiFilterButtonChildStyles(euiTheme);
+ } = useEuiMemoizedStyles(euiFilterButtonChildStyles);
const classes = classNames(
'euiFilterButton',
@@ -118,21 +117,10 @@ export const EuiFilterButton: FunctionComponent = ({
'{count} available filters',
{ count: badgeCount }
);
-
- const badgeContent = showBadge && (
-
- {badgeCount}
-
- );
+ const badgeStyles = [
+ notificationStyles.euiFilterButton__notification,
+ isDisabled && notificationStyles.disabled,
+ ];
/**
* Text
@@ -152,19 +140,6 @@ export const EuiFilterButton: FunctionComponent = ({
const dataText =
children && typeof children === 'string' ? children : innerText;
- const textContent = (
-
- {children}
-
- );
-
return (
= ({
}}
{...rest}
>
- {textContent}
- {badgeContent}
+
+ {children}
+
+
+ {showBadge && (
+
+ {badgeCount}
+
+ )}
);
};
diff --git a/packages/eui/src/components/filter_group/filter_group.tsx b/packages/eui/src/components/filter_group/filter_group.tsx
index a7e2678d4ff..b3adf9485a2 100644
--- a/packages/eui/src/components/filter_group/filter_group.tsx
+++ b/packages/eui/src/components/filter_group/filter_group.tsx
@@ -9,7 +9,7 @@
import React, { HTMLAttributes, ReactNode, FunctionComponent } from 'react';
import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
import { CommonProps } from '../common';
import { euiFilterGroupStyles } from './filter_group.styles';
@@ -34,8 +34,7 @@ export const EuiFilterGroup: FunctionComponent = ({
compressed,
...rest
}) => {
- const euiTheme = useEuiTheme();
- const styles = euiFilterGroupStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiFilterGroupStyles);
const cssStyles = [
styles.euiFilterGroup,
fullWidth && styles.fullWidth,
diff --git a/packages/eui/src/components/form/range/range_highlight.tsx b/packages/eui/src/components/form/range/range_highlight.tsx
index 620397b1b48..bebd6c4912a 100644
--- a/packages/eui/src/components/form/range/range_highlight.tsx
+++ b/packages/eui/src/components/form/range/range_highlight.tsx
@@ -9,7 +9,7 @@
import React, { FunctionComponent, useMemo } from 'react';
import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
import { logicalStyles } from '../../../global_styling';
import type { EuiRangeProps } from './types';
@@ -54,12 +54,10 @@ export const EuiRangeHighlight: FunctionComponent = ({
const classes = classNames('euiRangeHighlight', className);
- const euiTheme = useEuiTheme();
-
- const styles = euiRangeHighlightStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiRangeHighlightStyles);
const cssStyles = [styles.euiRangeHighlight, showTicks && styles.hasTicks];
- const progressStyles = euiRangeHighlightProgressStyles(euiTheme);
+ const progressStyles = useEuiMemoizedStyles(euiRangeHighlightProgressStyles);
const cssProgressStyles = [progressStyles.euiRangeHighlight__progress];
const progressStyle = useMemo(() => {
return logicalStyles({
@@ -69,7 +67,9 @@ export const EuiRangeHighlight: FunctionComponent = ({
});
}, [background, leftPosition, rangeWidth]);
- const levelsWrapperStyles = euiRangeHighlightLevelsWrapperStyles(euiTheme);
+ const levelsWrapperStyles = useEuiMemoizedStyles(
+ euiRangeHighlightLevelsWrapperStyles
+ );
const cssLevelsWrapperStyles = [
levelsWrapperStyles.euiRangeHighlight__levelsWrapper,
];
@@ -80,7 +80,7 @@ export const EuiRangeHighlight: FunctionComponent = ({
});
}, [leftPosition, rangeWidth]);
- const levelsStyles = euiRangeHighlightLevelsStyles(euiTheme);
+ const levelsStyles = useEuiMemoizedStyles(euiRangeHighlightLevelsStyles);
const cssLevelsStyles = [levelsStyles.euiRangeHighlight__levels];
const levelsStyle = useMemo(() => {
return logicalStyles({
diff --git a/packages/eui/src/components/form/range/range_input.tsx b/packages/eui/src/components/form/range/range_input.tsx
index e0bed7c5495..2c12010daae 100644
--- a/packages/eui/src/components/form/range/range_input.tsx
+++ b/packages/eui/src/components/form/range/range_input.tsx
@@ -14,7 +14,11 @@ import React, {
useRef,
} from 'react';
-import { useEuiTheme, useCombinedRefs } from '../../../services';
+import {
+ useEuiTheme,
+ useEuiMemoizedStyles,
+ useCombinedRefs,
+} from '../../../services';
import { logicalStyles } from '../../../global_styling';
import { euiFormVariables } from '../form.styles';
import { EuiFieldNumber, EuiFieldNumberProps } from '../field_number';
@@ -46,7 +50,7 @@ export const EuiRangeInput: FunctionComponent = ({
...rest
}) => {
const euiTheme = useEuiTheme();
- const styles = euiRangeInputStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiRangeInputStyles);
const cssStyles = [styles.euiRangeInput];
// Determine whether an invalid icon is showing, which can come from
diff --git a/packages/eui/src/components/form/range/range_label.tsx b/packages/eui/src/components/form/range/range_label.tsx
index 2994891d1e6..5f9238c0a91 100644
--- a/packages/eui/src/components/form/range/range_label.tsx
+++ b/packages/eui/src/components/form/range/range_label.tsx
@@ -8,7 +8,7 @@
import React, { FunctionComponent } from 'react';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
import type { _SharedRangeInputProps, _SharedRangeInputSide } from './types';
import { euiRangeLabelStyles } from './range_label.styles';
@@ -26,8 +26,7 @@ export const EuiRangeLabel: FunctionComponent = ({
disabled,
side = 'max',
}) => {
- const euiTheme = useEuiTheme();
- const styles = euiRangeLabelStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiRangeLabelStyles);
const cssStyles = [
styles.euiRangeLabel,
styles[side],
diff --git a/packages/eui/src/components/form/range/range_levels.tsx b/packages/eui/src/components/form/range/range_levels.tsx
index 97e9a48d9f6..afdb363ec7b 100644
--- a/packages/eui/src/components/form/range/range_levels.tsx
+++ b/packages/eui/src/components/form/range/range_levels.tsx
@@ -14,7 +14,7 @@ import React, {
} from 'react';
import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
import { logicalStyles } from '../../../global_styling';
import type { EuiRangeLevel, EuiRangeProps } from './types';
@@ -44,8 +44,7 @@ export const EuiRangeLevels: FunctionComponent = ({
trackWidth,
...rest
}) => {
- const euiTheme = useEuiTheme();
- const styles = euiRangeLevelsStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiRangeLevelsStyles);
const cssStyles = [
styles.euiRangeLevels,
showTicks && styles.hasTicks,
@@ -115,8 +114,7 @@ const EuiRangeLevelElement: FunctionComponent<{
const levelClasses = classNames('euiRangeLevel', className);
- const euiTheme = useEuiTheme();
- const levelStyles = euiRangeLevelStyles(euiTheme);
+ const levelStyles = useEuiMemoizedStyles(euiRangeLevelStyles);
const cssLevelStyles = [
levelStyles.euiRangeLevel,
isNamedColor
diff --git a/packages/eui/src/components/form/range/range_slider.tsx b/packages/eui/src/components/form/range/range_slider.tsx
index b05033a167d..6c06925e877 100644
--- a/packages/eui/src/components/form/range/range_slider.tsx
+++ b/packages/eui/src/components/form/range/range_slider.tsx
@@ -15,7 +15,7 @@ import React, {
import classNames from 'classnames';
import { CommonProps } from '../../common';
-import { useEuiTheme } from '../../../services';
+import { useEuiTheme, useEuiMemoizedStyles } from '../../../services';
import { logicalStyles } from '../../../global_styling';
import {
EuiResizeObserver,
@@ -75,9 +75,9 @@ export const EuiRangeSlider: FunctionComponent = ({
}) => {
const classes = classNames('euiRangeSlider', className);
- const euiTheme = useEuiTheme();
- const styles = euiRangeSliderStyles(euiTheme);
- const thumbStyles = euiRangeSliderThumbStyles(euiTheme);
+ const { euiTheme } = useEuiTheme();
+ const styles = useEuiMemoizedStyles(euiRangeSliderStyles);
+ const thumbStyles = useEuiMemoizedStyles(euiRangeSliderThumbStyles);
const cssStyles = [
styles.euiRangeSlider,
showTicks && styles.hasTicks,
@@ -87,7 +87,7 @@ export const EuiRangeSlider: FunctionComponent = ({
const sliderStyle = useMemo(() => {
return logicalStyles({
- color: thumbColor && euiRangeLevelColor(thumbColor, euiTheme.euiTheme),
+ color: thumbColor && euiRangeLevelColor(thumbColor, euiTheme),
...style,
});
}, [thumbColor, euiTheme, style]);
diff --git a/packages/eui/src/components/form/range/range_thumb.tsx b/packages/eui/src/components/form/range/range_thumb.tsx
index b6c4bfe625f..b2882369df9 100644
--- a/packages/eui/src/components/form/range/range_thumb.tsx
+++ b/packages/eui/src/components/form/range/range_thumb.tsx
@@ -9,7 +9,7 @@
import React, { FunctionComponent, HTMLAttributes } from 'react';
import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
import { CommonProps, ExclusiveUnion } from '../../common';
import type { EuiRangeProps } from './types';
@@ -44,8 +44,7 @@ export const EuiRangeThumb: FunctionComponent = ({
}) => {
const classes = classNames('euiRangeThumb', className);
- const euiTheme = useEuiTheme();
- const styles = euiRangeThumbStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiRangeThumbStyles);
const cssStyles = [styles.euiRangeThumb, showTicks && styles.hasTicks];
const commonAttrs = {
diff --git a/packages/eui/src/components/form/range/range_ticks.tsx b/packages/eui/src/components/form/range/range_ticks.tsx
index fb7ebdbb461..7d933da961e 100644
--- a/packages/eui/src/components/form/range/range_ticks.tsx
+++ b/packages/eui/src/components/form/range/range_ticks.tsx
@@ -14,7 +14,7 @@ import React, {
useMemo,
} from 'react';
-import { useEuiTheme } from '../../../services';
+import { useEuiTheme, useEuiMemoizedStyles } from '../../../services';
import { logicalStyles } from '../../../global_styling';
import { useInnerText } from '../../inner_text';
@@ -54,8 +54,6 @@ const EuiTickValue: FunctionComponent<
compressed,
trackWidth,
}) => {
- const euiTheme = useEuiTheme();
-
const hasCustomTicks = !!ticks;
const tickObject = useMemo(() => {
@@ -107,19 +105,20 @@ const EuiTickValue: FunctionComponent<
]);
// Some ticks need an actual DOM element instead of using a ::before
+ const { euiTheme } = useEuiTheme();
const pseudoTick = tickObject && !!labelShiftVal && (isMinTick || isMaxTick);
const pseudoShift = useMemo(() => {
if (!labelShiftVal) return {};
const marginProperty = isMaxTick ? 'marginRight' : 'marginLeft';
- const tickOffset = euiTheme.euiTheme.size.xs; // xs derived from .euiRangeTicks left/right offset
+ const tickOffset = euiTheme.size.xs; // xs derived from .euiRangeTicks left/right offset
return logicalStyles({
[marginProperty]: `calc(${labelShiftVal}em + ${tickOffset})`,
});
- }, [labelShiftVal, isMaxTick, euiTheme.euiTheme.size.xs]);
+ }, [labelShiftVal, isMaxTick, euiTheme.size.xs]);
- const styles = euiRangeTickStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiRangeTickStyles);
const cssTickStyles = [
styles.euiRangeTick,
value === String(tickValue) && styles.selected,
diff --git a/packages/eui/src/components/form/range/range_tooltip.tsx b/packages/eui/src/components/form/range/range_tooltip.tsx
index e7a9a6c58c3..5e8743bbe37 100644
--- a/packages/eui/src/components/form/range/range_tooltip.tsx
+++ b/packages/eui/src/components/form/range/range_tooltip.tsx
@@ -8,7 +8,7 @@
import React, { FunctionComponent, useMemo } from 'react';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
import { logicalStyles } from '../../../global_styling';
import type { EuiRangeProps } from './types';
@@ -61,11 +61,10 @@ export const EuiRangeTooltip: FunctionComponent = ({
}
}, [valuePosition, valuePositionSide]);
- const euiTheme = useEuiTheme();
- const styles = euiRangeTooltipStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiRangeTooltipStyles);
const cssStyles = [styles.euiRangeTooltip];
- const valueStyles = euiRangeTooltipValueStyles(euiTheme);
+ const valueStyles = useEuiMemoizedStyles(euiRangeTooltipValueStyles);
const cssValueStyles = [
valueStyles.euiRangeTooltip__value,
valueStyles[valuePositionSide],
diff --git a/packages/eui/src/components/form/range/range_track.tsx b/packages/eui/src/components/form/range/range_track.tsx
index 5a9968d04af..e8f4d2e546f 100644
--- a/packages/eui/src/components/form/range/range_track.tsx
+++ b/packages/eui/src/components/form/range/range_track.tsx
@@ -17,7 +17,7 @@ import classNames from 'classnames';
import range from 'lodash/range';
-import { useEuiTheme, isEvenlyDivisibleBy } from '../../../services';
+import { useEuiMemoizedStyles, isEvenlyDivisibleBy } from '../../../services';
import { EuiRangeLevels } from './range_levels';
import { EuiRangeTicks } from './range_ticks';
@@ -98,8 +98,7 @@ export const EuiRangeTrack: FunctionComponent = ({
return sequence;
}, [showTicks, ticks, min, max, tickInterval, step, trackWidth]);
- const euiTheme = useEuiTheme();
- const styles = euiRangeTrackStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiRangeTrackStyles);
const cssStyles = [
styles.euiRangeTrack,
disabled && styles.disabled,
diff --git a/packages/eui/src/components/form/range/range_wrapper.tsx b/packages/eui/src/components/form/range/range_wrapper.tsx
index 1ea52f76a39..d4c075d780a 100644
--- a/packages/eui/src/components/form/range/range_wrapper.tsx
+++ b/packages/eui/src/components/form/range/range_wrapper.tsx
@@ -9,7 +9,7 @@
import React, { HTMLAttributes, forwardRef } from 'react';
import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
import { CommonProps } from '../../common';
import { useFormContext } from '../eui_form_context';
@@ -34,8 +34,7 @@ export const EuiRangeWrapper = forwardRef(
const classes = classNames('euiRangeWrapper', className);
- const euiTheme = useEuiTheme();
- const styles = euiRangeWrapperStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiRangeWrapperStyles);
const cssStyles = [
styles.euiRangeWrapper,
compressed ? styles.compressed : styles.uncompressed,
diff --git a/packages/eui/src/components/header/header.tsx b/packages/eui/src/components/header/header.tsx
index 985fb2bc294..2cee21c1266 100644
--- a/packages/eui/src/components/header/header.tsx
+++ b/packages/eui/src/components/header/header.tsx
@@ -16,7 +16,7 @@ import React, {
} from 'react';
import classNames from 'classnames';
-import { useEuiTheme, useEuiThemeCSSVariables } from '../../services';
+import { useEuiMemoizedStyles, useEuiThemeCSSVariables } from '../../services';
import { mathWithUnits, logicalStyles } from '../../global_styling';
import { CommonProps } from '../common';
import { EuiBreadcrumb, EuiBreadcrumbsProps } from '../breadcrumbs';
@@ -84,46 +84,45 @@ export const EuiHeader: FunctionComponent = ({
}) => {
const classes = classNames('euiHeader', className);
- const euiTheme = useEuiTheme();
- const styles = euiHeaderStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiHeaderStyles);
const cssStyles = [styles.euiHeader, styles[position], styles[theme]];
- let contents;
- if (sections) {
- if (children) {
- // In case both children and sections are passed, warn in the console that the children will be disregarded
- console.warn(
- 'EuiHeader cannot accept both `children` and `sections`. It will disregard the `children`.'
- );
- }
-
- contents = sections.map((section, index) => {
- const content = [];
- if (section.items) {
- // Items get wrapped in EuiHeaderSection and each item in a EuiHeaderSectionItem
- content.push(
-
- {createHeaderSection(section.items)}
-
- );
- }
- if (section.breadcrumbs) {
- content.push(
- // Breadcrumbs are separate and cannot be contained in a EuiHeaderSection
- // in order for truncation to work
-
- );
- }
- return content;
- });
- } else {
- contents = children;
+ if (sections && children) {
+ // In case both children and sections are passed, warn in the console that the children will be disregarded
+ console.warn(
+ 'EuiHeader cannot accept both `children` and `sections`. It will disregard the `children`.'
+ );
}
+ const contents =
+ useMemo(() => {
+ if (!sections || !sections.length) return null;
+
+ return sections.map((section, index) => {
+ const content = [];
+ if (section.items) {
+ // Items get wrapped in EuiHeaderSection and each item in a EuiHeaderSectionItem
+ content.push(
+
+ {createHeaderSection(section.items)}
+
+ );
+ }
+ if (section.breadcrumbs) {
+ content.push(
+ // Breadcrumbs are separate and cannot be contained in a EuiHeaderSection
+ // in order for truncation to work
+
+ );
+ }
+ return content;
+ });
+ }, [sections]) || children;
+
return position === 'fixed' ? (
{contents}
@@ -151,8 +150,7 @@ export const EuiFixedHeader: FunctionComponent = ({
...rest
}) => {
const { setGlobalCSSVariables } = useEuiThemeCSSVariables();
- const euiTheme = useEuiTheme();
- const headerHeight = euiHeaderVariables(euiTheme).height;
+ const headerHeight = useEuiMemoizedStyles(euiHeaderVariables).height;
const getHeaderOffset = useCallback(
() => mathWithUnits(headerHeight, (x) => x * euiFixedHeadersCount),
[headerHeight]
diff --git a/packages/eui/src/components/header/header_alert/header_alert.tsx b/packages/eui/src/components/header/header_alert/header_alert.tsx
index 2c7c15f6790..c237eb27f1e 100644
--- a/packages/eui/src/components/header/header_alert/header_alert.tsx
+++ b/packages/eui/src/components/header/header_alert/header_alert.tsx
@@ -12,7 +12,7 @@ import classNames from 'classnames';
import { CommonProps } from '../../common';
import { EuiFlexGroup, EuiFlexItem } from '../../flex';
-import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../../services';
import { euiHeaderAlertStyles } from './header_alert.styles';
@@ -40,8 +40,7 @@ export const EuiHeaderAlert: FunctionComponent = ({
badge,
...rest
}) => {
- const euiTheme = useEuiTheme();
- const styles = euiHeaderAlertStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiHeaderAlertStyles);
const classes = classNames('euiHeaderAlert', className);
diff --git a/packages/eui/src/components/header/header_links/header_links.tsx b/packages/eui/src/components/header/header_links/header_links.tsx
index 50e38323da2..197638c4f32 100644
--- a/packages/eui/src/components/header/header_links/header_links.tsx
+++ b/packages/eui/src/components/header/header_links/header_links.tsx
@@ -17,7 +17,7 @@ import React, {
} from 'react';
import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
import { CommonProps } from '../../common';
import { EuiIcon, IconType } from '../../icon';
import { EuiPopover, EuiPopoverProps } from '../../popover';
@@ -76,8 +76,7 @@ export const EuiHeaderLinks: FunctionComponent = ({
popoverProps,
...rest
}) => {
- const euiTheme = useEuiTheme();
- const styles = euiHeaderLinksStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiHeaderLinksStyles);
const {
onClick,
@@ -110,20 +109,6 @@ export const EuiHeaderLinks: FunctionComponent = ({
const classes = classNames('euiHeaderLinks', className);
- const button = (
-
- {(openNavigationMenu: string) => (
-
-
-
- )}
-
- );
-
const renderedChildren =
typeof children === 'function' ? children(closeMenu) : children;
@@ -150,7 +135,22 @@ export const EuiHeaderLinks: FunctionComponent = ({
+ {(openNavigationMenu: string) => (
+
+
+
+ )}
+
+ }
isOpen={mobileMenuIsOpen}
anchorPosition="downRight"
closePopover={closeMenu}
diff --git a/packages/eui/src/components/header/header_logo/header_logo.tsx b/packages/eui/src/components/header/header_logo/header_logo.tsx
index 5ae0ee81af9..bf450e06f09 100644
--- a/packages/eui/src/components/header/header_logo/header_logo.tsx
+++ b/packages/eui/src/components/header/header_logo/header_logo.tsx
@@ -13,7 +13,7 @@ import React, {
} from 'react';
import classNames from 'classnames';
-import { useEuiTheme, getSecureRelForTarget } from '../../../services';
+import { useEuiMemoizedStyles, getSecureRelForTarget } from '../../../services';
import { validateHref } from '../../../services/security/href_validator';
import { EuiIcon, IconType } from '../../icon';
import { CommonProps } from '../../common';
@@ -44,8 +44,7 @@ export const EuiHeaderLogo: FunctionComponent = ({
...rest
}) => {
const classes = classNames('euiHeaderLogo', className);
- const euiTheme = useEuiTheme();
- const styles = euiHeaderLogoStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiHeaderLogoStyles);
const secureRel = getSecureRelForTarget({ href, rel, target });
const isHrefValid = !href || validateHref(href);
diff --git a/packages/eui/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap b/packages/eui/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap
index 22466103cf0..4ce064e4728 100644
--- a/packages/eui/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap
+++ b/packages/eui/src/components/header/header_section/__snapshots__/header_section_item_button.test.tsx.snap
@@ -79,7 +79,7 @@ exports[`EuiHeaderSectionItemButton renders notification as a badge 1`] = `
class="euiHeaderSectionItemButton__content emotion-euiHeaderSectionItemButton__content"
/>
@@ -103,7 +103,7 @@ exports[`EuiHeaderSectionItemButton renders notification as a dot 1`] = `
class="euiHeaderSectionItemButton__content emotion-euiHeaderSectionItemButton__content"
/>
@@ -127,7 +127,7 @@ exports[`EuiHeaderSectionItemButton renders notification color 1`] = `
class="euiHeaderSectionItemButton__content emotion-euiHeaderSectionItemButton__content"
/>
diff --git a/packages/eui/src/components/header/header_section/header_section_item.tsx b/packages/eui/src/components/header/header_section/header_section_item.tsx
index 3302251fd66..157ae4f21a8 100644
--- a/packages/eui/src/components/header/header_section/header_section_item.tsx
+++ b/packages/eui/src/components/header/header_section/header_section_item.tsx
@@ -9,7 +9,7 @@
import React, { FunctionComponent, ReactNode } from 'react';
import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
import { CommonProps } from '../../common';
import { euiHeaderSectionItemStyles } from './header_section_item.styles';
@@ -27,8 +27,7 @@ export type EuiHeaderSectionItemProps = CommonProps & {
export const EuiHeaderSectionItem: FunctionComponent<
EuiHeaderSectionItemProps
> = ({ children, className, ...rest }) => {
- const euiTheme = useEuiTheme();
- const styles = euiHeaderSectionItemStyles(euiTheme);
+ const styles = useEuiMemoizedStyles(euiHeaderSectionItemStyles);
const classes = classNames('euiHeaderSectionItem', className);
diff --git a/packages/eui/src/components/header/header_section/header_section_item_button.tsx b/packages/eui/src/components/header/header_section/header_section_item_button.tsx
index b4fe084f25c..7611be791f3 100644
--- a/packages/eui/src/components/header/header_section/header_section_item_button.tsx
+++ b/packages/eui/src/components/header/header_section/header_section_item_button.tsx
@@ -10,18 +10,21 @@ import React, {
PropsWithChildren,
forwardRef,
useImperativeHandle,
+ useMemo,
useRef,
} from 'react';
import classNames from 'classnames';
-import { useEuiTheme } from '../../../services';
+import {
+ useEuiMemoizedStyles,
+ useIsWithinMaxBreakpoint,
+} from '../../../services';
import {
EuiNotificationBadgeProps,
EuiNotificationBadge,
} from '../../badge/notification_badge/badge_notification';
import { EuiIcon } from '../../icon';
import { EuiButtonEmpty, EuiButtonEmptyProps } from '../../button';
-import { EuiHideFor, EuiShowFor } from '../../responsive';
import { euiHeaderSectionItemButtonStyles } from './header_section_item_button.styles';
@@ -190,46 +193,41 @@ export const EuiHeaderSectionItemButton = forwardRef<
[]
);
- const euiTheme = useEuiTheme();
- const styles = euiHeaderSectionItemButtonStyles(euiTheme);
-
+ const styles = useEuiMemoizedStyles(euiHeaderSectionItemButtonStyles);
const classes = classNames('euiHeaderSectionItemButton', className);
- const notificationDot = (
-
- );
+ const isSmallScreen = useIsWithinMaxBreakpoint('s');
+ const shouldShowDot =
+ notification === true || !!(notification && isSmallScreen);
+
+ const buttonNotification = useMemo(() => {
+ const cssStyles = [
+ styles.notification.euiHeaderSectionItemButton__notification,
+ shouldShowDot ? styles.notification.dot : styles.notification.badge,
+ ];
- let buttonNotification;
- if (notification === true) {
- buttonNotification = notificationDot;
- } else if (notification) {
- buttonNotification = (
- <>
-
-
- {notification}
-
-
- {notificationDot}
-
- );
- }
+ if (shouldShowDot) {
+ return (
+
+ );
+ } else if (notification) {
+ return (
+
+ {notification}
+
+ );
+ }
+ }, [notification, notificationColor, styles.notification, shouldShowDot]);
return (
= ({
@@ -35,17 +34,13 @@ export const EuiImage: FunctionComponent = ({
onFullScreen,
...rest
}) => {
- const [isFullScreen, setIsFullScreen] = useState(false);
-
+ const isFullWidth = size === 'fullWidth';
const isNamedSize =
typeof size === 'string' && SIZES.includes(size as EuiImageSize);
+ const isCustomSize = !isNamedSize && size !== 'original';
const classes = classNames('euiImage', className);
-
- const euiTheme = useEuiTheme();
-
- const styles = euiImageStyles(euiTheme);
-
+ const styles = useEuiMemoizedStyles(euiImageStyles);
const cssStyles = [
styles.euiImage,
isNamedSize && styles[size as EuiImageSize],
@@ -53,9 +48,9 @@ export const EuiImage: FunctionComponent = ({
hasShadow && styles.hasShadow,
];
+ const [isFullScreen, setIsFullScreen] = useState(false);
const cssIsFullScreenStyles = [styles.euiImage, styles.isFullScreen];
- const isCustomSize = !isNamedSize && size !== 'original';
const customSize = typeof size === 'string' ? size : `${size}px`;
const imageStyleWithCustomSize = isCustomSize
? {
@@ -65,8 +60,6 @@ export const EuiImage: FunctionComponent = ({
}
: style;
- const isFullWidth = size === 'fullWidth';
-
const commonWrapperProps = {
hasShadow,
wrapperProps,
diff --git a/packages/eui/src/components/image/image_button.tsx b/packages/eui/src/components/image/image_button.tsx
index 304c4ae2197..2589170baf7 100644
--- a/packages/eui/src/components/image/image_button.tsx
+++ b/packages/eui/src/components/image/image_button.tsx
@@ -8,7 +8,7 @@
import React, { FunctionComponent } from 'react';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
import { useEuiI18n } from '../i18n';
import { EuiIcon } from '../icon';
import { EuiScreenReaderOnly } from '../accessibility';
@@ -40,9 +40,7 @@ export const EuiImageButton: FunctionComponent = ({
fullScreenIconColor = 'light',
...rest
}) => {
- const euiTheme = useEuiTheme();
-
- const buttonStyles = euiImageButtonStyles(euiTheme);
+ const buttonStyles = useEuiMemoizedStyles(euiImageButtonStyles);
const cssButtonStyles = [
buttonStyles.euiImageButton,
@@ -50,7 +48,7 @@ export const EuiImageButton: FunctionComponent = ({
!isFullScreen && isFullWidth && buttonStyles.fullWidth,
];
- const iconStyles = euiImageButtonIconStyles(euiTheme);
+ const iconStyles = useEuiMemoizedStyles(euiImageButtonIconStyles);
const cssIconStyles = [
iconStyles.euiImageButton__icon,
iconStyles.openFullScreen,
@@ -69,39 +67,37 @@ export const EuiImageButton: FunctionComponent = ({
fullScreenIconColorMap[fullScreenIconColor as EuiImageButtonIconColor];
return (
- <>
- = ({
...rest
}) => {
const classes = classNames('euiTimeline', className);
-
- const euiTheme = useEuiTheme();
- const styles = euiTimelineStyles(euiTheme);
-
+ const styles = useEuiMemoizedStyles(euiTimelineStyles);
const cssStyles = [styles.euiTimeline, styles[gutterSize]];
return (
diff --git a/packages/eui/src/components/timeline/timeline_item_icon.styles.ts b/packages/eui/src/components/timeline/timeline_item_icon.styles.ts
index 4ab49f30fef..a1caa640ee1 100644
--- a/packages/eui/src/components/timeline/timeline_item_icon.styles.ts
+++ b/packages/eui/src/components/timeline/timeline_item_icon.styles.ts
@@ -17,12 +17,11 @@ export const euiTimelineItemIconStyles = ({ euiTheme }: UseEuiTheme) => ({
flex-grow: 0;
justify-content: center;
${logicalCSS('margin-right', euiTheme.size.base)}
- `,
- euiTimelineItemIcon__content: css`
- display: flex;
- justify-content: center;
- align-items: center;
- position: relative;
+
+ /* Ensure icons sit above timeline line */
+ & > * {
+ z-index: 1;
+ }
`,
// Vertical alignments
top: css`
diff --git a/packages/eui/src/components/timeline/timeline_item_icon.tsx b/packages/eui/src/components/timeline/timeline_item_icon.tsx
index cd323c970c7..78846414334 100644
--- a/packages/eui/src/components/timeline/timeline_item_icon.tsx
+++ b/packages/eui/src/components/timeline/timeline_item_icon.tsx
@@ -7,9 +7,11 @@
*/
import React, { FunctionComponent, isValidElement, ReactNode } from 'react';
+
+import { useEuiMemoizedStyles } from '../../services';
import { IconType } from '../icon';
import { EuiAvatar } from '../avatar';
-import { useEuiTheme } from '../../services';
+
import { euiTimelineItemIconStyles } from './timeline_item_icon.styles';
import { EuiTimelineItemVerticalAlign } from './timeline_item';
@@ -29,23 +31,20 @@ export interface EuiTimelineItemIconProps {
export const EuiTimelineItemIcon: FunctionComponent<
EuiTimelineItemIconProps
> = ({ icon, verticalAlign = 'center', iconAriaLabel }) => {
- const euiTheme = useEuiTheme();
- const styles = euiTimelineItemIconStyles(euiTheme);
-
+ const styles = useEuiMemoizedStyles(euiTimelineItemIconStyles);
const cssStyles = [styles.euiTimelineItemIcon, styles[verticalAlign]];
- const cssContentStyles = styles.euiTimelineItemIcon__content;
-
- const ariaLabel = iconAriaLabel ? iconAriaLabel : '';
-
- const iconRender = isValidElement(icon) ? (
- icon
- ) : (
-
- );
return (
-
{iconRender}
+ {isValidElement(icon) ? (
+ icon
+ ) : (
+
+ )}
);
};