openproject-primer_view_components 0.18.1 → 0.20.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (100) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +61 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/action_bar_element.d.ts +3 -2
  4. data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
  5. data/app/assets/javascripts/app/components/primer/beta/nav_list.d.ts +0 -11
  6. data/app/assets/javascripts/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
  7. data/app/assets/javascripts/app/components/primer/primer.d.ts +2 -0
  8. data/app/assets/javascripts/app/components/primer/scrollable_region.d.ts +13 -0
  9. data/app/assets/javascripts/primer_view_components.js +1 -1
  10. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  11. data/app/assets/styles/primer_view_components.css +1 -1
  12. data/app/assets/styles/primer_view_components.css.map +1 -1
  13. data/app/components/primer/alpha/action_bar.css +1 -1
  14. data/app/components/primer/alpha/action_bar.css.map +1 -1
  15. data/app/components/primer/alpha/action_bar.pcss +8 -6
  16. data/app/components/primer/alpha/action_bar_element.d.ts +3 -2
  17. data/app/components/primer/alpha/action_bar_element.js +80 -97
  18. data/app/components/primer/alpha/action_bar_element.ts +84 -89
  19. data/app/components/primer/alpha/action_list/item.rb +13 -1
  20. data/app/components/primer/alpha/action_list.css +1 -1
  21. data/app/components/primer/alpha/action_list.css.json +1 -0
  22. data/app/components/primer/alpha/action_list.css.map +1 -1
  23. data/app/components/primer/alpha/action_list.pcss +3 -1
  24. data/app/components/primer/alpha/action_list.rb +5 -4
  25. data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
  26. data/app/components/primer/alpha/action_menu/action_menu_element.js +92 -15
  27. data/app/components/primer/alpha/action_menu/action_menu_element.ts +115 -13
  28. data/app/components/primer/alpha/action_menu/group.rb +23 -0
  29. data/app/components/primer/alpha/action_menu/heading.rb +17 -0
  30. data/app/components/primer/alpha/action_menu/list.html.erb +1 -0
  31. data/app/components/primer/alpha/action_menu/list.rb +62 -51
  32. data/app/components/primer/alpha/action_menu/list_wrapper.rb +40 -0
  33. data/app/components/primer/alpha/action_menu.rb +38 -1
  34. data/app/components/primer/alpha/banner.html.erb +1 -1
  35. data/app/components/primer/alpha/banner.rb +5 -1
  36. data/app/components/primer/alpha/dialog.html.erb +3 -1
  37. data/app/components/primer/alpha/dialog.rb +5 -1
  38. data/app/components/primer/alpha/layout.css +1 -1
  39. data/app/components/primer/alpha/layout.css.map +1 -1
  40. data/app/components/primer/alpha/modal_dialog.ts +1 -1
  41. data/app/components/primer/alpha/overlay.css +1 -1
  42. data/app/components/primer/alpha/overlay.css.json +4 -2
  43. data/app/components/primer/alpha/overlay.css.map +1 -1
  44. data/app/components/primer/alpha/overlay.pcss +12 -2
  45. data/app/components/primer/alpha/text_field.css +1 -1
  46. data/app/components/primer/alpha/text_field.css.map +1 -1
  47. data/app/components/primer/alpha/text_field.pcss +4 -3
  48. data/app/components/primer/alpha/tool_tip.js +22 -5
  49. data/app/components/primer/alpha/tool_tip.ts +24 -5
  50. data/app/components/primer/alpha/underline_nav.css +1 -1
  51. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  52. data/app/components/primer/base_component.rb +20 -18
  53. data/app/components/primer/beta/auto_complete/auto_complete.html.erb +1 -7
  54. data/app/components/primer/beta/auto_complete/item.rb +1 -1
  55. data/app/components/primer/beta/auto_complete.rb +6 -1
  56. data/app/components/primer/beta/base_button.rb +2 -3
  57. data/app/components/primer/beta/blankslate.css +1 -1
  58. data/app/components/primer/beta/blankslate.css.map +1 -1
  59. data/app/components/primer/beta/blankslate.pcss +3 -3
  60. data/app/components/primer/beta/button.css +1 -1
  61. data/app/components/primer/beta/button.css.json +9 -8
  62. data/app/components/primer/beta/button.css.map +1 -1
  63. data/app/components/primer/beta/button.pcss +15 -11
  64. data/app/components/primer/beta/nav_list/group.html.erb +7 -5
  65. data/app/components/primer/beta/nav_list/group.rb +2 -2
  66. data/app/components/primer/beta/nav_list.d.ts +0 -11
  67. data/app/components/primer/beta/nav_list.js +2 -85
  68. data/app/components/primer/beta/nav_list.ts +1 -85
  69. data/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
  70. data/app/components/primer/beta/nav_list_group_element.js +108 -0
  71. data/app/components/primer/beta/nav_list_group_element.ts +97 -0
  72. data/app/components/primer/beta/relative_time.rb +4 -4
  73. data/app/components/primer/component.rb +3 -0
  74. data/app/components/primer/primer.d.ts +2 -0
  75. data/app/components/primer/primer.js +2 -0
  76. data/app/components/primer/primer.ts +2 -0
  77. data/app/components/primer/scrollable_region.d.ts +13 -0
  78. data/app/components/primer/scrollable_region.js +52 -0
  79. data/app/components/primer/scrollable_region.ts +48 -0
  80. data/app/lib/primer/experimental_render_helpers.rb +32 -0
  81. data/app/lib/primer/experimental_slot_helpers.rb +30 -0
  82. data/lib/primer/classify/utilities.rb +3 -4
  83. data/lib/primer/view_components/version.rb +2 -2
  84. data/lib/primer/yard/lookbook_pages_backend.rb +2 -2
  85. data/previews/primer/alpha/action_menu_preview/in_scroll_container.html.erb +11 -0
  86. data/previews/primer/alpha/action_menu_preview.rb +80 -7
  87. data/previews/primer/alpha/banner_preview.rb +3 -2
  88. data/previews/primer/alpha/dialog_preview/with_auto_complete.html.erb +8 -0
  89. data/previews/primer/alpha/dialog_preview.rb +17 -0
  90. data/previews/primer/beta/blankslate_preview/inside_flex_container.html.erb +6 -0
  91. data/previews/primer/beta/blankslate_preview.rb +3 -0
  92. data/previews/primer/beta/nav_list_preview.rb +10 -1
  93. data/static/arguments.json +92 -1
  94. data/static/audited_at.json +4 -1
  95. data/static/classes.json +3 -0
  96. data/static/constants.json +9 -0
  97. data/static/info_arch.json +256 -52
  98. data/static/previews.json +52 -0
  99. data/static/statuses.json +3 -0
  100. metadata +19 -2
