openproject-primer_view_components 0.17.1 → 0.19.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (86) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +49 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
  4. data/app/assets/javascripts/app/components/primer/beta/nav_list.d.ts +0 -11
  5. data/app/assets/javascripts/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
  6. data/app/assets/javascripts/app/components/primer/primer.d.ts +1 -0
  7. data/app/assets/javascripts/primer_view_components.js +1 -1
  8. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  9. data/app/assets/styles/primer_view_components.css +1 -1
  10. data/app/assets/styles/primer_view_components.css.map +1 -1
  11. data/app/components/primer/alpha/action_list/item.rb +13 -1
  12. data/app/components/primer/alpha/action_list.css +1 -1
  13. data/app/components/primer/alpha/action_list.css.json +1 -0
  14. data/app/components/primer/alpha/action_list.css.map +1 -1
  15. data/app/components/primer/alpha/action_list.pcss +3 -1
  16. data/app/components/primer/alpha/action_list.rb +5 -4
  17. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
  18. data/app/components/primer/alpha/action_menu/action_menu_element.js +85 -11
  19. data/app/components/primer/alpha/action_menu/action_menu_element.ts +110 -12
  20. data/app/components/primer/alpha/action_menu/group.rb +23 -0
  21. data/app/components/primer/alpha/action_menu/heading.rb +17 -0
  22. data/app/components/primer/alpha/action_menu/list.html.erb +1 -0
  23. data/app/components/primer/alpha/action_menu/list.rb +62 -51
  24. data/app/components/primer/alpha/action_menu/list_wrapper.rb +40 -0
  25. data/app/components/primer/alpha/action_menu.rb +38 -1
  26. data/app/components/primer/alpha/overlay.css +1 -1
  27. data/app/components/primer/alpha/overlay.css.json +2 -1
  28. data/app/components/primer/alpha/overlay.css.map +1 -1
  29. data/app/components/primer/alpha/overlay.pcss +6 -2
  30. data/app/components/primer/alpha/text_field.css +1 -1
  31. data/app/components/primer/alpha/text_field.css.map +1 -1
  32. data/app/components/primer/alpha/text_field.pcss +3 -3
  33. data/app/components/primer/alpha/tool_tip.js +8 -4
  34. data/app/components/primer/alpha/tool_tip.ts +9 -4
  35. data/app/components/primer/beta/auto_complete/auto_complete.html.erb +1 -7
  36. data/app/components/primer/beta/auto_complete/item.rb +1 -1
  37. data/app/components/primer/beta/auto_complete.rb +6 -1
  38. data/app/components/primer/beta/base_button.rb +2 -3
  39. data/app/components/primer/beta/blankslate.css +1 -1
  40. data/app/components/primer/beta/blankslate.css.map +1 -1
  41. data/app/components/primer/beta/blankslate.pcss +3 -3
  42. data/app/components/primer/beta/border_box.rb +3 -0
  43. data/app/components/primer/beta/button.css +1 -1
  44. data/app/components/primer/beta/button.css.json +9 -8
  45. data/app/components/primer/beta/button.css.map +1 -1
  46. data/app/components/primer/beta/button.pcss +15 -11
  47. data/app/components/primer/beta/nav_list/group.html.erb +7 -5
  48. data/app/components/primer/beta/nav_list/group.rb +2 -2
  49. data/app/components/primer/beta/nav_list.d.ts +0 -11
  50. data/app/components/primer/beta/nav_list.js +2 -85
  51. data/app/components/primer/beta/nav_list.ts +1 -85
  52. data/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
  53. data/app/components/primer/beta/nav_list_group_element.js +108 -0
  54. data/app/components/primer/beta/nav_list_group_element.ts +97 -0
  55. data/app/components/primer/beta/relative_time.rb +4 -4
  56. data/app/components/primer/component.rb +3 -0
  57. data/app/components/primer/open_project/input_group.css +1 -0
  58. data/app/components/primer/open_project/input_group.css.json +11 -0
  59. data/app/components/primer/open_project/input_group.css.map +1 -0
  60. data/app/components/primer/open_project/input_group.html.erb +4 -0
  61. data/app/components/primer/open_project/input_group.pcss +25 -0
  62. data/app/components/primer/open_project/input_group.rb +93 -0
  63. data/app/components/primer/primer.d.ts +1 -0
  64. data/app/components/primer/primer.js +1 -0
  65. data/app/components/primer/primer.pcss +1 -0
  66. data/app/components/primer/primer.ts +1 -0
  67. data/app/lib/primer/experimental_render_helpers.rb +32 -0
  68. data/app/lib/primer/experimental_slot_helpers.rb +30 -0
  69. data/lib/primer/view_components/version.rb +2 -2
  70. data/lib/primer/yard/lookbook_pages_backend.rb +2 -2
  71. data/previews/primer/alpha/action_menu_preview.rb +73 -7
  72. data/previews/primer/alpha/dialog_preview/with_auto_complete.html.erb +8 -0
  73. data/previews/primer/alpha/dialog_preview.rb +17 -0
  74. data/previews/primer/beta/blankslate_preview/inside_flex_container.html.erb +6 -0
  75. data/previews/primer/beta/blankslate_preview.rb +3 -0
  76. data/previews/primer/beta/border_box_preview.rb +3 -2
  77. data/previews/primer/beta/nav_list_preview.rb +10 -1
  78. data/previews/primer/open_project/input_group_preview.rb +63 -0
  79. data/static/arguments.json +108 -1
  80. data/static/audited_at.json +5 -1
  81. data/static/classes.json +6 -0
  82. data/static/constants.json +28 -0
  83. data/static/info_arch.json +365 -52
  84. data/static/previews.json +112 -0
  85. data/static/statuses.json +4 -0
  86. metadata +21 -2
