openproject-primer_view_components 0.84.4 → 0.85.0

data/previews/primer/alpha/select_panel_preview.rb

@@ -54,7 +54,6 @@ module Primer
 
       # @label Default
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param show_filter toggle
       def default(open_on_load: false, show_filter: true)
@@ -66,7 +65,6 @@ module Primer
 
       # @label Local fetch
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param show_filter toggle
       def local_fetch(open_on_load: false, show_filter: true)
@@ -75,7 +73,6 @@ module Primer
 
       # @label Eventually local fetch
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param show_filter toggle
       def eventually_local_fetch(open_on_load: false, show_filter: true)
@@ -84,7 +81,6 @@ module Primer
 
       # @label Remote fetch
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param selected_items text
       def remote_fetch(open_on_load: false, selected_items: "Phaser")
@@ -93,7 +89,6 @@ module Primer
 
       # @label Custom loading label
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param selected_items text
       def custom_loading_label(open_on_load: false, selected_items: "Phaser")
@@ -102,7 +97,6 @@ module Primer
 
       # @label Custom loading description
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param selected_items text
       def custom_loading_description(open_on_load: false, selected_items: "Phaser")
@@ -111,7 +105,6 @@ module Primer
 
       # @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 })
@@ -119,7 +112,6 @@ module Primer
 
       # @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 })
@@ -127,7 +119,6 @@ module Primer
 
       # @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 })
@@ -135,7 +126,6 @@ module Primer
 
       # @label Single select
       #
-      # @snapshot interactive
       # @param dynamic_label toggle
       # @param open_on_load toggle
       def single_select(dynamic_label: false, open_on_load: false)
@@ -144,7 +134,6 @@ module Primer
 
       # @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 })
@@ -154,7 +143,6 @@ module Primer
 
       # @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 })
@@ -162,7 +150,6 @@ module Primer
 
       # @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 })
@@ -172,7 +159,6 @@ module Primer
 
       # @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 })
@@ -180,7 +166,6 @@ module Primer
 
       # @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 })
@@ -188,7 +173,6 @@ module Primer
 
       # @label SelectPanel with Primer::IconButton
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def select_panel_with_icon_button(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -198,7 +182,6 @@ module Primer
 
       # @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 })
@@ -206,7 +189,6 @@ module Primer
 
       # @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 })
@@ -216,7 +198,6 @@ module Primer
 
       # @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 })
@@ -224,7 +205,6 @@ module Primer
 
       # @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 })
@@ -232,7 +212,6 @@ module Primer
 
       # @label Remote fetch filter failure
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param banner_scheme [Symbol] select [danger, warning]
       # @param show_results toggle
@@ -253,7 +232,6 @@ module Primer
 
       # @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 })
@@ -261,7 +239,6 @@ module Primer
 
       # @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 })
@@ -269,7 +246,6 @@ module Primer
 
       # @label Remote fetch form
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       # @param selected_items text
       def remote_fetch_form(open_on_load: false, selected_items: "Phaser",  route_format: :html)
@@ -278,7 +254,6 @@ module Primer
 
       # @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 })
@@ -286,7 +261,6 @@ module Primer
 
       # @label List of links
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def list_of_links(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })
@@ -294,7 +268,6 @@ module Primer
 
       # @label No values
       #
-      # @snapshot interactive
       # @param open_on_load toggle
       def no_values(open_on_load: false)
         render_with_template(locals: { open_on_load: open_on_load })

data/previews/primer/alpha/text_area_preview.rb

@@ -107,7 +107,6 @@ module Primer
       end
 
       # @label With character limit, over limit
-      # @snapshot interactive
       def with_character_limit_over_limit
         render(Primer::Alpha::TextArea.new(id: "my-text-area-with-character-limit-over-limit", name: "my-text-area-with-character-limit-over-limit", character_limit: 10, label: "Tell me about yourself", value: "This text is definitely over the limit."))
       end

data/previews/primer/alpha/text_field_preview.rb

@@ -236,7 +236,6 @@ module Primer
       end
 
       # @label With character limit, over limit
-      # @snapshot interactive
       def with_character_limit_over_limit
         render(Primer::Alpha::TextField.new(character_limit: 10, name: "my-text-field-19", label: "Tell me about yourself", value: "This text is definitely over the limit."))
       end

data/previews/primer/open_project/inline_message_preview/playground.html.erb

@@ -1,5 +1,3 @@
 <%= render(Primer::OpenProject::InlineMessage.new(scheme: scheme, size: size)) do %>
-  <%= render(Primer::Beta::Text.new(tag: :p)) do %>
-    <%= render(Primer::Beta::Text.new(tag: :strong).with_content("It is an inline message")) %>
-  <% end %>
+  <%= render(Primer::Beta::Text.new(tag: :strong).with_content("It is an inline message")) %>
 <% end %>

data/previews/primer/open_project/inline_message_preview.rb

@@ -6,6 +6,7 @@ module Primer
       # @label Default
       # @snapshot
       def default
+        render(Primer::OpenProject::InlineMessage.new(scheme: :warning, size: :medium)) { "Warning message" }
       end
 
       # @label Playground

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

@@ -6473,6 +6473,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/constants.json

