[Emotion][perf] Memoize low-impact components (A-C)

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

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()}
+    }
+  `,
+};

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);
 };

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"

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,

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"
 />

src/components/aspect_ratio/aspect_ratio.test.tsx

@@ -13,83 +13,45 @@ 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>
     );
 
     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',
     });
   });
 });

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 },
+  });
 };

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"
 />
 `;

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 */

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();