primer_view_components 0.21.0 → 0.22.0

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 (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