Skip to content

The dropzone's small size has been adjusted to match the small size of the thumbnail. #11595

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 5 commits into from
Feb 14, 2024
Merged

The dropzone's small size has been adjusted to match the small size of the thumbnail. #11595

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
fe50372
made dropzone small size the same as thumbnail size
oksanashopify Feb 13, 2024
b4f32b3
updated styles and stories for small size
oksanashopify Feb 13, 2024
9e6f5ff
Maintain 1:1 aspect ratio for small DropZone
sam-b-rose Feb 13, 2024
1cb118f
Add changeset
sam-b-rose Feb 13, 2024
b15cfe7
removed extra story and updated website example for small dropzone
oksanashopify Feb 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/slimy-jokes-press.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@shopify/polaris': patch
---

Updated DropZone minimum size from 50px to 40px to fit within a small Thumbnail
9 changes: 8 additions & 1 deletion polaris-react/src/components/DropZone/DropZone.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
$dropzone-border-style: dashed;
$dropzone-min-height-large: 120px;
$dropzone-min-height-medium: 100px;
$dropzone-min-height-small: 50px;
$dropzone-min-height-small: 40px;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

When testing admin spin, I noticed there is a content jump which is an issue. Is that something that we have to control at the consumer level or polaris dropzone? Can this be fixed at consumer or polaris for tophatting before we merge this to ensure we fix it at the source of the problem?

My.Movie.mp4

Copy link
Contributor Author

@oksanashopify oksanashopify Feb 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you @tatianau for catching this! I fixed it on consumer side by adding width and height to parent block.
How it works now:

Screen.Recording.2024-02-13.at.1.00.06.PM.mov

I still can see that images/thumbnails kinda take some time to be rendered, looking further if it's something with my implementation.

Copy link
Contributor Author

@oksanashopify oksanashopify Feb 13, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@tatianau you were right, that delay with image rendering is caused by drop zone, here is sandbox link
Video:

Screen.Recording.2024-02-13.at.2.56.50.PM.mov

I'l surface it to Veronica and Polaris team


$dropzone-stacking-order: (
outline: 29,
Expand Down Expand Up @@ -111,6 +111,13 @@ $dropzone-stacking-order: (
padding: 0;
align-items: center;
min-height: $dropzone-min-height-small;

/* This creates a square with a 1:1 aspect ratio */
&::before {
content: '';
/* stylelint-disable-next-line -- set padding top to full width of the element to maintain 1:1 aspect ratio */
padding-top: 100%;
}
}

.measuring {
Expand Down
44 changes: 26 additions & 18 deletions polaris-react/src/components/DropZone/DropZone.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -376,37 +376,45 @@ export function SmallSized() {
return (
<BlockStack gap="400">
<BlockStack gap="200">
<div>
<Text as="h2" variant="headingMd">
Small sized Drop zone
</Text>
</div>
<div style={{width: 50, height: 50}}>
<Text as="h2" variant="headingMd">
Small sized Drop zone (40px)
</Text>

<div style={{width: 40, height: 40}}>
<DropZone>
<DropZone.FileUpload />
</DropZone>
</div>
</BlockStack>
<BlockStack gap="200">
<div>
<Text as="h2" variant="headingMd">
Small sized Drop zone with error
</Text>
<Text as="p">Drag file in to see error state</Text>
<Text as="h2" variant="headingMd">
Small sized Drop zone without outline
</Text>

<div style={{width: 40, height: 40}}>
<DropZone outline={false}>
<DropZone.FileUpload />
</DropZone>
</div>
<div style={{width: 50, height: 50}}>
</BlockStack>
<BlockStack gap="200">
<Text as="h2" variant="headingMd">
Small sized Drop zone with error
</Text>
<Text as="p">Drag file in to see error state</Text>

<div style={{width: 40, height: 40}}>
<DropZone error>
<DropZone.FileUpload />
</DropZone>
</div>
</BlockStack>
<BlockStack gap="200">
<div>
<Text as="h2" variant="headingMd">
Small sized Drop zone with disabled state
</Text>
</div>
<div style={{width: 50, height: 50}}>
<Text as="h2" variant="headingMd">
Small sized Drop zone with disabled state
</Text>

<div style={{width: 40, height: 40}}>
<DropZone disabled>
<DropZone.FileUpload />
</DropZone>
Expand Down
2 changes: 1 addition & 1 deletion polaris-react/src/components/DropZone/components/FileUpload/FileUpload.module.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@
}

.small {
padding: var(--p-space-300);
padding: var(--p-space-200);
}

.FileUpload img {
Expand Down
2 changes: 1 addition & 1 deletion polaris.shopify.com/pages/examples/drop-zone-small-sized.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper';

function DropZoneExample() {
return (
<div style={{width: 50, height: 50}}>
<div style={{width: 40, height: 40}}>
<DropZone>
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Updated example on Polaris website as well.
One thing I'm not sure about - locally it shows old styles. (screenshot attached). The change you, @sam-b-rose were asking bout
seems has been not applied.
How do we update Polaris website with new version of Polaris? Is there something I should do to update it locally?
Screenshot 2024-02-13 at 3 44 46 PM

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You may need to run yarn build --filter="@shopify/polaris" before running the site.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thank you! That helped!

<DropZone.FileUpload />
</DropZone>
Expand Down