This PR introduces the <FileInput> component. It has the design according to latest Figma plans and functionality to add one or multiple files, optional file previews, drag & drop functions and controlled state with metadata options. See Styleguidist for all relevant use case examples.
NOTE: In the unit tests of this component, many of the core functionalities of this component are not tested at all. This is because the component uses DataTransfer and FileList under the hood to manage the flow of files from the user to the input and the component's internal state, and these are not supported by Jest. ❌
(PR also moves Dropdown under the Form-directory in the project and removes some redundant lines from spacing provider docs)
How Has This Been Tested?
In Styleguidist on MacOS Chrome + Safari and VoiceOver. iOS Safari. Also tested in Styleguidist and in a React + Vite project on Windows + NVDA + Firefox and Chrome as well as Android + Talkback in same setups.
Description
This PR introduces the
<FileInput>component. It has the design according to latest Figma plans and functionality to add one or multiple files, optional file previews, drag & drop functions and controlled state with metadata options. See Styleguidist for all relevant use case examples.NOTE: In the unit tests of this component, many of the core functionalities of this component are not tested at all. This is because the component uses
DataTransferandFileListunder the hood to manage the flow of files from the user to the input and the component's internal state, and these are not supported by Jest. ❌(PR also moves Dropdown under the Form-directory in the project and removes some redundant lines from spacing provider docs)
How Has This Been Tested?
In Styleguidist on MacOS Chrome + Safari and VoiceOver. iOS Safari. Also tested in Styleguidist and in a React + Vite project on Windows + NVDA + Firefox and Chrome as well as Android + Talkback in same setups.
Screenshots:
Release notes
FileInput
<FileInput>component