openproject-primer_view_components 0.37.1 → 0.39.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +22 -0
- data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +0 -9
- data/app/assets/javascripts/app/components/primer/alpha/select_panel_element.d.ts +64 -0
- data/app/assets/javascripts/app/components/primer/aria_live.d.ts +8 -0
- data/app/assets/javascripts/app/components/primer/primer.d.ts +4 -0
- data/app/assets/javascripts/app/components/primer/shared_events.d.ts +9 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +1 -0
- data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +0 -9
- data/app/components/primer/alpha/action_menu/action_menu_element.ts +0 -11
- data/app/components/primer/alpha/action_menu.rb +13 -6
- data/app/components/primer/alpha/select_panel.html.erb +100 -0
- data/app/components/primer/alpha/select_panel.rb +486 -0
- data/app/components/primer/alpha/select_panel_element.d.ts +64 -0
- data/app/components/primer/alpha/select_panel_element.js +927 -0
- data/app/components/primer/alpha/select_panel_element.ts +1049 -0
- data/app/components/primer/aria_live.d.ts +8 -0
- data/app/components/primer/aria_live.js +38 -0
- data/app/components/primer/aria_live.ts +41 -0
- data/app/components/primer/base_component.rb +1 -1
- data/app/components/primer/primer.d.ts +4 -0
- data/app/components/primer/primer.js +4 -0
- data/app/components/primer/primer.ts +4 -0
- data/app/components/primer/shared_events.d.ts +9 -0
- data/app/components/primer/shared_events.js +1 -0
- data/app/components/primer/shared_events.ts +10 -0
- data/app/forms/example_toggle_switch_form/example_field_caption.html.erb +1 -1
- data/lib/primer/forms/toggle_switch.html.erb +1 -2
- data/lib/primer/static/generate_info_arch.rb +3 -2
- data/lib/primer/view_components/version.rb +2 -2
- data/lib/primer/yard/component_manifest.rb +2 -0
- data/previews/primer/alpha/select_panel_preview/_interaction_subject_js.html.erb +25 -0
- data/previews/primer/alpha/select_panel_preview/eventually_local_fetch.html.erb +16 -0
- data/previews/primer/alpha/select_panel_preview/eventually_local_fetch_initial_failure.html.erb +12 -0
- data/previews/primer/alpha/select_panel_preview/eventually_local_fetch_no_results.html.erb +16 -0
- data/previews/primer/alpha/select_panel_preview/footer_buttons.html.erb +23 -0
- data/previews/primer/alpha/select_panel_preview/local_fetch.html.erb +19 -0
- data/previews/primer/alpha/select_panel_preview/local_fetch_no_results.html.erb +15 -0
- data/previews/primer/alpha/select_panel_preview/multiselect.html.erb +17 -0
- data/previews/primer/alpha/select_panel_preview/multiselect_form.html.erb +31 -0
- data/previews/primer/alpha/select_panel_preview/playground.html.erb +23 -0
- data/previews/primer/alpha/select_panel_preview/remote_fetch.html.erb +16 -0
- data/previews/primer/alpha/select_panel_preview/remote_fetch_filter_failure.html.erb +13 -0
- data/previews/primer/alpha/select_panel_preview/remote_fetch_initial_failure.html.erb +12 -0
- data/previews/primer/alpha/select_panel_preview/remote_fetch_no_results.html.erb +16 -0
- data/previews/primer/alpha/select_panel_preview/single_select.html.erb +20 -0
- data/previews/primer/alpha/select_panel_preview/single_select_form.html.erb +33 -0
- data/previews/primer/alpha/select_panel_preview/with_avatar_items.html.erb +19 -0
- data/previews/primer/alpha/select_panel_preview/with_dynamic_label.html.erb +23 -0
- data/previews/primer/alpha/select_panel_preview/with_dynamic_label_and_aria_prefix.html.erb +24 -0
- data/previews/primer/alpha/select_panel_preview/with_leading_icons.html.erb +31 -0
- data/previews/primer/alpha/select_panel_preview/with_subtitle.html.erb +25 -0
- data/previews/primer/alpha/select_panel_preview/with_trailing_icons.html.erb +19 -0
- data/previews/primer/alpha/select_panel_preview.rb +239 -0
- data/static/arguments.json +140 -0
- data/static/audited_at.json +2 -0
- data/static/constants.json +18 -0
- data/static/info_arch.json +949 -96
- data/static/previews.json +294 -0
- data/static/statuses.json +2 -0
- metadata +41 -4
data/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
|
],
|
@@ -7216,70 +7324,653 @@
|
|
7216
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."
|
7217
7325
|
},
|
7218
7326
|
{
|
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\"`."
|
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 # perhaps 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. Each list item must also have a value specified in\n`content_arguments: { data: { value: } }`.\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, content_arguments: { 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* `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
|
+
"name": "system_arguments",
|
7636
|
+
"type": "Hash",
|
7637
|
+
"default": "N/A",
|
7638
|
+
"description": "{{link_to_system_arguments_docs}}"
|
7639
|
+
}
|
7640
|
+
],
|
7641
|
+
"slots": [
|
7642
|
+
{
|
7643
|
+
"name": "footer",
|
7644
|
+
"description": "Renders content in a footer region below the list of items.",
|
7645
|
+
"parameters": [
|
7646
|
+
{
|
7647
|
+
"name": "system_arguments",
|
7648
|
+
"type": "Hash",
|
7649
|
+
"default": "N/A",
|
7650
|
+
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Dialog::Footer{{/link_to_component}}."
|
7651
|
+
}
|
7652
|
+
]
|
7653
|
+
},
|
7654
|
+
{
|
7655
|
+
"name": "subtitle",
|
7656
|
+
"description": "Renders content underneath the title at the top of the panel.",
|
7657
|
+
"parameters": [
|
7658
|
+
{
|
7659
|
+
"name": "system_arguments",
|
7660
|
+
"type": "Hash",
|
7661
|
+
"default": "N/A",
|
7662
|
+
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Dialog::Header{{/link_to_component}}'s `subtitle` slot."
|
7663
|
+
}
|
7664
|
+
]
|
7665
|
+
},
|
7666
|
+
{
|
7667
|
+
"name": "show_button",
|
7668
|
+
"description": "Adds a show button (i.e. a button) that will open the panel when clicked.",
|
7669
|
+
"parameters": [
|
7670
|
+
{
|
7671
|
+
"name": "system_arguments",
|
7672
|
+
"type": "Hash",
|
7673
|
+
"default": "N/A",
|
7674
|
+
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}."
|
7675
|
+
}
|
7676
|
+
]
|
7677
|
+
},
|
7678
|
+
{
|
7679
|
+
"name": "preload_error_content",
|
7680
|
+
"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).",
|
7681
|
+
"parameters": [
|
7682
|
+
|
7683
|
+
]
|
7684
|
+
},
|
7685
|
+
{
|
7686
|
+
"name": "error_content",
|
7687
|
+
"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).",
|
7688
|
+
"parameters": [
|
7689
|
+
|
7690
|
+
]
|
7691
|
+
}
|
7692
|
+
],
|
7693
|
+
"methods": [
|
7694
|
+
{
|
7695
|
+
"name": "src",
|
7696
|
+
"description": "The URL to fetch search results from.",
|
7697
|
+
"parameters": [
|
7698
|
+
|
7699
|
+
],
|
7700
|
+
"return_types": [
|
7701
|
+
"String"
|
7702
|
+
]
|
7703
|
+
},
|
7704
|
+
{
|
7705
|
+
"name": "panel_id",
|
7706
|
+
"description": "The unique ID of the panel.",
|
7707
|
+
"parameters": [
|
7708
|
+
|
7709
|
+
],
|
7710
|
+
"return_types": [
|
7711
|
+
"String"
|
7712
|
+
]
|
7713
|
+
},
|
7714
|
+
{
|
7715
|
+
"name": "body_id",
|
7716
|
+
"description": "The unique ID of the panel body.",
|
7717
|
+
"parameters": [
|
7718
|
+
|
7719
|
+
],
|
7720
|
+
"return_types": [
|
7721
|
+
"String"
|
7722
|
+
]
|
7723
|
+
},
|
7724
|
+
{
|
7725
|
+
"name": "select_variant",
|
7726
|
+
"description": "One of `:multiple`, `:none`, or `:single`.",
|
7727
|
+
"parameters": [
|
7728
|
+
|
7729
|
+
],
|
7730
|
+
"return_types": [
|
7731
|
+
"Symbol"
|
7732
|
+
]
|
7733
|
+
},
|
7734
|
+
{
|
7735
|
+
"name": "fetch_strategy",
|
7736
|
+
"description": "One of `:eventually_local`, `:local`, or `:remote`.",
|
7737
|
+
"parameters": [
|
7738
|
+
|
7739
|
+
],
|
7740
|
+
"return_types": [
|
7741
|
+
"Symbol"
|
7742
|
+
]
|
7743
|
+
},
|
7744
|
+
{
|
7745
|
+
"name": "preload",
|
7746
|
+
"description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened.",
|
7747
|
+
"parameters": [
|
7748
|
+
|
7749
|
+
],
|
7750
|
+
"return_types": [
|
7751
|
+
"Boolean"
|
7752
|
+
]
|
7753
|
+
},
|
7754
|
+
{
|
7755
|
+
"name": "preload?",
|
7756
|
+
"description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened.",
|
7757
|
+
"parameters": [
|
7758
|
+
|
7759
|
+
],
|
7760
|
+
"return_types": [
|
7761
|
+
"Boolean"
|
7762
|
+
]
|
7763
|
+
},
|
7764
|
+
{
|
7765
|
+
"name": "show_filter",
|
7766
|
+
"description": "Whether or not to show the filter input.",
|
7767
|
+
"parameters": [
|
7768
|
+
|
7769
|
+
],
|
7770
|
+
"return_types": [
|
7771
|
+
"Boolean"
|
7772
|
+
]
|
7773
|
+
},
|
7774
|
+
{
|
7775
|
+
"name": "show_filter?",
|
7776
|
+
"description": "Whether or not to show the filter input.",
|
7777
|
+
"parameters": [
|
7778
|
+
|
7779
|
+
],
|
7780
|
+
"return_types": [
|
7781
|
+
"Boolean"
|
7782
|
+
]
|
7783
|
+
},
|
7784
|
+
{
|
7785
|
+
"name": "with_item",
|
7786
|
+
"description": "Adds an item to the list. Note that this method only has an effect for the local fetch strategy.",
|
7787
|
+
"parameters": [
|
7788
|
+
{
|
7789
|
+
"name": "system_arguments",
|
7790
|
+
"type": "Hash",
|
7791
|
+
"default": "N/A",
|
7792
|
+
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `item` slot."
|
7793
|
+
}
|
7794
|
+
],
|
7795
|
+
"return_types": [
|
7796
|
+
|
7797
|
+
]
|
7798
|
+
}
|
7799
|
+
],
|
7800
|
+
"previews": [
|
7801
|
+
{
|
7802
|
+
"preview_path": "primer/alpha/select_panel/playground",
|
7803
|
+
"name": "playground",
|
7804
|
+
"snapshot": "false",
|
7805
|
+
"skip_rules": {
|
7806
|
+
"wont_fix": [
|
7807
|
+
"region"
|
7808
|
+
],
|
7809
|
+
"will_fix": [
|
7810
|
+
"color-contrast"
|
7811
|
+
]
|
7812
|
+
}
|
7813
|
+
},
|
7814
|
+
{
|
7815
|
+
"preview_path": "primer/alpha/select_panel/default",
|
7816
|
+
"name": "default",
|
7817
|
+
"snapshot": "interactive",
|
7818
|
+
"skip_rules": {
|
7819
|
+
"wont_fix": [
|
7820
|
+
"region"
|
7821
|
+
],
|
7822
|
+
"will_fix": [
|
7823
|
+
"color-contrast"
|
7824
|
+
]
|
7825
|
+
}
|
7826
|
+
},
|
7827
|
+
{
|
7828
|
+
"preview_path": "primer/alpha/select_panel/local_fetch",
|
7829
|
+
"name": "local_fetch",
|
7830
|
+
"snapshot": "interactive",
|
7831
|
+
"skip_rules": {
|
7832
|
+
"wont_fix": [
|
7833
|
+
"region"
|
7834
|
+
],
|
7835
|
+
"will_fix": [
|
7836
|
+
"color-contrast"
|
7837
|
+
]
|
7838
|
+
}
|
7839
|
+
},
|
7840
|
+
{
|
7841
|
+
"preview_path": "primer/alpha/select_panel/eventually_local_fetch",
|
7842
|
+
"name": "eventually_local_fetch",
|
7843
|
+
"snapshot": "interactive",
|
7844
|
+
"skip_rules": {
|
7845
|
+
"wont_fix": [
|
7846
|
+
"region"
|
7847
|
+
],
|
7848
|
+
"will_fix": [
|
7849
|
+
"color-contrast"
|
7850
|
+
]
|
7851
|
+
}
|
7852
|
+
},
|
7853
|
+
{
|
7854
|
+
"preview_path": "primer/alpha/select_panel/remote_fetch",
|
7855
|
+
"name": "remote_fetch",
|
7856
|
+
"snapshot": "interactive",
|
7857
|
+
"skip_rules": {
|
7858
|
+
"wont_fix": [
|
7859
|
+
"region"
|
7860
|
+
],
|
7861
|
+
"will_fix": [
|
7862
|
+
"color-contrast"
|
7863
|
+
]
|
7864
|
+
}
|
7865
|
+
},
|
7866
|
+
{
|
7867
|
+
"preview_path": "primer/alpha/select_panel/local_fetch_no_results",
|
7868
|
+
"name": "local_fetch_no_results",
|
7869
|
+
"snapshot": "interactive",
|
7870
|
+
"skip_rules": {
|
7871
|
+
"wont_fix": [
|
7872
|
+
"region"
|
7873
|
+
],
|
7874
|
+
"will_fix": [
|
7875
|
+
"color-contrast"
|
7876
|
+
]
|
7877
|
+
}
|
7878
|
+
},
|
7879
|
+
{
|
7880
|
+
"preview_path": "primer/alpha/select_panel/eventually_local_fetch_no_results",
|
7881
|
+
"name": "eventually_local_fetch_no_results",
|
7882
|
+
"snapshot": "interactive",
|
7883
|
+
"skip_rules": {
|
7884
|
+
"wont_fix": [
|
7885
|
+
"region"
|
7886
|
+
],
|
7887
|
+
"will_fix": [
|
7888
|
+
"color-contrast"
|
7889
|
+
]
|
7890
|
+
}
|
7223
7891
|
},
|
7224
7892
|
{
|
7225
|
-
"
|
7226
|
-
"
|
7227
|
-
"
|
7228
|
-
"
|
7893
|
+
"preview_path": "primer/alpha/select_panel/remote_fetch_no_results",
|
7894
|
+
"name": "remote_fetch_no_results",
|
7895
|
+
"snapshot": "interactive",
|
7896
|
+
"skip_rules": {
|
7897
|
+
"wont_fix": [
|
7898
|
+
"region"
|
7899
|
+
],
|
7900
|
+
"will_fix": [
|
7901
|
+
"color-contrast"
|
7902
|
+
]
|
7903
|
+
}
|
7229
7904
|
},
|
7230
7905
|
{
|
7231
|
-
"
|
7232
|
-
"
|
7233
|
-
"
|
7234
|
-
"
|
7906
|
+
"preview_path": "primer/alpha/select_panel/single_select",
|
7907
|
+
"name": "single_select",
|
7908
|
+
"snapshot": "interactive",
|
7909
|
+
"skip_rules": {
|
7910
|
+
"wont_fix": [
|
7911
|
+
"region"
|
7912
|
+
],
|
7913
|
+
"will_fix": [
|
7914
|
+
"color-contrast"
|
7915
|
+
]
|
7916
|
+
}
|
7235
7917
|
},
|
7236
7918
|
{
|
7237
|
-
"
|
7238
|
-
"
|
7239
|
-
"
|
7240
|
-
"
|
7919
|
+
"preview_path": "primer/alpha/select_panel/multiselect",
|
7920
|
+
"name": "multiselect",
|
7921
|
+
"snapshot": "interactive",
|
7922
|
+
"skip_rules": {
|
7923
|
+
"wont_fix": [
|
7924
|
+
"region"
|
7925
|
+
],
|
7926
|
+
"will_fix": [
|
7927
|
+
"color-contrast"
|
7928
|
+
]
|
7929
|
+
}
|
7241
7930
|
},
|
7242
7931
|
{
|
7243
|
-
"
|
7244
|
-
"
|
7245
|
-
"
|
7246
|
-
"
|
7932
|
+
"preview_path": "primer/alpha/select_panel/with_dynamic_label",
|
7933
|
+
"name": "with_dynamic_label",
|
7934
|
+
"snapshot": "interactive",
|
7935
|
+
"skip_rules": {
|
7936
|
+
"wont_fix": [
|
7937
|
+
"region"
|
7938
|
+
],
|
7939
|
+
"will_fix": [
|
7940
|
+
"color-contrast"
|
7941
|
+
]
|
7942
|
+
}
|
7247
7943
|
},
|
7248
7944
|
{
|
7249
|
-
"
|
7250
|
-
"
|
7251
|
-
"
|
7252
|
-
"
|
7253
|
-
|
7254
|
-
|
7255
|
-
|
7256
|
-
|
7257
|
-
|
7258
|
-
|
7945
|
+
"preview_path": "primer/alpha/select_panel/with_dynamic_label_and_aria_prefix",
|
7946
|
+
"name": "with_dynamic_label_and_aria_prefix",
|
7947
|
+
"snapshot": "interactive",
|
7948
|
+
"skip_rules": {
|
7949
|
+
"wont_fix": [
|
7950
|
+
"region"
|
7951
|
+
],
|
7952
|
+
"will_fix": [
|
7953
|
+
"color-contrast"
|
7954
|
+
]
|
7955
|
+
}
|
7956
|
+
},
|
7259
7957
|
{
|
7260
|
-
"
|
7261
|
-
"
|
7262
|
-
"
|
7263
|
-
|
7264
|
-
|
7265
|
-
"
|
7266
|
-
|
7267
|
-
|
7268
|
-
|
7269
|
-
|
7270
|
-
|
7271
|
-
|
7272
|
-
"default": "N/A",
|
7273
|
-
"description": "The value sent to the server on form submission."
|
7274
|
-
}
|
7275
|
-
]
|
7276
|
-
}
|
7277
|
-
],
|
7278
|
-
"previews": [
|
7958
|
+
"preview_path": "primer/alpha/select_panel/footer_buttons",
|
7959
|
+
"name": "footer_buttons",
|
7960
|
+
"snapshot": "interactive",
|
7961
|
+
"skip_rules": {
|
7962
|
+
"wont_fix": [
|
7963
|
+
"region"
|
7964
|
+
],
|
7965
|
+
"will_fix": [
|
7966
|
+
"color-contrast"
|
7967
|
+
]
|
7968
|
+
}
|
7969
|
+
},
|
7279
7970
|
{
|
7280
|
-
"preview_path": "primer/alpha/
|
7281
|
-
"name": "
|
7282
|
-
"snapshot": "
|
7971
|
+
"preview_path": "primer/alpha/select_panel/with_avatar_items",
|
7972
|
+
"name": "with_avatar_items",
|
7973
|
+
"snapshot": "interactive",
|
7283
7974
|
"skip_rules": {
|
7284
7975
|
"wont_fix": [
|
7285
7976
|
"region"
|
@@ -7290,9 +7981,9 @@
|
|
7290
7981
|
}
|
7291
7982
|
},
|
7292
7983
|
{
|
7293
|
-
"preview_path": "primer/alpha/
|
7294
|
-
"name": "
|
7295
|
-
"snapshot": "
|
7984
|
+
"preview_path": "primer/alpha/select_panel/with_leading_icons",
|
7985
|
+
"name": "with_leading_icons",
|
7986
|
+
"snapshot": "interactive",
|
7296
7987
|
"skip_rules": {
|
7297
7988
|
"wont_fix": [
|
7298
7989
|
"region"
|
@@ -7303,9 +7994,9 @@
|
|
7303
7994
|
}
|
7304
7995
|
},
|
7305
7996
|
{
|
7306
|
-
"preview_path": "primer/alpha/
|
7307
|
-
"name": "
|
7308
|
-
"snapshot": "
|
7997
|
+
"preview_path": "primer/alpha/select_panel/with_trailing_icons",
|
7998
|
+
"name": "with_trailing_icons",
|
7999
|
+
"snapshot": "interactive",
|
7309
8000
|
"skip_rules": {
|
7310
8001
|
"wont_fix": [
|
7311
8002
|
"region"
|
@@ -7316,9 +8007,9 @@
|
|
7316
8007
|
}
|
7317
8008
|
},
|
7318
8009
|
{
|
7319
|
-
"preview_path": "primer/alpha/
|
7320
|
-
"name": "
|
7321
|
-
"snapshot": "
|
8010
|
+
"preview_path": "primer/alpha/select_panel/with_subtitle",
|
8011
|
+
"name": "with_subtitle",
|
8012
|
+
"snapshot": "interactive",
|
7322
8013
|
"skip_rules": {
|
7323
8014
|
"wont_fix": [
|
7324
8015
|
"region"
|
@@ -7329,9 +8020,9 @@
|
|
7329
8020
|
}
|
7330
8021
|
},
|
7331
8022
|
{
|
7332
|
-
"preview_path": "primer/alpha/
|
7333
|
-
"name": "
|
7334
|
-
"snapshot": "
|
8023
|
+
"preview_path": "primer/alpha/select_panel/remote_fetch_initial_failure",
|
8024
|
+
"name": "remote_fetch_initial_failure",
|
8025
|
+
"snapshot": "interactive",
|
7335
8026
|
"skip_rules": {
|
7336
8027
|
"wont_fix": [
|
7337
8028
|
"region"
|
@@ -7342,9 +8033,9 @@
|
|
7342
8033
|
}
|
7343
8034
|
},
|
7344
8035
|
{
|
7345
|
-
"preview_path": "primer/alpha/
|
7346
|
-
"name": "
|
7347
|
-
"snapshot": "
|
8036
|
+
"preview_path": "primer/alpha/select_panel/remote_fetch_filter_failure",
|
8037
|
+
"name": "remote_fetch_filter_failure",
|
8038
|
+
"snapshot": "interactive",
|
7348
8039
|
"skip_rules": {
|
7349
8040
|
"wont_fix": [
|
7350
8041
|
"region"
|
@@ -7355,9 +8046,9 @@
|
|
7355
8046
|
}
|
7356
8047
|
},
|
7357
8048
|
{
|
7358
|
-
"preview_path": "primer/alpha/
|
7359
|
-
"name": "
|
7360
|
-
"snapshot": "
|
8049
|
+
"preview_path": "primer/alpha/select_panel/eventually_local_fetch_initial_failure",
|
8050
|
+
"name": "eventually_local_fetch_initial_failure",
|
8051
|
+
"snapshot": "interactive",
|
7361
8052
|
"skip_rules": {
|
7362
8053
|
"wont_fix": [
|
7363
8054
|
"region"
|
@@ -7368,9 +8059,9 @@
|
|
7368
8059
|
}
|
7369
8060
|
},
|
7370
8061
|
{
|
7371
|
-
"preview_path": "primer/alpha/
|
7372
|
-
"name": "
|
7373
|
-
"snapshot": "
|
8062
|
+
"preview_path": "primer/alpha/select_panel/single_select_form",
|
8063
|
+
"name": "single_select_form",
|
8064
|
+
"snapshot": "interactive",
|
7374
8065
|
"skip_rules": {
|
7375
8066
|
"wont_fix": [
|
7376
8067
|
"region"
|
@@ -7381,9 +8072,9 @@
|
|
7381
8072
|
}
|
7382
8073
|
},
|
7383
8074
|
{
|
7384
|
-
"preview_path": "primer/alpha/
|
7385
|
-
"name": "
|
7386
|
-
"snapshot": "
|
8075
|
+
"preview_path": "primer/alpha/select_panel/multiselect_form",
|
8076
|
+
"name": "multiselect_form",
|
8077
|
+
"snapshot": "interactive",
|
7387
8078
|
"skip_rules": {
|
7388
8079
|
"wont_fix": [
|
7389
8080
|
"region"
|
@@ -7395,7 +8086,64 @@
|
|
7395
8086
|
}
|
7396
8087
|
],
|
7397
8088
|
"subcomponents": [
|
8089
|
+
{
|
8090
|
+
"fully_qualified_name": "Primer::Alpha::SelectPanel::ItemList",
|
8091
|
+
"description": "The component that should be used to render the list of items in the body of a SelectPanel.",
|
8092
|
+
"accessibility_docs": null,
|
8093
|
+
"is_form_component": false,
|
8094
|
+
"is_published": true,
|
8095
|
+
"requires_js": true,
|
8096
|
+
"component": "SelectPanel::ItemList",
|
8097
|
+
"status": "alpha",
|
8098
|
+
"a11y_reviewed": true,
|
8099
|
+
"short_name": "SelectPanelItemList",
|
8100
|
+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/select_panel/item_list.rb",
|
8101
|
+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/select_panel/item_list/default/",
|
8102
|
+
"parameters": [
|
8103
|
+
{
|
8104
|
+
"name": "system_arguments",
|
8105
|
+
"type": "Hash",
|
8106
|
+
"default": "N/A",
|
8107
|
+
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}."
|
8108
|
+
}
|
8109
|
+
],
|
8110
|
+
"slots": [
|
8111
|
+
{
|
8112
|
+
"name": "heading",
|
8113
|
+
"description": "Heading text rendered above the list of items.",
|
8114
|
+
"parameters": [
|
8115
|
+
{
|
8116
|
+
"name": "component_klass",
|
8117
|
+
"type": "Class",
|
8118
|
+
"default": "N/A",
|
8119
|
+
"description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
|
8120
|
+
},
|
8121
|
+
{
|
8122
|
+
"name": "system_arguments",
|
8123
|
+
"type": "Hash",
|
8124
|
+
"default": "N/A",
|
8125
|
+
"description": "The arguments accepted by `component_klass`."
|
8126
|
+
}
|
8127
|
+
]
|
8128
|
+
},
|
8129
|
+
{
|
8130
|
+
"name": "items",
|
8131
|
+
"description": "Items. Items can be individual items, avatar items, or dividers. See the documentation for `#with_item`, `#with_divider`, and `#with_avatar_item` respectively for more information.",
|
8132
|
+
"parameters": [
|
7398
8133
|
|
8134
|
+
]
|
8135
|
+
}
|
8136
|
+
],
|
8137
|
+
"methods": [
|
8138
|
+
|
8139
|
+
],
|
8140
|
+
"previews": [
|
8141
|
+
|
8142
|
+
],
|
8143
|
+
"subcomponents": [
|
8144
|
+
|
8145
|
+
]
|
8146
|
+
}
|
7399
8147
|
]
|
7400
8148
|
},
|
7401
8149
|
{
|
@@ -8813,6 +9561,9 @@
|
|
8813
9561
|
"description": "Returns the value of attribute id.",
|
8814
9562
|
"parameters": [
|
8815
9563
|
|
9564
|
+
],
|
9565
|
+
"return_types": [
|
9566
|
+
|
8816
9567
|
]
|
8817
9568
|
}
|
8818
9569
|
],
|
@@ -10304,6 +11055,9 @@
|
|
10304
11055
|
"description": "Returns the value of attribute disabled.",
|
10305
11056
|
"parameters": [
|
10306
11057
|
|
11058
|
+
],
|
11059
|
+
"return_types": [
|
11060
|
+
|
10307
11061
|
]
|
10308
11062
|
},
|
10309
11063
|
{
|
@@ -10311,6 +11065,9 @@
|
|
10311
11065
|
"description": "Returns the value of attribute disabled.",
|
10312
11066
|
"parameters": [
|
10313
11067
|
|
11068
|
+
],
|
11069
|
+
"return_types": [
|
11070
|
+
|
10314
11071
|
]
|
10315
11072
|
}
|
10316
11073
|
],
|
@@ -10883,6 +11640,9 @@
|
|
10883
11640
|
"description": "Returns the value of attribute id.",
|
10884
11641
|
"parameters": [
|
10885
11642
|
|
11643
|
+
],
|
11644
|
+
"return_types": [
|
11645
|
+
|
10886
11646
|
]
|
10887
11647
|
}
|
10888
11648
|
],
|
@@ -11032,6 +11792,9 @@
|
|
11032
11792
|
"description": "Returns the value of attribute selected.",
|
11033
11793
|
"parameters": [
|
11034
11794
|
|
11795
|
+
],
|
11796
|
+
"return_types": [
|
11797
|
+
|
11035
11798
|
]
|
11036
11799
|
},
|
11037
11800
|
{
|
@@ -11044,6 +11807,9 @@
|
|
11044
11807
|
"default": "N/A",
|
11045
11808
|
"description": "the value to set the attribute selected to."
|
11046
11809
|
}
|
11810
|
+
],
|
11811
|
+
"return_types": [
|
11812
|
+
|
11047
11813
|
]
|
11048
11814
|
},
|
11049
11815
|
{
|
@@ -11051,6 +11817,9 @@
|
|
11051
11817
|
"description": "Returns the value of attribute href.",
|
11052
11818
|
"parameters": [
|
11053
11819
|
|
11820
|
+
],
|
11821
|
+
"return_types": [
|
11822
|
+
|
11054
11823
|
]
|
11055
11824
|
},
|
11056
11825
|
{
|
@@ -11063,6 +11832,9 @@
|
|
11063
11832
|
"default": "N/A",
|
11064
11833
|
"description": "the value to set the attribute href to."
|
11065
11834
|
}
|
11835
|
+
],
|
11836
|
+
"return_types": [
|
11837
|
+
|
11066
11838
|
]
|
11067
11839
|
}
|
11068
11840
|
],
|
@@ -11547,6 +12319,9 @@
|
|
11547
12319
|
"default": "N/A",
|
11548
12320
|
"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
12321
|
}
|
12322
|
+
],
|
12323
|
+
"return_types": [
|
12324
|
+
|
11550
12325
|
]
|
11551
12326
|
},
|
11552
12327
|
{
|
@@ -11559,6 +12334,9 @@
|
|
11559
12334
|
"default": "N/A",
|
11560
12335
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::ButtonGroup::MenuButton{{/link_to_component}}."
|
11561
12336
|
}
|
12337
|
+
],
|
12338
|
+
"return_types": [
|
12339
|
+
|
11562
12340
|
]
|
11563
12341
|
},
|
11564
12342
|
{
|
@@ -11571,6 +12349,9 @@
|
|
11571
12349
|
"default": "N/A",
|
11572
12350
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::ClipboardCopyButton{{/link_to_component}}."
|
11573
12351
|
}
|
12352
|
+
],
|
12353
|
+
"return_types": [
|
12354
|
+
|
11574
12355
|
]
|
11575
12356
|
}
|
11576
12357
|
],
|
@@ -12370,6 +13151,9 @@
|
|
12370
13151
|
"description": "Returns the value of attribute disabled.",
|
12371
13152
|
"parameters": [
|
12372
13153
|
|
13154
|
+
],
|
13155
|
+
"return_types": [
|
13156
|
+
|
12373
13157
|
]
|
12374
13158
|
},
|
12375
13159
|
{
|
@@ -12377,6 +13161,9 @@
|
|
12377
13161
|
"description": "Returns the value of attribute disabled.",
|
12378
13162
|
"parameters": [
|
12379
13163
|
|
13164
|
+
],
|
13165
|
+
"return_types": [
|
13166
|
+
|
12380
13167
|
]
|
12381
13168
|
}
|
12382
13169
|
],
|
@@ -13427,6 +14214,9 @@
|
|
13427
14214
|
"default": "N/A",
|
13428
14215
|
"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
14216
|
}
|
14217
|
+
],
|
14218
|
+
"return_types": [
|
14219
|
+
|
13430
14220
|
]
|
13431
14221
|
},
|
13432
14222
|
{
|
@@ -13475,6 +14265,9 @@
|
|
13475
14265
|
"default": "N/A",
|
13476
14266
|
"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
14267
|
}
|
14268
|
+
],
|
14269
|
+
"return_types": [
|
14270
|
+
|
13478
14271
|
]
|
13479
14272
|
},
|
13480
14273
|
{
|
@@ -13487,6 +14280,9 @@
|
|
13487
14280
|
"default": "N/A",
|
13488
14281
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Group{{/link_to_component}}."
|
13489
14282
|
}
|
14283
|
+
],
|
14284
|
+
"return_types": [
|
14285
|
+
|
13490
14286
|
]
|
13491
14287
|
},
|
13492
14288
|
{
|
@@ -13499,6 +14295,9 @@
|
|
13499
14295
|
"default": "N/A",
|
13500
14296
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Divider{{/link_to_component}}."
|
13501
14297
|
}
|
14298
|
+
],
|
14299
|
+
"return_types": [
|
14300
|
+
|
13502
14301
|
]
|
13503
14302
|
},
|
13504
14303
|
{
|
@@ -13517,6 +14316,9 @@
|
|
13517
14316
|
"default": "N/A",
|
13518
14317
|
"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
14318
|
}
|
14319
|
+
],
|
14320
|
+
"return_types": [
|
14321
|
+
|
13520
14322
|
]
|
13521
14323
|
},
|
13522
14324
|
{
|
@@ -13565,6 +14367,9 @@
|
|
13565
14367
|
"default": "N/A",
|
13566
14368
|
"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
14369
|
}
|
14370
|
+
],
|
14371
|
+
"return_types": [
|
14372
|
+
|
13568
14373
|
]
|
13569
14374
|
},
|
13570
14375
|
{
|
@@ -13572,6 +14377,9 @@
|
|
13572
14377
|
"description": "Lists that contain top-level items (i.e. items outside of a group) should be wrapped in a <ul>",
|
13573
14378
|
"parameters": [
|
13574
14379
|
|
14380
|
+
],
|
14381
|
+
"return_types": [
|
14382
|
+
"Boolean"
|
13575
14383
|
]
|
13576
14384
|
}
|
13577
14385
|
],
|
@@ -13756,6 +14564,9 @@
|
|
13756
14564
|
"description": "Returns the value of attribute title.",
|
13757
14565
|
"parameters": [
|
13758
14566
|
|
14567
|
+
],
|
14568
|
+
"return_types": [
|
14569
|
+
|
13759
14570
|
]
|
13760
14571
|
},
|
13761
14572
|
{
|
@@ -13763,6 +14574,9 @@
|
|
13763
14574
|
"description": "Returns the value of attribute id.",
|
13764
14575
|
"parameters": [
|
13765
14576
|
|
14577
|
+
],
|
14578
|
+
"return_types": [
|
14579
|
+
|
13766
14580
|
]
|
13767
14581
|
},
|
13768
14582
|
{
|
@@ -13770,6 +14584,9 @@
|
|
13770
14584
|
"description": "Returns the value of attribute heading_level.",
|
13771
14585
|
"parameters": [
|
13772
14586
|
|
14587
|
+
],
|
14588
|
+
"return_types": [
|
14589
|
+
|
13773
14590
|
]
|
13774
14591
|
},
|
13775
14592
|
{
|
@@ -13777,6 +14594,9 @@
|
|
13777
14594
|
"description": "Returns the value of attribute system_arguments.",
|
13778
14595
|
"parameters": [
|
13779
14596
|
|
14597
|
+
],
|
14598
|
+
"return_types": [
|
14599
|
+
|
13780
14600
|
]
|
13781
14601
|
}
|
13782
14602
|
],
|
@@ -13903,6 +14723,9 @@
|
|
13903
14723
|
"description": "Returns the value of attribute selected_by_ids.",
|
13904
14724
|
"parameters": [
|
13905
14725
|
|
14726
|
+
],
|
14727
|
+
"return_types": [
|
14728
|
+
|
13906
14729
|
]
|
13907
14730
|
},
|
13908
14731
|
{
|
@@ -13910,6 +14733,9 @@
|
|
13910
14733
|
"description": "Returns the value of attribute sub_item.",
|
13911
14734
|
"parameters": [
|
13912
14735
|
|
14736
|
+
],
|
14737
|
+
"return_types": [
|
14738
|
+
|
13913
14739
|
]
|
13914
14740
|
},
|
13915
14741
|
{
|
@@ -13917,6 +14743,9 @@
|
|
13917
14743
|
"description": "Returns the value of attribute sub_item.\nWhether or not this item is nested under a parent item.",
|
13918
14744
|
"parameters": [
|
13919
14745
|
|
14746
|
+
],
|
14747
|
+
"return_types": [
|
14748
|
+
"Boolean"
|
13920
14749
|
]
|
13921
14750
|
},
|
13922
14751
|
{
|
@@ -13924,6 +14753,9 @@
|
|
13924
14753
|
"description": "Cause this item to show its list of sub items when rendered.",
|
13925
14754
|
"parameters": [
|
13926
14755
|
|
14756
|
+
],
|
14757
|
+
"return_types": [
|
14758
|
+
|
13927
14759
|
]
|
13928
14760
|
},
|
13929
14761
|
{
|
@@ -13931,6 +14763,9 @@
|
|
13931
14763
|
"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
14764
|
"parameters": [
|
13933
14765
|
|
14766
|
+
],
|
14767
|
+
"return_types": [
|
14768
|
+
"Boolean"
|
13934
14769
|
]
|
13935
14770
|
}
|
13936
14771
|
],
|
@@ -14076,6 +14911,9 @@
|
|
14076
14911
|
"description": "Cause this group to show its list of sub items when rendered.\n:nocov:",
|
14077
14912
|
"parameters": [
|
14078
14913
|
|
14914
|
+
],
|
14915
|
+
"return_types": [
|
14916
|
+
|
14079
14917
|
]
|
14080
14918
|
}
|
14081
14919
|
],
|
@@ -15829,6 +16667,9 @@
|
|
15829
16667
|
"description": "remove alias when all buttons are migrated to new slot names",
|
15830
16668
|
"parameters": [
|
15831
16669
|
|
16670
|
+
],
|
16671
|
+
"return_types": [
|
16672
|
+
|
15832
16673
|
]
|
15833
16674
|
},
|
15834
16675
|
{
|
@@ -15836,6 +16677,9 @@
|
|
15836
16677
|
"description": "remove alias when all buttons are migrated to new slot names",
|
15837
16678
|
"parameters": [
|
15838
16679
|
|
16680
|
+
],
|
16681
|
+
"return_types": [
|
16682
|
+
|
15839
16683
|
]
|
15840
16684
|
}
|
15841
16685
|
],
|
@@ -16531,6 +17375,9 @@
|
|
16531
17375
|
"description": "Returns the value of attribute css_class.",
|
16532
17376
|
"parameters": [
|
16533
17377
|
|
17378
|
+
],
|
17379
|
+
"return_types": [
|
17380
|
+
|
16534
17381
|
]
|
16535
17382
|
}
|
16536
17383
|
],
|
@@ -16873,6 +17720,9 @@
|
|
16873
17720
|
"description": "transform anchor tag strings to {href, text} objects\ne.g \"\\u003ca href=\\\"/admin\\\"\\u003eAdministration\\u003c/a\\u003e\"",
|
16874
17721
|
"parameters": [
|
16875
17722
|
|
17723
|
+
],
|
17724
|
+
"return_types": [
|
17725
|
+
|
16876
17726
|
]
|
16877
17727
|
},
|
16878
17728
|
{
|
@@ -16880,6 +17730,9 @@
|
|
16880
17730
|
"description": "Check if the item is an anchor tag string e.g \"\\u003ca href=\\\"/admin\\\"\\u003eAdministration\\u003c/a\\u003e\"",
|
16881
17731
|
"parameters": [
|
16882
17732
|
|
17733
|
+
],
|
17734
|
+
"return_types": [
|
17735
|
+
"Boolean"
|
16883
17736
|
]
|
16884
17737
|
}
|
16885
17738
|
],
|
@@ -17645,7 +18498,7 @@
|
|
17645
18498
|
{
|
17646
18499
|
"component": "BaseComponent",
|
17647
18500
|
"fully_qualified_name": "Primer::BaseComponent",
|
17648
|
-
"description_md": "All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) used by [Primer React](https://primer.style/
|
18501
|
+
"description_md": "All Primer ViewComponents accept a standard set of options called system arguments, mimicking the [styled-system API](https://styled-system.com/table) previously used by [Primer React](https://primer.style/guides/react/system-props).\n\nUnder the hood, system arguments are [mapped](https://github.com/primer/view_components/blob/main/lib/primer/classify.rb) to Primer CSS classes, with any remaining options passed to Rails' [`content_tag`](https://api.rubyonrails.org/classes/ActionView/Helpers/TagHelper.html#method-i-content_tag).\n\n## Responsive values\n\nTo apply different values across responsive breakpoints, pass an array with up to five values in the order `[default, small, medium, large, xlarge]`. To skip a breakpoint, pass `nil`.\n\nFor example:\n\n```erb\n<%= render Primer::Beta::Heading.new(mt: [0, nil, nil, 4, 2]) do %>\n Hello world\n<% end %>\n```\n\nRenders:\n\n```html\n<h1 class=\"mt-0 mt-lg-4 mt-xl-2\">Hello world</h1>\n```",
|
17649
18502
|
"args_md": "## HTML attributes\n\nUse system arguments to add HTML attributes to elements. For the most part, system arguments map 1:1 to\nHTML attributes. For example, `render(Component.new(title: \"Foo\"))` will result in eg. `<div title=\"foo\">`.\nHowever, ViewComponents applies special handling to certain system arguments. See the table below for details.\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `aria` | `Hash` | Aria attributes: `aria: { label: \"foo\" }` renders `aria-label='foo'`. |\n| `data` | `Hash` | Data attributes: `data: { foo: :bar }` renders `data-foo='bar'`. |\n\n## Utility classes\n\nViewComponents provides a convenient way to add Primer CSS utility classes to HTML elements. Use the shorthand\ndocumented in the tables below instead of adding CSS classes directly.\n\n### Animation\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `animation` | Symbol | One of `:fade_down`, `:fade_in`, `:fade_out`, `:fade_up`, `:grow_x`, `:hover_grow`, `:pulse`, `:pulse_in`, `:rotate`, `:scale_in`, or `:shrink_x`. |\n\n### Border\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `border_bottom` | Integer | Set to `0` to remove the bottom border. |\n| `border_left` | Integer | Set to `0` to remove the left border. |\n| `border_radius` | Integer | One of `0`, `1`, `2`, or `3`. |\n| `border_right` | Integer | Set to `0` to remove the right border. |\n| `border_top` | Integer | Set to `0` to remove the top border. |\n| `border` | Symbol | One of `:bottom`, `:left`, `:right`, `:top`, `:x`, `:y`, or `true`. |\n| `box_shadow` | Boolean, Symbol | Box shadow. One of `:extra_large`, `:large`, `:medium`, `:none`, or `true`. |\n\n### Color\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bg` | Symbol | Background color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:emphasis`, `:inset`, `:open`, `:open_emphasis`, `:overlay`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, `:success_emphasis`, or `:transparent`. |\n| `border_color` | Symbol | Border color. One of `:accent`, `:accent_emphasis`, `:attention`, `:attention_emphasis`, `:closed`, `:closed_emphasis`, `:danger`, `:danger_emphasis`, `:default`, `:done`, `:done_emphasis`, `:muted`, `:open`, `:open_emphasis`, `:severe`, `:severe_emphasis`, `:sponsors`, `:sponsors_emphasis`, `:subtle`, `:success`, or `:success_emphasis`. |\n| `color` | Symbol | Text color. One of `:accent`, `:attention`, `:closed`, `:danger`, `:default`, `:done`, `:inherit`, `:muted`, `:on_emphasis`, `:open`, `:severe`, `:sponsors`, `:subtle`, or `:success`. |\n\n### Flex\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `align_items` | Symbol | One of `:baseline`, `:center`, `:flex_end`, `:flex_start`, or `:stretch`. |\n| `align_self` | Symbol | One of `:auto`, `:baseline`, `:center`, `:end`, `:start`, or `:stretch`. |\n| `direction` | Symbol | One of `:column`, `:column_reverse`, `:row`, or `:row_reverse`. |\n| `flex` | Integer, Symbol | One of `1` or `:auto`. |\n| `flex_grow` | Integer | To enable, set to `0`. |\n| `flex_shrink` | Integer | To enable, set to `0`. |\n| `flex_wrap` | Symbol | One of `:nowrap`, `:reverse`, or `:wrap`. |\n| `justify_content` | Symbol | One of `:center`, `:flex_end`, `:flex_start`, `:space_around`, or `:space_between`. |\n\n### Grid\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `clearfix` | Boolean | Whether to assign the `clearfix` class. |\n| `col` | Integer | Number of columns. One of `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `container` | Symbol | Size of the container. One of `:lg`, `:md`, `:sm`, or `:xl`. |\n\n### Layout\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `display` | Symbol | One of `:block`, `:flex`, `:inline`, `:inline_block`, `:inline_flex`, `:none`, `:table`, or `:table_cell`. |\n| `w` | Symbol | Sets the element's width. One of `:auto`, `:fit`, or `:full`. |\n| `h` | Symbol | Sets the element's height. One of `:fit` or `:full`. |\n| `hide` | Symbol | Hide the element at a specific breakpoint. One of `:lg`, `:md`, `:sm`, `:whenNarrow`, `:whenRegular`, `:whenWide`, or `:xl`. |\n| `visibility` | Symbol | Visibility. One of `:hidden` or `:visible`. |\n| `vertical_align` | Symbol | One of `:baseline`, `:bottom`, `:middle`, `:text_bottom`, `:text_top`, or `:top`. |\n\n### Position\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `bottom` | Boolean | If `false`, sets `bottom: 0`. |\n| `float` | Symbol | One of `:left`, `:none`, or `:right`. |\n| `left` | Boolean | If `false`, sets `left: 0`. |\n| `position` | Symbol | One of `:absolute`, `:fixed`, `:relative`, `:static`, or `:sticky`. |\n| `right` | Boolean | If `false`, sets `right: 0`. |\n| `top` | Boolean | If `false`, sets `top: 0`. |\n\n### Spacing\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `m` | Integer | Margin. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mb` | Integer | Margin bottom. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `ml` | Integer | Margin left. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mr` | Integer | Margin right. One of `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `mt` | Integer | Margin top. One of `-12`, `-11`, `-10`, `-9`, `-8`, `-7`, `-6`, `-5`, `-4`, `-3`, `-2`, `-1`, `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, `12`, or `:auto`. |\n| `mx` | Integer | Horizontal margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:auto`. |\n| `my` | Integer | Vertical margins. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `p` | Integer | Padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, or `:responsive`. |\n| `pb` | Integer | Padding bottom. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pl` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pr` | Integer | Padding right. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `pt` | Integer | Padding left. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n| `px` | Integer | Horizontal padding. One of `0`, `1`, `2`, `3`, `4`, `5`, or `6`. |\n| `py` | Integer | Vertical padding. One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `7`, `8`, `9`, `10`, `11`, or `12`. |\n\n### Typography\n\n| Name | Type | Description |\n| :- | :- | :- |\n| `font_family` | Symbol | Font family. One of `:mono`. |\n| `font_size` | String, Integer, Symbol | One of `0`, `1`, `2`, `3`, `4`, `5`, `6`, `00`, `:normal`, or `:small`. |\n| `font_style` | Symbol | Font style. One of `:italic`. |\n| `font_weight` | Symbol | Font weight. One of `:bold`, `:emphasized`, `:light`, or `:normal`. |\n| `text_align` | Symbol | Text alignment. One of `:center`, `:left`, or `:right`. |\n| `text_transform` | Symbol | Text transformation. One of `:capitalize` or `:uppercase`. |\n| `underline` | Boolean | Whether text should be underlined. |\n| `word_break` | Symbol | Whether to break words on line breaks. One of `:break_all` or `:break_word`. |\n\n### Other\n\n| Name | Type | Description |\n| :- | :- | :- |\n| classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |\n| test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |"
|
17650
18503
|
}
|
17651
18504
|
]
|