[Emotion][microperf] Separate form max-width variable to its own utility

packages/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.styles.ts

@@ -10,15 +10,15 @@ import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../../../services';
 import { logicalCSS } from '../../../../global_styling';
-import { euiFormVariables } from '../../../form/form.styles';
+import { euiFormMaxWidth } from '../../../form/form.styles';
 
 export const euiQuickSelectPopoverStyles = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme } = euiThemeContext;
-  const { maxWidth } = euiFormVariables(euiThemeContext);
+  const formMaxWidth = euiFormMaxWidth(euiThemeContext);
 
   return {
     euiQuickSelectPopover: css`
-      ${logicalCSS('width', maxWidth)}
+      ${logicalCSS('width', formMaxWidth)}
       ${logicalCSS('max-width', '100%')}
     `,
     euiQuickSelectPopoverButton: css`

packages/eui/src/components/flyout/flyout.styles.ts

@@ -17,7 +17,7 @@ import {
 } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
 import { euiShadowXLarge } from '../../themes/amsterdam/global_styling/mixins';
-import { euiFormVariables } from '../form/form.styles';
+import { euiFormMaxWidth } from '../form/form.styles';
 
 export const FLYOUT_BREAKPOINT = 'm' as const;
 
@@ -150,7 +150,7 @@ const composeFlyoutSizing = (
   size: EuiFlyoutSize
 ) => {
   const euiTheme = euiThemeContext.euiTheme;
-  const form = euiFormVariables(euiThemeContext);
+  const formMaxWidth = euiFormMaxWidth(euiThemeContext);
 
   // 1. Calculating the minimum width based on the screen takeover breakpoint
   const flyoutSizes = {
@@ -162,7 +162,7 @@ const composeFlyoutSizing = (
 
     m: {
       // Calculated for forms plus padding
-      min: `${mathWithUnits(form.maxWidth, (x) => x + 24)}`,
+      min: `${mathWithUnits(formMaxWidth, (x) => x + 24)}`,
       width: '50vw',
       max: `${euiTheme.breakpoint.m}px`,
     },

packages/eui/src/components/form/form.styles.ts

@@ -22,6 +22,12 @@ import {
 } from '../../global_styling';
 import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
 
+// There are multiple components that only need the form max-width size &
+// don't need the extra overhead/color computing expense of every form var.
+// For microperf, we're making this its own util
+export const euiFormMaxWidth = ({ euiTheme }: UseEuiTheme) =>
+  mathWithUnits(euiTheme.size.base, (x) => x * 25);
+
 export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme, colorMode } = euiThemeContext;
   const isColorDark = colorMode === 'DARK';
@@ -33,7 +39,7 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
   const controlCompressedHeight = euiTheme.size.xl;
 
   const sizes = {
-    maxWidth: mathWithUnits(euiTheme.size.base, (x) => x * 25),
+    maxWidth: euiFormMaxWidth(euiThemeContext),
     controlHeight: controlHeight,
     controlCompressedHeight: controlCompressedHeight,
     controlPadding: euiTheme.size.m,

packages/eui/src/components/list_group/list_group.styles.ts

@@ -9,11 +9,11 @@
 import { css } from '@emotion/react';
 import { logicalCSS } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
-import { euiFormVariables } from '../form/form.styles';
+import { euiFormMaxWidth } from '../form/form.styles';
 
 export const euiListGroupStyles = (euiThemeContext: UseEuiTheme) => {
   const euiTheme = euiThemeContext.euiTheme;
-  const form = euiFormVariables(euiThemeContext);
+  const formMaxWidth = euiFormMaxWidth(euiThemeContext);
 
   return {
     // Base
@@ -36,7 +36,7 @@ export const euiListGroupStyles = (euiThemeContext: UseEuiTheme) => {
       border: ${euiTheme.border.thin};
     `,
     maxWidthDefault: css`
-      ${logicalCSS('max-width', form.maxWidth)}
+      ${logicalCSS('max-width', formMaxWidth)}
     `,
     // Gutter sizes
     none: css``,

packages/eui/src/components/popover/input_popover.tsx

@@ -26,7 +26,7 @@ import { keys, useCombinedRefs, useEuiTheme } from '../../services';
 import { CommonProps } from '../common';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiFocusTrap } from '../focus_trap';
-import { euiFormVariables } from '../form/form.styles';
+import { euiFormMaxWidth } from '../form/form.styles';
 
 import { EuiPopover, EuiPopoverProps } from './popover';
 
@@ -83,7 +83,7 @@ export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps> = ({
 }) => {
   const classes = classnames('euiInputPopover', className);
   const euiTheme = useEuiTheme();
-  const form = euiFormVariables(euiTheme);
+  const formMaxWidth = euiFormMaxWidth(euiTheme);
 
   /**
    * Ref setup
@@ -211,7 +211,7 @@ export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps> = ({
   return (
     <EuiPopover
       className={classes}
-      css={css(fullWidth ? undefined : logicalCSS('max-width', form.maxWidth))}
+      css={css(fullWidth ? undefined : logicalCSS('max-width', formMaxWidth))}
       display={display}
       button={input}
       popoverRef={inputRef}

packages/eui/src/components/search_bar/search_bar.styles.ts

@@ -10,14 +10,13 @@ import { css } from '@emotion/react';
 
 import { UseEuiTheme } from '../../services';
 import { euiBreakpoint, logicalCSS, mathWithUnits } from '../../global_styling';
-import { euiFormVariables } from '../form/form.styles';
+import { euiFormMaxWidth } from '../form/form.styles';
 
 export const euiSearchBar__searchHolder = (euiThemeContext: UseEuiTheme) => {
-  const { maxWidth } = euiFormVariables(euiThemeContext);
   return css`
     ${logicalCSS(
       'min-width',
-      mathWithUnits(maxWidth, (x) => x / 2)
+      mathWithUnits(euiFormMaxWidth(euiThemeContext), (x) => x / 2)
     )}
   `;
 };