[DropZone] Constrain drop zone height based on inherited wrapper height

[elileto]

WHY are these changes introduced?

Resolves #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?

This pull request allows the consumer to set a fixed height on a wrapping parent element so that the DropZone takes its parent's height if one is provided.

Current Behaviour: (wrapped with a div given a height of 50px)

New Behaviour: (wrapped with a div given a height of 50px)

Fixed small Height small Width:

Fixed Medium Height Medium Width:

Fixed Large Height Large Width:

Fixed ExtraLarge Height ExtraLarge Width:

Fixed Small Width ExtraLarge Height

Fixed ExtraLarge Width Small Height

(Note: there are in between size variations (ie. small width, medium height etc.) The FileUpload will always render the smaller measurement of width or height.

Default Width and Heights:

Fixed Small Height No fixed width:

Fixed Medium Height No fixed Width:

Fixed Large Height no Fixed width:

Fixed Extra Large Height no Fixed Width:

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

Code Example with small width, small height

import * as React from 'react';
import {Page, DropZone, Stack, Thumbnail, Caption} from '../src';

interface State {
  files: object;
}

export default class Playground extends React.Component<{}, State> {
  state = {
    files: [],
  };

  render() {
    const {files} = this.state;
    const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];

    const fileUpload = !files.length && <DropZone.FileUpload />;
    const uploadedFiles = files.length > 0 && (
      <Stack vertical>
        {files.map((file, index) => (
          <Stack alignment="center" key={index}>
            <Thumbnail
              size="small"
              alt={file.name}
              source={
                validImageTypes.indexOf(file.type) > 0
                  ? window.URL.createObjectURL(file)
                  : 'https://cdn.shopify.com/s/files/1/0757/9955/files/New_Post.png?12678548500147524304'
              }
            />
            <div>
              {file.name} <Caption>{file.size} bytes</Caption>
            </div>
          </Stack>
        ))}
      </Stack>
    );

    return (
      <Page title="Playground">
        <div style={{width: 50, height: 50}}>
          <DropZone
            onDrop={(files, acceptedFiles, rejectedFiles) => {
              this.setState({
                files: [...this.state.files, ...acceptedFiles],
              });
            }}
          >
            {uploadedFiles}
            {fileUpload}
          </DropZone>
        </div>
      </Page>
    );
  }
}

medium width medium height :

import * as React from 'react';
import {Page, DropZone, Stack, Thumbnail, Caption} from '../src';

interface State {
  files: object;
}

export default class Playground extends React.Component<{}, State> {
  state = {
    files: [],
  };

  render() {
    const {files} = this.state;
    const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];

    const fileUpload = !files.length && <DropZone.FileUpload />;
    const uploadedFiles = files.length > 0 && (
      <Stack vertical>
        {files.map((file, index) => (
          <Stack alignment="center" key={index}>
            <Thumbnail
              size="small"
              alt={file.name}
              source={
                validImageTypes.indexOf(file.type) > 0
                  ? window.URL.createObjectURL(file)
                  : 'https://cdn.shopify.com/s/files/1/0757/9955/files/New_Post.png?12678548500147524304'
              }
            />
            <div>
              {file.name} <Caption>{file.size} bytes</Caption>
            </div>
          </Stack>
        ))}
      </Stack>
    );

    return (
      <Page title="Playground">
        <div style={{width: 150, height: 150}}>
          <DropZone
            onDrop={(files, acceptedFiles, rejectedFiles) => {
              this.setState({
                files: [...this.state.files, ...acceptedFiles],
              });
            }}
          >
            {uploadedFiles}
            {fileUpload}
          </DropZone>
        </div>
      </Page>
    );
  }
}

Large width, large height

import * as React from 'react';
import {Page, DropZone, Stack, Thumbnail, Caption} from '../src';

interface State {
  files: object;
}

export default class Playground extends React.Component<{}, State> {
  state = {
    files: [],
  };

  render() {
    const {files} = this.state;
    const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];

    const fileUpload = !files.length && <DropZone.FileUpload />;
    const uploadedFiles = files.length > 0 && (
      <Stack vertical>
        {files.map((file, index) => (
          <Stack alignment="center" key={index}>
            <Thumbnail
              size="small"
              alt={file.name}
              source={
                validImageTypes.indexOf(file.type) > 0
                  ? window.URL.createObjectURL(file)
                  : 'https://cdn.shopify.com/s/files/1/0757/9955/files/New_Post.png?12678548500147524304'
              }
            />
            <div>
              {file.name} <Caption>{file.size} bytes</Caption>
            </div>
          </Stack>
        ))}
      </Stack>
    );

    return (
      <Page title="Playground">
        <div style={{width: 250, height: 250}}>
          <DropZone
            onDrop={(files, acceptedFiles, rejectedFiles) => {
              this.setState({
                files: [...this.state.files, ...acceptedFiles],
              });
            }}
          >
            {uploadedFiles}
            {fileUpload}
          </DropZone>
        </div>
      </Page>
    );
  }
}

ExtraLarge width ExtraLarge height

import * as React from 'react';
import {Page, DropZone, Stack, Thumbnail, Caption} from '../src';

interface State {
  files: object;
}

export default class Playground extends React.Component<{}, State> {
  state = {
    files: [],
  };

