[EuiIcon] Add new glyphs, soft delete others by ryankeairns · Pull Request #8580 · elastic/eui

ryankeairns · 2025-04-09T19:41:55Z

Closes https://github.com/elastic/platform-ux-team/issues/665

Important

This PR is part one of deprecating an initial batch of icons.
Part two will come after usage of to-be-deprecated icons is updated in Kibana.

Note

For reviewers, I need some help running the visual regression tests. Gave it a go, but ran into an error.

Summary

Part of a series of incremental PRs updating icons

Keeping it small, we have some redundant and/or unused icons that can be deprecated or renamed.

Under consideration / need to be done:

Added glyphs

controls, flask, comment, and readOnly

'Soft delete' - aliased to new glyphs and hidden from docs

beaker, controlsHorizontal, controlsVertical, discuss, editorCodeBlock, editorComment, exportAction, glasses, userAvatar, visVega

Next steps

After Kibana is upgraded to the EUI release containing these changes...
Note: New glyphs for export, code, user were added previously

controls will replace controlsHorizontal, controlsVertical
flask will replace beaker
comment will replace discuss, editorComment
export will replace exportAction
code will replace editorCodeBlock, visVega
user will replace userAvatar
readOnly will replace glasses

Once removed from Kibana, an EUI PR will be opened to fully deprecate the aliased glyphs.

QA

Remove or strikethrough items that do not apply to your PR.

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 documentation
- Props have proper autodocs (using @default if default values are missing) and playground toggles
- Checked Code Sandbox works for any docs examples
Code quality checklist
- Added or updated jest and cypress tests
- Updated visual regression 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)
Designer checklist
- If applicable, file an issue to update EUI's Figma library with any corresponding UI changes. (This is an internal repo, if you are external to Elastic, ask a maintainer to submit this request)

mgadewoll · 2025-04-10T15:42:12Z

After Kibana is upgraded to the EUI release containing these changes...
Note: New glyphs for export, code, user were added previously
Once removed from Kibana, an EUI PR will be opened to fully deprecate the aliased glyphs.

ℹ️ We need to ensure to backport this to the required Kibana versions as EUI is added back until 8.x.
This basically means we commit to updating icons in Amsterdam as well. Because if we do not update 8.x as well with the replacement changes, then the next EUI release with the internal deprecation will break 8.x otherwise.

- updates caused by updated icons after rebase with global border-radius change

mgadewoll · 2025-04-10T16:29:12Z

@ryankeairns I updated the VRT images for this PR.
From the changes to components (EuiMarkdownEditor, EuiDataGrid, EuiCommentList, EuiCollapsibleNavBeta) only the ones for EuiMarkdownEditor resulted in updated VRT images because other icon changes were already covered in this previous PR to update VRT images.

mgadewoll

🚢 🐈‍⬛ Changes LGTM ✅
I verified that the new icons are displayed as expected and soft deprecated ones are not shown anymore in both docs environments while still being available as aliased export.

JasonStoltz · 2025-04-10T17:44:13Z

packages/eui/src/components/icon/icon_map.ts

  at: 'at',
  auditbeatApp: 'app_auditbeat',
-  beaker: 'beaker',
+  beaker: 'flask', // NOTE: To be deprecated in favor of `flask`


Since we're mapping beaker to the flask svg, should we delete the underlying beaker svg?
https://github.com/elastic/eui/blob/main/packages/eui/src/components/icon/svgs/beaker.svg
https://github.com/elastic/eui/blob/main/packages/eui/src/components/icon/assets/beaker.tsx

I believe they are no longer used, correct?

Same for controlsHorizontal, etc.

Once removed from Kibana, an EUI PR will be opened to fully deprecate the aliased glyphs.

I believe the idea was to first update Kibana since they might use those icons? 🤔

Ah, ok. I was thinking that since all icon usage is mapped via this file ... since beaker and flask both now map to the flask svg -- it's no longer even possible to use the beaker svg -- nothing actually maps to the underlying beaker svg.

I could be totally wrong, and it probably doesn't matter all that much whether we remove the beaker svg now or later. I was mainly just curious.

Ah, good catch. I forgot to remove those now-unused svgs.

