From e5b56b4118c32eba05e42129df222f5a066d54db Mon Sep 17 00:00:00 2001
From: Willson Smith <willson.smith@shopify.com>
Date: Thu, 22 Apr 2021 12:58:41 -0400
Subject: [PATCH 1/3] add prop to allow DropZone children to adjust its height

---
 src/components/DropZone/DropZone.tsx |  9 ++++-
 src/components/DropZone/README.md    | 56 ++++++++++++++++++++++++++++
 2 files changed, 64 insertions(+), 1 deletion(-)

diff --git a/src/components/DropZone/DropZone.tsx b/src/components/DropZone/DropZone.tsx
index 891128a4b13..08bc37b0dc8 100755
--- a/src/components/DropZone/DropZone.tsx
+++ b/src/components/DropZone/DropZone.tsx
@@ -84,6 +84,8 @@ export interface DropZoneProps {
   dropOnPage?: boolean;
   /** Sets the default file dialog state */
   openFileDialog?: boolean;
+  /** Allows child content to adjust height */
+  variableHeight?: boolean;
   /** Adds custom validations */
   customValidator?(file: File): boolean;
   /** Callback triggered on click */
@@ -130,6 +132,7 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
   onClick,
   error,
   openFileDialog,
+  variableHeight,
   onFileDialogClose,
   customValidator,
   onDrop,
@@ -149,6 +152,10 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
         if (!node.current) {
           return;
         }
+        if (variableHeight) {
+          setMeasuring(false);
+          return;
+        }
 
         let size = 'extraLarge';
         const width = node.current.getBoundingClientRect().width;
@@ -351,7 +358,7 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
     (active || dragging) && styles.isDragging,
     disabled && styles.isDisabled,
     (internalError || error) && styles.hasError,
-    styles[variationName('size', size)],
+    !variableHeight && styles[variationName('size', size)],
     measuring && styles.measuring,
   );
 
diff --git a/src/components/DropZone/README.md b/src/components/DropZone/README.md
index 2b0b4f6e090..40f0370649d 100755
--- a/src/components/DropZone/README.md
+++ b/src/components/DropZone/README.md
@@ -440,6 +440,62 @@ Use for cases with tight space constraints, such as variant thumbnails on the Pr
 </div>
 ```
 
+### Drop zone with varaible size
+
+Use for cases where you want the child contents of the dropzone to determine its height.
+
+```jsx
+function DropZoneExample() {
+  const [files, setFiles] = useState([]);
+
+  const handleDropZoneDrop = useCallback(
+    (_dropFiles, acceptedFiles, _rejectedFiles) =>
+      setFiles((files) => [...files, ...acceptedFiles]),
+    [],
+  );
+
+  const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];
+
+  const fileUpload = !files.length && (
+    <div style={{padding: '1rem'}}>
+      <Stack distribution="center">
+        <Stack vertical>
+          <Button>Add files</Button>
+          <TextStyle variation="subdued">or drop to upload</TextStyle>
+        </Stack>
+      </Stack>
+    </div>
+  );
+  const uploadedFiles = files.length > 0 && (
+    <Stack vertical>
+      {files.map((file, index) => (
+        <Stack alignment="center" key={index}>
+          <Thumbnail
+            size="small"
+            alt={file.name}
+            source={
+              validImageTypes.includes(file.type)
+                ? window.URL.createObjectURL(file)
+                : NoteMinor
+            }
+          />
+          <div>
+            {file.name} <Caption>{file.size} bytes</Caption>
+          </div>
+        </Stack>
+      ))}
+    </Stack>
+  );
+
+  return (
+    <DropZone onDrop={handleDropZoneDrop} variableHeight>
+      {uploadedFiles}
+      {fileUpload}
+    </DropZone>
+  );
+}
+```
+
 ### Drop zone with custom file dialog trigger
 
 Use to trigger the file dialog from an action somewhere else on the page.

From 6d3b9b96eeabc8d9668585e09d9404c07e7a22e3 Mon Sep 17 00:00:00 2001
From: Willson Smith <willson.smith@shopify.com>
Date: Thu, 22 Apr 2021 13:35:59 -0400
Subject: [PATCH 2/3] UNRELEASED.md update

---
 UNRELEASED.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/UNRELEASED.md b/UNRELEASED.md
index 1cb95ce62ef..616ba8bd169 100644
--- a/UNRELEASED.md
+++ b/UNRELEASED.md
@@ -6,6 +6,8 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Enhancements
 
+- Add `variableHeight` prop to `DropZone` so children control its height ([#4136](https://github.com/Shopify/polaris-react/pull/4136))
+
 ### Bug fixes
 
 - Fixed heading overflow issue on dismissible CalloutCard ([#4135](https://github.com/Shopify/polaris-react/pull/4135))

From d17ab8e4e9cc17f008b155ad8f125c76acf68905 Mon Sep 17 00:00:00 2001
From: Willson Smith <willson.smith@shopify.com>
Date: Thu, 22 Apr 2021 15:59:08 -0400
Subject: [PATCH 3/3] add tests

---
 .../DropZone/tests/DropZone.test.tsx          | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/src/components/DropZone/tests/DropZone.test.tsx b/src/components/DropZone/tests/DropZone.test.tsx
index 3f172d2ca68..2b7dde55376 100755
--- a/src/components/DropZone/tests/DropZone.test.tsx
+++ b/src/components/DropZone/tests/DropZone.test.tsx
@@ -343,6 +343,16 @@ describe('<DropZone />', () => {
       const displayText = dropZone.find(DisplayText);
       expect(displayText.contains(overlayText)).toBe(true);
     });
+
+    it('renders a DisplayText containing the overlayText on any screen size when variableHeight is true', () => {
+      setBoundingClientRect('small');
+      const dropZone = mountWithAppProvider(
+        <DropZone overlayText={overlayText} variableHeight />,
+      );
+      fireEvent({element: dropZone, eventType: 'dragenter'});
+      const displayText = dropZone.find(DisplayText);
+      expect(displayText.contains(overlayText)).toBe(true);
+    });
   });
 
   describe('errorOverlayText', () => {
@@ -388,6 +398,20 @@ describe('<DropZone />', () => {
       const displayText = dropZone.find(DisplayText);
       expect(displayText.contains(errorOverlayText)).toBe(true);
     });
+
+    it('renders a DisplayText containing the overlayText on any screen size when variableHeight is true', () => {
+      setBoundingClientRect('small');
+      const dropZone = mountWithAppProvider(
+        <DropZone
+          errorOverlayText={errorOverlayText}
+          accept="image/gif"
+          variableHeight
+        />,
+      );
+      fireEvent({element: dropZone, eventType: 'dragenter'});
+      const displayText = dropZone.find(DisplayText);
+      expect(displayText.contains(errorOverlayText)).toBe(true);
+    });
   });
 
   describe('onFileDialogClose', () => {