Polaris-react: Drop Zone - Option to show drop overlay when object is dragged into page

Created on 22 May 2019  路  6Comments  路  Source: Shopify/polaris-react

Feature request summary

This is different than dropOnPage

Drop zone could have an option that would display overlay when compatible object is dragged into the page, not only when object is dragged over the drop zone component.

Validation should be incorporated so that overlay is not displayed for incompatible drop zones.

Rationale

During our work we added some small drop zones that are not clear that are drop zone (changing image of variant by dragging image over its thumbnail). The proposed option would make it clear where the drop zones are once user starts dragging object into the page.


馃専 Feature requests that are not yet planned will be closed. We then use the issue鈥檚 :+1: upvotes to track and set priorities. See the contribution guidelines for more information.

Feature request Icebox

Most helpful comment

Goal of my suggestion is to increase discoverability of small drop zones on the page. In our case we are allowing drop on a resource list thumbnail. The dropzone changes only once you drag image over the thumbnail but it's hard to discover this functionality.


Before dragging a file

overlay-before-blurred



After dragging a file over the page

overlay-after-blurred

All 6 comments

馃憢 Thanks for opening your first issue. A contributor should give feedback soon. If you haven鈥檛 already, please check out the contributing guidelines. You can also join #polaris on the Shopify Partners Slack.

Hi @lukashlavacka! Could you share a screenshot or example of the small drop zone behavior you're running into? And perhaps an example of the behavior you'd like to see if you've got one?

Goal of my suggestion is to increase discoverability of small drop zones on the page. In our case we are allowing drop on a resource list thumbnail. The dropzone changes only once you drag image over the thumbnail but it's hard to discover this functionality.


Before dragging a file

overlay-before-blurred



After dragging a file over the page

overlay-after-blurred

@sarahill What do you think? I like this idea! (Thanks so much for adding the visuals, @lukashlavacka!)

This is great! This makes a lot of sense especially for these smaller dropzones that don't have a ton of discoverability, as you mentioned, without explicitly dropping an image on top.

This issue has been inactive for 180 days and labeled with Icebox. It will be closed in 7 days if there is no further activity.

Was this page helpful?
0 / 5 - 0 ratings