openproject-primer_view_components 0.66.2 → 0.67.0

data/app/components/primer/open_project/tree_view.rb

@@ -17,23 +17,27 @@
 #     <ul role="tree">
 #       <LeafNode>
 #         <Node>
-#           <li role="treeitem">
-#             ...
+#           <li role="none">
+#             <div role="treeitem">
+#               ...
+#             </div>
 #           </li>
 #         </Node>
 #       </LeafNode>
 #
 #       <SubTreeNode>
 #         <tree-view-sub-tree-node>
-#           <li role="treeitem">
+#           <li role="none">
 #
 #             <SubTreeContainer>
 #               <ul role="group">
 #                 <SubTree>
 #                   <LeafNode>
 #                     <Node>
-#                       <li role="treeitem">
-#                         ...
+#                       <li role="none">
+#                         <div role="treeitem">
+#                           ...
+#                         </div>
 #                       </li>
 #                     </Node>
 #                   </LeafNode>
@@ -41,8 +45,10 @@
 #                   <SubTreeNode>
 #                     <tree-view-sub-tree-node>
 #                       <Node>
-#                         <li role="treeitem">
-#                           ...
+#                         <li role="none">
+#                           <div role="treeitem">
+#                             ...
+#                           </div>
 #                         </li>
 #                       </Node>
 #                       <SubTreeContainer>
@@ -72,19 +78,21 @@
 #
 # <LeafNode>
 #   <Node>
-#     <li role="treeitem">
-#       <Visual>
-#         <IconPair>
-#           <tree-view-icon-pair>
-#             <Icon slot="expanded_icon">
-#               <Primer::Beta::Octicon />
-#             </Icon>
-#             <Icon slot="collapsed_icon">
-#               <Primer::Beta::Octicon />
-#             </Icon>
-#           </tree-view-icon-pair>
-#         </IconPair>
-#       </Visual>
+#     <li role="none">
+#       <div role="treeitem">
+#         <Visual>
+#           <IconPair>
+#             <tree-view-icon-pair>
+#               <Icon slot="expanded_icon">
+#                 <Primer::Beta::Octicon />
+#               </Icon>
+#               <Icon slot="collapsed_icon">
+#                 <Primer::Beta::Octicon />
+#               </Icon>
+#             </tree-view-icon-pair>
+#           </IconPair>
+#         </Visual>
+#       </div>
 #     </li>
 #   </Node>
 # </LeafNode>
@@ -207,7 +215,7 @@ module Primer
     # Render a `Primer::OpenProject::TreeView::SubTree` in the action's template, tree_view_items/show.html_fragment.erb:
     #
     # ```erb
-    # <%= render(Primer::OpenProject::TreeView::SubTree.new(path: @path)) do |tree| %>
+    # <%= render(Primer::OpenProject::TreeView::SubTree.new(path: @path, node_variant: :div)) do |tree| %>
     #   <% tree.with_leaf(...) %>
     #   <% tree.with_sub_tree(...) do |sub_tree| %>
     #     ...
@@ -215,7 +223,53 @@ module Primer
     # <% end %>
     # ```
     #
