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

oksanashopify · 2024-02-13T16:21:02Z

While working on new Variants card on PDP, I've noticed that Drop zone automatically calculates the size of the node it’s being applied and defines wether it should be Large/Medium/Small sized drop zone. The problem I faced - it sets $dropzone-min-height-small: 50px; which doesn’t work for thumbnails of size "small", as they have a height of 40px (--p-height-1000).

I considered several possible solutions, suggested in thread here:

Ship changes to Polaris DropZone and prevent automatically calculates the size of area so it can be regulated on consumer level by setting height and width of parent block. But since Polaris drop zone is being used across 37 files within the Admin and it's size not always is regulated by parent block, like for example (UploadApplePayCertificateModals, ImagePicker, etc), also even if there is already fixed height for parent block, places like this should be revised across the Admin too, because as soon as we remove min-height - some of the DropZones could be broken until we update web code. Example in sandbox: https://screenshot.click/13-45-xs5hg-mkfsk.mp4
Second possible solutions I can see here - adjust dropzone's small size to be the same as thumbnail small size, by setting it's min-height to 40px. It seems to be a change for 10 px, but now it's going to fit small sized thumbnails - Proposal Implemented in this PR

Resolves issue: https://github.com/Shopify/temp-project-mover-syfiawoo-20250331132715/issues/649

WHY are these changes introduced?

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

WHAT is this pull request doing?

How to 🎩

How it was before:

How it Looks now:

Updated Polaris website as well:

My Spin with applied snapshot: https://admin.web.oa-variant-image-dropzone-2.oksana-azarova.us.spin.dev/store/shop1/products/1

You can also test it on your own spin, just make sure admin_pdp_variants_250_ux beta is On and you created your branch from oa-variant-image-dropzone branch

Steps:

Created product with several options, that will result on grouped variants view
Expand one of the grouped rows and make sure drop zone does not expands table row and doesn't have height bigger that a small thumbnail.

🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines

🎩 checklist

Tested a snapshot
Tested on mobile
Tested on multiple browsers
Tested for accessibility
Updated the component's README.md with documentation changes
Tophatted documentation changes in the style guide

oksanashopify · 2024-02-13T17:16:40Z

/snapit

github-actions · 2024-02-13T17:20:00Z

🫰✨ Thanks @oksanashopify! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

yarn add @shopify/polaris@0.0.0-snapshot-release-20240213171838

tatianau

Found an issue with content jump

tatianau · 2024-02-13T17:57:32Z

polaris-react/src/components/DropZone/DropZone.module.scss

 $dropzone-min-height-large: 120px;
 $dropzone-min-height-medium: 100px;
-$dropzone-min-height-small: 50px;
+$dropzone-min-height-small: 40px;


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

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.

@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

polaris-react/src/components/DropZone/DropZone.stories.tsx

sam-b-rose · 2024-02-13T21:16:14Z

/snapit

github-actions · 2024-02-13T21:19:30Z

🫰✨ Thanks @sam-b-rose! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

yarn add @shopify/polaris@0.0.0-snapshot-release-20240213211805

polaris-react/src/components/DropZone/DropZone.stories.tsx

polaris-react/src/components/DropZone/components/FileUpload/FileUpload.module.scss

polaris-react/src/components/DropZone/DropZone.module.scss

oksanashopify · 2024-02-13T22:50:47Z

