openproject-primer_view_components 0.66.1 → 0.67.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (40) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +16 -0
  3. data/app/assets/javascripts/components/primer/open_project/tree_view/tree_view.d.ts +2 -0
  4. data/app/assets/javascripts/components/primer/open_project/tree_view/tree_view_sub_tree_node_element.d.ts +4 -2
  5. data/app/assets/javascripts/primer_view_components.js +1 -1
  6. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  7. data/app/assets/styles/primer_view_components.css +1 -1
  8. data/app/assets/styles/primer_view_components.css.map +1 -1
  9. data/app/components/primer/open_project/border_box/collapsible_header.rb +3 -0
  10. data/app/components/primer/open_project/collapsible_section.rb +7 -1
  11. data/app/components/primer/open_project/tree_view/node.html.erb +2 -2
  12. data/app/components/primer/open_project/tree_view/node.rb +49 -26
  13. data/app/components/primer/open_project/tree_view/skeleton_loader.html.erb +1 -1
  14. data/app/components/primer/open_project/tree_view/spinner_loader.html.erb +2 -2
  15. data/app/components/primer/open_project/tree_view/sub_tree.html.erb +1 -1
  16. data/app/components/primer/open_project/tree_view/sub_tree.rb +8 -1
  17. data/app/components/primer/open_project/tree_view/sub_tree_node.rb +9 -3
  18. data/app/components/primer/open_project/tree_view/tree_view.d.ts +2 -0
  19. data/app/components/primer/open_project/tree_view/tree_view.js +29 -9
  20. data/app/components/primer/open_project/tree_view/tree_view.ts +31 -10
  21. data/app/components/primer/open_project/tree_view/tree_view_roving_tab_index.js +11 -7
  22. data/app/components/primer/open_project/tree_view/tree_view_roving_tab_index.ts +13 -8
  23. data/app/components/primer/open_project/tree_view/tree_view_sub_tree_node_element.d.ts +4 -2
  24. data/app/components/primer/open_project/tree_view/tree_view_sub_tree_node_element.js +60 -30
  25. data/app/components/primer/open_project/tree_view/tree_view_sub_tree_node_element.ts +66 -33
  26. data/app/components/primer/open_project/tree_view.css +1 -1
  27. data/app/components/primer/open_project/tree_view.css.json +9 -6
  28. data/app/components/primer/open_project/tree_view.css.map +1 -1
  29. data/app/components/primer/open_project/tree_view.pcss +53 -38
  30. data/app/components/primer/open_project/tree_view.rb +88 -24
  31. data/lib/primer/view_components/version.rb +2 -2
  32. data/previews/primer/open_project/border_box/collapsible_header_preview/playground.html.erb +1 -1
  33. data/previews/primer/open_project/tree_view_preview/buttons.html.erb +10 -0
  34. data/previews/primer/open_project/tree_view_preview/links.html.erb +17 -0
  35. data/previews/primer/open_project/tree_view_preview.rb +29 -3
  36. data/static/arguments.json +38 -2
  37. data/static/constants.json +17 -0
  38. data/static/info_arch.json +95 -3
  39. data/static/previews.json +26 -0
  40. metadata +4 -2
@@ -18761,6 +18761,12 @@
18761
18761
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/file_tree_view.rb",
18762
18762
  "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/file_tree_view/default/",
