fix(storefront): BCTHEME-30 fix misaligned tooltip for required produ…

…ct option
bigcommerce · Nov 30, 2020 · a15ccc1 · a15ccc1
1 parent 4d4f9f2
commit a15ccc1
Show file tree

Hide file tree

Showing 4 changed files with 14 additions and 1 deletion.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,7 @@
 - HTML Entity displayed as is via system/error message on a Storefront. [#1888](https://github.com/bigcommerce/cornerstone/pull/1888)
 
 ## Draft
+- Fixed issue  with tooltip for unselected required product option. [#1915](https://github.com/bigcommerce/cornerstone/pull/1915)
 - Shoppers are not anchor-linked to reviews on PDPs if product description tabs are enabled. [#1883](https://github.com/bigcommerce/cornerstone/pull/1883)
 - Fixed text contrast for brand name on Cart page. [#1882](https://github.com/bigcommerce/cornerstone/pull/1882)
 - Add sufficient contrast for Upsell Banners in Cornerstone Theme according to AA Standard. [#1891](https://github.com/bigcommerce/cornerstone/pull/1891)
@@ -15,6 +16,7 @@
 - Cornerstone - Body text size above 14px is cut off on cart shipping dropdowns. [#1881](https://github.com/bigcommerce/cornerstone/pull/1881)
 - Move Tax Field under Grand Total on Cart when Tax inclusive. [#1903](https://github.com/bigcommerce/cornerstone/pull/1903)
 - Added styling config for the PayPal SPB on checkout page [#1866](https://github.com/bigcommerce/cornerstone/pull/1866)
+- Add pagination for Wishlists.[#1906](https://github.com/bigcommerce/cornerstone/pull/1906)
 
 ## 4.12.1 (11-10-2020)
 - Write a Review modal cause TypeError. [#1899](https://github.com/bigcommerce/cornerstone/pull/1899)

diff --git a/assets/scss/components/citadel/forms/_forms.scss b/assets/scss/components/citadel/forms/_forms.scss
@@ -67,6 +67,8 @@
 
 .form-checkbox,
 .form-radio {
+    bottom: 0.5rem;
+    left: 0.5rem;
 
     + .form-label {
 
@@ -86,6 +88,10 @@
     }
 }
 
+.form-option-wrapper {
+    position: relative;
+    display: inline-block;
+}
 
 // Citadel form-actions
 // -----------------------------------------------------------------------------

diff --git a/templates/components/products/options/set-rectangle.html b/templates/components/products/options/set-rectangle.html
@@ -21,6 +21,7 @@
     {{/unless}}
 
     {{#each this.values}}
+    <div class="form-option-wrapper">     
         <input
             class="form-radio"
             type="radio"
@@ -31,9 +32,11 @@
                 checked
                 data-default
             {{/if}}
-            {{#if ../required}}required{{/if}}>
+            {{#if ../required}}required{{/if}}
+        >
         <label class="form-option" for="attribute_rectangle__{{../id}}_{{id}}" data-product-attribute-value="{{id}}">
             <span class="form-option-variant">{{this.label}}</span>
         </label>
+    </div>
     {{/each}}
 </div>
diff --git a/templates/components/products/options/swatch.html b/templates/components/products/options/swatch.html
@@ -22,6 +22,7 @@
     {{/unless}}
 
     {{#each this.values}}
+    <div class="form-option-wrapper">
         <input class="form-radio"
                type="radio"
                name="attribute[{{../id}}]"
@@ -55,5 +56,6 @@
                 </span>
             {{/if}}
         </label>
+    </div>
     {{/each}}
 </div>