Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix theme switch success toast layout #195717

Conversation

kowalczyk-krzysztof
Copy link
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 Team label for AppEx-SharedUX (formerly Global Experience) label Oct 10, 2024
@elasticmachine
Copy link
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 Backport to (8.x) the previous minor version (i.e. one version back from main) 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
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
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
21 checks passed
@kibanamachine
Copy link
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
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":"[email protected]"},"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 <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) bug Fixes for quality problems that affect the customer experience release_note:skip Skip the PR/issue when compiling release notes Team:SharedUX Team label for AppEx-SharedUX (formerly Global Experience) 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