18763
18763
  "parameters": [
18764
+ {
18765
+ "name": "node_variant",
18766
+ "type": "Symbol",
18767
+ "default": "`:div`",
18768
+ "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
18769
+ },
18764
18770
  {
18765
18771
  "name": "system_arguments",
18766
18772
  "type": "Hash",
@@ -20446,7 +20452,7 @@
20446
20452
  },
20447
20453
  {
20448
20454
  "fully_qualified_name": "Primer::OpenProject::TreeView",
20449
- "description": "TreeView is a hierarchical list of items that may have a parent-child relationship where children\ncan be toggled into view by expanding or collapsing their parent item.\n\n## Terminology\n\nConsider the following tree structure:\n\nsrc\n├ button.rb\n└ action_list\n ├ item.rb\n └ header.rb\n\n1. **Node**. A node is an item in the tree. Nodes can either be \"leaf\" nodes (i.e. have no children), or \"sub-tree\"\nnodes, which do have children. In the example above, button.rb, item.rb, and header.rb are all leaf nodes, while\naction_list is a sub-tree node.\n2. **Path**. A node's path is like its ID. It's an array of strings containing the current node's label and all the\nlabels of its ancestors, in order. In the example above, header.rb's path is [\"src\", \"action_list\", \"header.rb\"].\n\n## Static nodes\n\nThe `TreeView` component allows items to be provided statically or loaded dynamically from the server.\nProviding items statically is done using the `leaf` and `sub_tree` slots:\n\n```erb\n<%= render(Primer::OpenProject::TreeView.new) do |tree| %>\n <% tree.with_sub_tree(label: \"Directory\") do |sub_tree| %>\n <% sub_tree.with_leaf(label: \"File 1\")\n <% end %>\n <% tree.with_leaf(label: \"File 2\") %>\n<% end %>\n```\n\n## Dynamic nodes\n\nTree nodes can also be fetched dynamically from the server and will require creating a Rails controller action\nto respond with the list of nodes. Unlike other Primer components, `TreeView` allows the programmer to specify\nloading behavior on a per-sub-tree basis, i.e. each sub-tree must specify how its nodes are loaded. To load nodes\ndynamically for a given sub-tree, configure it with either a loading spinner or a loading skeleton, and provide\nthe URL to fetch nodes from:\n\n```erb\n<%= render(Primer::OpenProject::TreeView.new) do |tree| %>\n <% tree.with_sub_tree(label: \"Directory\") do |sub_tree| %>\n <% sub_tree.with_loading_spinner(src: tree_view_items_path) %>\n <% end %>\n<% end %>\n```\n\nDefine a controller action to serve the list of nodes. The `TreeView` component automatically includes the\nsub-tree's path as a GET parameter, encoded as a JSON array.\n\n```ruby\nclass TreeViewItemsController < ApplicationController\n def show\n @path = JSON.parse(params[:path])\n @results = get_tree_items(starting_at: path)\n end\nend\n```\n\nResponses must be HTML fragments, eg. have a content type of `text/html+fragment`. This content type isn't\navailable by default in Rails, so you may have to register it eg. in an initializer:\n\n```ruby\nMime::Type.register(\"text/fragment+html\", :html_fragment)\n```\n\nRender a `Primer::OpenProject::TreeView::SubTree` in the action's template, tree_view_items/show.html_fragment.erb:\n\n```erb\n<%= render(Primer::OpenProject::TreeView::SubTree.new(path: @path)) do |tree| %>\n <% tree.with_leaf(...) %>\n <% tree.with_sub_tree(...) do |sub_tree| %>\n ...\n <% end %>\n<% end %>\n```\n\n### JavaScript API\n\n`TreeView`s render a `<tree-view>` custom element that exposes behavior to the client.\n\n|Name |Notes |\n|:-----------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------|\n|`getNodePath(node: Element): string[]` |Returns the path to the given node. |\n|`getNodeType(node: Element): TreeViewNodeType | null` |Returns either `\"leaf\"` or `\"sub-tree\"`. |\n|`markCurrentAtPath(path: string[])` |Marks the node as the \"current\" node, which appears visually distinct from other nodes. |\n|`get currentNode(): HTMLLIElement | null` |Returns the current node. |\n|`expandAtPath(path: string[])` |Expands the sub-tree at `path`. |\n|`collapseAtPath(path: string[])` |Collapses the sub-tree at `path`. |\n|`toggleAtPath(path: string[])` |If the sub-tree at `path` is collapsed, this function expands it, and vice-versa. |\n|`checkAtPath(path: string[])` |If the node at `path` has a checkbox, this function checks it. |\n|`uncheckAtPath(path: string[])` |If the node at `path` has a checkbox, this function unchecks it. |\n|`toggleCheckedAtPath(path: string[])` |If the sub-tree at `path` is checked, this function unchecks it, and vice-versa. |\n|`checkedValueAtPath(path: string[]): TreeViewCheckedValue` |Returns `\"true\"` (all child nodes are checked), `\"false\"` (no child nodes are checked), or `\"mixed\"` (some child nodes are checked, some are not).|\n|`nodeAtPath(path: string[], selector?: string): Element | null` |Returns the node for the given `path`, either a leaf node or sub-tree node. |\n|`subTreeAtPath(path: string[]): TreeViewSubTreeNodeElement | null`|Returns the sub-tree at the given `path`, if it exists. |\n|`leafAtPath(path: string[]): HTMLLIElement | null` |Returns the leaf node at the given `path`, if it exists. |\n|`getNodeCheckedValue(node: Element): TreeViewCheckedValue` |The same as `checkedValueAtPath`, but accepts a node instead of a path. |\n\n#### Events\n\nThe events enumerated below include node information by way of the `TreeViewNodeInfo` object, which has the\nfollowing signature:\n\n```typescript\ntype TreeViewNodeType = 'leaf' | 'sub-tree'\ntype TreeViewCheckedValue = 'true' | 'false' | 'mixed'\n\ntype TreeViewNodeInfo = {\n node: Element\n type: TreeViewNodeType\n path: string[]\n checkedValue: TreeViewCheckedValue\n previousCheckedValue: TreeViewCheckedValue\n}\n```\n\n|Name |Type |Bubbles |Cancelable |\n|:----------------------------|:------------------------------------------|:-------|:----------|\n|`treeViewNodeActivated` |`CustomEvent<TreeViewNodeInfo>` |Yes |No |\n|`treeViewBeforeNodeActivated`|`CustomEvent<TreeViewNodeInfo>` |Yes |Yes |\n|`treeViewNodeExpanded` |`CustomEvent<TreeViewNodeInfo>>` |Yes |No |\n|`treeViewNodeCollapsed` |`CustomEvent<TreeViewNodeInfo>>` |Yes |No |\n|`treeViewNodeChecked` |`CustomEvent<TreeViewNodeInfo[]>` |Yes |Yes |\n|`treeViewBeforeNodeChecked` |`CustomEvent<TreeViewNodeInfo[]>` |Yes |No |\n\n_Item activation_\n\nThe `<tree-view>` element fires an `treeViewNodeActivated` event whenever a node is activated (eg. clicked)\nvia the mouse or keyboard.\n\nThe `treeViewBeforeNodeActivated` event fires before a node is activated. Canceling this event will prevent the\nnode from being activated.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n \"treeViewBeforeNodeActivated\",\n (event: CustomEvent<TreeViewNodeInfo>) => {\n event.preventDefault() // Cancel the event to prevent activation (eg. expanding/collapsing)\n }\n)\n```\n\n_Item checking/unchecking_\n\nThe `tree-view` element fires a `treeViewNodeChecked` event whenever a node is checked or unchecked.\n\nThe `treeViewBeforeNodeChecked` event fires before a node is checked or unchecked. Canceling this event will\nprevent the check/uncheck operation.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n \"treeViewBeforeNodeChecked\",\n (event: CustomEvent<TreeViewNodeInfo[]>) => {\n event.preventDefault() // Cancel the event to prevent activation (eg. expanding/collapsing)\n }\n)\n```\n\nBecause checking or unchecking a sub-tree results in the checking or unchecking of all its children recursively,\nboth the `treeViewNodeChecked` and `treeViewBeforeNodeChecked` events provide an array of `TreeViewNodeInfo`\nobjects, which contain entries for every modified node in the tree.",
20455
+ "description": "TreeView is a hierarchical list of items that may have a parent-child relationship where children\ncan be toggled into view by expanding or collapsing their parent item.\n\n## Terminology\n\nConsider the following tree structure:\n\nsrc\n├ button.rb\n└ action_list\n ├ item.rb\n └ header.rb\n\n1. **Node**. A node is an item in the tree. Nodes can either be \"leaf\" nodes (i.e. have no children), or \"sub-tree\"\nnodes, which do have children. In the example above, button.rb, item.rb, and header.rb are all leaf nodes, while\naction_list is a sub-tree node.\n2. **Path**. A node's path is like its ID. It's an array of strings containing the current node's label and all the\nlabels of its ancestors, in order. In the example above, header.rb's path is [\"src\", \"action_list\", \"header.rb\"].\n\n## Static nodes\n\nThe `TreeView` component allows items to be provided statically or loaded dynamically from the server.\nProviding items statically is done using the `leaf` and `sub_tree` slots:\n\n```erb\n<%= render(Primer::OpenProject::TreeView.new) do |tree| %>\n <% tree.with_sub_tree(label: \"Directory\") do |sub_tree| %>\n <% sub_tree.with_leaf(label: \"File 1\")\n <% end %>\n <% tree.with_leaf(label: \"File 2\") %>\n<% end %>\n```\n\n## Dynamic nodes\n\nTree nodes can also be fetched dynamically from the server and will require creating a Rails controller action\nto respond with the list of nodes. Unlike other Primer components, `TreeView` allows the programmer to specify\nloading behavior on a per-sub-tree basis, i.e. each sub-tree must specify how its nodes are loaded. To load nodes\ndynamically for a given sub-tree, configure it with either a loading spinner or a loading skeleton, and provide\nthe URL to fetch nodes from:\n\n```erb\n<%= render(Primer::OpenProject::TreeView.new) do |tree| %>\n <% tree.with_sub_tree(label: \"Directory\") do |sub_tree| %>\n <% sub_tree.with_loading_spinner(src: tree_view_items_path) %>\n <% end %>\n<% end %>\n```\n\nDefine a controller action to serve the list of nodes. The `TreeView` component automatically includes the\nsub-tree's path as a GET parameter, encoded as a JSON array.\n\n```ruby\nclass TreeViewItemsController < ApplicationController\n def show\n @path = JSON.parse(params[:path])\n @results = get_tree_items(starting_at: path)\n end\nend\n```\n\nResponses must be HTML fragments, eg. have a content type of `text/html+fragment`. This content type isn't\navailable by default in Rails, so you may have to register it eg. in an initializer:\n\n```ruby\nMime::Type.register(\"text/fragment+html\", :html_fragment)\n```\n\nRender a `Primer::OpenProject::TreeView::SubTree` in the action's template, tree_view_items/show.html_fragment.erb:\n\n```erb\n<%= render(Primer::OpenProject::TreeView::SubTree.new(path: @path, node_variant: :div)) do |tree| %>\n <% tree.with_leaf(...) %>\n <% tree.with_sub_tree(...) do |sub_tree| %>\n ...\n <% end %>\n<% end %>\n```\n\n## Multi-select mode\n\nPassing `select_variant: :multiple` to both sub-tree and leaf nodes will add a check box to the left of the node's\nlabel. These check boxes behave according to the value of a second argument, `select_strategy:`.\n\nThe default select strategy, `:descendants`, will cause all child nodes to be checked when the node is checked.\nThis includes both sub-tree and leaf nodes. When the node is unchecked, all child nodes will also be unchecked.\nUnchecking a child node of a checked parent will cause the parent to enter a mixed or indeterminate state, which\nis represented by a horizontal line icon instead of a check mark. This icon indicates that some children are\nchecked, but not all.\n\nA secondary select strategy, `:self`, is provided to allow disabling the automatic checking of child nodes. When\n`select_strategy: :self` is specified, checking sub-tree nodes does not check child nodes, and sub-tree nodes\ncannot enter a mixed or indeterminate state.\n\nNodes can be checked via the keyboard by pressing the space key.\n\n## Node tags\n\n`TreeView`s support three different node variants, `:anchor`, `:button`, and `:div` (the default), which controls\nwhich HTML tag is used to construct the nodes. The `:anchor` and `:button` variants correspond to `<a>` and\n`<button>` tags respectively, which are browser-native elements. Anchors and buttons can be activated (i.e.\n\"clicked\") using the mouse or keyboard via the enter or space keys. The node variant must be the same for all\nnodes in the tree, and is therefore specified at the root level, eg. `TreeView.new(node_variant: :anchor)`.\n\nTrees with node variants other than `:div` cannot have check boxes, i.e. cannot be put into multi-select mode.\n\nTrees with node variants other than `:div` do not emit the `treeViewNodeActivated` or `treeViewBeforeNodeActivated`\nevents, since it is assumed any behavior associated with these variants is user- or browser-defined.\n\n## Interaction behavior matrix\n\n|Interaction |Select variant|Tag |Result |\n|:---------------|:-------------|:------------|:--------------------------|\n|Enter/space |none |div |Expands/collapses |\n|Enter/space |none |anchor/button|Activates anchor/button |\n|Enter/space |multiple |div |Checks or unchecks |\n|Enter/space |multiple |anchor/button|N/A (not allowed) |\n|Left/right arrow|none |div |Expands/collapses |\n|Left/right arrow|none |anchor/button|Expands/collapses |\n|Left/right arrow|multiple |div |Expands/collapses |\n|Left/right arrow|multiple |anchor/button|N/A (not allowed) |\n|Click |none |div |Expands/collapses |\n|Click |multiple |div |Checks or unchecks |\n|Click |multiple |anchor/button|N/A (not allowed) |\n\n## JavaScript API\n\n`TreeView`s render a `<tree-view>` custom element that exposes behavior to the client.\n\n|Name |Notes |\n|:-----------------------------------------------------------------|:-------------------------------------------------------------------------------------------------------------------------------------------------|\n|`getNodePath(node: Element): string[]` |Returns the path to the given node. |\n|`getNodeType(node: Element): TreeViewNodeType | null` |Returns either `\"leaf\"` or `\"sub-tree\"`. |\n|`markCurrentAtPath(path: string[])` |Marks the node as the \"current\" node, which appears visually distinct from other nodes. |\n|`get currentNode(): HTMLLIElement | null` |Returns the current node. |\n|`expandAtPath(path: string[])` |Expands the sub-tree at `path`. |\n|`collapseAtPath(path: string[])` |Collapses the sub-tree at `path`. |\n|`toggleAtPath(path: string[])` |If the sub-tree at `path` is collapsed, this function expands it, and vice-versa. |\n|`checkAtPath(path: string[])` |If the node at `path` has a checkbox, this function checks it. |\n|`uncheckAtPath(path: string[])` |If the node at `path` has a checkbox, this function unchecks it. |\n|`toggleCheckedAtPath(path: string[])` |If the sub-tree at `path` is checked, this function unchecks it, and vice-versa. |\n|`checkedValueAtPath(path: string[]): TreeViewCheckedValue` |Returns `\"true\"` (all child nodes are checked), `\"false\"` (no child nodes are checked), or `\"mixed\"` (some child nodes are checked, some are not).|\n|`nodeAtPath(path: string[], selector?: string): Element | null` |Returns the node for the given `path`, either a leaf node or sub-tree node. |\n|`subTreeAtPath(path: string[]): TreeViewSubTreeNodeElement | null`|Returns the sub-tree at the given `path`, if it exists. |\n|`leafAtPath(path: string[]): HTMLLIElement | null` |Returns the leaf node at the given `path`, if it exists. |\n|`getNodeCheckedValue(node: Element): TreeViewCheckedValue` |The same as `checkedValueAtPath`, but accepts a node instead of a path. |\n\n### Events\n\nThe events enumerated below include node information by way of the `TreeViewNodeInfo` object, which has the\nfollowing signature:\n\n```typescript\ntype TreeViewNodeType = 'leaf' | 'sub-tree'\ntype TreeViewCheckedValue = 'true' | 'false' | 'mixed'\n\ntype TreeViewNodeInfo = {\n node: Element\n type: TreeViewNodeType\n path: string[]\n checkedValue: TreeViewCheckedValue\n previousCheckedValue: TreeViewCheckedValue\n}\n```\n\n|Name |Type |Bubbles |Cancelable |\n|:----------------------------|:------------------------------------------|:-------|:----------|\n|`treeViewNodeActivated` |`CustomEvent<TreeViewNodeInfo>` |Yes |No |\n|`treeViewBeforeNodeActivated`|`CustomEvent<TreeViewNodeInfo>` |Yes |Yes |\n|`treeViewNodeExpanded` |`CustomEvent<TreeViewNodeInfo>>` |Yes |No |\n|`treeViewNodeCollapsed` |`CustomEvent<TreeViewNodeInfo>>` |Yes |No |\n|`treeViewNodeChecked` |`CustomEvent<TreeViewNodeInfo[]>` |Yes |Yes |\n|`treeViewBeforeNodeChecked` |`CustomEvent<TreeViewNodeInfo[]>` |Yes |No |\n\n_Item activation_\n\nThe `<tree-view>` element fires an `treeViewNodeActivated` event whenever a node is activated (eg. clicked)\nvia the mouse or keyboard.\n\nThe `treeViewBeforeNodeActivated` event fires before a node is activated. Canceling this event will prevent the\nnode from being activated.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n \"treeViewBeforeNodeActivated\",\n (event: CustomEvent<TreeViewNodeInfo>) => {\n event.preventDefault() // Cancel the event to prevent activation (eg. expanding/collapsing)\n }\n)\n```\n\n_Item checking/unchecking_\n\nThe `tree-view` element fires a `treeViewNodeChecked` event whenever a node is checked or unchecked.\n\nThe `treeViewBeforeNodeChecked` event fires before a node is checked or unchecked. Canceling this event will\nprevent the check/uncheck operation.\n\n```typescript\ndocument.querySelector(\"select-panel\").addEventListener(\n \"treeViewBeforeNodeChecked\",\n (event: CustomEvent<TreeViewNodeInfo[]>) => {\n event.preventDefault() // Cancel the event to prevent activation (eg. expanding/collapsing)\n }\n)\n```\n\nBecause checking or unchecking a sub-tree results in the checking or unchecking of all its children recursively,\nboth the `treeViewNodeChecked` and `treeViewBeforeNodeChecked` events provide an array of `TreeViewNodeInfo`\nobjects, which contain entries for every modified node in the tree.",
20450
20456
  "accessibility_docs": null,
20451
20457
  "is_form_component": false,
20452
20458
  "is_published": true,
@@ -20458,6 +20464,12 @@
20458
20464
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/tree_view.rb",
20459
20465
  "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/tree_view/default/",
20460
20466
  "parameters": [
20467
+ {
20468
+ "name": "node_variant",
20469
+ "type": "Symbol",
20470
+ "default": "`:div`",
20471
+ "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
20472
+ },
20461
20473
  {
20462
20474
  "name": "system_arguments",
20463
20475
  "type": "Hash",
@@ -20515,6 +20527,16 @@
20515
20527
  ],
20516
20528
  "return_types": [
20517
20529
 
20530
+ ]
20531
+ },
20532
+ {
20533
+ "name": "node_variant",
20534
+ "description": "Returns the value of attribute node_variant.",
20535
+ "parameters": [
20536
+
20537
+ ],
20538
+ "return_types": [
20539
+
20518
20540
  ]
20519
20541
  }
20520
20542
  ],
@@ -20609,6 +20631,32 @@
20609
20631
  "color-contrast"
20610
20632
  ]
