openproject-primer_view_components 0.84.5 → 0.86.0

data/previews/primer/open_project/filterable_tree_view_preview.rb

@@ -7,7 +7,7 @@ module Primer
       # @label Playground
       #
       # @param expanded [Boolean] toggle
-      # @param select_variant [Symbol] select [multiple, single]
+      # @param select_variant [Symbol] select [multiple, single, none]
       # @param show_checkbox [Boolean] toggle
       # @param show_segmented_control [Boolean] toggle
       def playground(expanded: true, select_variant: :multiple, show_checkbox: true, show_segmented_control: true)
@@ -31,7 +31,7 @@ module Primer
 
       # @label Form input
       #
-      # @param select_variant [Symbol] select [multiple, single]
+      # @param select_variant [Symbol] select [multiple, single, none]
       # @param expanded [Boolean] toggle
       def form_input(select_variant: :multiple, expanded: true)
         render_with_template(locals: {
@@ -114,6 +114,27 @@ module Primer
         })
       end
 
+      # @label Async (server-side filtering)
+      #
+      # @param select_variant [Symbol] select [multiple, single, none]
+      def async(select_variant: :single)
+        render_with_template(locals: {
+          select_variant: select_variant.to_sym
+        })
+      end
+
+      # @label Async form input
+      def async_form_input
+        render_with_template
+      end
+
+      # @label Link nodes
+      def link_nodes(expanded: true)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded)
+        })
+      end
+
       # @label Hide checkbox
       #
       # @param include_sub_items [Boolean] toggle

data/previews/primer/open_project/sub_header_preview/quick_filters.html.erb

@@ -0,0 +1,47 @@
+<%= render(Primer::OpenProject::SubHeader.new(collapsed_search: true)) do |component|
+  component.with_filter_input(name: "filter", label: "Filter")
+
+  component.with_filter_button(mobile_label: "All filters") do
+    "All filters"
+  end
+
+  component.with_quick_filter do
+    render(Primer::Alpha::SelectPanel.new(title: "Version",
+                                          select_variant: :single,
+                                          fetch_strategy: :local,
+                                          dynamic_label: true,
+                                          dynamic_label_prefix: "Version")) do |panel|
+      panel.with_show_button { "Version" }
+      panel.with_item(label: "1.0")
+      panel.with_item(label: "2.0")
+      panel.with_item(label: "2.1")
+    end
+  end
+
+  component.with_quick_filter do
+    render(Primer::Alpha::SelectPanel.new(title: "Assignee",
+                                          select_variant: :multiple,
+                                          fetch_strategy: :local,
+                                          dynamic_label: true,
+                                          dynamic_label_prefix: "Assignee")) do |panel|
+      panel.with_show_button { "Assignee" }
+      panel.with_avatar_item(username: "Alice", src: "https://avatars.githubusercontent.com/u/1?v=4")
+      panel.with_avatar_item(username: "Bob", src: "https://avatars.githubusercontent.com/u/2?v=4")
+      panel.with_avatar_item(username: "Carol", src: "https://avatars.githubusercontent.com/u/3?v=4")
+      panel.with_avatar_item(username: "Dave", src: "https://avatars.githubusercontent.com/u/4?v=4")
+      panel.with_avatar_item(username: "Eve", src: "https://avatars.githubusercontent.com/u/5?v=4")
+      panel.with_avatar_item(username: "Frank", src: "https://avatars.githubusercontent.com/u/6?v=4")
+      panel.with_avatar_item(username: "Grace", src: "https://avatars.githubusercontent.com/u/7?v=4")
+      panel.with_avatar_item(username: "Heidi", src: "https://avatars.githubusercontent.com/u/8?v=4")
+      panel.with_avatar_item(username: "Ivan", src: "https://avatars.githubusercontent.com/u/9?v=4")
+      panel.with_avatar_item(username: "Judy", src: "https://avatars.githubusercontent.com/u/10?v=4")
+      panel.with_footer(show_divider: true) do
+        render(Primer::Beta::Button.new(scheme: :primary)) { "Apply" }
+      end
+    end
+  end
+
+  component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
+    "Create"
+  end
+end %>

data/previews/primer/open_project/sub_header_preview.rb

@@ -12,6 +12,7 @@ module Primer
       # @param show_filter_button toggle
       # @param show_action_button toggle
       # @param show_clear_button toggle
+      # @param collapsed_search toggle
       # @param text text
       # @param value text
       def playground(
@@ -19,10 +20,11 @@ module Primer
         show_clear_button: true,
         show_filter_button: true,
         show_action_button: true,
+        collapsed_search: false,
         text: nil,
         value: nil
       )
