Fix error misalignment for Quick order list #2887
Conversation
eugenekasimov
requested review from
sofiamatulis,
metamoni and
KaichenWang
and removed request for
metamoni
There was a problem hiding this comment.
Works well!
We'll need to reduce the top padding of the error message on desktop to ensure there's no regression and make sure to test with input border/shadow global settings.
We had some feedback that the spacing between the error message and its parent UI could be improved. Can we make things a bit tighter here? The current implementation makes it hard to distinguish if it’s related to the input above or below.
https://screenshot.click/Figma-Error-tighter-spacing.png
Figma file here
Originally posted here: #2627 (comment)
| @@ -334,8 +334,13 @@ class QuickOrderList extends HTMLElement { | |||
| } | |||
There was a problem hiding this comment.
Looks good 👌 I think the spacing is a bit far now. But ill let @edmund-teh and @nicklepine take a look! https://screenshot.click/21-41-ihm3k-fnjbu.png
There was a problem hiding this comment.
Thanks, yes is there any way to reduce some of the vertical spacing to be closer to what it used to be?
reference pre-this pr: https://screenshot.click/21-13-nwrh9-7sjal.png
There was a problem hiding this comment.
Looks good 👌 I think the spacing is a bit far now. But ill let @edmund-teh and @nicklepine take a look! https://screenshot.click/21-41-ihm3k-fnjbu.png
Yeah, great call and good eye @sofiamatulis! The spacing is definitely too much/ too far.
@eugenekasimov, please take a look at @nicklepine's reference above, as well as this comment that @KaichenWang mentioned.
https://screenshot.click/Figma-Error-tighter-spacing.png
Figma here
Good eye @KaichenWang and thanks for referencing that previous comment! I've received feedback several times on how having more spacing there makes it hard to tell if the error messaging is for the variant row above or below. Let's bring things in tighter. Thanks @eugenekasimov! |
There was a problem hiding this comment.
Just checked this on mobile, tablet, and desktop! Looks great @eugenekasimov— thank you!
* Fix error misalignment * Reduce top space. Address feedback.
* Price per item, Popover and global style bugs (#2851) * Fix cart submission on Quick Order List (#2868) * replace translation string to have the translation visible (#2869) * B2B compare at price with price range (#2858) * Add sale badge and price-range for volume-pricing * Add compare_at price to PDP and Feat Prod. * Change opacity to 100% for price per item. * Update the logic * Hide price per item for unavailable variants. * Remove margin for dl. * Refactoring * Correct a mistake in liquid. * Change the JS logic back for updating price per item * Add compare at to prod card. Add style to compare at * Add missing shadow styles to inputs in Quick Order List (#2879) * Fix cart drawer for variant list and tablet spacing (#2880) * Replace generic section name with section ID. (#2884) * Fix error misalignment for Quick order list (#2887) * Fix error misalignment * Reduce top space. Address feedback. * Fix hardcoded info color (#2893) * Fix an error (#2903) * Fix social list styles loading (#2900) * v11.0.0 version bump and release notes (#2906) * Update quantity-popover.css Add new line at end of file * Revert "v11.0.0 version bump and release notes (#2906)" (#2915) This reverts commit 13dec2a. * v11.0.0 version bump and release notes (#2916) --------- Co-authored-by: Sofia Matulis <sofiamatulis@users.noreply.github.com> Co-authored-by: melissaperreault <melissa.perreault@shopify.com> Co-authored-by: Eugene Kasimov <105315663+eugenekasimov@users.noreply.github.com> Co-authored-by: Ken Meleta <30790058+kmeleta@users.noreply.github.com> Co-authored-by: Kai <KaichenWang@users.noreply.github.com>
* upstream/main: (205 commits) Fix for small screens with large fonts don't fit all content (Shopify#2946) Adjust quantity rules margin (Shopify#2948) Update Social media settings defaults to remove Shopify links (Shopify#2830) added json to barcode to pass gtin as a json string (Shopify#2804) Fixed extra margin spacing in collage section when header is empty (Shopify#2770) Track state of mouseenter event (Shopify#2934) Fix misalignment of total items in quick order list (Shopify#2923) Hide vol pricing and qty rules when variant is unavailable (Shopify#2889) Fix font family for quick order list (Shopify#2888) v11.0.0 version bump and release notes (Shopify#2916) Revert "v11.0.0 version bump and release notes (Shopify#2906)" (Shopify#2915) Update quantity-popover.css v11.0.0 version bump and release notes (Shopify#2906) Fix social list styles loading (Shopify#2900) Fix an error (Shopify#2903) Fix hardcoded info color (Shopify#2893) Fix error misalignment for Quick order list (Shopify#2887) Replace generic section name with section ID. (Shopify#2884) Fix cart drawer for variant list and tablet spacing (Shopify#2880) Add missing shadow styles to inputs in Quick Order List (Shopify#2879) ...
* Fix error misalignment * Reduce top space. Address feedback.
* Fix error misalignment * Reduce top space. Address feedback.
PR Summary:
This PR fixes error misalignment for Quick order list
Why are these changes introduced?
Fixes #2886.
What approach did you take?
Add extra to table and put error message there. Hide this
<tr>for mobile. Hide original<div>with error message for desktop and make it visible for mobile only.Other considerations
Decision log
Visual impact on existing themes
Testing steps/scenarios
Demo links
Checklist