20611
20633
  }
20634
+ },
20635
+ {
20636
+ "preview_path": "primer/open_project/tree_view/links",
20637
+ "name": "links",
20638
+ "snapshot": "false",
20639
+ "skip_rules": {
20640
+ "wont_fix": [
20641
+ "region"
20642
+ ],
20643
+ "will_fix": [
20644
+ "color-contrast"
20645
+ ]
20646
+ }
20647
+ },
20648
+ {
20649
+ "preview_path": "primer/open_project/tree_view/buttons",
20650
+ "name": "buttons",
20651
+ "snapshot": "false",
20652
+ "skip_rules": {
20653
+ "wont_fix": [
20654
+ "region"
20655
+ ],
20656
+ "will_fix": [
20657
+ "color-contrast"
20658
+ ]
20659
+ }
20612
20660
  }
20613
20661
  ],
20614
20662
  "subcomponents": [
@@ -20947,6 +20995,18 @@
20947
20995
  "default": "N/A",
20948
20996
  "description": "The node's \"path,\" i.e. this node's label and the labels of all its ancestors. This node should be reachable by traversing the tree following this path."
20949
20997
  },
20998
+ {
20999
+ "name": "node_variant",
21000
+ "type": "Symbol",
21001
+ "default": "N/A",
21002
+ "description": "The node variant to use for the node's content, i.e. the `:button` or `:div`. One of `:anchor`, `:button`, or `:div`."
21003
+ },
21004
+ {
21005
+ "name": "href",
21006
+ "type": "String",
21007
+ "default": "`nil`",
21008
+ "description": "The URL to use as the `href` attribute for this node. If set to a truthy value, the `tag:` parameter is ignored and assumed to be `:a`."
21009
+ },
20950
21010
  {
20951
21011
  "name": "current",
20952
21012
  "type": "Boolean",
@@ -20966,10 +21026,10 @@
20966
21026
  "description": "The checked state of the node's checkbox. One of `false`, `mixed`, or `true`."
20967
21027
  },
