Skip to content

Commit ebbae30

Browse files
Eric-GuoEric-Guo
committed
✨Current all action button all located in the rightPane, but I want component.with_action_button(location: :left, leading_icon: :op-search, label: "Search") can be render at leftPane. location: :right will be the default setting as current if user not specify.
1 parent bb2e703 commit ebbae30

2 files changed

Lines changed: 77 additions & 26 deletions

File tree

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

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -20,15 +20,27 @@
2020
<% @segmented_control_block.call(control) %>
2121
<% end %>
2222
<% end %>
23+
24+
<% unless @left_actions.nil? %>
25+
<% @left_actions.each do |left_action| %>
26+
<%= render(left_action[:component]) do |action| %>
27+
<% left_action[:block]&.call(action) %>
28+
<% end %>
29+
<% end %>
30+
<% end %>
2331
</div>
2432

2533
<div class="SubHeader-middlePane" data-targets="<%= HIDDEN_FILTER_TARGET_SELECTOR %>">
2634
<%= text %>
2735
</div>
2836

2937
<div class="SubHeader-rightPane" data-targets="<%= HIDDEN_FILTER_TARGET_SELECTOR %>">
30-
<% actions.each do |action| %>
31-
<%= action %>
38+
<% unless @right_actions.nil? %>
39+
<% @right_actions.each do |right_action| %>
40+
<%= render(right_action[:component]) do |action| %>
41+
<% right_action[:block]&.call(action) %>
42+
<% end %>
43+
<% end %>
3244
<% end %>
3345

3446
<% @mobile_actions.each do |mobile_action| %>

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

