primer_view_components 0.13.1 → 0.14.0

data/app/components/primer/beta/nav_list.js

@@ -171,12 +171,14 @@ let NavListElement = class NavListElement extends HTMLElement {
         }
     }
 };
-_NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function _NavListElement_parseHTML(document, html) {
+_NavListElement_instances = new WeakSet();
+_NavListElement_parseHTML = function _NavListElement_parseHTML(document, html) {
     const template = document.createElement('template');
     // eslint-disable-next-line github/no-inner-html
     template.innerHTML = html;
     return document.importNode(template.content, true);
-}, _NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
+};
+_NavListElement_findSelectedNavItemById = function _NavListElement_findSelectedNavItemById(itemId) {
     var _a;
     // First we compare the selected link to data-item-id for each nav item
     for (const navItem of this.items) {
@@ -189,16 +191,19 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
         }
     }
     return null;
-}, _NavListElement_findSelectedNavItemByHref = function _NavListElement_findSelectedNavItemByHref(href) {
+};
+_NavListElement_findSelectedNavItemByHref = function _NavListElement_findSelectedNavItemByHref(href) {
     // If we didn't find a match, we compare the selected link to the href of each nav item
     const selectedNavItem = this.querySelector(`.ActionListContent[href="${href}"]`);
     if (selectedNavItem) {
         return selectedNavItem.closest('.ActionListItem');
     }
     return null;
-}, _NavListElement_findSelectedNavItemByCurrentLocation = function _NavListElement_findSelectedNavItemByCurrentLocation() {
+};
+_NavListElement_findSelectedNavItemByCurrentLocation = function _NavListElement_findSelectedNavItemByCurrentLocation() {
     return __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_findSelectedNavItemByHref).call(this, window.location.pathname);
-}, _NavListElement_select = function _NavListElement_select(navItem) {
+};
+_NavListElement_select = function _NavListElement_select(navItem) {
     const currentlySelectedItem = this.querySelector('.ActionListItem--navActive');
     if (currentlySelectedItem)
         __classPrivateFieldGet(this, _NavListElement_instances, "m", _NavListElement_deselect).call(this, currentlySelectedItem);
@@ -211,7 +216,8 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
         this.expandItem(parentMenu);
         parentMenu.classList.add('ActionListContent--hasActiveSubItem');
     }