20968
21028
  {
20969
- "name": "system_arguments",
21029
+ "name": "content_arguments",
20970
21030
  "type": "Hash",
20971
21031
  "default": "N/A",
20972
- "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}."
21032
+ "description": "Arguments attached to the node's content, i.e the `<button>` or `<a>` element. {{link_to_system_arguments_docs}}"
20973
21033
  }
20974
21034
  ],
20975
21035
  "slots": [
@@ -21050,6 +21110,16 @@
21050
21110
  "Symbol"
21051
21111
  ]
21052
21112
  },
21113
+ {
21114
+ "name": "node_variant",
21115
+ "description": "This node's variant, eg. `:button`, `:div`, etc.",
21116
+ "parameters": [
21117
+
21118
+ ],
21119
+ "return_types": [
21120
+ "Symbol"
21121
+ ]
21122
+ },
21053
21123
  {
21054
21124
  "name": "level",
21055
21125
  "description": "The numeric depth of this node.",
@@ -21205,6 +21275,12 @@
21205
21275
  "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/tree_view/sub_tree.rb",
21206
21276
  "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/tree_view/sub_tree/default/",
21207
21277
  "parameters": [
21278
+ {
21279
+ "name": "node_variant",
21280
+ "type": "Symbol",
21281
+ "default": "N/A",
21282
+ "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
21283
+ },
21208
21284
  {
21209
21285
  "name": "system_arguments",
21210
21286
  "type": "Hash",
@@ -21291,6 +21367,16 @@
21291
21367
  ],
21292
21368
  "return_types": [
21293
21369
 
21370
+ ]
21371
+ },
21372
+ {
21373
+ "name": "node_variant",
21374
+ "description": "Returns the value of attribute node_variant.",
21375
+ "parameters": [
21376
+
21377
+ ],
21378
+ "return_types": [
21379
+
21294
21380
  ]
21295
21381
  }
21296
21382
  ],
