-
Notifications
You must be signed in to change notification settings - Fork 837
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Update global EUI font size to use configurable theme units #7182
Conversation
@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? |
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:
|
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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
5af65f6
to
96442fd
Compare
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. |
Preview staging links for this PR:
|
💚 Build Succeeded
History
|
`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))
Summary
closes #7143
This PR updates our global body/html
font-size
to use the configurablefont.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
rem
modify
control and edit the object's defaultUnits key to"em"
instead of"rem"
, and confirm the CSS updates:"px"
and confirm the CSS updates again:General checklist
including keyboard-only and screenreader modesjest and cypress tests