primer_view_components 0.16.1 → 0.18.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (66) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +34 -0
  3. data/app/assets/javascripts/app/components/primer/dialog_helper.d.ts +15 -0
  4. data/app/assets/javascripts/app/components/primer/primer.d.ts +1 -0
  5. data/app/assets/javascripts/primer_view_components.js +1 -1
  6. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  7. data/app/assets/styles/primer_view_components.css +1 -1
  8. data/app/assets/styles/primer_view_components.css.map +1 -1
  9. data/app/components/primer/alpha/action_list.css +1 -1
  10. data/app/components/primer/alpha/action_list.css.map +1 -1
  11. data/app/components/primer/alpha/action_list.pcss +11 -33
  12. data/app/components/primer/alpha/action_menu/action_menu_element.js +8 -0
  13. data/app/components/primer/alpha/action_menu/action_menu_element.ts +8 -0
  14. data/app/components/primer/alpha/action_menu.rb +3 -1
  15. data/app/components/primer/alpha/banner.rb +7 -3
  16. data/app/components/primer/alpha/dialog.css +1 -1
  17. data/app/components/primer/alpha/dialog.css.json +12 -27
  18. data/app/components/primer/alpha/dialog.css.map +1 -1
  19. data/app/components/primer/alpha/dialog.html.erb +2 -2
  20. data/app/components/primer/alpha/dialog.pcss +78 -143
  21. data/app/components/primer/alpha/dialog.rb +10 -13
  22. data/app/components/primer/alpha/overlay.css +1 -1
  23. data/app/components/primer/alpha/overlay.css.json +1 -0
  24. data/app/components/primer/alpha/overlay.css.map +1 -1
  25. data/app/components/primer/alpha/overlay.pcss +1 -1
  26. data/app/components/primer/alpha/segmented_control.css +1 -1
  27. data/app/components/primer/alpha/segmented_control.css.json +0 -4
  28. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  29. data/app/components/primer/alpha/segmented_control.pcss +1 -18
  30. data/app/components/primer/alpha/segmented_control.rb +0 -1
  31. data/app/components/primer/alpha/text_field.css +1 -1
  32. data/app/components/primer/alpha/text_field.css.map +1 -1
  33. data/app/components/primer/base_component.rb +1 -1
  34. data/app/components/primer/dialog_helper.d.ts +15 -0
  35. data/app/components/primer/dialog_helper.js +88 -0
  36. data/app/components/primer/dialog_helper.ts +92 -0
  37. data/app/components/primer/primer.d.ts +1 -0
  38. data/app/components/primer/primer.js +1 -0
  39. data/app/components/primer/primer.ts +1 -0
  40. data/lib/primer/classify/utilities.rb +1 -1
  41. data/lib/primer/deprecations.yml +3 -3
  42. data/lib/primer/forms/dsl/button_input.rb +4 -0
  43. data/lib/primer/forms/dsl/check_box_input.rb +6 -0
  44. data/lib/primer/forms/dsl/hidden_input.rb +4 -0
  45. data/lib/primer/forms/dsl/input.rb +7 -3
  46. data/lib/primer/forms/dsl/radio_button_input.rb +6 -0
  47. data/lib/primer/forms/dsl/select_input.rb +3 -1
  48. data/lib/primer/forms/dsl/submit_button_input.rb +4 -0
  49. data/lib/primer/forms/form_control.html.erb +3 -1
  50. data/lib/primer/view_components/linters/tooltipped_migration.rb +1 -1
  51. data/lib/primer/view_components/version.rb +2 -2
  52. data/lib/primer/yard/docs_helper.rb +1 -1
  53. data/previews/primer/alpha/dialog_preview/nested_dialog.html.erb +1 -1
  54. data/previews/primer/alpha/dialog_preview/scroll_container.html.erb +35 -0
  55. data/previews/primer/alpha/dialog_preview.rb +61 -1
  56. data/previews/primer/alpha/segmented_control_preview.rb +1 -52
  57. data/previews/primer/alpha/tooltip_preview/tooltip_with_dialog_moving_focus_to_input.html.erb +2 -3
  58. data/previews/primer/alpha/tooltip_preview.rb +1 -1
  59. data/previews/primer/beta/button_preview/trailing_visual.html.erb +2 -1
  60. data/previews/primer/beta/button_preview.rb +4 -2
  61. data/static/arguments.json +12 -0
  62. data/static/classes.json +5 -23
  63. data/static/constants.json +16 -12
  64. data/static/info_arch.json +65 -66
  65. data/static/previews.json +52 -65
  66. metadata +8 -3
