Skip to content

Commit c6d2e69

Browse files
HDingerHDinger
authored
Merge pull request #356 from opf/feature/67541-hide-segmented-control-and-include-sub-itmes-checkbox-of-the-filterable-tree-view
[67541] Hide segmented control and include sub-itmes checkbox of the filterable tree view
2 parents 7f8e716 + aa4091f commit c6d2e69

File tree

8 files changed

+140
-17
lines changed

8 files changed

+140
-17
lines changed

‎.changeset/poor-plants-change.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@openproject/primer-view-components': minor
3+
---
4+
5+
Make SegmentedControl and "Include sub-nodes" checkbox optional for FilterableTreeView

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

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,12 @@
22
<%= render(Primer::Alpha::Stack.new) do %>
33
<%= render(Primer::Alpha::Stack.new(wrap: :reverse, direction: :horizontal, align: :center)) do %>
44
<%= render(Primer::Alpha::Stack.new(wrap: :wrap, direction: :horizontal, align: :center)) do %>
5-
<%= render(Primer::Alpha::StackItem.new) do %>
6-
<%= render(@filter_mode_control) %>
5+
<% if @filter_mode_control.present? %>
6+
<%= render(Primer::Alpha::StackItem.new) do %>
7+
<%= render(@filter_mode_control) %>
8+
<% end %>
79
<% end %>
8-
<%= render(Primer::Alpha::StackItem.new) do %>
10+
<%= render(Primer::Alpha::StackItem.new(hidden: @include_sub_items_check_box_arguments[:hidden])) do %>
911
<%= render(@include_sub_items_check_box) do |input| %>
1012
<% input.merge_input_arguments!(form: "") %>
1113
<% end %>

‎app/components/primer/open_project/filterable_tree_view.rb‎

Lines changed: 17 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -126,7 +126,9 @@ class FilterableTreeView < Primer::Component
126126

127127
DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS = {
128128
label: I18n.t("filterable_tree_view.include_sub_items"),
129-
name: :include_sub_items
129+
name: :include_sub_items,
130+
checked: false,
131+
hidden: false,
130132
}
131133

