Add loading content parameter (#3074)

Co-authored-by: owenniblock <owenniblock@users.noreply.github.com>
Co-authored-by: Cameron Dutro <camertron@gmail.com>
Co-authored-by: camertron <camertron@users.noreply.github.com>

.changeset/chatty-apples-hope.md

@@ -0,0 +1,6 @@
+---
+'@primer/view-components': minor
+---
+
+[SelectPanel] replace loading label using parameter loading_label
+[SelectPanel] show additional loading content with loading_description

app/components/primer/alpha/select_panel.html.erb

@@ -71,7 +71,10 @@
                     classes: "SelectPanel-loadingPanel"
                   )) do %>
                     <div data-hide-on-error>
-                      <%= render Primer::Beta::Spinner.new(aria: { label: "Loading content..." }, data: { target: "select-panel.bodySpinner" }) %>
+                      <%= render Primer::Beta::Spinner.new(aria: { label: @loading_label, describedby: @loading_description_id }, data: { target: "select-panel.bodySpinner" }) %>
+                      <% if @loading_description.present? %>
+                        <div id="<%= @loading_description_id %>" aria-hidden="true"><%= @loading_description %></div>
+                      <% end %>
                     </div>
                     <div data-show-on-error hidden data-target="select-panel.fragmentErrorElement">
                       <% if preload_error_content? %>

app/components/primer/alpha/select_panel.rb

@@ -380,6 +380,8 @@ def with_avatar_item(**system_arguments)
       # @param open_on_load [Boolean] Open the panel when the page loads.
       # @param anchor_align [Symbol] The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
       # @param anchor_side [Symbol] The side to anchor the Overlay to. <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>
+      # @param loading_label [String] The aria-label to use when the panel is loading, defaults to 'Loading content...'.
+      # @param loading_description [String] The description to use when the panel is loading. If not provided, no description will be used.
       # @param banner_scheme [Symbol] The scheme for the error banner <%= one_of(Primer::Alpha::SelectPanel::BANNER_SCHEME_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
@@ -401,6 +403,8 @@ def initialize(
         open_on_load: false,
         anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN,
         anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
+        loading_label: "Loading content...",
+        loading_description: nil,
         banner_scheme: DEFAULT_BANNER_SCHEME,
         **system_arguments
       )
@@ -423,6 +427,12 @@ def initialize(
         @dynamic_label = dynamic_label
         @dynamic_label_prefix = dynamic_label_prefix
         @dynamic_aria_label_prefix = dynamic_aria_label_prefix
+        @loading_label = loading_label
+        @loading_description_id = nil
+        if loading_description.present?
+          @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)
 
         @system_arguments = deny_tag_argument(**system_arguments)

previews/primer/alpha/select_panel_preview.rb

@@ -91,6 +91,24 @@ def remote_fetch(open_on_load: false, selected_items: "Phaser")
         render_with_template(locals: { open_on_load: open_on_load, selected_items: selected_items })
       end
 
+      # @label Custom loading label
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      # @param selected_items text
+      def custom_loading_label(open_on_load: false, selected_items: "Phaser")
+        render_with_template(locals: { open_on_load: open_on_load, selected_items: selected_items })
+      end
+
+      # @label Custom loading description
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      # @param selected_items text
+      def custom_loading_description(open_on_load: false, selected_items: "Phaser")
+        render_with_template(locals: { open_on_load: open_on_load, selected_items: selected_items })
+      end
+
       # @label Local fetch (no results)
       #
       # @snapshot interactive

previews/primer/alpha/select_panel_preview/custom_loading_description.html.erb

@@ -0,0 +1,23 @@
+<% subject_id = SecureRandom.hex %>
+
+<%# We set src and fetch_strategy: :local here to make the loading spinner and description remain visible %>
+<%= render(Primer::Alpha::SelectPanel.new(
+  id: "select-panel",
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path(
+    select_variant: :multiple,
+    selected_items: selected_items,
+  ),
+  select_variant: :multiple,
+  fetch_strategy: :local,
+  open_on_load: open_on_load,
+  loading_label: "Custom loading content... please wait...",
+  loading_description: "This is a custom loading description"
+)) do |panel| %>
+  <% panel.with_show_button { "Sci-fi equipment" } %>
+  <% panel.with_footer(show_divider: true) do %>
+    I'm a footer!
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

previews/primer/alpha/select_panel_preview/custom_loading_label.html.erb

@@ -0,0 +1,21 @@
+<% subject_id = SecureRandom.hex %>
+
+<%# We set src and fetch_strategy: :local here to make the loading spinner remain visible %>
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path(
+    select_variant: :multiple,
+    selected_items: selected_items,
+  ),
+  select_variant: :multiple,
+  fetch_strategy: :local,
+  open_on_load: open_on_load,
+  loading_label: "Custom loading content... please wait..."
+)) do |panel| %>
+  <% panel.with_show_button { "Sci-fi equipment" } %>
+  <% panel.with_footer(show_divider: true) do %>
+    I'm a footer!
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

static/arguments.json

@@ -2468,6 +2468,18 @@
         "default": "`:outside_bottom`",
         "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
       },
+      {
+        "name": "loading_label",
+        "type": "String",
+        "default": "`\"Loading content...\"`",
+        "description": "The aria-label to use when the panel is loading, defaults to 'Loading content...'."
+      },
+      {
+        "name": "loading_description",
+        "type": "String",
+        "default": "`nil`",
+        "description": "The description to use when the panel is loading. If not provided, no description will be used."
+      },
       {
         "name": "banner_scheme",
         "type": "Symbol",

static/info_arch.json

@@ -7653,6 +7653,18 @@
         "default": "`:outside_bottom`",
         "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
       },
+      {
+        "name": "loading_label",
+        "type": "String",
+        "default": "`\"Loading content...\"`",
+        "description": "The aria-label to use when the panel is loading, defaults to 'Loading content...'."
+      },
+      {
+        "name": "loading_description",
+        "type": "String",
+        "default": "`nil`",
+        "description": "The description to use when the panel is loading. If not provided, no description will be used."
+      },
       {
         "name": "banner_scheme",
         "type": "Symbol",
@@ -7901,6 +7913,32 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/select_panel/custom_loading_label",
+        "name": "custom_loading_label",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/custom_loading_description",
+        "name": "custom_loading_description",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/select_panel/local_fetch_no_results",
         "name": "local_fetch_no_results",

static/previews.json

@@ -5940,6 +5940,32 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/select_panel/custom_loading_label",
+        "name": "custom_loading_label",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/alpha/select_panel/custom_loading_description",
+        "name": "custom_loading_description",
+        "snapshot": "interactive",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/select_panel/local_fetch_no_results",
         "name": "local_fetch_no_results",

test/components/alpha/select_panel_test.rb

@@ -95,6 +95,22 @@ def test_aria_labelledby_dialog
         assert_equal dialog_labelledby_id, header_id
       end
 
+      def test_custom_loading_label
+        render_preview(:custom_loading_label)
+
+        # Check that there's a loading label, but no description
+        assert_selector "svg[aria-label='Custom loading content... please wait...']"
+        refute_selector "svg[aria-label='Custom loading content... please wait...'][aria-describedby='select-panel-loading-description']"
+      end
+
+      def test_custom_loading_description
+        render_preview(:custom_loading_description)
+
+        # Check that there's a loading label and description
+        assert_selector "svg[aria-label='Custom loading content... please wait...'][aria-describedby='select-panel-loading-description']"
+        assert_selector "div", text: "This is a custom loading description", id: "select-panel-loading-description"
+      end
+
       def test_renders_close_button
         render_preview(:default)