primer_view_components 0.27.0 → 0.29.0

data/app/components/primer/aria_live.d.ts

@@ -0,0 +1,8 @@
+export declare function announceFromElement(el: HTMLElement, options?: {
+    assertive?: boolean;
+    element?: HTMLElement;
+}): void;
+export declare function announce(message: string, options?: {
+    assertive?: boolean;
+    element?: HTMLElement;
+}): void;

data/app/components/primer/aria_live.js

@@ -0,0 +1,38 @@
+const safeDocument = typeof document === 'undefined' ? undefined : document;
+// Announce an element's text to the screen reader.
+export function announceFromElement(el, options) {
+    announce(getTextContent(el), options);
+}
+// Announce message update to screen reader.
+// Note: Use caution when using this function while a dialog is active.
+// If the message is updated while the dialog is open, the screen reader may not announce the live region.
+export function announce(message, options) {
+    const { assertive, element } = options ?? {};
+    setContainerContent(message, assertive, element);
+}
+// Set aria-live container to message.
+function setContainerContent(message, assertive, element) {
+    const getQuerySelector = () => {
+        return assertive ? '#js-global-screen-reader-notice-assertive' : '#js-global-screen-reader-notice';
+    };
+    const container = element ?? safeDocument?.querySelector(getQuerySelector());
+    if (!container)
+        return;
+    if (container.textContent === message) {
+        /* This is a hack due to the way the aria live API works.
+        A screen reader will not read a live region again
+        if the text is the same. Adding a space character tells
+        the browser that the live region has updated,
+        which will cause it to read again, but with no audible difference. */
+        container.textContent = `${message}\u00A0`;
+    }
+    else {
+        container.textContent = message;
+    }
+}
+// Gets the trimmed text content of an element.
+function getTextContent(el) {
+    // innerText does not contain hidden text
+    /* eslint-disable-next-line github/no-innerText */
+    return (el.getAttribute('aria-label') || el.innerText || '').trim();
+}

data/app/components/primer/aria_live.ts

@@ -0,0 +1,41 @@
+const safeDocument = typeof document === 'undefined' ? undefined : document
+
+// Announce an element's text to the screen reader.
+export function announceFromElement(el: HTMLElement, options?: {assertive?: boolean; element?: HTMLElement}) {
+  announce(getTextContent(el), options)
+}
+
+// Announce message update to screen reader.
+// Note: Use caution when using this function while a dialog is active.
+// If the message is updated while the dialog is open, the screen reader may not announce the live region.
+export function announce(message: string, options?: {assertive?: boolean; element?: HTMLElement}) {
+  const {assertive, element} = options ?? {}
+
+  setContainerContent(message, assertive, element)
+}
+
+// Set aria-live container to message.
+function setContainerContent(message: string, assertive?: boolean, element?: HTMLElement) {
+  const getQuerySelector = () => {
+    return assertive ? '#js-global-screen-reader-notice-assertive' : '#js-global-screen-reader-notice'
+  }
+  const container = element ?? safeDocument?.querySelector(getQuerySelector())
+  if (!container) return
+  if (container.textContent === message) {
+    /* This is a hack due to the way the aria live API works.
+    A screen reader will not read a live region again
+    if the text is the same. Adding a space character tells
+    the browser that the live region has updated,
+    which will cause it to read again, but with no audible difference. */
+    container.textContent = `${message}\u00A0`
+  } else {
+    container.textContent = message
+  }
+}
+
+// Gets the trimmed text content of an element.
+function getTextContent(el: HTMLElement): string {
+  // innerText does not contain hidden text
+  /* eslint-disable-next-line github/no-innerText */
+  return (el.getAttribute('aria-label') || el.innerText || '').trim()
+}

data/app/components/primer/base_component.rb

@@ -3,7 +3,7 @@
 require "primer/classify"
 
 module Primer
-  # All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) used by [Primer React](https://primer.style/components/system-props).
+  # All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) previously used by [Primer React](https://primer.style/guides/react/system-props).
   #
   # Under the hood, system arguments are [mapped](https://github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).
   #

data/app/components/primer/primer.d.ts

@@ -1,4 +1,5 @@
 import '@github/include-fragment-element';
+import '@github/remote-input-element';
 import './alpha/action_list';
 import './alpha/action_bar_element';
 import './alpha/dropdown';
@@ -6,6 +7,8 @@ import './anchored_position';
 import './dialog_helper';
 import './focus_group';
 import './scrollable_region';
+import './aria_live';
+import './shared_events';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
@@ -22,3 +25,4 @@ import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';
 import '../../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
+import './alpha/select_panel_element';

data/app/components/primer/primer.js

@@ -1,4 +1,5 @@
 import '@github/include-fragment-element';
