primer_view_components 0.14.0 → 0.15.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (75) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +30 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
  4. data/app/assets/javascripts/app/components/primer/beta/nav_list.d.ts +0 -11
  5. data/app/assets/javascripts/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
  6. data/app/assets/javascripts/app/components/primer/primer.d.ts +1 -0
  7. data/app/assets/javascripts/primer_view_components.js +1 -1
  8. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  9. data/app/assets/styles/primer_view_components.css +1 -1
  10. data/app/assets/styles/primer_view_components.css.map +1 -1
  11. data/app/components/primer/alpha/action_list/item.rb +13 -1
  12. data/app/components/primer/alpha/action_list.css +1 -1
  13. data/app/components/primer/alpha/action_list.css.json +1 -0
  14. data/app/components/primer/alpha/action_list.css.map +1 -1
  15. data/app/components/primer/alpha/action_list.pcss +3 -1
  16. data/app/components/primer/alpha/action_list.rb +5 -4
  17. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
  18. data/app/components/primer/alpha/action_menu/action_menu_element.js +85 -11
  19. data/app/components/primer/alpha/action_menu/action_menu_element.ts +110 -12
  20. data/app/components/primer/alpha/action_menu/group.rb +23 -0
  21. data/app/components/primer/alpha/action_menu/heading.rb +17 -0
  22. data/app/components/primer/alpha/action_menu/list.html.erb +1 -0
  23. data/app/components/primer/alpha/action_menu/list.rb +62 -51
  24. data/app/components/primer/alpha/action_menu/list_wrapper.rb +40 -0
  25. data/app/components/primer/alpha/action_menu.rb +38 -1
  26. data/app/components/primer/alpha/overlay.css +1 -1
  27. data/app/components/primer/alpha/overlay.css.json +2 -1
  28. data/app/components/primer/alpha/overlay.css.map +1 -1
  29. data/app/components/primer/alpha/overlay.pcss +6 -2
  30. data/app/components/primer/alpha/text_field.css.map +1 -1
  31. data/app/components/primer/alpha/text_field.pcss +2 -2
  32. data/app/components/primer/alpha/tool_tip.js +8 -4
  33. data/app/components/primer/alpha/tool_tip.ts +9 -4
  34. data/app/components/primer/beta/auto_complete/auto_complete.html.erb +1 -7
  35. data/app/components/primer/beta/auto_complete/item.rb +1 -1
  36. data/app/components/primer/beta/auto_complete.rb +6 -1
  37. data/app/components/primer/beta/base_button.rb +2 -3
  38. data/app/components/primer/beta/blankslate.css +1 -1
  39. data/app/components/primer/beta/blankslate.css.map +1 -1
  40. data/app/components/primer/beta/blankslate.pcss +3 -3
  41. data/app/components/primer/beta/button.css +1 -1
  42. data/app/components/primer/beta/button.css.json +9 -8
  43. data/app/components/primer/beta/button.css.map +1 -1
  44. data/app/components/primer/beta/button.pcss +15 -11
  45. data/app/components/primer/beta/nav_list/group.html.erb +7 -5
  46. data/app/components/primer/beta/nav_list/group.rb +2 -2
  47. data/app/components/primer/beta/nav_list.d.ts +0 -11
  48. data/app/components/primer/beta/nav_list.js +2 -85
  49. data/app/components/primer/beta/nav_list.ts +1 -85
  50. data/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
  51. data/app/components/primer/beta/nav_list_group_element.js +108 -0
  52. data/app/components/primer/beta/nav_list_group_element.ts +97 -0
  53. data/app/components/primer/beta/relative_time.rb +4 -4
  54. data/app/components/primer/component.rb +3 -0
  55. data/app/components/primer/primer.d.ts +1 -0
  56. data/app/components/primer/primer.js +1 -0
  57. data/app/components/primer/primer.ts +1 -0
  58. data/app/lib/primer/experimental_render_helpers.rb +32 -0
  59. data/app/lib/primer/experimental_slot_helpers.rb +30 -0
  60. data/lib/primer/view_components/version.rb +1 -1
  61. data/lib/primer/yard/lookbook_pages_backend.rb +2 -2
  62. data/previews/primer/alpha/action_menu_preview.rb +73 -7
  63. data/previews/primer/alpha/dialog_preview/with_auto_complete.html.erb +8 -0
  64. data/previews/primer/alpha/dialog_preview.rb +17 -0
  65. data/previews/primer/beta/blankslate_preview/inside_flex_container.html.erb +6 -0
  66. data/previews/primer/beta/blankslate_preview.rb +3 -0
  67. data/previews/primer/beta/nav_list_preview.rb +10 -1
  68. data/static/arguments.json +92 -1
  69. data/static/audited_at.json +4 -1
  70. data/static/classes.json +3 -0
  71. data/static/constants.json +9 -0
  72. data/static/info_arch.json +256 -52
  73. data/static/previews.json +52 -0
  74. data/static/statuses.json +3 -0
  75. metadata +14 -2
