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.
Files changed (73) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +28 -0
  3. data/README.md +1 -0
  4. data/app/assets/javascripts/app/components/primer/open_project/page_header_element.d.ts +9 -0
  5. data/app/assets/javascripts/app/components/primer/primer.d.ts +1 -0
  6. data/app/assets/javascripts/primer_view_components.js +1 -1
  7. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  8. data/app/assets/styles/primer_view_components.css +1 -1
  9. data/app/assets/styles/primer_view_components.css.map +1 -1
  10. data/app/components/primer/alpha/banner.css +1 -1
  11. data/app/components/primer/alpha/banner.css.map +1 -1
  12. data/app/components/primer/alpha/banner.pcss +4 -4
  13. data/app/components/primer/alpha/dialog.css +1 -1
  14. data/app/components/primer/alpha/dialog.css.json +1 -2
  15. data/app/components/primer/alpha/dialog.css.map +1 -1
  16. data/app/components/primer/alpha/dialog.pcss +8 -7
  17. data/app/components/primer/alpha/segmented_control.css +1 -1
  18. data/app/components/primer/alpha/segmented_control.css.map +1 -1
  19. data/app/components/primer/alpha/segmented_control.pcss +1 -0
  20. data/app/components/primer/alpha/tool_tip.js +46 -77
  21. data/app/components/primer/alpha/tool_tip.ts +46 -77
  22. data/app/components/primer/beta/button.css +1 -1
  23. data/app/components/primer/beta/button.css.json +2 -0
  24. data/app/components/primer/beta/button.css.map +1 -1
  25. data/app/components/primer/beta/button.pcss +8 -0
  26. data/app/components/primer/beta/button_group.rb +4 -2
  27. data/app/components/primer/beta/flash.css +1 -1
  28. data/app/components/primer/beta/flash.css.map +1 -1
  29. data/app/components/primer/beta/flash.pcss +4 -4
  30. data/app/components/primer/beta/icon_button.rb +2 -0
  31. data/app/components/primer/dialog_helper.js +16 -3
  32. data/app/components/primer/dialog_helper.ts +14 -1
  33. data/app/components/primer/open_project/page_header.css +1 -1
  34. data/app/components/primer/open_project/page_header.css.json +1 -0
  35. data/app/components/primer/open_project/page_header.css.map +1 -1
  36. data/app/components/primer/open_project/page_header.html.erb +6 -7
  37. data/app/components/primer/open_project/page_header.pcss +10 -0
  38. data/app/components/primer/open_project/page_header.rb +152 -34
  39. data/app/components/primer/open_project/page_header_element.d.ts +9 -0
  40. data/app/components/primer/open_project/page_header_element.js +23 -0
  41. data/app/components/primer/open_project/page_header_element.ts +25 -0
  42. data/app/components/primer/primer.d.ts +1 -0
  43. data/app/components/primer/primer.js +1 -0
  44. data/app/components/primer/primer.ts +1 -0
  45. data/lib/primer/view_components/version.rb +2 -2
  46. data/previews/primer/alpha/action_menu_preview.rb +1 -1
  47. data/previews/primer/alpha/dialog_preview.rb +24 -0
  48. data/previews/primer/alpha/tooltip_preview/tooltip_e.html.erb +6 -0
  49. data/previews/primer/alpha/tooltip_preview/tooltip_n.html.erb +6 -0
  50. data/previews/primer/alpha/tooltip_preview/tooltip_ne.html.erb +6 -0
  51. data/previews/primer/alpha/tooltip_preview/tooltip_nw.html.erb +6 -0
  52. data/previews/primer/alpha/tooltip_preview/tooltip_s.html.erb +6 -0
  53. data/previews/primer/alpha/tooltip_preview/tooltip_se.html.erb +6 -0
  54. data/previews/primer/alpha/tooltip_preview/tooltip_sw.html.erb +6 -0
  55. data/previews/primer/alpha/tooltip_preview/tooltip_w.html.erb +6 -0
  56. data/previews/primer/alpha/tooltip_preview.rb +80 -0
  57. data/previews/primer/beta/button_group_preview/with_menu_button.html.erb +1 -1
  58. data/previews/primer/beta/button_group_preview.rb +7 -1
  59. data/previews/primer/beta/icon_button_preview.rb +25 -0
  60. data/previews/primer/open_project/border_grid_preview.rb +2 -2
  61. data/previews/primer/open_project/input_group_preview.rb +5 -5
  62. data/previews/primer/open_project/page_header_preview/actions.html.erb +16 -15
  63. data/previews/primer/open_project/page_header_preview/playground.html.erb +9 -24
  64. data/previews/primer/open_project/page_header_preview.rb +14 -36
  65. data/static/arguments.json +35 -2
  66. data/static/audited_at.json +1 -0
  67. data/static/classes.json +3 -0
  68. data/static/constants.json +13 -5
  69. data/static/info_arch.json +180 -49
  70. data/static/previews.json +130 -26
  71. data/static/statuses.json +1 -0
  72. metadata +16 -5
  73. 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, lambda { |**system_arguments|
58
- deny_tag_argument(**system_arguments)
59
- system_arguments[:tag] = :div
60
- system_arguments[:ml] ||= 2
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
- Primer::BaseComponent.new(**system_arguments)
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
- # Context Bar Actions
66
- # By default shown on narrow screens. Can be overridden with system_argument: display
67
- #
68
- # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
69
- renders_many :context_bar_actions, lambda { |**system_arguments|
70
- deny_tag_argument(**system_arguments)
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
- Primer::BaseComponent.new(**system_arguments)
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
- def initialize(**system_arguments)
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,9 @@
1
+ declare class PageHeaderElement extends HTMLElement {
2
+ menuItemClick(event: Event): void;
3
+ }
4
+ declare global {
5
+ interface Window {
6
+ PageHeaderElement: typeof PageHeaderElement;
7
+ }
8
+ }
9
+ export {};
@@ -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';
@@ -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'
@@ -5,8 +5,8 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 24
9
- PATCH = 0
8
+ MINOR = 25
9
+ PATCH = 1
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
12
12
  end
@@ -326,7 +326,7 @@ module Primer
326
326
  # @label In Scoll container
327
327
  #
328
328
  def in_scroll_container
329
- render_with_template()
329
+ render_with_template
330
330
  end
331
331
 
332
332
 
@@ -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
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-e")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :e) %>
4
+ Tooltip east
5
+ <% end %>
6
+ </div>
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-n")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :n) %>
4
+ Tooltip north
5
+ <% end %>
6
+ </div>
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-ne")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :ne) %>
4
+ Tooltip northeast
5
+ <% end %>
6
+ </div>
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-nw")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :nw) %>
4
+ Tooltip northwest
5
+ <% end %>
6
+ </div>
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-s")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :s) %>
4
+ Tooltip south
5
+ <% end %>
6
+ </div>
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-se")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :se) %>
4
+ Tooltip southeast
5
+ <% end %>
6
+ </div>
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-sw")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :sw) %>
4
+ Tooltip southwest
5
+ <% end %>
6
+ </div>
@@ -0,0 +1,6 @@
1
+ <div style="display: grid; place-content: center; margin-top: 4rem;">
2
+ <%= render(Primer::Beta::Button.new(id: "tooltip-w")) do |b| %>
3
+ <% b.with_tooltip(text: "This is a tooltip", direction: :w) %>
4
+ Tooltip west
5
+ <% end %>
6
+ </div>
@@ -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: 'a name', label: 'My input group', value: "Copyable value")
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: 'Copyable 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: 'Test', label: 'My input group', visually_hide_label: visually_hide_label, value: value, readonly: readonly)
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: 'a name', label: 'My input group', value: "Some value")
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: 'a name', label: 'My input group', value: "Some value")
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