Change the param name and fix the misalignment between text and chavron

Author: bsatarnejad

.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

@@ -288,6 +288,13 @@
     height: var(--custom-line-height, 1.3rem);
     color: var(--fgColor-muted);
     align-items: center;
+
+    /* Unlike leading visuals, the single-select checkmark should align with the first line's box instead of
+    participating in baseline alignment. A second baseline-aligned visual changes the row height and causes the
+    node label to appear lower than its toggle. */
+    &.TreeViewItem-singleSelectCheckmark {
+      align-self: flex-start;
+    }
   }
 
   & .TreeViewItemLeadingAction {

app/components/primer/alpha/tree_view/node.html.erb

@@ -24,8 +24,8 @@
       <% end %>
       <span class="TreeViewItemContentText"><%= text_content %></span>
       <% if @select_variant == :single %>
-        <span class="TreeViewItemVisual" aria-hidden="true">
-          <%= render(Primer::Beta::Octicon.new(icon: :check, classes: "TreeViewItem-singleSelectCheckmark")) %>
+        <span class="TreeViewItemVisual TreeViewItem-singleSelectCheckmark" aria-hidden="true">
+          <%= render(Primer::Beta::Octicon.new(icon: :check)) %>
         </span>
       <% elsif trailing_visual? %>
         <%= trailing_visual %>

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_child_expanded: params[:nested_child_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_child_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_child_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_child_expanded: false, select_variant: :none)
         render_with_template(locals: {
-          action_menu_expanded: coerce_bool(action_menu_expanded),
+          nested_child_expanded: coerce_bool(nested_child_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_child_expanded: nested_child_expanded, select_variant: select_variant)) %>
     <% end %>
   <% end %>
 </div>

test/components/primer/alpha/tree_view_test.rb

@@ -259,6 +259,16 @@ def test_disallows_trailing_visuals_when_single_select_variant_is_used
 
         assert_equal error.message, "Trailing visuals can't be used in combination with single select mode as the icon is reserved."
       end
+
+      def test_single_select_checkmark_is_the_trailing_visual
+        render_inline(Primer::Alpha::TreeView.new) do |tree|
+          tree.with_leaf(label: "src", select_variant: :single)
+        end
+
+        assert_selector ".TreeViewItemContent > .TreeViewItemVisual.TreeViewItem-singleSelectCheckmark" do |visual|
+          visual.assert_selector "svg.octicon-check"
+        end
+      end
     end
   end
 end

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_child_expanded: true)
 
       activate_at_path("primer")
       assert node_at_path("primer", "alpha", "action_menu", "heading.rb")
@@ -735,6 +735,15 @@ def test_single_select_works_after_async_loading
       assert_path("primer", "alpha")
       assert_path_checked("primer")
 
+      label_and_toggle_centers = evaluate_multiline_script(<<~JS)
+        const node = document.querySelector(#{selector_for("primer", "alpha").to_json})
+        const labelRect = node.querySelector('.TreeViewItemContentText').getBoundingClientRect()
+        const toggleRect = node.parentElement.querySelector('.TreeViewItemToggle svg:not([hidden])').getBoundingClientRect()
+
+        return [labelRect.y + labelRect.height / 2, toggleRect.y + toggleRect.height / 2]
+      JS
+      assert_in_delta label_and_toggle_centers[0], label_and_toggle_centers[1], 0.5
+
       # Expand down to the leaf nodes
       expand_at_path("primer", "alpha")
       expand_at_path("primer", "alpha", "action_menu")