@@ -52,6 +52,67 @@ module Primer
52
52
  end
53
53
  end
54
54
 
55
+ # @label With groups
56
+ #
57
+ # @snapshot interactive
58
+ def with_groups
59
+ render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
60
+ menu.with_show_button do |button|
61
+ button.with_trailing_action_icon(icon: :"triangle-down")
62
+ "Favorite character"
63
+ end
64
+
65
+ menu.with_group do |group|
66
+ group.with_heading(title: "Battlestar Galactica")
67
+ group.with_item(label: "William Adama")
68
+ group.with_item(label: 'Kara "Starbuck" Thrace')
69
+ group.with_item(label: 'Sharon "Boomer" Valerii')
70
+ group.with_item(label: "Gaius Baltar")
71
+ end
72
+
73
+ menu.with_group do |group|
74
+ group.with_heading(title: "Star Trek")
75
+ group.with_item(label: "Capt. Jean-luc Picard")
76
+ group.with_item(label: "Capt. Kathryn M. Janeway")
77
+ group.with_item(label: "Capt. Benjamin L. Sisko")
78
+ group.with_item(label: "Capt. James T. Kirk")
79
+ end
80
+
81
+ menu.with_group do |group|
82
+ group.with_heading(title: "Star Wars")
83
+ group.with_item(label: "Leia Organa")
84
+ group.with_item(label: "Luke Skywalker")
85
+ group.with_item(label: "Han Solo")
86
+ group.with_item(label: "Chewbacca")
87
+ end
88
+ end
89
+ end
90
+
91
+ # @label With items and groups
92
+ #
93
+ # @snapshot interactive
94
+ def with_items_and_groups
95
+ render(Primer::Alpha::ActionMenu.new(menu_id: "menu-1")) do |menu|
96
+ menu.with_show_button do |button|
97
+ button.with_trailing_action_icon(icon: :"triangle-down")
98
+ "Meal preference"
99
+ end
100
+
101
+ menu.with_item(label: "Meat option")
102
+ menu.with_divider
103
+
104
+ menu.with_group do |group|
105
+ group.with_heading(title: "Vegetarian options")
106
+ group.with_item(label: "Grilled portbello mushroom")
107
+ group.with_item(label: "Polenta")
108
+ group.with_item(label: "Seitan")
109
+ end
110
+
111
+ menu.with_divider
112
+ menu.with_item(label: "Fish option")
113
+ end
114
+ end
115
+
55
116
  # @label Wide
56
117
  #
57
118
  # @snapshot interactive
@@ -87,10 +148,12 @@ module Primer
87
148
  def single_select
88
149
  render(Primer::Alpha::ActionMenu.new(select_variant: :single)) do |menu|
89
150
  menu.with_show_button { "Menu" }