@@ -21402,6 +21488,12 @@
21402
21488
  "default": "N/A",
21403
21489
  "description": "The node's \"path,\" i.e. this node's label and the labels of all its ancestors. This node should be reachable by traversing the tree following this path."
21404
21490
  },
21491
+ {
21492
+ "name": "node_variant",
21493
+ "type": "Symbol",
21494
+ "default": "N/A",
21495
+ "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
21496
+ },
21405
21497
  {
21406
21498
  "name": "expanded",
21407
21499
  "type": "Boolean",
data/static/previews.json CHANGED
@@ -9000,6 +9000,32 @@
9000
9000
  "color-contrast"
9001
9001
  ]
9002
9002
  }
9003
+ },
9004
+ {
9005
+ "preview_path": "primer/open_project/tree_view/links",
9006
+ "name": "links",
9007
+ "snapshot": "false",
9008
+ "skip_rules": {
9009
+ "wont_fix": [
9010
+ "region"
9011
+ ],
9012
+ "will_fix": [
9013
+ "color-contrast"
9014
+ ]
9015
+ }
9016
+ },
9017
+ {
9018
+ "preview_path": "primer/open_project/tree_view/buttons",
9019
+ "name": "buttons",
9020
+ "snapshot": "false",
9021
+ "skip_rules": {
9022
+ "wont_fix": [
9023
+ "region"
9024
+ ],
9025
+ "will_fix": [
9026
+ "color-contrast"
9027
+ ]
9028
+ }
9003
9029
  }
9004
9030
  ]
9005
9031
  },
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.66.1
4
+ version: 0.67.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: 2025-05-19 00:00:00.000000000 Z
12
+ date: 2025-05-23 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionview
@@ -1175,9 +1175,11 @@ files:
1175
1175
  - previews/primer/open_project/sub_header_preview/custom_filter_button.html.erb
1176
1176
  - previews/primer/open_project/sub_header_preview/dialog_buttons.html.erb
1177
1177
  - previews/primer/open_project/tree_view_preview.rb
1178
+ - previews/primer/open_project/tree_view_preview/buttons.html.erb
1178
1179
  - previews/primer/open_project/tree_view_preview/default.html.erb
1179
1180
  - previews/primer/open_project/tree_view_preview/empty.html.erb
1180
1181
  - previews/primer/open_project/tree_view_preview/leaf_node_playground.html.erb
1182
+ - previews/primer/open_project/tree_view_preview/links.html.erb
1181
1183
  - previews/primer/open_project/tree_view_preview/loading_failure.html.erb
1182
1184
  - previews/primer/open_project/tree_view_preview/loading_skeleton.html.erb
1183
1185
  - previews/primer/open_project/tree_view_preview/loading_spinner.html.erb