[Emotion] Cherry pick style memoization commits by tkajtoch · Pull Request #8565 · elastic/eui

tkajtoch · 2025-04-08T12:26:56Z

Summary

This PR contains cherry-picked commits from Cee's PR #8172 in order to make it more straightforward to review and omit some of the changes incompatible with post-Borealis EUI source.

QA

Compare updated components with main and confirm there are no visual regressions

General checklist

Browser QA
- Checked in both light and dark modes
- Checked in both MacOS and Windows high contrast modes
  - (emulate forced colors if you do not have access to a Windows machine.)
- Checked in mobile
- Checked in Chrome, Safari, Edge, and Firefox
- Checked for accessibility including keyboard-only and screenreader modes
Docs site QA
- Added or updated jest and cypress tests
- Updated visual regression tests
Release checklist
- A changelog entry exists and is marked appropriately.

mgadewoll

🚢 🐈‍⬛ LGTM! We're only missing a changelog entry.

Testing: I verified there are no visual regressions for:
✅ Borealis / Amsterdam
✅ light/dark mode
✅ HCM

tkajtoch · 2025-04-09T12:36:11Z

buildkite test this

+ remove unnecessary function for styles w/ no theme token + inline JSX where possible

- disabled opacity is fairly static and can be DRYed out - loading spinner: no styles being applied so this isn't necessary

+ remove passed `layout` arg in favor of static definitions - rewrite vertical vs horizontal gutters utils to be slightly less confusing + replace `calc()` with `mathWithUnits()`

+ prefer inline JSX

- replace `EuiHideFor/ShowFor` usage with a breakpoint hook instead

+ remove unnecessary fragments + remove some unnecessary callback consts, just inline them if they're not reused and we're not going to memoize them

- `list_group_item` has too much conditional JSX to deal with right now, should likely be split up into subcomponents in the future + remove unnecessary style functions, just use a static obj instead + re-run VRT screenshots

elasticmachine · 2025-04-11T11:55:42Z

💚 Build Succeeded

cc @tkajtoch

kibanamachine · 2025-04-11T12:08:15Z

Preview staging links for this PR:

Docs site: https://eui.elastic.co/pr_8565/
Storybook: https://eui.elastic.co/pr_8565/storybook
New docs: https://eui.elastic.co/pr_8565/new-docs

elasticmachine · 2025-04-11T12:12:52Z

💚 Build Succeeded

Buildkite Build
Commit: 97004f7

History

💚 Build #3827 succeeded 458aafd
💚 Build #3816 succeeded 458aafd

cc @tkajtoch

