openproject-primer_view_components 0.64.0 → 0.65.0

data/app/components/primer/alpha/select_panel.css

@@ -1 +1 @@
-.SelectPanel-emptyPanel,.SelectPanel-loadingPanel{min-height:min(var(--overlay-height) - 10rem,100vh - 2rem)}
+.SelectPanel-loadingPanel{min-height:min(calc(var(--overlay-height) - 10rem),calc(100vh - 2rem))}.SelectPanel-emptyPanel{align-items:center;display:flex;justify-content:center;min-height:min(calc(var(--overlay-height) - 23rem),calc(100vh - 2rem))}

data/app/components/primer/alpha/select_panel.css.json

@@ -1,7 +1,7 @@
 {
   "name": "alpha/select_panel",
   "selectors": [
-    ".SelectPanel-emptyPanel",
-    ".SelectPanel-loadingPanel"
+    ".SelectPanel-loadingPanel",
+    ".SelectPanel-emptyPanel"
   ]
 }

data/app/components/primer/alpha/select_panel.css.map

@@ -1 +1 @@
-{"version":3,"sources":["select_panel.pcss"],"names":[],"mappings":"AAIA,kDACE,0DACF","file":"select_panel.css","sourcesContent":[".SelectPanel-loadingPanel {\n  min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);\n}\n\n.SelectPanel-emptyPanel {\n  min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);\n}\n"]}
+{"version":3,"sources":["select_panel.pcss"],"names":[],"mappings":"AAAA,0BACE,sEACF,CAEA,wBAEE,kBAAmB,CACnB,YAAa,CACb,sBAAuB,CAHvB,sEAIF","file":"select_panel.css","sourcesContent":[".SelectPanel-loadingPanel {\n  min-height: min(calc(var(--overlay-height) - 10rem), calc(100vh - 2rem));\n}\n\n.SelectPanel-emptyPanel {\n  min-height: min(calc(var(--overlay-height) - 23rem), calc(100vh - 2rem));\n  align-items: center;\n  display: flex;\n  justify-content: center;\n}\n"]}

data/app/components/primer/alpha/select_panel.html.erb

@@ -97,7 +97,7 @@
                 <%= render(@list) %>
               <% end %>
             </div>
-            <div data-target="select-panel.noResults" class="pt-2 color-border-muted text-center d-flex flex-items-start flex-justify-center SelectPanel-emptyPanel" hidden>
+            <div data-target="select-panel.noResults" class="SelectPanel-emptyPanel" hidden>
               <h2 class="v-align-middle m-3 f5"><%= @no_results_label %></h2>
             </div>
           <% end %>

data/app/components/primer/alpha/select_panel.pcss

@@ -1,7 +1,10 @@
 .SelectPanel-loadingPanel {
-  min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);
+  min-height: min(calc(var(--overlay-height) - 10rem), calc(100vh - 2rem));
 }
 
 .SelectPanel-emptyPanel {
-  min-height: min(var(--overlay-height) - 10rem, 100vh - 2rem);
+  min-height: min(calc(var(--overlay-height) - 23rem), calc(100vh - 2rem));
+  align-items: center;
+  display: flex;
+  justify-content: center;
 }

data/app/components/primer/beta/spinner.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::BaseComponent.new(tag: :span, hidden: @hidden, data: { target: @target })) do %>
+<%= render(Primer::BaseComponent.new(tag: :span, hidden: @hidden, data: { target: @target }, **@wrapper_arguments)) do %>
   <%= render Primer::BaseComponent.new(**@system_arguments) do %>
     <circle cx="8" cy="8" r="7" stroke="currentColor" stroke-opacity="0.25" stroke-width="2" vector-effect="non-scaling-stroke" fill="none" />
     <path d="M15 8a7.002 7.002 0 00-7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" vector-effect="non-scaling-stroke" />

data/app/components/primer/beta/spinner.rb

@@ -43,6 +43,8 @@ module Primer
 
         @target = extract_data(:target, @system_arguments)
         @hidden = @system_arguments.delete(:hidden)
+
+        @wrapper_arguments = @system_arguments.delete(:wrapper_arguments) || {}
       end
 
       def no_aria_label?

data/app/components/primer/open_project/border_box/collapsible_header.css