@@ -1978,8 +1978,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"

data/static/info_arch.json

@@ -8102,7 +8102,7 @@
       {
         "preview_path": "primer/alpha/select_panel/default",
         "name": "default",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8115,7 +8115,7 @@
       {
         "preview_path": "primer/alpha/select_panel/local_fetch",
         "name": "local_fetch",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8128,7 +8128,7 @@
       {
         "preview_path": "primer/alpha/select_panel/eventually_local_fetch",
         "name": "eventually_local_fetch",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8141,7 +8141,7 @@
       {
         "preview_path": "primer/alpha/select_panel/remote_fetch",
         "name": "remote_fetch",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8154,7 +8154,7 @@
       {
         "preview_path": "primer/alpha/select_panel/custom_loading_label",
         "name": "custom_loading_label",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8167,7 +8167,7 @@
       {
         "preview_path": "primer/alpha/select_panel/custom_loading_description",
         "name": "custom_loading_description",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8180,7 +8180,7 @@
       {
         "preview_path": "primer/alpha/select_panel/local_fetch_no_results",
         "name": "local_fetch_no_results",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8193,7 +8193,7 @@
       {
         "preview_path": "primer/alpha/select_panel/eventually_local_fetch_no_results",
         "name": "eventually_local_fetch_no_results",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8206,7 +8206,7 @@
       {
         "preview_path": "primer/alpha/select_panel/remote_fetch_no_results",
         "name": "remote_fetch_no_results",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8219,7 +8219,7 @@
       {
         "preview_path": "primer/alpha/select_panel/single_select",
         "name": "single_select",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8232,7 +8232,7 @@
       {
         "preview_path": "primer/alpha/select_panel/multiselect",
         "name": "multiselect",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8245,7 +8245,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_dynamic_label",
         "name": "with_dynamic_label",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8258,7 +8258,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_dynamic_label_and_aria_prefix",
         "name": "with_dynamic_label_and_aria_prefix",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8271,7 +8271,7 @@
       {
         "preview_path": "primer/alpha/select_panel/footer_buttons",
         "name": "footer_buttons",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8284,7 +8284,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_avatar_items",
         "name": "with_avatar_items",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8297,7 +8297,7 @@
       {
         "preview_path": "primer/alpha/select_panel/select_panel_with_icon_button",
         "name": "select_panel_with_icon_button",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8310,7 +8310,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_leading_icons",
         "name": "with_leading_icons",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8323,7 +8323,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_trailing_icons",
         "name": "with_trailing_icons",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8336,7 +8336,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_subtitle",
         "name": "with_subtitle",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8349,7 +8349,7 @@
       {
         "preview_path": "primer/alpha/select_panel/remote_fetch_initial_failure",
         "name": "remote_fetch_initial_failure",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8362,7 +8362,7 @@
       {
         "preview_path": "primer/alpha/select_panel/remote_fetch_filter_failure",
         "name": "remote_fetch_filter_failure",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8375,7 +8375,7 @@
       {
         "preview_path": "primer/alpha/select_panel/eventually_local_fetch_initial_failure",
         "name": "eventually_local_fetch_initial_failure",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8388,7 +8388,7 @@
       {
         "preview_path": "primer/alpha/select_panel/single_select_form",
         "name": "single_select_form",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8401,7 +8401,7 @@
       {
         "preview_path": "primer/alpha/select_panel/remote_fetch_form",
         "name": "remote_fetch_form",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8414,7 +8414,7 @@
       {
         "preview_path": "primer/alpha/select_panel/multiselect_form",
         "name": "multiselect_form",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8427,7 +8427,7 @@
       {
         "preview_path": "primer/alpha/select_panel/list_of_links",
         "name": "list_of_links",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8440,7 +8440,7 @@
       {
         "preview_path": "primer/alpha/select_panel/no_values",
         "name": "no_values",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -9368,7 +9368,7 @@
       {
         "preview_path": "primer/alpha/text_area/with_character_limit_over_limit",
         "name": "with_character_limit_over_limit",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -9907,7 +9907,7 @@
       {
         "preview_path": "primer/alpha/text_field/with_character_limit_over_limit",
         "name": "with_character_limit_over_limit",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -21649,6 +21649,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",
@@ -21672,6 +21678,11 @@
         "description": "A button or custom content that will render on the left-hand side of the component, next to the filter input.\n\nTo render a button, call the `with_filter_button` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}.\n\nTo render custom content, call the `with_filter_component` method and pass a block that returns HTML.",
         "parameters": []
       },
+      {
+        "name": "quick_filters",
+        "description": "Quick filters shown in the left pane next to the search bar (0–5 items).\nHidden on mobile. Requires all_filters_button to be set when used.\nSupports ActionMenus, Buttons, IconButtons, SelectPanels, and SegmentedControls inside the block.",
+        "parameters": []
+      },
       {
         "name": "segmented_control",
         "description": null,
@@ -21781,6 +21792,32 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/open_project/sub_header/collapsed_search",
+        "name": "collapsed_search",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/sub_header/quick_filters",
+        "name": "quick_filters",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/open_project/sub_header/bottom_pane",
         "name": "bottom_pane",