@@ -125,13 +125,20 @@
125
125
  "Primer::Alpha::ActionMenu": {
126
126
  "DEFAULT_PRELOAD": false,
127
127
  "DEFAULT_SELECT_VARIANT": "none",
128
+ "Group": "Primer::Alpha::ActionMenu::Group",
129
+ "Heading": "Primer::Alpha::ActionMenu::Heading",
128
130
  "List": "Primer::Alpha::ActionMenu::List",
131
+ "ListWrapper": "Primer::Alpha::ActionMenu::ListWrapper",
129
132
  "SELECT_VARIANT_OPTIONS": [
130
133
  "single",
131
134
  "multiple",
132
135
  "none"
133
136
  ]
134
137
  },
138
+ "Primer::Alpha::ActionMenu::Group": {
139
+ },
140
+ "Primer::Alpha::ActionMenu::Heading": {
141
+ },
135
142
  "Primer::Alpha::ActionMenu::List": {
136
143
  "DEFAULT_ITEM_TAG": "button",
137
144
  "ITEM_TAG_OPTIONS": [
@@ -140,6 +147,8 @@
140
147
  "button"
141
148
  ]
142
149
  },
150
+ "Primer::Alpha::ActionMenu::ListWrapper": {
151
+ },
143
152
  "Primer::Alpha::AutoComplete": {
144
153
  "Item": "Primer::Alpha::AutoComplete::Item"
145
154
  },
@@ -1374,6 +1383,25 @@
1374
1383
  "span"
1375
1384
  ]
1376
1385
  },
1386
+ "Primer::OpenProject::InputGroup": {
1387
+ "DEFAULT_INPUT_WIDTH": "auto",
1388
+ "INPUT_WIDTH_MAPPINGS": {
1389
+ "auto": "InputGroup-input-width--auto",
1390
+ "small": "InputGroup-input-width--small",
1391
+ "medium": "InputGroup-input-width--medium",
1392
+ "large": "InputGroup-input-width--large",
1393
+ "xlarge": "InputGroup-input-width--xlarge",
1394
+ "xxlarge": "InputGroup-input-width--xxlarge"
1395
+ },
1396
+ "INPUT_WIDTH_OPTIONS": [
1397
+ "auto",
1398
+ "small",
1399
+ "medium",
1400
+ "large",
1401
+ "xlarge",
1402
+ "xxlarge"
1403
+ ]
1404
+ },
1377
1405
  "Primer::OpenProject::PageHeader": {
1378
1406
  "BACK_BUTTON_ICON_OPTIONS": [
1379
1407
  "arrow-left",
@@ -264,11 +264,17 @@
264
264
  "name": "heading",
265
265
  "description": "Heading text rendered above the list of items.",
266
266
  "parameters": [
267
+ {
268
+ "name": "component_klass",
269
+ "type": "Class",
270
+ "default": "N/A",
271
+ "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
272
+ },
267
273
  {
268
274
  "name": "system_arguments",
269
275
  "type": "Hash",
270
276
  "default": "N/A",
271
- "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
277
+ "description": "The arguments accepted by `component_klass`."
272
278
  }
273
279
  ]
274
280
  },
@@ -775,6 +781,12 @@
775
781
  "default": "`nil`",
776
782
  "description": "Item label. If no label is provided, content is used."
777
783
  },
