DropZone - File upload positioning issue

[dleroux]

WHY are these changes introduced?

In 3.9 this PR added the ability to specify a height to the drop zone.

When a height container does have a height, we added display: flex to ensure that the DropZone.FileUpload was vertically and horizontally aligned. This however causes issue because we really have no control what the children of that container will be (In web this breaks the ProductShow implementation)

WHAT is this pull request doing?

From the DropZone component we also don't know what the children are. It could be 'DropZone.FileUpload` or not. So the best solution I could come up with, is the add a Flex layout to the FileUpload if it's the only child. I really don't like the fact the FileUpload is responsible for it's positioning, but it's the safest approach I could think of.

**This PR is not ready to deploy. It's here for discussion. Also note I branched right from 3.9 in case we end up doing a patch release for this **

How to 🎩

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

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

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

🎩 checklist

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

[dleroux]

I see Percy spotted an issue with the "Nested Drop Zone" example.

[dleroux]

Another option discussed on slack would be to add a prop to <DropZone.FileUpload centered={false} /> set to true by default.

[AndrewMusgrave]

At a glance feels odd to me to have non-structure components have props that affect positioning. Curious what everyone else thinks about this?

[dleroux]

An option would be to leave it as is, and have the consumer override the display: flex with their own container if they need to.

[danrosenthal]

I've pushed a fix that adds a centerAlignChildren prop that defaults to true. This breaks our component model in ways, as its not typically desirable to have parents lay out their children. It's also not great to have props that default to true. In this case, since this will technically avoid a breaking change, I think it's okay.

I don't have much more time to focus on this, so if @elizabethletourneau with the support of @AndrewMusgrave could finish this off, that would be appreciated.

screenshots

<React.Fragment>
  <div style={{width: 50}}>
    <DropZone>
      <DropZone.FileUpload />
    </DropZone>
  </div>
  <div style={{width: 114}}>
    <DropZone>
      <DropZone.FileUpload />
    </DropZone>
  </div>
  <div style={{width: 50}}>
    <DropZone centerAlignChildren={false}>
      <DropZone.FileUpload />
    </DropZone>
  </div>
  <div style={{width: 114}}>
    <DropZone centerAlignChildren={false}>
      <DropZone.FileUpload />
    </DropZone>
  </div>
  <div style={{width: 500}}>
    <DropZone centerAlignChildren={false}>
      <DropZone.FileUpload />
    </DropZone>
  </div>
  <div style={{width: 500, height: 500}}>
    <DropZone centerAlignChildren={false}>
      <DropZone.FileUpload />
    </DropZone>
  </div>
</React.Fragment>

[danrosenthal]

Closing in favor of #1129