90
- menu.with_item(label: "Fast forward")
91
- menu.with_item(label: "Recursive")
92
- menu.with_item(label: "Ours")
93
- menu.with_item(label: "Resolve")
151
+ menu.with_item(label: "Fast forward", item_id: :fast_forward)
152
+ menu.with_item(label: "Recursive", item_id: :recursive)
153
+ menu.with_item(label: "Ours", item_id: :ours)
154
+ menu.with_item(label: "Resolve", item_id: :resolve)
155
+ menu.with_item(label: "Disabled", disabled: true, item_id: :disabled)
156
+ menu.with_item(label: "Hidden", hidden: true, disabled: true, item_id: :hidden)
94
157
  end
95
158
  end
96
159
 
@@ -105,7 +168,8 @@ module Primer
105
168
  username: "langermank",
106
169
  full_name: "Katie Langerman",
107
170
  full_name_scheme: :inline,
108
- avatar_arguments: { shape: :square }
171
+ avatar_arguments: { shape: :square },
172
+ item_id: :katie
109
173
  )
110
174
 
111
175
  menu.with_avatar_item(
@@ -113,7 +177,8 @@ module Primer
113
177
  username: "jonrohan",
114
178
  full_name: "Jon Rohan",
115
179
  full_name_scheme: :inline,
116
- avatar_arguments: { shape: :square }
180
+ avatar_arguments: { shape: :square },
181
+ item_id: :jon
117
182
  )
118
183
 
119
184
  menu.with_avatar_item(
@@ -121,7 +186,8 @@ module Primer
121
186
  username: "broccolinisoup",
122
187
  full_name: "Armağan Ersöz",
123
188
  full_name_scheme: :inline,
124
- avatar_arguments: { shape: :square }
189
+ avatar_arguments: { shape: :square },
190
+ item_id: :armagan
125
191
  )
126
192
  end
127
193
  end
@@ -0,0 +1,8 @@
1
+ <%= render(Primer::Alpha::Dialog.new(id: "dialog-one", title: title, subtitle: subtitle, visually_hide_title: false)) do |d| %>
2
+ <% d.with_show_button { button_text } %>
3
+ <% d.with_body do %>
4
+ <%= render(Primer::Beta::AutoComplete.new(src: url, label_text: "Search", list_id: "list", input_id: "input")) do |a| %>
5
+ <% a.with_leading_visual_icon(icon: :search) %>
6
+ <% end %>
7
+ <% end %>
8
+ <% end %>
@@ -152,6 +152,23 @@ module Primer
152
152
  })
153
153
  end
154
154
 
155
+ # @label Dialog with AutoComplete text input
156
+ #
157
+ # @param title [String] text
158
+ # @param subtitle [String] text
159
+ # @param button_text [String] text
160
+ # @param show_divider [Boolean] toggle
161
+ # @snapshot interactive
162
+ def with_auto_complete(title: "Test Dialog", subtitle: nil, button_text: "Show Dialog", show_divider: true)
163
+ render_with_template(locals: {
164
+ title: title,
165
+ subtitle: subtitle,
166
+ button_text: button_text,
167
+ show_divider: show_divider,
168
+ url: UrlHelpers.autocomplete_index_path
169
+ })
170
+ end
171
+
155
172
  # @label Page with scrollbar and dialog
156
173
  #
157
174
  # @param title [String] text
@@ -0,0 +1,6 @@
1
+ <div style="display: flex">
2
+ <%= render Primer::Beta::Blankslate.new do |component| %>
3
+ <% component.with_heading(tag: :h2) { "Heading" } %>
4
+ <% component.with_description { "Description" } %>
5
+ <% end %>
6
+ </div>
@@ -134,6 +134,9 @@ module Primer
134
134
  component.with_secondary_action(href: "#").with_content("Learn more about vulnerabilities")
135
135
  end
136
136
  end
137
+
138
+ def inside_flex_container
139
+ end
137
140
  end
