[Emotion][perf] Memoize EuiButton styles & mixins

src/components/button/button_display/_button_display.tsx

@@ -16,7 +16,7 @@ import React, {
 
 // @ts-ignore module doesn't export `createElement`
 import { createElement } from '@emotion/react';
-import { getSecureRelForTarget, useEuiTheme } from '../../../services';
+import { getSecureRelForTarget, useEuiMemoizedStyles } from '../../../services';
 
 import {
   CommonProps,
@@ -139,9 +139,7 @@ export const EuiButtonDisplay = forwardRef<HTMLElement, EuiButtonDisplayProps>(
       isLoading,
     });
 
-    const theme = useEuiTheme();
-
-    const styles = euiButtonDisplayStyles(theme);
+    const styles = useEuiMemoizedStyles(euiButtonDisplayStyles);
     const cssStyles = [
       styles.euiButtonDisplay,
       styles[size],

src/components/button/button_empty/button_empty.tsx

@@ -15,7 +15,7 @@ import {
   PropsForAnchor,
   PropsForButton,
 } from '../../common';
-import { useEuiTheme, getSecureRelForTarget } from '../../../services';
+import { useEuiMemoizedStyles, getSecureRelForTarget } from '../../../services';
 
 import {
   EuiButtonDisplayContent,
@@ -119,8 +119,7 @@ export const EuiButtonEmpty: FunctionComponent<EuiButtonEmptyProps> = ({
     display: 'empty',
   });
 
-  const euiTheme = useEuiTheme();
-  const styles = euiButtonEmptyStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiButtonEmptyStyles);
   const cssStyles = [
     styles.euiButtonEmpty,
     styles[size],

src/components/button/button_group/button_group.styles.ts

@@ -11,17 +11,15 @@ import { UseEuiTheme } from '../../../services';
 import { logicalCSS } from '../../../global_styling';
 import { euiFormVariables } from '../../form/form.styles';
 
-export const euiButtonGroupStyles = () => {
-  return {
-    euiButtonGroup: css`
-      display: inline-block;
-      ${logicalCSS('max-width', '100%')}
-      position: relative; /* Ensures the EuiScreenReaderOnly component is positioned relative to this component */
-    `,
-    fullWidth: css`
-      display: block;
-    `,
-  };
+export const euiButtonGroupStyles = {
+  euiButtonGroup: css`
+    display: inline-block;
+    ${logicalCSS('max-width', '100%')}
+    position: relative; /* Ensures the EuiScreenReaderOnly component is positioned relative to this component */
+  `,
+  fullWidth: css`
+    display: block;
+  `,
 };
 
 export const euiButtonGroupButtonsStyles = (euiThemeContext: UseEuiTheme) => {

src/components/button/button_group/button_group.tsx

@@ -14,7 +14,7 @@ import React, {
   ReactNode,
 } from 'react';
 
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { CommonProps } from '../../common';
 
@@ -142,15 +142,12 @@ export const EuiButtonGroup: FunctionComponent<Props> = ({
   type = 'single',
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
-
-  const wrapperStyles = euiButtonGroupStyles();
   const wrapperCssStyles = [
-    wrapperStyles.euiButtonGroup,
-    isFullWidth && wrapperStyles.fullWidth,
+    euiButtonGroupStyles.euiButtonGroup,
+    isFullWidth && euiButtonGroupStyles.fullWidth,
   ];
 
-  const styles = euiButtonGroupButtonsStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiButtonGroupButtonsStyles);
   const cssStyles = [
     styles.euiButtonGroup__buttons,
     isFullWidth && styles.fullWidth,

src/components/button/button_icon/button_icon.styles.ts

@@ -6,11 +6,12 @@
  * Side Public License, v 1.
  */
 
-import { css } from '@emotion/react';
+import { css, type SerializedStyles } from '@emotion/react';
 
 import { UseEuiTheme } from '../../../services';
 import { logicalSizeCSS } from '../../../global_styling';
 import {
+  BUTTON_COLORS,
   _EuiButtonColor,
   euiButtonEmptyColor,
   euiButtonSizeMap,
@@ -55,14 +56,16 @@ export const euiButtonIconStyles = (euiThemeContext: UseEuiTheme) => {
   };
 };
 
-export const _emptyHoverStyles = (
-  euiThemeContext: UseEuiTheme,
-  color: _EuiButtonColor
-) => {
-  return css`
-    &:hover {
-      background-color: ${euiButtonEmptyColor(euiThemeContext, color)
-        .backgroundColor};
-    }
-  `;
-};
+export const _emptyHoverStyles = (euiThemeContext: UseEuiTheme) =>
+  BUTTON_COLORS.reduce(
+    (styles, color) => ({
+      ...styles,
+      [color]: css`
+        &:hover {
+          background-color: ${euiButtonEmptyColor(euiThemeContext, color)
+            .backgroundColor};
+        }
+      `,
+    }),
+    {} as Record<_EuiButtonColor, SerializedStyles>
+  );

src/components/button/button_icon/button_icon.tsx

@@ -14,7 +14,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { getSecureRelForTarget, useEuiTheme } from '../../../services';
+import { getSecureRelForTarget, useEuiMemoizedStyles } from '../../../services';
 import {
   CommonProps,
   ExclusiveUnion,
@@ -118,7 +118,6 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
   isLoading,
   ...rest
 }) => {
-  const euiThemeContext = useEuiTheme();
   const isDisabled = isButtonDisabled({
     isDisabled: _isDisabled || disabled,
     href,
@@ -137,18 +136,15 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
 
   const buttonColorStyles = useEuiButtonColorCSS({ display });
   const buttonFocusStyle = useEuiButtonFocusCSS();
-  const emptyHoverStyles =
-    display === 'empty' &&
-    !isDisabled &&
-    _emptyHoverStyles(euiThemeContext, color);
+  const emptyHoverStyles = useEuiMemoizedStyles(_emptyHoverStyles);
 
-  const styles = euiButtonIconStyles(euiThemeContext);
+  const styles = useEuiMemoizedStyles(euiButtonIconStyles);
   const cssStyles = [
     styles.euiButtonIcon,
     styles[size],
     buttonColorStyles[isDisabled ? 'disabled' : color],
     buttonFocusStyle,
-    emptyHoverStyles,
+    display === 'empty' && !isDisabled && emptyHoverStyles[color],
     isDisabled && styles.isDisabled,
   ];
 

src/themes/amsterdam/global_styling/mixins/__snapshots__/button.test.ts.snap

@@ -0,0 +1,181 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`useEuiButtonColorCSS base 1`] = `
+Object {
+  "accent": Object {
+    "map": undefined,
+    "name": "1uoldaz-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#a03465;background-color:#fcdcea;;;label:base-accent;",
+    "toString": [Function],
+  },
+  "danger": Object {
+    "map": undefined,
+    "name": "1cquuvx-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#ab231c;background-color:#f2d4d2;;;label:base-danger;",
+    "toString": [Function],
+  },
+  "disabled": Object {
+    "map": undefined,
+    "name": "13xo60b-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#a2abba;background-color:rgba(211,218,230,0.15);;;label:base-disabled;",
+    "toString": [Function],
+  },
+  "primary": Object {
+    "map": undefined,
+    "name": "1thox14-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#0061a6;background-color:#cce4f5;;;label:base-primary;",
+    "toString": [Function],
+  },
+  "success": Object {
+    "map": undefined,
+    "name": "1j0clgi-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#006c66;background-color:#ccf2f0;;;label:base-success;",
+    "toString": [Function],
+  },
+  "text": Object {
+    "map": undefined,
+    "name": "40srs0-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#343741;background-color:#e9edf3;;;label:base-text;",
+    "toString": [Function],
+  },
+  "warning": Object {
+    "map": undefined,
+    "name": "19dh407-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#83650a;background-color:#fff3d0;;;label:base-warning;",
+    "toString": [Function],
+  },
+}
+`;
+
+exports[`useEuiButtonColorCSS empty 1`] = `
+Object {
+  "accent": Object {
+    "map": undefined,
+    "name": "cy4kjs-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#a03465;&:focus,&:active{background-color:rgba(240,78,152,0.1);};label:empty-accent;",
+    "toString": [Function],
+  },
+  "danger": Object {
+    "map": undefined,
+    "name": "j8xrk3-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#ab231c;&:focus,&:active{background-color:rgba(189,39,30,0.1);};label:empty-danger;",
+    "toString": [Function],
+  },
+  "disabled": Object {
+    "map": undefined,
+    "name": "2vymtv-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#a2abba;&:focus,&:active{background-color:transparent;};label:empty-disabled;",
+    "toString": [Function],
+  },
+  "primary": Object {
+    "map": undefined,
+    "name": "15isz8i-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#0061a6;&:focus,&:active{background-color:rgba(0,119,204,0.1);};label:empty-primary;",
+    "toString": [Function],
+  },
+  "success": Object {
+    "map": undefined,
+    "name": "h2w3e9-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#006c66;&:focus,&:active{background-color:rgba(0,191,179,0.1);};label:empty-success;",
+    "toString": [Function],
+  },
+  "text": Object {
+    "map": undefined,
+    "name": "1dqg6bz-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#343741;&:focus,&:active{background-color:rgba(211,218,230,0.2);};label:empty-text;",
+    "toString": [Function],
+  },
+  "warning": Object {
+    "map": undefined,
+    "name": "w61e3r-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#83650a;&:focus,&:active{background-color:rgba(254,197,20,0.1);};label:empty-warning;",
+    "toString": [Function],
+  },
+}
+`;
+
+exports[`useEuiButtonColorCSS fill 1`] = `
+Object {
+  "accent": Object {
+    "map": undefined,
+    "name": "vi45v3-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#000;background-color:#f583b7;outline-color:#000;;label:fill-accent;",
+    "toString": [Function],
+  },
+  "danger": Object {
+    "map": undefined,
+    "name": "1ge48z4-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#FFF;background-color:#BD271E;outline-color:#000;;label:fill-danger;",
+    "toString": [Function],
+  },
+  "disabled": Object {
+    "map": undefined,
+    "name": "xc42v8-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#a2abba;background-color:rgba(211,218,230,0.15);outline-color:#000;;label:fill-disabled;",
+    "toString": [Function],
+  },
+  "primary": Object {
+    "map": undefined,
+    "name": "btstjy-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#FFF;background-color:#07C;outline-color:#000;;label:fill-primary;",
+    "toString": [Function],
+  },
+  "success": Object {
+    "map": undefined,
+    "name": "p9aexd-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#000;background-color:#4dd2ca;outline-color:#000;;label:fill-success;",
+    "toString": [Function],
+  },
+  "text": Object {
+    "map": undefined,
+    "name": "5c80s5-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#FFF;background-color:#69707D;outline-color:#000;;label:fill-text;",
+    "toString": [Function],
+  },
+  "warning": Object {
+    "map": undefined,
+    "name": "17xxsr5-displaysColorsMap-display-color",
+    "next": undefined,
+    "styles": "color:#000;background-color:#FEC514;outline-color:#000;;label:fill-warning;",
+    "toString": [Function],
+  },
+}
+`;
+
+exports[`useEuiButtonFocusCSS 1`] = `
+Object {
+  "map": undefined,
+  "name": "1s8jae7-focusCSS",
+  "next": Object {
+    "name": "animation-70pju1",
+    "next": undefined,
+    "styles": "@keyframes animation-70pju1{
+  50% {
+    transform: translateY(1px);
+  }
+}",
+  },
+  "styles": "@media screen and (prefers-reduced-motion: no-preference){transition:transform 250ms ease-in-out,background-color 250ms ease-in-out;&:hover:not(:disabled){transform:translateY(-1px);}&:focus{animation:animation-70pju1 250ms cubic-bezier(.34, 1.61, .7, 1);}&:active:not(:disabled){transform:translateY(1px);}};",
+  "toString": [Function],
+}
+`;

src/themes/amsterdam/global_styling/mixins/button.test.ts

@@ -0,0 +1,29 @@
+/*
+ * 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 { renderHook } from '@testing-library/react';
+
+import {
+  useEuiButtonColorCSS,
+  BUTTON_DISPLAYS,
+  useEuiButtonFocusCSS,
+} from './button';
+
+describe('useEuiButtonColorCSS', () => {
+  BUTTON_DISPLAYS.forEach((display) => {
+    test(display, () => {
+      const { result } = renderHook(() => useEuiButtonColorCSS({ display }));
+      expect(result.current).toMatchSnapshot();
+    });
+  });
+});
+
+test('useEuiButtonFocusCSS', () => {
+  const { result } = renderHook(() => useEuiButtonFocusCSS());
+  expect(result.current).toMatchSnapshot();
+});