784
+ {
785
+ "name": "item_id",
786
+ "type": "String",
787
+ "default": "`nil`",
788
+ "description": "An ID that will be attached to the item's `<li>` element as `data-item-id` for distinguishing between items, perhaps in JavaScript."
789
+ },
778
790
  {
779
791
  "name": "label_classes",
780
792
  "type": "String",
@@ -927,6 +939,13 @@
927
939
 
928
940
  ]
929
941
  },
942
+ {
943
+ "name": "item_id",
944
+ "description": "Returns the value of attribute item_id.",
945
+ "parameters": [
946
+
947
+ ]
948
+ },
930
949
  {
931
950
  "name": "list",
932
951
  "description": "Returns the value of attribute list.",
@@ -1128,7 +1147,7 @@
1128
1147
  },
1129
1148
  {
1130
1149
  "fully_qualified_name": "Primer::Alpha::ActionMenu",
1131
- "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.",
1150
+ "description": "ActionMenu is used for actions, navigation, to display secondary options, or single/multi select lists. They appear when\nusers interact with buttons, actions, or other controls.\n\nThe only allowed elements for the `Item` components are: `:a`, `:button`, and `:clipboard-copy`. The default is `:button`.\n\n### Select variants\n\nWhile `ActionMenu`s default to a list of buttons that can link to other pages, copy text to the clipboard, etc, they also support\n`single` and `multiple` select variants. The single select variant allows a single item to be \"selected\" (i.e. marked \"active\")\nwhen clicked, which will cause a check mark to appear to the left of the item text. When the `multiple` select variant is chosen,\nmultiple items may be selected and check marks will appear next to each selected item.\n\nUse the `select_variant:` option to control which variant the `ActionMenu` uses. For more information, see the documentation on\nsupported arguments below.\n\n### Dynamic labels\n\nWhen using the `single` select variant, an optional label indicating the selected item can be displayed inside the menu button.\nDynamic labels can also be prefixed with custom text.\n\nPass `dynamic_label: true` to enable dynamic label behavior, and pass `dynamic_label_prefix: \"<string>\"` to set a custom prefix.\nFor more information, see the documentation on supported arguments below.\n\n### `ActionMenu`s as form inputs\n\nWhen using either the `single` or `multiple` select variants, `ActionMenu`s can be used as form inputs. They behave very\nsimilarly to how HTML `<select>` boxes behave, and play nicely with Rails' built-in form mechanisms. Pass arguments via the\n`form_arguments:` argument, including the Rails form builder object and the name of the field:\n\n```erb\n<% form_with(url: update_merge_strategy_path) do |f| %>\n <%= render(Primer::Alpha::ActionMenu.new(form_arguments: { builder: f, name: \"merge_strategy\" })) do |menu| %>\n <% menu.with_item(label: \"Fast forward\", data: { value: \"fast_forward\" }) %>\n <% menu.with_item(label: \"Recursive\", data: { value: \"recursive\" }) %>\n <% menu.with_item(label: \"Ours\", data: { value: \"ours\" }) %>\n <% menu.with_item(label: \"Theirs\", data: { value: \"theirs\" }) %>\n <% end %>\n<% end %>\n```\n\nThe value of the `data: { value: ... }` argument is sent to the server on submit, keyed using the name provided above\n(eg. `\"merge_strategy\"`). If no value is provided for an item, the value of that item is the item's label. Here's the\ncorresponding `MergeStrategyController` that might be written to handle the form above:\n\n```ruby\nclass MergeStrategyController < ApplicationController\n def update\n puts \"You chose #{merge_strategy_params[:merge_strategy]}\"\n end\n\n private\n\n def merge_strategy_params\n params.permit(:merge_strategy)\n end\nend\n```\n\n### `ActionMenu` items that submit forms\n\nWhereas `ActionMenu` items normally permit navigation via `<a>` tags which make HTTP `get` requests, `ActionMenu` items\nalso permit navigation via `POST` requests. To enable this behavior, include the `href:` argument as normal, but also pass\nthe `form_arguments:` argument to the appropriate item:\n\n```erb\n<%= render(Primer::Alpha::ActionMenu.new) do |menu| %>\n <% menu.with_item(\n label: \"Repository\",\n href: update_repo_grouping_path,\n form_arguments: {\n method: :post,\n name: \"group_by\",\n value: \"repository\"\n }\n ) %>\n<% end %>\n```\n\nMake sure to specify `method: :post`, as the default is `:get`. When clicked, the list item will submit a POST request to\nthe URL passed in the `href:` argument, including a parameter named `\"group_by\"` with a value of `\"repository\"`. If no value\nis given, the name, eg. `\"group_by\"`, will be used as the value.\n\nIt is possible to include multiple fields on submit. Instead of passing the `name:` and `value:` arguments, pass an array via\nthe `inputs:` argument:\n\n```erb\n<%= render(Primer::Alpha::ActionMenu.new) do |menu| %>\n <% menu.with_show_button { \"Group By\" } %>\n <% menu.with_item(\n label: \"Repository\",\n href: update_repo_grouping_path,\n form_arguments: {\n method: :post,\n inputs: [{\n name: \"group_by\",\n value: \"repository\"\n }, {\n name: \"some_other_field\",\n value: \"some value\",\n }],\n }\n ) %>\n<% end %>\n```\n\n### Form arguments\n\nThe following table summarizes the arguments allowed in the `form_arguments:` hash mentioned above.\n\n|Name |Type |Default|Description|\n|:----------------|:-------------|:------|:----------|\n|`method` |`Symbol` |`:get` |The HTTP request method to use to submit the form. One of `:get`, `:post`, `:patch`, `:put`, `:delete`, or `:head`|\n|`name` |`String` |`nil` |The name of the field that will be sent to the server on submit.|\n|`value` |`String` |`nil` |The value of the field that will be sent to the server on submit.|\n|`input_arguments`|`Hash` |`{}` |Additional key/value pairs to emit as HTML attributes on the `<input type=\"hidden\">` element.|\n|`inputs` |`Array<Hash>` |`[]` |An array of hashes representing HTML `<input type=\"hidden\">` elements. Must contain at least `name:` and `value:` keys. If additional key/value pairs are provided, they are emitted as HTML attributes on the `<input>` element. This argument supercedes the `name:`, `value:`, and `:input_arguments` arguments listed above.|\n\nThe elements of the `inputs:` array will be emitted as HTML `<input type=\"hidden\">` elements.\n\n### JavaScript API\n\n`ActionList`s render an `<action-list>` custom element that exposes behavior to the client. For all these methods,\n`itemId` refers to the value of the `item_id:` argument (see below) that is used to populate the `data-item-id` HTML\nattribute.\n\n#### Query methods\n\n* `getItemById(itemId: string): Element`: Returns the item's HTML `<li>` element. The return value can be passed as the `item` argument to the other methods listed below.\n* `isItemChecked(item: Element): boolean`: Returns `true` if the item is checked, `false` otherwise.\n* `isItemHidden(item: Element): boolean`: Returns `true` if the item is hidden, `false` otherwise.\n* `isItemDisabled(item: Element): boolean`: Returns `true` if the item is disabled, `false` otherwise.\n\n#### State methods\n\n* `showItem(item: Element)`: Shows the item, i.e. makes it visible.\n* `hideItem(item: Element)`: Hides the item, i.e. makes it invisible.\n* `enableItem(item: Element)`: Enables the item, i.e. makes it clickable by the mouse and keyboard.\n* `disableItem(item: Element)`: Disables the item, i.e. makes it unclickable by the mouse and keyboard.\n* `checkItem(item: Element)`: Checks the item. Only has an effect in single- and multi-select modes.\n* `uncheckItem(item: Element)`: Unchecks the item. Only has an effect in multi-select mode, since items cannot be unchecked in single-select mode.\n\n#### Events\n\nThe `<action-menu>` element fires an `itemActivated` event whenever an item is activated (eg. clicked) via the mouse or keyboard.\n\n```typescript\ndocument.querySelector(\"action-menu\").addEventListener(\"itemActivated\", (event: ItemActivatedEvent) => {\n event.item // Element: the <li> item that was activated\n event.checked // boolean: whether or not the result of the activation checked the item\n})\n```",
1132
1151
  "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).",
1133
1152
  "is_form_component": false,
1134
1153
  "is_published": true,
@@ -1374,6 +1393,32 @@
1374
1393
  ]
