primer_view_components 0.21.0 → 0.22.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (46) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +24 -0
  3. data/app/assets/javascripts/primer_view_components.js +1 -1
  4. data/app/assets/javascripts/primer_view_components.js.map +1 -1
  5. data/app/assets/styles/primer_view_components.css +1 -1
  6. data/app/assets/styles/primer_view_components.css.map +1 -1
  7. data/app/components/primer/alpha/action_list/item.rb +1 -1
  8. data/app/components/primer/alpha/action_list.js +15 -12
  9. data/app/components/primer/alpha/action_list.ts +12 -9
  10. data/app/components/primer/alpha/dialog.css +1 -1
  11. data/app/components/primer/alpha/dialog.css.json +1 -0
  12. data/app/components/primer/alpha/dialog.css.map +1 -1
  13. data/app/components/primer/alpha/dialog.pcss +4 -0
  14. data/app/components/primer/alpha/overlay/header.html.erb +1 -0
  15. data/app/components/primer/alpha/overlay/header.rb +12 -0
  16. data/app/components/primer/alpha/tool_tip.js +1 -1
  17. data/app/components/primer/alpha/tool_tip.ts +1 -1
  18. data/app/components/primer/beta/button.css +1 -1
  19. data/app/components/primer/beta/button.css.json +2 -0
  20. data/app/components/primer/beta/button.css.map +1 -1
  21. data/app/components/primer/beta/button.pcss +8 -0
  22. data/app/components/primer/beta/button_group.rb +4 -2
  23. data/app/components/primer/beta/icon_button.rb +2 -0
  24. data/app/components/primer/dialog_helper.js +16 -3
  25. data/app/components/primer/dialog_helper.ts +14 -1
  26. data/lib/primer/view_components/version.rb +1 -1
  27. data/previews/primer/alpha/action_list_preview.rb +19 -1
  28. data/previews/primer/alpha/dialog_preview.rb +24 -0
  29. data/previews/primer/alpha/overlay_preview/overlay_with_header_filter.html.erb +16 -0
  30. data/previews/primer/alpha/overlay_preview.rb +4 -0
  31. data/previews/primer/alpha/tab_nav_preview.rb +1 -1
  32. data/previews/primer/alpha/tab_panels_preview.rb +2 -2
  33. data/previews/primer/alpha/underline_nav_preview.rb +3 -3
  34. data/previews/primer/alpha/underline_panels_preview.rb +38 -0
  35. data/previews/primer/beta/avatar_stack_preview.rb +1 -1
  36. data/previews/primer/beta/breadcrumbs_preview.rb +2 -2
  37. data/previews/primer/beta/button_group_preview/with_menu_button.html.erb +1 -1
  38. data/previews/primer/beta/button_group_preview.rb +7 -1
  39. data/previews/primer/beta/icon_button_preview.rb +25 -0
  40. data/previews/primer/beta/nav_list_preview.rb +9 -3
  41. data/static/arguments.json +1 -1
  42. data/static/classes.json +3 -0
  43. data/static/constants.json +4 -0
  44. data/static/info_arch.json +79 -3
  45. data/static/previews.json +66 -1
  46. metadata +3 -2
@@ -11,7 +11,7 @@ module Primer
11
11
  # @param with_counters [Boolean] toggle
12
12
  def playground(number_of_tabs: 3, with_icons: false, with_counters: false)
13
13
  render(Primer::Alpha::TabNav.new(label: "label")) do |component|
14
- Array.new(number_of_tabs || 3) do |i|
14
+ Array.new(number_of_tabs&.to_i || 3) do |i|
15
15
  component.with_tab(selected: i.zero?, href: "##{i + 1}") do |tab|
16
16
  tab.with_icon(icon: :star) if with_icons
17
17
  tab.with_text { "Tab #{i + 1}" }
@@ -10,7 +10,7 @@ module Primer
10
10
  # @param align [Symbol] select [left, right]
11
11
  def playground(number_of_panels: 3, align: :left)
12
12
  render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |component|
