[VR] Update first batch of icons by ryankeairns · Pull Request #8530 · elastic/eui

ryankeairns · 2025-04-01T22:38:22Z

Summary

Updates 78 exsiting and adds 2 new icons.

Rollout approach

To make progress and ease the burden on downstream teams, this PR avoids renames, deprecations, and the updating of icons that have outstanding questions. Subsequent PRs will continue with this iterative approach and may focus on renames, deprecations, or additional icon updates.

Note

160 of the 165 Files changed are simply for the updated svg and asset/tsx files (x80 icons) 😬

Notes

Updates 80 svgs including changes to both legacy and new docs sites
Adds new icon checkCircle (to be used in buttons)
Adds new icon for code; updated visVega and editorCodeBlock with same same svg
visVega and editorCodeBlock will be deprecated in subsequent PR
user and userAvatar are the same svg; will deprecate the latter in subsequent PR
-controlsHorizontal and controlsVertical are the same svg; will deprecate both in favor of a single controls icon in subsequent PR

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)

kibanamachine · 2025-04-01T23:15:06Z

Preview staging links for this PR:

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

elasticmachine · 2025-04-01T23:16:09Z

💚 Build Succeeded

Buildkite Build
Commit: ea17925

tkajtoch · 2025-04-02T12:11:00Z

@ryankeairns Is there a final decision on how we want to roll this change out?

tkajtoch · 2025-04-02T12:12:13Z

packages/eui/src/components/icon/svgs/dot.svg

Perfection!

tkajtoch

The changes look great. I verified that the icons match their names and are rendered as expected.

I'm happy to approve as soon as we're certain we want to include this in the next EUI release 👍🏻

ryankeairns · 2025-04-02T15:04:40Z

Yes, we discussed several approaches - @JasonStoltz @yanwalton @MichaelMarcialis were included - and settled on this incremental rollout to a) get updates into the product sooner than later and b) minimize disruption to downstream teams.

For those following along, the icons in this PR were reviewed:

at the design/Figma stage
in a Kibana POC
and do not have outstanding feedback/questions

To reiterate, for all, there are no breaking changes and thus no changes will be asked of downstream teams. (until the next icons PR 😜 )

@tkajtoch I will stand by and monitor the upgrade PR in Kibana for any late feedback.

JasonStoltz · 2025-04-02T17:07:45Z

@tkajtoch I can confirm that I've personally thought about this at length 😅. These should be good to ship.

JasonStoltz · 2025-04-02T19:48:00Z

Approving, since it sounds like Tomasz has already performed QA.

`101.2.0` ⏩ `101.3.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) ## Package updates ### `@elastic/eui` #### [`v101.3.0`](https://github.com/elastic/eui/releases/v101.3.0) - Updated 78 existing and added two new glyphs (`code` and `checkCircle`) for `EuiIcon` ([#8530](elastic/eui#8530)) - Changed `gutterSize` to `m` between right side items on `EuiPageHeader` ([#8529](elastic/eui#8529)) **Bug fixes** - Fixed a visual bug on disabled `EuiButton` in high contrast mode where wrong text colors were applied ([#8550](elastic/eui#8550))

`101.2.0` ⏩ `101.3.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) ## Package updates ### `@elastic/eui` #### [`v101.3.0`](https://github.com/elastic/eui/releases/v101.3.0) - Updated 78 existing and added two new glyphs (`code` and `checkCircle`) for `EuiIcon` ([elastic#8530](elastic/eui#8530)) - Changed `gutterSize` to `m` between right side items on `EuiPageHeader` ([elastic#8529](elastic/eui#8529)) **Bug fixes** - Fixed a visual bug on disabled `EuiButton` in high contrast mode where wrong text colors were applied ([elastic#8550](elastic/eui#8550)) (cherry picked from commit 1204458) # Conflicts: # package.json # src/dev/license_checker/config.ts # yarn.lock

