Enhance FilePicker CTA button

[div-Leo]

Describe the feature you'd like

Allow users to inject a custom component as the CTA button.

ATM we opinionatedly render 2 different CTAs based on desktop/mobile (button for desktop and icon for mobile) The advantage is to have a more flexible implementation so that the user can choose what to show as CTA.

Mobile FilePicker request:

Questions:

• Do we want to add mobile/desktop components?
• Do we want to add empty/uploaded components?

Describe alternatives you've considered

We could add another condition to choose whether to force to render the icon or the button in the mobile version.

[nlopin]

How do you see this in the API?

[div-Leo]

To keep it simple I'd add a single component that replaces any state mobile/desktop and empty/uploaded, and it will look something like this:

<FilePicker
  {...}
  ComponentCTA={<TextButton>Add</TextButton>}
/>

The logic for empty/uploaded can be easily reimplemented with the onFileChange callback

<FilePicker
  {...}
  ComponentCTA={selectedFile ? <TextButton>Add</TextButton> : <TextButton>Change</TextButton>}
  onFileChange={(file)=> setSelectedFile(file)}
/>

[div-Leo]

Sync outcome: we should push back to keep consistency and avoid component injection. Status: stand by

[arturmiglio]

Not relevant anymore