From 126dbcf059dd93a4650d346f8f7f59b41f8f3907 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 14 Feb 2024 11:41:03 -0800
Subject: [PATCH 01/11] [EuiScreenReaderOnly] Optimize styles

- make styles a static obj instead of a function
---
 .../screen_reader_only.test.tsx.snap          |  2 +-
 .../screen_reader_only.styles.ts              | 20 +++++++++----------
 .../screen_reader_only/screen_reader_only.tsx | 20 ++++++++++---------
 .../resizable_container.test.tsx.snap         |  4 ++--
 .../resizable_collapse_button.tsx             |  5 +----
 5 files changed, 25 insertions(+), 26 deletions(-)

diff --git a/src/components/accessibility/screen_reader_only/__snapshots__/screen_reader_only.test.tsx.snap b/src/components/accessibility/screen_reader_only/__snapshots__/screen_reader_only.test.tsx.snap
index b96c8872fdc..c6f851ca209 100644
--- a/src/components/accessibility/screen_reader_only/__snapshots__/screen_reader_only.test.tsx.snap
+++ b/src/components/accessibility/screen_reader_only/__snapshots__/screen_reader_only.test.tsx.snap
@@ -18,7 +18,7 @@ exports[`EuiScreenReaderOnly adds an accessibility class to a child element when
 
 exports[`EuiScreenReaderOnly will show on focus 1`] = `
 <a
-  class="emotion-euiScreenReaderOnly"
+  class="emotion-euiScreenReaderOnly-showOnFocus"
   href="#"
 >
   Link
diff --git a/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts b/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts
index 5099dea3540..9ef1131029c 100644
--- a/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts
+++ b/src/components/accessibility/screen_reader_only/screen_reader_only.styles.ts
@@ -34,13 +34,13 @@ export const euiScreenReaderOnly = () => `
 /*
  * Styles
  */
-export const euiScreenReaderOnlyStyles = (showOnFocus?: boolean) => ({
-  euiScreenReaderOnly: showOnFocus
-    ? css`
-        /* The :active selector is necessary for Safari which removes :focus when a button is pressed */
-        &:not(:focus, :active, :focus-within) {
-          ${euiScreenReaderOnly()}
-        }
-      `
-    : css(euiScreenReaderOnly()),
-});
+export const euiScreenReaderOnlyStyles = {
+  euiScreenReaderOnly: css(euiScreenReaderOnly()),
+
+  'euiScreenReaderOnly-showOnFocus': css`
+    /* The :active selector is necessary for Safari which removes :focus when a button is pressed */
+    &:not(:focus, :active, :focus-within) {
+      ${euiScreenReaderOnly()}
+    }
+  `,
+};
diff --git a/src/components/accessibility/screen_reader_only/screen_reader_only.tsx b/src/components/accessibility/screen_reader_only/screen_reader_only.tsx
index e46e5278db6..426e627c2c0 100644
--- a/src/components/accessibility/screen_reader_only/screen_reader_only.tsx
+++ b/src/components/accessibility/screen_reader_only/screen_reader_only.tsx
@@ -6,11 +6,11 @@
  * Side Public License, v 1.
  */
 
-import { ReactElement, FunctionComponent } from 'react';
+import { ReactElement, FunctionComponent, useMemo } from 'react';
 import classNames from 'classnames';
 
 import { cloneElementWithCss } from '../../../services';
-import { euiScreenReaderOnlyStyles } from './screen_reader_only.styles';
+import { euiScreenReaderOnlyStyles as styles } from './screen_reader_only.styles';
 
 export interface EuiScreenReaderOnlyProps {
   /**
@@ -30,13 +30,15 @@ export const EuiScreenReaderOnly: FunctionComponent<
 > = ({ children, className, showOnFocus }) => {
   const classes = classNames(className, children.props.className);
 
-  const styles = euiScreenReaderOnlyStyles(showOnFocus);
-  const cssStyles = [styles.euiScreenReaderOnly];
-
-  const props = {
-    className: classes.length ? classes : undefined,
-    css: cssStyles,
-  };
+  const props = useMemo(
+    () => ({
+      className: classes.length ? classes : undefined,
+      css: showOnFocus
+        ? styles['euiScreenReaderOnly-showOnFocus']
+        : styles.euiScreenReaderOnly,
+    }),
+    [classes, showOnFocus]
+  );
 
   return cloneElementWithCss(children, props);
 };
diff --git a/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap b/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap
index ad3e6f48762..65820a3e682 100644
--- a/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap
+++ b/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap
@@ -233,7 +233,7 @@ exports[`EuiResizableContainer can have toggleable panels 1`] = `
   >
     <button
       aria-label="Press to toggle this panel"
-      class="euiButtonIcon euiResizableCollapseButton emotion-euiButtonIcon-xs-base-text-euiResizableCollapseButton-euiScreenReaderOnly-collapsible-before-middle"
+      class="euiButtonIcon euiResizableCollapseButton emotion-euiButtonIcon-xs-base-text-euiResizableCollapseButton-euiScreenReaderOnly-showOnFocus-collapsible-before-middle"
       type="button"
     >
       <span
@@ -325,7 +325,7 @@ exports[`EuiResizableContainer toggleable panels can be configurable 1`] = `
   >
     <button
       aria-label="Press to toggle this panel"
-      class="euiButtonIcon euiResizableCollapseButton emotion-euiButtonIcon-xs-base-text-euiResizableCollapseButton-euiScreenReaderOnly-collapsible-before-top"
+      class="euiButtonIcon euiResizableCollapseButton emotion-euiButtonIcon-xs-base-text-euiResizableCollapseButton-euiScreenReaderOnly-showOnFocus-collapsible-before-top"
       data-test-subj="panel-toggle"
       type="button"
     >
diff --git a/src/components/resizable_container/resizable_collapse_button.tsx b/src/components/resizable_container/resizable_collapse_button.tsx
index b7ee4ab9981..19f3734267a 100644
--- a/src/components/resizable_container/resizable_collapse_button.tsx
+++ b/src/components/resizable_container/resizable_collapse_button.tsx
@@ -51,10 +51,7 @@ export const EuiResizableCollapseButton: FunctionComponent<
   ...rest
 }) => {
   const isHorizontal = direction === 'horizontal';
-
   const showOnFocus = !isCollapsed && !isVisible;
-  const screenReaderOnlyStyles =
-    euiScreenReaderOnlyStyles(showOnFocus).euiScreenReaderOnly;
 
   const styles = useEuiMemoizedStyles(euiResizableCollapseButtonStyles);
 
@@ -70,7 +67,7 @@ export const EuiResizableCollapseButton: FunctionComponent<
   ];
   const cssStyles = [
     styles.euiResizableCollapseButton,
-    showOnFocus && screenReaderOnlyStyles,
+    showOnFocus && euiScreenReaderOnlyStyles['euiScreenReaderOnly-showOnFocus'],
     ...(isCollapsed ? collapsedStyles : collapsibleStyles),
   ];
 

From f614edf882f26f4e8ede47c202f35b250e99e7a5 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 14 Feb 2024 11:41:12 -0800
Subject: [PATCH 02/11] [EuiSkipLink] Memoize styles

---
 .../skip_link/__snapshots__/skip_link.test.tsx.snap    | 10 +++++-----
 src/components/accessibility/skip_link/skip_link.tsx   |  6 ++----
 2 files changed, 7 insertions(+), 9 deletions(-)

diff --git a/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap b/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap
index 4106e4460c1..866b85be69e 100644
--- a/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap
+++ b/src/components/accessibility/skip_link/__snapshots__/skip_link.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`EuiSkipLink is rendered 1`] = `
 <a
   aria-label="aria-label"
-  class="euiButton euiSkipLink testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly-euiTestCss"
+  class="euiButton euiSkipLink testClass1 testClass2 emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly-showOnFocus-euiTestCss"
   data-test-subj="test subject string"
   href="#somewhere"
   rel="noreferrer"
@@ -22,7 +22,7 @@ exports[`EuiSkipLink is rendered 1`] = `
 
 exports[`EuiSkipLink props position absolute is rendered 1`] = `
 <a
-  class="euiButton euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-absolute-euiScreenReaderOnly"
+  class="euiButton euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-absolute-euiScreenReaderOnly-showOnFocus"
   href="#somewhere"
   rel="noreferrer"
 >
@@ -34,7 +34,7 @@ exports[`EuiSkipLink props position absolute is rendered 1`] = `
 
 exports[`EuiSkipLink props position fixed is rendered 1`] = `
 <a
-  class="euiButton euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-fixed-euiScreenReaderOnly"
+  class="euiButton euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-fixed-euiScreenReaderOnly-showOnFocus"
   href="#somewhere"
   rel="noreferrer"
   tabindex="0"
@@ -47,7 +47,7 @@ exports[`EuiSkipLink props position fixed is rendered 1`] = `
 
 exports[`EuiSkipLink props position static is rendered 1`] = `
 <a
-  class="euiButton euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly"
+  class="euiButton euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly-showOnFocus"
   href="#somewhere"
   rel="noreferrer"
 >
@@ -59,7 +59,7 @@ exports[`EuiSkipLink props position static is rendered 1`] = `
 
 exports[`EuiSkipLink props tabIndex is rendered 1`] = `
 <a
-  class="euiButton euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly"
+  class="euiButton euiSkipLink emotion-euiButtonDisplay-s-defaultMinWidth-fill-primary-euiSkipLink-euiScreenReaderOnly-showOnFocus"
   href="#somewhere"
   rel="noreferrer"
   tabindex="-1"
diff --git a/src/components/accessibility/skip_link/skip_link.tsx b/src/components/accessibility/skip_link/skip_link.tsx
index 0b8a89c0670..abed987a6f1 100644
--- a/src/components/accessibility/skip_link/skip_link.tsx
+++ b/src/components/accessibility/skip_link/skip_link.tsx
@@ -9,7 +9,7 @@
 import React, { FunctionComponent, Ref, useCallback } from 'react';
 import classNames from 'classnames';
 import { isTabbable } from 'tabbable';
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiButton, EuiButtonProps } from '../../button/button';
 import { PropsForAnchor } from '../../common';
 import { EuiScreenReaderOnly } from '../screen_reader_only';
