search

grommet / hpe-design-system

HPE Design System
48 stars 23 forks source link

FileInput - Current issues when including Uploader with Progress #4229

Open vavalos5 opened 2 weeks ago

vavalos5 commented 2 weeks ago

This ticket is to note down all problems we're coming across on FileInput in general and when adding the Uploader with Progress in Figma. Also to keep in mind and consider when refactoring.

vavalos5 commented 1 week ago

Currently, the FileInput component has these problems:

Vertical Heights on FileInput If I select the FileInput Box container in the layers panel and replace it with the Uploader Progress component, the FileInput Box container has a fixed height to contain all of the list items inside of the container. So when applying hug contents vertically, all items are shown. However, if we allow hug contents and when replacing to the uploader Progress, items will align correctly.

Creating a Variant of FileInput with Upload Progress We had to create a variant of the FileInput Multiple Replace the FileInput ListItem Group with the .upload-progress-group Change vertical height from Fixed to Hug for list items to size properly

Clicking multiple times to change Upload Progress States You have to click multiple times to get into the FileInput Uploader with Progress states and change them. So not available at the atomic level surface in properties panel.

Properties wacky When you select "uploading" from the States in properties panel, the following states are shown: Image When you toggle "value" off, Uploading "state" changes to the multi-FileInput component. Image This is due to the fact that we don't have a "false" boolean for the uploading state.

There are no variants for no value (or False in a boolean) for FileInput- Multiple.

We haven content as such in the error message "required field" which is confusing to the "required" boolean in properties panel. The boolean refers to the asterisk on the Label.

We have the error message on by default for all variants. Error message needed for FileInput single file and multi-file, not needed for upload as upload has it's own states.

Should we keep progress bar component housed in FileInput or should it be a separate component? Something to keep in mind when refactoring.

If you toggle "multiple" boolean, it reverts to default FileInput component. but when toggled back on, it turns on FileInput multiple. So if you need "uploading" state, you have to change it to that state. It makes it confusing.Image

Since "Uploading" state doesn't have a non-value type (or False in a boolean), it doesn't make sense to have a value property for this component due to the fact that it always will due to it's state. Considering we're building the Uploader from the FileInput component, it automatically transfers over. Making it a confusing experience for Product Designers.