[FormLayout.Item] Fix inputs overflowing viewport on mobile when text is enlarged #11563
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
…ize settings are very enlarged
chloerice
force-pushed
the
fix-formlayout-item-enlarged-text-bug
branch
from
922f171 to
c8f46d3
Compare
|
/snapit |
chloerice
changed the title
|
🫰✨ Thanks @chloerice! Your snapshot has been published to npm. Test the snapshot by updating your yarn add @shopify/polaris@0.0.0-snapshot-release-20240206222833 |
fortmarek
approved these changes
Feb 12, 2024
katayounHillier
approved these changes
Feb 12, 2024
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
… is enlarged (Shopify#11563) ### WHY are these changes introduced? This PR fixes a bug found during an accessibility audit of the Shopify native mobile apps. Currently, inputs composed within a FormLayout or FormLayout.Group overflow the viewport when text is enlarged on a small screen device (replicatable in the browser, see instructions in the tophatting section). ### WHAT is this pull request doing? This PR ensures the min-width is flexible to the viewport size regardless of the pixel value of 1rem (which increases when user text/font size settings are enlarged). ### 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) - [ ] ~Updated the component's `README.md` with documentation changes~ - [ ] ~[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?
This PR fixes a bug found during an accessibility audit of the Shopify native mobile apps. Currently, inputs composed within a FormLayout or FormLayout.Group overflow the viewport when text is enlarged on a small screen device (replicatable in the browser, see instructions in the tophatting section).
WHAT is this pull request doing?
This PR ensures the min-width is flexible to the viewport size regardless of the pixel value of 1rem (which increases when user text/font size settings are enlarged).
How to 🎩
🖥 Local development instructions
🗒 General tophatting guidelines
📄 Changelog guidelines
🎩 checklist
Updated the component'sREADME.mdwith documentation changesTophatted documentation changes in the style guide