primer_view_components 0.27.0 → 0.29.0

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

@@ -0,0 +1,24 @@
+<% 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",
+  dynamic_aria_label_prefix: "Your 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 } %>

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

@@ -0,0 +1,31 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :single,
+  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: "Leading SVG visual") do |item| %>
+    <% item.with_leading_visual_svg do %>
+      <path d="M8 16a2 2 0 001.985-1.75c.017-.137-.097-.25-.235-.25h-3.5c-.138 0-.252.113-.235.25A2 2 0 008 16z"></path><path fill-rule="evenodd" d="M8 1.5A3.5 3.5 0 004.5 5v2.947c0 .346-.102.683-.294.97l-1.703 2.556a.018.018 0 00-.003.01l.001.006c0 .002.002.004.004.006a.017.017 0 00.006.004l.007.001h10.964l.007-.001a.016.016 0 00.006-.004.016.016 0 00.004-.006l.001-.007a.017.017 0 00-.003-.01l-1.703-2.554a1.75 1.75 0 01-.294-.97V5A3.5 3.5 0 008 1.5zM3 5a5 5 0 0110 0v2.947c0 .05.015.098.042.139l1.703 2.555A1.518 1.518 0 0113.482 13H2.518a1.518 1.518 0 01-1.263-2.36l1.703-2.554A.25.25 0 003 7.947V5z"></path>
+    <% end %>
+  <% end %>
+
+  <% panel.with_item(label: "Custom content") do |item| %>
+    <% item.with_leading_visual_content do %>
+      <span style="width: 16px; height: 16px; display: block; text-align: center; line-height: 16px">A</span>
+    <% end %>
+  <% end %>
+
+  <% panel.with_item(label: "Visual icons") do |item| %>
+    <% item.with_leading_visual_icon(icon: :star) %>
+  <% 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_subtitle.html.erb

@@ -0,0 +1,25 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :single,
+  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_subtitle do %>
+    Choose the item you want to select
+  <% end %>
+  <% 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/with_trailing_icons.html.erb

