Merge pull request #1129 from Shopify/revert-dz-height-change

Revert "Constrain drop zone height based on inherited wrapper height"
Shopify · Mar 6, 2019 · 9b39994 · 9b39994
2 parents 2a56c49 + 8ceecd7
commit 9b39994
Show file tree

Hide file tree

Showing 8 changed files with 190 additions and 211 deletions.
diff --git a/UNRELEASED.md b/UNRELEASED.md
@@ -20,6 +20,7 @@ Use [the changelog guidelines](https://git.io/polaris-changelog-guidelines) to f
 
 ### Bug fixes
 
+- Revert a change that constrained `DropZone` height based on inherited wrapper height [#1129](https://github.com/Shopify/polaris-react/pull/1129)
 - Fixed missing rounded corners on `Tag` button states ([#1078](https://github.com/Shopify/polaris-react/pull/1078))
 - Removed reference to `window.Polaris`, which in some cases could be undefined ([#1104](https://github.com/Shopify/polaris-react/issues/1104))
 - Added padding and margin to `subdued` sections for proper spacing between the header and footer ([#1082](https://github.com/Shopify/polaris-react/pull/1082))

diff --git a/src/components/DropZone/DropZone.scss b/src/components/DropZone/DropZone.scss
@@ -15,17 +15,12 @@ $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 {
@@ -41,10 +36,6 @@ $dropzone-overlay-background-error: color('red', 'lighter');
   cursor: not-allowed;
 }
 
-.isMeasuring {
-  visibility: hidden;
-}
-
 .sizeExtraLarge {
   min-height: $dropzone-min-height-extra-large;
 }
@@ -66,9 +57,6 @@ $dropzone-overlay-background-error: color('red', 'lighter');
 
 .Container {
   flex: 1;
-  display: flex;
-  justify-content: center;
-  align-items: center;
 }
 
 .Overlay {

diff --git a/src/components/DropZone/DropZone.tsx b/src/components/DropZone/DropZone.tsx
@@ -21,23 +21,21 @@ import {FileUpload, Provider} from './components';
 import {dragDrop, alertCircle} from './icons';
 
 import {fileAccepted, getDataTransferFiles} from './utils';
-import {DropZoneContext, Size} from './types';
+import {DropZoneContext} from './types';
 
 import styles from './DropZone.scss';
 
 export type Type = 'file' | 'image';
 
 export interface State {
   id: string;
-  height: Size;
-  width: Size;
+  size: string;
   type?: string;
   error?: boolean;
   dragging: boolean;
   overlayText?: string;
   errorOverlayText?: string;
   numFiles: number;
-  measuring: boolean;
 }
 
 export interface Props {
@@ -110,6 +108,7 @@ export interface Props {
 export type CombinedProps = Props & WithAppProviderProps;
 
 const getUniqueID = createUniqueIDFactory('DropZone');
+
 export class DropZone extends React.Component<CombinedProps, State> {
   public static FileUpload: typeof FileUpload = FileUpload;
   public static defaultProps: Partial<CombinedProps> = {
@@ -171,23 +170,19 @@ export class DropZone extends React.Component<CombinedProps, State> {
     this.state = {
       type,
       id: props.id || getUniqueID(),
-      height: Size.ExtraLarge,
+      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 {
-      width,
-      height,
-      type,
+      size: this.state.size,
+      type: this.state.type || 'file',
     };
   }
 
@@ -196,11 +191,9 @@ export class DropZone extends React.Component<CombinedProps, State> {
       id,
       dragging,
       error,
-      height,
-      width,
+      size,
       overlayText,
       errorOverlayText,
-      measuring,
     } = this.state;
     const {
       label,
@@ -230,77 +223,61 @@ export class DropZone extends React.Component<CombinedProps, State> {
       styles.DropZone,
       outline && styles.hasOutline,
       (active || dragging) && styles.isDragging,
-      measuring && styles.isMeasuring,
       error && styles.hasError,
-      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>
+      size && size === 'extraLarge' && styles.sizeExtraLarge,
+      size && size === 'large' && styles.sizeLarge,
+      size && size === 'medium' && styles.sizeMedium,
+      size && size === 'small' && styles.sizeSmall,
     );
 
     const dragOverlay =
       (active || dragging) && !error && overlay ? (
         <div className={styles.Overlay}>
           <Stack vertical spacing="tight">
             <Icon source={dragDrop} color="indigo" />
-            {dragOverlayDisplayText}
-            {dragOverlayCaption}
+            {size === 'extraLarge' && (
+              <DisplayText size="small" element="p">
+                {overlayText}
+              </DisplayText>
+            )}
+            {(size === 'medium' || size === 'large') && (
+              <Caption>{overlayText}</Caption>
+            )}
           </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={alertCircle} color="red" />
-            {dragErrorOverlayDisplayText}
-            {dragErrorOverlayCaption}
+            {size === 'extraLarge' && (
+              <DisplayText size="small" element="p">
+                {errorOverlayText}
+              </DisplayText>
+            )}
+            {(size === 'medium' || size === 'large') && (
+              <Caption>{errorOverlayText}</Caption>
+            )}
           </Stack>
         </div>
       ) : null;
 
     const dropZoneMarkup = (
-      <div ref={this.setNode} className={styles.DropZoneWrapper}>
-        <div
-          className={classes}
-          aria-disabled={disabled}
-          onClick={this.handleClick}
-          onDragStart={handleDragStart}
-        >
-          {dragOverlay}
-          {dragErrorOverlay}
-          <div className={styles.Container}>{children}</div>
-          <VisuallyHidden>
-            <input {...inputAttributes} />
-          </VisuallyHidden>
-        </div>
+      <div
+        ref={this.setNode}
+        className={classes}
+        aria-disabled={disabled}
+        onClick={this.handleClick}
+        onDragStart={handleDragStart}
+      >
+        {dragOverlay}
+        {dragErrorOverlay}
+        <div className={styles.Container}>{children}</div>
+        <VisuallyHidden>
+          <input {...inputAttributes} />
+        </VisuallyHidden>
       </div>
     );
 
@@ -378,35 +355,25 @@ export class DropZone extends React.Component<CombinedProps, State> {
     this.fileInputNode.click();
   }
 
-  @autobind
-  private setWrapperSize(size: string, node: HTMLElement) {
-    let wrapperSize;
-    const getSize = size === 'height' ? 'height' : 'width';
-    const wrapper = node.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;
-    } else {
-      wrapperSize = Size.ExtraLarge;
-    }
-    return wrapperSize;
-  }
-
   @autobind
   @debounce(50, {trailing: true})
   private adjustSize() {
     if (!this.node) {
       return;
     }
 
-    const height = this.setWrapperSize('height', this.node);
-    const width = this.setWrapperSize('width', this.node);
+    let size = 'extraLarge';
+    const width = this.node.getBoundingClientRect().width;
+
+    if (width < 100) {
+      size = 'small';
+    } else if (width < 160) {
+      size = 'medium';
+    } else if (width < 300) {
+      size = 'large';
+    }
 
-    this.setState({height, width, measuring: false});
+    this.setState({size});
   }
 
   @autobind

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