@@ -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": [
1870
+ {
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
+ },
1727
1882
  {
1728
- "name": "with_item",
1729
- "description": "Adds a new item to the list.",
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
  }
data/static/previews.json CHANGED
@@ -424,6 +424,32 @@
424
424
  ]
425
425
  }
426
426
  },
427
+ {
428
+ "preview_path": "primer/alpha/action_menu/with_groups",
429
+ "name": "with_groups",
430
+ "snapshot": "interactive",
431
+ "skip_rules": {
432
+ "wont_fix": [
433
+ "region"
434
+ ],
435
+ "will_fix": [
436
+ "color-contrast"
437
+ ]
438
+ }
439
+ },
440
+ {
441
+ "preview_path": "primer/alpha/action_menu/with_items_and_groups",
442
+ "name": "with_items_and_groups",
443
+ "snapshot": "interactive",
444
+ "skip_rules": {
445
+ "wont_fix": [
446
+ "region"
447
+ ],
448
+ "will_fix": [
449
+ "color-contrast"
450
+ ]
451
+ }
452
+ },
427
453
  {
428
454
  "preview_path": "primer/alpha/action_menu/wide",
429
455
  "name": "wide",
@@ -1714,6 +1740,19 @@
1714
1740
  "color-contrast"
1715
1741
  ]
