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

[Discover] fix: responsive data view picker #199617

Merged

Conversation

akowalska622
Copy link
Contributor

@akowalska622 akowalska622 commented Nov 11, 2024

Summary

Closes #199434

ChangeDataView had two problems on smaller screens:

  1. The Data view label was wrapped across two rows, causing the parent container to expand and misalign with the picker.
  2. The picker container was overflowing, and the text was not truncated.
    image

Setting min-width: 0 on two parent containers solved the problem:
Screenshot 2024-11-11 at 11 52 09
data-view-picker

Checklist

Delete any items that are not applicable to this PR.

  • 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)
  • This was checked for cross-browser compatibility

For maintainers

@akowalska622 akowalska622 requested a review from a team as a code owner November 11, 2024 11:02
@akowalska622 akowalska622 self-assigned this Nov 11, 2024
@akowalska622 akowalska622 requested a review from a team November 11, 2024 11:05
@akowalska622 akowalska622 added the Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. label Nov 11, 2024
@elasticmachine
Copy link
Contributor

Pinging @elastic/kibana-data-discovery (Team:DataDiscovery)

@akowalska622 akowalska622 added Feature:Discover Discover Application backport:prev-minor Backport to (8.x) the previous minor version (i.e. one version back from main) release_note:skip Skip the PR/issue when compiling release notes labels Nov 11, 2024
@akowalska622 akowalska622 changed the title fix: responsive data view picker [Discover] fix: responsive data view picker Nov 11, 2024
@kertal kertal added the Feature:Unified search Unified search related tasks label Nov 11, 2024
@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
unifiedSearch 353.1KB 353.1KB +51.0B

History

cc @akowalska622

Copy link
Contributor

@jughosta jughosta left a comment

Choose a reason for hiding this comment

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

LGTM 👍
Congrats on your first PR, Ania!

Copy link
Contributor

@mbondyra mbondyra left a comment

Choose a reason for hiding this comment

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

Vis changes LGTM 🎉

@akowalska622 akowalska622 merged commit 13ae986 into elastic:main Nov 12, 2024
24 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x

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

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

Closes elastic#199434

`ChangeDataView` had two problems on smaller screens:

1. The `Data view` label was wrapped across two rows, causing the parent
container to expand and misalign with the picker.
2. The picker container was overflowing, and the text was not truncated.