`101.3.0` ⏩ `101.4.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes This PR only updates tests and snapshots related to changes on EUI side: - updated `aria-current="true"` to `aria-current="page"` - updated icon usage `userAvatar` to `user` ## Package updates ### `@elastic/eui` #### [`v101.4.0`](https://github.com/elastic/eui/releases/v101.4.0) - Spread `labelProps` to the `label` element in `EuiCheckableCard` ([#8586](elastic/eui#8586)) - Add `controls`, `flask`, `comment`, and `readOnly` glyphs to `EuiIcon` ([#8580](elastic/eui#8580)) - Refactored `EuiExpression`, `EuiFacetGroup`, `EuiFacetButton`, `EuiFilterGroup`, `EuiHeader`, `EuiImage` and `EuiListGroup` to memoize their internal Emotion styles ([#8565](elastic/eui#8565)) - Updated global `border.radius.medium` token value for default `Borealis` theme to `4px` ([#8563](elastic/eui#8563)) - Updated `EuiProvider` to build themes including `highContrastMode` ([#8558](elastic/eui#8558)) **Accessibility** - Removed the `aria-label` attribute from the `ul` element in `EuiPagination` to avoid duplicate screen reader output ([#8597](elastic/eui#8597)) - Set a more specific `aria-current="page"` on list items in `EuiPagination` ([#8597](elastic/eui#8597)) - Added `aria-modal` to `EuiFlyout` with `type="overlay"` ([#8591](elastic/eui#8591)) **Dependency updates** - Updated `@elastic/prismjs-esql` to v1.1.0 ([#8587](elastic/eui#8587)) ### `@elastic/eui-theme-borealis@0.2.0` - Updated component tokens to use `computed` values to ensure correct inheritance from theme overrides ([#8558](elastic/eui#8558)) - Added `overrides.HCM` to `euiThemeBorealis` to support theme internal overrides ([#8558](elastic/eui#8558)) - Updated `border.radius.medium` token value to `4px` ([#8563](elastic/eui#8563)) ### `@elastic/eui-theme-common@0.2.0` - Added support for theme `overrides` as optional part of `EuiThemeShape` ([#8558](elastic/eui#8558)) - Updated `getComputed` to support high contrast mode overrides defined on `overrides.HCM` ([#8558](elastic/eui#8558)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

`101.3.0` ⏩ `101.4.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes This PR only updates tests and snapshots related to changes on EUI side: - updated `aria-current="true"` to `aria-current="page"` - updated icon usage `userAvatar` to `user` ## Package updates ### `@elastic/eui` #### [`v101.4.0`](https://github.com/elastic/eui/releases/v101.4.0) - Spread `labelProps` to the `label` element in `EuiCheckableCard` ([elastic#8586](elastic/eui#8586)) - Add `controls`, `flask`, `comment`, and `readOnly` glyphs to `EuiIcon` ([elastic#8580](elastic/eui#8580)) - Refactored `EuiExpression`, `EuiFacetGroup`, `EuiFacetButton`, `EuiFilterGroup`, `EuiHeader`, `EuiImage` and `EuiListGroup` to memoize their internal Emotion styles ([elastic#8565](elastic/eui#8565)) - Updated global `border.radius.medium` token value for default `Borealis` theme to `4px` ([elastic#8563](elastic/eui#8563)) - Updated `EuiProvider` to build themes including `highContrastMode` ([elastic#8558](elastic/eui#8558)) **Accessibility** - Removed the `aria-label` attribute from the `ul` element in `EuiPagination` to avoid duplicate screen reader output ([elastic#8597](elastic/eui#8597)) - Set a more specific `aria-current="page"` on list items in `EuiPagination` ([elastic#8597](elastic/eui#8597)) - Added `aria-modal` to `EuiFlyout` with `type="overlay"` ([elastic#8591](elastic/eui#8591)) **Dependency updates** - Updated `@elastic/prismjs-esql` to v1.1.0 ([elastic#8587](elastic/eui#8587)) ### `@elastic/eui-theme-borealis@0.2.0` - Updated component tokens to use `computed` values to ensure correct inheritance from theme overrides ([elastic#8558](elastic/eui#8558)) - Added `overrides.HCM` to `euiThemeBorealis` to support theme internal overrides ([elastic#8558](elastic/eui#8558)) - Updated `border.radius.medium` token value to `4px` ([elastic#8563](elastic/eui#8563)) ### `@elastic/eui-theme-common@0.2.0` - Added support for theme `overrides` as optional part of `EuiThemeShape` ([elastic#8558](elastic/eui#8558)) - Updated `getComputed` to support high contrast mode overrides defined on `overrides.HCM` ([elastic#8558](elastic/eui#8558)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com> (cherry picked from commit d2d2765) # Conflicts: # x-pack/solutions/security/plugins/security_solution/public/explore/components/paginated_table/__snapshots__/index.test.tsx.snap # x-pack/solutions/security/plugins/security_solution/public/explore/components/paginated_table/index.test.tsx # x-pack/solutions/security/plugins/security_solution/public/explore/hosts/components/uncommon_process_table/__snapshots__/index.test.tsx.snap # x-pack/solutions/security/plugins/security_solution/public/explore/network/components/network_dns_table/__snapshots__/index.test.tsx.snap # x-pack/solutions/security/plugins/security_solution/public/explore/network/components/network_http_table/__snapshots__/index.test.tsx.snap # x-pack/solutions/security/plugins/security_solution/public/explore/network/components/network_top_countries_table/__snapshots__/index.test.tsx.snap # x-pack/solutions/security/plugins/security_solution/public/explore/network/components/network_top_n_flow_table/__snapshots__/index.test.tsx.snap # x-pack/solutions/security/plugins/security_solution/public/explore/network/components/tls_table/__snapshots__/index.test.tsx.snap # x-pack/solutions/security/plugins/security_solution/public/explore/network/components/users_table/__snapshots__/index.test.tsx.snap

