[Emotion][Theming] Add new consumer-configurable font.defaultUnits token

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

@@ -1,6 +1,6 @@
 import React, { FunctionComponent, useState } from 'react';
 import { css } from '@emotion/react';
-import { useEuiTheme } from '../../../../../src/services';
+import { useEuiTheme, EuiThemeProvider } from '../../../../../src/services';
 import {
   EuiBasicTable,
   EuiButtonGroup,
@@ -9,15 +9,16 @@ import {
   EuiDescribedFormGroup,
   EuiPanel,
   EuiSpacer,
+  EuiText,
 } from '../../../../../src/components';
 
 import {
   euiFontSize,
   useEuiFontSize,
   EuiThemeFontWeights,
   EuiThemeFontScales,
-  EuiThemeFontSizeMeasurements,
-  _EuiThemeFontSizeMeasurement,
+  EuiThemeFontUnits,
+  _EuiThemeFontUnit,
 } from '../../../../../src/global_styling';
 
 import { EuiThemeFontBase, EuiThemeFontWeight, ThemeRowType } from '../_props';
@@ -104,6 +105,26 @@ export const FontJS = () => {
         snippet={'font-feature-settings: ${euiTheme.font.featureSettings};'}
         snippetLanguage="emotion"
       />
+
+      <ThemeExample
+        title={<code>euiTheme.font.defaultUnits</code>}
+        description={getDescription(baseProps.defaultUnits)}
+        example={
+          <EuiThemeProvider modify={{ font: { defaultUnits: 'px' } }}>
+            <EuiText>
+              My font size and line height is set using <EuiCode>px</EuiCode>{' '}
+              and not <EuiCode>rem</EuiCode>
+            </EuiText>
+          </EuiThemeProvider>
+        }
+        snippet={`<EuiProvider modify={{ font: { defaultUnits: 'px' } }}>
+  <EuiText>
+    <p>Hello world</p>
+  </EuiText>
+</EuiProvider>
+`}
+        snippetLanguage="jsx"
+      />
     </>
   );
 };
