feat(components): Update positioning of dropzone content

[taylorvnoj]

Motivations

When InputFile is within a tall container and is stretched to fill the space, the dropzone content (Button, hintText) should be centered vertically and horizontally.

Changes

Added

• new styles for dropzoneContent

Changed

Instead of the dropzone content sticking to the top of a tall InputFile, that content is now in the center.

Before

After

If the InputFile is set to size="small" (so only a button shows up), this is what we see:

Note that any InputFile not stretched within a tall container retains the same styling as before:

Testing

Pre-release showing prod example will be in separate PR tagged in slack msg

To see this in storybook, update the StatefulTemplate in docs/components/InputFile/Web.stories.tsx and see the screenshots above:

const StatefulTemplate: ComponentStory<typeof InputFile> = args => {
  const [files, setFiles] = useState<FileUpload[]>([]);

  return (
      <>
      <div style={{ height: '220px', width: '620px', display: 'flex', flexDirection: 'column' }}>
        <div style={{ flexGrow: 1, display: 'flex' }}>
        <InputFile
          {...args}
          onUploadStart={handleUpload}
          onUploadProgress={handleUpload}
          onUploadComplete={handleUpload}
          style={{ flexGrow: 1 }}
        />
        </div>
        </div>
        {files.map(file => (
          <FormatFile file={file} key={file.key} />
        ))}
      </>
  );

  function handleUpload(file: FileUpload) {
    setFiles(oldFiles => updateFiles(file, oldFiles));
  }
};

Changes can be tested via Pre-release

---

In Atlantis we use Github's built in pull request reviews.

[cloudflare-workers-and-pages[bot]]

Deploying atlantis with    Cloudflare Pages

Latest commit:	546776c
Status:	✅  Deploy successful!
Preview URL:	https://65b34d53.atlantis.pages.dev
Branch Preview URL:	https://taylor-inputfile-changes.atlantis.pages.dev

View logs

[github-actions[bot]]

Published Pre-release for 546776c29fb84ff4b93e456ef065161a2a9d8cb7 with versions:

  - @jobber/components@5.21.4-TAYLORinp.2+546776c2

To install the new version(s) for Web run:

npm install @jobber/components@5.21.4-TAYLORinp.2+546776c2