13
- Array.new(number_of_panels || 3) do |i|
13
+ Array.new(number_of_panels&.to_i || 3) do |i|
14
14
  component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
15
15
  tab.with_panel { "Panel #{i + 1}" }
16
16
  tab.with_text { "Tab #{i + 1}" }
@@ -26,7 +26,7 @@ module Primer
26
26
  # @snapshot
27
27
  def default(number_of_panels: 3, align: :left)
28
28
  render(Primer::Alpha::TabPanels.new(label: "label", align: align)) do |component|
29
- Array.new(number_of_panels || 3) do |i|
29
+ Array.new(number_of_panels&.to_i || 3) do |i|
30
30
  component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
31
31
  tab.with_panel { "Panel #{i + 1}" }
32
32
  tab.with_text { "Tab #{i + 1}" }
@@ -15,7 +15,7 @@ module Primer
15
15
  label: label,
16
16
  tag: tag,
17
17
  align: align,
18
- number_of_panels: number_of_panels
18
+ number_of_panels: number_of_panels.to_i,
19
19
  })
20
20
  end
21
21
 
@@ -31,7 +31,7 @@ module Primer
31
31
  label: label,
32
32
  tag: tag,
33
33
  align: align,
34
- number_of_panels: number_of_panels
34
+ number_of_panels: number_of_panels.to_i,
35
35
  })
36
36
  end
37
37
 
@@ -44,7 +44,7 @@ module Primer
44
44
  # @param number_of_panels [Integer] number
45
45
  def with_icons_and_counters(label: "With icons and counters", number_of_panels: 3, align: :left, tag: :nav)
46
46
  render(Primer::Alpha::UnderlineNav.new(label: label, tag: tag, align: align)) do |component|
47
- Array.new(number_of_panels || 3) do |i|
47
+ Array.new(number_of_panels.to_i || 3) do |i|
48
48
  component.with_tab(href: "#", selected: i.zero?) do |tab|
49
49
  tab.with_icon(icon: :star)
50
50
  tab.with_text { "Item #{i + 1}" }
@@ -21,9 +21,44 @@ module Primer
21
21
 
22
22
  # @label Default options
23
23
  #
24
+ # @snapshot
24
25
  # @param number_of_panels [Integer] number
25
26
  # @param align [Symbol] select [left, right]
26
27
  def default(number_of_panels: 3, align: :left)
28
+ render(Primer::Alpha::UnderlinePanels.new(label: "Test navigation", align: align)) do |component|
29
+ Array.new(number_of_panels&.to_i || 3) do |i|
30
+ component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
31
+ tab.with_panel { "Panel #{i + 1}" }
32
+ tab.with_text { "Tab #{i + 1}" }
33
+ end
34
+ end
35
+ end
36
+ end
37
+
38
+ # @label With Icons and Counters
39
+ #
40
+ # @snapshot
41
+ # @param number_of_panels [Integer] number
42
+ # @param align [Symbol] select [left, right]
43
+ def with_icons_and_counters(number_of_panels: 3, align: :left)
44
+ render(Primer::Alpha::UnderlinePanels.new(label: "Test navigation", align: align)) do |component|
45
+ Array.new(number_of_panels || 3) do |i|
46
+ component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
47
+ tab.with_panel { "Panel #{i + 1}" }
48
+ tab.with_text { "Tab #{i + 1}" }
49
+ tab.with_icon(icon: :star)
50
+ tab.with_counter(count: (i + 1) * 5)
51
+ end
52
+ end
53
+ end
54
+ end
55
+
56
+ # @label With Actions
57
+ #
58
+ # @snapshot
59
+ # @param number_of_panels [Integer] number
60
+ # @param align [Symbol] select [left, right]
61
+ def with_actions(number_of_panels: 3, align: :right)
27
62
  render(Primer::Alpha::UnderlinePanels.new(label: "Test navigation", align: align)) do |component|
28
63
  Array.new(number_of_panels || 3) do |i|
29
64
  component.with_tab(selected: i.zero?, id: "tab-#{i + 1}") do |tab|
