Skip to content

Commit 1e54593

Browse files
HDingerHDinger
authored
Merge pull request opf#462 from opf/bug/74832-quick-filters-don-t-react-good-to-medium-screen-sizes
[74832] QuickFilter improvements
2 parents fa990fa + f4ce4ef commit 1e54593

15 files changed

Lines changed: 160 additions & 33 deletions

File tree

‎.changeset/loose-dragons-drop.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': patch
3+
---
4+
5+
Allow single quickFilters without additional "all filters" button

‎.changeset/slow-eyes-do.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': patch
3+
---
4+
5+
Better responsive support for SubHeader with quickfilters

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

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,13 @@
77

88
<%= render @collapsed_filter_trigger if @collapsed_filter_trigger.present? %>
99

10-
<%= render(Primer::BaseComponent.new(tag: :div, display: :flex)) do %>
11-
<% quick_filters.each do |quick_filter| %>
12-
<%= quick_filter %>
13-
<% end %>
14-
15-
<%= render(@mobile_filter_button) if @mobile_filter_button.present? %>
16-
<%= filter_button %>
10+
<% quick_filters.each do |quick_filter| %>
11+
<%= quick_filter %>
1712
<% end %>
1813

14+
<%= render(@mobile_filter_button) if @mobile_filter_button.present? %>
15+
<%= filter_button %>
16+
1917
<%= segmented_control %>
2018

2119
<% if @segmented_control_block.present? %>

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ class SubHeader < Primer::Component
1010
SHOWN_FILTER_TARGET_SELECTOR = "sub-header.shownItemsOnExpandedFilter"
1111
FILTER_EXPAND_BUTTON_TARGET_SELECTOR = "sub-header.filterExpandButton"
1212

13-
MOBILE_ACTIONS_DISPLAY = [:flex, :none].freeze
14-
DESKTOP_ACTIONS_DISPLAY = [:none, :flex].freeze
13+
MOBILE_ACTIONS_DISPLAY = [:flex, :flex, :none].freeze
14+
DESKTOP_ACTIONS_DISPLAY = [:none, :none, :flex].freeze
1515

1616
# A button or custom content that will render on the right-hand side of the component.
1717
#
@@ -177,9 +177,8 @@ class SubHeader < Primer::Component
177177
deny_tag_argument(**kwargs)
178178
kwargs[:tag] = :div
179179
kwargs[:mr] ||= 2
180-
kwargs[:display] = DESKTOP_ACTIONS_DISPLAY
181180

182-
Primer::BaseComponent.new(**kwargs)
181+
QuickFilter.new(**kwargs)
183182
}
184183

