Merge pull request #208 from opf/bump/primer-upstream

Bump/primer upstream 0.36.0

.changeset/odd-dots-laugh.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': minor
+---
+
+Support leading and trailing icons for Links

.changeset/quiet-papayas-sparkle.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": patch
+---
+
+Fix issue causing AutoComplete elements to overflow their container

.changeset/seven-experts-return.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Ensure `full_width:` option is respected by the auto_complete input

.changeset/two-badgers-suffer.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Prevent hidden inputs from taking up space on the page

.changeset/weak-birds-unite.md

@@ -0,0 +1,5 @@
+---
+'@openproject/primer-view-components': patch
+---
+
+Remove redundant code for better performance.

.changeset/wild-shirts-heal.md

@@ -0,0 +1,5 @@
+---
+"@openproject/primer-view-components": minor
+---
+
+Removing the validate classname check that forces system arguments instead of utility classes

.github/workflows/demo-production-deploy.yml

@@ -72,7 +72,7 @@ jobs:
       with:
         ruby-version: '3.3'
         bundler-cache: true
-    - uses: actions/cache@v4.0.2
+    - uses: actions/cache@v4.1.0
       with:
         path: demo/gemfiles/vendor/bundle
         key: gems-build-kuby-main-ruby-3.3.x-${{ hashFiles('demo/gemfiles/kuby.gemfile.lock') }}

.github/workflows/lint.yml

@@ -12,7 +12,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get specific changed files
       id: changed-files
-      uses: tj-actions/[email protected].2
+      uses: tj-actions/[email protected].4
       with:
         files: |
           docs/**/*.md
@@ -38,7 +38,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get specific changed files
       id: changed-files
-      uses: tj-actions/[email protected].2
+      uses: tj-actions/[email protected].4
       with:
         files: |
           app/**/*.rb
@@ -58,7 +58,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/[email protected].2
+      uses: tj-actions/[email protected].4
       with:
         files: |
           app/components/**/*.erb
@@ -75,7 +75,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/[email protected].2
+      uses: tj-actions/[email protected].4
       with:
         files: |
           app/components/**/*.ts
@@ -95,7 +95,7 @@ jobs:
     - uses: actions/checkout@v4
     - name: Get changed files
       id: changed-files
-      uses: tj-actions/[email protected].2
+      uses: tj-actions/[email protected].4
       with:
         files: |
           app/components/**/*.pcss

app/components/primer/alpha/action_bar.rb

@@ -88,9 +88,9 @@ def render_overflow_menu?
       def before_render
         @system_arguments[:tag] = render_overflow_menu? ? :"action-bar" : :div
         @system_arguments[:classes] = class_names(
-          @system_arguments[:classes],
-          "overflow-visible": !render_overflow_menu?
+          @system_arguments[:classes]
         )
+        @system_arguments[:overflow] = :visible if render_overflow_menu?
         content
       end
     end

app/components/primer/alpha/action_bar_element.ts

