openproject-primer_view_components 0.16.0 → 0.17.0

data/app/forms/action_menu_form.rb

@@ -0,0 +1,20 @@
+# frozen_string_literal: true
+
+# :nodoc:
+class ActionMenuForm < ApplicationForm
+  form do |action_menu_form|
+    action_menu_form.action_menu(name: "city", label: "Favorite city", caption: "Select your favorite!") do |city_list|
+      city_list.with_item(label: "Lopez Island", data: { value: "lopez_island" }) do |item|
+        item.with_leading_visual_icon(icon: :log)
+      end
+      city_list.with_item(label: "Bellevue", data: { value: "bellevue" }) do |item|
+        item.with_leading_visual_icon(icon: :paste)
+      end
+      city_list.with_item(label: "Seattle", data: { value: "seattle" }) do |item|
+        item.with_leading_visual_icon(icon: :"device-camera")
+      end
+    end
+
+    action_menu_form.submit(name: :submit, label: "Submit")
+  end
+end

data/app/forms/immediate_validation_form.rb

@@ -21,8 +21,8 @@ class ImmediateValidationForm < ApplicationForm
 
     validation_form.text_field(
       name: :random_error,
-      label: "Random error",
-      caption: "Server checks will randomly respond with errors",
+      label: "Random error or success",
+      caption: "Server checks will randomly respond with errors or success",
       auto_check_src: @view_context.example_check_random_path
     )
   end

data/app/lib/primer/fetch_or_fallback_helper.rb

@@ -48,7 +48,6 @@ module Primer
       end
     end
 
-    # rubocop:disable Style/OptionalBooleanParameter
     def fetch_or_fallback_boolean(given_value, fallback = false)
       if [true, false].include?(given_value)
         given_value

data/app/lib/primer/octicon/cache.rb

@@ -4,7 +4,7 @@ module Primer
   module Octicon
     # :nodoc:
     class Cache
-      LOOKUP = {} # rubocop:disable Style/MutableConstant
+      LOOKUP = {}
       # Preload the top 20 used icons.
       PRELOADED_ICONS = [:alert, :check, :"chevron-down", :paste, :clock, :"dot-fill", :info, :"kebab-horizontal", :link, :lock, :mail, :pencil, :plus, :question, :repo, :search, :"shield-lock", :star, :trash, :x].freeze
 

data/lib/primer/classify.rb

@@ -75,7 +75,6 @@ module Primer
                 # are about 30% faster than Hash#dig. It also ensures validate is
                 # only called when necessary, i.e. when the class can't be found
                 # in the lookup table.
-                # rubocop:disable Style/RescueModifier
                 found = (LOOKUP[key][item][brk] rescue nil) || validate(key, item, brk)
                 # rubocop:enable Style/RescueModifier
                 result << found if found
@@ -93,7 +92,6 @@ module Primer
         end.join(" ")
 
         # This is much faster than Rails' presence method.