@@ -0,0 +1,35 @@
1
+ <%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, position: position, subtitle: subtitle, visually_hide_title: false)) do |d| %>
2
+ <% d.with_show_button { button_text } %>
3
+ <% d.with_body { body_text} %>
4
+ <% end %>
5
+
6
+ <!-- just some lorem ipsum -->
7
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut etiam sit amet nisl purus in. Amet risus nullam eget felis. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Non quam lacus suspendisse faucibus interdum. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Ipsum nunc aliquet bibendum enim facilisis gravida. Egestas pretium aenean pharetra magna. Amet mattis vulputate enim nulla aliquet. Diam vel quam elementum pulvinar etiam non. Tempor orci eu lobortis elementum. Arcu non odio euismod lacinia at quis risus sed.</p>
8
+
9
+ <p>Aenean pharetra magna ac placerat vestibulum lectus mauris. Aenean euismod elementum nisi quis eleifend quam. Duis at tellus at urna condimentum. Tortor dignissim convallis aenean et tortor. Eget nullam non nisi est sit amet facilisis magna. Fermentum et sollicitudin ac orci phasellus egestas tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. In nisl nisi scelerisque eu. A erat nam at lectus. Dolor magna eget est lorem. Volutpat diam ut venenatis tellus in metus vulputate eu scelerisque. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Aenean et tortor at risus. Suspendisse sed nisi lacus sed viverra tellus in. Arcu felis bibendum ut tristique et.</p>
10
+
11
+ <p>At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Nisl suscipit adipiscing bibendum est ultricies integer quis. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Malesuada fames ac turpis egestas maecenas. Fames ac turpis egestas sed tempus urna et pharetra. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Nisi lacus sed viverra tellus in hac habitasse platea. Arcu non odio euismod lacinia at quis risus sed vulputate. Ac placerat vestibulum lectus mauris ultrices eros. Magna sit amet purus gravida quis blandit turpis. Arcu felis bibendum ut tristique. Egestas congue quisque egestas diam in arcu cursus. Pretium aenean pharetra magna ac placerat. Diam maecenas sed enim ut sem viverra. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Tincidunt id aliquet risus feugiat in. A cras semper auctor neque vitae tempus. Eu lobortis elementum nibh tellus molestie. Neque ornare aenean euismod elementum nisi quis eleifend.</p>
12
+
13
+ <p>Sed nisi lacus sed viverra tellus in. Nisl condimentum id venenatis a condimentum vitae. Integer malesuada nunc vel risus commodo viverra maecenas accumsan. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Nulla facilisi cras fermentum odio eu. Adipiscing elit pellentesque habitant morbi tristique senectus. Urna condimentum mattis pellentesque id. Arcu cursus euismod quis viverra nibh cras pulvinar. Elementum integer enim neque volutpat ac. Euismod nisi porta lorem mollis aliquam ut porttitor. Mauris nunc congue nisi vitae suscipit tellus mauris a. Volutpat blandit aliquam etiam erat velit. Risus sed vulputate odio ut. Ut sem nulla pharetra diam. Turpis massa sed elementum tempus egestas sed sed risus pretium. Cras sed felis eget velit aliquet sagittis. Imperdiet massa tincidunt nunc pulvinar sapien et ligula. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat.</p>
14
+
15
+ <p>Eget felis eget nunc lobortis mattis aliquam faucibus. Enim nunc faucibus a pellentesque sit amet. Luctus accumsan tortor posuere ac ut consequat. Sed euismod nisi porta lorem mollis aliquam ut porttitor leo. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Lobortis elementum nibh tellus molestie nunc non blandit. Luctus accumsan tortor posuere ac ut consequat semper. Etiam tempor orci eu lobortis elementum. Posuere ac ut consequat semper. Feugiat nisl pretium fusce id velit ut tortor pretium viverra. Aliquam id diam maecenas ultricies mi eget mauris pharetra. Maecenas ultricies mi eget mauris pharetra et. Sodales ut eu sem integer vitae justo eget magna fermentum. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Eu non diam phasellus vestibulum lorem sed risus. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Mauris pharetra et ultrices neque ornare. Aliquam ultrices sagittis orci a. Diam maecenas ultricies mi eget mauris pharetra. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit sed.</p>
16
+
17
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut etiam sit amet nisl purus in. Amet risus nullam eget felis. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Non quam lacus suspendisse faucibus interdum. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Ipsum nunc aliquet bibendum enim facilisis gravida. Egestas pretium aenean pharetra magna. Amet mattis vulputate enim nulla aliquet. Diam vel quam elementum pulvinar etiam non. Tempor orci eu lobortis elementum. Arcu non odio euismod lacinia at quis risus sed.</p>
18
+
19
+ <p>Aenean pharetra magna ac placerat vestibulum lectus mauris. Aenean euismod elementum nisi quis eleifend quam. Duis at tellus at urna condimentum. Tortor dignissim convallis aenean et tortor. Eget nullam non nisi est sit amet facilisis magna. Fermentum et sollicitudin ac orci phasellus egestas tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. In nisl nisi scelerisque eu. A erat nam at lectus. Dolor magna eget est lorem. Volutpat diam ut venenatis tellus in metus vulputate eu scelerisque. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Aenean et tortor at risus. Suspendisse sed nisi lacus sed viverra tellus in. Arcu felis bibendum ut tristique et.</p>
20
+
21
+ <p>At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Nisl suscipit adipiscing bibendum est ultricies integer quis. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Malesuada fames ac turpis egestas maecenas. Fames ac turpis egestas sed tempus urna et pharetra. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Nisi lacus sed viverra tellus in hac habitasse platea. Arcu non odio euismod lacinia at quis risus sed vulputate. Ac placerat vestibulum lectus mauris ultrices eros. Magna sit amet purus gravida quis blandit turpis. Arcu felis bibendum ut tristique. Egestas congue quisque egestas diam in arcu cursus. Pretium aenean pharetra magna ac placerat. Diam maecenas sed enim ut sem viverra. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Tincidunt id aliquet risus feugiat in. A cras semper auctor neque vitae tempus. Eu lobortis elementum nibh tellus molestie. Neque ornare aenean euismod elementum nisi quis eleifend.</p>
22
+
23
+ <p>Sed nisi lacus sed viverra tellus in. Nisl condimentum id venenatis a condimentum vitae. Integer malesuada nunc vel risus commodo viverra maecenas accumsan. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Nulla facilisi cras fermentum odio eu. Adipiscing elit pellentesque habitant morbi tristique senectus. Urna condimentum mattis pellentesque id. Arcu cursus euismod quis viverra nibh cras pulvinar. Elementum integer enim neque volutpat ac. Euismod nisi porta lorem mollis aliquam ut porttitor. Mauris nunc congue nisi vitae suscipit tellus mauris a. Volutpat blandit aliquam etiam erat velit. Risus sed vulputate odio ut. Ut sem nulla pharetra diam. Turpis massa sed elementum tempus egestas sed sed risus pretium. Cras sed felis eget velit aliquet sagittis. Imperdiet massa tincidunt nunc pulvinar sapien et ligula. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat.</p>
24
+
25
+ <p>Eget felis eget nunc lobortis mattis aliquam faucibus. Enim nunc faucibus a pellentesque sit amet. Luctus accumsan tortor posuere ac ut consequat. Sed euismod nisi porta lorem mollis aliquam ut porttitor leo. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Lobortis elementum nibh tellus molestie nunc non blandit. Luctus accumsan tortor posuere ac ut consequat semper. Etiam tempor orci eu lobortis elementum. Posuere ac ut consequat semper. Feugiat nisl pretium fusce id velit ut tortor pretium viverra. Aliquam id diam maecenas ultricies mi eget mauris pharetra. Maecenas ultricies mi eget mauris pharetra et. Sodales ut eu sem integer vitae justo eget magna fermentum. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Eu non diam phasellus vestibulum lorem sed risus. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Mauris pharetra et ultrices neque ornare. Aliquam ultrices sagittis orci a. Diam maecenas ultricies mi eget mauris pharetra. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit sed.</p>
26
+
27
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut etiam sit amet nisl purus in. Amet risus nullam eget felis. Consectetur adipiscing elit ut aliquam purus sit amet luctus. Non quam lacus suspendisse faucibus interdum. Tempus iaculis urna id volutpat lacus laoreet non curabitur. Ipsum nunc aliquet bibendum enim facilisis gravida. Egestas pretium aenean pharetra magna. Amet mattis vulputate enim nulla aliquet. Diam vel quam elementum pulvinar etiam non. Tempor orci eu lobortis elementum. Arcu non odio euismod lacinia at quis risus sed.</p>
28
+
29
+ <p>Aenean pharetra magna ac placerat vestibulum lectus mauris. Aenean euismod elementum nisi quis eleifend quam. Duis at tellus at urna condimentum. Tortor dignissim convallis aenean et tortor. Eget nullam non nisi est sit amet facilisis magna. Fermentum et sollicitudin ac orci phasellus egestas tellus. Ac turpis egestas maecenas pharetra convallis posuere morbi leo urna. In nisl nisi scelerisque eu. A erat nam at lectus. Dolor magna eget est lorem. Volutpat diam ut venenatis tellus in metus vulputate eu scelerisque. Eros donec ac odio tempor orci dapibus ultrices in iaculis. Aenean et tortor at risus. Suspendisse sed nisi lacus sed viverra tellus in. Arcu felis bibendum ut tristique et.</p>
30
+
31
+ <p>At ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Nisl suscipit adipiscing bibendum est ultricies integer quis. Nec sagittis aliquam malesuada bibendum arcu vitae elementum curabitur. Malesuada fames ac turpis egestas maecenas. Fames ac turpis egestas sed tempus urna et pharetra. Vitae elementum curabitur vitae nunc sed velit dignissim sodales ut. Nisi lacus sed viverra tellus in hac habitasse platea. Arcu non odio euismod lacinia at quis risus sed vulputate. Ac placerat vestibulum lectus mauris ultrices eros. Magna sit amet purus gravida quis blandit turpis. Arcu felis bibendum ut tristique. Egestas congue quisque egestas diam in arcu cursus. Pretium aenean pharetra magna ac placerat. Diam maecenas sed enim ut sem viverra. Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Tincidunt id aliquet risus feugiat in. A cras semper auctor neque vitae tempus. Eu lobortis elementum nibh tellus molestie. Neque ornare aenean euismod elementum nisi quis eleifend.</p>
32
+
33
+ <p>Sed nisi lacus sed viverra tellus in. Nisl condimentum id venenatis a condimentum vitae. Integer malesuada nunc vel risus commodo viverra maecenas accumsan. Magnis dis parturient montes nascetur ridiculus mus mauris vitae ultricies. Nulla facilisi cras fermentum odio eu. Adipiscing elit pellentesque habitant morbi tristique senectus. Urna condimentum mattis pellentesque id. Arcu cursus euismod quis viverra nibh cras pulvinar. Elementum integer enim neque volutpat ac. Euismod nisi porta lorem mollis aliquam ut porttitor. Mauris nunc congue nisi vitae suscipit tellus mauris a. Volutpat blandit aliquam etiam erat velit. Risus sed vulputate odio ut. Ut sem nulla pharetra diam. Turpis massa sed elementum tempus egestas sed sed risus pretium. Cras sed felis eget velit aliquet sagittis. Imperdiet massa tincidunt nunc pulvinar sapien et ligula. Rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt lobortis feugiat.</p>
34
+
35
+ <p>Eget felis eget nunc lobortis mattis aliquam faucibus. Enim nunc faucibus a pellentesque sit amet. Luctus accumsan tortor posuere ac ut consequat. Sed euismod nisi porta lorem mollis aliquam ut porttitor leo. Tincidunt tortor aliquam nulla facilisi cras fermentum odio. Lobortis elementum nibh tellus molestie nunc non blandit. Luctus accumsan tortor posuere ac ut consequat semper. Etiam tempor orci eu lobortis elementum. Posuere ac ut consequat semper. Feugiat nisl pretium fusce id velit ut tortor pretium viverra. Aliquam id diam maecenas ultricies mi eget mauris pharetra. Maecenas ultricies mi eget mauris pharetra et. Sodales ut eu sem integer vitae justo eget magna fermentum. Ac placerat vestibulum lectus mauris ultrices eros in cursus. Eu non diam phasellus vestibulum lorem sed risus. Facilisi nullam vehicula ipsum a arcu cursus vitae congue mauris. Mauris pharetra et ultrices neque ornare. Aliquam ultrices sagittis orci a. Diam maecenas ultricies mi eget mauris pharetra. Molestie ac feugiat sed lectus vestibulum mattis ullamcorper velit sed.</p>
@@ -128,10 +128,12 @@ module Primer
128
128
  # @param subtitle [String] text