![image](https://github.com/user-attachments/assets/1eeb5cf2-bcae-4a1d-b28c-13c5c508b4c1)

Setting `min-width: 0` on two parent containers solved the problem:
<img width="442" alt="Screenshot 2024-11-11 at 11 52 09"
src="https://github.com/user-attachments/assets/564b392b-38c5-4376-a1a3-4f4c6b3d58c1">

![data-view-picker](https://github.com/user-attachments/assets/08e23d5a-7f09-4530-aca5-bac7fa0da7cd)

### Checklist

Delete any items that are not applicable to this PR.

- [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)

### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)
- [ ] This will appear in the **Release Notes** and follow the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)

(cherry picked from commit 13ae986)
@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

tkajtoch pushed a commit to tkajtoch/kibana that referenced this pull request Nov 12, 2024
## Summary

Closes elastic#199434

`ChangeDataView` had two problems on smaller screens:

1. The `Data view` label was wrapped across two rows, causing the parent
container to expand and misalign with the picker.
2. The picker container was overflowing, and the text was not truncated.

![image](https://github.com/user-attachments/assets/1eeb5cf2-bcae-4a1d-b28c-13c5c508b4c1)

Setting `min-width: 0` on two parent containers solved the problem:
<img width="442" alt="Screenshot 2024-11-11 at 11 52 09"
src="https://github.com/user-attachments/assets/564b392b-38c5-4376-a1a3-4f4c6b3d58c1">

![data-view-picker](https://github.com/user-attachments/assets/08e23d5a-7f09-4530-aca5-bac7fa0da7cd)



### Checklist

Delete any items that are not applicable to this PR.

- [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)


### For maintainers

- [ ] This was checked for breaking API changes and was [labeled
appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)
- [ ] This will appear in the **Release Notes** and follow the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
@kibanamachine kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Nov 13, 2024
@kibanamachine
Copy link
Contributor

Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync.

kibanamachine added a commit that referenced this pull request Nov 13, 2024
# Backport

This will backport the following commits from `main` to `8.x`:
- [[Discover] fix: responsive data view picker
(#199617)](#199617)

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

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

<!--BACKPORT [{"author":{"name":"Ania
Kowalska","email":"63072419+akowalska622@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-12T12:01:16Z","message":"[Discover]
fix: responsive data view picker (#199617)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/199434\r\n\r\n`ChangeDataView`
had two problems on smaller screens:\r\n\r\n1. The `Data view` label was
wrapped across two rows, causing the parent\r\ncontainer to expand and
misalign with the picker.\r\n2. The picker container was overflowing,
and the text was not
truncated.\r\n\r\n![image](https://github.com/user-attachments/assets/1eeb5cf2-bcae-4a1d-b28c-13c5c508b4c1)\r\n\r\nSetting
`min-width: 0` on two parent containers solved the problem:\r\n<img
width=\"442\" alt=\"Screenshot 2024-11-11 at 11 52
09\"\r\nsrc=\"https://github.com/user-attachments/assets/564b392b-38c5-4376-a1a3-4f4c6b3d58c1\">\r\n\r\n![data-view-picker](https://github.com/user-attachments/assets/08e23d5a-7f09-4530-aca5-bac7fa0da7cd)\r\n\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 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)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)\r\n-
[ ] This will appear in the **Release Notes** and follow
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"13ae98602f1979bab413cefe57e3685510adc3d3","branchLabelMapping":{"^v9.0.0$":"main","^v8.17.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Feature:Discover","release_note:skip","v9.0.0","Team:DataDiscovery","Feature:Unified
search","backport:prev-minor"],"title":"[Discover] fix: responsive data
view
picker","number":199617,"url":"https://github.com/elastic/kibana/pull/199617","mergeCommit":{"message":"[Discover]
fix: responsive data view picker (#199617)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/199434\r\n\r\n`ChangeDataView`
had two problems on smaller screens:\r\n\r\n1. The `Data view` label was
wrapped across two rows, causing the parent\r\ncontainer to expand and
misalign with the picker.\r\n2. The picker container was overflowing,
and the text was not
truncated.\r\n\r\n![image](https://github.com/user-attachments/assets/1eeb5cf2-bcae-4a1d-b28c-13c5c508b4c1)\r\n\r\nSetting
`min-width: 0` on two parent containers solved the problem:\r\n<img
width=\"442\" alt=\"Screenshot 2024-11-11 at 11 52
09\"\r\nsrc=\"https://github.com/user-attachments/assets/564b392b-38c5-4376-a1a3-4f4c6b3d58c1\">\r\n\r\n![data-view-picker](https://github.com/user-attachments/assets/08e23d5a-7f09-4530-aca5-bac7fa0da7cd)\r\n\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 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)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)\r\n-
[ ] This will appear in the **Release Notes** and follow
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"13ae98602f1979bab413cefe57e3685510adc3d3"}},"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/199617","number":199617,"mergeCommit":{"message":"[Discover]
fix: responsive data view picker (#199617)\n\n## Summary\r\n\r\nCloses
https://github.com/elastic/kibana/issues/199434\r\n\r\n`ChangeDataView`
had two problems on smaller screens:\r\n\r\n1. The `Data view` label was
wrapped across two rows, causing the parent\r\ncontainer to expand and
misalign with the picker.\r\n2. The picker container was overflowing,
and the text was not
truncated.\r\n\r\n![image](https://github.com/user-attachments/assets/1eeb5cf2-bcae-4a1d-b28c-13c5c508b4c1)\r\n\r\nSetting
`min-width: 0` on two parent containers solved the problem:\r\n<img
width=\"442\" alt=\"Screenshot 2024-11-11 at 11 52
09\"\r\nsrc=\"https://github.com/user-attachments/assets/564b392b-38c5-4376-a1a3-4f4c6b3d58c1\">\r\n\r\n![data-view-picker](https://github.com/user-attachments/assets/08e23d5a-7f09-4530-aca5-bac7fa0da7cd)\r\n\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 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)\r\n\r\n\r\n###
For maintainers\r\n\r\n- [ ] This was checked for breaking API changes
and was
[labeled\r\nappropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#_add_your_labels)\r\n-
[ ] This will appear in the **Release Notes** and follow
the\r\n[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)","sha":"13ae98602f1979bab413cefe57e3685510adc3d3"}}]}]
BACKPORT-->

Co-authored-by: Ania Kowalska <63072419+akowalska622@users.noreply.github.com>
Co-authored-by: Julia Rechkunova <julia.rechkunova@elastic.co>
@kibanamachine kibanamachine added v8.17.0 and removed backport missing Added to PRs automatically when the are determined to be missing a backport. labels Nov 13, 2024
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) Feature:Discover Discover Application Feature:Unified search Unified search related tasks release_note:skip Skip the PR/issue when compiling release notes Team:DataDiscovery Discover, search (e.g. data plugin and KQL), data views, saved searches. For ES|QL, use Team:ES|QL. v8.17.0 v9.0.0
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Discover][UnifiedSearch] Issues with Data View picker on mobile
6 participants