@primer/view-components 0.28.0-rc.4d641547 → 0.28.0-rc.bfe86ece
Sign up to get free protection for your applications and to get access to all the features.
- package/app/assets/javascripts/app/components/primer/alpha/select_panel_element.d.ts +3 -1
- package/app/assets/javascripts/primer_view_components.js +1 -1
- package/app/assets/javascripts/primer_view_components.js.map +1 -1
- package/app/components/primer/alpha/select_panel_element.d.ts +3 -1
- package/app/components/primer/alpha/select_panel_element.js +71 -66
- package/package.json +1 -1
- package/static/arguments.json +0 -118
- package/static/audited_at.json +0 -1
- package/static/constants.json +0 -16
- package/static/info_arch.json +128 -883
- package/static/previews.json +0 -268
- package/static/statuses.json +0 -1
package/static/info_arch.json
CHANGED
@@ -309,9 +309,6 @@
|
|
309
309
|
"default": "N/A",
|
310
310
|
"description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
|
311
311
|
}
|
312
|
-
],
|
313
|
-
"return_types": [
|
314
|
-
|
315
312
|
]
|
316
313
|
},
|
317
314
|
{
|
@@ -324,9 +321,6 @@
|
|
324
321
|
"default": "N/A",
|
325
322
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Divider{{/link_to_component}}."
|
326
323
|
}
|
327
|
-
],
|
328
|
-
"return_types": [
|
329
|
-
|
330
324
|
]
|
331
325
|
},
|
332
326
|
{
|
@@ -375,9 +369,6 @@
|
|
375
369
|
"default": "N/A",
|
376
370
|
"description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
|
377
371
|
}
|
378
|
-
],
|
379
|
-
"return_types": [
|
380
|
-
|
381
372
|
]
|
382
373
|
},
|
383
374
|
{
|
@@ -385,9 +376,6 @@
|
|
385
376
|
"description": "Returns the value of attribute id.",
|
386
377
|
"parameters": [
|
387
378
|
|
388
|
-
],
|
389
|
-
"return_types": [
|
390
|
-
|
391
379
|
]
|
392
380
|
},
|
393
381
|
{
|
@@ -395,9 +383,6 @@
|
|
395
383
|
"description": "Returns the value of attribute select_variant.",
|
396
384
|
"parameters": [
|
397
385
|
|
398
|
-
],
|
399
|
-
"return_types": [
|
400
|
-
|
401
386
|
]
|
402
387
|
},
|
403
388
|
{
|
@@ -405,9 +390,6 @@
|
|
405
390
|
"description": "Returns the value of attribute role.",
|
406
391
|
"parameters": [
|
407
392
|
|
408
|
-
],
|
409
|
-
"return_types": [
|
410
|
-
|
411
393
|
]
|
412
394
|
},
|
413
395
|
{
|
@@ -415,9 +397,6 @@
|
|
415
397
|
"description": "Returns the value of attribute aria_selection_variant.",
|
416
398
|
"parameters": [
|
417
399
|
|
418
|
-
],
|
419
|
-
"return_types": [
|
420
|
-
|
421
400
|
]
|
422
401
|
},
|
423
402
|
{
|
@@ -436,9 +415,6 @@
|
|
436
415
|
"default": "N/A",
|
437
416
|
"description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
|
438
417
|
}
|
439
|
-
],
|
440
|
-
"return_types": [
|
441
|
-
|
442
418
|
]
|
443
419
|
},
|
444
420
|
{
|
@@ -487,9 +463,6 @@
|
|
487
463
|
"default": "N/A",
|
488
464
|
"description": "These arguments are forwarded to {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
|
489
465
|
}
|
490
|
-
],
|
491
|
-
"return_types": [
|
492
|
-
|
493
466
|
]
|
494
467
|
},
|
495
468
|
{
|
@@ -497,9 +470,6 @@
|
|
497
470
|
"description": "Returns the value of attribute post_list_content_block.",
|
498
471
|
"parameters": [
|
499
472
|
|
500
|
-
],
|
501
|
-
"return_types": [
|
502
|
-
|
503
473
|
]
|
504
474
|
}
|
505
475
|
],
|
@@ -1045,9 +1015,6 @@
|
|
1045
1015
|
"description": "Returns the value of attribute id.",
|
1046
1016
|
"parameters": [
|
1047
1017
|
|
1048
|
-
],
|
1049
|
-
"return_types": [
|
1050
|
-
|
1051
1018
|
]
|
1052
1019
|
},
|
1053
1020
|
{
|
@@ -1055,9 +1022,6 @@
|
|
1055
1022
|
"description": "Returns the value of attribute item_id.",
|
1056
1023
|
"parameters": [
|
1057
1024
|
|
1058
|
-
],
|
1059
|
-
"return_types": [
|
1060
|
-
|
1061
1025
|
]
|
1062
1026
|
},
|
1063
1027
|
{
|
@@ -1065,9 +1029,6 @@
|
|
1065
1029
|
"description": "Returns the value of attribute list.",
|
1066
1030
|
"parameters": [
|
1067
1031
|
|
1068
|
-
],
|
1069
|
-
"return_types": [
|
1070
|
-
|
1071
1032
|
]
|
1072
1033
|
},
|
1073
1034
|
{
|
@@ -1075,9 +1036,6 @@
|
|
1075
1036
|
"description": "Returns the value of attribute href.",
|
1076
1037
|
"parameters": [
|
1077
1038
|
|
1078
|
-
],
|
1079
|
-
"return_types": [
|
1080
|
-
|
1081
1039
|
]
|
1082
1040
|
},
|
1083
1041
|
{
|
@@ -1085,9 +1043,6 @@
|
|
1085
1043
|
"description": "Returns the value of attribute active.",
|
1086
1044
|
"parameters": [
|
1087
1045
|
|
1088
|
-
],
|
1089
|
-
"return_types": [
|
1090
|
-
|
1091
1046
|
]
|
1092
1047
|
},
|
1093
1048
|
{
|
@@ -1095,9 +1050,6 @@
|
|
1095
1050
|
"description": "Returns the value of attribute disabled.",
|
1096
1051
|
"parameters": [
|
1097
1052
|
|
1098
|
-
],
|
1099
|
-
"return_types": [
|
1100
|
-
|
1101
1053
|
]
|
1102
1054
|
},
|
1103
1055
|
{
|
@@ -1105,9 +1057,6 @@
|
|
1105
1057
|
"description": "Returns the value of attribute parent.",
|
1106
1058
|
"parameters": [
|
1107
1059
|
|
1108
|
-
],
|
1109
|
-
"return_types": [
|
1110
|
-
|
1111
1060
|
]
|
1112
1061
|
},
|
1113
1062
|
{
|
@@ -1115,9 +1064,6 @@
|
|
1115
1064
|
"description": "Returns the value of attribute active.\nWhether or not this item is active.",
|
1116
1065
|
"parameters": [
|
1117
1066
|
|
1118
|
-
],
|
1119
|
-
"return_types": [
|
1120
|
-
"Boolean"
|
1121
1067
|
]
|
1122
1068
|
},
|
1123
1069
|
{
|
@@ -1125,9 +1071,6 @@
|
|
1125
1071
|
"description": "Returns the value of attribute disabled.\nWhether or not this item is disabled.",
|
1126
1072
|
"parameters": [
|
1127
1073
|
|
1128
|
-
],
|
1129
|
-
"return_types": [
|
1130
|
-
"Boolean"
|
1131
1074
|
]
|
1132
1075
|
}
|
1133
1076
|
],
|
@@ -1192,9 +1135,6 @@
|
|
1192
1135
|
"description": "Returns the value of attribute title_id.",
|
1193
1136
|
"parameters": [
|
1194
1137
|
|
1195
|
-
],
|
1196
|
-
"return_types": [
|
1197
|
-
|
1198
1138
|
]
|
1199
1139
|
},
|
1200
1140
|
{
|
@@ -1202,9 +1142,6 @@
|
|
1202
1142
|
"description": "Returns the value of attribute subtitle_id.",
|
1203
1143
|
"parameters": [
|
1204
1144
|
|
1205
|
-
],
|
1206
|
-
"return_types": [
|
1207
|
-
|
1208
1145
|
]
|
1209
1146
|
}
|
1210
1147
|
],
|
@@ -1288,7 +1225,7 @@
|
|
1288
1225
|
},
|
1289
1226
|
{
|
1290
1227
|
"fully_qualified_name": "Primer::Alpha::ActionMenu",
|
1291
|
-
"description": "ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when\nusers interact with buttons, actions, or other controls.\n\nThe only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. The default is `:button`.\n\n### Select variants\n\nWhile `ActionMenu`s default to a list of buttons that can link to other pages, copy text to the clipboard, etc, they also support\n`single` and `multiple` select variants. The single select variant allows a single item to be \"selected\" (i.e. marked \"active\")\nwhen clicked, which will cause a check mark to appear to the left of the item text. When the `multiple` select variant is chosen,\nmultiple items may be selected and check marks will appear next to each selected item.\n\nUse the `select_variant:` option to control which variant the `ActionMenu` uses. For more information, see the documentation on\nsupported arguments below.\n\n### Dynamic labels\n\nWhen using the `single` select variant, an optional label indicating the selected item can be displayed inside the menu button.\nDynamic labels can also be prefixed with custom text.\n\nPass `dynamic_label: true` to enable dynamic label behavior, and pass `dynamic_label_prefix: \"<string>\"` to set a custom prefix.\nFor more information, see the documentation on supported arguments below.\n\n### `ActionMenu`s as form inputs\n\nWhen using either the `single` or `multiple` select variants, `ActionMenu`s can be used as form inputs. They behave very\nsimilarly to how HTML `<select>` boxes behave, and play nicely with Rails' built-in form mechanisms. Pass arguments via the\n`form_arguments:` argument, including the Rails form builder object and the name of the field:\n\n```erb\n<% form_with(url: update_merge_strategy_path) do |f| %>\n <%= render(Primer::Alpha::ActionMenu.new(form_arguments: { builder: f, name: \"merge_strategy\" })) do |menu| %>\n <% menu.with_item(label: \"Fast forward\", data: { value: \"fast_forward\" }) %>\n <% menu.with_item(label: \"Recursive\", data: { value: \"recursive\" }) %>\n <% menu.with_item(label: \"Ours\", data: { value: \"ours\" }) %>\n <% menu.with_item(label: \"Theirs\", data: { value: \"theirs\" }) %>\n <% end %>\n<% end %>\n```\n\nThe value of the `data: { value: ... }` argument is sent to the server on submit, keyed using the name provided above\n(eg. `\"merge_strategy\"`). If no value is provided for an item, the value of that item is the item's label. Here's the\ncorresponding `MergeStrategyController` that might be written to handle the form above:\n\n```ruby\nclass MergeStrategyController < ApplicationController\n def update\n puts \"You chose #{merge_strategy_params[:merge_strategy]}\"\n end\n\n private\n\n def merge_strategy_params\n params.permit(:merge_strategy)\n end\nend\n```\n\n### `ActionMenu` items that submit forms\n\nWhereas `ActionMenu` items normally permit navigation via `<a>` tags which make HTTP `get` requests, `ActionMenu` items\nalso permit navigation via `POST` requests. To enable this behavior, include the `href:` argument as normal, but also pass\nthe `form_arguments:` argument to the appropriate item:\n\n```erb\n<%= render(Primer::Alpha::ActionMenu.new) do |menu| %>\n <% menu.with_item(\n label: \"Repository\",\n href: update_repo_grouping_path,\n form_arguments: {\n method: :post,\n name: \"group_by\",\n value: \"repository\"\n }\n ) %>\n<% end %>\n```\n\nMake sure to specify `method: :post`, as the default is `:get`. When clicked, the list item will submit a POST request to\nthe URL passed in the `href:` argument, including a parameter named `\"group_by\"` with a value of `\"repository\"`. If no value\nis given, the name, eg. `\"group_by\"`, will be used as the value.\n\nIt is possible to include multiple fields on submit. Instead of passing the `name:` and `value:` arguments, pass an array via\nthe `inputs:` argument:\n\n```erb\n<%= render(Primer::Alpha::ActionMenu.new) do |menu| %>\n <% menu.with_show_button { \"Group By\" } %>\n <% menu.with_item(\n label: \"Repository\",\n href: update_repo_grouping_path,\n form_arguments: {\n method: :post,\n inputs: [{\n name: \"group_by\",\n value: \"repository\"\n }, {\n name: \"some_other_field\",\n value: \"some value\",\n }],\n }\n ) %>\n<% end %>\n```\n\n### Form arguments\n\nThe following table summarizes the arguments allowed in the `form_arguments:` hash mentioned above.\n\n|Name |Type |Default|Description|\n|:----------------|:-------------|:------|:----------|\n|`method` |`Symbol` |`:get` |The HTTP request method to use to submit the form. One of `:get`, `:post`, `:patch`, `:put`, `:delete`, or `:head`|\n|`name` |`String` |`nil` |The name of the field that will be sent to the server on submit.|\n|`value` |`String` |`nil` |The value of the field that will be sent to the server on submit.|\n|`input_arguments`|`Hash` |`{}` |Additional key/value pairs to emit as HTML attributes on the `<input type=\"hidden\">` element.|\n|`inputs` |`Array<Hash>` |`[]` |An array of hashes representing HTML `<input type=\"hidden\">` elements. Must contain at least `name:` and `value:` keys. If additional key/value pairs are provided, they are emitted as HTML attributes on the `<input>` element. This argument supercedes the `name:`, `value:`, and `:input_arguments` arguments listed above.|\n\nThe elements of the `inputs:` array will be emitted as HTML `<input type=\"hidden\">` elements.\n\n### JavaScript API\n\n`
|
1228
|
+
"description": "ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when\nusers interact with buttons, actions, or other controls.\n\nThe only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. The default is `:button`.\n\n### Select variants\n\nWhile `ActionMenu`s default to a list of buttons that can link to other pages, copy text to the clipboard, etc, they also support\n`single` and `multiple` select variants. The single select variant allows a single item to be \"selected\" (i.e. marked \"active\")\nwhen clicked, which will cause a check mark to appear to the left of the item text. When the `multiple` select variant is chosen,\nmultiple items may be selected and check marks will appear next to each selected item.\n\nUse the `select_variant:` option to control which variant the `ActionMenu` uses. For more information, see the documentation on\nsupported arguments below.\n\n### Dynamic labels\n\nWhen using the `single` select variant, an optional label indicating the selected item can be displayed inside the menu button.\nDynamic labels can also be prefixed with custom text.\n\nPass `dynamic_label: true` to enable dynamic label behavior, and pass `dynamic_label_prefix: \"<string>\"` to set a custom prefix.\nFor more information, see the documentation on supported arguments below.\n\n### `ActionMenu`s as form inputs\n\nWhen using either the `single` or `multiple` select variants, `ActionMenu`s can be used as form inputs. They behave very\nsimilarly to how HTML `<select>` boxes behave, and play nicely with Rails' built-in form mechanisms. Pass arguments via the\n`form_arguments:` argument, including the Rails form builder object and the name of the field:\n\n```erb\n<% form_with(url: update_merge_strategy_path) do |f| %>\n <%= render(Primer::Alpha::ActionMenu.new(form_arguments: { builder: f, name: \"merge_strategy\" })) do |menu| %>\n <% menu.with_item(label: \"Fast forward\", data: { value: \"fast_forward\" }) %>\n <% menu.with_item(label: \"Recursive\", data: { value: \"recursive\" }) %>\n <% menu.with_item(label: \"Ours\", data: { value: \"ours\" }) %>\n <% menu.with_item(label: \"Theirs\", data: { value: \"theirs\" }) %>\n <% end %>\n<% end %>\n```\n\nThe value of the `data: { value: ... }` argument is sent to the server on submit, keyed using the name provided above\n(eg. `\"merge_strategy\"`). If no value is provided for an item, the value of that item is the item's label. Here's the\ncorresponding `MergeStrategyController` that might be written to handle the form above:\n\n```ruby\nclass MergeStrategyController < ApplicationController\n def update\n puts \"You chose #{merge_strategy_params[:merge_strategy]}\"\n end\n\n private\n\n def merge_strategy_params\n params.permit(:merge_strategy)\n end\nend\n```\n\n### `ActionMenu` items that submit forms\n\nWhereas `ActionMenu` items normally permit navigation via `<a>` tags which make HTTP `get` requests, `ActionMenu` items\nalso permit navigation via `POST` requests. To enable this behavior, include the `href:` argument as normal, but also pass\nthe `form_arguments:` argument to the appropriate item:\n\n```erb\n<%= render(Primer::Alpha::ActionMenu.new) do |menu| %>\n <% menu.with_item(\n label: \"Repository\",\n href: update_repo_grouping_path,\n form_arguments: {\n method: :post,\n name: \"group_by\",\n value: \"repository\"\n }\n ) %>\n<% end %>\n```\n\nMake sure to specify `method: :post`, as the default is `:get`. When clicked, the list item will submit a POST request to\nthe URL passed in the `href:` argument, including a parameter named `\"group_by\"` with a value of `\"repository\"`. If no value\nis given, the name, eg. `\"group_by\"`, will be used as the value.\n\nIt is possible to include multiple fields on submit. Instead of passing the `name:` and `value:` arguments, pass an array via\nthe `inputs:` argument:\n\n```erb\n<%= render(Primer::Alpha::ActionMenu.new) do |menu| %>\n <% menu.with_show_button { \"Group By\" } %>\n <% menu.with_item(\n label: \"Repository\",\n href: update_repo_grouping_path,\n form_arguments: {\n method: :post,\n inputs: [{\n name: \"group_by\",\n value: \"repository\"\n }, {\n name: \"some_other_field\",\n value: \"some value\",\n }],\n }\n ) %>\n<% end %>\n```\n\n### Form arguments\n\nThe following table summarizes the arguments allowed in the `form_arguments:` hash mentioned above.\n\n|Name |Type |Default|Description|\n|:----------------|:-------------|:------|:----------|\n|`method` |`Symbol` |`:get` |The HTTP request method to use to submit the form. One of `:get`, `:post`, `:patch`, `:put`, `:delete`, or `:head`|\n|`name` |`String` |`nil` |The name of the field that will be sent to the server on submit.|\n|`value` |`String` |`nil` |The value of the field that will be sent to the server on submit.|\n|`input_arguments`|`Hash` |`{}` |Additional key/value pairs to emit as HTML attributes on the `<input type=\"hidden\">` element.|\n|`inputs` |`Array<Hash>` |`[]` |An array of hashes representing HTML `<input type=\"hidden\">` elements. Must contain at least `name:` and `value:` keys. If additional key/value pairs are provided, they are emitted as HTML attributes on the `<input>` element. This argument supercedes the `name:`, `value:`, and `:input_arguments` arguments listed above.|\n\nThe elements of the `inputs:` array will be emitted as HTML `<input type=\"hidden\">` elements.\n\n### JavaScript API\n\n`ActionList`s render an `<action-list>` custom element that exposes behavior to the client. For all these methods,\n`itemId` refers to the value of the `item_id:` argument (see below) that is used to populate the `data-item-id` HTML\nattribute.\n\n#### Query methods\n\n* `getItemById(itemId: string): Element`: Returns the item's HTML `<li>` element. The return value can be passed as the `item` argument to the other methods listed below.\n* `isItemChecked(item: Element): boolean`: Returns `true` if the item is checked, `false` otherwise.\n* `isItemHidden(item: Element): boolean`: Returns `true` if the item is hidden, `false` otherwise.\n* `isItemDisabled(item: Element): boolean`: Returns `true` if the item is disabled, `false` otherwise.\n\n#### State methods\n\n* `showItem(item: Element)`: Shows the item, i.e. makes it visible.\n* `hideItem(item: Element)`: Hides the item, i.e. makes it invisible.\n* `enableItem(item: Element)`: Enables the item, i.e. makes it clickable by the mouse and keyboard.\n* `disableItem(item: Element)`: Disables the item, i.e. makes it unclickable by the mouse and keyboard.\n* `checkItem(item: Element)`: Checks the item. Only has an effect in single- and multi-select modes.\n* `uncheckItem(item: Element)`: Unchecks the item. Only has an effect in multi-select mode, since items cannot be unchecked in single-select mode.\n\n#### Events\n\nThe `<action-menu>` element fires an `itemActivated` event whenever an item is activated (eg. clicked) via the mouse or keyboard.\n\n```typescript\ndocument.querySelector(\"action-menu\").addEventListener(\"itemActivated\", (event: ItemActivatedEvent) => {\n event.item // Element: the <li> item that was activated\n event.checked // boolean: whether or not the result of the activation checked the item\n})\n```",
|
1292
1229
|
"accessibility_docs": "The action for the menu item needs to be on the element with `role=\"menuitem\"`. Semantics are removed for everything\nnested inside of it. When a menu item is selected, the menu will close immediately.\n\nAdditional information around the keyboard functionality and implementation can be found on the\n[WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/#menu).",
|
1293
1230
|
"is_form_component": false,
|
1294
1231
|
"is_published": true,
|
@@ -1405,9 +1342,6 @@
|
|
1405
1342
|
"description": "Returns the value of attribute list.",
|
1406
1343
|
"parameters": [
|
1407
1344
|
|
1408
|
-
],
|
1409
|
-
"return_types": [
|
1410
|
-
|
1411
1345
|
]
|
1412
1346
|
},
|
1413
1347
|
{
|
@@ -1415,9 +1349,6 @@
|
|
1415
1349
|
"description": "Returns the value of attribute preload.",
|
1416
1350
|
"parameters": [
|
1417
1351
|
|
1418
|
-
],
|
1419
|
-
"return_types": [
|
1420
|
-
|
1421
1352
|
]
|
1422
1353
|
},
|
1423
1354
|
{
|
@@ -1425,9 +1356,6 @@
|
|
1425
1356
|
"description": "Returns the value of attribute preload.",
|
1426
1357
|
"parameters": [
|
1427
1358
|
|
1428
|
-
],
|
1429
|
-
"return_types": [
|
1430
|
-
|
1431
1359
|
]
|
1432
1360
|
},
|
1433
1361
|
{
|
@@ -1440,9 +1368,6 @@
|
|
1440
1368
|
"default": "N/A",
|
1441
1369
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}'s `show_button` slot."
|
1442
1370
|
}
|
1443
|
-
],
|
1444
|
-
"return_types": [
|
1445
|
-
|
1446
1371
|
]
|
1447
1372
|
},
|
1448
1373
|
{
|
@@ -1455,9 +1380,6 @@
|
|
1455
1380
|
"default": "N/A",
|
1456
1381
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}."
|
1457
1382
|
}
|
1458
|
-
],
|
1459
|
-
"return_types": [
|
1460
|
-
|
1461
1383
|
]
|
1462
1384
|
},
|
1463
1385
|
{
|
@@ -1470,9 +1392,6 @@
|
|
1470
1392
|
"default": "N/A",
|
1471
1393
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `divider` slot."
|
1472
1394
|
}
|
1473
|
-
],
|
1474
|
-
"return_types": [
|
1475
|
-
|
1476
1395
|
]
|
1477
1396
|
},
|
1478
1397
|
{
|
@@ -1515,9 +1434,6 @@
|
|
1515
1434
|
"default": "N/A",
|
1516
1435
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}."
|
1517
1436
|
}
|
1518
|
-
],
|
1519
|
-
"return_types": [
|
1520
|
-
|
1521
1437
|
]
|
1522
1438
|
}
|
1523
1439
|
],
|
@@ -1931,9 +1847,6 @@
|
|
1931
1847
|
"description": "Returns the value of attribute items.",
|
1932
1848
|
"parameters": [
|
1933
1849
|
|
1934
|
-
],
|
1935
|
-
"return_types": [
|
1936
|
-
|
1937
1850
|
]
|
1938
1851
|
}
|
1939
1852
|
],
|
@@ -2144,9 +2057,6 @@
|
|
2144
2057
|
"default": "N/A",
|
2145
2058
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::Heading{{/link_to_component}}."
|
2146
2059
|
}
|
2147
|
-
],
|
2148
|
-
"return_types": [
|
2149
|
-
|
2150
2060
|
]
|
2151
2061
|
}
|
2152
2062
|
],
|
@@ -2271,9 +2181,6 @@
|
|
2271
2181
|
"default": "N/A",
|
2272
2182
|
"description": "The component configuration."
|
2273
2183
|
}
|
2274
|
-
],
|
2275
|
-
"return_types": [
|
2276
|
-
"String"
|
2277
2184
|
]
|
2278
2185
|
}
|
2279
2186
|
],
|
@@ -3136,9 +3043,6 @@
|
|
3136
3043
|
"default": "N/A",
|
3137
3044
|
"description": "The block accepted by {{#link_to_component}}Primer::Alpha::CheckBox{{/link_to_component}}."
|
3138
3045
|
}
|
3139
|
-
],
|
3140
|
-
"return_types": [
|
3141
|
-
|
3142
3046
|
]
|
3143
3047
|
}
|
3144
3048
|
],
|
@@ -3376,9 +3280,6 @@
|
|
3376
3280
|
"description": "The dialog's ID value.",
|
3377
3281
|
"parameters": [
|
3378
3282
|
|
3379
|
-
],
|
3380
|
-
"return_types": [
|
3381
|
-
|
3382
3283
|
]
|
3383
3284
|
}
|
3384
3285
|
],
|
@@ -3713,19 +3614,25 @@
|
|
3713
3614
|
]
|
3714
3615
|
},
|
3715
3616
|
{
|
3716
|
-
"fully_qualified_name": "Primer::Alpha::Dialog::
|
3717
|
-
"description": "A `Dialog::
|
3617
|
+
"fully_qualified_name": "Primer::Alpha::Dialog::Footer",
|
3618
|
+
"description": "A `Dialog::Footer` is a compositional component, used to render the\nFooter of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.",
|
3718
3619
|
"accessibility_docs": null,
|
3719
3620
|
"is_form_component": false,
|
3720
3621
|
"is_published": true,
|
3721
3622
|
"requires_js": false,
|
3722
|
-
"component": "Dialog::
|
3623
|
+
"component": "Dialog::Footer",
|
3723
3624
|
"status": "alpha",
|
3724
3625
|
"a11y_reviewed": true,
|
3725
|
-
"short_name": "
|
3726
|
-
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/
|
3727
|
-
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/
|
3626
|
+
"short_name": "DialogFooter",
|
3627
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/footer.rb",
|
3628
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/footer/default/",
|
3728
3629
|
"parameters": [
|
3630
|
+
{
|
3631
|
+
"name": "show_divider",
|
3632
|
+
"type": "Boolean",
|
3633
|
+
"default": "`false`",
|
3634
|
+
"description": "Show a divider between the footer and body."
|
3635
|
+
},
|
3729
3636
|
{
|
3730
3637
|
"name": "system_arguments",
|
3731
3638
|
"type": "Hash",
|
@@ -3747,25 +3654,19 @@
|
|
3747
3654
|
]
|
3748
3655
|
},
|
3749
3656
|
{
|
3750
|
-
"fully_qualified_name": "Primer::Alpha::Dialog::
|
3751
|
-
"description": "A `Dialog::
|
3657
|
+
"fully_qualified_name": "Primer::Alpha::Dialog::Body",
|
3658
|
+
"description": "A `Dialog::Body` is a compositional component, used to render the\nBody of a dialog. See {{#link_to_component}}Primer::Alpha::Dialog{{/link_to_component}}.",
|
3752
3659
|
"accessibility_docs": null,
|
3753
3660
|
"is_form_component": false,
|
3754
3661
|
"is_published": true,
|
3755
3662
|
"requires_js": false,
|
3756
|
-
"component": "Dialog::
|
3663
|
+
"component": "Dialog::Body",
|
3757
3664
|
"status": "alpha",
|
3758
3665
|
"a11y_reviewed": true,
|
3759
|
-
"short_name": "
|
3760
|
-
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/
|
3761
|
-
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/
|
3666
|
+
"short_name": "DialogBody",
|
3667
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/body.rb",
|
3668
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/body/default/",
|
3762
3669
|
"parameters": [
|
3763
|
-
{
|
3764
|
-
"name": "show_divider",
|
3765
|
-
"type": "Boolean",
|
3766
|
-
"default": "`false`",
|
3767
|
-
"description": "Show a divider between the footer and body."
|
3768
|
-
},
|
3769
3670
|
{
|
3770
3671
|
"name": "system_arguments",
|
3771
3672
|
"type": "Hash",
|
@@ -5913,9 +5814,6 @@
|
|
5913
5814
|
"description": "Returns the value of attribute selected.",
|
5914
5815
|
"parameters": [
|
5915
5816
|
|
5916
|
-
],
|
5917
|
-
"return_types": [
|
5918
|
-
|
5919
5817
|
]
|
5920
5818
|
}
|
5921
5819
|
],
|
@@ -6777,9 +6675,6 @@
|
|
6777
6675
|
"default": "N/A",
|
6778
6676
|
"description": "The block accepted by {{#link_to_component}}Primer::Alpha::RadioButton{{/link_to_component}}."
|
6779
6677
|
}
|
6780
|
-
],
|
6781
|
-
"return_types": [
|
6782
|
-
|
6783
6678
|
]
|
6784
6679
|
}
|
6785
6680
|
],
|
@@ -7198,9 +7093,6 @@
|
|
7198
7093
|
"default": "N/A",
|
7199
7094
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}'s `with_trailing_visual_label` slot."
|
7200
7095
|
}
|
7201
|
-
],
|
7202
|
-
"return_types": [
|
7203
|
-
|
7204
7096
|
]
|
7205
7097
|
}
|
7206
7098
|
],
|
@@ -7281,664 +7173,113 @@
|
|
7281
7173
|
"default": "N/A",
|
7282
7174
|
"description": "When set to `true`, the input will not accept keyboard or mouse input."
|
7283
7175
|
},
|
7284
|
-
{
|
7285
|
-
"name": "hidden",
|
7286
|
-
"type": "Boolean",
|
7287
|
-
"default": "N/A",
|
7288
|
-
"description": "When set to `true`, visually hides the field."
|
7289
|
-
},
|
7290
|
-
{
|
7291
|
-
"name": "invalid",
|
7292
|
-
"type": "Boolean",
|
7293
|
-
"default": "N/A",
|
7294
|
-
"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."
|
7295
|
-
},
|
7296
|
-
{
|
7297
|
-
"name": "validation_message",
|
7298
|
-
"type": "String",
|
7299
|
-
"default": "N/A",
|
7300
|
-
"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."
|
7301
|
-
},
|
7302
|
-
{
|
7303
|
-
"name": "label_arguments",
|
7304
|
-
"type": "Hash",
|
7305
|
-
"default": "N/A",
|
7306
|
-
"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."
|
7307
|
-
},
|
7308
|
-
{
|
7309
|
-
"name": "scope_name_to_model",
|
7310
|
-
"type": "Boolean",
|
7311
|
-
"default": "N/A",
|
7312
|
-
"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."
|
7313
|
-
},
|
7314
|
-
{
|
7315
|
-
"name": "scope_id_to_model",
|
7316
|
-
"type": "Boolean",
|
7317
|
-
"default": "N/A",
|
7318
|
-
"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."
|
7319
|
-
},
|
7320
|
-
{
|
7321
|
-
"name": "required",
|
7322
|
-
"type": "Boolean",
|
7323
|
-
"default": "N/A",
|
7324
|
-
"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."
|
7325
|
-
},
|
7326
|
-
{
|
7327
|
-
"name": "aria",
|
7328
|
-
"type": "Hash",
|
7329
|
-
"default": "N/A",
|
7330
|
-
"description": "Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current=\"true\"`."
|
7331
|
-
},
|
7332
|
-
{
|
7333
|
-
"name": "data",
|
7334
|
-
"type": "Hash",
|
7335
|
-
"default": "N/A",
|
7336
|
-
"description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
|
7337
|
-
},
|
7338
|
-
{
|
7339
|
-
"name": "system_arguments",
|
7340
|
-
"type": "Hash",
|
7341
|
-
"default": "N/A",
|
7342
|
-
"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."
|
7343
|
-
},
|
7344
|
-
{
|
7345
|
-
"name": "multiple",
|
7346
|
-
"type": "Boolean",
|
7347
|
-
"default": "N/A",
|
7348
|
-
"description": "If set to true, the selection will allow multiple choices."
|
7349
|
-
},
|
7350
|
-
{
|
7351
|
-
"name": "include_blank",
|
7352
|
-
"type": "Boolean, String",
|
7353
|
-
"default": "N/A",
|
7354
|
-
"description": "If set to true, an empty option will be created. If set to a string, the string will be used as the option's content and the value will be empty."
|
7355
|
-
},
|
7356
|
-
{
|
7357
|
-
"name": "prompt",
|
7358
|
-
"type": "String",
|
7359
|
-
"default": "N/A",
|
7360
|
-
"description": "Create a prompt option with blank value and the text asking user to select something."
|
7361
|
-
}
|
7362
|
-
],
|
7363
|
-
"slots": [
|
7364
|
-
|
7365
|
-
],
|
7366
|
-
"methods": [
|
7367
|
-
{
|
7368
|
-
"name": "option",
|
7369
|
-
"description": "Adds an option to the list.",
|
7370
|
-
"parameters": [
|
7371
|
-
{
|
7372
|
-
"name": "label",
|
7373
|
-
"type": "String",
|
7374
|
-
"default": "N/A",
|
7375
|
-
"description": "The user-facing label for the option."
|
7376
|
-
},
|
7377
|
-
{
|
7378
|
-
"name": "value",
|
7379
|
-
"type": "String",
|
7380
|
-
"default": "N/A",
|
7381
|
-
"description": "The value sent to the server on form submission."
|
7382
|
-
}
|
7383
|
-
],
|
7384
|
-
"return_types": [
|
7385
|
-
|
7386
|
-
]
|
7387
|
-
}
|
7388
|
-
],
|
7389
|
-
"previews": [
|
7390
|
-
{
|
7391
|
-
"preview_path": "primer/alpha/select/playground",
|
7392
|
-
"name": "playground",
|
7393
|
-
"snapshot": "false",
|
7394
|
-
"skip_rules": {
|
7395
|
-
"wont_fix": [
|
7396
|
-
"region"
|
7397
|
-
],
|
7398
|
-
"will_fix": [
|
7399
|
-
"color-contrast"
|
7400
|
-
]
|
7401
|
-
}
|
7402
|
-
},
|
7403
|
-
{
|
7404
|
-
"preview_path": "primer/alpha/select/default",
|
7405
|
-
"name": "default",
|
7406
|
-
"snapshot": "false",
|
7407
|
-
"skip_rules": {
|
7408
|
-
"wont_fix": [
|
7409
|
-
"region"
|
7410
|
-
],
|
7411
|
-
"will_fix": [
|
7412
|
-
"color-contrast"
|
7413
|
-
]
|
7414
|
-
}
|
7415
|
-
},
|
7416
|
-
{
|
7417
|
-
"preview_path": "primer/alpha/select/with_caption",
|
7418
|
-
"name": "with_caption",
|
7419
|
-
"snapshot": "true",
|
7420
|
-
"skip_rules": {
|
7421
|
-
"wont_fix": [
|
7422
|
-
"region"
|
7423
|
-
],
|
7424
|
-
"will_fix": [
|
7425
|
-
"color-contrast"
|
7426
|
-
]
|
7427
|
-
}
|
7428
|
-
},
|
7429
|
-
{
|
7430
|
-
"preview_path": "primer/alpha/select/visually_hide_label",
|
7431
|
-
"name": "visually_hide_label",
|
7432
|
-
"snapshot": "true",
|
7433
|
-
"skip_rules": {
|
7434
|
-
"wont_fix": [
|
7435
|
-
"region"
|
7436
|
-
],
|
7437
|
-
"will_fix": [
|
7438
|
-
"color-contrast"
|
7439
|
-
]
|
7440
|
-
}
|
7441
|
-
},
|
7442
|
-
{
|
7443
|
-
"preview_path": "primer/alpha/select/full_width",
|
7444
|
-
"name": "full_width",
|
7445
|
-
"snapshot": "true",
|
7446
|
-
"skip_rules": {
|
7447
|
-
"wont_fix": [
|
7448
|
-
"region"
|
7449
|
-
],
|
7450
|
-
"will_fix": [
|
7451
|
-
"color-contrast"
|
7452
|
-
]
|
7453
|
-
}
|
7454
|
-
},
|
7455
|
-
{
|
7456
|
-
"preview_path": "primer/alpha/select/not_full_width",
|
7457
|
-
"name": "not_full_width",
|
7458
|
-
"snapshot": "true",
|
7459
|
-
"skip_rules": {
|
7460
|
-
"wont_fix": [
|
7461
|
-
"region"
|
7462
|
-
],
|
7463
|
-
"will_fix": [
|
7464
|
-
"color-contrast"
|
7465
|
-
]
|
7466
|
-
}
|
7467
|
-
},
|
7468
|
-
{
|
7469
|
-
"preview_path": "primer/alpha/select/disabled",
|
7470
|
-
"name": "disabled",
|
7471
|
-
"snapshot": "true",
|
7472
|
-
"skip_rules": {
|
7473
|
-
"wont_fix": [
|
7474
|
-
"region"
|
7475
|
-
],
|
7476
|
-
"will_fix": [
|
7477
|
-
"color-contrast"
|
7478
|
-
]
|
7479
|
-
}
|
7480
|
-
},
|
7481
|
-
{
|
7482
|
-
"preview_path": "primer/alpha/select/invalid",
|
7483
|
-
"name": "invalid",
|
7484
|
-
"snapshot": "true",
|
7485
|
-
"skip_rules": {
|
7486
|
-
"wont_fix": [
|
7487
|
-
"region"
|
7488
|
-
],
|
7489
|
-
"will_fix": [
|
7490
|
-
"color-contrast"
|
7491
|
-
]
|
7492
|
-
}
|
7493
|
-
},
|
7494
|
-
{
|
7495
|
-
"preview_path": "primer/alpha/select/with_validation_message",
|
7496
|
-
"name": "with_validation_message",
|
7497
|
-
"snapshot": "true",
|
7498
|
-
"skip_rules": {
|
7499
|
-
"wont_fix": [
|
7500
|
-
"region"
|
7501
|
-
],
|
7502
|
-
"will_fix": [
|
7503
|
-
"color-contrast"
|
7504
|
-
]
|
7505
|
-
}
|
7506
|
-
}
|
7507
|
-
],
|
7508
|
-
"subcomponents": [
|
7509
|
-
|
7510
|
-
]
|
7511
|
-
},
|
7512
|
-
{
|
7513
|
-
"fully_qualified_name": "Primer::Alpha::SelectPanel",
|
7514
|
-
"description": "Select panels allow for selecting from a large number of options and can be thought of as a more capable\nversion of the traditional HTML `<select>` element.\n\nSelect panels:\n\n1. feature an input field at the top that allows an end user to filter the list of results.\n1. can render their items statically or dynamically by fetching results from the server.\n1. allow selecting a single item or multiple items.\n1. permit leading visuals like Octicons, avatars, and custom SVGs.\n1. can be used as form inputs in Rails forms.\n\n## Static list items\n\nThe Rails `SelectPanel` component allows items to be provided statically or loaded dynamically from the\nserver. Providing items statically is done using a fetch strategy of `:local` in combination with the\n`item` slot:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel.new(fetch_strategy: :local))) do |panel| %>\n <% panel.with_show_button { \"Select item\" } %>\n <% panel.with_item(label: \"Item 1\") %>\n <% panel.with_item(label: \"Item 2\") %>\n<% end %>\n```\n\n## Dynamic list items\n\nList items can also be fetched dynamically from the server and will require creating a Rails controller action\nto respond with the list of items in addition to rendering the `SelectPanel` instance. Render the instance as\nnormal, providing your desired [fetch strategy](#fetch-strategies):\n\n```erb\n<%= render(\n Primer::Alpha::SelectPanel.new(\n fetch_strategy: :remote,\n src: search_items_path # a Rails URL helper\n )\n) %>\n```\n\nDefine a controller action to serve the list of items. The `SelectPanel` component passes any filter text in\nthe `q=` URL parameter.\n\n```ruby\nclass SearchItemsController < ApplicationController\n def show\n # NOTE: params[:q] may be nil since there is no filter string available\n # when the panel is first opened\n @results = SomeModel.search(params[:q] || \"\")\n end\nend\n```\n\nResponses must be HTML fragments, eg. have a content type of `text/html+fragment`. This content type isn't\navailable by default in Rails, so you may have to register it eg. in an initializer:\n\n```ruby\nMime::Type.register(\"text/fragment+html\", :html_fragment)\n```\n\nRender a `Primer::Alpha::SelectPanel::ItemList` in the action's template, search_items/show.html_fragment.erb:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel::ItemList.new) do |list| %>\n <% @results.each do |result| %>\n <% list.with_item(label: result.title) do |item| %>\n <% item.with_description(result.description) %>\n <% end %>\n <% end %>\n<% end %>\n```\n\n### Selection consistency\n\nThe `SelectPanel` component automatically \"remembers\" which items have been selected across item fetch requests,\nmeaning the controller that renders dynamic list items does not (and should not) remember these selections or\npersist them until the user has confirmed them, either by submitting the form or otherwise indicating completion.\nThe `SelectPanel` component does not include unconfirmed selection data in requests.\n\n## Fetch strategies\n\nThe list of items can be fetched from a remote URL, or provided as a static list, configured using the\n`fetch_strategy` attribute. Fetch strategies are summarized below.\n\n1. `:remote`: a query is made to the URL in the `src` attribute every time the input field changes.\n\n2. `:eventually_local`: a query is made to the URL in the `src` attribute when the panel is first opened. The\n results are \"remembered\" and filtered in-memory for all subsequent filter operations, i.e. when the input\n field changes.\n\n3. `:local`: the list of items is provided statically ahead of time and filtered in-memory. No requests are made\n to the server.\n\n## Customizing filter behavior\n\nIf the fetch strategy is `:remote`, then filtering is handled server-side. The server should render a\n`Primer::Alpha::SelectPanel::ItemList` (an alias of {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}})\nin the response containing the filtered list of items. The component achieves remote fetching via the\n[remote-input-element](https://github.com/github/remote-input-element), which sends a request to the\nserver with the filter string in the `q=` parameter. Responses must be HTML fragments, eg. have a content\ntype of `text/html+fragment`.\n\n### Local filtering\n\nIf the fetch strategy is `:local` or `:eventually_local`, filtering is performed client-side. Filter behavior can\nbe customized in JavaScript by setting the `filterFn` attribute on the instance of `SelectPanelElement`, eg:\n\n```javascript\ndocument.querySelector(\"select-panel\").filterFn = (item: HTMLElement, query: string): boolean => {\n // return true if the item should be displayed, false otherwise\n}\n```\n\nThe element's default filter function uses the value of the `data-filter-string` attribute, falling back to the\nelement's `innerText` property. It performs a case-insensitive substring match against the filter string.\n\n### `SelectPanel`s as form inputs\n\n`SelectPanel`s can be used as form inputs. They behave very similarly to how HTML `<select>` boxes behave, and\nplay nicely with Rails' built-in form mechanisms. Pass arguments via the `form_arguments:` argument, including\nthe Rails form builder object and the name of the field:\n\n```erb\n<% form_with(model: Address.new) do |f| %>\n <%= render(Primer::Alpha::SelectPanel.new(form_arguments: { builder: f, name: \"country\" })) do |menu| %>\n <% countries.each do |country|\n <% menu.with_item(label: country.name, data: { value: country.code }) %>\n <% end %>\n <% end %>\n<% end %>\n```\n\nThe value of the `data: { value: ... }` argument is sent to the server on submit, keyed using the name provided above\n(eg. `\"country\"`). If no value is provided for an item, the value of that item is the item's label. Here's the\ncorresponding `AddressesController` that might be written to handle the form above:\n\n```ruby\nclass AddressesController < ApplicationController\n def create\n puts \"You chose #{address_params[:country]} as your country\"\n end\n\n private\n\n def address_params\n params.require(:address).permit(:country)\n end\nend\n```\n\nIf items are provided dynamically, things become a bit more complicated. The `form_for` or `form_with` method call\nhappens in the view that renders the `SelectPanel`, which means the form builder object but isn't available in the\nview that renders the list items. In such a case, it can be useful to create an instance of the form builder maually:\n\n```erb\n<% builder = ActionView::Helpers::FormBuilder.new(\n \"address\", # the name of the model, used to wrap input names, eg 'address[country_code]'\n nil, # object (eg. the Address instance, which we can omit)\n self, # template\n {} # options\n) %>\n<%= render(Primer::Alpha::SelectPanel::ItemList.new(\n form_arguments: { builder: builder, name: \"country\" }\n)) do |list| %>\n <% countries.each do |country| %>\n <% menu.with_item(label: country.name, data: { value: country.code }) %>\n <% end %>\n<% end %>\n```\n\n### JavaScript API\n\n`SelectPanel`s render a `<select-panel>` custom element that exposes behavior to the client.\n\n#### Utility methods\n\n* `show()`: Manually open the panel. Under normal circumstances, a show button is used to show the panel, but this method exists to support unusual use-cases.\n* `hide()`: Manually hides (closes) the panel.\n\n#### Query methods\n\n* `getItemById(itemId: string): Element`: Returns the item's HTML `<li>` element. The return value can be passed as the `item` argument to the other methods listed below.\n* `isItemChecked(item: Element): boolean`: Returns `true` if the item is checked, `false` otherwise.\n* `isItemHidden(item: Element): boolean`: Returns `true` if the item is hidden, `false` otherwise.\n* `isItemDisabled(item: Element): boolean`: Returns `true` if the item is disabled, `false` otherwise.\n\nNOTE: Item IDs are special values provided by the user that are attached to `SelectPanel` list items as the `data-item-id`\nHTML attribute. Item IDs can be provided by passing an `item_id:` attribute when adding items to the panel, eg:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel.new) do |panel| %>\n <% panel.with_item(item_id: \"my-id\") %>\n<% end %>\n```\n\nThe same is true when rendering `ItemList`s:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel::ItemList.new) do |list| %>\n <% list.with_item(item_id: \"my-id\") %>\n<% end %>\n```\n\n#### State methods\n\n* `showItem(item: Element)`: Shows the item, i.e. makes it visible.\n* `hideItem(item: Element)`: Hides the item, i.e. makes it invisible.\n* `enableItem(item: Element)`: Enables the item, i.e. makes it clickable by the mouse and keyboard.\n* `disableItem(item: Element)`: Disables the item, i.e. makes it unclickable by the mouse and keyboard.\n* `checkItem(item: Element)`: Checks the item. Only has an effect in single- and multi-select modes.\n* `uncheckItem(item: Element)`: Unchecks the item. Only has an effect in multi-select mode, since items cannot be unchecked in single-select mode.\n\n#### Events\n\n|Name |Type |Bubbles |Cancelable |\n|:--------------------|:------------------------------------------|:-------|:----------|\n|`itemActivated` |`CustomEvent<ItemActivatedEvent>` |Yes |No |\n|`beforeItemActivated`|`CustomEvent<ItemActivatedEvent>` |Yes |Yes |\n|`dialog:open` |`CustomEvent<{dialog: HTMLDialogElement}>` |No |No |\n|`panelClosed` |`CustomEvent<{panel: SelectPanelElement}>` |Yes |No |\n\n_Item activation_\n\nThe `<select-panel>` element fires an `itemActivated` event whenever an item is activated (eg. clicked) via the mouse or keyboard.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n \"itemActivated\",\n (event: CustomEvent<ItemActivatedEvent>) => {\n event.detail.item // Element: the <li> item that was activated\n event.detail.checked // boolean: whether or not the result of the activation checked the item\n }\n)\n```\n\nThe `beforeItemActivated` event fires before an item is activated. Canceling this event will prevent the item\nfrom being activated.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n \"beforeItemActivated\",\n (event: CustomEvent<ItemActivatedEvent>) => {\n event.detail.item // Element: the <li> item that was activated\n event.detail.checked // boolean: whether or not the result of the activation checked the item\n event.preventDefault() // Cancel the event to prevent activation (eg. checking/unchecking)\n }\n)\n```",
|
7515
|
-
"accessibility_docs": null,
|
7516
|
-
"is_form_component": false,
|
7517
|
-
"is_published": true,
|
7518
|
-
"requires_js": true,
|
7519
|
-
"component": "SelectPanel",
|
7520
|
-
"status": "alpha",
|
7521
|
-
"a11y_reviewed": false,
|
7522
|
-
"short_name": "SelectPanel",
|
7523
|
-
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel.rb",
|
7524
|
-
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/default/",
|
7525
|
-
"parameters": [
|
7526
|
-
{
|
7527
|
-
"name": "src",
|
7528
|
-
"type": "String",
|
7529
|
-
"default": "`nil`",
|
7530
|
-
"description": "The URL to fetch search results from."
|
7531
|
-
},
|
7532
|
-
{
|
7533
|
-
"name": "title",
|
7534
|
-
"type": "String",
|
7535
|
-
"default": "`\"Menu\"`",
|
7536
|
-
"description": "The title that appears at the top of the panel."
|
7537
|
-
},
|
7538
|
-
{
|
7539
|
-
"name": "id",
|
7540
|
-
"type": "String",
|
7541
|
-
"default": "`self.class.generate_id`",
|
7542
|
-
"description": "The unique ID of the panel."
|
7543
|
-
},
|
7544
|
-
{
|
7545
|
-
"name": "size",
|
7546
|
-
"type": "Symbol",
|
7547
|
-
"default": "`:small`",
|
7548
|
-
"description": "The size of the panel. One of `:auto`, `:large`, `:medium`, `:medium_portrait`, `:small`, or `:xlarge`."
|
7549
|
-
},
|
7550
|
-
{
|
7551
|
-
"name": "select_variant",
|
7552
|
-
"type": "Symbol",
|
7553
|
-
"default": "`:single`",
|
7554
|
-
"description": "One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
|
7555
|
-
},
|
7556
|
-
{
|
7557
|
-
"name": "fetch_strategy",
|
7558
|
-
"type": "Symbol",
|
7559
|
-
"default": "`:remote`",
|
7560
|
-
"description": "One of `:eventually_local`, `:local`, or `:remote`."
|
7561
|
-
},
|
7562
|
-
{
|
7563
|
-
"name": "no_results_label",
|
7564
|
-
"type": "String",
|
7565
|
-
"default": "`\"No results found\"`",
|
7566
|
-
"description": "The label to display when no results are found."
|
7567
|
-
},
|
7568
|
-
{
|
7569
|
-
"name": "preload",
|
7570
|
-
"type": "Boolean",
|
7571
|
-
"default": "`false`",
|
7572
|
-
"description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened."
|
7573
|
-
},
|
7574
|
-
{
|
7575
|
-
"name": "dynamic_label",
|
7576
|
-
"type": "Boolean",
|
7577
|
-
"default": "`false`",
|
7578
|
-
"description": "Whether or not to display the text of the currently selected item in the show button."
|
7579
|
-
},
|
7580
|
-
{
|
7581
|
-
"name": "dynamic_label_prefix",
|
7582
|
-
"type": "String",
|
7583
|
-
"default": "`nil`",
|
7584
|
-
"description": "If provided, the prefix is prepended to the dynamic label and displayed in the show button."
|
7585
|
-
},
|
7586
|
-
{
|
7587
|
-
"name": "dynamic_aria_label_prefix",
|
7588
|
-
"type": "String",
|
7589
|
-
"default": "`nil`",
|
7590
|
-
"description": "If provided, the prefix is prepended to the dynamic label and set as the value of the `aria-label` attribute on the show button."
|
7591
|
-
},
|
7592
|
-
{
|
7593
|
-
"name": "body_id",
|
7594
|
-
"type": "String",
|
7595
|
-
"default": "`nil`",
|
7596
|
-
"description": "The unique ID of the panel body. If not provided, the body ID will be set to the panel ID with a \"-body\" suffix."
|
7597
|
-
},
|
7598
|
-
{
|
7599
|
-
"name": "list_arguments",
|
7600
|
-
"type": "Hash",
|
7601
|
-
"default": "`{}`",
|
7602
|
-
"description": "Arguments to pass to the underlying {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}} component. Only has an effect for the local fetch strategy."
|
7603
|
-
},
|
7604
|
-
{
|
7605
|
-
"name": "form_arguments",
|
7606
|
-
"type": "Hash",
|
7607
|
-
"default": "`{}`",
|
7608
|
-
"description": "Form arguments to pass to the underlying {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}} component. Only has an effect for the local fetch strategy."
|
7609
|
-
},
|
7610
|
-
{
|
7611
|
-
"name": "show_filter",
|
7612
|
-
"type": "Boolean",
|
7613
|
-
"default": "`true`",
|
7614
|
-
"description": "Whether or not to show the filter input."
|
7615
|
-
},
|
7616
|
-
{
|
7617
|
-
"name": "open_on_load",
|
7618
|
-
"type": "Boolean",
|
7619
|
-
"default": "`false`",
|
7620
|
-
"description": "Open the panel when the page loads."
|
7621
|
-
},
|
7622
|
-
{
|
7623
|
-
"name": "anchor_align",
|
7624
|
-
"type": "Symbol",
|
7625
|
-
"default": "`:start`",
|
7626
|
-
"description": "The anchor alignment of the Overlay. One of `:center`, `:end`, or `:start`."
|
7627
|
-
},
|
7628
|
-
{
|
7629
|
-
"name": "anchor_side",
|
7630
|
-
"type": "Symbol",
|
7631
|
-
"default": "`:outside_bottom`",
|
7632
|
-
"description": "The side to anchor the Overlay to. One of `:inside_bottom`, `:inside_center`, `:inside_left`, `:inside_right`, `:inside_top`, `:outside_bottom`, `:outside_left`, `:outside_right`, or `:outside_top`."
|
7633
|
-
}
|
7634
|
-
],
|
7635
|
-
"slots": [
|
7636
|
-
{
|
7637
|
-
"name": "footer",
|
7638
|
-
"description": "Renders content in a footer region below the list of items.",
|
7639
|
-
"parameters": [
|
7640
|
-
{
|
7641
|
-
"name": "system_arguments",
|
7642
|
-
"type": "Hash",
|
7643
|
-
"default": "N/A",
|
7644
|
-
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Dialog::Footer{{/link_to_component}}."
|
7645
|
-
}
|
7646
|
-
]
|
7647
|
-
},
|
7648
|
-
{
|
7649
|
-
"name": "subtitle",
|
7650
|
-
"description": "Renders content underneath the title at the top of the panel.",
|
7651
|
-
"parameters": [
|
7652
|
-
{
|
7653
|
-
"name": "system_arguments",
|
7654
|
-
"type": "Hash",
|
7655
|
-
"default": "N/A",
|
7656
|
-
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Dialog::Header{{/link_to_component}}'s `subtitle` slot."
|
7657
|
-
}
|
7658
|
-
]
|
7659
|
-
},
|
7660
|
-
{
|
7661
|
-
"name": "show_button",
|
7662
|
-
"description": "Adds a show button (i.e. a button) that will open the panel when clicked.",
|
7663
|
-
"parameters": [
|
7664
|
-
{
|
7665
|
-
"name": "system_arguments",
|
7666
|
-
"type": "Hash",
|
7667
|
-
"default": "N/A",
|
7668
|
-
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}."
|
7669
|
-
}
|
7670
|
-
]
|
7671
|
-
},
|
7672
|
-
{
|
7673
|
-
"name": "preload_error_content",
|
7674
|
-
"description": "Customizable content for the error message that appears when items are fetched for the first time. This message\nappears in place of the list of items.\nFor more information, see the [documentation regarding SelectPanel error messaging](/components/selectpanel#errorwarning).",
|
7675
|
-
"parameters": [
|
7676
|
-
|
7677
|
-
]
|
7678
|
-
},
|
7679
|
-
{
|
7680
|
-
"name": "error_content",
|
7681
|
-
"description": "Customizable content for the error message that appears when items are fetched as the result of a filter\noperation. This message appears as a banner above the previously fetched list of items.\nFor more information, see the [documentation regarding SelectPanel error messaging](/components/selectpanel#errorwarning).",
|
7682
|
-
"parameters": [
|
7683
|
-
|
7684
|
-
]
|
7685
|
-
}
|
7686
|
-
],
|
7687
|
-
"methods": [
|
7688
|
-
{
|
7689
|
-
"name": "src",
|
7690
|
-
"description": "The URL to fetch search results from.",
|
7691
|
-
"parameters": [
|
7692
|
-
|
7693
|
-
],
|
7694
|
-
"return_types": [
|
7695
|
-
"String"
|
7696
|
-
]
|
7697
|
-
},
|
7698
|
-
{
|
7699
|
-
"name": "panel_id",
|
7700
|
-
"description": "The unique ID of the panel.",
|
7701
|
-
"parameters": [
|
7702
|
-
|
7703
|
-
],
|
7704
|
-
"return_types": [
|
7705
|
-
"String"
|
7706
|
-
]
|
7707
|
-
},
|
7708
|
-
{
|
7709
|
-
"name": "body_id",
|
7710
|
-
"description": "The unique ID of the panel body.",
|
7711
|
-
"parameters": [
|
7712
|
-
|
7713
|
-
],
|
7714
|
-
"return_types": [
|
7715
|
-
"String"
|
7716
|
-
]
|
7717
|
-
},
|
7718
|
-
{
|
7719
|
-
"name": "select_variant",
|
7720
|
-
"description": "One of `:multiple`, `:none`, or `:single`.",
|
7721
|
-
"parameters": [
|
7722
|
-
|
7723
|
-
],
|
7724
|
-
"return_types": [
|
7725
|
-
"Symbol"
|
7726
|
-
]
|
7727
|
-
},
|
7728
|
-
{
|
7729
|
-
"name": "fetch_strategy",
|
7730
|
-
"description": "One of `:eventually_local`, `:local`, or `:remote`.",
|
7731
|
-
"parameters": [
|
7732
|
-
|
7733
|
-
],
|
7734
|
-
"return_types": [
|
7735
|
-
"Symbol"
|
7736
|
-
]
|
7737
|
-
},
|
7738
|
-
{
|
7739
|
-
"name": "preload",
|
7740
|
-
"description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened.",
|
7741
|
-
"parameters": [
|
7742
|
-
|
7743
|
-
],
|
7744
|
-
"return_types": [
|
7745
|
-
"Boolean"
|
7746
|
-
]
|
7747
|
-
},
|
7748
|
-
{
|
7749
|
-
"name": "preload?",
|
7750
|
-
"description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened.",
|
7751
|
-
"parameters": [
|
7752
|
-
|
7753
|
-
],
|
7754
|
-
"return_types": [
|
7755
|
-
"Boolean"
|
7756
|
-
]
|
7757
|
-
},
|
7758
|
-
{
|
7759
|
-
"name": "show_filter",
|
7760
|
-
"description": "Whether or not to show the filter input.",
|
7761
|
-
"parameters": [
|
7762
|
-
|
7763
|
-
],
|
7764
|
-
"return_types": [
|
7765
|
-
"Boolean"
|
7766
|
-
]
|
7767
|
-
},
|
7768
|
-
{
|
7769
|
-
"name": "show_filter?",
|
7770
|
-
"description": "Whether or not to show the filter input.",
|
7771
|
-
"parameters": [
|
7772
|
-
|
7773
|
-
],
|
7774
|
-
"return_types": [
|
7775
|
-
"Boolean"
|
7776
|
-
]
|
7777
|
-
},
|
7778
|
-
{
|
7779
|
-
"name": "with_item",
|
7780
|
-
"description": "Adds an item to the list. Note that this method only has an effect for the local fetch strategy.",
|
7781
|
-
"parameters": [
|
7782
|
-
{
|
7783
|
-
"name": "system_arguments",
|
7784
|
-
"type": "Hash",
|
7785
|
-
"default": "N/A",
|
7786
|
-
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `item` slot."
|
7787
|
-
}
|
7788
|
-
],
|
7789
|
-
"return_types": [
|
7790
|
-
|
7791
|
-
]
|
7792
|
-
}
|
7793
|
-
],
|
7794
|
-
"previews": [
|
7795
|
-
{
|
7796
|
-
"preview_path": "primer/alpha/select_panel/playground",
|
7797
|
-
"name": "playground",
|
7798
|
-
"snapshot": "false",
|
7799
|
-
"skip_rules": {
|
7800
|
-
"wont_fix": [
|
7801
|
-
"region"
|
7802
|
-
],
|
7803
|
-
"will_fix": [
|
7804
|
-
"color-contrast"
|
7805
|
-
]
|
7806
|
-
}
|
7176
|
+
{
|
7177
|
+
"name": "hidden",
|
7178
|
+
"type": "Boolean",
|
7179
|
+
"default": "N/A",
|
7180
|
+
"description": "When set to `true`, visually hides the field."
|
7807
7181
|
},
|
7808
7182
|
{
|
7809
|
-
"
|
7810
|
-
"
|
7811
|
-
"
|
7812
|
-
"
|
7813
|
-
"wont_fix": [
|
7814
|
-
"region"
|
7815
|
-
],
|
7816
|
-
"will_fix": [
|
7817
|
-
"color-contrast"
|
7818
|
-
]
|
7819
|
-
}
|
7183
|
+
"name": "invalid",
|
7184
|
+
"type": "Boolean",
|
7185
|
+
"default": "N/A",
|
7186
|
+
"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."
|
7820
7187
|
},
|
7821
7188
|
{
|
7822
|
-
"
|
7823
|
-
"
|
7824
|
-
"
|
7825
|
-
"
|
7826
|
-
"wont_fix": [
|
7827
|
-
"region"
|
7828
|
-
],
|
7829
|
-
"will_fix": [
|
7830
|
-
"color-contrast"
|
7831
|
-
]
|
7832
|
-
}
|
7189
|
+
"name": "validation_message",
|
7190
|
+
"type": "String",
|
7191
|
+
"default": "N/A",
|
7192
|
+
"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."
|
7833
7193
|
},
|
7834
7194
|
{
|
7835
|
-
"
|
7836
|
-
"
|
7837
|
-
"
|
7838
|
-
"
|
7839
|
-
"wont_fix": [
|
7840
|
-
"region"
|
7841
|
-
],
|
7842
|
-
"will_fix": [
|
7843
|
-
"color-contrast"
|
7844
|
-
]
|
7845
|
-
}
|
7195
|
+
"name": "label_arguments",
|
7196
|
+
"type": "Hash",
|
7197
|
+
"default": "N/A",
|
7198
|
+
"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."
|
7846
7199
|
},
|
7847
7200
|
{
|
7848
|
-
"
|
7849
|
-
"
|
7850
|
-
"
|
7851
|
-
"
|
7852
|
-
"wont_fix": [
|
7853
|
-
"region"
|
7854
|
-
],
|
7855
|
-
"will_fix": [
|
7856
|
-
"color-contrast"
|
7857
|
-
]
|
7858
|
-
}
|
7201
|
+
"name": "scope_name_to_model",
|
7202
|
+
"type": "Boolean",
|
7203
|
+
"default": "N/A",
|
7204
|
+
"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."
|
7859
7205
|
},
|
7860
7206
|
{
|
7861
|
-
"
|
7862
|
-
"
|
7863
|
-
"
|
7864
|
-
"
|
7865
|
-
"wont_fix": [
|
7866
|
-
"region"
|
7867
|
-
],
|
7868
|
-
"will_fix": [
|
7869
|
-
"color-contrast"
|
7870
|
-
]
|
7871
|
-
}
|
7207
|
+
"name": "scope_id_to_model",
|
7208
|
+
"type": "Boolean",
|
7209
|
+
"default": "N/A",
|
7210
|
+
"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."
|
7872
7211
|
},
|
7873
7212
|
{
|
7874
|
-
"
|
7875
|
-
"
|
7876
|
-
"
|
7877
|
-
"
|
7878
|
-
"wont_fix": [
|
7879
|
-
"region"
|
7880
|
-
],
|
7881
|
-
"will_fix": [
|
7882
|
-
"color-contrast"
|
7883
|
-
]
|
7884
|
-
}
|
7213
|
+
"name": "required",
|
7214
|
+
"type": "Boolean",
|
7215
|
+
"default": "N/A",
|
7216
|
+
"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."
|
7885
7217
|
},
|
7886
7218
|
{
|
7887
|
-
"
|
7888
|
-
"
|
7889
|
-
"
|
7890
|
-
"
|
7891
|
-
"wont_fix": [
|
7892
|
-
"region"
|
7893
|
-
],
|
7894
|
-
"will_fix": [
|
7895
|
-
"color-contrast"
|
7896
|
-
]
|
7897
|
-
}
|
7219
|
+
"name": "aria",
|
7220
|
+
"type": "Hash",
|
7221
|
+
"default": "N/A",
|
7222
|
+
"description": "Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current=\"true\"`."
|
7898
7223
|
},
|
7899
7224
|
{
|
7900
|
-
"
|
7901
|
-
"
|
7902
|
-
"
|
7903
|
-
"
|
7904
|
-
"wont_fix": [
|
7905
|
-
"region"
|
7906
|
-
],
|
7907
|
-
"will_fix": [
|
7908
|
-
"color-contrast"
|
7909
|
-
]
|
7910
|
-
}
|
7225
|
+
"name": "data",
|
7226
|
+
"type": "Hash",
|
7227
|
+
"default": "N/A",
|
7228
|
+
"description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
|
7911
7229
|
},
|
7912
7230
|
{
|
7913
|
-
"
|
7914
|
-
"
|
7915
|
-
"
|
7916
|
-
"
|
7917
|
-
"wont_fix": [
|
7918
|
-
"region"
|
7919
|
-
],
|
7920
|
-
"will_fix": [
|
7921
|
-
"color-contrast"
|
7922
|
-
]
|
7923
|
-
}
|
7231
|
+
"name": "system_arguments",
|
7232
|
+
"type": "Hash",
|
7233
|
+
"default": "N/A",
|
7234
|
+
"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."
|
7924
7235
|
},
|
7925
7236
|
{
|
7926
|
-
"
|
7927
|
-
"
|
7928
|
-
"
|
7929
|
-
"
|
7930
|
-
"wont_fix": [
|
7931
|
-
"region"
|
7932
|
-
],
|
7933
|
-
"will_fix": [
|
7934
|
-
"color-contrast"
|
7935
|
-
]
|
7936
|
-
}
|
7237
|
+
"name": "multiple",
|
7238
|
+
"type": "Boolean",
|
7239
|
+
"default": "N/A",
|
7240
|
+
"description": "If set to true, the selection will allow multiple choices."
|
7937
7241
|
},
|
7938
7242
|
{
|
7939
|
-
"
|
7940
|
-
"
|
7941
|
-
"
|
7243
|
+
"name": "include_blank",
|
7244
|
+
"type": "Boolean, String",
|
7245
|
+
"default": "N/A",
|
7246
|
+
"description": "If set to true, an empty option will be created. If set to a string, the string will be used as the option's content and the value will be empty."
|
7247
|
+
},
|
7248
|
+
{
|
7249
|
+
"name": "prompt",
|
7250
|
+
"type": "String",
|
7251
|
+
"default": "N/A",
|
7252
|
+
"description": "Create a prompt option with blank value and the text asking user to select something."
|
7253
|
+
}
|
7254
|
+
],
|
7255
|
+
"slots": [
|
7256
|
+
|
7257
|
+
],
|
7258
|
+
"methods": [
|
7259
|
+
{
|
7260
|
+
"name": "option",
|
7261
|
+
"description": "Adds an option to the list.",
|
7262
|
+
"parameters": [
|
7263
|
+
{
|
7264
|
+
"name": "label",
|
7265
|
+
"type": "String",
|
7266
|
+
"default": "N/A",
|
7267
|
+
"description": "The user-facing label for the option."
|
7268
|
+
},
|
7269
|
+
{
|
7270
|
+
"name": "value",
|
7271
|
+
"type": "String",
|
7272
|
+
"default": "N/A",
|
7273
|
+
"description": "The value sent to the server on form submission."
|
7274
|
+
}
|
7275
|
+
]
|
7276
|
+
}
|
7277
|
+
],
|
7278
|
+
"previews": [
|
7279
|
+
{
|
7280
|
+
"preview_path": "primer/alpha/select/playground",
|
7281
|
+
"name": "playground",
|
7282
|
+
"snapshot": "false",
|
7942
7283
|
"skip_rules": {
|
7943
7284
|
"wont_fix": [
|
7944
7285
|
"region"
|
@@ -7949,9 +7290,9 @@
|
|
7949
7290
|
}
|
7950
7291
|
},
|
7951
7292
|
{
|
7952
|
-
"preview_path": "primer/alpha/
|
7953
|
-
"name": "
|
7954
|
-
"snapshot": "
|
7293
|
+
"preview_path": "primer/alpha/select/default",
|
7294
|
+
"name": "default",
|
7295
|
+
"snapshot": "false",
|
7955
7296
|
"skip_rules": {
|
7956
7297
|
"wont_fix": [
|
7957
7298
|
"region"
|
@@ -7962,9 +7303,9 @@
|
|
7962
7303
|
}
|
7963
7304
|
},
|
7964
7305
|
{
|
7965
|
-
"preview_path": "primer/alpha/
|
7966
|
-
"name": "
|
7967
|
-
"snapshot": "
|
7306
|
+
"preview_path": "primer/alpha/select/with_caption",
|
7307
|
+
"name": "with_caption",
|
7308
|
+
"snapshot": "true",
|
7968
7309
|
"skip_rules": {
|
7969
7310
|
"wont_fix": [
|
7970
7311
|
"region"
|
@@ -7975,9 +7316,9 @@
|
|
7975
7316
|
}
|
7976
7317
|
},
|
7977
7318
|
{
|
7978
|
-
"preview_path": "primer/alpha/
|
7979
|
-
"name": "
|
7980
|
-
"snapshot": "
|
7319
|
+
"preview_path": "primer/alpha/select/visually_hide_label",
|
7320
|
+
"name": "visually_hide_label",
|
7321
|
+
"snapshot": "true",
|
7981
7322
|
"skip_rules": {
|
7982
7323
|
"wont_fix": [
|
7983
7324
|
"region"
|
@@ -7988,9 +7329,9 @@
|
|
7988
7329
|
}
|
7989
7330
|
},
|
7990
7331
|
{
|
7991
|
-
"preview_path": "primer/alpha/
|
7992
|
-
"name": "
|
7993
|
-
"snapshot": "
|
7332
|
+
"preview_path": "primer/alpha/select/full_width",
|
7333
|
+
"name": "full_width",
|
7334
|
+
"snapshot": "true",
|
7994
7335
|
"skip_rules": {
|
7995
7336
|
"wont_fix": [
|
7996
7337
|
"region"
|
@@ -8001,9 +7342,9 @@
|
|
8001
7342
|
}
|
8002
7343
|
},
|
8003
7344
|
{
|
8004
|
-
"preview_path": "primer/alpha/
|
8005
|
-
"name": "
|
8006
|
-
"snapshot": "
|
7345
|
+
"preview_path": "primer/alpha/select/not_full_width",
|
7346
|
+
"name": "not_full_width",
|
7347
|
+
"snapshot": "true",
|
8007
7348
|
"skip_rules": {
|
8008
7349
|
"wont_fix": [
|
8009
7350
|
"region"
|
@@ -8014,9 +7355,9 @@
|
|
8014
7355
|
}
|
8015
7356
|
},
|
8016
7357
|
{
|
8017
|
-
"preview_path": "primer/alpha/
|
8018
|
-
"name": "
|
8019
|
-
"snapshot": "
|
7358
|
+
"preview_path": "primer/alpha/select/disabled",
|
7359
|
+
"name": "disabled",
|
7360
|
+
"snapshot": "true",
|
8020
7361
|
"skip_rules": {
|
8021
7362
|
"wont_fix": [
|
8022
7363
|
"region"
|
@@ -8027,9 +7368,9 @@
|
|
8027
7368
|
}
|
8028
7369
|
},
|
8029
7370
|
{
|
8030
|
-
"preview_path": "primer/alpha/
|
8031
|
-
"name": "
|
8032
|
-
"snapshot": "
|
7371
|
+
"preview_path": "primer/alpha/select/invalid",
|
7372
|
+
"name": "invalid",
|
7373
|
+
"snapshot": "true",
|
8033
7374
|
"skip_rules": {
|
8034
7375
|
"wont_fix": [
|
8035
7376
|
"region"
|
@@ -8040,9 +7381,9 @@
|
|
8040
7381
|
}
|
8041
7382
|
},
|
8042
7383
|
{
|
8043
|
-
"preview_path": "primer/alpha/
|
8044
|
-
"name": "
|
8045
|
-
"snapshot": "
|
7384
|
+
"preview_path": "primer/alpha/select/with_validation_message",
|
7385
|
+
"name": "with_validation_message",
|
7386
|
+
"snapshot": "true",
|
8046
7387
|
"skip_rules": {
|
8047
7388
|
"wont_fix": [
|
8048
7389
|
"region"
|
@@ -9472,9 +8813,6 @@
|
|
9472
8813
|
"description": "Returns the value of attribute id.",
|
9473
8814
|
"parameters": [
|
9474
8815
|
|
9475
|
-
],
|
9476
|
-
"return_types": [
|
9477
|
-
|
9478
8816
|
]
|
9479
8817
|
}
|
9480
8818
|
],
|
@@ -10966,9 +10304,6 @@
|
|
10966
10304
|
"description": "Returns the value of attribute disabled.",
|
10967
10305
|
"parameters": [
|
10968
10306
|
|
10969
|
-
],
|
10970
|
-
"return_types": [
|
10971
|
-
|
10972
10307
|
]
|
10973
10308
|
},
|
10974
10309
|
{
|
@@ -10976,9 +10311,6 @@
|
|
10976
10311
|
"description": "Returns the value of attribute disabled.",
|
10977
10312
|
"parameters": [
|
10978
10313
|
|
10979
|
-
],
|
10980
|
-
"return_types": [
|
10981
|
-
|
10982
10314
|
]
|
10983
10315
|
}
|
10984
10316
|
],
|
@@ -11551,9 +10883,6 @@
|
|
11551
10883
|
"description": "Returns the value of attribute id.",
|
11552
10884
|
"parameters": [
|
11553
10885
|
|
11554
|
-
],
|
11555
|
-
"return_types": [
|
11556
|
-
|
11557
10886
|
]
|
11558
10887
|
}
|
11559
10888
|
],
|
@@ -11703,9 +11032,6 @@
|
|
11703
11032
|
"description": "Returns the value of attribute selected.",
|
11704
11033
|
"parameters": [
|
11705
11034
|
|
11706
|
-
],
|
11707
|
-
"return_types": [
|
11708
|
-
|
11709
11035
|
]
|
11710
11036
|
},
|
11711
11037
|
{
|
@@ -11718,9 +11044,6 @@
|
|
11718
11044
|
"default": "N/A",
|
11719
11045
|
"description": "the value to set the attribute selected to."
|
11720
11046
|
}
|
11721
|
-
],
|
11722
|
-
"return_types": [
|
11723
|
-
|
11724
11047
|
]
|
11725
11048
|
},
|
11726
11049
|
{
|
@@ -11728,9 +11051,6 @@
|
|
11728
11051
|
"description": "Returns the value of attribute href.",
|
11729
11052
|
"parameters": [
|
11730
11053
|
|
11731
|
-
],
|
11732
|
-
"return_types": [
|
11733
|
-
|
11734
11054
|
]
|
11735
11055
|
},
|
11736
11056
|
{
|
@@ -11743,9 +11063,6 @@
|
|
11743
11063
|
"default": "N/A",
|
11744
11064
|
"description": "the value to set the attribute href to."
|
11745
11065
|
}
|
11746
|
-
],
|
11747
|
-
"return_types": [
|
11748
|
-
|
11749
11066
|
]
|
11750
11067
|
}
|
11751
11068
|
],
|
@@ -12230,9 +11547,6 @@
|
|
12230
11547
|
"default": "N/A",
|
12231
11548
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}} or {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}}, depending on the value of the `icon:` argument."
|
12232
11549
|
}
|
12233
|
-
],
|
12234
|
-
"return_types": [
|
12235
|
-
|
12236
11550
|
]
|
12237
11551
|
},
|
12238
11552
|
{
|
@@ -12245,9 +11559,6 @@
|
|
12245
11559
|
"default": "N/A",
|
12246
11560
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::ButtonGroup::MenuButton{{/link_to_component}}."
|
12247
11561
|
}
|
12248
|
-
],
|
12249
|
-
"return_types": [
|
12250
|
-
|
12251
11562
|
]
|
12252
11563
|
},
|
12253
11564
|
{
|
@@ -12260,9 +11571,6 @@
|
|
12260
11571
|
"default": "N/A",
|
12261
11572
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::ClipboardCopyButton{{/link_to_component}}."
|
12262
11573
|
}
|
12263
|
-
],
|
12264
|
-
"return_types": [
|
12265
|
-
|
12266
11574
|
]
|
12267
11575
|
}
|
12268
11576
|
],
|
@@ -13062,9 +12370,6 @@
|
|
13062
12370
|
"description": "Returns the value of attribute disabled.",
|
13063
12371
|
"parameters": [
|
13064
12372
|
|
13065
|
-
],
|
13066
|
-
"return_types": [
|
13067
|
-
|
13068
12373
|
]
|
13069
12374
|
},
|
13070
12375
|
{
|
@@ -13072,9 +12377,6 @@
|
|
13072
12377
|
"description": "Returns the value of attribute disabled.",
|
13073
12378
|
"parameters": [
|
13074
12379
|
|
13075
|
-
],
|
13076
|
-
"return_types": [
|
13077
|
-
|
13078
12380
|
]
|
13079
12381
|
}
|
13080
12382
|
],
|
@@ -14125,9 +13427,6 @@
|
|
14125
13427
|
"default": "N/A",
|
14126
13428
|
"description": "These arguments are forwarded to {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
|
14127
13429
|
}
|
14128
|
-
],
|
14129
|
-
"return_types": [
|
14130
|
-
|
14131
13430
|
]
|
14132
13431
|
},
|
14133
13432
|
{
|
@@ -14176,9 +13475,6 @@
|
|
14176
13475
|
"default": "N/A",
|
14177
13476
|
"description": "These arguments are forwarded to {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
|
14178
13477
|
}
|
14179
|
-
],
|
14180
|
-
"return_types": [
|
14181
|
-
|
14182
13478
|
]
|
14183
13479
|
},
|
14184
13480
|
{
|
@@ -14191,9 +13487,6 @@
|
|
14191
13487
|
"default": "N/A",
|
14192
13488
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Group{{/link_to_component}}."
|
14193
13489
|
}
|
14194
|
-
],
|
14195
|
-
"return_types": [
|
14196
|
-
|
14197
13490
|
]
|
14198
13491
|
},
|
14199
13492
|
{
|
@@ -14206,9 +13499,6 @@
|
|
14206
13499
|
"default": "N/A",
|
14207
13500
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Divider{{/link_to_component}}."
|
14208
13501
|
}
|
14209
|
-
],
|
14210
|
-
"return_types": [
|
14211
|
-
|
14212
13502
|
]
|
14213
13503
|
},
|
14214
13504
|
{
|
@@ -14227,9 +13517,6 @@
|
|
14227
13517
|
"default": "N/A",
|
14228
13518
|
"description": "These arguments are forwarded to {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
|
14229
13519
|
}
|
14230
|
-
],
|
14231
|
-
"return_types": [
|
14232
|
-
|
14233
13520
|
]
|
14234
13521
|
},
|
14235
13522
|
{
|
@@ -14278,9 +13565,6 @@
|
|
14278
13565
|
"default": "N/A",
|
14279
13566
|
"description": "These arguments are forwarded to {{#link_to_component}}Primer::Beta::NavList::Item{{/link_to_component}}, or whatever class is passed as the `component_klass` argument."
|
14280
13567
|
}
|
14281
|
-
],
|
14282
|
-
"return_types": [
|
14283
|
-
|
14284
13568
|
]
|
14285
13569
|
},
|
14286
13570
|
{
|
@@ -14288,9 +13572,6 @@
|
|
14288
13572
|
"description": "Lists that contain top-level items (i.e. items outside of a group) should be wrapped in a <ul>",
|
14289
13573
|
"parameters": [
|
14290
13574
|
|
14291
|
-
],
|
14292
|
-
"return_types": [
|
14293
|
-
"Boolean"
|
14294
13575
|
]
|
14295
13576
|
}
|
14296
13577
|
],
|
@@ -14475,9 +13756,6 @@
|
|
14475
13756
|
"description": "Returns the value of attribute title.",
|
14476
13757
|
"parameters": [
|
14477
13758
|
|
14478
|
-
],
|
14479
|
-
"return_types": [
|
14480
|
-
|
14481
13759
|
]
|
14482
13760
|
},
|
14483
13761
|
{
|
@@ -14485,9 +13763,6 @@
|
|
14485
13763
|
"description": "Returns the value of attribute id.",
|
14486
13764
|
"parameters": [
|
14487
13765
|
|
14488
|
-
],
|
14489
|
-
"return_types": [
|
14490
|
-
|
14491
13766
|
]
|
14492
13767
|
},
|
14493
13768
|
{
|
@@ -14495,9 +13770,6 @@
|
|
14495
13770
|
"description": "Returns the value of attribute heading_level.",
|
14496
13771
|
"parameters": [
|
14497
13772
|
|
14498
|
-
],
|
14499
|
-
"return_types": [
|
14500
|
-
|
14501
13773
|
]
|
14502
13774
|
},
|
14503
13775
|
{
|
@@ -14505,9 +13777,6 @@
|
|
14505
13777
|
"description": "Returns the value of attribute system_arguments.",
|
14506
13778
|
"parameters": [
|
14507
13779
|
|
14508
|
-
],
|
14509
|
-
"return_types": [
|
14510
|
-
|
14511
13780
|
]
|
14512
13781
|
}
|
14513
13782
|
],
|
@@ -14634,9 +13903,6 @@
|
|
14634
13903
|
"description": "Returns the value of attribute selected_by_ids.",
|
14635
13904
|
"parameters": [
|
14636
13905
|
|
14637
|
-
],
|
14638
|
-
"return_types": [
|
14639
|
-
|
14640
13906
|
]
|
14641
13907
|
},
|
14642
13908
|
{
|
@@ -14644,9 +13910,6 @@
|
|
14644
13910
|
"description": "Returns the value of attribute sub_item.",
|
14645
13911
|
"parameters": [
|
14646
13912
|
|
14647
|
-
],
|
14648
|
-
"return_types": [
|
14649
|
-
|
14650
13913
|
]
|
14651
13914
|
},
|
14652
13915
|
{
|
@@ -14654,9 +13917,6 @@
|
|
14654
13917
|
"description": "Returns the value of attribute sub_item.\nWhether or not this item is nested under a parent item.",
|
14655
13918
|
"parameters": [
|
14656
13919
|
|
14657
|
-
],
|
14658
|
-
"return_types": [
|
14659
|
-
"Boolean"
|
14660
13920
|
]
|
14661
13921
|
},
|
14662
13922
|
{
|
@@ -14664,9 +13924,6 @@
|
|
14664
13924
|
"description": "Cause this item to show its list of sub items when rendered.",
|
14665
13925
|
"parameters": [
|
14666
13926
|
|
14667
|
-
],
|
14668
|
-
"return_types": [
|
14669
|
-
|
14670
13927
|
]
|
14671
13928
|
},
|
14672
13929
|
{
|
@@ -14674,9 +13931,6 @@
|
|
14674
13931
|
"description": "Normally it would be easier to simply ask each item for its active status, eg.\nitems.any?(&:active?), but unfortunately the view context is not set on each\nitem until _after_ the parent's before_render, etc methods have been called.\nThis means helper methods like current_page? will blow up with an error, since\n`helpers` is simply an alias for the view context (i.e. an instance of\nActionView::Base). Since we know the view context for the parent object must\nbe set before `before_render` is invoked, we can call helper methods here in\nthe parent and bypass the problem entirely. Maybe not the most OO approach,\nbut it works.",
|
14675
13932
|
"parameters": [
|
14676
13933
|
|
14677
|
-
],
|
14678
|
-
"return_types": [
|
14679
|
-
"Boolean"
|
14680
13934
|
]
|
14681
13935
|
}
|
14682
13936
|
],
|
@@ -14822,9 +14076,6 @@
|
|
14822
14076
|
"description": "Cause this group to show its list of sub items when rendered.\n:nocov:",
|
14823
14077
|
"parameters": [
|
14824
14078
|
|
14825
|
-
],
|
14826
|
-
"return_types": [
|
14827
|
-
|
14828
14079
|
]
|
14829
14080
|
}
|
14830
14081
|
],
|
@@ -16578,9 +15829,6 @@
|
|
16578
15829
|
"description": "remove alias when all buttons are migrated to new slot names",
|
16579
15830
|
"parameters": [
|
16580
15831
|
|
16581
|
-
],
|
16582
|
-
"return_types": [
|
16583
|
-
|
16584
15832
|
]
|
16585
15833
|
},
|
16586
15834
|
{
|
@@ -16588,9 +15836,6 @@
|
|
16588
15836
|
"description": "remove alias when all buttons are migrated to new slot names",
|
16589
15837
|
"parameters": [
|
16590
15838
|
|
16591
|
-
],
|
16592
|
-
"return_types": [
|
16593
|
-
|
16594
15839
|
]
|
16595
15840
|
}
|
16596
15841
|
],
|