primer_view_components 0.0.120 → 0.0.122

Sign up to get free protection for your applications and to get access to all the features.
Files changed (172) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +58 -0
  3. data/app/assets/styles/primer_view_components.css +2 -2
  4. data/app/assets/styles/primer_view_components.css.map +1 -1
  5. data/app/components/primer/alpha/action_list.css.json +123 -1
  6. data/app/components/primer/alpha/auto_complete.css.json +23 -1
  7. data/app/components/primer/alpha/banner.css.json +24 -1
  8. data/app/components/primer/alpha/button_marketing.css.json +33 -1
  9. data/app/components/primer/alpha/check_box.rb +74 -0
  10. data/app/components/primer/alpha/check_box_group.rb +36 -0
  11. data/app/components/primer/alpha/dialog.css.json +82 -1
  12. data/app/components/primer/alpha/dialog.rb +1 -1
  13. data/app/components/primer/alpha/dropdown.css.json +40 -1
  14. data/app/components/primer/alpha/form_button.rb +32 -0
  15. data/app/components/primer/alpha/form_control.html.erb +26 -0
  16. data/app/components/primer/alpha/form_control.rb +105 -0
  17. data/app/components/primer/alpha/layout.css.json +80 -1
  18. data/app/components/primer/alpha/menu.css.json +28 -1
  19. data/app/components/primer/alpha/multi_input.rb +81 -0
  20. data/app/components/primer/alpha/radio_button.rb +25 -0
  21. data/app/components/primer/alpha/radio_button_group.rb +36 -0
  22. data/app/components/primer/alpha/segmented_control/item.rb +1 -0
  23. data/app/components/primer/alpha/segmented_control.css +1 -1
  24. data/app/components/primer/alpha/segmented_control.css.json +31 -1
  25. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  26. data/app/components/primer/alpha/segmented_control.pcss +43 -12
  27. data/app/components/primer/alpha/segmented_control.rb +30 -0
  28. data/app/components/primer/alpha/select.rb +37 -0
  29. data/app/components/primer/alpha/submit_button.rb +32 -0
  30. data/app/components/primer/alpha/tab_nav.css.json +24 -1
  31. data/app/components/primer/alpha/tab_panels.rb +7 -0
  32. data/app/components/primer/alpha/text_area.rb +24 -0
  33. data/app/components/primer/alpha/text_field.css +2 -2
  34. data/app/components/primer/alpha/text_field.css.json +134 -1
  35. data/app/components/primer/alpha/text_field.css.map +1 -1
  36. data/app/components/primer/alpha/text_field.pcss +27 -0
  37. data/app/components/primer/alpha/text_field.rb +16 -20
  38. data/app/components/primer/alpha/toggle_switch.css +1 -1
  39. data/app/components/primer/alpha/toggle_switch.css.json +40 -1
  40. data/app/components/primer/alpha/toggle_switch.css.map +1 -1
  41. data/app/components/primer/alpha/toggle_switch.pcss +31 -61
  42. data/app/components/primer/alpha/underline_nav.css.json +28 -1
  43. data/app/components/primer/base_component.rb +3 -3
  44. data/app/components/primer/beta/avatar.css.json +17 -1
  45. data/app/components/primer/beta/avatar_stack.css.json +28 -1
  46. data/app/components/primer/beta/blankslate.css.json +22 -1
  47. data/app/components/primer/beta/border_box.css.json +54 -1
  48. data/app/components/primer/beta/breadcrumbs.css.json +11 -1
  49. data/app/components/primer/beta/button.css.json +71 -1
  50. data/app/components/primer/beta/close_button.rb +1 -1
  51. data/app/components/primer/beta/counter.css.json +10 -1
  52. data/app/components/primer/beta/flash.css.json +27 -1
  53. data/app/components/primer/beta/label.css.json +25 -1
  54. data/app/components/primer/beta/link.css.json +19 -1
  55. data/app/components/primer/beta/popover.css.json +39 -1
  56. data/app/components/primer/beta/progress_bar.css.json +10 -1
  57. data/app/components/primer/{local_time.d.ts → beta/relative_time.d.ts} +0 -0
  58. data/app/components/primer/{local_time.js → beta/relative_time.js} +0 -0
  59. data/app/components/primer/{local_time.ts → beta/relative_time.ts} +0 -0
  60. data/app/components/primer/beta/state.css.json +13 -1
  61. data/app/components/primer/beta/subhead.css.json +12 -1
  62. data/app/components/primer/beta/timeline_item.css.json +16 -1
  63. data/app/components/primer/beta/truncate.css.json +12 -1
  64. data/app/components/primer/component.rb +12 -3
  65. data/app/components/primer/primer.d.ts +1 -2
  66. data/app/components/primer/primer.js +1 -2
  67. data/app/components/primer/primer.ts +1 -2
  68. data/app/components/primer/truncate.css.json +13 -1
  69. data/app/forms/example_toggle_switch_form.rb +1 -1
  70. data/app/forms/{select_list_form.rb → select_form.rb} +1 -1
  71. data/app/lib/primer/css/layout.css.json +316 -1
  72. data/app/lib/primer/css/utilities.css.json +1659 -1
  73. data/app/lib/primer/view_helper.rb +0 -1
  74. data/lib/primer/deprecations.yml +0 -78
  75. data/lib/primer/form_components.rb +26 -6
  76. data/lib/primer/forms/acts_as_component.rb +12 -1
  77. data/lib/primer/forms/builder.rb +1 -17
  78. data/lib/primer/forms/button.rb +4 -1
  79. data/lib/primer/forms/check_box_group.html.erb +14 -9
  80. data/lib/primer/forms/check_box_group.rb +5 -0
  81. data/lib/primer/forms/dsl/check_box_group_input.rb +3 -4
  82. data/lib/primer/forms/dsl/input.rb +33 -2
  83. data/lib/primer/forms/dsl/input_methods.rb +49 -1
  84. data/lib/primer/forms/dsl/radio_button_group_input.rb +2 -3
  85. data/lib/primer/forms/dsl/{select_list_input.rb → select_input.rb} +2 -2
  86. data/lib/primer/forms/dsl/text_field_input.rb +7 -5
  87. data/lib/primer/forms/form_control.rb +0 -1
  88. data/lib/primer/forms/group.html.erb +1 -1
  89. data/lib/primer/forms/multi.html.erb +8 -6
  90. data/lib/primer/forms/multi.rb +2 -0
  91. data/lib/primer/forms/radio_button_group.html.erb +14 -9
  92. data/lib/primer/forms/radio_button_group.rb +5 -0
  93. data/lib/primer/forms/{select_list.html.erb → select.html.erb} +0 -0
  94. data/lib/primer/forms/{select_list.rb → select.rb} +2 -2
  95. data/lib/primer/forms/spacing_wrapper.html.erb +1 -1
  96. data/lib/primer/forms/text_area.rb +1 -1
  97. data/lib/primer/forms/text_field.rb +5 -1
  98. data/lib/primer/forms/toggle_switch_form.rb +10 -3
  99. data/lib/primer/forms/utils.rb +20 -0
  100. data/lib/primer/view_components/engine.rb +1 -1
  101. data/lib/primer/view_components/version.rb +1 -1
  102. data/lib/primer/yard/backend.rb +1 -15
  103. data/lib/primer/yard/component_manifest.rb +44 -27
  104. data/lib/primer/yard/component_ref.rb +40 -0
  105. data/lib/primer/yard/docs_helper.rb +16 -2
  106. data/lib/primer/yard/legacy_gatsby_backend.rb +9 -15
  107. data/lib/primer/yard/lookbook_docs_helper.rb +32 -0
  108. data/lib/primer/yard/lookbook_pages_backend.rb +194 -0
  109. data/lib/primer/yard/registry.rb +6 -21
  110. data/lib/primer/yard/renders_many_handler.rb +1 -1
  111. data/lib/primer/yard/renders_one_handler.rb +1 -1
  112. data/lib/primer/yard.rb +14 -0
  113. data/lib/tasks/docs.rake +26 -13
  114. data/lib/tasks/static.rake +22 -0
  115. data/previews/pages/forms/01_introduction.md.erb +44 -0
  116. data/previews/pages/forms/02_getting_started.md.erb +125 -0
  117. data/previews/pages/forms/03_caption_templates.md.erb +30 -0
  118. data/previews/pages/forms/04_after_content.md.erb +39 -0
  119. data/previews/pages/forms/05_groups_layouts.md.erb +22 -0
  120. data/previews/pages/forms/06_miscellaneous_inputs.md.erb +43 -0
  121. data/previews/pages/forms/07_toggle_switch_forms.md.erb +58 -0
  122. data/previews/pages/forms/08_validations.md.erb +28 -0
  123. data/previews/pages/forms/09_compound_forms.md.erb +97 -0
  124. data/previews/primer/alpha/auto_complete_preview.rb +6 -6
  125. data/previews/primer/alpha/check_box_group_preview.rb +89 -0
  126. data/previews/primer/alpha/check_box_preview.rb +62 -0
  127. data/previews/primer/alpha/form_control_preview/playground.html.erb +9 -0
  128. data/previews/primer/alpha/form_control_preview.rb +106 -0
  129. data/previews/primer/alpha/multi_input_preview/playground.html.erb +41 -0
  130. data/previews/primer/alpha/multi_input_preview.rb +80 -0
  131. data/previews/primer/alpha/radio_button_group_preview.rb +83 -0
  132. data/previews/primer/alpha/radio_button_preview.rb +62 -0
  133. data/previews/primer/alpha/segmented_control_preview/with_label_and_caption.html.erb +9 -0
  134. data/previews/primer/alpha/segmented_control_preview/with_subhead_actions.html.erb +11 -0
  135. data/previews/primer/alpha/segmented_control_preview.rb +7 -1
  136. data/previews/primer/alpha/select_preview.rb +130 -0
  137. data/previews/primer/alpha/text_area_preview.rb +87 -0
  138. data/previews/primer/alpha/text_field_preview.rb +24 -1
  139. data/previews/primer/alpha/toggle_switch_preview.rb +9 -9
  140. data/previews/primer/beta/auto_complete_preview.rb +17 -17
  141. data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb +2 -2
  142. data/previews/primer/forms/forms_preview/{select_list_form.html.erb → select_form.html.erb} +1 -1
  143. data/previews/primer/forms/forms_preview.rb +3 -1
  144. data/previews/primer/url_helpers.rb +1 -1
  145. data/static/arguments.json +1348 -1412
  146. data/static/audited_at.json +12 -21
  147. data/static/constants.json +20 -51
  148. data/static/previews.json +1812 -0
  149. data/static/statuses.json +10 -19
  150. metadata +47 -32
  151. data/app/components/primer/dropdown/menu.rb +0 -14
  152. data/app/components/primer/dropdown.rb +0 -7
  153. data/app/components/primer/hellip_button.rb +0 -7
  154. data/app/components/primer/label_component.rb +0 -7
  155. data/app/components/primer/link_component.rb +0 -7
  156. data/app/components/primer/local_time.rb +0 -63
  157. data/app/components/primer/markdown.rb +0 -7
  158. data/app/components/primer/menu_component.rb +0 -7
  159. data/app/components/primer/octicon_component.rb +0 -7
  160. data/app/components/primer/octicon_symbols_component.rb +0 -7
  161. data/app/components/primer/popover_component.rb +0 -8
  162. data/app/components/primer/spinner_component.rb +0 -7
  163. data/app/components/primer/state_component.rb +0 -7
  164. data/app/components/primer/subhead_component.rb +0 -7
  165. data/app/components/primer/tab_container_component.rb +0 -7
  166. data/app/components/primer/time_ago_component.d.ts +0 -1
  167. data/app/components/primer/time_ago_component.js +0 -1
  168. data/app/components/primer/time_ago_component.rb +0 -51
  169. data/app/components/primer/time_ago_component.ts +0 -1
  170. data/app/components/primer/timeline_item_component.rb +0 -13
  171. data/previews/primer/local_time_component_preview.rb +0 -57
  172. data/previews/primer/time_ago_component_preview.rb +0 -27
