[SharedUX] Fix toast counter badge stack order#229300
Merged
angeles-mb merged 2 commits intoelastic:mainfrom Jul 29, 2025
Merged
[SharedUX] Fix toast counter badge stack order#229300angeles-mb merged 2 commits intoelastic:mainfrom
angeles-mb merged 2 commits intoelastic:mainfrom
Conversation
Contributor
Author
|
/ci |
angeles-mb
force-pushed
the
226225-fix-hidden-toast-count-badge
branch
from
a8cbfe3 to
d057e35
Compare
angeles-mb
added
release_note:fix
Team:SharedUX
Contributor
|
Pinging @elastic/appex-sharedux (Team:SharedUX) |
Contributor
|
@elasticmachine merge upstream |
angeles-mb
force-pushed
the
226225-fix-hidden-toast-count-badge
branch
from
5a80d9c to
6968b52
Compare
angeles-mb
force-pushed
the
226225-fix-hidden-toast-count-badge
branch
from
6968b52 to
ef44cc8
Compare
Contributor
💛 Build succeeded, but was flaky
Failed CI StepsMetrics [docs]Page load bundle
History
cc @angeles-mb |
ThomThomson
approved these changes
Jul 28, 2025
jloleysens
approved these changes
Jul 29, 2025
Contributor
jloleysens
left a comment
jloleysens
left a comment
There was a problem hiding this comment.
Nice work @angeles-mb !
Contributor
|
Starting backport for target branches: 8.17, 8.18, 8.19, 9.0, 9.1 |
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 29, 2025
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)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Jul 29, 2025
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)
Contributor
💔 Some backports could not be created
Note: Successful backport PRs will be merged automatically after passing CI. Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
angeles-mb
added a commit
to angeles-mb/kibana
that referenced
this pull request
Jul 29, 2025
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: # src/core/packages/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
Contributor
Author
💔 Some backports could not be created
Note: Successful backport PRs will be merged automatically after passing CI. Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
Contributor
Author
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
angeles-mb
added a commit
to angeles-mb/kibana
that referenced
this pull request
Jul 29, 2025
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
kibanamachine
added a commit
that referenced
this pull request
Jul 29, 2025
# Backport This will backport the following commits from `main` to `9.1`: - [[SharedUX] Fix toast counter badge stack order (#229300)](#229300) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Ángeles Martínez Barrio","email":"angeles.martinezbarrio@elastic.co"},"sourceCommit":{"committedDate":"2025-07-29T09:04:24Z","message":"[SharedUX] Fix toast counter badge stack order (#229300)\n\nCloses https://github.com/elastic/kibana/issues/226225\n\n## Summary\n- Fixed the toast counter badge which was positioned behind the toast\n(toast stack context sets [z-index:\n9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))\n- Original toast counter PR:\nhttps://github.com//pull/161738\n- As discussed on that PR, a more robust approach would include this\ncounter in the EUI component itself but it seems that it was discarded\nhere: elastic/eui#6945 after Kibana's usecase\nbeing covered by this simpler approach\n\n## Visuals\n### Before/After Success\n\n<img width=\"345\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 27 06\"\nsrc=\"https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780\"\n/>\n\n<img width=\"349\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 27 54\"\nsrc=\"https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8\"\n/>\n\n### Before/After Info Flavour\n\n<img width=\"346\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 36 50\"\nsrc=\"https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b\"\n/>\n\n<img width=\"346\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 37 20\"\nsrc=\"https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09\"\n/>\n\n### Before/After Success Mobile\n<img width=\"398\" height=\"135\" alt=\"Screenshot 2025-07-24 at 11 29 39\"\nsrc=\"https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f\"\n/>\n\n<img width=\"395\" height=\"132\" alt=\"Screenshot 2025-07-24 at 11 28 35\"\nsrc=\"https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3\"\n/>","sha":"96994268de3da116737918e83b21d082d2165ab1","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:SharedUX","backport:all-open","v9.2.0"],"title":"[SharedUX] Fix toast counter badge stack order","number":229300,"url":"https://github.com/elastic/kibana/pull/229300","mergeCommit":{"message":"[SharedUX] Fix toast counter badge stack order (#229300)\n\nCloses https://github.com/elastic/kibana/issues/226225\n\n## Summary\n- Fixed the toast counter badge which was positioned behind the toast\n(toast stack context sets [z-index:\n9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))\n- Original toast counter PR:\nhttps://github.com//pull/161738\n- As discussed on that PR, a more robust approach would include this\ncounter in the EUI component itself but it seems that it was discarded\nhere: elastic/eui#6945 after Kibana's usecase\nbeing covered by this simpler approach\n\n## Visuals\n### Before/After Success\n\n<img width=\"345\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 27 06\"\nsrc=\"https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780\"\n/>\n\n<img width=\"349\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 27 54\"\nsrc=\"https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8\"\n/>\n\n### Before/After Info Flavour\n\n<img width=\"346\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 36 50\"\nsrc=\"https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b\"\n/>\n\n<img width=\"346\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 37 20\"\nsrc=\"https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09\"\n/>\n\n### Before/After Success Mobile\n<img width=\"398\" height=\"135\" alt=\"Screenshot 2025-07-24 at 11 29 39\"\nsrc=\"https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f\"\n/>\n\n<img width=\"395\" height=\"132\" alt=\"Screenshot 2025-07-24 at 11 28 35\"\nsrc=\"https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3\"\n/>","sha":"96994268de3da116737918e83b21d082d2165ab1"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/229300","number":229300,"mergeCommit":{"message":"[SharedUX] Fix toast counter badge stack order (#229300)\n\nCloses https://github.com/elastic/kibana/issues/226225\n\n## Summary\n- Fixed the toast counter badge which was positioned behind the toast\n(toast stack context sets [z-index:\n9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))\n- Original toast counter PR:\nhttps://github.com//pull/161738\n- As discussed on that PR, a more robust approach would include this\ncounter in the EUI component itself but it seems that it was discarded\nhere: elastic/eui#6945 after Kibana's usecase\nbeing covered by this simpler approach\n\n## Visuals\n### Before/After Success\n\n<img width=\"345\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 27 06\"\nsrc=\"https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780\"\n/>\n\n<img width=\"349\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 27 54\"\nsrc=\"https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8\"\n/>\n\n### Before/After Info Flavour\n\n<img width=\"346\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 36 50\"\nsrc=\"https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b\"\n/>\n\n<img width=\"346\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 37 20\"\nsrc=\"https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09\"\n/>\n\n### Before/After Success Mobile\n<img width=\"398\" height=\"135\" alt=\"Screenshot 2025-07-24 at 11 29 39\"\nsrc=\"https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f\"\n/>\n\n<img width=\"395\" height=\"132\" alt=\"Screenshot 2025-07-24 at 11 28 35\"\nsrc=\"https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3\"\n/>","sha":"96994268de3da116737918e83b21d082d2165ab1"}}]}] BACKPORT--> Co-authored-by: Ángeles Martínez Barrio <angeles.martinezbarrio@elastic.co>
kibanamachine
added a commit
that referenced
this pull request
Jul 29, 2025
) # Backport This will backport the following commits from `main` to `8.19`: - [[SharedUX] Fix toast counter badge stack order (#229300)](#229300) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Ángeles Martínez Barrio","email":"angeles.martinezbarrio@elastic.co"},"sourceCommit":{"committedDate":"2025-07-29T09:04:24Z","message":"[SharedUX] Fix toast counter badge stack order (#229300)\n\nCloses https://github.com/elastic/kibana/issues/226225\n\n## Summary\n- Fixed the toast counter badge which was positioned behind the toast\n(toast stack context sets [z-index:\n9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))\n- Original toast counter PR:\nhttps://github.com//pull/161738\n- As discussed on that PR, a more robust approach would include this\ncounter in the EUI component itself but it seems that it was discarded\nhere: elastic/eui#6945 after Kibana's usecase\nbeing covered by this simpler approach\n\n## Visuals\n### Before/After Success\n\n<img width=\"345\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 27 06\"\nsrc=\"https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780\"\n/>\n\n<img width=\"349\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 27 54\"\nsrc=\"https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8\"\n/>\n\n### Before/After Info Flavour\n\n<img width=\"346\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 36 50\"\nsrc=\"https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b\"\n/>\n\n<img width=\"346\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 37 20\"\nsrc=\"https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09\"\n/>\n\n### Before/After Success Mobile\n<img width=\"398\" height=\"135\" alt=\"Screenshot 2025-07-24 at 11 29 39\"\nsrc=\"https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f\"\n/>\n\n<img width=\"395\" height=\"132\" alt=\"Screenshot 2025-07-24 at 11 28 35\"\nsrc=\"https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3\"\n/>","sha":"96994268de3da116737918e83b21d082d2165ab1","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:SharedUX","backport:all-open","v9.2.0"],"title":"[SharedUX] Fix toast counter badge stack order","number":229300,"url":"https://github.com/elastic/kibana/pull/229300","mergeCommit":{"message":"[SharedUX] Fix toast counter badge stack order (#229300)\n\nCloses https://github.com/elastic/kibana/issues/226225\n\n## Summary\n- Fixed the toast counter badge which was positioned behind the toast\n(toast stack context sets [z-index:\n9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))\n- Original toast counter PR:\nhttps://github.com//pull/161738\n- As discussed on that PR, a more robust approach would include this\ncounter in the EUI component itself but it seems that it was discarded\nhere: elastic/eui#6945 after Kibana's usecase\nbeing covered by this simpler approach\n\n## Visuals\n### Before/After Success\n\n<img width=\"345\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 27 06\"\nsrc=\"https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780\"\n/>\n\n<img width=\"349\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 27 54\"\nsrc=\"https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8\"\n/>\n\n### Before/After Info Flavour\n\n<img width=\"346\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 36 50\"\nsrc=\"https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b\"\n/>\n\n<img width=\"346\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 37 20\"\nsrc=\"https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09\"\n/>\n\n### Before/After Success Mobile\n<img width=\"398\" height=\"135\" alt=\"Screenshot 2025-07-24 at 11 29 39\"\nsrc=\"https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f\"\n/>\n\n<img width=\"395\" height=\"132\" alt=\"Screenshot 2025-07-24 at 11 28 35\"\nsrc=\"https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3\"\n/>","sha":"96994268de3da116737918e83b21d082d2165ab1"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/229300","number":229300,"mergeCommit":{"message":"[SharedUX] Fix toast counter badge stack order (#229300)\n\nCloses https://github.com/elastic/kibana/issues/226225\n\n## Summary\n- Fixed the toast counter badge which was positioned behind the toast\n(toast stack context sets [z-index:\n9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))\n- Original toast counter PR:\nhttps://github.com//pull/161738\n- As discussed on that PR, a more robust approach would include this\ncounter in the EUI component itself but it seems that it was discarded\nhere: elastic/eui#6945 after Kibana's usecase\nbeing covered by this simpler approach\n\n## Visuals\n### Before/After Success\n\n<img width=\"345\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 27 06\"\nsrc=\"https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780\"\n/>\n\n<img width=\"349\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 27 54\"\nsrc=\"https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8\"\n/>\n\n### Before/After Info Flavour\n\n<img width=\"346\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 36 50\"\nsrc=\"https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b\"\n/>\n\n<img width=\"346\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 37 20\"\nsrc=\"https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09\"\n/>\n\n### Before/After Success Mobile\n<img width=\"398\" height=\"135\" alt=\"Screenshot 2025-07-24 at 11 29 39\"\nsrc=\"https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f\"\n/>\n\n<img width=\"395\" height=\"132\" alt=\"Screenshot 2025-07-24 at 11 28 35\"\nsrc=\"https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3\"\n/>","sha":"96994268de3da116737918e83b21d082d2165ab1"}}]}] BACKPORT--> Co-authored-by: Ángeles Martínez Barrio <angeles.martinezbarrio@elastic.co>
angeles-mb
added a commit
that referenced
this pull request
Jul 29, 2025
) # Backport This will backport the following commits from `main` to `8.17`: - [[SharedUX] Fix toast counter badge stack order (#229300)](#229300) <!--- Backport version: 10.0.1 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Ángeles Martínez Barrio","email":"angeles.martinezbarrio@elastic.co"},"sourceCommit":{"committedDate":"2025-07-29T09:04:24Z","message":"[SharedUX] Fix toast counter badge stack order (#229300)\n\nCloses https://github.com/elastic/kibana/issues/226225\n\n## Summary\n- Fixed the toast counter badge which was positioned behind the toast\n(toast stack context sets [z-index:\n9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))\n- Original toast counter PR:\nhttps://github.com//pull/161738\n- As discussed on that PR, a more robust approach would include this\ncounter in the EUI component itself but it seems that it was discarded\nhere: elastic/eui#6945 after Kibana's usecase\nbeing covered by this simpler approach\n\n## Visuals\n### Before/After Success\n\n<img width=\"345\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 27 06\"\nsrc=\"https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780\"\n/>\n\n<img width=\"349\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 27 54\"\nsrc=\"https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8\"\n/>\n\n### Before/After Info Flavour\n\n<img width=\"346\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 36 50\"\nsrc=\"https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b\"\n/>\n\n<img width=\"346\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 37 20\"\nsrc=\"https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09\"\n/>\n\n### Before/After Success Mobile\n<img width=\"398\" height=\"135\" alt=\"Screenshot 2025-07-24 at 11 29 39\"\nsrc=\"https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f\"\n/>\n\n<img width=\"395\" height=\"132\" alt=\"Screenshot 2025-07-24 at 11 28 35\"\nsrc=\"https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3\"\n/>","sha":"96994268de3da116737918e83b21d082d2165ab1","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:SharedUX","backport:all-open","v9.2.0"],"title":"[SharedUX] Fix toast counter badge stack order","number":229300,"url":"https://github.com/elastic/kibana/pull/229300","mergeCommit":{"message":"[SharedUX] Fix toast counter badge stack order (#229300)\n\nCloses https://github.com/elastic/kibana/issues/226225\n\n## Summary\n- Fixed the toast counter badge which was positioned behind the toast\n(toast stack context sets [z-index:\n9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))\n- Original toast counter PR:\nhttps://github.com//pull/161738\n- As discussed on that PR, a more robust approach would include this\ncounter in the EUI component itself but it seems that it was discarded\nhere: elastic/eui#6945 after Kibana's usecase\nbeing covered by this simpler approach\n\n## Visuals\n### Before/After Success\n\n<img width=\"345\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 27 06\"\nsrc=\"https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780\"\n/>\n\n<img width=\"349\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 27 54\"\nsrc=\"https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8\"\n/>\n\n### Before/After Info Flavour\n\n<img width=\"346\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 36 50\"\nsrc=\"https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b\"\n/>\n\n<img width=\"346\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 37 20\"\nsrc=\"https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09\"\n/>\n\n### Before/After Success Mobile\n<img width=\"398\" height=\"135\" alt=\"Screenshot 2025-07-24 at 11 29 39\"\nsrc=\"https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f\"\n/>\n\n<img width=\"395\" height=\"132\" alt=\"Screenshot 2025-07-24 at 11 28 35\"\nsrc=\"https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3\"\n/>","sha":"96994268de3da116737918e83b21d082d2165ab1"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/229300","number":229300,"mergeCommit":{"message":"[SharedUX] Fix toast counter badge stack order (#229300)\n\nCloses https://github.com/elastic/kibana/issues/226225\n\n## Summary\n- Fixed the toast counter badge which was positioned behind the toast\n(toast stack context sets [z-index:\n9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))\n- Original toast counter PR:\nhttps://github.com//pull/161738\n- As discussed on that PR, a more robust approach would include this\ncounter in the EUI component itself but it seems that it was discarded\nhere: elastic/eui#6945 after Kibana's usecase\nbeing covered by this simpler approach\n\n## Visuals\n### Before/After Success\n\n<img width=\"345\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 27 06\"\nsrc=\"https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780\"\n/>\n\n<img width=\"349\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 27 54\"\nsrc=\"https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8\"\n/>\n\n### Before/After Info Flavour\n\n<img width=\"346\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 36 50\"\nsrc=\"https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b\"\n/>\n\n<img width=\"346\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 37 20\"\nsrc=\"https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09\"\n/>\n\n### Before/After Success Mobile\n<img width=\"398\" height=\"135\" alt=\"Screenshot 2025-07-24 at 11 29 39\"\nsrc=\"https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f\"\n/>\n\n<img width=\"395\" height=\"132\" alt=\"Screenshot 2025-07-24 at 11 28 35\"\nsrc=\"https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3\"\n/>","sha":"96994268de3da116737918e83b21d082d2165ab1"}},{"url":"https://github.com/elastic/kibana/pull/229761","number":229761,"branch":"8.19","state":"OPEN"},{"url":"https://github.com/elastic/kibana/pull/229762","number":229762,"branch":"9.1","state":"OPEN"},{"url":"https://github.com/elastic/kibana/pull/229772","number":229772,"branch":"9.0","state":"OPEN"},{"url":"https://github.com/elastic/kibana/pull/229773","number":229773,"branch":"8.18","state":"OPEN"}]}] BACKPORT-->
angeles-mb
added a commit
that referenced
this pull request
Jul 29, 2025
) # Backport This will backport the following commits from `main` to `8.18`: - [[SharedUX] Fix toast counter badge stack order (#229300)](#229300) <!--- Backport version: 10.0.1 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Ángeles Martínez Barrio","email":"angeles.martinezbarrio@elastic.co"},"sourceCommit":{"committedDate":"2025-07-29T09:04:24Z","message":"[SharedUX] Fix toast counter badge stack order (#229300)\n\nCloses https://github.com/elastic/kibana/issues/226225\n\n## Summary\n- Fixed the toast counter badge which was positioned behind the toast\n(toast stack context sets [z-index:\n9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))\n- Original toast counter PR:\nhttps://github.com//pull/161738\n- As discussed on that PR, a more robust approach would include this\ncounter in the EUI component itself but it seems that it was discarded\nhere: elastic/eui#6945 after Kibana's usecase\nbeing covered by this simpler approach\n\n## Visuals\n### Before/After Success\n\n<img width=\"345\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 27 06\"\nsrc=\"https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780\"\n/>\n\n<img width=\"349\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 27 54\"\nsrc=\"https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8\"\n/>\n\n### Before/After Info Flavour\n\n<img width=\"346\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 36 50\"\nsrc=\"https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b\"\n/>\n\n<img width=\"346\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 37 20\"\nsrc=\"https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09\"\n/>\n\n### Before/After Success Mobile\n<img width=\"398\" height=\"135\" alt=\"Screenshot 2025-07-24 at 11 29 39\"\nsrc=\"https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f\"\n/>\n\n<img width=\"395\" height=\"132\" alt=\"Screenshot 2025-07-24 at 11 28 35\"\nsrc=\"https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3\"\n/>","sha":"96994268de3da116737918e83b21d082d2165ab1","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:SharedUX","backport:all-open","v9.2.0"],"title":"[SharedUX] Fix toast counter badge stack order","number":229300,"url":"https://github.com/elastic/kibana/pull/229300","mergeCommit":{"message":"[SharedUX] Fix toast counter badge stack order (#229300)\n\nCloses https://github.com/elastic/kibana/issues/226225\n\n## Summary\n- Fixed the toast counter badge which was positioned behind the toast\n(toast stack context sets [z-index:\n9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))\n- Original toast counter PR:\nhttps://github.com//pull/161738\n- As discussed on that PR, a more robust approach would include this\ncounter in the EUI component itself but it seems that it was discarded\nhere: elastic/eui#6945 after Kibana's usecase\nbeing covered by this simpler approach\n\n## Visuals\n### Before/After Success\n\n<img width=\"345\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 27 06\"\nsrc=\"https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780\"\n/>\n\n<img width=\"349\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 27 54\"\nsrc=\"https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8\"\n/>\n\n### Before/After Info Flavour\n\n<img width=\"346\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 36 50\"\nsrc=\"https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b\"\n/>\n\n<img width=\"346\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 37 20\"\nsrc=\"https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09\"\n/>\n\n### Before/After Success Mobile\n<img width=\"398\" height=\"135\" alt=\"Screenshot 2025-07-24 at 11 29 39\"\nsrc=\"https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f\"\n/>\n\n<img width=\"395\" height=\"132\" alt=\"Screenshot 2025-07-24 at 11 28 35\"\nsrc=\"https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3\"\n/>","sha":"96994268de3da116737918e83b21d082d2165ab1"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/229300","number":229300,"mergeCommit":{"message":"[SharedUX] Fix toast counter badge stack order (#229300)\n\nCloses https://github.com/elastic/kibana/issues/226225\n\n## Summary\n- Fixed the toast counter badge which was positioned behind the toast\n(toast stack context sets [z-index:\n9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))\n- Original toast counter PR:\nhttps://github.com//pull/161738\n- As discussed on that PR, a more robust approach would include this\ncounter in the EUI component itself but it seems that it was discarded\nhere: elastic/eui#6945 after Kibana's usecase\nbeing covered by this simpler approach\n\n## Visuals\n### Before/After Success\n\n<img width=\"345\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 27 06\"\nsrc=\"https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780\"\n/>\n\n<img width=\"349\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 27 54\"\nsrc=\"https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8\"\n/>\n\n### Before/After Info Flavour\n\n<img width=\"346\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 36 50\"\nsrc=\"https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b\"\n/>\n\n<img width=\"346\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 37 20\"\nsrc=\"https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09\"\n/>\n\n### Before/After Success Mobile\n<img width=\"398\" height=\"135\" alt=\"Screenshot 2025-07-24 at 11 29 39\"\nsrc=\"https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f\"\n/>\n\n<img width=\"395\" height=\"132\" alt=\"Screenshot 2025-07-24 at 11 28 35\"\nsrc=\"https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3\"\n/>","sha":"96994268de3da116737918e83b21d082d2165ab1"}},{"url":"https://github.com/elastic/kibana/pull/229761","number":229761,"branch":"8.19","state":"OPEN"},{"url":"https://github.com/elastic/kibana/pull/229762","number":229762,"branch":"9.1","state":"OPEN"}]}] BACKPORT-->
angeles-mb
added a commit
that referenced
this pull request
Jul 29, 2025
# Backport This will backport the following commits from `main` to `9.0`: - [[SharedUX] Fix toast counter badge stack order (#229300)](#229300) <!--- Backport version: 10.0.1 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Ángeles Martínez Barrio","email":"angeles.martinezbarrio@elastic.co"},"sourceCommit":{"committedDate":"2025-07-29T09:04:24Z","message":"[SharedUX] Fix toast counter badge stack order (#229300)\n\nCloses https://github.com/elastic/kibana/issues/226225\n\n## Summary\n- Fixed the toast counter badge which was positioned behind the toast\n(toast stack context sets [z-index:\n9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))\n- Original toast counter PR:\nhttps://github.com//pull/161738\n- As discussed on that PR, a more robust approach would include this\ncounter in the EUI component itself but it seems that it was discarded\nhere: elastic/eui#6945 after Kibana's usecase\nbeing covered by this simpler approach\n\n## Visuals\n### Before/After Success\n\n<img width=\"345\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 27 06\"\nsrc=\"https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780\"\n/>\n\n<img width=\"349\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 27 54\"\nsrc=\"https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8\"\n/>\n\n### Before/After Info Flavour\n\n<img width=\"346\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 36 50\"\nsrc=\"https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b\"\n/>\n\n<img width=\"346\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 37 20\"\nsrc=\"https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09\"\n/>\n\n### Before/After Success Mobile\n<img width=\"398\" height=\"135\" alt=\"Screenshot 2025-07-24 at 11 29 39\"\nsrc=\"https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f\"\n/>\n\n<img width=\"395\" height=\"132\" alt=\"Screenshot 2025-07-24 at 11 28 35\"\nsrc=\"https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3\"\n/>","sha":"96994268de3da116737918e83b21d082d2165ab1","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:SharedUX","backport:all-open","v9.2.0"],"title":"[SharedUX] Fix toast counter badge stack order","number":229300,"url":"https://github.com/elastic/kibana/pull/229300","mergeCommit":{"message":"[SharedUX] Fix toast counter badge stack order (#229300)\n\nCloses https://github.com/elastic/kibana/issues/226225\n\n## Summary\n- Fixed the toast counter badge which was positioned behind the toast\n(toast stack context sets [z-index:\n9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))\n- Original toast counter PR:\nhttps://github.com//pull/161738\n- As discussed on that PR, a more robust approach would include this\ncounter in the EUI component itself but it seems that it was discarded\nhere: elastic/eui#6945 after Kibana's usecase\nbeing covered by this simpler approach\n\n## Visuals\n### Before/After Success\n\n<img width=\"345\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 27 06\"\nsrc=\"https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780\"\n/>\n\n<img width=\"349\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 27 54\"\nsrc=\"https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8\"\n/>\n\n### Before/After Info Flavour\n\n<img width=\"346\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 36 50\"\nsrc=\"https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b\"\n/>\n\n<img width=\"346\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 37 20\"\nsrc=\"https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09\"\n/>\n\n### Before/After Success Mobile\n<img width=\"398\" height=\"135\" alt=\"Screenshot 2025-07-24 at 11 29 39\"\nsrc=\"https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f\"\n/>\n\n<img width=\"395\" height=\"132\" alt=\"Screenshot 2025-07-24 at 11 28 35\"\nsrc=\"https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3\"\n/>","sha":"96994268de3da116737918e83b21d082d2165ab1"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/229300","number":229300,"mergeCommit":{"message":"[SharedUX] Fix toast counter badge stack order (#229300)\n\nCloses https://github.com/elastic/kibana/issues/226225\n\n## Summary\n- Fixed the toast counter badge which was positioned behind the toast\n(toast stack context sets [z-index:\n9000](https://github.com/elastic/eui/blob/aa115fbc28a3fc107ebabbb75f6fdae75d32c976/packages/eui-theme-common/src/global_styling/variables/levels.ts#L42-L43))\n- Original toast counter PR:\nhttps://github.com//pull/161738\n- As discussed on that PR, a more robust approach would include this\ncounter in the EUI component itself but it seems that it was discarded\nhere: elastic/eui#6945 after Kibana's usecase\nbeing covered by this simpler approach\n\n## Visuals\n### Before/After Success\n\n<img width=\"345\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 27 06\"\nsrc=\"https://github.com/user-attachments/assets/47ac83d4-7c4b-4b12-ba34-a1c124fe8780\"\n/>\n\n<img width=\"349\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 27 54\"\nsrc=\"https://github.com/user-attachments/assets/dac9ddf0-c7b2-47a5-971e-d83c67ed54b8\"\n/>\n\n### Before/After Info Flavour\n\n<img width=\"346\" height=\"78\" alt=\"Screenshot 2025-07-24 at 11 36 50\"\nsrc=\"https://github.com/user-attachments/assets/72fe86a3-9a76-4517-8d69-4ef544d6ec4b\"\n/>\n\n<img width=\"346\" height=\"77\" alt=\"Screenshot 2025-07-24 at 11 37 20\"\nsrc=\"https://github.com/user-attachments/assets/62c8365d-602e-4164-8e69-5afcf1ab9e09\"\n/>\n\n### Before/After Success Mobile\n<img width=\"398\" height=\"135\" alt=\"Screenshot 2025-07-24 at 11 29 39\"\nsrc=\"https://github.com/user-attachments/assets/7005eefd-6ed3-4a70-8bff-ac02da7b542f\"\n/>\n\n<img width=\"395\" height=\"132\" alt=\"Screenshot 2025-07-24 at 11 28 35\"\nsrc=\"https://github.com/user-attachments/assets/567111ce-c798-48e9-be67-ebff31553ac3\"\n/>","sha":"96994268de3da116737918e83b21d082d2165ab1"}},{"url":"https://github.com/elastic/kibana/pull/229761","number":229761,"branch":"8.19","state":"OPEN"},{"url":"https://github.com/elastic/kibana/pull/229762","number":229762,"branch":"9.1","state":"OPEN"}]}] BACKPORT-->
delanni
pushed a commit
to delanni/kibana
that referenced
this pull request
Aug 5, 2025
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" />
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
8 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #226225
Summary
Visuals
Before/After Success
Before/After Info Flavour
Before/After Success Mobile