Fix errorOverlayText prop on small screens

[dleroux]

WHY are these changes introduced?

Because we render different components to output overlayText and errorOverlayText depending on screen size, the errorOverlayText rendered the wrong text.

WHAT is this pull request doing?

Ensures the right text is rendered and tests are added to prevent this in the future.

How to 🎩

Copy-paste this code in playground/Playground.tsx:

import * as React from 'react';
import {DropZone, Stack, Thumbnail, Caption} from '@shopify/polaris';

interface State {
  dirty: boolean;
  field: string;
  saving: boolean;
}

export default class DropZoneExample extends React.Component {
  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 (
      <DropZone
        accept="image/*"
        type="image"
        onDrop={(files, acceptedFiles, rejectedFiles) => {
          this.setState({files: [...this.state.files, ...acceptedFiles]});
        }}
        errorOverlayText="Custom errorOverlayText"
      >
        {uploadedFiles}
        {fileUpload}
      </DropZone>
    );
  }
}

🎩 checklist

• Tested on mobile
• Tested on multiple browsers
• Tested for accessibility
• Updated UNRELEASED.md

[danrosenthal]

@dleroux test failures look legitimate on this one

[dleroux]

Sorry about that, I hadn't noticed the failing CI. Fixed now @danrosenthal

[chloerice]

Changes, tests, and 🎩 LGTM! 🚢

[chloerice]

😁

[dleroux]

Should have put big pants or music notes here.