Resize form fields

[pinussilvestrus]

Closes #566
Closes #572
Closes #605

Demo: https://demo-566-form-field-resize--camunda-form-playground.netlify.app/

[christian-konrad]

Found some minor issues (as mentioned in Slack), but they aren't related to the resize handles.
Really like the smooth handling of the resize handles!

[pinussilvestrus]

For reference: I had a look at some existing resizable component solutions (e.g., https://github.com/react-grid-layout/react-resizable, https://www.npmjs.com/package/preact-moveable), but none of them gave enough flexibility to achieve what we wanted; especially due to the fact we resize in columns, not pixels.

I decided to re-use proven utilities from bpmn-io to implement the behaviors.

[christian-konrad]

@pinussilvestrus for the handle height, can't we add a max-height of like calc(100% - margin) of the container size?

[pinussilvestrus]

@pinussilvestrus for the handle height, can't we add a max-height of like calc(100% - margin) of the container size?

Oh yeah, damn right 😅 I thought it too complicated. Just pushed it, demo should be up in a few minutes 👍

[vsgoulart]

@pinussilvestrus 2 things I found

1. Maybe we should disable the handle if an element is the first column of the row?

2023-04-14.15-15-02.mp4

2. Should we maybe prevent user from breaking into a new row?

2023-04-14.15-15-53.mp4

[pinussilvestrus]

Maybe we should disable the handle if an element is the first column of the row?

Not sure about this one, it could be confusing for users if that's missing for just this case. wdyt @RomanKostka?

Should we maybe prevent user from breaking into a new row?

That should not happen, but I also see this behavior outside of resizing, also cf. to the findings Christian made with auto columns. I didn't see it with resizing yet. Can you maybe share your setup? So the columns of each form field and maybe whether you are on a smaller screen?

[Skaiir]

Looks great man 👍, just a few small behavior things that might be worth looking at, but otherwise what a contribution.

[pinussilvestrus]

To consider as an improvement on top: #604. It depends on whether we introduce single step columns or not.

[vsgoulart]

Implementation looks good (just made some minor comments), let's just wait to hear Roman's comment about the points I raised earlier

[RomanKostka]

Not sure about this one, it could be confusing for users if that's missing for just this case. wdyt @RomanKostka?

I would propose to leave it as it is and keep the handles. Feels natural at least for me - this is something we can investigate further when we talk to some users

One other thing to mention to keep track of it:
we have to find a solution that something like this (4 components with col-span 2 in a small window):

is not happening too often. One solution might be to increase the threshold of the breakpoint.

[pinussilvestrus]

One other thing to mention to keep track of it:
we have to find a solution that something like this

It's a thing I spent an eye for quite a while now. The thing is that Carbon calculates the breakpoints on the screen basis, not container basis, as container based media queries (CSS) are not well supported across browsers. So it doesn't matter whether you are in a single form context, or have setups like the playground were a lot is going on. Increasing the breakpoint might solve it for quite some cases, but probably not every.

Definitely a thing we should keep tracking, and act on once we need 👍