Switch the filter swatches to use the swatch api (#3303)

* Switch swatch filters to use swatch API * Rename to facets__label
Shopify · Feb 28, 2024 · 88faef3 · 88faef3
1 parent bfae862
commit 88faef3
Show file tree

Hide file tree

Showing 10 changed files with 242 additions and 300 deletions.
diff --git a/assets/component-facets.css b/assets/component-facets.css
@@ -300,8 +300,10 @@
 }
 
 .facets-layout-grid {
+  --swatch-input--size: 2.4rem;
+
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   text-align: center;
   padding: 2rem 2.4rem;
   gap: 3rem 1rem;
@@ -326,7 +328,7 @@
   align-items: flex-start;
 }
 
-.facets-layout-grid .visual-display-parent {
+.facets-layout-grid .facets__label {
   display: flex;
   flex-direction: column;
   gap: 0.8rem;
@@ -340,7 +342,7 @@
   cursor: pointer;
 }
 
-.facet-checkbox {
+.facets__label {
   padding: 1rem 2rem 1rem 0;
   flex-grow: 1;
   position: relative;
@@ -361,7 +363,13 @@
   }
 }
 
-.facet-checkbox input[type='checkbox'] {
+/* Disabled state */
+.facets__label.disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.facets-layout-list input[type='checkbox'] {
   position: absolute;
   opacity: 1;
   width: 1.6rem;
@@ -384,12 +392,6 @@
   opacity: 0;
 }
 
-.facets__visual-display-wrapper {
-  display: flex;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
 .no-js .facet-checkbox input[type='checkbox'] {
   z-index: 0;
 }
@@ -423,12 +425,6 @@
   }
 }
 
-.facet-checkbox--disabled,
-.mobile-facets__label--disabled {
-  opacity: 0.4;
-  pointer-events: none;
-}
-
 .facets__price {
   display: flex;
   padding: 2rem;

diff --git a/assets/component-product-variant-picker.css b/assets/component-product-variant-picker.css
@@ -145,6 +145,8 @@ variant-selects {
 }
 
 .product-form__input--swatch .swatch-input__input + .swatch-input__label {
+  --swatch-input--size: 4.4rem;
+
   margin: 0.7rem 1.2rem 0.2rem 0;
 }
 

diff --git a/assets/component-swatch-input.css b/assets/component-swatch-input.css
@@ -1,9 +1,9 @@
 /* swatch-input lives in its own file for reusability of the swatch in other areas than the product form context */
 .swatch-input__input + .swatch-input__label {
-  --swatch-input--size: 4.4rem;
   --swatch-input--border-radius: 50%;
 
   display: inline-block;
+  max-width: 100%;
   border-radius: var(--swatch-input--border-radius);
   cursor: pointer;
   outline-offset: 0.2rem;
@@ -14,7 +14,8 @@
   --swatch-input--border-radius: 0.2rem;
 }
 
-.swatch-input__input + .swatch-input__label:hover {
+.swatch-input__input + .swatch-input__label:hover,
+.swatch-input__input:hover + .swatch-input__label {
   outline: 0.2rem solid rgba(var(--color-foreground), 0.4);
 }
 
@@ -28,6 +29,11 @@
   outline: none;
 }
 
+/* Actually disabled */
+.swatch-input__input:disabled + .swatch-input__label {
+  pointer-events: none;
+}
+
 /* Focus visible */
 .swatch-input__input:focus-visible + .swatch-input__label {
   box-shadow: 0 0 0 0.5rem rgb(var(--color-background)), 0 0 0 0.7rem rgba(var(--color-foreground), 0.55);

diff --git a/assets/component-swatch.css b/assets/component-swatch.css
@@ -5,8 +5,10 @@
 
   display: block;
   width: var(--swatch--size);
+  max-width: 100%;
   aspect-ratio: 1 / 1;
   background: var(--swatch--background);
+  background-position: var(--swatch-focal-point, initial);
   background-size: cover;
   background-origin: border-box;
   border: 0.1rem solid rgba(var(--color-foreground), 0.45);

diff --git a/assets/component-visual-display.css b/assets/component-visual-display.css
diff --git a/assets/global.js b/assets/global.js
@@ -1015,6 +1015,11 @@ class VariantSelects extends HTMLElement {
         selectedDropdownSwatchValue.style.setProperty('--swatch--background', 'unset');
         selectedDropdownSwatchValue.classList.add('swatch--unavailable');
       }
+
+      selectedDropdownSwatchValue.style.setProperty(
+        '--swatch-focal-point',
+        target.selectedOptions[0].dataset.optionSwatchFocalPoint || 'unset'
+      );
     } else if (tagName === 'INPUT' && target.type === 'radio') {
       const selectedSwatchValue = this.querySelector(`[data-selected-swatch-value="${name}"]`);
       if (selectedSwatchValue) selectedSwatchValue.innerHTML = value;