@@ -1 +1 @@
-.CollapsibleHeader{align-items:center;cursor:pointer;display:flex}.Box:has(.CollapsibleHeader--collapsed){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:var(--borderWidth-thicker)}.Box:has(.CollapsibleHeader--collapsed) .Box-body,.Box:has(.CollapsibleHeader--collapsed) .Box-footer,.Box:has(.CollapsibleHeader--collapsed) .Box-row{display:none}
+.CollapsibleHeader{align-items:center;cursor:pointer;display:flex}.Box:has(.CollapsibleHeader--collapsed){border-bottom-left-radius:0;border-bottom-right-radius:0;border-bottom-width:var(--borderWidth-thicker)}.Box:has(.CollapsibleHeader--collapsed) .Box-body,.Box:has(.CollapsibleHeader--collapsed) .Box-footer,.Box:has(.CollapsibleHeader--collapsed) .Box-row{display:none}.CollapsibleHeader--triggerArea{width:100%}

data/app/components/primer/open_project/border_box/collapsible_header.css.json

@@ -5,6 +5,7 @@
     ".Box:has(.CollapsibleHeader--collapsed)",
     ".Box:has(.CollapsibleHeader--collapsed) .Box-body",
     ".Box:has(.CollapsibleHeader--collapsed) .Box-footer",
-    ".Box:has(.CollapsibleHeader--collapsed) .Box-row"
+    ".Box:has(.CollapsibleHeader--collapsed) .Box-row",
+    ".CollapsibleHeader--triggerArea"
   ]
 }

data/app/components/primer/open_project/border_box/collapsible_header.css.map

@@ -1 +1 @@
-{"version":3,"sources":["collapsible_header.pcss"],"names":[],"mappings":"AAEA,mBAGI,kBAAmB,CAFnB,cAAe,CACf,YAEJ,CAEA,wCACI,2BAA4B,CAC5B,4BAA6B,CAC7B,8CAOJ,CALI,uJAGI,YACJ","file":"collapsible_header.css","sourcesContent":["/* CSS for BorderBox::CollapsibleHeader  */\n\n.CollapsibleHeader {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n}\n\n.Box:has(.CollapsibleHeader--collapsed) {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-width: var(--borderWidth-thicker);\n\n    & .Box-row,\n    & .Box-body,\n    & .Box-footer {\n        display: none;\n    }\n}\n"]}
+{"version":3,"sources":["collapsible_header.pcss"],"names":[],"mappings":"AAEA,mBAGI,kBAAmB,CAFnB,cAAe,CACf,YAEJ,CAEA,wCACI,2BAA4B,CAC5B,4BAA6B,CAC7B,8CAOJ,CALI,uJAGI,YACJ,CAGJ,gCACI,UACJ","file":"collapsible_header.css","sourcesContent":["/* CSS for BorderBox::CollapsibleHeader  */\n\n.CollapsibleHeader {\n    cursor: pointer;\n    display: flex;\n    align-items: center;\n}\n\n.Box:has(.CollapsibleHeader--collapsed) {\n    border-bottom-left-radius: 0;\n    border-bottom-right-radius: 0;\n    border-bottom-width: var(--borderWidth-thicker);\n\n    & .Box-row,\n    & .Box-body,\n    & .Box-footer {\n        display: none;\n    }\n}\n\n.CollapsibleHeader--triggerArea {\n    width: 100%;\n}\n"]}

data/app/components/primer/open_project/border_box/collapsible_header.html.erb

@@ -1,5 +1,16 @@
 <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
-  <%= render(Primer::OpenProject::FlexLayout.new) do |flex| %>
+  <%= render(Primer::OpenProject::FlexLayout.new(
+    data: {
+      target: "collapsible-header.triggerElement",
+      action: "click:collapsible-header#toggle keydown:collapsible-header#toggleViaKeyboard"
+    },
+    tabindex: 0,
+    role: "button",
+    aria: {
+      expanded: !@collapsed,
+    },
+    classes: "CollapsibleHeader--triggerArea"
+  )) do |flex| %>
     <%= flex.with_row do %>
       <%= title %>
       <% if count? %>

data/app/components/primer/open_project/border_box/collapsible_header.pcss

@@ -17,3 +17,7 @@
         display: none;
     }
 }
+
+.CollapsibleHeader--triggerArea {
+    width: 100%;
+}

data/app/components/primer/open_project/border_box/collapsible_header.rb

