[File Input] File item styles update

[GomezIvann]

Checklist
(Check off all the items before submitting)

• Build process is done without errors and all tests pass in the /lib directory.
• Self-reviewed the code before submitting.
• Meets accessibility standards.
• Added/updated documentation to /website as needed.
• Added/updated tests as needed.

Description
Using the grid layout to solve the issues the component had in regards to following the latests specifications.

Closes #1379

[raquelarrojo]

• In filedrop mode, please change the padding of the ButtonContainer to 4px 12px 4px 4px instead of 2px 12px 2px 3px as specified in guidelines.

Current implementation:

Guidelines:

• In filedrop and dropzone modes, if it is not multiple and the file has an error, the error is not shown.

I think the error should be shown like this:

[GomezIvann]

• In filedrop mode, please change the padding of the ButtonContainer to 4px 12px 4px 4px instead of 2px 12px 2px 3px as specified in the guidelines.

Current implementation:

Guidelines:

• In filedrop and dropzone modes, if it is not multiple and the file has an error, the error is not shown.

I think the error should be shown like this:

Are you sure the padding is 4px 12px 4px 4px? I mean, the styles of Alex say that the distance is 4px taking into account the border (4px - 1px of border = 3px of padding, so the value would be 3px 12px 3px 3px), am I right?

[raquelarrojo]

• In filedrop mode, please change the padding of the ButtonContainer to 4px 12px 4px 4px instead of 2px 12px 2px 3px as specified in the guidelines.

Current implementation:
Guidelines:

• In filedrop and dropzone modes, if it is not multiple and the file has an error, the error is not shown.

I think the error should be shown like this:

Are you sure the padding is 4px 12px 4px 4px? I mean, the styles of Alex say that the distance is 4px taking into account the border (4px - 1px of border = 3px of padding, so the value would be 3px 12px 3px 3px), am I right?

Yes, I totally agree. Taking a look to the specs, 4px is the distance with the border. So we could calculate the padding as you say, calc(4px - dropBorderThickness), since dropBorderThickness is the token for the border width.

[raquelarrojo]

When it is not multiple and it has several files in value, it should show the files like this:

Code:

<DxcFileInput
    label="Single file with files in value"
    helperText="Please select files"
    callbackFile={callbackFile}
    value={allFiles}
    multiple={false}
/>

Now they are shown: