[EuiAvatar] Support "advanced" emoji (emoji sequence) by acstll · Pull Request #9227 · elastic/eui

acstll · 2025-11-20T14:51:56Z

Summary

Resolves #9043

This PR enables passing complex emoji aka emoji sequence into initials in EuiAvatar.

Important

Attribution: this PR was authored in concert with Claude 4.5 Sonnet

Why are we making this change?

To enhance usage of EuiAvatar. It was also a request.

Screenshots

Before

After

Impact to users

🟢 No impact.

QA

Verify emoji sequence like 🕵🏻‍♂️ is supported in the initials prop (Storybook)
~ Verify there are no regressions in EuiAvatar

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)~~
- ~~If the changes unblock an issue in a different repo, smoke tested carefully (see Testing EUI features in Kibana ahead of time)~~
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)

…ials

acstll · 2025-11-20T15:22:27Z

"Gracelly" is a superior kind of progressive enhancement…

weronikaolejniczak · 2025-11-20T16:38:02Z

packages/eui/src/components/avatar/avatar.test.tsx

Love the emojis in the test 😹

it's a bit embarrassing but hey

packages/eui/src/services/string/to_initials.ts

elasticmachine · 2025-11-24T10:11:30Z

💚 Build Succeeded

History

💚 Build #2015 succeeded 6ac16b6

cc @acstll

elasticmachine · 2025-11-24T11:01:16Z

💚 Build Succeeded

Buildkite Build
Commit: 90a03d1

cc @acstll

tkajtoch

Changes look good! thank you for addressing my comment

## Dependency updates - `@elastic/eui`: `v109.2.0` ⏩ `v110.0.0` --- ## Changes - Updates usages of the `message` prop on `EuiInMemoryTable` to `noItemsMessage` - Updates usages of `EuiSearchBar`'s `onChange` prop to check for the `query` argument, as it may be `null` now - Removes obsolete `color` props on implementations of `EuiPageTemplate` and `EuiPageTemplate.Header` (`color` prop wasn't applied before either) ## Package updates ### `@elastic/eui` v110.0.0 - Updated `EuiSuperDatePicker` to expose plain text `utcOffset` and `timeZoneName` in `timeZoneDisplayProps.customRender` render function ([#9245](elastic/eui#9245)) - Updated `EuiHeaderLogo` to add a hover style ([#9240](elastic/eui#9240)) - Made `EuiQuickSelectPanel` available for importing from the `@elastic/eui` package ([#9239](elastic/eui#9239)) - Updated `EuiAvatar` to support Emoji Sequence ("advanced") in the `initials` prop ([#9227](elastic/eui#9227)) - Added `color` prop on `EuiPageHeader` to support `transparent` (default) and `plain` backgrounds. ([#9220](elastic/eui#9220)) - Added `color` prop on `EuiPage` to support `transparent` (default) and `plain` backgrounds. ([#9220](elastic/eui#9220)) - Updated `EuiPageTemplate` to ensure `panelled=true` renders a `EuiPageHeader` with a plain background by default ([#9220](elastic/eui#9220)) - Removed the default background style on `EuiPageTemplate`'s outer wrapper ([#9220](elastic/eui#9220)) **Bug fixes** - Fixed icon size in `EuiSuperDatePicker`'s time window buttons when `compressed={true}` ([#9245](elastic/eui#9245)) - Fixed `EuiIcon` visibility issue with `logoElastic` when `color` is set to `text` or `ghost` in light mode ([#9247](elastic/eui#9247)) - Fixed `EuiInMemoryTable` support for controlled search for plain text (when `searchFormat="text"`) by properly handling `search.query` and `search.defaulQuery` ([#9142](elastic/eui#9142)) **Breaking changes** - Removed deprecated `message` prop from `EuiInMemoryTable`, use `noItemsMessage` instead ([#9234](elastic/eui#9234)) **Accessibility** - Improved the accessibility of input fields in the popover of `EuiSuperDatePicker` by properly labeling them ([#9239](elastic/eui#9239)) - Improved the accessibility of `EuiSelectable` by removing empty `aria-activedescendant` attribute when no option is active to ensure the search input is perceivable by screen readers ([#9223](elastic/eui#9223)) --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: Jorge Oliveira <jorge.oliveira@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

