@primer/view-components 0.1.0-rc.d6eb7cd7 → 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (62) hide show
  1. package/app/assets/javascripts/primer_view_components.js +1 -1
  2. package/app/assets/javascripts/primer_view_components.js.map +1 -1
  3. package/app/assets/styles/primer_view_components.css +2 -2
  4. package/app/assets/styles/primer_view_components.css.map +1 -1
  5. package/app/components/primer/alpha/action_list.css.json +164 -1
  6. package/app/components/primer/alpha/auto_complete.css.json +34 -1
  7. package/app/components/primer/alpha/banner.css.json +38 -1
  8. package/app/components/primer/alpha/button_marketing.css.json +43 -1
  9. package/app/components/primer/alpha/dialog.css.json +145 -1
  10. package/app/components/primer/alpha/dropdown.css.json +61 -1
  11. package/app/components/primer/alpha/layout.css.json +107 -1
  12. package/app/components/primer/alpha/menu.css.json +39 -1
  13. package/app/components/primer/alpha/modal_dialog.js +2 -0
  14. package/app/components/primer/alpha/nav_list.d.ts +6 -3
  15. package/app/components/primer/alpha/nav_list.js +98 -6
  16. package/app/components/primer/alpha/overlay.css +1 -0
  17. package/app/components/primer/alpha/overlay.css.json +11 -0
  18. package/app/components/primer/alpha/segmented_control.css +1 -1
  19. package/app/components/primer/alpha/segmented_control.css.json +46 -1
  20. package/app/components/primer/alpha/tab_nav.css.json +34 -1
  21. package/app/components/primer/alpha/text_field.css +2 -2
  22. package/app/components/primer/alpha/text_field.css.json +172 -1
  23. package/app/components/primer/alpha/toggle_switch.css +1 -1
  24. package/app/components/primer/alpha/toggle_switch.css.json +56 -1
  25. package/app/components/primer/alpha/toggle_switch.js +23 -11
  26. package/app/components/primer/alpha/tool_tip.js +0 -3
  27. package/app/components/primer/alpha/underline_nav.css.json +41 -1
  28. package/app/components/primer/anchored_position.d.ts +27 -0
  29. package/app/components/primer/anchored_position.js +149 -0
  30. package/app/components/primer/beta/avatar.css.json +31 -1
  31. package/app/components/primer/beta/avatar_stack.css.json +37 -1
  32. package/app/components/primer/beta/blankslate.css.json +34 -1
  33. package/app/components/primer/beta/border_box.css.json +86 -1
  34. package/app/components/primer/beta/breadcrumbs.css.json +15 -1
  35. package/app/components/primer/beta/button.css +1 -1
  36. package/app/components/primer/beta/button.css.json +93 -1
  37. package/app/components/primer/beta/counter.css.json +16 -1
  38. package/app/components/primer/beta/flash.css.json +42 -1
  39. package/app/components/primer/beta/label.css.json +45 -1
  40. package/app/components/primer/beta/link.css.json +27 -1
  41. package/app/components/primer/beta/popover.css.json +57 -1
  42. package/app/components/primer/beta/progress_bar.css.json +16 -1
  43. package/app/components/primer/beta/state.css.json +23 -1
  44. package/app/components/primer/beta/subhead.css.json +20 -1
  45. package/app/components/primer/beta/timeline_item.css.json +25 -1
  46. package/app/components/primer/beta/truncate.css.json +18 -1
  47. package/app/components/primer/primer.d.ts +4 -2
  48. package/app/components/primer/primer.js +4 -2
  49. package/app/components/primer/truncate.css.json +20 -1
  50. package/lib/primer/forms/toggle_switch_input.d.ts +5 -0
  51. package/lib/primer/forms/toggle_switch_input.js +29 -0
  52. package/package.json +4 -2
  53. package/static/arguments.json +1416 -1402
  54. package/static/audited_at.json +16 -24
  55. package/static/classes.json +311 -0
  56. package/static/constants.json +129 -71
  57. package/static/previews.json +1833 -0
  58. package/static/statuses.json +14 -22
  59. package/app/components/primer/time_ago_component.d.ts +0 -1
  60. package/app/components/primer/time_ago_component.js +0 -1
  61. /package/app/components/primer/{local_time.d.ts → beta/relative_time.d.ts} +0 -0
  62. /package/app/components/primer/{local_time.js → beta/relative_time.js} +0 -0
@@ -1,97 +1,111 @@
1
1
  [
2
2
  {
3
- "component": "ActionList",
4
- "status": "alpha",
5
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list.rb",
6
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/default/",
3
+ "component": "RelativeTime",
4
+ "status": "beta",
5
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/relative_time.rb",
6
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/relative_time/default/",
7
7
  "parameters": [
8
8
  {
9
- "name": "role",
10
- "type": "Boolean",
11
- "default": "`:list`",
12
- "description": "ARIA role describing the function of the list. listbox and menu are a common values."
9
+ "name": "datetime",
10
+ "type": "Time",
11
+ "default": "N/A",
12
+ "description": "The time to be formatted."
13
13
  },
14
14
  {
15
- "name": "item_classes",
16
- "type": "String",
15
+ "name": "tense",
16
+ "type": "Symbol",
17
+ "default": "`:auto`",
18
+ "description": "Which tense to use. One of `:auto`, `:future`, or `:past`."
19
+ },
20
+ {
21
+ "name": "prefix",
22
+ "type": "sring",
17
23
  "default": "`nil`",
18
- "description": "Additional CSS classes to attach to items."
24
+ "description": "What to prefix the relative ime display with."
19
25
  },
20
26
  {
21
- "name": "scheme",
27
+ "name": "second",
22
28
  "type": "Symbol",
23
- "default": "`:full`",
24
- "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."
29
+ "default": "`SECOND_DEFAULT`",
30
+ "description": "What format seconds should take. One of `nil`, `:numeric`, or `:two_digit`."
25
31
  },
26
32
  {
27
- "name": "show_dividers",
28
- "type": "Boolean",
29
- "default": "`false`",
30
- "description": "Display a divider above each item in the list when it does not follow a header or divider."
33
+ "name": "minute",
34
+ "type": "Symbol",
35
+ "default": "`MINUTE_DEFAULT`",
36
+ "description": "What format minues should take. One of `nil`, `:numeric`, or `:two_digit`."
31
37
  },
32
38
  {
33
- "name": "system_arguments",
34
- "type": "Hash",
35
- "default": "N/A",
36
- "description": "[System arguments](/system-arguments)"
37
- }
38
- ]
39
- },
40
- {
41
- "component": "ActionList::Divider",
42
- "status": "alpha",
43
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/divider.rb",
44
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/divider/default/",
45
- "parameters": [
39
+ "name": "hour",
40
+ "type": "Symbol",
41
+ "default": "`HOUR_DEFAULT`",
42
+ "description": "What format hours should take. One of `nil`, `:numeric`, or `:two_digit`."
43
+ },
46
44
  {
47
- "name": "scheme",
45
+ "name": "weekday",
48
46
  "type": "Symbol",
49
- "default": "`:subtle`",
50
- "description": "Display a background color if scheme is `filled`."
47
+ "default": "`WEEKDAY_DEFAULT`",
48
+ "description": "What format weekdays should take. One of `nil`, `:long`, `:narrow`, or `:short`."
51
49
  },
52
50
  {
53
- "name": "system_arguments",
54
- "type": "Hash",
55
- "default": "N/A",
56
- "description": "[System arguments](/system-arguments)"
57
- }
58
- ]
59
- },
60
- {
61
- "component": "ActionList::Heading",
62
- "status": "alpha",
63
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/heading.rb",
64
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/heading/default/",
65
- "parameters": [
51
+ "name": "day",
52
+ "type": "Symbol",
53
+ "default": "`DAY_DEFAULT`",
54
+ "description": "What format days should take. One of `nil`, `:numeric`, or `:two_digit`."
55
+ },
66
56
  {
67
- "name": "list_id",
68
- "type": "String",
69
- "default": "N/A",
70
- "description": "The unique identifier of the sub list the heading belongs to. Used internally."
57
+ "name": "month",
58
+ "type": "Symbol",
59
+ "default": "`MONTH_DEFAULT`",
60
+ "description": "What format months should take. One of `nil`, `:long`, `:narrow`, `:numeric`, `:short`, or `:two_digit`."
71
61
  },
72
62
  {
73
- "name": "title",
74
- "type": "String",
75
- "default": "N/A",
76
- "description": "Sub list title."
63
+ "name": "year",
64
+ "type": "Symbol",
65
+ "default": "`YEAR_DEFAULT`",
66
+ "description": "What format years should take. One of `nil`, `:numeric`, or `:two_digit`."
77
67
  },
78
68
  {
79
- "name": "subtitle",
80
- "type": "String",
69
+ "name": "time_zone_name",
70
+ "type": "Symbol",
71
+ "default": "`TIMEZONENAME_DEFAULT`",
72
+ "description": "What format the time zone should take. One of `nil`, `:long`, `:long_generic`, `:long_offset`, `:short`, `:short_generic`, or `:short_offset`."
73
+ },
74
+ {
75
+ "name": "threshold",
76
+ "type": "string",
81
77
  "default": "`nil`",
82
- "description": "Optional sub list description."
78
+ "description": "The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute."
83
79
  },
84
80
  {
85
- "name": "scheme",
81
+ "name": "precision",
86
82
  "type": "Symbol",
87
- "default": "`:subtle`",
88
- "description": "Display a background color if scheme is `filled`."
83
+ "default": "`PRECISION_DEFAULT`",
84
+ "description": "The precision elapsed time should display. One of `nil`, `:day`, `:hour`, `:minute`, `:month`, `:second`, or `:year`."
89
85
  },
90
86
  {
91
- "name": "tag",
87
+ "name": "format",
92
88
  "type": "Symbol",
93
- "default": "`:h3`",
94
- "description": "Semantic tag for the heading."
89
+ "default": "`nil`",
90
+ "description": "The format the display should take. One of `:auto`, `:elapsed`, or `:micro`."
91
+ },
92
+ {
93
+ "name": "format_style",
94
+ "type": "Symbol",
95
+ "default": "`nil`",
96
+ "description": "The format the display should take. One of `nil`, `:long`, `:narrow`, or `:short`."
97
+ },
98
+ {
99
+ "name": "lang",
100
+ "type": "string",
101
+ "default": "`nil`",
102
+ "description": "The language to use."
103
+ },
104
+ {
105
+ "name": "title",
106
+ "type": "string",
107
+ "default": "`nil`",
108
+ "description": "Provide a custom title to the element."
95
109
  },
96
110
  {
97
111
  "name": "system_arguments",
@@ -102,156 +116,70 @@
102
116
  ]
103
117
  },
