feat(file-uploader): support drag and drop

[asudoh]

Closes: #2288

Not for this milestone (v10.3), but creating a draft pull request to get designer's input. Notably:

• Does the color/thickness of the dotted line and hover-over line of drop area look good? Or should we choose some different tokens?
• The "list of files" UI in the spec has border, whereas the current v10 doesn't. Was it a remaining v10 item?
• Chose "add" cursor that seems to meet what it does, but I have an impression that the spec may intend custom cursor. If so, where can I grab the custom cursor from?

The latest demo can be seen at: https://deploy-preview-2848--the-carbon-components.netlify.com/component/file-uploader--default.html

Changelog

New

• {{new thing}}

Changed

• {{change thing}}

Removed

• {{removed thing}}

Testing / Reviewing

{{ Add descriptions, steps or a checklist for how reviewers can verify this PR works or not }}

[netlify]

Deploy preview for the-carbon-components ready!

Built with commit 2564d2d

https://deploy-preview-2848--the-carbon-components.netlify.com

[netlify]

Deploy preview for carbon-components-react ready!

Built with commit 2564d2d

https://deploy-preview-2848--carbon-components-react.netlify.com

[shixiedesign]

Hi @asudoh! Thanks for starting on this issue.

• Here's the drop zone's spec: dotted box border should be 1px, $ui-04, 8px dashes, 4px gaps. The border needs to be 3:1 accessible I believe.
  

• Blue drop zone outline looks correct 🎉! 2px, blue. Just need to make sure the color is interactive-03, so the highlight outline is actually #ffffff on dark theme

• The cursor doesn't have to be custom. However, the add cursor should only appear inside the drop zone. This is currently reversed and should be fixed. The green add sign is a visual indicator to users that they can now "drop", so green add outside drop zone would be wrong. Cursor should be default outside the drop zone.
  

• Lastly, I think the drop zone needs to be taller to provide sufficiently big target area. I don't have the specific sketchfile too 🤦‍♀ so I'm gonna suggest 256px wide and 96px tall, with an internal padding of 16px all around:
  

[asudoh]

@shixiedesign Thank you for the design review! - Updated the demo link with most of suggested design change, except the width of the drop container given the original one is wider than 256px. Please let me know if shortening to 256px is more desirable.

I'll get in sync with @emyarod on React implementation. Until then, let me keep this PR draft.

[shixiedesign]

Hi @asudoh I spec'ed out the file loader more completely after finding the sketchfile, so a few more small visual fixes:

• Default width of the drop zone, let's not make it smaller, but make it 320px so it's a nice number divisible by 8.

• file list's x icon should use color $icon-02
  

• this loader should be 16x16 in overall size, with a ring thickness of 3px
  Current
  
  Should be
  

• cursor should turn into "pointing hand" when hovering over the link for upload:
  

• bug: when dragging+hovering, the blue outline shouldn't cause the text inside to move.
  

• do we have an error state for the file list? (see below spec img) We should use $support-01 for main error message, detailed error message is $text-01, type size 12px, ui-03 for divider line.

Below is the complete spec for your reference:

[netlify]

Deploy preview for carbon-elements ready!

Built with commit 2564d2d

https://deploy-preview-2848--carbon-elements.netlify.com

[asudoh]

@shixiedesign Thank you for the more detailed spec - Updated https://deploy-preview-2848--the-carbon-components.netlify.com/component/file-uploader--default.html upon the update.

One question wrt the invalid state is that whether we need an invalid icon there. I'm wondering this because @emyarod originally had it, which can be seen at https://the-carbon-components.netlify.com/component/file-uploader--example-upload-states.html. I have https://deploy-preview-2848--the-carbon-components.netlify.com/component/file-uploader--example-upload-states.html for now.

[shixiedesign]

@asudoh investigating this right now along with issue #2901 (comment)

[asudoh]

Cool thanks @shixiedesign for specing this and entering the issue!

[asudoh]

Superseded by: #3175