@@ -36,14 +36,6 @@ class ActionBarElement extends HTMLElement {
   #focusZoneAbortController: AbortController | null = null
 
   connectedCallback() {
-    // Calculate the width of all the items before hiding anything
-    for (const item of this.items) {
-      const width = item.getBoundingClientRect().width
-      const marginLeft = parseInt(window.getComputedStyle(item)?.marginLeft, 10)
-      const marginRight = parseInt(window.getComputedStyle(item)?.marginRight, 10)
-      item.setAttribute('data-offset-width', `${width + marginLeft + marginRight}`)
-    }
-
     resizeObserver.observe(this)
     instersectionObserver.observe(this)
 

app/components/primer/base_component.rb

@@ -151,13 +151,16 @@ class BaseComponent < Primer::Component
     # | :- | :- | :- |
     # | classes | String | CSS class name value to be concatenated with generated Primer CSS classes. |
     # | test_selector | String | Adds `data-test-selector='given value'` in non-Production environments for testing purposes. |
+    # | trim | Boolean | Calls `strip` on the content to remove trailing and leading white spaces. |
     def initialize(tag:, classes: nil, **system_arguments)
       @tag = tag
 
       @system_arguments = validate_arguments(tag: tag, **system_arguments)
 
       @result = Primer::Classify.call(**@system_arguments.merge(classes: classes))
 
+      @trim = !!@system_arguments.delete(:trim)
+
       @system_arguments[:"data-view-component"] = true
       # Filter out Primer keys so they don't get assigned as HTML attributes
       @content_tag_args = add_test_selector(@system_arguments).except(*Primer::Classify::Utilities::UTILITIES.keys)
@@ -167,7 +170,7 @@ def call
       if SELF_CLOSING_TAGS.include?(@tag)
         tag(@tag, @content_tag_args.merge(@result))
       else
-        content_tag(@tag, content, @content_tag_args.merge(@result))
+        content_tag(@tag, @trim ? trimmed_content : content, @content_tag_args.merge(@result))
       end
     end
   end

app/components/primer/beta/auto_complete.rb

@@ -44,6 +44,7 @@ class AutoComplete < Primer::Component
         system_arguments[:"allow-out-of-bounds"] = ""
         system_arguments[:id] = @list_id
         system_arguments[:popover] = ""
+        system_arguments[:overflow_y] = :auto
         system_arguments[:classes] = class_names(
           "ActionListWrap ActionListWrap--inset",
           @overlay_classes,

app/components/primer/beta/button.rb

@@ -159,17 +159,6 @@ def before_render
           "Button--invisible-noVisuals"
         )
       end
-
-      def trimmed_content
-        return if content.blank?
-
-        trimmed_content = content.strip
-
-        return trimmed_content unless content.html_safe?
-
-        # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
-        trimmed_content.html_safe # rubocop:disable Rails/OutputSafety
-      end
     end
   end
 end

app/components/primer/beta/link.html.erb

@@ -0,0 +1,18 @@
+<%= render Primer::ConditionalWrapper.new(condition: tooltip?, trim: true, tag: :span, position: :relative) do %>
+  <%= render(Primer::BaseComponent.new(trim: true, **@system_arguments)) do %>
+    <% if leading_visual || trailing_visual %>
+      <%= render(Primer::BaseComponent.new(tag: :span, classes: "Link-content", trim: true)) do %>
+        <% if leading_visual %>
+          <%= leading_visual %>
+        <% end %>
+        <%= content %>
+        <% if trailing_visual %>
+          <%= trailing_visual %>
+        <% end %>
+      <% end %>
+    <% else %>
+      <%= content %>
+    <% end %>
+  <% end %>
+  <%= tooltip if tooltip? %>
+<% end %>

app/components/primer/beta/link.pcss

@@ -67,3 +67,12 @@
     color: inherit !important;
   }
 }
+
+.Link-content {
+  display: inline-flex;
+  align-items: center;
+  /* stylelint-disable-next-line primer/typography */
+  line-height: normal;
+  gap: var(--base-size-4);
+  text-decoration: inherit;
+}

app/components/primer/beta/link.rb

@@ -30,6 +30,32 @@ class Link < Primer::Component
         Primer::Alpha::Tooltip.new(**system_arguments)
       }
 
+      # Leading visuals appear to the left of the link text.
+      #
+      # Use:
+      #
+      # - `leading_visual_icon` which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
+      renders_one :leading_visual, types: {
+        icon: lambda { |**system_arguments|
+          Primer::Beta::Octicon.new(**system_arguments)
+        }
+      }
+
+      # Trailing visuals appear to the right of the link text.
+      #
+      # Use:
+      #
+      # - `trailing_visual_icon` which accepts the arguments accepted by <%= link_to_component(Primer::Beta::Octicon) %>.
+      #
+      # @param system_arguments [Hash] Same arguments as <%= link_to_component(Primer::Beta::Octicon) %>.
+      renders_one :trailing_visual, types: {
+        icon: lambda { |**system_arguments|
+          Primer::Beta::Octicon.new(**system_arguments)
+        }
+      }
+
       # @param href [String] URL to be used for the Link. Required. If the requirements are not met an error will be raised in non production environments. In production, an empty link element will be rendered.
       # @param scheme [Symbol] <%= one_of(Primer::Beta::Link::SCHEME_MAPPINGS.keys) %>
       # @param muted [Boolean] Uses light gray for Link color, and blue on hover.
