Issue 7561/emotion memoize all generated styles eui tool tip+euicon tip #7561

packages/eui/changelogs/upcoming/3.md

@@ -0,0 +1,7 @@
+This PR provides:
+
+- Memoization of generated styles with useEuiMemoizedStyles from src/services
+
+This PR doesn't contain:
+
+- Changes in UI

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 (

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,

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,

packages/eui/src/components/tool_tip/tool_tip_arrow.tsx

@@ -7,15 +7,14 @@
  */
 
 import React, { HTMLAttributes, FunctionComponent } from 'react';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { ToolTipPositions } from './tool_tip_popover';
 import { euiToolTipStyles } from './tool_tip.styles';
 
 export const EuiToolTipArrow: FunctionComponent<
   { position: ToolTipPositions } & HTMLAttributes<HTMLDivElement>
 > = ({ position, ...props }) => {
-  const euiTheme = useEuiTheme();
-  const styles = euiToolTipStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiToolTipStyles);
   const cssStyles = [styles.euiToolTip__arrow, styles.arrowPositions[position]];
 
   return <div css={cssStyles} {...props} />;

packages/eui/src/components/tool_tip/tool_tip_popover.tsx

@@ -16,7 +16,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiToolTipStyles } from './tool_tip.styles';
 
 export type ToolTipPositions = 'top' | 'right' | 'bottom' | 'left';
@@ -41,8 +41,7 @@ export const EuiToolTipPopover: FunctionComponent<Props> = ({
 }) => {
   const popover = useRef<HTMLDivElement>();
 
-  const euiTheme = useEuiTheme();
-  const styles = euiToolTipStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiToolTipStyles);
   const cssStyles = [
     styles.euiToolTip,
     calculatedPosition && styles[calculatedPosition],