@@ -31,6 +66,9 @@ module Primer
31
66
  tab.with_text { "Tab #{i + 1}" }
32
67
  end
33
68
  end
69
+ component.with_actions do
70
+ "Actions Content"
71
+ end
34
72
  end
35
73
  end
36
74
  end
@@ -13,7 +13,7 @@ module Primer
13
13
  # @param tooltip_label text
14
14
  def playground(number_of_avatars: 1, tag: :div, align: :left, tooltipped: false, tooltip_label: "This is a tooltip!")
15
15
  render(Primer::Beta::AvatarStack.new(tag: tag, align: align, tooltipped: tooltipped, body_arguments: { label: tooltip_label })) do |component|
16
- Array.new(number_of_avatars || 1) do
16
+ Array.new(number_of_avatars&.to_i || 1) do
17
17
  component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
18
18
  end
19
19
  end
@@ -9,7 +9,7 @@ module Primer
9
9
  # @param number_of_links [Integer] number
10
10
  def playground(number_of_links: 2)
11
11
  render(Primer::Beta::Breadcrumbs.new) do |component|
12
- Array.new(number_of_links || 3) do |i|
12
+ Array.new(number_of_links&.to_i || 3) do |i|
13
13
  component.with_item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
14
14
  end
15
15
  end
@@ -21,7 +21,7 @@ module Primer
21
21
  # @snapshot
22
22
  def default(number_of_links: 2)
23
23
  render(Primer::Beta::Breadcrumbs.new) do |component|
24
- Array.new(number_of_links || 3) do |i|
24
+ Array.new(number_of_links&.to_i || 3) do |i|
25
25
  component.with_item(href: "##{i}") { "Breadcrumb Item #{i + 1}" }
26
26
  end
27
27
  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
@@ -139,9 +139,15 @@ module Primer
139
139
  component.with_item(
140
140
  label: "Really really long label that may wrap, truncate, or appear as a tooltip",
141
141
  truncate_label: truncate_label
142
- ) do |item|
143
- item.with_trailing_visual_icon(icon: :plus)
144
- end
142
+ )
143
+ component.with_item(
144
+ label: "Really really long label that may wrap, truncate, or appear as a tooltip",
145
+ truncate_label: truncate_label
146
+ )
147
+ component.with_item(
148
+ label: "Really really long label that may wrap, truncate, or appear as a tooltip",
149
+ truncate_label: truncate_label
150
+ )
145
151
  end
146
152
  end
147
153
 
@@ -3760,7 +3760,7 @@
3760
3760
  "name": "scheme",
3761
3761
  "type": "Symbol",
3762
3762
  "default": "`:default`",
3763
- "description": "One of `:danger`, `:default`, or `:invisible`."
3763
+ "description": "One of `:danger`, `:default`, `:invisible`, `:primary`, or `:secondary`."
3764
3764
  },
3765
3765
  {
3766
3766
  "name": "size",
data/static/classes.json CHANGED
@@ -402,6 +402,9 @@
402
402
  "Overlay-header": [
403
403
  "Primer::Alpha::Dialog"
404
404
  ],
405
+ "Overlay-headerFilter": [
406
+ "Primer::Alpha::Dialog"
407
+ ],
405
408
  "Popover": [
406
409
  "Primer::Beta::Popover"
407
410
  ],
@@ -938,11 +938,15 @@
938
938
  "DEFAULT_SCHEME": "default",
939
939
  "SCHEME_MAPPINGS": {
940
940
  "default": "Button--secondary",
941
+ "primary": "Button--primary",
942
+ "secondary": "Button--secondary",
941
943
  "danger": "Button--danger",
942
944
  "invisible": "Button--invisible"
943
945
  },
944
946
  "SCHEME_OPTIONS": [
945
947
  "default",
948
+ "primary",
949
+ "secondary",
946
950
  "danger",
947
951
  "invisible"
948
952
  ]
@@ -3440,6 +3440,19 @@
3440
3440
  "color-contrast"
3441
3441
  ]
3442
3442
  }
