Adding optional wrapper arguments to IconButton (#1394)

* Adding optional wrapper arguments to IconButton * Create wicked-jokes-shave.md
primer · Sep 21, 2022 · 27d8233 · 27d8233
1 parent 1ad8cfa
commit 27d8233
Show file tree

Hide file tree

Showing 6 changed files with 23 additions and 2 deletions.
diff --git a/.changeset/wicked-jokes-shave.md b/.changeset/wicked-jokes-shave.md
@@ -0,0 +1,5 @@
+---
+"@primer/view-components": patch
+---
+
+Adding optional wrapper arguments to IconButton
diff --git a/app/components/primer/beta/icon_button.html.erb b/app/components/primer/beta/icon_button.html.erb
@@ -1,4 +1,4 @@
-<%= render Primer::ConditionalWrapper.new(condition: render_tooltip?, tag: :div, classes: "Button-withTooltip") do %>
+<%= render Primer::ConditionalWrapper.new(condition: render_tooltip?, tag: :div, classes: "Button-withTooltip", **@wrapper_arguments) do %>
   <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%>
     <%= render Primer::OcticonComponent.new(icon: @icon, classes: "Button-visual") %>
   <% end -%>

diff --git a/app/components/primer/beta/icon_button.rb b/app/components/primer/beta/icon_button.rb
@@ -47,6 +47,7 @@ class IconButton < Primer::Component
       #   <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %>
       #
       # @param icon [String] Name of <%= link_to_octicons %> to use.
+      # @param wrapper_arguments [Hash] Optional keyword arguments to be passed to the wrapper `<div>` tag.
       # @param scheme [Symbol] <%= one_of(Primer::Beta::IconButton::SCHEME_OPTIONS) %>
       # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
       # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %>
@@ -55,9 +56,10 @@ class IconButton < Primer::Component
       # @param aria-description [String] String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information.
       # @param tooltip_direction [Symbol] (Primer::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(icon:, scheme: DEFAULT_SCHEME, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments)
+      def initialize(icon:, scheme: DEFAULT_SCHEME, wrapper_arguments: {}, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments)
         @icon = icon
 
+        @wrapper_arguments = wrapper_arguments
         @system_arguments = system_arguments
         @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}"
 

diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml
@@ -123,3 +123,5 @@
     url: "/adr/0250-developing-and-publishing-clientside-behaviours"
   - title: 251. Use Catalyst for client-side behaviours
     url: "/adr/0251-use-catalyst-for-client-side-behaviours"
+  - title: 252. Build component css with ruby code
+    url: "/adr/0252-build-component-css-with-ruby-code"
diff --git a/static/arguments.json b/static/arguments.json
@@ -1047,6 +1047,12 @@
         "default": "N/A",
         "description": "Name of [Octicon](https://primer.style/octicons/) to use."
       },
+      {
+        "name": "wrapper_arguments",
+        "type": "Hash",
+        "default": "`{}`",
+        "description": "Optional keyword arguments to be passed to the wrapper `<div>` tag."
+      },
       {
         "name": "scheme",
         "type": "Symbol",

diff --git a/test/components/primer/beta/icon_button_test.rb b/test/components/primer/beta/icon_button_test.rb
@@ -13,4 +13,10 @@ def test_renders
     end
     assert_selector("tool-tip", text: "Star", visible: :all)
   end
+
+  def test_adds_wrapper_arguments
+    render_inline(Primer::Beta::IconButton.new(icon: :star, "aria-label": "Star", wrapper_arguments: { id: "foo" }))
+
+    assert_selector(".Button-withTooltip#foo")
+  end
 end