Skip to content

Commit 25109d0

Browse files
owenniblockcamertron
owenniblock
and
camertron
authoredSep 18, 2024··
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>
·
v0.38.0v0.35.0
1 parent bf44ee5 commit 25109d0

28 files changed

+174
-1
lines changed
 

‎.changeset/chatty-apples-hope.md

+6
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@primer/view-components': minor
3+
---
4+
5+
[SelectPanel] replace loading label using parameter loading_label
6+
[SelectPanel] show additional loading content with loading_description

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

+4-1
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,10 @@
7171
classes: "SelectPanel-loadingPanel"
7272
)) do %>
7373
<div data-hide-on-error>
74-
<%= render Primer::Beta::Spinner.new(aria: { label: "Loading content..." }, data: { target: "select-panel.bodySpinner" }) %>
74+
<%= render Primer::Beta::Spinner.new(aria: { label: @loading_label, describedby: @loading_description_id }, data: { target: "select-panel.bodySpinner" }) %>
75+
<% if @loading_description.present? %>
76+
<div id="<%= @loading_description_id %>" aria-hidden="true"><%= @loading_description %></div>
77+
<% end %>
7578
</div>
7679
<div data-show-on-error hidden data-target="select-panel.fragmentErrorElement">
7780
<% if preload_error_content? %>

‎app/components/primer/alpha/select_panel.rb

