parse-dashboard
parse-dashboard copied to clipboard
feat: New option to make modal resizable
New Pull Request Checklist
- [x] I am not disclosing a vulnerability.
- [x] I am creating this PR in reference to an issue.
Issue Description
This PR adds a "resize" handle to modals that have the resizable
prop enabled.
Closes: #1879
Approach
TODOs before merging
- [x] A changelog entry is created automatically using the pull request title (do not manually add a changelog entry)
Thanks for opening this pull request!
- 🎉 We are excited about your hands-on contribution!
Here is how the final resize handle looks:
@mtrezza regarding labels being resized as well: I tried to force a max-width
on them, but the Field
component would require a slightly bigger refactor that I did not want to include in this PR.
That's fine then, thanks for looking into it.
@mtrezza Maybe instead of the drag handle in the corner, we could allow resizing the modal with both the left and right edge of the container.
Not sure how the experience of that would be. I can only think of a corner drag handle, like the field had. That is the UI behavior a user would typically expect. If there is another way that is intuitive, we can also explore that.
It could work as in a regular OS window manager, the whole side could be used to resize the modal:
https://user-images.githubusercontent.com/920747/139558468-ee3f470a-853f-4e58-9af2-32bb575d67d7.mov
If it's separately resizable on the horizontal and vertical side it would certainly be an improvement over the status quo, but it would still be impractical when you cannot resize both simultaneously. I think that's an issue when want to resize because there is a large JSON object that you want to display and you want to fit the dialog just right to display it.
What is the difficulty to let resize both at the same time? Is it a component restriction?
I will reformat the title to use the proper commit message syntax.