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