Update dropzone container background color #11587
Merged
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
sainihas
force-pushed
the
fix/dropzone-background
branch
2 times, most recently
from
9648907 to
5393128
Compare
alex-page
approved these changes
Feb 13, 2024
sainihas
force-pushed
the
fix/dropzone-background
branch
from
5393128 to
a881c1d
Compare
alex-page
reviewed
Feb 13, 2024
sainihas
force-pushed
the
fix/dropzone-background
branch
3 times, most recently
from
c7c3183 to
d40355b
Compare
heyjoethomas
approved these changes
Feb 13, 2024
sainihas
force-pushed
the
fix/dropzone-background
branch
from
d40355b to
8bfc1f0
Compare
Merged
sam-b-rose
pushed a commit
that referenced
this pull request
Feb 15, 2024
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>
AnnaCheba
pushed a commit
to AnnaCheba/polaris
that referenced
this pull request
Apr 22, 2024
### WHY are these changes introduced? When the DropZone component is used without an outline etc.., it defaults to a faint background color (`--p-color-input-bg-surface`). This works well when there are no files and the placeholder occupies the same space as the DropZone. However, when files are present, the DropZone and placeholder may not be the same size. This discrepancy results in the faint background color becoming visible, leading to the UI looking off. <img width="1800" alt="Screenshot 2024-02-12 at 9 49 09 PM" src="https://github.com/Shopify/polaris/assets/41344212/c2c53c82-63c5-4c68-9ced-5175f333f4fa"> ### WHAT is this pull request doing? This pull request primarily focuses on improving the UI of the `DropZone` component. The changes include a new background color for the dropzone container and the addition of a `noOutline` class to handle the new styling. * [`polaris-react/src/components/DropZone/DropZone.module.scss`](diffhunk://#diff-9e3485b7ce88cb47f090c0169f9c2767f4feb0a882d1571e62278f12c469722fR62-R65): Added a new `noOutline` class which sets the background color to `transparent`. * [`polaris-react/src/components/DropZone/DropZone.tsx`](diffhunk://#diff-1ada6dc0086b97d3a426d17fd4df3681b33b21f1a9af9a096702e72d10f4a60cR329): Modified the `classNames` function in `DropZone` to include the new `noOutline` class when `outline` is `false`. ### How to 🎩 🖥 [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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
WHY are these changes introduced?
When the DropZone component is used without an outline etc.., it defaults to a faint background color (
--p-color-input-bg-surface). This works well when there are no files and the placeholder occupies the same space as the DropZone. However, when files are present, the DropZone and placeholder may not be the same size. This discrepancy results in the faint background color becoming visible, leading to the UI looking off.WHAT is this pull request doing?
This pull request primarily focuses on improving the UI of the
DropZonecomponent. The changes include a new background color for the dropzone container and the addition of anoOutlineclass to handle the new styling.polaris-react/src/components/DropZone/DropZone.module.scss: Added a newnoOutlineclass which sets the background color totransparent.polaris-react/src/components/DropZone/DropZone.tsx: Modified theclassNamesfunction inDropZoneto include the newnoOutlineclass whenoutlineisfalse.How to 🎩
🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines
🎩 checklist
README.mdwith documentation changes