openproject-primer_view_components 0.15.0 → 0.17.0

data/app/components/primer/open_project/page_header.css

@@ -1 +1 @@
-.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}@media (max-width:767.98px){.PageHeader{border-bottom:0}}.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-title{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400)}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem)}.PageHeader-actions{justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem)}.PageHeader-actions+.PageHeader-description{margin-top:var(--base-size-4,.25rem)}.PageHeader-breadcrumbs{display:block;margin-bottom:var(--base-size-8,.5rem);width:100%}.PageHeader-backButton{margin-right:var(--base-size-4,.25rem);margin-top:2px}
+.PageHeader{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}@media (max-width:767.98px){.PageHeader{border-bottom:0}}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-title{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400)}.PageHeader-title--large{font-size:var(--text-title-size-large,2rem)}.PageHeader-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem)}.PageHeader-actions{display:flex;justify-content:flex-end;margin:0 0 0 var(--base-size-4,.25rem)}.PageHeader-actions+.PageHeader-description{margin-top:var(--base-size-4,.25rem)}.PageHeader-breadcrumbs{display:block;margin-bottom:var(--base-size-8,.5rem);padding-bottom:var(--base-size-4,.25rem);width:100%}.PageHeader-backButton{margin-right:var(--base-size-4,.25rem);margin-top:2px}.PageHeader-parentLink{flex:1 1 auto;margin-bottom:var(--base-size-4,.25rem)}.PageHeader-contextBarActions{margin:0 0 0 var(--base-size-4,.25rem)}

data/app/components/primer/open_project/page_header.css.json

@@ -2,6 +2,7 @@
   "name": "open_project/page_header",
   "selectors": [
     ".PageHeader",
+    ".PageHeader-contextBar",
     ".PageHeader-titleBar",
     ".PageHeader-title",
     ".PageHeader-title--large",
@@ -9,6 +10,8 @@
     ".PageHeader-actions",
     ".PageHeader-actions+.PageHeader-description",
     ".PageHeader-breadcrumbs",
-    ".PageHeader-backButton"
+    ".PageHeader-backButton",
+    ".PageHeader-parentLink",
+    ".PageHeader-contextBarActions"
   ]
 }

data/app/components/primer/open_project/page_header.css.map

@@ -1 +1 @@
-{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,0CAAsC,CADtC,mDAQF,CAHE,4BAPF,YAQI,eAEJ,CADE,CAGF,qBAIE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAEF,CAEA,kBAGE,aAAc,CAFd,cAAe,CACf,8CAEF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAGF,CAGA,oBAEE,wBAAyB,CADzB,sFAMF,CAHE,4CACE,oCACF,CAGF,wBACE,aAAc,CAEd,sCAAiC,CADjC,UAEF,CAEA,uBAEE,sCAAgC,CADhC,cAEF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: column;\n\n  @media (max-width: 767.98px) {\n    border-bottom: 0;\n  }\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n}\n\n.PageHeader-title {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.PageHeader-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  justify-content: flex-end;\n\n  & + .PageHeader-description {\n    margin-top: var(--base-size-4);\n  }\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n  margin-bottom: var(--base-size-8);\n}\n\n.PageHeader-backButton {\n  margin-top: 2px; /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n"]}
+{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,gHAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,0CAAsC,CADtC,mDAQF,CAHE,4BAPF,YAQI,eAEJ,CADE,CAUF,4CAIE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAEF,CAEA,kBAGE,aAAc,CAFd,cAAe,CACf,8CAEF,CAEA,yBACE,2CACF,CAGA,wBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAGF,CAGA,oBAGE,YAAa,CADb,wBAAyB,CADzB,sCAOF,CAHE,4CACE,oCACF,CAGF,wBACE,aAAc,CAEd,sCAAiC,CACjC,wCAAkC,CAFlC,UAGF,CAEA,uBAEE,sCAAgC,CADhC,cAEF,CAEA,uBACE,aAAc,CACd,uCACF,CAEA,8BACE,sCACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n  display: flex;\n  padding-bottom: var(--stack-padding-condensed);\n  margin-bottom: var(--stack-gap-normal);\n  border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n  flex-flow: column;\n\n  @media (max-width: 767.98px) {\n    border-bottom: 0;\n  }\n}\n\n.PageHeader-contextBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center;\n}\n\n.PageHeader-titleBar {\n  display: flex;\n  flex-flow: row;\n  justify-content: flex-end;\n  align-items: center; /* Keep back button vertically aligned. */\n}\n\n.PageHeader-title {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n  font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.PageHeader-actions {\n  margin: 0 0 0 var(--base-size-4);\n  justify-content: flex-end;\n  display: flex;\n\n  & + .PageHeader-description {\n    margin-top: var(--base-size-4);\n  }\n}\n\n.PageHeader-breadcrumbs {\n  display: block;\n  width: 100%;\n  margin-bottom: var(--base-size-8);\n  padding-bottom: var(--base-size-4);\n}\n\n.PageHeader-backButton {\n  margin-top: 2px; /* to center align with label */\n  margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n  flex: 1 1 auto;\n  margin-bottom: var(--base-size-4);\n}\n\n.PageHeader-contextBarActions {\n  margin: 0 0 0 var(--base-size-4);\n}"]}

data/app/components/primer/open_project/page_header.html.erb

@@ -1,9 +1,17 @@
 <%= render Primer::BaseComponent.new(**@system_arguments) do %>
-  <%= breadcrumbs %>
+  <% if parent_link || breadcrumbs || context_bar_actions %>
+    <div class="PageHeader-contextBar">
+      <%= parent_link %>
+      <%= breadcrumbs %>
+      <%= context_bar_actions %>
+    </div>
+  <% end %>
+
   <div class="PageHeader-titleBar">
     <%= back_button %>
     <%= title %>
     <%= actions %>
   </div>
+
   <%= description %>
 <% end %>

data/app/components/primer/open_project/page_header.pcss

@@ -12,6 +12,13 @@
   }
 }
 
