Bring back swatch-input snippet

assets/component-product-variant-picker.css

@@ -34,7 +34,7 @@ variant-selects {
   width: 1px;
 }
 
-.product-form__input input[type='radio']:not(.disabled) + label > .label-unavailable {
+.product-form__input input[type='radio']:not(.disabled):not(.visually-disabled) + label > .label-unavailable {
   display: none;
 }
 
@@ -43,7 +43,6 @@ variant-selects {
   margin-bottom: 1.6rem;
 }
 
-
 .product-form__input--dropdown .dropdown-swatch + select {
   padding-left: calc(2.4rem + var(--swatch-input--size));
 }
@@ -57,7 +56,6 @@ variant-selects {
   z-index: 1;
 }
 
-
 /* Custom styles for Pill display type */
 .product-form__input--pill input[type='radio'] + label {
   border: var(--variant-pills-border-width) solid rgba(var(--color-foreground), var(--variant-pills-border-opacity));

assets/component-swatch-input.css

@@ -24,7 +24,7 @@
 }
 
 /* Visually disabled */
-.swatch-input__input.disabled:not(:active):not(:checked) + .swatch-input__label:hover {
+.swatch-input__input.visually-disabled:not(:active):not(:checked) + .swatch-input__label:hover {
   outline: none;
 }
 
@@ -35,14 +35,14 @@
 
 /* Overrides for swatch snippet when used inside disabled swatch-input */
 .swatch-input__input:disabled + .swatch-input__label > .swatch,
-.swatch-input__input.disabled + .swatch-input__label > .swatch {
+.swatch-input__input.visually-disabled + .swatch-input__label > .swatch {
   position: relative;
   overflow: hidden;
 }
 
 /* Display white semi-transparent overlay over swatch when input is disabled */
 .swatch-input__input:disabled + .swatch-input__label > .swatch::before,
-.swatch-input__input.disabled + .swatch-input__label > .swatch::before {
+.swatch-input__input.visually-disabled + .swatch-input__label > .swatch::before {
   content: '';
   position: absolute;
   inset: 0;
@@ -51,7 +51,7 @@
 
 /* Display crossed out line over swatch when input is disabled */
 .swatch-input__input:disabled + .swatch-input__label > .swatch::after,
-.swatch-input__input.disabled + .swatch-input__label > .swatch::after {
+.swatch-input__input.visually-disabled + .swatch-input__label > .swatch::after {
   /* Diagonal of a square = length of the side * sqrt(2)  */
   --diagonal--size: calc(var(--swatch-input--size) * 1.414);
   --crossed-line--size: 0.1rem;

snippets/product-variant-options.liquid

@@ -52,50 +52,43 @@
     elsif value.swatch.color
       assign swatch_value = 'rgb(' | append: value.swatch.color.rgb | append: ')'
     else
-      assign swatch_value = nil
+      assign swatch_value = null
     endif
   -%}
 
   {%- capture input_id -%}
     {{ section.id }}-{{ option.position }}-{{ forloop.index0 -}}
   {%- endcapture -%}
 
-  {%- capture label_unavailable %}
+  {%- capture label_unavailable -%}
     <span class="visually-hidden label-unavailable">
       {{- 'products.product.variant_sold_out_or_unavailable' | t -}}
     </span>
-  {%- endcapture %}
+  {%- endcapture -%}
 
   {%- if picker_type == 'swatch' -%}
     {% liquid
       assign checked = false
-
       if option.selected_value == value
         assign checked = true
       endif
-
-      assign value_text = value | escape
     %}
-    <input
-      type="radio"
-      id="{{ input_id }}"
-      name="{{ option.name }}"
-      value="{{ value_text }}"
-      form="{{ product_form_id }}"
-      class="swatch-input__input{% if option_disabled %} disabled{% endif %}"
-      {% if checked %}
-        checked
-      {% endif %}
-    >
-    <label
-      for="{{ input_id }}"
-      title="{{ value_text }}"
-      class="swatch-input__label{% if block.settings.swatch_shape == 'square' %} swatch-input__label--square{% endif %}"
-    >
-      {% render 'swatch', swatch: value.swatch, shape: block.settings.swatch_shape %}
-      <span class="visually-hidden">{{ value_text }}</span>
+    {%- capture help_text -%}
+      <span class="visually-hidden">{{ value | escape }}</span>
       {{ label_unavailable }}
-    </label>
+    {%- endcapture -%}
+    {%
+      render 'swatch-input',
+      id: input_id,
+      name: option.name,
+      value: value | escape,
+      swatch: value.swatch,
+      product_form_id: product_form_id,
+      checked: checked,
+      visually_disabled: option_disabled,
+      shape: block.settings.swatch_shape,
+      help_text: help_text
+    %}
   {%- elsif picker_type == 'button' -%}
     <input
       type="radio"

snippets/swatch-input.liquid

@@ -0,0 +1,48 @@
+{% comment %}
+  Renders a swatch input component.
+  Accepts:
+  - id: {String} unique input id
+  - type: {String} input type. Accepts 'radio' or 'checkbox', defaults to 'radio' (optional)
+  - name: {String} input name,
+  - value: {ProductOptionValueDrop} input value
+  - swatch: {SwatchDrop} the swatch drop
+  - product_form_id: {String} id of the form associted with the input
+  - checked: {Boolean} default checked status
+  - disabled: {Boolean} default disabled status (optional)
+  - visually_disabled: {Boolean} style the swatch as disabled, but leave the input enabled (optional)
+  - shape: {String} swatch shape. Accepts 'square', defaults to circle (optional)
+  - help_text: {String} additional content to render inside the label (optional)
+
+  Usage:
+   {% render 'swatch-input',
+      id: input_id,
+      name: input_name,
+      value: input_value,
+      swatch: swatch,
+      product_form_id: product_form_id,
+      checked: checked
+    %}
+{% endcomment %}
+
+<input
+  type="{{ type | default: 'radio' }}"
+  id="{{ id }}"
+  name="{{ name }}"
+  value="{{ value }}"
+  form="{{ product_form_id }}"
+  class="swatch-input__input{% if visually_disabled %} visually-disabled{% endif %}"
+  {% if checked %}
+    checked
+  {% endif %}
+  {% if disabled %}
+    disabled
+  {% endif %}
+>
+<label
+  for="{{ id }}"
+  title="{{ value }}"
+  class="swatch-input__label{% if shape == 'square' %} swatch-input__label--square{% endif %}"
+>
+  {% render 'swatch', swatch: swatch, shape: shape %}
+  {{ help_text }}
+</label>