diff --git a/.changeset/cuddly-stingrays-camp.md b/.changeset/cuddly-stingrays-camp.md new file mode 100644 index 0000000000..02a6732804 --- /dev/null +++ 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 + + diff --git a/app/components/primer/alpha/action_bar.rb b/app/components/primer/alpha/action_bar.rb index 79c3b65432..a8473e6bc2 100644 --- 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 index 28e571d03f..6a507c99e7 100644 --- 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 index ccc43df19b..c1a4487bfa 100644 --- 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