What @JasonStoltz said should be the case that those to-be-deprecated svgs are no longer pointed to in the icon map file. I happened to replace a few in the prior PR - kept the same name for, say glasses - so not all were still present here. I have deleted the remainder and will push up a commit.

elasticmachine · 2025-04-10T21:09:19Z

💚 Build Succeeded

History

💚 Build #20 succeeded b078a2c
💚 Build #14 succeeded 6271d7c
💚 Build #13 succeeded 6271d7c
💚 Build #12 succeeded 275ad3f
💚 Build #11 succeeded 275ad3f
💚 Build #4 succeeded 492e439

kibanamachine · 2025-04-10T21:44:17Z

Preview staging links for this PR:

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

elasticmachine · 2025-04-10T21:44:19Z

💚 Build Succeeded

Buildkite Build
Commit: b078a2c

History

💚 Build #3836 succeeded 6271d7c
💚 Build #3831 succeeded 492e439

`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>

ryankeairns changed the title ~~[EuiIcon] Add new glyphs, soft delete other icons~~ [EuiIcon] Add new glyphs, soft delete others Apr 9, 2025

ryankeairns marked this pull request as ready for review April 9, 2025 23:56

ryankeairns requested a review from a team as a code owner April 9, 2025 23:56

ryankeairns and others added 3 commits April 10, 2025 18:11

add new, soft delete other icons

ca93f98

add changelog

c14dfe1

test(vrt) update reference images

6271d7c

- updates caused by updated icons after rebase with global border-radius change

mgadewoll force-pushed the rk/icon-soft-deprecation-1 branch from 275ad3f to 6271d7c Compare April 10, 2025 16:26

mgadewoll approved these changes Apr 10, 2025

View reviewed changes

JasonStoltz reviewed Apr 10, 2025

View reviewed changes

remove unused files

b078a2c

ryankeairns merged commit f3f5cac into main Apr 10, 2025
6 checks passed

ryankeairns deleted the rk/icon-soft-deprecation-1 branch April 10, 2025 23:46

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

JasonStoltz mentioned this pull request Apr 25, 2025

Added background image guide to icons page #8630

Merged

ryankeairns mentioned this pull request Apr 30, 2025

Swap out to-be-deprecatd icons elastic/kibana#219817

Closed

9 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiIcon] Add new glyphs, soft delete others#8580

[EuiIcon] Add new glyphs, soft delete others#8580
ryankeairns merged 4 commits intomainfrom
rk/icon-soft-deprecation-1

ryankeairns commented Apr 9, 2025 •

edited by mgadewoll

Loading

Uh oh!

mgadewoll commented Apr 10, 2025

Uh oh!

mgadewoll commented Apr 10, 2025

Uh oh!

mgadewoll left a comment •

edited

Loading

Uh oh!

JasonStoltz Apr 10, 2025

Uh oh!

mgadewoll Apr 10, 2025 •

edited

Loading

Uh oh!

JasonStoltz Apr 10, 2025 •

edited

Loading

Uh oh!

ryankeairns Apr 10, 2025 •

edited

Loading

Uh oh!

elasticmachine commented Apr 10, 2025

Uh oh!

kibanamachine commented Apr 10, 2025

Uh oh!

elasticmachine commented Apr 10, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

ryankeairns commented Apr 9, 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 commented Apr 10, 2025

Uh oh!

mgadewoll commented Apr 10, 2025

Uh oh!

mgadewoll left a comment • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JasonStoltz Apr 10, 2025

Choose a reason for hiding this comment

Uh oh!

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

Uh oh!

Choose a reason for hiding this comment

Uh oh!

JasonStoltz Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ryankeairns Apr 10, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

elasticmachine commented Apr 10, 2025

💚 Build Succeeded

History

Uh oh!

kibanamachine commented Apr 10, 2025

Uh oh!

elasticmachine commented Apr 10, 2025

💚 Build Succeeded

History

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ryankeairns commented Apr 9, 2025 •

edited by mgadewoll

Loading

mgadewoll left a comment •

edited

Loading

mgadewoll Apr 10, 2025 •

edited

Loading

JasonStoltz Apr 10, 2025 •

edited

Loading

ryankeairns Apr 10, 2025 •

edited

Loading