129
129
  # @param button_text [String] text
130
130
  # @param show_divider [Boolean] toggle
131
- def nested_dialog(title: "Test Dialog", subtitle: nil, button_text: "Show Dialog", show_divider: true)
131
+ # @param position [Symbol] select [center, left, right]
132
+ def nested_dialog(title: "Test Dialog", subtitle: nil, position: :center, button_text: "Show Dialog", show_divider: true)
132
133
  render_with_template(locals: {
133
134
  title: title,
134
135
  subtitle: subtitle,
136
+ position: position,
135
137
  button_text: button_text,
136
138
  show_divider: show_divider
137
139
  })
@@ -188,6 +190,64 @@ module Primer
188
190
  def autofocus_element
189
191
  render_with_template(locals: {})
190
192
  end
193
+
194
+ # @label Left Side
195
+ #
196
+ # @param title [String] text
197
+ # @param subtitle [String] text
198
+ # @param size [Symbol] select [small, medium, medium_portrait, large, xlarge]
199
+ # @param position_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
200
+ # @param visually_hide_title [Boolean] toggle
201
+ # @param button_text [String] text
202
+ # @param body_text [String] text
203
+ # @snapshot interactive
204
+ def left_side(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", body_text: "Content", position: :center, position_narrow: :fullscreen, visually_hide_title: false)
205
+ render(Primer::Alpha::Dialog.new(title: title, subtitle: subtitle, size: size, position: :left, position_narrow: position_narrow, visually_hide_title: visually_hide_title)) do |d|
206
+ d.with_show_button { button_text }
207
+ d.with_body { body_text }
208
+ end
209
+ end
210
+
211
+ # @label Right Side
212
+ #
213
+ # @param title [String] text
214
+ # @param subtitle [String] text
215
+ # @param size [Symbol] select [small, medium, medium_portrait, large, xlarge]
216
+ # @param position_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
217
+ # @param visually_hide_title [Boolean] toggle
218
+ # @param button_text [String] text
219
+ # @param body_text [String] text
220
+ # @snapshot interactive
221
+ def right_side(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", body_text: "Content", position: :center, position_narrow: :fullscreen, visually_hide_title: false)
222
+ render(Primer::Alpha::Dialog.new(title: title, subtitle: subtitle, size: size, position: :right, position_narrow: position_narrow, visually_hide_title: visually_hide_title)) do |d|
223
+ d.with_show_button { button_text }
224
+ d.with_body { body_text }
225
+ end
226
+ end
227
+
228
+ # @label Scroll container
229
+ #
230
+ # @param title [String] text
231
+ # @param subtitle [String] text
232
+ # @param size [Symbol] select [small, medium, medium_portrait, large, xlarge]
233
+ # @param position [Symbol] select [center, right, left]
234
+ # @param position_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
235
+ # @param visually_hide_title [Boolean] toggle
236
+ # @param button_text [String] text
237
+ # @param body_text [String] text
238
+ # @snapshot interactive
239
+ def scroll_container(title: "Test Dialog", subtitle: nil, position: :center, size: :medium, button_text: "Show Dialog", body_text: "Content", position_narrow: :fullscreen, visually_hide_title: false)
240
+ render_with_template(locals: {
241
+ title: title,
242
+ subtitle: subtitle,
243
+ position: position,
244
+ size: size,
245
+ button_text: button_text,
246
+ body_text: body_text,
247
+ position_narrow: position_narrow,
248
+ visually_hide_title: visually_hide_title
249
+ })
250
+ end
191
251
  end
192
252
  end
193
253
  end
@@ -11,7 +11,7 @@ module Primer
11
11
  # @param full_width [Boolean] toggle
12
12
  # @param hide_labels [Boolean] toggle
13
13
  # @param icon [Symbol] octicon
14
- # @param size select [small, medium, large]
14
+ # @param size select [small, medium]
15
15
  def playground(full_width: false, hide_labels: false, size: :medium, icon: :none)
16
16
  if icon == :none
17
17
  icon = hide_labels ? :zap : nil
@@ -55,17 +55,6 @@ module Primer
55
55
  component.with_item(label: "Blame")
56
56
  end
57
57
  end
58
-
59
- # @label Size large
60
- # @param hide_labels [Boolean] toggle
61
- # @snapshot
62
- def full_width_large(hide_labels: false)
63
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: hide_labels, full_width: true, size: :large)) do |component|
64
- component.with_item(label: "Preview", selected: true)
65
- component.with_item(label: "Raw")
66
- component.with_item(label: "Blame")
67
- end
68
- end
69
58
  # @!endgroup
