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