## Dependency updates - `@elastic/eui`: `v109.2.0` ⏩ `v110.0.0` --- ## Changes - Updates usages of the `message` prop on `EuiInMemoryTable` to `noItemsMessage` - Updates usages of `EuiSearchBar`'s `onChange` prop to check for the `query` argument, as it may be `null` now - Removes obsolete `color` props on implementations of `EuiPageTemplate` and `EuiPageTemplate.Header` (`color` prop wasn't applied before either) ## Package updates ### `@elastic/eui` v110.0.0 - Updated `EuiSuperDatePicker` to expose plain text `utcOffset` and `timeZoneName` in `timeZoneDisplayProps.customRender` render function ([elastic#9245](elastic/eui#9245)) - Updated `EuiHeaderLogo` to add a hover style ([elastic#9240](elastic/eui#9240)) - Made `EuiQuickSelectPanel` available for importing from the `@elastic/eui` package ([elastic#9239](elastic/eui#9239)) - Updated `EuiAvatar` to support Emoji Sequence ("advanced") in the `initials` prop ([elastic#9227](elastic/eui#9227)) - Added `color` prop on `EuiPageHeader` to support `transparent` (default) and `plain` backgrounds. ([elastic#9220](elastic/eui#9220)) - Added `color` prop on `EuiPage` to support `transparent` (default) and `plain` backgrounds. ([elastic#9220](elastic/eui#9220)) - Updated `EuiPageTemplate` to ensure `panelled=true` renders a `EuiPageHeader` with a plain background by default ([elastic#9220](elastic/eui#9220)) - Removed the default background style on `EuiPageTemplate`'s outer wrapper ([elastic#9220](elastic/eui#9220)) **Bug fixes** - Fixed icon size in `EuiSuperDatePicker`'s time window buttons when `compressed={true}` ([elastic#9245](elastic/eui#9245)) - Fixed `EuiIcon` visibility issue with `logoElastic` when `color` is set to `text` or `ghost` in light mode ([elastic#9247](elastic/eui#9247)) - Fixed `EuiInMemoryTable` support for controlled search for plain text (when `searchFormat="text"`) by properly handling `search.query` and `search.defaulQuery` ([elastic#9142](elastic/eui#9142)) **Breaking changes** - Removed deprecated `message` prop from `EuiInMemoryTable`, use `noItemsMessage` instead ([elastic#9234](elastic/eui#9234)) **Accessibility** - Improved the accessibility of input fields in the popover of `EuiSuperDatePicker` by properly labeling them ([elastic#9239](elastic/eui#9239)) - Improved the accessibility of `EuiSelectable` by removing empty `aria-activedescendant` attribute when no option is active to ensure the search input is perceivable by screen readers ([elastic#9223](elastic/eui#9223)) --------- Co-authored-by: Weronika Olejniczak <weronika.olejniczak@elastic.co> Co-authored-by: Jorge Oliveira <jorge.oliveira@elastic.co> Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>

acstll added 3 commits November 20, 2025 15:35

[EuiAvatar] Support emoji sequence

d00032d

[Services] toInitials returns always a string

c7ceab0

[Services] Gracelly handle Intl.Segmenter API not supported in toInit…

5a788ac

…ials

acstll self-assigned this Nov 20, 2025

Changelog

6ac16b6

acstll marked this pull request as ready for review November 20, 2025 15:26

acstll requested a review from a team as a code owner November 20, 2025 15:26

weronikaolejniczak reviewed Nov 20, 2025

View reviewed changes

tkajtoch reviewed Nov 21, 2025

View reviewed changes

packages/eui/src/services/string/to_initials.ts Show resolved Hide resolved

Add comment

90a03d1

weronikaolejniczak mentioned this pull request Nov 24, 2025

[EuiInMemoryTable] Support controlled plain text search #9142

Merged

14 tasks

acstll requested a review from weronikaolejniczak November 25, 2025 14:40

tkajtoch approved these changes Nov 25, 2025

View reviewed changes

acstll merged commit 4947443 into elastic:main Nov 25, 2025
7 checks passed

mgadewoll mentioned this pull request Dec 2, 2025

Update EUI to 110.0.0 elastic/kibana#244866

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiAvatar] Support "advanced" emoji (emoji sequence)#9227

[EuiAvatar] Support "advanced" emoji (emoji sequence)#9227
acstll merged 5 commits intoelastic:mainfrom
acstll:avatar-multichar-emoji

acstll commented Nov 20, 2025 •

edited

Loading

Uh oh!

acstll commented Nov 20, 2025 •

edited

Loading

Uh oh!

weronikaolejniczak Nov 20, 2025

Uh oh!

acstll Nov 24, 2025

Uh oh!

Uh oh!

elasticmachine commented Nov 24, 2025

Uh oh!

elasticmachine commented Nov 24, 2025

Uh oh!

tkajtoch left a comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Conversation

acstll commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Why are we making this change?

Screenshots

Before

After

Impact to users

QA

General checklist

Uh oh!

acstll commented Nov 20, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

weronikaolejniczak Nov 20, 2025

Choose a reason for hiding this comment

Uh oh!

acstll Nov 24, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

elasticmachine commented Nov 24, 2025

💚 Build Succeeded

History

Uh oh!

elasticmachine commented Nov 24, 2025

💚 Build Succeeded

Uh oh!

tkajtoch left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

acstll commented Nov 20, 2025 •

edited

Loading

acstll commented Nov 20, 2025 •

edited

Loading