Remove thumbnail from visual representation

Shopify · Oct 18, 2023 · cdb0b85 · cdb0b85
1 parent 1dfcb44
commit cdb0b85
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 49 deletions.
diff --git a/assets/component-facets.css b/assets/component-facets.css
@@ -277,20 +277,13 @@
   grid-template-columns: repeat(3, 1fr);
   text-align: center;
   padding: 2rem 2.4rem;
+  gap: 3rem 1rem;
 }
 
 .facets-layout-grid.facets__list--vertical {
   padding: 1rem 0;
 }
 
-.facets-layout-grid.facets-layout-grid--swatch {
-  gap: 3rem 1rem;
-}
-
-.facets-layout-grid.facets-layout-grid--thumbnail {
-  gap: 1.5rem;
-}
-
 .facets__item {
   display: flex;
   align-items: center;
@@ -315,14 +308,6 @@
   font-size: 1.3rem;
 }
 
-.facets-layout-grid .visual-display-parent--thumbnail {
-  padding-bottom: 0.8rem;
-}
-
-.facets-layout-grid .visual-display--style-thumbnail {
-  --visual-display__size: 100%;
-}
-
 .facets__item label,
 .facets__item input[type='checkbox'] {
   cursor: pointer;

diff --git a/assets/component-visual-display.css b/assets/component-visual-display.css
@@ -18,48 +18,33 @@
   overflow: hidden;
 }
 
-.visual-display--style-thumbnail {
-  --visual-display__size: min(9rem, 100%);
-}
-
-.visual-display-parent .visual-display--style-swatch,
-.visual-display-parent--thumbnail {
+.visual-display-parent .visual-display--style-swatch {
   outline-offset: 0.2rem;
 }
 
-.visual-display-parent--thumbnail {
-  outline: 0.1rem solid rgba(var(--color-foreground), 0.2);
-}
-
 /* Hover, active, and focus states */
 :is(
     .visual-display-parent:hover .visual-display--style-swatch,
     .visual-display-parent.active .visual-display--style-swatch,
-    .visual-display-parent:has(:focus-visible) .visual-display--style-swatch,
-    .visual-display-parent--thumbnail:hover,
-    .visual-display-parent--thumbnail.active,
-    .visual-display-parent--thumbnail:has(:focus-visible)
+    .visual-display-parent:has(:focus-visible) .visual-display--style-swatch
   ) {
   outline-style: solid;
 }
 
 /* Active state */
-.visual-display-parent.active .visual-display--style-swatch,
-.visual-display-parent--thumbnail.active {
+.visual-display-parent.active .visual-display--style-swatch {
   outline-width: 0.1rem;
   outline-color: rgb(var(--color-foreground), 1);
 }
 
 /* Hover state */
-.visual-display-parent:hover .visual-display--style-swatch,
-.visual-display-parent--thumbnail:hover {
+.visual-display-parent:hover .visual-display--style-swatch {
   outline-width: 0.2rem;
   outline-color: rgb(var(--color-foreground), 0.4);
 }
 
 /* Focus state */
-.visual-display-parent:has(:focus-visible) .visual-display--style-swatch,
-.visual-display-parent--thumbnail:has(:focus-visible) {
+.visual-display-parent:has(:focus-visible) .visual-display--style-swatch {
   outline-width: 0.2rem;
   outline-color: rgb(var(--color-foreground), 0.4);
   box-shadow: 0 0 0 0.6rem rgb(var(--color-background)), 0 0 0 0.8rem rgba(var(--color-foreground), 0.5),
@@ -68,8 +53,7 @@
 
 /* Focus state for older browsers */
 @supports not selector(:has(a, b)) {
-  .visual-display-parent:focus-within .visual-display--style-swatch,
-  .visual-display-parent--thumbnail:focus-within {
+  .visual-display-parent:focus-within .visual-display--style-swatch {
     outline-offset: 0.2rem;
     outline: 0.2rem solid rgb(var(--color-foreground), 0.4);
     box-shadow: 0 0 0 0.6rem rgb(var(--color-background)), 0 0 0 0.8rem rgba(var(--color-foreground), 0.5),
@@ -103,7 +87,3 @@
 .visual-display--style-swatch .visual-display__image {
   object-fit: cover;
 }
-
-.visual-display--style-thumbnail .visual-display__image {
-  object-fit: contain;
-}
diff --git a/snippets/facets.liquid b/snippets/facets.liquid
@@ -116,11 +116,8 @@
                 assign total_active_values = total_active_values | plus: filter.active_values.size
                 case filter.display_style
                   when 'swatch'
-                    assign show_more_number = 15
-                  when 'thumbnail'
-                    assign show_more_number = 12
-                  when 'swatch', 'thumbnail'
                     assign has_visual_display = true
+                    assign show_more_number = 15
                     assign visual_layout_class = 'facets-layout-grid facets-layout-grid--' | append: filter.display_style
                   else
                     assign has_visual_display = false
@@ -669,7 +666,7 @@
                 {%- for filter in results.filters -%}
                   {% liquid
                     case filter.display_style
-                      when 'swatch', 'thumbnail'
+                      when 'swatch'
                         assign has_visual_display = true
                         assign visual_layout_class = 'facets-layout-grid facets-layout-grid--' | append: filter.display_style
                       else

diff --git a/snippets/visual-display.liquid b/snippets/visual-display.liquid
@@ -1,12 +1,12 @@
 {% comment %}
-  Renders a visual display element, either a swatch or a thumbnail. If wrapped in "visual-display-parent" and "visual-display-parent--swatch"/"visual-display-parent--thumbnail" classes, this will receive hover and focus states.
+  Renders a visual display element, currently just a swatch. If wrapped in "visual-display-parent" and "visual-display-parent--swatch" classes, this will receive hover and focus states.
 
   Add a class of "active" or "disabled" to the parent element to change the state of the visual display.
 
   Accepts:
   - type: {String} Can be "colors" or "image", or nothing to represent an empty state.
   - value: {Object} Will be an array of color drops, or image drop, depending on the "type"
-  - style: {String} Can be "swatch" or "thumbnail"
+  - style: {String} Can only be "swatch"
 
   Usage:
   {% render 'visual-display', type: value.display.type, value: value.display.value, style: filter.display_style %}