+10
Original file line numberDiff line numberDiff line change
@@ -380,6 +380,8 @@ def with_avatar_item(**system_arguments)
380380
# @param open_on_load [Boolean] Open the panel when the page loads.
381381
# @param anchor_align [Symbol] The anchor alignment of the Overlay. <%= one_of(Primer::Alpha::Overlay::ANCHOR_ALIGN_OPTIONS) %>
382382
# @param anchor_side [Symbol] The side to anchor the Overlay to. <%= one_of(Primer::Alpha::Overlay::ANCHOR_SIDE_OPTIONS) %>
383+
# @param loading_label [String] The aria-label to use when the panel is loading, defaults to 'Loading content...'.
384+
# @param loading_description [String] The description to use when the panel is loading. If not provided, no description will be used.
383385
# @param banner_scheme [Symbol] The scheme for the error banner <%= one_of(Primer::Alpha::SelectPanel::BANNER_SCHEME_OPTIONS) %>
384386
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
385387
def initialize(
@@ -401,6 +403,8 @@ def initialize(
401403
open_on_load: false,
402404
anchor_align: Primer::Alpha::Overlay::DEFAULT_ANCHOR_ALIGN,
403405
anchor_side: Primer::Alpha::Overlay::DEFAULT_ANCHOR_SIDE,
406+
loading_label: "Loading content...",
407+
loading_description: nil,
404408
banner_scheme: DEFAULT_BANNER_SCHEME,
405409
**system_arguments
406410
)
@@ -423,6 +427,12 @@ def initialize(
423427
@dynamic_label = dynamic_label
424428
@dynamic_label_prefix = dynamic_label_prefix
425429
@dynamic_aria_label_prefix = dynamic_aria_label_prefix
430+
@loading_label = loading_label
431+
@loading_description_id = nil
432+
if loading_description.present?
433+
@loading_description_id = "#{@panel_id}-loading-description"
434+
end
435+
@loading_description = loading_description
426436
@banner_scheme = fetch_or_fallback(BANNER_SCHEME_OPTIONS, banner_scheme, DEFAULT_BANNER_SCHEME)
427437

428438
@system_arguments = deny_tag_argument(**system_arguments)

‎previews/primer/alpha/select_panel_preview.rb

+18
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,24 @@ def remote_fetch(open_on_load: false, selected_items: "Phaser")
9191
render_with_template(locals: { open_on_load: open_on_load, selected_items: selected_items })
9292
end
9393

94+
# @label Custom loading label
95+
#
96+
# @snapshot interactive
97+
# @param open_on_load toggle
98+
# @param selected_items text
99+
def custom_loading_label(open_on_load: false, selected_items: "Phaser")
100+
render_with_template(locals: { open_on_load: open_on_load, selected_items: selected_items })
101+
end
102+
103+
# @label Custom loading description
104+
#
105+
# @snapshot interactive
106+
# @param open_on_load toggle
107+
# @param selected_items text
108+
def custom_loading_description(open_on_load: false, selected_items: "Phaser")
109+
render_with_template(locals: { open_on_load: open_on_load, selected_items: selected_items })
110+
end
111+
94112
# @label Local fetch (no results)
95113
#
96114
# @snapshot interactive

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

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<% subject_id = SecureRandom.hex %>
2+
3+
<%# We set src and fetch_strategy: :local here to make the loading spinner and description remain visible %>
4+
<%= render(Primer::Alpha::SelectPanel.new(
5+
id: "select-panel",
6+
data: { interaction_subject: subject_id },
7+
src: select_panel_items_path(
8+
select_variant: :multiple,
9+
selected_items: selected_items,
10+
),
11+
select_variant: :multiple,
12+
fetch_strategy: :local,
13+
open_on_load: open_on_load,
14+
loading_label: "Custom loading content... please wait...",
15+
loading_description: "This is a custom loading description"
16+
)) do |panel| %>
17+
<% panel.with_show_button { "Sci-fi equipment" } %>
18+
<% panel.with_footer(show_divider: true) do %>
19+
I'm a footer!
20+
<% end %>
21+
<% end %>
22+
23+
<%= 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

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<% subject_id = SecureRandom.hex %>
2+
3+
<%# We set src and fetch_strategy: :local here to make the loading spinner remain visible %>
4+
<%= render(Primer::Alpha::SelectPanel.new(
5+
data: { interaction_subject: subject_id },
6+
src: select_panel_items_path(
7+
select_variant: :multiple,
8+
selected_items: selected_items,
9+
),
10+
select_variant: :multiple,
11+
fetch_strategy: :local,
12+
open_on_load: open_on_load,
13+
loading_label: "Custom loading content... please wait..."
14+
)) do |panel| %>
15+
<% panel.with_show_button { "Sci-fi equipment" } %>
16+
<% panel.with_footer(show_divider: true) do %>
17+
I'm a footer!
18+
<% end %>
19+
<% end %>
20+
21+
<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

‎static/arguments.json

+12
Original file line numberDiff line numberDiff line change
@@ -2468,6 +2468,18 @@
24682468
"default": "`:outside_bottom`",
24692469
"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`."
24702470
},
2471+
{
2472+
"name": "loading_label",
2473+
"type": "String",
2474+
"default": "`\"Loading content...\"`",
2475+
"description": "The aria-label to use when the panel is loading, defaults to 'Loading content...'."
2476+
},
2477+
{
2478+
"name": "loading_description",
2479+
"type": "String",
2480+
"default": "`nil`",
2481+
"description": "The description to use when the panel is loading. If not provided, no description will be used."
2482+
},
24712483
{
24722484
"name": "banner_scheme",
24732485
"type": "Symbol",

‎static/info_arch.json

+38
Original file line numberDiff line numberDiff line change
@@ -7653,6 +7653,18 @@
76537653
"default": "`:outside_bottom`",
76547654
"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`."
76557655
},
7656+
{
7657+
"name": "loading_label",
7658+
"type": "String",
7659+
"default": "`\"Loading content...\"`",
7660+
"description": "The aria-label to use when the panel is loading, defaults to 'Loading content...'."
7661+
},
7662+
{
7663+
"name": "loading_description",
7664+
"type": "String",
7665+
"default": "`nil`",
7666+
"description": "The description to use when the panel is loading. If not provided, no description will be used."
7667+
},
76567668
{
76577669
"name": "banner_scheme",
76587670
"type": "Symbol",
@@ -7901,6 +7913,32 @@
79017913
]
79027914
}
79037915
},
7916+
{
7917+
"preview_path": "primer/alpha/select_panel/custom_loading_label",
7918+
"name": "custom_loading_label",
7919+
"snapshot": "interactive",
7920+
"skip_rules": {
7921+
"wont_fix": [
7922+
"region"
7923+
],
7924+
"will_fix": [
7925+
"color-contrast"
7926+
]
7927+
}
7928+
},
7929+
{
7930+
"preview_path": "primer/alpha/select_panel/custom_loading_description",
7931+
"name": "custom_loading_description",
7932+
"snapshot": "interactive",
7933+
"skip_rules": {
7934+
"wont_fix": [
7935+
"region"
7936+
],
7937+
"will_fix": [
7938+
"color-contrast"
7939+
]
7940+
}
7941+
},
79047942
{
79057943
"preview_path": "primer/alpha/select_panel/local_fetch_no_results",
79067944
"name": "local_fetch_no_results",

‎static/previews.json

+26
Original file line numberDiff line numberDiff line change
@@ -5940,6 +5940,32 @@
59405940
]
59415941
}
59425942
},
5943+
{
5944+
"preview_path": "primer/alpha/select_panel/custom_loading_label",
5945+
"name": "custom_loading_label",
5946+
"snapshot": "interactive",
5947+
"skip_rules": {
5948+
"wont_fix": [
5949+
"region"
5950+
],
5951+
"will_fix": [
5952+
"color-contrast"
5953+
]
5954+
}
5955+
},
5956+
{
5957+
"preview_path": "primer/alpha/select_panel/custom_loading_description",
5958+
"name": "custom_loading_description",
5959+
"snapshot": "interactive",
5960+
"skip_rules": {
5961+
"wont_fix": [
5962+
"region"
5963+
],
5964+
"will_fix": [
5965+
"color-contrast"
5966+
]
5967+
}
5968+
},
59435969
{
59445970
"preview_path": "primer/alpha/select_panel/local_fetch_no_results",
59455971
"name": "local_fetch_no_results",

‎test/components/alpha/select_panel_test.rb

+16
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,22 @@ def test_aria_labelledby_dialog
9595
assert_equal dialog_labelledby_id, header_id
9696
end
9797

98+
def test_custom_loading_label
99+
render_preview(:custom_loading_label)
100+
101+
# Check that there's a loading label, but no description
102+
assert_selector "svg[aria-label='Custom loading content... please wait...']"
103+
refute_selector "svg[aria-label='Custom loading content... please wait...'][aria-describedby='select-panel-loading-description']"
104+
end
105+
106+
def test_custom_loading_description
107+
render_preview(:custom_loading_description)
108+
109+
# Check that there's a loading label and description
110+
assert_selector "svg[aria-label='Custom loading content... please wait...'][aria-describedby='select-panel-loading-description']"
111+
assert_selector "div", text: "This is a custom loading description", id: "select-panel-loading-description"
112+
end
113+
98114
def test_renders_close_button
99115
render_preview(:default)
100116

0 commit comments

Comments
 (0)
Please sign in to comment.