Add FinalFormFileSelect

[NataliaVizintini]

COM-81 - File Upload Form Field

FileUpload Field with Dropzone

[johnnyomair]

@NataliaVizintini is this really draft? Or do you want a review?

[NataliaVizintini]

@NataliaVizintini is this really draft? Or do you want a review?

@johnnyomair as I mentioned in our conversation, I need your feedback to continue the development, because I don't think the component is ready yet. Therefore it's a draft and I want a review, please.

[jamesricky]

There seem to be a few styling differences between the design and the implementation:

Design	Implementation

• The height and border-color of the droppable area
• The button color
• The height of the items in the uploaded files list
• The space between the uploaded files list and the "Maximum file size" text
• The icon used in the error state should be a "!" but is an "i"

Also, the min-width's prevent the field from shrinking beyond a certain width:

This seems unnecessary to me.
Is there a specific reason for this, or could we remove that?

file.upload.resizing.mov

[jamesricky]

FinalFormFileUpload makes the most sense to me, but that's exactly where we started.

Ah, just saw the comment from @johnnyomair, that makes sense.

Then I think FinalFormFileInput makes the most sense, would also be fine with FinalFormFileSelect though.

[NataliaVizintini]

@jamesricky

• The button color - I thought it should be primary? It would look very strange if all the buttons in a form are primary and this one is black? And the option with black is missing in button colours…
• The height of the items in the uploaded files list - it’s the Chip height, when we’ll get Chip with new design, the height should be just as in design. But for now, it looks bad without the padding. (see screenshot)

Min-width was discussed with Mitch, and we agreed it should be 250px for FileItem and DroppableArea.

[jamesricky]

The button color - I thought it should be primary? It would look very strange if all the buttons in a form are primary and this one is black? And the option with black is missing in button colours…

Please check with the UX-Team if you're unsure if the design is correct.

@thomasdax98 The black button seems to be the new secondary variant in the design, in the current implementation (in main) it is green. Does the black button exist somewhere yet? Is there an open PR/Task for that?

The height of the items in the uploaded files list - it’s the Chip height, when we’ll get Chip with new design, the height should be just as in design. But for now, it looks bad without the padding. (see screenshot)

Good point, we'll leave it as is then for now 👍🏼

The space between the uploaded files list and the "Maximum file size" text - it’s 10px gap between all elements of the column, just as in design 🤔

There is also a margin in addition to the gap, so the total space is more than 10px.

Min-width was discussed with Mitch, and we agreed it should be 250px for FileItem and DroppableArea.

👍🏼

[johnnyomair]

@thomasdax98 @jamesricky please review once again, thanks!
@NataliaVizintini please merge main to fix conflicts.