primer_view_components 0.26.1 → 0.28.0

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

@@ -104,6 +104,12 @@
         "default": "`:none`",
         "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
       },
+      {
+        "name": "aria_selection_variant",
+        "type": "Symbol",
+        "default": "`:checked`",
+        "description": "Specifies which aria selection to use. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
+      },
       {
         "name": "form_arguments",
         "type": "Hash",
@@ -383,6 +389,12 @@
         "default": "`{}`",
         "description": "Allows an `ActionMenu` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission."
       },
+      {
+        "name": "overlay_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Arguments to pass to the underlying [Overlay](/components/alpha/overlay)"
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -435,6 +447,12 @@
         "default": "`:none`",
         "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
       },
+      {
+        "name": "aria_selection_variant",
+        "type": "Symbol",
+        "default": "`:checked`",
+        "description": "Specifies which aria selection to use. <%= one_of(Primer::Alpha::ActionList::ARIA_SELECTION_VARIANT_OPTIONS) %?"
+      },
       {
         "name": "form_arguments",
         "type": "Hash",
@@ -2334,6 +2352,124 @@
       }
     ]
   },
+  {
+    "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`."
+      }
+    ]
+  },
   {
     "component": "SubmitButton",
     "status": "alpha",

data/static/audited_at.json

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

data/static/constants.json

@@ -19,6 +19,11 @@
   "Primer::Alpha::ActionBar::Item": {
   },
   "Primer::Alpha::ActionList": {
+    "ARIA_SELECTION_VARIANT_OPTIONS": [
+      "selected",
+      "checked"
+    ],
+    "DEFAULT_ARIA_SELECTION_VARIANT": "checked",
     "DEFAULT_MENU_ITEM_ROLE": "menuitem",
     "DEFAULT_ROLE": "list",
     "DEFAULT_SCHEME": "full",
@@ -27,6 +32,7 @@
     "FormWrapper": "Primer::Alpha::ActionList::FormWrapper",
     "Heading": "Primer::Alpha::ActionList::Heading",
     "Item": "Primer::Alpha::ActionList::Item",
+    "LIST_BOX_ITEM_ROLE": "option",
     "MENU_ROLE": "menu",
     "SCHEME_MAPPINGS": {
       "full": null,
@@ -591,6 +597,22 @@
   },
   "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::ActionList",
+    "SELECT_VARIANT_OPTIONS": [
+      "single",
+      "multiple",
+      "none"
+    ]
+  },
   "Primer::Alpha::SubmitButton": {
   },
   "Primer::Alpha::TabContainer": {