Update global EUI font size to use configurable theme units (#7182)

elastic · Oct 4, 2023 · 7f14f18 · 7f14f18
1 parent 266d620
commit 7f14f18
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 8 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -48,7 +48,10 @@ import { hideStorybookControls } from './utils';
 const preview: Preview = {
   decorators: [
     (Story, context) => (
-      <EuiProvider colorMode={context.globals.colorMode}>
+      <EuiProvider
+        colorMode={context.globals.colorMode}
+        {...(context.componentId === 'euiprovider' && context.args)}
+      >
         <div
           css={[
             writingModeStyles.writingMode,

diff --git 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 = () => {
           />
         </EuiDescribedFormGroup>
       </EuiPanel>
+      <EuiSpacer size="m" />
+      <EuiCallOut
+        iconType="accessibility"
+        title={
+          <>
+            We strongly recommend using relative (<EuiCode>rem</EuiCode> or{' '}
+            <EuiCode>em</EuiCode>) units instead of <EuiCode>px</EuiCode> when
+            possible{' '}
+          </>
+        }
+      >
+        <p>
+          Relative font units respect configured browser default font sizes,
+          which some users may set to larger than than the 16px default due to,
+          e.g. visual impairment, monitor size, or personal preference.{' '}
+          <EuiLink
+            href="https://usability.yale.edu/web-accessibility/articles/zoom-resizing-text"
+            target="_blank"
+          >
+            Read more on accessible text resizing.
+          </EuiLink>
+        </p>
+      </EuiCallOut>
       <EuiSpacer />
       <EuiBasicTable<FontScaleDetails>
         tableLayout="auto"

diff --git a/src/components/provider/provider.stories.tsx b/src/components/provider/provider.stories.tsx
@@ -0,0 +1,43 @@
+/*
+ * 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 from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiProvider, EuiProviderProps } from './provider';
+
+const meta: Meta<EuiProviderProps<{}>> = {
+  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<EuiProviderProps<{}>>;
+
+export const FontDefaultUnits: Story = {
+  render: () => (
+    <>
+      Change <strong>`modify.font.defaultUnits`</strong> to{' '}
+      <strong>`rem`, `em`, or `px`</strong> and then inspect this demo's `html`
+      CSS
+    </>
+  ),
+  args: {
+    modify: { font: { defaultUnits: 'rem' } },
+  },
+};
diff --git a/src/global_styling/reset/global_styles.tsx b/src/global_styling/reset/global_styles.tsx
@@ -37,12 +37,15 @@ 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 fontReset = `
-    font-family: ${font.family};
-    font-size: ${`${font.scale[font.body.scale] * base}px`};
-    line-height: ${base / (font.scale[font.body.scale] * base)};
-    font-weight: ${font.weight[font.body.weight]};
-  `;
+  const fontBodyScale = font.scale[font.body.scale];
+  const fontReset = {
+    fontFamily: font.family,
+    fontSize: `${
+      font.defaultUnits === 'px' ? fontBodyScale * base : fontBodyScale
+    }${font.defaultUnits}`,
+    lineHeight: base / (fontBodyScale * base),
+    fontWeight: font.weight[font.body.weight],
+  };
 
   /**
    * Final styles
@@ -70,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

diff --git a/upcoming_changelogs/7182.md 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.