From 7f8472f3b84875afdd434a1732cd57ab7362f54c Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 12 Sep 2023 10:12:08 -0700 Subject: [PATCH 1/7] Update global body font size to use configured consumer unit changes from `px` to default `rem`, which respects browser default font size --- src/global_styling/reset/global_styles.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/global_styling/reset/global_styles.tsx b/src/global_styling/reset/global_styles.tsx index f485bd0199c..8709d5b69c4 100644 --- a/src/global_styling/reset/global_styles.tsx +++ b/src/global_styling/reset/global_styles.tsx @@ -37,10 +37,13 @@ export const EuiGlobalStyles = ({}: EuiGlobalStylesProps) => { * This font reset sets all our base font/typography related properties * that are needed to override browser-specific element settings. */ + const fontBodyScale = font.scale[font.body.scale]; const fontReset = ` font-family: ${font.family}; - font-size: ${`${font.scale[font.body.scale] * base}px`}; - line-height: ${base / (font.scale[font.body.scale] * base)}; + font-size: ${ + font.defaultUnits === 'px' ? fontBodyScale * base : fontBodyScale + }${font.defaultUnits}; + line-height: ${base / (fontBodyScale * base)}; font-weight: ${font.weight[font.body.weight]}; `; From d279de0e811c9a3779fed2388a09177052844603 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 12 Sep 2023 10:42:13 -0700 Subject: [PATCH 2/7] Add QA-able storybook --- .storybook/preview.tsx | 5 ++- src/components/provider/provider.stories.tsx | 43 ++++++++++++++++++++ 2 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 src/components/provider/provider.stories.tsx diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index 45415c2d447..d5a416a818e 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -40,7 +40,10 @@ import '../dist/eui_theme_light.css'; const preview: Preview = { decorators: [ (Story, context) => ( - +
> = { + title: 'EuiProvider', + component: EuiProvider, + argTypes: { + colorMode: { + control: 'select', + options: ['light', 'dark', 'inverse', 'LIGHT', 'DARK', 'INVERSE'], + }, + modify: { control: 'object' }, + componentDefaults: { control: 'object' }, + globalStyles: { control: 'boolean' }, + utilityClasses: { control: 'boolean' }, + }, +}; + +export default meta; +type Story = StoryObj>; + +export const FontDefaultUnits: Story = { + render: () => ( + <> + Change `modify.font.defaultUnits` to{' '} + `rem`, `em`, or `px` and then inspect this demo's `html` + CSS + + ), + args: { + modify: { font: { defaultUnits: 'rem' } }, + }, +}; From 1058e630dde7ba8bbf39980fe1a14ed7a5585b57 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 12 Sep 2023 11:35:27 -0700 Subject: [PATCH 3/7] [docs] Add callout/warning about accessible font units --- .../views/theme/typography/_typography_js.tsx | 25 +++++++++++++++++++ 1 file changed, 25 insertions(+) diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index 354c7c5bd34..d8c9205f889 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -10,6 +10,8 @@ import { EuiPanel, EuiSpacer, EuiText, + EuiCallOut, + EuiLink, } from '../../../../../src/components'; import { @@ -285,6 +287,29 @@ export const FontScaleValuesJS = () => { /> + + + We strongly recommend using relative (rem or{' '} + em) units instead of px when + possible{' '} + + } + > +

+ Relative font units respect configured browser default font sizes, + which some users may set to larger than than the 16px default due to + visual impairment.{' '} + + Read more on accessible text resizing. + +

+ tableLayout="auto" From 59b316832316ebc9b97d57e25c26fb42090fdde0 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 12 Sep 2023 11:35:35 -0700 Subject: [PATCH 4/7] changelog --- upcoming_changelogs/7182.md | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 upcoming_changelogs/7182.md diff --git a/upcoming_changelogs/7182.md b/upcoming_changelogs/7182.md new file mode 100644 index 00000000000..aa34dd7ed82 --- /dev/null +++ b/upcoming_changelogs/7182.md @@ -0,0 +1,7 @@ +**Breaking changes** + +- EUI's global body font-size now respects the `font.defaultUnits` token. This means that the global font size will use the `rem` unit by default, instead of `px`. + +**Accessibility** + +- When using `rem` or `em` font units, EUI now respects, instead of ignoring, browser default font sizes set by end users. From 25cb6547e901645a3b26d91dce9ed1f36685de56 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Tue, 12 Sep 2023 11:37:04 -0700 Subject: [PATCH 5/7] ??? snapshot --- src/components/combo_box/__snapshots__/combo_box.test.tsx.snap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap index d3d455f538a..a6ea5f3df64 100644 --- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap +++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap @@ -33,7 +33,7 @@ exports[`EuiComboBox is rendered 1`] = ` value="" />
From 96442fd1b03b7fda8606324ad9d253982f6958d9 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Wed, 13 Sep 2023 09:59:58 -0700 Subject: [PATCH 6/7] [PR feedback] Copy --- src-docs/src/views/theme/typography/_typography_js.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx index d8c9205f889..883d93b9e43 100644 --- a/src-docs/src/views/theme/typography/_typography_js.tsx +++ b/src-docs/src/views/theme/typography/_typography_js.tsx @@ -300,8 +300,8 @@ export const FontScaleValuesJS = () => { >

Relative font units respect configured browser default font sizes, - which some users may set to larger than than the 16px default due to - visual impairment.{' '} + which some users may set to larger than than the 16px default due to, + e.g. visual impairment, monitor size, or personal preference.{' '} Date: Wed, 4 Oct 2023 11:23:42 -0700 Subject: [PATCH 7/7] Restore default font size of unstyled form elements --- src/global_styling/reset/global_styles.tsx | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/src/global_styling/reset/global_styles.tsx b/src/global_styling/reset/global_styles.tsx index 8709d5b69c4..55cd8d5cc2c 100644 --- a/src/global_styling/reset/global_styles.tsx +++ b/src/global_styling/reset/global_styles.tsx @@ -38,14 +38,14 @@ export const EuiGlobalStyles = ({}: EuiGlobalStylesProps) => { * that are needed to override browser-specific element settings. */ const fontBodyScale = font.scale[font.body.scale]; - const fontReset = ` - font-family: ${font.family}; - font-size: ${ + const fontReset = { + fontFamily: font.family, + fontSize: `${ font.defaultUnits === 'px' ? fontBodyScale * base : fontBodyScale - }${font.defaultUnits}; - line-height: ${base / (fontBodyScale * base)}; - font-weight: ${font.weight[font.body.weight]}; - `; + }${font.defaultUnits}`, + lineHeight: base / (fontBodyScale * base), + fontWeight: font.weight[font.body.weight], + }; /** * Final styles @@ -73,7 +73,10 @@ export const EuiGlobalStyles = ({}: EuiGlobalStylesProps) => { input, textarea, select { - ${fontReset} + ${{ + ...fontReset, + fontSize: '1rem', // Inherit from html root + }} } // Chrome has opinionated select:disabled opacity styles that need to be overridden