[Controls] Use new panelMinWidth prop in EuiInputPopover
#164375
Assignees
Labels
impact:medium
Addressing this issue will have a medium level of impact on the quality/strength of our product.
loe:small
Small Level of Effort
Project:Controls
Team:Presentation
Presentation Team for Dashboard, Input Controls, and Canvas
Comments
Heenawter
added
Team:Presentation
|
Pinging @elastic/kibana-presentation (Team:Presentation) |
Heenawter
added
loe:small
6 tasks
Heenawter
added a commit
that referenced
this issue
Sep 22, 2023
Closes #164375 ## Summary This PR wraps up #162651 by fully migrating to the `EuiInputPopover` for all controls - specifically, this is made possible by the new `panelMinWidth` prop, which makes it so that the popover can now extend past the size of the input **while maintaining** the expected positioning. | Before | After | |--------|--------| | The popover was centered underneath the control on the smallest size:<br><br> | The popover is left-aligned with the start of the input and expands to the right:<br><br> | | The range slider popover could not extend past the control width, regardless of how small that was:<br><br> | The range slider popover now also has a minimum width, which makes it more useable on the smallest size:<br><br> | ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [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) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
joemcelroy
pushed a commit
to joemcelroy/kibana
that referenced
this issue
Sep 25, 2023
Closes elastic#164375 ## Summary This PR wraps up elastic#162651 by fully migrating to the `EuiInputPopover` for all controls - specifically, this is made possible by the new `panelMinWidth` prop, which makes it so that the popover can now extend past the size of the input **while maintaining** the expected positioning. | Before | After | |--------|--------| | The popover was centered underneath the control on the smallest size:<br><br> | The popover is left-aligned with the start of the input and expands to the right:<br><br> | | The range slider popover could not extend past the control width, regardless of how small that was:<br><br> | The range slider popover now also has a minimum width, which makes it more useable on the smallest size:<br><br> | ### Checklist - [x] [Unit or functional tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html) were updated or added to match the most common scenarios - [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) ### For maintainers - [ ] This was checked for breaking API changes and was [labeled appropriately](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process) --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the feature:
Now that #163961 is merged, per the discussion here, we should (1) fully migrate to the
EuiInputPopoverfor the options list control and (2) make use of the newpanelMinWidthprop for both the options list and the range slider (via theinputPopoverPropsof theEuiDualRangecomponent).The text was updated successfully, but these errors were encountered: