primer_view_components 0.15.0 → 0.16.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (52) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +31 -0
  3. data/app/assets/javascripts/app/components/primer/alpha/action_bar_element.d.ts +3 -2
  4. data/app/assets/javascripts/app/components/primer/primer.d.ts +1 -0
  5. data/app/assets/javascripts/app/components/primer/scrollable_region.d.ts +13 -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/action_bar.css +1 -1
  11. data/app/components/primer/alpha/action_bar.css.map +1 -1
  12. data/app/components/primer/alpha/action_bar.pcss +8 -6
  13. data/app/components/primer/alpha/action_bar_element.d.ts +3 -2
  14. data/app/components/primer/alpha/action_bar_element.js +76 -99
  15. data/app/components/primer/alpha/action_bar_element.ts +80 -91
  16. data/app/components/primer/alpha/action_list.css +1 -1
  17. data/app/components/primer/alpha/action_list.css.map +1 -1
  18. data/app/components/primer/alpha/action_menu/action_menu_element.js +7 -4
  19. data/app/components/primer/alpha/action_menu/action_menu_element.ts +5 -1
  20. data/app/components/primer/alpha/banner.html.erb +1 -1
  21. data/app/components/primer/alpha/banner.rb +5 -1
  22. data/app/components/primer/alpha/dialog.html.erb +3 -1
  23. data/app/components/primer/alpha/dialog.rb +5 -1
  24. data/app/components/primer/alpha/layout.css +1 -1
  25. data/app/components/primer/alpha/layout.css.map +1 -1
  26. data/app/components/primer/alpha/modal_dialog.ts +1 -1
  27. data/app/components/primer/alpha/overlay.css +1 -1
  28. data/app/components/primer/alpha/overlay.css.json +2 -1
  29. data/app/components/primer/alpha/overlay.css.map +1 -1
  30. data/app/components/primer/alpha/overlay.pcss +6 -0
  31. data/app/components/primer/alpha/text_field.css +1 -1
  32. data/app/components/primer/alpha/text_field.css.map +1 -1
  33. data/app/components/primer/alpha/text_field.pcss +4 -3
  34. data/app/components/primer/alpha/tool_tip.js +15 -2
  35. data/app/components/primer/alpha/tool_tip.ts +16 -2
  36. data/app/components/primer/alpha/underline_nav.css +1 -1
  37. data/app/components/primer/alpha/underline_nav.css.map +1 -1
  38. data/app/components/primer/base_component.rb +20 -18
  39. data/app/components/primer/beta/button.css +1 -1
  40. data/app/components/primer/beta/button.css.map +1 -1
  41. data/app/components/primer/primer.d.ts +1 -0
  42. data/app/components/primer/primer.js +1 -0
  43. data/app/components/primer/primer.ts +1 -0
  44. data/app/components/primer/scrollable_region.d.ts +13 -0
  45. data/app/components/primer/scrollable_region.js +52 -0
  46. data/app/components/primer/scrollable_region.ts +48 -0
  47. data/lib/primer/classify/utilities.rb +3 -4
  48. data/lib/primer/view_components/version.rb +1 -1
  49. data/previews/primer/alpha/action_menu_preview/in_scroll_container.html.erb +11 -0
  50. data/previews/primer/alpha/action_menu_preview.rb +7 -0
  51. data/previews/primer/alpha/banner_preview.rb +3 -2
  52. metadata +7 -2
@@ -0,0 +1,48 @@
1
+ import {controller, attr} from '@github/catalyst'
2
+
3
+ @controller
4
+ export class ScrollableRegionElement extends HTMLElement {
5
+ @attr hasOverflow = false
6
+ @attr labelledBy = ''
7
+
8
+ observer: ResizeObserver
9
+
10
+ connectedCallback() {
11
+ this.style.overflow = 'auto'
12
+
13
+ this.observer = new ResizeObserver(entries => {
14
+ for (const entry of entries) {
15
+ this.hasOverflow =
16
+ entry.target.scrollHeight > entry.target.clientHeight || entry.target.scrollWidth > entry.target.clientWidth
17
+ }
18
+ })
19
+
20
+ this.observer.observe(this)
21
+ }
22
+
23
+ disconnectedCallback() {
24
+ this.observer.disconnect()
25
+ }
26
+
27
+ attributeChangedCallback(name: string) {
28
+ if (name === 'data-has-overflow') {
29
+ if (this.hasOverflow) {
30
+ this.setAttribute('aria-labelledby', this.labelledBy)
31
+ this.setAttribute('role', 'region')
32
+ this.setAttribute('tabindex', '0')
33
+ } else {
34
+ this.removeAttribute('aria-labelledby')
35
+ this.removeAttribute('role')
36
+ this.removeAttribute('tabindex')
37
+ }
38
+ }
39
+ }
40
+ }
41
+
42
+ declare global {
43
+ interface Window {
44
+ ScrollableRegionElement: typeof ScrollableRegionElement
45
+ }
46
+ }
47
+
48
+ window.ScrollableRegionElement = ScrollableRegionElement
@@ -27,7 +27,9 @@ module Primer
27
27
  "^height" => "h",
28
28
  "^color-bg" => "bg",
29
29
  "^color-border" => "border_color",
