openproject-primer_view_components 0.19.0 → 0.20.0

data/app/components/primer/scrollable_region.ts

@@ -0,0 +1,48 @@
+import {controller, attr} from '@github/catalyst'
+
+@controller
+export class ScrollableRegionElement extends HTMLElement {
+  @attr hasOverflow = false
+  @attr labelledBy = ''
+
+  observer: ResizeObserver
+
+  connectedCallback() {
+    this.style.overflow = 'auto'
+
+    this.observer = new ResizeObserver(entries => {
+      for (const entry of entries) {
+        this.hasOverflow =
+          entry.target.scrollHeight > entry.target.clientHeight || entry.target.scrollWidth > entry.target.clientWidth
+      }
+    })
+
+    this.observer.observe(this)
+  }
+
+  disconnectedCallback() {
+    this.observer.disconnect()
+  }
+
+  attributeChangedCallback(name: string) {
+    if (name === 'data-has-overflow') {
+      if (this.hasOverflow) {
+        this.setAttribute('aria-labelledby', this.labelledBy)
+        this.setAttribute('role', 'region')
+        this.setAttribute('tabindex', '0')
+      } else {
+        this.removeAttribute('aria-labelledby')
+        this.removeAttribute('role')
+        this.removeAttribute('tabindex')
+      }
+    }
+  }
+}
+
+declare global {
+  interface Window {
+    ScrollableRegionElement: typeof ScrollableRegionElement
+  }
+}
+
+window.ScrollableRegionElement = ScrollableRegionElement

data/lib/primer/classify/utilities.rb

@@ -27,7 +27,9 @@ module Primer
         "^height" => "h",
         "^color-bg" => "bg",
         "^color-border" => "border_color",
-        "^color-fg" => "color"
+        "^color-fg" => "color",
+        "^f" => "font_size",
+        "^rounded" => "border_radius"
       }.freeze
 
       SUPPORTED_KEY_CACHE = Hash.new { |h, k| h[k] = !UTILITIES[k].nil? }
@@ -91,9 +93,6 @@ module Primer
 
         # Extract hash from classes ie. "mr-1 mb-2 foo" => { mr: 1, mb: 2, classes: "foo" }
         def classes_to_hash(classes)
-          # This method is too slow to run in production
-          return { classes: classes } unless validate_class_names?
-
           obj = {}
           classes = classes.split
           # Loop through all classes supplied and reject ones we find a match for

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 19
+      MINOR = 20
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/alpha/action_menu_preview/in_scroll_container.html.erb

@@ -0,0 +1,11 @@
+<div style="height: 400px"></div>
+
+<div style="position: relative">
+  <%= render Primer::Alpha::ActionMenu.new(anchor_align: :end) do |c| %>
+    <% c.with_show_button { "Edit" } %>
+    <% c.with_item(tag: :button, type: "button", label: "Rename") %>
+    <% c.with_item(tag: :button, type: "button", scheme: :danger, label: "Remove") %>
+  <% end %>
+</div>
+
+<div style="height: 1400px"></div>

data/previews/primer/alpha/action_menu_preview.rb

@@ -323,6 +323,13 @@ module Primer
                              })
       end
 
+      # @label In Scoll container
+      #
+      def in_scroll_container
+        render_with_template()
+      end
+
+
       # @label Align end
       #
       def align_end(menu_id: "menu-1")

data/previews/primer/alpha/banner_preview.rb

@@ -9,13 +9,14 @@ module Primer
       # @param full toggle
       # @param full_when_narrow toggle
       # @param dismiss_scheme [Symbol] select [none, remove, hide]
+      # @param dismiss_label text
       # @param icon [Symbol] octicon
       # @param scheme [Symbol] select [default, warning, danger, success]
       # @param content text
       # @param description text
-      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)
+      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)
         icon = nil if icon == :none
-        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 }
+        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 }
       end
 
       # @label Default

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: openproject-primer_view_components
 version: !ruby/object:Gem::Version
-  version: 0.19.0
+  version: 0.20.0
 platform: ruby
 authors:
 - GitHub Open Source
@@ -9,7 +9,7 @@ authors:
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2023-12-11 00:00:00.000000000 Z
+date: 2024-01-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionview
@@ -101,6 +101,7 @@ files:
 - app/assets/javascripts/app/components/primer/beta/relative_time.d.ts
 - app/assets/javascripts/app/components/primer/focus_group.d.ts
 - app/assets/javascripts/app/components/primer/primer.d.ts
+- app/assets/javascripts/app/components/primer/scrollable_region.d.ts
 - app/assets/javascripts/lib/primer/forms/primer_multi_input.d.ts
 - app/assets/javascripts/lib/primer/forms/primer_text_field.d.ts
 - app/assets/javascripts/lib/primer/forms/toggle_switch_input.d.ts
@@ -487,6 +488,9 @@ files:
 - app/components/primer/primer.js
 - app/components/primer/primer.pcss
 - app/components/primer/primer.ts
+- app/components/primer/scrollable_region.d.ts
+- app/components/primer/scrollable_region.js
+- app/components/primer/scrollable_region.ts
 - app/components/primer/tooltip.rb
 - app/components/primer/truncate.css
 - app/components/primer/truncate.css.json
@@ -733,6 +737,7 @@ files:
 - previews/primer/alpha/action_menu_preview.rb
 - previews/primer/alpha/action_menu_preview/align_end.html.erb
 - previews/primer/alpha/action_menu_preview/content_labels.html.erb
+- previews/primer/alpha/action_menu_preview/in_scroll_container.html.erb
 - previews/primer/alpha/action_menu_preview/multiple_select_form.html.erb
 - previews/primer/alpha/action_menu_preview/opens_dialog.html.erb
 - previews/primer/alpha/action_menu_preview/single_select_form.html.erb