1375
1394
  }
1376
1395
  },
1396
+ {
1397
+ "preview_path": "primer/alpha/action_menu/with_groups",
1398
+ "name": "with_groups",
1399
+ "snapshot": "interactive",
1400
+ "skip_rules": {
1401
+ "wont_fix": [
1402
+ "region"
1403
+ ],
1404
+ "will_fix": [
1405
+ "color-contrast"
1406
+ ]
1407
+ }
1408
+ },
1409
+ {
1410
+ "preview_path": "primer/alpha/action_menu/with_items_and_groups",
1411
+ "name": "with_items_and_groups",
1412
+ "snapshot": "interactive",
1413
+ "skip_rules": {
1414
+ "wont_fix": [
1415
+ "region"
1416
+ ],
1417
+ "will_fix": [
1418
+ "color-contrast"
1419
+ ]
1420
+ }
1421
+ },
1377
1422
  {
1378
1423
  "preview_path": "primer/alpha/action_menu/wide",
1379
1424
  "name": "wide",
@@ -1684,10 +1729,79 @@
1684
1729
  "requires_js": false,
1685
1730
  "component": "ActionMenu::List",
1686
1731
  "status": "alpha",
1687
- "a11y_reviewed": true,
1732
+ "a11y_reviewed": false,
1688
1733
  "short_name": "ActionMenuList",
1689
1734
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list.rb",
1690
1735
  "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list/default/",
1736
+ "parameters": [
1737
+ {
1738
+ "name": "system_arguments",
1739
+ "type": "Hash",
1740
+ "default": "N/A",
1741
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}"
1742
+ }
1743
+ ],
1744
+ "slots": [
1745
+
1746
+ ],
1747
+ "methods": [
1748
+ {
1749
+ "name": "items",
1750
+ "description": "Returns the value of attribute items.",
1751
+ "parameters": [
1752
+
1753
+ ]
1754
+ }
1755
+ ],
1756
+ "previews": [
1757
+
1758
+ ],
1759
+ "subcomponents": [
1760
+
1761
+ ]
1762
+ },
1763
+ {
1764
+ "fully_qualified_name": "Primer::Alpha::ActionMenu::Heading",
1765
+ "description": "Heading used to describe groups within an action menu.",
1766
+ "accessibility_docs": null,
1767
+ "is_form_component": false,
1768
+ "is_published": true,
1769
+ "requires_js": false,
1770
+ "component": "ActionMenu::Heading",
1771
+ "status": "alpha",
1772
+ "a11y_reviewed": false,
1773
+ "short_name": "ActionMenuHeading",
1774
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/heading.rb",
1775
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/heading/default/",
1776
+ "parameters": [
1777
+
1778
+ ],
1779
+ "slots": [
1780
+
1781
+ ],
1782
+ "methods": [
1783
+
1784
+ ],
1785
+ "previews": [
1786
+
1787
+ ],
1788
+ "subcomponents": [
1789
+
1790
+ ]
1791
+ },
1792
+ {
1793
+ "fully_qualified_name": "Primer::Alpha::ActionMenu::ListWrapper",
1794
+ "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.",
1795
+ "accessibility_docs": null,
1796
+ "is_form_component": false,
1797
+ "is_published": true,
1798
+ "requires_js": false,
1799
+ "component": "ActionMenu::ListWrapper",
1800
+ "status": "alpha",
1801
+ "a11y_reviewed": true,
1802
+ "short_name": "ActionMenuListWrapper",
1803
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/list_wrapper.rb",
1804
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/list_wrapper/default/",
1691
1805
  "parameters": [
1692
1806
  {
1693
1807
  "name": "menu_id",
@@ -1707,11 +1821,17 @@
1707
1821
  "name": "heading",
1708
1822
  "description": "Heading text rendered above the list of items.",
1709
1823
  "parameters": [
1824
+ {
1825
+ "name": "component_klass",
1826
+ "type": "Class",
1827
+ "default": "N/A",
1828
+ "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
1829
+ },
1710
1830
  {
1711
1831
  "name": "system_arguments",
1712
1832
  "type": "Hash",
1713
1833
  "default": "N/A",
1714
- "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
1834
+ "description": "The arguments accepted by `component_klass`."
1715
1835
  }
1716
1836
  ]
1717
1837
  },
@@ -1724,69 +1844,115 @@
1724
1844
  }
1725
1845
  ],
