[Dropzone] Support fixed height

[alexandcote]

WHY are these changes introduced?

Fixes #742

The DropZone determines its size (height and width) based on width only. This makes certain valid use cases, where the default DropZone height isn't appropriate, impossible.

WHAT is this pull request doing?

Adding a new Dropzone wrapper that use the power of flexbox to determine the height.

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated the component's README.md with documentation changes
• Tophatted documentation changes in the style guide
• For visual design changes, pinged one of @ HYPD, @ mirualves, @ sarahill, or @ ry5n to update the Polaris UI kit

[github-actions]

🟢 This pull request modifies 4 files and might impact 1 other files.

Details:

All files potentially affected (total: 1)

• /src/components/DropZone/DropZone.tsx

📄 UNRELEASED.md (total: 0)

Files potentially affected (total: 0)

🎨 src/components/DropZone/DropZone.scss (total: 1)

Files potentially affected (total: 1)

• /src/components/DropZone/DropZone.tsx

🧩 src/components/DropZone/DropZone.tsx (total: 0)

Files potentially affected (total: 0)

🧩 src/components/DropZone/tests/DropZone.test.tsx (total: 0)

Files potentially affected (total: 0)

[dleroux]

I applied the changes to pass travis, top-hatted in the playground, in chrome and edge chromium. All looks good.

I didn't tophat in web, might be worth if someone has a chance to yarn build-consumer web

[beefchimi]

Looks good! I tested this out in Storybook and I didn't see any issues. If possible, we should give this a try in online-store-web before merging.

It is interesting to see this solution. The previous WIP PR seemed rather complicated - maybe I missed something on my initial scan, but are the two PRs achieving the same thing @alexandcote ? Or are you intentionally leaving out some complexity?

[beefchimi]

This is always a bit risky to do, because if the Labelled wrapping markup changes we need to make sure that this will change as well. I think thanks to the splash build tooling that polaris uses, we will get a notification that at least indicates DropZone will be affected by Labelled changes. Still... I'm wondering if we should qualify this with a comment to express why we need to override some Labelled styles?

[AndrewMusgrave]

Probably a comment or it'll be forgotten about and list in the 💨

[AndrewMusgrave]

@maxariss I remember this originally broke something you were working on, but I can't remember exactly where the dropzone was. Mind giving me a reminder so we can 🎩 in that area?

[AndrewMusgrave]

cc/ @maxariss

[AndrewMusgrave]

cc/ @maxariss

[maxariss]

@AndrewMusgrave I could be mistaken, but I believe one area where this issue was originally raised was the ImageModal on the VariantDetails page. I think we were trying to use the dropzone as a grid item within the image grid. However, It looks like at some point someone modified the component to just make the entire card a Dropzone, and then custom baked the grid item to appear like a dropzone (added a dashed border and some other styles to mimic Dropzone).

[dhmacs]

Any update on this one?

[AndrewMusgrave]

cc/ @alexandcote

[alexandcote]

No update on my side, I opened this PR in March but now I don't have time to take a second look. Feel free to update/merge/close the PR if anyone had time.

[alex-page]

@alexandcote is this still an issue?