Droppables are containers that can receive draggable components and files. They help customers transfer information across the interface.
This component is deprecated! Please use the new Drag & drop instead.
Old component won’t get updates unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.
New component should always be used unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.
If you are looking to migrate this component and require help, reach out to the #ask-design-system Slack channel.
<div class="droppable">
<div class="droppable__area">
</div>
</div>This is the default state of droppables. This will contain items with in it so it will grow or contract based on the content within.
<div class="droppable droppable--empty">
<div class="droppable__area l-h-center l-v-center">
<label class="droppable__instructions">
Optional: Drag here to build a screener.
</label>
</div>
</div>This is the default state of Droppables. The style of this component affords items to be dropped into it.
Insight
When a file or item has been dropped into this component the background color should still contain its contents to communicate to the customer that the action was successful and that these files are still grouped together within the droppable component.<div class="droppable droppable--empty">
<div class="droppable__area hovering l-h-center l-v-center">
<label class="droppable__instructions">
Optional: Drag here to build a screener.
</label>
</div>
</div>In addition to the empty state, droppables respond to hover to afford that files can be dropped onto the container.
Does not receive :focus