[Emotion] Memoize typography styles & mixins (#7543)

src-docs/src/views/theme/typography/_text_numbers.tsx

@@ -7,12 +7,14 @@ import {
   EuiTextAlign,
   EuiFlexGrid,
   EuiFlexItem,
-  useEuiNumberFormat,
+  useEuiTheme,
+  euiNumberFormat,
 } from '../../../../../src';
 import { css } from '@emotion/react';
 import { ThemeExample } from '../_components/_theme_example';
 
 export default () => {
+  const euiTheme = useEuiTheme();
   const themeContext = useContext(ThemeContext);
   const currentLanguage = themeContext.themeLanguage;
   const showSass = currentLanguage.includes('sass');
@@ -22,8 +24,8 @@ export default () => {
       {/* Mixin */}
       {!showSass ? (
         <ThemeExample
-          title={<code>useEuiNumberFormat()</code>}
-          type="hook"
+          title={<code>euiNumberFormat(euiTheme)</code>}
+          type="function"
           description={
             <p>
               Applies{' '}
@@ -49,7 +51,7 @@ export default () => {
                 <EuiFlexItem>
                   <p
                     css={css`
-                      ${useEuiNumberFormat()}
+                      ${euiNumberFormat(euiTheme)}
                     `}
                   >
                     <strong>With function</strong>
@@ -62,7 +64,7 @@ export default () => {
               </EuiFlexGrid>
             </EuiTextAlign>
           }
-          snippet={'${useEuiNumberFormat()}'}
+          snippet={'${euiNumberFormat(useEuiTheme())}'}
           snippetLanguage="emotion"
         />
       ) : (
@@ -84,7 +86,7 @@ export default () => {
         type="className"
         description={
           <p>
-            Applies the <EuiCode>useEuiNumberFormat()</EuiCode> styles as an
+            Applies the <EuiCode>euiNumberFormat()</EuiCode> styles as an
             overriding CSS utility class.
           </p>
         }

src/components/facet/facet_button.styles.ts

@@ -14,33 +14,30 @@ import {
   logicalTextAlignCSS,
 } from '../../global_styling';
 
-import { euiLinkFocusCSS } from '../link/link.styles';
-
 export const euiFacetButtonStyles = ({ euiTheme }: UseEuiTheme) => ({
   // Base
   euiFacetButton: css`
     ${logicalTextAlignCSS('left')}
 
-    &:hover,
-    &:focus {
-      /* Make sure the quantity doesn't get an underline on hover */
-      &:not(:disabled) [class*='euiFacetButton__text'] {
-        text-decoration: underline;
+    &:not(:disabled) {
+      &:hover,
+      &:focus {
+        /* Make sure the quantity doesn't get an underline on hover */
+        text-decoration: none;
+
+        .euiFacetButton__text {
+          text-decoration: underline;
+        }
       }
-    }
 
-    &:focus:not(:disabled) [class*='euiFacetButton__text'] {
-      ${euiLinkFocusCSS(euiTheme)}
+      &:focus .euiFacetButton__text {
+        text-decoration-thickness: ${euiTheme.border.width.thick};
+      }
     }
 
     &:disabled {
       color: ${euiTheme.colors.disabledText};
       pointer-events: none;
-
-      &:hover,
-      &:focus {
-        text-decoration: none;
-      }
     }
   `,
 });

src/components/link/external_link_icon.tsx

@@ -8,7 +8,7 @@
 
 import React, { FunctionComponent, AnchorHTMLAttributes } from 'react';
 
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles, UseEuiTheme } from '../../services';
 import { logicalStyle } from '../../global_styling';
 import { EuiIcon, EuiIconProps } from '../icon';
 import { EuiI18n, useEuiI18n } from '../i18n';
@@ -28,10 +28,13 @@ export type EuiExternalLinkIconProps = {
   external?: boolean;
 };
 
+const iconStyle = ({ euiTheme }: UseEuiTheme) =>
+  logicalStyle('margin-left', euiTheme.size.xs);
+
 export const EuiExternalLinkIcon: FunctionComponent<
   EuiExternalLinkIconProps & Partial<EuiIconProps>
 > = ({ target, external, ...rest }) => {
-  const { euiTheme } = useEuiTheme();
+  const iconCssStyle = useEuiMemoizedStyles(iconStyle);
 
   const showExternalLinkIcon =
     (target === '_blank' && external !== false) || external === true;
@@ -45,7 +48,7 @@ export const EuiExternalLinkIcon: FunctionComponent<
     <>
       {showExternalLinkIcon && (
         <EuiIcon
-          css={logicalStyle('margin-left', euiTheme.size.xs)}
+          css={iconCssStyle}
           aria-label={iconAriaLabel}
           size="s"
           type="popout"

src/components/link/link.styles.ts

@@ -10,42 +10,20 @@ import { css } from '@emotion/react';
 import { UseEuiTheme } from '../../services';
 import { euiFocusRing, logicalTextAlignCSS } from '../../global_styling';
 
-const _colorCSS = (color: string) => {
-  return `
-    color: ${color};
-
-    &:target {
-      color: darken(${color}, 10%);
-    }
-  `;
-};
-
-export const euiLinkHoverCSS = () => {
-  return `
-    text-decoration: underline;
-  `;
-};
-
-export const euiLinkFocusCSS = (euiTheme: UseEuiTheme['euiTheme']) => {
-  return `
-    text-decoration: underline;
-    text-decoration-thickness: ${euiTheme.border.width.thick};
-  `;
-};
-
 export const euiLinkCSS = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
   return `
     font-weight: ${euiTheme.font.weight.medium};
     ${logicalTextAlignCSS('left')}
 
     &:hover {
-      ${euiLinkHoverCSS()}
+      text-decoration: underline;
     }
 
     &:focus {
       ${euiFocusRing(euiThemeContext, 'outset')}
-      ${euiLinkFocusCSS(euiTheme)}
+      text-decoration: underline;
+      text-decoration-thickness: ${euiTheme.border.width.thick};
     }
   `;
 };
@@ -85,3 +63,13 @@ export const euiLinkStyles = (euiThemeContext: UseEuiTheme) => {
     text: css(_colorCSS(euiTheme.colors.text)),
   };
 };
+
+const _colorCSS = (color: string) => {
+  return `
+    color: ${color};
+
+    &:target {
+      color: darken(${color}, 10%);
+    }
+  `;
+};

src/components/link/link.tsx

@@ -14,7 +14,7 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { getSecureRelForTarget, useEuiTheme } from '../../services';
+import { getSecureRelForTarget, useEuiMemoizedStyles } from '../../services';
 import { CommonProps, ExclusiveUnion } from '../common';
 import { validateHref } from '../../services/security/href_validator';
 
@@ -92,8 +92,7 @@ const EuiLink = forwardRef<HTMLAnchorElement | HTMLButtonElement, EuiLinkProps>(
     },
     ref
   ) => {
-    const euiTheme = useEuiTheme();
-    const styles = euiLinkStyles(euiTheme);
+    const styles = useEuiMemoizedStyles(euiLinkStyles);
     const cssStyles = [styles.euiLink];
 
     const isHrefValid = !href || validateHref(href);

src/components/text/text.tsx

@@ -10,7 +10,7 @@ import React, { FunctionComponent, HTMLAttributes, CSSProperties } from 'react';
 import classNames from 'classnames';
 import { CommonProps } from '../common';
 
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiTextStyles } from './text.styles';
 
 import { TextColor, EuiTextColor } from './text_color';
@@ -44,8 +44,7 @@ export const EuiText: FunctionComponent<EuiTextProps> = ({
   className,
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
-  const styles = euiTextStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiTextStyles);
   const cssStyles = [
     styles.euiText,
     !grow ? styles.constrainedWidth : undefined,

src/components/text/text_align.styles.ts

@@ -9,7 +9,7 @@
 import { css } from '@emotion/react';
 import { logicalTextAlignCSS } from '../../global_styling';
 
-export const euiTextAlignStyles = () => ({
+export const euiTextAlignStyles = {
   euiTextAlign: css``,
   left: css`
     ${logicalTextAlignCSS('left')}
@@ -20,4 +20,4 @@ export const euiTextAlignStyles = () => ({
   center: css`
     ${logicalTextAlignCSS('center')}
   `,
-});
+};

src/components/text/text_align.tsx

@@ -14,7 +14,7 @@ import React, {
 import { CommonProps } from '../common';
 import { cloneElementWithCss } from '../../services';
 
-import { euiTextAlignStyles } from './text_align.styles';
+import { euiTextAlignStyles as styles } from './text_align.styles';
 
 export const ALIGNMENTS = ['left', 'right', 'center'] as const;
 export type TextAlignment = (typeof ALIGNMENTS)[number];
@@ -35,7 +35,6 @@ export const EuiTextAlign: FunctionComponent<EuiTextAlignProps> = ({
   cloneElement = false,
   ...rest
 }) => {
-  const styles = euiTextAlignStyles();
   const cssStyles = [styles.euiTextAlign, styles[textAlign]];
 
   const props = { css: cssStyles, ...rest };

src/components/text/text_color.tsx

@@ -14,7 +14,7 @@ import React, {
 } from 'react';
 
 import { CommonProps } from '../common';
-import { useEuiTheme, cloneElementWithCss } from '../../services';
+import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
 
 import { euiTextColorStyles } from './text_color.styles';
 
@@ -60,8 +60,7 @@ export const EuiTextColor: FunctionComponent<EuiTextColorProps> = ({
 }) => {
   const isNamedColor = COLORS.includes(color as TextColor);
 
-  const euiTheme = useEuiTheme();
-  const styles = euiTextColorStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiTextColorStyles);
   const cssStyles = [
     styles.euiTextColor,
     isNamedColor ? styles[color as TextColor] : styles.customColor,

src/components/title/title.styles.test.ts

@@ -8,15 +8,17 @@
 
 import { renderHook } from '@testing-library/react';
 
+import { useEuiTheme } from '../../services';
+
 import { TITLE_SIZES } from './title';
-import { useEuiTitle } from './title.styles';
+import { euiTitle } from './title.styles';
 
 describe('euiTitle mixin', () => {
   describe('returns a static object of title font properties for each title size', () => {
     TITLE_SIZES.forEach((size) => {
       it(size, () => {
         expect(
-          renderHook(() => useEuiTitle(size)).result.current
+          renderHook(() => euiTitle(useEuiTheme(), size)).result.current
         ).toMatchSnapshot();
       });
     });

src/components/title/title.styles.ts

@@ -8,7 +8,7 @@
 
 import { CSSProperties } from 'react';
 import { css } from '@emotion/react';
-import { UseEuiTheme, useEuiTheme } from '../../services';
+import { UseEuiTheme } from '../../services';
 import {
   euiTextBreakWord,
   euiFontSize,
@@ -56,15 +56,6 @@ export const euiTitle = (
   };
 };
 
-// Hook version
-export const useEuiTitle = (
-  scale: EuiTitleSize,
-  options?: _FontScaleOptions
-): EuiThemeTitle => {
-  const euiTheme = useEuiTheme();
-  return euiTitle(euiTheme, scale, options);
-};
-
 /**
  * Styles
  */

src/components/title/title.tsx

@@ -8,10 +8,12 @@
 
 import { FunctionComponent, ReactElement } from 'react';
 import classNames from 'classnames';
-import { useEuiTheme, cloneElementWithCss } from '../../services';
-import { euiTitleStyles } from './title.styles';
+
+import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
 import { CommonProps } from '../common';
 
+import { euiTitleStyles } from './title.styles';
+
 export const TITLE_SIZES = ['xxxs', 'xxs', 'xs', 's', 'm', 'l'] as const;
 export type EuiTitleSize = (typeof TITLE_SIZES)[number];
 
@@ -35,8 +37,7 @@ export const EuiTitle: FunctionComponent<EuiTitleProps> = ({
   textTransform,
   ...rest
 }) => {
-  const euiTheme = useEuiTheme();
-  const styles = euiTitleStyles(euiTheme);
+  const styles = useEuiMemoizedStyles(euiTitleStyles);
   const cssStyles = [
     styles.euiTitle,
     textTransform ? styles[textTransform] : undefined,

src/global_styling/mixins/_typography.test.ts

@@ -8,12 +8,13 @@
 
 import { renderHook } from '@testing-library/react';
 
+import { useEuiTheme } from '../../services';
 import { EuiThemeFontScales, EuiThemeFontUnits } from '../variables/typography';
 import {
   useEuiFontSize,
   euiTextBreakWord,
   euiTextTruncate,
-  useEuiNumberFormat,
+  euiNumberFormat,
 } from './_typography';
 
 describe('euiFontSize', () => {
@@ -66,7 +67,7 @@ describe('euiTextTruncate', () => {
 describe('euiNumberFormat', () => {
   it('returns a string of CSS text', () => {
     expect(
-      renderHook(() => useEuiNumberFormat()).result.current
+      renderHook(() => euiNumberFormat(useEuiTheme())).result.current
     ).toMatchSnapshot();
   });
 });