Hide the SegmentedControl only visually, as it is still needed for the filter function

Author: HDinger

.changeset/fuzzy-baboons-grow.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Change signature to hide the SegmentedControl in FilterableTreeView

app/components/primer/open_project/filterable_tree_view.html.erb

@@ -1,13 +1,12 @@
 <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
   <%= render(Primer::Alpha::Stack.new) do %>
     <%= render(Primer::Alpha::Stack.new(wrap: :reverse, direction: :horizontal, align: :center)) do %>
-      <%= render(Primer::Alpha::Stack.new(wrap: :wrap, direction: :horizontal, align: :center)) do %>
-        <% if @filter_mode_control.present? %>
-          <%= render(Primer::Alpha::StackItem.new) do %>
-            <%= render(@filter_mode_control) %>
-          <% end %>
+      <%= render(Primer::ConditionalWrapper.new(condition: !hide_filter_mode_control? && !hide_include_sub_items_check_box?,
+                                                component: Primer::Alpha::Stack, wrap: :wrap, direction: :horizontal, align: :center)) do %>
+        <%= render(Primer::Alpha::StackItem.new(hidden: hide_filter_mode_control?)) do %>
+          <%= render(@filter_mode_control) %>
         <% end %>
-        <%= render(Primer::Alpha::StackItem.new(hidden: @include_sub_items_check_box_arguments[:hidden])) do %>
+        <%= render(Primer::Alpha::StackItem.new(hidden: hide_include_sub_items_check_box?)) do %>
           <%= render(@include_sub_items_check_box) do |input| %>
             <% input.merge_input_arguments!(form: "") %>
           <% end %>

app/components/primer/open_project/filterable_tree_view.rb

@@ -119,7 +119,8 @@ class FilterableTreeView < Primer::Component
       DEFAULT_FILTER_MODE_CONTROL_ARGUMENTS = {
         aria: {
           label: I18n.t("filterable_tree_view.filter_mode.label")
-        }
+        },
+        hidden: false,
       }
 
       DEFAULT_FILTER_MODE_CONTROL_ARGUMENTS.freeze
@@ -186,15 +187,15 @@ def initialize(
 
         @filter_input = Primer::Alpha::TextField.new(**filter_input_arguments)
 
-        unless filter_mode_control_arguments == :none
-          filter_mode_control_arguments[:data] = merge_data(
-            filter_mode_control_arguments, {
-              data: { target: "filterable-tree-view.filterModeControlList" }
-            }
-          )
 
-          @filter_mode_control = Primer::Alpha::SegmentedControl.new(**filter_mode_control_arguments)
-        end
+        @filter_mode_control_arguments = filter_mode_control_arguments.reverse_merge(DEFAULT_FILTER_MODE_CONTROL_ARGUMENTS)
+        @filter_mode_control_arguments[:data] = merge_data(
+          @filter_mode_control_arguments, {
+            data: { target: "filterable-tree-view.filterModeControlList" }
+          }
+        )
+
+        @filter_mode_control = Primer::Alpha::SegmentedControl.new(**@filter_mode_control_arguments)
 
         @include_sub_items_check_box_arguments = include_sub_items_check_box_arguments.reverse_merge(DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS)
 
@@ -255,6 +256,14 @@ def before_render
           with_default_filter_modes
         end
       end
+
+      def hide_filter_mode_control?
+        @filter_mode_control_arguments[:hidden]
+      end
+
+      def hide_include_sub_items_check_box?
+        @include_sub_items_check_box_arguments[:hidden]
+      end
     end
   end
 end

previews/primer/open_project/filterable_tree_view_preview/hide_segmented_control.html.erb

@@ -1,4 +1,4 @@
-<%= render(Primer::OpenProject::FilterableTreeView.new(filter_mode_control_arguments: :none)) do |tree| %>
+<%= render(Primer::OpenProject::FilterableTreeView.new(filter_mode_control_arguments: { hidden: true })) do |tree| %>
   <% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
     <% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
       <% ravenclaw.with_leaf(label: "Luna Lovegood") %>

previews/primer/open_project/filterable_tree_view_preview/playground.html.erb

@@ -1,6 +1,6 @@
 <%= render(Primer::OpenProject::FilterableTreeView.new(
   include_sub_items_check_box_arguments: { hidden: !show_checkbox },
-  **(show_segmented_control ? {} : { filter_mode_control_arguments: :none })
+  filter_mode_control_arguments: { hidden: !show_segmented_control }
 )) do |tree| %>
   <% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
     <% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>

test/components/primer/open_project/filterable_tree_view_test.rb

@@ -54,11 +54,11 @@ def test_filter_mode_control_label_can_be_overridden
       def test_segmented_control_can_be_hidden
         render_inline(
           Primer::OpenProject::FilterableTreeView.new(
-            filter_mode_control_arguments: :none
+            filter_mode_control_arguments: { hidden: true }
           )
         )
 
-        assert_no_selector("segmented-control")
+        assert_selector("segmented-control", visible: :hidden)
       end
 
       def test_has_include_sub_items_check_box