104
118
  {
105
- "component": "ActionList::Item",
106
- "status": "alpha",
107
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/item.rb",
108
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/item/default/",
119
+ "component": "IconButton",
120
+ "status": "beta",
121
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/icon_button.rb",
122
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/icon_button/default/",
109
123
  "parameters": [
110
124
  {
111
- "name": "list",
112
- "type": "Primer::Alpha::ActionList",
113
- "default": "N/A",
114
- "description": "The list that contains this item. Used internally."
115
- },
116
- {
117
- "name": "parent",
118
- "type": "Primer::Alpha::ActionList::Item",
119
- "default": "`nil`",
120
- "description": "This item's parent item. `nil` if this item is at the root. Used internally."
121
- },
122
- {
123
- "name": "label",
125
+ "name": "icon",
124
126
  "type": "String",
125
127
  "default": "N/A",
126
- "description": "Item label."
127
- },
128
- {
129
- "name": "label_classes",
130
- "type": "String",
131
- "default": "`nil`",
132
- "description": "CSS classes that will be added to the label."
128
+ "description": "Name of [Octicon](https://primer.style/octicons/) to use."
133
129
  },
134
130
  {
135
- "name": "content_arguments",
131
+ "name": "wrapper_arguments",
136
132
  "type": "Hash",
137
133
  "default": "`{}`",
138
- "description": "[System arguments](/system-arguments) used to construct the item's anchor or button tag."
139
- },
140
- {
141
- "name": "truncate_label",
142
- "type": "Boolean",
143
- "default": "`false`",
144
- "description": "Truncate label with ellipsis."
145
- },
146
- {
147
- "name": "href",
148
- "type": "String",
149
- "default": "`nil`",
150
- "description": "Link URL."
134
+ "description": "Optional keyword arguments to be passed to the wrapper `<div>` tag."
151
135
  },
152
136
  {
153
- "name": "role",
154
- "type": "String",
155
- "default": "`:listitem`",
156
- "description": "ARIA role describing the function of the item."
137
+ "name": "scheme",
138
+ "type": "Symbol",
139
+ "default": "`:default`",
140
+ "description": "One of `:danger`, `:default`, or `:invisible`."
157
141
  },
158
142
  {
159
143
  "name": "size",
160
144
  "type": "Symbol",
161
145
  "default": "`:medium`",
162
- "description": "Controls block sizing of the item."
146
+ "description": "One of `:large`, `:medium`, or `:small`."
163
147
  },
164
148
  {
165
- "name": "scheme",
149
+ "name": "tag",
166
150
  "type": "Symbol",
167
- "default": "`:default`",
168
- "description": "Controls color/style based on behavior."
169
- },
170
- {
171
- "name": "disabled",
172
- "type": "Boolean",
173
- "default": "`false`",
174
- "description": "Disabled items are not clickable and visually dim."
151
+ "default": "N/A",
152
+ "description": "One of `:a`, `:button`, or `:summary`."
175
153
  },
176
154
  {
177
- "name": "description_scheme",
155
+ "name": "type",
178
156
  "type": "Symbol",
179
- "default": "`:block`",
180
- "description": "Display description inline with label, or block on the next line."
181
- },
182
- {
183
- "name": "active",
184
- "type": "Boolean",
185
- "default": "`false`",
186
- "description": "Sets an active state on navigational items."
157
+ "default": "N/A",
158
+ "description": "One of `:button`, `:reset`, or `:submit`."
187
159
  },
188
160
  {
189
- "name": "on_click",
161
+ "name": "aria-label",
190
162
  "type": "String",
191
- "default": "`nil`",
192
- "description": "JavaScript to execute when the item is clicked."
163
+ "default": "N/A",
164
+ "description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
193
165
  },
194
166
  {
195
- "name": "id",
167
+ "name": "aria-description",
196
168
  "type": "String",
197
- "default": "`SecureRandom.hex`",
198
- "description": "Used internally."
199
- },
200
- {
201
- "name": "system_arguments",
202
- "type": "Hash",
203
169
  "default": "N/A",
204
- "description": "[System arguments](/system-arguments)"
205
- }
206
- ]
207
- },
208
- {
209
- "component": "Banner",
210
- "status": "alpha",
211
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/banner.rb",
212
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/banner/default/",
213
- "parameters": [
214
- {
215
- "name": "full",
216
- "type": "Boolean",
217
- "default": "`false`",
218
- "description": "Whether the component should take up the full width of the screen."
219
- },
220
- {
221
- "name": "full_when_narrow",
222
- "type": "Boolean",
223
- "default": "`false`",
224
- "description": "Whether the component should take up the full width of the screen when rendered inside smaller viewports."
170
+ "description": "String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information."
225
171
  },
226
172
  {
227
- "name": "dismissible",
173
+ "name": "show_tooltip",
228
174
  "type": "Boolean",
229
- "default": "`false`",
230
- "description": "Whether the component can be dismissed with an \"x\" button."
231
- },
232
- {
233
- "name": "description",
234
- "type": "String",
235
- "default": "`nil`",
236
- "description": "Description text rendered underneath the message."
237
- },
238
- {
239
- "name": "icon",
240
- "type": "Symbol",
241
- "default": "`nil`",
242
- "description": "The name of an [Octicon](https://primer.style/octicons/) icon to use. If no icon is provided, a default one will be chosen based on the scheme."
175
+ "default": "`true`",
176
+ "description": "Whether or not to show a tooltip when this button is hovered. Tooltips should only be hidden if the aria label is redundant, i.e. if the icon has a widely understood definition."
243
177
  },
244
178
  {
245
- "name": "scheme",
179
+ "name": "tooltip_direction",
246
180
  "type": "Symbol",
247
- "default": "`:default`",
248
- "description": "One of `:danger`, `:default`, `:success`, or `:warning`."
249
- },
250
- {
251
- "name": "reappear",
252
- "type": "Boolean",
253
- "default": "`false`",
254
- "description": "Whether or not the flash banner should reappear after being dismissed. Only for use in test and preview environments."
181
+ "default": "`:s`",
182
+ "description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
255
183
  },
256
184
  {
257
185
  "name": "system_arguments",
@@ -262,34 +190,46 @@
262
190
  ]
263
191
  },
264
192
  {
265
- "component": "ButtonMarketing",
266
- "status": "alpha",
267
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/button_marketing.rb",
268
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/button_marketing/default/",
193
+ "component": "Button",
194
+ "status": "beta",
195
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button.rb",
196
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button/default/",
269
197
  "parameters": [
270
198
  {
271
199
  "name": "scheme",
272
200
  "type": "Symbol",
273
201
  "default": "`:default`",
274
- "description": "One of `:default`, `:outline`, `:primary`, or `:transparent`."
202
+ "description": "One of `:danger`, `:default`, `:invisible`, `:link`, `:primary`, or `:secondary`."
275
203
  },
276
204
  {
277
- "name": "variant",
205
+ "name": "size",
278
206
  "type": "Symbol",
279
- "default": "`:default`",
280
- "description": "One of `:default` or `:large`."
207
+ "default": "`:medium`",
208
+ "description": "One of `:large`, `:medium`, or `:small`."
209
+ },
210
+ {
211
+ "name": "block",
212
+ "type": "Boolean",
213
+ "default": "`false`",
214
+ "description": "Whether button is full-width with `display: block`."
215
+ },
216
+ {
217
+ "name": "align_content",
218
+ "type": "Symbol",
219
+ "default": "`:center`",
220
+ "description": "One of `:center` or `:start`."
281
221
  },
282
222
  {
283
223
  "name": "tag",
284
224
  "type": "Symbol",
285
225
  "default": "`:button`",
286
- "description": "One of `:a` or `:button`."
226
+ "description": "One of `:a`, `:button`, or `:summary`."
287
227
  },
288
228
  {
289
229
  "name": "type",
290
230
  "type": "Symbol",
291
231
  "default": "`:button`",
292
- "description": "One of `:button` or `:submit`."
232
+ "description": "One of `:button`, `:reset`, or `:submit`."
293
233
  },
294
234
  {
295
235
  "name": "system_arguments",
@@ -300,52 +240,28 @@
300
240
  ]
301
241
  },
302
242
  {
303
- "component": "Dialog",
243
+ "component": "SegmentedControl",
304
244
  "status": "alpha",
305
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog.rb",
306
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/default/",
245
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/segmented_control.rb",
246
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/segmented_control/default/",
307
247
  "parameters": [
308
248
  {
309
- "name": "id",
310
- "type": "String",
311
- "default": "`\"dialog-#{(36**3 + rand(36**4)).to_s(36)}\"`",
312
- "description": "The id of the dialog."
313
- },
314
- {
315
- "name": "title",
316
- "type": "String",
317
- "default": "N/A",
318
- "description": "Describes the content of the dialog."
249
+ "name": "hide_labels",
250
+ "type": "Boolean",
251
+ "default": "`false`",
252
+ "description": "Whether to hide the labels and only show the icons"
319
253
  },
320
254
  {
321
- "name": "subtitle",
322
- "type": "String",
323
- "default": "`nil`",
324
- "description": "Provides additional context for the dialog, also setting the `aria-describedby` attribute."
255
+ "name": "full_width",
256
+ "type": "Boolean",
257
+ "default": "`false`",
258
+ "description": "If the component should be full width"
325
259
  },
326
260
  {
327
261
  "name": "size",
328
262
  "type": "Symbol",
329
263
  "default": "`:medium`",
330
- "description": "The size of the dialog. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
331
- },
332
- {
333
- "name": "position",
334
- "type": "Symbol",
335
- "default": "`:center`",
336
- "description": "The position of the dialog. One of `:center`, `:left`, or `:right`."
337
- },
338
- {
339
- "name": "position_narrow",
340
- "type": "Symbol",
341
- "default": "`:inherit`",
342
- "description": "The position of the dialog when narrow. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
343
- },
344
- {
345
- "name": "visually_hide_title",
346
- "type": "Boolean",
347
- "default": "`false`",
348
- "description": "If true will hide the heading title, while still making it available to Screen Readers."
264
+ "description": "One of `:large`, `:medium`, or `:small`."
349
265
  },
350
266
  {
351
267
  "name": "system_arguments",
@@ -356,42 +272,28 @@
356
272
  ]
357
273
  },
358
274
  {
359
- "component": "Dropdown",
275
+ "component": "Layout",
360
276
  "status": "alpha",
361
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dropdown.rb",
362
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dropdown/default/",
277
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/layout.rb",
278
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/layout/default/",
363
279
  "parameters": [
364
280
  {
365
- "name": "overlay",
281
+ "name": "stacking_breakpoint",
366
282
  "type": "Symbol",
367
- "default": "`:default`",
368
- "description": "One of `:dark`, `:default`, or `:none`."
283
+ "default": "`:md`",
284
+ "description": "When the `Layout` should change from rows into columns. One of `:lg`, `:md`, or `:sm`."
369
285
  },
370
286
  {
371
- "name": "with_caret",
372
- "type": "Boolean",
373
- "default": "`false`",
374
- "description": "Whether or not a caret should be rendered in the button."
287
+ "name": "first_in_source",
288
+ "type": "Symbol",
289
+ "default": "`:sidebar`",
290
+ "description": "Which element to render first in the HTML. This will change the keyboard navigation order. One of `:main` or `:sidebar`."
375
291
  },
376
292
  {
377
- "name": "system_arguments",
378
- "type": "Hash",
379
- "default": "N/A",
380
- "description": "[System arguments](/system-arguments)"
381
- }
382
- ]
383
- },
384
- {
385
- "component": "HellipButton",
386
- "status": "alpha",
387
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/hellip_button.rb",
388
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/hellip_button/default/",
389
- "parameters": [
390
- {
391
- "name": "inline",
392
- "type": "Boolean",
393
- "default": "`false`",
394
- "description": "Whether or not the button is inline."
293
+ "name": "gutter",
294
+ "type": "Symbol",
295
+ "default": "`:default`",
296
+ "description": "The amount of space between the main section and the sidebar. One of `:condensed`, `:default`, `:none`, or `:spacious`."
395
297
  },
396
298
  {
397
299
  "name": "system_arguments",
@@ -402,22 +304,16 @@
402
304
  ]
403
305
  },
404
306
  {
405
- "component": "HiddenTextExpander",
307
+ "component": "HellipButton",
406
308
  "status": "alpha",
407
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/hidden_text_expander.rb",
408
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/hidden_text_expander/default/",
309
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/hellip_button.rb",
310
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/hellip_button/default/",
409
311
  "parameters": [
410
312
  {
411
313
  "name": "inline",
412
314
  "type": "Boolean",
413
315
  "default": "`false`",
414
- "description": "Whether or not the expander is inline."
415
- },
416
- {
417
- "name": "button_arguments",
418
- "type": "Hash",
419
- "default": "`{}`",
420
- "description": "[System arguments](/system-arguments) for the button element."
316
+ "description": "Whether or not the button is inline."
421
317
  },
422
318
  {
423
319
  "name": "system_arguments",
@@ -459,6 +355,20 @@
459
355
  }
460
356
  ]
461
357
  },
358
+ {
359
+ "component": "OcticonSymbols",
360
+ "status": "alpha",
361
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/octicon_symbols.rb",
362
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/octicon_symbols/default/",
363
+ "parameters": [
364
+ {
365
+ "name": "icons",
366
+ "type": "Array<Hash>",
367
+ "default": "`[]`",
368
+ "description": "List of icons to render, in the format { symbol: :icon_name, size: :small }"
369
+ }
370
+ ]
371
+ },
462
372
  {
463
373
  "component": "ImageCrop",
464
374
  "status": "alpha",
@@ -486,28 +396,58 @@
486
396
  ]
487
397
  },
488
398
  {
489
- "component": "Layout",
490
- "status": "alpha",
491
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/layout.rb",
492
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/layout/default/",
399
+ "component": "IconButton",
400
+ "status": "deprecated",
401
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/icon_button.rb",
402
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/icon_button/default/",
493
403
  "parameters": [
494
404
  {
495
- "name": "stacking_breakpoint",
405
+ "name": "scheme",
496
406
  "type": "Symbol",
497
- "default": "`:md`",
498
- "description": "When the `Layout` should change from rows into columns. One of `:lg`, `:md`, or `:sm`."
407
+ "default": "`:default`",
408
+ "description": "One of `:danger` or `:default`."
499
409
  },
500
410
  {
501
- "name": "first_in_source",
411
+ "name": "icon",
412
+ "type": "String",
413
+ "default": "N/A",
414
+ "description": "Name of [Octicon](https://primer.style/octicons/) to use."
415
+ },
416
+ {
417
+ "name": "tag",
502
418
  "type": "Symbol",
503
- "default": "`:sidebar`",
504
- "description": "Which element to render first in the HTML. This will change the keyboard navigation order. One of `:main` or `:sidebar`."
419
+ "default": "N/A",
420
+ "description": "One of `:a`, `:button`, or `:summary`."
505
421
  },
506
422
  {
507
- "name": "gutter",
423
+ "name": "type",
508
424
  "type": "Symbol",
509
- "default": "`:default`",
510
- "description": "The amount of space between the main section and the sidebar. One of `:condensed`, `:default`, `:none`, or `:spacious`."
425
+ "default": "N/A",
426
+ "description": "One of `:button`, `:reset`, or `:submit`."
427
+ },
428
+ {
429
+ "name": "aria-label",
430
+ "type": "String",
431
+ "default": "N/A",
432
+ "description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
433
+ },
434
+ {
435
+ "name": "aria-description",
436
+ "type": "String",
437
+ "default": "N/A",
438
+ "description": "String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information."
439
+ },
440
+ {
441
+ "name": "tooltip_direction",
442
+ "type": "Symbol",
443
+ "default": "`:s`",
444
+ "description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
445
+ },
446
+ {
447
+ "name": "box",
448
+ "type": "Boolean",
449
+ "default": "`false`",
450
+ "description": "Whether the button is in a [BorderBox](/components/beta/borderbox). If `true`, the button will have the `Box-btn-octicon` class."
511
451
  },
512
452
  {
513
453
  "name": "system_arguments",
@@ -518,11 +458,139 @@
518
458
  ]
519
459
  },
520
460
  {
521
- "component": "Menu",
522
- "status": "alpha",
523
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/menu.rb",
524
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/menu/default/",
461
+ "component": "AutoComplete",
462
+ "status": "beta",
463
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete.rb",
464
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/default/",
465
+ "parameters": [
466
+ {
467
+ "name": "label_text",
468
+ "type": "String",
469
+ "default": "N/A",
470
+ "description": "The label of the input."
471
+ },
472
+ {
473
+ "name": "src",
474
+ "type": "String",
475
+ "default": "N/A",
476
+ "description": "The route to query."
477
+ },
478
+ {
479
+ "name": "input_id",
480
+ "type": "String",
481
+ "default": "N/A",
482
+ "description": "Id of the input element."
483
+ },
484
+ {
485
+ "name": "input_name",
486
+ "type": "String",
487
+ "default": "`nil`",
488
+ "description": "Optional name of the input element, defaults to `input_id` when not set."
489
+ },
490
+ {
491
+ "name": "list_id",
492
+ "type": "String",
493
+ "default": "N/A",
494
+ "description": "Id of the list element."
495
+ },
496
+ {
497
+ "name": "visually_hide_label",
498
+ "type": "Boolean",
499
+ "default": "`false`",
500
+ "description": "Controls if the label is visible. If `true`, screen reader only text will be added."
501
+ },
502
+ {
503
+ "name": "show_clear_button",
504
+ "type": "Boolean",
505
+ "default": "`false`",
506
+ "description": "Adds optional clear button."
507
+ },
508
+ {
509
+ "name": "system_arguments",
510
+ "type": "Hash",
511
+ "default": "N/A",
512
+ "description": "[System arguments](/system-arguments)"
513
+ },
514
+ {
515
+ "name": "size",
516
+ "type": "Hash",
517
+ "default": "`:medium`",
518
+ "description": "Input size can be small, medium (default), or large"
519
+ },
520
+ {
521
+ "name": "full_width",
522
+ "type": "Boolean",
523
+ "default": "`false`",
524
+ "description": "Input can be full-width or fit to content"
525
+ },
526
+ {
527
+ "name": "disabled",
528
+ "type": "Boolean",
529
+ "default": "`false`",
530
+ "description": "Disabled input"
531
+ },
532
+ {
533
+ "name": "invalid",
534
+ "type": "Boolean",
535
+ "default": "`false`",
536
+ "description": "Invalid input"
537
+ },
538
+ {
539
+ "name": "placeholder",
540
+ "type": "String",
541
+ "default": "`nil`",
542
+ "description": "The placeholder text displayed within the input"
543
+ },
544
+ {
545
+ "name": "inset",
546
+ "type": "Boolean",
547
+ "default": "`false`",
548
+ "description": "subtle input background color"
549
+ },
550
+ {
551
+ "name": "monospace",
552
+ "type": "Boolean",
553
+ "default": "`false`",
554
+ "description": "monospace input font family"
555
+ }
556
+ ]
557
+ },
558
+ {
559
+ "component": "AutoComplete::Item",
560
+ "status": "beta",
561
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/item.rb",
562
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/item/default/",
525
563
  "parameters": [
564
+ {
565
+ "name": "value",
566
+ "type": "String",
567
+ "default": "N/A",
568
+ "description": "Value of the item."
569
+ },
570
+ {
571
+ "name": "selected",
572
+ "type": "Boolean",
573
+ "default": "`false`",
574
+ "description": "Whether the item is selected."
575
+ },
576
+ {
577
+ "name": "disabled",
578
+ "type": "Boolean",
579
+ "default": "`false`",
580
+ "description": "Whether the item is disabled."
581
+ },
582
+ {
583
+ "name": "description_variant",
584
+ "type": "Hash",
585
+ "default": "`:block`",
586
+ "description": "Changes the description style. Allowed values are :inline, :block"
587
+ },
588
+ {
589
+ "name": "description",
590
+ "type": "String",
591
+ "default": "N/A",
592
+ "description": "Display description text below label"
593
+ },
526
594
  {
527
595
  "name": "system_arguments",
528
596
  "type": "Hash",
@@ -532,16 +600,40 @@
532
600
  ]
533
601
  },
534
602
  {
535
- "component": "NavList",
536
- "status": "alpha",
537
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list.rb",
538
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/default/",
603
+ "component": "Avatar",
604
+ "status": "beta",
605
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar.rb",
606
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/avatar/default/",
539
607
  "parameters": [
540
608
  {
541
- "name": "selected_item_id",
609
+ "name": "src",
610
+ "type": "String",
611
+ "default": "N/A",
612
+ "description": "The source url of the avatar image."
613
+ },
614
+ {
615
+ "name": "alt",
616
+ "type": "String",
617
+ "default": "N/A",
618
+ "description": "Passed through to alt on img tag."
619
+ },
620
+ {
621
+ "name": "size",
622
+ "type": "Integer",
623
+ "default": "`20`",
624
+ "description": "One of `16`, `20`, `24`, `32`, `40`, `48`, or `80`."
625
+ },
626
+ {
627
+ "name": "shape",
542
628
  "type": "Symbol",
629
+ "default": "`:circle`",
630
+ "description": "Shape of the avatar. One of `:circle` or `:square`."
631
+ },
632
+ {
633
+ "name": "href",
634
+ "type": "String",
543
635
  "default": "`nil`",
544
- "description": "The ID of the currently selected item. The default is `nil`, meaning no item is selected."
636
+ "description": "The URL to link to. If used, component will be wrapped by an `<a>` tag."
545
637
  },
546
638
  {
547
639
  "name": "system_arguments",
@@ -552,34 +644,34 @@
552
644
  ]
553
645
  },
554
646
  {
555
- "component": "NavList::Item",
556
- "status": "alpha",
557
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/item.rb",
558
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/item/default/",
647
+ "component": "AvatarStack",
648
+ "status": "beta",
649
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar_stack.rb",
650
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/avatar_stack/default/",
559
651
  "parameters": [
560
652
  {
561
- "name": "selected_item_id",
653
+ "name": "tag",
562
654
  "type": "Symbol",
563
- "default": "`nil`",
564
- "description": "The ID of the currently selected list item. Used internally."
655
+ "default": "`:div`",
656
+ "description": "One of `:div` or `:span`."
565
657
  },
566
658
  {
567
- "name": "selected_by_ids",
568
- "type": "Array<Symbol>",
569
- "default": "`[]`",
570
- "description": "The list of IDs that select this item. In other words, if the `selected_item_id` attribute on the parent `NavList` is set to one of these IDs, the item will appear selected."
659
+ "name": "align",
660
+ "type": "Symbol",
661
+ "default": "`:left`",
662
+ "description": "One of `:left` or `:right`."
571
663
  },
572
664
  {
573
- "name": "expanded",
665
+ "name": "tooltipped",
574
666
  "type": "Boolean",
575
667
  "default": "`false`",
576
- "description": "Whether this item shows (expands) or hides (collapses) its list of sub items."
668
+ "description": "Whether to add a tooltip to the stack or not."
577
669
  },
578
670
  {
579
- "name": "sub_item",
580
- "type": "Boolean",
581
- "default": "`false`",
582
- "description": "Whether or not this item is nested under a parent item. Used internally."
671
+ "name": "body_arguments",
672
+ "type": "Hash",
673
+ "default": "`{}`",
674
+ "description": "Parameters to add to the Body. If `tooltipped` is set, has the same arguments as [Tooltip](/components/tooltip). The default tag is `:div` but can be changed using `tag:` to one of `:div` or `:span`."
583
675
  },
584
676
  {
585
677
  "name": "system_arguments",
@@ -590,16 +682,28 @@
590
682
  ]
591
683
  },
592
684
  {
593
- "component": "NavList::Section",
594
- "status": "alpha",
595
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/section.rb",
596
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/section/default/",
685
+ "component": "BaseButton",
686
+ "status": "beta",
687
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/base_button.rb",
688
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/base_button/default/",
597
689
  "parameters": [
598
690
  {
599
- "name": "selected_item_id",
691
+ "name": "tag",
600
692
  "type": "Symbol",
601
- "default": "`nil`",
602
- "description": "The ID of the currently selected item. Used internally."
693
+ "default": "`:button`",
694
+ "description": "One of `:a`, `:button`, or `:summary`."
695
+ },
696
+ {
697
+ "name": "type",
698
+ "type": "Symbol",
699
+ "default": "`:button`",
700
+ "description": "One of `:button`, `:reset`, or `:submit`."
701
+ },
702
+ {
703
+ "name": "block",
704
+ "type": "Boolean",
705
+ "default": "`false`",
706
+ "description": "Whether button is full-width with `display: block`."
603
707
  },
604
708
  {
605
709
  "name": "system_arguments",
@@ -610,42 +714,52 @@
610
714
  ]
611
715
  },
612
716
  {
613
- "component": "OcticonSymbols",
717
+ "component": "Banner",
614
718
  "status": "alpha",
615
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/octicon_symbols.rb",
616
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/octicon_symbols/default/",
719
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/banner.rb",
720
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/banner/default/",
617
721
  "parameters": [
618
722
  {
619
- "name": "icons",
620
- "type": "Array<Hash>",
621
- "default": "`[]`",
622
- "description": "List of icons to render, in the format { symbol: :icon_name, size: :small }"
623
- }
624
- ]
625
- },
626
- {
627
- "component": "SegmentedControl",
628
- "status": "alpha",
629
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/segmented_control.rb",
630
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/segmented_control/default/",
631
- "parameters": [
723
+ "name": "full",
724
+ "type": "Boolean",
725
+ "default": "`false`",
726
+ "description": "Whether the component should take up the full width of the screen."
727
+ },
632
728
  {
633
- "name": "hide_labels",
729
+ "name": "full_when_narrow",
634
730
  "type": "Boolean",
635
731
  "default": "`false`",
636
- "description": "Whether to hide the labels and only show the icons"
732
+ "description": "Whether the component should take up the full width of the screen when rendered inside smaller viewports."
637
733
  },
638
734
  {
639
- "name": "full_width",
735
+ "name": "dismissible",
640
736
  "type": "Boolean",
641
737
  "default": "`false`",
642
- "description": "If the component should be full width"
738
+ "description": "Whether the component can be dismissed with an \"x\" button."
643
739
  },
644
740
  {
645
- "name": "size",
741
+ "name": "description",
742
+ "type": "String",
743
+ "default": "`nil`",
744
+ "description": "Description text rendered underneath the message."
745
+ },
746
+ {
747
+ "name": "icon",
646
748
  "type": "Symbol",
647
- "default": "`:medium`",
648
- "description": "One of `:large`, `:medium`, or `:small`."
749
+ "default": "`nil`",
750
+ "description": "The name of an [Octicon](https://primer.style/octicons/) icon to use. If no icon is provided, a default one will be chosen based on the scheme."
751
+ },
752
+ {
753
+ "name": "scheme",
754
+ "type": "Symbol",
755
+ "default": "`:default`",
756
+ "description": "One of `:danger`, `:default`, `:success`, or `:warning`."
757
+ },
758
+ {
759
+ "name": "reappear",
760
+ "type": "Boolean",
761
+ "default": "`false`",
762
+ "description": "Whether or not the flash banner should reappear after being dismissed. Only for use in test and preview environments."
649
763
  },
650
764
  {
651
765
  "name": "system_arguments",
@@ -656,11 +770,29 @@
656
770
  ]
657
771
  },
658
772
  {
659
- "component": "TabContainer",
660
- "status": "alpha",
661
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_container.rb",
662
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_container/default/",
773
+ "component": "Blankslate",
774
+ "status": "beta",
775
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/blankslate.rb",
776
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/blankslate/default/",
663
777
  "parameters": [
778
+ {
779
+ "name": "narrow",
780
+ "type": "Boolean",
781
+ "default": "`false`",
782
+ "description": "Adds a maximum width of `485px` to the Blankslate."
783
+ },
784
+ {
785
+ "name": "spacious",
786
+ "type": "Boolean",
787
+ "default": "`false`",
788
+ "description": "Increases the padding from `32px` to `80px 40px`."
789
+ },
790
+ {
791
+ "name": "border",
792
+ "type": "Boolean",
793
+ "default": "`false`",
794
+ "description": "Adds a border around the Blankslate."
795
+ },
664
796
  {
665
797
  "name": "system_arguments",
666
798
  "type": "Hash",
@@ -670,28 +802,16 @@
670
802
  ]
671
803
  },
672
804
  {
673
- "component": "TabNav",
674
- "status": "alpha",
675
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_nav.rb",
676
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_nav/default/",
805
+ "component": "BorderBox",
806
+ "status": "beta",
807
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/border_box.rb",
808
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/border_box/default/",
677
809
  "parameters": [
678
810
  {
679
- "name": "tag",
811
+ "name": "padding",
680
812
  "type": "Symbol",
681
- "default": "`:nav`",
682
- "description": "One of `:div` or `:nav`."
683
- },
684
- {
685
- "name": "label",
686
- "type": "String",
687
- "default": "N/A",
688
- "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements."
689
- },
690
- {
691
- "name": "body_arguments",
692
- "type": "Hash",
693
- "default": "`{}`",
694
- "description": "[System arguments](/system-arguments) for the body wrapper."
813
+ "default": "`:default`",
814
+ "description": "One of `:condensed`, `:default`, or `:spacious`."
695
815
  },
696
816
  {
697
817
  "name": "system_arguments",
@@ -702,35 +822,11 @@
702
822
  ]
703
823
  },
704
824
  {
705
- "component": "TabPanels",
706
- "status": "alpha",
707
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_panels.rb",
708
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_panels/default/",
825
+ "component": "BorderBox::Header",
826
+ "status": "beta",
827
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/border_box/header.rb",
828
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/border_box/header/default/",
709
829
  "parameters": [
710
- {
711
- "name": "label",
712
- "type": "String",
713
- "default": "N/A",
714
- "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs."
715
- },
716
- {
717
- "name": "align",
718
- "type": "Symbol",
719
- "default": "N/A",
720
- "description": "One of `:left` or `:right`. - Defaults to left"
721
- },
722
- {
723
- "name": "body_arguments",
724
- "type": "Hash",
725
- "default": "`{}`",
726
- "description": "[System arguments](/system-arguments) for the body wrapper."
727
- },
728
- {
729
- "name": "wrapper_arguments",
730
- "type": "Hash",
731
- "default": "`{}`",
732
- "description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
733
- },
734
830
  {
735
831
  "name": "system_arguments",
736
832
  "type": "Hash",
@@ -740,180 +836,150 @@
740
836
  ]
741
837
  },
742
838
  {
743
- "component": "TextField",
744
- "status": "alpha",
745
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/text_field.rb",
746
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/text_field/default/",
839
+ "component": "Box",
840
+ "status": "stable",
841
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/box.rb",
842
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/box/default/",
747
843
  "parameters": [
748
844
  {
749
- "name": "name",
750
- "type": "String",
751
- "default": "N/A",
752
- "description": "Value for the HTML name attribute."
753
- },
754
- {
755
- "name": "id",
756
- "type": "String",
757
- "default": "N/A",
758
- "description": "Value for the HTML id attribute."
759
- },
760
- {
761
- "name": "class",
762
- "type": "String",
763
- "default": "N/A",
764
- "description": "A list of CSS classes to add to the input. Exists for compatibility with Rails form builders."
765
- },
766
- {
767
- "name": "classes",
768
- "type": "String",
845
+ "name": "system_arguments",
846
+ "type": "Hash",
769
847
  "default": "N/A",
770
- "description": "A list of CSS classes to add to the input. Combined with the `:class` argument."
771
- },
848
+ "description": "[System arguments](/system-arguments)"
849
+ }
850
+ ]
851
+ },
852
+ {
853
+ "component": "Breadcrumbs",
854
+ "status": "beta",
855
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/breadcrumbs.rb",
856
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/breadcrumbs/default/",
857
+ "parameters": [
772
858
  {
773
- "name": "caption",
774
- "type": "String",
859
+ "name": "system_arguments",
860
+ "type": "Hash",
775
861
  "default": "N/A",
776
- "description": "Caption text to render below the input."
777
- },
862
+ "description": "[System arguments](/system-arguments)"
863
+ }
864
+ ]
865
+ },
866
+ {
867
+ "component": "Button",
868
+ "status": "deprecated",
869
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/button_component.rb",
870
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/button/default/",
871
+ "parameters": [
778
872
  {
779
- "name": "label",
780
- "type": "String",
781
- "default": "N/A",
782
- "description": "Label text displayed above the input."
873
+ "name": "scheme",
874
+ "type": "Symbol",
875
+ "default": "`:default`",
876
+ "description": "One of `:danger`, `:default`, `:invisible`, `:link`, `:outline`, or `:primary`."
783
877
  },
784
878
  {
785
- "name": "visually_hide_label",
786
- "type": "Boolean",
787
- "default": "N/A",
788
- "description": "Whether or not to visually hide the label. If `true` the label will be hidden visually but still available to screen readers."
879
+ "name": "variant",
880
+ "type": "Symbol",
881
+ "default": "`nil`",
882
+ "description": "DEPRECATED. One of `:medium` or `:small`."
789
883
  },
790
884
  {
791
885
  "name": "size",
792
886
  "type": "Symbol",
793
- "default": "N/A",
794
- "description": "The size of the field. One of `:large`, `:medium`, or `:small`."
795
- },
796
- {
797
- "name": "show_clear_button",
798
- "type": "Boolean",
799
- "default": "N/A",
800
- "description": "Whether or not to include a clear button inside the input that clears the input's contents when clicked."
801
- },
802
- {
803
- "name": "clear_button_id",
804
- "type": "String",
805
- "default": "N/A",
806
- "description": "The HTML id attribute of the clear button."
887
+ "default": "`:medium`",
888
+ "description": "One of `:medium` or `:small`."
807
889
  },
808
890
  {
809
- "name": "full_width",
810
- "type": "Boolean",
811
- "default": "N/A",
812
- "description": "Controls whether or not the input takes the full width of its container."
891
+ "name": "tag",
892
+ "type": "Symbol",
893
+ "default": "`:button`",
894
+ "description": "One of `:a`, `:button`, or `:summary`."
813
895
  },
814
896
  {
815
- "name": "disabled",
816
- "type": "Boolean",
817
- "default": "N/A",
818
- "description": "Whether or not the input should accept keyboard and mouse input."
897
+ "name": "type",
898
+ "type": "Symbol",
899
+ "default": "`:button`",
900
+ "description": "One of `:button`, `:reset`, or `:submit`."
819
901
  },
820
902
  {
821
- "name": "invalid",
903
+ "name": "group_item",
822
904
  "type": "Boolean",
823
- "default": "N/A",
824
- "description": "If `true`, renders the input in a visually invalid state."
825
- },
826
- {
827
- "name": "placeholder",
828
- "type": "String",
829
- "default": "N/A",
830
- "description": "Placeholder text."
905
+ "default": "`false`",
906
+ "description": "Whether button is part of a ButtonGroup."
831
907
  },
832
908
  {
833
- "name": "inset",
909
+ "name": "block",
834
910
  "type": "Boolean",
835
- "default": "N/A",
836
- "description": "If `true`, renders the input in a visually inset state."
911
+ "default": "`false`",
912
+ "description": "Whether button is full-width with `display: block`."
837
913
  },
838
914
  {
839
- "name": "monospace",
915
+ "name": "dropdown",
840
916
  "type": "Boolean",
841
- "default": "N/A",
842
- "description": "If `true`, uses a monospace font for the input field."
917
+ "default": "`false`",
918
+ "description": "Whether or not to render a dropdown caret."
843
919
  },
844
920
  {
845
- "name": "leading_visual",
921
+ "name": "system_arguments",
846
922
  "type": "Hash",
847
923
  "default": "N/A",
848
- "description": "Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's [Octicon component](https://primer.style/view-components/components/octicon)."
849
- },
924
+ "description": "[System arguments](/system-arguments)"
925
+ }
926
+ ]
927
+ },
928
+ {
929
+ "component": "ButtonGroup",
930
+ "status": "beta",
931
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button_group.rb",
932
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button_group/default/",
933
+ "parameters": [
850
934
  {
851
- "name": "validation_message",
852
- "type": "String",
853
- "default": "N/A",
854
- "description": "A validation message to display beneath the input. Implicitly sets `invalid` to `true`."
935
+ "name": "variant",
936
+ "type": "Symbol",
937
+ "default": "`nil`",
938
+ "description": "DEPRECATED. One of `:medium` or `:small`."
855
939
  },
856
940
  {
857
- "name": "label_arguments",
858
- "type": "Hash",
859
- "default": "N/A",
860
- "description": "System arugments passed to the Rails builder's `#label` method. These arguments will appear as HTML attributes on the `<label>` tag."
941
+ "name": "size",
942
+ "type": "Symbol",
943
+ "default": "`:medium`",
944
+ "description": "One of `:medium` or `:small`."
861
945
  },
862
946
  {
863
947
  "name": "system_arguments",
864
948
  "type": "Hash",
865
949
  "default": "N/A",
866
950
  "description": "[System arguments](/system-arguments)"
867
- },
868
- {
869
- "name": "block",
870
- "type": "Proc",
871
- "default": "N/A",
872
- "description": "Unused."
873
951
  }
874
952
  ]
875
953
  },
876
954
  {
877
- "component": "ToggleSwitch",
955
+ "component": "ButtonMarketing",
878
956
  "status": "alpha",
879
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/toggle_switch.rb",
880
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/toggle_switch/default/",
957
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/button_marketing.rb",
958
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/button_marketing/default/",
881
959
  "parameters": [
882
960
  {
883
- "name": "src",
884
- "type": "String",
885
- "default": "`nil`",
886
- "description": "The URL to POST to when the toggle switch is toggled. If `nil`, the toggle switch will not make any requests."
887
- },
888
- {
889
- "name": "csrf_token",
890
- "type": "String",
891
- "default": "`nil`",
892
- "description": "A CSRF token that will be sent to the server as \"authenticity_token\" when the toggle switch is toggled. Unused if `src` is `nil`."
893
- },
894
- {
895
- "name": "checked",
896
- "type": "Boolean",
897
- "default": "`false`",
898
- "description": "Whether the toggle switch is on or off."
961
+ "name": "scheme",
962
+ "type": "Symbol",
963
+ "default": "`:default`",
964
+ "description": "One of `:default`, `:outline`, `:primary`, or `:transparent`."
899
965
  },
900
966
  {
901
- "name": "enabled",
902
- "type": "Boolean",
903
- "default": "`true`",
904
- "description": "Whether or not the toggle switch responds to user input."
967
+ "name": "variant",
968
+ "type": "Symbol",
969
+ "default": "`:default`",
970
+ "description": "One of `:default` or `:large`."
905
971
  },
906
972
  {
907
- "name": "size",
973
+ "name": "tag",
908
974
  "type": "Symbol",
909
- "default": "`:medium`",
910
- "description": "What size toggle switch to render. One of `:end` or `:start`."
975
+ "default": "`:button`",
976
+ "description": "One of `:a` or `:button`."
911
977
  },
912
978
  {
913
- "name": "status_label_position",
979
+ "name": "type",
914
980
  "type": "Symbol",
915
- "default": "`:start`",
916
- "description": "Which side of the toggle switch to render the status label. One of `:medium` or `:small`."
981
+ "default": "`:button`",
982
+ "description": "One of `:button` or `:submit`."
917
983
  },
918
984
  {
919
985
  "name": "system_arguments",
@@ -924,34 +990,28 @@
924
990
  ]
925
991
  },
926
992
  {
927
- "component": "Tooltip",
928
- "status": "alpha",
929
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tooltip.rb",
930
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tooltip/default/",
993
+ "component": "ClipboardCopy",
994
+ "status": "beta",
995
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/clipboard_copy.rb",
996
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/clipboard_copy/default/",
931
997
  "parameters": [
932
998
  {
933
- "name": "for_id",
999
+ "name": "aria-label",
934
1000
  "type": "String",
935
1001
  "default": "N/A",
936
- "description": "The ID of the element that the tooltip should be attached to."
937
- },
938
- {
939
- "name": "type",
940
- "type": "Symbol",
941
- "default": "N/A",
942
- "description": "One of `:description` or `:label`."
1002
+ "description": "String that will be read to screenreaders when the component is focused"
943
1003
  },
944
1004
  {
945
- "name": "direction",
946
- "type": "Symbol",
947
- "default": "`:s`",
948
- "description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
1005
+ "name": "value",
1006
+ "type": "String",
1007
+ "default": "`nil`",
1008
+ "description": "Text to copy into the users clipboard when they click the component."
949
1009
  },
950
1010
  {
951
- "name": "text",
1011
+ "name": "for",
952
1012
  "type": "String",
953
1013
  "default": "N/A",
954
- "description": "The text content of the tooltip. This should be brief and no longer than a sentence."
1014
+ "description": "Element id from where to get the copied value."
955
1015
  },
956
1016
  {
957
1017
  "name": "system_arguments",
@@ -962,34 +1022,66 @@
962
1022
  ]
963
1023
  },
964
1024
  {
965
- "component": "UnderlineNav",
966
- "status": "alpha",
967
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_nav.rb",
968
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/underline_nav/default/",
1025
+ "component": "CloseButton",
1026
+ "status": "beta",
1027
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/close_button.rb",
1028
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/close_button/default/",
969
1029
  "parameters": [
970
1030
  {
971
- "name": "tag",
1031
+ "name": "type",
972
1032
  "type": "Symbol",
973
- "default": "`:nav`",
974
- "description": "One of `:div` or `:nav`."
1033
+ "default": "`:button`",
1034
+ "description": "One of `:button` or `:submit`."
975
1035
  },
976
1036
  {
977
- "name": "label",
978
- "type": "String",
1037
+ "name": "system_arguments",
1038
+ "type": "Hash",
979
1039
  "default": "N/A",
980
- "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements."
1040
+ "description": "[System arguments](/system-arguments)"
1041
+ }
1042
+ ]
1043
+ },
1044
+ {
1045
+ "component": "Counter",
1046
+ "status": "beta",
1047
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/counter.rb",
1048
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/counter/default/",
1049
+ "parameters": [
1050
+ {
1051
+ "name": "count",
1052
+ "type": "Integer, Float::INFINITY, nil",
1053
+ "default": "`0`",
1054
+ "description": "The number to be displayed (e.x. # of issues, pull requests)"
981
1055
  },
982
1056
  {
983
- "name": "align",
1057
+ "name": "scheme",
984
1058
  "type": "Symbol",
985
- "default": "`:left`",
986
- "description": "One of `:left` or `:right`. - Defaults to left"
1059
+ "default": "`:default`",
1060
+ "description": "Color scheme. One of `:default`, `:primary`, or `:secondary`."
987
1061
  },
988
1062
  {
989
- "name": "body_arguments",
990
- "type": "Hash",
991
- "default": "`{}`",
992
- "description": "[System arguments](/system-arguments) for the body wrapper."
1063
+ "name": "limit",
1064
+ "type": "Integer, nil",
1065
+ "default": "`5_000`",
1066
+ "description": "Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display \"5,000+\")"
1067
+ },
1068
+ {
1069
+ "name": "hide_if_zero",
1070
+ "type": "Boolean",
1071
+ "default": "`false`",
1072
+ "description": "If true, a `hidden` attribute is added to the counter if `count` is zero."
1073
+ },
1074
+ {
1075
+ "name": "text",
1076
+ "type": "String",
1077
+ "default": "`\"\"`",
1078
+ "description": "Text to display instead of count."
1079
+ },
1080
+ {
1081
+ "name": "round",
1082
+ "type": "Boolean",
1083
+ "default": "`false`",
1084
+ "description": "Whether to apply our standard rounding logic to value."
993
1085
  },
994
1086
  {
995
1087
  "name": "system_arguments",
@@ -1000,34 +1092,22 @@
1000
1092
  ]
1001
1093
  },
1002
1094
  {
1003
- "component": "UnderlinePanels",
1004
- "status": "alpha",
1005
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_panels.rb",
1006
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/underline_panels/default/",
1007
- "parameters": [
1008
- {
1009
- "name": "label",
1010
- "type": "String",
1011
- "default": "N/A",
1012
- "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs."
1013
- },
1095
+ "component": "Details",
1096
+ "status": "beta",
1097
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/details.rb",
1098
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/details/default/",
1099
+ "parameters": [
1014
1100
  {
1015
- "name": "align",
1101
+ "name": "overlay",
1016
1102
  "type": "Symbol",
1017
- "default": "`:left`",
1018
- "description": "One of `:left` or `:right`. - Defaults to left"
1019
- },
1020
- {
1021
- "name": "body_arguments",
1022
- "type": "Hash",
1023
- "default": "`{}`",
1024
- "description": "[System arguments](/system-arguments) for the body wrapper."
1103
+ "default": "`:none`",
1104
+ "description": "Dictates the type of overlay to render with. One of `:dark`, `:default`, or `:none`."
1025
1105
  },
1026
1106
  {
1027
- "name": "wrapper_arguments",
1028
- "type": "Hash",
1029
- "default": "`{}`",
1030
- "description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
1107
+ "name": "reset",
1108
+ "type": "Boolean",
1109
+ "default": "`false`",
1110
+ "description": "Defaults to false. If set to true, it will remove the default caret and remove style from the summary element"
1031
1111
  },
1032
1112
  {
1033
1113
  "name": "system_arguments",
@@ -1038,138 +1118,122 @@
1038
1118
  ]
1039
1119
  },
1040
1120
  {
1041
- "component": "AutoComplete",
1042
- "status": "beta",
1043
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete.rb",
1044
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/default/",
1121
+ "component": "Dialog",
1122
+ "status": "alpha",
1123
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog.rb",
1124
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/default/",
1045
1125
  "parameters": [
1046
1126
  {
1047
- "name": "label_text",
1127
+ "name": "id",
1048
1128
  "type": "String",
1049
- "default": "N/A",
1050
- "description": "The label of the input."
1129
+ "default": "`self.class.generate_id`",
1130
+ "description": "The id of the dialog."
1051
1131
  },
1052
1132
  {
1053
- "name": "src",
1133
+ "name": "title",
1054
1134
  "type": "String",
1055
1135
  "default": "N/A",
1056
- "description": "The route to query."
1136
+ "description": "Describes the content of the dialog."
1057
1137
  },
1058
1138
  {
1059
- "name": "input_id",
1139
+ "name": "subtitle",
1060
1140
  "type": "String",
1061
- "default": "N/A",
1062
- "description": "Id of the input element."
1141
+ "default": "`nil`",
1142
+ "description": "Provides additional context for the dialog, also setting the `aria-describedby` attribute."
1063
1143
  },
1064
1144
  {
1065
- "name": "input_name",
1066
- "type": "String",
1067
- "default": "`nil`",
1068
- "description": "Optional name of the input element, defaults to `input_id` when not set."
1145
+ "name": "size",
1146
+ "type": "Symbol",
1147
+ "default": "`:medium`",
1148
+ "description": "The size of the dialog. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
1069
1149
  },
1070
1150
  {
1071
- "name": "list_id",
1072
- "type": "String",
1073
- "default": "N/A",
1074
- "description": "Id of the list element."
1151
+ "name": "position",
1152
+ "type": "Symbol",
1153
+ "default": "`:center`",
1154
+ "description": "The position of the dialog. One of `:center`, `:left`, or `:right`."
1075
1155
  },
1076
1156
  {
1077
- "name": "visually_hide_label",
1078
- "type": "Boolean",
1079
- "default": "`false`",
1080
- "description": "Controls if the label is visible. If `true`, screen reader only text will be added."
1157
+ "name": "position_narrow",
1158
+ "type": "Symbol",
1159
+ "default": "`:inherit`",
1160
+ "description": "The position of the dialog when narrow. One of `:bottom`, `:fullscreen`, `:inherit`, `:left`, or `:right`."
1081
1161
  },
1082
1162
  {
1083
- "name": "show_clear_button",
1163
+ "name": "visually_hide_title",
1084
1164
  "type": "Boolean",
1085
1165
  "default": "`false`",
1086
- "description": "Adds optional clear button."
1166
+ "description": "If true will hide the heading title, while still making it available to Screen Readers."
1087
1167
  },
1088
1168
  {
1089
1169
  "name": "system_arguments",
1090
1170
  "type": "Hash",
1091
1171
  "default": "N/A",
1092
1172
  "description": "[System arguments](/system-arguments)"
1093
- },
1094
- {
1095
- "name": "size",
1096
- "type": "Hash",
1097
- "default": "`:medium`",
1098
- "description": "Input size can be small, medium (default), or large"
1099
- },
1100
- {
1101
- "name": "full_width",
1102
- "type": "Boolean",
1103
- "default": "`false`",
1104
- "description": "Input can be full-width or fit to content"
1105
- },
1106
- {
1107
- "name": "disabled",
1108
- "type": "Boolean",
1109
- "default": "`false`",
1110
- "description": "Disabled input"
1111
- },
1112
- {
1113
- "name": "invalid",
1114
- "type": "Boolean",
1115
- "default": "`false`",
1116
- "description": "Invalid input"
1117
- },
1173
+ }
1174
+ ]
1175
+ },
1176
+ {
1177
+ "component": "Dropdown",
1178
+ "status": "alpha",
1179
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dropdown.rb",
1180
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dropdown/default/",
1181
+ "parameters": [
1118
1182
  {
1119
- "name": "placeholder",
1120
- "type": "String",
1121
- "default": "`nil`",
1122
- "description": "The placeholder text displayed within the input"
1183
+ "name": "overlay",
1184
+ "type": "Symbol",
1185
+ "default": "`:default`",
1186
+ "description": "One of `:dark`, `:default`, or `:none`."
1123
1187
  },
1124
1188
  {
1125
- "name": "inset",
1189
+ "name": "with_caret",
1126
1190
  "type": "Boolean",
1127
1191
  "default": "`false`",
1128
- "description": "subtle input background color"
1192
+ "description": "Whether or not a caret should be rendered in the button."
1129
1193
  },
1130
1194
  {
1131
- "name": "monospace",
1132
- "type": "Boolean",
1133
- "default": "`false`",
1134
- "description": "monospace input font family"
1195
+ "name": "system_arguments",
1196
+ "type": "Hash",
1197
+ "default": "N/A",
1198
+ "description": "[System arguments](/system-arguments)"
1135
1199
  }
1136
1200
  ]
1137
1201
  },
1138
1202
  {
1139
- "component": "AutoComplete::Item",
1203
+ "component": "Flash",
1140
1204
  "status": "beta",
1141
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/auto_complete/item.rb",
1142
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/auto_complete/item/default/",
1205
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb",
1206
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/flash/default/",
1143
1207
  "parameters": [
1144
1208
  {
1145
- "name": "value",
1146
- "type": "String",
1147
- "default": "N/A",
1148
- "description": "Value of the item."
1209
+ "name": "full",
1210
+ "type": "Boolean",
1211
+ "default": "`false`",
1212
+ "description": "Whether the component should take up the full width of the screen."
1149
1213
  },
1150
1214
  {
1151
- "name": "selected",
1215
+ "name": "spacious",
1152
1216
  "type": "Boolean",
1153
1217
  "default": "`false`",
1154
- "description": "Whether the item is selected."
1218
+ "description": "Whether to add margin to the bottom of the component."
1155
1219
  },
1156
1220
  {
1157
- "name": "disabled",
1221
+ "name": "dismissible",
1158
1222
  "type": "Boolean",
1159
1223
  "default": "`false`",
1160
- "description": "Whether the item is disabled."
1224
+ "description": "Whether the component can be dismissed with an X button."
1161
1225
  },
1162
1226
  {
1163
- "name": "description_variant",
1164
- "type": "Hash",
1165
- "default": "`:block`",
1166
- "description": "Changes the description style. Allowed values are :inline, :block"
1227
+ "name": "icon",
1228
+ "type": "Symbol",
1229
+ "default": "`nil`",
1230
+ "description": "Name of Octicon icon to use."
1167
1231
  },
1168
1232
  {
1169
- "name": "description",
1170
- "type": "String",
1171
- "default": "N/A",
1172
- "description": "Display description text below label"
1233
+ "name": "scheme",
1234
+ "type": "Symbol",
1235
+ "default": "`:default`",
1236
+ "description": "One of `:danger`, `:default`, `:success`, or `:warning`."
1173
1237
  },
1174
1238
  {
1175
1239
  "name": "system_arguments",
@@ -1180,40 +1244,16 @@
1180
1244
  ]
1181
1245
  },
1182
1246
  {
1183
- "component": "Avatar",
1247
+ "component": "Heading",
1184
1248
  "status": "beta",
1185
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar.rb",
1186
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/avatar/default/",
1249
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/heading.rb",
1250
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/heading/default/",
1187
1251
  "parameters": [
1188
1252
  {
1189
- "name": "src",
1190
- "type": "String",
1191
- "default": "N/A",
1192
- "description": "The source url of the avatar image."
1193
- },
1194
- {
1195
- "name": "alt",
1253
+ "name": "tag",
1196
1254
  "type": "String",
1197
1255
  "default": "N/A",
1198
- "description": "Passed through to alt on img tag."
1199
- },
1200
- {
1201
- "name": "size",
1202
- "type": "Integer",
1203
- "default": "`20`",
1204
- "description": "One of `16`, `20`, `24`, `32`, `40`, `48`, or `80`."
1205
- },
1206
- {
1207
- "name": "shape",
1208
- "type": "Symbol",
1209
- "default": "`:circle`",
1210
- "description": "Shape of the avatar. One of `:circle` or `:square`."
1211
- },
1212
- {
1213
- "name": "href",
1214
- "type": "String",
1215
- "default": "`nil`",
1216
- "description": "The URL to link to. If used, component will be wrapped by an `<a>` tag."
1256
+ "description": "One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`."
1217
1257
  },
1218
1258
  {
1219
1259
  "name": "system_arguments",
@@ -1224,34 +1264,22 @@
1224
1264
  ]
1225
1265
  },
1226
1266
  {
1227
- "component": "AvatarStack",
1228
- "status": "beta",
1229
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/avatar_stack.rb",
1230
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/avatar_stack/default/",
1267
+ "component": "HiddenTextExpander",
1268
+ "status": "alpha",
1269
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/hidden_text_expander.rb",
1270
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/hidden_text_expander/default/",
1231
1271
  "parameters": [
1232
1272
  {
1233
- "name": "tag",
1234
- "type": "Symbol",
1235
- "default": "`:div`",
1236
- "description": "One of `:div` or `:span`."
1237
- },
1238
- {
1239
- "name": "align",
1240
- "type": "Symbol",
1241
- "default": "`:left`",
1242
- "description": "One of `:left` or `:right`."
1243
- },
1244
- {
1245
- "name": "tooltipped",
1273
+ "name": "inline",
1246
1274
  "type": "Boolean",
1247
1275
  "default": "`false`",
1248
- "description": "Whether to add a tooltip to the stack or not."
1276
+ "description": "Whether or not the expander is inline."
1249
1277
  },
1250
1278
  {
1251
- "name": "body_arguments",
1279
+ "name": "button_arguments",
1252
1280
  "type": "Hash",
1253
1281
  "default": "`{}`",
1254
- "description": "Parameters to add to the Body. If `tooltipped` is set, has the same arguments as [Tooltip](/components/tooltip). The default tag is `:div` but can be changed using `tag:` to one of `:div` or `:span`."
1282
+ "description": "[System arguments](/system-arguments) for the button element."
1255
1283
  },
1256
1284
  {
1257
1285
  "name": "system_arguments",
@@ -1262,28 +1290,40 @@
1262
1290
  ]
1263
1291
  },
1264
1292
  {
1265
- "component": "BaseButton",
1293
+ "component": "Label",
1266
1294
  "status": "beta",
1267
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/base_button.rb",
1268
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/base_button/default/",
1295
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/label.rb",
1296
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/label/default/",
1269
1297
  "parameters": [
1270
1298
  {
1271
1299
  "name": "tag",
1272
1300
  "type": "Symbol",
1273
- "default": "`:button`",
1274
- "description": "One of `:a`, `:button`, or `:summary`."
1301
+ "default": "`:span`",
1302
+ "description": "One of `:a`, `:div`, `:span`, or `:summary`."
1275
1303
  },
1276
1304
  {
1277
- "name": "type",
1305
+ "name": "scheme",
1278
1306
  "type": "Symbol",
1279
- "default": "`:button`",
1280
- "description": "One of `:button`, `:reset`, or `:submit`."
1307
+ "default": "`:default`",
1308
+ "description": "One of `:accent`, `:attention`, `:danger`, `:default`, `:done`, `:info`, `:orange`, `:primary`, `:purple`, `:secondary`, `:severe`, `:sponsors`, `:success`, or `:warning`."
1281
1309
  },
1282
1310
  {
1283
- "name": "block",
1311
+ "name": "size",
1312
+ "type": "Symbol",
1313
+ "default": "`:medium`",
1314
+ "description": "One of `:large` or `:medium`."
1315
+ },
1316
+ {
1317
+ "name": "inline",
1284
1318
  "type": "Boolean",
1285
1319
  "default": "`false`",
1286
- "description": "Whether button is full-width with `display: block`."
1320
+ "description": "Whether or not to render this label inline."
1321
+ },
1322
+ {
1323
+ "name": "variant",
1324
+ "type": "Symbol",
1325
+ "default": "`:none`",
1326
+ "description": "One of `:inline`, `:large`, or `:none`."
1287
1327
  },
1288
1328
  {
1289
1329
  "name": "system_arguments",
@@ -1294,28 +1334,28 @@
1294
1334
  ]
1295
1335
  },
1296
1336
  {
1297
- "component": "Blankslate",
1298
- "status": "beta",
1299
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/blankslate.rb",
1300
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/blankslate/default/",
1337
+ "component": "Layout",
1338
+ "status": "alpha",
1339
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/layout_component.rb",
1340
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/layout/default/",
1301
1341
  "parameters": [
1302
1342
  {
1303
- "name": "narrow",
1343
+ "name": "responsive",
1304
1344
  "type": "Boolean",
1305
1345
  "default": "`false`",
1306
- "description": "Adds a maximum width of `485px` to the Blankslate."
1346
+ "description": "Whether to collapse layout to a single column at smaller widths."
1307
1347
  },
1308
1348
  {
1309
- "name": "spacious",
1310
- "type": "Boolean",
1311
- "default": "`false`",
1312
- "description": "Increases the padding from `32px` to `80px 40px`."
1349
+ "name": "side",
1350
+ "type": "Symbol",
1351
+ "default": "`:right`",
1352
+ "description": "Which side to display the sidebar on. One of `:left` or `:right`."
1313
1353
  },
1314
1354
  {
1315
- "name": "border",
1316
- "type": "Boolean",
1317
- "default": "`false`",
1318
- "description": "Adds a border around the Blankslate."
1355
+ "name": "sidebar_col",
1356
+ "type": "Integer",
1357
+ "default": "`3`",
1358
+ "description": "Sidebar column width."
1319
1359
  },
1320
1360
  {
1321
1361
  "name": "system_arguments",
@@ -1326,16 +1366,40 @@
1326
1366
  ]
1327
1367
  },
1328
1368
  {
1329
- "component": "BorderBox",
1369
+ "component": "Link",
1330
1370
  "status": "beta",
1331
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/border_box.rb",
1332
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/border_box/default/",
1371
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/link.rb",
1372
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/link/default/",
1333
1373
  "parameters": [
1334
1374
  {
1335
- "name": "padding",
1375
+ "name": "tag",
1376
+ "type": "String",
1377
+ "default": "`:a`",
1378
+ "description": "One of `:a` or `:span`."
1379
+ },
1380
+ {
1381
+ "name": "href",
1382
+ "type": "String",
1383
+ "default": "`nil`",
1384
+ "description": "URL to be used for the Link. Required if tag is `:a`. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered."
1385
+ },
1386
+ {
1387
+ "name": "scheme",
1336
1388
  "type": "Symbol",
1337
1389
  "default": "`:default`",
1338
- "description": "One of `:condensed`, `:default`, or `:spacious`."
1390
+ "description": "One of `:default`, `:primary`, or `:secondary`."
1391
+ },
1392
+ {
1393
+ "name": "muted",
1394
+ "type": "Boolean",
1395
+ "default": "`false`",
1396
+ "description": "Uses light gray for Link color, and blue on hover."
1397
+ },
1398
+ {
1399
+ "name": "underline",
1400
+ "type": "Boolean",
1401
+ "default": "`true`",
1402
+ "description": "Whether or not to underline the link."
1339
1403
  },
1340
1404
  {
1341
1405
  "name": "system_arguments",
@@ -1346,11 +1410,17 @@
1346
1410
  ]
1347
1411
  },
1348
1412
  {
1349
- "component": "BorderBox::Header",
1413
+ "component": "Markdown",
1350
1414
  "status": "beta",
1351
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/border_box/header.rb",
1352
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/border_box/header/default/",
1415
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/markdown.rb",
1416
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/markdown/default/",
1353
1417
  "parameters": [
1418
+ {
1419
+ "name": "tag",
1420
+ "type": "Symbol",
1421
+ "default": "`:div`",
1422
+ "description": "One of `:article`, `:div`, or `:td`."
1423
+ },
1354
1424
  {
1355
1425
  "name": "system_arguments",
1356
1426
  "type": "Hash",
@@ -1360,10 +1430,10 @@
1360
1430
  ]
1361
1431
  },
1362
1432
  {
1363
- "component": "Breadcrumbs",
1364
- "status": "beta",
1365
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/breadcrumbs.rb",
1366
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/breadcrumbs/default/",
1433
+ "component": "Menu",
1434
+ "status": "alpha",
1435
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/menu.rb",
1436
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/menu/default/",
1367
1437
  "parameters": [
1368
1438
  {
1369
1439
  "name": "system_arguments",
@@ -1374,46 +1444,46 @@
1374
1444
  ]
1375
1445
  },
1376
1446
  {
1377
- "component": "Button",
1378
- "status": "beta",
1379
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button.rb",
1380
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button/default/",
1447
+ "component": "Navigation::Tab",
1448
+ "status": "alpha",
1449
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb",
1450
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/navigation/tab/default/",
1381
1451
  "parameters": [
1382
1452
  {
1383
- "name": "scheme",
1384
- "type": "Symbol",
1385
- "default": "`:default`",
1386
- "description": "One of `:danger`, `:default`, `:invisible`, `:link`, `:primary`, or `:secondary`."
1453
+ "name": "list",
1454
+ "type": "Boolean",
1455
+ "default": "`false`",
1456
+ "description": "Whether the Tab is an item in a `<ul>` list."
1387
1457
  },
1388
1458
  {
1389
- "name": "size",
1390
- "type": "Symbol",
1391
- "default": "`:medium`",
1392
- "description": "One of `:large`, `:medium`, or `:small`."
1459
+ "name": "selected",
1460
+ "type": "Boolean",
1461
+ "default": "`false`",
1462
+ "description": "Whether the Tab is selected or not."
1393
1463
  },
1394
1464
  {
1395
- "name": "block",
1465
+ "name": "with_panel",
1396
1466
  "type": "Boolean",
1397
1467
  "default": "`false`",
1398
- "description": "Whether button is full-width with `display: block`."
1468
+ "description": "Whether the Tab has an associated panel."
1399
1469
  },
1400
1470
  {
1401
- "name": "align_content",
1402
- "type": "Symbol",
1403
- "default": "`:center`",
1404
- "description": "One of `:center` or `:start`."
1471
+ "name": "panel_id",
1472
+ "type": "String",
1473
+ "default": "`\"\"`",
1474
+ "description": "Only applies if `with_panel` is `true`. Unique id of panel."
1405
1475
  },
1406
1476
  {
1407
- "name": "tag",
1408
- "type": "Symbol",
1409
- "default": "`:button`",
1410
- "description": "One of `:a`, `:button`, or `:summary`."
1477
+ "name": "icon_classes",
1478
+ "type": "Boolean",
1479
+ "default": "`\"\"`",
1480
+ "description": "Classes that must always be applied to icons."
1411
1481
  },
1412
1482
  {
1413
- "name": "type",
1414
- "type": "Symbol",
1415
- "default": "`:button`",
1416
- "description": "One of `:button`, `:reset`, or `:submit`."
1483
+ "name": "wrapper_arguments",
1484
+ "type": "Hash",
1485
+ "default": "`{}`",
1486
+ "description": "[System arguments](/system-arguments) to be used in the `<li>` wrapper when the tab is an item in a list."
1417
1487
  },
1418
1488
  {
1419
1489
  "name": "system_arguments",
@@ -1424,22 +1494,34 @@
1424
1494
  ]
1425
1495
  },
1426
1496
  {
1427
- "component": "ButtonGroup",
1497
+ "component": "Octicon",
1428
1498
  "status": "beta",
1429
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/button_group.rb",
1430
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/button_group/default/",
1499
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/octicon.rb",
1500
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/octicon/default/",
1431
1501
  "parameters": [
1432
1502
  {
1433
- "name": "variant",
1434
- "type": "Symbol",
1503
+ "name": "icon_name",
1504
+ "type": "Symbol, String",
1435
1505
  "default": "`nil`",
1436
- "description": "DEPRECATED. One of `:medium` or `:small`."
1506
+ "description": "Name of [Octicon](https://primer.style/octicons/) to use."
1507
+ },
1508
+ {
1509
+ "name": "icon",
1510
+ "type": "Symbol, String",
1511
+ "default": "`nil`",
1512
+ "description": "Name of [Octicon](https://primer.style/octicons/) to use."
1437
1513
  },
1438
1514
  {
1439
1515
  "name": "size",
1440
1516
  "type": "Symbol",
1441
- "default": "`:medium`",
1442
- "description": "One of `:medium` or `:small`."
1517
+ "default": "`:small`",
1518
+ "description": "One of `:xsmall` (`12`), `:small` (`16`), or `:medium` (`24`)."
1519
+ },
1520
+ {
1521
+ "name": "use_symbol",
1522
+ "type": "Boolean",
1523
+ "default": "`false`",
1524
+ "description": "EXPERIMENTAL (May change or be removed) - Set to true when using with [OcticonSymbols](/components/alpha/octiconsymbols)."
1443
1525
  },
1444
1526
  {
1445
1527
  "name": "system_arguments",
@@ -1450,29 +1532,11 @@
1450
1532
  ]
1451
1533
  },
1452
1534
  {
1453
- "component": "ClipboardCopy",
1535
+ "component": "Popover",
1454
1536
  "status": "beta",
1455
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/clipboard_copy.rb",
1456
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/clipboard_copy/default/",
1537
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/popover.rb",
1538
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/popover/default/",
1457
1539
  "parameters": [
1458
- {
1459
- "name": "aria-label",
1460
- "type": "String",
1461
- "default": "N/A",
1462
- "description": "String that will be read to screenreaders when the component is focused"
1463
- },
1464
- {
1465
- "name": "value",
1466
- "type": "String",
1467
- "default": "`nil`",
1468
- "description": "Text to copy into the users clipboard when they click the component."
1469
- },
1470
- {
1471
- "name": "for",
1472
- "type": "String",
1473
- "default": "N/A",
1474
- "description": "Element id from where to get the copied value."
1475
- },
1476
1540
  {
1477
1541
  "name": "system_arguments",
1478
1542
  "type": "Hash",
@@ -1482,16 +1546,16 @@
1482
1546
  ]
1483
1547
  },
1484
1548
  {
1485
- "component": "CloseButton",
1549
+ "component": "ProgressBar",
1486
1550
  "status": "beta",
1487
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/close_button.rb",
1488
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/close_button/default/",
1551
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/progress_bar.rb",
1552
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/progress_bar/default/",
1489
1553
  "parameters": [
1490
1554
  {
1491
- "name": "type",
1555
+ "name": "size",
1492
1556
  "type": "Symbol",
1493
- "default": "`:button`",
1494
- "description": "One of `:button` or `:submit`."
1557
+ "default": "`:default`",
1558
+ "description": "One of `:default`, `:large`, or `:small`. Increases height."
1495
1559
  },
1496
1560
  {
1497
1561
  "name": "system_arguments",
@@ -1502,46 +1566,34 @@
1502
1566
  ]
1503
1567
  },
1504
1568
  {
1505
- "component": "Counter",
1569
+ "component": "State",
1506
1570
  "status": "beta",
1507
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/counter.rb",
1508
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/counter/default/",
1571
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/state.rb",
1572
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/state/default/",
1509
1573
  "parameters": [
1510
1574
  {
1511
- "name": "count",
1512
- "type": "Integer, Float::INFINITY, nil",
1513
- "default": "`0`",
1514
- "description": "The number to be displayed (e.x. # of issues, pull requests)"
1575
+ "name": "title",
1576
+ "type": "String",
1577
+ "default": "N/A",
1578
+ "description": "`title` HTML attribute."
1515
1579
  },
1516
1580
  {
1517
1581
  "name": "scheme",
1518
1582
  "type": "Symbol",
1519
1583
  "default": "`:default`",
1520
- "description": "Color scheme. One of `:default`, `:primary`, or `:secondary`."
1521
- },
1522
- {
1523
- "name": "limit",
1524
- "type": "Integer, nil",
1525
- "default": "`5_000`",
1526
- "description": "Maximum value to display. Pass `nil` for no limit. (e.x. if `count` == 6,000 and `limit` == 5000, counter will display \"5,000+\")"
1527
- },
1528
- {
1529
- "name": "hide_if_zero",
1530
- "type": "Boolean",
1531
- "default": "`false`",
1532
- "description": "If true, a `hidden` attribute is added to the counter if `count` is zero."
1584
+ "description": "Background color. One of `:closed`, `:default`, `:green`, `:merged`, `:open`, `:purple`, or `:red`."
1533
1585
  },
1534
1586
  {
1535
- "name": "text",
1536
- "type": "String",
1537
- "default": "`\"\"`",
1538
- "description": "Text to display instead of count."
1587
+ "name": "tag",
1588
+ "type": "Symbol",
1589
+ "default": "`:span`",
1590
+ "description": "HTML tag for element. One of `:div` or `:span`."
1539
1591
  },
1540
1592
  {
1541
- "name": "round",
1542
- "type": "Boolean",
1543
- "default": "`false`",
1544
- "description": "Whether to apply our standard rounding logic to value."
1593
+ "name": "size",
1594
+ "type": "Symbol",
1595
+ "default": "`:default`",
1596
+ "description": "One of `:default` or `:small`."
1545
1597
  },
1546
1598
  {
1547
1599
  "name": "system_arguments",
@@ -1552,22 +1604,22 @@
1552
1604
  ]
1553
1605
  },
1554
1606
  {
1555
- "component": "Details",
1607
+ "component": "Spinner",
1556
1608
  "status": "beta",
1557
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/details.rb",
1558
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/details/default/",
1609
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/spinner.rb",
1610
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/spinner/default/",
1559
1611
  "parameters": [
1560
1612
  {
1561
- "name": "overlay",
1613
+ "name": "size",
1562
1614
  "type": "Symbol",
1563
- "default": "`:none`",
1564
- "description": "Dictates the type of overlay to render with. One of `:dark`, `:default`, or `:none`."
1615
+ "default": "`:medium`",
1616
+ "description": "One of `[:large, 64]`, `[:medium, 32]`, or `[:small, 16]`."
1565
1617
  },
1566
1618
  {
1567
- "name": "reset",
1568
- "type": "Boolean",
1569
- "default": "`false`",
1570
- "description": "Defaults to false. If set to true, it will remove the default caret and remove style from the summary element"
1619
+ "name": "style",
1620
+ "type": "String",
1621
+ "default": "`box-sizing: content-box; color: var(--color-icon-primary);`",
1622
+ "description": "Custom element styles."
1571
1623
  },
1572
1624
  {
1573
1625
  "name": "system_arguments",
@@ -1578,40 +1630,22 @@
1578
1630
  ]
1579
1631
  },
1580
1632
  {
1581
- "component": "Flash",
1633
+ "component": "Subhead",
1582
1634
  "status": "beta",
1583
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/flash.rb",
1584
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/flash/default/",
1635
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/subhead.rb",
1636
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/subhead/default/",
1585
1637
  "parameters": [
1586
- {
1587
- "name": "full",
1588
- "type": "Boolean",
1589
- "default": "`false`",
1590
- "description": "Whether the component should take up the full width of the screen."
1591
- },
1592
1638
  {
1593
1639
  "name": "spacious",
1594
1640
  "type": "Boolean",
1595
1641
  "default": "`false`",
1596
- "description": "Whether to add margin to the bottom of the component."
1642
+ "description": "Whether to add spacing to the Subhead."
1597
1643
  },
1598
1644
  {
1599
- "name": "dismissible",
1645
+ "name": "hide_border",
1600
1646
  "type": "Boolean",
1601
1647
  "default": "`false`",
1602
- "description": "Whether the component can be dismissed with an X button."
1603
- },
1604
- {
1605
- "name": "icon",
1606
- "type": "Symbol",
1607
- "default": "`nil`",
1608
- "description": "Name of Octicon icon to use."
1609
- },
1610
- {
1611
- "name": "scheme",
1612
- "type": "Symbol",
1613
- "default": "`:default`",
1614
- "description": "One of `:danger`, `:default`, `:success`, or `:warning`."
1648
+ "description": "Whether to hide the border under the heading."
1615
1649
  },
1616
1650
  {
1617
1651
  "name": "system_arguments",
@@ -1622,17 +1656,11 @@
1622
1656
  ]
1623
1657
  },
1624
1658
  {
1625
- "component": "Heading",
1626
- "status": "beta",
1627
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/heading.rb",
1628
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/heading/default/",
1659
+ "component": "TabContainer",
1660
+ "status": "alpha",
1661
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_container.rb",
1662
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_container/default/",
1629
1663
  "parameters": [
1630
- {
1631
- "name": "tag",
1632
- "type": "String",
1633
- "default": "N/A",
1634
- "description": "One of `:h1`, `:h2`, `:h3`, `:h4`, `:h5`, or `:h6`."
1635
- },
1636
1664
  {
1637
1665
  "name": "system_arguments",
1638
1666
  "type": "Hash",
@@ -1642,70 +1670,36 @@
1642
1670
  ]
1643
1671
  },
1644
1672
  {
1645
- "component": "IconButton",
1673
+ "component": "Text",
1646
1674
  "status": "beta",
1647
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/icon_button.rb",
1648
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/icon_button/default/",
1675
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb",
1676
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/text/default/",
1649
1677
  "parameters": [
1650
- {
1651
- "name": "icon",
1652
- "type": "String",
1653
- "default": "N/A",
1654
- "description": "Name of [Octicon](https://primer.style/octicons/) to use."
1655
- },
1656
- {
1657
- "name": "wrapper_arguments",
1658
- "type": "Hash",
1659
- "default": "`{}`",
1660
- "description": "Optional keyword arguments to be passed to the wrapper `<div>` tag."
1661
- },
1662
- {
1663
- "name": "scheme",
1664
- "type": "Symbol",
1665
- "default": "`:default`",
1666
- "description": "One of `:danger`, `:default`, or `:invisible`."
1667
- },
1668
- {
1669
- "name": "size",
1670
- "type": "Symbol",
1671
- "default": "`:medium`",
1672
- "description": "One of `:large`, `:medium`, or `:small`."
1673
- },
1674
1678
  {
1675
1679
  "name": "tag",
1676
1680
  "type": "Symbol",
1677
- "default": "N/A",
1678
- "description": "One of `:a`, `:button`, or `:summary`."
1679
- },
1680
- {
1681
- "name": "type",
1682
- "type": "Symbol",
1683
- "default": "N/A",
1684
- "description": "One of `:button`, `:reset`, or `:submit`."
1685
- },
1686
- {
1687
- "name": "aria-label",
1688
- "type": "String",
1689
- "default": "N/A",
1690
- "description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
1681
+ "default": "`:span`",
1682
+ "description": ""
1691
1683
  },
1692
1684
  {
1693
- "name": "aria-description",
1694
- "type": "String",
1685
+ "name": "system_arguments",
1686
+ "type": "Hash",
1695
1687
  "default": "N/A",
1696
- "description": "String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information."
1697
- },
1688
+ "description": "[System arguments](/system-arguments)"
1689
+ }
1690
+ ]
1691
+ },
1692
+ {
1693
+ "component": "TimelineItem",
1694
+ "status": "beta",
1695
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/timeline_item.rb",
1696
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/timeline_item/default/",
1697
+ "parameters": [
1698
1698
  {
1699
- "name": "show_tooltip",
1699
+ "name": "condensed",
1700
1700
  "type": "Boolean",
1701
- "default": "`true`",
1702
- "description": "Whether or not to show a tooltip when this button is hovered. Tooltips should only be hidden if the aria label is redundant, i.e. if the icon has a widely understood definition."
1703
- },
1704
- {
1705
- "name": "tooltip_direction",
1706
- "type": "Symbol",
1707
- "default": "`:s`",
1708
- "description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
1701
+ "default": "`false`",
1702
+ "description": "Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits."
1709
1703
  },
1710
1704
  {
1711
1705
  "name": "system_arguments",
@@ -1716,40 +1710,40 @@
1716
1710
  ]
1717
1711
  },
1718
1712
  {
1719
- "component": "Label",
1720
- "status": "beta",
1721
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/label.rb",
1722
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/label/default/",
1713
+ "component": "Tooltip",
1714
+ "status": "deprecated",
1715
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/tooltip.rb",
1716
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/tooltip/default/",
1723
1717
  "parameters": [
1724
1718
  {
1725
- "name": "tag",
1726
- "type": "Symbol",
1727
- "default": "`:span`",
1728
- "description": "One of `:a`, `:div`, `:span`, or `:summary`."
1719
+ "name": "label",
1720
+ "type": "String",
1721
+ "default": "N/A",
1722
+ "description": "the text to appear in the tooltip"
1729
1723
  },
1730
1724
  {
1731
- "name": "scheme",
1732
- "type": "Symbol",
1733
- "default": "`:default`",
1734
- "description": "One of `:accent`, `:attention`, `:danger`, `:default`, `:done`, `:info`, `:orange`, `:primary`, `:purple`, `:secondary`, `:severe`, `:sponsors`, `:success`, or `:warning`."
1725
+ "name": "direction",
1726
+ "type": "String",
1727
+ "default": "`:n`",
1728
+ "description": "Direction of the tooltip. One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
1735
1729
  },
1736
1730
  {
1737
- "name": "size",
1738
- "type": "Symbol",
1739
- "default": "`:medium`",
1740
- "description": "One of `:large` or `:medium`."
1731
+ "name": "align",
1732
+ "type": "String",
1733
+ "default": "`:default`",
1734
+ "description": "Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. One of `:default`, `:left_1`, `:left_2`, `:right_1`, or `:right_2`."
1741
1735
  },
1742
1736
  {
1743
- "name": "inline",
1737
+ "name": "multiline",
1744
1738
  "type": "Boolean",
1745
1739
  "default": "`false`",
1746
- "description": "Whether or not to render this label inline."
1740
+ "description": "Use this when you have long content"
1747
1741
  },
1748
1742
  {
1749
- "name": "variant",
1750
- "type": "Symbol",
1751
- "default": "`:none`",
1752
- "description": "One of `:inline`, `:large`, or `:none`."
1743
+ "name": "no_delay",
1744
+ "type": "Boolean",
1745
+ "default": "`false`",
1746
+ "description": "By default the tooltips have a slight delay before appearing. Set true to override this"
1753
1747
  },
1754
1748
  {
1755
1749
  "name": "system_arguments",
@@ -1760,40 +1754,34 @@
1760
1754
  ]
1761
1755
  },
1762
1756
  {
1763
- "component": "Link",
1757
+ "component": "Truncate",
1764
1758
  "status": "beta",
1765
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/link.rb",
1766
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/link/default/",
1759
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/truncate.rb",
1760
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/truncate/default/",
1767
1761
  "parameters": [
1768
1762
  {
1769
1763
  "name": "tag",
1770
- "type": "String",
1771
- "default": "`:a`",
1772
- "description": "One of `:a` or `:span`."
1773
- },
1774
- {
1775
- "name": "href",
1776
- "type": "String",
1777
- "default": "`nil`",
1778
- "description": "URL to be used for the Link. Required if tag is `:a`. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered."
1779
- },
1780
- {
1781
- "name": "scheme",
1782
1764
  "type": "Symbol",
1783
- "default": "`:default`",
1784
- "description": "One of `:default`, `:primary`, or `:secondary`."
1765
+ "default": "`:div`",
1766
+ "description": "One of `:div`, `:p`, `:span`, or `:strong`."
1785
1767
  },
1786
1768
  {
1787
- "name": "muted",
1769
+ "name": "inline",
1788
1770
  "type": "Boolean",
1789
1771
  "default": "`false`",
1790
- "description": "Uses light gray for Link color, and blue on hover."
1772
+ "description": "Whether the element is inline (or inline-block)."
1791
1773
  },
1792
1774
  {
1793
- "name": "underline",
1775
+ "name": "expandable",
1794
1776
  "type": "Boolean",
1795
- "default": "`true`",
1796
- "description": "Whether or not to underline the link."
1777
+ "default": "`false`",
1778
+ "description": "Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`."
1779
+ },
1780
+ {
1781
+ "name": "max_width",
1782
+ "type": "Integer",
1783
+ "default": "`nil`",
1784
+ "description": "Sets the max-width of the text."
1797
1785
  },
1798
1786
  {
1799
1787
  "name": "system_arguments",
@@ -1804,17 +1792,11 @@
1804
1792
  ]
1805
1793
  },
1806
1794
  {
1807
- "component": "Markdown",
1795
+ "component": "Truncate",
1808
1796
  "status": "beta",
1809
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/markdown.rb",
1810
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/markdown/default/",
1797
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/truncate.rb",
1798
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/truncate/default/",
1811
1799
  "parameters": [
1812
- {
1813
- "name": "tag",
1814
- "type": "Symbol",
1815
- "default": "`:div`",
1816
- "description": "One of `:article`, `:div`, or `:td`."
1817
- },
1818
1800
  {
1819
1801
  "name": "system_arguments",
1820
1802
  "type": "Hash",
@@ -1824,34 +1806,34 @@
1824
1806
  ]
1825
1807
  },
1826
1808
  {
1827
- "component": "Octicon",
1828
- "status": "beta",
1829
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/octicon.rb",
1830
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/octicon/default/",
1809
+ "component": "UnderlineNav",
1810
+ "status": "alpha",
1811
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_nav.rb",
1812
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/underline_nav/default/",
1831
1813
  "parameters": [
1832
1814
  {
1833
- "name": "icon_name",
1834
- "type": "Symbol, String",
1835
- "default": "`nil`",
1836
- "description": "Name of [Octicon](https://primer.style/octicons/) to use."
1815
+ "name": "tag",
1816
+ "type": "Symbol",
1817
+ "default": "`:nav`",
1818
+ "description": "One of `:div` or `:nav`."
1837
1819
  },
1838
1820
  {
1839
- "name": "icon",
1840
- "type": "Symbol, String",
1841
- "default": "`nil`",
1842
- "description": "Name of [Octicon](https://primer.style/octicons/) to use."
1821
+ "name": "label",
1822
+ "type": "String",
1823
+ "default": "N/A",
1824
+ "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements."
1843
1825
  },
1844
1826
  {
1845
- "name": "size",
1827
+ "name": "align",
1846
1828
  "type": "Symbol",
1847
- "default": "`:small`",
1848
- "description": "One of `:xsmall` (`12`), `:small` (`16`), or `:medium` (`24`)."
1829
+ "default": "`:left`",
1830
+ "description": "One of `:left` or `:right`. - Defaults to left"
1849
1831
  },
1850
1832
  {
1851
- "name": "use_symbol",
1852
- "type": "Boolean",
1853
- "default": "`false`",
1854
- "description": "EXPERIMENTAL (May change or be removed) - Set to true when using with [OcticonSymbols](/components/alpha/octiconsymbols)."
1833
+ "name": "body_arguments",
1834
+ "type": "Hash",
1835
+ "default": "`{}`",
1836
+ "description": "[System arguments](/system-arguments) for the body wrapper."
1855
1837
  },
1856
1838
  {
1857
1839
  "name": "system_arguments",
@@ -1862,11 +1844,35 @@
1862
1844
  ]
1863
1845
  },
1864
1846
  {
1865
- "component": "Popover",
1866
- "status": "beta",
1867
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/popover.rb",
1868
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/popover/default/",
1847
+ "component": "UnderlinePanels",
1848
+ "status": "alpha",
1849
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/underline_panels.rb",
1850
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/underline_panels/default/",
1869
1851
  "parameters": [
1852
+ {
1853
+ "name": "label",
1854
+ "type": "String",
1855
+ "default": "N/A",
1856
+ "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs."
1857
+ },
1858
+ {
1859
+ "name": "align",
1860
+ "type": "Symbol",
1861
+ "default": "`:left`",
1862
+ "description": "One of `:left` or `:right`. - Defaults to left"
1863
+ },
1864
+ {
1865
+ "name": "body_arguments",
1866
+ "type": "Hash",
1867
+ "default": "`{}`",
1868
+ "description": "[System arguments](/system-arguments) for the body wrapper."
1869
+ },
1870
+ {
1871
+ "name": "wrapper_arguments",
1872
+ "type": "Hash",
1873
+ "default": "`{}`",
1874
+ "description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
1875
+ },
1870
1876
  {
1871
1877
  "name": "system_arguments",
1872
1878
  "type": "Hash",
@@ -1876,16 +1882,28 @@
1876
1882
  ]
1877
1883
  },
1878
1884
  {
1879
- "component": "ProgressBar",
1880
- "status": "beta",
1881
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/progress_bar.rb",
1882
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/progress_bar/default/",
1885
+ "component": "TabNav",
1886
+ "status": "alpha",
1887
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_nav.rb",
1888
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_nav/default/",
1883
1889
  "parameters": [
1884
1890
  {
1885
- "name": "size",
1891
+ "name": "tag",
1886
1892
  "type": "Symbol",
1887
- "default": "`:default`",
1888
- "description": "One of `:default`, `:large`, or `:small`. Increases height."
1893
+ "default": "`:nav`",
1894
+ "description": "One of `:div` or `:nav`."
1895
+ },
1896
+ {
1897
+ "name": "label",
1898
+ "type": "String",
1899
+ "default": "N/A",
1900
+ "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the links, and distinguish it from similar elements."
1901
+ },
1902
+ {
1903
+ "name": "body_arguments",
1904
+ "type": "Hash",
1905
+ "default": "`{}`",
1906
+ "description": "[System arguments](/system-arguments) for the body wrapper."
1889
1907
  },
1890
1908
  {
1891
1909
  "name": "system_arguments",
@@ -1896,106 +1914,122 @@
1896
1914
  ]
1897
1915
  },
1898
1916
  {
1899
- "component": "RelativeTime",
1900
- "status": "beta",
1901
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/relative_time.rb",
1902
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/relative_time/default/",
1917
+ "component": "TabPanels",
1918
+ "status": "alpha",
1919
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tab_panels.rb",
1920
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tab_panels/default/",
1903
1921
  "parameters": [
1904
1922
  {
1905
- "name": "datetime",
1906
- "type": "Time",
1923
+ "name": "label",
1924
+ "type": "String",
1907
1925
  "default": "N/A",
1908
- "description": "The time to be formatted."
1926
+ "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs."
1909
1927
  },
1910
1928
  {
1911
- "name": "tense",
1929
+ "name": "align",
1912
1930
  "type": "Symbol",
1913
- "default": "`:auto`",
1914
- "description": "Which tense to use. One of `:auto`, `:future`, or `:past`."
1931
+ "default": "N/A",
1932
+ "description": "One of `:left` or `:right`. - Defaults to left"
1915
1933
  },
1916
1934
  {
1917
- "name": "prefix",
1918
- "type": "sring",
1919
- "default": "`nil`",
1920
- "description": "What to prefix the relative ime display with."
1935
+ "name": "body_arguments",
1936
+ "type": "Hash",
1937
+ "default": "`{}`",
1938
+ "description": "[System arguments](/system-arguments) for the body wrapper."
1921
1939
  },
1922
1940
  {
1923
- "name": "second",
1924
- "type": "Symbol",
1925
- "default": "`SECOND_DEFAULT`",
1926
- "description": "What format seconds should take. One of `nil`, `:numeric`, or `:two_digit`."
1941
+ "name": "wrapper_arguments",
1942
+ "type": "Hash",
1943
+ "default": "`{}`",
1944
+ "description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
1927
1945
  },
1928
1946
  {
1929
- "name": "minute",
1930
- "type": "Symbol",
1931
- "default": "`MINUTE_DEFAULT`",
1932
- "description": "What format minues should take. One of `nil`, `:numeric`, or `:two_digit`."
1933
- },
1947
+ "name": "system_arguments",
1948
+ "type": "Hash",
1949
+ "default": "N/A",
1950
+ "description": "[System arguments](/system-arguments)"
1951
+ }
1952
+ ]
1953
+ },
1954
+ {
1955
+ "component": "Tooltip",
1956
+ "status": "alpha",
1957
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/tooltip.rb",
1958
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/tooltip/default/",
1959
+ "parameters": [
1934
1960
  {
1935
- "name": "hour",
1936
- "type": "Symbol",
1937
- "default": "`HOUR_DEFAULT`",
1938
- "description": "What format hours should take. One of `nil`, `:numeric`, or `:two_digit`."
1961
+ "name": "for_id",
1962
+ "type": "String",
1963
+ "default": "N/A",
1964
+ "description": "The ID of the element that the tooltip should be attached to."
1939
1965
  },
1940
1966
  {
1941
- "name": "weekday",
1967
+ "name": "type",
1942
1968
  "type": "Symbol",
1943
- "default": "`WEEKDAY_DEFAULT`",
1944
- "description": "What format weekdays should take. One of `nil`, `:long`, `:narrow`, or `:short`."
1969
+ "default": "N/A",
1970
+ "description": "One of `:description` or `:label`."
1945
1971
  },
1946
1972
  {
1947
- "name": "day",
1973
+ "name": "direction",
1948
1974
  "type": "Symbol",
1949
- "default": "`DAY_DEFAULT`",
1950
- "description": "What format days should take. One of `nil`, `:numeric`, or `:two_digit`."
1975
+ "default": "`:s`",
1976
+ "description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
1951
1977
  },
1952
1978
  {
1953
- "name": "month",
1954
- "type": "Symbol",
1955
- "default": "`MONTH_DEFAULT`",
1956
- "description": "What format months should take. One of `nil`, `:long`, `:narrow`, `:numeric`, `:short`, or `:two_digit`."
1979
+ "name": "text",
1980
+ "type": "String",
1981
+ "default": "N/A",
1982
+ "description": "The text content of the tooltip. This should be brief and no longer than a sentence."
1957
1983
  },
1958
1984
  {
1959
- "name": "year",
1960
- "type": "Symbol",
1961
- "default": "`YEAR_DEFAULT`",
1962
- "description": "What format years should take. One of `nil`, `:numeric`, or `:two_digit`."
1963
- },
1985
+ "name": "system_arguments",
1986
+ "type": "Hash",
1987
+ "default": "N/A",
1988
+ "description": "[System arguments](/system-arguments)"
1989
+ }
1990
+ ]
1991
+ },
1992
+ {
1993
+ "component": "ToggleSwitch",
1994
+ "status": "alpha",
1995
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/toggle_switch.rb",
1996
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/toggle_switch/default/",
1997
+ "parameters": [
1964
1998
  {
1965
- "name": "time_zone_name",
1966
- "type": "Symbol",
1967
- "default": "`TIMEZONENAME_DEFAULT`",
1968
- "description": "What format the time zone should take. One of `nil`, `:long`, `:long_generic`, `:long_offset`, `:short`, `:short_generic`, or `:short_offset`."
1999
+ "name": "src",
2000
+ "type": "String",
2001
+ "default": "`nil`",
2002
+ "description": "The URL to POST to when the toggle switch is toggled. If `nil`, the toggle switch will not make any requests."
1969
2003
  },
1970
2004
  {
1971
- "name": "threshold",
1972
- "type": "string",
2005
+ "name": "csrf_token",
2006
+ "type": "String",
1973
2007
  "default": "`nil`",
1974
- "description": "The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute."
2008
+ "description": "A CSRF token that will be sent to the server as \"authenticity_token\" when the toggle switch is toggled. Unused if `src` is `nil`."
1975
2009
  },
1976
2010
  {
1977
- "name": "precision",
1978
- "type": "Symbol",
1979
- "default": "`PRECISION_DEFAULT`",
1980
- "description": "The precision elapsed time should display. One of `nil`, `:day`, `:hour`, `:minute`, `:month`, `:second`, or `:year`."
2011
+ "name": "checked",
2012
+ "type": "Boolean",
2013
+ "default": "`false`",
2014
+ "description": "Whether the toggle switch is on or off."
1981
2015
  },
1982
2016
  {
1983
- "name": "format",
1984
- "type": "Symbol",
1985
- "default": "`nil`",
1986
- "description": "The format the display should take. One of `:auto`, `:elapsed`, or `:micro`."
2017
+ "name": "enabled",
2018
+ "type": "Boolean",
2019
+ "default": "`true`",
2020
+ "description": "Whether or not the toggle switch responds to user input."
1987
2021
  },
1988
2022
  {
1989
- "name": "lang",
1990
- "type": "string",
1991
- "default": "`nil`",
1992
- "description": "The language to use."
2023
+ "name": "size",
2024
+ "type": "Symbol",
2025
+ "default": "`:medium`",
2026
+ "description": "What size toggle switch to render. One of `:end` or `:start`."
1993
2027
  },
1994
2028
  {
1995
- "name": "title",
1996
- "type": "string",
1997
- "default": "`nil`",
1998
- "description": "Provide a custom title to the element."
2029
+ "name": "status_label_position",
2030
+ "type": "Symbol",
2031
+ "default": "`:start`",
2032
+ "description": "Which side of the toggle switch to render the status label. One of `:medium` or `:small`."
1999
2033
  },
2000
2034
  {
2001
2035
  "name": "system_arguments",
@@ -2006,86 +2040,94 @@
2006
2040
  ]
2007
2041
  },
2008
2042
  {
2009
- "component": "Spinner",
2010
- "status": "beta",
2011
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/spinner.rb",
2012
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/spinner/default/",
2043
+ "component": "Overlay",
2044
+ "status": "alpha",
2045
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/overlay.rb",
2046
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/overlay/default/",
2013
2047
  "parameters": [
2014
2048
  {
2015
- "name": "size",
2016
- "type": "Symbol",
2017
- "default": "`:medium`",
2018
- "description": "One of `[:large, 64]`, `[:medium, 32]`, or `[:small, 16]`."
2049
+ "name": "id",
2050
+ "type": "String",
2051
+ "default": "`self.class.generate_id`",
2052
+ "description": "The id of the Overlay."
2019
2053
  },
2020
2054
  {
2021
- "name": "style",
2055
+ "name": "title",
2022
2056
  "type": "String",
2023
- "default": "`box-sizing: content-box; color: var(--color-icon-primary);`",
2024
- "description": "Custom element styles."
2057
+ "default": "N/A",
2058
+ "description": "Describes the content of the Overlay."
2025
2059
  },
2026
2060
  {
2027
- "name": "system_arguments",
2028
- "type": "Hash",
2029
- "default": "N/A",
2030
- "description": "[System arguments](/system-arguments)"
2031
- }
2032
- ]
2033
- },
2034
- {
2035
- "component": "State",
2036
- "status": "beta",
2037
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/state.rb",
2038
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/state/default/",
2039
- "parameters": [
2061
+ "name": "subtitle",
2062
+ "type": "String",
2063
+ "default": "`nil`",
2064
+ "description": "Provides dditional context for the Overlay, also setting the `aria-describedby` attribute."
2065
+ },
2066
+ {
2067
+ "name": "popover",
2068
+ "type": "Symbol",
2069
+ "default": "`:auto`",
2070
+ "description": "The popover behaviour. One of `:auto` or `:manual`."
2071
+ },
2072
+ {
2073
+ "name": "popover",
2074
+ "type": "Symbol",
2075
+ "default": "`:auto`",
2076
+ "description": "The popover behaviour. One of `:auto` or `:manual`."
2077
+ },
2078
+ {
2079
+ "name": "size",
2080
+ "type": "Symbol",
2081
+ "default": "`:auto`",
2082
+ "description": "The size of the Overlay. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
2083
+ },
2084
+ {
2085
+ "name": "padding",
2086
+ "type": "Symbol",
2087
+ "default": "`:normal`",
2088
+ "description": "The padding given to the Overlay body. One of `:condensed`, `:none`, or `:normal`."
2089
+ },
2040
2090
  {
2041
- "name": "title",
2091
+ "name": "anchor",
2042
2092
  "type": "String",
2043
- "default": "N/A",
2044
- "description": "`title` HTML attribute."
2093
+ "default": "`nil`",
2094
+ "description": "An ID of the element to anchor onto. Defaults to the `show_button`."
2045
2095
  },
2046
2096
  {
2047
- "name": "scheme",
2097
+ "name": "anchor_align",
2048
2098
  "type": "Symbol",
2049
- "default": "`:default`",
2050
- "description": "Background color. One of `:closed`, `:default`, `:green`, `:merged`, `:open`, `:purple`, or `:red`."
2099
+ "default": "`:start`",
2100
+ "description": "The anchor alignment of the Overlay. One of `:center`, `:end`, or `:start`."
2051
2101
  },
2052
2102
  {
2053
- "name": "tag",
2103
+ "name": "anchor_side",
2054
2104
  "type": "Symbol",
2055
- "default": "`:span`",
2056
- "description": "HTML tag for element. One of `:div` or `:span`."
2105
+ "default": "`:outside_bottom`",
2106
+ "description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
2057
2107
  },
2058
2108
  {
2059
- "name": "size",
2109
+ "name": "anchor_offset",
2060
2110
  "type": "Symbol",
2061
- "default": "`:default`",
2062
- "description": "One of `:default` or `:small`."
2111
+ "default": "`:normal`",
2112
+ "description": "The anchor offset to give the Overlay. One of `:normal` or `:spacious`."
2063
2113
  },
2064
2114
  {
2065
- "name": "system_arguments",
2066
- "type": "Hash",
2067
- "default": "N/A",
2068
- "description": "[System arguments](/system-arguments)"
2069
- }
2070
- ]
2071
- },
2072
- {
2073
- "component": "Subhead",
2074
- "status": "beta",
2075
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/subhead.rb",
2076
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/subhead/default/",
2077
- "parameters": [
2078
- {
2079
- "name": "spacious",
2115
+ "name": "allow_out_of_bounds",
2080
2116
  "type": "Boolean",
2081
2117
  "default": "`false`",
2082
- "description": "Whether to add spacing to the Subhead."
2118
+ "description": "Allow the Overlay to overflow its container."
2083
2119
  },
2084
2120
  {
2085
- "name": "hide_border",
2121
+ "name": "visually_hide_title",
2086
2122
  "type": "Boolean",
2087
2123
  "default": "`false`",
2088
- "description": "Whether to hide the border under the heading."
2124
+ "description": "If true will hide the heading title, while still making it available to Screen Readers."
2125
+ },
2126
+ {
2127
+ "name": "role",
2128
+ "type": "String",
2129
+ "default": "N/A",
2130
+ "description": "The ARIA role. One of `:dialog` or `:menu`."
2089
2131
  },
2090
2132
  {
2091
2133
  "name": "system_arguments",
@@ -2096,16 +2138,16 @@
2096
2138
  ]
2097
2139
  },
2098
2140
  {
2099
- "component": "Text",
2100
- "status": "beta",
2101
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb",
2102
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/text/default/",
2141
+ "component": "NavList",
2142
+ "status": "alpha",
2143
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list.rb",
2144
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/default/",
2103
2145
  "parameters": [
2104
2146
  {
2105
- "name": "tag",
2147
+ "name": "selected_item_id",
2106
2148
  "type": "Symbol",
2107
- "default": "`:span`",
2108
- "description": ""
2149
+ "default": "`nil`",
2150
+ "description": "The ID of the currently selected item. The default is `nil`, meaning no item is selected."
2109
2151
  },
2110
2152
  {
2111
2153
  "name": "system_arguments",
@@ -2116,31 +2158,35 @@
2116
2158
  ]
2117
2159
  },
2118
2160
  {
2119
- "component": "TimelineItem",
2120
- "status": "beta",
2121
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/timeline_item.rb",
2122
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/timeline_item/default/",
2161
+ "component": "NavList::Item",
2162
+ "status": "alpha",
2163
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/item.rb",
2164
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/item/default/",
2123
2165
  "parameters": [
2124
2166
  {
2125
- "name": "condensed",
2167
+ "name": "selected_item_id",
2168
+ "type": "Symbol",
2169
+ "default": "`nil`",
2170
+ "description": "The ID of the currently selected list item. Used internally."
2171
+ },
2172
+ {
2173
+ "name": "selected_by_ids",
2174
+ "type": "Array<Symbol>",
2175
+ "default": "`[]`",
2176
+ "description": "The list of IDs that select this item. In other words, if the `selected_item_id` attribute on the parent `NavList` is set to one of these IDs, the item will appear selected."
2177
+ },
2178
+ {
2179
+ "name": "expanded",
2126
2180
  "type": "Boolean",
2127
2181
  "default": "`false`",
2128
- "description": "Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits."
2182
+ "description": "Whether this item shows (expands) or hides (collapses) its list of sub items."
2129
2183
  },
2130
2184
  {
2131
- "name": "system_arguments",
2132
- "type": "Hash",
2133
- "default": "N/A",
2134
- "description": "[System arguments](/system-arguments)"
2135
- }
2136
- ]
2137
- },
2138
- {
2139
- "component": "Truncate",
2140
- "status": "beta",
2141
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/truncate.rb",
2142
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/truncate/default/",
2143
- "parameters": [
2185
+ "name": "sub_item",
2186
+ "type": "Boolean",
2187
+ "default": "`false`",
2188
+ "description": "Whether or not this item is nested under a parent item. Used internally."
2189
+ },
2144
2190
  {
2145
2191
  "name": "system_arguments",
2146
2192
  "type": "Hash",
@@ -2150,11 +2196,17 @@
2150
2196
  ]
2151
2197
  },
2152
2198
  {
2153
- "component": "Box",
2154
- "status": "stable",
2155
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/box.rb",
2156
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/box/default/",
2199
+ "component": "NavList::Section",
2200
+ "status": "alpha",
2201
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/section.rb",
2202
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/section/default/",
2157
2203
  "parameters": [
2204
+ {
2205
+ "name": "selected_item_id",
2206
+ "type": "Symbol",
2207
+ "default": "`nil`",
2208
+ "description": "The ID of the currently selected item. Used internally."
2209
+ },
2158
2210
  {
2159
2211
  "name": "system_arguments",
2160
2212
  "type": "Hash",
@@ -2164,58 +2216,34 @@
2164
2216
  ]
2165
2217
  },
2166
2218
  {
2167
- "component": "Button",
2168
- "status": "deprecated",
2169
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/button_component.rb",
2170
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/button/default/",
2219
+ "component": "ActionList",
2220
+ "status": "alpha",
2221
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list.rb",
2222
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/default/",
2171
2223
  "parameters": [
2172
2224
  {
2173
- "name": "scheme",
2174
- "type": "Symbol",
2175
- "default": "`:default`",
2176
- "description": "One of `:danger`, `:default`, `:invisible`, `:link`, `:outline`, or `:primary`."
2225
+ "name": "role",
2226
+ "type": "Boolean",
2227
+ "default": "`:list`",
2228
+ "description": "ARIA role describing the function of the list. listbox and menu are a common values."
2177
2229
  },
2178
2230
  {
2179
- "name": "variant",
2180
- "type": "Symbol",
2231
+ "name": "item_classes",
2232
+ "type": "String",
2181
2233
  "default": "`nil`",
2182
- "description": "DEPRECATED. One of `:medium` or `:small`."
2183
- },
2184
- {
2185
- "name": "size",
2186
- "type": "Symbol",
2187
- "default": "`:medium`",
2188
- "description": "One of `:medium` or `:small`."
2189
- },
2190
- {
2191
- "name": "tag",
2192
- "type": "Symbol",
2193
- "default": "`:button`",
2194
- "description": "One of `:a`, `:button`, or `:summary`."
2234
+ "description": "Additional CSS classes to attach to items."
2195
2235
  },
2196
2236
  {
2197
- "name": "type",
2237
+ "name": "scheme",
2198
2238
  "type": "Symbol",
2199
- "default": "`:button`",
2200
- "description": "One of `:button`, `:reset`, or `:submit`."
2201
- },
2202
- {
2203
- "name": "group_item",
2204
- "type": "Boolean",
2205
- "default": "`false`",
2206
- "description": "Whether button is part of a ButtonGroup."
2207
- },
2208
- {
2209
- "name": "block",
2210
- "type": "Boolean",
2211
- "default": "`false`",
2212
- "description": "Whether button is full-width with `display: block`."
2239
+ "default": "`:full`",
2240
+ "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."
2213
2241
  },
2214
2242
  {
2215
- "name": "dropdown",
2243
+ "name": "show_dividers",
2216
2244
  "type": "Boolean",
2217
2245
  "default": "`false`",
2218
- "description": "Whether or not to render a dropdown caret."
2246
+ "description": "Display a divider above each item in the list when it does not follow a header or divider."
2219
2247
  },
2220
2248
  {
2221
2249
  "name": "system_arguments",
@@ -2226,28 +2254,16 @@
2226
2254
  ]
2227
2255
  },
2228
2256
  {
2229
- "component": "DropdownMenu",
2230
- "status": "deprecated",
2231
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/dropdown_menu_component.rb",
2232
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/dropdown_menu/default/",
2257
+ "component": "ActionList::Divider",
2258
+ "status": "alpha",
2259
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/divider.rb",
2260
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/divider/default/",
2233
2261
  "parameters": [
2234
- {
2235
- "name": "direction",
2236
- "type": "Symbol",
2237
- "default": "`:se`",
2238
- "description": "One of `:e`, `:ne`, `:s`, `:se`, `:sw`, or `:w`."
2239
- },
2240
2262
  {
2241
2263
  "name": "scheme",
2242
2264
  "type": "Symbol",
2243
- "default": "`:default`",
2244
- "description": "Pass `:dark` for dark mode theming"
2245
- },
2246
- {
2247
- "name": "header",
2248
- "type": "String",
2249
- "default": "`nil`",
2250
- "description": "Optional string to display as the header"
2265
+ "default": "`:subtle`",
2266
+ "description": "Display a background color if scheme is `filled`."
2251
2267
  },
2252
2268
  {
2253
2269
  "name": "system_arguments",
@@ -2258,58 +2274,40 @@
2258
2274
  ]
2259
2275
  },
2260
2276
  {
2261
- "component": "IconButton",
2262
- "status": "deprecated",
2263
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/icon_button.rb",
2264
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/icon_button/default/",
2277
+ "component": "ActionList::Heading",
2278
+ "status": "alpha",
2279
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/heading.rb",
2280
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/heading/default/",
2265
2281
  "parameters": [
2266
2282
  {
2267
- "name": "scheme",
2268
- "type": "Symbol",
2269
- "default": "`:default`",
2270
- "description": "One of `:danger` or `:default`."
2271
- },
2272
- {
2273
- "name": "icon",
2283
+ "name": "list_id",
2274
2284
  "type": "String",
2275
2285
  "default": "N/A",
2276
- "description": "Name of [Octicon](https://primer.style/octicons/) to use."
2277
- },
2278
- {
2279
- "name": "tag",
2280
- "type": "Symbol",
2281
- "default": "N/A",
2282
- "description": "One of `:a`, `:button`, or `:summary`."
2283
- },
2284
- {
2285
- "name": "type",
2286
- "type": "Symbol",
2287
- "default": "N/A",
2288
- "description": "One of `:button`, `:reset`, or `:submit`."
2286
+ "description": "The unique identifier of the sub list the heading belongs to. Used internally."
2289
2287
  },
2290
2288
  {
2291
- "name": "aria-label",
2289
+ "name": "title",
2292
2290
  "type": "String",
2293
2291
  "default": "N/A",
2294
- "description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
2292
+ "description": "Sub list title."
2295
2293
  },
2296
2294
  {
2297
- "name": "aria-description",
2295
+ "name": "subtitle",
2298
2296
  "type": "String",
2299
- "default": "N/A",
2300
- "description": "String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information."
2297
+ "default": "`nil`",
2298
+ "description": "Optional sub list description."
2301
2299
  },
2302
2300
  {
2303
- "name": "tooltip_direction",
2301
+ "name": "scheme",
2304
2302
  "type": "Symbol",
2305
- "default": "`:s`",
2306
- "description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
2303
+ "default": "`:subtle`",
2304
+ "description": "Display a background color if scheme is `filled`."
2307
2305
  },
2308
2306
  {
2309
- "name": "box",
2310
- "type": "Boolean",
2311
- "default": "`false`",
2312
- "description": "Whether the button is in a [BorderBox](/components/beta/borderbox). If `true`, the button will have the `Box-btn-octicon` class."
2307
+ "name": "tag",
2308
+ "type": "Symbol",
2309
+ "default": "`:h3`",
2310
+ "description": "Semantic tag for the heading."
2313
2311
  },
2314
2312
  {
2315
2313
  "name": "system_arguments",
@@ -2320,102 +2318,106 @@
2320
2318
  ]
2321
2319
  },
2322
2320
  {
2323
- "component": "Layout",
2321
+ "component": "ActionList::Item",
2324
2322
  "status": "alpha",
2325
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/layout_component.rb",
2326
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/layout/default/",
2323
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/item.rb",
2324
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/item/default/",
2327
2325
  "parameters": [
2328
2326
  {
2329
- "name": "responsive",
2330
- "type": "Boolean",
2331
- "default": "`false`",
2332
- "description": "Whether to collapse layout to a single column at smaller widths."
2327
+ "name": "list",
2328
+ "type": "Primer::Alpha::ActionList",
2329
+ "default": "N/A",
2330
+ "description": "The list that contains this item. Used internally."
2331
+ },
2332
+ {
2333
+ "name": "parent",
2334
+ "type": "Primer::Alpha::ActionList::Item",
2335
+ "default": "`nil`",
2336
+ "description": "This item's parent item. `nil` if this item is at the root. Used internally."
2333
2337
  },
2334
2338
  {
2335
- "name": "side",
2336
- "type": "Symbol",
2337
- "default": "`:right`",
2338
- "description": "Which side to display the sidebar on. One of `:left` or `:right`."
2339
+ "name": "label",
2340
+ "type": "String",
2341
+ "default": "N/A",
2342
+ "description": "Item label."
2339
2343
  },
2340
2344
  {
2341
- "name": "sidebar_col",
2342
- "type": "Integer",
2343
- "default": "`3`",
2344
- "description": "Sidebar column width."
2345
+ "name": "label_classes",
2346
+ "type": "String",
2347
+ "default": "`nil`",
2348
+ "description": "CSS classes that will be added to the label."
2345
2349
  },
2346
2350
  {
2347
- "name": "system_arguments",
2351
+ "name": "label_arguments",
2348
2352
  "type": "Hash",
2349
- "default": "N/A",
2350
- "description": "[System arguments](/system-arguments)"
2351
- }
2352
- ]
2353
- },
2354
- {
2355
- "component": "LocalTime",
2356
- "status": "deprecated",
2357
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/local_time.rb",
2358
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/local_time/default/",
2359
- "parameters": [
2353
+ "default": "`{}`",
2354
+ "description": "[System arguments](/system-arguments) used to construct the label."
2355
+ },
2360
2356
  {
2361
- "name": "datetime",
2362
- "type": "DateTime",
2363
- "default": "N/A",
2364
- "description": "The date to parse"
2357
+ "name": "content_arguments",
2358
+ "type": "Hash",
2359
+ "default": "`{}`",
2360
+ "description": "[System arguments](/system-arguments) used to construct the item's anchor or button tag."
2361
+ },
2362
+ {
2363
+ "name": "truncate_label",
2364
+ "type": "Boolean",
2365
+ "default": "`false`",
2366
+ "description": "Truncate label with ellipsis."
2365
2367
  },
2366
2368
  {
2367
- "name": "initial_text",
2369
+ "name": "href",
2368
2370
  "type": "String",
2369
2371
  "default": "`nil`",
2370
- "description": "Text to render before component is initialized"
2372
+ "description": "Link URL."
2371
2373
  },
2372
2374
  {
2373
- "name": "weekday",
2374
- "type": "Symbol",
2375
- "default": "`:short`",
2376
- "description": "One of `:long` or `:short`."
2375
+ "name": "role",
2376
+ "type": "String",
2377
+ "default": "`:listitem`",
2378
+ "description": "ARIA role describing the function of the item."
2377
2379
  },
2378
2380
  {
2379
- "name": "year",
2381
+ "name": "size",
2380
2382
  "type": "Symbol",
2381
- "default": "`:numeric`",
2382
- "description": "One of `:2-digit` or `:numeric`."
2383
+ "default": "`:medium`",
2384
+ "description": "Controls block sizing of the item."
2383
2385
  },
2384
2386
  {
2385
- "name": "month",
2387
+ "name": "scheme",
2386
2388
  "type": "Symbol",
2387
- "default": "`:short`",
2388
- "description": "One of `:long` or `:short`."
2389
+ "default": "`:default`",
2390
+ "description": "Controls color/style based on behavior."
2389
2391
  },
2390
2392
  {
2391
- "name": "day",
2392
- "type": "Symbol",
2393
- "default": "`:numeric`",
2394
- "description": "One of `:2-digit` or `:numeric`."
2393
+ "name": "disabled",
2394
+ "type": "Boolean",
2395
+ "default": "`false`",
2396
+ "description": "Disabled items are not clickable and visually dim."
2395
2397
  },
2396
2398
  {
2397
- "name": "hour",
2399
+ "name": "description_scheme",
2398
2400
  "type": "Symbol",
2399
- "default": "`:numeric`",
2400
- "description": "One of `:2-digit` or `:numeric`."
2401
+ "default": "`:block`",
2402
+ "description": "Display description inline with label, or block on the next line."
2401
2403
  },
2402
2404
  {
2403
- "name": "minute",
2404
- "type": "Symbol",
2405
- "default": "`:numeric`",
2406
- "description": "One of `:2-digit` or `:numeric`."
2405
+ "name": "active",
2406
+ "type": "Boolean",
2407
+ "default": "`false`",
2408
+ "description": "Sets an active state on navigational items."
2407
2409
  },
2408
2410
  {
2409
- "name": "second",
2410
- "type": "Symbol",
2411
- "default": "`:numeric`",
2412
- "description": "One of `:2-digit` or `:numeric`."
2411
+ "name": "on_click",
2412
+ "type": "String",
2413
+ "default": "`nil`",
2414
+ "description": "JavaScript to execute when the item is clicked."
2413
2415
  },
2414
2416
  {
2415
- "name": "time_zone_name",
2416
- "type": "Symbol",
2417
- "default": "`:short`",
2418
- "description": "One of `:long` or `:short`."
2417
+ "name": "id",
2418
+ "type": "String",
2419
+ "default": "`self.class.generate_id`",
2420
+ "description": "Used internally."
2419
2421
  },
2420
2422
  {
2421
2423
  "name": "system_arguments",
@@ -2426,160 +2428,172 @@
2426
2428
  ]
2427
2429
  },
2428
2430
  {
2429
- "component": "Navigation::Tab",
2431
+ "component": "TextField",
2430
2432
  "status": "alpha",
2431
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb",
2432
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/navigation/tab/default/",
2433
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/text_field.rb",
2434
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/text_field/default/",
2433
2435
  "parameters": [
2434
2436
  {
2435
- "name": "list",
2436
- "type": "Boolean",
2437
- "default": "`false`",
2438
- "description": "Whether the Tab is an item in a `<ul>` list."
2437
+ "name": "size",
2438
+ "type": "Symbol",
2439
+ "default": "N/A",
2440
+ "description": "The size of the field. One of `:large`, `:medium`, or `:small`."
2439
2441
  },
2440
2442
  {
2441
- "name": "selected",
2443
+ "name": "full_width",
2442
2444
  "type": "Boolean",
2443
- "default": "`false`",
2444
- "description": "Whether the Tab is selected or not."
2445
+ "default": "N/A",
2446
+ "description": "When set to `true`, the field will take up all the horizontal space allowed by its container."
2445
2447
  },
2446
2448
  {
2447
- "name": "with_panel",
2448
- "type": "Boolean",
2449
- "default": "`false`",
2450
- "description": "Whether the Tab has an associated panel."
2449
+ "name": "name",
2450
+ "type": "String",
2451
+ "default": "N/A",
2452
+ "description": "Value for the HTML name attribute."
2451
2453
  },
2452
2454
  {
2453
- "name": "panel_id",
2455
+ "name": "id",
2454
2456
  "type": "String",
2455
- "default": "`\"\"`",
2456
- "description": "Only applies if `with_panel` is `true`. Unique id of panel."
2457
+ "default": "N/A",
2458
+ "description": "Value for the HTML id attribute."
2457
2459
  },
2458
2460
  {
2459
- "name": "icon_classes",
2460
- "type": "Boolean",
2461
- "default": "`\"\"`",
2462
- "description": "Classes that must always be applied to icons."
2461
+ "name": "class",
2462
+ "type": "String",
2463
+ "default": "N/A",
2464
+ "description": "CSS classes to include in the input's HTML `class` attribute. Exists for compatibility with Rails form builders."
2463
2465
  },
2464
2466
  {
2465
- "name": "wrapper_arguments",
2466
- "type": "Hash",
2467
- "default": "`{}`",
2468
- "description": "[System arguments](/system-arguments) to be used in the `<li>` wrapper when the tab is an item in a list."
2467
+ "name": "classes",
2468
+ "type": "Array",
2469
+ "default": "N/A",
2470
+ "description": "CSS classes to include in the input's HTML `class` attribute. Combined with the `:class` argument. The list may contain strings, hashes, or `nil` values, and is automatically cleaned up by Primer's [`class_name` helper](https://github.com/primer/view_components/blob/c9cb95c98fee3e2e27f4a10683f555e22285e7f1/app/lib/primer/class_name_helper.rb) (`nils`, falsy entries, and blank strings are ignored)."
2469
2471
  },
2470
2472
  {
2471
- "name": "system_arguments",
2472
- "type": "Hash",
2473
+ "name": "caption",
2474
+ "type": "String",
2473
2475
  "default": "N/A",
2474
- "description": "[System arguments](/system-arguments)"
2475
- }
2476
- ]
2477
- },
2478
- {
2479
- "component": "TimeAgo",
2480
- "status": "deprecated",
2481
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/time_ago_component.rb",
2482
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/time_ago/default/",
2483
- "parameters": [
2476
+ "description": "A string describing the field and what sorts of input it expects. Displayed below the input."
2477
+ },
2484
2478
  {
2485
- "name": "time",
2486
- "type": "Time",
2479
+ "name": "label",
2480
+ "type": "String",
2487
2481
  "default": "N/A",
2488
- "description": "The time to be formatted"
2482
+ "description": "Label text displayed above the input."
2489
2483
  },
2490
2484
  {
2491
- "name": "micro",
2485
+ "name": "visually_hide_label",
2492
2486
  "type": "Boolean",
2493
- "default": "`false`",
2494
- "description": "If true then the text will be formatted in \"micro\" mode, using as few characters as possible"
2487
+ "default": "N/A",
2488
+ "description": "When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers."
2495
2489
  },
2496
2490
  {
2497
- "name": "system_arguments",
2498
- "type": "Hash",
2491
+ "name": "disabled",
2492
+ "type": "Boolean",
2499
2493
  "default": "N/A",
2500
- "description": "[System arguments](/system-arguments)"
2501
- }
2502
- ]
2503
- },
2504
- {
2505
- "component": "Tooltip",
2506
- "status": "deprecated",
2507
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/tooltip.rb",
2508
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/tooltip/default/",
2509
- "parameters": [
2494
+ "description": "When set to `true`, the input will not accept keyboard or mouse input."
2495
+ },
2510
2496
  {
2511
- "name": "label",
2512
- "type": "String",
2497
+ "name": "hidden",
2498
+ "type": "Boolean",
2513
2499
  "default": "N/A",
2514
- "description": "the text to appear in the tooltip"
2500
+ "description": "When set to `true`, visually hides the field."
2515
2501
  },
2516
2502
  {
2517
- "name": "direction",
2518
- "type": "String",
2519
- "default": "`:n`",
2520
- "description": "Direction of the tooltip. One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
2503
+ "name": "invalid",
2504
+ "type": "Boolean",
2505
+ "default": "N/A",
2506
+ "description": "If set to `true`, the input will be rendered with a red border. Implied if `validation_message` is truthy. This option is set to `true` automatically if the model object associated with the form reports that the input is invalid via Rails validations. It is provided for cases where the form does not have an associated model. If the input is invalid as determined by Rails validations, setting `invalid` to `false` will have no effect."
2521
2507
  },
2522
2508
  {
2523
- "name": "align",
2509
+ "name": "validation_message",
2524
2510
  "type": "String",
2525
- "default": "`:default`",
2526
- "description": "Align tooltips to the left or right of an element, combined with a `direction` to specify north or south. One of `:default`, `:left_1`, `:left_2`, `:right_1`, or `:right_2`."
2511
+ "default": "N/A",
2512
+ "description": "A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object."
2527
2513
  },
2528
2514
  {
2529
- "name": "multiline",
2515
+ "name": "label_arguments",
2516
+ "type": "Hash",
2517
+ "default": "N/A",
2518
+ "description": "Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag."
2519
+ },
2520
+ {
2521
+ "name": "scope_name_to_model",
2530
2522
  "type": "Boolean",
2531
- "default": "`false`",
2532
- "description": "Use this when you have long content"
2523
+ "default": "N/A",
2524
+ "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field name. For example, if the field name is `my_field`, Rails will normally emit an HTML name attribute of `model[my_field]`. Setting `scope_name_to_model` to `false` will cause Rails to emit `my_field` instead."
2533
2525
  },
2534
2526
  {
2535
- "name": "no_delay",
2527
+ "name": "scope_id_to_model",
2536
2528
  "type": "Boolean",
2537
- "default": "`false`",
2538
- "description": "By default the tooltips have a slight delay before appearing. Set true to override this"
2529
+ "default": "N/A",
2530
+ "description": "Default `true`. When set to `false`, prevents the model name from prefixing the field ID. For example, if the field name is `my_field`, Rails will normally emit an HTML ID attribute of `model_my_field`. Setting `scope_id_to_model` to `false` will cause Rails to emit `my_field` instead."
2531
+ },
2532
+ {
2533
+ "name": "required",
2534
+ "type": "Boolean",
2535
+ "default": "N/A",
2536
+ "description": "Default `false`. When set to `true`, causes an asterisk (*) to appear next to the field's label indicating it is a required field. Note that this option explicitly does _not_ add a `required` HTML attribute. Doing so would enable native browser validations, which are inaccessible and inconsistent with the Primer design system."
2537
+ },
2538
+ {
2539
+ "name": "aria",
2540
+ "type": "Hash",
2541
+ "default": "N/A",
2542
+ "description": "Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current=\"true\"`."
2543
+ },
2544
+ {
2545
+ "name": "data",
2546
+ "type": "Hash",
2547
+ "default": "N/A",
2548
+ "description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
2539
2549
  },
2540
2550
  {
2541
2551
  "name": "system_arguments",
2542
2552
  "type": "Hash",
2543
2553
  "default": "N/A",
2544
- "description": "[System arguments](/system-arguments)"
2545
- }
2546
- ]
2547
- },
2548
- {
2549
- "component": "Truncate",
2550
- "status": "beta",
2551
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/truncate.rb",
2552
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/truncate/default/",
2553
- "parameters": [
2554
+ "description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
2555
+ },
2554
2556
  {
2555
- "name": "tag",
2556
- "type": "Symbol",
2557
- "default": "`:div`",
2558
- "description": "One of `:div`, `:p`, `:span`, or `:strong`."
2557
+ "name": "placeholder",
2558
+ "type": "String",
2559
+ "default": "N/A",
2560
+ "description": "Placeholder text."
2559
2561
  },
2560
2562
  {
2561
- "name": "inline",
2563
+ "name": "inset",
2562
2564
  "type": "Boolean",
2563
- "default": "`false`",
2564
- "description": "Whether the element is inline (or inline-block)."
2565
+ "default": "N/A",
2566
+ "description": "If `true`, renders the input in a visually inset state."
2565
2567
  },
2566
2568
  {
2567
- "name": "expandable",
2569
+ "name": "monospace",
2568
2570
  "type": "Boolean",
2569
- "default": "`false`",
2570
- "description": "Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`."
2571
+ "default": "N/A",
2572
+ "description": "If `true`, uses a monospace font for the input field."
2571
2573
  },
2572
2574
  {
2573
- "name": "max_width",
2574
- "type": "Integer",
2575
- "default": "`nil`",
2576
- "description": "Sets the max-width of the text."
2575
+ "name": "auto_check_src",
2576
+ "type": "String",
2577
+ "default": "N/A",
2578
+ "description": "When provided, makes a request to the given URL whenever the contents of the text field changes. If the server responds with a non-2xx status code, the response body is used as the validation message."
2577
2579
  },
2578
2580
  {
2579
- "name": "system_arguments",
2581
+ "name": "leading_visual",
2580
2582
  "type": "Hash",
2581
2583
  "default": "N/A",
2582
- "description": "[System arguments](/system-arguments)"
2584
+ "description": "Renders a leading visual icon before the text field's cursor. The hash will be passed to Primer's [Octicon](/components/beta/octicon) component."
2585
+ },
2586
+ {
2587
+ "name": "show_clear_button",
2588
+ "type": "Boolean",
2589
+ "default": "N/A",
2590
+ "description": "Whether or not to include a clear button inside the input that clears the input's contents when clicked."
2591
+ },
2592
+ {
2593
+ "name": "clear_button_id",
2594
+ "type": "String",
2595
+ "default": "N/A",
2596
+ "description": "The HTML id attribute of the clear button."
2583
2597
  }
2584
2598
  ]
2585
2599
  }