+import '@github/remote-input-element';
 import './alpha/action_list';
 import './alpha/action_bar_element';
 import './alpha/dropdown';
@@ -6,6 +7,8 @@ import './anchored_position';
 import './dialog_helper';
 import './focus_group';
 import './scrollable_region';
+import './aria_live';
+import './shared_events';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
 import './beta/nav_list';
@@ -22,3 +25,4 @@ import '../../../lib/primer/forms/primer_multi_input';
 import '../../../lib/primer/forms/primer_text_field';
 import '../../../lib/primer/forms/toggle_switch_input';
 import './alpha/action_menu/action_menu_element';
+import './alpha/select_panel_element';

data/app/components/primer/primer.ts

@@ -1,4 +1,5 @@
 import '@github/include-fragment-element'
+import '@github/remote-input-element'
 import './alpha/action_list'
 import './alpha/action_bar_element'
 import './alpha/dropdown'
@@ -6,6 +7,8 @@ import './anchored_position'
 import './dialog_helper'
 import './focus_group'
 import './scrollable_region'
+import './aria_live'
+import './shared_events'
 import './alpha/image_crop'
 import './alpha/modal_dialog'
 import './beta/nav_list'
@@ -22,3 +25,4 @@ import '../../../lib/primer/forms/primer_multi_input'
 import '../../../lib/primer/forms/primer_text_field'
 import '../../../lib/primer/forms/toggle_switch_input'
 import './alpha/action_menu/action_menu_element'
+import './alpha/select_panel_element'

data/app/components/primer/shared_events.d.ts

@@ -0,0 +1,9 @@
+export type ItemActivatedEvent = {
+    item: Element;
+    checked: boolean;
+};
+declare global {
+    interface HTMLElementEventMap {
+        itemActivated: CustomEvent<ItemActivatedEvent>;
+    }
+}

data/app/components/primer/shared_events.js

@@ -0,0 +1 @@
+export {};

data/app/components/primer/shared_events.ts

@@ -0,0 +1,10 @@
+export type ItemActivatedEvent = {
+  item: Element
+  checked: boolean
+}
+
+declare global {
+  interface HTMLElementEventMap {
+    itemActivated: CustomEvent<ItemActivatedEvent>
+  }
+}

data/app/forms/example_toggle_switch_form/example_field_caption.html.erb

@@ -1 +1 @@
-My <em>favorite</em> caption.
+My <em>favorite</em> caption lorem ipsum dolor sit amet.

data/lib/primer/forms/toggle_switch.html.erb

@@ -7,8 +7,7 @@
     <%= content_tag(:div, data: { target: "toggle-switch-input.validationElement" }, **@input.validation_arguments) do %>
       <%= content_tag(:span, @input.validation_messages.first, data: { target: "toggle-switch-input.validationMessageElement" }, **@input.validation_message_arguments) %>
     <% end %>
-
-    <div><%= render(Caption.new(input: @input)) %></div>
   </span>
   <%= render(Primer::Alpha::ToggleSwitch.new(src: @input.src, csrf_token: @input.csrf, **@input.input_arguments)) %>
 <% end %>
+<div><%= render(Caption.new(input: @input)) %></div>

data/lib/primer/static/generate_info_arch.rb

@@ -37,7 +37,6 @@ module Primer
                   if slot_method.base_docstring.to_s.present?
                     render_erb_ignoring_markdown_code_fences(slot_method.base_docstring)
                   end,
-                # rubocop:enable Style/IfUnlessModifier
                 "parameters" => serialize_params(param_tags, component)
               }
             end
@@ -54,11 +53,13 @@ module Primer
 
             method_docs = mtds.map do |mtd|
               param_tags = mtd.tags(:param)
+              return_tag = mtd.tags(:return)
 
               {
                 "name" => mtd.name,
                 "description" => render_erb_ignoring_markdown_code_fences(mtd.base_docstring),
-                "parameters" => serialize_params(param_tags, component)
+                "parameters" => serialize_params(param_tags, component),
+                "return_types" => return_tag.first&.types || [],
               }
             end
 

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 27
+      MINOR = 29
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/lib/primer/yard/component_manifest.rb

@@ -67,6 +67,8 @@ module Primer
         Primer::Alpha::ToggleSwitch => { js: true },
         Primer::Alpha::Overlay => { js: true },
         Primer::Alpha::ActionMenu => { js: true },
+        Primer::Alpha::SelectPanel => { js: true },
+        Primer::Alpha::SelectPanel::ItemList => { js: true, examples: false },
 
         # Examples can be seen in the NavList docs
         Primer::Alpha::NavList => { js: true },

data/previews/primer/alpha/action_menu_preview.rb

@@ -326,7 +326,7 @@ module Primer
       # @label In Scoll container
       #
       def in_scroll_container
-        render_with_template()
+        render_with_template
       end
 
 

