From b1e9e8ce3142dfb628c22de2617577b2e2f68875 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Thu, 22 Feb 2024 13:32:07 -0800
Subject: [PATCH] [EuiButtonIcon] memoize empty hover color styles

---
 .../button/button_icon/button_icon.styles.ts  | 27 ++++++++++---------
 .../button/button_icon/button_icon.tsx        | 10 +++----
 2 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/components/button/button_icon/button_icon.styles.ts b/src/components/button/button_icon/button_icon.styles.ts
index e8769c1bc50..a8f38fc73cb 100644
--- 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
index 99b550f2bb0..0cb90b4d606 100644
--- 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,10 +136,7 @@ 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 = [
@@ -148,7 +144,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
     styles[size],
     buttonColorStyles[isDisabled ? 'disabled' : color],
     buttonFocusStyle,
-    emptyHoverStyles,
+    display === 'empty' && !isDisabled && emptyHoverStyles[color],
     isDisabled && styles.isDisabled,
   ];