[EuiFlyoutResizable] Add optional onResize callback

[cee-chen]

Summary

Per recent EUI feedback - adds an onResize callback where the latest flyout width is passed, which allows consumers to do things like, e.g. save user preference by storing the flyout width in localStorage

QA

• Go to https://eui.elastic.co/pr_7464/#/layout/flyout#resizable-flyouts
• Open your browser devtools and go to the console
• Confirm that the flyout with is only logged to the console once you stop dragging and the flyout width is settled, and not at the beginning or middle of a drag
• Confirm that the flyout with is logged to the console on every left/right arrow keypress

General checklist

• Revert [REVERT ME] QA commit
• Browser QA - N/A
• Docs site QA
  • Props have proper autodocs (using @default if default values are missing) and playground toggles
    - [ ] Added documentation
    - [ ] Checked Code Sandbox works for any docs examples
• Code quality checklist
  • Added or updated jest and cypress tests
• Release checklist
  • A changelog entry exists and is marked appropriately.
    - [ ] If applicable, added the breaking change issue label (and filled out the breaking change checklist)
• Designer checklist - N/A

[tkajtoch]

I can see a need for receiving continuous updates during mouse dragging, and I think we may eventually have to implement it. We usually let users deal with debouncing these calls when necessary, so maybe just do the same thing here and keep it consistent? Alternatively, we could provide a configuration prop like onResizeUpdateFrequency: 'once' | 'always' but that sounds like a new pattern we'd need to introduce to other places as well.

[cee-chen]

That's fair, but I think I'd rather wait until it's requested? TBH I kind of felt that the onResizeStart and onResizeEnd callbacks/contributions to EuiResizableContainer were stopgaps for this exact reason - consumers/devs only wanted the final width at the end of resize, not on mouse drag.

a new pattern we'd need to introduce to other places as well

FWIW EuiFlyoutResizable is already different from EuiResizableContainer in this regard, in that its width(s) are not controllable unlike EuiResizableContainer. I don't think it needs to be 1:1 on this, but if we feel differently we can change it - it's a beta component after all

[cee-chen]

Actually, why don't we double check with the dev who requested this feature! @mykolaharmash - for EuiFlyoutResizable's new onResize callback, would you want the updated width during the user drag event (potentially being called many times per second), or would you only want the final width after the user is done dragging?

[mykolaharmash]

Hey folks! Sorry for a delayed response. For the usecase I had in mind (just saving the preferred size and restoring it later) having a single callback when the event end is totally fine. The only potential usecase I imagine where I'd need a continuous stream of events is when I'd want to some other layout or element on the page react to the updated flyout size, but it's only hypothetical, I don't have a realy need for this at the moment.

Thank you for implementing this 🙌 🙏

[tkajtoch]

I'm totally fine leaving the current onResize behavior as is since this is a beta component. LGTM!

[cee-chen]

Thanks Tomasz! @mykolaharmash, please feel free to drop a comment or open an issue if you need onResize to fire during the drag and not just at the end of it - we can continue tweaking this component as needed!

[kibanamachine]

Preview staging links for this PR:

• Docs site: https://eui.elastic.co/pr_7464/
• Storybook: https://eui.elastic.co/pr_7464/storybook

[elasticmachine]

💚 Build Succeeded

• Buildkite Build
• Commit: 866f74e

History

• 💚 Build #1286 succeeded 7407b4f