-}, _NavListElement_deselect = function _NavListElement_deselect(navItem) {
+};
+_NavListElement_deselect = function _NavListElement_deselect(navItem) {
     navItem.classList.remove('ActionListItem--navActive');
     if (navItem.children.length > 0) {
         navItem.children[0].removeAttribute('aria-current');
@@ -221,7 +227,8 @@ _NavListElement_instances = new WeakSet(), _NavListElement_parseHTML = function
         this.collapseItem(parentMenu);
         parentMenu.classList.remove('ActionListContent--hasActiveSubItem');
     }
-}, _NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
+};
+_NavListElement_findParentMenu = function _NavListElement_findParentMenu(navItem) {
     var _a;
     if (!navItem.classList.contains('ActionListItem--subItem'))
         return null;

data/app/components/primer/beta/subhead.css

@@ -1 +1 @@
-.Subhead{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.Subhead--spacious{margin-top:var(--base-size-40,2.5rem)}.Subhead-heading{flex:1 1 auto;font-size:24px;font-weight:var(--base-text-weight-normal,400);order:0}.Subhead-heading--danger{color:var(--fgColor-danger,var(--color-danger-fg));font-weight:var(--base-text-weight-semibold,600)}.Subhead-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.Subhead-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.Subhead-actions+.Subhead-description{margin-top:var(--base-size-4,.25rem)}
+.Subhead{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-muted,var(--color-border-muted));display:flex;flex-flow:row wrap;justify-content:flex-end;margin-bottom:var(--stack-gap-normal,1rem);padding-bottom:var(--stack-padding-condensed,.5rem)}.Subhead--spacious{margin-top:var(--base-size-40,2.5rem)}.Subhead-heading{flex:1 1 auto;font-weight:var(--base-text-weight-normal,400);order:0}.Subhead-heading--large{font-size:var(--base-size-24,1.5rem)}.Subhead-heading--medium{font-size:var(--text-title-size-medium,1.25rem)}.Subhead-heading--danger{color:var(--fgColor-danger,var(--color-danger-fg));font-weight:var(--base-text-weight-semibold,600)}.Subhead-description{color:var(--fgColor-muted,var(--color-fg-muted));flex:1 100%;font-size:var(--text-body-size-medium,.875rem);order:2}.Subhead-actions{align-self:center;justify-content:flex-end;margin:var(--base-size-4,.25rem) 0 var(--base-size-4,.25rem) var(--base-size-4,.25rem);order:1}.Subhead-actions+.Subhead-description{margin-top:var(--base-size-4,.25rem)}

data/app/components/primer/beta/subhead.css.json

@@ -4,6 +4,8 @@
     ".Subhead",
     ".Subhead--spacious",
     ".Subhead-heading",
+    ".Subhead-heading--large",
+    ".Subhead-heading--medium",
     ".Subhead-heading--danger",
     ".Subhead-description",
     ".Subhead-actions",

data/app/components/primer/beta/subhead.css.map

@@ -1 +1 @@
-{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDAKF,CAGA,mBACE,qCACF,CAGA,iBAGE,aAAc,CAFd,cAAe,CACf,8CAA2C,CAE3C,OACF,CAGA,yBAEE,kDAA4B,CAD5B,gDAEF,CAGA,qBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,sCACE,oCACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\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: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n  margin-top: var(--base-size-40);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n  font-size: 24px;\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-danger);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}
+{"version":3,"sources":["subhead.pcss"],"names":[],"mappings":"AAEA,SAIE,gHAAqE,CAHrE,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,0CAAsC,CADtC,mDAKF,CAGA,mBACE,qCACF,CAGA,iBAEE,aAAc,CADd,8CAA2C,CAE3C,OACF,CAEA,wBACE,oCACF,CAEA,yBACE,+CACF,CAGA,yBAEE,kDAA4B,CAD5B,gDAEF,CAGA,qBAEE,gDAA2B,CAC3B,WAAY,CAFZ,8CAAuC,CAGvC,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,sFAAkE,CAGlE,OAKF,CAHE,sCACE,oCACF","file":"subhead.css","sourcesContent":["/* Subhead */\n\n.Subhead {\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: row wrap;\n  justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n  margin-top: var(--base-size-40);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n  font-weight: var(--base-text-weight-normal);\n  flex: 1 1 auto;\n  order: 0;\n}\n\n.Subhead-heading--large {\n  font-size: var(--base-size-24);\n}\n\n.Subhead-heading--medium {\n  font-size: var(--text-title-size-medium);\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n  font-weight: var(--base-text-weight-semibold);\n  color: var(--fgColor-danger);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n  font-size: var(--text-body-size-medium);\n  color: var(--fgColor-muted);\n  flex: 1 100%;\n  order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n  margin: var(--base-size-4) 0 var(--base-size-4) var(--base-size-4);\n  align-self: center;\n  justify-content: flex-end;\n  order: 1;\n\n  & + .Subhead-description {\n    margin-top: var(--base-size-4);\n  }\n}\n"]}

data/app/components/primer/beta/subhead.pcss

@@ -16,12 +16,19 @@
 
 /* <h2> sized heading with normal font weight */
 .Subhead-heading {
-  font-size: 24px;
   font-weight: var(--base-text-weight-normal);
   flex: 1 1 auto;
   order: 0;
 }
 