1726
1846
  "methods": [
1847
+
1848
+ ],
1849
+ "previews": [
1850
+
1851
+ ],
1852
+ "subcomponents": [
1853
+
1854
+ ]
1855
+ },
1856
+ {
1857
+ "fully_qualified_name": "Primer::Alpha::ActionMenu::Group",
1858
+ "description": "This component is part of {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} and should not be\nused as a standalone component.",
1859
+ "accessibility_docs": null,
1860
+ "is_form_component": false,
1861
+ "is_published": true,
1862
+ "requires_js": false,
1863
+ "component": "ActionMenu::Group",
1864
+ "status": "alpha",
1865
+ "a11y_reviewed": true,
1866
+ "short_name": "ActionMenuGroup",
1867
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/alpha/action_menu/group.rb",
1868
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/alpha/action_menu/group/default/",
1869
+ "parameters": [
1727
1870
  {
1728
- "name": "with_item",
1729
- "description": "Adds a new item to the list.",
1871
+ "name": "id",
1872
+ "type": "String",
1873
+ "default": "`self.class.generate_id`",
1874
+ "description": "HTML ID value."
1875
+ },
1876
+ {
1877
+ "name": "role",
1878
+ "type": "Boolean",
1879
+ "default": "`nil`",
1880
+ "description": "ARIA role describing the function of the list. listbox and menu are a common values."
1881
+ },
1882
+ {
1883
+ "name": "item_classes",
1884
+ "type": "String",
1885
+ "default": "`nil`",
1886
+ "description": "Additional CSS classes to attach to items."
1887
+ },
1888
+ {
1889
+ "name": "scheme",
1890
+ "type": "Symbol",
1891
+ "default": "`:full`",
1892
+ "description": "One of `:full` or `:inset`. `inset` children are offset (vertically and horizontally) from list edges. `full` (default) children are flush (vertically and horizontally) with list edges."
1893
+ },
1894
+ {
1895
+ "name": "show_dividers",
1896
+ "type": "Boolean",
1897
+ "default": "`false`",
1898
+ "description": "Display a divider above each item in the list when it does not follow a header or divider."
1899
+ },
1900
+ {
1901
+ "name": "select_variant",
1902
+ "type": "Symbol",
1903
+ "default": "`:none`",
1904
+ "description": "How items may be selected in the list. One of `:multiple`, `:multiple_checkbox`, `:none`, or `:single`."
1905
+ },
1906
+ {
1907
+ "name": "form_arguments",
1908
+ "type": "Hash",
1909
+ "default": "`{}`",
1910
+ "description": "Allows an `ActionList` to act as a select list in multi- and single-select modes. Pass the `builder:` and `name:` options to this hash. `builder:` should be an instance of `ActionView::Helpers::FormBuilder`, which are created by the standard Rails `#form_with` and `#form_for` helpers. The `name:` option is the desired name of the field that will be included in the params sent to the server on form submission. *NOTE*: Consider using an {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} instead of using this feature directly."
1911
+ },
1912
+ {
1913
+ "name": "system_arguments",
1914
+ "type": "Hash",
1915
+ "default": "N/A",
1916
+ "description": "{{link_to_system_arguments_docs}}"
1917
+ }
1918
+ ],
1919
+ "slots": [
1920
+ {
1921
+ "name": "heading",
1922
+ "description": "Heading text rendered above the list of items.",
1730
1923
  "parameters": [
1731
1924
  {
1732
- "name": "data",
1733
- "type": "Hash",
1734
- "default": "`{}`",
1735
- "description": "When the menu is used as a form input (see the {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} docs), the label is submitted to the server by default. However, if the `data: { value: }` or `\"data-value\":` attribute is provided, it will be sent to the server instead."
1925
+ "name": "component_klass",
1926
+ "type": "Class",
1927
+ "default": "N/A",
1928
+ "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
1736
1929
  },
1737
1930
  {
1738
1931
  "name": "system_arguments",
1739
1932
  "type": "Hash",
1740
1933
  "default": "N/A",
1741
- "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."
1934
+ "description": "The arguments accepted by `component_klass`."
1742
1935
  }
1743
1936
  ]
1744
1937
  },
1745
1938
  {
1746
- "name": "with_avatar_item",
1747
- "description": "Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.",
1939
+ "name": "items",
1940
+ "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.",
1941
+ "parameters": [
1942
+
1943
+ ]
1944
+ }
1945
+ ],
1946
+ "methods": [
1947
+ {
1948
+ "name": "with_heading",
1949
+ "description": "Heading text rendered above the list of items.",
1748
1950
  "parameters": [
1749
- {
1750
- "name": "src",
1751
- "type": "String",
1752
- "default": "N/A",
1753
- "description": "The source url of the avatar image."
1754
- },
1755
- {
1756
- "name": "username",
1757
- "type": "String",
1758
- "default": "N/A",
1759
- "description": "The username associated with the avatar."
1760
- },
1761
- {
1762
- "name": "full_name",
1763
- "type": "String",
1764
- "default": "`nil`",
1765
- "description": "Optional. The user's full name."
1766
- },
1767
- {
1768
- "name": "full_name_scheme",
1769
- "type": "Symbol",
1770
- "default": "`:block`",
1771
- "description": "Optional. How to display the user's full name. One of `:block` or `:inline`."
1772
- },
1773
- {
1774
- "name": "data",
1775
- "type": "Hash",
1776
- "default": "`{}`",
1777
- "description": "When the menu is used as a form input (see the {{#link_to_component}}Primer::Alpha::ActionMenu{{/link_to_component}} docs), the label is submitted to the server by default. However, if the `data: { value: }` or `\"data-value\":` attribute is provided, it will be sent to the server instead."
1778
- },
1779
- {
1780
- "name": "avatar_arguments",
1781
- "type": "Hash",
1782
- "default": "`{}`",
1783
- "description": "Optional. The arguments accepted by {{#link_to_component}}Primer::Beta::Avatar{{/link_to_component}}."
1784
- },
1785
1951
  {
1786
1952
  "name": "system_arguments",
1787
1953
  "type": "Hash",
1788
1954
  "default": "N/A",
1789
- "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."
1955
+ "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionMenu::Heading{{/link_to_component}}."
1790
1956
  }
1791
1957
  ]
1792
1958
  }
@@ -3107,6 +3273,19 @@
3107
3273
  ]
3108
3274
  }
