Skip to content

Fix theme switch success toast layout#195717

Merged
kowalczyk-krzysztof merged 1 commit intoelastic:mainfrom
kowalczyk-krzysztof:fix/theme-switch-success-toast-layout-fix
Oct 10, 2024
Merged

Fix theme switch success toast layout#195717
kowalczyk-krzysztof merged 1 commit intoelastic:mainfrom
kowalczyk-krzysztof:fix/theme-switch-success-toast-layout-fix

Conversation

@kowalczyk-krzysztof
Copy link
Copy Markdown
Member

@kowalczyk-krzysztof kowalczyk-krzysztof commented Oct 10, 2024

Summary

This PR fixes the layout of Color theme updated toast to match EUI guidelines on success toasts.

Fixes: #165979

Visuals

Previous New
image image

Checklist

Delete any items that are not applicable to this PR.

  • Any UI touched in this PR is usable by keyboard only (learn more about keyboard accessibility)
  • Any UI touched in this PR does not create any new axe failures (run axe in browser: FF, Chrome)
  • This renders correctly on smaller devices using a responsive layout. (You can test this in your browser)

@kowalczyk-krzysztof kowalczyk-krzysztof added the bug Fixes for quality problems that affect the customer experience label Oct 10, 2024
@kowalczyk-krzysztof kowalczyk-krzysztof self-assigned this Oct 10, 2024
@kowalczyk-krzysztof kowalczyk-krzysztof requested a review from a team as a code owner October 10, 2024 09:14
@kowalczyk-krzysztof kowalczyk-krzysztof force-pushed the fix/theme-switch-success-toast-layout-fix branch from 0485dad to 3c4339a Compare October 10, 2024 09:17
@kowalczyk-krzysztof kowalczyk-krzysztof added the Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// label Oct 10, 2024
@elasticmachine
Copy link
Copy Markdown
Contributor

Pinging @elastic/appex-sharedux (Team:SharedUX)

@kowalczyk-krzysztof kowalczyk-krzysztof added release_note:skip Skip the PR/issue when compiling release notes backport:prev-minor labels Oct 10, 2024
@kowalczyk-krzysztof kowalczyk-krzysztof force-pushed the fix/theme-switch-success-toast-layout-fix branch from 3c4339a to d53b169 Compare October 10, 2024 10:04
Copy link
Copy Markdown
Contributor

@sebelga sebelga left a comment

Choose a reason for hiding this comment

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

LGTM! 🎉 Tested locally and works as expected 👍

@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
security 591.1KB 591.1KB +33.0B

Page load bundle

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

id before after diff
cloudLinks 30.2KB 30.2KB +33.0B

cc @kowalczyk-krzysztof

@kowalczyk-krzysztof kowalczyk-krzysztof merged commit 446ad94 into elastic:main Oct 10, 2024
@kibanamachine
Copy link
Copy Markdown
Contributor

Starting backport for target branches: 8.x

https://github.com/elastic/kibana/actions/runs/11273689973

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Oct 10, 2024
## Summary