138
141
  end
139
142
  end
@@ -106,7 +106,7 @@ module Primer
106
106
  # @snapshot
107
107
  def show_more_item
108
108
  render(Primer::Beta::NavList.new(aria: { label: "My favorite foods" })) do |list|
109
- list.with_group do |group|
109
+ list.with_group(id: "foods") do |group|
110
110
  group.with_heading(title: "My favorite foods")
111
111
  group.with_item(label: "Popplers", href: "/foods/popplers")
112
112
  group.with_item(label: "Slurm", href: "/foods/slurm")
@@ -114,6 +114,15 @@ module Primer
114
114
  item.with_trailing_visual_icon(icon: :plus)
115
115
  end
116
116
  end
117
+
118
+ list.with_group(id: "snacks") do |group|
119
+ group.with_heading(title: "My favorite snacks")
120
+ group.with_item(label: "Popplers", href: "/foods/popplers")
121
+ group.with_item(label: "Slurm", href: "/foods/slurm")
122
+ group.with_show_more_item(label: "Show more snacks", src: UrlHelpers.nav_list_items_path, pages: 4) do |item|
123
+ item.with_trailing_visual_icon(icon: :plus)
124
+ end
125
+ end
117
126
  end
118
127
  end
119
128
 
@@ -217,6 +217,12 @@
217
217
  "default": "`nil`",
218
218
  "description": "Item label. If no label is provided, content is used."
219
219
  },
220
+ {
221
+ "name": "item_id",
222
+ "type": "String",
223
+ "default": "`nil`",
224
+ "description": "An ID that will be attached to the item's `<li>` element as `data-item-id` for distinguishing between items, perhaps in JavaScript."
225
+ },
220
226
  {
221
227
  "name": "label_classes",
222
228
  "type": "String",
@@ -386,12 +392,97 @@
386
392
  ]
387
393
  },
