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

[rebeca1012]

Summary

Memoize Tooltip and Popover components to prevent unnecessary re-renders (Issue #7561)

Detailed Changes

tool_tip_arrow.tsx

export const EuiToolTipArrow: FunctionComponent<
  { position: ToolTipPositions } & HTMLAttributes<HTMLDivElement>
> = ({ position, ...props }) => {
  const styles = useEuiMemoizedStyles(euiToolTipStyles);

Used useEuiMemoizedStyles to memoize the Tooltip component.

_popover_arrow.tsx

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 styles = useEuiMemoizedStyles(euiPopoverArrowStyles);

Used useEuiMemoizedStyles to memoize _popover_arrow.tsx

popover_footer.tsx

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 styles = useEuiMemoizedStyles(euiPopoverFooterStyles);

Used useEuiMemoizedStyles to memoize popover_footer.tsx

popover_title.tsx

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 styles = useEuiMemoizedStyles(euiPopoverTitleStyles);

Used useEuiMemoizedStyles to memoize popover_title.tsx

QA

Remove or strikethrough items that do not apply to your PR.

General checklist

• Browser QA
  • Checked in both light and dark modes
  • Checked in mobile
  • Checked in Chrome, Safari, Edge, and Firefox
  • Checked for accessibility including keyboard-only and screenreader modes
• Docs site QA
  • Added documentation
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
  • Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
  • Updated visual regression tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
  • If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist
  • If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

[cla-checker-service]

❌ Author of the following commits did not sign a Contributor Agreement:
42e03fa, 94ebcf8, 07645ee, 2842e3a, 05192a9, f527695, , 527e61e, 8ccc7d1, 2c37398

Please, read and sign the above mentioned agreement if you want to contribute to this project

[github-actions]

👋 Since this is a community submitted pull request, a Buildkite build has not been started automatically. Would an Elastic organization member please verify the contents of this pull request and kick off a build manually?