-    # ### JavaScript API
+    # ## Multi-select mode
+    #
+    # Passing `select_variant: :multiple` to both sub-tree and leaf nodes will add a check box to the left of the node's
+    # label. These check boxes behave according to the value of a second argument, `select_strategy:`.
+    #
+    # The default select strategy, `:descendants`, will cause all child nodes to be checked when the node is checked.
+    # This includes both sub-tree and leaf nodes. When the node is unchecked, all child nodes will also be unchecked.
+    # Unchecking a child node of a checked parent will cause the parent to enter a mixed or indeterminate state, which
+    # is represented by a horizontal line icon instead of a check mark. This icon indicates that some children are
+    # checked, but not all.
+    #
+    # A secondary select strategy, `:self`, is provided to allow disabling the automatic checking of child nodes. When
+    # `select_strategy: :self` is specified, checking sub-tree nodes does not check child nodes, and sub-tree nodes
+    # cannot enter a mixed or indeterminate state.
+    #
+    # Nodes can be checked via the keyboard by pressing the space key.
+    #
+    # ## Node tags
+    #
+    # `TreeView`s support three different node variants, `:anchor`, `:button`, and `:div` (the default), which controls
+    # which HTML tag is used to construct the nodes. The `:anchor` and `:button` variants correspond to `<a>` and
+    # `<button>` tags respectively, which are browser-native elements. Anchors and buttons can be activated (i.e.
+    # "clicked") using the mouse or keyboard via the enter or space keys. The node variant must be the same for all
+    # nodes in the tree, and is therefore specified at the root level, eg. `TreeView.new(node_variant: :anchor)`.
+    #
+    # Trees with node variants other than `:div` cannot have check boxes, i.e. cannot be put into multi-select mode.
+    #
+    # Trees with node variants other than `:div` do not emit the `treeViewNodeActivated` or `treeViewBeforeNodeActivated`
+    # events, since it is assumed any behavior associated with these variants is user- or browser-defined.
+    #
+    # ## Interaction behavior matrix
+    #
+    # |Interaction     |Select variant|Tag          |Result                     |
+    # |:---------------|:-------------|:------------|:--------------------------|
+    # |Enter/space     |none          |div          |Expands/collapses          |
+    # |Enter/space     |none          |anchor/button|Activates anchor/button    |
+    # |Enter/space     |multiple      |div          |Checks or unchecks         |
+    # |Enter/space     |multiple      |anchor/button|N/A (not allowed)          |
+    # |Left/right arrow|none          |div          |Expands/collapses          |
+    # |Left/right arrow|none          |anchor/button|Expands/collapses          |
+    # |Left/right arrow|multiple      |div          |Expands/collapses          |
+    # |Left/right arrow|multiple      |anchor/button|N/A (not allowed)          |
+    # |Click           |none          |div          |Expands/collapses          |
+    # |Click           |multiple      |div          |Checks or unchecks         |
+    # |Click           |multiple      |anchor/button|N/A (not allowed)          |
+    #
+    # ## JavaScript API
     #
     # `TreeView`s render a `<tree-view>` custom element that exposes behavior to the client.
     #
@@ -237,7 +291,7 @@ module Primer
     # |`leafAtPath(path: string[]): HTMLLIElement | null`                |Returns the leaf node at the given `path`, if it exists.                                                                                          |
     # |`getNodeCheckedValue(node: Element): TreeViewCheckedValue`        |The same as `checkedValueAtPath`, but accepts a node instead of a path.                                                                           |
     #
-    # #### Events
+    # ### Events
     #
     # The events enumerated below include node information by way of the `TreeViewNodeInfo` object, which has the
     # following signature:
@@ -301,6 +355,9 @@ module Primer
     # both the `treeViewNodeChecked` and `treeViewBeforeNodeChecked` events provide an array of `TreeViewNodeInfo`
     # objects, which contain entries for every modified node in the tree.
     class TreeView < Primer::Component
+      DEFAULT_NODE_VARIANT = :div
+      NODE_VARIANT_OPTIONS = [DEFAULT_NODE_VARIANT, :anchor, :button].freeze
+
       # @!parse
       #   # Adds an leaf node to the tree. Leaf nodes are nodes that do not have children.
       #   #
@@ -322,6 +379,7 @@ module Primer
           renders: lambda { |component_klass: LeafNode, label:, **system_arguments|
             component_klass.new(
               **system_arguments,
+              node_variant: node_variant,
               path: [label],
               label: label
             )
@@ -334,6 +392,7 @@ module Primer
           renders: lambda { |component_klass: SubTreeNode, label:, **system_arguments|
             component_klass.new(
               **system_arguments,
+              node_variant: node_variant,
               path: [label],
               label: label
             )
@@ -343,10 +402,15 @@ module Primer
         }
       }
 
+      attr_reader :node_variant
+
+      # @param node_variant [Symbol] The variant to use for this node. <%= one_of(Primer::OpenProject::TreeView::NODE_VARIANT_OPTIONS) %>
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>.
-      def initialize(**system_arguments)
+      def initialize(node_variant: DEFAULT_NODE_VARIANT, **system_arguments)
         @system_arguments = deny_tag_argument(**system_arguments)
 