388
394
  {
389
- "component": "ActionMenu::List",
395
+ "component": "ActionMenu::Group",
390
396
  "status": "alpha",
391
397
  "a11y_reviewed": true,
398
+ "short_name": "ActionMenuGroup",
399
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/group.rb",
400
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/group/default/",
401
+ "parameters": [
402
+ {
403
+ "name": "id",
404
+ "type": "String",
405
+ "default": "`self.class.generate_id`",
406
+ "description": "HTML ID value."
407
+ },
408
+ {
409
+ "name": "role",
410
+ "type": "Boolean",
411
+ "default": "`nil`",
412
+ "description": "ARIA role describing the function of the list. listbox and menu are a common values."
413
+ },
414
+ {
415
+ "name": "item_classes",
416
+ "type": "String",
417
+ "default": "`nil`",
418
+ "description": "Additional CSS classes to attach to items."
419
+ },
420
+ {
421
+ "name": "scheme",
422
+ "type": "Symbol",
423
+ "default": "`:full`",
424
+ "description": "One of `:full` or `:inset`. `inset` children are offset (vertically and horizontally) from list edges. `full` (default) children are flush (vertically and horizontally) with list edges."
425
+ },
426
+ {
427
+ "name": "show_dividers",
428
+ "type": "Boolean",
429
+ "default": "`false`",
430
+ "description": "Display a divider above each item in the list when it does not follow a header or divider."
431
+ },
432
+ {
433
+ "name": "select_variant",
434
+ "type": "Symbol",
435
+ "default": "`:none`",
436
+ "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
437
+ },
438
+ {
439
+ "name": "form_arguments",
440
+ "type": "Hash",
441
+ "default": "`{}`",
442
+ "description": "Allows an `ActionList` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission. *NOTE*: Consider using an [ActionMenu](/components/alpha/actionmenu) instead of using this feature directly."
443
+ },
444
+ {
445
+ "name": "system_arguments",
446
+ "type": "Hash",
447
+ "default": "N/A",
448
+ "description": "[System arguments](/system-arguments)"
449
+ }
450
+ ]
451
+ },
452
+ {
453
+ "component": "ActionMenu::Heading",
454
+ "status": "alpha",
455
+ "a11y_reviewed": false,
456
+ "short_name": "ActionMenuHeading",
457
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/heading.rb",
458
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/heading/default/",
459
+ "parameters": [
460
+
461
+ ]
462
+ },
463
+ {
464
+ "component": "ActionMenu::List",
465
+ "status": "alpha",
466
+ "a11y_reviewed": false,
392
467
  "short_name": "ActionMenuList",
393
468
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list.rb",
394
469
  "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list/default/",
470
+ "parameters": [
471
+ {
472
+ "name": "system_arguments",
473
+ "type": "Hash",
474
+ "default": "N/A",
475
+ "description": "The arguments accepted by [ActionList](/components/alpha/actionlist)"
476
+ }
477
+ ]
478
+ },
479
+ {
480
+ "component": "ActionMenu::ListWrapper",
481
+ "status": "alpha",
482
+ "a11y_reviewed": true,
483
+ "short_name": "ActionMenuListWrapper",
484
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list_wrapper.rb",
485
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list_wrapper/default/",
395
486
  "parameters": [
396
487
  {
397
488
  "name": "menu_id",
@@ -8,7 +8,10 @@
8
8
  "Primer::Alpha::ActionList::Heading": "",
9
9
  "Primer::Alpha::ActionList::Item": "",
10
10
  "Primer::Alpha::ActionMenu": "",
11
- "Primer::Alpha::ActionMenu::List": "2023-07-10",
11
+ "Primer::Alpha::ActionMenu::Group": "2023-07-10",
12
+ "Primer::Alpha::ActionMenu::Heading": "",
13
+ "Primer::Alpha::ActionMenu::List": "",
14
+ "Primer::Alpha::ActionMenu::ListWrapper": "2023-07-10",
12
15
  "Primer::Alpha::AutoComplete": "",
13
16
  "Primer::Alpha::AutoComplete::Item": "",
14
17
  "Primer::Alpha::Banner": "",
data/static/classes.json CHANGED
@@ -179,6 +179,9 @@
179
179
  "Button--iconOnly": [
180
180
  "Primer::Beta::Button"
181
181
  ],
182
+ "Button--inactive": [
183
+ "Primer::Beta::Button"
184
+ ],
182
185
  "Button--invisible": [
183
186
  "Primer::Beta::Button"
184
187
  ],
@@ -125,13 +125,20 @@
125
125
  "Primer::Alpha::ActionMenu": {
126
126
  "DEFAULT_PRELOAD": false,
127
127
  "DEFAULT_SELECT_VARIANT": "none",
128
+ "Group": "Primer::Alpha::ActionMenu::Group",
129
+ "Heading": "Primer::Alpha::ActionMenu::Heading",
128
130
  "List": "Primer::Alpha::ActionMenu::List",
131
+ "ListWrapper": "Primer::Alpha::ActionMenu::ListWrapper",
129
132
  "SELECT_VARIANT_OPTIONS": [
130
133
  "single",
131
134
  "multiple",
132
135
  "none"
133
136
  ]
134
137
  },
138
+ "Primer::Alpha::ActionMenu::Group": {
139
+ },
140
+ "Primer::Alpha::ActionMenu::Heading": {
141
+ },
135
142
  "Primer::Alpha::ActionMenu::List": {
136
143
  "DEFAULT_ITEM_TAG": "button",
137
144
  "ITEM_TAG_OPTIONS": [
@@ -140,6 +147,8 @@
140
147
  "button"
141
148
  ]
142
149
  },
150
+ "Primer::Alpha::ActionMenu::ListWrapper": {
151
+ },
143
152
  "Primer::Alpha::AutoComplete": {
144
153
  "Item": "Primer::Alpha::AutoComplete::Item"
145
154
  },