Skip to content

Commit bdb3d88

Browse files
Add subtitle slot to the Primer::Alpha::Overlay::Header and Primer::Alpha::Dialog::Header (#2808)
Co-authored-by: Cameron Dutro <[email protected]>
1 parent 0a94356 commit bdb3d88

File tree

9 files changed

+77
-0
lines changed

9 files changed

+77
-0
lines changed

.changeset/forty-rings-chew.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/view-components": minor
3+
---
4+
5+
Adds a subtitle slot to the Primer::Alpha::Overlay::Header and Primer::Alpha::Dialog::Header

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,8 @@
88
<%= content %>
99
<% elsif @subtitle.present? %>
1010
<h2 id="<%= @id %>-description" class="Overlay-description"><%= @subtitle %></h2>
11+
<% else %>
12+
<%= subtitle %>
1113
<% end %>
1214
</div>
1315
<div class="Overlay-actionWrap">

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

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,20 @@ class Header < Primer::Component
2828
Primer::BaseComponent.new(**system_arguments)
2929
}
3030

31+
# Optional subtitle slot for adding a subtitle to the header.
32+
#
33+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
34+
renders_one :subtitle, lambda { |**system_arguments|
35+
raise ArgumentError, "Do not use the subtitle slot if you are passing subtitle in as an argument" if @subtitle.present? && !Rails.env.production?
36+
37+
system_arguments[:tag] = :h2
38+
system_arguments[:classes] = class_names(
39+
"Overlay-description",
40+
system_arguments[:classes]
41+
)
42+
Primer::BaseComponent.new(**system_arguments)
43+
}
44+
3145
# @param id [String] The HTML element's ID value.
3246
# @param title [String] Describes the content of the dialog.
3347
# @param subtitle [String] Provides additional context for the dialog, also setting the `aria-describedby` attribute.

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

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,8 @@
66
<%= content %>
77
<% elsif @subtitle.present? %>
88
<h2 class="Overlay-description"><%= @subtitle %></h2>
9+
<% else %>
10+
<%= subtitle %>
911
<% end %>
1012
</div>
1113
<% if @overlay_id %>

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

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,21 @@ class Header < Primer::Component
2525
Primer::BaseComponent.new(**system_arguments)
2626
}
2727

28+
29+
# Optional subtitle slot for adding a subtitle to the header.
30+
#
31+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
32+
renders_one :subtitle, lambda { |**system_arguments|
33+
raise ArgumentError, "Do not use the subtitle slot if you are passing subtitle in as an argument" if @subtitle.present? && !Rails.env.production?
34+
35+
system_arguments[:tag] = :h2
36+
system_arguments[:classes] = class_names(
37+
"Overlay-description",
38+
system_arguments[:classes]
39+
)
40+
Primer::BaseComponent.new(**system_arguments)
41+
}
42+
2843
# @param title [String] Describes the content of the Overlay.
2944
# @param subtitle [String] Provides additional context for the Overlay, also setting the `aria-describedby` attribute.
3045
# @param overlay_id [String] Provides the id of the overlay element so the close button can close it

previews/primer/alpha/overlay_preview.rb

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -184,6 +184,17 @@ def overlay_with_header_filter
184184
render_with_template(locals: {})
185185
end
186186

187+
def overlay_with_header_subtitle
188+
render(Primer::Alpha::Overlay.new(title: "Dialog", role: :dialog, size: :large, padding: :condensed)) do |d|
189+
d.with_header(title: "Large Dialog Header", divider: true) do |h|
190+
h.with_subtitle {"A subtitle"}
191+
end
192+
d.with_show_button { "Show Overlay" }
193+
d.with_footer { "Large Dialog Footer" }
194+
d.with_body { "This is a long body for the overlay dialog. <br>".html_safe * 20 }
195+
end
196+
end
197+
187198
def overlay_with_three_bodies
188199
render_with_template(locals: {})
189200
end

static/previews.json

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4966,6 +4966,19 @@
49664966
]
49674967
}
49684968
},
4969+
{
4970+
"preview_path": "primer/alpha/overlay/overlay_with_header_subtitle",
4971+
"name": "overlay_with_header_subtitle",
4972+
"snapshot": "false",
4973+
"skip_rules": {
4974+
"wont_fix": [
4975+
"region"
4976+
],
4977+
"will_fix": [
4978+
"color-contrast"
4979+
]
4980+
}
4981+
},
49694982
{
49704983
"preview_path": "primer/alpha/overlay/overlay_with_three_bodies",
49714984
"name": "overlay_with_three_bodies",

test/components/primer/alpha/dialog_test.rb

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,13 @@ def test_renders_large_header
9191
end
9292
end
9393

94+
def test_renders_header_subtitle
95+
render_inline(Primer::Alpha::Dialog::Header.new(id: "1", title: "Header")) do |component|
96+
component.with_subtitle { "subtitle" }
97+
end
98+
assert_selector(".Overlay-header .Overlay-description")
99+
end
100+
94101
def test_renders_header_with_filter
95102
render_preview(:with_header_filter)
96103

test/components/primer/alpha/overlay_test.rb

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -125,6 +125,14 @@ def test_renders_header_filter
125125
assert_selector(".Overlay-header .Overlay-headerContentWrap + .Overlay-headerFilter")
126126
end
127127

128+
def test_renders_header_subtitle
129+
render_inline(Primer::Alpha::Overlay::Header.new(id: "1", title: "Header")) do |component|
130+
component.with_subtitle { "subtitle" }
131+
end
132+
133+
assert_selector(".Overlay-header .Overlay-description")
134+
end
135+
128136
def test_renders_multiple_bodies_as_tabpanels
129137
render_inline(Primer::Alpha::Overlay.new(title: "Title", role: :dialog)) do |component|
130138
component.with_header

0 commit comments

Comments
 (0)