@@ -32,39 +32,43 @@ module Primer
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
         renders_one :description, lambda { |**system_arguments, &block|
           system_arguments[:color] ||= :subtle
+          system_arguments[:hidden] = @collapsed
+
           system_arguments[:data] = merge_data(
             system_arguments, {
-            data: {
+              data: {
                 targets: "collapsible-header.collapsibleElements"
               }
             }
           )
-          system_arguments[:hidden] = @collapsed
 
           Primer::Beta::Text.new(**system_arguments, &block)
         }
 
-
+        # @param id [String] The unique ID of the collapsible header.
         # @param collapsed [Boolean] Whether the header is collapsed on initial render.
         # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-        def initialize(collapsed: false, box:, **system_arguments)
+        def initialize(id: self.class.generate_id, collapsed: false, box:, **system_arguments)
           @collapsed = collapsed
           @box = box
           @system_arguments = system_arguments
-
+          @system_arguments[:id] = id
           @system_arguments[:tag] = "collapsible-header"
           @system_arguments[:classes] = class_names(
             system_arguments[:classes],
             "CollapsibleHeader",
             "CollapsibleHeader--collapsed" => @collapsed
           )
-          @system_arguments[:data] = merge_data(
-            @system_arguments, {
-            data: {
-              action: "click:collapsible-header#toggle"
-            } }
-          )
-          @system_arguments[:data][:collapsed] = true if @collapsed
+          if @collapsed
+            @system_arguments[:data] = merge_data(
+              @system_arguments, {
+                data: {
+                  collapsed: @collapsed
+                }
+              }
+            )
+          end
+
         end
 
         private

data/app/components/primer/open_project/collapsible.d.ts

@@ -1,8 +1,10 @@
 export declare abstract class CollapsibleElement extends HTMLElement {
     arrowDown: Element;
     arrowUp: Element;
+    triggerElement: HTMLElement;
     collapsibleElements: HTMLElement[];
     collapsed: boolean;
+    toggleViaKeyboard(event: KeyboardEvent): void;
     toggle(): void;
     attributeChangedCallback(name: string): void;
     hideAll(): void;

data/app/components/primer/open_project/collapsible.js

@@ -11,6 +11,12 @@ export class CollapsibleElement extends HTMLElement {
         super(...arguments);
         this.collapsed = false;
     }
+    toggleViaKeyboard(event) {
+        if (event.code === 'Enter' || event.code === 'Space') {
+            event.preventDefault();
+            this.toggle();
+        }
+    }
     toggle() {
         this.collapsed = !this.collapsed;
     }
@@ -28,6 +34,7 @@ export class CollapsibleElement extends HTMLElement {
         // For whatever reason, setting `hidden` directly does not work on the SVGs
         this.arrowDown?.removeAttribute('hidden');
         this.arrowUp?.setAttribute('hidden', '');
+        this.triggerElement.setAttribute('aria-expanded', 'false');
         for (const el of this.collapsibleElements) {
             el.hidden = true;
         }
@@ -36,6 +43,7 @@ export class CollapsibleElement extends HTMLElement {
     expandAll() {
         this.arrowUp?.removeAttribute('hidden');
         this.arrowDown?.setAttribute('hidden', '');
+        this.triggerElement.setAttribute('aria-expanded', 'true');
         for (const el of this.collapsibleElements) {
             el.hidden = false;
         }
@@ -48,6 +56,9 @@ __decorate([
 __decorate([
     target
 ], CollapsibleElement.prototype, "arrowUp", void 0);
+__decorate([
+    target
+], CollapsibleElement.prototype, "triggerElement", void 0);
 __decorate([
     targets
 ], CollapsibleElement.prototype, "collapsibleElements", void 0);

data/app/components/primer/open_project/collapsible.ts

@@ -4,10 +4,18 @@ import {attr, target, targets} from '@github/catalyst'
 export abstract class CollapsibleElement extends HTMLElement {
   @target arrowDown: Element
   @target arrowUp: Element
+  @target triggerElement: HTMLElement
   @targets collapsibleElements: HTMLElement[]
 
   @attr collapsed = false
 
+  toggleViaKeyboard(event: KeyboardEvent) {
+    if (event.code === 'Enter' || event.code === 'Space') {
+      event.preventDefault()
+      this.toggle()
+    }
+  }
+
   toggle() {
     this.collapsed = !this.collapsed
   }
@@ -26,6 +34,7 @@ export abstract class CollapsibleElement extends HTMLElement {
     // For whatever reason, setting `hidden` directly does not work on the SVGs
     this.arrowDown?.removeAttribute('hidden')
     this.arrowUp?.setAttribute('hidden', '')
+    this.triggerElement.setAttribute('aria-expanded', 'false')
 
     for (const el of this.collapsibleElements) {
       el.hidden = true
@@ -37,6 +46,7 @@ export abstract class CollapsibleElement extends HTMLElement {
   expandAll() {
     this.arrowUp?.removeAttribute('hidden')
     this.arrowDown?.setAttribute('hidden', '')
+    this.triggerElement.setAttribute('aria-expanded', 'true')
 
     for (const el of this.collapsibleElements) {
       el.hidden = false

data/app/components/primer/open_project/collapsible_section.html.erb

@@ -1,7 +1,14 @@
 <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
   <%= render(Primer::OpenProject::FlexLayout.new) do |flex| %>
     <%= flex.with_row(classes: "CollapsibleSection--triggerArea",
-                      data: { action: "click:collapsible-section#toggle" }) do %>
+                      id: @title_id,
+                      tabindex: 0,
+                      role: "button",
+                      data: {
+                        action: "click:collapsible-section#toggle keydown:collapsible-section#toggleViaKeyboard",
+                        target: "collapsible-section.triggerElement"
+                      },
+                      aria: { expanded: !@collapsed, controls: @content_id }) do %>
       <%= render(Primer::OpenProject::FlexLayout.new(display: :flex, align_items: :center)) do |header| %>
         <%= header.with_column do %>
           <%= title %>
@@ -18,7 +25,12 @@
         <% end %>
       <% end %>
     <% end %>
-    <%= flex.with_row(hidden: @collapsed, mt: 3, data: { targets: "collapsible-section.collapsibleElements" }) do %>
+    <%= flex.with_row(hidden: @collapsed,
+                      mt: 3,
+                      role: "region",
+                      id: @content_id,
+                      data: { targets: "collapsible-section.collapsibleElements" },
+                      aria: { labelledby: @title_id }) do %>
       <%= collapsible_content %>
     <% end %>
   <% end %>

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

@@ -47,13 +47,17 @@ module Primer
         Primer::BaseComponent.new(tag: :div, **system_arguments)
       }
 
+      # @param id [String] The unique ID of the collapsible section.
       # @param collapsed [Boolean] Whether the section is collapsed on initial render.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      def initialize(collapsed: false, **system_arguments)
+      def initialize(id: self.class.generate_id, collapsed: false, **system_arguments)
+        @title_id = "#{id}-title"
+        @content_id = "#{id}-content"
         @collapsed = collapsed
 
         @system_arguments = deny_tag_argument(**system_arguments)
         @system_arguments[:tag] = "collapsible-section"
+        @system_arguments[:id] = id
         @system_arguments[:classes] = class_names(
           @system_arguments[:classes],
           "CollapsibleSection",

data/app/components/primer/open_project/danger_dialog.html.erb

@@ -1,4 +1,8 @@
 <%= render @dialog do |dialog| %>
+  <% unless header.present? %>
+    <% dialog.with_header(close_label: I18n.t("button_close")) %>
+  <% end %>
+
   <danger-dialog-form-helper>
     <%= render(@form_wrapper) do %>
       <scrollable-region data-labelled-by="<%= labelledby %>">

data/app/components/primer/open_project/feedback_dialog.html.erb

@@ -1,10 +1,15 @@
 <%= render @dialog do |dialog| %>
+  <% unless header.present? %>
+    <% dialog.with_header(close_label: I18n.t("button_close")) %>
+  <% end %>
+
   <% dialog.with_body do %>
     <%= feedback_message %>
     <% if additional_details.present? %>
       <%= additional_details %>
     <% end %>
   <% end %>
+
   <% dialog.with_footer do %>
     <% if footer.present? %>
       <%= footer %>

data/app/components/primer/open_project/file_tree_view/directory_node.html.erb

@@ -0,0 +1,5 @@
+<% with_leading_visual_icons do |icons| %>
+  <% icons.with_expanded_icon(icon: :"file-directory-open-fill", **@expanded_icon_arguments) %>
+  <% icons.with_collapsed_icon(icon: :"file-directory-fill", **@collapsed_icon_arguments) %>
+<% end %>
+<%= render_parent %>

data/app/components/primer/open_project/file_tree_view/directory_node.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class FileTreeView
+      class DirectoryNode < TreeView::SubTreeNode
+        def initialize(icon_arguments: nil, expanded_icon_arguments: nil, collapsed_icon_arguments: nil, **system_arguments)
+          @expanded_icon_arguments = expanded_icon_arguments || icon_arguments || {}
+          @collapsed_icon_arguments = collapsed_icon_arguments || icon_arguments || {}
+
+          super(**system_arguments)
+        end
+
+        def with_file(**system_arguments, &block)
+          with_leaf(**system_arguments, component_klass: FileNode, &block)
+        end
+
+        def with_directory(**system_arguments, &block)
+          with_sub_tree(**system_arguments, component_klass: DirectoryNode, &block)
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/file_tree_view/file_node.html.erb

@@ -0,0 +1,2 @@
+<% with_leading_visual_icon(icon: :file, **@icon_arguments) %>
+<%= render_parent %>

data/app/components/primer/open_project/file_tree_view/file_node.rb

@@ -0,0 +1,14 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class FileTreeView
+      class FileNode < TreeView::LeafNode
+        def initialize(icon_arguments: {}, **system_arguments)
+          @icon_arguments = icon_arguments
+          super(**system_arguments)
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class FileTreeView < TreeView
+      def with_file(**system_arguments, &block)
+        with_leaf(**system_arguments, component_klass: FileNode, &block)
+      end
+
+      def with_directory(**system_arguments, &block)
+        with_sub_tree(**system_arguments, component_klass: DirectoryNode, &block)
+      end
+    end
+  end
+end

data/app/components/primer/open_project/skeleton_box.css

@@ -0,0 +1 @@
+@keyframes shimmer{0%{mask-position:200%}to{mask-position:0}}.SkeletonBox{animation:shimmer;background-color:var(--bgColor-muted);border-radius:var(--borderRadius-small);display:block;height:1rem}@media (prefers-reduced-motion:no-preference){.SkeletonBox{animation:shimmer;animation-duration:1s;animation-iteration-count:infinite;mask-image:linear-gradient(75deg,#000 30%,#000000a6 80%);mask-size:200%}}@media (forced-colors:active){.SkeletonBox{outline:1px solid #0000;outline-offset:-1px}}

data/app/components/primer/open_project/skeleton_box.css.json

@@ -0,0 +1,6 @@
+{
+  "name": "open_project/skeleton_box",
+  "selectors": [
+    ".SkeletonBox"
+  ]
+}

data/app/components/primer/open_project/skeleton_box.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["skeleton_box.pcss"],"names":[],"mappings":"AAAA,mBACE,GACE,kBACF,CAEA,GACE,eACF,CACF,CAEA,aAKE,iBAAkB,CAFlB,qCAAsC,CACtC,uCAAwC,CAHxC,aAAc,CACd,WAiBF,CAZE,8CAPF,aAUI,iBAAkB,CAClB,qBAAsB,CACtB,kCAAmC,CAJnC,wDAAqE,CACrE,cAUJ,CANE,CAEA,8BAfF,aAgBI,uBAA8B,CAC9B,mBAEJ,CADE","file":"skeleton_box.css","sourcesContent":["@keyframes shimmer {\n  from {\n    mask-position: 200%;\n  }\n\n  to {\n    mask-position: 0%;\n  }\n}\n\n.SkeletonBox {\n  display: block;\n  height: 1rem;\n  background-color: var(--bgColor-muted);\n  border-radius: var(--borderRadius-small);\n  animation: shimmer;\n\n  @media (prefers-reduced-motion: no-preference) {\n    mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);\n    mask-size: 200%;\n    animation: shimmer;\n    animation-duration: 1s;\n    animation-iteration-count: infinite;\n  }\n\n  @media (forced-colors: active) {\n    outline: 1px solid transparent;\n    outline-offset: -1px;\n  }\n}\n"]}

data/app/components/primer/open_project/skeleton_box.html.erb

@@ -0,0 +1 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) %>

data/app/components/primer/open_project/skeleton_box.pcss

@@ -0,0 +1,30 @@
+@keyframes shimmer {
+  from {
+    mask-position: 200%;
+  }
+
+  to {
+    mask-position: 0%;
+  }
+}
+
+.SkeletonBox {
+  display: block;
+  height: 1rem;
+  background-color: var(--bgColor-muted);
+  border-radius: var(--borderRadius-small);
+  animation: shimmer;
+
+  @media (prefers-reduced-motion: no-preference) {
+    mask-image: linear-gradient(75deg, #000 30%, rgba(0, 0, 0, 0.65) 80%);
+    mask-size: 200%;
+    animation: shimmer;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+  }
+
+  @media (forced-colors: active) {
+    outline: 1px solid transparent;
+    outline-offset: -1px;
+  }
+}

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

@@ -0,0 +1,27 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A SkeletonBox provides a placeholder for non-text, non-Avatar elements (e.g., hero images)
+    # that are still loading. You can adjust width and height to match the content's dimensions.
+    class SkeletonBox < Primer::Component
+      # @param height [String] Any valid CSS height.
+      # @param width [String] Any valid CSS width.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(height: nil, width: nil, **system_arguments)
+        @system_arguments = deny_tag_argument(**system_arguments)
+
+        styles = []
+        styles << "width: #{width}" if width
+        styles << "height: #{height}" if height
+
+        @system_arguments[:tag] = :div
+        @system_arguments[:style] = styles.join("; ") if styles.present?
+        @system_arguments[:classes] = class_names(
+          @system_arguments.delete(:classes),
+          "SkeletonBox"
+        )
+      end
+    end
+  end
+end

data/app/components/primer/open_project/tree_view/icon.html.erb

@@ -0,0 +1 @@
+<%= render(Primer::Beta::Octicon.new(**@system_arguments)) %>

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

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class TreeView
+      # An icon for a `TreeView` node.
+      #
+      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # not be used directly.
+      class Icon < Primer::Component
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>.
+        def initialize(**system_arguments)
+          @system_arguments = system_arguments
+          @system_arguments[:focusable] = "false"
+          @system_arguments[:display] = :inline_block
+          @system_arguments[:overflow] = :visible
+          @system_arguments[:style] = "vertical-align: text-bottom;"
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/tree_view/icon_pair.html.erb

@@ -0,0 +1,13 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <% if expanded_icon? %>
+    <div data-target="tree-view-icon-pair.expandedIcon" <%= expanded? ? "" : "hidden" %>>
+      <%= expanded_icon %>
+    </div>
+  <% end %>
+
+  <% if collapsed_icon? %>
+    <div data-target="tree-view-icon-pair.collapsedIcon" <%= expanded? ? "hidden" : "" %>>
+      <%= collapsed_icon %>
+    </div>
+  <% end %>
+<% end %>

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

@@ -0,0 +1,42 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class TreeView
+      # A pair of icons for a `TreeView` sub-tree that displays distinct icons when the sub-tree is
+      # expanded and collapsed.
+      #
+      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # not be used directly.
+      class IconPair < Primer::Component
+        # The expanded icon.
+        #
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Icon) %>.
+        renders_one :expanded_icon, lambda { |**system_arguments|
+          Icon.new(**system_arguments)
+        }
+
+        # The collapsed icon.
+        #
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::OpenProject::TreeView::Icon) %>.
+        renders_one :collapsed_icon, lambda { |**system_arguments|
+          Icon.new(**system_arguments)
+        }
+
+        # Whether or not this icon is expanded.
+        #
+        # @return [Boolean]
+        attr_reader :expanded
+        alias expanded? expanded
+
+        # @param expanded [Boolean] If true, the expanded icon is shown and the collapsed icon is hidden, etc.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(expanded: false, **system_arguments)
+          @expanded = expanded
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :"tree-view-icon-pair"
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/tree_view/leading_action.html.erb

@@ -0,0 +1,3 @@
+<div class="TreeViewItemLeadingAction" aria-hidden="true">
+  <%= render(@action) %>
+</div>

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

@@ -0,0 +1,18 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    class TreeView
+      # The leading action for `TreeView` nodes.
+      #
+      # This component is part of the <%= link_to_component(Primer::OpenProject::TreeView) %> component and should
+      # not be used directly.
+      class LeadingAction < Primer::Component
+        # @param action [ViewComponent::Base] A component or other renderable to use as the action button etc.
+        def initialize(action:)
+          @action = action
+        end
+      end
+    end
+  end
+end

data/app/components/primer/open_project/tree_view/leaf_node.html.erb

@@ -0,0 +1,18 @@
+<%= render(@node) do |node| %>
+  <% if leading_action? %>
+    <% node.with_leading_action do %>
+      <%= leading_action %>
+    <% end %>
+  <% end %>
+  <% if leading_visual? %>
+    <% node.with_leading_visual do %>
+      <%= leading_visual %>
+    <% end %>
+  <% end %>
+  <% if trailing_visual? %>
+    <% node.with_trailing_visual do %>
+      <%= trailing_visual %>
+    <% end %>
+  <% end %>
+  <% node.with_text_content { @label } %>
+<% end %>