openproject-primer_view_components 0.87.0 → 0.89.0

data/app/components/primer/open_project/filterable_tree_view.ts

@@ -18,7 +18,7 @@ type NodeState = {
 
 const ASYNC_DEBOUNCE_MS = 300
 
-@controller
+@controller('filterable-tree-view')
 export class FilterableTreeViewElement extends HTMLElement {
   @target filterInput: HTMLInputElement
   @target filterModeControlList: HTMLElement
@@ -69,6 +69,10 @@ export class FilterableTreeViewElement extends HTMLElement {
     return !!this.#src
   }
 
+  get #clientHighlightsEnabled(): boolean {
+    return this.getAttribute('data-show-search-highlighting') !== 'false'
+  }
+
   handleEvent(event: Event) {
     if (event.target === this.filterModeControl) {
       this.#handleFilterModeEvent(event)
@@ -119,7 +123,8 @@ export class FilterableTreeViewElement extends HTMLElement {
           }
 
           this.#checkedNodeIds.set(nodeId, nodeInfo.checkedValue)
-          const payload: {path: string[]; value?: string} = {path: nodeInfo.path}
+          const payload: {path: string[]; nodeId?: string; value?: string} = {path: nodeInfo.path}
+          payload.nodeId = nodeId
           const dataValue = node.getAttribute('data-value')
           if (dataValue) payload.value = dataValue
           this.#checkedNodeFormPayloads.set(nodeId, payload)
@@ -371,12 +376,12 @@ export class FilterableTreeViewElement extends HTMLElement {
 
       if (requestWasFiltered) {
         this.#expandAllSubTrees()
-        this.#applyAsyncHighlights(query)
+        if (this.#clientHighlightsEnabled) this.#applyAsyncHighlights(query)
         const hasResults = !!this.treeViewList?.querySelector('[role=treeitem]')
         this.noResultsMessage.toggleAttribute('hidden', hasResults)
         this.treeViewList?.toggleAttribute('hidden', !hasResults)
       } else {
-        this.#removeHighlights()
+        if (this.#clientHighlightsEnabled) this.#removeHighlights()
         this.#restoreExpansionState()
         this.noResultsMessage.setAttribute('hidden', 'hidden')
         this.treeViewList?.removeAttribute('hidden')
@@ -699,7 +704,7 @@ export class FilterableTreeViewElement extends HTMLElement {
       this.treeViewList.removeAttribute('hidden')
       this.noResultsMessage.setAttribute('hidden', 'hidden')
 
-      this.#applyHighlights(allRanges)
+      if (this.#clientHighlightsEnabled) this.#applyHighlights(allRanges)
     }
   }
 

data/app/components/primer/open_project/flex_layout.rb

@@ -29,10 +29,10 @@ module Primer
         # no slot provided
         return false if rows.empty? && columns.empty? && boxes.empty?
 
-        if [rows, columns, boxes].count { |arr| !arr.empty? } == 1
+        if [rows, columns, boxes].one? { |arr| !arr.empty? }
           # only rows or columns or boxes are used
           true
-        elsif [rows, columns, boxes].count { |arr| !arr.empty? } > 1
+        elsif [rows, columns, boxes].many? { |arr| !arr.empty? }
           # rows, columns and boxes are used together, which is not allowed
           raise ArgumentError, "You can't mix row, column and box slots"
         end

data/app/components/primer/open_project/inline_message.rb

@@ -33,7 +33,7 @@ module Primer
       # @param scheme [Symbol] <%= one_of(Primer::OpenProject::InlineMessage::SCHEME_OPTIONS) %>
       # @param size [Symbol] <%= one_of(Primer::OpenProject::InlineMessage::SIZE_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(scheme:, size: DEFAULT_SIZE, **system_arguments) # rubocop:disable Lint/MissingSuper
+      def initialize(scheme:, size: DEFAULT_SIZE, **system_arguments)
         resolved_scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme)
         resolved_size   = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
 

data/app/components/primer/open_project/input_group.html.erb

@@ -4,6 +4,15 @@
     <%= trailing_action %>
   <% end %>
 
+  <% if @text_input_validation_message %>
+    <div class="FormControl-inlineValidation mt-1" id="<%= @text_input_validation_message_id %>">
+      <span class="FormControl-inlineValidation--visual">
+        <%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %>
+      </span>
+      <span><%= @text_input_validation_message %></span>
+    </div>
+  <% end %>
+
   <% if caption %>
     <%= caption %>
   <% end %>

data/app/components/primer/open_project/input_group.rb

@@ -49,6 +49,19 @@ module Primer
       renders_one :text_input, lambda { |readonly: true, **system_arguments|
         deny_single_argument(:input_width, "Set the `input_width` on the `InputGroup`", **system_arguments)
         deny_single_argument(:caption, "Set the `caption` on the `InputGroup`", **system_arguments)
+
+        # Extract validation_message so it can be rendered outside the flex row.
+        # This prevents the trailing action from misaligning when validation is present.
+        @text_input_validation_message = system_arguments.delete(:validation_message)
+        if @text_input_validation_message
+          @text_input_validation_message_id = self.class.generate_id(base_name: "input-group-validation")
+          system_arguments[:invalid] = true
+          system_arguments[:aria] = merge_aria(
+            system_arguments,
+            { aria: { describedby: @text_input_validation_message_id } }
+          )
+        end
+
         system_arguments[:input_width] = @system_arguments[:input_width]
 
         system_arguments[:classes] = class_names(

data/app/components/primer/open_project/page_header.rb

@@ -288,7 +288,7 @@ module Primer
       end
 
       def render_mobile_menu?
-        actions.count > 1
+        actions.many?
       end
 
       def show_state?

data/app/components/primer/open_project/page_header_element.js

@@ -15,7 +15,7 @@ let PageHeaderElement = class PageHeaderElement extends HTMLElement {
     }
 };
 PageHeaderElement = __decorate([
-    controller
+    controller('page-header')
 ], PageHeaderElement);
 if (!window.customElements.get('page-header')) {
     window.PageHeaderElement = PageHeaderElement;

data/app/components/primer/open_project/page_header_element.ts

@@ -1,6 +1,6 @@
 import {controller} from '@github/catalyst'
 
-@controller
+@controller('page-header')
 class PageHeaderElement extends HTMLElement {
   menuItemClick(event: Event) {
     const currentTarget = event.currentTarget as HTMLButtonElement

data/app/components/primer/open_project/pagination.rb

@@ -269,9 +269,7 @@ module Primer
           key = :"page-#{page[:num]}-break"
           content = "…"
 
-          props.merge!(
-            role: "presentation"
-          )
+          props[:role] = "presentation"
         end
 
         props[:class] = class_names("Page", props[:class])

data/app/components/primer/open_project/sub_header/button.rb

@@ -35,7 +35,7 @@ module Primer
       def call
         render(@button) do |button|
           button.with_leading_visual_icon(icon: @icon)
-          content
+          content || I18n.t("button_all_filters")
         end
       end
     end

data/app/components/primer/open_project/sub_header.html.erb

@@ -7,6 +7,14 @@
 
     <%= render @collapsed_filter_trigger if @collapsed_filter_trigger.present? %>
 
+    <%= segmented_control %>
+
+    <% if @segmented_control_block.present? %>
+      <%= render(@mobile_segmented_control) do |control| %>
+        <% @segmented_control_block.call(control) %>
+      <% end %>
+    <% end %>
+
     <%= quick_sort %>
     <%= quick_group %>
     <% quick_filters.each do |quick_filter| %>
@@ -15,14 +23,6 @@
 
     <%= render(@mobile_filter_button) if @mobile_filter_button.present? %>
     <%= filter_button %>
-
-    <%= segmented_control %>
-
-    <% if @segmented_control_block.present? %>
-      <%= render(@mobile_segmented_control) do |control| %>
-        <% @segmented_control_block.call(control) %>
-      <% end %>
-    <% end %>
   </div>
 
   <div class="SubHeader-middlePane SubHeader-hiddenOnExpand">

data/app/components/primer/open_project/sub_header.rb

@@ -40,7 +40,7 @@ module Primer
               @mobile_actions ||= []
               mobile_component =  Primer::Beta::IconButton.new(display: MOBILE_ACTIONS_DISPLAY,
                                                                **icon_args)
-              @mobile_actions.push({ component: mobile_component, block: block})
+              @mobile_actions.push({ component: mobile_component, block: block })
 
               Primer::OpenProject::SubHeader::Button.new(display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
             end
@@ -65,9 +65,9 @@ module Primer
             mobile_component =  Primer::OpenProject::SubHeader::Menu.new(icon_only: true,
                                                                          display: MOBILE_ACTIONS_DISPLAY,
                                                                          **kwargs)
-            @mobile_actions.push({ component: mobile_component, block: block})
+            @mobile_actions.push({ component: mobile_component, block: block })
 
-            Primer::OpenProject::SubHeader::Menu.new(icon_only: icon_only,display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
+            Primer::OpenProject::SubHeader::Menu.new(icon_only: icon_only, display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
           },
         }
       }
@@ -131,9 +131,10 @@ module Primer
       # To render custom content, call the `with_filter_component` method and pass a block that returns HTML.
       renders_one :filter_button, types: {
         button: {
-          renders: lambda { |icon_only: false, leading_icon: :filter, mobile_label: I18n.t("button_filter"), **kwargs|
+          renders: lambda { |icon_only: false, leading_icon: :filter, mobile_label: I18n.t("button_all_filters"), **kwargs|
             kwargs[:mr] ||= 2
             kwargs[:icon] = leading_icon
+            kwargs[:scheme] ||= :invisible
 
             kwargs[:aria] ||= merge_aria(
               kwargs,
@@ -146,7 +147,7 @@ module Primer
             if icon_only
               Primer::Beta::IconButton.new(**icon_args)
             else
-              @mobile_filter_button =  Primer::Beta::IconButton.new(display: MOBILE_ACTIONS_DISPLAY,
+              @mobile_filter_button = Primer::Beta::IconButton.new(display: MOBILE_ACTIONS_DISPLAY,
                                                                     **icon_args)
 
               Primer::OpenProject::SubHeader::Button.new(display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
@@ -194,18 +195,18 @@ module Primer
       }
 
       renders_one :segmented_control, lambda { |**system_arguments, &block|
-          deny_tag_argument(**system_arguments)
-          system_arguments[:mr] ||= 2
-          system_arguments = set_as_hidden_filter_target(system_arguments)
-
-          @segmented_control_block = block
-          @mobile_segmented_control = Primer::OpenProject::SubHeader::SegmentedControl.new(
-            hide_labels: true,
-            display: MOBILE_ACTIONS_DISPLAY,
-            **system_arguments
-          )
-
-          Primer::OpenProject::SubHeader::SegmentedControl.new(display: DESKTOP_ACTIONS_DISPLAY, **system_arguments)
+        deny_tag_argument(**system_arguments)
+        system_arguments[:mr] ||= 2
+        system_arguments = set_as_hidden_filter_target(system_arguments)
+
+        @segmented_control_block = block
+        @mobile_segmented_control = Primer::OpenProject::SubHeader::SegmentedControl.new(
+          hide_labels: true,
+          display: MOBILE_ACTIONS_DISPLAY,
+          **system_arguments
+        )
+
+        Primer::OpenProject::SubHeader::SegmentedControl.new(display: DESKTOP_ACTIONS_DISPLAY, **system_arguments)
       }
 
       renders_one :text, lambda { |**system_arguments|
@@ -226,7 +227,7 @@ module Primer
 
       # @param collapsed_search [Boolean] When true, the search bar starts collapsed as an icon button on all screen sizes. Clicking expands it.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(collapsed_search: false, **system_arguments)
+      def initialize(collapsed_search: true, **system_arguments)
         @collapsed_search = collapsed_search
         @system_arguments = system_arguments
         @system_arguments[:tag] = :"sub-header"

data/app/components/primer/open_project/sub_header_element.js

@@ -69,7 +69,7 @@ __decorate([
     targets
 ], SubHeaderElement.prototype, "filterExpandButton", void 0);
 SubHeaderElement = __decorate([
-    controller
+    controller('sub-header')
 ], SubHeaderElement);
 if (!window.customElements.get('sub-header')) {
     window.SubHeaderElement = SubHeaderElement;

data/app/components/primer/open_project/sub_header_element.ts

@@ -1,6 +1,6 @@
 import {controller, target, targets} from '@github/catalyst'
 
-@controller
+@controller('sub-header')
 class SubHeaderElement extends HTMLElement {
   @target filterInput: HTMLInputElement
   @targets shownItemsOnExpandedFilter: HTMLElement[]

data/app/components/primer/open_project/zen_mode_button.js

@@ -56,7 +56,7 @@ __decorate([
     target
 ], ZenModeButtonElement.prototype, "button", void 0);
 ZenModeButtonElement = __decorate([
-    controller
+    controller('zen-mode-button')
 ], ZenModeButtonElement);
 if (!window.customElements.get('zen-mode-button')) {
     window.ZenModeButtonElement = ZenModeButtonElement;

data/app/components/primer/open_project/zen_mode_button.ts

@@ -1,6 +1,6 @@
 import {controller, target} from '@github/catalyst'
 
-@controller
+@controller('zen-mode-button')
 class ZenModeButtonElement extends HTMLElement {
   @target button: HTMLElement
   inZenMode = false

data/app/controllers/primer/view_components/filterable_tree_view_items_controller.rb

@@ -165,15 +165,32 @@ module Primer
       def index
         query = params[:query].to_s.strip
         select_variant = (params[:select_variant].presence || "multiple").to_sym
+        server_highlights = params[:server_highlights] == "true"
         nodes = TREE.filter_map { |node| node.filter(query) }
 
-        render locals: {
-          nodes: nodes,
-          query: query,
-          select_variant: select_variant
-        }
+        if server_highlights && query.present?
+          html = render_to_string locals: { nodes:, query:, select_variant: }
+          render html: inject_highlights(html, query)
+        else
+          render locals: { nodes:, query:, select_variant: }
+        end
       end
 
+      private
+
+      # Post-processes the rendered tree HTML to wrap matching label text in <mark> tags.
+      # This avoids html_safety issues with passing markup through ViewComponent's label slot.
+      # Only called in the demo endpoint when server_highlights=true is requested.
+      def inject_highlights(html, query)
+        escaped_query = Regexp.escape(CGI.escapeHTML(query))
+        html.gsub(
+          /(<span class="TreeViewItemContentText">)([^<]*)(#{escaped_query})([^<]*)(<\/span>)/i,
+          '\1\2<mark>\3</mark>\4\5'
+        ).html_safe
+      end
+
+      public
+
       def async_form_tree
         query = params[:query].to_s.strip
         name = params[:name].to_s.presence || "characters"

data/config/locales/en.yml

@@ -5,6 +5,7 @@ en:
   button_close: "Close"
   button_delete: "Delete"
   button_delete_permanently: "Delete permanently"
+  button_all_filters: "All filters"
   button_filter: "Filter"
   button_save: "Save"
 

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 87
+      MINOR = 89
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/alpha/tree_view_preview/doubled_path.html.erb

@@ -0,0 +1,12 @@
+<div style="max-width: 400px">
+  <%= render(Primer::Alpha::TreeView.new) do |tree_view| %>
+    <% tree_view.with_sub_tree(label: "src", expanded: true, select_variant: :single) do |sub_tree| %>
+      <% sub_tree.with_leaf(label: "button.rb", select_variant: :single) %>
+      <% sub_tree.with_leaf(label: "icon_button.rb", current: true, select_variant: :single) %>
+    <% end %>
+
+    <% tree_view.with_leaf(label: "action_menu.rb", select_variant: :single) %>
+    <% tree_view.with_leaf(label: "action_menu.rb", select_variant: :single) %>
+    <% tree_view.with_leaf(label: "action_menu.rb", select_variant: :single) %>
+  <% end %>
+</div>

data/previews/primer/alpha/tree_view_preview/form_input.html.erb

@@ -1,15 +1,15 @@
 <%= form_with(url: primer_view_components.generic_form_submission_path(format: :json)) do |f| %>
   <%= render(Primer::Alpha::Stack.new) do %>
     <%= render(Primer::Alpha::TreeView.new(form_arguments: { builder: f, name: "folder_structure" })) do |tree| %>
-      <% tree.with_sub_tree(label: "src", expanded: expanded, select_variant: select_variant, value: 0) do |sub_tree| %>
-        <% sub_tree.with_leaf(label: "button.rb", select_variant: select_variant, value: 1, checked: true) %>
-        <% sub_tree.with_leaf(label: "icon_button.rb", current: true, select_variant: select_variant, value: 2) %>
+      <% tree.with_sub_tree(label: "src", expanded: expanded, select_variant: select_variant, value: 0, data: { node_id: "src" }) do |sub_tree| %>
+        <% sub_tree.with_leaf(label: "button.rb", select_variant: select_variant, value: 1, checked: true, data: { node_id: "src-button-rb" }) %>
+        <% sub_tree.with_leaf(label: "icon_button.rb", current: true, select_variant: select_variant, value: 2, data: { node_id: "src-icon-button-rb" }) %>
       <% end %>
 
-      <% tree.with_leaf(label: "action_menu.rb", select_variant: select_variant, value: 3) %>
-      <% tree.with_sub_tree(label: "Docs & legal requirements", select_variant: select_variant, value: 4) do |sub_tree| %>
-        <% sub_tree.with_leaf(label: "Readme.md", select_variant: select_variant, value: 5) %>
-        <% sub_tree.with_leaf(label: "Copyright.md", select_variant: select_variant, value: 6) %>
+      <% tree.with_leaf(label: "action_menu.rb", select_variant: select_variant, value: 3, data: { node_id: "action-menu-rb" }) %>
+      <% tree.with_sub_tree(label: "Docs & legal requirements", select_variant: select_variant, value: 4, data: { node_id: "docs" }) do |sub_tree| %>
+        <% sub_tree.with_leaf(label: "Readme.md", select_variant: select_variant, value: 5, data: { node_id: "docs-readme-md" }) %>
+        <% sub_tree.with_leaf(label: "Copyright.md", select_variant: select_variant, value: 6, data: { node_id: "docs-copyright-md" }) %>
       <% end %>
     <% end %>
 

data/previews/primer/alpha/tree_view_preview.rb

@@ -197,6 +197,12 @@ module Primer
         })
       end
 
+      # @label Doubled paths
+      # @hidden
+      def doubled_path
+        render_with_template
+      end
+
       private
 
       def coerce_bool(value)

data/previews/primer/open_project/filterable_tree_view_preview/async_server_highlights.html.erb

@@ -0,0 +1,4 @@
+<%= render(Primer::OpenProject::FilterableTreeView.new(
+  show_search_highlighting: false,
+  src: primer_view_components.filterable_tree_view_items_tree_path(select_variant: select_variant, server_highlights: true)
+)) %>

data/previews/primer/open_project/filterable_tree_view_preview.rb

@@ -123,6 +123,18 @@ module Primer
         })
       end
 
+      # @label Async (with server-side highlighting)
+      #
+      # Demonstrates `show_search_highlighting: false`: the client skips its own highlight logic
+      # and the server is responsible for wrapping matching text in `<mark>` (or other HTML) elements.
+      #
+      # @param select_variant [Symbol] select [multiple, single, none]
+      def async_server_highlights(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

data/previews/primer/open_project/input_group_preview.rb

@@ -71,6 +71,15 @@ module Primer
           menu.with_caption { "Some caption" }
         end
       end
+
+      # @label With error message
+      # @snapshot
+      def with_error_message
+        render(Primer::OpenProject::InputGroup.new) do |menu|
+          menu.with_text_input(name: "a name", label: "My input group", validation_message: "Custom validation message", value: "Copyable value")
+          menu.with_trailing_action_clipboard_copy_button(id: "button", value: "Copyable value", aria: { label: "Copy some text" })
+        end
+      end
     end
   end
 end

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

@@ -1,7 +1,7 @@
-<%= render(Primer::OpenProject::SubHeader.new(collapsed_search: true)) do |component|
+<%= render(Primer::OpenProject::SubHeader.new) do |component|
   component.with_filter_input(name: "filter", label: "Filter")
 
-  component.with_filter_button(mobile_label: "All filters") do
+  component.with_filter_button do
     "All filters"
   end
 

data/previews/primer/open_project/sub_header_preview.rb

@@ -22,16 +22,17 @@ module Primer
         show_filter_button: true,
         show_quick_filter: true,
         show_action_button: true,
-        collapsed_search: false,
+        collapsed_search: true,
         text: nil,
         value: nil
       )
-        render_with_template(locals: {show_filter_input: show_filter_input,
-                                      show_clear_button: show_clear_button,
-                                      show_filter_button: show_filter_button,
-                                      show_quick_filter: show_quick_filter,
-                                      show_action_button: show_action_button,
-                                      collapsed_search: collapsed_search,
+        bool = ActiveModel::Type::Boolean.new
+        render_with_template(locals: {show_filter_input: bool.cast(show_filter_input),
+                                      show_clear_button: bool.cast(show_clear_button),
+                                      show_filter_button: bool.cast(show_filter_button),
+                                      show_quick_filter: bool.cast(show_quick_filter),
+                                      show_action_button: bool.cast(show_action_button),
+                                      collapsed_search: bool.cast(collapsed_search),
                                       text: text,
                                       value: value})
       end
@@ -42,7 +43,6 @@ module Primer
           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
@@ -93,11 +93,11 @@ module Primer
         end
       end
 
-      # @label With collapsed search
-      def collapsed_search
-        render(Primer::OpenProject::SubHeader.new(collapsed_search: true)) do |component|
+      # @label With expanded search
+      def expanded_search
+        render(Primer::OpenProject::SubHeader.new(collapsed_search: false)) do |component|
           component.with_filter_input(name: "filter", label: "Filter")
-          component.with_filter_button do |button|
+          component.with_filter_button(scheme: :default) do |button|
             button.with_trailing_visual_counter(count: "15")
             "Filter"
           end

data/static/arguments.json

@@ -6188,25 +6188,25 @@
       {
         "name": "filter_input_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_FILTER_INPUT_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to the [TextField](/components/alpha/textfield) component."
       },
       {
         "name": "filter_mode_control_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_FILTER_MODE_CONTROL_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to the [SegmentedControl](/components/alpha/segmentedcontrol) component."
       },
       {
         "name": "include_sub_items_check_box_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to the [CheckBox](/components/alpha/checkbox) component."
       },
       {
         "name": "no_results_node_arguments",
         "type": "Hash",
-        "default": "`DEFAULT_NO_RESULTS_NODE_ARGUMENTS.dup`",
+        "default": "`{}`",
         "description": "Arguments that will be passed to a [TreeView::LeafNode](/components/alpha/treeviewleafnode) component that appears when no items match the filter criteria."
       }
     ]
@@ -6600,12 +6600,12 @@
     ]
   },
   {
-    "component": "OpenProject::SubHeader::QuickActionComponent",
+    "component": "OpenProject::SubHeader::QuickAction",
     "status": "open_project",
     "a11y_reviewed": false,
-    "short_name": "OpenProjectSubHeaderQuickActionComponent",
-    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header/quick_filter.rb",
-    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/quick_filter/default/",
+    "short_name": "OpenProjectSubHeaderQuickAction",
+    "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header/quick_action_component.rb",
+    "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/quick_action/default/",
     "parameters": []
   },
   {