[EuiButtonIcon] memoize empty hover color styles

elastic · Feb 22, 2024 · b1e9e8c · b1e9e8c
1 parent bb99273
commit b1e9e8c
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 19 deletions.
diff --git a/src/components/button/button_icon/button_icon.styles.ts b/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>
+  );
diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
@@ -14,7 +14,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { getSecureRelForTarget, useEuiTheme, useEuiMemoizedStyles } 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 = useEuiMemoizedStyles(euiButtonIconStyles);
   const cssStyles = [
     styles.euiButtonIcon,
     styles[size],
     buttonColorStyles[isDisabled ? 'disabled' : color],
     buttonFocusStyle,
-    emptyHoverStyles,
+    display === 'empty' && !isDisabled && emptyHoverStyles[color],
     isDisabled && styles.isDisabled,
   ];