diff --git a/.changeset/slimy-jokes-press.md b/.changeset/slimy-jokes-press.md new file mode 100644 index 00000000000..38b437c7c93 --- /dev/null +++ b/.changeset/slimy-jokes-press.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Updated DropZone minimum size from 50px to 40px to fit within a small Thumbnail diff --git a/polaris-react/src/components/DropZone/DropZone.module.scss b/polaris-react/src/components/DropZone/DropZone.module.scss index 0eaa0f61a93..2571a30f073 100755 --- a/polaris-react/src/components/DropZone/DropZone.module.scss +++ b/polaris-react/src/components/DropZone/DropZone.module.scss @@ -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; $dropzone-stacking-order: ( outline: 29, @@ -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 { diff --git a/polaris-react/src/components/DropZone/DropZone.stories.tsx b/polaris-react/src/components/DropZone/DropZone.stories.tsx index 18aaf57b70c..3f732f4e3c7 100644 --- a/polaris-react/src/components/DropZone/DropZone.stories.tsx +++ b/polaris-react/src/components/DropZone/DropZone.stories.tsx @@ -376,37 +376,45 @@ export function SmallSized() { return ( -
- - Small sized Drop zone - -
-
+ + Small sized Drop zone (40px) + + +
-
- - Small sized Drop zone with error - - Drag file in to see error state + + Small sized Drop zone without outline + + +
+ + +
-
+ + + + Small sized Drop zone with error + + Drag file in to see error state + +
-
- - Small sized Drop zone with disabled state - -
-
+ + Small sized Drop zone with disabled state + + +
diff --git a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.module.scss b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.module.scss index 46c9f50e07a..80401aa279a 100755 --- a/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.module.scss +++ b/polaris-react/src/components/DropZone/components/FileUpload/FileUpload.module.scss @@ -14,7 +14,7 @@ } .small { - padding: var(--p-space-300); + padding: var(--p-space-200); } .FileUpload img { diff --git a/polaris.shopify.com/pages/examples/drop-zone-small-sized.tsx b/polaris.shopify.com/pages/examples/drop-zone-small-sized.tsx index bd3620e5204..37d4880af00 100644 --- a/polaris.shopify.com/pages/examples/drop-zone-small-sized.tsx +++ b/polaris.shopify.com/pages/examples/drop-zone-small-sized.tsx @@ -4,7 +4,7 @@ import {withPolarisExample} from '../../src/components/PolarisExampleWrapper'; function DropZoneExample() { return ( -
+