3109
3275
  },
3276
+ {
3277
+ "preview_path": "primer/alpha/dialog/with_auto_complete",
3278
+ "name": "with_auto_complete",
3279
+ "snapshot": "interactive",
3280
+ "skip_rules": {
3281
+ "wont_fix": [
3282
+ "region"
3283
+ ],
3284
+ "will_fix": [
3285
+ "color-contrast"
3286
+ ]
3287
+ }
3288
+ },
3110
3289
  {
3111
3290
  "preview_path": "primer/alpha/dialog/body_has_scrollbar_overflow",
3112
3291
  "name": "body_has_scrollbar_overflow",
@@ -5266,11 +5445,17 @@
5266
5445
  "name": "heading",
5267
5446
  "description": "Heading text rendered above the list of items.",
5268
5447
  "parameters": [
5448
+ {
5449
+ "name": "component_klass",
5450
+ "type": "Class",
5451
+ "default": "N/A",
5452
+ "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
5453
+ },
5269
5454
  {
5270
5455
  "name": "system_arguments",
5271
5456
  "type": "Hash",
5272
5457
  "default": "N/A",
5273
- "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
5458
+ "description": "The arguments accepted by `component_klass`."
5274
5459
  }
5275
5460
  ]
5276
5461
  }
@@ -10051,6 +10236,19 @@
10051
10236
  "color-contrast"
