Skip to content

[Docs] Fix EuiEmptyPrompt empty cases examples#9324

Merged
weronikaolejniczak merged 2 commits intoelastic:mainfrom
weronikaolejniczak:fix/website-empty-state
Jan 23, 2026
Merged

[Docs] Fix EuiEmptyPrompt empty cases examples#9324
weronikaolejniczak merged 2 commits intoelastic:mainfrom
weronikaolejniczak:fix/website-empty-state

Conversation

@weronikaolejniczak
Copy link
Copy Markdown
Contributor

@weronikaolejniczak weronikaolejniczak commented Jan 16, 2026 •
edited
Loading

Summary

  • Added displayName to all components used in empty state example snippets: EuiButton, EuiButtonEmpty, EuiDescriptionList and its sub-components, EuiEmptyPrompt, EuiFlexGrid, EuiFlexItem, EuiIcon, EuiImage, EuiLoadingLogo, EuiPageSection, EuiPageSidebar, EuiPageTemplate and its sub-components and EuiPanel.
  • Added a change log entry because it is an enhancement but doesn't affect much and was predominantly done to fix the issue with documentation website, so I welcome opinions. I think it doesn't hurt to add it.

Why are we making this change?

Resolves #9062

Empty prompt empty state example previews are broken (see here).

Screenshots #

Kapture.2026-01-16.at.13.22.01.mp4

Impact to users

🟢 It's a bug fix for documentation website and an enhancement to EUI. It's good practice to add displayName for improved DX when debugging with React DevTools.

QA

Specific checklist

  • [Staging] Verify EuiEmptyPrompt empty states example previews work as expected and code snippets are correct

General checklist

  • Browser QA
    • Checked in both light and dark modes
    • Checked in both MacOS and Windows high contrast modes
    • Checked in mobile
    • Checked in Chrome, Safari, Edge, and Firefox
    • Checked for accessibility including keyboard-only and screenreader modes
  • Docs site QA
  • Code quality checklist
  • 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)

@weronikaolejniczak weronikaolejniczak changed the title feat(eui): add displayName to several components Add displayName to several components Jan 16, 2026
@weronikaolejniczak weronikaolejniczak changed the title Add displayName to several components [Docs] Fix EuiEmptyPrompt empty cases example previews Jan 16, 2026
@weronikaolejniczak weronikaolejniczak changed the title [Docs] Fix EuiEmptyPrompt empty cases example previews [Docs] Fix EuiEmptyPrompt empty cases examples Jan 16, 2026
@weronikaolejniczak weronikaolejniczak self-assigned this Jan 16, 2026
@weronikaolejniczak weronikaolejniczak marked this pull request as ready for review January 16, 2026 12:44
@weronikaolejniczak weronikaolejniczak requested a review from a team as a code owner January 16, 2026 12:44
@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Jan 16, 2026

💚 Build Succeeded

cc @weronikaolejniczak

@elasticmachine
Copy link
Copy Markdown
Collaborator

elasticmachine commented Jan 16, 2026

💚 Build Succeeded

cc @weronikaolejniczak

@acstll acstll self-requested a review January 23, 2026 10:57
acstll
acstll approved these changes Jan 23, 2026
View reviewed changes
Copy link
Copy Markdown
Contributor

@acstll acstll left a comment

Choose a reason for hiding this comment

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

🟢 Verified the example works as expected, and double-checked all new displayNames are correct (no typos). Thank you!

