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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +49 -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 +1 -1
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.pcss +3 -3
- 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/border_box.rb +3 -0
- 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/open_project/input_group.css +1 -0
- data/app/components/primer/open_project/input_group.css.json +11 -0
- data/app/components/primer/open_project/input_group.css.map +1 -0
- data/app/components/primer/open_project/input_group.html.erb +4 -0
- data/app/components/primer/open_project/input_group.pcss +25 -0
- data/app/components/primer/open_project/input_group.rb +93 -0
- data/app/components/primer/primer.d.ts +1 -0
- data/app/components/primer/primer.js +1 -0
- data/app/components/primer/primer.pcss +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 +2 -2
- 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/border_box_preview.rb +3 -2
- data/previews/primer/beta/nav_list_preview.rb +10 -1
- data/previews/primer/open_project/input_group_preview.rb +63 -0
- data/static/arguments.json +108 -1
- data/static/audited_at.json +5 -1
- data/static/classes.json +6 -0
- data/static/constants.json +28 -0
- data/static/info_arch.json +365 -52
- data/static/previews.json +112 -0
- data/static/statuses.json +4 -0
- metadata +21 -2
data/static/constants.json
CHANGED
@@ -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",
|
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": [
|
1727
1870
|
{
|
1728
|
-
"name": "
|
1729
|
-
"
|
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": "
|
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
|
}
|
@@ -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",
|