@@ -0,0 +1,19 @@
+<% subject_id = SecureRandom.hex %>
+
+<%= render(Primer::Alpha::SelectPanel.new(
+  data: { interaction_subject: subject_id },
+  select_variant: :single,
+  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: "Visual icons") do |item| %>
+    <% item.with_trailing_visual_icon(icon: :star) %>
+  <% end %>
+<% end %>
+
+<%= render partial: "primer/alpha/select_panel_preview/interaction_subject_js", locals: { subject_id: subject_id } %>

data/previews/primer/alpha/select_panel_preview.rb

@@ -0,0 +1,239 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label SelectPanel
+    class SelectPanelPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param title text
+      # @param size [Symbol] select [auto, small, medium, medium_portrait, large, xlarge]
+      # @param simulate_failure toggle
+      # @param simulate_no_results toggle
+      # @param no_results_label text
+      # @param dynamic_label toggle
+      # @param dynamic_label_prefix text
+      # @param dynamic_aria_label_prefix text
+      # @param show_filter toggle
+      # @param open_on_load toggle
+      # @param anchor_align [Symbol] select [start, center, end]
+      # @param anchor_side [Symbol] select [outside_bottom, outside_top, outside_left, outside_right]
+      def playground(
+        title: "Sci-fi equipment",
+        subtitle: "Various tools from your favorite shows",
+        size: :auto,
+        simulate_failure: false,
+        simulate_no_results: false,
+        no_results_label: "No results found",
+        dynamic_label: false,
+        dynamic_label_prefix: nil,
+        dynamic_aria_label_prefix: nil,
+        show_filter: true,
+        open_on_load: false,
+        anchor_align: :start,
+        anchor_side: :outside_bottom
+      )
+        render_with_template(locals: {
+          subtitle: subtitle,
+          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,
+            show_filter: show_filter,
+            open_on_load: open_on_load,
+            anchor_align: anchor_align,
+            anchor_side: anchor_side
+          }
+        })
+      end
+
+      # @label Default
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def default(open_on_load: false)
+        render_with_template(template: "primer/alpha/select_panel_preview/local_fetch", locals: {
+          open_on_load: open_on_load
+        })
+      end
+
+      # @!group Fetch strategies
+
+      # @label Local fetch
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def local_fetch(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @label Eventually local fetch
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def eventually_local_fetch(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @label Remote fetch
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def remote_fetch(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @label Local fetch (no results)
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def local_fetch_no_results(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @label Eventually local fetch (no results)
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def eventually_local_fetch_no_results(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @label Remote fetch (no results)
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def remote_fetch_no_results(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @!endgroup
+
+      # @label Single select
+      #
+      # @snapshot interactive
+      # @param dynamic_label toggle
+      # @param open_on_load toggle
+      def single_select(dynamic_label: false, open_on_load: false)
+        render_with_template(locals: { dynamic_label: dynamic_label, open_on_load: open_on_load })
+      end
+
+      # @label Multiselect
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def multiselect(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @!group Dynamic label
+
+      # @label With dynamic label
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def with_dynamic_label(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @label With dynamic label and aria prefix
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def with_dynamic_label_and_aria_prefix(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @!endgroup
+
+      # @label Footer buttons
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def footer_buttons(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @label With avatar items
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def with_avatar_items(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @!group With icons
+
+      # @label With leading icons
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def with_leading_icons(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @label With trailing icons
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def with_trailing_icons(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @!endgroup
+
+      # @label With subtitle
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def with_subtitle(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @label Remote fetch initial failure
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def remote_fetch_initial_failure(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @label Remote fetch filter failure
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def remote_fetch_filter_failure(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @label Eventually local fetch initial failure
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def eventually_local_fetch_initial_failure(open_on_load: false)
+        render_with_template(locals: { open_on_load: open_on_load })
+      end
+
+      # @label Single-select form
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def single_select_form(open_on_load: false, route_format: :html)
+        render_with_template(locals: { open_on_load: open_on_load, route_format: route_format })
+      end
+
+      # @label Multi-select form
+      #
+      # @snapshot interactive
+      # @param open_on_load toggle
+      def multiselect_form(open_on_load: false, route_format: :html)
+        render_with_template(locals: { open_on_load: open_on_load, route_format: route_format })
+      end
+    end
+  end
+end

data/static/arguments.json

@@ -2352,6 +2352,146 @@
       }
     ]
   },
+  {
+    "component": "SelectPanel",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "SelectPanel",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/default/",
+    "parameters": [
+      {
+        "name": "src",
+        "type": "String",
+        "default": "`nil`",
+        "description": "The URL to fetch search results from."
+      },
+      {
+        "name": "title",
+        "type": "String",
+        "default": "`\"Menu\"`",
+        "description": "The title that appears at the top of the panel."
+      },
+      {
+        "name": "id",
+        "type": "String",
+        "default": "`self.class.generate_id`",
+        "description": "The unique ID of the panel."
+      },
+      {
+        "name": "size",
+        "type": "Symbol",
+        "default": "`:small`",
+        "description": "The size of the panel. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
+      },
+      {
+        "name": "select_variant",
+        "type": "Symbol",
+        "default": "`:single`",
+        "description": "One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
+      },
+      {
+        "name": "fetch_strategy",
+        "type": "Symbol",
+        "default": "`:remote`",
+        "description": "One of `:eventually_local`, `:local`, or `:remote`."
+      },
+      {
+        "name": "no_results_label",
+        "type": "String",
+        "default": "`\"No results found\"`",
+        "description": "The label to display when no results are found."
+      },
+      {
+        "name": "preload",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened."
+      },
+      {
+        "name": "dynamic_label",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Whether or not to display the text of the currently selected item in the show button."
+      },
+      {
+        "name": "dynamic_label_prefix",
+        "type": "String",
+        "default": "`nil`",
+        "description": "If provided, the prefix is prepended to the dynamic label and displayed in the show button."
+      },
+      {
+        "name": "dynamic_aria_label_prefix",
+        "type": "String",
+        "default": "`nil`",
+        "description": "If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button."
+      },
+      {
+        "name": "body_id",
+        "type": "String",
+        "default": "`nil`",
+        "description": "The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a \"-body\" suffix."
+      },
+      {
+        "name": "list_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Arguments to pass to the underlying [ActionList](/components/alpha/actionlist) component. Only has an effect for the local fetch strategy."
+      },
+      {
+        "name": "form_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Form arguments to pass to the underlying [ActionList](/components/alpha/actionlist) component. Only has an effect for the local fetch strategy."
+      },
+      {
+        "name": "show_filter",
+        "type": "Boolean",
+        "default": "`true`",
+        "description": "Whether or not to show the filter input."
+      },
+      {
+        "name": "open_on_load",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "Open the panel when the page loads."
+      },
+      {
+        "name": "anchor_align",
+        "type": "Symbol",
+        "default": "`:start`",
+        "description": "The anchor alignment of the Overlay. One of `:center`, `:end`, or `:start`."
+      },
+      {
+        "name": "anchor_side",
+        "type": "Symbol",
+        "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": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "[System arguments](/system-arguments)"
+      }
+    ]
+  },
+  {
+    "component": "SelectPanel::ItemList",
+    "status": "alpha",
+    "a11y_reviewed": true,
+    "short_name": "SelectPanelItemList",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel/item_list.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/item_list/default/",
+    "parameters": [
+      {
+        "name": "system_arguments",
+        "type": "Hash",
+        "default": "N/A",
+        "description": "The arguments accepted by [ActionList](/components/alpha/actionlist)."
+      }
+    ]
+  },
   {
     "component": "SubmitButton",
     "status": "alpha",

data/static/audited_at.json

@@ -52,6 +52,8 @@
   "Primer::Alpha::SegmentedControl": "2023-02-01",
   "Primer::Alpha::SegmentedControl::Item": "2023-02-01",
   "Primer::Alpha::Select": "",
+  "Primer::Alpha::SelectPanel": "",
+  "Primer::Alpha::SelectPanel::ItemList": "2023-07-10",
   "Primer::Alpha::SubmitButton": "",
   "Primer::Alpha::TabContainer": "",
   "Primer::Alpha::TabNav": "",

data/static/constants.json

@@ -597,6 +597,24 @@
   },
   "Primer::Alpha::Select": {
   },
+  "Primer::Alpha::SelectPanel": {
+    "DEFAULT_FETCH_STRATEGY": "remote",
+    "DEFAULT_PRELOAD": false,
+    "DEFAULT_SELECT_VARIANT": "single",
+    "FETCH_STRATEGIES": [
+      "remote",
+      "eventually_local",
+      "local"
+    ],
+    "ItemList": "Primer::Alpha::SelectPanel::ItemList",
+    "SELECT_VARIANT_OPTIONS": [
+      "single",
+      "multiple",
+      "none"
+    ]
+  },
+  "Primer::Alpha::SelectPanel::ItemList": {
+  },
   "Primer::Alpha::SubmitButton": {
   },
   "Primer::Alpha::TabContainer": {