Update global EUI font size to use configurable theme units by cee-chen · Pull Request #7182 · elastic/eui

cee-chen · 2023-09-12T17:43:55Z

Summary

This PR updates our global body/html font-size to use the configurable font.defaultUnits token (added in #7133).

This feature is a breaking change from how EUI has functioned in the past, but is a net accessibility boost, as switching to rem font sizing correctly allows EUI to respect the browser default font size configured by end users.

Screencaps

With default browser font size of 30px:

With default browser font size of 9px:

New docs callout:

QA

Go to https://eui.elastic.co/pr_7182/storybook/index.html?path=/story/euiprovider--font-default-units
Inspect the demo text in browser devtools, and confirm the font-size is in rem
Go to the modify control and edit the object's defaultUnits key to "em" instead of "rem", and confirm the CSS updates:
Edit defaultUnits to "px" and confirm the CSS updates again:
(Regression testing) Go to https://eui.elastic.co/pr_7182/ and confirm the font size and all visuals are the same as production

General checklist

Browser QA
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility ~~including keyboard-only and screenreader modes~~
Docs site QA
- Added documentation
Code quality checklist
- Added or updated QA storybook ~~jest and cypress tests~~
Release checklist
- A changelog entry exists and is marked appropriately.
- If applicable, added the breaking change issue label (and filled out the breaking change checklist)

cee-chen · 2023-09-12T19:21:10Z

@JasonStoltz What was the plan for messaging around this breaking change? Do we want to make it a prerelease or check with Kibana designers how this will affect end-users before merging it into main?

github-actions · 2023-09-12T20:17:37Z

This PR contains breaking changes. The opener of this pull request is asked to perform the following due diligence steps below, to assist EUI in our next Kibana upgrade:

If this PR contains prop/API changes: N/A
If this PR contains CSS changes:
- Search through Kibana for the changed EUI selectors, e.g. .euiComponent (example search) (N/A)
- In the PR description or in a PR comment, include a count or list with the number of custom CSS overrides in Kibana that will need to be updated (if that amount is "none", include that information as well) (NONE)
🔍 Tip: When searching through Kibana, consider excluding **/target, **/*.snap, **/*.storyshot files to reduce noise and only look at source code usages
⚠️ For extremely risky changes, the EUI team should potentially consider the following precautions:
- Using a pre-release release candidate to test Kibana CI ahead of time
- Using kibana-a-la-carte for manual QA, and to give other Kibana teams a staging server to quickly test against

Log | Bot Usage

1Copenut

I had one wordsmith change for the accessibility callout box. I ran through the recommended QA, but will definitely spend more time tomorrow clicking through pages vs. production.

src-docs/src/views/theme/typography/_typography_js.tsx

1Copenut

LGTM! I took a pass through views side by side with production in light and dark mode. Didn't observe any differences. 🎉

This will be a big win for accessibility!

changes from `px` to default `rem`, which respects browser default font size

cee-chen · 2023-10-03T20:32:03Z

The 2 weeks TTL has passed with multiple Elastic teams contacted - no one has expressed major concerns with this change, so I'll be moving forward with it here shortly.

kibanamachine · 2023-10-04T18:55:07Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_7182/
Storybook: https://eui.elastic.co/pr_7182/storybook

elasticmachine · 2023-10-04T18:55:11Z

💚 Build Succeeded

Buildkite Build
Commit: a33c20e

History

💔 Build #758 failed 48ffc9d
💔 Build #747 failed c7abc03
💚 Build #621 succeeded 96442fd
💚 Build #603 succeeded 5af65f6
💚 Build #602 succeeded 9664eb1

`v88.5.4`⏩`v89.0.0` --- ## [`89.0.0`](https://github.com/elastic/eui/tree/v89.0.0) - Added new `pushAnimation` prop to push `EuiFlyout`s, which enables a slide in animation ([#7239](elastic/eui#7239)) - Updated `EuiComboBox` to use `EuiInputPopover` under the hood ([#7246](elastic/eui#7246)) - Added `inputPopoverProps` to `EuiComboBox`, which allows customizing the underlying popover ([#7246](elastic/eui#7246)) - Added a new beta `EuiTextBlockTruncate` component for multi-line truncation ([#7250](elastic/eui#7250)) - Updated `EuiBasicTable` and `EuiInMemoryTable` to support multi-line truncation. This can be set via `truncateText.lines` in the `columns` prop. ([#7254](elastic/eui#7254)) **Bug fixes** - Fixed `EuiFlexGroup` and `EuiFlexGrid`'s `m` gutter size ([#7251](elastic/eui#7251)) - Fixed focus trap rerender issues in `EuiFlyout` with memoization ([#7259](elastic/eui#7259)) - Fixed a visual bug with `EuiContextMenu`'s animation between panels ([#7268](elastic/eui#7268)) **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`. ([#7182](elastic/eui#7182)) - Removed exported `accessibleClickKeys`, `comboBoxKeys`, and `cascadingMenuKeys` services. Use the generic `keys` service instead ([#7256](elastic/eui#7256)) - Removed `EuiColorStops` due to low usage ([#7262](elastic/eui#7262)) - Removed `EuiSuggest`. We recommend using `EuiSelectable` or `EuiComboBox` instead ([#7263](elastic/eui#7263)) - Removed `euiHeaderAffordForFixed` Sass mixin, and `$euiHeaderHeight` and `$euiHeaderHeightCompensation` Sass variables. Use the CSS variable `--var(euiFixedHeadersOffset, 0)` instead. ([#7264](elastic/eui#7264)) **Accessibility** - When using `rem` or `em` font units, EUI now respects, instead of ignoring, browser default font sizes set by end users. ([#7182](elastic/eui#7182))

`v88.5.4`⏩`v89.0.0` --- ## [`89.0.0`](https://github.com/elastic/eui/tree/v89.0.0) - Added new `pushAnimation` prop to push `EuiFlyout`s, which enables a slide in animation ([elastic#7239](elastic/eui#7239)) - Updated `EuiComboBox` to use `EuiInputPopover` under the hood ([elastic#7246](elastic/eui#7246)) - Added `inputPopoverProps` to `EuiComboBox`, which allows customizing the underlying popover ([elastic#7246](elastic/eui#7246)) - Added a new beta `EuiTextBlockTruncate` component for multi-line truncation ([elastic#7250](elastic/eui#7250)) - Updated `EuiBasicTable` and `EuiInMemoryTable` to support multi-line truncation. This can be set via `truncateText.lines` in the `columns` prop. ([elastic#7254](elastic/eui#7254)) **Bug fixes** - Fixed `EuiFlexGroup` and `EuiFlexGrid`'s `m` gutter size ([elastic#7251](elastic/eui#7251)) - Fixed focus trap rerender issues in `EuiFlyout` with memoization ([elastic#7259](elastic/eui#7259)) - Fixed a visual bug with `EuiContextMenu`'s animation between panels ([elastic#7268](elastic/eui#7268)) **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`. ([elastic#7182](elastic/eui#7182)) - Removed exported `accessibleClickKeys`, `comboBoxKeys`, and `cascadingMenuKeys` services. Use the generic `keys` service instead ([elastic#7256](elastic/eui#7256)) - Removed `EuiColorStops` due to low usage ([elastic#7262](elastic/eui#7262)) - Removed `EuiSuggest`. We recommend using `EuiSelectable` or `EuiComboBox` instead ([elastic#7263](elastic/eui#7263)) - Removed `euiHeaderAffordForFixed` Sass mixin, and `$euiHeaderHeight` and `$euiHeaderHeightCompensation` Sass variables. Use the CSS variable `--var(euiFixedHeadersOffset, 0)` instead. ([elastic#7264](elastic/eui#7264)) **Accessibility** - When using `rem` or `em` font units, EUI now respects, instead of ignoring, browser default font sizes set by end users. ([elastic#7182](elastic/eui#7182))

cee-chen added the breaking change PRs with breaking changes. (Don't delete - used for automation) label Sep 12, 2023

cee-chen changed the title ~~Global default font size unit~~ Global EUI font size now uses configurable theme units Sep 12, 2023

cee-chen changed the title ~~Global EUI font size now uses configurable theme units~~ Update global EUI font size to use configurable theme units Sep 12, 2023

cee-chen requested a review from a team September 12, 2023 19:20

cee-chen marked this pull request as ready for review September 12, 2023 19:21

cee-chen added breaking change PRs with breaking changes. (Don't delete - used for automation) and removed breaking change PRs with breaking changes. (Don't delete - used for automation) labels Sep 12, 2023

1Copenut reviewed Sep 12, 2023

View reviewed changes

src-docs/src/views/theme/typography/_typography_js.tsx Show resolved Hide resolved

1Copenut approved these changes Sep 13, 2023

View reviewed changes

cee-chen added 6 commits September 14, 2023 14:56

Update global body font size to use configured consumer unit

7f8472f

changes from `px` to default `rem`, which respects browser default font size

Add QA-able storybook

d279de0

[docs] Add callout/warning about accessible font units

1058e63

changelog

59b3168

??? snapshot

25cb654

[PR feedback] Copy

96442fd

cee-chen force-pushed the global-default-font-size-unit branch from 5af65f6 to 96442fd Compare September 14, 2023 21:56

Merge branch 'main' into global-default-font-size-unit

c7abc03

cee-chen enabled auto-merge (squash) October 3, 2023 20:40

cee-chen added the accessibility label Oct 3, 2023

cee-chen and others added 2 commits October 4, 2023 09:49

Merge branch 'main' into global-default-font-size-unit

48ffc9d

Restore default font size of unstyled form elements

a33c20e

cee-chen merged commit 7f14f18 into elastic:main Oct 4, 2023

cee-chen deleted the global-default-font-size-unit branch October 4, 2023 18:55

cee-chen mentioned this pull request Oct 9, 2023

Upgrade EUI to v89.0.0 elastic/kibana#168396

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

Update global EUI font size to use configurable theme units#7182
cee-chen merged 9 commits intoelastic:mainfrom
cee-chen:global-default-font-size-unit

cee-chen commented Sep 12, 2023 •

edited

Loading

Uh oh!

cee-chen commented Sep 12, 2023

Uh oh!

github-actions bot commented Sep 12, 2023 •

edited by cee-chen

Loading

Uh oh!

1Copenut left a comment

Uh oh!

Uh oh!

1Copenut left a comment

Uh oh!

cee-chen commented Oct 3, 2023

Uh oh!

kibanamachine commented Oct 4, 2023

Uh oh!

elasticmachine commented Oct 4, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

cee-chen commented Sep 12, 2023 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Screencaps

QA

General checklist

Uh oh!

cee-chen commented Sep 12, 2023

Uh oh!

github-actions bot commented Sep 12, 2023 • edited by cee-chen Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

1Copenut left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

1Copenut left a comment

Choose a reason for hiding this comment

Uh oh!

cee-chen commented Oct 3, 2023

Uh oh!

kibanamachine commented Oct 4, 2023

Uh oh!

elasticmachine commented Oct 4, 2023

💚 Build Succeeded

History

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

cee-chen commented Sep 12, 2023 •

edited

Loading

github-actions bot commented Sep 12, 2023 •

edited by cee-chen

Loading