Adding an optional items_arguments to ActionBar::Item (#2276)

primer · Oct 4, 2023 · 7184d76 · 7184d76
1 parent 70b096f
commit 7184d76
Show file tree

Hide file tree

Showing 4 changed files with 24 additions and 6 deletions.
diff --git a/.changeset/cuddly-stingrays-camp.md b/.changeset/cuddly-stingrays-camp.md
@@ -0,0 +1,7 @@
+---
+'@primer/view-components': minor
+---
+
+Adding option item_arguments hash argument to ActionBar::Item that will control the item system arguments
+
+<!-- Changed components: Primer::Alpha::ActionBar -->
diff --git a/app/components/primer/alpha/action_bar.rb b/app/components/primer/alpha/action_bar.rb
@@ -16,14 +16,14 @@ class ActionBar < Primer::Component
       SIZE_OPTIONS = SIZE_MAPPINGS.keys.freeze
 
       renders_many :items, types: {
-        icon_button: lambda { |icon:, label:, **system_arguments|
+        icon_button: lambda { |icon:, label:, item_arguments: {}, **system_arguments|
           item_id = self.class.generate_id
 
           with_menu_item(id: item_id, label: label) do |c|
             c.with_leading_visual_icon(icon: icon)
           end
 
-          Item.new(Primer::Beta::IconButton.new(id: item_id, icon: icon, "aria-label": label, size: @size, scheme: :invisible, **system_arguments))
+          Item.new(Primer::Beta::IconButton.new(id: item_id, icon: icon, "aria-label": label, size: @size, scheme: :invisible, **system_arguments), **item_arguments)
         },
         divider: lambda {
           @action_menu.with_divider(hidden: true) if @overflow_menu

diff --git a/app/components/primer/alpha/action_bar/item.rb b/app/components/primer/alpha/action_bar/item.rb
@@ -7,14 +7,17 @@ module Alpha
     class ActionBar
       # ActionBar::Item is an internal component that wraps the items in a div with the `ActionBar-item` class.
       class Item < Primer::Component
-        def initialize(item_content)
+        # @param item_content [String] The content to render inside the item.
+        # @param item_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(item_content, **item_arguments)
           @system_arguments = {
-            tag: :div,
+            tag: item_arguments[:tag] || :div,
             data: {
               targets: "action-bar.items"
-            },
-            classes: "ActionBar-item"
+            }.merge(item_arguments[:data] || {}),
+            classes: class_names("ActionBar-item", item_arguments[:classes])
           }
+
           @item_content = item_content
         end
 

diff --git a/test/components/primer/alpha/action_bar_test.rb b/test/components/primer/alpha/action_bar_test.rb
@@ -33,4 +33,12 @@ def test_size_small
 
     assert_selector("[data-targets=\"action-bar.items\"] .Button--small", count: 4)
   end
+
+  def test_item_merges_item_arguments
+    render_inline(Primer::Alpha::ActionBar.new(size: :small)) do |component|
+      component.with_item_icon_button(icon: :pencil, label: "Button 1", item_arguments: { classes: "foo", tag: :span })
+    end
+
+    assert_selector("span.foo.ActionBar-item")
+  end
 end