185184
renders_one :segmented_control, lambda { |**system_arguments, &block|
@@ -235,14 +234,20 @@ def initialize(collapsed_search: false, **system_arguments)
235234
end
236235

237236
def before_render
238-
if quick_filters.any? && filter_button.nil?
237+
if quick_filters.size > 1 && filter_button.nil?
239238
raise ArgumentError, "You must provide a filter_button when using quick_filters."
240239
end
241240

242241
if quick_filters.size > 5
243242
raise ArgumentError, "SubHeader supports a maximum of 5 quick_filters, got #{quick_filters.size}."
244243
end
245244

245+
if quick_filters.size > 1
246+
quick_filters.each do |qf|
247+
qf.merge_system_arguments!(display: DESKTOP_ACTIONS_DISPLAY)
248+
end
249+
end
250+
246251
@system_arguments[:classes] = class_names(
247252
@system_arguments[:classes],
248253
"SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input && quick_filters.empty?

‎app/components/primer/open_project/sub_header/quick_filter.rb‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# frozen_string_literal: true
2+
3+
module Primer
4+
module OpenProject
5+
# Thin wrapper for quick filter slots that defers BaseComponent construction to render time,
6+
# allowing system arguments (e.g. display) to be mutated in before_render.
7+
# Do not use standalone
8+
class SubHeader::QuickFilter < Primer::Component
9+
status :open_project
10+
11+
def initialize(**system_arguments)
12+
@system_arguments = system_arguments
13+
end
14+
15+
def merge_system_arguments!(**other_arguments)
16+
@system_arguments[:aria] = merge_aria(@system_arguments, other_arguments)
17+
@system_arguments[:data] = merge_data(@system_arguments, other_arguments)
18+
@system_arguments.merge!(**other_arguments)
19+
end
20+
21+
def call
22+
render(Primer::BaseComponent.new(**@system_arguments)) { content }
23+
end
24+
end
25+
end
26+
end

‎previews/primer/open_project/sub_header_preview.rb‎

Lines changed: 10 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ class SubHeaderPreview < ViewComponent::Preview
1010
# @label Playground
1111
# @param show_filter_input toggle
1212
# @param show_filter_button toggle
13+
# @param show_quick_filter toggle
1314
# @param show_action_button toggle
1415
# @param show_clear_button toggle
1516
# @param collapsed_search toggle
@@ -19,28 +20,20 @@ def playground(
1920
show_filter_input: true,
2021
show_clear_button: true,
2122
show_filter_button: true,
23+
show_quick_filter: true,
2224
show_action_button: true,
2325
collapsed_search: false,
2426
text: nil,
2527
value: nil
2628
)
27-
render(Primer::OpenProject::SubHeader.new(collapsed_search: collapsed_search)) do |component|
28-
component.with_filter_input(
29-
name: "filter",
30-
label: "Filter",
31-
show_clear_button: show_clear_button,
32-
value: value) if show_filter_input
33-
component.with_filter_button do |button|
34-
button.with_trailing_visual_counter(count: "15")
35-
"Filter"
36-
end if show_filter_button
37-
38-
component.with_text { text } unless text.nil?
39-
40-
component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
41-
"Create"
42-
end if show_action_button
43-
end
29+
render_with_template(locals: {show_filter_input: show_filter_input,
30+
show_clear_button: show_clear_button,
31+
show_filter_button: show_filter_button,
32+
show_quick_filter: show_quick_filter,
33+
show_action_button: show_action_button,
34+
collapsed_search: collapsed_search,
35+
text: text,
36+
value: value})
4437
end
4538

4639
# @label Default

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

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<%= render(Primer::OpenProject::SubHeader.new(collapsed_search: collapsed_search)) do |component|
2+
component.with_filter_input(name: "filter",
3+
label: "Filter",
4+
show_clear_button: show_clear_button,
5+
value: value) if show_filter_input
6+
7+
component.with_filter_button(mobile_label: "All filters") do
8+
"All filters"
9+
end if show_filter_button
10+
11+
component.with_text { text } unless text.nil?
12+
13+
component.with_action_button(leading_icon: :plus, label: "Create", scheme: :primary) do
14+
"Create"
15+
end if show_action_button
16+
17+
if show_quick_filter
18+
component.with_quick_filter do
19+
render(Primer::Alpha::SelectPanel.new(title: "Version",
20+
select_variant: :single,
21+
fetch_strategy: :local,
22+
dynamic_label: true,
23+
dynamic_label_prefix: "Version")) do |panel|
24+
panel.with_show_button { "Version" }
25+
panel.with_item(label: "1.0")
26+
panel.with_item(label: "2.0")
27+
panel.with_item(label: "2.1")
28+
end
29+
end
30+
end
31+
end %>

‎previews/primer/open_project/sub_header_preview/quick_filters.html.erb‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,13 @@
55
"All filters"
66
end
77

8+
component.with_quick_filter do
9+
render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component|
10+
component.with_item(label: "Monthly", selected: true)
11+
component.with_item(label: "Yearly")
12+
end
13+
end
14+
815
component.with_quick_filter do
916
render(Primer::Alpha::SelectPanel.new(title: "Version",
1017
select_variant: :single,

‎static/arguments.json‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6599,6 +6599,15 @@
65996599
}
66006600
]
66016601
},
6602+
{
6603+
"component": "OpenProject::SubHeader::QuickFilter",
6604+
"status": "open_project",
6605+
"a11y_reviewed": false,
6606+
"short_name": "OpenProjectSubHeaderQuickFilter",
6607+
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/sub_header/quick_filter.rb",
6608+
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/sub_header/quick_filter/default/",
6609+
"parameters": []
6610+
},
66026611
{
66036612
"component": "OpenProject::SubHeader::SegmentedControl",
66046613
"status": "open_project",

‎static/audited_at.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -173,6 +173,7 @@
173173
"Primer::OpenProject::SubHeader::Button": "",
174174
"Primer::OpenProject::SubHeader::ButtonGroup": "",
175175
"Primer::OpenProject::SubHeader::Menu": "",
176+
"Primer::OpenProject::SubHeader::QuickFilter": "",
176177
"Primer::OpenProject::SubHeader::SegmentedControl": "2023-02-01",
177178
"Primer::OpenProject::ZenModeButton": "",
178179
"Primer::Tooltip": "",

0 commit comments

Comments
 (0)