From 7d3c34a85e6e6e04ac5aab0191444749e2e6d317 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 28 Aug 2023 16:12:53 -0700 Subject: [PATCH] [!! opinionated change] Rename all `measurement` related types and variables 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 --- .../views/theme/typography/_typography_js.tsx | 48 ++++++++----------- .../markdown_editor/markdown_format.styles.ts | 6 +-- src/components/text/text.styles.ts | 6 +-- .../__snapshots__/typography.test.tsx.snap | 18 +++---- .../functions/typography.test.tsx | 25 ++++------ src/global_styling/functions/typography.ts | 18 +++---- src/global_styling/mixins/_typography.test.ts | 11 ++--- src/global_styling/variables/typography.ts | 7 ++- upcoming_changelogs/7133.md | 4 ++ 9 files changed, 63 insertions(+), 80 deletions(-) diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index e361a3440ca..354c7c5bd34 100644 --- 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,27 +250,25 @@ 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 ( <> Value measurements} + title={

Font units

} description={

- The font sizing function also supports the three main measurements - for font-size, rem | px | em, with{' '} + The font sizing function also supports three main units for font + size and line height: rem | px | em, with{' '} rem being default for all EUI components.

} @@ -278,12 +276,10 @@ export const FontScaleValuesJS = () => { - 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 = () => { 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 = () => {
diff --git a/src/components/markdown_editor/markdown_format.styles.ts b/src/components/markdown_editor/markdown_format.styles.ts index 95b307031c6..c57fb005b3a 100644 --- 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 index 2f2f32e0ad7..0bcc68b2c45 100644 --- 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 index 85864ff88ae..3c300bdafab 100644 --- 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 index 2b21cf5ee94..19aa28d553f 100644 --- 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 = ({ children }) => ( {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 = ({ children }) => ( {children} diff --git a/src/global_styling/functions/typography.ts b/src/global_styling/functions/typography.ts index cbabac77ee0..1079febb407 100644 --- a/src/global_styling/functions/typography.ts +++ b/src/global_styling/functions/typography.ts @@ -8,7 +8,7 @@ import { _EuiThemeFontScale, - _EuiThemeFontSizeMeasurement, + _EuiThemeFontUnit, _EuiThemeFontWeights, } from '../variables/typography'; import { UseEuiTheme } from '../../services/theme/hooks'; @@ -16,9 +16,9 @@ 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,9 +38,9 @@ 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`; } @@ -48,7 +48,7 @@ export function euiFontSizeFromScale( 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 index 71ec85e75dd..3ce71130925 100644 --- 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 index 6105bebe149..50fda410081 100644 --- 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 index fe81939a16f..9ec8351cd25 100644 --- 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