openproject-primer_view_components 0.24.0 → 0.25.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/CHANGELOG.md +28 -0
- data/README.md +1 -0
- data/app/assets/javascripts/app/components/primer/open_project/page_header_element.d.ts +9 -0
- data/app/assets/javascripts/app/components/primer/primer.d.ts +1 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/banner.pcss +4 -4
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.json +1 -2
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dialog.pcss +8 -7
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.pcss +1 -0
- data/app/components/primer/alpha/tool_tip.js +46 -77
- data/app/components/primer/alpha/tool_tip.ts +46 -77
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.json +2 -0
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +8 -0
- data/app/components/primer/beta/button_group.rb +4 -2
- data/app/components/primer/beta/flash.css +1 -1
- data/app/components/primer/beta/flash.css.map +1 -1
- data/app/components/primer/beta/flash.pcss +4 -4
- data/app/components/primer/beta/icon_button.rb +2 -0
- data/app/components/primer/dialog_helper.js +16 -3
- data/app/components/primer/dialog_helper.ts +14 -1
- data/app/components/primer/open_project/page_header.css +1 -1
- data/app/components/primer/open_project/page_header.css.json +1 -0
- data/app/components/primer/open_project/page_header.css.map +1 -1
- data/app/components/primer/open_project/page_header.html.erb +6 -7
- data/app/components/primer/open_project/page_header.pcss +10 -0
- data/app/components/primer/open_project/page_header.rb +152 -34
- data/app/components/primer/open_project/page_header_element.d.ts +9 -0
- data/app/components/primer/open_project/page_header_element.js +23 -0
- data/app/components/primer/open_project/page_header_element.ts +25 -0
- data/app/components/primer/primer.d.ts +1 -0
- data/app/components/primer/primer.js +1 -0
- data/app/components/primer/primer.ts +1 -0
- data/lib/primer/view_components/version.rb +2 -2
- data/previews/primer/alpha/action_menu_preview.rb +1 -1
- data/previews/primer/alpha/dialog_preview.rb +24 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_e.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_n.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_ne.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_nw.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_s.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_se.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_sw.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview/tooltip_w.html.erb +6 -0
- data/previews/primer/alpha/tooltip_preview.rb +80 -0
- data/previews/primer/beta/button_group_preview/with_menu_button.html.erb +1 -1
- data/previews/primer/beta/button_group_preview.rb +7 -1
- data/previews/primer/beta/icon_button_preview.rb +25 -0
- data/previews/primer/open_project/border_grid_preview.rb +2 -2
- data/previews/primer/open_project/input_group_preview.rb +5 -5
- data/previews/primer/open_project/page_header_preview/actions.html.erb +16 -15
- data/previews/primer/open_project/page_header_preview/playground.html.erb +9 -24
- data/previews/primer/open_project/page_header_preview.rb +14 -36
- data/static/arguments.json +35 -2
- data/static/audited_at.json +1 -0
- data/static/classes.json +3 -0
- data/static/constants.json +13 -5
- data/static/info_arch.json +180 -49
- data/static/previews.json +130 -26
- data/static/statuses.json +1 -0
- metadata +16 -5
- data/previews/primer/open_project/page_header_preview/context_bar_actions.html.erb +0 -27
@@ -20,10 +20,12 @@ module Primer
|
|
20
20
|
"triangle-left"
|
21
21
|
].freeze
|
22
22
|
|
23
|
+
DEFAULT_ACTION_SCHEME = :default
|
24
|
+
MORE_MENU_DISPLAY = [:flex, :none].freeze
|
25
|
+
|
23
26
|
DEFAULT_LEADING_ACTION_DISPLAY = [:none, :flex].freeze
|
24
27
|
DEFAULT_BREADCRUMBS_DISPLAY = [:none, :flex].freeze
|
25
28
|
DEFAULT_PARENT_LINK_DISPLAY = [:block, :none].freeze
|
26
|
-
DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY = [:flex, :none].freeze
|
27
29
|
|
28
30
|
status :open_project
|
29
31
|
|
@@ -54,24 +56,50 @@ module Primer
|
|
54
56
|
# Actions
|
55
57
|
#
|
56
58
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
57
|
-
renders_many :actions,
|
58
|
-
|
59
|
-
|
60
|
-
|
59
|
+
renders_many :actions, types: {
|
60
|
+
icon_button: lambda { |icon:, mobile_icon:, label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
|
61
|
+
deny_tag_argument(**system_arguments)
|
62
|
+
system_arguments = set_action_arguments(system_arguments, scheme: scheme)
|
63
|
+
add_option_to_mobile_menu(system_arguments, mobile_icon, label, scheme)
|
61
64
|
|
62
|
-
|
63
|
-
|
65
|
+
Primer::Beta::IconButton.new(icon: icon, "aria-label": label, **system_arguments)
|
66
|
+
},
|
67
|
+
button: lambda { |mobile_icon:, mobile_label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
|
68
|
+
deny_tag_argument(**system_arguments)
|
69
|
+
system_arguments = set_action_arguments(system_arguments, scheme: scheme)
|
70
|
+
add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
|
64
71
|
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
system_arguments[:tag] = :div
|
72
|
-
system_arguments[:ml] ||= 2
|
72
|
+
Primer::Beta::Button.new(**system_arguments)
|
73
|
+
},
|
74
|
+
link: lambda { |mobile_icon:, mobile_label:, scheme: DEFAULT_ACTION_SCHEME, **system_arguments|
|
75
|
+
deny_tag_argument(**system_arguments)
|
76
|
+
system_arguments = set_action_arguments(system_arguments, scheme: scheme)
|
77
|
+
add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
|
73
78
|
|
74
|
-
|
79
|
+
Primer::Beta::Link.new(**system_arguments)
|
80
|
+
},
|
81
|
+
# Should only be used rarely on a per-need basis
|
82
|
+
text: lambda { |**system_arguments|
|
83
|
+
system_arguments = set_action_arguments(system_arguments)
|
84
|
+
|
85
|
+
system_arguments[:color] ||= :muted
|
86
|
+
|
87
|
+
# Enforce that texts are hidden on mobile
|
88
|
+
system_arguments[:display] = [:none, :flex]
|
89
|
+
|
90
|
+
Primer::Beta::Text.new(**system_arguments)
|
91
|
+
},
|
92
|
+
menu: {
|
93
|
+
renders: lambda { |**system_arguments, &block|
|
94
|
+
deny_tag_argument(**system_arguments)
|
95
|
+
system_arguments[:menu_arguments] = set_action_arguments(system_arguments[:menu_arguments])
|
96
|
+
|
97
|
+
# Add the options individually to the mobile menu in the template
|
98
|
+
@desktop_menu_block = block
|
99
|
+
|
100
|
+
PageHeaderActionMenu.new(**system_arguments)
|
101
|
+
},
|
102
|
+
},
|
75
103
|
}
|
76
104
|
|
77
105
|
# Optional leading action prepend the title
|
@@ -93,21 +121,6 @@ module Primer
|
|
93
121
|
Primer::Beta::IconButton.new(icon: icon, **system_arguments)
|
94
122
|
}
|
95
123
|
|
96
|
-
# Optional parent link in the context area
|
97
|
-
# By default shown on narrow screens. Can be overridden with system_argument: display
|
98
|
-
#
|
99
|
-
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
100
|
-
renders_one :parent_link, lambda { |icon: DEFAULT_BACK_BUTTON_ICON, **system_arguments, &block|
|
101
|
-
deny_tag_argument(**system_arguments)
|
102
|
-
system_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, icon, DEFAULT_BACK_BUTTON_ICON)
|
103
|
-
system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-parentLink")
|
104
|
-
system_arguments[:display] ||= DEFAULT_PARENT_LINK_DISPLAY
|
105
|
-
|
106
|
-
render(Primer::Beta::Link.new(scheme: :primary, muted: true, **system_arguments)) do
|
107
|
-
render(Primer::Beta::Octicon.new(icon: "arrow-left", "aria-label": "aria_label", mr: 2)) + content_tag(:span, &block)
|
108
|
-
end
|
109
|
-
}
|
110
|
-
|
111
124
|
# Optional breadcrumbs above the title row
|
112
125
|
# By default shown on wider screens. Can be overridden with system_argument: display
|
113
126
|
#
|
@@ -117,6 +130,25 @@ module Primer
|
|
117
130
|
system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-breadcrumbs")
|
118
131
|
system_arguments[:display] ||= DEFAULT_BREADCRUMBS_DISPLAY
|
119
132
|
|
133
|
+
# show parent link if there is a parent for current page
|
134
|
+
if items.length > 1
|
135
|
+
link_arguments = {}
|
136
|
+
parent_item = items[items.length - 2]
|
137
|
+
parsed_parent_item = anchor_tag_string?(parent_item) ? anchor_string_to_object(parent_item) : parent_item
|
138
|
+
|
139
|
+
link_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, DEFAULT_BACK_BUTTON_ICON)
|
140
|
+
link_arguments[:href] = parsed_parent_item[:href]
|
141
|
+
link_arguments[:classes] = class_names(link_arguments[:classes], "PageHeader-parentLink")
|
142
|
+
link_arguments[:display] ||= DEFAULT_PARENT_LINK_DISPLAY
|
143
|
+
|
144
|
+
@parent_link = render(Primer::Beta::Link.new(scheme: :primary, muted: true, **link_arguments)) do
|
145
|
+
render(Primer::Beta::Octicon.new(icon: "arrow-left",
|
146
|
+
"aria-label": I18n.t("button_back"),
|
147
|
+
mr: 2)
|
148
|
+
) + content_tag(:span, parsed_parent_item[:text])
|
149
|
+
end
|
150
|
+
end
|
151
|
+
|
120
152
|
render(Primer::Beta::Breadcrumbs.new(**system_arguments)) do |breadcrumbs|
|
121
153
|
items.each do |item|
|
122
154
|
item = anchor_string_to_object(item) if anchor_tag_string?(item)
|
@@ -130,23 +162,83 @@ module Primer
|
|
130
162
|
end
|
131
163
|
}
|
132
164
|
|
133
|
-
|
165
|
+
# @param mobile_menu_label [String] The tooltip label of the mobile menu
|
166
|
+
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
167
|
+
def initialize(mobile_menu_label: I18n.t("label_more"), **system_arguments)
|
134
168
|
@system_arguments = deny_tag_argument(**system_arguments)
|
169
|
+
@mobile_menu_label = mobile_menu_label
|
135
170
|
|
136
|
-
@system_arguments[:tag] = :header
|
171
|
+
@system_arguments[:tag] = :"page-header"
|
137
172
|
@system_arguments[:classes] =
|
138
173
|
class_names(
|
139
174
|
@system_arguments[:classes],
|
140
175
|
"PageHeader"
|
141
176
|
)
|
177
|
+
|
178
|
+
@mobile_action_menu = Primer::Alpha::ActionMenu.new(
|
179
|
+
display: MORE_MENU_DISPLAY,
|
180
|
+
anchor_align: :end
|
181
|
+
)
|
142
182
|
end
|
143
183
|
|
144
184
|
def render?
|
145
|
-
title?
|
185
|
+
raise ArgumentError, "PageHeader needs a title and a breadcrumb. Please use the `with_title` and `with_breadcrumbs` slot" unless breadcrumbs? || Rails.env.production?
|
186
|
+
title? && breadcrumbs?
|
187
|
+
end
|
188
|
+
|
189
|
+
def before_render
|
190
|
+
@system_arguments[:classes] = class_names(
|
191
|
+
@system_arguments[:classes],
|
192
|
+
"PageHeader--singleAction": !render_mobile_menu?
|
193
|
+
)
|
194
|
+
|
195
|
+
content
|
196
|
+
end
|
197
|
+
|
198
|
+
def render_mobile_menu?
|
199
|
+
actions.count > 1
|
146
200
|
end
|
147
201
|
|
148
202
|
private
|
149
203
|
|
204
|
+
def set_action_arguments(system_arguments, scheme: nil)
|
205
|
+
system_arguments[:ml] ||= 2
|
206
|
+
system_arguments[:display] = [:none, :flex]
|
207
|
+
system_arguments[:scheme] = scheme unless scheme.nil?
|
208
|
+
system_arguments[:classes] = class_names(
|
209
|
+
system_arguments[:classes],
|
210
|
+
"PageHeader-action",
|
211
|
+
)
|
212
|
+
|
213
|
+
system_arguments[:id] ||= self.class.generate_id
|
214
|
+
system_arguments
|
215
|
+
end
|
216
|
+
|
217
|
+
def add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)
|
218
|
+
unless mobile_icon.nil? || mobile_label.nil?
|
219
|
+
# In action menus, only :default and :danger are allowed
|
220
|
+
scheme = DEFAULT_ACTION_SCHEME unless scheme == :danger
|
221
|
+
|
222
|
+
with_menu_item(id: system_arguments[:id], label: mobile_label, scheme: scheme) do |c|
|
223
|
+
c.with_leading_visual_icon(icon: mobile_icon)
|
224
|
+
end
|
225
|
+
end
|
226
|
+
end
|
227
|
+
|
228
|
+
def with_menu_item(id:, **system_arguments, &block)
|
229
|
+
system_arguments = {
|
230
|
+
**system_arguments,
|
231
|
+
"data-for": id,
|
232
|
+
"data-action": "click:page-header#menuItemClick"
|
233
|
+
}
|
234
|
+
|
235
|
+
@mobile_action_menu.with_item(
|
236
|
+
value: "",
|
237
|
+
**system_arguments,
|
238
|
+
&block
|
239
|
+
)
|
240
|
+
end
|
241
|
+
|
150
242
|
# transform anchor tag strings to {href, text} objects
|
151
243
|
# e.g "\u003ca href=\"/admin\"\u003eAdministration\u003c/a\u003e"
|
152
244
|
def anchor_string_to_object(html_string)
|
@@ -161,6 +253,32 @@ module Primer
|
|
161
253
|
def anchor_tag_string?(item)
|
162
254
|
item.is_a?(String) && item.start_with?("\u003c")
|
163
255
|
end
|
256
|
+
|
257
|
+
# A Helper class to create ActionMenus inside the PageHeader action slot
|
258
|
+
class PageHeaderActionMenu < Primer::Component
|
259
|
+
status :open_project
|
260
|
+
|
261
|
+
# @param menu_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionMenu) %>.
|
262
|
+
# @param button_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::Button) %> or <%= link_to_component(Primer::Beta::IconButton) %>, depending on the value of the `icon:` argument.
|
263
|
+
def initialize(menu_arguments: {}, button_arguments: {})
|
264
|
+
@menu = Primer::Alpha::ActionMenu.new(**menu_arguments)
|
265
|
+
@button = @menu.with_show_button(icon: "triangle-down", **button_arguments)
|
266
|
+
end
|
267
|
+
|
268
|
+
def render_in(view_context, &block)
|
269
|
+
super(view_context) do
|
270
|
+
block.call(@menu, @button)
|
271
|
+
end
|
272
|
+
end
|
273
|
+
|
274
|
+
def before_render
|
275
|
+
content
|
276
|
+
end
|
277
|
+
|
278
|
+
def call
|
279
|
+
render(@menu)
|
280
|
+
end
|
281
|
+
end
|
164
282
|
end
|
165
283
|
end
|
166
284
|
end
|
@@ -0,0 +1,23 @@
|
|
1
|
+
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
|
2
|
+
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
|
3
|
+
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
|
4
|
+
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
|
5
|
+
return c > 3 && r && Object.defineProperty(target, key, r), r;
|
6
|
+
};
|
7
|
+
import { controller } from '@github/catalyst';
|
8
|
+
let PageHeaderElement = class PageHeaderElement extends HTMLElement {
|
9
|
+
menuItemClick(event) {
|
10
|
+
const currentTarget = event.currentTarget;
|
11
|
+
const id = currentTarget?.getAttribute('data-for');
|
12
|
+
if (id) {
|
13
|
+
document.getElementById(id)?.click();
|
14
|
+
}
|
15
|
+
}
|
16
|
+
};
|
17
|
+
PageHeaderElement = __decorate([
|
18
|
+
controller
|
19
|
+
], PageHeaderElement);
|
20
|
+
if (!window.customElements.get('page-header')) {
|
21
|
+
window.PageHeaderElement = PageHeaderElement;
|
22
|
+
window.customElements.define('page-header', PageHeaderElement);
|
23
|
+
}
|
@@ -0,0 +1,25 @@
|
|
1
|
+
import {controller} from '@github/catalyst'
|
2
|
+
|
3
|
+
@controller
|
4
|
+
class PageHeaderElement extends HTMLElement {
|
5
|
+
menuItemClick(event: Event) {
|
6
|
+
const currentTarget = event.currentTarget as HTMLButtonElement
|
7
|
+
|
8
|
+
const id = currentTarget?.getAttribute('data-for')
|
9
|
+
|
10
|
+
if (id) {
|
11
|
+
document.getElementById(id)?.click()
|
12
|
+
}
|
13
|
+
}
|
14
|
+
}
|
15
|
+
|
16
|
+
declare global {
|
17
|
+
interface Window {
|
18
|
+
PageHeaderElement: typeof PageHeaderElement
|
19
|
+
}
|
20
|
+
}
|
21
|
+
|
22
|
+
if (!window.customElements.get('page-header')) {
|
23
|
+
window.PageHeaderElement = PageHeaderElement
|
24
|
+
window.customElements.define('page-header', PageHeaderElement)
|
25
|
+
}
|
@@ -22,3 +22,4 @@ import '../../../lib/primer/forms/primer_multi_input';
|
|
22
22
|
import '../../../lib/primer/forms/primer_text_field';
|
23
23
|
import '../../../lib/primer/forms/toggle_switch_input';
|
24
24
|
import './alpha/action_menu/action_menu_element';
|
25
|
+
import './open_project/page_header_element';
|
@@ -22,3 +22,4 @@ import '../../../lib/primer/forms/primer_multi_input';
|
|
22
22
|
import '../../../lib/primer/forms/primer_text_field';
|
23
23
|
import '../../../lib/primer/forms/toggle_switch_input';
|
24
24
|
import './alpha/action_menu/action_menu_element';
|
25
|
+
import './open_project/page_header_element';
|
@@ -272,6 +272,30 @@ module Primer
|
|
272
272
|
visually_hide_title: visually_hide_title
|
273
273
|
})
|
274
274
|
end
|
275
|
+
|
276
|
+
# @label Initially Open
|
277
|
+
#
|
278
|
+
# @param title [String] text
|
279
|
+
# @param subtitle [String] text
|
280
|
+
# @param size [Symbol] select [small, medium, medium_portrait, large, xlarge]
|
281
|
+
# @param position [Symbol] select [center, left, right]
|
282
|
+
# @param position_narrow [Symbol] select [inherit, bottom, fullscreen, left, right]
|
283
|
+
# @param visually_hide_title [Boolean] toggle
|
284
|
+
# @param disable_button [Boolean] toggle
|
285
|
+
# @param button_text [String] text
|
286
|
+
# @param body_text [String] text
|
287
|
+
# @param icon [Symbol] octicon
|
288
|
+
# @snapshot interactive
|
289
|
+
def initally_open(title: "Test Dialog", subtitle: nil, size: :medium, button_text: "Show Dialog", body_text: "Content", position: :center, position_narrow: :fullscreen, visually_hide_title: false, icon: nil, disable_button: false)
|
290
|
+
render(Primer::Alpha::Dialog.new(open: true, title: title, subtitle: subtitle, size: size, position: position, position_narrow: position_narrow, visually_hide_title: visually_hide_title)) do |d|
|
291
|
+
if icon.present? && (icon != :none)
|
292
|
+
d.with_show_button(icon: icon, "aria-label": icon.to_s, disabled: disable_button)
|
293
|
+
else
|
294
|
+
d.with_show_button(disabled: disable_button) { button_text }
|
295
|
+
end
|
296
|
+
d.with_body { body_text }
|
297
|
+
end
|
298
|
+
end
|
275
299
|
end
|
276
300
|
end
|
277
301
|
end
|
@@ -88,6 +88,86 @@ module Primer
|
|
88
88
|
def tooltip_with_dialog_moving_focus_to_input
|
89
89
|
render_with_template(locals: {})
|
90
90
|
end
|
91
|
+
|
92
|
+
# @label Direction: North
|
93
|
+
# @snapshot interactive
|
94
|
+
def tooltip_n(type: :description)
|
95
|
+
render_with_template(
|
96
|
+
locals: {
|
97
|
+
type: type,
|
98
|
+
}
|
99
|
+
)
|
100
|
+
end
|
101
|
+
|
102
|
+
# @label Direction: South
|
103
|
+
# @snapshot interactive
|
104
|
+
def tooltip_s(type: :description)
|
105
|
+
render_with_template(
|
106
|
+
locals: {
|
107
|
+
type: type,
|
108
|
+
}
|
109
|
+
)
|
110
|
+
end
|
111
|
+
|
112
|
+
# @label Direction: East
|
113
|
+
# @snapshot interactive
|
114
|
+
def tooltip_e(type: :description)
|
115
|
+
render_with_template(
|
116
|
+
locals: {
|
117
|
+
type: type,
|
118
|
+
}
|
119
|
+
)
|
120
|
+
end
|
121
|
+
|
122
|
+
# @label Direction: West
|
123
|
+
# @snapshot interactive
|
124
|
+
def tooltip_w(type: :description)
|
125
|
+
render_with_template(
|
126
|
+
locals: {
|
127
|
+
type: type,
|
128
|
+
}
|
129
|
+
)
|
130
|
+
end
|
131
|
+
|
132
|
+
# @label Direction: Southeast
|
133
|
+
# @snapshot interactive
|
134
|
+
def tooltip_se(type: :description)
|
135
|
+
render_with_template(
|
136
|
+
locals: {
|
137
|
+
type: type,
|
138
|
+
}
|
139
|
+
)
|
140
|
+
end
|
141
|
+
|
142
|
+
# @label Direction: Southwest
|
143
|
+
# @snapshot interactive
|
144
|
+
def tooltip_sw(type: :description)
|
145
|
+
render_with_template(
|
146
|
+
locals: {
|
147
|
+
type: type,
|
148
|
+
}
|
149
|
+
)
|
150
|
+
end
|
151
|
+
|
152
|
+
# @label Direction: Northeast
|
153
|
+
# @snapshot interactive
|
154
|
+
def tooltip_ne(type: :description)
|
155
|
+
render_with_template(
|
156
|
+
locals: {
|
157
|
+
type: type,
|
158
|
+
}
|
159
|
+
)
|
160
|
+
end
|
161
|
+
|
162
|
+
# @label Direction: Northwest
|
163
|
+
# @snapshot interactive
|
164
|
+
def tooltip_nw(type: :description)
|
165
|
+
render_with_template(
|
166
|
+
locals: {
|
167
|
+
type: type,
|
168
|
+
}
|
169
|
+
)
|
170
|
+
end
|
91
171
|
end
|
92
172
|
end
|
93
173
|
end
|
@@ -1,4 +1,4 @@
|
|
1
|
-
<%= render(Primer::Beta::ButtonGroup.new) do |component| %>
|
1
|
+
<%= render(Primer::Beta::ButtonGroup.new(scheme: scheme, size: size)) do |component| %>
|
2
2
|
<% component.with_button { "Main menu" } %>
|
3
3
|
<% component.with_menu_button(button_arguments: { "aria-label": "secondary menu" }, menu_arguments: { anchor_align: :end }) do |menu, button| %>
|
4
4
|
<% menu.with_item(label: "Item 1", item_id: :item1) %>
|
@@ -41,8 +41,14 @@ module Primer
|
|
41
41
|
|
42
42
|
# @label With menu button
|
43
43
|
#
|
44
|
+
# @param scheme [Symbol] select [default, primary, secondary, danger, invisible]
|
45
|
+
# @param size [Symbol] select [medium, small]
|
44
46
|
# @snapshot
|
45
|
-
def with_menu_button
|
47
|
+
def with_menu_button(scheme: :default, size: :medium)
|
48
|
+
render_with_template(locals: {
|
49
|
+
scheme: scheme,
|
50
|
+
size: size
|
51
|
+
})
|
46
52
|
end
|
47
53
|
|
48
54
|
# @label Icon buttons
|
@@ -87,6 +87,31 @@ module Primer
|
|
87
87
|
))
|
88
88
|
end
|
89
89
|
|
90
|
+
# @label Primary
|
91
|
+
# @param size select [small, medium, large]
|
92
|
+
# @param aria_label text
|
93
|
+
# @param disabled toggle
|
94
|
+
# @param tag select [a, summary, button]
|
95
|
+
# @snapshot
|
96
|
+
def primary(
|
97
|
+
size: :medium,
|
98
|
+
id: "button-preview",
|
99
|
+
tag: :button,
|
100
|
+
disabled: false,
|
101
|
+
icon: :x,
|
102
|
+
aria_label: "Button"
|
103
|
+
)
|
104
|
+
render(Primer::Beta::IconButton.new(
|
105
|
+
scheme: :primary,
|
106
|
+
size: size,
|
107
|
+
id: id,
|
108
|
+
tag: tag,
|
109
|
+
disabled: disabled,
|
110
|
+
icon: icon,
|
111
|
+
"aria-label": aria_label
|
112
|
+
))
|
113
|
+
end
|
114
|
+
|
90
115
|
# @label Danger
|
91
116
|
# @param size select [small, medium, large]
|
92
117
|
# @param aria_label text
|
@@ -21,7 +21,7 @@ module Primer
|
|
21
21
|
# @label Default Options
|
22
22
|
#
|
23
23
|
# @snapshot
|
24
|
-
def default
|
24
|
+
def default
|
25
25
|
render(Primer::OpenProject::BorderGrid.new) do |grid|
|
26
26
|
grid.with_row { "Block 1" }
|
27
27
|
grid.with_row { "Block 2" }
|
@@ -30,7 +30,7 @@ module Primer
|
|
30
30
|
end
|
31
31
|
|
32
32
|
# @label Spacious
|
33
|
-
def spacious
|
33
|
+
def spacious
|
34
34
|
render(Primer::OpenProject::BorderGrid.new(spacious: true)) do |grid|
|
35
35
|
grid.with_row { "Block 1" }
|
36
36
|
grid.with_row { "Block 2" }
|
@@ -11,7 +11,7 @@ module Primer
|
|
11
11
|
# @snapshot
|
12
12
|
def default
|
13
13
|
render(Primer::OpenProject::InputGroup.new) do |menu|
|
14
|
-
menu.with_text_input(name:
|
14
|
+
menu.with_text_input(name: "a name", label: "My input group", value: "Copyable value")
|
15
15
|
menu.with_trailing_action_clipboard_copy_button(id: "button", value: "Copyable value", aria: { label: "Copy some text" })
|
16
16
|
end
|
17
17
|
end
|
@@ -24,13 +24,13 @@ module Primer
|
|
24
24
|
# @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
|
25
25
|
def playground(
|
26
26
|
trailing_action: :clipboardCopy,
|
27
|
-
value:
|
27
|
+
value: "Copyable value",
|
28
28
|
visually_hide_label: false,
|
29
29
|
readonly: true,
|
30
30
|
input_width: :medium
|
31
31
|
)
|
32
32
|
render(Primer::OpenProject::InputGroup.new(input_width: input_width)) do |menu|
|
33
|
-
menu.with_text_input(name:
|
33
|
+
menu.with_text_input(name: "Test", label: "My input group", visually_hide_label: visually_hide_label, value: value, readonly: readonly)
|
34
34
|
|
35
35
|
case trailing_action
|
36
36
|
when :icon
|
@@ -46,7 +46,7 @@ module Primer
|
|
46
46
|
# @label With icon button
|
47
47
|
def icon_button
|
48
48
|
render(Primer::OpenProject::InputGroup.new) do |menu|
|
49
|
-
menu.with_text_input(name:
|
49
|
+
menu.with_text_input(name: "a name", label: "My input group", value: "Some value")
|
50
50
|
menu.with_trailing_action_icon(icon: :check, aria: { label: "Successful" })
|
51
51
|
end
|
52
52
|
end
|
@@ -54,7 +54,7 @@ module Primer
|
|
54
54
|
# @label With a small input
|
55
55
|
def small_input_width
|
56
56
|
render(Primer::OpenProject::InputGroup.new(input_width: :small)) do |menu|
|
57
|
-
menu.with_text_input(name:
|
57
|
+
menu.with_text_input(name: "a name", label: "My input group", value: "Some value")
|
58
58
|
menu.with_trailing_action_clipboard_copy_button(id: "button-4", value: "Some value", aria: { label: "Copy some text" })
|
59
59
|
end
|
60
60
|
end
|