Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add a no results item to autocomplete #3321

Open
wants to merge 10 commits into
base: main
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/thick-mayflies-do.md
Original file line number Diff line number Diff line change
@@ -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.
5 changes: 2 additions & 3 deletions app/components/primer/beta/auto_complete/item.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
21 changes: 21 additions & 0 deletions app/components/primer/beta/auto_complete/no_result_item.rb
Original file line number Diff line number Diff line change
@@ -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
16 changes: 13 additions & 3 deletions demo/app/controllers/auto_complete_test_controller.rb
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,7 @@
class AutoCompleteTestController < ApplicationController
layout false

def index
@fruit_list = [
FRUIT = [
"Apples",
"Apricots",
"Avocado",
Expand All @@ -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
16 changes: 16 additions & 0 deletions demo/app/views/auto_complete_test/no_results.html.erb
Original file line number Diff line number Diff line change
@@ -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 %>
1 change: 1 addition & 0 deletions demo/config/routes.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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]
Expand Down
Loading
Loading