@@ -229,40 +250,36 @@ export const FontScaleValuesJS = () => {
   const euiThemeContext = useEuiTheme();
   const scaleKeys = EuiThemeFontScales;
 
-  const measurementButtons = EuiThemeFontSizeMeasurements.map((m) => {
+  const unitButtons = EuiThemeFontUnits.map((m) => {
     return {
       id: m,
       label: m,
     };
   });
 
-  const [measurementSelected, setMeasurementSelected] = useState(
-    measurementButtons[0].id
-  );
+  const [unitSelected, setUnitSelected] = useState(unitButtons[0].id);
 
   return (
     <>
       <EuiPanel color="accent">
         <EuiDescribedFormGroup
           fullWidth
-          title={<h3>Value measurements</h3>}
+          title={<h3>Font units</h3>}
           description={
             <p>
-              The font sizing function also supports the three main measurements
-              for font-size, <EuiCode>rem | px | em</EuiCode>, with{' '}
+              The font sizing function also supports three main units for font
+              size and line height: <EuiCode>rem | px | em</EuiCode>, with{' '}
               <EuiCode>rem</EuiCode> being default for all EUI components.
             </p>
           }
         >
           <EuiSpacer />
           <EuiButtonGroup
             buttonSize="m"
-            legend="Value measurement to show in table"
-            options={measurementButtons}
-            idSelected={measurementSelected}
-            onChange={(id) =>
-              setMeasurementSelected(id as _EuiThemeFontSizeMeasurement)
-            }
+            legend="Value unit to show in table"
+            options={unitButtons}
+            idSelected={unitSelected}
+            onChange={(id) => setUnitSelected(id as _EuiThemeFontUnit)}
             color="accent"
             isFullWidth
           />
@@ -272,23 +289,17 @@ export const FontScaleValuesJS = () => {
       <EuiBasicTable<FontScaleDetails>
         tableLayout="auto"
         items={scaleKeys.map((scale, index) => {
+          const { fontSize, lineHeight } = euiFontSize(euiThemeContext, scale, {
+            unit: unitSelected,
+          });
+
           return {
             id: scale,
             value: `useEuiFontSize('${scale}'${
-              measurementSelected !== 'rem'
-                ? `,\n  { measurement: '${measurementSelected}' }\n`
-                : ''
+              unitSelected !== 'rem' ? `, { unit: '${unitSelected}' }` : ''
             })`,
-            size: `${
-              euiFontSize(euiThemeContext, scale, {
-                measurement: measurementSelected,
-              }).fontSize
-            }`,
-            lineHeight: `${
-              euiFontSize(euiThemeContext, scale, {
-                measurement: measurementSelected,
-              }).lineHeight
-            }`,
+            size: String(fontSize),
+            lineHeight: String(lineHeight),
             index,
           };
         })}
@@ -302,7 +313,7 @@ export const FontScaleValuesJS = () => {
               <div
                 css={css`
                   ${euiFontSize(euiThemeContext, item.id, {
-                    measurement: measurementSelected,
+                    unit: unitSelected,
                   })}
                 `}
               >

src/components/markdown_editor/markdown_format.styles.ts

@@ -24,8 +24,8 @@ const euiScaleMarkdownFormatText = (
   options: _FontScaleOptions
 ) => {
   const { fontSize, lineHeight } = euiFontSize(euiTheme, 'm', options);
-  const { measurement } = options;
-  const lineHeightSize = measurement === 'em' ? `${lineHeight}em` : lineHeight;
+  const { unit } = options;
+  const lineHeightSize = unit === 'em' ? `${lineHeight}em` : lineHeight;
 
   // Custom scales
   const tablePaddingVertical = mathWithUnits(fontSize, (x) => x / 4);
@@ -67,25 +67,22 @@ export const euiMarkdownFormatStyles = (euiTheme: UseEuiTheme) => ({
   // Text sizes
   m: css`
     ${euiScaleMarkdownFormatText(euiTheme, {
-      measurement: 'rem',
       customScale: 'm',
     })}
   `,
   s: css`
     ${euiScaleMarkdownFormatText(euiTheme, {
-      measurement: 'rem',
       customScale: 's',
     })}
   `,
   xs: css`
     ${euiScaleMarkdownFormatText(euiTheme, {
-      measurement: 'rem',
       customScale: 'xs',
     })}
   `,
   relative: css`
     ${euiScaleMarkdownFormatText(euiTheme, {
-      measurement: 'em',
+      unit: 'em',
     })}
   `,
 });

src/components/text/text.styles.ts

@@ -46,8 +46,8 @@ const euiScaleText = (
 ) => {
   const { fontSize, lineHeight } = euiFontSize(euiThemeContext, 'm', options);
   const { euiTheme } = euiThemeContext;
-  const { measurement, customScale: _customScale } = options;
-  const lineHeightSize = measurement === 'em' ? `${lineHeight}em` : lineHeight;
+  const { unit, customScale: _customScale } = options;
+  const lineHeightSize = unit === 'em' ? `${lineHeight}em` : lineHeight;
 
   const headings = {
     h1: euiTitle(euiThemeContext, 'l', options),
@@ -345,25 +345,22 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
     // Sizes
     m: css`
       ${euiScaleText(euiThemeContext, {
-        measurement: 'rem',
         customScale: 'm',
       })}
     `,
     s: css`
       ${euiScaleText(euiThemeContext, {
-        measurement: 'rem',
         customScale: 's',
       })}
     `,
     xs: css`
       ${euiScaleText(euiThemeContext, {
-        measurement: 'rem',
         customScale: 'xs',
       })}
     `,
     relative: css`
       ${euiScaleText(euiThemeContext, {
-        measurement: 'em',
+        unit: 'em',
       })}
     `,
   };

src/global_styling/functions/__snapshots__/typography.test.tsx.snap

@@ -0,0 +1,45 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`euiFontSizeFromScale scale l 1`] = `"1.5714rem"`;
+
+exports[`euiFontSizeFromScale scale m 1`] = `"1.1429rem"`;
+
+exports[`euiFontSizeFromScale scale s 1`] = `"1.0000rem"`;
+
+exports[`euiFontSizeFromScale scale xl 1`] = `"1.9286rem"`;
+
+exports[`euiFontSizeFromScale scale xs 1`] = `"0.8571rem"`;
+
+exports[`euiFontSizeFromScale scale xxl 1`] = `"2.4286rem"`;
+
+exports[`euiFontSizeFromScale scale xxs 1`] = `"0.7857rem"`;
+
+exports[`euiFontSizeFromScale scale xxxs 1`] = `"0.6429rem"`;
+
+exports[`euiFontSizeFromScale unit em 1`] = `"1em"`;
+
+exports[`euiFontSizeFromScale unit px 1`] = `"16px"`;
+
+exports[`euiFontSizeFromScale unit rem 1`] = `"1.1429rem"`;
+
+exports[`euiLineHeightFromBaseline scale l 1`] = `"1.7143rem"`;
+
+exports[`euiLineHeightFromBaseline scale m 1`] = `"1.7143rem"`;
+
+exports[`euiLineHeightFromBaseline scale s 1`] = `"1.4286rem"`;
+
+exports[`euiLineHeightFromBaseline scale xl 1`] = `"2.2857rem"`;
+
+exports[`euiLineHeightFromBaseline scale xs 1`] = `"1.1429rem"`;
+
+exports[`euiLineHeightFromBaseline scale xxl 1`] = `"2.8571rem"`;
+
+exports[`euiLineHeightFromBaseline scale xxs 1`] = `"1.1429rem"`;
+
+exports[`euiLineHeightFromBaseline scale xxxs 1`] = `"0.8571rem"`;
+
+exports[`euiLineHeightFromBaseline unit em 1`] = `"1.5000"`;
+
+exports[`euiLineHeightFromBaseline unit px 1`] = `"24px"`;
+
+exports[`euiLineHeightFromBaseline unit rem 1`] = `"1.7143rem"`;

src/global_styling/functions/typography.test.tsx

@@ -0,0 +1,107 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, PropsWithChildren } from 'react';
+import { renderHook } from '@testing-library/react';
+
+import { EuiProvider } from '../../components';
+import { useEuiTheme } from '../../services';
+import { EuiThemeFontScales, EuiThemeFontUnits } from '../variables/typography';
+
+import { euiFontSizeFromScale, euiLineHeightFromBaseline } from './typography';
+
+// Default euiTheme to use for most tests
+const { euiTheme } = renderHook(useEuiTheme).result.current;
+
+describe('euiFontSizeFromScale', () => {
+  describe('scale', () => {
+    EuiThemeFontScales.forEach((scale) => {
+      test(scale, () => {
+        expect(euiFontSizeFromScale(scale, euiTheme)).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('custom scale', () => {
+    it('allows passing a custom modifier to the existing scale', () => {
+      expect(
+        euiFontSizeFromScale('xxxs', euiTheme, { customScale: 's' })
+      ).toEqual('0.5625rem');
+    });
+  });
+
+  describe('unit', () => {
+    EuiThemeFontUnits.forEach((unit) => {
+      test(unit, () => {
+        const output = euiFontSizeFromScale('m', euiTheme, { unit });
+        expect(output.endsWith(unit)).toBe(true);
+        expect(output).toMatchSnapshot();
+      });
+    });
+
+    it('falls back to the `defaultUnits` theme token if a unit is not passed', () => {
+      const wrapper: FunctionComponent<PropsWithChildren> = ({ children }) => (
+        <EuiProvider modify={{ font: { defaultUnits: 'px' } }}>
+          {children}
+        </EuiProvider>
+      );
+      const { euiTheme: modifiedEuiTheme } = renderHook(useEuiTheme, {
+        wrapper,
+      }).result.current;
+
+      expect(euiFontSizeFromScale('m', modifiedEuiTheme)).toEqual('16px');
+    });
+  });
+});
+
+describe('euiLineHeightFromBaseline', () => {
+  describe('scale', () => {
+    EuiThemeFontScales.forEach((scale) => {
+      test(scale, () => {
+        expect(euiLineHeightFromBaseline(scale, euiTheme)).toMatchSnapshot();
+      });
+    });
+  });
+
+  describe('custom scale', () => {
+    it('allows passing a custom modifier to the existing scale', () => {
+      expect(
+        euiLineHeightFromBaseline('xxxs', euiTheme, { customScale: 's' })
+      ).toEqual('0.8571rem');
+    });
+  });
+
+  describe('unit', () => {
+    EuiThemeFontUnits.forEach((unit) => {
+      test(unit, () => {
+        const output = euiLineHeightFromBaseline('m', euiTheme, { unit });
+
+        if (unit !== 'em') {
+          expect(output.endsWith(unit)).toBe(true);
+        } else {
+          expect(Number(output)).not.toBeNaN();
+        }
+
+        expect(output).toMatchSnapshot();
+      });
+    });
+
+    it('falls back to the `defaultUnits` theme token if a unit is not passed', () => {
+      const wrapper: FunctionComponent<PropsWithChildren> = ({ children }) => (
+        <EuiProvider modify={{ font: { defaultUnits: 'px' } }}>
+          {children}
+        </EuiProvider>
+      );
+      const { euiTheme: modifiedEuiTheme } = renderHook(useEuiTheme, {
+        wrapper,
+      }).result.current;
+
+      expect(euiLineHeightFromBaseline('m', modifiedEuiTheme)).toEqual('24px');
+    });
+  });
+});