@weronikaolejniczak weronikaolejniczak merged commit c0c913c into elastic:main Jan 23, 2026
6 checks passed
weronikaolejniczak added a commit to weronikaolejniczak/eui that referenced this pull request Jan 23, 2026
@weronikaolejniczak
[Docs] Fix EuiEmptyPrompt empty cases examples (elastic#9324)
ead4197
@acstll acstll mentioned this pull request Jan 26, 2026
Merged
acstll added a commit to elastic/kibana that referenced this pull request Jan 28, 2026
@acstll @tkajtoch
Upgrade EUI to v112.1.0 (#250407)
814fdbd 
`112.0.0` ⏩ `112.1.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

- Update `span_links_badge.tsx` conditional `onClick` props on
`EuiBadge` to satisfy TypeScript
93d7fae
- Update snapshots 24c2f9a

## Package updates

### `@elastic/eui`
[`v112.1.0`](https://github.com/elastic/eui/releases/tag/v112.1.0)

- Updated `timeline` icon glyph
([#9331](elastic/eui#9331))
- Updated `EuiContextMenu` panels to allow passing `data-test-subj`,
`aria-label`, `className` and `css` props
([#9323](elastic/eui#9323))
- Added "zoom in" functionality to time window buttons in
`EuiSuperDatePicker` ([#9325](elastic/eui#9325))
- Added `displayName` to `EuiButton`, `EuiButtonEmpty`,
`EuiDescriptionList` and its sub-components, `EuiEmptyPrompt`,
`EuiFlexGrid`, `EuiFlexItem`, `EuiIcon`, `EuiImage`, `EuiLoadingLogo`,
`EuiPageSection`, `EuiPageSidebar`, `EuiPageTemplate` and its
sub-components and `EuiPanel`
([#9324](elastic/eui#9324))
- Added `fill` prop (defaults to `false`) to `EuiBadge` component that
controls whether the badge should use filled or non-filled (less
intense) colors. By default, badges will now render as the non-filled
variant. ([#9306](elastic/eui#9306))
- Updated EuiBadge design to have rounded corners and improved paddings
([#9302](elastic/eui#9302))

**Bug fixes**

- Fixed non-virtualized `EuiSelectable` throwing SyntaxError when
selecting an option ([#9326](elastic/eui#9326))
- Fixed an issue where `push` flyouts in a stacked layout calculated the
content offset based on the hidden main flyout's width instead of the
visible child flyout's width
([#9322](elastic/eui#9322))

### @elastic/eui-theme-borealis
[`v5.4.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/eui-theme-borealis/changelogs/CHANGELOG_2026.md#v540)

- Updated `badgeBackground` color token value to equal
`backgroundFilledText`
([#9306](elastic/eui#9306))

### @elastic/eui-docusaurus-theme
[`v2.2.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/docusaurus-theme/changelogs/CHANGELOG_2026.md#v220)

- Added `extraFiles` prop to the `Demo` component. It allows to pass
extra files that will be added to the Codesandbox instance.
([#9317](elastic/eui#9317))
- Updated the `IMPORT_REGEX` to include relative imports so that all
imports are removed from the snippet. All imported references have to be
passed to `Demo` in the `scope` prop.
([#9317](elastic/eui#9317))

---------

Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
hannahbrooks pushed a commit to hannahbrooks/kibana that referenced this pull request Jan 30, 2026
@acstll @tkajtoch @hannahbrooks
Upgrade EUI to v112.1.0 (elastic#250407)
e964a37 
`112.0.0` ⏩ `112.1.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

- Update `span_links_badge.tsx` conditional `onClick` props on
`EuiBadge` to satisfy TypeScript
93d7fae
- Update snapshots 24c2f9a

## Package updates

### `@elastic/eui`
[`v112.1.0`](https://github.com/elastic/eui/releases/tag/v112.1.0)

- Updated `timeline` icon glyph
([elastic#9331](elastic/eui#9331))
- Updated `EuiContextMenu` panels to allow passing `data-test-subj`,
`aria-label`, `className` and `css` props
([elastic#9323](elastic/eui#9323))
- Added "zoom in" functionality to time window buttons in
`EuiSuperDatePicker` ([elastic#9325](elastic/eui#9325))
- Added `displayName` to `EuiButton`, `EuiButtonEmpty`,
`EuiDescriptionList` and its sub-components, `EuiEmptyPrompt`,
`EuiFlexGrid`, `EuiFlexItem`, `EuiIcon`, `EuiImage`, `EuiLoadingLogo`,
`EuiPageSection`, `EuiPageSidebar`, `EuiPageTemplate` and its
sub-components and `EuiPanel`
([elastic#9324](elastic/eui#9324))
- Added `fill` prop (defaults to `false`) to `EuiBadge` component that
controls whether the badge should use filled or non-filled (less
intense) colors. By default, badges will now render as the non-filled
variant. ([elastic#9306](elastic/eui#9306))
- Updated EuiBadge design to have rounded corners and improved paddings
([elastic#9302](elastic/eui#9302))

**Bug fixes**

- Fixed non-virtualized `EuiSelectable` throwing SyntaxError when
selecting an option ([elastic#9326](elastic/eui#9326))
- Fixed an issue where `push` flyouts in a stacked layout calculated the
content offset based on the hidden main flyout's width instead of the
visible child flyout's width
([elastic#9322](elastic/eui#9322))

### @elastic/eui-theme-borealis
[`v5.4.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/eui-theme-borealis/changelogs/CHANGELOG_2026.md#v540)

- Updated `badgeBackground` color token value to equal
`backgroundFilledText`
([elastic#9306](elastic/eui#9306))

### @elastic/eui-docusaurus-theme
[`v2.2.0`](https://github.com/elastic/eui/blob/16f9b31d753d963d7738049e7a176fcaf6e81e73/packages/docusaurus-theme/changelogs/CHANGELOG_2026.md#v220)

- Added `extraFiles` prop to the `Demo` component. It allows to pass
extra files that will be added to the Codesandbox instance.
([elastic#9317](elastic/eui#9317))
- Updated the `IMPORT_REGEX` to include relative imports so that all
imports are removed from the snippet. All imported references have to be
passed to `Demo` in the `scope` prop.
([elastic#9317](elastic/eui#9317))

---------

Co-authored-by: Tomasz Kajtoch <tomasz.kajtoch@elastic.co>
@weronikaolejniczak weronikaolejniczak deleted the fix/website-empty-state branch February 10, 2026 10:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@acstll acstll acstll approved these changes

Assignees

@weronikaolejniczak weronikaolejniczak

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[Docs] Empty states use cases don't render

3 participants

@weronikaolejniczak @elasticmachine @acstll