Skip to content

Commit

Permalink
[8.x] Fix theme switch success toast layout (#195717) (#195755)
Browse files Browse the repository at this point in the history 
# 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>
  • Loading branch information
@kibanamachine @kowalczyk-krzysztof
kibanamachine and kowalczyk-krzysztof authored Oct 10, 2024
1 parent 09889d9 commit 1719921
Showing 1 changed file with 19 additions and 17 deletions.
36 changes: 19 additions & 17 deletions packages/kbn-user-profile-components/src/hooks/use_update_user_profile.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,23 +74,25 @@ export const useUpdateUserProfile = ({
{
title: notificationTitle,
text: (
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
<EuiFlexItem grow={false}>
<p>{pageReloadText}</p>
<EuiButton
size="s"
onClick={() => window.location.reload()}
data-test-subj="windowReloadButton"
>
{i18n.translate(
'userProfileComponents.updateUserProfile.notification.requiresPageReloadButtonLabel',
{
defaultMessage: 'Reload page',
}
)}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
<>
<p>{pageReloadText}</p>
<EuiFlexGroup justifyContent="flexEnd" gutterSize="s">
<EuiFlexItem grow={false}>
<EuiButton
size="s"
onClick={() => window.location.reload()}
data-test-subj="windowReloadButton"
>
{i18n.translate(
'userProfileComponents.updateUserProfile.notification.requiresPageReloadButtonLabel',
{
defaultMessage: 'Reload page',
}
)}
</EuiButton>
</EuiFlexItem>
</EuiFlexGroup>
</>
),
},
{
Expand Down

0 comments on commit 1719921

Please sign in to comment.