Allow ActionMenu as sidepanel section action

.changeset/strong-months-carry.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": minor
+---
+
+Allow ActionMenu as sidepanel section action

app/components/primer/open_project/side_panel/section.rb

@@ -21,7 +21,18 @@ class Section < Primer::Component
           icon: lambda { |**system_arguments, &block|
             system_arguments[:scheme] ||= :invisible
             Primer::Beta::IconButton.new(**system_arguments, &block)
-          }
+          },
+          menu: lambda { |**system_arguments, &block|
+            deny_tag_argument(**system_arguments)
+
+            button_arguments = system_arguments.delete(:button_arguments) || {}
+            button_arguments[:scheme] ||= :invisible
+            raise ArgumentError.new("button_arguments must contain an icon:") if button_arguments[:icon].blank?
+
+            Primer::Alpha::ActionMenu.new(**system_arguments).tap do |menu|
+              menu.with_show_button(**button_arguments)
+            end
+          },
         }
 
         renders_one :description, lambda { |**system_arguments, &block|

previews/primer/open_project/side_panel_preview.rb

@@ -33,6 +33,10 @@ def default
       # @label With custom component
       def with_component
       end
+
+      # @label With action menu
+      def with_action_menu
+      end
     end
   end
 end

previews/primer/open_project/side_panel_preview/with_action_menu.html.erb

@@ -0,0 +1,37 @@
+<%=
+  clazz = Class.new(ViewComponent::Base) do
+    def self.name
+      "CustomComponent"
+    end
+
+    def call
+      render(Primer::OpenProject::SidePanel::Section.new) do |section|
+        section.with_title { "My custom component" }
+        section.with_action_menu(
+          anchor_align: :end,
+          button_arguments: { icon: :gear, 'aria-label': 'Edit' }
+        ) do |menu|
+          menu.with_item(label: "Subitem 1") do |item|
+            item.with_leading_visual_icon(icon: :paste)
+          end
+          menu.with_item(label: "Subitem 2") do |item|
+            item.with_leading_visual_icon(icon: :log)
+          end
+        end
+
+        "Section content"
+      end
+    end
+  end
+
+  render(Primer::Alpha::Layout.new) do |component|
+    component.with_main do
+      "Main content"
+    end
+    component.with_sidebar(row_placement: :start, col_placement: :end) do
+      render(Primer::OpenProject::SidePanel.new) do |panel|
+        panel.with_section(clazz.new)
+      end
+    end
+  end
+%>

test/components/primer/open_project/side_panel_test.rb

@@ -62,6 +62,24 @@ def call
     assert_text("custom content")
   end
 
+  def test_renders_action_menu
+    render_inline(Primer::OpenProject::SidePanel.new) do |component|
+      component.with_section do |section|
+        section.with_title { "Section with menu" }
+        section.with_action_menu(button_arguments: { icon: :pencil, "aria-label": "Menu" }) do |menu|
+          menu.with_item { "Menu item" }
+        end
+
+        "Section content"
+      end
+    end
+
+    assert_selector(".SidePanel")
+    assert_selector(".SidePanel section", count: 1)
+    assert_selector(".SidePanel action-menu")
+    assert_selector("li.ActionListItem", count: 1)
+  end
+
   def test_no_renders_empty_section
     render_inline(Primer::OpenProject::SidePanel.new) do |component|
       component.with_section do |section|