From 326c91d19bcdfcfecb7933074a2b3ecbef196d8a Mon Sep 17 00:00:00 2001 From: Behrokh Satarnejad Date: Mon, 17 Aug 2026 15:13:26 +0200 Subject: [PATCH 1/8] Change the param name and fix the misalignment between text and chavron --- .changeset/calm-trees-align.md | 5 +++++ app/components/primer/alpha/tree_view.pcss | 7 +++++++ app/components/primer/alpha/tree_view/node.html.erb | 4 ++-- .../view_components/tree_view_items_controller.rb | 2 +- .../tree_view_items/async_alpha.html_fragment.erb | 2 +- previews/primer/alpha/tree_view_preview.rb | 6 +++--- .../alpha/tree_view_preview/async_alpha.html.erb | 2 +- test/components/primer/alpha/tree_view_test.rb | 10 ++++++++++ test/system/alpha/tree_view_test.rb | 11 ++++++++++- 9 files changed, 40 insertions(+), 9 deletions(-) create mode 100644 .changeset/calm-trees-align.md diff --git a/.changeset/calm-trees-align.md b/.changeset/calm-trees-align.md new file mode 100644 index 0000000000..c6af9521ca --- /dev/null +++ b/.changeset/calm-trees-align.md @@ -0,0 +1,5 @@ +--- +'@openproject/primer-view-components': patch +--- + +Align asynchronously loaded single-select TreeView labels with their toggles diff --git a/app/components/primer/alpha/tree_view.pcss b/app/components/primer/alpha/tree_view.pcss index 282e75ec67..66a4e9e31d 100644 --- a/app/components/primer/alpha/tree_view.pcss +++ b/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 { diff --git a/app/components/primer/alpha/tree_view/node.html.erb b/app/components/primer/alpha/tree_view/node.html.erb index 18b34e52d8..02cee88143 100644 --- a/app/components/primer/alpha/tree_view/node.html.erb +++ b/app/components/primer/alpha/tree_view/node.html.erb @@ -24,8 +24,8 @@ <% end %> <%= text_content %> <% if @select_variant == :single %> -