primer_view_components 0.14.0 → 0.15.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 +30 -0
- data/app/assets/javascripts/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
- data/app/assets/javascripts/app/components/primer/beta/nav_list.d.ts +0 -11
- data/app/assets/javascripts/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
- data/app/assets/javascripts/app/components/primer/primer.d.ts +1 -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/item.rb +13 -1
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.json +1 -0
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +3 -1
- data/app/components/primer/alpha/action_list.rb +5 -4
- data/app/components/primer/alpha/action_menu/action_menu_element.d.ts +20 -0
- data/app/components/primer/alpha/action_menu/action_menu_element.js +85 -11
- data/app/components/primer/alpha/action_menu/action_menu_element.ts +110 -12
- data/app/components/primer/alpha/action_menu/group.rb +23 -0
- data/app/components/primer/alpha/action_menu/heading.rb +17 -0
- data/app/components/primer/alpha/action_menu/list.html.erb +1 -0
- data/app/components/primer/alpha/action_menu/list.rb +62 -51
- data/app/components/primer/alpha/action_menu/list_wrapper.rb +40 -0
- data/app/components/primer/alpha/action_menu.rb +38 -1
- data/app/components/primer/alpha/overlay.css +1 -1
- data/app/components/primer/alpha/overlay.css.json +2 -1
- data/app/components/primer/alpha/overlay.css.map +1 -1
- data/app/components/primer/alpha/overlay.pcss +6 -2
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +2 -2
- data/app/components/primer/alpha/tool_tip.js +8 -4
- data/app/components/primer/alpha/tool_tip.ts +9 -4
- data/app/components/primer/beta/auto_complete/auto_complete.html.erb +1 -7
- data/app/components/primer/beta/auto_complete/item.rb +1 -1
- data/app/components/primer/beta/auto_complete.rb +6 -1
- data/app/components/primer/beta/base_button.rb +2 -3
- data/app/components/primer/beta/blankslate.css +1 -1
- data/app/components/primer/beta/blankslate.css.map +1 -1
- data/app/components/primer/beta/blankslate.pcss +3 -3
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.json +9 -8
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +15 -11
- data/app/components/primer/beta/nav_list/group.html.erb +7 -5
- data/app/components/primer/beta/nav_list/group.rb +2 -2
- data/app/components/primer/beta/nav_list.d.ts +0 -11
- data/app/components/primer/beta/nav_list.js +2 -85
- data/app/components/primer/beta/nav_list.ts +1 -85
- data/app/components/primer/beta/nav_list_group_element.d.ts +19 -0
- data/app/components/primer/beta/nav_list_group_element.js +108 -0
- data/app/components/primer/beta/nav_list_group_element.ts +97 -0
- data/app/components/primer/beta/relative_time.rb +4 -4
- data/app/components/primer/component.rb +3 -0
- data/app/components/primer/primer.d.ts +1 -0
- data/app/components/primer/primer.js +1 -0
- data/app/components/primer/primer.ts +1 -0
- data/app/lib/primer/experimental_render_helpers.rb +32 -0
- data/app/lib/primer/experimental_slot_helpers.rb +30 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/primer/yard/lookbook_pages_backend.rb +2 -2
- data/previews/primer/alpha/action_menu_preview.rb +73 -7
- data/previews/primer/alpha/dialog_preview/with_auto_complete.html.erb +8 -0
- data/previews/primer/alpha/dialog_preview.rb +17 -0
- data/previews/primer/beta/blankslate_preview/inside_flex_container.html.erb +6 -0
- data/previews/primer/beta/blankslate_preview.rb +3 -0
- data/previews/primer/beta/nav_list_preview.rb +10 -1
- data/static/arguments.json +92 -1
- data/static/audited_at.json +4 -1
- data/static/classes.json +3 -0
- data/static/constants.json +9 -0
- data/static/info_arch.json +256 -52
- data/static/previews.json +52 -0
- data/static/statuses.json +3 -0
- metadata +14 -2
data/static/info_arch.json
CHANGED
@@ -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
|
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":
|
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
|
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": "
|
1729
|
-
"
|
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": "
|
1733
|
-
"type": "
|
1734
|
-
"default": "
|
1735
|
-
"description": "
|
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": "
|
1934
|
+
"description": "The arguments accepted by `component_klass`."
|
1742
1935
|
}
|
1743
1936
|
]
|
1744
1937
|
},
|
1745
1938
|
{
|
1746
|
-
"name": "
|
1747
|
-
"description": "
|
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": "
|
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
|
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
|
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
|
},
|
@@ -3010,6 +3049,19 @@
|
|
3010
3049
|
]
|
3011
3050
|
}
|
3012
3051
|
},
|
3052
|
+
{
|
3053
|
+
"preview_path": "primer/alpha/dialog/with_auto_complete",
|
3054
|
+
"name": "with_auto_complete",
|
3055
|
+
"snapshot": "interactive",
|
3056
|
+
"skip_rules": {
|
3057
|
+
"wont_fix": [
|
3058
|
+
"region"
|
3059
|
+
],
|
3060
|
+
"will_fix": [
|
3061
|
+
"color-contrast"
|
3062
|
+
]
|
3063
|
+
}
|
3064
|
+
},
|
3013
3065
|
{
|
3014
3066
|
"preview_path": "primer/alpha/dialog/body_has_scrollbar_overflow",
|
3015
3067
|
"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,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: primer_view_components
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.15.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- GitHub Open Source
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2023-
|
11
|
+
date: 2023-12-01 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: actionview
|
@@ -97,6 +97,7 @@ 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
|
@@ -136,7 +137,11 @@ files:
|
|
136
137
|
- app/components/primer/alpha/action_menu/action_menu_element.d.ts
|
137
138
|
- app/components/primer/alpha/action_menu/action_menu_element.js
|
138
139
|
- app/components/primer/alpha/action_menu/action_menu_element.ts
|
140
|
+
- app/components/primer/alpha/action_menu/group.rb
|
141
|
+
- app/components/primer/alpha/action_menu/heading.rb
|
142
|
+
- app/components/primer/alpha/action_menu/list.html.erb
|
139
143
|
- app/components/primer/alpha/action_menu/list.rb
|
144
|
+
- app/components/primer/alpha/action_menu/list_wrapper.rb
|
140
145
|
- app/components/primer/alpha/auto_complete.css
|
141
146
|
- app/components/primer/alpha/auto_complete.css.json
|
142
147
|
- app/components/primer/alpha/auto_complete.css.map
|
@@ -384,6 +389,9 @@ files:
|
|
384
389
|
- app/components/primer/beta/nav_list/heading.rb
|
385
390
|
- app/components/primer/beta/nav_list/item.html.erb
|
386
391
|
- app/components/primer/beta/nav_list/item.rb
|
392
|
+
- app/components/primer/beta/nav_list_group_element.d.ts
|
393
|
+
- app/components/primer/beta/nav_list_group_element.js
|
394
|
+
- app/components/primer/beta/nav_list_group_element.ts
|
387
395
|
- app/components/primer/beta/octicon.html.erb
|
388
396
|
- app/components/primer/beta/octicon.rb
|
389
397
|
- app/components/primer/beta/popover.css
|
@@ -495,6 +503,8 @@ files:
|
|
495
503
|
- app/lib/primer/css/layout.css.json
|
496
504
|
- app/lib/primer/css/utilities.css
|
497
505
|
- app/lib/primer/css/utilities.css.json
|
506
|
+
- app/lib/primer/experimental_render_helpers.rb
|
507
|
+
- app/lib/primer/experimental_slot_helpers.rb
|
498
508
|
- app/lib/primer/fetch_or_fallback_helper.rb
|
499
509
|
- app/lib/primer/join_style_arguments_helper.rb
|
500
510
|
- app/lib/primer/octicon/cache.rb
|
@@ -711,6 +721,7 @@ files:
|
|
711
721
|
- previews/primer/alpha/dialog_preview/custom_header.html.erb
|
712
722
|
- previews/primer/alpha/dialog_preview/nested_dialog.html.erb
|
713
723
|
- previews/primer/alpha/dialog_preview/test.html.erb
|
724
|
+
- previews/primer/alpha/dialog_preview/with_auto_complete.html.erb
|
714
725
|
- previews/primer/alpha/dialog_preview/with_footer.html.erb
|
715
726
|
- previews/primer/alpha/dialog_preview/with_form.html.erb
|
716
727
|
- previews/primer/alpha/dialog_preview/with_header.html.erb
|
@@ -769,6 +780,7 @@ files:
|
|
769
780
|
- previews/primer/beta/avatar_stack_preview.rb
|
770
781
|
- previews/primer/beta/base_button_preview.rb
|
771
782
|
- previews/primer/beta/blankslate_preview.rb
|
783
|
+
- previews/primer/beta/blankslate_preview/inside_flex_container.html.erb
|
772
784
|
- previews/primer/beta/border_box_preview.rb
|
773
785
|
- previews/primer/beta/breadcrumbs_preview.rb
|
774
786
|
- previews/primer/beta/button_group_preview.rb
|