[EuiPageHeader] Fix single right side items from overflowing past its max width #8110
Conversation
This file contains 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
cee-chen
changed the title
|
Preview staging links for this PR:
|
4 tasks
💚 Build Succeeded
|
|
Note to self: backport these fixes to Kibana 8.16 |
cee-chen
added a commit
that referenced
this pull request
Nov 1, 2024
cee-chen
added a commit
to elastic/kibana
that referenced
this pull request
Nov 4, 2024
## Summary Partially addresses #197892, but not fully - elastic/eui#8109 and elastic/eui#8110 will need to be merged in first and in Kibana main as well. We can hold this PR until then if desired to confirm that the final UI/responsive UX works as expected. | Before | After | |--------|--------| | <img width="974" alt="" src="https://github.com/user-attachments/assets/c081fbfe-d2ec-4797-addb-3c9ecbc3085d"> | <img width="983" alt="" src="https://github.com/user-attachments/assets/6152be23-f2b7-4712-8e53-e368db606418"> | ### Checklist - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] 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)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers)
kibanamachine
pushed a commit
to kibanamachine/kibana
that referenced
this pull request
Nov 4, 2024
…8625) ## Summary Partially addresses elastic#197892, but not fully - elastic/eui#8109 and elastic/eui#8110 will need to be merged in first and in Kibana main as well. We can hold this PR until then if desired to confirm that the final UI/responsive UX works as expected. | Before | After | |--------|--------| | <img width="974" alt="" src="https://github.com/user-attachments/assets/c081fbfe-d2ec-4797-addb-3c9ecbc3085d"> | <img width="983" alt="" src="https://github.com/user-attachments/assets/6152be23-f2b7-4712-8e53-e368db606418"> | ### Checklist - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] 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)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) (cherry picked from commit 4fdc70b)
kibanamachine
added a commit
to elastic/kibana
that referenced
this pull request
Nov 4, 2024
) (#198835) # Backport This will backport the following commits from `main` to `8.x`: - [[ML] Fix page header right side items flex responsiveness (#198625)](#198625) <!--- Backport version: 9.4.3 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Cee Chen","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-04T17:38:07Z","message":"[ML] Fix page header right side items flex responsiveness (#198625)\n\n## Summary\r\n\r\nPartially addresses #197892, but\r\nnot fully - elastic/eui#8109 and\r\nhttps://github.com/elastic/eui/pull/8110 will need to be merged in first\r\nand in Kibana main as well. We can hold this PR until then if desired to\r\nconfirm that the final UI/responsive UX works as expected.\r\n\r\n| Before | After |\r\n|--------|--------|\r\n| <img width=\"974\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/c081fbfe-d2ec-4797-addb-3c9ecbc3085d\">\r\n| <img width=\"983\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/6152be23-f2b7-4712-8e53-e368db606418\">\r\n|\r\n\r\n### Checklist\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- [x] 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))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"4fdc70bf8c3b729733415820b48248abbfb5ddf8","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","v8.16.0","backport:version","v8.17.0"],"title":"[ML] Fix page header right side items flex responsiveness","number":198625,"url":"https://github.com/elastic/kibana/pull/198625","mergeCommit":{"message":"[ML] Fix page header right side items flex responsiveness (#198625)\n\n## Summary\r\n\r\nPartially addresses #197892, but\r\nnot fully - elastic/eui#8109 and\r\nhttps://github.com/elastic/eui/pull/8110 will need to be merged in first\r\nand in Kibana main as well. We can hold this PR until then if desired to\r\nconfirm that the final UI/responsive UX works as expected.\r\n\r\n| Before | After |\r\n|--------|--------|\r\n| <img width=\"974\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/c081fbfe-d2ec-4797-addb-3c9ecbc3085d\">\r\n| <img width=\"983\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/6152be23-f2b7-4712-8e53-e368db606418\">\r\n|\r\n\r\n### Checklist\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- [x] 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))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"4fdc70bf8c3b729733415820b48248abbfb5ddf8"}},"sourceBranch":"main","suggestedTargetBranches":["8.16","8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/198625","number":198625,"mergeCommit":{"message":"[ML] Fix page header right side items flex responsiveness (#198625)\n\n## Summary\r\n\r\nPartially addresses #197892, but\r\nnot fully - elastic/eui#8109 and\r\nhttps://github.com/elastic/eui/pull/8110 will need to be merged in first\r\nand in Kibana main as well. We can hold this PR until then if desired to\r\nconfirm that the final UI/responsive UX works as expected.\r\n\r\n| Before | After |\r\n|--------|--------|\r\n| <img width=\"974\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/c081fbfe-d2ec-4797-addb-3c9ecbc3085d\">\r\n| <img width=\"983\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/6152be23-f2b7-4712-8e53-e368db606418\">\r\n|\r\n\r\n### Checklist\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- [x] 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))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"4fdc70bf8c3b729733415820b48248abbfb5ddf8"}},{"branch":"8.16","label":"v8.16.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.x","label":"v8.17.0","branchLabelMappingKey":"^v8.17.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Cee Chen <[email protected]>
cee-chen
added a commit
to elastic/kibana
that referenced
this pull request
Nov 4, 2024
`v97.0.0-backport.1`⏩`v97.0.0-backport.2` This is an 8.16 release intended to help fix #197892 flagged by the ML team. --- ## [`v97.0.0-backport.2`](https://github.com/elastic/eui/releases/v97.0.0-backport.2) **This is a backport release only intended for use by Kibana.** **Bug fixes** - Fixed an `EuiSuperDatePicker` bug where inputs would overflow out of smaller widths instead of truncating ([#8109](elastic/eui#8109)) - Fixed a bug with `EuiPageHeader`'s `rightSideItems` responsiveness where single items could overflow past the intended max width ([#8110](elastic/eui#8110))
cee-chen
added a commit
to cee-chen/kibana
that referenced
this pull request
Nov 5, 2024
…8625) ## Summary Partially addresses elastic#197892, but not fully - elastic/eui#8109 and elastic/eui#8110 will need to be merged in first and in Kibana main as well. We can hold this PR until then if desired to confirm that the final UI/responsive UX works as expected. | Before | After | |--------|--------| | <img width="974" alt="" src="https://github.com/user-attachments/assets/c081fbfe-d2ec-4797-addb-3c9ecbc3085d"> | <img width="983" alt="" src="https://github.com/user-attachments/assets/6152be23-f2b7-4712-8e53-e368db606418"> | ### Checklist - [x] Any UI touched in this PR is usable by keyboard only (learn more about [keyboard accessibility](https://webaim.org/techniques/keyboard/)) - [x] 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)) - [x] This was checked for [cross-browser compatibility](https://www.elastic.co/support/matrix#matrix_browsers) (cherry picked from commit 4fdc70b) # Conflicts: # x-pack/plugins/data_visualizer/public/application/data_drift/data_drift_page.tsx
cee-chen
added a commit
to elastic/kibana
that referenced
this pull request
Nov 5, 2024
…8625) (#198882) # Backport This will backport the following commits from `main` to `8.16`: - [ML] Fix page header right side items flex responsiveness (#198625) (4fdc70b) <!--- Backport version: 8.9.8 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) <!--BACKPORT [{"author":{"name":"Cee Chen","email":"[email protected]"},"sourceCommit":{"committedDate":"2024-11-04T17:38:07Z","message":"[ML] Fix page header right side items flex responsiveness (#198625)\n\n## Summary\r\n\r\nPartially addresses #197892, but\r\nnot fully - elastic/eui#8109 and\r\nhttps://github.com/elastic/eui/pull/8110 will need to be merged in first\r\nand in Kibana main as well. We can hold this PR until then if desired to\r\nconfirm that the final UI/responsive UX works as expected.\r\n\r\n| Before | After |\r\n|--------|--------|\r\n| <img width=\"974\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/c081fbfe-d2ec-4797-addb-3c9ecbc3085d\">\r\n| <img width=\"983\" alt=\"\"\r\nsrc=\"https://github.com/user-attachments/assets/6152be23-f2b7-4712-8e53-e368db606418\">\r\n|\r\n\r\n### Checklist\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- [x] 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))\r\n- [x] This was checked for [cross-browser\r\ncompatibility](https://www.elastic.co/support/matrix#matrix_browsers)","sha":"4fdc70bf8c3b729733415820b48248abbfb5ddf8"},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[]}] BACKPORT-->
jbudz
pushed a commit
to elastic/kibana
that referenced
this pull request
Nov 12, 2024
`v97.3.0`⏩`v97.3.1` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v97.3.1`](https://github.com/elastic/eui/releases/v97.3.1) **Bug fixes** - Fixed an `EuiComboBox` bug where Enter keypresses were not working correctly on selection clear buttons ([#8105](elastic/eui#8105)) - Fixed an `EuiSuperDatePicker` bug where inputs would overflow out of smaller widths instead of truncating ([#8109](elastic/eui#8109)) - Fixed a bug with `EuiPageHeader`'s `rightSideItems` responsiveness where single items could overflow past the intended max width ([#8110](elastic/eui#8110))
tkajtoch
pushed a commit
to tkajtoch/kibana
that referenced
this pull request
Nov 12, 2024
`v97.3.0`⏩`v97.3.1` _[Questions? Please see our Kibana upgrade FAQ.](https://github.com/elastic/eui/blob/main/wiki/eui-team-processes/upgrading-kibana.md#faq-for-kibana-teams)_ --- ## [`v97.3.1`](https://github.com/elastic/eui/releases/v97.3.1) **Bug fixes** - Fixed an `EuiComboBox` bug where Enter keypresses were not working correctly on selection clear buttons ([elastic#8105](elastic/eui#8105)) - Fixed an `EuiSuperDatePicker` bug where inputs would overflow out of smaller widths instead of truncating ([elastic#8109](elastic/eui#8109)) - Fixed a bug with `EuiPageHeader`'s `rightSideItems` responsiveness where single items could overflow past the intended max width ([elastic#8110](elastic/eui#8110))
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
Summary
Partially addresses elastic/kibana#197892
The changes made in #8044 overlooked some edge cases with very wide single right side items.
QA
General checklist
- [ ] Checked in both light and dark modes- [ ] Checked for accessibility including keyboard-only and screenreader modes- [ ] Added or updated jest and cypress tests- [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)