70
59
 
71
60
  # @!group Icons and text
@@ -88,16 +77,6 @@ module Primer
88
77
  component.with_item(label: "Blame", icon: :people)
89
78
  end
90
79
  end
91
-
92
- # @label Size large
93
- # @snapshot
94
- def icons_and_text_large
95
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :large)) do |component|
96
- component.with_item(label: "Preview", icon: :eye, selected: true)
97
- component.with_item(label: "Raw", icon: :"file-code")
98
- component.with_item(label: "Blame", icon: :people)
99
- end
100
- end
101
80
  # @!endgroup
102
81
 
103
82
  # @!group Trailing Label
@@ -122,17 +101,6 @@ module Primer
122
101
  end
123
102
  end
124
103
  end
125
-
126
- # @label Size large
127
- # @snapshot
128
- def trailing_label_width_large
129
- render(Primer::Alpha::SegmentedControl.new("aria-label": "Billing duration", size: :large)) do |component|
130
- component.with_item(label: "Monthly")
131
- component.with_item(label: "Yearly", selected: true) do |button|
132
- button.with_trailing_visual_label(scheme: :accent) { "-8%" }
133
- end
134
- end
135
- end
136
104
  # @!endgroup
137
105
 
138
106
  # @!group Icons only
@@ -156,16 +124,6 @@ module Primer
156
124
  end
