[DREAM-798] TreeView is misaligned when using single select and async loading

.changeset/calm-trees-align.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Align asynchronously loaded single-select TreeView labels with their toggles

app/components/primer/alpha/tree_view.pcss

@@ -284,7 +284,7 @@
 
     /* The visual icons should appear vertically centered for single-line items, but remain at the top for items that wrap
     across more lines. */
-    align-self: baseline;
+    align-self: flex-start;
     height: var(--custom-line-height, 1.3rem);
     color: var(--fgColor-muted);
     align-items: center;

app/controllers/primer/view_components/tree_view_items_controller.rb

@@ -46,7 +46,7 @@ def async_alpha
 
         render(
           locals: {
-            action_menu_expanded: params[:action_menu_expanded] == "true",
+            nested_children_expanded: params[:nested_children_expanded] == "true",
             select_variant: (params[:select_variant] || :none).to_sym
           }
         )

app/views/primer/view_components/tree_view_items/async_alpha.html_fragment.erb

@@ -5,7 +5,7 @@
       <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
     <% end %>
 
-    <% sub_tree.with_sub_tree(label: "action_menu", expanded: action_menu_expanded, select_variant: select_variant, select_strategy: :self) do |sub_tree| %>
+    <% sub_tree.with_sub_tree(label: "action_menu", expanded: nested_children_expanded, select_variant: select_variant, select_strategy: :self) do |sub_tree| %>
       <% sub_tree.with_leading_visual_icons do |icons| %>
         <% icons.with_expanded_icon(icon: :"file-directory-open-fill", color: :accent) %>
         <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>

previews/primer/alpha/tree_view_preview.rb

@@ -113,11 +113,11 @@ def loading_skeleton(simulate_failure: false, simulate_empty: false)
 
       # @label Async alpha
       #
-      # @param action_menu_expanded [Boolean] toggle
+      # @param nested_children_expanded [Boolean] toggle
       # @param select_variant [Symbol] select [none, single, multiple]
-      def async_alpha(action_menu_expanded: false, select_variant: :none)
+      def async_alpha(nested_children_expanded: false, select_variant: :none)
         render_with_template(locals: {
-          action_menu_expanded: coerce_bool(action_menu_expanded),
+          nested_children_expanded: coerce_bool(nested_children_expanded),
           select_variant: select_variant.to_sym
         })
       end

previews/primer/alpha/tree_view_preview/async_alpha.html.erb

@@ -6,7 +6,7 @@
         <% icons.with_collapsed_icon(icon: :"file-directory-fill", color: :accent) %>
       <% end %>
 
-      <% sub_tree.with_loading_skeleton(src: primer_view_components.tree_view_items_async_alpha_path(action_menu_expanded: action_menu_expanded, select_variant: select_variant)) %>
+      <% sub_tree.with_loading_skeleton(src: primer_view_components.tree_view_items_async_alpha_path(nested_children_expanded: nested_children_expanded, select_variant: select_variant)) %>
     <% end %>
   <% end %>
 </div>

test/system/alpha/tree_view_test.rb

@@ -117,7 +117,7 @@ def test_automatically_expands_all_ancestors
 
     # This explicitly tests the MutationObserver in tree_view.ts that listens for expanded nodes
     def test_automatically_expands_all_ancestors_when_async_items_have_expanded_child
-      visit_preview(:async_alpha, action_menu_expanded: true)
+      visit_preview(:async_alpha, nested_children_expanded: true)
 
       activate_at_path("primer")
       assert node_at_path("primer", "alpha", "action_menu", "heading.rb")