-        render(Primer::OpenProject::SubHeader.new) do |component|
+        render(Primer::OpenProject::SubHeader.new(collapsed_search: collapsed_search)) do |component|
           component.with_filter_input(
             name: "filter",
             label: "Filter",
@@ -98,6 +100,26 @@ module Primer
         end
       end
 
+      # @label With collapsed search
+      def collapsed_search
+        render(Primer::OpenProject::SubHeader.new(collapsed_search: true)) 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(leading_icon: :plus, label: "Create", scheme: :primary) do
+            "Create"
+          end
+        end
+      end
+
+      # @label With QuickFilters
+      def quick_filters
+        render_with_template(locals: {})
+      end
+
       # @label With a custom area below
       def bottom_pane
         render_with_template(locals: {})

data/static/arguments.json

@@ -3757,6 +3757,22 @@
       }
     ]
   },
+  {
+    "component": "TreeView::TrailingAction",
+    "status": "alpha",
+    "a11y_reviewed": false,
+    "short_name": "TreeViewTrailingAction",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tree_view/trailing_action.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tree_view/trailing_action/default/",
+    "parameters": [
+      {
+        "name": "action",
+        "type": "ViewComponent::Base",
+        "default": "N/A",
+        "description": "A component or other renderable to use as the action button etc."
+      }
+    ]
+  },
   {
     "component": "TreeView::Visual",
     "status": "alpha",
@@ -6151,6 +6167,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/filterable_tree_view.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/filterable_tree_view/default/",
     "parameters": [
+      {
+        "name": "src",
+        "type": "String",
+        "default": "`nil`",
+        "description": "URL of the server endpoint that returns a filtered `<tree-view>` HTML fragment. When set, activates async (server-side) filtering mode. See \"Async loading strategy\" above."
+      },
       {
         "name": "tree_view_arguments",
         "type": "Hash",
@@ -6473,6 +6495,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/default/",
     "parameters": [
+      {
+        "name": "collapsed_search",
+        "type": "Boolean",
+        "default": "`false`",
+        "description": "When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",

data/static/audited_at.json

@@ -84,6 +84,7 @@
   "Primer::Alpha::TreeView::SubTree": "",
   "Primer::Alpha::TreeView::SubTreeContainer": "",
   "Primer::Alpha::TreeView::SubTreeNode": "",
+  "Primer::Alpha::TreeView::TrailingAction": "",
   "Primer::Alpha::TreeView::Visual": "",
   "Primer::Alpha::UnderlineNav": "",
   "Primer::Alpha::UnderlinePanels": "",

data/static/classes.json

@@ -271,6 +271,15 @@
   "DragHandle": [
     "Primer::OpenProject::DragHandle"
   ],
+  "FilterableTreeViewLayout": [
+    "Primer::OpenProject::FilterableTreeView"
+  ],
+  "FilterableTreeViewLoadingSkeleton": [
+    "Primer::OpenProject::FilterableTreeView"
+  ],
+  "FilterableTreeViewTreeContainer": [
+    "Primer::OpenProject::FilterableTreeView"
+  ],
   "FormControl": [
     "Primer::Alpha::TextField"
   ],

data/static/constants.json

@@ -852,6 +852,7 @@
     "SubTree": "Primer::Alpha::TreeView::SubTree",
     "SubTreeContainer": "Primer::Alpha::TreeView::SubTreeContainer",
     "SubTreeNode": "Primer::Alpha::TreeView::SubTreeNode",
+    "TrailingAction": "Primer::Alpha::TreeView::TrailingAction",
     "Visual": "Primer::Alpha::TreeView::Visual"
   },
   "Primer::Alpha::TreeView::Icon": {
@@ -918,6 +919,9 @@
       "descendants"
     ]
   },
+  "Primer::Alpha::TreeView::TrailingAction": {
+    "GeneratedSlotMethods": "Primer::Alpha::TreeView::TrailingAction::GeneratedSlotMethods"
+  },
   "Primer::Alpha::TreeView::Visual": {
     "GeneratedSlotMethods": "Primer::Alpha::TreeView::Visual::GeneratedSlotMethods"
   },
@@ -1820,6 +1824,11 @@
       "label": "No results"
     },
     "GeneratedSlotMethods": "Primer::OpenProject::FilterableTreeView::GeneratedSlotMethods",
+    "SUPPORTED_SELECT_VARIANTS": [
+      "multiple",
+      "single",
+      "none"
+    ],
     "SubTree": "Primer::OpenProject::FilterableTreeView::SubTree"
   },
   "Primer::OpenProject::FilterableTreeView::SubTree": {
@@ -1978,8 +1987,8 @@
       "none",
       "flex"
     ],
+    "FILTER_EXPAND_BUTTON_TARGET_SELECTOR": "sub-header.filterExpandButton",
     "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::GeneratedSlotMethods",
-    "HIDDEN_FILTER_TARGET_SELECTOR": "sub-header.hiddenItemsOnExpandedFilter",
     "MOBILE_ACTIONS_DISPLAY": [
       "flex",
       "none"