157
125
  end
158
126
 
159
- # @label Size large
160
- # @snapshot
161
- def icon_only_large
162
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, size: :large)) do |component|
163
- component.with_item(label: "Preview", icon: :eye, selected: true)
164
- component.with_item(label: "Raw", icon: :"file-code")
165
- component.with_item(label: "Blame", icon: :people)
166
- end
167
- end
168
-
169
127
  # @label Full width, size small
170
128
  def icon_only_full_width_small
171
129
  render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :small)) do |component|
@@ -183,15 +141,6 @@ module Primer
183
141
  component.with_item(label: "Blame", icon: :people)
184
142
  end
185
143
  end
186
-
187
- # @label Full width, size large
188
- def icon_only_full_width_large
189
- render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true, full_width: true, size: :large)) do |component|
190
- component.with_item(label: "Preview", icon: :eye, selected: true)
191
- component.with_item(label: "Raw", icon: :"file-code")
192
- component.with_item(label: "Blame", icon: :people)
193
- end
194
- end
195
144
  # @!endgroup
196
145
 
197
146
  # NOTE: this preview uses a group to force it's display below the other groups
@@ -16,8 +16,7 @@
16
16
  <input type="text" id="input">
17
17
  </label>
18
18
  <script>
19
- document.querySelector('#my-dialog').addEventListener('cancel', function () {
20
- console.log('!!')
21
- setTimeout(() => document.querySelector('#input').focus(), 0);
19
+ document.querySelector('#my-dialog').addEventListener('close', function () {
20
+ document.querySelector('#input').focus();
22
21
  });
23
22
  </script>
@@ -72,7 +72,7 @@ module Primer
72
72
  end
73
73
 
74
74
  # @label Tooltip with Primer::IconButton
75
- def tooltip_with_icon_button(direction: :s, tooltip_text: "You can press a button")
75
+ def tooltip_with_icon_button(direction: :s, tooltip_text: "Search")
76
76
  render(Primer::Beta::IconButton.new(icon: :search, "aria-label": tooltip_text, tooltip_direction: direction))
77
77
  end
78
78
  # @!endgroup
@@ -4,7 +4,8 @@
4
4
  block: block,
5
5
  id: id,
6
6
  align_content: align_content,
7
- tag: tag
7
+ tag: tag,
8
+ href: '#'
8
9
  )) do |component| %>
9
10
  <% component.with_trailing_visual_counter(count: "15") %>
10
11
  Comment
@@ -206,7 +206,8 @@ module Primer
206
206
  block: false,
207
207
  id: "button-preview",
208
208
  align_content: :center,
209
- tag: :a
209
+ tag: :a,
210
+ href: "#"
210
211
  )
211
212
  render(Primer::Beta::Button.new(
212
213
  scheme: scheme,
@@ -214,7 +215,8 @@ module Primer
214
215
  block: block,
215
216
  id: id,
216
217
  align_content: align_content,
217
- tag: tag
218
+ tag: tag,
219
+ href: href
218
220
  )) do |_c|
219
221
  "Button"
220
222
  end
@@ -610,6 +610,12 @@
610
610
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/banner.rb",
611
611
  "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/banner/default/",