@@ -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": "`self.class.generate_id`",
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": "`self.class.generate_id`",
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,22 +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`."
291
+ },
292
+ {
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`."
375
297
  },
376
298
  {
377
299
  "name": "system_arguments",
@@ -401,32 +323,6 @@
401
323
  }
402
324
  ]
403
325
  },
404
- {
405
- "component": "HiddenTextExpander",
406
- "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/",
409
- "parameters": [
410
- {
411
- "name": "inline",
412
- "type": "Boolean",
413
- "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."
421
- },
422
- {
423
- "name": "system_arguments",
424
- "type": "Hash",
425
- "default": "N/A",
426
- "description": "[System arguments](/system-arguments)"
427
- }
428
- ]
429
- },
430
326
  {
431
327
  "component": "Image",
432
328
  "status": "alpha",
@@ -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
- {
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",
769
- "default": "N/A",
770
- "description": "A list of CSS classes to add to the input. Combined with the `:class` argument."
771
- },
772
- {
773
- "name": "caption",
774
- "type": "String",
775
- "default": "N/A",
776
- "description": "Caption text to render below the input."
777
- },
778
- {
779
- "name": "label",
780
- "type": "String",
844
+ {
845
+ "name": "system_arguments",
846
+ "type": "Hash",
781
847
  "default": "N/A",
782
- "description": "Label text displayed above the input."
783
- },
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": [
784
858
  {
785
- "name": "visually_hide_label",
786
- "type": "Boolean",
859
+ "name": "system_arguments",
860
+ "type": "Hash",
787
861
  "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."
789
- },
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": [
790
872
  {
791
- "name": "size",
873
+ "name": "scheme",
792
874
  "type": "Symbol",
793
- "default": "N/A",
794
- "description": "The size of the field. One of `:large`, `:medium`, or `:small`."
875
+ "default": "`:default`",
876
+ "description": "One of `:danger`, `:default`, `:invisible`, `:link`, `:outline`, or `:primary`."
795
877
  },
796
878
  {
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."
879
+ "name": "variant",
880
+ "type": "Symbol",
881
+ "default": "`nil`",
882
+ "description": "DEPRECATED. One of `:medium` or `:small`."
801
883
  },
802
884
  {
803
- "name": "clear_button_id",
804
- "type": "String",
805
- "default": "N/A",
806
- "description": "The HTML id attribute of the clear button."
885
+ "name": "size",
886
+ "type": "Symbol",
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/",
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/",
1007
1099
  "parameters": [
1008
1100
  {
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
- },
1014
- {
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
- "name": "tag",
1299
+ "name": "tag",
1300
+ "type": "Symbol",
1301
+ "default": "`:span`",
1302
+ "description": "One of `:a`, `:div`, `:span`, or `:summary`."
1303
+ },
1304
+ {
1305
+ "name": "scheme",
1272
1306
  "type": "Symbol",
1273
- "default": "`:button`",
1274
- "description": "One of `:a`, `:button`, or `:summary`."
1307
+ "default": "`:default`",
1308
+ "description": "One of `:accent`, `:attention`, `:danger`, `:default`, `:done`, `:info`, `:orange`, `:primary`, `:purple`, `:secondary`, `:severe`, `:sponsors`, `:success`, or `:warning`."
1275
1309
  },
1276
1310
  {
1277
- "name": "type",
1311
+ "name": "size",
1278
1312
  "type": "Symbol",
1279
- "default": "`:button`",
1280
- "description": "One of `:button`, `:reset`, or `:submit`."
1313
+ "default": "`:medium`",
1314
+ "description": "One of `:large` or `:medium`."
1281
1315
  },
1282
1316
  {
1283
- "name": "block",
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."
1533
- },
1534
- {
1535
- "name": "text",
1536
- "type": "String",
1537
- "default": "`\"\"`",
1538
- "description": "Text to display instead of count."
1584
+ "description": "Background color. One of `:closed`, `:default`, `:green`, `:merged`, `:open`, `:purple`, or `:red`."
1539
1585
  },
1540
1586
  {
1541
- "name": "round",
1542
- "type": "Boolean",
1543
- "default": "`false`",
1544
- "description": "Whether to apply our standard rounding logic to value."
1587
+ "name": "tag",
1588
+ "type": "Symbol",
1589
+ "default": "`:span`",
1590
+ "description": "HTML tag for element. One of `:div` or `:span`."
1591
+ },
1592
+ {
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,16 @@
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."
1691
- },
1692
- {
1693
- "name": "aria-description",
1694
- "type": "String",
1695
- "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
- },
1698
- {
1699
- "name": "show_tooltip",
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`."
1681
+ "default": "`:span`",
1682
+ "description": ""
1709
1683
  },
1710
1684
  {
1711
1685
  "name": "system_arguments",
@@ -1716,40 +1690,16 @@
1716
1690
  ]
1717
1691
  },
1718
1692
  {
1719
- "component": "Label",
1693
+ "component": "TimelineItem",
1720
1694
  "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/",
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/",
1723
1697
  "parameters": [
1724
1698
  {
1725
- "name": "tag",
1726
- "type": "Symbol",
1727
- "default": "`:span`",
1728
- "description": "One of `:a`, `:div`, `:span`, or `:summary`."
1729
- },
1730
- {
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`."
1735
- },
1736
- {
1737
- "name": "size",
1738
- "type": "Symbol",
1739
- "default": "`:medium`",
1740
- "description": "One of `:large` or `:medium`."
1741
- },
1742
- {
1743
- "name": "inline",
1699
+ "name": "condensed",
1744
1700
  "type": "Boolean",
1745
1701
  "default": "`false`",
1746
- "description": "Whether or not to render this label inline."
1747
- },
1748
- {
1749
- "name": "variant",
1750
- "type": "Symbol",
1751
- "default": "`:none`",
1752
- "description": "One of `:inline`, `:large`, or `:none`."
1702
+ "description": "Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits."
1753
1703
  },
1754
1704
  {
1755
1705
  "name": "system_arguments",
@@ -1760,40 +1710,40 @@
1760
1710
  ]
1761
1711
  },
1762
1712
  {
1763
- "component": "Link",
1764
- "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/",
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/",
1767
1717
  "parameters": [
1768
1718
  {
1769
- "name": "tag",
1719
+ "name": "label",
1770
1720
  "type": "String",
1771
- "default": "`:a`",
1772
- "description": "One of `:a` or `:span`."
1721
+ "default": "N/A",
1722
+ "description": "the text to appear in the tooltip"
1773
1723
  },
1774
1724
  {
1775
- "name": "href",
1725
+ "name": "direction",
1776
1726
  "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."
1727
+ "default": "`:n`",
1728
+ "description": "Direction of the tooltip. One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
1779
1729
  },
1780
1730
  {
1781
- "name": "scheme",
1782
- "type": "Symbol",
1731
+ "name": "align",
1732
+ "type": "String",
1783
1733
  "default": "`:default`",
1784
- "description": "One of `:default`, `:primary`, or `:secondary`."
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`."
1785
1735
  },
1786
1736
  {
1787
- "name": "muted",
1737
+ "name": "multiline",
1788
1738
  "type": "Boolean",
1789
1739
  "default": "`false`",
1790
- "description": "Uses light gray for Link color, and blue on hover."
1740
+ "description": "Use this when you have long content"
1791
1741
  },
1792
1742
  {
1793
- "name": "underline",
1743
+ "name": "no_delay",
1794
1744
  "type": "Boolean",
1795
- "default": "`true`",
1796
- "description": "Whether or not to underline the link."
1745
+ "default": "`false`",
1746
+ "description": "By default the tooltips have a slight delay before appearing. Set true to override this"
1797
1747
  },
1798
1748
  {
1799
1749
  "name": "system_arguments",
@@ -1804,54 +1754,34 @@
1804
1754
  ]
1805
1755
  },
1806
1756
  {
1807
- "component": "Markdown",
1757
+ "component": "Truncate",
1808
1758
  "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/",
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/",
1811
1761
  "parameters": [
1812
1762
  {
1813
1763
  "name": "tag",
1814
1764
  "type": "Symbol",
1815
1765
  "default": "`:div`",
1816
- "description": "One of `:article`, `:div`, or `:td`."
1817
- },
1818
- {
1819
- "name": "system_arguments",
1820
- "type": "Hash",
1821
- "default": "N/A",
1822
- "description": "[System arguments](/system-arguments)"
1823
- }
1824
- ]
1825
- },
1826
- {
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/",
1831
- "parameters": [
1832
- {
1833
- "name": "icon_name",
1834
- "type": "Symbol, String",
1835
- "default": "`nil`",
1836
- "description": "Name of [Octicon](https://primer.style/octicons/) to use."
1837
- },
1838
- {
1839
- "name": "icon",
1840
- "type": "Symbol, String",
1841
- "default": "`nil`",
1842
- "description": "Name of [Octicon](https://primer.style/octicons/) to use."
1766
+ "description": "One of `:div`, `:p`, `:span`, or `:strong`."
1843
1767
  },
1844
1768
  {
1845
- "name": "size",
1846
- "type": "Symbol",
1847
- "default": "`:small`",
1848
- "description": "One of `:xsmall` (`12`), `:small` (`16`), or `:medium` (`24`)."
1769
+ "name": "inline",
1770
+ "type": "Boolean",
1771
+ "default": "`false`",
1772
+ "description": "Whether the element is inline (or inline-block)."
1849
1773
  },
1850
1774
  {
1851
- "name": "use_symbol",
1775
+ "name": "expandable",
1852
1776
  "type": "Boolean",
1853
1777
  "default": "`false`",
1854
- "description": "EXPERIMENTAL (May change or be removed) - Set to true when using with [OcticonSymbols](/components/alpha/octiconsymbols)."
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."
1855
1785
  },
1856
1786
  {
1857
1787
  "name": "system_arguments",
@@ -1862,10 +1792,10 @@
1862
1792
  ]
1863
1793
  },
1864
1794
  {
1865
- "component": "Popover",
1795
+ "component": "Truncate",
1866
1796
  "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/",
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/",
1869
1799
  "parameters": [
1870
1800
  {
1871
1801
  "name": "system_arguments",
@@ -1876,16 +1806,34 @@
1876
1806
  ]
1877
1807
  },
1878
1808
  {
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/",
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/",
1883
1813
  "parameters": [
1884
1814
  {
1885
- "name": "size",
1815
+ "name": "tag",
1886
1816
  "type": "Symbol",
1887
- "default": "`:default`",
1888
- "description": "One of `:default`, `:large`, or `:small`. Increases height."
1817
+ "default": "`:nav`",
1818
+ "description": "One of `:div` or `:nav`."
1819
+ },
1820
+ {
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."
1825
+ },
1826
+ {
1827
+ "name": "align",
1828
+ "type": "Symbol",
1829
+ "default": "`:left`",
1830
+ "description": "One of `:left` or `:right`. - Defaults to left"
1831
+ },
1832
+ {
1833
+ "name": "body_arguments",
1834
+ "type": "Hash",
1835
+ "default": "`{}`",
1836
+ "description": "[System arguments](/system-arguments) for the body wrapper."
1889
1837
  },
1890
1838
  {
1891
1839
  "name": "system_arguments",
@@ -1896,112 +1844,104 @@
1896
1844
  ]
1897
1845
  },
1898
1846
  {
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/",
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/",
1903
1851
  "parameters": [
1904
1852
  {
1905
- "name": "datetime",
1906
- "type": "Time",
1853
+ "name": "label",
1854
+ "type": "String",
1907
1855
  "default": "N/A",
1908
- "description": "The time to be formatted."
1909
- },
1910
- {
1911
- "name": "tense",
1912
- "type": "Symbol",
1913
- "default": "`:auto`",
1914
- "description": "Which tense to use. One of `:auto`, `:future`, or `:past`."
1915
- },
1916
- {
1917
- "name": "prefix",
1918
- "type": "sring",
1919
- "default": "`nil`",
1920
- "description": "What to prefix the relative ime display with."
1921
- },
1922
- {
1923
- "name": "second",
1924
- "type": "Symbol",
1925
- "default": "`SECOND_DEFAULT`",
1926
- "description": "What format seconds should take. One of `nil`, `:numeric`, or `:two_digit`."
1927
- },
1928
- {
1929
- "name": "minute",
1930
- "type": "Symbol",
1931
- "default": "`MINUTE_DEFAULT`",
1932
- "description": "What format minues should take. One of `nil`, `:numeric`, or `:two_digit`."
1856
+ "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs."
1933
1857
  },
1934
1858
  {
1935
- "name": "hour",
1859
+ "name": "align",
1936
1860
  "type": "Symbol",
1937
- "default": "`HOUR_DEFAULT`",
1938
- "description": "What format hours should take. One of `nil`, `:numeric`, or `:two_digit`."
1861
+ "default": "`:left`",
1862
+ "description": "One of `:left` or `:right`. - Defaults to left"
1939
1863
  },
1940
1864
  {
1941
- "name": "weekday",
1942
- "type": "Symbol",
1943
- "default": "`WEEKDAY_DEFAULT`",
1944
- "description": "What format weekdays should take. One of `nil`, `:long`, `:narrow`, or `:short`."
1865
+ "name": "body_arguments",
1866
+ "type": "Hash",
1867
+ "default": "`{}`",
1868
+ "description": "[System arguments](/system-arguments) for the body wrapper."
1945
1869
  },
1946
1870
  {
1947
- "name": "day",
1948
- "type": "Symbol",
1949
- "default": "`DAY_DEFAULT`",
1950
- "description": "What format days should take. One of `nil`, `:numeric`, or `:two_digit`."
1871
+ "name": "wrapper_arguments",
1872
+ "type": "Hash",
1873
+ "default": "`{}`",
1874
+ "description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
1951
1875
  },
1952
1876
  {
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`."
1957
- },
1877
+ "name": "system_arguments",
1878
+ "type": "Hash",
1879
+ "default": "N/A",
1880
+ "description": "[System arguments](/system-arguments)"
1881
+ }
1882
+ ]
1883
+ },
1884
+ {
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/",
1889
+ "parameters": [
1958
1890
  {
1959
- "name": "year",
1891
+ "name": "tag",
1960
1892
  "type": "Symbol",
1961
- "default": "`YEAR_DEFAULT`",
1962
- "description": "What format years should take. One of `nil`, `:numeric`, or `:two_digit`."
1893
+ "default": "`:nav`",
1894
+ "description": "One of `:div` or `:nav`."
1963
1895
  },
1964
1896
  {
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`."
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."
1969
1901
  },
1970
1902
  {
1971
- "name": "threshold",
1972
- "type": "string",
1973
- "default": "`nil`",
1974
- "description": "The threshold, in ISO-8601 'durations' format, at which relative time displays become absolute."
1903
+ "name": "body_arguments",
1904
+ "type": "Hash",
1905
+ "default": "`{}`",
1906
+ "description": "[System arguments](/system-arguments) for the body wrapper."
1975
1907
  },
1976
1908
  {
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`."
1981
- },
1909
+ "name": "system_arguments",
1910
+ "type": "Hash",
1911
+ "default": "N/A",
1912
+ "description": "[System arguments](/system-arguments)"
1913
+ }
1914
+ ]
1915
+ },
1916
+ {
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/",
1921
+ "parameters": [
1982
1922
  {
1983
- "name": "format",
1984
- "type": "Symbol",
1985
- "default": "`nil`",
1986
- "description": "The format the display should take. One of `:auto`, `:elapsed`, or `:micro`."
1923
+ "name": "label",
1924
+ "type": "String",
1925
+ "default": "N/A",
1926
+ "description": "Sets an `aria-label` that helps assistive technology users understand the purpose of the tabs."
1987
1927
  },
1988
1928
  {
1989
- "name": "format_style",
1929
+ "name": "align",
1990
1930
  "type": "Symbol",
1991
- "default": "`nil`",
1992
- "description": "The format the display should take. One of `nil`, `:long`, `:narrow`, or `:short`."
1931
+ "default": "N/A",
1932
+ "description": "One of `:left` or `:right`. - Defaults to left"
1993
1933
  },
1994
1934
  {
1995
- "name": "lang",
1996
- "type": "string",
1997
- "default": "`nil`",
1998
- "description": "The language to use."
1935
+ "name": "body_arguments",
1936
+ "type": "Hash",
1937
+ "default": "`{}`",
1938
+ "description": "[System arguments](/system-arguments) for the body wrapper."
1999
1939
  },
2000
1940
  {
2001
- "name": "title",
2002
- "type": "string",
2003
- "default": "`nil`",
2004
- "description": "Provide a custom title to the element."
1941
+ "name": "wrapper_arguments",
1942
+ "type": "Hash",
1943
+ "default": "`{}`",
1944
+ "description": "[System arguments](/system-arguments) for the `TabContainer` wrapper."
2005
1945
  },
2006
1946
  {
2007
1947
  "name": "system_arguments",
@@ -2012,22 +1952,34 @@
2012
1952
  ]
2013
1953
  },
2014
1954
  {
2015
- "component": "Spinner",
2016
- "status": "beta",
2017
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/spinner.rb",
2018
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/spinner/default/",
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/",
2019
1959
  "parameters": [
2020
1960
  {
2021
- "name": "size",
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."
1965
+ },
1966
+ {
1967
+ "name": "type",
2022
1968
  "type": "Symbol",
2023
- "default": "`:medium`",
2024
- "description": "One of `[:large, 64]`, `[:medium, 32]`, or `[:small, 16]`."
1969
+ "default": "N/A",
1970
+ "description": "One of `:description` or `:label`."
2025
1971
  },
2026
1972
  {
2027
- "name": "style",
1973
+ "name": "direction",
1974
+ "type": "Symbol",
1975
+ "default": "`:s`",
1976
+ "description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
1977
+ },
1978
+ {
1979
+ "name": "text",
2028
1980
  "type": "String",
2029
- "default": "`box-sizing: content-box; color: var(--color-icon-primary);`",
2030
- "description": "Custom element styles."
1981
+ "default": "N/A",
1982
+ "description": "The text content of the tooltip. This should be brief and no longer than a sentence."
2031
1983
  },
2032
1984
  {
2033
1985
  "name": "system_arguments",
@@ -2038,34 +1990,46 @@
2038
1990
  ]
2039
1991
  },
2040
1992
  {
2041
- "component": "State",
2042
- "status": "beta",
2043
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/state.rb",
2044
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/state/default/",
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/",
2045
1997
  "parameters": [
2046
1998
  {
2047
- "name": "title",
1999
+ "name": "src",
2048
2000
  "type": "String",
2049
- "default": "N/A",
2050
- "description": "`title` HTML attribute."
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."
2051
2003
  },
2052
2004
  {
2053
- "name": "scheme",
2054
- "type": "Symbol",
2055
- "default": "`:default`",
2056
- "description": "Background color. One of `:closed`, `:default`, `:green`, `:merged`, `:open`, `:purple`, or `:red`."
2005
+ "name": "csrf_token",
2006
+ "type": "String",
2007
+ "default": "`nil`",
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`."
2009
+ },
2010
+ {
2011
+ "name": "checked",
2012
+ "type": "Boolean",
2013
+ "default": "`false`",
2014
+ "description": "Whether the toggle switch is on or off."
2015
+ },
2016
+ {
2017
+ "name": "enabled",
2018
+ "type": "Boolean",
2019
+ "default": "`true`",
2020
+ "description": "Whether or not the toggle switch responds to user input."
2057
2021
  },
2058
2022
  {
2059
- "name": "tag",
2023
+ "name": "size",
2060
2024
  "type": "Symbol",
2061
- "default": "`:span`",
2062
- "description": "HTML tag for element. One of `:div` or `:span`."
2025
+ "default": "`:medium`",
2026
+ "description": "What size toggle switch to render. One of `:end` or `:start`."
2063
2027
  },
2064
2028
  {
2065
- "name": "size",
2029
+ "name": "status_label_position",
2066
2030
  "type": "Symbol",
2067
- "default": "`:default`",
2068
- "description": "One of `:default` or `:small`."
2031
+ "default": "`:start`",
2032
+ "description": "Which side of the toggle switch to render the status label. One of `:medium` or `:small`."
2069
2033
  },
2070
2034
  {
2071
2035
  "name": "system_arguments",
@@ -2076,22 +2040,16 @@
2076
2040
  ]
2077
2041
  },
2078
2042
  {
2079
- "component": "Subhead",
2080
- "status": "beta",
2081
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/subhead.rb",
2082
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/subhead/default/",
2043
+ "component": "NavList",
2044
+ "status": "alpha",
2045
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list.rb",
2046
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/default/",
2083
2047
  "parameters": [
2084
2048
  {
2085
- "name": "spacious",
2086
- "type": "Boolean",
2087
- "default": "`false`",
2088
- "description": "Whether to add spacing to the Subhead."
2089
- },
2090
- {
2091
- "name": "hide_border",
2092
- "type": "Boolean",
2093
- "default": "`false`",
2094
- "description": "Whether to hide the border under the heading."
2049
+ "name": "selected_item_id",
2050
+ "type": "Symbol",
2051
+ "default": "`nil`",
2052
+ "description": "The ID of the currently selected item. The default is `nil`, meaning no item is selected."
2095
2053
  },
2096
2054
  {
2097
2055
  "name": "system_arguments",
@@ -2102,51 +2060,35 @@
2102
2060
  ]
2103
2061
  },
2104
2062
  {
2105
- "component": "Text",
2106
- "status": "beta",
2107
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/text.rb",
2108
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/text/default/",
2063
+ "component": "NavList::Item",
2064
+ "status": "alpha",
2065
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/item.rb",
2066
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/item/default/",
2109
2067
  "parameters": [
2110
2068
  {
2111
- "name": "tag",
2069
+ "name": "selected_item_id",
2112
2070
  "type": "Symbol",
2113
- "default": "`:span`",
2114
- "description": ""
2071
+ "default": "`nil`",
2072
+ "description": "The ID of the currently selected list item. Used internally."
2115
2073
  },
2116
2074
  {
2117
- "name": "system_arguments",
2118
- "type": "Hash",
2119
- "default": "N/A",
2120
- "description": "[System arguments](/system-arguments)"
2121
- }
2122
- ]
2123
- },
2124
- {
2125
- "component": "TimelineItem",
2126
- "status": "beta",
2127
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/timeline_item.rb",
2128
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/timeline_item/default/",
2129
- "parameters": [
2075
+ "name": "selected_by_ids",
2076
+ "type": "Array<Symbol>",
2077
+ "default": "`[]`",
2078
+ "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."
2079
+ },
2130
2080
  {
2131
- "name": "condensed",
2081
+ "name": "expanded",
2132
2082
  "type": "Boolean",
2133
2083
  "default": "`false`",
2134
- "description": "Reduce the vertical padding and remove the background from the badge item. Most commonly used in commits."
2084
+ "description": "Whether this item shows (expands) or hides (collapses) its list of sub items."
2135
2085
  },
2136
2086
  {
2137
- "name": "system_arguments",
2138
- "type": "Hash",
2139
- "default": "N/A",
2140
- "description": "[System arguments](/system-arguments)"
2141
- }
2142
- ]
2143
- },
2144
- {
2145
- "component": "Truncate",
2146
- "status": "beta",
2147
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/beta/truncate.rb",
2148
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/beta/truncate/default/",
2149
- "parameters": [
2087
+ "name": "sub_item",
2088
+ "type": "Boolean",
2089
+ "default": "`false`",
2090
+ "description": "Whether or not this item is nested under a parent item. Used internally."
2091
+ },
2150
2092
  {
2151
2093
  "name": "system_arguments",
2152
2094
  "type": "Hash",
@@ -2156,11 +2098,17 @@
2156
2098
  ]
2157
2099
  },
2158
2100
  {
2159
- "component": "Box",
2160
- "status": "stable",
2161
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/box.rb",
2162
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/box/default/",
2101
+ "component": "NavList::Section",
2102
+ "status": "alpha",
2103
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/nav_list/section.rb",
2104
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/nav_list/section/default/",
2163
2105
  "parameters": [
2106
+ {
2107
+ "name": "selected_item_id",
2108
+ "type": "Symbol",
2109
+ "default": "`nil`",
2110
+ "description": "The ID of the currently selected item. Used internally."
2111
+ },
2164
2112
  {
2165
2113
  "name": "system_arguments",
2166
2114
  "type": "Hash",
@@ -2170,58 +2118,34 @@
2170
2118
  ]
2171
2119
  },
2172
2120
  {
2173
- "component": "Button",
2174
- "status": "deprecated",
2175
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/button_component.rb",
2176
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/button/default/",
2121
+ "component": "ActionList",
2122
+ "status": "alpha",
2123
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list.rb",
2124
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/default/",
2177
2125
  "parameters": [
2178
2126
  {
2179
- "name": "scheme",
2180
- "type": "Symbol",
2181
- "default": "`:default`",
2182
- "description": "One of `:danger`, `:default`, `:invisible`, `:link`, `:outline`, or `:primary`."
2127
+ "name": "role",
2128
+ "type": "Boolean",
2129
+ "default": "`:list`",
2130
+ "description": "ARIA role describing the function of the list. listbox and menu are a common values."
2183
2131
  },
2184
2132
  {
2185
- "name": "variant",
2186
- "type": "Symbol",
2133
+ "name": "item_classes",
2134
+ "type": "String",
2187
2135
  "default": "`nil`",
2188
- "description": "DEPRECATED. One of `:medium` or `:small`."
2189
- },
2190
- {
2191
- "name": "size",
2192
- "type": "Symbol",
2193
- "default": "`:medium`",
2194
- "description": "One of `:medium` or `:small`."
2195
- },
2196
- {
2197
- "name": "tag",
2198
- "type": "Symbol",
2199
- "default": "`:button`",
2200
- "description": "One of `:a`, `:button`, or `:summary`."
2136
+ "description": "Additional CSS classes to attach to items."
2201
2137
  },
2202
2138
  {
2203
- "name": "type",
2139
+ "name": "scheme",
2204
2140
  "type": "Symbol",
2205
- "default": "`:button`",
2206
- "description": "One of `:button`, `:reset`, or `:submit`."
2207
- },
2208
- {
2209
- "name": "group_item",
2210
- "type": "Boolean",
2211
- "default": "`false`",
2212
- "description": "Whether button is part of a ButtonGroup."
2213
- },
2214
- {
2215
- "name": "block",
2216
- "type": "Boolean",
2217
- "default": "`false`",
2218
- "description": "Whether button is full-width with `display: block`."
2141
+ "default": "`:full`",
2142
+ "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."
2219
2143
  },
2220
2144
  {
2221
- "name": "dropdown",
2145
+ "name": "show_dividers",
2222
2146
  "type": "Boolean",
2223
2147
  "default": "`false`",
2224
- "description": "Whether or not to render a dropdown caret."
2148
+ "description": "Display a divider above each item in the list when it does not follow a header or divider."
2225
2149
  },
2226
2150
  {
2227
2151
  "name": "system_arguments",
@@ -2232,58 +2156,16 @@
2232
2156
  ]
2233
2157
  },
2234
2158
  {
2235
- "component": "IconButton",
2236
- "status": "deprecated",
2237
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/icon_button.rb",
2238
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/icon_button/default/",
2159
+ "component": "ActionList::Divider",
2160
+ "status": "alpha",
2161
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/divider.rb",
2162
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/divider/default/",
2239
2163
  "parameters": [
2240
2164
  {
2241
2165
  "name": "scheme",
2242
2166
  "type": "Symbol",
2243
- "default": "`:default`",
2244
- "description": "One of `:danger` or `:default`."
2245
- },
2246
- {
2247
- "name": "icon",
2248
- "type": "String",
2249
- "default": "N/A",
2250
- "description": "Name of [Octicon](https://primer.style/octicons/) to use."
2251
- },
2252
- {
2253
- "name": "tag",
2254
- "type": "Symbol",
2255
- "default": "N/A",
2256
- "description": "One of `:a`, `:button`, or `:summary`."
2257
- },
2258
- {
2259
- "name": "type",
2260
- "type": "Symbol",
2261
- "default": "N/A",
2262
- "description": "One of `:button`, `:reset`, or `:submit`."
2263
- },
2264
- {
2265
- "name": "aria-label",
2266
- "type": "String",
2267
- "default": "N/A",
2268
- "description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
2269
- },
2270
- {
2271
- "name": "aria-description",
2272
- "type": "String",
2273
- "default": "N/A",
2274
- "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."
2275
- },
2276
- {
2277
- "name": "tooltip_direction",
2278
- "type": "Symbol",
2279
- "default": "`:s`",
2280
- "description": "One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
2281
- },
2282
- {
2283
- "name": "box",
2284
- "type": "Boolean",
2285
- "default": "`false`",
2286
- "description": "Whether the button is in a [BorderBox](/components/beta/borderbox). If `true`, the button will have the `Box-btn-octicon` class."
2167
+ "default": "`:subtle`",
2168
+ "description": "Display a background color if scheme is `filled`."
2287
2169
  },
2288
2170
  {
2289
2171
  "name": "system_arguments",
@@ -2294,28 +2176,40 @@
2294
2176
  ]
2295
2177
  },
2296
2178
  {
2297
- "component": "Layout",
2179
+ "component": "ActionList::Heading",
2298
2180
  "status": "alpha",
2299
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/layout_component.rb",
2300
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/layout/default/",
2181
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/heading.rb",
2182
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/heading/default/",
2301
2183
  "parameters": [
2302
2184
  {
2303
- "name": "responsive",
2304
- "type": "Boolean",
2305
- "default": "`false`",
2306
- "description": "Whether to collapse layout to a single column at smaller widths."
2185
+ "name": "list_id",
2186
+ "type": "String",
2187
+ "default": "N/A",
2188
+ "description": "The unique identifier of the sub list the heading belongs to. Used internally."
2307
2189
  },
2308
2190
  {
2309
- "name": "side",
2191
+ "name": "title",
2192
+ "type": "String",
2193
+ "default": "N/A",
2194
+ "description": "Sub list title."
2195
+ },
2196
+ {
2197
+ "name": "subtitle",
2198
+ "type": "String",
2199
+ "default": "`nil`",
2200
+ "description": "Optional sub list description."
2201
+ },
2202
+ {
2203
+ "name": "scheme",
2310
2204
  "type": "Symbol",
2311
- "default": "`:right`",
2312
- "description": "Which side to display the sidebar on. One of `:left` or `:right`."
2205
+ "default": "`:subtle`",
2206
+ "description": "Display a background color if scheme is `filled`."
2313
2207
  },
2314
2208
  {
2315
- "name": "sidebar_col",
2316
- "type": "Integer",
2317
- "default": "`3`",
2318
- "description": "Sidebar column width."
2209
+ "name": "tag",
2210
+ "type": "Symbol",
2211
+ "default": "`:h3`",
2212
+ "description": "Semantic tag for the heading."
2319
2213
  },
2320
2214
  {
2321
2215
  "name": "system_arguments",
@@ -2326,70 +2220,100 @@
2326
2220
  ]
2327
2221
  },
2328
2222
  {
2329
- "component": "LocalTime",
2330
- "status": "deprecated",
2331
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/local_time.rb",
2332
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/local_time/default/",
2223
+ "component": "ActionList::Item",
2224
+ "status": "alpha",
2225
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_list/item.rb",
2226
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_list/item/default/",
2333
2227
  "parameters": [
2334
2228
  {
2335
- "name": "datetime",
2336
- "type": "DateTime",
2229
+ "name": "list",
2230
+ "type": "Primer::Alpha::ActionList",
2231
+ "default": "N/A",
2232
+ "description": "The list that contains this item. Used internally."
2233
+ },
2234
+ {
2235
+ "name": "parent",
2236
+ "type": "Primer::Alpha::ActionList::Item",
2237
+ "default": "`nil`",
2238
+ "description": "This item's parent item. `nil` if this item is at the root. Used internally."
2239
+ },
2240
+ {
2241
+ "name": "label",
2242
+ "type": "String",
2337
2243
  "default": "N/A",
2338
- "description": "The date to parse"
2244
+ "description": "Item label."
2339
2245
  },
2340
2246
  {
2341
- "name": "initial_text",
2247
+ "name": "label_classes",
2342
2248
  "type": "String",
2343
2249
  "default": "`nil`",
2344
- "description": "Text to render before component is initialized"
2250
+ "description": "CSS classes that will be added to the label."
2345
2251
  },
2346
2252
  {
2347
- "name": "weekday",
2348
- "type": "Symbol",
2349
- "default": "`:short`",
2350
- "description": "One of `:long` or `:short`."
2253
+ "name": "content_arguments",
2254
+ "type": "Hash",
2255
+ "default": "`{}`",
2256
+ "description": "[System arguments](/system-arguments) used to construct the item's anchor or button tag."
2351
2257
  },
2352
2258
  {
2353
- "name": "year",
2354
- "type": "Symbol",
2355
- "default": "`:numeric`",
2356
- "description": "One of `:2-digit` or `:numeric`."
2259
+ "name": "truncate_label",
2260
+ "type": "Boolean",
2261
+ "default": "`false`",
2262
+ "description": "Truncate label with ellipsis."
2357
2263
  },
2358
2264
  {
2359
- "name": "month",
2360
- "type": "Symbol",
2361
- "default": "`:short`",
2362
- "description": "One of `:long` or `:short`."
2265
+ "name": "href",
2266
+ "type": "String",
2267
+ "default": "`nil`",
2268
+ "description": "Link URL."
2363
2269
  },
2364
2270
  {
2365
- "name": "day",
2366
- "type": "Symbol",
2367
- "default": "`:numeric`",
2368
- "description": "One of `:2-digit` or `:numeric`."
2271
+ "name": "role",
2272
+ "type": "String",
2273
+ "default": "`:listitem`",
2274
+ "description": "ARIA role describing the function of the item."
2369
2275
  },
2370
2276
  {
2371
- "name": "hour",
2277
+ "name": "size",
2372
2278
  "type": "Symbol",
2373
- "default": "`:numeric`",
2374
- "description": "One of `:2-digit` or `:numeric`."
2279
+ "default": "`:medium`",
2280
+ "description": "Controls block sizing of the item."
2375
2281
  },
2376
2282
  {
2377
- "name": "minute",
2283
+ "name": "scheme",
2378
2284
  "type": "Symbol",
2379
- "default": "`:numeric`",
2380
- "description": "One of `:2-digit` or `:numeric`."
2285
+ "default": "`:default`",
2286
+ "description": "Controls color/style based on behavior."
2381
2287
  },
2382
2288
  {
2383
- "name": "second",
2384
- "type": "Symbol",
2385
- "default": "`:numeric`",
2386
- "description": "One of `:2-digit` or `:numeric`."
2289
+ "name": "disabled",
2290
+ "type": "Boolean",
2291
+ "default": "`false`",
2292
+ "description": "Disabled items are not clickable and visually dim."
2387
2293
  },
2388
2294
  {
2389
- "name": "time_zone_name",
2295
+ "name": "description_scheme",
2390
2296
  "type": "Symbol",
2391
- "default": "`:short`",
2392
- "description": "One of `:long` or `:short`."
2297
+ "default": "`:block`",
2298
+ "description": "Display description inline with label, or block on the next line."
2299
+ },
2300
+ {
2301
+ "name": "active",
2302
+ "type": "Boolean",
2303
+ "default": "`false`",
2304
+ "description": "Sets an active state on navigational items."
2305
+ },
2306
+ {
2307
+ "name": "on_click",
2308
+ "type": "String",
2309
+ "default": "`nil`",
2310
+ "description": "JavaScript to execute when the item is clicked."
2311
+ },
2312
+ {
2313
+ "name": "id",
2314
+ "type": "String",
2315
+ "default": "`self.class.generate_id`",
2316
+ "description": "Used internally."
2393
2317
  },
2394
2318
  {
2395
2319
  "name": "system_arguments",
@@ -2400,160 +2324,172 @@
2400
2324
  ]
2401
2325
  },
2402
2326
  {
2403
- "component": "Navigation::Tab",
2327
+ "component": "TextField",
2404
2328
  "status": "alpha",
2405
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/navigation/tab_component.rb",
2406
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/navigation/tab/default/",
2329
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/text_field.rb",
2330
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/text_field/default/",
2407
2331
  "parameters": [
2408
2332
  {
2409
- "name": "list",
2410
- "type": "Boolean",
2411
- "default": "`false`",
2412
- "description": "Whether the Tab is an item in a `<ul>` list."
2333
+ "name": "size",
2334
+ "type": "Symbol",
2335
+ "default": "N/A",
2336
+ "description": "The size of the field. One of `:large`, `:medium`, or `:small`."
2413
2337
  },
2414
2338
  {
2415
- "name": "selected",
2339
+ "name": "full_width",
2416
2340
  "type": "Boolean",
2417
- "default": "`false`",
2418
- "description": "Whether the Tab is selected or not."
2341
+ "default": "N/A",
2342
+ "description": "When set to `true`, the field will take up all the horizontal space allowed by its container."
2419
2343
  },
2420
2344
  {
2421
- "name": "with_panel",
2422
- "type": "Boolean",
2423
- "default": "`false`",
2424
- "description": "Whether the Tab has an associated panel."
2345
+ "name": "name",
2346
+ "type": "String",
2347
+ "default": "N/A",
2348
+ "description": "Value for the HTML name attribute."
2425
2349
  },
2426
2350
  {
2427
- "name": "panel_id",
2351
+ "name": "id",
2428
2352
  "type": "String",
2429
- "default": "`\"\"`",
2430
- "description": "Only applies if `with_panel` is `true`. Unique id of panel."
2353
+ "default": "N/A",
2354
+ "description": "Value for the HTML id attribute."
2431
2355
  },
2432
2356
  {
2433
- "name": "icon_classes",
2434
- "type": "Boolean",
2435
- "default": "`\"\"`",
2436
- "description": "Classes that must always be applied to icons."
2357
+ "name": "class",
2358
+ "type": "String",
2359
+ "default": "N/A",
2360
+ "description": "CSS classes to include in the input's HTML `class` attribute. Exists for compatibility with Rails form builders."
2437
2361
  },
2438
2362
  {
2439
- "name": "wrapper_arguments",
2440
- "type": "Hash",
2441
- "default": "`{}`",
2442
- "description": "[System arguments](/system-arguments) to be used in the `<li>` wrapper when the tab is an item in a list."
2363
+ "name": "classes",
2364
+ "type": "Array",
2365
+ "default": "N/A",
2366
+ "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)."
2443
2367
  },
2444
2368
  {
2445
- "name": "system_arguments",
2446
- "type": "Hash",
2369
+ "name": "caption",
2370
+ "type": "String",
2447
2371
  "default": "N/A",
2448
- "description": "[System arguments](/system-arguments)"
2449
- }
2450
- ]
2451
- },
2452
- {
2453
- "component": "TimeAgo",
2454
- "status": "deprecated",
2455
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/time_ago_component.rb",
2456
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/time_ago/default/",
2457
- "parameters": [
2372
+ "description": "A string describing the field and what sorts of input it expects. Displayed below the input."
2373
+ },
2458
2374
  {
2459
- "name": "time",
2460
- "type": "Time",
2375
+ "name": "label",
2376
+ "type": "String",
2461
2377
  "default": "N/A",
2462
- "description": "The time to be formatted"
2378
+ "description": "Label text displayed above the input."
2463
2379
  },
2464
2380
  {
2465
- "name": "micro",
2381
+ "name": "visually_hide_label",
2466
2382
  "type": "Boolean",
2467
- "default": "`false`",
2468
- "description": "If true then the text will be formatted in \"micro\" mode, using as few characters as possible"
2383
+ "default": "N/A",
2384
+ "description": "When set to `true`, hides the label. Although the label will be hidden visually, it will still be visible to screen readers."
2469
2385
  },
2470
2386
  {
2471
- "name": "system_arguments",
2472
- "type": "Hash",
2387
+ "name": "disabled",
2388
+ "type": "Boolean",
2473
2389
  "default": "N/A",
2474
- "description": "[System arguments](/system-arguments)"
2475
- }
2476
- ]
2477
- },
2478
- {
2479
- "component": "Tooltip",
2480
- "status": "deprecated",
2481
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/tooltip.rb",
2482
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/tooltip/default/",
2483
- "parameters": [
2390
+ "description": "When set to `true`, the input will not accept keyboard or mouse input."
2391
+ },
2484
2392
  {
2485
- "name": "label",
2486
- "type": "String",
2393
+ "name": "hidden",
2394
+ "type": "Boolean",
2487
2395
  "default": "N/A",
2488
- "description": "the text to appear in the tooltip"
2396
+ "description": "When set to `true`, visually hides the field."
2489
2397
  },
2490
2398
  {
2491
- "name": "direction",
2492
- "type": "String",
2493
- "default": "`:n`",
2494
- "description": "Direction of the tooltip. One of `:e`, `:n`, `:ne`, `:nw`, `:s`, `:se`, `:sw`, or `:w`."
2399
+ "name": "invalid",
2400
+ "type": "Boolean",
2401
+ "default": "N/A",
2402
+ "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."
2495
2403
  },
2496
2404
  {
2497
- "name": "align",
2405
+ "name": "validation_message",
2498
2406
  "type": "String",
2499
- "default": "`:default`",
2500
- "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`."
2407
+ "default": "N/A",
2408
+ "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."
2501
2409
  },
2502
2410
  {
2503
- "name": "multiline",
2411
+ "name": "label_arguments",
2412
+ "type": "Hash",
2413
+ "default": "N/A",
2414
+ "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."
2415
+ },
2416
+ {
2417
+ "name": "scope_name_to_model",
2504
2418
  "type": "Boolean",
2505
- "default": "`false`",
2506
- "description": "Use this when you have long content"
2419
+ "default": "N/A",
2420
+ "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."
2507
2421
  },
2508
2422
  {
2509
- "name": "no_delay",
2423
+ "name": "scope_id_to_model",
2510
2424
  "type": "Boolean",
2511
- "default": "`false`",
2512
- "description": "By default the tooltips have a slight delay before appearing. Set true to override this"
2425
+ "default": "N/A",
2426
+ "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."
2427
+ },
2428
+ {
2429
+ "name": "required",
2430
+ "type": "Boolean",
2431
+ "default": "N/A",
2432
+ "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."
2433
+ },
2434
+ {
2435
+ "name": "aria",
2436
+ "type": "Hash",
2437
+ "default": "N/A",
2438
+ "description": "Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current=\"true\"`."
2439
+ },
2440
+ {
2441
+ "name": "data",
2442
+ "type": "Hash",
2443
+ "default": "N/A",
2444
+ "description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
2513
2445
  },
2514
2446
  {
2515
2447
  "name": "system_arguments",
2516
2448
  "type": "Hash",
2517
2449
  "default": "N/A",
2518
- "description": "[System arguments](/system-arguments)"
2519
- }
2520
- ]
2521
- },
2522
- {
2523
- "component": "Truncate",
2524
- "status": "beta",
2525
- "source": "https://github.com/primer/view_components/tree/main/app/components/primer/truncate.rb",
2526
- "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/truncate/default/",
2527
- "parameters": [
2450
+ "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."
2451
+ },
2528
2452
  {
2529
- "name": "tag",
2530
- "type": "Symbol",
2531
- "default": "`:div`",
2532
- "description": "One of `:div`, `:p`, `:span`, or `:strong`."
2453
+ "name": "placeholder",
2454
+ "type": "String",
2455
+ "default": "N/A",
2456
+ "description": "Placeholder text."
2533
2457
  },
2534
2458
  {
2535
- "name": "inline",
2459
+ "name": "inset",
2536
2460
  "type": "Boolean",
2537
- "default": "`false`",
2538
- "description": "Whether the element is inline (or inline-block)."
2461
+ "default": "N/A",
2462
+ "description": "If `true`, renders the input in a visually inset state."
2539
2463
  },
2540
2464
  {
2541
- "name": "expandable",
2465
+ "name": "monospace",
2542
2466
  "type": "Boolean",
2543
- "default": "`false`",
2544
- "description": "Whether the entire string should be revealed on hover. Can only be used in conjunction with `inline`."
2467
+ "default": "N/A",
2468
+ "description": "If `true`, uses a monospace font for the input field."
2545
2469
  },
2546
2470
  {
2547
- "name": "max_width",
2548
- "type": "Integer",
2549
- "default": "`nil`",
2550
- "description": "Sets the max-width of the text."
2471
+ "name": "auto_check_src",
2472
+ "type": "String",
2473
+ "default": "N/A",
2474
+ "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."
2551
2475
  },
2552
2476
  {
2553
- "name": "system_arguments",
2477
+ "name": "leading_visual",
2554
2478
  "type": "Hash",
2555
2479
  "default": "N/A",
2556
- "description": "[System arguments](/system-arguments)"
2480
+ "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."
2481
+ },
2482
+ {
2483
+ "name": "show_clear_button",
2484
+ "type": "Boolean",
2485
+ "default": "N/A",
2486
+ "description": "Whether or not to include a clear button inside the input that clears the input's contents when clicked."
2487
+ },
2488
+ {
2489
+ "name": "clear_button_id",
2490
+ "type": "String",
2491
+ "default": "N/A",
2492
+ "description": "The HTML id attribute of the clear button."
2557
2493
  }
2558
2494
  ]
2559
2495
  }