Add a slot to Overlay for a filter (#2651)

Signed-off-by: dependabot[bot] <[email protected]>
Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Cameron Dutro <[email protected]>
Co-authored-by: Katie Langerman <[email protected]>
Co-authored-by: Isaac Shalom <[email protected]>
Co-authored-by: thesnowrose <[email protected]>
Co-authored-by: primer-css <[email protected]>
Co-authored-by: Tyler Benning <[email protected]>
Co-authored-by: tbenning <[email protected]>
Co-authored-by: Keith Cirkel <[email protected]>
Co-authored-by: langermank <[email protected]>
Co-authored-by: camertron <[email protected]>
Co-authored-by: jonrohan <[email protected]>
Co-authored-by: Orhan Toy <[email protected]>
Co-authored-by: dependabot[bot] <dependabot[bot]@users.noreply.github.com>
Co-authored-by: primer[bot] <119360173+primer[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Co-authored-by: primer[bot] <primer[bot]@users.noreply.github.com>

Author: 11 people

.changeset/seven-pillows-explode.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": minor
+---
+
+Add a slot to `Overlay::Header` called `filter` for a filter input.

app/components/primer/alpha/dialog.pcss

@@ -265,6 +265,10 @@ dialog.Overlay:not([open]) {
   }
 }
 
+.Overlay-headerFilter {
+  padding: var(--stack-gap-condensed) var(--stack-gap-condensed) 0 var(--stack-gap-condensed);
+}
+
 /* generic body content slot */
 .Overlay-body {
   padding: var(--stack-padding-normal);

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

@@ -14,4 +14,5 @@
       </div>
     <% end %>
   </div>
+  <%= filter %>
 <% end %>

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

@@ -13,6 +13,18 @@ class Header < Primer::Component
         }.freeze
         SIZE_OPTIONS = SIZE_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 title [String] Describes the content of the Overlay.
         # @param subtitle [String] Provides additional context for the Overlay, also setting the `aria-describedby` attribute.
         # @param overlay_id [String] Provides the id of the overlay element so the close button can close it

previews/primer/alpha/overlay_preview.rb

@@ -179,6 +179,10 @@ def dialog_with_header_footer
           d.with_body { "This is a long body for the overlay dialog. <br>".html_safe * 20 }
         end
       end
+
+      def overlay_with_header_filter
+        render_with_template(locals: {})
+      end
     end
   end
 end

previews/primer/alpha/overlay_preview/overlay_with_header_filter.html.erb

@@ -0,0 +1,16 @@
+<%= render(Primer::Alpha::Overlay.new(title: "Dialog", role: :dialog, size: :large, padding: :condensed)) do |d| %>
+  <% d.with_header(title: "Large Dialog Header", divider: true) do |header| %>
+    <% header.with_filter do %>
+      <%= render Primer::Alpha::TextField.new(
+        autofocus: true,
+        visually_hide_label:
+        true,
+        name: "filter",
+        label: "Filter Overlay"
+      ) %>
+    <% end %>
+  <% end %>
+  <% d.with_show_button { "Show Overlay" } %>
+  <% d.with_footer { "Large Dialog Footer" } %>
+  <% d.with_body { "This is a long body for the overlay dialog. <br>".html_safe * 20 } %>
+<% end %>

static/classes.json

@@ -402,6 +402,9 @@
   "Overlay-header": [
     "Primer::Alpha::Dialog"
   ],
+  "Overlay-headerFilter": [
+    "Primer::Alpha::Dialog"
+  ],
   "Popover": [
     "Primer::Beta::Popover"
   ],

test/components/primer/alpha/overlay_test.rb

@@ -116,4 +116,12 @@ def test_footer_align
 
     assert_selector(".Overlay-footer.Overlay-footer--alignStart")
   end
+
+  def test_renders_header_filter
+    render_inline(Primer::Alpha::Overlay::Header.new(id: "1", title: "Header")) do |component|
+      component.with_filter { "content" }
+    end
+
+    assert_selector(".Overlay-header .Overlay-headerContentWrap + .Overlay-headerFilter")
+  end
 end