Popover Quick Add Bulk enhancements (Shopify#3403)

Misha-Puff · Jul 1, 2024 · 233b224 · 233b224
1 parent 87d9b94
commit 233b224
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 6 deletions.
diff --git a/assets/component-card.css b/assets/component-card.css
@@ -148,12 +148,14 @@
   color: rgba(var(--color-foreground), 0.75);
 }
 
-.card__information-volume-pricing-note--button {
+.card__information-volume-pricing-note--button, .card__information-volume-pricing-note--button.quantity-popover__info-button--icon-with-label {
   position: relative;
   z-index: 1;
   cursor: pointer;
   padding: 0;
   margin: 0;
+  text-align: var(--text-alignment);
+  min-width: auto;
 }
 
 .card__information-volume-pricing-note--button:hover {
@@ -163,9 +165,53 @@
 .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
   transform: initial;
   top: auto;
-  bottom: 3.5rem;
+  bottom: 4rem;
   max-width: 20rem;
-  width: 80%;
+  width: calc(95% + 2rem);
+}
+
+.card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info span:first-of-type {
+  padding-right: 0.3rem;
+}
+
+.card__information-volume-pricing-note--button-right + .global-settings-popup.quantity-popover__info {
+  right: 0;
+  left: auto;
+}
+
+.card__information-volume-pricing-note--button-center + .global-settings-popup.quantity-popover__info {
+  left: 50%;
+  transform: translate(-50%);
+}
+
+@media screen and (min-width: 990px) {
+  .grid--6-col-desktop .card__content quick-add-bulk .quantity {
+    width: auto;
+  }
+
+  .grid--6-col-desktop .card__content quick-add-bulk .quantity__button {
+    width: calc(3rem / var(--font-body-scale));
+  }
+
+  .grid--6-col-desktop .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
+    left: 50%;
+    transform: translate(-50%);
+    width: calc(100% + var(--border-width) + 3.5rem);
+  }
+}
+
+@media screen and (max-width: 749px) {
+  .grid--2-col-tablet-down .card__content quick-add-bulk .quantity__button {
+    width: calc(3.5rem / var(--font-body-scale));
+  }
+
+  .grid--2-col-tablet-down .card__information-volume-pricing-note--button + .global-settings-popup.quantity-popover__info {
+    width: calc(100% + var(--border-width) + 1rem);
+  }
+
+  .grid--2-col-tablet-down .card__content quick-add-bulk .quantity {
+    width: auto;
+  }
 }
 
 .card-information quantity-popover volume-pricing {

diff --git a/assets/quick-add.css b/assets/quick-add.css
@@ -362,7 +362,7 @@ quick-add-bulk quantity-input {
 }
 
 quick-add-bulk .quantity__input {
-  width: calc(6.5rem / var(--font-body-scale));
+  max-width: calc(6.5rem / var(--font-body-scale));
   flex-grow: 0;
 }
 

diff --git a/snippets/card-product.liquid b/snippets/card-product.liquid
@@ -213,10 +213,10 @@
                   endif
                 %}
                 <quantity-popover>
-                  <button class="card__information-volume-pricing-note card__information-volume-pricing-note--button quantity-popover__info-button--icon-only button button button--tertiary medium-hide small-hide">
+                  <button class="card__information-volume-pricing-note card__information-volume-pricing-note--button card__information-volume-pricing-note--button-{{ settings.card_text_alignment }} quantity-popover__info-button--icon-only button button button--tertiary medium-hide small-hide">
                     <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
                   </button>
-                  <button class="card__information-volume-pricing-note card__information-volume-pricing-note--button quantity-popover__info-button--icon-with-label button button--tertiary large-up-hide">
+                  <button class="card__information-volume-pricing-note card__information-volume-pricing-note--button card__information-volume-pricing-note--button-{{ settings.card_text_alignment }} quantity-popover__info-button--icon-with-label button button--tertiary large-up-hide">
                     <span class="caption">{{ 'products.product.volume_pricing.note' | t }}</span>
                   </button>
               {% else %}