openproject-primer_view_components 0.84.5 → 0.85.0

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",

data/static/previews.json

@@ -7414,7 +7414,7 @@
       {
         "preview_path": "primer/alpha/select_panel/default",
         "name": "default",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7427,7 +7427,7 @@
       {
         "preview_path": "primer/alpha/select_panel/local_fetch",
         "name": "local_fetch",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7440,7 +7440,7 @@
       {
         "preview_path": "primer/alpha/select_panel/eventually_local_fetch",
         "name": "eventually_local_fetch",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7453,7 +7453,7 @@
       {
         "preview_path": "primer/alpha/select_panel/remote_fetch",
         "name": "remote_fetch",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7466,7 +7466,7 @@
       {
         "preview_path": "primer/alpha/select_panel/custom_loading_label",
         "name": "custom_loading_label",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7479,7 +7479,7 @@
       {
         "preview_path": "primer/alpha/select_panel/custom_loading_description",
         "name": "custom_loading_description",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7492,7 +7492,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"
@@ -7505,7 +7505,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"
@@ -7518,7 +7518,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"
@@ -7531,7 +7531,7 @@
       {
         "preview_path": "primer/alpha/select_panel/single_select",
         "name": "single_select",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7544,7 +7544,7 @@
       {
         "preview_path": "primer/alpha/select_panel/multiselect",
         "name": "multiselect",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7557,7 +7557,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_dynamic_label",
         "name": "with_dynamic_label",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7570,7 +7570,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"
@@ -7583,7 +7583,7 @@
       {
         "preview_path": "primer/alpha/select_panel/footer_buttons",
         "name": "footer_buttons",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7596,7 +7596,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_avatar_items",
         "name": "with_avatar_items",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7609,7 +7609,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"
@@ -7622,7 +7622,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_leading_icons",
         "name": "with_leading_icons",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7635,7 +7635,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_trailing_icons",
         "name": "with_trailing_icons",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7648,7 +7648,7 @@
       {
         "preview_path": "primer/alpha/select_panel/with_subtitle",
         "name": "with_subtitle",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7661,7 +7661,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"
@@ -7674,7 +7674,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"
@@ -7687,7 +7687,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"
@@ -7700,7 +7700,7 @@
       {
         "preview_path": "primer/alpha/select_panel/single_select_form",
         "name": "single_select_form",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7713,7 +7713,7 @@
       {
         "preview_path": "primer/alpha/select_panel/remote_fetch_form",
         "name": "remote_fetch_form",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7726,7 +7726,7 @@
       {
         "preview_path": "primer/alpha/select_panel/multiselect_form",
         "name": "multiselect_form",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7739,7 +7739,7 @@
       {
         "preview_path": "primer/alpha/select_panel/list_of_links",
         "name": "list_of_links",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -7752,7 +7752,7 @@
       {
         "preview_path": "primer/alpha/select_panel/no_values",
         "name": "no_values",
-        "snapshot": "interactive",
+        "snapshot": "false",
         "skip_rules": {
           "wont_fix": [
             "region"
@@ -8182,6 +8182,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",
@@ -8615,7 +8641,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"
@@ -8961,7 +8987,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"