Add a no results item to autocomplete (#3321)

Author: kendallgassner

.changeset/thick-mayflies-do.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': minor
+---
+
+[Primer::Beta::Autocomplete] Added a new component to render inside the the Autocomplete dropdown: Primer::Beta::AutoComplete::NoResultItem. This new component can be used to display a message to indicate that there are no available results. This component is marked upas role='presentation' as the autocomplete component already uses aria-live to announce if there are no results.

app/components/primer/beta/auto_complete/item.rb

@@ -45,14 +45,13 @@ class Item < Primer::Component
         # @param description_variant [Hash] Changes the description style. Allowed values are :inline, :block
         # @param description [String] Display description text below label
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-        def initialize(value:, selected: false, disabled: false, description_variant: DEFAULT_DESCRIPTION_VARIANT, **system_arguments)
+        def initialize(value:, selected: false, disabled: false, description_variant: DEFAULT_DESCRIPTION_VARIANT, role: :option, **system_arguments)
           @description_variant = fetch_or_fallback(
             DESCRIPTION_VARIANT_OPTIONS, description_variant, DEFAULT_DESCRIPTION_VARIANT
           )
-
           @system_arguments = deny_tag_argument(**system_arguments)
           @system_arguments[:tag] = :div
-          @system_arguments[:role] = :option
+          @system_arguments[:role] = role
           @system_arguments[:"data-autocomplete-value"] = value
 
           @system_arguments[:"aria-selected"] = true if selected

app/components/primer/beta/auto_complete/no_result_item.rb

@@ -0,0 +1,21 @@
+module Primer 
+  module Beta
+    class AutoComplete
+      class NoResultItem < Item
+        def initialize(**system_arguments)
+          super(
+            role: :presentation,
+            aria: merge_aria(
+              { aria: { hidden: true } },
+              system_arguments
+            ),
+            value: "",
+            disabled: true,
+            'data-no-result-found': true,
+            **system_arguments
+          )
+        end
+      end
+    end
+  end
+end

demo/app/controllers/auto_complete_test_controller.rb

@@ -4,8 +4,7 @@
 class AutoCompleteTestController < ApplicationController
   layout false
 
-  def index
-    @fruit_list = [
+  FRUIT = [
       "Apples",
       "Apricots",
       "Avocado",
@@ -32,10 +31,21 @@ def index
       "Grapes",
       "Grapefruit",
       "Guava"
-    ].select { |fruit| fruit.downcase.include?(params["q"].downcase) }
+    ]
+
+  def index
+    @fruit_list = FRUIT.select { |fruit| fruit.downcase.include?(params["q"].downcase) }
     @visual_type = params[:visual]
     @version = params[:version]
 
     render :index, formats: [:html, :html_fragment]
   end
+
+  def no_results
+    @fruit_list = FRUIT.select { |fruit| fruit.downcase.include?(params["q"].downcase) }
+    @visual_type = params[:visual]
+    @version = params[:version]
+
+    render :no_results, formats: [:html, :html_fragment]
+  end
 end

demo/app/views/auto_complete_test/no_results.html.erb

@@ -0,0 +1,16 @@
+<% if @fruit_list.length > 0 %>
+  <% @fruit_list.each do |fruit| %>
+    <%= render(Primer::Beta::AutoComplete::Item.new(value: fruit)) do |component| %>
+    <% if @visual_type == "leading" %>
+        <% component.with_leading_visual_icon(icon: :"mark-github") %>
+    <% elsif @visual_type == "trailing" %>
+        <% component.with_trailing_visual_icon(icon: :"mark-github") %>
+    <% end %>
+    <%= fruit %>
+    <% end %>
+  <% end %>
+<% else %>
+  <%= render(Primer::Beta::AutoComplete::NoResultItem.new) do %>
+    No results!
+  <% end %>
+<% end %>

demo/config/routes.rb

@@ -18,6 +18,7 @@
     get "/healthz", to: "health#index"
 
     get "/auto_complete", to: "auto_complete_test#index", as: :autocomplete_index
+    get "/auto_complete_no_results", to: "auto_complete_test#no_results", as: :autocomplete_no_results
 
     resources :toggle_switch, only: [:create]
     resources :nav_list_items, only: [:index]