+.Subhead-heading--large {
+  font-size: var(--base-size-24);
+}
+
+.Subhead-heading--medium {
+  font-size: var(--text-title-size-medium);
+}
+
 /* Make the text bold and red for dangerous content */
 .Subhead-heading--danger {
   font-weight: var(--base-text-weight-semibold);

data/app/components/primer/beta/subhead.rb

@@ -17,16 +17,24 @@ module Primer
       DEFAULT_HEADING_TAG = :div
       HEADING_TAG_OPTIONS = [DEFAULT_HEADING_TAG, :h1, :h2, :h3, :h4, :h5, :h6].freeze
 
+      DEFAULT_HEADING_SIZE = :large
+      HEADING_SIZE_MAP = {
+        DEFAULT_HEADING_SIZE => "Subhead-heading--large",
+        :medium => "Subhead-heading--medium"
+      }.freeze
+      HEADING_SIZE_OPTIONS = HEADING_SIZE_MAP.keys.freeze
+
       # The heading
       #
       # @param tag [Symbol] <%= one_of(Primer::Beta::Subhead::HEADING_TAG_OPTIONS)%>
       # @param danger [Boolean] Whether to style the heading as dangerous.
       # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
-      renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, danger: false, **system_arguments|
+      renders_one :heading, lambda { |tag: DEFAULT_HEADING_TAG, danger: false, size: DEFAULT_HEADING_SIZE, **system_arguments|
         system_arguments[:tag] = fetch_or_fallback(HEADING_TAG_OPTIONS, tag, DEFAULT_HEADING_TAG)
         system_arguments[:classes] = class_names(
           system_arguments[:classes],
           "Subhead-heading",
+          HEADING_SIZE_MAP[fetch_or_fallback(HEADING_SIZE_OPTIONS, size, DEFAULT_HEADING_SIZE)],
           "Subhead-heading--danger": danger
         )
 

data/app/components/primer/focus_group.js

@@ -15,7 +15,7 @@ const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role
 const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ');
 const getMnemonicFor = (item) => { var _a; return (_a = item.textContent) === null || _a === void 0 ? void 0 : _a.trim()[0].toLowerCase(); };
 const printable = /^\S$/;
-export default class FocusGroupElement extends HTMLElement {
+class FocusGroupElement extends HTMLElement {
     constructor() {
         super(...arguments);
         _FocusGroupElement_instances.add(this);
@@ -159,6 +159,7 @@ export default class FocusGroupElement extends HTMLElement {
 _FocusGroupElement_retainSignal = new WeakMap(), _FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
     return this.querySelectorAll(menuItemSelector);
 };
+export default FocusGroupElement;
 if (!customElements.get('focus-group')) {
     window.FocusGroupElement = FocusGroupElement;
     customElements.define('focus-group', FocusGroupElement);

data/app/components/primer/primer.d.ts

@@ -1,5 +1,4 @@
 import '@github/include-fragment-element';
-import '@oddbird/popover-polyfill';
 import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';

data/app/components/primer/primer.js

@@ -1,5 +1,4 @@
 import '@github/include-fragment-element';
-import '@oddbird/popover-polyfill';
 import './alpha/action_bar_element';
 import './alpha/dropdown';
 import './anchored_position';

data/app/components/primer/primer.pcss

@@ -1,5 +1,3 @@
-@import "@oddbird/popover-polyfill/dist/popover.css";
-
 /* CSS component styles here */
 
 /* alpha */

data/app/components/primer/primer.ts

@@ -1,5 +1,4 @@
 import '@github/include-fragment-element'
-import '@oddbird/popover-polyfill'
 import './alpha/action_bar_element'
 import './alpha/dropdown'
 import './anchored_position'

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

@@ -81,7 +81,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
@@ -279,6 +278,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)
@@ -70,10 +69,15 @@ module Primer
                 render_erb_ignoring_markdown_code_fences(docs.base_docstring)
               end
 
+            accessibility_docs =
+              if (accessibility_tag_text = docs.tags(:accessibility)&.first&.text)
+                render_erb_ignoring_markdown_code_fences(accessibility_tag_text)
+              end
+
             memo[component] = {
               "fully_qualified_name" => component.name,
               "description" => description,
-              "accessibility_docs" => docs.tags(:accessibility)&.first&.text,
+              "accessibility_docs" => accessibility_docs,
               "is_form_component" => docs.manifest_entry.form_component?,
               "is_published" => docs.manifest_entry.published?,
               "requires_js" => docs.manifest_entry.requires_js?,
@@ -85,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