+        @node_variant = fetch_or_fallback(NODE_VARIANT_OPTIONS, node_variant, DEFAULT_NODE_VARIANT)
+
         @system_arguments[:tag] = :ul
         @system_arguments[:role] = :tree
         @system_arguments[:classes] = class_names(

data/lib/primer/view_components/version.rb

@@ -5,8 +5,8 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 66
-      PATCH = 2
+      MINOR = 67
+      PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
     end

data/previews/primer/open_project/border_box/collapsible_header_preview/playground.html.erb

@@ -4,7 +4,7 @@
                                                                      collapsed: collapsed)) do |header| %>
       <% header.with_title { title } %>
       <% header.with_count(count: count) %>
-      <% header.with_description { description } %>
+      <% header.with_description { description } unless description.nil? %>
     <% end %>
   <% end %>
   <% component.with_body { "Body" } %>

data/previews/primer/open_project/tree_view_preview/buttons.html.erb

@@ -0,0 +1,10 @@
+<div style="max-width: 400px">
+  <%= render(Primer::OpenProject::TreeView.new(node_variant: :button)) do |tree_view| %>
+    <% tree_view.with_sub_tree(label: "Secrets", expanded: expanded, onclick: "alert('Shhhh')") do |sub_tree| %>
+      <% sub_tree.with_leaf(label: "Life and the universe", onclick: "alert(42)") %>
+      <% sub_tree.with_leaf(label: "Secret ingredient", onclick: "alert('Love')") %>
+    <% end %>
+
+    <% tree_view.with_leaf(label: "What do you give a sick bird?", onclick: "alert('Tweetment')") %>
+  <% end %>
+</div>

data/previews/primer/open_project/tree_view_preview/links.html.erb

@@ -0,0 +1,17 @@
+<div style="max-width: 400px">
+  <%= render(Primer::OpenProject::TreeView.new(node_variant: :anchor)) do |tree_view| %>
+    <% tree_view.with_sub_tree(label: "Cloud Services", href: "https://en.wikipedia.org/wiki/Cloud_computing", target: "blank", expanded: expanded) do |sub_tree| %>
+      <% sub_tree.with_leaf(label: "OpenProject", href: "https://www.openproject.org", target: "blank") do |node| %>
+        <% node.with_trailing_visual_icon(icon: :"link-external") %>
+      <% end %>
+
+      <% sub_tree.with_leaf(label: "Hetzner", href: "https://www.hetzner.com", target: "blank") do |node| %>
+        <% node.with_trailing_visual_icon(icon: :"link-external") %>
+      <% end %>
+    <% end %>
+
+    <% tree_view.with_leaf(label: "GitHub", href: "https://github.com", target: "blank") do |node| %>
+      <% node.with_trailing_visual_icon(icon: :"link-external") %>
+    <% end %>
+  <% end %>
+</div>

data/previews/primer/open_project/tree_view_preview.rb

@@ -10,7 +10,11 @@ module Primer
       # @param expanded [Boolean] toggle
       # @param select_variant [Symbol] select [multiple, none]
       # @param select_strategy [Symbol] select [self, descendants]
-      def default(expanded: false, select_variant: :none, select_strategy: :descendants)
+      def default(
+        expanded: false,
+        select_variant: Primer::OpenProject::TreeView::Node::DEFAULT_SELECT_VARIANT,
+        select_strategy: Primer::OpenProject::TreeView::SubTreeNode::DEFAULT_SELECT_STRATEGY
+      )
         render_with_template(locals: {
           expanded: coerce_bool(expanded),
           select_variant: select_variant.to_sym,
@@ -23,7 +27,11 @@ module Primer
       # @param expanded [Boolean] toggle
       # @param select_variant [Symbol] select [multiple, none]
       # @param select_strategy [Symbol] select [self, descendants]
-      def playground(expanded: false, select_variant: :none, select_strategy: :descendants)
+      def playground(
+        expanded: false,
+        select_variant: Primer::OpenProject::TreeView::Node::DEFAULT_SELECT_VARIANT,
+        select_strategy: Primer::OpenProject::TreeView::SubTreeNode::DEFAULT_SELECT_STRATEGY
+      )
         render_with_template(locals: {
           expanded: coerce_bool(expanded),
           select_variant: select_variant.to_sym,
@@ -80,7 +88,7 @@ module Primer
         leading_visual_icon: nil,
         leading_action_icon: nil,
         trailing_visual_icon: nil,
-        select_variant: :none
+        select_variant: Primer::OpenProject::TreeView::Node::DEFAULT_SELECT_VARIANT
       )
         render_with_template(locals: {
           label: label,
@@ -91,6 +99,24 @@ module Primer
         })
       end
 
+      # @label Links
+      #
+      # @param expanded [Boolean] toggle
+      def links(expanded: false)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded)
+        })
+      end
+
+      # @label Buttons
+      #
+      # @param expanded [Boolean] toggle
+      def buttons(expanded: false)
+        render_with_template(locals: {
+          expanded: coerce_bool(expanded)
+        })
+      end
+
       private
 
       def coerce_bool(value)