-        # rubocop:disable Rails/Blank
         {
           class: !classes || classes.empty? ? nil : classes,
           style: !style || style.empty? ? nil : style

data/lib/primer/forms/action_menu.html.erb

@@ -0,0 +1,6 @@
+<%= render(FormControl.new(input: @input)) do %>
+  <%= render(Primer::Alpha::ActionMenu.new(**@input.input_arguments)) do |menu| %>
+    <% menu.with_show_button { "Select..." } %>
+    <% @input.block.call(menu) if @input.block %>
+  <% end %>
+<% end %>

data/lib/primer/forms/action_menu.rb

@@ -0,0 +1,25 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class ActionMenu < BaseComponent
+      delegate :builder, :form, to: :@input
+
+      def initialize(input:)
+        @input = input
+
+        @input.input_arguments[:form_arguments] = {
+          name: @input.name,
+          builder: builder
+        }
+
+        @input.input_arguments[:select_variant] ||= :single
+
+        unless @input.input_arguments.include?(:dynamic_label)
+          @input.input_arguments[:dynamic_label] = true
+        end
+      end
+    end
+  end
+end

data/lib/primer/forms/acts_as_component.rb

@@ -36,7 +36,6 @@ module Primer
         def before_render; end
 
         # :nocov:
-        # rubocop:disable Naming/AccessorMethodName
         def set_original_view_context(view_context)
           @view_context = view_context
         end
@@ -98,8 +97,6 @@ module Primer
       end
 
       def define_template_method(template_path, method_name)
-        # rubocop:disable Style/DocumentDynamicEvalDefinition
-        # rubocop:disable Style/EvalWithLocation
         class_eval <<-RUBY, template_path, 0
         private def #{method_name}
           capture { #{compile_template(template_path)} }

data/lib/primer/forms/base.rb

@@ -120,7 +120,6 @@ module Primer
       private
 
       def form_object
-        # rubocop:disable Naming/MemoizedInstanceVariableName
         @__pf_form_object ||= Primer::Forms::Dsl::FormObject.new(builder: @builder, form: self).tap do |obj|
           # compile before adding inputs so caption templates are identified
           self.class.compile!

data/lib/primer/forms/base_component.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-require "primer/class_name_helper"
-
 module Primer
   module Forms
     # :nodoc:

data/lib/primer/forms/dsl/action_menu_input.rb

@@ -0,0 +1,36 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    module Dsl
+      # :nodoc:
+      class ActionMenuInput < Input
+        attr_reader :name, :label, :block
+
+        def initialize(name:, label:, **system_arguments, &block)
+          @name = name
+          @label = label
+          @block = block
+
+          super(**system_arguments)
+        end
+
+        def to_component
+          ActionMenu.new(input: self)
+        end
+
+        # :nocov:
+        def type
+          :action_menu
+        end
+        # :nocov:
+
+        # :nocov:
+        def focusable?
+          true
+        end
+        # :nocov:
+      end
+    end
+  end
+end

data/lib/primer/forms/dsl/input.rb

@@ -93,7 +93,6 @@ module Primer
           # methods. These methods will use the passed name if provided instead
           # of generating a scoped one.
           #
-          # rubocop:disable Style/IfUnlessModifier
           unless @input_arguments.delete(:scope_name_to_model) { true }
             @input_arguments[:name] = name
           end
@@ -297,6 +296,14 @@ module Primer
           {}
         end
 
+        def validation_success_icon_target
+          ""
+        end
+
+        def validation_error_icon_target
+          ""
+        end
+
         private
 
         def input_data

data/lib/primer/forms/dsl/input_methods.rb

@@ -90,6 +90,15 @@ module Primer
           add_input SelectInput.new(builder: builder, form: form, **options, &block)
         end
 
+        # Adds an <%= link_to_component(Primer::Alpha::ActionMenu) %> to this form.
+        #
+        # @param options [Hash] The options accepted by the <%= link_to_component(Primer::Alpha::ActionMenu) %> component.
+        # @param block [Proc] The block passed to `#render` when the <%= link_to_component(Primer::Alpha::ActionMenu) %> is rendered. This block is passed an instance of <%= link_to_component(Primer::Alpha::ActionMenu) %>, which can be used to add items, dividers, etc.
+        def action_menu(**options, &block)
+          options = decorate_options(**options)
+          add_input ActionMenuInput.new(builder: builder, form: form, **options, &block)
+        end
+
         # END select input methods
 
         # START button input methods

data/lib/primer/forms/dsl/text_field_input.rb

@@ -69,6 +69,14 @@ module Primer
           end
         end
 
+        def validation_success_icon_target
+          "primer-text-field.validationSuccessIcon"
+        end
+
+        def validation_error_icon_target
+          "primer-text-field.validationErrorIcon"
+        end
+
         def validation_message_arguments
           if auto_check_src.present?
             super.merge(

data/lib/primer/forms/primer_base_component_wrapper.rb

@@ -1,7 +1,5 @@
 # frozen_string_literal: true
 
-require "primer/class_name_helper"
-
 module Primer
   module Forms
     # Wraps Primer::BaseComponent.

data/lib/primer/forms/primer_text_field.js

@@ -30,8 +30,14 @@ class PrimerTextFieldElement extends HTMLElement {
         var _a;
         (_a = __classPrivateFieldGet(this, _PrimerTextFieldElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
         const { signal } = (__classPrivateFieldSet(this, _PrimerTextFieldElement_abortController, new AbortController(), "f"));
-        this.inputElement.addEventListener('auto-check-success', () => {
-            this.clearError();
+        this.inputElement.addEventListener('auto-check-success', async (event) => {
+            const message = await event.detail.response.text();
+            if (message && message.length > 0) {
+                this.setSuccess(message);
+            }
+            else {
+                this.clearError();
+            }
         }, { signal });
         this.inputElement.addEventListener('auto-check-error', async (event) => {
             const errorMessage = await event.detail.response.text();
@@ -49,12 +55,35 @@ class PrimerTextFieldElement extends HTMLElement {
     clearError() {
         this.inputElement.removeAttribute('invalid');
         this.validationElement.hidden = true;
-        this.validationMessageElement.textContent = '';
+        this.validationMessageElement.replaceChildren();
+    }
+    setValidationMessage(message) {
+        const template = document.createElement('template');
+        // eslint-disable-next-line github/no-inner-html
+        template.innerHTML = message;
+        const fragment = document.importNode(template.content, true);
+        this.validationMessageElement.replaceChildren(fragment);
+    }
+    toggleValidationStyling(isError) {
+        if (isError) {
+            this.validationElement.classList.remove('FormControl-inlineValidation--success');
+        }
+        else {
+            this.validationElement.classList.add('FormControl-inlineValidation--success');
+        }
+        this.validationSuccessIcon.hidden = isError;
+        this.validationErrorIcon.hidden = !isError;
+        this.inputElement.setAttribute('invalid', isError ? 'true' : 'false');
+    }
+    setSuccess(message) {
+        this.toggleValidationStyling(false);
+        this.setValidationMessage(message);
+        this.validationElement.hidden = false;
     }
     setError(message) {
-        this.validationMessageElement.textContent = message;
+        this.toggleValidationStyling(true);
+        this.setValidationMessage(message);
         this.validationElement.hidden = false;
-        this.inputElement.setAttribute('invalid', 'true');
     }
 };
 _PrimerTextFieldElement_abortController = new WeakMap();
@@ -67,6 +96,12 @@ __decorate([
 __decorate([
     target
 ], PrimerTextFieldElement.prototype, "validationMessageElement", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationSuccessIcon", void 0);
+__decorate([
+    target
+], PrimerTextFieldElement.prototype, "validationErrorIcon", void 0);
 PrimerTextFieldElement = __decorate([
     controller
     // eslint-disable-next-line no-unused-vars, @typescript-eslint/no-unused-vars

data/lib/primer/forms/primer_text_field.ts

@@ -8,6 +8,8 @@ class PrimerTextFieldElement extends HTMLElement {
   @target inputElement: HTMLInputElement
   @target validationElement: HTMLElement
   @target validationMessageElement: HTMLElement
+  @target validationSuccessIcon: HTMLElement
+  @target validationErrorIcon: HTMLElement
 
   #abortController: AbortController | null
 
@@ -17,10 +19,15 @@ class PrimerTextFieldElement extends HTMLElement {
 
     this.inputElement.addEventListener(
       'auto-check-success',
-      () => {
-        this.clearError()
+      async (event: any) => {
+        const message = await event.detail.response.text()
+        if (message && message.length > 0) {
+          this.setSuccess(message)
+        } else {
+          this.clearError()
+        }
       },
-      {signal}
+      {signal},
     )
 
     this.inputElement.addEventListener(
@@ -29,7 +36,7 @@ class PrimerTextFieldElement extends HTMLElement {
         const errorMessage = await event.detail.response.text()
         this.setError(errorMessage)
       },
-      {signal}
+      {signal},
     )
   }
 
@@ -45,12 +52,37 @@ class PrimerTextFieldElement extends HTMLElement {
   clearError(): void {
     this.inputElement.removeAttribute('invalid')
     this.validationElement.hidden = true
-    this.validationMessageElement.textContent = ''
+    this.validationMessageElement.replaceChildren()
+  }
+
+  setValidationMessage(message: string): void {
+    const template = document.createElement('template')
+    // eslint-disable-next-line github/no-inner-html
+    template.innerHTML = message
+    const fragment = document.importNode(template.content, true)
+    this.validationMessageElement.replaceChildren(fragment)
+  }
+
+  toggleValidationStyling(isError: boolean): void {
+    if (isError) {
+      this.validationElement.classList.remove('FormControl-inlineValidation--success')
+    } else {
+      this.validationElement.classList.add('FormControl-inlineValidation--success')
+    }
+    this.validationSuccessIcon.hidden = isError
+    this.validationErrorIcon.hidden = !isError
+    this.inputElement.setAttribute('invalid', isError ? 'true' : 'false')
+  }
+
+  setSuccess(message: string): void {
+    this.toggleValidationStyling(false)
+    this.setValidationMessage(message)
+    this.validationElement.hidden = false
   }
 
   setError(message: string): void {
-    this.validationMessageElement.textContent = message
+    this.toggleValidationStyling(true)
+    this.setValidationMessage(message)
     this.validationElement.hidden = false
-    this.inputElement.setAttribute('invalid', 'true')
   }
 }

data/lib/primer/forms/validation_message.html.erb

@@ -1,4 +1,5 @@
 <%= content_tag(:div, **@input.validation_arguments) do %>
-  <span class="FormControl-inlineValidation--visual"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
+  <span class="FormControl-inlineValidation--visual" data-target="<%= @input.validation_success_icon_target %>" hidden><%= render(Primer::Beta::Octicon.new(icon: :"check-circle-fill", size: :xsmall, aria: { hidden: true })) %></span>
+  <span class=" FormControl-inlineValidation--visual" data-target="<%= @input.validation_error_icon_target %>"><%= render(Primer::Beta::Octicon.new(icon: :"alert-fill", size: :xsmall, aria: { hidden: true })) %></span>
   <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
 <% end %>

data/lib/primer/static/generate_info_arch.rb

@@ -33,7 +33,6 @@ module Primer
 
               {
                 "name" => slot_method.name,
-                # rubocop:disable Style/IfUnlessModifier
                 "description" =>
                   if slot_method.base_docstring.to_s.present?
                     render_erb_ignoring_markdown_code_fences(slot_method.base_docstring)
@@ -90,7 +89,7 @@ module Primer
             }
           end
 
-          statuses = Primer::Status::Dsl::STATUSES.keys.map(&:to_s).map(&:capitalize)
+          statuses = Primer::Status::Dsl::STATUSES.keys.map { |k| k.to_s.capitalize }
 
           Primer::Component.descendants.each do |component|
             fq_class = component.name.to_s.split("::")

data/lib/primer/static/generate_previews.rb

@@ -16,11 +16,9 @@ module Primer
 
             component = preview.components.first&.component_class
 
-            # rubocop:disable Style/IfUnlessModifier
             unless component
               raise "Could not determine which component `#{preview.preview_class}` is designed to preview. Please add a `@component` annotation."
             end
-            # rubocop:enable Style/IfUnlessModifier
 
             _, _, class_name = Primer::Yard::DocsHelper.status_module_and_short_name(component)
 

data/lib/primer/view_components/engine.rb

@@ -44,7 +44,11 @@ module Primer
 
       initializer "primer.forms.helpers" do
         ActiveSupport.on_load :action_controller_base do
-          require "primer/form_helper"
+          begin
+            require "primer/form_helper"
+          rescue LoadError
+          end
+
           helper Primer::FormHelper
 
           # make primer_form_with available to view components also

data/lib/primer/view_components/linters/base_linter.rb

@@ -24,6 +24,7 @@ module ERBLint
       CLASSES = [].freeze
       REQUIRED_ARGUMENTS = [].freeze
 
+      # :nodoc:
       class ConfigSchema < LinterConfig
         property :override_ignores_if_correctable, accepts: [true, false], default: false, reader: :override_ignores_if_correctable?
       end
@@ -154,13 +155,13 @@ module ERBLint
         # Unless explicitly set, we don't want to mark correctable offenses if the counter is correct.
         if !@config.override_ignores_if_correctable? && expected_count == @total_offenses
           clear_offenses
-          return
+          return false
         end
 
         if @offenses_not_corrected.zero?
           # have to adjust to get `\n` so we delete the whole line
           add_offense(processed_source.to_source_range(comment_node.loc.adjust(end_pos: 1)), "Unused erblint:count comment for #{rule_name}", "") if comment_node
-          return
+          return false
         end
 
         first_offense = @offenses[0]

data/lib/primer/view_components/linters/deprecated_components_counter.rb

@@ -63,7 +63,7 @@ module ERBLint
         if offenses_count.zero?
           # have to adjust to get `\n` so we delete the whole line
           add_offense_with_severity(processed_source.to_source_range(comment_node.loc.adjust(end_pos: 1)), "Unused erblint:counter comment for #{rule_name}", "") if comment_node
-          return
+          return false
         end
 
         first_offense = @offenses[0]

data/lib/primer/view_components/linters/disallow_action_list.rb

@@ -10,6 +10,7 @@ module ERBLint
       include ERBLint::LinterRegistry
       include TagTreeHelpers
 
+      # :nodoc:
       class ConfigSchema < LinterConfig
         property :ignore_files, accepts: array_of?(String), default: -> { [] }
       end

data/lib/primer/view_components/linters/severity_schema.rb

@@ -4,6 +4,7 @@ require "erb_lint/utils/severity_levels"
 
 module ERBLint
   module Linters
+    # :nodoc:
     class SeveritySchema < LinterConfig
       # SEVERITY_NAMES :info, :refactor, :convention, :warning, :error, :fatal
       # see https://github.com/Shopify/erb-lint/blob/main/lib/erb_lint/utils/severity_levels.rb

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 16
+      MINOR = 17
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")
@@ -13,6 +13,5 @@ module Primer
   end
 end
 
-# rubocop:disable Rails/Output
 puts Primer::ViewComponents::VERSION::STRING if __FILE__ == $PROGRAM_NAME
 # rubocop:enable Rails/Output

data/lib/primer/yard/lookbook_pages_backend.rb

@@ -42,14 +42,12 @@ module Primer
           ), __dir__
         )
 
-        # rubocop:disable Lint/UselessAssignment
         documented_methods = docs.non_slot_methods.select do |mtd|
           [component.name, "Primer::Forms::Dsl::InputMethods"].include?(mtd.parent.title)
         end
 
         preview_methods = PREVIEW_MAP[component]
         preview_erbs = preview_methods.map do |preview_method|
-          # rubocop:disable Style/IfUnlessModifier
           if Primer::FormsPreview.instance_methods.exclude?(preview_method)
             raise "Preview '#{preview_method}' does not exist in Primer::FormsPreview"
           end

data/lib/rubocop/cop/primer/base_cop.rb

@@ -12,7 +12,7 @@ module RuboCop
         # We only verify SystemArguments if it's a `.new` call on a component or
         # a ViewHeleper call.
         def valid_node?(node)
-          return if node.nil?
+          return false if node.nil?
 
           view_helpers.include?(node.method_name) || (node.method_name == :new && !node.receiver.nil? && ::Primer::ViewComponents::STATUSES.key?(node.receiver.const_name))
         end

data/lib/rubocop/cop/primer/deprecated_arguments.rb

@@ -298,7 +298,6 @@ module RuboCop
         def extract_kv_from(pair)
           key = pair.key.value
 
-          # rubocop:disable Lint/BooleanSymbol
           value = case pair.value.type
                   when :sym, :str
                     pair.value.value.to_sym
@@ -307,7 +306,6 @@ module RuboCop
                   else
                     return []
                   end
-          # rubocop:enable Lint/BooleanSymbol
 
           [key, value]
         end

data/lib/rubocop/cop/primer/deprecated_components.rb

@@ -3,7 +3,7 @@
 require "rubocop"
 require "json"
 require "parser/current"
-require_relative "./../../../primer/view_components/linters/helpers/deprecated_components_helpers"
+require_relative "../../../primer/view_components/linters/helpers/deprecated_components_helpers"
 
 module RuboCop
   module Cop

data/lib/rubocop/cop/primer/deprecated_label_schemes.rb

@@ -58,7 +58,7 @@ module RuboCop
         private
 
         def label_node?(node)
-          return if node.nil?
+          return false if node.nil?
 
           node.method_name == :new && !node.receiver.nil? && node.receiver.const_name == "Primer::Beta::Label"
         end

data/lib/rubocop/cop/primer/deprecated_label_variants.rb

@@ -61,7 +61,7 @@ module RuboCop
         private
 
         def label_node?(node)
-          return if node.nil?
+          return false if node.nil?
 
           node.method_name == :new && !node.receiver.nil? && node.receiver.const_name == "Primer::Beta::Label"
         end

data/previews/primer/alpha/octicon_symbols_preview/default.html.erb

@@ -0,0 +1,6 @@
+<%= render(Primer::Alpha::OcticonSymbols.new(icons: [{ symbol: :container, size: :medium }])) %>
+
+<svg xmlns="http://www.w3.org/2000/svg" height="40" width="40" aria-label="Circled container icon" tabindex="0">
+  <circle cx="20" cy="20" r="18" stroke="green" stroke-width="3px" fill="white" />
+  <use href="#octicon_container_24" x="8" y="8" />
+</svg>

data/previews/primer/alpha/octicon_symbols_preview/playground.html.erb

@@ -0,0 +1,13 @@
+<p style="max-width: 500px">
+  Below is an SVG image containing the chosen octicon surrounded by a green circle. The octicon has been emitted
+  onto the page as an SVG &lt;symbol&gt; element and included into the SVG you see below with the &lt;use&gt; element.
+  See the <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/symbol" target="_blank">MDN docs</a> for
+  more information.
+</p>
+
+<%= render(Primer::Alpha::OcticonSymbols.new(icons: [{ symbol: octicon, size: :medium }])) %>
+
+<svg xmlns="http://www.w3.org/2000/svg" height="40" width="40" aria-label="Circled <%= octicon %> icon" tabindex="0">
+  <circle cx="20" cy="20" r="18" stroke="green" stroke-width="3px" fill="white" />
+  <use href="#octicon_<%= octicon %>_24" x="8" y="8" />
+</svg>

data/previews/primer/alpha/octicon_symbols_preview.rb

@@ -0,0 +1,21 @@
+# frozen_string_literal: true
+
+module Primer
+  module Alpha
+    # @label OcticonSymbols
+    class OcticonSymbolsPreview < ViewComponent::Preview
+      # @label Playground
+      #
+      # @param octicon [Symbol] medium_octicon
+      def playground(octicon: :container)
+        render_with_template(locals: { octicon: octicon })
+      end
+
+      # @label Default
+      #
+      # @snapshot
+      def default
+      end
+    end
+  end
+end

data/previews/primer/alpha/text_field_preview.rb

@@ -179,6 +179,11 @@ module Primer
         render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_ok_path, name: "my-text-field", label: "My text field"))
       end
 
+      # @label Auto check request accepted
+      def with_auto_check_accepted
+        render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_accepted_path, name: "my-text-field", label: "My text field"))
+      end
+
       # @label Auto check request error
       def with_auto_check_error
         render(Primer::Alpha::TextField.new(auto_check_src: UrlHelpers.example_check_error_path, name: "my-text-field", label: "My text field"))

data/previews/primer/beta/avatar_preview.rb

@@ -64,6 +64,12 @@ module Primer
         render(Primer::Beta::Avatar.new(size: 48, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
       end
 
+      # @label 64px
+      # @snapshot
+      def size_64
+        render(Primer::Beta::Avatar.new(size: 64, src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser"))
+      end
+
       # @label 80px
       # @snapshot
       def size_80