From 26ef94279d89899aaa541743bfbad8975f1e38c6 Mon Sep 17 00:00:00 2001 From: Cameron Dutro Date: Wed, 25 Sep 2024 11:33:16 -0700 Subject: [PATCH 01/10] [SelectPanel] Improve error and no item message APIs --- .../primer/alpha/select_panel.html.erb | 44 ++++---- app/components/primer/alpha/select_panel.rb | 45 ++++++-- .../banner_error_message.html.erb | 5 + .../select_panel/body_error_message.html.erb | 11 ++ .../select_panel/no_items_message.html.erb | 10 ++ .../select_panel/no_matches_message.html.erb | 10 ++ .../primer/alpha/select_panel_element.ts | 63 +++++++---- previews/primer/alpha/select_panel_preview.rb | 2 +- .../select_panel_preview/playground.html.erb | 8 ++ test/components/alpha/select_panel_test.rb | 104 +++++++++++++++--- test/system/alpha/select_panel_test.rb | 56 ++++++---- 11 files changed, 264 insertions(+), 94 deletions(-) create mode 100644 app/components/primer/alpha/select_panel/banner_error_message.html.erb create mode 100644 app/components/primer/alpha/select_panel/body_error_message.html.erb create mode 100644 app/components/primer/alpha/select_panel/no_items_message.html.erb create mode 100644 app/components/primer/alpha/select_panel/no_matches_message.html.erb diff --git a/app/components/primer/alpha/select_panel.html.erb b/app/components/primer/alpha/select_panel.html.erb index 51c85de661..36e376262e 100644 --- a/app/components/primer/alpha/select_panel.html.erb +++ b/app/components/primer/alpha/select_panel.html.erb @@ -10,15 +10,10 @@ <% end %> <% if show_filter? %> <% header.with_filter do %> - + <% unless banner_error_message? %> + <% with_banner_error_message { "Sorry, something went wrong." } %> + <% end %> + <%= banner_error_message %> <%= render(Primer::BaseComponent.new( tag: :"remote-input", aria: { owns: @body_id }, @@ -76,25 +71,32 @@ <% end %> - + <% end %> + <%= body_error_message %> <% end %> <% end %> <% else %> <%= render(@list) %> <% end %> - + <% unless no_items_message? %> + <% with_no_items_message do |message| %> + <% message.with_title { "No items found." } %> + <% end %> + <% end %> + <%= no_items_message %> + <% unless no_matches_message? %> + <% with_no_matches_message do |message| %> + <% message.with_title { "No matches found." } %> + <% message.with_description { "Try adjusting your search terms." } %> + <% end %> + <% end %> + <%= no_matches_message %> <% end %> <% end %> diff --git a/app/components/primer/alpha/select_panel.rb b/app/components/primer/alpha/select_panel.rb index d0544bd1d0..dff3e45cc1 100644 --- a/app/components/primer/alpha/select_panel.rb +++ b/app/components/primer/alpha/select_panel.rb @@ -294,6 +294,31 @@ def with_avatar_item(**system_arguments) end end + # The message rendered in place of the list of items if an error occurrs when fetching items for the first time. + class BodyErrorMessage < Primer::Component + renders_one :title + renders_one :description + end + + # The message rendered in place of the list of items if there are no items and no filter text. + class NoItemsMessage < Primer::Component + renders_one :title + renders_one :description + end + + # The message rendered in place of the list of items if there are no items that match the filter text. + class NoMatchesMessage < Primer::Component + renders_one :title + renders_one :description + end + + # The message rendered above the filter input when an error occurs when fetching items as the result of a filter operation. + class BannerErrorMessage < Primer::Component + def initialize(scheme: DEFAULT_BANNER_SCHEME) + @scheme = scheme + end + end + status :alpha DEFAULT_PRELOAD = false @@ -368,7 +393,6 @@ def with_avatar_item(**system_arguments) # @param size [Symbol] The size of the panel. <%= one_of(Primer::Alpha::Overlay::SIZE_OPTIONS) %> # @param select_variant [Symbol] <%= one_of(Primer::Alpha::SelectPanel::SELECT_VARIANT_OPTIONS) %> # @param fetch_strategy [Symbol] <%= one_of(Primer::Alpha::SelectPanel::FETCH_STRATEGIES) %> - # @param no_results_label [String] The label to display when no results are found. # @param preload [Boolean] Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened. # @param dynamic_label [Boolean] Whether or not to display the text of the currently selected item in the show button. # @param dynamic_label_prefix [String] If provided, the prefix is prepended to the dynamic label and displayed in the show button. @@ -391,7 +415,6 @@ def initialize( size: :small, select_variant: DEFAULT_SELECT_VARIANT, fetch_strategy: DEFAULT_FETCH_STRATEGY, - no_results_label: "No results found", preload: DEFAULT_PRELOAD, dynamic_label: false, dynamic_label_prefix: nil, @@ -405,7 +428,7 @@ def initialize( anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE, loading_label: "Loading content...", loading_description: nil, - banner_scheme: DEFAULT_BANNER_SCHEME, + banner_scheme: nil, **system_arguments ) raise_if_role_given!(**system_arguments) @@ -422,7 +445,6 @@ def initialize( @preload = fetch_or_fallback_boolean(preload, DEFAULT_PRELOAD) @select_variant = fetch_or_fallback(SELECT_VARIANT_OPTIONS, select_variant, DEFAULT_SELECT_VARIANT) @fetch_strategy = fetch_or_fallback(FETCH_STRATEGIES, fetch_strategy, DEFAULT_FETCH_STRATEGY) - @no_results_label = no_results_label @show_filter = show_filter @dynamic_label = dynamic_label @dynamic_label_prefix = dynamic_label_prefix @@ -433,7 +455,7 @@ def initialize( @loading_description_id = "#{@panel_id}-loading-description" end @loading_description = loading_description - @banner_scheme = fetch_or_fallback(BANNER_SCHEME_OPTIONS, banner_scheme, DEFAULT_BANNER_SCHEME) + @banner_scheme = banner_scheme @system_arguments = deny_tag_argument(**system_arguments) @system_arguments[:id] = @panel_id @@ -534,12 +556,21 @@ def initialize( # Customizable content for the error message that appears when items are fetched for the first time. This message # appears in place of the list of items. # For more information, see the [documentation regarding SelectPanel error messaging](/components/selectpanel#errorwarning). - renders_one :preload_error_content + renders_one :body_error_message, BodyErrorMessage # Customizable content for the error message that appears when items are fetched as the result of a filter # operation. This message appears as a banner above the previously fetched list of items. # For more information, see the [documentation regarding SelectPanel error messaging](/components/selectpanel#errorwarning). - renders_one :error_content + renders_one :banner_error_message, -> (scheme: nil) { + scheme ||= @banner_scheme || DEFAULT_BANNER_SCHEME + + BannerErrorMessage.new( + scheme: fetch_or_fallback(BANNER_SCHEME_OPTIONS, scheme, DEFAULT_BANNER_SCHEME) + ) + } + + renders_one :no_items_message, NoItemsMessage + renders_one :no_matches_message, NoMatchesMessage private diff --git a/app/components/primer/alpha/select_panel/banner_error_message.html.erb b/app/components/primer/alpha/select_panel/banner_error_message.html.erb new file mode 100644 index 0000000000..999eee3276 --- /dev/null +++ b/app/components/primer/alpha/select_panel/banner_error_message.html.erb @@ -0,0 +1,5 @@ + diff --git a/app/components/primer/alpha/select_panel/body_error_message.html.erb b/app/components/primer/alpha/select_panel/body_error_message.html.erb new file mode 100644 index 0000000000..2acd9456df --- /dev/null +++ b/app/components/primer/alpha/select_panel/body_error_message.html.erb @@ -0,0 +1,11 @@ + diff --git a/app/components/primer/alpha/select_panel/no_items_message.html.erb b/app/components/primer/alpha/select_panel/no_items_message.html.erb new file mode 100644 index 0000000000..aaf35d43bb --- /dev/null +++ b/app/components/primer/alpha/select_panel/no_items_message.html.erb @@ -0,0 +1,10 @@ + diff --git a/app/components/primer/alpha/select_panel/no_matches_message.html.erb b/app/components/primer/alpha/select_panel/no_matches_message.html.erb new file mode 100644 index 0000000000..a367a0e110 --- /dev/null +++ b/app/components/primer/alpha/select_panel/no_matches_message.html.erb @@ -0,0 +1,10 @@ + diff --git a/app/components/primer/alpha/select_panel_element.ts b/app/components/primer/alpha/select_panel_element.ts index af58461b53..19f7f16236 100644 --- a/app/components/primer/alpha/select_panel_element.ts +++ b/app/components/primer/alpha/select_panel_element.ts @@ -70,9 +70,10 @@ export class SelectPanelElement extends HTMLElement { @target remoteInput: HTMLElement @target list: HTMLElement @target ariaLiveContainer: HTMLElement - @target noResults: HTMLElement - @target fragmentErrorElement: HTMLElement - @target bannerErrorElement: HTMLElement + @target noItemsMessage: HTMLElement + @target noMatchesMessage: HTMLElement + @target bodyErrorMessage: HTMLElement + @target bannerErrorMessage: HTMLElement @target bodySpinner: HTMLElement filterFn?: FilterFn @@ -558,7 +559,7 @@ export class SelectPanelElement extends HTMLElement { case 'error': { this.#toggleIncludeFragmentElements(true) - const errorElement = this.fragmentErrorElement + const errorElement = this.bodyErrorMessage // check if the errorElement is visible in the dom if (errorElement && !errorElement.hasAttribute('hidden')) { announceFromElement(errorElement, {element: this.ariaLiveContainer, assertive: true}) @@ -686,9 +687,9 @@ export class SelectPanelElement extends HTMLElement { if (!this.list) return let atLeastOneResult = false + const query = this.filterInputTextField?.value ?? '' if (this.#performFilteringLocally()) { - const query = this.filterInputTextField?.value ?? '' const filter = this.filterFn || this.#defaultFilterFn for (const item of this.items) { @@ -704,7 +705,6 @@ export class SelectPanelElement extends HTMLElement { } this.#updateTabIndices() - this.#maybeAnnounce() for (const item of this.items) { const itemContent = this.#getItemContent(item) @@ -722,43 +722,53 @@ export class SelectPanelElement extends HTMLElement { this.#hasLoadedData = true - if (!this.noResults) return - if (this.#inErrorState()) { - this.noResults.setAttribute('hidden', '') + this.noMatchesMessage?.setAttribute('hidden', '') + this.noItemsMessage?.setAttribute('hidden', '') return } if (atLeastOneResult) { - this.noResults.setAttribute('hidden', '') + this.noMatchesMessage?.setAttribute('hidden', '') + this.noItemsMessage?.setAttribute('hidden', '') + // TODO can we change this to search for `@panelId-list` this.list?.querySelector('.ActionListWrap')?.removeAttribute('hidden') } else { + if (query === '') { + this.noMatchesMessage?.setAttribute('hidden', '') + this.noItemsMessage?.removeAttribute('hidden') + } else { + this.noMatchesMessage?.removeAttribute('hidden') + this.noItemsMessage?.setAttribute('hidden', '') + } + this.list?.querySelector('.ActionListWrap')?.setAttribute('hidden', '') - this.noResults.removeAttribute('hidden') } + + this.#maybeAnnounce() } #inErrorState(): boolean { - if (this.fragmentErrorElement && !this.fragmentErrorElement.hasAttribute('hidden')) { + if (this.bodyErrorMessage && !this.bodyErrorMessage.hasAttribute('hidden')) { return true } - if (!this.bannerErrorElement) return false + if (!this.bannerErrorMessage) return false - return !this.bannerErrorElement.hasAttribute('hidden') + return !this.bannerErrorMessage.hasAttribute('hidden') } #setErrorState(type: ErrorStateType) { - let errorElement = this.fragmentErrorElement + let errorElement = this.bodyErrorMessage if (type === ErrorStateType.BODY) { - this.fragmentErrorElement?.removeAttribute('hidden') - this.bannerErrorElement.setAttribute('hidden', '') + this.bodyErrorMessage?.removeAttribute('hidden') + this.bannerErrorMessage.setAttribute('hidden', '') } else { - errorElement = this.bannerErrorElement - this.bannerErrorElement?.removeAttribute('hidden') - this.fragmentErrorElement?.setAttribute('hidden', '') + errorElement = this.bannerErrorMessage + this.bannerErrorMessage?.removeAttribute('hidden') + this.bodyErrorMessage?.setAttribute('hidden', '') } // check if the errorElement is visible in the dom @@ -769,8 +779,8 @@ export class SelectPanelElement extends HTMLElement { } #clearErrorState() { - this.fragmentErrorElement?.setAttribute('hidden', '') - this.bannerErrorElement.setAttribute('hidden', '') + this.bodyErrorMessage?.setAttribute('hidden', '') + this.bannerErrorMessage.setAttribute('hidden', '') } #maybeAnnounce() { @@ -783,7 +793,14 @@ export class SelectPanelElement extends HTMLElement { element: this.ariaLiveContainer, }) } else { - const noResultsEl = this.noResults + const noResultsEl = (() => { + if (this.noMatchesMessage && !this.noMatchesMessage.hasAttribute('hidden')) { + return this.noMatchesMessage + } + + return this.noItemsMessage + })() + if (noResultsEl) { announceFromElement(noResultsEl, {element: this.ariaLiveContainer}) } diff --git a/previews/primer/alpha/select_panel_preview.rb b/previews/primer/alpha/select_panel_preview.rb index 9c060dee37..35390c9892 100644 --- a/previews/primer/alpha/select_panel_preview.rb +++ b/previews/primer/alpha/select_panel_preview.rb @@ -36,12 +36,12 @@ def playground( render_with_template(locals: { subtitle: subtitle, selected_items: selected_items, + no_results_label: no_results_label, system_arguments: { title: title, size: size, simulate_failure: simulate_failure, simulate_no_results: simulate_no_results, - no_results_label: no_results_label, dynamic_label: dynamic_label, dynamic_label_prefix: dynamic_label_prefix, dynamic_aria_label_prefix: dynamic_aria_label_prefix, diff --git a/previews/primer/alpha/select_panel_preview/playground.html.erb b/previews/primer/alpha/select_panel_preview/playground.html.erb index d7e869c049..7285e7e5a6 100644 --- a/previews/primer/alpha/select_panel_preview/playground.html.erb +++ b/previews/primer/alpha/select_panel_preview/playground.html.erb @@ -19,6 +19,14 @@ <% if subtitle %> <% panel.with_subtitle { subtitle } %> <% end %> + <% if no_results_label %> + <% panel.with_no_items_message do |message| %> + <% message.with_title { no_results_label } %> + <% end %> + <% panel.with_no_matches_message do |message| %> + <% message.with_title { no_results_label } %> + <% end %> + <% end %> <% end %> <%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %> diff --git a/test/components/alpha/select_panel_test.rb b/test/components/alpha/select_panel_test.rb index 36fb472eb2..08ee6564bd 100644 --- a/test/components/alpha/select_panel_test.rb +++ b/test/components/alpha/select_panel_test.rb @@ -54,24 +54,6 @@ def test_renders_footer assert_selector "select-panel .Overlay-footer", text: "I'm a footer!" end - def test_renders_custom_preload_error_content - render_inline(Primer::Alpha::SelectPanel.new(fetch_strategy: :eventually_local, src: "/foo")) do |panel| - panel.with_preload_error_content { "Foobar" } - end - - banner_element = page.find_css("select-panel [data-target='select-panel.fragmentErrorElement']") - assert_includes banner_element.text, "Foobar" - end - - def test_renders_custom_error_content - render_inline(Primer::Alpha::SelectPanel.new) do |panel| - panel.with_error_content { "Foobar" } - end - - banner_element = page.find_css("select-panel [data-target='select-panel.bannerErrorElement']").first - assert_includes banner_element.text, "Foobar" - end - def test_invoker_controls_dialog render_preview(:default) @@ -177,6 +159,92 @@ def test_does_not_raise_if_role_not_given_to_avatar_item_slot assert_selector(".avatar-small") end + + def test_renders_default_body_error + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) + + assert_selector "select-panel [data-target='select-panel.bodyErrorMessage']", visible: :hidden do |message_el| + message_el.assert_selector "h2", text: "Sorry, something went wrong.", visible: :hidden + message_el.assert_selector "h3", text: "Try again or if the problem persists, contact support.", visible: :hidden + end + end + + def test_renders_custom_body_error + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) do |panel| + panel.with_body_error_message do |message| + message.with_title { "Foobar" } + message.with_description { "Barbaz" } + end + end + + assert_selector "select-panel [data-target='select-panel.bodyErrorMessage']", visible: :hidden do |message_el| + message_el.assert_selector "h2", text: "Foobar", visible: :hidden + message_el.assert_selector "h3", text: "Barbaz", visible: :hidden + end + end + + def test_renders_default_banner_error + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) + + assert_selector "select-panel [data-target='select-panel.bannerErrorMessage']", visible: :hidden do |message_el| + message_el.assert_selector ".Banner", text: "Sorry, something went wrong.", visible: :hidden + end + end + + def test_renders_custom_banner_error + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) do |panel| + panel.with_banner_error_message { "Foobarbazboo" } + end + + assert_selector "select-panel [data-target='select-panel.bannerErrorMessage']", visible: :hidden do |message_el| + message_el.assert_selector ".Banner", text: "Foobarbazboo", visible: :hidden + end + end + + def test_renders_default_no_items_message + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) + + assert_selector "select-panel [data-target='select-panel.noItemsMessage']", visible: :hidden do |message_el| + message_el.assert_selector "h2", text: "No items found.", visible: :hidden + end + end + + def test_renders_custom_no_items_message + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) do |panel| + panel.with_no_items_message do |message| + message.with_title { "Foobar" } + message.with_description { "Barbaz" } + end + end + + assert_selector "select-panel [data-target='select-panel.noItemsMessage']", visible: :hidden do |message_el| + message_el.assert_selector "h2", text: "Foobar", visible: :hidden + message_el.assert_selector "h3", text: "Barbaz", visible: :hidden + end + end + + def test_renders_default_no_matches_message + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) + + assert_selector "select-panel [data-target='select-panel.noMatchesMessage']", visible: :hidden do |message_el| + message_el.assert_selector "h2", text: "No matches found.", visible: :hidden + message_el.assert_selector "h3", text: "Try adjusting your search terms.", visible: :hidden + end + end + + def test_renders_custom_no_matches_message + render_inline(Primer::Alpha::SelectPanel.new(src: "/foo")) do |panel| + panel.with_no_matches_message do |message| + message.with_title { "Foobar" } + message.with_description { "Barbaz" } + end + end + + assert_selector "select-panel [data-target='select-panel.noMatchesMessage']", visible: :hidden do |message_el| + message_el.assert_selector "h2", text: "Foobar", visible: :hidden + message_el.assert_selector "h3", text: "Barbaz", visible: :hidden + end + end end end end diff --git a/test/system/alpha/select_panel_test.rb b/test/system/alpha/select_panel_test.rb index 3114f7f441..f193f46563 100644 --- a/test/system/alpha/select_panel_test.rb +++ b/test/system/alpha/select_panel_test.rb @@ -293,6 +293,25 @@ def test_selecting_without_data_values assert_selector "[aria-selected=true]", text: "Item 2", count: 1, visible: :hidden end + def test_no_items_message + visit_preview(:local_fetch_no_results) + + click_on_invoker_button + + assert_selector "select-panel", text: "No items found." + refute_selector "select-panel", text: "No matches found." + end + + def test_no_matches_message + visit_preview(:local_fetch_no_results) + + click_on_invoker_button + filter_results(query: "foobar") + + assert_selector "select-panel", text: "No matches found." + refute_selector "select-panel", text: "No items found." + end + ########## SINGLE SELECT TESTS ############ def test_single_select_item_checked @@ -736,7 +755,7 @@ def test_banner_scheme_is_passed_to_banner_component filter_results(query: "foobar") end - assert_selector "[data-target='select-panel.bannerErrorElement'] .Banner--warning", text: "Sorry, something went wrong" + assert_selector "[data-target='select-panel.bannerErrorMessage'] .Banner--warning", text: "Sorry, something went wrong" end ########## JAVASCRIPT API TESTS ############ @@ -899,17 +918,6 @@ def test_closed_event assert page.evaluate_script("window.panelClosed") end - ########### LOCAL FETCH TESTS ############ - - def test_local_fetch_no_results - visit_preview(:local_fetch_no_results) - - click_on_invoker_button - - refute_selector "select-panel ul li" - assert_selector "select-panel", text: "No results" - end - ########## EVENTUALLY LOCAL TESTS ############ def test_ev_loc_items_load @@ -930,7 +938,7 @@ def test_ev_loc_no_results end refute_selector "select-panel ul li" - assert_selector "select-panel", text: "No results" + assert_selector "select-panel", text: "No items found." end def test_ev_loc_no_results_after_filter @@ -945,7 +953,7 @@ def test_ev_loc_no_results_after_filter filter_results(query: "foobar") refute_selector "select-panel ul li" - assert_selector "select-panel", text: "No results" + assert_selector "select-panel", text: "No matches found." end def test_ev_loc_initial_failure @@ -956,8 +964,8 @@ def test_ev_loc_initial_failure end refute_selector "select-panel ul li" - assert_selector "[data-target='select-panel.fragmentErrorElement']", text: "Sorry, something went wrong" - refute_selector "[data-target='select-panel.bannerErrorElement']" + assert_selector "[data-target='select-panel.bodyErrorMessage']", text: "Sorry, something went wrong" + refute_selector "[data-target='select-panel.bannerErrorMessage']" end def test_ev_loc_items_load_without_filter @@ -991,7 +999,7 @@ def test_remote_no_results end refute_selector "select-panel ul li" - assert_selector "select-panel", text: "No results" + assert_selector "select-panel", text: "No items found." end def test_remote_no_results_after_filter @@ -1008,7 +1016,7 @@ def test_remote_no_results_after_filter end refute_selector "select-panel ul li" - assert_selector "select-panel", text: "No results" + assert_selector "select-panel", text: "No matches found." end def test_remote_initial_failure @@ -1021,8 +1029,8 @@ def test_remote_initial_failure refute_selector "select-panel ul li" # only the error message in the list body should appear - assert_selector "[data-target='select-panel.fragmentErrorElement']", text: "Sorry, something went wrong" - refute_selector "[data-target='select-panel.bannerErrorElement']" + assert_selector "[data-target='select-panel.bodyErrorMessage']", text: "Sorry, something went wrong" + refute_selector "[data-target='select-panel.bannerErrorMessage']" end def test_remote_filter_failure @@ -1042,8 +1050,8 @@ def test_remote_filter_failure assert_selector "select-panel ul li" # only the banner-based error message should appear - assert_selector "[data-target='select-panel.bannerErrorElement']", text: "Sorry, something went wrong" - refute_selector "[data-target='select-panel.fragmentErrorElement']" + assert_selector "[data-target='select-panel.bannerErrorMessage']", text: "Sorry, something went wrong" + refute_selector "[data-target='select-panel.bodyErrorMessage']" end def test_remote_fetch_clears_input_on_close @@ -1246,7 +1254,7 @@ def test_remote_fetch_announces_items def test_ev_loc_announces_no_results visit_preview(:eventually_local_fetch_no_results) - assert_announces(message: "No results found") do + assert_announces(message: "No items found.") do wait_for_items_to_load do click_on_invoker_button end @@ -1256,7 +1264,7 @@ def test_ev_loc_announces_no_results def test_remote_fetch_announces_no_results visit_preview(:remote_fetch_no_results) - assert_announces(message: "No results found") do + assert_announces(message: "No items found.") do wait_for_items_to_load do click_on_invoker_button end From 25820b4b617f0dd9470307a351f6217fc9ad9dbc Mon Sep 17 00:00:00 2001 From: Cameron Dutro Date: Thu, 10 Oct 2024 11:41:45 -0700 Subject: [PATCH 02/10] Align to start of container --- app/components/primer/alpha/select_panel.html.erb | 2 +- .../primer/alpha/select_panel/no_matches_message.html.erb | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/components/primer/alpha/select_panel.html.erb b/app/components/primer/alpha/select_panel.html.erb index 36e376262e..e82a2997a4 100644 --- a/app/components/primer/alpha/select_panel.html.erb +++ b/app/components/primer/alpha/select_panel.html.erb @@ -60,7 +60,7 @@ mb: 2, aria: { disabled: true, busy: true }, display: :flex, - align_items: :center, + align_items: :flex_start, justify_content: :center, text_align: :center, classes: "SelectPanel-loadingPanel" diff --git a/app/components/primer/alpha/select_panel/no_matches_message.html.erb b/app/components/primer/alpha/select_panel/no_matches_message.html.erb index a367a0e110..2b19c5996b 100644 --- a/app/components/primer/alpha/select_panel/no_matches_message.html.erb +++ b/app/components/primer/alpha/select_panel/no_matches_message.html.erb @@ -1,4 +1,4 @@ -