openproject-primer_view_components 0.38.0 → 0.39.1

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

@@ -250,10 +250,22 @@ module Primer
     # )
     # ```
     class SelectPanel < Primer::Component
-      status :alpha
-
       # The component that should be used to render the list of items in the body of a SelectPanel.
-      ItemList = Primer::Alpha::ActionList
+      class ItemList < Primer::Alpha::ActionList
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList) %>.
+        def initialize(**system_arguments)
+          select_variant = system_arguments[:select_variant] || Primer::Alpha::ActionList::DEFAULT_SELECT_VARIANT
+
+          super(
+            p: 2,
+            role: "listbox",
+            aria_selection_variant: select_variant == :single ? :selected : :checked,
+            **system_arguments
+          )
+        end
+      end
+
+      status :alpha
 
       DEFAULT_PRELOAD = false
 
@@ -328,6 +340,7 @@ module Primer
       # @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 system_arguments [Hash] <%= link_to_system_arguments_docs %>
       def initialize(
         src: nil,
         title: "Menu",

data/app/components/primer/alpha/select_panel_element.js

@@ -184,6 +184,9 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
                 const elem = entry.target;
                 if (entry.isIntersecting && elem === this.dialog) {
                     this.updateAnchorPosition();
+                    if (__classPrivateFieldGet(this, _SelectPanelElement_instances, "a", _SelectPanelElement_fetchStrategy_get) === FetchStrategy.LOCAL) {
+                        __classPrivateFieldGet(this, _SelectPanelElement_instances, "m", _SelectPanelElement_updateItemVisibility).call(this);
+                    }
                 }
             }
         }), "f");

data/app/components/primer/alpha/select_panel_element.ts

@@ -216,6 +216,10 @@ export class SelectPanelElement extends HTMLElement {
         const elem = entry.target
         if (entry.isIntersecting && elem === this.dialog) {
           this.updateAnchorPosition()
+
+          if (this.#fetchStrategy === FetchStrategy.LOCAL) {
+            this.#updateItemVisibility()
+          }
         }
       }
     })

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 38
-      PATCH = 0
+      MINOR = 39
+      PATCH = 1
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

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

