eui
eui copied to clipboard

Published 20 hours ago •

Reame
Issues

[EuiResizableContainer] Add resizable container callbacks

Open davismcphee opened this issue 3 years ago • 6 comments

trafficstars

Summary

This PR adds support for onResizeStart and onResizeEnd callback props to EuiResizableContainer. The callbacks support resizing with a pointer or a keyboard, and a trigger: 'pointer' | 'key' parameter is passed to onResizeStart indicating which action triggered the resize.

Notes:

For pointers, onResizeStart is called on mousedown, and onResizeEnd is called on mouseup or mouseleave.
For keyboards, onResizeStart is called only on the first keydown event while the key remains pressed, and onResizeEnd is called on keyup. Tapping an arrow key repeatedly will called onResizeStart and onResizeEnd once for each tap.
If an arrow key is pressed while a pointer resize is in progress, onResizeEnd is called to signal the end of the pointer resize before onResizeStart('key') is called to signal the start of the keyboard resize.
If the opposite arrow key is pressed while a keyboard resize is in progress, onResizeEnd is called to signal the end of the previous keyboard resize before onResizeStart('key') is called to signal the start of the current keyboard resize. After changing resize directions, releasing the previous key will not call onResizeEnd again since it would signal the end of the current keyboard resize.
The related issue mentions potentially adding support for similar events to EuiResizablePanel, but I didn't get around to that in this PR.

(The GIF makes it look like some taps are missed due to the frame rate, but this should not actually happen) resizable_container_callbacks

Resolves #6225.

Checklist

[x] Checked in both light and dark modes
[x] Checked in mobile
[x] Checked in Chrome, Safari, Edge, and Firefox
[ ] Props have proper autodocs and playground toggles
[x] Added documentation
[ ] Checked Code Sandbox works for any docs examples
[x] Added or updated jest and cypress tests
[x] Checked for breaking changes and labeled appropriately
[x] Checked for accessibility including keyboard-only and screenreader modes
[ ] Updated the Figma library counterpart
[x] A changelog entry exists and is marked appropriately

Sep 14 '22 17:09 davismcphee

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

Sep 14 '22 17:09 kibanamachine

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

Sep 14 '22 18:09 kibanamachine

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

Sep 14 '22 19:09 kibanamachine

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

Sep 14 '22 20:09 kibanamachine

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

Sep 15 '22 01:09 kibanamachine

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

Sep 15 '22 02:09 kibanamachine

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

Sep 26 '22 16:09 kibanamachine

That was my last set of comments, I promise! :)

Sep 26 '22 18:09 cee-chen

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

Sep 26 '22 18:09 kibanamachine

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

Sep 26 '22 19:09 kibanamachine

jenkins test this

Sep 27 '22 15:09 cee-chen

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

Sep 27 '22 16:09 kibanamachine

Preview documentation changes for this PR: https://eui.elastic.co/pr_6236/

Sep 27 '22 21:09 kibanamachine

Looks great! Feel free to hit merge on this! :tada:

Sep 27 '22 23:09 cee-chen