[!! opinionated change] Rename all measurement related types and va…

…riables to `unit` instead - this feels like a far more understandable nomenclature that native CSS already uses - it's technically a breaking change, but I'm not even sure who's using these types or utilities, so tbh I'm more inclined to file it under our Emotion header
elastic · Aug 28, 2023 · 7d3c34a · 7d3c34a
1 parent c94844c
commit 7d3c34a
Show file tree

Hide file tree

Showing 9 changed files with 63 additions and 80 deletions.
diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx
@@ -17,8 +17,8 @@ import {
   useEuiFontSize,
   EuiThemeFontWeights,
   EuiThemeFontScales,
-  EuiThemeFontSizeMeasurements,
-  _EuiThemeFontSizeMeasurement,
+  EuiThemeFontUnits,
+  _EuiThemeFontUnit,
 } from '../../../../../src/global_styling';
 
 import { EuiThemeFontBase, EuiThemeFontWeight, ThemeRowType } from '../_props';
@@ -250,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
           />
@@ -293,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,
           };
         })}
@@ -323,7 +313,7 @@ export const FontScaleValuesJS = () => {
               <div
                 css={css`
                   ${euiFontSize(euiThemeContext, item.id, {
-                    measurement: measurementSelected,
+                    unit: unitSelected,
                   })}
                 `}
               >

diff --git a/src/components/markdown_editor/markdown_format.styles.ts b/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);
@@ -82,7 +82,7 @@ export const euiMarkdownFormatStyles = (euiTheme: UseEuiTheme) => ({
   `,
   relative: css`
     ${euiScaleMarkdownFormatText(euiTheme, {
-      measurement: 'em',
+      unit: 'em',
     })}
   `,
 });
diff --git a/src/components/text/text.styles.ts b/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),
@@ -360,7 +360,7 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
     `,
     relative: css`
       ${euiScaleText(euiThemeContext, {
-        measurement: 'em',
+        unit: 'em',
       })}
     `,
   };

diff --git a/src/global_styling/functions/__snapshots__/typography.test.tsx.snap b/src/global_styling/functions/__snapshots__/typography.test.tsx.snap
@@ -1,11 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`euiFontSizeFromScale measurement em 1`] = `"1em"`;
-
-exports[`euiFontSizeFromScale measurement px 1`] = `"16px"`;
-
-exports[`euiFontSizeFromScale measurement rem 1`] = `"1.1429rem"`;
-
 exports[`euiFontSizeFromScale scale l 1`] = `"1.5714rem"`;
 
 exports[`euiFontSizeFromScale scale m 1`] = `"1.1429rem"`;
@@ -22,11 +16,11 @@ exports[`euiFontSizeFromScale scale xxs 1`] = `"0.7857rem"`;
 
 exports[`euiFontSizeFromScale scale xxxs 1`] = `"0.6429rem"`;
 
-exports[`euiLineHeightFromBaseline measurement em 1`] = `"1.5000"`;
+exports[`euiFontSizeFromScale unit em 1`] = `"1em"`;
 
-exports[`euiLineHeightFromBaseline measurement px 1`] = `"24px"`;
+exports[`euiFontSizeFromScale unit px 1`] = `"16px"`;
 
-exports[`euiLineHeightFromBaseline measurement rem 1`] = `"1.7143rem"`;
+exports[`euiFontSizeFromScale unit rem 1`] = `"1.1429rem"`;
 
 exports[`euiLineHeightFromBaseline scale l 1`] = `"1.7143rem"`;
 
@@ -43,3 +37,9 @@ 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"`;
diff --git a/src/global_styling/functions/typography.test.tsx b/src/global_styling/functions/typography.test.tsx
@@ -11,10 +11,7 @@ import { renderHook } from '@testing-library/react';
 
 import { EuiProvider } from '../../components';
 import { useEuiTheme } from '../../services';
-import {
-  EuiThemeFontScales,
-  EuiThemeFontSizeMeasurements,
-} from '../variables/typography';
+import { EuiThemeFontScales, EuiThemeFontUnits } from '../variables/typography';
 
 import { euiFontSizeFromScale, euiLineHeightFromBaseline } from './typography';
 
@@ -38,18 +35,16 @@ describe('euiFontSizeFromScale', () => {
     });
   });
 
-  describe('measurement', () => {
-    EuiThemeFontSizeMeasurements.forEach((unit) => {
+  describe('unit', () => {
+    EuiThemeFontUnits.forEach((unit) => {
       test(unit, () => {
-        const output = euiFontSizeFromScale('m', euiTheme, {
-          measurement: 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 measurement is not passed', () => {
+    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}
@@ -81,12 +76,10 @@ describe('euiLineHeightFromBaseline', () => {
     });
   });
 
-  describe('measurement', () => {
-    EuiThemeFontSizeMeasurements.forEach((unit) => {
+  describe('unit', () => {
+    EuiThemeFontUnits.forEach((unit) => {
       test(unit, () => {
-        const output = euiLineHeightFromBaseline('m', euiTheme, {
-          measurement: unit,
-        });
+        const output = euiLineHeightFromBaseline('m', euiTheme, { unit });
 
         if (unit !== 'em') {
           expect(output.endsWith(unit)).toBe(true);
@@ -98,7 +91,7 @@ describe('euiLineHeightFromBaseline', () => {
       });
     });
 
-    it('falls back to the `defaultUnits` theme token if measurement is not passed', () => {
+    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}

diff --git a/src/global_styling/functions/typography.ts b/src/global_styling/functions/typography.ts
@@ -8,17 +8,17 @@
 
 import {
   _EuiThemeFontScale,
-  _EuiThemeFontSizeMeasurement,
+  _EuiThemeFontUnit,
   _EuiThemeFontWeights,
 } from '../variables/typography';
 import { UseEuiTheme } from '../../services/theme/hooks';
 import { logicalCSS } from './logicals';
 
 export interface _FontScaleOptions {
   /**
-   * The returned string measurement
+   * The font-size or line-height unit to return
    */
-  measurement?: _EuiThemeFontSizeMeasurement;
+  unit?: _EuiThemeFontUnit;
   /**
    * An additional custom scale multiplier to use against the current scale
    * This parameter can be used (e.g. by EuiText sizes) to get sizes of text smaller than the default
@@ -38,17 +38,17 @@ export interface _FontScaleOptions {
 export function euiFontSizeFromScale(
   scale: _EuiThemeFontScale,
   { base, font }: UseEuiTheme['euiTheme'],
-  { measurement = font.defaultUnits, customScale }: _FontScaleOptions = {}
+  { unit = font.defaultUnits, customScale }: _FontScaleOptions = {}
 ) {
-  if (measurement === 'em') {
+  if (unit === 'em') {
     return `${font.scale[scale]}em`;
   }
 
   let numerator = base * font.scale[scale];
   if (customScale) numerator *= font.scale[customScale];
   const denominator = base * font.scale[font.body.scale];
 
-  return measurement === 'px'
+  return unit === 'px'
     ? `${numerator}px`
     : `${(numerator / denominator).toFixed(4)}rem`;
 }
@@ -68,7 +68,7 @@ export function euiFontSizeFromScale(
 export function euiLineHeightFromBaseline(
   scale: _EuiThemeFontScale,
   { base, font }: UseEuiTheme['euiTheme'],
-  { measurement = font.defaultUnits, customScale }: _FontScaleOptions = {}
+  { unit = font.defaultUnits, customScale }: _FontScaleOptions = {}
 ) {
   const { baseline, lineHeightMultiplier } = font;
   let numerator = base * font.scale[scale];
@@ -78,7 +78,7 @@ export function euiLineHeightFromBaseline(
   const _lineHeightMultiplier =
     numerator <= base ? lineHeightMultiplier : lineHeightMultiplier * 0.833;
 
-  if (measurement === 'em') {
+  if (unit === 'em') {
     // Even though the line-height via `em` cannot be determined against the pixel baseline grid;
     // we will assume that typically larger scale font-sizes should have a shorter line-height;
     return _lineHeightMultiplier.toFixed(4).toString();
@@ -87,7 +87,7 @@ export function euiLineHeightFromBaseline(
   const pixelValue =
     Math.floor(Math.round(numerator * _lineHeightMultiplier) / baseline) *
     baseline;
-  return measurement === 'px'
+  return unit === 'px'
     ? `${pixelValue}px`
     : `${(pixelValue / denominator).toFixed(4)}rem`;
 }

diff --git a/src/global_styling/mixins/_typography.test.ts b/src/global_styling/mixins/_typography.test.ts
@@ -8,10 +8,7 @@
 
 import { testCustomHook } from '../../test/internal';
 
-import {
-  EuiThemeFontScales,
-  EuiThemeFontSizeMeasurements,
-} from '../variables/typography';
+import { EuiThemeFontScales, EuiThemeFontUnits } from '../variables/typography';
 import {
   useEuiFontSize,
   euiTextBreakWord,
@@ -21,12 +18,12 @@ import {
 
 describe('euiFontSize', () => {
   describe('returns an object of font-size and line-height for each scale', () => {
-    EuiThemeFontSizeMeasurements.forEach((measurement) => {
-      describe(measurement, () => {
+    EuiThemeFontUnits.forEach((unit) => {
+      describe(unit, () => {
         EuiThemeFontScales.forEach((size) => {
           test(size, () => {
             expect(
-              testCustomHook(() => useEuiFontSize(size, { measurement })).return
+              testCustomHook(() => useEuiFontSize(size, { unit })).return
             ).toMatchSnapshot();
           });
         });

diff --git a/src/global_styling/variables/typography.ts b/src/global_styling/variables/typography.ts
@@ -12,10 +12,9 @@ import { CSSProperties } from 'react';
  * Font units of measure
  */
 
-export const EuiThemeFontSizeMeasurements = ['rem', 'px', 'em'] as const;
+export const EuiThemeFontUnits = ['rem', 'px', 'em'] as const;
 
-export type _EuiThemeFontSizeMeasurement =
-  (typeof EuiThemeFontSizeMeasurements)[number];
+export type _EuiThemeFontUnit = (typeof EuiThemeFontUnits)[number];
 
 /*
  * Font scale
@@ -68,7 +67,7 @@ export type _EuiThemeFontBase = {
    *
    * @default 'rem'
    */
-  defaultUnits: _EuiThemeFontSizeMeasurement;
+  defaultUnits: _EuiThemeFontUnit;
   /**
    * A computed number that is 1/4 of `base`
    */

diff --git a/upcoming_changelogs/7133.md b/upcoming_changelogs/7133.md
@@ -1 +1,5 @@
 - Added `font.defaultUnits` theme token. EUI component font sizes default to `rem` units - this token allows consumers to configure this to `px` or `em`
+
+**CSS-in-JS conversions**
+
+- Renamed `useEuiFontSize()`'s `measurement` option to `unit` for clarity