data/previews/primer/alpha/select_panel_preview/_interaction_subject_js.html.erb

@@ -0,0 +1,25 @@
+<script type="application/javascript">
+  function ready(fn) {
+    if (document.readyState !== 'loading') {
+      fn()
+    } else {
+      document.addEventListener('DOMContentLoaded', fn)
+    }
+  }
+
+  ready(() => {
+    const subject = document.querySelector("[data-interaction-subject='<%= subject_id %>']")
+    if (!subject) return
+
+    const fetchStrategy = subject.getAttribute('data-fetch-strategy')
+
+    if (fetchStrategy === 'local') {
+      subject.setAttribute('data-ready', 'true')
+      return
+    }
+
+    subject.addEventListener('loadend', (event) => {
+      event.target.setAttribute('data-ready', 'true')
+    })
+  })
+</script>

data/previews/primer/alpha/select_panel_preview/eventually_local_fetch.html.erb

@@ -0,0 +1,16 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path,
+  select_variant: :multiple,
+  fetch_strategy: :eventually_local,
+  open_on_load: open_on_load
+)) 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 } %>

data/previews/primer/alpha/select_panel_preview/eventually_local_fetch_initial_failure.html.erb

@@ -0,0 +1,12 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path(fail: "true"),
+  fetch_strategy: :eventually_local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Sci-fi equipment" } %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/eventually_local_fetch_no_results.html.erb

@@ -0,0 +1,16 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path(show_results: "false"),
+  select_variant: :multiple,
+  fetch_strategy: :eventually_local,
+  open_on_load: open_on_load
+)) 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 } %>

data/previews/primer/alpha/select_panel_preview/footer_buttons.html.erb

@@ -0,0 +1,23 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :multiple,
+  fetch_strategy: :local,
+  dynamic_label: true,
+  dynamic_label_prefix: "Item",
+  dynamic_aria_label_prefix: "Selected item",
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Choose item" } %>
+  <% panel.with_item(label: "Item 1") %>
+  <% panel.with_item(label: "Item 2") %>
+  <% panel.with_item(label: "Item 3") %>
+  <% panel.with_item(label: "Item 4") %>
+  <% panel.with_footer(show_divider: true) do %>
+    <%= render(Primer::Beta::Button.new(scheme: :default)) { "Cancel" } %>
+    <%= render(Primer::Beta::Button.new(scheme: :primary)) { "Save" } %>
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/local_fetch.html.erb

@@ -0,0 +1,19 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :multiple,
+  fetch_strategy: :local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Panel" } %>
+  <% panel.with_item(label: "Item 1") %>
+  <% panel.with_item(label: "Item 2") %>
+  <% panel.with_item(label: "Item 3") %>
+  <% panel.with_item(label: "Item 4") %>
+  <% 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 } %>

data/previews/primer/alpha/select_panel_preview/local_fetch_no_results.html.erb

@@ -0,0 +1,15 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :multiple,
+  fetch_strategy: :local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Panel" } %>
+  <% 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 } %>

data/previews/primer/alpha/select_panel_preview/multiselect.html.erb

@@ -0,0 +1,17 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :multiple,
+  fetch_strategy: :local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Choose item" } %>
+  <% panel.with_item(label: "Item 1", item_id: :item1) %>
+  <% panel.with_item(label: "Item 2", item_id: :item2) %>
+  <% panel.with_item(label: "Item 3", item_id: :item3) %>
+  <% panel.with_item(label: "Item 4", item_id: :item4) %>
+  <% panel.with_item(label: "Disabled", disabled: true, item_id: :disabled) %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/multiselect_form.html.erb

@@ -0,0 +1,31 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= form_with(url: generic_form_submission_path(format: route_format)) do |builder| %>
+  <%= render(Primer::Alpha::SelectPanel.new(
+    data: { interaction_subject: subject_id },
+    select_variant: :multiple,
+    fetch_strategy: :local,
+    open_on_load: open_on_load,
+    form_arguments: {
+      name: :item,
+      builder: builder
+    }
+  )) do |panel| %>
+    <% panel.with_show_button { "Panel" } %>
+    <% panel.with_item(label: "Item 1", content_arguments: { data: { value: "item1" } }, active: true) %>
+    <% panel.with_item(label: "Item 2", content_arguments: { data: { value: "item2" } }) %>
+    <% panel.with_item(label: "Item 3", content_arguments: { data: { value: "item3" } }) %>
+    <% panel.with_item(label: "Item 4", content_arguments: { data: { value: "item4" } }) %>
+    <% panel.with_footer(show_divider: true) do %>
+        I'm a footer!
+    <% end %>
+  <% end %>
+
+  <hr>
+
+  <%= render(Primer::Beta::Button.new(type: :submit, scheme: :primary)) do %>
+    Submit
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/playground.html.erb

