primer_view_components 0.9.0 → 0.11.0

data/app/components/primer/beta/nav_list/item.rb

@@ -0,0 +1,156 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    class NavList
+      # Items are rendered as styled links. They can optionally include leading and/or trailing visuals,
+      # such as icons, avatars, and counters. Items are selected by ID. IDs can be specified via the
+      # `selected_item_ids` argument, which accepts a list of valid IDs for the item. Items can also
+      # themselves contain sub items. Sub items are rendered collapsed by default.
+      class Item < Primer::Alpha::ActionList::Item
+        attr_reader :selected_by_ids, :sub_item
+
+        # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Alpha::ActionList::Item) %>.
+        renders_many :items, lambda { |**system_arguments|
+          raise "Items can only be nested 2 levels deep" if sub_item?
+
+          @list.build_item(parent: self, sub_item: true, **system_arguments).tap do |item|
+            @list.will_add_item(item)
+          end
+        }
+
+        # Whether or not this item is nested under a parent item.
+        #
+        # @return [Boolean]
+        alias sub_item? sub_item
+
+        # @param selected_item_id [Symbol] The ID of the currently selected list item. Used internally.
+        # @param selected_by_ids [Array<Symbol>] The list of IDs that select this item. In other words, if the `selected_item_id` attribute on the parent `NavList` is set to one of these IDs, the item will appear selected.
+        # @param expanded [Boolean] Whether this item shows (expands) or hides (collapses) its list of sub items.
+        # @param sub_item [Boolean] Whether or not this item is nested under a parent item. Used internally.
+        # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+        def initialize(selected_item_id: nil, selected_by_ids: [], sub_item: false, expanded: false, **system_arguments)
+          @selected_item_id = selected_item_id
+          @selected_by_ids = Array(selected_by_ids)
+          @expanded = expanded
+          @sub_item = sub_item
+
+          system_arguments[:classes] = class_names(
+            system_arguments[:classes],
+            "ActionListItem--subItem" => @sub_item
+          )
+
+          @sub_list_arguments = {
+            classes: class_names(
+              "ActionList",
+              "ActionList--subGroup"
+            )
+          }
+
+          @list = system_arguments[:list]
+
+          @sub_list_arguments["data-action"] = "keydown:#{@list.custom_element_name}#handleItemWithSubItemKeydown" if @list
+
+          overrides = { "data-item-id": @selected_by_ids.join(" ") }
+
+          super(**system_arguments, **overrides)
+        end
+
+        def active?
+          item_active?(self) && items.empty?
+        end
+
+        # Cause this item to show its list of sub items when rendered.
+        def expand!
+          @expanded = true
+        end
+
+        def before_render
+          if active_sub_item?
+            expand!
+
+            @content_arguments[:classes] = class_names(
+              @content_arguments[:classes],
+              "ActionListContent--hasActiveSubItem"
+            )
+          else
+            @system_arguments[:classes] = class_names(
+              @system_arguments[:classes],
+              "ActionListItem--navActive" => active?
+            )
+          end
+
+          @content_arguments[:"aria-current"] = "page" if active?
+
+          super
+
+          raise "Cannot render a trailing action for an item with subitems" if items.present? && trailing_action.present?
+
+          raise "Cannot pass `selected_by_ids:` for an item with subitems, since parent items cannot be selected" if items.present? && @selected_by_ids.present?
+
+          return if items.blank?
+
+          @sub_list_arguments[:aria] = merge_aria(
+            @sub_list_arguments,
+            { aria: { labelledby: id } }
+          )
+
+          raise ArgumentError, "Items with sub-items cannot have hrefs" if href.present?
+
+          @content_arguments[:tag] = :button
+          @content_arguments[:"aria-expanded"] = @expanded.to_s
+          @content_arguments[:"data-action"] = "
+            click:#{@list.custom_element_name}#handleItemWithSubItemClick
+            keydown:#{@list.custom_element_name}#handleItemWithSubItemKeydown
+          "
+
+          with_private_trailing_action_icon(:"chevron-down", classes: "ActionListItem-collapseIcon")
+
+          @system_arguments[:classes] = class_names(
+            @system_arguments[:classes],
+            "ActionListItem--hasSubItem"
+          )
+        end
+
+        def kind
+          :item
+        end
+
+        private
+
+        # Normally it would be easier to simply ask each item for its active status, eg.
+        # items.any?(&:active?), but unfortunately the view context is not set on each
+        # item until _after_ the parent's before_render, etc methods have been called.
+        # This means helper methods like current_page? will blow up with an error, since
+        # `helpers` is simply an alias for the view context (i.e. an instance of
+        # ActionView::Base). Since we know the view context for the parent object must
+        # be set before `before_render` is invoked, we can call helper methods here in
+        # the parent and bypass the problem entirely. Maybe not the most OO approach,
+        # but it works.
+        def item_active?(item)
+          if item.selected_by_ids.present?
+            item.selected_by_ids.include?(@selected_item_id)
+          elsif item.href
+            current_page?(item.href)
+          else
+            # :nocov:
+            false
+            # :nocov:
+          end
+        end
+
+        def active_sub_item?
+          items.any? { |subitem| item_active?(subitem) }
+        end
+
+        def current_page?(url)
+          helpers.current_page?(url)
+        end
+
+        def list_class
+          Primer::Beta::NavList
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1,212 @@
+# frozen_string_literal: true
+
+module Primer
+  module Beta
+    # `NavList` provides a simple way to render side navigation, i.e. navigation
+    # that appears to the left or right side of some main content. Each group in a
+    # nav list is a list of links.
+    #
+    # Nav list groups can contain sub items. Rather than navigating to a URL, groups
+    # with sub items expand and collapse on click. To indicate this functionality, the
+    # group will automatically render with a trailing chevron icon that changes direction
+    # when the group expands and collapses.
+    #
+    # Nav list items appear visually active when selected. Each nav item must have one
+    # or more ID values that determine which item will appear selected. Use the
+    # `selected_item_id` argument to select the appropriate item.
+    class NavList < Primer::Component
+      status :beta
+      audited_at "2023-07-10"
+
+      # @private
+      def self.custom_element_name
+        "nav-list"
+      end
+
+      # The heading for the list at large. Accepts the arguments accepted by <%= link_to_component(Primer::Beta::NavList::Heading) %>.
+      #
+      renders_one :heading, Primer::Beta::NavList::Heading
+
+      # @!parse
+      #   # Adds an item to the list.
+      #   #
+      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Beta::NavList::Item) %>
+      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Beta::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
+      #   def with_item(component_klass: Primer::Beta::NavList::Item, **system_arguments, &block)
+      #   end
+
+      # @!parse
+      #   # Adds an avatar item to the list. Avatar items are a convenient way to accessibly add an item with a leading avatar image.
+      #   #
+      #   # @param src [String] The source url of the avatar image.
+      #   # @param username [String] The username associated with the avatar.
+      #   # @param full_name [String] Optional. The user's full name.
+      #   # @param full_name_scheme [Symbol] Optional. How to display the user's full name. <%= one_of(Primer::Alpha::ActionList::Item::DESCRIPTION_SCHEME_OPTIONS) %>
+      #   # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Beta::NavList::Item) %>
+      #   # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>
+      #   # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Beta::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
+      #   def with_avatar_item(src:, username:, full_name: nil, full_name_scheme: Primer::Alpha::ActionList::Item::DEFAULT_DESCRIPTION_SCHEME, component_klass: Primer::Beta::NavList::Item, avatar_arguments: {}, **system_arguments, &block)
+      #   end
+
+      # @!parse
+      #   # Adds a group to the list. A group is a list of links and a (required) heading.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::NavList::Group) %>.
+      #   def with_group(**system_arguments, &block)
+      #   end
+
+      # @!parse
+      #   # Adds a divider to the list. Dividers visually separate items and groups.
+      #   #
+      #   # @param system_arguments [Hash] The arguments accepted by <%= link_to_component(Primer::Beta::NavList::Divider) %>.
+      #   def with_divider(**system_arguments, &block)
+      #   end
+
+      # Items. Items can be individual items, dividers, or groups. See the documentation for `#with_item`, `#with_divider`, and `#with_group` respectively for more information.
+      #
+      renders_many :items, types: {
+        item: {
+          renders: lambda { |**system_arguments, &block|
+            build_item(**system_arguments, &block)
+          },
+
+          as: :item
+        },
+
+        avatar_item: {
+          renders: lambda { |**system_arguments|
+            build_avatar_item(**system_arguments)
+          },
+
+          as: :avatar_item
+        },
+
+        divider: {
+          renders: Primer::Beta::NavList::Divider,
+          as: :divider
+        },
+
+        group: {
+          renders: lambda { |**system_arguments, &block|
+            Primer::Beta::NavList::Group.new(
+              selected_item_id: @selected_item_id,
+              **system_arguments,
+              &block
+            )
+          },
+
+          as: :group
+        }
+      }
+
+      # @param selected_item_id [Symbol] The ID of the currently selected item. The default is `nil`, meaning no item is selected.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(selected_item_id: nil, **system_arguments)
+        @system_arguments = system_arguments
+        @selected_item_id = selected_item_id
+      end
+
+      # Builds a new item but does not add it to the list. Use this method
+      # instead of the `#with_item` slot if you need to render an item outside
+      # the context of a list, eg. if rendering additional items to append to
+      # an existing list, perhaps via a separate HTTP request.
+      #
+      # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Beta::NavList::Item) %>
+      # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Beta::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
+      def build_item(component_klass: Primer::Beta::NavList::Item, **system_arguments, &block)
+        component_klass.new(
+          list: top_level_group,
+          selected_item_id: @selected_item_id,
+          **system_arguments,
+          &block
+        )
+      end
+
+      # Builds a new avatar item but does not add it to the list. Avatar items
+      # are a convenient way to accessibly add an item with a leading avatar
+      # image. Use this method instead of the `#with_avatar_item` slot if you
+      # need to render an avatar item outside the context of a list, eg. if
+      # rendering additional items to append to an existing list, perhaps via
+      # a separate HTTP request.
+      #
+      # @param src [String] The source url of the avatar image.
+      # @param username [String] The username associated with the avatar.
+      # @param full_name [String] Optional. The user's full name.
+      # @param full_name_scheme [Symbol] Optional. How to display the user's full name. <%= one_of(Primer::Alpha::ActionList::Item::DESCRIPTION_SCHEME_OPTIONS) %>
+      # @param component_klass [Class] The class to use instead of the default <%= link_to_component(Primer::Beta::NavList::Item) %>
+      # @param avatar_arguments [Hash] Optional. The arguments accepted by <%= link_to_component(Primer::Beta::Avatar) %>
+      # @param system_arguments [Hash] These arguments are forwarded to <%= link_to_component(Primer::Beta::NavList::Item) %>, or whatever class is passed as the `component_klass` argument.
+      def build_avatar_item(src:, username:, full_name: nil, full_name_scheme: Primer::Alpha::ActionList::Item::DEFAULT_DESCRIPTION_SCHEME, component_klass: Primer::Beta::NavList::Item, avatar_arguments: {}, **system_arguments)
+        component_klass.new(
+          list: top_level_group,
+          selected_item_id: @selected_item_id,
+          label: username,
+          description_scheme: full_name_scheme,
+          **system_arguments
+        ).tap do |item|
+          item.with_leading_visual_raw_content do
+            # no alt text necessary
+            item.render(Primer::Beta::Avatar.new(src: src, **avatar_arguments, role: :presentation, size: 16))
+          end
+
+          item.with_description_content(full_name) if full_name
+        end
+      end
+
+      private
+
+      def before_render
+        if heading?
+          raise ArgumentError, "Please don't set an aria-label if a heading is provided" if aria(:label, @system_arguments)
+
+          @system_arguments[:aria] = merge_aria(
+            @system_arguments,
+            { aria: { labelledby: heading.id } }
+          )
+        else
+          raise ArgumentError, "When no heading is provided, an aria-label must be given" unless aria(:label, @system_arguments)
+        end
+      end
+
+      # Lists that contain top-level items (i.e. items outside of a group) should be wrapped in a <ul>
+      def render_outer_list?
+        items.any? { |item| !group?(item) }
+      end
+
+      def render_divider_between?(item1, item2)
+        return false if either_is_divider?(item1, item2)
+
+        both_are_groups?(item1, item2) || heterogeneous?(item1, item2)
+      end
+
+      def both_are_groups?(item1, item2)
+        group?(item1) && group?(item2)
+      end
+
+      def heterogeneous?(item1, item2)
+        kind(item1) != kind(item2)
+      end
+
+      def either_is_divider?(item1, item2)
+        divider?(item1) || divider?(item2)
+      end
+
+      def group?(item)
+        kind(item) == :group
+      end
+
+      def divider?(item)
+        kind(item) == :divider
+      end
+
+      def kind(item)
+        item.respond_to?(:kind) ? item.kind : :item
+      end
+
+      def top_level_group
+        # dummy group for the list: argument in the item slot above
+        @top_level_group ||= Primer::Beta::NavList::Group.new(selected_item_id: @selected_item_id)
+      end
+    end
+  end
+end