10052
10237
  ]
10053
10238
  }
10239
+ },
10240
+ {
10241
+ "preview_path": "primer/beta/blankslate/inside_flex_container",
10242
+ "name": "inside_flex_container",
10243
+ "snapshot": "false",
10244
+ "skip_rules": {
10245
+ "wont_fix": [
10246
+ "region"
10247
+ ],
10248
+ "will_fix": [
10249
+ "color-contrast"
10250
+ ]
10251
+ }
10054
10252
  }
10055
10253
  ],
10056
10254
  "subcomponents": [
@@ -13191,11 +13389,17 @@
13191
13389
  "name": "heading",
13192
13390
  "description": "Heading text rendered above the list of items.",
13193
13391
  "parameters": [
13392
+ {
13393
+ "name": "component_klass",
13394
+ "type": "Class",
13395
+ "default": "N/A",
13396
+ "description": "The class to use instead of the default {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
13397
+ },
13194
13398
  {
13195
13399
  "name": "system_arguments",
13196
13400
  "type": "Hash",
13197
13401
  "default": "N/A",
13198
- "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList::Heading{{/link_to_component}}."
13402
+ "description": "The arguments accepted by `component_klass`."
13199
13403
  }
13200
13404
  ]
13201
13405
  }
@@ -15722,6 +15926,115 @@
15722
15926
 