612
612
  "parameters": [
613
+ {
614
+ "name": "tag",
615
+ "type": "Symbol",
616
+ "default": "`:div`",
617
+ "description": "One of `:div` or `:section`."
618
+ },
613
619
  {
614
620
  "name": "full",
615
621
  "type": "Boolean",
@@ -628,6 +634,12 @@
628
634
  "default": "`:none`",
629
635
  "description": "Whether the component can be dismissed with an \"x\" button. One of `:hide`, `:none`, or `:remove`."
630
636
  },
637
+ {
638
+ "name": "dismiss_label",
639
+ "type": "String",
640
+ "default": "`Dismiss`",
641
+ "description": "The aria-label text of the dismiss \"x\" button"
642
+ },
631
643
  {
632
644
  "name": "description",
633
645
  "type": "String",
data/static/classes.json CHANGED
@@ -372,34 +372,19 @@
372
372
  "Primer::Alpha::Dialog",
373
373
  "Primer::Alpha::Overlay"
374
374
  ],
375
- "Overlay--hidden": [
376
- "Primer::Alpha::Dialog"
377
- ],
378
- "Overlay--visibilityHidden": [
379
- "Primer::Alpha::Dialog"
380
- ],
381
- "Overlay-backdrop--anchor": [
382
- "Primer::Alpha::Dialog"
383
- ],
384
- "Overlay-backdrop--anchor-whenNarrow": [
375
+ "Overlay--full": [
385
376
  "Primer::Alpha::Dialog"
386
377
  ],
387
- "Overlay-backdrop--center": [
378
+ "Overlay--full-whenNarrow": [
388
379
  "Primer::Alpha::Dialog"
389
380
  ],
390
- "Overlay-backdrop--center-whenNarrow": [
391
- "Primer::Alpha::Dialog"
392
- ],
393
- "Overlay-backdrop--full": [
394
- "Primer::Alpha::Dialog"
395
- ],
396
- "Overlay-backdrop--full-whenNarrow": [
381
+ "Overlay--hidden": [
397
382
  "Primer::Alpha::Dialog"
398
383
  ],
399
- "Overlay-backdrop--side": [
384
+ "Overlay--placement-right-whenNarrow": [
400
385
  "Primer::Alpha::Dialog"
401
386
  ],
402
- "Overlay-backdrop--side-whenNarrow": [
387
+ "Overlay--visibilityHidden": [
403
388
  "Primer::Alpha::Dialog"
404
389
  ],
405
390
  "Overlay-body": [
@@ -483,9 +468,6 @@
483
468
  "SegmentedControl--iconOnly": [
484
469
  "Primer::Alpha::SegmentedControl"
485
470
  ],
486
- "SegmentedControl--large": [
487
- "Primer::Alpha::SegmentedControl"
488
- ],
489
471
  "SegmentedControl--medium": [
490
472
  "Primer::Alpha::SegmentedControl"
491
473
  ],
@@ -155,6 +155,7 @@
155
155
  "Primer::Alpha::AutoComplete::Item": {
156
156
  },
157
157
  "Primer::Alpha::Banner": {
158
+ "DEFAULT_DISMISS_LABEL": "Dismiss",
158
159
  "DEFAULT_DISMISS_SCHEME": "none",
159
160
  "DEFAULT_ICONS": {
160
161
  "default": "bell",
@@ -163,6 +164,7 @@
163
164
  "success": "check-circle"
164
165
  },
165
166
  "DEFAULT_SCHEME": "default",
167
+ "DEFAULT_TAG": "div",
166
168
  "DISMISS_SCHEMES": [
167
169
  "none",
168
170
  "remove",
@@ -179,7 +181,11 @@
179
181
  "warning": "Banner--warning",
180
182
  "danger": "Banner--error",
181
183
  "success": "Banner--success"
182
- }
184
+ },
185
+ "TAG_OPTIONS": [
186
+ "div",
187
+ "section"
188
+ ]
183
189
  },
184
190
  "Primer::Alpha::ButtonMarketing": {
185
191
  "DEFAULT_SCHEME": "default",
@@ -227,16 +233,16 @@
227
233
  "Footer": "Primer::Alpha::Dialog::Footer",
228
234
  "Header": "Primer::Alpha::Dialog::Header",
229
235
  "POSITION_MAPPINGS": {
230
- "center": "Overlay-backdrop--center",
231
- "left": "Overlay-backdrop--side Overlay-backdrop--placement-left",
232
- "right": "Overlay-backdrop--side Overlay-backdrop--placement-right"
236
+ "center": "",
237
+ "left": "Overlay--placement-left",
238
+ "right": "Overlay--placement-right"
233
239
  },
234
240
  "POSITION_NARROW_MAPPINGS": {
235
241
  "inherit": "",
236
- "bottom": "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-bottom-whenNarrow",
237
- "fullscreen": "Overlay-backdrop--full-whenNarrow",
238
- "left": "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-left-whenNarrow",
239
- "right": "Overlay-backdrop--side-whenNarrow Overlay-backdrop--placement-right-whenNarrow"
242
+ "bottom": "Overlay--placement-bottom-whenNarrow",
243
+ "fullscreen": "Overlay--full-whenNarrow",
244
+ "left": "Overlay--placement-left-whenNarrow",
245
+ "right": "Overlay--placement-right-whenNarrow"
240
246
  },
241
247
  "POSITION_NARROW_OPTIONS": [
242
248
  "inherit",
@@ -559,13 +565,11 @@
559
565
  "Item": "Primer::Alpha::SegmentedControl::Item",
560
566
  "SIZE_MAPPINGS": {
561
567
  "small": "SegmentedControl--small",
562
- "medium": "SegmentedControl--medium",
563
- "large": "SegmentedControl--large"
568
+ "medium": "SegmentedControl--medium"
564
569
  },
565
570
  "SIZE_OPTIONS": [
566
571
  "small",
567
- "medium",
568
- "large"
572
+ "medium"
569
573
  ]
570
574
  },
571
575
  "Primer::Alpha::SegmentedControl::Item": {
@@ -1627,6 +1627,19 @@
1627
1627
  ]
1628
1628
  }
1629
1629
  },
1630
+ {
1631
+ "preview_path": "primer/alpha/action_menu/in_scroll_container",
1632
+ "name": "in_scroll_container",
1633
+ "snapshot": "false",
1634
+ "skip_rules": {
1635
+ "wont_fix": [
1636
+ "region"
1637
+ ],
1638
+ "will_fix": [
1639
+ "color-contrast"
1640
+ ]
1641
+ }
1642
+ },
1630
1643
  {
1631
1644
  "preview_path": "primer/alpha/action_menu/align_end",
1632
1645
  "name": "align_end",
@@ -2230,6 +2243,12 @@
2230
2243
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/banner.rb",
2231
2244
  "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/banner/default/",
2232
2245
  "parameters": [
2246
+ {
2247
+ "name": "tag",
2248
+ "type": "Symbol",
2249
+ "default": "`:div`",
2250
+ "description": "One of `:div` or `:section`."
2251
+ },
2233
2252
  {
2234
2253
  "name": "full",
2235
2254
  "type": "Boolean",
@@ -2248,6 +2267,12 @@
2248
2267
  "default": "`:none`",
2249
2268
  "description": "Whether the component can be dismissed with an \"x\" button. One of `:hide`, `:none`, or `:remove`."
2250
2269
  },
2270
+ {
2271
+ "name": "dismiss_label",
2272
+ "type": "String",
2273
+ "default": "`Dismiss`",
2274
+ "description": "The aria-label text of the dismiss \"x\" button"
2275
+ },
2251
2276
  {
2252
2277
  "name": "description",
2253
2278
  "type": "String",
@@ -3311,6 +3336,45 @@
3311
3336
  "color-contrast"
3312
3337
  ]
3313
3338
  }
3339
+ },
3340
+ {
3341
+ "preview_path": "primer/alpha/dialog/left_side",
3342
+ "name": "left_side",
3343
+ "snapshot": "interactive",
3344
+ "skip_rules": {
3345
+ "wont_fix": [
3346
+ "region"
3347
+ ],
3348
+ "will_fix": [
3349
+ "color-contrast"
3350
+ ]
3351
+ }
3352
+ },
3353
+ {
3354
+ "preview_path": "primer/alpha/dialog/right_side",
3355
+ "name": "right_side",
3356
+ "snapshot": "interactive",
3357
+ "skip_rules": {
3358
+ "wont_fix": [
3359
+ "region"
3360
+ ],
3361
+ "will_fix": [
3362
+ "color-contrast"
3363
+ ]
3364
+ }
3365
+ },
3366
+ {
3367
+ "preview_path": "primer/alpha/dialog/scroll_container",
3368
+ "name": "scroll_container",
3369
+ "snapshot": "interactive",
3370
+ "skip_rules": {
3371
+ "wont_fix": [
3372
+ "region"
3373
+ ],
3374
+ "will_fix": [
3375
+ "color-contrast"
3376
+ ]
3377
+ }
3314
3378
  }
3315
3379
  ],
3316
3380
  "subcomponents": [
@@ -6593,19 +6657,6 @@
6593
6657
  ]
6594
6658
  }
6595
6659
  },
6596
- {
6597
- "preview_path": "primer/alpha/segmented_control/full_width_large",
6598
- "name": "full_width_large",
6599
- "snapshot": "true",
6600
- "skip_rules": {
6601
- "wont_fix": [
6602
- "region"
6603
- ],
6604
- "will_fix": [
6605
- "color-contrast"
6606
- ]
6607
- }
6608
- },
6609
6660
  {
6610
6661
  "preview_path": "primer/alpha/segmented_control/icons_and_text_small",
6611
6662
  "name": "icons_and_text_small",
@@ -6632,19 +6683,6 @@
6632
6683
  ]
6633
6684
  }
6634
6685
  },