132134
DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS.freeze
@@ -184,21 +186,25 @@ def initialize(
184186

185187
@filter_input = Primer::Alpha::TextField.new(**filter_input_arguments)
186188

187-
filter_mode_control_arguments[:data] = merge_data(
188-
filter_mode_control_arguments, {
189-
data: { target: "filterable-tree-view.filterModeControlList" }
190-
}
191-
)
189+
unless filter_mode_control_arguments == :none
190+
filter_mode_control_arguments[:data] = merge_data(
191+
filter_mode_control_arguments, {
192+
data: { target: "filterable-tree-view.filterModeControlList" }
193+
}
194+
)
195+
196+
@filter_mode_control = Primer::Alpha::SegmentedControl.new(**filter_mode_control_arguments)
197+
end
192198

193-
@filter_mode_control = Primer::Alpha::SegmentedControl.new(**filter_mode_control_arguments)
199+
@include_sub_items_check_box_arguments = include_sub_items_check_box_arguments.reverse_merge(DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS)
194200

195-
include_sub_items_check_box_arguments[:data] = merge_data(
196-
include_sub_items_check_box_arguments, {
201+
@include_sub_items_check_box_arguments[:data] = merge_data(
202+
@include_sub_items_check_box_arguments, {
197203
data: { target: "filterable-tree-view.includeSubItemsCheckBox" }
198204
}
199205
)
200206

201-
@include_sub_items_check_box = Primer::Alpha::CheckBox.new(**include_sub_items_check_box_arguments)
207+
@include_sub_items_check_box = Primer::Alpha::CheckBox.new(**@include_sub_items_check_box_arguments)
202208

203209
@system_arguments = deny_tag_argument(**system_arguments)
204210
@system_arguments[:tag] = :"filterable-tree-view"
@@ -245,7 +251,7 @@ def with_leaf(**system_arguments, &block)
245251
def before_render
246252
content
247253

248-
if @filter_mode_control.items.empty?
254+
if @filter_mode_control.present? && @filter_mode_control.items.empty?
249255
with_default_filter_modes
250256
end
251257
end

‎previews/primer/open_project/filterable_tree_view_preview.rb‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,13 @@ class FilterableTreeViewPreview < ViewComponent::Preview
77
# @label Playground
88
#
99
# @param expanded [Boolean] toggle
10-
def playground(expanded: true)
10+
# @param show_checkbox [Boolean] toggle
11+
# @param show_segmented_control [Boolean] toggle
12+
def playground(expanded: true, show_checkbox: true, show_segmented_control: true)
1113
render_with_template(locals: {
12-
expanded: coerce_bool(expanded)
14+
expanded: coerce_bool(expanded),
15+
show_checkbox: coerce_bool(show_checkbox),
16+
show_segmented_control: coerce_bool(show_segmented_control)
1317
})
1418
end
1519

@@ -106,6 +110,23 @@ def custom_checkbox_text(expanded: true)
106110
})
107111
end
108112

113+
# @label Hide checkbox
114+
#
115+
# @param include_sub_items [Boolean] toggle
116+
def hide_checkbox(include_sub_items: true)
117+
render_with_template(locals: {
118+
expanded: true,
119+
include_sub_items: coerce_bool(include_sub_items)
120+
})
121+
end
122+
123+
# @label Hide SegmentedControl
124+
def hide_segmented_control(expanded: true)
125+
render_with_template(locals: {
126+
expanded: coerce_bool(expanded)
127+
})
128+
end
129+
109130
private
110131

111132
def coerce_bool(value)

‎previews/primer/open_project/filterable_tree_view_preview/hide_checkbox.html.erb‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
<%= render(Primer::OpenProject::FilterableTreeView.new(
2+
include_sub_items_check_box_arguments: { hidden: true, checked: include_sub_items }
3+
)) do |tree| %>
4+
<% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
5+
<% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
6+
<% ravenclaw.with_leaf(label: "Luna Lovegood") %>
7+
<% end %>
8+
9+
<% hogwarts.with_sub_tree(label: "Slytherin", expanded: expanded) do |hufflepuff| %>
10+
<% hufflepuff.with_leaf(label: "Draco Malfoy") %>
11+
<% end %>
12+
13+
<% hogwarts.with_sub_tree(label: "Hufflepuff", expanded: expanded) do |hufflepuff| %>
14+
<% hufflepuff.with_leaf(label: "Susan Bones") %>
15+
<% end %>
16+
17+
<% hogwarts.with_sub_tree(label: "Gryffindor", expanded: expanded) do |hufflepuff| %>
18+
<% hufflepuff.with_leaf(label: "Harry Potter") %>
19+
<% hufflepuff.with_leaf(label: "Ronald Weasley") %>
20+
<% hufflepuff.with_leaf(label: "Hermione Granger") %>
21+
<% end %>
22+
<% end %>
23+
24+
<% tree.with_leaf(label: "Albus Dumbledore") %>
25+
<% tree.with_leaf(label: "Minerva McGonagall") %>
26+
<% tree.with_leaf(label: "Severus Snape") %>
27+
<% tree.with_leaf(label: "Rubeus Hagrid") %>
28+
<% end %>

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

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
<%= render(Primer::OpenProject::FilterableTreeView.new(filter_mode_control_arguments: :none)) do |tree| %>
2+
<% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
3+
<% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
4+
<% ravenclaw.with_leaf(label: "Luna Lovegood") %>
5+
<% end %>
6+
7+
<% hogwarts.with_sub_tree(label: "Slytherin", expanded: expanded) do |hufflepuff| %>
8+
<% hufflepuff.with_leaf(label: "Draco Malfoy") %>
9+
<% end %>
10+
11+
<% hogwarts.with_sub_tree(label: "Hufflepuff", expanded: expanded) do |hufflepuff| %>
12+
<% hufflepuff.with_leaf(label: "Susan Bones") %>
13+
<% end %>
14+
15+
<% hogwarts.with_sub_tree(label: "Gryffindor", expanded: expanded) do |hufflepuff| %>
16+
<% hufflepuff.with_leaf(label: "Harry Potter") %>
17+
<% hufflepuff.with_leaf(label: "Ronald Weasley") %>
18+
<% hufflepuff.with_leaf(label: "Hermione Granger") %>
19+
<% end %>
20+
<% end %>
21+
22+
<% tree.with_leaf(label: "Albus Dumbledore") %>
23+
<% tree.with_leaf(label: "Minerva McGonagall") %>
24+
<% tree.with_leaf(label: "Severus Snape") %>
25+
<% tree.with_leaf(label: "Rubeus Hagrid") %>
26+
<% end %>

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

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1-
<%= render(Primer::OpenProject::FilterableTreeView.new) do |tree| %>
1+
<%= render(Primer::OpenProject::FilterableTreeView.new(
2+
include_sub_items_check_box_arguments: { hidden: !show_checkbox },
3+
**(show_segmented_control ? {} : { filter_mode_control_arguments: :none })
4+
)) do |tree| %>
25
<% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
36
<% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
47
<% ravenclaw.with_leaf(label: "Luna Lovegood") %>

‎test/components/primer/open_project/filterable_tree_view_test.rb‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,16 @@ def test_filter_mode_control_label_can_be_overridden
5151
assert_selector("segmented-control [role=list][aria-label='Filtermodus']")
5252
end
5353

54+
def test_segmented_control_can_be_hidden
55+
render_inline(
56+
Primer::OpenProject::FilterableTreeView.new(
57+
filter_mode_control_arguments: :none
58+
)
59+
)
60+
61+
assert_no_selector("segmented-control")
62+
end
63+
5464
def test_has_include_sub_items_check_box
5565
render_preview(:default)
5666

@@ -61,6 +71,28 @@ def test_has_include_sub_items_check_box
6171
assert_selector("label[for='#{id}']", text: "Include sub-items")
6272
end
6373

74+
def test_include_sub_items_can_be_hidden
75+
render_inline(
76+
Primer::OpenProject::FilterableTreeView.new(
77+
include_sub_items_check_box_arguments: { hidden: true }
78+
)
79+
)
80+
81+
assert_selector(".FormControl-checkbox-wrap", visible: :hidden)
82+
assert_selector("input[name=include_sub_items]", visible: :hidden)
83+
end
84+
85+
def test_include_sub_items_can_have_a_different_default
86+
render_inline(
87+
Primer::OpenProject::FilterableTreeView.new(
88+
include_sub_items_check_box_arguments: { checked: true }
89+
)
90+
)
91+
92+
assert_selector(".FormControl-checkbox-wrap", visible: :visible)
93+
assert_selector("input[name=include_sub_items][checked=checked]", visible: :visible)
94+
end
95+
6496
def test_has_filter_input
6597
render_preview(:default)
6698

0 commit comments

Comments
 (0)