[DropZone] Add prop to DropZone so children control its height

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))

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,
   );
 

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.

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', () => {