data/app/components/primer/focus_group.js

@@ -9,15 +9,17 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
     if (typeof state === "function" ? receiver !== state || !f : !state.has(receiver)) throw new TypeError("Cannot read private member from an object whose class did not declare it");
     return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
 };
-var _FocusGroupElement_instances, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
+var _FocusGroupElement_instances, _FocusGroupElement_retainSignal, _FocusGroupElement_abortController, _FocusGroupElement_items_get;
 import '@oddbird/popover-polyfill';
-const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';
+const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]'];
+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 {
     constructor() {
         super(...arguments);
         _FocusGroupElement_instances.add(this);
+        _FocusGroupElement_retainSignal.set(this, null);
         _FocusGroupElement_abortController.set(this, null);
     }
     get nowrap() {
@@ -56,11 +58,35 @@ export default class FocusGroupElement extends HTMLElement {
         (_a = __classPrivateFieldGet(this, _FocusGroupElement_abortController, "f")) === null || _a === void 0 ? void 0 : _a.abort();
     }
     handleEvent(event) {
+        var _a;
         const { direction, nowrap } = this;
         if (event.type === 'focusin') {
             if (this.retain && event.target instanceof Element && event.target.matches(menuItemSelector)) {
+                (_a = __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+                const { signal } = (__classPrivateFieldSet(this, _FocusGroupElement_retainSignal, new AbortController(), "f"));
                 for (const item of __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)) {
                     item.setAttribute('tabindex', item === event.target ? '0' : '-1');
+                    const popover = event.target.closest('[popover]');
+                    if (item === event.target && (popover === null || popover === void 0 ? void 0 : popover.popover) === 'auto' && popover.closest('focus-group') === this) {
+                        popover.addEventListener('toggle', (toggleEvent) => {
+                            var _a, _b;
+                            if (!(toggleEvent.target instanceof Element))
+                                return;
+                            if (toggleEvent.newState === 'closed') {
+                                (_a = __classPrivateFieldGet(this, _FocusGroupElement_retainSignal, "f")) === null || _a === void 0 ? void 0 : _a.abort();
+                                item.setAttribute('tabindex', '-1');
+                                if (popover.id) {
+                                    const invoker = this.querySelector(`[popovertarget="${popover.id}"]`);
+                                    if (invoker) {
+                                        invoker.setAttribute('tabindex', '0');
+                                    }
+                                    else {
+                                        (_b = __classPrivateFieldGet(this, _FocusGroupElement_instances, "a", _FocusGroupElement_items_get)[0]) === null || _b === void 0 ? void 0 : _b.setAttribute('tabindex', '0');
+                                    }
+                                }
+                            }
+                        }, { signal });
+                    }
                 }
             }
         }
@@ -120,7 +146,7 @@ export default class FocusGroupElement extends HTMLElement {
                 let el = focusEl;
                 do {
                     el = el.closest(`[popover]:not(:popover-open)`);
-                    if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto') {
+                    if ((el === null || el === void 0 ? void 0 : el.popover) === 'auto' && !['ArrowRight', 'ArrowLeft'].includes(event.key)) {
                         el.showPopover();
                     }
                     el = (el === null || el === void 0 ? void 0 : el.parentElement) || null;
@@ -130,7 +156,7 @@ export default class FocusGroupElement extends HTMLElement {
         }
     }
 }
-_FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
+_FocusGroupElement_retainSignal = new WeakMap(), _FocusGroupElement_abortController = new WeakMap(), _FocusGroupElement_instances = new WeakSet(), _FocusGroupElement_items_get = function _FocusGroupElement_items_get() {
     return this.querySelectorAll(menuItemSelector);
 };
 if (!customElements.get('focus-group')) {

data/app/components/primer/focus_group.ts

@@ -1,12 +1,15 @@
 import '@oddbird/popover-polyfill'
 
-const menuItemSelector = '[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]'
+const validSelectors = ['[role="menuitem"]', '[role="menuitemcheckbox"]', '[role="menuitemradio"]']
+const menuItemSelector = validSelectors.map(selector => `:not([hidden]) > ${selector}`).join(', ')
 
 const getMnemonicFor = (item: Element) => item.textContent?.trim()[0].toLowerCase()
 
 const printable = /^\S$/
 
 export default class FocusGroupElement extends HTMLElement {
+  #retainSignal: AbortController | null = null
+
   get nowrap(): boolean {
     return this.hasAttribute('nowrap')
   }
@@ -59,8 +62,32 @@ export default class FocusGroupElement extends HTMLElement {
     const {direction, nowrap} = this
     if (event.type === 'focusin') {
       if (this.retain && event.target instanceof Element && event.target.matches(menuItemSelector)) {
+        this.#retainSignal?.abort()
+        const {signal} = (this.#retainSignal = new AbortController())
         for (const item of this.#items) {
           item.setAttribute('tabindex', item === event.target ? '0' : '-1')
+          const popover = event.target.closest<HTMLElement>('[popover]')
+          if (item === event.target && popover?.popover === 'auto' && popover.closest('focus-group') === this) {
+            popover.addEventListener(
+              'toggle',
+              (toggleEvent: Event) => {
+                if (!(toggleEvent.target instanceof Element)) return
+                if ((toggleEvent as ToggleEvent).newState === 'closed') {
+                  this.#retainSignal?.abort()
+                  item.setAttribute('tabindex', '-1')
+                  if (popover.id) {
+                    const invoker = this.querySelector(`[popovertarget="${popover.id}"]`)
+                    if (invoker) {
+                      invoker.setAttribute('tabindex', '0')
+                    } else {
+                      this.#items[0]?.setAttribute('tabindex', '0')
+                    }
+                  }
+                }
+              },
+              {signal}
+            )
+          }
         }
       }
     } else if (event instanceof KeyboardEvent) {
@@ -110,7 +137,7 @@ export default class FocusGroupElement extends HTMLElement {
         let el: HTMLElement | null = focusEl
         do {
           el = el.closest(`[popover]:not(:popover-open)`)
-          if (el?.popover === 'auto') {
+          if (el?.popover === 'auto' && !['ArrowRight', 'ArrowLeft'].includes(event.key)) {
             el.showPopover()
           }
           el = el?.parentElement || null

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

@@ -6,7 +6,7 @@ import './anchored_position';
 import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
-import './alpha/nav_list';
+import './beta/nav_list';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

data/app/components/primer/primer.js

@@ -6,7 +6,7 @@ import './anchored_position';
 import './focus_group';
 import './alpha/image_crop';
 import './alpha/modal_dialog';
-import './alpha/nav_list';
+import './beta/nav_list';
 import './alpha/segmented_control';
 import './alpha/toggle_switch';
 import './alpha/tool_tip';

data/app/components/primer/primer.ts

@@ -6,7 +6,7 @@ import './anchored_position'
 import './focus_group'
 import './alpha/image_crop'
 import './alpha/modal_dialog'
-import './alpha/nav_list'
+import './beta/nav_list'
 import './alpha/segmented_control'
 import './alpha/toggle_switch'
 import './alpha/tool_tip'

data/app/helpers/primer/form_helper.rb

@@ -19,5 +19,15 @@ module Primer
         &block
       )
     end
+
+    def inline_form(*args, &block)
+      Primer::Forms.inline_form(*args, &block)
+    end
+
+    def render_inline_form(*args, &block)
+      # rubocop:disable GitHub/RailsViewRenderLiteral
+      render(inline_form(*args, &block))
+      # rubocop:enable GitHub/RailsViewRenderLiteral
+    end
   end
 end

data/lib/primer/deprecations.yml

@@ -5,6 +5,26 @@
 # See 'docs/contributors/deprecations.md' for information on configuration options.
 
 deprecations:
+  - component: "Primer::Alpha::NavList::Divider"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Divider"
+
+  - component: "Primer::Alpha::NavList::Item"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Item"
+
+  - component: "Primer::Alpha::NavList::Heading"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Heading"
+
+  - component: "Primer::Alpha::NavList::Group"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList::Group"
+
+  - component: "Primer::Alpha::NavList"
+    autocorrect: true
+    replacement: "Primer::Beta::NavList"
+
   - component: "Primer::Alpha::AutoComplete"
     autocorrect: true
     replacement: "Primer::Beta::AutoComplete"

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

@@ -11,6 +11,9 @@
       <% end %>
     <% end %>
   </fieldset>
+  <div class="mt-2">
+    <%= render(ValidationMessage.new(input: @input)) %>
+  </div>
   <div class="mt-2">
     <%= render(Caption.new(input: @input)) %>
   </div>

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

@@ -5,7 +5,7 @@ module Primer
     module Dsl
       # :nodoc:
       class CheckBoxGroupInput < Input
-        attr_reader :label, :check_boxes
+        attr_reader :name, :label, :check_boxes
 
         def initialize(name: nil, label: nil, **system_arguments)
           @name = name
@@ -21,10 +21,6 @@ module Primer
           CheckBoxGroup.new(input: self)
         end
 
-        def name
-          nil
-        end
-
         def type
           :check_box_group
         end

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

@@ -26,6 +26,11 @@ module Primer
           yield(self) if block_given?
         end
 
+        # check boxes cannot be invalid, as both checked and unchecked are valid states
+        def valid?
+          true
+        end
+
         def to_component
           CheckBox.new(input: self)
         end

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

@@ -17,6 +17,11 @@ module Primer
           yield(self) if block_given?
         end
 
+        # radio buttons cannot be invalid, as both selected and unselected are valid states
+        def valid?
+          true
+        end
+
         def to_component
           RadioButton.new(input: self)
         end

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

@@ -9,10 +9,7 @@
       <% end %>
     <% end %>
     <%= content %>
-    <%= 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>
-      <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
-    <% end %>
+    <%= render(ValidationMessage.new(input: @input)) %>
     <%= render(Caption.new(input: @input)) %>
   <% end %>
 <% else %>

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

@@ -11,6 +11,9 @@
       <% end %>
     <% end %>
   </fieldset>
+  <div class="mt-2">
+    <%= render(ValidationMessage.new(input: @input)) %>
+  </div>
   <div class="mt-2">
     <%= render(Caption.new(input: @input)) %>
   </div>

data/lib/primer/forms/utils.rb

@@ -15,6 +15,8 @@ module Primer
       # conventions, so it should work ok. Zeitwerk also has this information but lacks a
       # public API to map constants to source files.
       def const_source_location(class_name)
+        return nil unless class_name
+
         # NOTE: underscore respects namespacing, i.e. will convert Foo::Bar to foo/bar.
         class_path = "#{class_name.underscore}.rb"
 

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

@@ -0,0 +1,4 @@
+<%= 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>
+  <%= content_tag(:span, @input.invalid? ? @input.validation_messages.first : "", **@input.validation_message_arguments) %>
+<% end %>