[EuiToolTip] implement memoization for styles in popover component files

elastic · Dec 9, 2024 · 05192a9 · 05192a9
1 parent 94ebcf8
commit 05192a9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 9 deletions.
diff --git a/packages/eui/src/components/popover/popover_arrow/_popover_arrow.tsx b/packages/eui/src/components/popover/popover_arrow/_popover_arrow.tsx
@@ -9,7 +9,7 @@
 import React, { HTMLAttributes, FunctionComponent } from 'react';
 import { CommonProps } from '../../common';
 import { euiPopoverArrowStyles } from './_popover_arrow.styles';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
 
 export const POSITIONS = ['top', 'left', 'right', 'bottom'] as const;
 export type EuiPopoverArrowPositions = (typeof POSITIONS)[number];
@@ -24,8 +24,7 @@ export const EuiPopoverArrow: FunctionComponent<EuiPopoverArrowProps> = ({
   position,
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
-  const styles = euiPopoverArrowStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiPopoverArrowStyles);
   const cssStyles = [styles.euiPopoverArrow, styles[position]];
 
   return (

diff --git a/packages/eui/src/components/popover/popover_footer.tsx b/packages/eui/src/components/popover/popover_footer.tsx
@@ -9,7 +9,7 @@
 import React, { HTMLAttributes, FunctionComponent, useContext } from 'react';
 import classNames from 'classnames';
 import { EuiPaddingSize, useEuiPaddingCSS } from '../../global_styling';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
 import { euiPopoverFooterStyles } from './popover_footer.styles';
 import { EuiPopoverPanelContext } from './popover_panel/_popover_panel';
@@ -32,8 +32,7 @@ export const EuiPopoverFooter: EuiPopoverFooterProps = ({
   ...rest
 }) => {
   const { paddingSize: panelPadding } = useContext(EuiPopoverPanelContext);
-  const euiTheme = useEuiTheme();
-  const styles = euiPopoverFooterStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiPopoverFooterStyles);
   const paddingStyles = useEuiPaddingCSS();
   const cssStyles = [
     styles.euiPopoverFooter,

diff --git a/packages/eui/src/components/popover/popover_title.tsx b/packages/eui/src/components/popover/popover_title.tsx
@@ -9,7 +9,7 @@
 import React, { HTMLAttributes, FunctionComponent, useContext } from 'react';
 import classNames from 'classnames';
 import { EuiPaddingSize, useEuiPaddingCSS } from '../../global_styling';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { CommonProps } from '../common';
 import { euiPopoverTitleStyles } from './popover_title.styles';
 import { EuiPopoverPanelContext } from './popover_panel/_popover_panel';
@@ -32,8 +32,7 @@ export const EuiPopoverTitle: EuiPopoverTitleProps = ({
   ...rest
 }) => {
   const { paddingSize: panelPadding } = useContext(EuiPopoverPanelContext);
-  const euiTheme = useEuiTheme();
-  const styles = euiPopoverTitleStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiPopoverTitleStyles);
   const paddingStyles = useEuiPaddingCSS();
   const cssStyles = [
     styles.euiPopoverTitle,