6635
- {
6636
- "preview_path": "primer/alpha/segmented_control/icons_and_text_large",
6637
- "name": "icons_and_text_large",
6638
- "snapshot": "true",
6639
- "skip_rules": {
6640
- "wont_fix": [
6641
- "region"
6642
- ],
6643
- "will_fix": [
6644
- "color-contrast"
6645
- ]
6646
- }
6647
- },
6648
6686
  {
6649
6687
  "preview_path": "primer/alpha/segmented_control/trailing_label_width_small",
6650
6688
  "name": "trailing_label_width_small",
@@ -6671,19 +6709,6 @@
6671
6709
  ]
6672
6710
  }
6673
6711
  },
6674
- {
6675
- "preview_path": "primer/alpha/segmented_control/trailing_label_width_large",
6676
- "name": "trailing_label_width_large",
6677
- "snapshot": "true",
6678
- "skip_rules": {
6679
- "wont_fix": [
6680
- "region"
6681
- ],
6682
- "will_fix": [
6683
- "color-contrast"
6684
- ]
6685
- }
6686
- },
6687
6712
  {
6688
6713
  "preview_path": "primer/alpha/segmented_control/icon_only_small",
6689
6714
  "name": "icon_only_small",
@@ -6710,19 +6735,6 @@
6710
6735
  ]
