From 22e8e98c9280f7c49188685b2b25940845362c98 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 28 Aug 2023 11:51:40 -0700 Subject: [PATCH 1/8] Add new theme token for allowing consumers to customize the default font size unit --- src/global_styling/variables/typography.ts | 9 +++++++++ .../amsterdam/global_styling/variables/_typography.ts | 1 + 2 files changed, 10 insertions(+) diff --git a/src/global_styling/variables/typography.ts b/src/global_styling/variables/typography.ts index f270a7ab6a7..ac9494fc002 100644 --- a/src/global_styling/variables/typography.ts +++ b/src/global_styling/variables/typography.ts @@ -59,6 +59,15 @@ export type _EuiThemeFontBase = { * https://developer.mozilla.org/en-US/docs/Web/CSS/font-feature-settings */ featureSettings?: string; + /** + * Sets the default font size unit used by UI components like EuiText or EuiTitle. + * + * NOTE: This may overridden by some internal usages, e.g. + * EuiText's `relative` size which must use `em`. + * + * @default 'rem' + */ + fontSizeUnit: _EuiThemeFontSizeMeasurement; /** * A computed number that is 1/4 of `base` */ diff --git a/src/themes/amsterdam/global_styling/variables/_typography.ts b/src/themes/amsterdam/global_styling/variables/_typography.ts index f51b71aa0fe..694c8c02996 100644 --- a/src/themes/amsterdam/global_styling/variables/_typography.ts +++ b/src/themes/amsterdam/global_styling/variables/_typography.ts @@ -34,6 +34,7 @@ export const fontBase: _EuiThemeFontBase = { // Careful using ligatures. Code editors like ACE will often error because of width calculations featureSettings: "'calt' 1, 'kern' 1, 'liga' 1", + fontSizeUnit: 'rem', baseline: computed(([base]) => base / 4, ['base']), lineHeightMultiplier: 1.5, From 79c59a65a2e75a0815c90963ca6775ee2be0f1a9 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 28 Aug 2023 12:21:20 -0700 Subject: [PATCH 2/8] Update EUI font size functions to use new unit token as a default + write missing unit tests for existing utilities --- .../__snapshots__/typography.test.tsx.snap | 45 +++++++ .../functions/typography.test.tsx | 114 ++++++++++++++++++ src/global_styling/functions/typography.ts | 4 +- 3 files changed, 161 insertions(+), 2 deletions(-) create mode 100644 src/global_styling/functions/__snapshots__/typography.test.tsx.snap create mode 100644 src/global_styling/functions/typography.test.tsx diff --git a/src/global_styling/functions/__snapshots__/typography.test.tsx.snap b/src/global_styling/functions/__snapshots__/typography.test.tsx.snap new file mode 100644 index 00000000000..85864ff88ae --- /dev/null +++ b/src/global_styling/functions/__snapshots__/typography.test.tsx.snap @@ -0,0 +1,45 @@ +// 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"`; + +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[`euiLineHeightFromBaseline measurement em 1`] = `"1.5000"`; + +exports[`euiLineHeightFromBaseline measurement px 1`] = `"24px"`; + +exports[`euiLineHeightFromBaseline measurement rem 1`] = `"1.7143rem"`; + +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"`; diff --git a/src/global_styling/functions/typography.test.tsx b/src/global_styling/functions/typography.test.tsx new file mode 100644 index 00000000000..2990eeb3b12 --- /dev/null +++ b/src/global_styling/functions/typography.test.tsx @@ -0,0 +1,114 @@ +/* + * 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, + EuiThemeFontSizeMeasurements, +} 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('measurement', () => { + EuiThemeFontSizeMeasurements.forEach((unit) => { + test(unit, () => { + const output = euiFontSizeFromScale('m', euiTheme, { + measurement: unit, + }); + expect(output.endsWith(unit)).toBe(true); + expect(output).toMatchSnapshot(); + }); + }); + + it('falls back to the `fontSizeUnit` theme token if measurement is not passed', () => { + const wrapper: FunctionComponent = ({ children }) => ( + + {children} + + ); + 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('measurement', () => { + EuiThemeFontSizeMeasurements.forEach((unit) => { + test(unit, () => { + const output = euiLineHeightFromBaseline('m', euiTheme, { + measurement: unit, + }); + + if (unit !== 'em') { + expect(output.endsWith(unit)).toBe(true); + } else { + expect(Number(output)).not.toBeNaN(); + } + + expect(output).toMatchSnapshot(); + }); + }); + + it('falls back to the `fontSizeUnit` theme token if measurement is not passed', () => { + const wrapper: FunctionComponent = ({ children }) => ( + + {children} + + ); + const { euiTheme: modifiedEuiTheme } = renderHook(useEuiTheme, { + wrapper, + }).result.current; + + expect(euiLineHeightFromBaseline('m', modifiedEuiTheme)).toEqual('24px'); + }); + }); +}); diff --git a/src/global_styling/functions/typography.ts b/src/global_styling/functions/typography.ts index cfff01e4772..d925b1a604f 100644 --- a/src/global_styling/functions/typography.ts +++ b/src/global_styling/functions/typography.ts @@ -38,7 +38,7 @@ export interface _FontScaleOptions { export function euiFontSizeFromScale( scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], - { measurement = 'rem', customScale }: _FontScaleOptions = {} + { measurement = font.fontSizeUnit, customScale }: _FontScaleOptions = {} ) { if (measurement === 'em') { return `${font.scale[scale]}em`; @@ -68,7 +68,7 @@ export function euiFontSizeFromScale( export function euiLineHeightFromBaseline( scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], - { measurement = 'rem', customScale }: _FontScaleOptions = {} + { measurement = font.fontSizeUnit, customScale }: _FontScaleOptions = {} ) { const { baseline, lineHeightMultiplier } = font; let numerator = base * font.scale[scale]; From 6e93f4413e92bbe5f7373e9a4c7531354520e837 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 28 Aug 2023 12:34:14 -0700 Subject: [PATCH 3/8] Add section to typography token docs + with example override behavior --- .../views/theme/typography/_typography_js.tsx | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index c54793b46a2..b4e4e05d3b5 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/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,6 +9,7 @@ import { EuiDescribedFormGroup, EuiPanel, EuiSpacer, + EuiText, } from '../../../../../src/components'; import { @@ -104,6 +105,26 @@ export const FontJS = () => { snippet={'font-feature-settings: ${euiTheme.font.featureSettings};'} snippetLanguage="emotion" /> + + euiTheme.font.fontSizeUnit} + description={getDescription(baseProps.fontSizeUnit)} + example={ + + + My font size and line height is set using px{' '} + and not rem + + + } + snippet={` + +

Hello world

+ + +`} + snippetLanguage="jsx" + /> ); }; From 648e3b23054ddba6a225fe65ae3b40da00dd1707 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 28 Aug 2023 12:36:18 -0700 Subject: [PATCH 4/8] Fix `EuiText` and `EuiMarkdownFormat` to use new token default --- src/components/markdown_editor/markdown_format.styles.ts | 3 --- src/components/text/text.styles.ts | 3 --- 2 files changed, 6 deletions(-) diff --git a/src/components/markdown_editor/markdown_format.styles.ts b/src/components/markdown_editor/markdown_format.styles.ts index 0def45152a3..95b307031c6 100644 --- a/src/components/markdown_editor/markdown_format.styles.ts +++ b/src/components/markdown_editor/markdown_format.styles.ts @@ -67,19 +67,16 @@ 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', })} `, diff --git a/src/components/text/text.styles.ts b/src/components/text/text.styles.ts index 568d07293d5..2f2f32e0ad7 100644 --- a/src/components/text/text.styles.ts +++ b/src/components/text/text.styles.ts @@ -345,19 +345,16 @@ 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', })} `, From 56125c7950b8c6f871ef298e01a3f2941bd958f7 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 28 Aug 2023 12:44:16 -0700 Subject: [PATCH 5/8] changelog --- upcoming_changelogs/7133.md | 1 + 1 file changed, 1 insertion(+) create mode 100644 upcoming_changelogs/7133.md diff --git a/upcoming_changelogs/7133.md b/upcoming_changelogs/7133.md new file mode 100644 index 00000000000..f5f5afff370 --- /dev/null +++ b/upcoming_changelogs/7133.md @@ -0,0 +1 @@ +- Added `font.fontSizeUnit` theme token. EUI component font sizes default to `rem` units - this token allows consumers to configure this to `px` or `em` From c94844c56ae180f8c43938d0c3ff66ecde1a2eda Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 28 Aug 2023 15:38:36 -0700 Subject: [PATCH 6/8] Rename `fontSizeUnit` to `defaultUnits` --- src-docs/src/views/theme/typography/_typography_js.tsx | 8 ++++---- src/global_styling/functions/typography.test.tsx | 8 ++++---- src/global_styling/functions/typography.ts | 4 ++-- src/global_styling/variables/typography.ts | 5 +++-- .../amsterdam/global_styling/variables/_typography.ts | 2 +- upcoming_changelogs/7133.md | 2 +- 6 files changed, 15 insertions(+), 14 deletions(-) diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index b4e4e05d3b5..e361a3440ca 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -107,17 +107,17 @@ export const FontJS = () => { /> euiTheme.font.fontSizeUnit} - description={getDescription(baseProps.fontSizeUnit)} + title={euiTheme.font.defaultUnits} + description={getDescription(baseProps.defaultUnits)} example={ - + My font size and line height is set using px{' '} and not rem } - snippet={` + snippet={`

Hello world

 diff --git a/src/global_styling/functions/typography.test.tsx b/src/global_styling/functions/typography.test.tsx index 2990eeb3b12..2b21cf5ee94 100644 --- a/src/global_styling/functions/typography.test.tsx +++ b/src/global_styling/functions/typography.test.tsx @@ -49,9 +49,9 @@ describe('euiFontSizeFromScale', () => { }); }); - it('falls back to the `fontSizeUnit` theme token if measurement is not passed', () => { + it('falls back to the `defaultUnits` theme token if measurement is not passed', () => { const wrapper: FunctionComponent = ({ children }) => ( - + {children} ); @@ -98,9 +98,9 @@ describe('euiLineHeightFromBaseline', () => { }); }); - it('falls back to the `fontSizeUnit` theme token if measurement is not passed', () => { + it('falls back to the `defaultUnits` theme token if measurement 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 d925b1a604f..cbabac77ee0 100644 --- a/src/global_styling/functions/typography.ts +++ b/src/global_styling/functions/typography.ts @@ -38,7 +38,7 @@ export interface _FontScaleOptions { export function euiFontSizeFromScale( scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], - { measurement = font.fontSizeUnit, customScale }: _FontScaleOptions = {} + { measurement = font.defaultUnits, customScale }: _FontScaleOptions = {} ) { if (measurement === 'em') { return `${font.scale[scale]}em`; @@ -68,7 +68,7 @@ export function euiFontSizeFromScale( export function euiLineHeightFromBaseline( scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], - { measurement = font.fontSizeUnit, customScale }: _FontScaleOptions = {} + { measurement = font.defaultUnits, customScale }: _FontScaleOptions = {} ) { const { baseline, lineHeightMultiplier } = font; let numerator = base * font.scale[scale]; diff --git a/src/global_styling/variables/typography.ts b/src/global_styling/variables/typography.ts index ac9494fc002..6105bebe149 100644 --- a/src/global_styling/variables/typography.ts +++ b/src/global_styling/variables/typography.ts @@ -60,14 +60,15 @@ export type _EuiThemeFontBase = { */ featureSettings?: string; /** - * Sets the default font size unit used by UI components like EuiText or EuiTitle. + * Sets the default units used for font size & line height set by UI components + * like EuiText or EuiTitle. * * NOTE: This may overridden by some internal usages, e.g. * EuiText's `relative` size which must use `em`. * * @default 'rem' */ - fontSizeUnit: _EuiThemeFontSizeMeasurement; + defaultUnits: _EuiThemeFontSizeMeasurement; /** * A computed number that is 1/4 of `base` */ diff --git a/src/themes/amsterdam/global_styling/variables/_typography.ts b/src/themes/amsterdam/global_styling/variables/_typography.ts index 694c8c02996..3a95f26a6c5 100644 --- a/src/themes/amsterdam/global_styling/variables/_typography.ts +++ b/src/themes/amsterdam/global_styling/variables/_typography.ts @@ -34,7 +34,7 @@ export const fontBase: _EuiThemeFontBase = { // Careful using ligatures. Code editors like ACE will often error because of width calculations featureSettings: "'calt' 1, 'kern' 1, 'liga' 1", - fontSizeUnit: 'rem', + defaultUnits: 'rem', baseline: computed(([base]) => base / 4, ['base']), lineHeightMultiplier: 1.5, diff --git a/upcoming_changelogs/7133.md b/upcoming_changelogs/7133.md index f5f5afff370..fe81939a16f 100644 --- a/upcoming_changelogs/7133.md +++ b/upcoming_changelogs/7133.md @@ -1 +1 @@ -- Added `font.fontSizeUnit` theme token. EUI component font sizes default to `rem` units - this token allows consumers to configure this to `px` or `em` +- Added `font.defaultUnits` theme token. EUI component font sizes default to `rem` units - this token allows consumers to configure this to `px` or `em` From 7d3c34a85e6e6e04ac5aab0191444749e2e6d317 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Mon, 28 Aug 2023 16:12:53 -0700 Subject: [PATCH 7/8] [!! 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 From 52e5f90e78c0cb8ef9bb3043badccb0d09e8941e Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 29 Aug 2023 10:28:09 -0700 Subject: [PATCH 8/8] quick last copy tweak --- src/global_styling/variables/typography.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/global_styling/variables/typography.ts b/src/global_styling/variables/typography.ts index 50fda410081..80ebbc8b1cb 100644 --- a/src/global_styling/variables/typography.ts +++ b/src/global_styling/variables/typography.ts @@ -60,7 +60,7 @@ export type _EuiThemeFontBase = { featureSettings?: string; /** * Sets the default units used for font size & line height set by UI components - * like EuiText or EuiTitle. + * like EuiText or EuiTitle. Defaults to `rem`. * * NOTE: This may overridden by some internal usages, e.g. * EuiText's `relative` size which must use `em`.