@@ -69,11 +69,9 @@ export const EuiSkipLink: FunctionComponent<EuiSkipLinkProps> = ({
   onClick: _onClick,
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
-  const styles = euiSkipLinkStyles(euiTheme);
-
   const classes = classNames('euiSkipLink', className);
 
+  const styles = useEuiMemoizedStyles(euiSkipLinkStyles);
   const cssStyles = [
     styles.euiSkipLink,
     position !== 'static' ? styles[position] : undefined,

From bc4412ec0e4c8c6ad94772cf2f6d3e4c93342807 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 14 Feb 2024 11:42:20 -0800
Subject: [PATCH 03/11] [EuiAspectRatio] Memoize+logical properties inline
 styles + remove unnecessary props - consumers should apply those to the
 underlying cloned component instead

---
 .../__snapshots__/aspect_ratio.test.tsx.snap  | 35 +---------
 .../aspect_ratio/aspect_ratio.test.tsx        | 64 ++++-------------
 src/components/aspect_ratio/aspect_ratio.tsx  | 68 +++++++++----------
 3 files changed, 47 insertions(+), 120 deletions(-)

diff --git a/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap b/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap
index 023e07b1663..4a4909315da 100644
--- a/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap
+++ b/src/components/aspect_ratio/__snapshots__/aspect_ratio.test.tsx.snap
@@ -1,46 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiAspectRatio allows overriding with custom styles 1`] = `
-<iframe
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen=""
-  class="euiAspectRatio"
-  frameborder="0"
-  height="315"
-  src="https://www.youtube.com/embed/yJarWSLRM24"
-  style="height: 300px; width: 100%; margin: 2em;"
-  title="Elastic is a search company"
-  width="560"
-/>
-`;
-
-exports[`EuiAspectRatio is rendered 1`] = `
-<iframe
-  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-  allowfullscreen=""
-  aria-label="aria-label"
-  class="euiAspectRatio testClass1 testClass2 emotion-euiTestCss"
-  data-test-subj="test subject string"
-  frameborder="0"
-  height="315"
-  src="https://www.youtube.com/embed/yJarWSLRM24"
-  style="height: auto; width: 100%;"
-  title="Elastic is a search company"
-  width="560"
-/>
-`;
-
-exports[`EuiAspectRatio props maxWidth is rendered 1`] = `
+exports[`EuiAspectRatio renders 1`] = `
 <iframe
   allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
   allowfullscreen=""
   aria-label="aria-label"
   class="euiAspectRatio testClass1 testClass2 emotion-euiTestCss"
   data-test-subj="test subject string"
-  frameborder="0"
   height="315"
   src="https://www.youtube.com/embed/yJarWSLRM24"
-  style="height: auto; width: 100%; max-width: 500px;"
+  style="block-size: auto; inline-size: 100%;"
   title="Elastic is a search company"
   width="560"
 />
diff --git a/src/components/aspect_ratio/aspect_ratio.test.tsx b/src/components/aspect_ratio/aspect_ratio.test.tsx
index b2954867bd5..c98b255cd73 100644
--- a/src/components/aspect_ratio/aspect_ratio.test.tsx
+++ b/src/components/aspect_ratio/aspect_ratio.test.tsx
@@ -13,17 +13,17 @@ import { requiredProps } from '../../test/required_props';
 import { EuiAspectRatio } from './aspect_ratio';
 
 describe('EuiAspectRatio', () => {
-  test('is rendered', () => {
+  it('renders', () => {
     const { container } = render(
-      <EuiAspectRatio height={4} width={9} {...requiredProps}>
+      <EuiAspectRatio height={4} width={9}>
         <iframe
           title="Elastic is a search company"
           width="560"
           height="315"
           src="https://www.youtube.com/embed/yJarWSLRM24"
-          frameBorder="0"
           allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
           allowFullScreen
+          {...requiredProps}
         />
       </EuiAspectRatio>
     );
@@ -31,65 +31,27 @@ describe('EuiAspectRatio', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('allows overriding with custom styles', () => {
-    const { container } = render(
-      <EuiAspectRatio
-        height={4}
-        width={9}
-        style={{ margin: '2em', height: '300px' }}
-      >
-        <iframe
-          title="Elastic is a search company"
-          width="560"
-          height="315"
-          src="https://www.youtube.com/embed/yJarWSLRM24"
-          frameBorder="0"
-          allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-          allowFullScreen
-        />
-      </EuiAspectRatio>
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  test('inherits child styles', () => {
+  it('merges child styles', () => {
     const { getByTestSubject } = render(
-      <EuiAspectRatio height={4} width={9} style={{ color: 'gray' }}>
+      <EuiAspectRatio height={4} width={9}>
         <div data-test-subj="child" style={{ backgroundColor: 'salmon' }} />
       </EuiAspectRatio>
     );
 
     expect(getByTestSubject('child')).toHaveStyle({
       'background-color': 'salmon',
-      color: 'gray',
     });
   });
 
-  describe('props', () => {
-    describe('maxWidth', () => {
-      test('is rendered', () => {
-        const { container } = render(
-          <EuiAspectRatio
-            height={16}
-            width={9}
-            maxWidth={500}
-            {...requiredProps}
-          >
-            <iframe
-              title="Elastic is a search company"
-              width="560"
-              height="315"
-              src="https://www.youtube.com/embed/yJarWSLRM24"
-              frameBorder="0"
-              allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-              allowFullScreen
-            />
-          </EuiAspectRatio>
-        );
+  test('maxWidth', () => {
+    const { getByTestSubject } = render(
+      <EuiAspectRatio height={16} width={9} maxWidth={500} {...requiredProps}>
+        <div data-test-subj="child" />
+      </EuiAspectRatio>
+    );
 
-        expect(container.firstChild).toMatchSnapshot();
-      });
+    expect(getByTestSubject('child')).toHaveStyle({
+      maxInlineSize: '500px',
     });
   });
 });
diff --git a/src/components/aspect_ratio/aspect_ratio.tsx b/src/components/aspect_ratio/aspect_ratio.tsx
index af707c1660a..56153c9cf8d 100644
--- a/src/components/aspect_ratio/aspect_ratio.tsx
+++ b/src/components/aspect_ratio/aspect_ratio.tsx
@@ -8,55 +8,51 @@
 
 import React, {
   FunctionComponent,
-  HTMLAttributes,
   ReactElement,
   CSSProperties,
+  useMemo,
 } from 'react';
-import { CommonProps } from '../common';
 import classNames from 'classnames';
 
-export type EuiAspectRatioProps = HTMLAttributes<HTMLDivElement> &
-  CommonProps & {
-    /**
-     * Aspect ratio height. For example 9 would be widescreen video.
-     */
-    height: number;
-    /**
-     * Aspect ratio width. For example 16 would be widescreen video.
-     */
-    width: number;
-    /**
-     * The maximum width you want the child to stretch to.
-     */
-    maxWidth?: CSSProperties['width'];
-    children: ReactElement<any>;
-  };
+import { logicalStyles } from '../../global_styling';
+
+export type EuiAspectRatioProps = {
+  /**
+   * Aspect ratio height. For example 9 would be widescreen video.
+   */
+  height: number;
+  /**
+   * Aspect ratio width. For example 16 would be widescreen video.
+   */
+  width: number;
+  /**
+   * The maximum width you want the child to stretch to.
+   */
+  maxWidth?: CSSProperties['width'];
+  children: ReactElement<any>;
+};
 
 export const EuiAspectRatio: FunctionComponent<EuiAspectRatioProps> = ({
   children,
-  className,
   height,
   width,
   maxWidth,
-  style,
-  ...rest
 }) => {
-  const classes = classNames('euiAspectRatio', className);
+  const classes = classNames('euiAspectRatio', children.props.className);
 
-  const euiAspectRatioStyle = {
-    ...children.props.style,
-    aspectRatio: `${width} / ${height}`,
-    height: 'auto',
-    width: '100%',
-    maxWidth,
-    ...style,
-  };
+  const euiAspectRatioStyle = useMemo(
+    () =>
+      logicalStyles({
+        aspectRatio: `${width} / ${height}`,
+        height: 'auto',
+        width: '100%',
+        maxWidth,
+      }),
+    [height, width, maxWidth]
+  );
 
-  const props = {
+  return React.cloneElement(children, {
     className: classes,
-    style: euiAspectRatioStyle,
-    ...rest,
-  };
-
-  return React.cloneElement(children, props);
+    style: { ...children.props.style, ...euiAspectRatioStyle },
+  });
 };

From b3cd6aae354d52f41d6b9efcb064256dd4414bf6 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Wed, 14 Feb 2024 11:44:42 -0800
Subject: [PATCH 04/11] [EuiAvatar] Memoize styles + cleanup/performance

- remove `let`s in favor of `useMemo`s/conditional JSX

- clean up/reorganize variables

- make `visColors` a static const instead of per-component

- fix test with image url not actually rendering the correct inline style, + remove background color/color calculations on avatars with images - they aren't using them (add a default gray bg instead)
---
 .../avatar/__snapshots__/avatar.test.tsx.snap |   2 +-
 src/components/avatar/avatar.styles.ts        |   1 +
 src/components/avatar/avatar.test.tsx         |   2 +-
 src/components/avatar/avatar.tsx              | 102 +++++++++---------
 4 files changed, 52 insertions(+), 55 deletions(-)

diff --git a/src/components/avatar/__snapshots__/avatar.test.tsx.snap b/src/components/avatar/__snapshots__/avatar.test.tsx.snap
index 94d623a3713..0bfea749762 100644
--- a/src/components/avatar/__snapshots__/avatar.test.tsx.snap
+++ b/src/components/avatar/__snapshots__/avatar.test.tsx.snap
@@ -227,7 +227,7 @@ exports[`EuiAvatar props imageUrl is rendered 1`] = `
   aria-label="name"
   class="euiAvatar euiAvatar--m euiAvatar--user emotion-euiAvatar-user-m-uppercase"
   role="img"
-  style="background-color: rgb(228, 166, 199); color: rgb(0, 0, 0);"
+  style="background-image: url(image-url.gif);"
   title="name"
 />
 `;
diff --git a/src/components/avatar/avatar.styles.ts b/src/components/avatar/avatar.styles.ts
index ef10b294e9f..9be85116d9c 100644
--- a/src/components/avatar/avatar.styles.ts
+++ b/src/components/avatar/avatar.styles.ts
@@ -35,6 +35,7 @@ export const euiAvatarStyles = ({ euiTheme }: UseEuiTheme) => ({
     align-items: center;
     vertical-align: middle;
     background-size: cover;
+    background-color: ${euiTheme.colors.lightShade};
     ${logicalTextAlignCSS('center')}
     ${logicalCSS('overflow-x', 'hidden')}
     /* Explicitly state weight so it doesn't get overridden by inheritance */
diff --git a/src/components/avatar/avatar.test.tsx b/src/components/avatar/avatar.test.tsx
index 688b558997b..a3ce8220611 100644
--- a/src/components/avatar/avatar.test.tsx
+++ b/src/components/avatar/avatar.test.tsx
@@ -32,7 +32,7 @@ describe('EuiAvatar', () => {
     describe('imageUrl', () => {
       it('is rendered', () => {
         const { container } = render(
-          <EuiAvatar name="name" imageUrl="image url" />
+          <EuiAvatar name="name" imageUrl="image-url.gif" />
         );
 
         expect(container.firstChild).toMatchSnapshot();
diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
index c316b58fb8e..fc410e87abc 100644
--- a/src/components/avatar/avatar.tsx
+++ b/src/components/avatar/avatar.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { HTMLAttributes, FunctionComponent } from 'react';
+import React, { HTMLAttributes, FunctionComponent, useMemo } from 'react';
 import { CommonProps, ExclusiveUnion } from '../common';
 import classNames from 'classnames';
 
@@ -14,11 +14,12 @@ import { isColorDark, hexToRgb, isValidHex } from '../../services/color';
 import {
   euiPaletteColorBlindBehindText,
   toInitials,
-  useEuiTheme,
+  useEuiMemoizedStyles,
 } from '../../services';
 import { IconType, EuiIcon, IconSize, IconColor } from '../icon';
 
 import { euiAvatarStyles } from './avatar.styles';
+const visColors = euiPaletteColorBlindBehindText();
 
 export const SIZES = ['s', 'm', 'l', 'xl'] as const;
 export type EuiAvatarSize = (typeof SIZES)[number];
@@ -123,15 +124,12 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
   style,
   ...props
 }) => {
+  checkValidInitials(initials);
   const { casing = type === 'space' ? 'none' : 'uppercase', ...rest } = props;
 
-  const euiTheme = useEuiTheme();
-  const styles = euiAvatarStyles(euiTheme);
-
-  const visColors = euiPaletteColorBlindBehindText();
-
   const isPlain = color === 'plain';
   const isSubdued = color === 'subdued';
+  const isNamedColor = isPlain || isSubdued || color === null;
 
   const classes = classNames(
     'euiAvatar',
@@ -143,6 +141,7 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
     className
   );
 
+  const styles = useEuiMemoizedStyles(euiAvatarStyles);
   const cssStyles = [
     styles.euiAvatar,
     styles[type],
@@ -153,63 +152,60 @@ export const EuiAvatar: FunctionComponent<EuiAvatarProps> = ({
     isDisabled && styles.isDisabled,
   ];
 
-  checkValidInitials(initials);
-
-  const avatarStyle = { ...style };
-
-  let iconCustomColor = iconColor;
-
-  const isNamedColor =
-    color === 'plain' || color === 'subdued' || color === null;
-
-  if (!isNamedColor) {
-    checkValidColor(color);
-
-    const assignedColor =
-      color || visColors[Math.floor(name.length % visColors.length)];
-    const textColor = isColorDark(...hexToRgb(assignedColor))
-      ? '#FFFFFF'
-      : '#000000';
-
-    avatarStyle.backgroundColor = assignedColor;
-    avatarStyle.color = textColor;
-
-    // Allow consumers to let the icons keep their default color (like app icons)
-    // when passing `iconColor = null`, otherwise continue to pass on `iconColor` or adjust with textColor
-    iconCustomColor = iconColor || iconColor === null ? iconColor : textColor;
-  }
-
-  if (imageUrl) {
-    avatarStyle.backgroundImage = `url(${imageUrl})`;
-  }
+  const avatarStyle = useMemo(() => {
+    if (imageUrl) {
+      return {
+        backgroundImage: `url(${imageUrl})`,
+      };
+    }
+    if (!isNamedColor) {
+      checkValidColor(color);
+
+      const assignedColor =
+        color || visColors[Math.floor(name.length % visColors.length)];
+      const textColor = isColorDark(...hexToRgb(assignedColor))
+        ? '#FFFFFF'
+        : '#000000';
+
+      return {
+        backgroundColor: assignedColor,
+        color: textColor,
+      };
+    }
+  }, [imageUrl, color, isNamedColor, name.length]);
 
-  let content;
-  if (!imageUrl && !iconType) {
-    // Create the initials
-    const calculatedInitials = toInitials(name, initialsLength, initials);
-    content = <span aria-hidden="true">{calculatedInitials}</span>;
-  } else if (iconType) {
-    content = (
-      <EuiIcon
-        className="euiAvatar__icon"
-        size={iconSize || size}
-        type={iconType}
-        color={iconCustomColor === null ? undefined : iconCustomColor}
-      />
-    );
-  }
+  const iconCustomColor = useMemo(() => {
+    // `null` allows icons to keep their default color (e.g. app icons)
+    if (iconColor === null) return undefined;
+    // Otherwise continue to pass on `iconColor`
+    if (iconColor) return iconColor;
+    // Fall back to the adjusted text color if it exists
+    return avatarStyle?.color;
+  }, [iconColor, avatarStyle?.color]);
 
   return (
     <div
       css={cssStyles}
       className={classes}
-      style={avatarStyle}
+      style={{ ...style, ...avatarStyle }}
       aria-label={isDisabled ? undefined : name}
       role={isDisabled ? 'presentation' : 'img'}
       title={name}
       {...rest}
     >
-      {content}
+      {!imageUrl &&
+        (iconType ? (
+          <EuiIcon
+            className="euiAvatar__icon"
+            size={iconSize || size}
+            type={iconType}
+            color={iconCustomColor}
+          />
+        ) : (
+          <span aria-hidden="true">
+            {toInitials(name, initialsLength, initials)}
+          </span>
+        ))}
     </div>
   );
 };

From e1e3143ac80077bc01f5d55ce78ce1f391e54ce1 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 29 Mar 2024 09:18:33 -0700
Subject: [PATCH 05/11] [EuiBottomBar] Memoize styles + cleanup

- remove unnecessary `paddingSizeToClassNameMap` - not used anywhere in Kibana

- remove unnecessary `{ position }` CSS in favor of just writing it in the position styles
---
 .../__snapshots__/bottom_bar.test.tsx.snap    | 26 +++++++--------
 .../bottom_bar/bottom_bar.styles.ts           |  4 ++-
 src/components/bottom_bar/bottom_bar.test.tsx |  9 ++----
 src/components/bottom_bar/bottom_bar.tsx      | 32 +++++++------------
 4 files changed, 29 insertions(+), 42 deletions(-)

diff --git a/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap b/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap
index d890fdb1121..532be79cfda 100644
--- a/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap
+++ b/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`EuiBottomBar is rendered 1`] = `
   >
     <section
       aria-label="aria-label"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium testClass1 testClass2 emotion-euiBottomBar-fixed-m-euiTestCss-euiColorMode-dark"
+      class="euiBottomBar euiBottomBar--fixed testClass1 testClass2 emotion-euiBottomBar-fixed-m-euiTestCss-euiColorMode-dark"
       data-test-subj="test subject string"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
@@ -43,7 +43,7 @@ exports[`EuiBottomBar props affordForDisplacement can be false 1`] = `
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
+      class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -74,7 +74,7 @@ exports[`EuiBottomBar props bodyClassName is rendered 1`] = `
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
+      class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -104,7 +104,7 @@ exports[`EuiBottomBar props landmarkHeading 1`] = `
   >
     <section
       aria-label="This should have been label"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
+      class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -134,7 +134,7 @@ exports[`EuiBottomBar props paddingSize l is rendered 1`] = `
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingLarge emotion-euiBottomBar-fixed-l-euiColorMode-dark"
+      class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-l-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -164,7 +164,7 @@ exports[`EuiBottomBar props paddingSize m is rendered 1`] = `
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
+      class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -224,7 +224,7 @@ exports[`EuiBottomBar props paddingSize s is rendered 1`] = `
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingSmall emotion-euiBottomBar-fixed-s-euiColorMode-dark"
+      class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-s-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -254,7 +254,7 @@ exports[`EuiBottomBar props position fixed is rendered 1`] = `
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
+      class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -285,7 +285,7 @@ exports[`EuiBottomBar props position props are altered 1`] = `
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
+      class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 30px; right: 30px; bottom: 30px; top: 30px;"
     >
       <h2
@@ -311,7 +311,7 @@ exports[`EuiBottomBar props position static is rendered 1`] = `
   <div>
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--static euiBottomBar--paddingMedium emotion-euiBottomBar-static-m-euiColorMode-dark"
+      class="euiBottomBar euiBottomBar--static emotion-euiBottomBar-static-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -337,7 +337,7 @@ exports[`EuiBottomBar props position sticky is rendered 1`] = `
   <div>
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--sticky euiBottomBar--paddingMedium emotion-euiBottomBar-sticky-m-euiColorMode-dark"
+      class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -368,7 +368,7 @@ exports[`EuiBottomBar props style is customized 1`] = `
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
+      class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 12px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -394,7 +394,7 @@ exports[`EuiBottomBar props usePortal can be false 1`] = `
   <div>
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
+      class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
diff --git a/src/components/bottom_bar/bottom_bar.styles.ts b/src/components/bottom_bar/bottom_bar.styles.ts
index e836756f401..eb6dd268e90 100644
--- a/src/components/bottom_bar/bottom_bar.styles.ts
+++ b/src/components/bottom_bar/bottom_bar.styles.ts
@@ -37,11 +37,13 @@ export const euiBottomBarStyles = (euiThemeContext: UseEuiTheme) => {
           ${euiTheme.animation.resistance};
       }
     `,
-    static: css``,
+    static: css``, // Default
     fixed: css`
+      position: fixed;
       z-index: ${Number(euiTheme.levels.header) - 2};
     `,
     sticky: css`
+      position: sticky;
       z-index: ${Number(euiTheme.levels.header) - 2};
     `,
     // Padding
diff --git a/src/components/bottom_bar/bottom_bar.test.tsx b/src/components/bottom_bar/bottom_bar.test.tsx
index f9569417ce7..4b2264e4e0f 100644
--- a/src/components/bottom_bar/bottom_bar.test.tsx
+++ b/src/components/bottom_bar/bottom_bar.test.tsx
@@ -9,13 +9,8 @@
 import React from 'react';
 import { render } from '../../test/rtl';
 import { requiredProps } from '../../test';
-import { keysOf } from '../common';
 
-import {
-  EuiBottomBar,
-  paddingSizeToClassNameMap,
-  POSITIONS,
-} from './bottom_bar';
+import { EuiBottomBar, PADDING_SIZES, POSITIONS } from './bottom_bar';
 
 describe('EuiBottomBar', () => {
   test('is rendered', () => {
@@ -28,7 +23,7 @@ describe('EuiBottomBar', () => {
 
   describe('props', () => {
     describe('paddingSize', () => {
-      keysOf(paddingSizeToClassNameMap).forEach((paddingSize) => {
+      PADDING_SIZES.forEach((paddingSize) => {
         test(`${paddingSize} is rendered`, () => {
           const { baseElement } = render(
             <EuiBottomBar paddingSize={paddingSize} />
diff --git a/src/components/bottom_bar/bottom_bar.tsx b/src/components/bottom_bar/bottom_bar.tsx
index b30d07ba55b..806d3742950 100644
--- a/src/components/bottom_bar/bottom_bar.tsx
+++ b/src/components/bottom_bar/bottom_bar.tsx
@@ -14,26 +14,22 @@ import React, {
   useEffect,
   useState,
 } from 'react';
-import { useCombinedRefs, useEuiTheme } from '../../services';
+
+import {
+  useCombinedRefs,
+  useEuiMemoizedStyles,
+  EuiThemeProvider,
+} from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { CommonProps, ExclusiveUnion } from '../common';
 import { EuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiPortal, EuiPortalProps } from '../portal';
-import { euiBottomBarStyles } from './bottom_bar.styles';
-import { EuiThemeProvider } from '../../services/theme/provider';
 
-type BottomBarPaddingSize = 'none' | 's' | 'm' | 'l';
+import { euiBottomBarStyles } from './bottom_bar.styles';
 
-// Exported for testing
-export const paddingSizeToClassNameMap: {
-  [value in BottomBarPaddingSize]: string | null;
-} = {
-  none: null,
-  s: 'euiBottomBar--paddingSmall',
-  m: 'euiBottomBar--paddingMedium',
-  l: 'euiBottomBar--paddingLarge',
-};
+export const PADDING_SIZES = ['none', 's', 'm', 'l'] as const;
+type BottomBarPaddingSize = (typeof PADDING_SIZES)[number];
 
 export const POSITIONS = ['static', 'fixed', 'sticky'] as const;
 export type _BottomBarPosition = (typeof POSITIONS)[number];
@@ -123,8 +119,7 @@ const _EuiBottomBar = forwardRef<
     },
     ref
   ) => {
-    const euiTheme = useEuiTheme();
-    const styles = euiBottomBarStyles(euiTheme);
+    const styles = useEuiMemoizedStyles(euiBottomBarStyles);
 
     // Force some props if `fixed` position, but not if the user has supplied these
     affordForDisplacement =
@@ -159,7 +154,6 @@ const _EuiBottomBar = forwardRef<
     const classes = classNames(
       'euiBottomBar',
       `euiBottomBar--${position}`,
-      paddingSizeToClassNameMap[paddingSize],
       className
     );
 
@@ -167,7 +161,6 @@ const _EuiBottomBar = forwardRef<
       styles.euiBottomBar,
       styles[position],
       styles[paddingSize],
-      { position },
     ];
 
     const newStyle = {
@@ -240,10 +233,7 @@ export const EuiBottomBar = forwardRef<HTMLElement, EuiBottomBarProps>(
   (props, ref) => {
     const BottomBar = _EuiBottomBar;
     return (
-      <EuiThemeProvider
-        colorMode={'dark'}
-        wrapperProps={{ cloneElement: true }}
-      >
+      <EuiThemeProvider colorMode="dark" wrapperProps={{ cloneElement: true }}>
         <BottomBar ref={ref} {...props} />
       </EuiThemeProvider>
     );

From f294af04bc294d059bf8cb1fe223e86226434ec8 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 29 Mar 2024 09:59:25 -0700
Subject: [PATCH 06/11] [EuiCodeBlockAnnotation] Memoize styles

---
 .../code/code_block_annotations.style.ts          |  4 +---
 src/components/code/code_block_annotations.tsx    | 15 ++++++---------
 2 files changed, 7 insertions(+), 12 deletions(-)

diff --git a/src/components/code/code_block_annotations.style.ts b/src/components/code/code_block_annotations.style.ts
index 33821cdf4f4..b9faf685fc1 100644
--- a/src/components/code/code_block_annotations.style.ts
+++ b/src/components/code/code_block_annotations.style.ts
@@ -14,9 +14,7 @@ import {
 } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 
-export const euiCodeBlockAnnotationsStyles = (
-  euiTheme: UseEuiTheme['euiTheme']
-) => {
+export const euiCodeBlockAnnotationsStyles = ({ euiTheme }: UseEuiTheme) => {
   const buttonIconSize = mathWithUnits(euiTheme.size.base, (x) => x - 1.5);
 
   return {
diff --git a/src/components/code/code_block_annotations.tsx b/src/components/code/code_block_annotations.tsx
index 7c20a7d6fea..b789454a667 100644
--- a/src/components/code/code_block_annotations.tsx
+++ b/src/components/code/code_block_annotations.tsx
@@ -13,12 +13,12 @@ import React, {
   useState,
 } from 'react';
 
-import { useEuiTheme } from '../../services';
+import { useEuiTheme, useEuiMemoizedStyles } from '../../services';
+import { useEuiButtonFocusCSS } from '../../themes/amsterdam/global_styling/mixins/button';
 import { CommonProps } from '../common';
 import { useEuiI18n } from '../i18n';
 import { EuiPopover } from '../popover';
 import { EuiIcon } from '../icon';
-import { useEuiButtonFocusCSS } from '../../themes/amsterdam/global_styling/mixins/button';
 
 import { euiCodeBlockAnnotationsStyles } from './code_block_annotations.style';
 
@@ -40,15 +40,16 @@ export const EuiCodeBlockAnnotation: FunctionComponent<
     { lineNumber }
   );
 
-  const { euiTheme, colorMode } = useEuiTheme();
-  const styles = euiCodeBlockAnnotationsStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiCodeBlockAnnotationsStyles);
   const buttonIconFocusStyle = useEuiButtonFocusCSS();
   const cssButtonIconStyles = [
     styles.euiCodeBlockAnnotation__buttonIcon,
     buttonIconFocusStyle,
   ];
 
+  const { euiTheme, colorMode } = useEuiTheme();
   const isDarkMode = colorMode === 'DARK';
+  const iconColor = isDarkMode ? euiTheme.colors.ink : 'ghost';
 
   return (
     <EuiPopover
@@ -63,11 +64,7 @@ export const EuiCodeBlockAnnotation: FunctionComponent<
           css={cssButtonIconStyles}
           data-test-subj="euiCodeBlockAnnotationIcon"
         >
-          <EuiIcon
-            type={AnnotationInfoIcon}
-            size="s"
-            color={isDarkMode ? euiTheme.colors.ink : 'ghost'}
-          />
+          <EuiIcon type={AnnotationInfoIcon} size="s" color={iconColor} />
         </button>
       }
       zIndex={Number(euiTheme.levels.mask) + 1} // Ensure fullscreen annotation popovers sit above the mask

From ce78aec021fd7e380c83fd68b47662e896bfbb01 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 29 Mar 2024 10:02:08 -0700
Subject: [PATCH 07/11] [EuiCollapsibleNav] Memoize styles

---
 src/components/collapsible_nav/collapsible_nav.tsx           | 5 ++---
 .../collapsible_nav_group/collapsible_nav_group.tsx          | 5 ++---
 2 files changed, 4 insertions(+), 6 deletions(-)

diff --git a/src/components/collapsible_nav/collapsible_nav.tsx b/src/components/collapsible_nav/collapsible_nav.tsx
index 82bb1f1a612..d2216ab948a 100644
--- a/src/components/collapsible_nav/collapsible_nav.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.tsx
@@ -15,7 +15,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 import {
-  useEuiTheme,
+  useEuiMemoizedStyles,
   useGeneratedHtmlId,
   useIsWithinMinBreakpoint,
   useCombinedRefs,
@@ -90,8 +90,7 @@ export const EuiCollapsibleNav: FunctionComponent<EuiCollapsibleNavProps> = ({
   const flyoutType = navIsDocked ? 'push' : 'overlay';
 
   const classes = classNames('euiCollapsibleNav', className);
-  const euiTheme = useEuiTheme();
-  const styles = euiCollapsibleNavStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiCollapsibleNavStyles);
   const cssStyles = [styles.euiCollapsibleNav, styles[flyoutType]];
 
   // Show a trigger button if one was passed but
diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
index b65c1d44aa7..23726f1d450 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
+++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.tsx
@@ -11,7 +11,7 @@ import classNames from 'classnames';
 import { CommonProps, ExclusiveUnion } from '../../common';
 import {
   EuiThemeProvider,
-  useEuiTheme,
+  useEuiMemoizedStyles,
   useGeneratedHtmlId,
 } from '../../../services';
 
@@ -115,8 +115,7 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
   const groupID = useGeneratedHtmlId({ conditionalId: id });
   const titleID = `${groupID}__title`;
 
-  const euiTheme = useEuiTheme();
-  const styles = euiCollapsibleNavGroupStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiCollapsibleNavGroupStyles);
   const cssStyles = [
     styles.euiCollapsibleNavGroup,
     isCollapsible ? styles.isCollapsible : styles.notCollapsible,

From 030bbc2b1db235359fad3768934b4ed6e1ef17d4 Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 29 Mar 2024 10:13:42 -0700
Subject: [PATCH 08/11] [EuiCollapsibleNavBeta](+ subcomponents) Memoize styles

---
 .../collapsible_nav_beta/collapsible_nav_beta.tsx          | 7 +++----
 .../collapsible_nav_beta/collapsible_nav_body_footer.tsx   | 5 ++---
 .../collapsible_nav_button/collapsible_nav_button.tsx      | 5 ++---
 .../collapsible_nav_group/collapsible_nav_group.tsx        | 5 ++---
 .../collapsed/collapsed_nav_button.tsx                     | 7 +++----
 .../collapsed/collapsed_nav_popover.tsx                    | 5 ++---
 .../collapsible_nav_item/collapsible_nav_accordion.tsx     | 5 ++---
 .../collapsible_nav_item/collapsible_nav_group.tsx         | 5 ++---
 .../collapsible_nav_item/collapsible_nav_item.tsx          | 5 ++---
 .../collapsible_nav_item/collapsible_nav_link.tsx          | 5 ++---
 10 files changed, 22 insertions(+), 32 deletions(-)

diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
index c84c7bc114c..bda361fa4c4 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
@@ -19,7 +19,7 @@ import React, {
 import classNames from 'classnames';
 
 import {
-  useEuiTheme,
+  useEuiMemoizedStyles,
   useEuiThemeCSSVariables,
   useGeneratedHtmlId,
   throttle,
@@ -94,8 +94,7 @@ const _EuiCollapsibleNavBeta: FunctionComponent<EuiCollapsibleNavBetaProps> = ({
   ...rest
 }) => {
   const { setGlobalCSSVariables } = useEuiThemeCSSVariables();
-  const euiTheme = useEuiTheme();
-  const headerHeight = euiHeaderVariables(euiTheme).height;
+  const { height: headerHeight } = useEuiMemoizedStyles(euiHeaderVariables);
 
   /**
    * Collapsed state
@@ -179,7 +178,7 @@ const _EuiCollapsibleNavBeta: FunctionComponent<EuiCollapsibleNavBetaProps> = ({
     'euiCollapsibleNavBeta',
     className
   );
-  const styles = euiCollapsibleNavBetaStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiCollapsibleNavBetaStyles);
   const cssStyles = [
     styles.euiCollapsibleNavBeta,
     styles[side],
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx b/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx
index 5eb3756dbec..c4acbdcd8e0 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_body_footer.tsx
@@ -9,7 +9,7 @@
 import React, { useContext } from 'react';
 import classNames from 'classnames';
 
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import {
   EuiFlyoutBody,
   EuiFlyoutBodyProps,
@@ -63,8 +63,7 @@ export const EuiCollapsibleNavFooter: EuiFlyoutFooterProps = ({
   const classes = classNames('euiCollapsibleNav__footer', className);
 
   const { isCollapsed, isPush } = useContext(EuiCollapsibleNavContext);
-  const euiTheme = useEuiTheme();
-  const styles = euiCollapsibleNavFooterStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiCollapsibleNavFooterStyles);
   const cssStyles = styles.euiCollapsibleNav__footer;
   const overflowWrapperStyles = [
     styles.euiFlyoutFooter__overflow,
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.tsx b/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.tsx
index a543037fcc4..765d8732f63 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_button/collapsible_nav_button.tsx
@@ -8,7 +8,7 @@
 
 import React, { forwardRef, useContext } from 'react';
 
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
 import { CommonProps } from '../../common';
 import { EuiButtonIcon, EuiButtonIconPropsForButton } from '../../button';
 import { useEuiI18n } from '../../i18n';
@@ -28,8 +28,7 @@ export const EuiCollapsibleNavButton = forwardRef<
     EuiCollapsibleNavContext
   );
 
-  const euiTheme = useEuiTheme();
-  const styles = euiCollapsibleNavButtonWrapperStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiCollapsibleNavButtonWrapperStyles);
   const cssStyles = [styles.euiCollapsibleNavButtonWrapper, styles[side]];
 
   const buttonStyles = [styles.euiCollapsibleNavButton, css];
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.tsx b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.tsx
index bbb7eaf3f5b..0483895d6f3 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_group/collapsible_nav_group.tsx
@@ -9,7 +9,7 @@
 import React, { FunctionComponent, HTMLAttributes, useContext } from 'react';
 import classNames from 'classnames';
 
-import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../../services';
 import { CommonProps } from '../../common';
 
 import { EuiCollapsibleNavContext } from '../context';
@@ -50,8 +50,7 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
     wrapperProps?.className
   );
 
-  const euiTheme = useEuiTheme();
-  const styles = euiCollapsibleNavGroupStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiCollapsibleNavGroupStyles);
   const cssStyles = [
     styles.euiCollapsibleNavGroup,
     isPush && isCollapsed
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx
index 92919174cce..2a7de2b32ad 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.tsx
@@ -9,7 +9,7 @@
 import React, { FunctionComponent, useContext } from 'react';
 import classNames from 'classnames';
 
-import { useEuiTheme } from '../../../../services';
+import { useEuiMemoizedStyles } from '../../../../services';
 import {
   EuiButtonIcon,
   EuiButtonIconPropsForAnchor,
@@ -43,10 +43,9 @@ export const EuiCollapsedNavButton: FunctionComponent<
   titleElement, // Extracted to avoid spreading to ...rest
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
   const { side } = useContext(EuiCollapsibleNavContext);
 
-  const buttonStyles = euiCollapsedNavButtonStyles(euiTheme);
+  const buttonStyles = useEuiMemoizedStyles(euiCollapsedNavButtonStyles);
   const buttonCssStyles = [
     buttonStyles.euiCollapsedNavButton,
     isSelected && buttonStyles.isSelected,
@@ -57,7 +56,7 @@ export const EuiCollapsedNavButton: FunctionComponent<
     linkProps?.className
   );
 
-  const tooltipStyles = euiCollapsedNavItemTooltipStyles(euiTheme);
+  const tooltipStyles = useEuiMemoizedStyles(euiCollapsedNavItemTooltipStyles);
   const tooltipCssStyles = [
     tooltipStyles.euiCollapsedNavItemTooltip,
     tooltipStyles[side],
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.tsx
index f1f07a03d06..bbd10cafa95 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_popover.tsx
@@ -8,7 +8,7 @@
 
 import React, { FunctionComponent, useState, useCallback } from 'react';
 
-import { useEuiTheme } from '../../../../services';
+import { useEuiMemoizedStyles } from '../../../../services';
 
 import { EuiPopover, EuiPopoverTitle } from '../../../popover';
 
@@ -34,8 +34,7 @@ export const EuiCollapsedNavPopover: FunctionComponent<
   isSelected,
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
-  const styles = euiCollapsedNavPopoverStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiCollapsedNavPopoverStyles);
 
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
   const togglePopover = useCallback(
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.tsx
index 6aeb62ba4bf..8715d81d0e1 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_accordion.tsx
@@ -9,7 +9,7 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import classNames from 'classnames';
 
-import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../../services';
 import { EuiAccordion } from '../../accordion';
 
 import {
@@ -51,8 +51,7 @@ export const EuiCollapsibleNavAccordion: FunctionComponent<
   const classes = classNames('euiCollapsibleNavAccordion', className);
   const groupID = useGeneratedHtmlId({ conditionalId: id });
 
-  const euiTheme = useEuiTheme();
-  const styles = euiCollapsibleNavAccordionStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiCollapsibleNavAccordionStyles);
   const cssStyles = [
     styles.euiCollapsibleNavAccordion,
     isSubItem ? styles.isSubItem : styles.isTopItem,
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group.tsx
index 0cafca8f208..73aad3be6fa 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_group.tsx
@@ -9,7 +9,7 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import classNames from 'classnames';
 
-import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../../services';
 
 import {
   type _SharedEuiCollapsibleNavItemProps,
@@ -47,8 +47,7 @@ export const EuiCollapsibleNavGroup: FunctionComponent<
 }) => {
   const classes = classNames('euiCollapsibleNavGroup', className);
 
-  const euiTheme = useEuiTheme();
-  const sharedStyles = euiCollapsibleNavItemVariables(euiTheme);
+  const sharedStyles = useEuiMemoizedStyles(euiCollapsibleNavItemVariables);
   const cssStyles = !isSubItem
     ? {
         css: {
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx
index b887835c01f..dbb46a61d84 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx
@@ -15,7 +15,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
 import { CommonProps, ExclusiveUnion } from '../../common';
 
 import { EuiIcon, IconType, EuiIconProps } from '../../icon';
@@ -247,8 +247,7 @@ export const EuiCollapsibleNavSubItems: FunctionComponent<
 > = ({ items, isSubItem, isGroup, className, ...rest }) => {
   const classes = classNames('euiCollapsibleNavItem__items', className);
 
-  const euiTheme = useEuiTheme();
-  const styles = euiCollapsibleNavSubItemsStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiCollapsibleNavSubItemsStyles);
   const cssStyles = [
     styles.euiCollapsibleNavItem__items,
     isGroup ? styles.isGroup : isSubItem ? styles.isSubItem : styles.isTopItem,
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.tsx
index 6a8d406e2e8..eba54251b86 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_link.tsx
@@ -9,7 +9,7 @@
 import React, { FunctionComponent, ReactNode } from 'react';
 import classNames from 'classnames';
 
-import { useEuiTheme } from '../../../services';
+import { useEuiMemoizedStyles } from '../../../services';
 import { EuiLink, EuiLinkProps } from '../../link';
 
 import type {
@@ -58,8 +58,7 @@ export const EuiCollapsibleNavLink: FunctionComponent<
     className,
     isInteractive && linkProps?.className
   );
-  const euiTheme = useEuiTheme();
-  const styles = euiCollapsibleNavLinkStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiCollapsibleNavLinkStyles);
   const cssStyles = [
     styles.euiCollapsibleNavLink,
     isSelected && styles.isSelected,

From 537b5bcacdba7790c756b2c3374506e159112e9d Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 29 Mar 2024 10:15:34 -0700
Subject: [PATCH 09/11] [EuiCommentEvent] Memoize styles

---
 src/components/comment_list/comment_event.tsx | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/components/comment_list/comment_event.tsx b/src/components/comment_list/comment_event.tsx
index 7e1a56af706..f0e1d464deb 100644
--- a/src/components/comment_list/comment_event.tsx
+++ b/src/components/comment_list/comment_event.tsx
@@ -9,7 +9,7 @@
 import React, { FunctionComponent, ReactNode, useMemo } from 'react';
 import classNames from 'classnames';
 
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { useEuiBorderColorCSS } from '../../global_styling';
 import { CommonProps } from '../common';
 import { IconType } from '../icon';
@@ -118,24 +118,23 @@ export const EuiCommentEvent: FunctionComponent<EuiCommentEventProps> = ({
   /**
    * Styles
    */
-  const euiTheme = useEuiTheme();
   const borderStyles = useEuiBorderColorCSS();
 
-  const styles = euiCommentEventStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiCommentEventStyles);
   const cssStyles = [
     styles.euiCommentEvent,
     showEventBorders && styles.border,
     showEventBorders && borderStyles[eventColor!],
   ];
 
-  const headerStyles = euiCommentEventHeaderStyles(euiTheme);
+  const headerStyles = useEuiMemoizedStyles(euiCommentEventHeaderStyles);
   const cssHeaderStyles = [
     headerStyles.euiCommentEvent__header,
     showEventBorders && headerStyles.border,
     showEventBorders && borderStyles[eventColor!],
   ];
 
-  const bodyStyles = euiCommentEventBodyStyles(euiTheme);
+  const bodyStyles = useEuiMemoizedStyles(euiCommentEventBodyStyles);
   const cssBodyStyles = [bodyStyles.euiCommentEvent__body, bodyStyles[type]];
 
   return (

From 5f98d22c34c353c430118dc31cc47582a91bcd7d Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Fri, 29 Mar 2024 10:16:14 -0700
Subject: [PATCH 10/11] [EuiContextMenuItem] Memoize styles

---
 src/components/context_menu/context_menu_item.tsx | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/src/components/context_menu/context_menu_item.tsx b/src/components/context_menu/context_menu_item.tsx
index c87c3f75f6f..e2088d0311c 100644
--- a/src/components/context_menu/context_menu_item.tsx
+++ b/src/components/context_menu/context_menu_item.tsx
@@ -19,7 +19,7 @@ import React, {
 import classNames from 'classnames';
 
 import {
-  useEuiTheme,
+  useEuiMemoizedStyles,
   getSecureRelForTarget,
   cloneElementWithCss,
 } from '../../services';
@@ -104,8 +104,7 @@ export const EuiContextMenuItem: FunctionComponent<Props> = ({
 
   const classes = classNames('euiContextMenuItem', className);
 
-  const euiTheme = useEuiTheme();
-  const styles = euiContextMenuItemStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiContextMenuItemStyles);
   const cssStyles = [
     styles.euiContextMenuItem,
     styles.sizes[size],

From f0452142d49ec142b7e6d5bfdf67c79c1334ab4e Mon Sep 17 00:00:00 2001
From: Cee Chen <constance.chen@elastic.co>
Date: Mon, 1 Apr 2024 22:48:32 -0700
Subject: [PATCH 11/11] [PR feedback] EuiAspectRatio changes

---
 .../aspect_ratio/aspect_ratio.test.tsx        | 21 +++++++--
 src/components/aspect_ratio/aspect_ratio.tsx  | 45 ++++++++++++-------
 2 files changed, 46 insertions(+), 20 deletions(-)

diff --git a/src/components/aspect_ratio/aspect_ratio.test.tsx b/src/components/aspect_ratio/aspect_ratio.test.tsx
index c98b255cd73..f5acce25770 100644
--- a/src/components/aspect_ratio/aspect_ratio.test.tsx
+++ b/src/components/aspect_ratio/aspect_ratio.test.tsx
@@ -31,21 +31,36 @@ describe('EuiAspectRatio', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  it('merges child styles', () => {
+  it('merges all styles', () => {
     const { getByTestSubject } = render(
-      <EuiAspectRatio height={4} width={9}>
+      <EuiAspectRatio height={4} width={9} style={{ color: 'bronze' }}>
         <div data-test-subj="child" style={{ backgroundColor: 'salmon' }} />
       </EuiAspectRatio>
     );
 
     expect(getByTestSubject('child')).toHaveStyle({
+      color: 'bronze',
       'background-color': 'salmon',
+      'inline-size': '100%', // jsdom doesn't know how to interpret `aspect-ratio` CSS, so we just check for something it does know how to render
     });
   });
 
+  it('merges all classNames', () => {
+    const { getByTestSubject } = render(
+      <EuiAspectRatio height={4} width={9} className="hello">
+        <div data-test-subj="child" className="world" />
+      </EuiAspectRatio>
+    );
+
+    const finalDiv = getByTestSubject('child');
+    expect(finalDiv).toHaveClass('euiAspectRatio');
+    expect(finalDiv).toHaveClass('hello');
+    expect(finalDiv).toHaveClass('world');
+  });
+
   test('maxWidth', () => {
     const { getByTestSubject } = render(
-      <EuiAspectRatio height={16} width={9} maxWidth={500} {...requiredProps}>
+      <EuiAspectRatio height={16} width={9} maxWidth={500}>
         <div data-test-subj="child" />
       </EuiAspectRatio>
     );
diff --git a/src/components/aspect_ratio/aspect_ratio.tsx b/src/components/aspect_ratio/aspect_ratio.tsx
index 56153c9cf8d..2ee45f7c532 100644
--- a/src/components/aspect_ratio/aspect_ratio.tsx
+++ b/src/components/aspect_ratio/aspect_ratio.tsx
@@ -8,37 +8,47 @@
 
 import React, {
   FunctionComponent,
+  HTMLAttributes,
   ReactElement,
   CSSProperties,
   useMemo,
 } from 'react';
 import classNames from 'classnames';
 
+import { CommonProps } from '../common';
 import { logicalStyles } from '../../global_styling';
 
-export type EuiAspectRatioProps = {
-  /**
-   * Aspect ratio height. For example 9 would be widescreen video.
-   */
-  height: number;
-  /**
-   * Aspect ratio width. For example 16 would be widescreen video.
-   */
-  width: number;
-  /**
-   * The maximum width you want the child to stretch to.
-   */
-  maxWidth?: CSSProperties['width'];
-  children: ReactElement<any>;
-};
+export type EuiAspectRatioProps = HTMLAttributes<HTMLDivElement> &
+  CommonProps & {
+    /**
+     * Aspect ratio height. For example 9 would be widescreen video.
+     */
+    height: number;
+    /**
+     * Aspect ratio width. For example 16 would be widescreen video.
+     */
+    width: number;
+    /**
+     * The maximum width you want the child to stretch to.
+     */
+    maxWidth?: CSSProperties['width'];
+    children: ReactElement<any>;
+  };
 
 export const EuiAspectRatio: FunctionComponent<EuiAspectRatioProps> = ({
   children,
+  className,
+  style,
   height,
   width,
   maxWidth,
+  ...rest
 }) => {
-  const classes = classNames('euiAspectRatio', children.props.className);
+  const classes = classNames(
+    'euiAspectRatio',
+    className,
+    children.props.className
+  );
 
   const euiAspectRatioStyle = useMemo(
     () =>
@@ -52,7 +62,8 @@ export const EuiAspectRatio: FunctionComponent<EuiAspectRatioProps> = ({
   );
 
   return React.cloneElement(children, {
+    ...rest,
     className: classes,
-    style: { ...children.props.style, ...euiAspectRatioStyle },
+    style: { ...children.props.style, ...euiAspectRatioStyle, ...style },
   });
 };