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

[EuiFlyoutResizable] Allow consumers to update the size prop #7759

Merged
merged 2 commits into from
May 15, 2024

Conversation

cee-chen
Copy link
Contributor

@cee-chen cee-chen commented May 15, 2024

Summary

closes #7536

Currently, size stops updating/being respected after the first time a user resizes the flyout. I've tweaked the useEffects of the resizable flyout component slightly to allow consumers to control/override the internal flyout width state.

flyout_resizable

QA

General checklist

  • Browser QA - N/A, logical/state JS changes only
  • Docs site QA - N/A, I skipped extra docs for this as this is likely how it should have worked all along 🙈
  • Code quality checklist
  • 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

@cee-chen cee-chen marked this pull request as ready for review May 15, 2024 05:15
@cee-chen cee-chen requested a review from a team as a code owner May 15, 2024 05:15
@cee-chen cee-chen force-pushed the flyout-resizable/controlled-size branch from bfae62d to 1e759f6 Compare May 15, 2024 06:12
cee-chen added 2 commits May 14, 2024 23:12
- currently `size` stops being respected after the first time a user resizes the flyout

- this should work for both controlled sizes `onResize` as well as semi-uncontrolled resizing (`size` never updates)
@cee-chen cee-chen force-pushed the flyout-resizable/controlled-size branch from 1e759f6 to 6579d4d Compare May 15, 2024 06:12
@kibanamachine
Copy link

Preview staging links for this PR:

@elasticmachine
Copy link
Collaborator

💚 Build Succeeded

Copy link
Contributor

@mgadewoll mgadewoll left a comment

Choose a reason for hiding this comment

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

🚢 🐈‍⬛ The changes work great!

}, [flyoutRef, getFlyoutMinMaxWidth, size]);
setCallOnResize(false);
// For string `size`s, resetting flyoutWidth to 0 will trigger the above useEffect's recalculation
setFlyoutWidth(typeof size === 'number' ? getFlyoutMinMaxWidth(size) : 0);
Copy link
Contributor

Choose a reason for hiding this comment

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

🧠

@cee-chen cee-chen merged commit 159fd9c into elastic:main May 15, 2024
5 checks passed
@cee-chen cee-chen deleted the flyout-resizable/controlled-size branch May 15, 2024 14:37
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[EuiResizableFlyout] Make size controllable
4 participants