1716
1742
  }
1743
+ },
1744
+ {
1745
+ "preview_path": "primer/beta/blankslate/inside_flex_container",
1746
+ "name": "inside_flex_container",
1747
+ "snapshot": "false",
1748
+ "skip_rules": {
1749
+ "wont_fix": [
1750
+ "region"
1751
+ ],
1752
+ "will_fix": [
1753
+ "color-contrast"
1754
+ ]
1755
+ }
1717
1756
  }
1718
1757
  ]
1719
1758
  },
@@ -3057,6 +3096,19 @@
3057
3096
  ]
3058
3097
  }
3059
3098
  },
3099
+ {
3100
+ "preview_path": "primer/alpha/dialog/with_auto_complete",
3101
+ "name": "with_auto_complete",
3102
+ "snapshot": "interactive",
3103
+ "skip_rules": {
3104
+ "wont_fix": [
3105
+ "region"
3106
+ ],
3107
+ "will_fix": [
3108
+ "color-contrast"
3109
+ ]
3110
+ }
3111
+ },
3060
3112
  {
3061
3113
  "preview_path": "primer/alpha/dialog/body_has_scrollbar_overflow",
3062
3114
  "name": "body_has_scrollbar_overflow",
data/static/statuses.json CHANGED
@@ -8,7 +8,10 @@
8
8
  "Primer::Alpha::ActionList::Heading": "alpha",
9
9
  "Primer::Alpha::ActionList::Item": "alpha",
10
10
  "Primer::Alpha::ActionMenu": "alpha",
11
+ "Primer::Alpha::ActionMenu::Group": "alpha",
12
+ "Primer::Alpha::ActionMenu::Heading": "alpha",
11
13
  "Primer::Alpha::ActionMenu::List": "alpha",
14
+ "Primer::Alpha::ActionMenu::ListWrapper": "alpha",
12
15
  "Primer::Alpha::AutoComplete": "deprecated",
13
16
  "Primer::Alpha::AutoComplete::Item": "deprecated",
14
17
  "Primer::Alpha::Banner": "alpha",
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: openproject-primer_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.18.1
4
+ version: 0.20.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2023-11-28 00:00:00.000000000 Z
12
+ date: 2024-01-08 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionview
@@ -97,9 +97,11 @@ files:
97
97
  - app/assets/javascripts/app/components/primer/beta/auto_complete/auto_complete.d.ts
98
98
  - app/assets/javascripts/app/components/primer/beta/clipboard_copy.d.ts
99
99
  - app/assets/javascripts/app/components/primer/beta/nav_list.d.ts
100
+ - app/assets/javascripts/app/components/primer/beta/nav_list_group_element.d.ts
100
101
  - app/assets/javascripts/app/components/primer/beta/relative_time.d.ts
101
102
  - app/assets/javascripts/app/components/primer/focus_group.d.ts
102
103
  - app/assets/javascripts/app/components/primer/primer.d.ts
104
+ - app/assets/javascripts/app/components/primer/scrollable_region.d.ts
103
105
  - app/assets/javascripts/lib/primer/forms/primer_multi_input.d.ts
104
106
  - app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts
105
107
  - app/assets/javascripts/lib/primer/forms/toggle_switch_input.d.ts
@@ -136,7 +138,11 @@ files:
136
138
  - app/components/primer/alpha/action_menu/action_menu_element.d.ts
137
139
  - app/components/primer/alpha/action_menu/action_menu_element.js
138
140
  - app/components/primer/alpha/action_menu/action_menu_element.ts
141
+ - app/components/primer/alpha/action_menu/group.rb
142
+ - app/components/primer/alpha/action_menu/heading.rb
143
+ - app/components/primer/alpha/action_menu/list.html.erb
139
144
  - app/components/primer/alpha/action_menu/list.rb
145
+ - app/components/primer/alpha/action_menu/list_wrapper.rb
140
146
  - app/components/primer/alpha/auto_complete.css
141
147
  - app/components/primer/alpha/auto_complete.css.json
142
148
  - app/components/primer/alpha/auto_complete.css.map
@@ -384,6 +390,9 @@ files:
384
390
  - app/components/primer/beta/nav_list/heading.rb
385
391
  - app/components/primer/beta/nav_list/item.html.erb
386
392
  - app/components/primer/beta/nav_list/item.rb
393
+ - app/components/primer/beta/nav_list_group_element.d.ts
394
+ - app/components/primer/beta/nav_list_group_element.js
395
+ - app/components/primer/beta/nav_list_group_element.ts
387
396
  - app/components/primer/beta/octicon.html.erb
388
397
  - app/components/primer/beta/octicon.rb
389
398
  - app/components/primer/beta/popover.css
@@ -479,6 +488,9 @@ files:
479
488
  - app/components/primer/primer.js
480
489
  - app/components/primer/primer.pcss
481
490
  - app/components/primer/primer.ts
491
+ - app/components/primer/scrollable_region.d.ts
492
+ - app/components/primer/scrollable_region.js
493
+ - app/components/primer/scrollable_region.ts
482
494
  - app/components/primer/tooltip.rb
483
495
  - app/components/primer/truncate.css
484
496
  - app/components/primer/truncate.css.json
@@ -527,6 +539,8 @@ files:
527
539
  - app/lib/primer/css/layout.css.json
528
540
  - app/lib/primer/css/utilities.css
529
541
  - app/lib/primer/css/utilities.css.json
542
+ - app/lib/primer/experimental_render_helpers.rb
543
+ - app/lib/primer/experimental_slot_helpers.rb
530
544
  - app/lib/primer/fetch_or_fallback_helper.rb
531
545
  - app/lib/primer/join_style_arguments_helper.rb
532
546
  - app/lib/primer/octicon/cache.rb
@@ -723,6 +737,7 @@ files:
723
737
  - previews/primer/alpha/action_menu_preview.rb
724
738
  - previews/primer/alpha/action_menu_preview/align_end.html.erb
725
739
  - previews/primer/alpha/action_menu_preview/content_labels.html.erb
740
+ - previews/primer/alpha/action_menu_preview/in_scroll_container.html.erb
726
741
  - previews/primer/alpha/action_menu_preview/multiple_select_form.html.erb
727
742
  - previews/primer/alpha/action_menu_preview/opens_dialog.html.erb
728
743
  - previews/primer/alpha/action_menu_preview/single_select_form.html.erb
@@ -743,6 +758,7 @@ files:
743
758
  - previews/primer/alpha/dialog_preview/custom_header.html.erb
744
759
  - previews/primer/alpha/dialog_preview/nested_dialog.html.erb
745
760
  - previews/primer/alpha/dialog_preview/test.html.erb
761
+ - previews/primer/alpha/dialog_preview/with_auto_complete.html.erb
746
762
  - previews/primer/alpha/dialog_preview/with_footer.html.erb
747
763
  - previews/primer/alpha/dialog_preview/with_form.html.erb
748
764
  - previews/primer/alpha/dialog_preview/with_header.html.erb
@@ -801,6 +817,7 @@ files:
801
817
  - previews/primer/beta/avatar_stack_preview.rb
802
818
  - previews/primer/beta/base_button_preview.rb
803
819
  - previews/primer/beta/blankslate_preview.rb
820
+ - previews/primer/beta/blankslate_preview/inside_flex_container.html.erb
804
821
  - previews/primer/beta/border_box_preview.rb
805
822
  - previews/primer/beta/breadcrumbs_preview.rb
806
823
  - previews/primer/beta/button_group_preview.rb