Add icon button to overlay show (#1865)

.changeset/fast-turtles-pull.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Add aria attributes to Overlay show_button

.changeset/fresh-nails-rescue.md

@@ -0,0 +1,5 @@
+---
+'@primer/view-components': patch
+---
+
+Allow for IconButtons in overlay show_button

app/components/primer/alpha/overlay.rb

@@ -68,14 +68,18 @@ class Overlay < Primer::Component
       # Optional button to open the Overlay.
       #
       # @param system_arguments [Hash] The same arguments as <%= link_to_component(Primer::ButtonComponent) %>.
-      renders_one :show_button, lambda { |**system_arguments|
+      renders_one :show_button, lambda { |icon: nil, **system_arguments|
         system_arguments[:classes] = class_names(
           system_arguments[:classes]
         )
-        system_arguments[:id] = "overlay-show-#{@system_arguments[:id]}"
-        system_arguments["popovertoggletarget"] = @system_arguments[:id]
-        system_arguments[:data] = (system_arguments[:data] || {}).merge({ "show-dialog-id": @system_arguments[:id] })
-        Primer::Beta::Button.new(**system_arguments)
+        system_arguments[:id] = show_button_id
+        system_arguments["popovertoggletarget"] = overlay_id
+        system_arguments[:aria] = (system_arguments[:aria] || {}).merge({ controls: overlay_id, haspopup: "true" })
+        if icon.present?
+          Primer::Beta::IconButton.new(icon: icon, **system_arguments)
+        else
+          Primer::Beta::Button.new(**system_arguments)
+        end
       }
 
       # Header content.
@@ -188,6 +192,16 @@ def before_render
         with_header unless header?
         with_body unless body?
       end
+
+      private
+
+      def overlay_id
+        @system_arguments[:id]
+      end
+
+      def show_button_id
+        "overlay-show-#{overlay_id}"
+      end
     end
   end
 end

previews/primer/alpha/overlay_preview.rb

@@ -20,7 +20,8 @@ class OverlayPreview < ViewComponent::Preview
       # @param header_size [Symbol] select [medium, large]
       # @param button_text [String] text
       # @param body_text [String] text
-      def playground(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto, padding: :normal, anchor_align: :center, anchor_offset: :normal, anchor_side: :outside_bottom, allow_out_of_bounds: false, visually_hide_title: false, header_size: :medium, button_text: "Show Overlay", body_text: "")
+      # @param icon [Symbol] octicon
+      def playground(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto, padding: :normal, anchor_align: :center, anchor_offset: :normal, anchor_side: :outside_bottom, allow_out_of_bounds: false, visually_hide_title: false, header_size: :medium, button_text: "Show Overlay", body_text: "", icon: :none)
         render(Primer::Alpha::Overlay.new(
                  title: title,
                  subtitle: subtitle,
@@ -34,7 +35,11 @@ def playground(title: "Test Overlay", subtitle: nil, role: :dialog, size: :auto,
                  visually_hide_title: visually_hide_title,
                )) do |d|
           d.with_header(title: title, size: header_size)
-          d.with_show_button { button_text }
+          if icon.present? and icon != :none
+            d.with_show_button(icon: icon, "aria-label": icon.to_s)
+          else
+            d.with_show_button { button_text }
+          end
           d.with_body { body_text }
         end
       end

test/components/primer/alpha/overlay_test.rb

@@ -33,6 +33,15 @@ def test_renders_show_button
     assert_selector("[popovertoggletarget]")
   end
 
+  def test_renders_show_icon_button
+    render_inline(Primer::Alpha::Overlay.new(title: "Title", role: :dialog)) do |component|
+      component.with_body { "Hello" }
+      component.with_show_button(icon: :star, "aria-label": "Star")
+    end
+
+    assert_selector("[popovertoggletarget]")
+  end
+
   def test_raises_on_missing_title
     error = assert_raises(ArgumentError) do
       render_inline(Primer::Alpha::Overlay.new(role: :dialog))