data/static/arguments.json

@@ -5419,6 +5419,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/file_tree_view.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/file_tree_view/default/",
     "parameters": [
+      {
+        "name": "node_variant",
+        "type": "Symbol",
+        "default": "`:div`",
+        "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -5844,6 +5850,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/tree_view.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/tree_view/default/",
     "parameters": [
+      {
+        "name": "node_variant",
+        "type": "Symbol",
+        "default": "`:div`",
+        "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -5970,6 +5982,18 @@
         "default": "N/A",
         "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."
       },
+      {
+        "name": "node_variant",
+        "type": "Symbol",
+        "default": "N/A",
+        "description": "The node variant to use for the node's content, i.e. the `:button` or `:div`. One of `:anchor`, `:button`, or `:div`."
+      },
+      {
+        "name": "href",
+        "type": "String",
+        "default": "`nil`",
+        "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`."
+      },
       {
         "name": "current",
         "type": "Boolean",
@@ -5989,10 +6013,10 @@
         "description": "The checked state of the node's checkbox. One of `false`, `mixed`, or `true`."
       },
       {
-        "name": "system_arguments",
+        "name": "content_arguments",
         "type": "Hash",
         "default": "N/A",
-        "description": "The arguments accepted by [ActionList](/components/alpha/actionlist)."
+        "description": "Arguments attached to the node's content, i.e the `<button>` or `<a>` element. [System arguments](/system-arguments)"
       }
     ]
   },
@@ -6054,6 +6078,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/tree_view/sub_tree.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/tree_view/sub_tree/default/",
     "parameters": [
+      {
+        "name": "node_variant",
+        "type": "Symbol",
+        "default": "N/A",
+        "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -6110,6 +6140,12 @@
         "default": "N/A",
         "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."
       },
+      {
+        "name": "node_variant",
+        "type": "Symbol",
+        "default": "N/A",
+        "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
+      },
       {
         "name": "expanded",
         "type": "Boolean",

data/static/constants.json

@@ -1786,12 +1786,18 @@
     "GeneratedSlotMethods": "Primer::OpenProject::SubHeader::SegmentedControl::GeneratedSlotMethods"
   },
   "Primer::OpenProject::TreeView": {
+    "DEFAULT_NODE_VARIANT": "div",
     "GeneratedSlotMethods": "Primer::OpenProject::TreeView::GeneratedSlotMethods",
     "Icon": "Primer::OpenProject::TreeView::Icon",
     "IconPair": "Primer::OpenProject::TreeView::IconPair",
     "LeadingAction": "Primer::OpenProject::TreeView::LeadingAction",
     "LeafNode": "Primer::OpenProject::TreeView::LeafNode",
     "LoadingFailureMessage": "Primer::OpenProject::TreeView::LoadingFailureMessage",
+    "NODE_VARIANT_OPTIONS": [
+      "div",
+      "anchor",
+      "button"
+    ],
     "Node": "Primer::OpenProject::TreeView::Node",
     "SkeletonLoader": "Primer::OpenProject::TreeView::SkeletonLoader",
     "SpinnerLoader": "Primer::OpenProject::TreeView::SpinnerLoader",
@@ -1824,8 +1830,19 @@
       "mixed"
     ],
     "DEFAULT_CHECKED_STATE": false,
+    "DEFAULT_NODE_VARIANT": "div",
     "DEFAULT_SELECT_VARIANT": "none",
     "GeneratedSlotMethods": "Primer::OpenProject::TreeView::Node::GeneratedSlotMethods",
+    "NODE_VARIANT_TAG_MAP": {
+      "div": "div",
+      "button": "button",
+      "anchor": "a"
+    },
+    "NODE_VARIANT_TAG_OPTIONS": [
+      "div",
+      "button",
+      "anchor"
+    ],
     "SELECT_VARIANT_OPTIONS": [
       "multiple",
       "none"

data/static/info_arch.json

@@ -18761,6 +18761,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/file_tree_view.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/file_tree_view/default/",
     "parameters": [
+      {
+        "name": "node_variant",
+        "type": "Symbol",
+        "default": "`:div`",
+        "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -20446,7 +20452,7 @@
   },
   {
     "fully_qualified_name": "Primer::OpenProject::TreeView",
-    "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.",
+    "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.",
     "accessibility_docs": null,
     "is_form_component": false,
     "is_published": true,
@@ -20458,6 +20464,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/tree_view.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/tree_view/default/",
     "parameters": [
+      {
+        "name": "node_variant",
+        "type": "Symbol",
+        "default": "`:div`",
+        "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -20515,6 +20527,16 @@
         ],
         "return_types": [
 
+        ]
+      },
+      {
+        "name": "node_variant",
+        "description": "Returns the value of attribute node_variant.",
+        "parameters": [
+
+        ],
+        "return_types": [
+
         ]
       }
     ],
@@ -20609,6 +20631,32 @@
             "color-contrast"
           ]
         }
+      },
+      {
+        "preview_path": "primer/open_project/tree_view/links",
+        "name": "links",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
+      },
+      {
+        "preview_path": "primer/open_project/tree_view/buttons",
+        "name": "buttons",
+        "snapshot": "false",
+        "skip_rules": {
+          "wont_fix": [
+            "region"
+          ],
+          "will_fix": [
+            "color-contrast"
+          ]
+        }
       }
     ],
     "subcomponents": [
@@ -20947,6 +20995,18 @@
         "default": "N/A",
         "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."
       },
