[File-input] Modify the button label

[aweell]

Allow users to modify the button label of the file input

Correct labeling in the button can avoid the unnecessary usage of helper text in multiple cases, with that in mind, I agree with @DirkBaumannDXC in adding a prop to the component to allow such change.

Proposed in #676

[GomezIvann]

I also agree with @DirkBaumannDXC. If we add a buttonLabel prop, should it have a default value or give the user full control?

[aweell]

My take on this is to keep "Selec files" / "Select file" as defaults and provide a way (Agree with the buttonLabel naming) to override them.

[aweell]

Recap of the proposal

• The prop for the label change will be added to the file-input as buttonLabel
• If is undefined the default will display "Select files" in the multiple variant and "Select file" in the single.
• The uses cases for changing the label, helper text, and button label will be added to the file-input documentation
  • The label should explain the purpose of the field (e.g. Attach documentation xyz)
  • Helper-text is meant to add additional details needed (e.g. The file size should be less than 25MB)
  • The button label should indicate the purpose of the action (e.g. select PDF)

[aweell]

The current proposal doesn't cover the drop area label (present in the filedrop and dropzone variants), my suggestion is to add a prop called dropAreaLabel to change that too.

[GomezIvann]

Agree! In the end, the new prop dropAreaLabel is a logical consequence of the appearance of buttonLabel. Adding to this, this prop will behave similarly to buttonLabel:

• If it is undefined the default will display "or drop files" in the multiple counterparts and "or drop a file" in the single.
• If it is defined, the user's choice will have more weight.

[GomezIvann]

This discussion was already implemented a while ago, so I'm making it as answered.

#721