This PR fixes the layout of `Color theme updated` toast to match [EUI
guidelines on success
toasts](https://eui.elastic.co/#/display/toast#success).

Fixes: elastic#165979

## Visuals
| Previous | New |
|-----------------|-----------------|

|![image](https://github.com/user-attachments/assets/4f191907-b708-41ab-81a1-2dba708045f7)
|
![image](https://github.com/user-attachments/assets/48dce2dd-e751-455e-8bc5-81bf288c3b85)
|

### Checklist

Delete any items that are not applicable to this PR.

- [x] Any UI touched in this PR is usable by keyboard only (learn more
about [keyboard accessibility](https://webaim.org/techniques/keyboard/))
- [ ] Any UI touched in this PR does not create any new axe failures
(run axe in browser:
[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),
[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))

(cherry picked from commit 446ad94)
@kibanamachine
Copy link
Copy Markdown
Contributor

💚 All backports created successfully

Status Branch Result
8.x

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Oct 10, 2024
# Backport

This will backport the following commits from `main` to `8.x`:
- [Fix theme switch success toast layout
(#195717)](#195717)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Krzysztof
Kowalczyk","email":"krzysztof.kowalczyk@elastic.co"},"sourceCommit":{"committedDate":"2024-10-10T12:08:31Z","message":"Fix
theme switch success toast layout (#195717)\n\n## Summary\r\n\r\nThis PR
fixes the layout of `Color theme updated` toast to match
[EUI\r\nguidelines on
success\r\ntoasts](https://eui.elastic.co/#/display/toast#success).\r\n\r\nFixes:
#165979 \r\n\r\n## Visuals\r\n| Previous | New
|\r\n|-----------------|-----------------|\r\n\r\n|![image](https://github.com/user-attachments/assets/4f191907-b708-41ab-81a1-2dba708045f7)\r\n|\r\n![image](https://github.com/user-attachments/assets/48dce2dd-e751-455e-8bc5-81bf288c3b85)\r\n|\r\n\r\n###
Checklist\r\n \r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only
(learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))","sha":"446ad9475ba4d419066977f776b4fcd20f8a8cc0","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["bug","release_note:skip","v9.0.0","Team:SharedUX","backport:prev-minor"],"title":"Fix
theme switch success toast
layout","number":195717,"url":"https://github.com/elastic/kibana/pull/195717","mergeCommit":{"message":"Fix
theme switch success toast layout (#195717)\n\n## Summary\r\n\r\nThis PR
fixes the layout of `Color theme updated` toast to match
[EUI\r\nguidelines on
success\r\ntoasts](https://eui.elastic.co/#/display/toast#success).\r\n\r\nFixes:
#165979 \r\n\r\n## Visuals\r\n| Previous | New
|\r\n|-----------------|-----------------|\r\n\r\n|![image](https://github.com/user-attachments/assets/4f191907-b708-41ab-81a1-2dba708045f7)\r\n|\r\n![image](https://github.com/user-attachments/assets/48dce2dd-e751-455e-8bc5-81bf288c3b85)\r\n|\r\n\r\n###
Checklist\r\n \r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only
(learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))","sha":"446ad9475ba4d419066977f776b4fcd20f8a8cc0"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/195717","number":195717,"mergeCommit":{"message":"Fix
theme switch success toast layout (#195717)\n\n## Summary\r\n\r\nThis PR
fixes the layout of `Color theme updated` toast to match
[EUI\r\nguidelines on
success\r\ntoasts](https://eui.elastic.co/#/display/toast#success).\r\n\r\nFixes:
#165979 \r\n\r\n## Visuals\r\n| Previous | New
|\r\n|-----------------|-----------------|\r\n\r\n|![image](https://github.com/user-attachments/assets/4f191907-b708-41ab-81a1-2dba708045f7)\r\n|\r\n![image](https://github.com/user-attachments/assets/48dce2dd-e751-455e-8bc5-81bf288c3b85)\r\n|\r\n\r\n###
Checklist\r\n \r\nDelete any items that are not applicable to this
PR.\r\n\r\n- [x] Any UI touched in this PR is usable by keyboard only
(learn more\r\nabout [keyboard
accessibility](https://webaim.org/techniques/keyboard/))\r\n- [ ] Any UI
touched in this PR does not create any new axe failures\r\n(run axe in
browser:\r\n[FF](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/),\r\n[Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd?hl=en-US))\r\n-
[x] This renders correctly on smaller devices using a
responsive\r\nlayout. (You can test this [in
your\r\nbrowser](https://www.browserstack.com/guide/responsive-testing-on-local-server))","sha":"446ad9475ba4d419066977f776b4fcd20f8a8cc0"}}]}]
BACKPORT-->

Co-authored-by: Krzysztof Kowalczyk <krzysztof.kowalczyk@elastic.co>
@kowalczyk-krzysztof kowalczyk-krzysztof deleted the fix/theme-switch-success-toast-layout-fix branch August 31, 2025 22:52
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

bug Fixes for quality problems that affect the customer experience release_note:skip Skip the PR/issue when compiling release notes Team:SharedUX Platform AppEx-SharedUX (formerly Global Experience) t// v8.16.0 v9.0.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dark/light mode switch notification spacing

5 participants