Skip to content

[8.17] [SharedUX] Fix toast counter badge stack order (#229300)#229782

Merged
angeles-mb merged 1 commit intoelastic:8.17from
angeles-mb:backport/8.17/pr-229300
Jul 29, 2025
Merged

[8.17] [SharedUX] Fix toast counter badge stack order (#229300)#229782
angeles-mb merged 1 commit intoelastic:8.17from
angeles-mb:backport/8.17/pr-229300

Conversation

@angeles-mb
Copy link
Contributor

Backport

This will backport the following commits from main to 8.17:

Questions ?

Please refer to the Backport tool documentation

Closes elastic#226225

## Summary
- Fixed the toast counter badge which was positioned behind the toast
(toast stack context sets [z-index:
9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))
- Original toast counter PR:
elastic#161738
- As discussed on that PR, a more robust approach would include this
counter in the EUI component itself but it seems that it was discarded
here: elastic/eui#6945 after Kibana's usecase
being covered by this simpler approach

## Visuals
### Before/After Success

<img width="345" height="77" alt="Screenshot 2025-07-24 at 11 27 06"
src="https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780"
/>

<img width="349" height="78" alt="Screenshot 2025-07-24 at 11 27 54"
src="https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8"
/>

### Before/After Info Flavour

<img width="346" height="78" alt="Screenshot 2025-07-24 at 11 36 50"
src="https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b"
/>

<img width="346" height="77" alt="Screenshot 2025-07-24 at 11 37 20"
src="https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09"
/>

### Before/After Success Mobile
<img width="398" height="135" alt="Screenshot 2025-07-24 at 11 29 39"
src="https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f"
/>

<img width="395" height="132" alt="Screenshot 2025-07-24 at 11 28 35"
src="https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3"
/>

(cherry picked from commit 9699426)

# Conflicts:
#	packages/core/notifications/core-notifications-browser-internal/src/toasts/__snapshots__/deduplicate_toasts.test.tsx.snap
#	x-pack/platform/plugins/private/canvas/public/components/export_app/__snapshots__/export_app.test.tsx.snap
@angeles-mb angeles-mb added the backport This PR is a backport of another PR label Jul 29, 2025
@angeles-mb angeles-mb added the backport This PR is a backport of another PR label Jul 29, 2025
@angeles-mb angeles-mb enabled auto-merge (squash) July 29, 2025 10:26
@angeles-mb angeles-mb disabled auto-merge July 29, 2025 10:26
@angeles-mb angeles-mb self-assigned this Jul 29, 2025
@angeles-mb angeles-mb enabled auto-merge (squash) July 29, 2025 11:22
@elasticmachine
Copy link
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] Jest Tests #9 / TableListView tag filtering should filter by tag from the search bar filter

Metrics [docs]

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id before after diff
core 435.6KB 435.6KB +10.0B

cc @angeles-mb

@angeles-mb angeles-mb merged commit b068361 into elastic:8.17 Jul 29, 2025
13 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport This PR is a backport of another PR

3 participants