Add a filter slot to the dialog header (primer#2804)

Author: camertron

.changeset/tall-pears-vanish.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": minor
+---
+
+Add a filter slot to the dialog header

app/components/primer/alpha/dialog/header.html.erb

@@ -14,4 +14,5 @@
       <%= render Primer::Beta::CloseButton.new(classes: "Overlay-closeButton", "data-close-dialog-id": @id) %>
     </div>
   </div>
+  <%= filter %>
 <% end %>

app/components/primer/alpha/dialog/header.rb

@@ -16,6 +16,18 @@ class Header < Primer::Component
         }.freeze
         VARIANT_OPTIONS = VARIANT_MAPPINGS.keys
 
+        # Optional filter slot for adding a filter input to the header.
+        #
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        renders_one :filter, lambda { |**system_arguments|
+          system_arguments[:tag] = :div
+          system_arguments[:classes] = class_names(
+            "Overlay-headerFilter",
+            system_arguments[:classes]
+          )
+          Primer::BaseComponent.new(**system_arguments)
+        }
+
         # @param id [String] The HTML element's ID value.
         # @param title [String] Describes the content of the dialog.
         # @param subtitle [String] Provides additional context for the dialog, also setting the `aria-describedby` attribute.

previews/primer/alpha/dialog_preview.rb

@@ -296,6 +296,10 @@ def initally_open(title: "Test Dialog", subtitle: nil, size: :medium, button_tex
           d.with_body { body_text }
         end
       end
+
+      def with_header_filter
+        render_with_template(locals: {})
+      end
     end
   end
 end

previews/primer/alpha/dialog_preview/with_header_filter.html.erb

@@ -0,0 +1,19 @@
+<%= render(Primer::Alpha::Dialog.new(open: true, title: "Dialog")) do |dialog| %>
+  <% dialog.with_show_button { "Open" } %>
+  <% dialog.with_header do |header| %>
+    <% header.with_filter(pr: 3, pl: 3) do %>
+      <%= render Primer::Alpha::TextField.new(
+        autofocus: true,
+        visually_hide_label: true,
+        name: "filter",
+        label: "Filter dialog",
+      ) %>
+    <% end %>
+  <% end %>
+  <% dialog.with_body do %>
+    Body
+  <% end %>
+  <% dialog.with_footer do %>
+    Footer
+  <% end %>
+<% end %>

test/components/primer/alpha/dialog_test.rb

@@ -91,6 +91,16 @@ def test_renders_large_header
         end
       end
 
+      def test_renders_header_with_filter
+        render_preview(:with_header_filter)
+
+        assert_selector("dialog") do |dialog|
+          dialog.assert_selector(".Overlay-header") do |header|
+            header.assert_selector("input[type=text]")
+          end
+        end
+      end
+
       def test_renders_footer_without_divider_by_default
         render_inline(Primer::Alpha::Dialog.new(title: "Title", id: "my-dialog", subtitle: "Subtitle")) do |component|
           component.with_body { "content" }