15723
15927
  ]
15724
15928
  },
15929
+ {
15930
+ "fully_qualified_name": "Primer::OpenProject::InputGroup",
15931
+ "description": "`InputGroup` is composed of a text field input with a trailing action",
15932
+ "accessibility_docs": null,
15933
+ "is_form_component": false,
15934
+ "is_published": true,
15935
+ "requires_js": false,
15936
+ "component": "OpenProject::InputGroup",
15937
+ "status": "open_project",
15938
+ "a11y_reviewed": false,
15939
+ "short_name": "OpenProjectInputGroup",
15940
+ "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/input_group.rb",
15941
+ "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/input_group/default/",
15942
+ "parameters": [
15943
+ {
15944
+ "name": "system_arguments",
15945
+ "type": "Hash",
15946
+ "default": "N/A",
15947
+ "description": "{{link_to_system_arguments_docs}}"
15948
+ }
15949
+ ],
15950
+ "slots": [
15951
+ {
15952
+ "name": "trailing_action",
15953
+ "description": "A component that will render to the right of the label.\n\nTo render a clipboardCopyButton, call the `with_trailing_action_clipboard_copy_button` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::ClipboardCopyButton{{/link_to_component}}.\n\nTo render an iconButton, call the `with_trailing_action_icon` method, which accepts the arguments accepted by {{#link_to_component}}Primer::Beta::Octicon{{/link_to_component}}.",
15954
+ "parameters": [
15955
+
15956
+ ]
15957
+ },
15958
+ {
15959
+ "name": "text_input",
15960
+ "description": "Input that is the central part of the input group\n\nSince the central use case of this component is a copyClipboard Button next to the input, it is readonly by default",
15961
+ "parameters": [
15962
+ {
15963
+ "name": "readonly",
15964
+ "type": "Boolean",
15965
+ "default": "N/A",
15966
+ "description": "Shall the text field be editable."
15967
+ },
15968
+ {
15969
+ "name": "system_arguments",
15970
+ "type": "Hash",
15971
+ "default": "N/A",
15972
+ "description": "{{link_to_system_arguments_docs}}"
15973
+ }
15974
+ ]
15975
+ }
15976
+ ],
15977
+ "methods": [
15978
+
15979
+ ],
15980
+ "previews": [
15981
+ {
15982
+ "preview_path": "primer/open_project/input_group/default",
15983
+ "name": "default",
15984
+ "snapshot": "true",
15985
+ "skip_rules": {
15986
+ "wont_fix": [
15987
+ "region"
15988
+ ],
15989
+ "will_fix": [
15990
+ "color-contrast"
15991
+ ]
15992
+ }
15993
+ },
15994
+ {
15995
+ "preview_path": "primer/open_project/input_group/playground",
15996
+ "name": "playground",
15997
+ "snapshot": "false",
15998
+ "skip_rules": {
15999
+ "wont_fix": [
16000
+ "region"
16001
+ ],
16002
+ "will_fix": [
16003
+ "color-contrast"
16004
+ ]
16005
+ }
16006
+ },
16007
+ {
16008
+ "preview_path": "primer/open_project/input_group/icon_button",
16009
+ "name": "icon_button",
16010
+ "snapshot": "false",
16011
+ "skip_rules": {
16012
+ "wont_fix": [
16013
+ "region"
16014
+ ],
16015
+ "will_fix": [
16016
+ "color-contrast"
16017
+ ]
16018
+ }
16019
+ },
16020
+ {
16021
+ "preview_path": "primer/open_project/input_group/small_input_width",
16022
+ "name": "small_input_width",
16023
+ "snapshot": "false",
16024
+ "skip_rules": {
16025
+ "wont_fix": [
16026
+ "region"
16027
+ ],
16028
+ "will_fix": [
16029
+ "color-contrast"
16030
+ ]
16031
+ }
16032
+ }
16033
+ ],
16034
+ "subcomponents": [
16035
+
16036
+ ]
16037
+ },
15725
16038
  {
15726
16039
  "fully_qualified_name": "Primer::OpenProject::PageHeader",
15727
16040
  "description": "A ViewComponent PageHeader inspired by the primer react variant",