@primer/view-components 0.27.1-rc.f35adaba → 0.28.0-rc.4d641547
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/action_menu/action_menu_element.d.ts +0 -9
- package/app/assets/javascripts/app/components/primer/alpha/select_panel_element.d.ts +64 -0
- package/app/assets/javascripts/app/components/primer/aria_live.d.ts +8 -0
- package/app/assets/javascripts/app/components/primer/primer.d.ts +4 -0
- package/app/assets/javascripts/app/components/primer/shared_events.d.ts +9 -0
- 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 +1 -1
- package/app/assets/styles/primer_view_components.css.map +1 -1
- package/app/components/primer/alpha/action_list.css +1 -1
- package/app/components/primer/alpha/action_menu/action_menu_element.d.ts +0 -9
- package/app/components/primer/alpha/select_panel_element.d.ts +64 -0
- package/app/components/primer/alpha/select_panel_element.js +922 -0
- package/app/components/primer/aria_live.d.ts +8 -0
- package/app/components/primer/aria_live.js +38 -0
- package/app/components/primer/primer.d.ts +4 -0
- package/app/components/primer/primer.js +4 -0
- package/app/components/primer/shared_events.d.ts +9 -0
- package/app/components/primer/shared_events.js +1 -0
- package/package.json +2 -1
- package/static/arguments.json +118 -0
- package/static/audited_at.json +1 -0
- package/static/constants.json +16 -0
- package/static/info_arch.json +830 -75
- package/static/previews.json +268 -0
- package/static/statuses.json +1 -0
package/static/info_arch.json
CHANGED
@@ -309,6 +309,9 @@
|
|
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
|
+
|
312
315
|
]
|
313
316
|
},
|
314
317
|
{
|
@@ -321,6 +324,9 @@
|
|
321
324
|
"default": "N/A",
|
322
325
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Divider{{/link_to_component}}."
|
323
326
|
}
|
327
|
+
],
|
328
|
+
"return_types": [
|
329
|
+
|
324
330
|
]
|
325
331
|
},
|
326
332
|
{
|
@@ -369,6 +375,9 @@
|
|
369
375
|
"default": "N/A",
|
370
376
|
"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."
|
371
377
|
}
|
378
|
+
],
|
379
|
+
"return_types": [
|
380
|
+
|
372
381
|
]
|
373
382
|
},
|
374
383
|
{
|
@@ -376,6 +385,9 @@
|
|
376
385
|
"description": "Returns the value of attribute id.",
|
377
386
|
"parameters": [
|
378
387
|
|
388
|
+
],
|
389
|
+
"return_types": [
|
390
|
+
|
379
391
|
]
|
380
392
|
},
|
381
393
|
{
|
@@ -383,6 +395,9 @@
|
|
383
395
|
"description": "Returns the value of attribute select_variant.",
|
384
396
|
"parameters": [
|
385
397
|
|
398
|
+
],
|
399
|
+
"return_types": [
|
400
|
+
|
386
401
|
]
|
387
402
|
},
|
388
403
|
{
|
@@ -390,6 +405,9 @@
|
|
390
405
|
"description": "Returns the value of attribute role.",
|
391
406
|
"parameters": [
|
392
407
|
|
408
|
+
],
|
409
|
+
"return_types": [
|
410
|
+
|
393
411
|
]
|
394
412
|
},
|
395
413
|
{
|
@@ -397,6 +415,9 @@
|
|
397
415
|
"description": "Returns the value of attribute aria_selection_variant.",
|
398
416
|
"parameters": [
|
399
417
|
|
418
|
+
],
|
419
|
+
"return_types": [
|
420
|
+
|
400
421
|
]
|
401
422
|
},
|
402
423
|
{
|
@@ -415,6 +436,9 @@
|
|
415
436
|
"default": "N/A",
|
416
437
|
"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."
|
417
438
|
}
|
439
|
+
],
|
440
|
+
"return_types": [
|
441
|
+
|
418
442
|
]
|
419
443
|
},
|
420
444
|
{
|
@@ -463,6 +487,9 @@
|
|
463
487
|
"default": "N/A",
|
464
488
|
"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."
|
465
489
|
}
|
490
|
+
],
|
491
|
+
"return_types": [
|
492
|
+
|
466
493
|
]
|
467
494
|
},
|
468
495
|
{
|
@@ -470,6 +497,9 @@
|
|
470
497
|
"description": "Returns the value of attribute post_list_content_block.",
|
471
498
|
"parameters": [
|
472
499
|
|
500
|
+
],
|
501
|
+
"return_types": [
|
502
|
+
|
473
503
|
]
|
474
504
|
}
|
475
505
|
],
|
@@ -1015,6 +1045,9 @@
|
|
1015
1045
|
"description": "Returns the value of attribute id.",
|
1016
1046
|
"parameters": [
|
1017
1047
|
|
1048
|
+
],
|
1049
|
+
"return_types": [
|
1050
|
+
|
1018
1051
|
]
|
1019
1052
|
},
|
1020
1053
|
{
|
@@ -1022,6 +1055,9 @@
|
|
1022
1055
|
"description": "Returns the value of attribute item_id.",
|
1023
1056
|
"parameters": [
|
1024
1057
|
|
1058
|
+
],
|
1059
|
+
"return_types": [
|
1060
|
+
|
1025
1061
|
]
|
1026
1062
|
},
|
1027
1063
|
{
|
@@ -1029,6 +1065,9 @@
|
|
1029
1065
|
"description": "Returns the value of attribute list.",
|
1030
1066
|
"parameters": [
|
1031
1067
|
|
1068
|
+
],
|
1069
|
+
"return_types": [
|
1070
|
+
|
1032
1071
|
]
|
1033
1072
|
},
|
1034
1073
|
{
|
@@ -1036,6 +1075,9 @@
|
|
1036
1075
|
"description": "Returns the value of attribute href.",
|
1037
1076
|
"parameters": [
|
1038
1077
|
|
1078
|
+
],
|
1079
|
+
"return_types": [
|
1080
|
+
|
1039
1081
|
]
|
1040
1082
|
},
|
1041
1083
|
{
|
@@ -1043,6 +1085,9 @@
|
|
1043
1085
|
"description": "Returns the value of attribute active.",
|
1044
1086
|
"parameters": [
|
1045
1087
|
|
1088
|
+
],
|
1089
|
+
"return_types": [
|
1090
|
+
|
1046
1091
|
]
|
1047
1092
|
},
|
1048
1093
|
{
|
@@ -1050,6 +1095,9 @@
|
|
1050
1095
|
"description": "Returns the value of attribute disabled.",
|
1051
1096
|
"parameters": [
|
1052
1097
|
|
1098
|
+
],
|
1099
|
+
"return_types": [
|
1100
|
+
|
1053
1101
|
]
|
1054
1102
|
},
|
1055
1103
|
{
|
@@ -1057,6 +1105,9 @@
|
|
1057
1105
|
"description": "Returns the value of attribute parent.",
|
1058
1106
|
"parameters": [
|
1059
1107
|
|
1108
|
+
],
|
1109
|
+
"return_types": [
|
1110
|
+
|
1060
1111
|
]
|
1061
1112
|
},
|
1062
1113
|
{
|
@@ -1064,6 +1115,9 @@
|
|
1064
1115
|
"description": "Returns the value of attribute active.\nWhether or not this item is active.",
|
1065
1116
|
"parameters": [
|
1066
1117
|
|
1118
|
+
],
|
1119
|
+
"return_types": [
|
1120
|
+
"Boolean"
|
1067
1121
|
]
|
1068
1122
|
},
|
1069
1123
|
{
|
@@ -1071,6 +1125,9 @@
|
|
1071
1125
|
"description": "Returns the value of attribute disabled.\nWhether or not this item is disabled.",
|
1072
1126
|
"parameters": [
|
1073
1127
|
|
1128
|
+
],
|
1129
|
+
"return_types": [
|
1130
|
+
"Boolean"
|
1074
1131
|
]
|
1075
1132
|
}
|
1076
1133
|
],
|
@@ -1135,6 +1192,9 @@
|
|
1135
1192
|
"description": "Returns the value of attribute title_id.",
|
1136
1193
|
"parameters": [
|
1137
1194
|
|
1195
|
+
],
|
1196
|
+
"return_types": [
|
1197
|
+
|
1138
1198
|
]
|
1139
1199
|
},
|
1140
1200
|
{
|
@@ -1142,6 +1202,9 @@
|
|
1142
1202
|
"description": "Returns the value of attribute subtitle_id.",
|
1143
1203
|
"parameters": [
|
1144
1204
|
|
1205
|
+
],
|
1206
|
+
"return_types": [
|
1207
|
+
|
1145
1208
|
]
|
1146
1209
|
}
|
1147
1210
|
],
|
@@ -1225,7 +1288,7 @@
|
|
1225
1288
|
},
|
1226
1289
|
{
|
1227
1290
|
"fully_qualified_name": "Primer::Alpha::ActionMenu",
|
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`
|
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`ActionMenu`s render an `<action-menu>` custom element that exposes behavior to the client.\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 `ActionMenu` items as the `data-item-id`\nHTML attribute. Item IDs can be provided by passing an `item_id:` attribute when adding items to the list, eg:\n\n```erb\n<%= render(Primer::Alpha::ActionMenu.new) do |menu| %>\n <% menu.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\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: 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```",
|
1229
1292
|
"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).",
|
1230
1293
|
"is_form_component": false,
|
1231
1294
|
"is_published": true,
|
@@ -1342,6 +1405,9 @@
|
|
1342
1405
|
"description": "Returns the value of attribute list.",
|
1343
1406
|
"parameters": [
|
1344
1407
|
|
1408
|
+
],
|
1409
|
+
"return_types": [
|
1410
|
+
|
1345
1411
|
]
|
1346
1412
|
},
|
1347
1413
|
{
|
@@ -1349,6 +1415,9 @@
|
|
1349
1415
|
"description": "Returns the value of attribute preload.",
|
1350
1416
|
"parameters": [
|
1351
1417
|
|
1418
|
+
],
|
1419
|
+
"return_types": [
|
1420
|
+
|
1352
1421
|
]
|
1353
1422
|
},
|
1354
1423
|
{
|
@@ -1356,6 +1425,9 @@
|
|
1356
1425
|
"description": "Returns the value of attribute preload.",
|
1357
1426
|
"parameters": [
|
1358
1427
|
|
1428
|
+
],
|
1429
|
+
"return_types": [
|
1430
|
+
|
1359
1431
|
]
|
1360
1432
|
},
|
1361
1433
|
{
|
@@ -1368,6 +1440,9 @@
|
|
1368
1440
|
"default": "N/A",
|
1369
1441
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Overlay{{/link_to_component}}'s `show_button` slot."
|
1370
1442
|
}
|
1443
|
+
],
|
1444
|
+
"return_types": [
|
1445
|
+
|
1371
1446
|
]
|
1372
1447
|
},
|
1373
1448
|
{
|
@@ -1380,6 +1455,9 @@
|
|
1380
1455
|
"default": "N/A",
|
1381
1456
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}."
|
1382
1457
|
}
|
1458
|
+
],
|
1459
|
+
"return_types": [
|
1460
|
+
|
1383
1461
|
]
|
1384
1462
|
},
|
1385
1463
|
{
|
@@ -1392,6 +1470,9 @@
|
|
1392
1470
|
"default": "N/A",
|
1393
1471
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `divider` slot."
|
1394
1472
|
}
|
1473
|
+
],
|
1474
|
+
"return_types": [
|
1475
|
+
|
1395
1476
|
]
|
1396
1477
|
},
|
1397
1478
|
{
|
@@ -1434,6 +1515,9 @@
|
|
1434
1515
|
"default": "N/A",
|
1435
1516
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Item{{/link_to_component}}."
|
1436
1517
|
}
|
1518
|
+
],
|
1519
|
+
"return_types": [
|
1520
|
+
|
1437
1521
|
]
|
1438
1522
|
}
|
1439
1523
|
],
|
@@ -1847,6 +1931,9 @@
|
|
1847
1931
|
"description": "Returns the value of attribute items.",
|
1848
1932
|
"parameters": [
|
1849
1933
|
|
1934
|
+
],
|
1935
|
+
"return_types": [
|
1936
|
+
|
1850
1937
|
]
|
1851
1938
|
}
|
1852
1939
|
],
|
@@ -2057,6 +2144,9 @@
|
|
2057
2144
|
"default": "N/A",
|
2058
2145
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::Heading{{/link_to_component}}."
|
2059
2146
|
}
|
2147
|
+
],
|
2148
|
+
"return_types": [
|
2149
|
+
|
2060
2150
|
]
|
2061
2151
|
}
|
2062
2152
|
],
|
@@ -2181,6 +2271,9 @@
|
|
2181
2271
|
"default": "N/A",
|
2182
2272
|
"description": "The component configuration."
|
2183
2273
|
}
|
2274
|
+
],
|
2275
|
+
"return_types": [
|
2276
|
+
"String"
|
2184
2277
|
]
|
2185
2278
|
}
|
2186
2279
|
],
|
@@ -3043,6 +3136,9 @@
|
|
3043
3136
|
"default": "N/A",
|
3044
3137
|
"description": "The block accepted by {{#link_to_component}}Primer::Alpha::CheckBox{{/link_to_component}}."
|
3045
3138
|
}
|
3139
|
+
],
|
3140
|
+
"return_types": [
|
3141
|
+
|
3046
3142
|
]
|
3047
3143
|
}
|
3048
3144
|
],
|
@@ -3280,6 +3376,9 @@
|
|
3280
3376
|
"description": "The dialog's ID value.",
|
3281
3377
|
"parameters": [
|
3282
3378
|
|
3379
|
+
],
|
3380
|
+
"return_types": [
|
3381
|
+
|
3283
3382
|
]
|
3284
3383
|
}
|
3285
3384
|
],
|
@@ -3614,25 +3713,19 @@
|
|
3614
3713
|
]
|
3615
3714
|
},
|
3616
3715
|
{
|
3617
|
-
"fully_qualified_name": "Primer::Alpha::Dialog::
|
3618
|
-
"description": "A `Dialog::
|
3716
|
+
"fully_qualified_name": "Primer::Alpha::Dialog::Body",
|
3717
|
+
"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}}.",
|
3619
3718
|
"accessibility_docs": null,
|
3620
3719
|
"is_form_component": false,
|
3621
3720
|
"is_published": true,
|
3622
3721
|
"requires_js": false,
|
3623
|
-
"component": "Dialog::
|
3722
|
+
"component": "Dialog::Body",
|
3624
3723
|
"status": "alpha",
|
3625
3724
|
"a11y_reviewed": true,
|
3626
|
-
"short_name": "
|
3627
|
-
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/
|
3628
|
-
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/
|
3725
|
+
"short_name": "DialogBody",
|
3726
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/body.rb",
|
3727
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/body/default/",
|
3629
3728
|
"parameters": [
|
3630
|
-
{
|
3631
|
-
"name": "show_divider",
|
3632
|
-
"type": "Boolean",
|
3633
|
-
"default": "`false`",
|
3634
|
-
"description": "Show a divider between the footer and body."
|
3635
|
-
},
|
3636
3729
|
{
|
3637
3730
|
"name": "system_arguments",
|
3638
3731
|
"type": "Hash",
|
@@ -3654,19 +3747,25 @@
|
|
3654
3747
|
]
|
3655
3748
|
},
|
3656
3749
|
{
|
3657
|
-
"fully_qualified_name": "Primer::Alpha::Dialog::
|
3658
|
-
"description": "A `Dialog::
|
3750
|
+
"fully_qualified_name": "Primer::Alpha::Dialog::Footer",
|
3751
|
+
"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}}.",
|
3659
3752
|
"accessibility_docs": null,
|
3660
3753
|
"is_form_component": false,
|
3661
3754
|
"is_published": true,
|
3662
3755
|
"requires_js": false,
|
3663
|
-
"component": "Dialog::
|
3756
|
+
"component": "Dialog::Footer",
|
3664
3757
|
"status": "alpha",
|
3665
3758
|
"a11y_reviewed": true,
|
3666
|
-
"short_name": "
|
3667
|
-
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/
|
3668
|
-
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/
|
3759
|
+
"short_name": "DialogFooter",
|
3760
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/dialog/footer.rb",
|
3761
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/dialog/footer/default/",
|
3669
3762
|
"parameters": [
|
3763
|
+
{
|
3764
|
+
"name": "show_divider",
|
3765
|
+
"type": "Boolean",
|
3766
|
+
"default": "`false`",
|
3767
|
+
"description": "Show a divider between the footer and body."
|
3768
|
+
},
|
3670
3769
|
{
|
3671
3770
|
"name": "system_arguments",
|
3672
3771
|
"type": "Hash",
|
@@ -5814,6 +5913,9 @@
|
|
5814
5913
|
"description": "Returns the value of attribute selected.",
|
5815
5914
|
"parameters": [
|
5816
5915
|
|
5916
|
+
],
|
5917
|
+
"return_types": [
|
5918
|
+
|
5817
5919
|
]
|
5818
5920
|
}
|
5819
5921
|
],
|
@@ -6675,6 +6777,9 @@
|
|
6675
6777
|
"default": "N/A",
|
6676
6778
|
"description": "The block accepted by {{#link_to_component}}Primer::Alpha::RadioButton{{/link_to_component}}."
|
6677
6779
|
}
|
6780
|
+
],
|
6781
|
+
"return_types": [
|
6782
|
+
|
6678
6783
|
]
|
6679
6784
|
}
|
6680
6785
|
],
|
@@ -7093,6 +7198,9 @@
|
|
7093
7198
|
"default": "N/A",
|
7094
7199
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}'s `with_trailing_visual_label` slot."
|
7095
7200
|
}
|
7201
|
+
],
|
7202
|
+
"return_types": [
|
7203
|
+
|
7096
7204
|
]
|
7097
7205
|
}
|
7098
7206
|
],
|
@@ -7228,56 +7336,464 @@
|
|
7228
7336
|
"description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
|
7229
7337
|
},
|
7230
7338
|
{
|
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."
|
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
|
+
]
|
7235
7747
|
},
|
7236
7748
|
{
|
7237
|
-
"name": "
|
7238
|
-
"
|
7239
|
-
"
|
7240
|
-
|
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
|
+
]
|
7241
7757
|
},
|
7242
7758
|
{
|
7243
|
-
"name": "
|
7244
|
-
"
|
7245
|
-
"
|
7246
|
-
|
7759
|
+
"name": "show_filter",
|
7760
|
+
"description": "Whether or not to show the filter input.",
|
7761
|
+
"parameters": [
|
7762
|
+
|
7763
|
+
],
|
7764
|
+
"return_types": [
|
7765
|
+
"Boolean"
|
7766
|
+
]
|
7247
7767
|
},
|
7248
7768
|
{
|
7249
|
-
"name": "
|
7250
|
-
"
|
7251
|
-
"
|
7252
|
-
"description": "Create a prompt option with blank value and the text asking user to select something."
|
7253
|
-
}
|
7254
|
-
],
|
7255
|
-
"slots": [
|
7769
|
+
"name": "show_filter?",
|
7770
|
+
"description": "Whether or not to show the filter input.",
|
7771
|
+
"parameters": [
|
7256
7772
|
|
7257
|
-
|
7258
|
-
|
7773
|
+
],
|
7774
|
+
"return_types": [
|
7775
|
+
"Boolean"
|
7776
|
+
]
|
7777
|
+
},
|
7259
7778
|
{
|
7260
|
-
"name": "
|
7261
|
-
"description": "Adds an
|
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.",
|
7262
7781
|
"parameters": [
|
7263
7782
|
{
|
7264
|
-
"name": "
|
7265
|
-
"type": "
|
7266
|
-
"default": "N/A",
|
7267
|
-
"description": "The user-facing label for the option."
|
7268
|
-
},
|
7269
|
-
{
|
7270
|
-
"name": "value",
|
7271
|
-
"type": "String",
|
7783
|
+
"name": "system_arguments",
|
7784
|
+
"type": "Hash",
|
7272
7785
|
"default": "N/A",
|
7273
|
-
"description": "The
|
7786
|
+
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `item` slot."
|
7274
7787
|
}
|
7788
|
+
],
|
7789
|
+
"return_types": [
|
7790
|
+
|
7275
7791
|
]
|
7276
7792
|
}
|
7277
7793
|
],
|
7278
7794
|
"previews": [
|
7279
7795
|
{
|
7280
|
-
"preview_path": "primer/alpha/
|
7796
|
+
"preview_path": "primer/alpha/select_panel/playground",
|
7281
7797
|
"name": "playground",
|
7282
7798
|
"snapshot": "false",
|
7283
7799
|
"skip_rules": {
|
@@ -7290,9 +7806,9 @@
|
|
7290
7806
|
}
|
7291
7807
|
},
|
7292
7808
|
{
|
7293
|
-
"preview_path": "primer/alpha/
|
7809
|
+
"preview_path": "primer/alpha/select_panel/default",
|
7294
7810
|
"name": "default",
|
7295
|
-
"snapshot": "
|
7811
|
+
"snapshot": "interactive",
|
7296
7812
|
"skip_rules": {
|
7297
7813
|
"wont_fix": [
|
7298
7814
|
"region"
|
@@ -7303,9 +7819,9 @@
|
|
7303
7819
|
}
|
7304
7820
|
},
|
7305
7821
|
{
|
7306
|
-
"preview_path": "primer/alpha/
|
7307
|
-
"name": "
|
7308
|
-
"snapshot": "
|
7822
|
+
"preview_path": "primer/alpha/select_panel/local_fetch",
|
7823
|
+
"name": "local_fetch",
|
7824
|
+
"snapshot": "interactive",
|
7309
7825
|
"skip_rules": {
|
7310
7826
|
"wont_fix": [
|
7311
7827
|
"region"
|
@@ -7316,9 +7832,9 @@
|
|
7316
7832
|
}
|
7317
7833
|
},
|
7318
7834
|
{
|
7319
|
-
"preview_path": "primer/alpha/
|
7320
|
-
"name": "
|
7321
|
-
"snapshot": "
|
7835
|
+
"preview_path": "primer/alpha/select_panel/eventually_local_fetch",
|
7836
|
+
"name": "eventually_local_fetch",
|
7837
|
+
"snapshot": "interactive",
|
7322
7838
|
"skip_rules": {
|
7323
7839
|
"wont_fix": [
|
7324
7840
|
"region"
|
@@ -7329,9 +7845,9 @@
|
|
7329
7845
|
}
|
7330
7846
|
},
|
7331
7847
|
{
|
7332
|
-
"preview_path": "primer/alpha/
|
7333
|
-
"name": "
|
7334
|
-
"snapshot": "
|
7848
|
+
"preview_path": "primer/alpha/select_panel/remote_fetch",
|
7849
|
+
"name": "remote_fetch",
|
7850
|
+
"snapshot": "interactive",
|
7335
7851
|
"skip_rules": {
|
7336
7852
|
"wont_fix": [
|
7337
7853
|
"region"
|
@@ -7342,9 +7858,9 @@
|
|
7342
7858
|
}
|
7343
7859
|
},
|
7344
7860
|
{
|
7345
|
-
"preview_path": "primer/alpha/
|
7346
|
-
"name": "
|
7347
|
-
"snapshot": "
|
7861
|
+
"preview_path": "primer/alpha/select_panel/local_fetch_no_results",
|
7862
|
+
"name": "local_fetch_no_results",
|
7863
|
+
"snapshot": "interactive",
|
7348
7864
|
"skip_rules": {
|
7349
7865
|
"wont_fix": [
|
7350
7866
|
"region"
|
@@ -7355,9 +7871,9 @@
|
|
7355
7871
|
}
|
7356
7872
|
},
|
7357
7873
|
{
|
7358
|
-
"preview_path": "primer/alpha/
|
7359
|
-
"name": "
|
7360
|
-
"snapshot": "
|
7874
|
+
"preview_path": "primer/alpha/select_panel/eventually_local_fetch_no_results",
|
7875
|
+
"name": "eventually_local_fetch_no_results",
|
7876
|
+
"snapshot": "interactive",
|
7361
7877
|
"skip_rules": {
|
7362
7878
|
"wont_fix": [
|
7363
7879
|
"region"
|
@@ -7368,9 +7884,9 @@
|
|
7368
7884
|
}
|
7369
7885
|
},
|
7370
7886
|
{
|
7371
|
-
"preview_path": "primer/alpha/
|
7372
|
-
"name": "
|
7373
|
-
"snapshot": "
|
7887
|
+
"preview_path": "primer/alpha/select_panel/remote_fetch_no_results",
|
7888
|
+
"name": "remote_fetch_no_results",
|
7889
|
+
"snapshot": "interactive",
|
7374
7890
|
"skip_rules": {
|
7375
7891
|
"wont_fix": [
|
7376
7892
|
"region"
|
@@ -7381,9 +7897,152 @@
|
|
7381
7897
|
}
|
7382
7898
|
},
|
7383
7899
|
{
|
7384
|
-
"preview_path": "primer/alpha/
|
7385
|
-
"name": "
|
7386
|
-
"snapshot": "
|
7900
|
+
"preview_path": "primer/alpha/select_panel/single_select",
|
7901
|
+
"name": "single_select",
|
7902
|
+
"snapshot": "interactive",
|
7903
|
+
"skip_rules": {
|
7904
|
+
"wont_fix": [
|
7905
|
+
"region"
|
7906
|
+
],
|
7907
|
+
"will_fix": [
|
7908
|
+
"color-contrast"
|
7909
|
+
]
|
7910
|
+
}
|
7911
|
+
},
|
7912
|
+
{
|
7913
|
+
"preview_path": "primer/alpha/select_panel/multiselect",
|
7914
|
+
"name": "multiselect",
|
7915
|
+
"snapshot": "interactive",
|
7916
|
+
"skip_rules": {
|
7917
|
+
"wont_fix": [
|
7918
|
+
"region"
|
7919
|
+
],
|
7920
|
+
"will_fix": [
|
7921
|
+
"color-contrast"
|
7922
|
+
]
|
7923
|
+
}
|
7924
|
+
},
|
7925
|
+
{
|
7926
|
+
"preview_path": "primer/alpha/select_panel/with_dynamic_label",
|
7927
|
+
"name": "with_dynamic_label",
|
7928
|
+
"snapshot": "interactive",
|
7929
|
+
"skip_rules": {
|
7930
|
+
"wont_fix": [
|
7931
|
+
"region"
|
7932
|
+
],
|
7933
|
+
"will_fix": [
|
7934
|
+
"color-contrast"
|
7935
|
+
]
|
7936
|
+
}
|
7937
|
+
},
|
7938
|
+
{
|
7939
|
+
"preview_path": "primer/alpha/select_panel/with_dynamic_label_and_aria_prefix",
|
7940
|
+
"name": "with_dynamic_label_and_aria_prefix",
|
7941
|
+
"snapshot": "interactive",
|
7942
|
+
"skip_rules": {
|
7943
|
+
"wont_fix": [
|
7944
|
+
"region"
|
7945
|
+
],
|
7946
|
+
"will_fix": [
|
7947
|
+
"color-contrast"
|
7948
|
+
]
|
7949
|
+
}
|
7950
|
+
},
|
7951
|
+
{
|
7952
|
+
"preview_path": "primer/alpha/select_panel/footer_buttons",
|
7953
|
+
"name": "footer_buttons",
|
7954
|
+
"snapshot": "interactive",
|
7955
|
+
"skip_rules": {
|
7956
|
+
"wont_fix": [
|
7957
|
+
"region"
|
7958
|
+
],
|
7959
|
+
"will_fix": [
|
7960
|
+
"color-contrast"
|
7961
|
+
]
|
7962
|
+
}
|
7963
|
+
},
|
7964
|
+
{
|
7965
|
+
"preview_path": "primer/alpha/select_panel/with_avatar_items",
|
7966
|
+
"name": "with_avatar_items",
|
7967
|
+
"snapshot": "interactive",
|
7968
|
+
"skip_rules": {
|
7969
|
+
"wont_fix": [
|
7970
|
+
"region"
|
7971
|
+
],
|
7972
|
+
"will_fix": [
|
7973
|
+
"color-contrast"
|
7974
|
+
]
|
7975
|
+
}
|
7976
|
+
},
|
7977
|
+
{
|
7978
|
+
"preview_path": "primer/alpha/select_panel/with_leading_icons",
|
7979
|
+
"name": "with_leading_icons",
|
7980
|
+
"snapshot": "interactive",
|
7981
|
+
"skip_rules": {
|
7982
|
+
"wont_fix": [
|
7983
|
+
"region"
|
7984
|
+
],
|
7985
|
+
"will_fix": [
|
7986
|
+
"color-contrast"
|
7987
|
+
]
|
7988
|
+
}
|
7989
|
+
},
|
7990
|
+
{
|
7991
|
+
"preview_path": "primer/alpha/select_panel/with_trailing_icons",
|
7992
|
+
"name": "with_trailing_icons",
|
7993
|
+
"snapshot": "interactive",
|
7994
|
+
"skip_rules": {
|
7995
|
+
"wont_fix": [
|
7996
|
+
"region"
|
7997
|
+
],
|
7998
|
+
"will_fix": [
|
7999
|
+
"color-contrast"
|
8000
|
+
]
|
8001
|
+
}
|
8002
|
+
},
|
8003
|
+
{
|
8004
|
+
"preview_path": "primer/alpha/select_panel/with_subtitle",
|
8005
|
+
"name": "with_subtitle",
|
8006
|
+
"snapshot": "interactive",
|
8007
|
+
"skip_rules": {
|
8008
|
+
"wont_fix": [
|
8009
|
+
"region"
|
8010
|
+
],
|
8011
|
+
"will_fix": [
|
8012
|
+
"color-contrast"
|
8013
|
+
]
|
8014
|
+
}
|
8015
|
+
},
|
8016
|
+
{
|
8017
|
+
"preview_path": "primer/alpha/select_panel/remote_fetch_initial_failure",
|
8018
|
+
"name": "remote_fetch_initial_failure",
|
8019
|
+
"snapshot": "interactive",
|
8020
|
+
"skip_rules": {
|
8021
|
+
"wont_fix": [
|
8022
|
+
"region"
|
8023
|
+
],
|
8024
|
+
"will_fix": [
|
8025
|
+
"color-contrast"
|
8026
|
+
]
|
8027
|
+
}
|
8028
|
+
},
|
8029
|
+
{
|
8030
|
+
"preview_path": "primer/alpha/select_panel/remote_fetch_filter_failure",
|
8031
|
+
"name": "remote_fetch_filter_failure",
|
8032
|
+
"snapshot": "interactive",
|
8033
|
+
"skip_rules": {
|
8034
|
+
"wont_fix": [
|
8035
|
+
"region"
|
8036
|
+
],
|
8037
|
+
"will_fix": [
|
8038
|
+
"color-contrast"
|
8039
|
+
]
|
8040
|
+
}
|
8041
|
+
},
|
8042
|
+
{
|
8043
|
+
"preview_path": "primer/alpha/select_panel/eventually_local_fetch_initial_failure",
|
8044
|
+
"name": "eventually_local_fetch_initial_failure",
|
8045
|
+
"snapshot": "interactive",
|
7387
8046
|
"skip_rules": {
|
7388
8047
|
"wont_fix": [
|
7389
8048
|
"region"
|
@@ -8813,6 +9472,9 @@
|
|
8813
9472
|
"description": "Returns the value of attribute id.",
|
8814
9473
|
"parameters": [
|
8815
9474
|
|
9475
|
+
],
|
9476
|
+
"return_types": [
|
9477
|
+
|
8816
9478
|
]
|
8817
9479
|
}
|
8818
9480
|
],
|
@@ -10304,6 +10966,9 @@
|
|
10304
10966
|
"description": "Returns the value of attribute disabled.",
|
10305
10967
|
"parameters": [
|
10306
10968
|
|
10969
|
+
],
|
10970
|
+
"return_types": [
|
10971
|
+
|
10307
10972
|
]
|
10308
10973
|
},
|
10309
10974
|
{
|
@@ -10311,6 +10976,9 @@
|
|
10311
10976
|
"description": "Returns the value of attribute disabled.",
|
10312
10977
|
"parameters": [
|
10313
10978
|
|
10979
|
+
],
|
10980
|
+
"return_types": [
|
10981
|
+
|
10314
10982
|
]
|
10315
10983
|
}
|
10316
10984
|
],
|
@@ -10883,6 +11551,9 @@
|
|
10883
11551
|
"description": "Returns the value of attribute id.",
|
10884
11552
|
"parameters": [
|
10885
11553
|
|
11554
|
+
],
|
11555
|
+
"return_types": [
|
11556
|
+
|
10886
11557
|
]
|
10887
11558
|
}
|
10888
11559
|
],
|
@@ -11032,6 +11703,9 @@
|
|
11032
11703
|
"description": "Returns the value of attribute selected.",
|
11033
11704
|
"parameters": [
|
11034
11705
|
|
11706
|
+
],
|
11707
|
+
"return_types": [
|
11708
|
+
|
11035
11709
|
]
|
11036
11710
|
},
|
11037
11711
|
{
|
@@ -11044,6 +11718,9 @@
|
|
11044
11718
|
"default": "N/A",
|
11045
11719
|
"description": "the value to set the attribute selected to."
|
11046
11720
|
}
|
11721
|
+
],
|
11722
|
+
"return_types": [
|
11723
|
+
|
11047
11724
|
]
|
11048
11725
|
},
|
11049
11726
|
{
|
@@ -11051,6 +11728,9 @@
|
|
11051
11728
|
"description": "Returns the value of attribute href.",
|
11052
11729
|
"parameters": [
|
11053
11730
|
|
11731
|
+
],
|
11732
|
+
"return_types": [
|
11733
|
+
|
11054
11734
|
]
|
11055
11735
|
},
|
11056
11736
|
{
|
@@ -11063,6 +11743,9 @@
|
|
11063
11743
|
"default": "N/A",
|
11064
11744
|
"description": "the value to set the attribute href to."
|
11065
11745
|
}
|
11746
|
+
],
|
11747
|
+
"return_types": [
|
11748
|
+
|
11066
11749
|
]
|
11067
11750
|
}
|
11068
11751
|
],
|
@@ -11547,6 +12230,9 @@
|
|
11547
12230
|
"default": "N/A",
|
11548
12231
|
"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."
|
11549
12232
|
}
|
12233
|
+
],
|
12234
|
+
"return_types": [
|
12235
|
+
|
11550
12236
|
]
|
11551
12237
|
},
|
11552
12238
|
{
|
@@ -11559,6 +12245,9 @@
|
|
11559
12245
|
"default": "N/A",
|
11560
12246
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::ButtonGroup::MenuButton{{/link_to_component}}."
|
11561
12247
|
}
|
12248
|
+
],
|
12249
|
+
"return_types": [
|
12250
|
+
|
11562
12251
|
]
|
11563
12252
|
},
|
11564
12253
|
{
|
@@ -11571,6 +12260,9 @@
|
|
11571
12260
|
"default": "N/A",
|
11572
12261
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::ClipboardCopyButton{{/link_to_component}}."
|
11573
12262
|
}
|
12263
|
+
],
|
12264
|
+
"return_types": [
|
12265
|
+
|
11574
12266
|
]
|
11575
12267
|
}
|
11576
12268
|
],
|
@@ -12370,6 +13062,9 @@
|
|
12370
13062
|
"description": "Returns the value of attribute disabled.",
|
12371
13063
|
"parameters": [
|
12372
13064
|
|
13065
|
+
],
|
13066
|
+
"return_types": [
|
13067
|
+
|
12373
13068
|
]
|
12374
13069
|
},
|
12375
13070
|
{
|
@@ -12377,6 +13072,9 @@
|
|
12377
13072
|
"description": "Returns the value of attribute disabled.",
|
12378
13073
|
"parameters": [
|
12379
13074
|
|
13075
|
+
],
|
13076
|
+
"return_types": [
|
13077
|
+
|
12380
13078
|
]
|
12381
13079
|
}
|
12382
13080
|
],
|
@@ -13427,6 +14125,9 @@
|
|
13427
14125
|
"default": "N/A",
|
13428
14126
|
"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."
|
13429
14127
|
}
|
14128
|
+
],
|
14129
|
+
"return_types": [
|
14130
|
+
|
13430
14131
|
]
|
13431
14132
|
},
|
13432
14133
|
{
|
@@ -13475,6 +14176,9 @@
|
|
13475
14176
|
"default": "N/A",
|
13476
14177
|
"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."
|
13477
14178
|
}
|
14179
|
+
],
|
14180
|
+
"return_types": [
|
14181
|
+
|
13478
14182
|
]
|
13479
14183
|
},
|
13480
14184
|
{
|
@@ -13487,6 +14191,9 @@
|
|
13487
14191
|
"default": "N/A",
|
13488
14192
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Group{{/link_to_component}}."
|
13489
14193
|
}
|
14194
|
+
],
|
14195
|
+
"return_types": [
|
14196
|
+
|
13490
14197
|
]
|
13491
14198
|
},
|
13492
14199
|
{
|
@@ -13499,6 +14206,9 @@
|
|
13499
14206
|
"default": "N/A",
|
13500
14207
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Divider{{/link_to_component}}."
|
13501
14208
|
}
|
14209
|
+
],
|
14210
|
+
"return_types": [
|
14211
|
+
|
13502
14212
|
]
|
13503
14213
|
},
|
13504
14214
|
{
|
@@ -13517,6 +14227,9 @@
|
|
13517
14227
|
"default": "N/A",
|
13518
14228
|
"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."
|
13519
14229
|
}
|
14230
|
+
],
|
14231
|
+
"return_types": [
|
14232
|
+
|
13520
14233
|
]
|
13521
14234
|
},
|
13522
14235
|
{
|
@@ -13565,6 +14278,9 @@
|
|
13565
14278
|
"default": "N/A",
|
13566
14279
|
"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."
|
13567
14280
|
}
|
14281
|
+
],
|
14282
|
+
"return_types": [
|
14283
|
+
|
13568
14284
|
]
|
13569
14285
|
},
|
13570
14286
|
{
|
@@ -13572,6 +14288,9 @@
|
|
13572
14288
|
"description": "Lists that contain top-level items (i.e. items outside of a group) should be wrapped in a <ul>",
|
13573
14289
|
"parameters": [
|
13574
14290
|
|
14291
|
+
],
|
14292
|
+
"return_types": [
|
14293
|
+
"Boolean"
|
13575
14294
|
]
|
13576
14295
|
}
|
13577
14296
|
],
|
@@ -13756,6 +14475,9 @@
|
|
13756
14475
|
"description": "Returns the value of attribute title.",
|
13757
14476
|
"parameters": [
|
13758
14477
|
|
14478
|
+
],
|
14479
|
+
"return_types": [
|
14480
|
+
|
13759
14481
|
]
|
13760
14482
|
},
|
13761
14483
|
{
|
@@ -13763,6 +14485,9 @@
|
|
13763
14485
|
"description": "Returns the value of attribute id.",
|
13764
14486
|
"parameters": [
|
13765
14487
|
|
14488
|
+
],
|
14489
|
+
"return_types": [
|
14490
|
+
|
13766
14491
|
]
|
13767
14492
|
},
|
13768
14493
|
{
|
@@ -13770,6 +14495,9 @@
|
|
13770
14495
|
"description": "Returns the value of attribute heading_level.",
|
13771
14496
|
"parameters": [
|
13772
14497
|
|
14498
|
+
],
|
14499
|
+
"return_types": [
|
14500
|
+
|
13773
14501
|
]
|
13774
14502
|
},
|
13775
14503
|
{
|
@@ -13777,6 +14505,9 @@
|
|
13777
14505
|
"description": "Returns the value of attribute system_arguments.",
|
13778
14506
|
"parameters": [
|
13779
14507
|
|
14508
|
+
],
|
14509
|
+
"return_types": [
|
14510
|
+
|
13780
14511
|
]
|
13781
14512
|
}
|
13782
14513
|
],
|
@@ -13903,6 +14634,9 @@
|
|
13903
14634
|
"description": "Returns the value of attribute selected_by_ids.",
|
13904
14635
|
"parameters": [
|
13905
14636
|
|
14637
|
+
],
|
14638
|
+
"return_types": [
|
14639
|
+
|
13906
14640
|
]
|
13907
14641
|
},
|
13908
14642
|
{
|
@@ -13910,6 +14644,9 @@
|
|
13910
14644
|
"description": "Returns the value of attribute sub_item.",
|
13911
14645
|
"parameters": [
|
13912
14646
|
|
14647
|
+
],
|
14648
|
+
"return_types": [
|
14649
|
+
|
13913
14650
|
]
|
13914
14651
|
},
|
13915
14652
|
{
|
@@ -13917,6 +14654,9 @@
|
|
13917
14654
|
"description": "Returns the value of attribute sub_item.\nWhether or not this item is nested under a parent item.",
|
13918
14655
|
"parameters": [
|
13919
14656
|
|
14657
|
+
],
|
14658
|
+
"return_types": [
|
14659
|
+
"Boolean"
|
13920
14660
|
]
|
13921
14661
|
},
|
13922
14662
|
{
|
@@ -13924,6 +14664,9 @@
|
|
13924
14664
|
"description": "Cause this item to show its list of sub items when rendered.",
|
13925
14665
|
"parameters": [
|
13926
14666
|
|
14667
|
+
],
|
14668
|
+
"return_types": [
|
14669
|
+
|
13927
14670
|
]
|
13928
14671
|
},
|
13929
14672
|
{
|
@@ -13931,6 +14674,9 @@
|
|
13931
14674
|
"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.",
|
13932
14675
|
"parameters": [
|
13933
14676
|
|
14677
|
+
],
|
14678
|
+
"return_types": [
|
14679
|
+
"Boolean"
|
13934
14680
|
]
|
13935
14681
|
}
|
13936
14682
|
],
|
@@ -14076,6 +14822,9 @@
|
|
14076
14822
|
"description": "Cause this group to show its list of sub items when rendered.\n:nocov:",
|
14077
14823
|
"parameters": [
|
14078
14824
|
|
14825
|
+
],
|
14826
|
+
"return_types": [
|
14827
|
+
|
14079
14828
|
]
|
14080
14829
|
}
|
14081
14830
|
],
|
@@ -15829,6 +16578,9 @@
|
|
15829
16578
|
"description": "remove alias when all buttons are migrated to new slot names",
|
15830
16579
|
"parameters": [
|
15831
16580
|
|
16581
|
+
],
|
16582
|
+
"return_types": [
|
16583
|
+
|
15832
16584
|
]
|
15833
16585
|
},
|
15834
16586
|
{
|
@@ -15836,6 +16588,9 @@
|
|
15836
16588
|
"description": "remove alias when all buttons are migrated to new slot names",
|
15837
16589
|
"parameters": [
|
15838
16590
|
|
16591
|
+
],
|
16592
|
+
"return_types": [
|
16593
|
+
|
15839
16594
|
]
|
15840
16595
|
}
|
15841
16596
|
],
|