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/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/default.png index d916884ddf..179e1b29aa 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/focused.png index 89744a49db..91b330ec7d 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/file_tree_view/default/focused.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/default.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/default.png index 44680cccd3..b4d70c1112 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/default.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/default.png differ diff --git a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/focused.png b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/focused.png index 22043df804..9e37b4bcd2 100644 Binary files a/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/focused.png and b/.playwright/screenshots/snapshots.test.ts-snapshots/primer/alpha/tree_view/default/focused.png differ diff --git a/app/components/primer/alpha/tree_view.pcss b/app/components/primer/alpha/tree_view.pcss index 282e75ec67..78b910cf84 100644 --- a/app/components/primer/alpha/tree_view.pcss +++ b/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; diff --git a/app/controllers/primer/view_components/tree_view_items_controller.rb b/app/controllers/primer/view_components/tree_view_items_controller.rb index 875e01471e..2efe06258f 100644 --- a/app/controllers/primer/view_components/tree_view_items_controller.rb +++ b/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 } ) diff --git a/app/views/primer/view_components/tree_view_items/async_alpha.html_fragment.erb b/app/views/primer/view_components/tree_view_items/async_alpha.html_fragment.erb index 60d4775276..2fd5e4433d 100644 --- a/app/views/primer/view_components/tree_view_items/async_alpha.html_fragment.erb +++ b/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) %> diff --git a/previews/primer/alpha/tree_view_preview.rb b/previews/primer/alpha/tree_view_preview.rb index ddd973d98f..2461358577 100644 --- a/previews/primer/alpha/tree_view_preview.rb +++ b/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 diff --git a/previews/primer/alpha/tree_view_preview/async_alpha.html.erb b/previews/primer/alpha/tree_view_preview/async_alpha.html.erb index fe5277aa41..047a6cb499 100644 --- a/previews/primer/alpha/tree_view_preview/async_alpha.html.erb +++ b/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 %> diff --git a/test/system/alpha/tree_view_test.rb b/test/system/alpha/tree_view_test.rb index bbd8695630..fd8bd01690 100644 --- a/test/system/alpha/tree_view_test.rb +++ b/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")