@@ -0,0 +1,23 @@
+<% subject_id = SecureRandom.hex %>
+<% title = system_arguments.delete(:title) %>
+<% simulate_no_results = system_arguments.delete(:simulate_no_results) %>
+<% simulate_failure = system_arguments.delete(:simulate_failure) %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path(
+    select_variant: :single,
+    show_results: !simulate_no_results,
+    fail: simulate_failure
+  ),
+  select_variant: :single,
+  fetch_strategy: :remote,
+  **system_arguments
+)) do |panel| %>
+  <% panel.with_show_button { title } %>
+  <% if subtitle %>
+    <% panel.with_subtitle { subtitle } %>
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/remote_fetch.html.erb

@@ -0,0 +1,16 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path,
+  select_variant: :multiple,
+  fetch_strategy: :remote,
+  open_on_load: open_on_load
+)) 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 } %>

data/previews/primer/alpha/select_panel_preview/remote_fetch_filter_failure.html.erb

@@ -0,0 +1,13 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  # passing a uuid here causes the request to succeed the first time and fail all subsequent times
+  src: select_panel_items_path(fail: "true", uuid: SecureRandom.uuid),
+  fetch_strategy: :remote,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Sci-fi equipment" } %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/remote_fetch_initial_failure.html.erb

@@ -0,0 +1,12 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path(fail: "true"),
+  fetch_strategy: :remote,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Sci-fi equipment" } %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/remote_fetch_no_results.html.erb

@@ -0,0 +1,16 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  src: select_panel_items_path(show_results: "false"),
+  select_variant: :multiple,
+  fetch_strategy: :remote,
+  open_on_load: open_on_load
+)) 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 } %>

data/previews/primer/alpha/select_panel_preview/single_select.html.erb

@@ -0,0 +1,20 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :single,
+  fetch_strategy: :local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Choose item" } %>
+  <% panel.with_item(label: "Item 1", item_id: :item1) %>
+  <% panel.with_item(label: "Item 2", item_id: :item2) %>
+  <% panel.with_item(label: "Item 3", item_id: :item3) %>
+  <% panel.with_item(label: "Item 4", item_id: :item4) %>
+  <% panel.with_item(label: "Disabled", disabled: true, item_id: :disabled) %>
+  <% 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 } %>

data/previews/primer/alpha/select_panel_preview/single_select_form.html.erb

@@ -0,0 +1,33 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= form_with(url: generic_form_submission_path(format: route_format)) do |builder| %>
+  <%= render(Primer::Alpha::SelectPanel.new(
+    data: { interaction_subject: subject_id },
+    select_variant: :single,
+    fetch_strategy: :local,
+    open_on_load: open_on_load,
+    dynamic_label: true,
+    dynamic_label_prefix: "Item",
+    form_arguments: {
+      name: :item,
+      builder: builder
+    }
+  )) do |panel| %>
+    <% panel.with_show_button { "Panel" } %>
+    <% panel.with_item(label: "Item 1", content_arguments: { data: { value: "item1" } }, active: true) %>
+    <% panel.with_item(label: "Item 2", content_arguments: { data: { value: "item2" } }) %>
+    <% panel.with_item(label: "Item 3", content_arguments: { data: { value: "item3" } }) %>
+    <% panel.with_item(label: "Item 4", content_arguments: { data: { value: "item4" } }) %>
+    <% panel.with_footer(show_divider: true) do %>
+        I'm a footer!
+    <% end %>
+  <% end %>
+
+  <hr>
+
+  <%= render(Primer::Beta::Button.new(type: :submit, scheme: :primary)) do %>
+    Submit
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/with_avatar_items.html.erb

@@ -0,0 +1,19 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  id: "with_avatar_items",
+  title: "Select users",
+  select_variant: :multiple,
+  fetch_strategy: :local,
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Choose users" } %>
+
+  <% panel.with_avatar_item(
+    username: "hulk_smash",
+    src: "https://avatars.githubusercontent.com/u/103004183?v=4",
+  ) %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview/with_dynamic_label.html.erb

@@ -0,0 +1,23 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  id: "with_avatar_items",
+  title: "Select users",
+  select_variant: :single,
+  fetch_strategy: :local,
+  dynamic_label: true,
+  dynamic_label_prefix: "Item",
+  open_on_load: open_on_load
+)) do |panel| %>
+  <% panel.with_show_button { "Choose item" } %>
+
+  <% panel.with_item(label: "Item 1") %>
+  <% panel.with_item(label: "Item 2") %>
+  <% panel.with_item(label: "Item 3") %>
+  <% panel.with_item(label: "Item 4") %>
+  <% panel.with_item(label: "Item 5") %>
+  <% panel.with_item(label: "Item 6") %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>