@@ -54,20 +80,6 @@ def initialize(href: nil, scheme: DEFAULT_SCHEME, muted: false, underline: false
       def before_render
         raise ArgumentError, "href is required" if @system_arguments[:href].nil? && !Rails.env.production?
       end
-
-      def call
-        if tooltip.present?
-          render Primer::BaseComponent.new(tag: :span, position: :relative) do
-            render(Primer::BaseComponent.new(**@system_arguments)) do
-              content
-            end.to_s + tooltip.to_s
-          end
-        else
-          render(Primer::BaseComponent.new(**@system_arguments)) do
-            content
-          end
-        end
-      end
     end
   end
 end

app/components/primer/button_component.rb

@@ -111,16 +111,5 @@ def initialize(
     def link?
       @scheme == LINK_SCHEME
     end
-
-    def trimmed_content
-      return if content.blank?
-
-      trimmed_content = content.strip
-
-      return trimmed_content unless content.html_safe?
-
-      # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
-      trimmed_content.html_safe # rubocop:disable Rails/OutputSafety
-    end
   end
 end

app/components/primer/component.rb

@@ -148,5 +148,12 @@ def shouldnt_raise_error?
     def should_raise_aria_error?
       !Rails.env.production? && raise_on_invalid_aria? && !ENV["PRIMER_WARNINGS_DISABLED"]
     end
+
+    def trimmed_content
+      return content unless content.present?
+
+      # strip unsets `html_safe`, so we have to set it back again to guarantee that HTML blocks won't break
+      content.html_safe? ? content.strip.html_safe : content.strip # rubocop:disable Rails/OutputSafety
+    end
   end
 end

app/components/primer/conditional_wrapper.rb

@@ -10,12 +10,15 @@ class ConditionalWrapper < Primer::Component
     def initialize(condition:, **base_component_arguments)
       @condition = condition
       @base_component_arguments = base_component_arguments
+      @trim = !!@base_component_arguments.delete(:trim)
     end
 
     def call
-      return content unless @condition
+      unless @condition
+        return @trim ? trimmed_content : content
+      end
 
-      BaseComponent.new(**@base_component_arguments).render_in(self) { content }
+      BaseComponent.new(trim: @trim, **@base_component_arguments).render_in(self) { content }
     end
   end
 end

app/forms/horizontal_form.rb

@@ -3,6 +3,8 @@
 # :nodoc:
 class HorizontalForm < ApplicationForm
   form do |my_form|
+    my_form.hidden(name: :token, value: "abc123")
+
     my_form.group(layout: :horizontal) do |name_group|
       name_group.text_field(
         name: :first_name,

app/lib/primer/forms/auto_complete.rb

@@ -40,7 +40,8 @@ def auto_complete_arguments
             input_name: all_args[:name],
             input_id: all_args[:id],
             label_text: @input.label,
-            list_id: "#{all_args[:id]}-list"
+            list_id: "#{all_args[:id]}-list",
+            full_width: @input.full_width?
           )
       end
 

app/lib/primer/forms/dsl/hidden_input.rb

@@ -27,6 +27,10 @@ def type
         def supports_validation?
           false
         end
+
+        def hidden?
+          true
+        end
       end
     end
   end

app/lib/primer/forms/group.rb

@@ -18,9 +18,12 @@ def initialize(inputs:, builder:, form:, layout: DEFAULT_LAYOUT, **system_argume
         @layout = layout
         @system_arguments = system_arguments
 
+        @system_arguments[:display] = :none if inputs.all?(&:hidden?)
+
         @system_arguments[:classes] = class_names(
           @system_arguments.delete(:classes),
-          "FormControl-horizontalGroup" => horizontal?
+          "FormControl-horizontalGroup" => horizontal?,
+          "FormControl-spacingWrapper" => !horizontal? && inputs.size > 1
         )
       end
 

lib/primer/classify.rb

@@ -49,9 +49,7 @@ def call(args = {})
             case key
             when :classes
               # insert :classes first to avoid huge doc diffs
-              if (class_names = validated_class_names(val))
-                result.unshift(class_names)
-              end
+              result.unshift(val)
               next
             when :style
               style = val
@@ -105,29 +103,6 @@ def validate(key, val, brk)
         brk_str = Primer::Classify::Utilities::BREAKPOINTS[brk]
         Primer::Classify::Utilities.validate(key, val, brk_str)
       end
-
-      def validated_class_names(classes)
-        return if classes.blank?
-
-        if raise_on_invalid_options? && !ENV["PRIMER_WARNINGS_DISABLED"]
-          invalid_class_names =
-            classes.split.each_with_object([]) do |class_name, memo|
-              memo << class_name if Primer::Classify::Validation.invalid?(class_name)
-            end
-
-          if invalid_class_names.any?
-            raise ArgumentError, "Use System Arguments (https://primer.style/view-components/system-arguments) "\
-              "instead of Primer CSS class #{'name'.pluralize(invalid_class_names.length)} #{invalid_class_names.to_sentence}. "\
-              "This warning will not be raised in production. Set PRIMER_WARNINGS_DISABLED=1 to disable this warning."
-          end
-        end
-
-        classes
-      end
-
-      def raise_on_invalid_options?
-        Rails.application.config.primer_view_components.raise_on_invalid_options
-      end
     end
   end
 end