Add ability to attach action menus to button group buttons (#2607)

Co-authored-by: camertron <camertron@users.noreply.github.com>
Co-authored-by: Katie Langerman <18661030+langermank@users.noreply.github.com>

.changeset/itchy-scissors-fly.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": minor
+---
+
+Add ability to attach action menus to button group buttons

app/components/primer/beta/button_group.rb

@@ -14,14 +14,21 @@ class ButtonGroup < Primer::Component
       #   def with_button(icon: nil, **system_arguments)
       #   end
 
+      # @!parse
+      #   # Adds a button that activates a menu when clicked.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::ButtonGroup::MenuButton) %>.
+      #   def with_menu_button(**system_arguments)
+      #   end
+
       # @!parse
       #   # Adds a <%= link_to_component(Primer::Beta::ClipboardCopyButton) %>.
       #   #
       #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::ClipboardCopyButton) %>.
       #   def with_clipboard_copy_button(**system_arguments)
       #   end
 
-      # List of buttons to be rendered. Add buttons via the `#with_button` and `#with_clipboard_copy_button` methods (see below).
+      # List of buttons to be rendered. Add buttons via the `#with_button`, `#with_menu_button`, and `#with_clipboard_copy_button` methods (see below).
       renders_many :buttons, types: {
         button: {
           renders: lambda { |icon: nil, **kwargs|
@@ -38,6 +45,14 @@ class ButtonGroup < Primer::Component
           as: :button
         },
 
+        menu_button: {
+          renders: lambda { |**system_arguments|
+            MenuButton.new(**system_arguments)
+          },
+
+          as: :menu_button
+        },
+
         clipboard_copy_button: {
           renders: lambda { |**kwargs|
             kwargs[:size] = @size
@@ -67,6 +82,43 @@ def initialize(scheme: Primer::Beta::Button::DEFAULT_SCHEME, size: Primer::Beta:
       def render?
         buttons.any?
       end
+
+      # Renders a button in a <%= link_to_component(Primer::Beta::ButtonGroup) %> that displays an <%= link_to_component(Primer::Alpha::ActionMenu) %> when clicked.
+      # This component should not be used outside of a `ButtonGroup` context.
+      #
+      # This component yields both the button and the list to the block when rendered.
+      #
+      # ```erb
+      # <%= render(Primer::Beta::ButtonGroup.new) do |group| %>
+      #   <% group.with_menu_button do |menu, button| %>
+      #     <% menu.with_item(label: "Item 1") %>
+      #     <% button.with_trailing_visual_icon(icon: "triangle-down") %>
+      #   <% end %>
+      # <% end %>
+      # ```
+      #
+      class MenuButton < Primer::Component
+        # @param menu_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu) %>.
+        # @param button_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> or <%= link_to_component(Primer::Beta::IconButton) %>, depending on the value of the `icon:` argument.
+        def initialize(menu_arguments: {}, button_arguments: {})
+          @menu = Primer::Alpha::ActionMenu.new(**menu_arguments)
+          @button = @menu.with_show_button(icon: "triangle-down", **button_arguments)
+        end
+
+        def render_in(view_context, &block)
+          super(view_context) do
+            block.call(@menu, @button)
+          end
+        end
+
+        def before_render
+          content
+        end
+
+        def call
+          render(@menu)
+        end
+      end
     end
   end
 end

previews/primer/beta/button_group_preview.rb

@@ -39,6 +39,12 @@ def split_button(size: :medium)
         end
       end
 
+      # @label With menu button
+      #
+      # @snapshot
+      def with_menu_button
+      end
+
       # @label Icon buttons
       #
       # @param size [Symbol] select [medium, small]

previews/primer/beta/button_group_preview/with_menu_button.html.erb

@@ -0,0 +1,7 @@
+<%= render(Primer::Beta::ButtonGroup.new) do |component| %>
+  <% component.with_button { "Main menu" } %>
+  <% component.with_menu_button(button_arguments: { "aria-label": "secondary menu" }, menu_arguments: { anchor_align: :end }) do |menu, button| %>
+    <% menu.with_item(label: "Item 1", item_id: :item1) %>
+    <% menu.with_item(label: "Item 2", item_id: :item2) %>
+  <% end %>
+<% end %>

test/components/beta/button_group_test.rb

@@ -80,6 +80,15 @@ def test_button_with_icon_button
           assert_selector(".octicon.octicon-star")
         end
       end
+
+      def test_menu_button
+        render_preview(:with_menu_button)
+
+        assert_selector("action-menu") do |menu|
+          menu.assert_selector("li[data-item-id=item1]", text: "Item 1")
+          menu.assert_selector("li[data-item-id=item2]", text: "Item 2")
+        end
+      end
     end
   end
 end

test/system/beta/button_group_test.rb

@@ -15,5 +15,14 @@ def test_clipboard_copy_button_copies_text
 
       assert_equal "Copyable value", clipboard_text
     end
+
+    def test_menu_button
+      visit_preview(:with_menu_button)
+
+      find("action-menu button[aria-controls]").click
+
+      assert_selector "li[data-item-id=item1]", text: "Item 1"
+      assert_selector "li[data-item-id=item2]", text: "Item 2"
+    end
   end
 end