Lines changed: 63 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ class SubHeader < Primer::Component
2020
# To render custom content, call the `with_button_component` method and pass a block that returns HTML.
2121
renders_many :actions, types: {
2222
button: {
23-
renders: lambda { |icon_only: false, leading_icon:, label:, **kwargs, &block|
23+
renders: lambda { |icon_only: false, leading_icon:, label:, location: :right, **kwargs, &block|
2424
if label.nil? || label.empty?
2525
raise ArgumentError, "You need to provide a valid label."
2626
end
@@ -33,26 +33,53 @@ class SubHeader < Primer::Component
3333
)
3434

3535
icon_args = kwargs.deep_dup
36+
# If the action is placed on the left pane, hide it when the filter input expands on mobile
37+
icon_args = set_as_hidden_filter_target(icon_args) if location == :left
3638

3739
if icon_only
38-
Primer::Beta::IconButton.new(**icon_args)
40+
component = Primer::Beta::IconButton.new(**icon_args)
41+
@left_actions ||= []
42+
@right_actions ||= []
43+
target_actions = location == :left ? @left_actions : @right_actions
44+
target_actions.push({ component: component, block: block })
45+
46+
component
3947
else
4048
@mobile_actions ||= []
4149
mobile_component = Primer::Beta::IconButton.new(display: MOBILE_ACTIONS_DISPLAY,
4250
**icon_args)
43-
@mobile_actions.push({ component: mobile_component, block: block})
51+
@mobile_actions.push({ component: mobile_component, block: block })
4452

45-
Primer::OpenProject::SubHeader::Button.new(display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
53+
desktop_kwargs = kwargs.deep_dup
54+
desktop_kwargs = set_as_hidden_filter_target(desktop_kwargs) if location == :left
55+
component = Primer::OpenProject::SubHeader::Button.new(display: DESKTOP_ACTIONS_DISPLAY, **desktop_kwargs)
56+
57+
@left_actions ||= []
58+
@right_actions ||= []
59+
target_actions = location == :left ? @left_actions : @right_actions
60+
target_actions.push({ component: component, block: block })
61+
62+
component
4663
end
4764
},
4865
},
4966
button_group: {
50-
renders: lambda { |**kwargs|
51-
Primer::OpenProject::SubHeader::ButtonGroup.new(**kwargs)
67+
renders: lambda { |location: :right, **kwargs, &block|
68+
desktop_kwargs = kwargs.deep_dup
69+
desktop_kwargs = set_as_hidden_filter_target(desktop_kwargs) if location == :left
70+
71+
component = Primer::OpenProject::SubHeader::ButtonGroup.new(**desktop_kwargs)
72+
73+
@left_actions ||= []
74+
@right_actions ||= []
75+
target_actions = location == :left ? @left_actions : @right_actions
76+
target_actions.push({ component: component, block: block })
77+
78+
component
5279
},
5380
},
5481
menu: {
55-
renders: lambda { |icon_only: false, leading_icon:, label:, button_arguments: {}, **kwargs, &block|
82+
renders: lambda { |icon_only: false, leading_icon:, label:, button_arguments: {}, location: :right, **kwargs, &block|
5683
if label.nil? || label.empty?
5784
raise ArgumentError, "You need to provide a valid label."
5885
end
@@ -65,9 +92,18 @@ class SubHeader < Primer::Component
6592
mobile_component = Primer::OpenProject::SubHeader::Menu.new(icon_only: true,
6693
display: MOBILE_ACTIONS_DISPLAY,
6794
**kwargs)
68-
@mobile_actions.push({ component: mobile_component, block: block})
95+
@mobile_actions.push({ component: mobile_component, block: block })
96+
97+
desktop_kwargs = kwargs.deep_dup
98+
desktop_kwargs = set_as_hidden_filter_target(desktop_kwargs) if location == :left
99+
component = Primer::OpenProject::SubHeader::Menu.new(icon_only: icon_only, display: DESKTOP_ACTIONS_DISPLAY, **desktop_kwargs)
69100

70-
Primer::OpenProject::SubHeader::Menu.new(icon_only: icon_only,display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
101+
@left_actions ||= []
102+
@right_actions ||= []
103+
target_actions = location == :left ? @left_actions : @right_actions
104+
target_actions.push({ component: component, block: block })
105+
106+
component
71107
},
72108
}
73109
}
@@ -111,7 +147,7 @@ class SubHeader < Primer::Component
111147
display: :none,
112148
data: {
113149
targets: SHOWN_FILTER_TARGET_SELECTOR,
114-
action: "click:sub-header#collapseFilterInput"})
150+
action: "click:sub-header#collapseFilterInput" })
115151

116152

117153
Primer::Alpha::TextField.new(name: name, label: label, **system_arguments)
@@ -140,7 +176,7 @@ class SubHeader < Primer::Component
140176
if icon_only
141177
Primer::Beta::IconButton.new(**icon_args)
142178
else
143-
@mobile_filter_button = Primer::Beta::IconButton.new(display: MOBILE_ACTIONS_DISPLAY,
179+
@mobile_filter_button = Primer::Beta::IconButton.new(display: MOBILE_ACTIONS_DISPLAY,
144180
**icon_args)
145181

146182
Primer::OpenProject::SubHeader::Button.new(display: DESKTOP_ACTIONS_DISPLAY, **kwargs)
@@ -165,18 +201,18 @@ class SubHeader < Primer::Component
165201
}
166202

167203
renders_one :segmented_control, lambda { |**system_arguments, &block|
168-
deny_tag_argument(**system_arguments)
169-
system_arguments[:mr] ||= 2
170-
system_arguments = set_as_hidden_filter_target(system_arguments)
171-
172-
@segmented_control_block = block
173-
@mobile_segmented_control = Primer::OpenProject::SubHeader::SegmentedControl.new(
174-
hide_labels: true,
175-
display: MOBILE_ACTIONS_DISPLAY,
176-
**system_arguments
177-
)
178-
179-
Primer::OpenProject::SubHeader::SegmentedControl.new(display: DESKTOP_ACTIONS_DISPLAY, **system_arguments)
204+
deny_tag_argument(**system_arguments)
205+
system_arguments[:mr] ||= 2
206+
system_arguments = set_as_hidden_filter_target(system_arguments)
207+
208+
@segmented_control_block = block
209+
@mobile_segmented_control = Primer::OpenProject::SubHeader::SegmentedControl.new(
210+
hide_labels: true,
211+
display: MOBILE_ACTIONS_DISPLAY,
212+
**system_arguments
213+
)
214+
215+
Primer::OpenProject::SubHeader::SegmentedControl.new(display: DESKTOP_ACTIONS_DISPLAY, **system_arguments)
180216
}
181217

182218
renders_one :text, lambda { |**system_arguments|
@@ -200,6 +236,9 @@ def initialize(**system_arguments)
200236
@system_arguments = system_arguments
201237
@system_arguments[:tag] = :"sub-header"
202238

239+
@left_actions = []
240+
@right_actions = []
241+
203242
@filter_container = Primer::BaseComponent.new(tag: :div,
204243
classes: "SubHeader-filterContainer",
205244
display: DESKTOP_ACTIONS_DISPLAY,
@@ -216,7 +255,7 @@ def initialize(**system_arguments)
216255
def before_render
217256
@system_arguments[:classes] = class_names(
218257
@system_arguments[:classes],
219-
"SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input
258+
"SubHeader--emptyLeftPane" => !segmented_control? && !filter_button && !filter_input && (@left_actions.nil? || @left_actions.empty?)
220259
)
221260
end
222261

0 commit comments

Comments
 (0)