[WIP][DropZone] Allow fixed height on DropZone

.vscode/settings.json

@@ -16,7 +16,7 @@
     "**/node_modules": true,
     ".{dev,shadowenv.d}": true,
     "build-intermediate/": true,
-    "build/": true,
+    "build/": false,
     "docs/": true,
     "esnext/": true,
     "index.*": true,

UNRELEASED.md

@@ -16,6 +16,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 - Fixed accessibility issue with ChoiceList errors not being correctly connected to the inputs ([#1824](https://github.com/Shopify/polaris-react/pull/1824));
 - Fixed `Tab` `aria-controls` pointing to a non-existent `Panel` `id` ([#1869](https://github.com/Shopify/polaris-react/pull/1869))
+- Constrained `DropZone` height based on inherited wrapper height ([#1138](https://github.com/Shopify/polaris-react/pull/1138))
 
 ### Documentation
 

src/components/DropZone/DropZone.scss

@@ -17,12 +17,17 @@ $dropzone-overlay-border-color-error: color('red');
 $dropzone-overlay-background: color('indigo', 'lighter');
 $dropzone-overlay-background-error: color('red', 'lighter');
 
+.DropZoneWrapper {
+  height: inherit;
+}
+
 .DropZone {
   position: relative;
   display: flex;
   justify-content: center;
   background-color: $dropzone-background;
   border-radius: $dropzone-border-radius;
+  height: inherit;
 }
 
 .hasOutline {
@@ -38,6 +43,10 @@ $dropzone-overlay-background-error: color('red', 'lighter');
   cursor: not-allowed;
 }
 
+.isMeasuring {
+  visibility: hidden;
+}
+
 .sizeExtraLarge {
   min-height: $dropzone-min-height-extra-large;
 }
@@ -58,7 +67,9 @@ $dropzone-overlay-background-error: color('red', 'lighter');
 }
 
 .Container {
+  display: flex;
   flex: 1;
+  justify-content: center;
 }
 
 .Overlay {

src/components/DropZone/DropZone.tsx

@@ -23,21 +23,23 @@ import {withAppProvider, WithAppProviderProps} from '../AppProvider';
 import {FileUpload, Provider} from './components';
 
 import {fileAccepted, getDataTransferFiles} from './utils';
-import {DropZoneContext} from './types';
+import {DropZoneContext, Size} from './types';
 
 import styles from './DropZone.scss';
 
 export type Type = 'file' | 'image';
 
 export interface State {
   id: string;
-  size: string;
+  height: Size;
+  width: Size;
   type?: string;
   error?: boolean;
   dragging: boolean;
   overlayText?: string;
   errorOverlayText?: string;
   numFiles: number;
+  measuring: boolean;
 }
 
 export interface Props {
@@ -163,18 +165,10 @@ class DropZone extends React.Component<CombinedProps, State> {
         return;
       }
 
-      let size = 'extraLarge';
-      const width = this.node.current.getBoundingClientRect().width;
+      const height = this.setWrapperSize('height', this.node);
+      const width = this.setWrapperSize('width', this.node);
 
-      if (width < 100) {
-        size = 'small';
-      } else if (width < 160) {
-        size = 'medium';
-      } else if (width < 300) {
-        size = 'large';
-      }
-
-      this.setState({size});
+      this.setState({height, width, measuring: false});
     },
     50,
     {trailing: true},
@@ -195,19 +189,23 @@ class DropZone extends React.Component<CombinedProps, State> {
     this.state = {
       type,
       id: props.id || getUniqueID(),
-      size: 'extraLarge',
+      height: Size.ExtraLarge,
       dragging: false,
       error: false,
       overlayText: translate(`Polaris.DropZone.overlayText${suffix}`),
       errorOverlayText: translate(`Polaris.DropZone.errorOverlayText${suffix}`),
       numFiles: 0,
+      width: Size.ExtraLarge,
+      measuring: true,
     };
   }
 
   get getContext(): DropZoneContext {
+    const {width, height, type = 'file'} = this.state;
     return {
-      size: this.state.size,
-      type: this.state.type || 'file',
+      width,
+      height,
+      type,
     };
   }
 
@@ -220,9 +218,11 @@ class DropZone extends React.Component<CombinedProps, State> {
       id,
       dragging,
       error,
-      size,
+      height,
+      width,
       overlayText,
       errorOverlayText,
+      measuring,
     } = this.state;
     const {
       label,
@@ -253,43 +253,58 @@ class DropZone extends React.Component<CombinedProps, State> {
       styles.DropZone,
       outline && styles.hasOutline,
       (active || dragging) && styles.isDragging,
+      measuring && styles.isMeasuring,
       error && styles.hasError,
-      size && size === 'extraLarge' && styles.sizeExtraLarge,
-      size && size === 'large' && styles.sizeLarge,
-      size && size === 'medium' && styles.sizeMedium,
-      size && size === 'small' && styles.sizeSmall,
+      height === Size.ExtraLarge && styles.sizeExtraLarge,
+      height === Size.Large && styles.sizeLarge,
+      height === Size.Medium && styles.sizeMedium,
+      height === Size.Small && styles.sizeSmall,
+    );
+
+    const extraLargeDropZoneSize =
+      width === Size.ExtraLarge && height !== Size.Small;
+
+    const mediumLargeDropZoneSize =
+      (width === Size.Medium || width === Size.Large) && height !== Size.Small;
+
+    const dragOverlayDisplayText = extraLargeDropZoneSize && (
+      <DisplayText size="small" element="p">
+        {overlayText}
+      </DisplayText>
+    );
+
+    const dragOverlayCaption = mediumLargeDropZoneSize && (
+      <Caption>{overlayText}</Caption>
     );
 
     const dragOverlay =
       (active || dragging) && !error && overlay ? (
         <div className={styles.Overlay}>
           <Stack vertical spacing="tight">
             <Icon source={DragDropMajorMonotone} color="indigo" />
-            {size === 'extraLarge' && (
-              <DisplayText size="small" element="p">
-                {overlayText}
-              </DisplayText>
-            )}
-            {(size === 'medium' || size === 'large') && (
-              <Caption>{overlayText}</Caption>
-            )}
+            {dragOverlayDisplayText}
+            {dragOverlayCaption}
           </Stack>
         </div>
       ) : null;
 
+    const dragErrorOverlayDisplayText = extraLargeDropZoneSize && (
+      <DisplayText size="small" element="p">
+        {errorOverlayText}
+      </DisplayText>
+    );
+
+    const dragErrorOverlayCaption = mediumLargeDropZoneSize && (
+      <Caption>{errorOverlayText}</Caption>
+    );
+
     const dragErrorOverlay =
       dragging && error ? (
         <div className={styles.Overlay}>
           <Stack vertical spacing="tight">
             <Icon source={CircleAlertMajorMonotone} color="red" />
-            {size === 'extraLarge' && (
-              <DisplayText size="small" element="p">
-                {errorOverlayText}
-              </DisplayText>
-            )}
-            {(size === 'medium' || size === 'large') && (
-              <Caption>{errorOverlayText}</Caption>
-            )}
+            {dragErrorOverlayDisplayText}
+            {dragErrorOverlayCaption}
           </Stack>
         </div>
       ) : null;
@@ -382,6 +397,26 @@ class DropZone extends React.Component<CombinedProps, State> {
     this.fileInputNode.current.click();
   };
 
+  private setWrapperSize = (
+    size: string,
+    node: React.RefObject<HTMLDivElement>,
+  ) => {
+    let wrapperSize = Size.ExtraLarge;
+
+    if (node.current) {
+      const getSize = size === 'height' ? 'height' : 'width';
+      const wrapper = node.current.getBoundingClientRect()[getSize];
+      if (wrapper < Size.Small) {
+        wrapperSize = Size.Small;
+      } else if (wrapper < Size.Medium) {
+        wrapperSize = Size.Medium;
+      } else if (wrapper < Size.Large) {
+        wrapperSize = Size.Large;
+      }
+    }
+    return wrapperSize;
+  };
+
   private getValidatedFiles = (files: File[] | DataTransferItem[]) => {
     const {accept, allowMultiple, customValidator} = this.props;
 

src/components/DropZone/components/Context/Context.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
-import {DropZoneContext} from '../../types';
+import {DropZoneContext, Size} from '../../types';
 
 const {Provider, Consumer} = React.createContext<DropZoneContext>({
-  size: 'extraLarge',
+  width: Size.ExtraLarge,
+  height: Size.ExtraLarge,
   type: 'file',
 });