+      {
+        "name": "node_variant",
+        "type": "Symbol",
+        "default": "N/A",
+        "description": "The node variant to use for the node's content, i.e. the `:button` or `:div`. One of `:anchor`, `:button`, or `:div`."
+      },
+      {
+        "name": "href",
+        "type": "String",
+        "default": "`nil`",
+        "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`."
+      },
       {
         "name": "current",
         "type": "Boolean",
@@ -20966,10 +21026,10 @@
         "description": "The checked state of the node's checkbox. One of `false`, `mixed`, or `true`."
       },
       {
-        "name": "system_arguments",
+        "name": "content_arguments",
         "type": "Hash",
         "default": "N/A",
-        "description": "The arguments accepted by {{#link_to_component}}Primer::Alpha::ActionList{{/link_to_component}}."
+        "description": "Arguments attached to the node's content, i.e the `<button>` or `<a>` element. {{link_to_system_arguments_docs}}"
       }
     ],
     "slots": [
@@ -21050,6 +21110,16 @@
           "Symbol"
         ]
       },
+      {
+        "name": "node_variant",
+        "description": "This node's variant, eg. `:button`, `:div`, etc.",
+        "parameters": [
+
+        ],
+        "return_types": [
+          "Symbol"
+        ]
+      },
       {
         "name": "level",
         "description": "The numeric depth of this node.",
@@ -21205,6 +21275,12 @@
     "source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/tree_view/sub_tree.rb",
     "lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/tree_view/sub_tree/default/",
     "parameters": [
+      {
+        "name": "node_variant",
+        "type": "Symbol",
+        "default": "N/A",
+        "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
+      },
       {
         "name": "system_arguments",
         "type": "Hash",
@@ -21291,6 +21367,16 @@
         ],
         "return_types": [
 
+        ]
+      },
+      {
+        "name": "node_variant",
+        "description": "Returns the value of attribute node_variant.",
+        "parameters": [
+
+        ],
+        "return_types": [
+
         ]
       }
     ],
@@ -21402,6 +21488,12 @@
         "default": "N/A",
         "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."
       },
+      {
+        "name": "node_variant",
+        "type": "Symbol",
+        "default": "N/A",
+        "description": "The variant to use for this node. One of `:anchor`, `:button`, or `:div`."
+      },
       {
         "name": "expanded",
         "type": "Boolean",