3443
+ },
3444
+ {
3445
+ "preview_path": "primer/alpha/dialog/initally_open",
3446
+ "name": "initally_open",
3447
+ "snapshot": "interactive",
3448
+ "skip_rules": {
3449
+ "wont_fix": [
3450
+ "region"
3451
+ ],
3452
+ "will_fix": [
3453
+ "color-contrast"
3454
+ ]
3455
+ }
3443
3456
  }
3444
3457
  ],
3445
3458
  "subcomponents": [
@@ -6068,6 +6081,19 @@
6068
6081
  "color-contrast"
6069
6082
  ]
6070
6083
  }
6084
+ },
6085
+ {
6086
+ "preview_path": "primer/alpha/overlay/overlay_with_header_filter",
6087
+ "name": "overlay_with_header_filter",
6088
+ "snapshot": "false",
6089
+ "skip_rules": {
6090
+ "wont_fix": [
6091
+ "region"
6092
+ ],
6093
+ "will_fix": [
6094
+ "color-contrast"
6095
+ ]
6096
+ }
6071
6097
  }
6072
6098
  ],
6073
6099
  "subcomponents": [
@@ -6129,7 +6155,18 @@
6129
6155
  }
6130
6156
  ],
6131
6157
  "slots": [
6132
-
6158
+ {
6159
+ "name": "filter",
6160
+ "description": "Optional filter slot for adding a filter input to the header.",
6161
+ "parameters": [
6162
+ {
6163
+ "name": "system_arguments",
6164
+ "type": "Hash",
6165
+ "default": "N/A",
6166
+ "description": "{{link_to_system_arguments_docs}}"
6167
+ }
6168
+ ]
6169
+ }
6133
6170
  ],
6134
6171
  "methods": [
6135
6172
 
@@ -9128,7 +9165,33 @@
9128
9165
  {
9129
9166
  "preview_path": "primer/alpha/underline_panels/default",
9130
9167
  "name": "default",
9131
- "snapshot": "false",
9168
+ "snapshot": "true",
9169
+ "skip_rules": {
9170
+ "wont_fix": [
9171
+ "region"
9172
+ ],
9173
+ "will_fix": [
9174
+ "color-contrast"
9175
+ ]
9176
+ }
9177
+ },
9178
+ {
9179
+ "preview_path": "primer/alpha/underline_panels/with_icons_and_counters",
9180
+ "name": "with_icons_and_counters",
9181
+ "snapshot": "true",
9182
+ "skip_rules": {
9183
+ "wont_fix": [
9184
+ "region"
9185
+ ],
9186
+ "will_fix": [
9187
+ "color-contrast"
9188
+ ]
9189
+ }
9190
+ },
9191
+ {
9192
+ "preview_path": "primer/alpha/underline_panels/with_actions",
9193
+ "name": "with_actions",
9194
+ "snapshot": "true",
9132
9195
  "skip_rules": {
9133
9196
  "wont_fix": [
9134
9197
  "region"
@@ -12433,7 +12496,7 @@
12433
12496
  "name": "scheme",
12434
12497
  "type": "Symbol",
12435
12498
  "default": "`:default`",
12436
- "description": "One of `:danger`, `:default`, or `:invisible`."
12499
+ "description": "One of `:danger`, `:default`, `:invisible`, `:primary`, or `:secondary`."
12437
12500
  },
12438
12501
  {
12439
12502
  "name": "size",
@@ -12530,6 +12593,19 @@
12530
12593
  ]
12531
12594
  }
12532
12595
  },
12596
+ {
12597
+ "preview_path": "primer/beta/icon_button/primary",
12598
+ "name": "primary",
12599
+ "snapshot": "true",
12600
+ "skip_rules": {
12601
+ "wont_fix": [
12602
+ "region"
12603
+ ],
12604
+ "will_fix": [
12605
+ "color-contrast"
12606
+ ]
12607
+ }
12608
+ },
12533
12609
  {
12534
12610
  "preview_path": "primer/beta/icon_button/danger",
12535
12611
  "name": "danger",
data/static/previews.json CHANGED
@@ -3217,6 +3217,19 @@
3217
3217
  "color-contrast"
3218
3218
  ]
3219
3219
  }