+.PageHeader-contextBar {
+  display: flex;
+  flex-flow: row;
+  justify-content: flex-end;
+  align-items: center;
+}
+
 .PageHeader-titleBar {
   display: flex;
   flex-flow: row;
@@ -38,8 +45,9 @@
 
 /* Add 1 or 2 buttons to the right of the heading */
 .PageHeader-actions {
-  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);
+  margin: 0 0 0 var(--base-size-4);
   justify-content: flex-end;
+  display: flex;
 
   & + .PageHeader-description {
     margin-top: var(--base-size-4);
@@ -50,9 +58,19 @@
   display: block;
   width: 100%;
   margin-bottom: var(--base-size-8);
+  padding-bottom: var(--base-size-4);
 }
 
 .PageHeader-backButton {
   margin-top: 2px; /* to center align with label */
   margin-right: var(--base-size-4);
 }
+
+.PageHeader-parentLink {
+  flex: 1 1 auto;
+  margin-bottom: var(--base-size-4);
+}
+
+.PageHeader-contextBarActions {
+  margin: 0 0 0 var(--base-size-4);
+}

data/app/components/primer/open_project/page_header.rb

@@ -27,6 +27,11 @@ module Primer
         "triangle-left"
       ].freeze
 
+      DEFAULT_BACK_BUTTON_DISPLAY = [:none, :flex].freeze
+      DEFAULT_BREADCRUMBS_DISPLAY = [:none, :flex].freeze
+      DEFAULT_PARENT_LINK_DISPLAY = [:block, :none].freeze
+      DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY = [:block, :none].freeze
+
       status :open_project
 
       # The title of the page header
@@ -64,7 +69,21 @@ module Primer
         Primer::BaseComponent.new(**system_arguments)
       }
 
+      # Context Bar Actions
+      # By default shown on narrow screens. Can be overridden with system_argument: display
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :context_bar_actions, lambda { |**system_arguments|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:tag] = :div
+        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-contextBarActions")
+        system_arguments[:display] ||= DEFAULT_CONTEXT_BAR_ACTIONS_DISPLAY
+
+        Primer::BaseComponent.new(**system_arguments)
+      }
+
       # Optional back button prepend the title
+      # By default shown on wider screens. Can be overridden with system_argument: display
       #
       # @param size [Symbol] <%= one_of(Primer::OpenProject::PageHeader::BACK_BUTTON_SIZE_OPTIONS) %>
       # @param icon [String] <%= one_of(Primer::OpenProject::PageHeader::BACK_BUTTON_ICON_OPTIONS) %>
@@ -80,16 +99,35 @@ module Primer
         system_arguments[:size] = fetch_or_fallback(BACK_BUTTON_SIZE_OPTIONS, size, DEFAULT_BACK_BUTTON_SIZE)
         system_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, icon, DEFAULT_BACK_BUTTON_ICON)
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-backButton")
+        system_arguments[:display] ||= DEFAULT_BACK_BUTTON_DISPLAY
 
         Primer::Beta::IconButton.new(**system_arguments)
       }
 
+      # Optional parent link in the context area
+      # By default shown on narrow screens. Can be overridden with system_argument: display
+      #
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      renders_one :parent_link, lambda { |icon: DEFAULT_BACK_BUTTON_ICON, **system_arguments, &block|
+        deny_tag_argument(**system_arguments)
+        system_arguments[:icon] = fetch_or_fallback(BACK_BUTTON_ICON_OPTIONS, icon, DEFAULT_BACK_BUTTON_ICON)
+        system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-parentLink")
+        system_arguments[:display] ||= DEFAULT_PARENT_LINK_DISPLAY
+
+        render(Primer::Beta::Link.new(scheme: :primary, muted: true, **system_arguments)) do
+          render(Primer::Beta::Octicon.new(icon: "arrow-left", "aria-label": "aria_label", mr: 2)) + content_tag(:span, &block)
+        end
+      }
+
       # Optional breadcrumbs above the title row
+      # By default shown on wider screens. Can be overridden with system_argument: display
       #
       # @param items [Array<String, Hash>] Items is an array of strings, hash {href, text} or an anchor tag string
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
       renders_one :breadcrumbs, lambda { |items, **system_arguments|
         system_arguments[:classes] = class_names(system_arguments[:classes], "PageHeader-breadcrumbs")
+        system_arguments[:display] ||= DEFAULT_BREADCRUMBS_DISPLAY
+
         render(Primer::Beta::Breadcrumbs.new(**system_arguments)) do |breadcrumbs|
           items.each do |item|
             item = anchor_string_to_object(item) if anchor_tag_string?(item)

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