`101.2.0` ⏩ `101.3.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) - Updated 78 existing and added two new glyphs (`code` and `checkCircle`) for `EuiIcon` ([elastic#8530](elastic/eui#8530)) - Changed `gutterSize` to `m` between right side items on `EuiPageHeader` ([elastic#8529](elastic/eui#8529)) **Bug fixes** - Fixed a visual bug on disabled `EuiButton` in high contrast mode where wrong text colors were applied ([elastic#8550](elastic/eui#8550)) (cherry picked from commit 1204458)

> [!Note] > This PR is a manual backport of the already merged #217491 `101.0.1` ⏩ `101.3.0-classic.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) ## Package updates ### `@elastic/eui` #### [`v101.3.0`](https://github.com/elastic/eui/releases/v101.3.0) - Updated 78 existing and added two new glyphs (`code` and `checkCircle`) for `EuiIcon` ([#8530](elastic/eui#8530)) - Changed `gutterSize` to `m` between right side items on `EuiPageHeader` ([#8529](elastic/eui#8529)) **Bug fixes** - Fixed a visual bug on disabled `EuiButton` in high contrast mode where wrong text colors were applied ([#8550](elastic/eui#8550)) #### [`v101.2.0`](https://github.com/elastic/eui/releases/v101.2.0) - Added `showToolTip` prop on `EuiColorPickerSwatch` ([#8512](elastic/eui#8512)) **Bug fixes** - Fixed a visual issue of overlapping borders for layered `EuiPanel`s ([#8519](elastic/eui#8519)) - Fixes wrong `colorMode` styling for the search in `EuiHeader` with `theme="dark"` ([#8496](elastic/eui#8496)) **Accessibility** - Improved the accessibility of `EuiColorPicker` by adding color label tooltips on hover and focus for color swatches ([#8512](elastic/eui#8512)) - Added `disableScreenReaderOutput` prop on `EuiToolTip` to manually control if the tooltip content should be read when focusing the trigger. This prevents duplicate screen reader output when the tooltip content and `aria-label` on the trigger element have the same text content. ([#8508](elastic/eui#8508)) - Improves text color contrast for `EuiButton` with `color="warning"` in high contrast mode ([#8496](elastic/eui#8496)) - Improves contrast and visible distinction of the following components in high contrast mode: ([#8496](elastic/eui#8496)) - `EuiCode` - `EuiBadge` - `EuiBetaBadge` - `EuiNotificationBadge` **Dependency updates** - Updated `prismjs` to v1.30.0 ([#8506](elastic/eui#8506)) #### [`v101.1.0`](https://github.com/elastic/eui/releases/v101.1.0) - Updates `EuiTableRow` styles to check support for `:has(+)` selector ([#8498](elastic/eui#8498))  --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co>

ryankeairns added 3 commits April 1, 2025 15:23

initial icon updates

0541f2a

update snapshot

8960e95

add changelog

ea17925

ryankeairns added the visual refresh label Apr 1, 2025

ryankeairns marked this pull request as ready for review April 1, 2025 23:27

ryankeairns requested a review from a team as a code owner April 1, 2025 23:27

weronikaolejniczak self-requested a review April 2, 2025 12:11

tkajtoch reviewed Apr 2, 2025

View reviewed changes

packages/eui/src/components/icon/svgs/dot.svg

Copy link
Copy Markdown

Member

tkajtoch Apr 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Perfection!

ryankeairns reacted with laugh emoji

tkajtoch reviewed Apr 2, 2025

View reviewed changes

weronikaolejniczak removed their request for review April 2, 2025 13:01

JasonStoltz approved these changes Apr 2, 2025

View reviewed changes

ryankeairns merged commit 0110c27 into main Apr 2, 2025
8 checks passed

ryankeairns deleted the rk/hold-onto-your-icons branch April 2, 2025 20:05

weronikaolejniczak pushed a commit to weronikaolejniczak/eui that referenced this pull request Apr 4, 2025

[VR] Update first batch of icons (elastic#8530)

5bd22a6

mgadewoll mentioned this pull request Apr 7, 2025

[VRT] Update reference images after icon asset changes #8560

Merged

This was referenced Apr 8, 2025

Upgrade EUI to v101.3.0 elastic/kibana#217491

Merged

[8.x] Upgrade EUI to 101.3.0-classic.0 elastic/kibana#217395

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[VR] Update first batch of icons#8530

[VR] Update first batch of icons#8530
ryankeairns merged 3 commits intomainfrom
rk/hold-onto-your-icons

ryankeairns commented Apr 1, 2025 •

edited

Loading

Uh oh!

kibanamachine commented Apr 1, 2025

Uh oh!

elasticmachine commented Apr 1, 2025

Uh oh!

tkajtoch commented Apr 2, 2025

Uh oh!

tkajtoch Apr 2, 2025

Uh oh!

tkajtoch left a comment

Uh oh!

ryankeairns commented Apr 2, 2025

Uh oh!

JasonStoltz commented Apr 2, 2025 •

edited

Loading

Uh oh!

JasonStoltz commented Apr 2, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

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

Uh oh!

Summary

Rollout approach

QA

General checklist

Uh oh!

kibanamachine commented Apr 1, 2025

Uh oh!

elasticmachine commented Apr 1, 2025

💚 Build Succeeded

Uh oh!

tkajtoch commented Apr 2, 2025

Uh oh!

tkajtoch Apr 2, 2025

Choose a reason for hiding this comment

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

ryankeairns commented Apr 2, 2025

Uh oh!

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

Uh oh!

Uh oh!

JasonStoltz commented Apr 2, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

ryankeairns commented Apr 1, 2025 •

edited

Loading

JasonStoltz commented Apr 2, 2025 •

edited

Loading