3220
+ },
3221
+ {
3222
+ "preview_path": "primer/alpha/dialog/initally_open",
3223
+ "name": "initally_open",
3224
+ "snapshot": "interactive",
3225
+ "skip_rules": {
3226
+ "wont_fix": [
3227
+ "region"
3228
+ ],
3229
+ "will_fix": [
3230
+ "color-contrast"
3231
+ ]
3232
+ }
3220
3233
  }
3221
3234
  ]
3222
3235
  },
@@ -3781,6 +3794,19 @@
3781
3794
  ]
3782
3795
  }
3783
3796
  },
3797
+ {
3798
+ "preview_path": "primer/beta/icon_button/primary",
3799
+ "name": "primary",
3800
+ "snapshot": "true",
3801
+ "skip_rules": {
3802
+ "wont_fix": [
3803
+ "region"
3804
+ ],
3805
+ "will_fix": [
3806
+ "color-contrast"
3807
+ ]
3808
+ }
3809
+ },
3784
3810
  {
3785
3811
  "preview_path": "primer/beta/icon_button/danger",
3786
3812
  "name": "danger",
@@ -4848,6 +4874,19 @@
4848
4874
  "color-contrast"
4849
4875
  ]
4850
4876
  }
4877
+ },
4878
+ {
4879
+ "preview_path": "primer/alpha/overlay/overlay_with_header_filter",
4880
+ "name": "overlay_with_header_filter",
4881
+ "snapshot": "false",
4882
+ "skip_rules": {
4883
+ "wont_fix": [
4884
+ "region"
4885
+ ],
4886
+ "will_fix": [
4887
+ "color-contrast"
4888
+ ]
4889
+ }
4851
4890
  }
4852
4891
  ]
4853
4892
  },
@@ -7046,7 +7085,33 @@
7046
7085
  {
7047
7086
  "preview_path": "primer/alpha/underline_panels/default",
7048
7087
  "name": "default",
7049
- "snapshot": "false",
7088
+ "snapshot": "true",
7089
+ "skip_rules": {
7090
+ "wont_fix": [
7091
+ "region"
7092
+ ],
7093
+ "will_fix": [
7094
+ "color-contrast"
7095
+ ]
7096
+ }
7097
+ },
7098
+ {
7099
+ "preview_path": "primer/alpha/underline_panels/with_icons_and_counters",
7100
+ "name": "with_icons_and_counters",
7101
+ "snapshot": "true",
7102
+ "skip_rules": {
7103
+ "wont_fix": [
7104
+ "region"
7105
+ ],
7106
+ "will_fix": [
7107
+ "color-contrast"
7108
+ ]
7109
+ }
7110
+ },
7111
+ {
7112
+ "preview_path": "primer/alpha/underline_panels/with_actions",
7113
+ "name": "with_actions",
7114
+ "snapshot": "true",
7050
7115
  "skip_rules": {
7051
7116
  "wont_fix": [
7052
7117
  "region"
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: primer_view_components
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.21.0
4
+ version: 0.22.0
5
5
  platform: ruby
6
6
  authors:
7
7
  - GitHub Open Source
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2024-03-19 00:00:00.000000000 Z
11
+ date: 2024-03-29 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: actionview
@@ -764,6 +764,7 @@ files:
764
764
  - previews/primer/alpha/overlay_preview/in_an_action_menu.html.erb
765
765
  - previews/primer/alpha/overlay_preview/middle_of_page.html.erb
766
766
  - previews/primer/alpha/overlay_preview/middle_of_page_with_relative_container.html.erb
767
+ - previews/primer/alpha/overlay_preview/overlay_with_header_filter.html.erb
767
768
  - previews/primer/alpha/radio_button_group_preview.rb
768
769
  - previews/primer/alpha/radio_button_preview.rb
769
770
  - previews/primer/alpha/segmented_control_preview.rb