polaris.shopify.com/pages/examples/drop-zone-small-sized.tsx

  return (
-    <div style={{width: 50, height: 50}}>
+    <div style={{width: 40, height: 40}}>
      <DropZone>


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?

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

Thank you! That helped!

oksanashopify · 2024-02-14T15:13:42Z

/snapit

github-actions · 2024-02-14T15:17:09Z

🫰✨ Thanks @oksanashopify! Your snapshot has been published to npm.

Test the snapshot by updating your package.json with the newly published version:

yarn add @shopify/polaris@0.0.0-snapshot-release-20240214151548

@j-wanita

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @shopify/polaris-icons@8.3.0 ### Minor Changes - [#11526](#11526) [`b65f1e679`](b65f1e6) Thanks [@j-wanita](https://github.com/j-wanita)! - Add list icons for product, collection, metaobject and text - [#11531](#11531) [`78ed5fe0d`](78ed5fe) Thanks [@j-wanita](https://github.com/j-wanita)! - Updated metaobject, metaobject reference, and metaobject filled icons ## @shopify/polaris-migrator@0.28.0 ### Minor Changes - [#11596](#11596) [`c8fabc011`](c8fabc0) Thanks [@lgriffee](https://github.com/lgriffee)! - Created migration to replace deprecated `font` custom properties in polaris-react v13.0.0 ### Patch Changes - [#11603](#11603) [`2c53d6476`](2c53d64) Thanks [@lgriffee](https://github.com/lgriffee)! - Updated migration to replace deprecated `font` custom properties in polaris-react v13.0.0 ## @shopify/polaris@12.16.0 ### Minor Changes - [#11585](#11585) [`1ba3181b6`](1ba3181) Thanks [@tauthomas01](https://github.com/tauthomas01)! - Added a `disabled` prop to `ResourceItem` - [#11568](#11568) [`525194767`](5251947) Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the stacking logic of multiple Toasts to take up less screen real estate - [#11587](#11587) [`5ab254b3b`](5ab254b) Thanks [@sainihas](https://github.com/sainihas)! - Update dropzone container background color when no Outline ### Patch Changes - [#11581](#11581) [`47dac1b2e`](47dac1b) Thanks [@kyledurand](https://github.com/kyledurand)! - Fixed an issue where scrollbars weren't showing up in IndexTable on mac os when show when scrolling preference is selected - [#11560](#11560) [`0b38b6115`](0b38b61) Thanks [@apliano](https://github.com/apliano)! - Fixed `Combobox` not rendering `Popover` until the second firing of the `onChange` event - [#11584](#11584) [`23d8297ff`](23d8297) Thanks [@mrcthms](https://github.com/mrcthms)! - Updated `useIsSelectAllActionsSticky` logic to not set any sticky behaviour if we do not have access to the root element - [#11543](#11543) [`165bc6eae`](165bc6e) Thanks [@mrcthms](https://github.com/mrcthms)! - Fixed `IndexFilters` height changing when toggling between default and filtering modes - [#11563](#11563) [`3937739d2`](3937739) Thanks [@chloerice](https://github.com/chloerice)! - Fixed `FormLayout.Item` overflowing viewport at xs breakpoint when user settings enlarge text size - [#11595](#11595) [`f829ed487`](f829ed4) Thanks [@oksanashopify](https://github.com/oksanashopify)! - Updated DropZone minimum size from 50px to 40px to fit within a small Thumbnail - Updated dependencies \[[`b65f1e679`](b65f1e6), [`78ed5fe0d`](78ed5fe)]: - @shopify/polaris-icons@8.3.0 ## polaris.shopify.com@0.63.0 ### Minor Changes - [#11596](#11596) [`c8fabc011`](c8fabc0) Thanks [@lgriffee](https://github.com/lgriffee)! - Created migration to replace deprecated `font` custom properties in polaris-react v13.0.0 - [#11568](#11568) [`525194767`](5251947) Thanks [@mrcthms](https://github.com/mrcthms)! - Updated the stacking logic of multiple Toasts to take up less screen real estate ### Patch Changes - Updated dependencies \[[`b65f1e679`](b65f1e6), [`47dac1b2e`](47dac1b), [`0b38b6115`](0b38b61), [`23d8297ff`](23d8297), [`1ba3181b6`](1ba3181), [`165bc6eae`](165bc6e), [`78ed5fe0d`](78ed5fe), [`3937739d2`](3937739), [`f829ed487`](f829ed4), [`525194767`](5251947), [`5ab254b3b`](5ab254b)]: - @shopify/polaris-icons@8.3.0 - @shopify/polaris@12.16.0 Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

…f the thumbnail. (Shopify#11595) While working on new Variants card on PDP, I've noticed that [Drop zone](https://polaris.shopify.com/components/selection-and-input/drop-zone?example=drop-zone-small-sized) automatically calculates the size of the node it’s being applied and defines wether it should be Large/Medium/Small sized drop zone. The problem I faced - it sets $dropzone-min-height-small: 50px; which doesn’t work for thumbnails of size "small", as they have a height of 40px (--p-height-1000). I considered several possible solutions, suggested in thread [here](https://shopify.slack.com/archives/C4Y8N30KD/p1707762462537299): 1. Ship changes to Polaris DropZone and prevent automatically calculates the size of area so it can be regulated on consumer level by setting height and width of parent block. But since Polaris drop zone is being used across 37 files within the Admin and it's size not always is regulated by parent block, like for example ([UploadApplePayCertificateModals](https://github.com/Shopify/web/blob/4a0de2c34d7cb55ad499e8e2e60d5e463bb5c61d/app/sections/Apps/AppManage/components/AppCapabilities/components/StorefrontApiIntegration/components/IOSBuySDKCard/ApplePay/components/UploadApplePayCertificateModals/UploadApplePayCertificateModals.tsx#L164), [ImagePicker](https://github.com/Shopify/web/blob/4a0de2c34d7cb55ad499e8e2e60d5e463bb5c61d/app/sections/Checkout/CheckoutEditor/components/Workspace/components/Branding/components/BrandingSettingRenderer/components/BrandingImageSetting/components/ImagePicker/ImagePicker.tsx#L160), etc), also even if there is already fixed height for parent block, places like this should be revised across the Admin too, because as soon as we remove `min-height `- some of the DropZones could be broken until we update `web` code. Example in sandbox: https://screenshot.click/13-45-xs5hg-mkfsk.mp4 2. Second possible solutions I can see here - adjust dropzone's small size to be the same as [thumbnail](https://polaris.shopify.com/components/images-and-icons/thumbnail) small size, by setting it's min-height to 40px. It seems to be a change for 10 px, but now it's going to fit small sized thumbnails - **Proposal Implemented in this PR** Resolves issue: https://github.com/Shopify/polaris/issues/11600 ### WHY are these changes introduced? The dropzone's small size has been adjusted to match the small size of the thumbnail.  ### WHAT is this pull request doing?  ### How to 🎩 How it was before: ![image](https://github.com/Shopify/polaris/assets/104942025/04f9d9f7-5a23-4297-b92b-4469eb6bd969) How it Looks now: <img width="785" alt="image" src="https://github.com/Shopify/polaris/assets/104942025/9257d933-8eaf-4584-8b40-77e9a38bf2b8"> Updated Polaris website as well: <img width="959" alt="image" src="https://github.com/Shopify/polaris/assets/104942025/d752e831-c713-4367-ab37-022367e717c5"> My Spin with applied snapshot: https://admin.web.oa-variant-image-dropzone-2.oksana-azarova.us.spin.dev/store/shop1/products/1 <img width="1806" alt="image" src="https://github.com/Shopify/polaris/assets/104942025/b08c074d-22fd-44da-8e0c-36e2eac1494a"> You can also test it on your own spin, just make sure `admin_pdp_variants_250_ux` beta is On and you created your branch from `oa-variant-image-dropzone` branch Steps: 1. Created product with several options, that will result on grouped variants view 2. Expand one of the grouped rows and make sure drop zone does not expands table row and doesn't have height bigger that a small thumbnail. 🖥 [Local development instructions](https://github.com/Shopify/polaris/blob/main/README.md#install-dependencies-and-build-workspaces) 🗒 [General tophatting guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md) 📄 [Changelog guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog) ### 🎩 checklist - [x] Tested a [snapshot](https://github.com/Shopify/polaris/blob/main/documentation/Releasing.md#-snapshot-releases) - [x] Tested on [mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing) - [x] Tested on [multiple browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers) - [x] Tested for [accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md) - [x] Updated the component's `README.md` with documentation changes - [x] [Tophatted documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md) changes in the style guide --------- Co-authored-by: Sam Rose <11774595+sam-b-rose@users.noreply.github.com>

oksanashopify added 2 commits February 13, 2024 15:40

made dropzone small size the same as thumbnail size

fe50372

updated styles and stories for small size

b4f32b3

oksanashopify marked this pull request as draft February 13, 2024 16:21

oksanashopify self-assigned this Feb 13, 2024

oksanashopify requested review from sam-b-rose, tatianau, LA1CH3 and chloerice February 13, 2024 16:56

oksanashopify marked this pull request as ready for review February 13, 2024 17:18

oksanashopify marked this pull request as draft February 13, 2024 17:28

oksanashopify marked this pull request as ready for review February 13, 2024 17:46

tatianau reviewed Feb 13, 2024

View reviewed changes

oksanashopify requested review from a team and tatianau February 13, 2024 20:50

Maintain 1:1 aspect ratio for small DropZone

9e6f5ff

Add changeset

1cb118f

tatianau approved these changes Feb 13, 2024

View reviewed changes

oksanashopify commented Feb 13, 2024

View reviewed changes

polaris-react/src/components/DropZone/DropZone.stories.tsx Outdated Show resolved Hide resolved

sam-b-rose approved these changes Feb 13, 2024

View reviewed changes

polaris-react/src/components/DropZone/components/FileUpload/FileUpload.module.scss Show resolved Hide resolved

oksanashopify commented Feb 13, 2024

View reviewed changes

polaris-react/src/components/DropZone/DropZone.module.scss Show resolved Hide resolved

removed extra story and updated website example for small dropzone

b15cfe7

oksanashopify commented Feb 13, 2024

View reviewed changes

oksanashopify merged commit f829ed4 into main Feb 14, 2024

oksanashopify deleted the oa-change-dropzone-min-height branch February 14, 2024 15:32

shopify-github-actions-access bot mentioned this pull request Feb 14, 2024

Version Packages #11583

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

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

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

Uh oh!

oksanashopify commented Feb 13, 2024 •

edited

Loading

Uh oh!

oksanashopify commented Feb 13, 2024

Uh oh!

github-actions bot commented Feb 13, 2024

Uh oh!

tatianau left a comment

Uh oh!

tatianau Feb 13, 2024

Uh oh!

oksanashopify Feb 13, 2024 •

edited

Loading

Uh oh!

oksanashopify Feb 13, 2024 •

edited

Loading

Uh oh!

Uh oh!

sam-b-rose commented Feb 13, 2024

Uh oh!

github-actions bot commented Feb 13, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

oksanashopify Feb 13, 2024

Uh oh!

sam-b-rose Feb 14, 2024

Uh oh!

oksanashopify Feb 14, 2024

Uh oh!

oksanashopify commented Feb 14, 2024

Uh oh!

github-actions bot commented Feb 14, 2024

Uh oh!

Uh oh!

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

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

Uh oh!

Conversation

oksanashopify commented Feb 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

WHY are these changes introduced?

WHAT is this pull request doing?

How to 🎩

🎩 checklist

Uh oh!

oksanashopify commented Feb 13, 2024

Uh oh!

github-actions bot commented Feb 13, 2024

Uh oh!

tatianau left a comment

Choose a reason for hiding this comment

Uh oh!

tatianau Feb 13, 2024

Choose a reason for hiding this comment

Uh oh!

oksanashopify Feb 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

oksanashopify Feb 13, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

sam-b-rose commented Feb 13, 2024

Uh oh!

github-actions bot commented Feb 13, 2024

Uh oh!

Uh oh!

Uh oh!

Uh oh!

oksanashopify Feb 13, 2024

Choose a reason for hiding this comment

Uh oh!

sam-b-rose Feb 14, 2024

Choose a reason for hiding this comment

Uh oh!

oksanashopify Feb 14, 2024

Choose a reason for hiding this comment

Uh oh!

oksanashopify commented Feb 14, 2024

Uh oh!

github-actions bot commented Feb 14, 2024

Uh oh!

Uh oh!

oksanashopify commented Feb 13, 2024 •

edited

Loading

oksanashopify Feb 13, 2024 •

edited

Loading

oksanashopify Feb 13, 2024 •

edited

Loading