openproject-primer_view_components 0.37.1 → 0.38.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 +16 -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 +473 -0
- data/app/components/primer/alpha/select_panel_element.d.ts +64 -0
- data/app/components/primer/alpha/select_panel_element.js +924 -0
- data/app/components/primer/alpha/select_panel_element.ts +1045 -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 +19 -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 +118 -0
- data/static/audited_at.json +1 -0
- data/static/constants.json +16 -0
- data/static/info_arch.json +902 -112
- data/static/previews.json +294 -0
- data/static/statuses.json +1 -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
|
],
|
@@ -7192,94 +7300,671 @@
|
|
7192
7300
|
"description": "A string displayed between the caption and the input indicating the input's contents are invalid. This option is, by default, set to the first Rails validation message for the input (assuming the form is associated with a model object). Use `validation_message` to override the default or to provide a validation message in case there is no associated model object."
|
7193
7301
|
},
|
7194
7302
|
{
|
7195
|
-
"name": "label_arguments",
|
7196
|
-
"type": "Hash",
|
7197
|
-
"default": "N/A",
|
7198
|
-
"description": "Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag."
|
7303
|
+
"name": "label_arguments",
|
7304
|
+
"type": "Hash",
|
7305
|
+
"default": "N/A",
|
7306
|
+
"description": "Attributes that will be passed to Rails' `builder.label` method. These can be HTML attributes or any of the other label options Rails supports. They will appear as HTML attributes on the `<label>` tag."
|
7307
|
+
},
|
7308
|
+
{
|
7309
|
+
"name": "scope_name_to_model",
|
7310
|
+
"type": "Boolean",
|
7311
|
+
"default": "N/A",
|
7312
|
+
"description": "Default `true`. When set to `false`, prevents the model name from prefixing the field name. For example, if the field name is `my_field`, Rails will normally emit an HTML name attribute of `model[my_field]`. Setting `scope_name_to_model` to `false` will cause Rails to emit `my_field` instead."
|
7313
|
+
},
|
7314
|
+
{
|
7315
|
+
"name": "scope_id_to_model",
|
7316
|
+
"type": "Boolean",
|
7317
|
+
"default": "N/A",
|
7318
|
+
"description": "Default `true`. When set to `false`, prevents the model name from prefixing the field ID. For example, if the field name is `my_field`, Rails will normally emit an HTML ID attribute of `model_my_field`. Setting `scope_id_to_model` to `false` will cause Rails to emit `my_field` instead."
|
7319
|
+
},
|
7320
|
+
{
|
7321
|
+
"name": "required",
|
7322
|
+
"type": "Boolean",
|
7323
|
+
"default": "N/A",
|
7324
|
+
"description": "Default `false`. When set to `true`, causes an asterisk (*) to appear next to the field's label indicating it is a required field. Note that this option explicitly does _not_ add a `required` HTML attribute. Doing so would enable native browser validations, which are inaccessible and inconsistent with the Primer design system."
|
7325
|
+
},
|
7326
|
+
{
|
7327
|
+
"name": "aria",
|
7328
|
+
"type": "Hash",
|
7329
|
+
"default": "N/A",
|
7330
|
+
"description": "Key/value pairs that represent Aria attributes and their values. Eg. `aria: { current: true }` becomes `aria-current=\"true\"`."
|
7331
|
+
},
|
7332
|
+
{
|
7333
|
+
"name": "data",
|
7334
|
+
"type": "Hash",
|
7335
|
+
"default": "N/A",
|
7336
|
+
"description": "Key/value pairs that represent data attributes and their values. Eg. `data: { foo: \"bar\" }` becomes `data-foo=\"bar\"`."
|
7337
|
+
},
|
7338
|
+
{
|
7339
|
+
"name": "system_arguments",
|
7340
|
+
"type": "Hash",
|
7341
|
+
"default": "N/A",
|
7342
|
+
"description": "A hash of attributes passed to the underlying Rails builder methods. These options may mean something special depending on the type of input, otherwise they are emitted as HTML attributes. See the [Rails documentation](https://guides.rubyonrails.org/form_helpers.html) for more information. In addition, the usual Primer utility arguments are accepted in system arguments. For example, passing `mt: 2` will add the `mt-2` class to the input. See the Primer system arguments docs for details."
|
7343
|
+
},
|
7344
|
+
{
|
7345
|
+
"name": "multiple",
|
7346
|
+
"type": "Boolean",
|
7347
|
+
"default": "N/A",
|
7348
|
+
"description": "If set to true, the selection will allow multiple choices."
|
7349
|
+
},
|
7350
|
+
{
|
7351
|
+
"name": "include_blank",
|
7352
|
+
"type": "Boolean, String",
|
7353
|
+
"default": "N/A",
|
7354
|
+
"description": "If set to true, an empty option will be created. If set to a string, the string will be used as the option's content and the value will be empty."
|
7355
|
+
},
|
7356
|
+
{
|
7357
|
+
"name": "prompt",
|
7358
|
+
"type": "String",
|
7359
|
+
"default": "N/A",
|
7360
|
+
"description": "Create a prompt option with blank value and the text asking user to select something."
|
7361
|
+
}
|
7362
|
+
],
|
7363
|
+
"slots": [
|
7364
|
+
|
7365
|
+
],
|
7366
|
+
"methods": [
|
7367
|
+
{
|
7368
|
+
"name": "option",
|
7369
|
+
"description": "Adds an option to the list.",
|
7370
|
+
"parameters": [
|
7371
|
+
{
|
7372
|
+
"name": "label",
|
7373
|
+
"type": "String",
|
7374
|
+
"default": "N/A",
|
7375
|
+
"description": "The user-facing label for the option."
|
7376
|
+
},
|
7377
|
+
{
|
7378
|
+
"name": "value",
|
7379
|
+
"type": "String",
|
7380
|
+
"default": "N/A",
|
7381
|
+
"description": "The value sent to the server on form submission."
|
7382
|
+
}
|
7383
|
+
],
|
7384
|
+
"return_types": [
|
7385
|
+
|
7386
|
+
]
|
7387
|
+
}
|
7388
|
+
],
|
7389
|
+
"previews": [
|
7390
|
+
{
|
7391
|
+
"preview_path": "primer/alpha/select/playground",
|
7392
|
+
"name": "playground",
|
7393
|
+
"snapshot": "false",
|
7394
|
+
"skip_rules": {
|
7395
|
+
"wont_fix": [
|
7396
|
+
"region"
|
7397
|
+
],
|
7398
|
+
"will_fix": [
|
7399
|
+
"color-contrast"
|
7400
|
+
]
|
7401
|
+
}
|
7402
|
+
},
|
7403
|
+
{
|
7404
|
+
"preview_path": "primer/alpha/select/default",
|
7405
|
+
"name": "default",
|
7406
|
+
"snapshot": "false",
|
7407
|
+
"skip_rules": {
|
7408
|
+
"wont_fix": [
|
7409
|
+
"region"
|
7410
|
+
],
|
7411
|
+
"will_fix": [
|
7412
|
+
"color-contrast"
|
7413
|
+
]
|
7414
|
+
}
|
7415
|
+
},
|
7416
|
+
{
|
7417
|
+
"preview_path": "primer/alpha/select/with_caption",
|
7418
|
+
"name": "with_caption",
|
7419
|
+
"snapshot": "true",
|
7420
|
+
"skip_rules": {
|
7421
|
+
"wont_fix": [
|
7422
|
+
"region"
|
7423
|
+
],
|
7424
|
+
"will_fix": [
|
7425
|
+
"color-contrast"
|
7426
|
+
]
|
7427
|
+
}
|
7428
|
+
},
|
7429
|
+
{
|
7430
|
+
"preview_path": "primer/alpha/select/visually_hide_label",
|
7431
|
+
"name": "visually_hide_label",
|
7432
|
+
"snapshot": "true",
|
7433
|
+
"skip_rules": {
|
7434
|
+
"wont_fix": [
|
7435
|
+
"region"
|
7436
|
+
],
|
7437
|
+
"will_fix": [
|
7438
|
+
"color-contrast"
|
7439
|
+
]
|
7440
|
+
}
|
7441
|
+
},
|
7442
|
+
{
|
7443
|
+
"preview_path": "primer/alpha/select/full_width",
|
7444
|
+
"name": "full_width",
|
7445
|
+
"snapshot": "true",
|
7446
|
+
"skip_rules": {
|
7447
|
+
"wont_fix": [
|
7448
|
+
"region"
|
7449
|
+
],
|
7450
|
+
"will_fix": [
|
7451
|
+
"color-contrast"
|
7452
|
+
]
|
7453
|
+
}
|
7454
|
+
},
|
7455
|
+
{
|
7456
|
+
"preview_path": "primer/alpha/select/not_full_width",
|
7457
|
+
"name": "not_full_width",
|
7458
|
+
"snapshot": "true",
|
7459
|
+
"skip_rules": {
|
7460
|
+
"wont_fix": [
|
7461
|
+
"region"
|
7462
|
+
],
|
7463
|
+
"will_fix": [
|
7464
|
+
"color-contrast"
|
7465
|
+
]
|
7466
|
+
}
|
7467
|
+
},
|
7468
|
+
{
|
7469
|
+
"preview_path": "primer/alpha/select/disabled",
|
7470
|
+
"name": "disabled",
|
7471
|
+
"snapshot": "true",
|
7472
|
+
"skip_rules": {
|
7473
|
+
"wont_fix": [
|
7474
|
+
"region"
|
7475
|
+
],
|
7476
|
+
"will_fix": [
|
7477
|
+
"color-contrast"
|
7478
|
+
]
|
7479
|
+
}
|
7480
|
+
},
|
7481
|
+
{
|
7482
|
+
"preview_path": "primer/alpha/select/invalid",
|
7483
|
+
"name": "invalid",
|
7484
|
+
"snapshot": "true",
|
7485
|
+
"skip_rules": {
|
7486
|
+
"wont_fix": [
|
7487
|
+
"region"
|
7488
|
+
],
|
7489
|
+
"will_fix": [
|
7490
|
+
"color-contrast"
|
7491
|
+
]
|
7492
|
+
}
|
7493
|
+
},
|
7494
|
+
{
|
7495
|
+
"preview_path": "primer/alpha/select/with_validation_message",
|
7496
|
+
"name": "with_validation_message",
|
7497
|
+
"snapshot": "true",
|
7498
|
+
"skip_rules": {
|
7499
|
+
"wont_fix": [
|
7500
|
+
"region"
|
7501
|
+
],
|
7502
|
+
"will_fix": [
|
7503
|
+
"color-contrast"
|
7504
|
+
]
|
7505
|
+
}
|
7506
|
+
}
|
7507
|
+
],
|
7508
|
+
"subcomponents": [
|
7509
|
+
|
7510
|
+
]
|
7511
|
+
},
|
7512
|
+
{
|
7513
|
+
"fully_qualified_name": "Primer::Alpha::SelectPanel",
|
7514
|
+
"description": "Select panels allow for selecting from a large number of options and can be thought of as a more capable\nversion of the traditional HTML `<select>` element.\n\nSelect panels:\n\n1. feature an input field at the top that allows an end user to filter the list of results.\n1. can render their items statically or dynamically by fetching results from the server.\n1. allow selecting a single item or multiple items.\n1. permit leading visuals like Octicons, avatars, and custom SVGs.\n1. can be used as form inputs in Rails forms.\n\n## Static list items\n\nThe Rails `SelectPanel` component allows items to be provided statically or loaded dynamically from the\nserver. Providing items statically is done using a fetch strategy of `:local` in combination with the\n`item` slot:\n\n```erb\n<%= render(Primer::Alpha::SelectPanel.new(fetch_strategy: :local))) do |panel| %>\n <% panel.with_show_button { \"Select item\" } %>\n <% panel.with_item(label: \"Item 1\") %>\n <% panel.with_item(label: \"Item 2\") %>\n<% end %>\n```\n\n## Dynamic list items\n\nList items can also be fetched dynamically from the server and will require creating a Rails controller action\nto respond with the list of items in addition to rendering the `SelectPanel` instance. Render the instance as\nnormal, providing your desired [fetch strategy](#fetch-strategies):\n\n```erb\n<%= render(\n Primer::Alpha::SelectPanel.new(\n fetch_strategy: :remote,\n src: search_items_path # 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
|
+
"slots": [
|
7636
|
+
{
|
7637
|
+
"name": "footer",
|
7638
|
+
"description": "Renders content in a footer region below the list of items.",
|
7639
|
+
"parameters": [
|
7640
|
+
{
|
7641
|
+
"name": "system_arguments",
|
7642
|
+
"type": "Hash",
|
7643
|
+
"default": "N/A",
|
7644
|
+
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Dialog::Footer{{/link_to_component}}."
|
7645
|
+
}
|
7646
|
+
]
|
7647
|
+
},
|
7648
|
+
{
|
7649
|
+
"name": "subtitle",
|
7650
|
+
"description": "Renders content underneath the title at the top of the panel.",
|
7651
|
+
"parameters": [
|
7652
|
+
{
|
7653
|
+
"name": "system_arguments",
|
7654
|
+
"type": "Hash",
|
7655
|
+
"default": "N/A",
|
7656
|
+
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::Dialog::Header{{/link_to_component}}'s `subtitle` slot."
|
7657
|
+
}
|
7658
|
+
]
|
7659
|
+
},
|
7660
|
+
{
|
7661
|
+
"name": "show_button",
|
7662
|
+
"description": "Adds a show button (i.e. a button) that will open the panel when clicked.",
|
7663
|
+
"parameters": [
|
7664
|
+
{
|
7665
|
+
"name": "system_arguments",
|
7666
|
+
"type": "Hash",
|
7667
|
+
"default": "N/A",
|
7668
|
+
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}."
|
7669
|
+
}
|
7670
|
+
]
|
7671
|
+
},
|
7672
|
+
{
|
7673
|
+
"name": "preload_error_content",
|
7674
|
+
"description": "Customizable content for the error message that appears when items are fetched for the first time. This message\nappears in place of the list of items.\nFor more information, see the [documentation regarding SelectPanel error messaging](/components/selectpanel#errorwarning).",
|
7675
|
+
"parameters": [
|
7676
|
+
|
7677
|
+
]
|
7678
|
+
},
|
7679
|
+
{
|
7680
|
+
"name": "error_content",
|
7681
|
+
"description": "Customizable content for the error message that appears when items are fetched as the result of a filter\noperation. This message appears as a banner above the previously fetched list of items.\nFor more information, see the [documentation regarding SelectPanel error messaging](/components/selectpanel#errorwarning).",
|
7682
|
+
"parameters": [
|
7683
|
+
|
7684
|
+
]
|
7685
|
+
}
|
7686
|
+
],
|
7687
|
+
"methods": [
|
7688
|
+
{
|
7689
|
+
"name": "src",
|
7690
|
+
"description": "The URL to fetch search results from.",
|
7691
|
+
"parameters": [
|
7692
|
+
|
7693
|
+
],
|
7694
|
+
"return_types": [
|
7695
|
+
"String"
|
7696
|
+
]
|
7697
|
+
},
|
7698
|
+
{
|
7699
|
+
"name": "panel_id",
|
7700
|
+
"description": "The unique ID of the panel.",
|
7701
|
+
"parameters": [
|
7702
|
+
|
7703
|
+
],
|
7704
|
+
"return_types": [
|
7705
|
+
"String"
|
7706
|
+
]
|
7707
|
+
},
|
7708
|
+
{
|
7709
|
+
"name": "body_id",
|
7710
|
+
"description": "The unique ID of the panel body.",
|
7711
|
+
"parameters": [
|
7712
|
+
|
7713
|
+
],
|
7714
|
+
"return_types": [
|
7715
|
+
"String"
|
7716
|
+
]
|
7717
|
+
},
|
7718
|
+
{
|
7719
|
+
"name": "select_variant",
|
7720
|
+
"description": "One of `:multiple`, `:none`, or `:single`.",
|
7721
|
+
"parameters": [
|
7722
|
+
|
7723
|
+
],
|
7724
|
+
"return_types": [
|
7725
|
+
"Symbol"
|
7726
|
+
]
|
7727
|
+
},
|
7728
|
+
{
|
7729
|
+
"name": "fetch_strategy",
|
7730
|
+
"description": "One of `:eventually_local`, `:local`, or `:remote`.",
|
7731
|
+
"parameters": [
|
7732
|
+
|
7733
|
+
],
|
7734
|
+
"return_types": [
|
7735
|
+
"Symbol"
|
7736
|
+
]
|
7737
|
+
},
|
7738
|
+
{
|
7739
|
+
"name": "preload",
|
7740
|
+
"description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened.",
|
7741
|
+
"parameters": [
|
7742
|
+
|
7743
|
+
],
|
7744
|
+
"return_types": [
|
7745
|
+
"Boolean"
|
7746
|
+
]
|
7747
|
+
},
|
7748
|
+
{
|
7749
|
+
"name": "preload?",
|
7750
|
+
"description": "Whether to preload search results when the page loads. If this option is false, results are loaded when the panel is opened.",
|
7751
|
+
"parameters": [
|
7752
|
+
|
7753
|
+
],
|
7754
|
+
"return_types": [
|
7755
|
+
"Boolean"
|
7756
|
+
]
|
7757
|
+
},
|
7758
|
+
{
|
7759
|
+
"name": "show_filter",
|
7760
|
+
"description": "Whether or not to show the filter input.",
|
7761
|
+
"parameters": [
|
7762
|
+
|
7763
|
+
],
|
7764
|
+
"return_types": [
|
7765
|
+
"Boolean"
|
7766
|
+
]
|
7767
|
+
},
|
7768
|
+
{
|
7769
|
+
"name": "show_filter?",
|
7770
|
+
"description": "Whether or not to show the filter input.",
|
7771
|
+
"parameters": [
|
7772
|
+
|
7773
|
+
],
|
7774
|
+
"return_types": [
|
7775
|
+
"Boolean"
|
7776
|
+
]
|
7777
|
+
},
|
7778
|
+
{
|
7779
|
+
"name": "with_item",
|
7780
|
+
"description": "Adds an item to the list. Note that this method only has an effect for the local fetch strategy.",
|
7781
|
+
"parameters": [
|
7782
|
+
{
|
7783
|
+
"name": "system_arguments",
|
7784
|
+
"type": "Hash",
|
7785
|
+
"default": "N/A",
|
7786
|
+
"description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}'s `item` slot."
|
7787
|
+
}
|
7788
|
+
],
|
7789
|
+
"return_types": [
|
7790
|
+
|
7791
|
+
]
|
7792
|
+
}
|
7793
|
+
],
|
7794
|
+
"previews": [
|
7795
|
+
{
|
7796
|
+
"preview_path": "primer/alpha/select_panel/playground",
|
7797
|
+
"name": "playground",
|
7798
|
+
"snapshot": "false",
|
7799
|
+
"skip_rules": {
|
7800
|
+
"wont_fix": [
|
7801
|
+
"region"
|
7802
|
+
],
|
7803
|
+
"will_fix": [
|
7804
|
+
"color-contrast"
|
7805
|
+
]
|
7806
|
+
}
|
7807
|
+
},
|
7808
|
+
{
|
7809
|
+
"preview_path": "primer/alpha/select_panel/default",
|
7810
|
+
"name": "default",
|
7811
|
+
"snapshot": "interactive",
|
7812
|
+
"skip_rules": {
|
7813
|
+
"wont_fix": [
|
7814
|
+
"region"
|
7815
|
+
],
|
7816
|
+
"will_fix": [
|
7817
|
+
"color-contrast"
|
7818
|
+
]
|
7819
|
+
}
|
7820
|
+
},
|
7821
|
+
{
|
7822
|
+
"preview_path": "primer/alpha/select_panel/local_fetch",
|
7823
|
+
"name": "local_fetch",
|
7824
|
+
"snapshot": "interactive",
|
7825
|
+
"skip_rules": {
|
7826
|
+
"wont_fix": [
|
7827
|
+
"region"
|
7828
|
+
],
|
7829
|
+
"will_fix": [
|
7830
|
+
"color-contrast"
|
7831
|
+
]
|
7832
|
+
}
|
7199
7833
|
},
|
7200
7834
|
{
|
7201
|
-
"
|
7202
|
-
"
|
7203
|
-
"
|
7204
|
-
"
|
7835
|
+
"preview_path": "primer/alpha/select_panel/eventually_local_fetch",
|
7836
|
+
"name": "eventually_local_fetch",
|
7837
|
+
"snapshot": "interactive",
|
7838
|
+
"skip_rules": {
|
7839
|
+
"wont_fix": [
|
7840
|
+
"region"
|
7841
|
+
],
|
7842
|
+
"will_fix": [
|
7843
|
+
"color-contrast"
|
7844
|
+
]
|
7845
|
+
}
|
7205
7846
|
},
|
7206
7847
|
{
|
7207
|
-
"
|
7208
|
-
"
|
7209
|
-
"
|
7210
|
-
"
|
7848
|
+
"preview_path": "primer/alpha/select_panel/remote_fetch",
|
7849
|
+
"name": "remote_fetch",
|
7850
|
+
"snapshot": "interactive",
|
7851
|
+
"skip_rules": {
|
7852
|
+
"wont_fix": [
|
7853
|
+
"region"
|
7854
|
+
],
|
7855
|
+
"will_fix": [
|
7856
|
+
"color-contrast"
|
7857
|
+
]
|
7858
|
+
}
|
7211
7859
|
},
|
7212
7860
|
{
|
7213
|
-
"
|
7214
|
-
"
|
7215
|
-
"
|
7216
|
-
"
|
7861
|
+
"preview_path": "primer/alpha/select_panel/local_fetch_no_results",
|
7862
|
+
"name": "local_fetch_no_results",
|
7863
|
+
"snapshot": "interactive",
|
7864
|
+
"skip_rules": {
|
7865
|
+
"wont_fix": [
|
7866
|
+
"region"
|
7867
|
+
],
|
7868
|
+
"will_fix": [
|
7869
|
+
"color-contrast"
|
7870
|
+
]
|
7871
|
+
}
|
7217
7872
|
},
|
7218
7873
|
{
|
7219
|
-
"
|
7220
|
-
"
|
7221
|
-
"
|
7222
|
-
"
|
7874
|
+
"preview_path": "primer/alpha/select_panel/eventually_local_fetch_no_results",
|
7875
|
+
"name": "eventually_local_fetch_no_results",
|
7876
|
+
"snapshot": "interactive",
|
7877
|
+
"skip_rules": {
|
7878
|
+
"wont_fix": [
|
7879
|
+
"region"
|
7880
|
+
],
|
7881
|
+
"will_fix": [
|
7882
|
+
"color-contrast"
|
7883
|
+
]
|
7884
|
+
}
|
7223
7885
|
},
|
7224
7886
|
{
|
7225
|
-
"
|
7226
|
-
"
|
7227
|
-
"
|
7228
|
-
"
|
7887
|
+
"preview_path": "primer/alpha/select_panel/remote_fetch_no_results",
|
7888
|
+
"name": "remote_fetch_no_results",
|
7889
|
+
"snapshot": "interactive",
|
7890
|
+
"skip_rules": {
|
7891
|
+
"wont_fix": [
|
7892
|
+
"region"
|
7893
|
+
],
|
7894
|
+
"will_fix": [
|
7895
|
+
"color-contrast"
|
7896
|
+
]
|
7897
|
+
}
|
7229
7898
|
},
|
7230
7899
|
{
|
7231
|
-
"
|
7232
|
-
"
|
7233
|
-
"
|
7234
|
-
"
|
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
|
+
}
|
7235
7911
|
},
|
7236
7912
|
{
|
7237
|
-
"
|
7238
|
-
"
|
7239
|
-
"
|
7240
|
-
"
|
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
|
+
}
|
7241
7924
|
},
|
7242
7925
|
{
|
7243
|
-
"
|
7244
|
-
"
|
7245
|
-
"
|
7246
|
-
"
|
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
|
+
}
|
7247
7937
|
},
|
7248
7938
|
{
|
7249
|
-
"
|
7250
|
-
"
|
7251
|
-
"
|
7252
|
-
"
|
7253
|
-
|
7254
|
-
|
7255
|
-
|
7256
|
-
|
7257
|
-
|
7258
|
-
|
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
|
+
},
|
7259
7951
|
{
|
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": [
|
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
|
+
},
|
7279
7964
|
{
|
7280
|
-
"preview_path": "primer/alpha/
|
7281
|
-
"name": "
|
7282
|
-
"snapshot": "
|
7965
|
+
"preview_path": "primer/alpha/select_panel/with_avatar_items",
|
7966
|
+
"name": "with_avatar_items",
|
7967
|
+
"snapshot": "interactive",
|
7283
7968
|
"skip_rules": {
|
7284
7969
|
"wont_fix": [
|
7285
7970
|
"region"
|
@@ -7290,9 +7975,9 @@
|
|
7290
7975
|
}
|
7291
7976
|
},
|
7292
7977
|
{
|
7293
|
-
"preview_path": "primer/alpha/
|
7294
|
-
"name": "
|
7295
|
-
"snapshot": "
|
7978
|
+
"preview_path": "primer/alpha/select_panel/with_leading_icons",
|
7979
|
+
"name": "with_leading_icons",
|
7980
|
+
"snapshot": "interactive",
|
7296
7981
|
"skip_rules": {
|
7297
7982
|
"wont_fix": [
|
7298
7983
|
"region"
|
@@ -7303,9 +7988,9 @@
|
|
7303
7988
|
}
|
7304
7989
|
},
|
7305
7990
|
{
|
7306
|
-
"preview_path": "primer/alpha/
|
7307
|
-
"name": "
|
7308
|
-
"snapshot": "
|
7991
|
+
"preview_path": "primer/alpha/select_panel/with_trailing_icons",
|
7992
|
+
"name": "with_trailing_icons",
|
7993
|
+
"snapshot": "interactive",
|
7309
7994
|
"skip_rules": {
|
7310
7995
|
"wont_fix": [
|
7311
7996
|
"region"
|
@@ -7316,9 +8001,9 @@
|
|
7316
8001
|
}
|
7317
8002
|
},
|
7318
8003
|
{
|
7319
|
-
"preview_path": "primer/alpha/
|
7320
|
-
"name": "
|
7321
|
-
"snapshot": "
|
8004
|
+
"preview_path": "primer/alpha/select_panel/with_subtitle",
|
8005
|
+
"name": "with_subtitle",
|
8006
|
+
"snapshot": "interactive",
|
7322
8007
|
"skip_rules": {
|
7323
8008
|
"wont_fix": [
|
7324
8009
|
"region"
|
@@ -7329,9 +8014,9 @@
|
|
7329
8014
|
}
|
7330
8015
|
},
|
7331
8016
|
{
|
7332
|
-
"preview_path": "primer/alpha/
|
7333
|
-
"name": "
|
7334
|
-
"snapshot": "
|
8017
|
+
"preview_path": "primer/alpha/select_panel/remote_fetch_initial_failure",
|
8018
|
+
"name": "remote_fetch_initial_failure",
|
8019
|
+
"snapshot": "interactive",
|
7335
8020
|
"skip_rules": {
|
7336
8021
|
"wont_fix": [
|
7337
8022
|
"region"
|
@@ -7342,9 +8027,9 @@
|
|
7342
8027
|
}
|
7343
8028
|
},
|
7344
8029
|
{
|
7345
|
-
"preview_path": "primer/alpha/
|
7346
|
-
"name": "
|
7347
|
-
"snapshot": "
|
8030
|
+
"preview_path": "primer/alpha/select_panel/remote_fetch_filter_failure",
|
8031
|
+
"name": "remote_fetch_filter_failure",
|
8032
|
+
"snapshot": "interactive",
|
7348
8033
|
"skip_rules": {
|
7349
8034
|
"wont_fix": [
|
7350
8035
|
"region"
|
@@ -7355,9 +8040,9 @@
|
|
7355
8040
|
}
|
7356
8041
|
},
|
7357
8042
|
{
|
7358
|
-
"preview_path": "primer/alpha/
|
7359
|
-
"name": "
|
7360
|
-
"snapshot": "
|
8043
|
+
"preview_path": "primer/alpha/select_panel/eventually_local_fetch_initial_failure",
|
8044
|
+
"name": "eventually_local_fetch_initial_failure",
|
8045
|
+
"snapshot": "interactive",
|
7361
8046
|
"skip_rules": {
|
7362
8047
|
"wont_fix": [
|
7363
8048
|
"region"
|
@@ -7368,9 +8053,9 @@
|
|
7368
8053
|
}
|
7369
8054
|
},
|
7370
8055
|
{
|
7371
|
-
"preview_path": "primer/alpha/
|
7372
|
-
"name": "
|
7373
|
-
"snapshot": "
|
8056
|
+
"preview_path": "primer/alpha/select_panel/single_select_form",
|
8057
|
+
"name": "single_select_form",
|
8058
|
+
"snapshot": "interactive",
|
7374
8059
|
"skip_rules": {
|
7375
8060
|
"wont_fix": [
|
7376
8061
|
"region"
|
@@ -7381,9 +8066,9 @@
|
|
7381
8066
|
}
|
7382
8067
|
},
|
7383
8068
|
{
|
7384
|
-
"preview_path": "primer/alpha/
|
7385
|
-
"name": "
|
7386
|
-
"snapshot": "
|
8069
|
+
"preview_path": "primer/alpha/select_panel/multiselect_form",
|
8070
|
+
"name": "multiselect_form",
|
8071
|
+
"snapshot": "interactive",
|
7387
8072
|
"skip_rules": {
|
7388
8073
|
"wont_fix": [
|
7389
8074
|
"region"
|
@@ -8813,6 +9498,9 @@
|
|
8813
9498
|
"description": "Returns the value of attribute id.",
|
8814
9499
|
"parameters": [
|
8815
9500
|
|
9501
|
+
],
|
9502
|
+
"return_types": [
|
9503
|
+
|
8816
9504
|
]
|
8817
9505
|
}
|
8818
9506
|
],
|
@@ -10304,6 +10992,9 @@
|
|
10304
10992
|
"description": "Returns the value of attribute disabled.",
|
10305
10993
|
"parameters": [
|
10306
10994
|
|
10995
|
+
],
|
10996
|
+
"return_types": [
|
10997
|
+
|
10307
10998
|
]
|
10308
10999
|
},
|
10309
11000
|
{
|
@@ -10311,6 +11002,9 @@
|
|
10311
11002
|
"description": "Returns the value of attribute disabled.",
|
10312
11003
|
"parameters": [
|
10313
11004
|
|
11005
|
+
],
|
11006
|
+
"return_types": [
|
11007
|
+
|
10314
11008
|
]
|
10315
11009
|
}
|
10316
11010
|
],
|
@@ -10883,6 +11577,9 @@
|
|
10883
11577
|
"description": "Returns the value of attribute id.",
|
10884
11578
|
"parameters": [
|
10885
11579
|
|
11580
|
+
],
|
11581
|
+
"return_types": [
|
11582
|
+
|
10886
11583
|
]
|
10887
11584
|
}
|
10888
11585
|
],
|
@@ -11032,6 +11729,9 @@
|
|
11032
11729
|
"description": "Returns the value of attribute selected.",
|
11033
11730
|
"parameters": [
|
11034
11731
|
|
11732
|
+
],
|
11733
|
+
"return_types": [
|
11734
|
+
|
11035
11735
|
]
|
11036
11736
|
},
|
11037
11737
|
{
|
@@ -11044,6 +11744,9 @@
|
|
11044
11744
|
"default": "N/A",
|
11045
11745
|
"description": "the value to set the attribute selected to."
|
11046
11746
|
}
|
11747
|
+
],
|
11748
|
+
"return_types": [
|
11749
|
+
|
11047
11750
|
]
|
11048
11751
|
},
|
11049
11752
|
{
|
@@ -11051,6 +11754,9 @@
|
|
11051
11754
|
"description": "Returns the value of attribute href.",
|
11052
11755
|
"parameters": [
|
11053
11756
|
|
11757
|
+
],
|
11758
|
+
"return_types": [
|
11759
|
+
|
11054
11760
|
]
|
11055
11761
|
},
|
11056
11762
|
{
|
@@ -11063,6 +11769,9 @@
|
|
11063
11769
|
"default": "N/A",
|
11064
11770
|
"description": "the value to set the attribute href to."
|
11065
11771
|
}
|
11772
|
+
],
|
11773
|
+
"return_types": [
|
11774
|
+
|
11066
11775
|
]
|
11067
11776
|
}
|
11068
11777
|
],
|
@@ -11547,6 +12256,9 @@
|
|
11547
12256
|
"default": "N/A",
|
11548
12257
|
"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
12258
|
}
|
12259
|
+
],
|
12260
|
+
"return_types": [
|
12261
|
+
|
11550
12262
|
]
|
11551
12263
|
},
|
11552
12264
|
{
|
@@ -11559,6 +12271,9 @@
|
|
11559
12271
|
"default": "N/A",
|
11560
12272
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::ButtonGroup::MenuButton{{/link_to_component}}."
|
11561
12273
|
}
|
12274
|
+
],
|
12275
|
+
"return_types": [
|
12276
|
+
|
11562
12277
|
]
|
11563
12278
|
},
|
11564
12279
|
{
|
@@ -11571,6 +12286,9 @@
|
|
11571
12286
|
"default": "N/A",
|
11572
12287
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::ClipboardCopyButton{{/link_to_component}}."
|
11573
12288
|
}
|
12289
|
+
],
|
12290
|
+
"return_types": [
|
12291
|
+
|
11574
12292
|
]
|
11575
12293
|
}
|
11576
12294
|
],
|
@@ -12370,6 +13088,9 @@
|
|
12370
13088
|
"description": "Returns the value of attribute disabled.",
|
12371
13089
|
"parameters": [
|
12372
13090
|
|
13091
|
+
],
|
13092
|
+
"return_types": [
|
13093
|
+
|
12373
13094
|
]
|
12374
13095
|
},
|
12375
13096
|
{
|
@@ -12377,6 +13098,9 @@
|
|
12377
13098
|
"description": "Returns the value of attribute disabled.",
|
12378
13099
|
"parameters": [
|
12379
13100
|
|
13101
|
+
],
|
13102
|
+
"return_types": [
|
13103
|
+
|
12380
13104
|
]
|
12381
13105
|
}
|
12382
13106
|
],
|
@@ -13427,6 +14151,9 @@
|
|
13427
14151
|
"default": "N/A",
|
13428
14152
|
"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
14153
|
}
|
14154
|
+
],
|
14155
|
+
"return_types": [
|
14156
|
+
|
13430
14157
|
]
|
13431
14158
|
},
|
13432
14159
|
{
|
@@ -13475,6 +14202,9 @@
|
|
13475
14202
|
"default": "N/A",
|
13476
14203
|
"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
14204
|
}
|
14205
|
+
],
|
14206
|
+
"return_types": [
|
14207
|
+
|
13478
14208
|
]
|
13479
14209
|
},
|
13480
14210
|
{
|
@@ -13487,6 +14217,9 @@
|
|
13487
14217
|
"default": "N/A",
|
13488
14218
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Group{{/link_to_component}}."
|
13489
14219
|
}
|
14220
|
+
],
|
14221
|
+
"return_types": [
|
14222
|
+
|
13490
14223
|
]
|
13491
14224
|
},
|
13492
14225
|
{
|
@@ -13499,6 +14232,9 @@
|
|
13499
14232
|
"default": "N/A",
|
13500
14233
|
"description": "The arguments accepted by {{#link_to_component}}Primer::Beta::NavList::Divider{{/link_to_component}}."
|
13501
14234
|
}
|
14235
|
+
],
|
14236
|
+
"return_types": [
|
14237
|
+
|
13502
14238
|
]
|
13503
14239
|
},
|
13504
14240
|
{
|
@@ -13517,6 +14253,9 @@
|
|
13517
14253
|
"default": "N/A",
|
13518
14254
|
"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
14255
|
}
|
14256
|
+
],
|
14257
|
+
"return_types": [
|
14258
|
+
|
13520
14259
|
]
|
13521
14260
|
},
|
13522
14261
|
{
|
@@ -13565,6 +14304,9 @@
|
|
13565
14304
|
"default": "N/A",
|
13566
14305
|
"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
14306
|
}
|
14307
|
+
],
|
14308
|
+
"return_types": [
|
14309
|
+
|
13568
14310
|
]
|
13569
14311
|
},
|
13570
14312
|
{
|
@@ -13572,6 +14314,9 @@
|
|
13572
14314
|
"description": "Lists that contain top-level items (i.e. items outside of a group) should be wrapped in a <ul>",
|
13573
14315
|
"parameters": [
|
13574
14316
|
|
14317
|
+
],
|
14318
|
+
"return_types": [
|
14319
|
+
"Boolean"
|
13575
14320
|
]
|
13576
14321
|
}
|
13577
14322
|
],
|
@@ -13756,6 +14501,9 @@
|
|
13756
14501
|
"description": "Returns the value of attribute title.",
|
13757
14502
|
"parameters": [
|
13758
14503
|
|
14504
|
+
],
|
14505
|
+
"return_types": [
|
14506
|
+
|
13759
14507
|
]
|
13760
14508
|
},
|
13761
14509
|
{
|
@@ -13763,6 +14511,9 @@
|
|
13763
14511
|
"description": "Returns the value of attribute id.",
|
13764
14512
|
"parameters": [
|
13765
14513
|
|
14514
|
+
],
|
14515
|
+
"return_types": [
|
14516
|
+
|
13766
14517
|
]
|
13767
14518
|
},
|
13768
14519
|
{
|
@@ -13770,6 +14521,9 @@
|
|
13770
14521
|
"description": "Returns the value of attribute heading_level.",
|
13771
14522
|
"parameters": [
|
13772
14523
|
|
14524
|
+
],
|
14525
|
+
"return_types": [
|
14526
|
+
|
13773
14527
|
]
|
13774
14528
|
},
|
13775
14529
|
{
|
@@ -13777,6 +14531,9 @@
|
|
13777
14531
|
"description": "Returns the value of attribute system_arguments.",
|
13778
14532
|
"parameters": [
|
13779
14533
|
|
14534
|
+
],
|
14535
|
+
"return_types": [
|
14536
|
+
|
13780
14537
|
]
|
13781
14538
|
}
|
13782
14539
|
],
|
@@ -13903,6 +14660,9 @@
|
|
13903
14660
|
"description": "Returns the value of attribute selected_by_ids.",
|
13904
14661
|
"parameters": [
|
13905
14662
|
|
14663
|
+
],
|
14664
|
+
"return_types": [
|
14665
|
+
|
13906
14666
|
]
|
13907
14667
|
},
|
13908
14668
|
{
|
@@ -13910,6 +14670,9 @@
|
|
13910
14670
|
"description": "Returns the value of attribute sub_item.",
|
13911
14671
|
"parameters": [
|
13912
14672
|
|
14673
|
+
],
|
14674
|
+
"return_types": [
|
14675
|
+
|
13913
14676
|
]
|
13914
14677
|
},
|
13915
14678
|
{
|
@@ -13917,6 +14680,9 @@
|
|
13917
14680
|
"description": "Returns the value of attribute sub_item.\nWhether or not this item is nested under a parent item.",
|
13918
14681
|
"parameters": [
|
13919
14682
|
|
14683
|
+
],
|
14684
|
+
"return_types": [
|
14685
|
+
"Boolean"
|
13920
14686
|
]
|
13921
14687
|
},
|
13922
14688
|
{
|
@@ -13924,6 +14690,9 @@
|
|
13924
14690
|
"description": "Cause this item to show its list of sub items when rendered.",
|
13925
14691
|
"parameters": [
|
13926
14692
|
|
14693
|
+
],
|
14694
|
+
"return_types": [
|
14695
|
+
|
13927
14696
|
]
|
13928
14697
|
},
|
13929
14698
|
{
|
@@ -13931,6 +14700,9 @@
|
|
13931
14700
|
"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
14701
|
"parameters": [
|
13933
14702
|
|
14703
|
+
],
|
14704
|
+
"return_types": [
|
14705
|
+
"Boolean"
|
13934
14706
|
]
|
13935
14707
|
}
|
13936
14708
|
],
|
@@ -14076,6 +14848,9 @@
|
|
14076
14848
|
"description": "Cause this group to show its list of sub items when rendered.\n:nocov:",
|
14077
14849
|
"parameters": [
|
14078
14850
|
|
14851
|
+
],
|
14852
|
+
"return_types": [
|
14853
|
+
|
14079
14854
|
]
|
14080
14855
|
}
|
14081
14856
|
],
|
@@ -15829,6 +16604,9 @@
|
|
15829
16604
|
"description": "remove alias when all buttons are migrated to new slot names",
|
15830
16605
|
"parameters": [
|
15831
16606
|
|
16607
|
+
],
|
16608
|
+
"return_types": [
|
16609
|
+
|
15832
16610
|
]
|
15833
16611
|
},
|
15834
16612
|
{
|
@@ -15836,6 +16614,9 @@
|
|
15836
16614
|
"description": "remove alias when all buttons are migrated to new slot names",
|
15837
16615
|
"parameters": [
|
15838
16616
|
|
16617
|
+
],
|
16618
|
+
"return_types": [
|
16619
|
+
|
15839
16620
|
]
|
15840
16621
|
}
|
15841
16622
|
],
|
@@ -16531,6 +17312,9 @@
|
|
16531
17312
|
"description": "Returns the value of attribute css_class.",
|
16532
17313
|
"parameters": [
|
16533
17314
|
|
17315
|
+
],
|
17316
|
+
"return_types": [
|
17317
|
+
|
16534
17318
|
]
|
16535
17319
|
}
|
16536
17320
|
],
|
@@ -16873,6 +17657,9 @@
|
|
16873
17657
|
"description": "transform anchor tag strings to {href, text} objects\ne.g \"\\u003ca href=\\\"/admin\\\"\\u003eAdministration\\u003c/a\\u003e\"",
|
16874
17658
|
"parameters": [
|
16875
17659
|
|
17660
|
+
],
|
17661
|
+
"return_types": [
|
17662
|
+
|
16876
17663
|
]
|
16877
17664
|
},
|
16878
17665
|
{
|
@@ -16880,6 +17667,9 @@
|
|
16880
17667
|
"description": "Check if the item is an anchor tag string e.g \"\\u003ca href=\\\"/admin\\\"\\u003eAdministration\\u003c/a\\u003e\"",
|
16881
17668
|
"parameters": [
|
16882
17669
|
|
17670
|
+
],
|
17671
|
+
"return_types": [
|
17672
|
+
"Boolean"
|
16883
17673
|
]
|
16884
17674
|
}
|
16885
17675
|
],
|
@@ -17645,7 +18435,7 @@
|
|
17645
18435
|
{
|
17646
18436
|
"component": "BaseComponent",
|
17647
18437
|
"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/
|
18438
|
+
"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
18439
|
"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
18440
|
}
|
17651
18441
|
]
|