6711
6736
  }
6712
6737
  },
6713
- {
6714
- "preview_path": "primer/alpha/segmented_control/icon_only_large",
6715
- "name": "icon_only_large",
6716
- "snapshot": "true",
6717
- "skip_rules": {
6718
- "wont_fix": [
6719
- "region"
6720
- ],
6721
- "will_fix": [
6722
- "color-contrast"
6723
- ]
6724
- }
6725
- },
6726
6738
  {
6727
6739
  "preview_path": "primer/alpha/segmented_control/icon_only_full_width_small",
6728
6740
  "name": "icon_only_full_width_small",
@@ -6749,19 +6761,6 @@
6749
6761
  ]
6750
6762
  }
6751
6763
  },
6752
- {
6753
- "preview_path": "primer/alpha/segmented_control/icon_only_full_width_large",
6754
- "name": "icon_only_full_width_large",
6755
- "snapshot": "false",
6756
- "skip_rules": {
6757
- "wont_fix": [
6758
- "region"
6759
- ],
6760
- "will_fix": [
6761
- "color-contrast"
6762
- ]
6763
- }
6764
- },
6765
6764
  {
6766
6765
  "preview_path": "primer/alpha/segmented_control/with_link_as_tag",
6767
6766
  "name": "with_link_as_tag",
@@ -15617,6 +15616,6 @@
15617
15616
  "component": "BaseComponent",
15618
15617
  "fully_qualified_name": "Primer::BaseComponent",
15619
15618
  "description_md": "All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) used by [Primer React](https://primer.style/components/system-props).\n\nUnder the hood, system arguments are [mapped](https://github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).\n\n## Responsive values\n\nTo apply different values across responsive breakpoints, pass an array with up to five values in the order `[default, small, medium, large, xlarge]`. To skip a breakpoint, pass `nil`.\n\nFor example:\n\n```erb\n<%= render Primer::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>\n Hello world\n<% end %>\n```\n\nRenders:\n\n```html\n<h1 class=\"mt-0 mt-lg-4 mt-xl-2\">Hello world</h1>\n```",
15620
- "args_md": "## HTML attributes\n\nSystem arguments include most HTML attributes. For example:\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n| `height` | `Integer` | Height. |\n| `hidden` | `Boolean` | Whether to assign the `hidden` attribute. |\n| `style` | `String` | Inline styles. |\n| `title` | `String` | The `title` attribute. |\n| `width` | `Integer` | Width. |\n\n## Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n## Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n## Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n## Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n## Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n## Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n## Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n## Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `px` | Integer | Horizontal padding. One of `0`, `1`, `2`, `3`, `4`, `5`, or `6`. |\n| `py` | Integer | Vertical padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n\n## Typography\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `font_family` | Symbol | Font family. One of `:mono`. |\n| `font_size` | String, Integer, Symbol | One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `00`, `:normal`, or `:small`. |\n| `font_style` | Symbol | Font style. One of `:italic`. |\n| `font_weight` | Symbol | Font weight. One of `:bold`, `:emphasized`, `:light`, or `:normal`. |\n| `text_align` | Symbol | Text alignment. One of `:center`, `:left`, or `:right`. |\n| `text_transform` | Symbol | Text transformation. One of `:capitalize` or `:uppercase`. |\n| `underline` | Boolean | Whether text should be underlined. |\n| `word_break` | Symbol | Whether to break words on line breaks. One of `:break_all` or `:break_word`. |\n\n## Other\n\n| Name | Type | Description |\n| :- | :- | :- |\n| classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |\n| test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |"
15619
+ "args_md": "## HTML attributes\n\nUse system arguments to add HTML attributes to elements. For the most part, system arguments map 1:1 to\nHTML attributes. For example, `render(Component.new(title: \"Foo\"))` will result in eg. `<div title=\"foo\">`.\nHowever, ViewComponents applies special handling to certain system arguments. See the table below for details.\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n\n## Utility classes\n\nViewComponents provides a convenient way to add Primer CSS utility classes to HTML elements. Use the shorthand\ndocumented in the tables below instead of adding CSS classes directly.\n\n### Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n### Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n### Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n### Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n### Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n### Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | Sets the element's width. One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | Sets the element's height. One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n### Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n### Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `px` | Integer | Horizontal padding. One of `0`, `1`, `2`, `3`, `4`, `5`, or `6`. |\n| `py` | Integer | Vertical padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n\n### Typography\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `font_family` | Symbol | Font family. One of `:mono`. |\n| `font_size` | String, Integer, Symbol | One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `00`, `:normal`, or `:small`. |\n| `font_style` | Symbol | Font style. One of `:italic`. |\n| `font_weight` | Symbol | Font weight. One of `:bold`, `:emphasized`, `:light`, or `:normal`. |\n| `text_align` | Symbol | Text alignment. One of `:center`, `:left`, or `:right`. |\n| `text_transform` | Symbol | Text transformation. One of `:capitalize` or `:uppercase`. |\n| `underline` | Boolean | Whether text should be underlined. |\n| `word_break` | Symbol | Whether to break words on line breaks. One of `:break_all` or `:break_word`. |\n\n### Other\n\n| Name | Type | Description |\n| :- | :- | :- |\n| classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |\n| test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |"
15621
15620
  }
15622
15621
  ]