  render() {
    const {files} = this.state;
    const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];

    const fileUpload = !files.length && <DropZone.FileUpload />;
    const uploadedFiles = files.length > 0 && (
      <Stack vertical>
        {files.map((file, index) => (
          <Stack alignment="center" key={index}>
            <Thumbnail
              size="small"
              alt={file.name}
              source={
                validImageTypes.indexOf(file.type) > 0
                  ? window.URL.createObjectURL(file)
                  : 'https://cdn.shopify.com/s/files/1/0757/9955/files/New_Post.png?12678548500147524304'
              }
            />
            <div>
              {file.name} <Caption>{file.size} bytes</Caption>
            </div>
          </Stack>
        ))}
      </Stack>
    );

    return (
      <Page title="Playground">
        <div style={{width: 500, height: 500}}>
          <DropZone
            onDrop={(files, acceptedFiles, rejectedFiles) => {
              this.setState({
                files: [...this.state.files, ...acceptedFiles],
              });
            }}
          >
            {uploadedFiles}
            {fileUpload}
          </DropZone>
        </div>
      </Page>
    );
  }
}

Default width and height

import * as React from 'react';
import {Page, DropZone, Stack, Thumbnail, Caption} from '../src';

interface State {
  files: object;
}

export default class Playground extends React.Component<{}, State> {
  state = {
    files: [],
  };

  render() {
    const {files} = this.state;
    const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];

    const fileUpload = !files.length && <DropZone.FileUpload />;
    const uploadedFiles = files.length > 0 && (
      <Stack vertical>
        {files.map((file, index) => (
          <Stack alignment="center" key={index}>
            <Thumbnail
              size="small"
              alt={file.name}
              source={
                validImageTypes.indexOf(file.type) > 0
                  ? window.URL.createObjectURL(file)
                  : 'https://cdn.shopify.com/s/files/1/0757/9955/files/New_Post.png?12678548500147524304'
              }
            />
            <div>
              {file.name} <Caption>{file.size} bytes</Caption>
            </div>
          </Stack>
        ))}
      </Stack>
    );

    return (
      <Page title="Playground">
        <DropZone
          onDrop={(files, acceptedFiles, rejectedFiles) => {
            this.setState({
              files: [...this.state.files, ...acceptedFiles],
            });
          }}
        >
          {uploadedFiles}
          {fileUpload}
        </DropZone>
      </Page>
    );
  }
}

Small width, Large Height

import * as React from 'react';
import {Page, DropZone, Stack, Thumbnail, Caption} from '../src';

interface State {
  files: object;
}

export default class Playground extends React.Component<{}, State> {
  state = {
    files: [],
  };

  render() {
    const {files} = this.state;
    const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];

    const fileUpload = !files.length && <DropZone.FileUpload />;
    const uploadedFiles = files.length > 0 && (
      <Stack vertical>
        {files.map((file, index) => (
          <Stack alignment="center" key={index}>
            <Thumbnail
              size="small"
              alt={file.name}
              source={
                validImageTypes.indexOf(file.type) > 0
                  ? window.URL.createObjectURL(file)
                  : 'https://cdn.shopify.com/s/files/1/0757/9955/files/New_Post.png?12678548500147524304'
              }
            />
            <div>
              {file.name} <Caption>{file.size} bytes</Caption>
            </div>
          </Stack>
        ))}
      </Stack>
    );

    return (
      <Page title="Playground">
        <div style={{width: 50, height: 500}}>
          <DropZone
            onDrop={(files, acceptedFiles, rejectedFiles) => {
              this.setState({
                files: [...this.state.files, ...acceptedFiles],
              });
            }}
          >
            {uploadedFiles}
            {fileUpload}
          </DropZone>
        </div>
      </Page>
    );
  }
}

Large Width Small Height

import * as React from 'react';
import {Page, DropZone, Stack, Thumbnail, Caption} from '../src';

interface State {
  files: object;
}

export default class Playground extends React.Component<{}, State> {
  state = {
    files: [],
  };

  render() {
    const {files} = this.state;
    const validImageTypes = ['image/gif', 'image/jpeg', 'image/png'];

    const fileUpload = !files.length && <DropZone.FileUpload />;
    const uploadedFiles = files.length > 0 && (
      <Stack vertical>
        {files.map((file, index) => (
          <Stack alignment="center" key={index}>
            <Thumbnail
              size="small"
              alt={file.name}
              source={
                validImageTypes.indexOf(file.type) > 0
                  ? window.URL.createObjectURL(file)
                  : 'https://cdn.shopify.com/s/files/1/0757/9955/files/New_Post.png?12678548500147524304'
              }
            />
            <div>
              {file.name} <Caption>{file.size} bytes</Caption>
            </div>
          </Stack>
        ))}
      </Stack>
    );

    return (
      <Page title="Playground">
        <div style={{width: 500, height: 50}}>
          <DropZone
            onDrop={(files, acceptedFiles, rejectedFiles) => {
              this.setState({
                files: [...this.state.files, ...acceptedFiles],
              });
            }}
          >
            {uploadedFiles}
            {fileUpload}
          </DropZone>
        </div>
      </Page>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility

[AndrewMusgrave]

🎉