@@ -5,7 +5,11 @@
 
 <%= render(Primer::Alpha::SelectPanel.new(
   data: { interaction_subject: subject_id },
-  src: select_panel_items_path(show_results: !simulate_no_results, fail: simulate_failure),
+  src: select_panel_items_path(
+    select_variant: :single,
+    show_results: !simulate_no_results,
+    fail: simulate_failure
+  ),
   select_variant: :single,
   fetch_strategy: :remote,
   **system_arguments

data/previews/primer/open_project/page_header_preview/create_action.html.erb

@@ -0,0 +1,21 @@
+<%=
+  render(Primer::OpenProject::PageHeader.new) do |component|
+    component.with_title { "Users" }
+    component.with_breadcrumbs([{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"])
+  end
+%>
+
+<%=
+  render(Primer::OpenProject::SubHeader.new) do |component|
+    component.with_filter_input(name: "filter", label: "Filter")
+    component.with_filter_button do |button|
+      button.with_trailing_visual_counter(count: "15")
+      "Filter"
+    end
+
+    component.with_action_button(scheme: :primary) do |button|
+      button.with_leading_visual_icon(icon: :plus)
+      "User"
+    end
+  end
+%>

data/previews/primer/open_project/page_header_preview.rb

@@ -111,28 +111,34 @@ module Primer
       # The missing label will be resolved automatically when included into the core
       def zen_mode_button_actions
         render(Primer::OpenProject::PageHeader.new) do |component|
-          component.with_title { "Great news" }
+          component.with_title { "Great user" }
           component.with_breadcrumbs([{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"])
 
           # The missing label will be resolved automatically when included into the core
           component.with_action_zen_mode_button
-          component.with_action_button(mobile_icon: "plus", mobile_label: "Meeting", scheme: :primary) do |button|
-            button.with_leading_visual_icon(icon: "plus")
-            "Meeting"
+          component.with_action_button(mobile_icon: "person", mobile_label: "Profile") do |button|
+            button.with_leading_visual_icon(icon: "person")
+            "Profile"
           end
         end
       end
 
+      # @label With a create action
+      # Create action usually belong into the Primer::OpenProject::SubHeader
+      def create_action
+        render_with_template(locals: {})
+      end
+
       # @label With a single action
       # The single action will not be transformed into a menu on mobile, but remains in a smaller variant
       def single_action
         render(Primer::OpenProject::PageHeader.new) do |component|
-          component.with_title { "Great news" }
+          component.with_title { "Great user" }
           component.with_breadcrumbs([{ href: "/foo", text: "Foo" }, { href: "/bar", text: "Bar" }, "Baz"])
 
-          component.with_action_button(mobile_icon: "plus", mobile_label: "Meeting", scheme: :primary) do |button|
-            button.with_leading_visual_icon(icon: "plus")
-            "Meeting"
+          component.with_action_button(mobile_icon: "person", mobile_label: "Profile") do |button|
+            button.with_leading_visual_icon(icon: "person")
+            "Profile"
           end
         end
       end

data/static/arguments.json

@@ -2467,6 +2467,28 @@
         "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)."
       }
     ]
   },

data/static/audited_at.json

@@ -53,6 +53,7 @@
   "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

@@ -606,13 +606,15 @@
       "eventually_local",
       "local"
     ],
-    "ItemList": "Primer::Alpha::ActionList",
+    "ItemList": "Primer::Alpha::SelectPanel::ItemList",
     "SELECT_VARIANT_OPTIONS": [
       "single",
       "multiple",
       "none"
     ]
   },
+  "Primer::Alpha::SelectPanel::ItemList": {
+  },
   "Primer::Alpha::SubmitButton": {
   },
   "Primer::Alpha::TabContainer": {

data/static/info_arch.json

@@ -7630,6 +7630,12 @@
         "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": "{{link_to_system_arguments_docs}}"
       }
     ],
     "slots": [
@@ -8080,7 +8086,64 @@
       }
     ],
     "subcomponents": [
+      {
+        "fully_qualified_name": "Primer::Alpha::SelectPanel::ItemList",
+        "description": "The component that should be used to render the list of items in the body of a SelectPanel.",
+        "accessibility_docs": null,
+        "is_form_component": false,
+        "is_published": true,
+        "requires_js": true,
+        "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 {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}."
+          }
+        ],
+        "slots": [
+          {
+            "name": "heading",
+            "description": "Heading text rendered above the list of items.",
+            "parameters": [
+              {
+                "name": "component_klass",
+                "type": "Class",
+                "default": "N/A",
+                "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
+              },
+              {
+                "name": "system_arguments",
+                "type": "Hash",
+                "default": "N/A",
+                "description": "The arguments accepted by `component_klass`."
+              }
+            ]
+          },
+          {
+            "name": "items",
+            "description": "Items. Items can be individual items, avatar items, or dividers. See the documentation for `#with_item`, `#with_divider`, and `#with_avatar_item` respectively for more information.",
+            "parameters": [
+
+            ]
+          }
+        ],
+        "methods": [
+
+        ],
+        "previews": [
 
+        ],
+        "subcomponents": [
+
+        ]
+      }
     ]
   },
   {
@@ -17765,6 +17828,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/open_project/page_header/create_action",
+        "name": "create_action",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/page_header/single_action",
         "name": "single_action",

data/static/previews.json

@@ -5443,6 +5443,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/open_project/page_header/create_action",
+        "name": "create_action",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/page_header/single_action",
         "name": "single_action",

data/static/statuses.json

@@ -53,6 +53,7 @@
   "Primer::Alpha::SegmentedControl::Item": "alpha",
   "Primer::Alpha::Select": "alpha",
   "Primer::Alpha::SelectPanel": "alpha",
+  "Primer::Alpha::SelectPanel::ItemList": "alpha",
   "Primer::Alpha::SubmitButton": "alpha",
   "Primer::Alpha::TabContainer": "alpha",
   "Primer::Alpha::TabNav": "alpha",

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.38.0
+  version: 0.39.1
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2024-07-24 00:00:00.000000000 Z
+date: 2024-07-26 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -987,6 +987,7 @@ files:
 - previews/primer/open_project/input_group_preview.rb
 - previews/primer/open_project/page_header_preview.rb
 - previews/primer/open_project/page_header_preview/actions.html.erb
+- previews/primer/open_project/page_header_preview/create_action.html.erb
 - previews/primer/open_project/page_header_preview/playground.html.erb
 - previews/primer/open_project/side_panel_preview.rb
 - previews/primer/open_project/side_panel_preview/default.html.erb