Add subtitle slot to the Primer::Alpha::Overlay::Header and Primer::A…

…lpha::Dialog::Header (#2808)

Co-authored-by: Cameron Dutro <camertron@gmail.com>

.changeset/forty-rings-chew.md

@@ -0,0 +1,5 @@
+---
+"@primer/view-components": minor
+---
+
+Adds a subtitle slot to the Primer::Alpha::Overlay::Header and Primer::Alpha::Dialog::Header

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

@@ -8,6 +8,8 @@
         <%= content %>
       <% elsif @subtitle.present? %>
         <h2 id="<%= @id %>-description" class="Overlay-description"><%= @subtitle %></h2>
+      <% else %>
+        <%= subtitle %>
       <% end %>
     </div>
     <div class="Overlay-actionWrap">

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

@@ -28,6 +28,20 @@ class Header < Primer::Component
           Primer::BaseComponent.new(**system_arguments)
         }
 
+        # Optional subtitle slot for adding a subtitle to the header.
+        #
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        renders_one :subtitle, lambda { |**system_arguments|
+          raise ArgumentError, "Do not use the subtitle slot if you are passing subtitle in as an argument" if @subtitle.present? && !Rails.env.production?
+
+          system_arguments[:tag] = :h2
+          system_arguments[:classes] = class_names(
+            "Overlay-description",
+            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.

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

@@ -6,6 +6,8 @@
         <%= content %>
       <% elsif @subtitle.present? %>
         <h2 class="Overlay-description"><%= @subtitle %></h2>
+      <% else %>
+        <%= subtitle %>
       <% end %>
     </div>
     <% if @overlay_id %>

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

@@ -25,6 +25,21 @@ class Header < Primer::Component
           Primer::BaseComponent.new(**system_arguments)
         }
 
+
+        # Optional subtitle slot for adding a subtitle to the header.
+        #
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        renders_one :subtitle, lambda { |**system_arguments|
+          raise ArgumentError, "Do not use the subtitle slot if you are passing subtitle in as an argument" if @subtitle.present? && !Rails.env.production?
+
+          system_arguments[:tag] = :h2
+          system_arguments[:classes] = class_names(
+            "Overlay-description",
+            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

@@ -184,6 +184,17 @@ def overlay_with_header_filter
         render_with_template(locals: {})
       end
 
+      def overlay_with_header_subtitle
+        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 |h|
+            h.with_subtitle {"A subtitle"}
+          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
+      end
+
       def overlay_with_three_bodies
         render_with_template(locals: {})
       end

static/previews.json

@@ -4966,6 +4966,19 @@
           ]
         }
       },
+      {
+        "preview_path": "primer/alpha/overlay/overlay_with_header_subtitle",
+        "name": "overlay_with_header_subtitle",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
       {
         "preview_path": "primer/alpha/overlay/overlay_with_three_bodies",
         "name": "overlay_with_three_bodies",

test/components/primer/alpha/dialog_test.rb

@@ -91,6 +91,13 @@ def test_renders_large_header
         end
       end
 
+      def test_renders_header_subtitle
+        render_inline(Primer::Alpha::Dialog::Header.new(id: "1", title: "Header")) do |component|
+          component.with_subtitle { "subtitle" }
+        end
+        assert_selector(".Overlay-header .Overlay-description")
+      end
+
       def test_renders_header_with_filter
         render_preview(:with_header_filter)
 

test/components/primer/alpha/overlay_test.rb

@@ -125,6 +125,14 @@ def test_renders_header_filter
     assert_selector(".Overlay-header .Overlay-headerContentWrap + .Overlay-headerFilter")
   end
 
+  def test_renders_header_subtitle
+    render_inline(Primer::Alpha::Overlay::Header.new(id: "1", title: "Header")) do |component|
+      component.with_subtitle { "subtitle" }
+    end
+
+    assert_selector(".Overlay-header .Overlay-description")
+  end
+
   def test_renders_multiple_bodies_as_tabpanels
     render_inline(Primer::Alpha::Overlay.new(title: "Title", role: :dialog)) do |component|
       component.with_header