Add ability to add prefix and suffix to autocomplete options (#414)

app/assets/stylesheets/polaris_view_components/option_list.pcss

@@ -6,3 +6,10 @@ html[class~="Polaris-Summer-Editions-2023"] {
     }
   }
 }
+
+.Polaris-OptionList-Option__Layout {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}

app/components/polaris/autocomplete/option_component.html.erb

@@ -0,0 +1,5 @@
+<% if @multiple %>
+  <%= render Polaris::OptionList::CheckboxComponent.new(**system_arguments) %>
+<% else %>
+  <%= render Polaris::OptionList::RadioButtonComponent.new(**system_arguments, prefix: prefix, suffix: suffix) %>
+<% end %>

app/components/polaris/autocomplete/option_component.rb

@@ -1,5 +1,8 @@
 module Polaris
   class Autocomplete::OptionComponent < Component
+    renders_one :prefix
+    renders_one :suffix
+
     def initialize(
       label:,
       multiple: false,
@@ -23,13 +26,5 @@ def system_arguments
         prepend_option(args[:data], :action, "polaris-autocomplete#select")
       end
     end
-
-    def call
-      if @multiple
-        render OptionList::CheckboxComponent.new(**system_arguments)
-      else
-        render OptionList::RadioButtonComponent.new(**system_arguments)
-      end
-    end
   end
 end

app/components/polaris/option_list/radio_button_component.html.erb

@@ -0,0 +1,22 @@
+<% pref = prefix || @prefix %>
+<% suf = suffix || @suffix %>
+
+<%= render(Polaris::BaseComponent.new(**wrapper_arguments)) do %>
+  <%= tag.label(
+    class: "Polaris-OptionList-Option__SingleSelectOption",
+    data: {
+      polaris_option_list_target: "radioButton",
+      action: "click->polaris-option-list#update"
+    }
+  ) do %>
+    <%= tag.div(class: "Polaris-OptionList-Option__Layout", style: suf.blank? ? "justify-content: normal;" : "") do %>
+      <% if pref %>
+        <%= tag.div(pref, style: "margin-right: 5px;") %>
+      <% end %>
+      <%= tag.div { safe_join [radio_button, @label] } %>
+      <% if suf %>
+        <%= tag.div(suf, style: "margin-left: 5px;") %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>

app/components/polaris/option_list/radio_button_component.rb

@@ -1,12 +1,19 @@
 class Polaris::OptionList::RadioButtonComponent < Polaris::Component
+  renders_one :prefix
+  renders_one :suffix
+
   def initialize(
     label:,
     value:,
+    prefix: nil,
+    suffix: nil,
     wrapper_arguments: {},
     **system_arguments
   )
     @label = label
     @value = value
+    @prefix = prefix
+    @suffix = suffix
     @wrapper_arguments = wrapper_arguments
     @system_arguments = system_arguments
   end
@@ -31,23 +38,6 @@ def system_arguments
     end
   end
 
-  def call
-    render(Polaris::BaseComponent.new(**wrapper_arguments)) do
-      tag.label(
-        class: "Polaris-OptionList-Option__SingleSelectOption",
-        data: {
-          polaris_option_list_target: "radioButton",
-          action: "click->polaris-option-list#update"
-        }
-      ) do
-        safe_join [
-          radio_button,
-          @label
-        ]
-      end
-    end
-  end
-
   def radio_button
     render Polaris::BaseRadioButton.new(value: @value, **system_arguments)
   end

demo/app/previews/autocomplete_component_preview.rb

@@ -2,6 +2,9 @@ class AutocompleteComponentPreview < ViewComponent::Preview
   def basic
   end
 
+  def with_prefix_or_suffix
+  end
+
   def multiselect
   end
 

demo/app/previews/autocomplete_component_preview/with_prefix_or_suffix.html.erb

@@ -0,0 +1,43 @@
+<%= polaris_autocomplete do |autocomplete| %>
+  <% autocomplete.with_text_field(name: :tags, label: "Tags", placeholder: "Search") do |c| %>
+    <% c.with_prefix do %>
+      <%= polaris_icon(name: "SearchIcon") %>
+    <% end %>
+  <% end %>
+
+  <% autocomplete.with_option(label: "Rustic", value: "rustic") do |option| %>
+    <% option.with_prefix do %>
+      <%= polaris_thumbnail(
+        source: "https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg",
+        alt: "Black choker necklace",
+        size: :small,
+      ) %>
+    <% end %>
+  <% end %>
+  <% autocomplete.with_option(label: "Antique", value: "antique") do |option| %>
+    <% option.with_suffix do %>
+      <%= polaris_thumbnail(
+        source: "https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg",
+        alt: "Black choker necklace",
+        size: :small,
+      ) %>
+    <% end %>
+  <% end %>
+  <% autocomplete.with_option(label: "Vinyl", value: "vinyl") do |option| %>
+    <% option.with_prefix do %>
+      <%= polaris_thumbnail(
+        source: "https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg",
+        alt: "Black choker necklace",
+        size: :small,
+      ) %>
+    <% end %>
+    <% option.with_suffix do %>
+      <%= polaris_thumbnail(
+        source: "https://burst.shopifycdn.com/photos/black-leather-choker-necklace_373x@2x.jpg",
+        alt: "Black choker necklace",
+        size: :small,
+      ) %>
+    <% end %>
+  <% end %>
+<% end %>
+

test/components/polaris/option_list_component_test.rb

@@ -1,6 +1,6 @@
 require "test_helper"
 
-class ActionListComponentTest < Minitest::Test
+class OptionListComponentTest < Minitest::Test
   include Polaris::ComponentTestHelpers
 
   def test_single_choice
@@ -13,6 +13,28 @@ def test_single_choice
     assert_text "Item 2"
   end
 
+  def test_option_prefix
+    render_inline(Polaris::OptionListComponent.new) do |list|
+      list.with_radio_button(label: "Item 1", value: "item_1") do |button|
+        button.with_prefix { "Prefix" }
+      end
+    end
+
+    assert_text "Item 1"
+    assert_text "Prefix"
+  end
+
+  def test_option_suffix
+    render_inline(Polaris::OptionListComponent.new) do |list|
+      list.with_radio_button(label: "Item 1", value: "item_1") do |button|
+        button.with_suffix { "Suffix" }
+      end
+    end
+
+    assert_text "Item 1"
+    assert_text "Suffix"
+  end
+
   def test_multi_choice
     render_inline(Polaris::OptionListComponent.new) do |list|
       list.with_checkbox(label: "Item 1", value: "item_1")