`101.3.0` ⏩ `101.4.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) >[!IMPORTANT] This PR is a direct sibling to this [upgrade PR](#218778) to `main`. The difference is that it adds a standalone EUI package with the previous "Amsterdam" theme. Apart from the theme difference, **there are no further changes added**. ## Changes This PR only updates tests and snapshots related to changes on EUI side: - updated `aria-current="true"` to `aria-current="page"` - updated icon usage `userAvatar` to `user` ## Package updates ### `@elastic/eui` #### [`v101.4.0`](https://github.com/elastic/eui/releases/v101.4.0) - Spread `labelProps` to the `label` element in `EuiCheckableCard` ([#8586](elastic/eui#8586)) - Add `controls`, `flask`, `comment`, and `readOnly` glyphs to `EuiIcon` ([#8580](elastic/eui#8580)) - Refactored `EuiExpression`, `EuiFacetGroup`, `EuiFacetButton`, `EuiFilterGroup`, `EuiHeader`, `EuiImage` and `EuiListGroup` to memoize their internal Emotion styles ([#8565](elastic/eui#8565)) - Updated global `border.radius.medium` token value for default `Borealis` theme to `4px` ([#8563](elastic/eui#8563)) - Updated `EuiProvider` to build themes including `highContrastMode` ([#8558](elastic/eui#8558)) **Accessibility** - Removed the `aria-label` attribute from the `ul` element in `EuiPagination` to avoid duplicate screen reader output ([#8597](elastic/eui#8597)) - Set a more specific `aria-current="page"` on list items in `EuiPagination` ([#8597](elastic/eui#8597)) - Added `aria-modal` to `EuiFlyout` with `type="overlay"` ([#8591](elastic/eui#8591)) **Dependency updates** - Updated `@elastic/prismjs-esql` to v1.1.0 ([#8587](elastic/eui#8587)) ### `@elastic/eui-theme-borealis@0.2.0` - Updated component tokens to use `computed` values to ensure correct inheritance from theme overrides ([#8558](elastic/eui#8558)) - Added `overrides.HCM` to `euiThemeBorealis` to support theme internal overrides ([#8558](elastic/eui#8558)) - Updated `border.radius.medium` token value to `4px` ([#8563](elastic/eui#8563)) ### `@elastic/eui-theme-common@0.2.0` - Added support for theme `overrides` as optional part of `EuiThemeShape` ([#8558](elastic/eui#8558)) - Updated `getComputed` to support high contrast mode overrides defined on `overrides.HCM` ([#8558](elastic/eui#8558))

`101.3.0` ⏩ `101.4.0` [Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams) ## Changes This PR only updates tests and snapshots related to changes on EUI side: - updated `aria-current="true"` to `aria-current="page"` - updated icon usage `userAvatar` to `user` ## Package updates ### `@elastic/eui` #### [`v101.4.0`](https://github.com/elastic/eui/releases/v101.4.0) - Spread `labelProps` to the `label` element in `EuiCheckableCard` ([elastic#8586](elastic/eui#8586)) - Add `controls`, `flask`, `comment`, and `readOnly` glyphs to `EuiIcon` ([elastic#8580](elastic/eui#8580)) - Refactored `EuiExpression`, `EuiFacetGroup`, `EuiFacetButton`, `EuiFilterGroup`, `EuiHeader`, `EuiImage` and `EuiListGroup` to memoize their internal Emotion styles ([elastic#8565](elastic/eui#8565)) - Updated global `border.radius.medium` token value for default `Borealis` theme to `4px` ([elastic#8563](elastic/eui#8563)) - Updated `EuiProvider` to build themes including `highContrastMode` ([elastic#8558](elastic/eui#8558)) **Accessibility** - Removed the `aria-label` attribute from the `ul` element in `EuiPagination` to avoid duplicate screen reader output ([elastic#8597](elastic/eui#8597)) - Set a more specific `aria-current="page"` on list items in `EuiPagination` ([elastic#8597](elastic/eui#8597)) - Added `aria-modal` to `EuiFlyout` with `type="overlay"` ([elastic#8591](elastic/eui#8591)) **Dependency updates** - Updated `@elastic/prismjs-esql` to v1.1.0 ([elastic#8587](elastic/eui#8587)) ### `@elastic/eui-theme-borealis@0.2.0` - Updated component tokens to use `computed` values to ensure correct inheritance from theme overrides ([elastic#8558](elastic/eui#8558)) - Added `overrides.HCM` to `euiThemeBorealis` to support theme internal overrides ([elastic#8558](elastic/eui#8558)) - Updated `border.radius.medium` token value to `4px` ([elastic#8563](elastic/eui#8563)) ### `@elastic/eui-theme-common@0.2.0` - Added support for theme `overrides` as optional part of `EuiThemeShape` ([elastic#8558](elastic/eui#8558)) - Updated `getComputed` to support high contrast mode overrides defined on `overrides.HCM` ([elastic#8558](elastic/eui#8558)) --------- Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

tkajtoch self-assigned this Apr 8, 2025

tkajtoch requested a review from a team as a code owner April 8, 2025 12:26

tkajtoch mentioned this pull request Apr 8, 2025

[Emotion] Memoize styles + opinionated clean up more components #8172

Closed

12 tasks

mgadewoll self-requested a review April 9, 2025 09:18

mgadewoll approved these changes Apr 9, 2025

View reviewed changes

cee-chen and others added 8 commits April 11, 2025 13:36

[EuiExpression] Memoize styles

0d95b95

+ remove unnecessary function for styles w/ no theme token + inline JSX where possible

[EuiFacetButton] Memoize + simplify styles

c075986

- disabled opacity is fairly static and can be DRYed out - loading spinner: no styles being applied so this isn't necessary

[EuiFacetGroup] Memoize styles

764cf5c

+ remove passed `layout` arg in favor of static definitions - rewrite vertical vs horizontal gutters utils to be slightly less confusing + replace `calc()` with `mathWithUnits()`

[EuiFilterGroup] Memoize styles

c862ca7

+ prefer inline JSX

[EuiHeader] Memoize styles + inline JSX

395fc46

- replace `EuiHideFor/ShowFor` usage with a breakpoint hook instead

[EuiImage] Memoize styles + code organization cleanup

a8db135

+ remove unnecessary fragments + remove some unnecessary callback consts, just inline them if they're not reused and we're not going to memoize them

[EuiListGroup] Memoize styles + clean up code

40c3158

- `list_group_item` has too much conditional JSX to deal with right now, should likely be split up into subcomponents in the future + remove unnecessary style functions, just use a static obj instead + re-run VRT screenshots

chore: add changelog

97004f7

tkajtoch force-pushed the feat/cherry-pick-memoization-changes branch from 458aafd to 97004f7 Compare April 11, 2025 11:41

tkajtoch merged commit 1743d1e into elastic:main Apr 11, 2025
6 checks passed

This was referenced Apr 22, 2025

Upgrade EUI to v101.4.0 elastic/kibana#218778

Merged

[8.19] Upgrade EUI to v101.4.0 elastic/kibana#218823

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Emotion] Cherry pick style memoization commits#8565

[Emotion] Cherry pick style memoization commits#8565
tkajtoch merged 8 commits intoelastic:mainfrom
tkajtoch:feat/cherry-pick-memoization-changes

tkajtoch commented Apr 8, 2025 •

edited by mgadewoll

Loading

Uh oh!

mgadewoll left a comment

Uh oh!

tkajtoch commented Apr 9, 2025

Uh oh!

elasticmachine commented Apr 11, 2025

Uh oh!

kibanamachine commented Apr 11, 2025

Uh oh!

elasticmachine commented Apr 11, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

tkajtoch commented Apr 8, 2025 • edited by mgadewoll Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

QA

General checklist

Uh oh!

mgadewoll left a comment

Choose a reason for hiding this comment

Uh oh!

tkajtoch commented Apr 9, 2025

Uh oh!

elasticmachine commented Apr 11, 2025

💚 Build Succeeded

Uh oh!

kibanamachine commented Apr 11, 2025

Uh oh!

elasticmachine commented Apr 11, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

tkajtoch commented Apr 8, 2025 •

edited by mgadewoll

Loading