30
- "^color-fg" => "color"
30
+ "^color-fg" => "color",
31
+ "^f" => "font_size",
32
+ "^rounded" => "border_radius"
31
33
  }.freeze
32
34
 
33
35
  SUPPORTED_KEY_CACHE = Hash.new { |h, k| h[k] = !UTILITIES[k].nil? }
@@ -91,9 +93,6 @@ module Primer
91
93
 
92
94
  # Extract hash from classes ie. "mr-1 mb-2 foo" => { mr: 1, mb: 2, classes: "foo" }
93
95
  def classes_to_hash(classes)
94
- # This method is too slow to run in production
95
- return { classes: classes } unless validate_class_names?
96
-
97
96
  obj = {}
98
97
  classes = classes.split
99
98
  # Loop through all classes supplied and reject ones we find a match for
@@ -5,7 +5,7 @@ module Primer
5
5
  module ViewComponents
6
6
  module VERSION
7
7
  MAJOR = 0
8
- MINOR = 15
8
+ MINOR = 16
9
9
  PATCH = 0
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
@@ -0,0 +1,11 @@
1
+ <div style="height: 400px"></div>
2
+
3
+ <div style="position: relative">
4
+ <%= render Primer::Alpha::ActionMenu.new(anchor_align: :end) do |c| %>
5
+ <% c.with_show_button { "Edit" } %>
6
+ <% c.with_item(tag: :button, type: "button", label: "Rename") %>
7
+ <% c.with_item(tag: :button, type: "button", scheme: :danger, label: "Remove") %>
8
+ <% end %>
9
+ </div>
10
+
11
+ <div style="height: 1400px"></div>
@@ -323,6 +323,13 @@ module Primer
323
323
  })
324
324
  end
325
325
 
326
+ # @label In Scoll container
327
+ #
328
+ def in_scroll_container
329
+ render_with_template()
330
+ end
331
+
332
+
326
333
  # @label Align end
327
334
  #
328
335
  def align_end(menu_id: "menu-1")
@@ -9,13 +9,14 @@ module Primer
9
9
  # @param full toggle
10
10
  # @param full_when_narrow toggle
11
11
  # @param dismiss_scheme [Symbol] select [none, remove, hide]
12
+ # @param dismiss_label text
12
13
  # @param icon [Symbol] octicon
13
14
  # @param scheme [Symbol] select [default, warning, danger, success]
14
15
  # @param content text
15
16
  # @param description text
16
- def playground(full: false, full_when_narrow: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "This is a banner!", description: nil)
17
+ def playground(full: false, full_when_narrow: false, dismiss_scheme: Primer::Alpha::Banner::DEFAULT_DISMISS_SCHEME, dismiss_label: Primer::Alpha::Banner::DEFAULT_DISMISS_LABEL, icon: :people, scheme: Primer::Alpha::Banner::DEFAULT_SCHEME, content: "This is a banner!", description: nil)
17
18
  icon = nil if icon == :none
18
- render(Primer::Alpha::Banner.new(full: full, full_when_narrow: full_when_narrow, dismiss_scheme: dismiss_scheme, icon: icon == :none ? nil : icon, scheme: scheme, description: description)) { content }
19
+ render(Primer::Alpha::Banner.new(full: full, full_when_narrow: full_when_narrow, dismiss_scheme: dismiss_scheme, dismiss_label: dismiss_label, icon: icon == :none ? nil : icon, scheme: scheme, description: description)) { content }
19
20
  end
20
21
 
21
22
  # @label Default
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.15.0
4
+ version: 0.16.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: 2023-12-01 00:00:00.000000000 Z
11
+ date: 2024-01-04 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: actionview
@@ -101,6 +101,7 @@ files:
101
101
  - app/assets/javascripts/app/components/primer/beta/relative_time.d.ts
102
102
  - app/assets/javascripts/app/components/primer/focus_group.d.ts
103
103
  - app/assets/javascripts/app/components/primer/primer.d.ts
104
+ - app/assets/javascripts/app/components/primer/scrollable_region.d.ts
104
105
  - app/assets/javascripts/lib/primer/forms/primer_multi_input.d.ts
105
106
  - app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts
106
107
  - app/assets/javascripts/lib/primer/forms/toggle_switch_input.d.ts
@@ -456,6 +457,9 @@ files:
456
457
  - app/components/primer/primer.js
457
458
  - app/components/primer/primer.pcss
458
459
  - app/components/primer/primer.ts
460
+ - app/components/primer/scrollable_region.d.ts
461
+ - app/components/primer/scrollable_region.js
462
+ - app/components/primer/scrollable_region.ts
459
463
  - app/components/primer/tooltip.rb
460
464
  - app/components/primer/truncate.css
461
465
  - app/components/primer/truncate.css.json
@@ -701,6 +705,7 @@ files:
701
705
  - previews/primer/alpha/action_menu_preview.rb
702
706
  - previews/primer/alpha/action_menu_preview/align_end.html.erb
703
707
  - previews/primer/alpha/action_menu_preview/content_labels.html.erb
708
+ - previews/primer/alpha/action_menu_preview/in_scroll_container.html.erb
704
709
  - previews/primer/alpha/action_menu_preview/multiple_select_form.html.erb
705
710
  - previews/primer/alpha/action_menu_preview/opens_dialog.html.erb
706
711
  - previews/primer/alpha/action_menu_preview/single_select_form.html.erb