Additional documentation for Dropzone

Description

The Dropzone allows users to easily upload files or images. Users can choose whether to drag and drop a file into the Dropzone or use a file selection dialog to upload it.

Design

The Dropzone consists of a dashed border containing an IllustratedMessage. Since the IllustratedMessage is placed on a gray background, the dark color variant is used here. This choice was made deliberately, as the IllustratedMessage is embedded within a component and should attract less attention than, for example, an IllustratedMessage on an empty page.

To provide users with visual feedback, the drag-hover state is particularly important. When an appropriate file is dragged into the Dropzone, the area changes to the primary color, indicating to the user that the file can be dropped here.

One unique aspect of the Dropzone is that it uses several tokens from FormControls. Since it allows users to make an "input," it can generally be considered a FormControl. However, due to its unique characteristics, the Dropzone is not categorized under FormControls but will instead be found in a new "Upload" category.

Token

--dropzone-corner-radius: var(--size-corner-radius-default);
--dropzone-padding: var(--size-m);
--dropzone-background-color-default: var(--form-control-background-color-default);
--dropzone-background-color-hover: var(--form-control-background-color-hover);
--dropzone-background-color-invalid: var(--form-control-background-color-invalid);
--dropzone-border-color-default: var(--form-control-border-color-default);
--dropzone-border-color-hover: var(--color-primary-color-800);
--dropzone-border-color-invalid: var(--form-control-border-color-invaild);
--dropzone-border-width: var(--size-border-width-100);