openproject-primer_view_components 0.79.0 → 0.80.0

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

@@ -1,7 +1,15 @@
 export declare class AvatarFallbackElement extends HTMLElement {
     uniqueId: string;
     altText: string;
+    fallbackSrc: string;
+    private img;
+    private boundErrorHandler?;
     connectedCallback(): void;
+    disconnectedCallback(): void;
+    private isImageBroken;
+    private handleImageError;
+    private applyColor;
     private valueHash;
     private updateSvgColor;
+    private isFallbackImage;
 }

data/app/components/primer/open_project/avatar_fallback.js

@@ -10,16 +10,50 @@ let AvatarFallbackElement = class AvatarFallbackElement extends HTMLElement {
         super(...arguments);
         this.uniqueId = '';
         this.altText = '';
+        this.fallbackSrc = '';
+        this.img = null;
     }
     connectedCallback() {
+        this.img = this.querySelector('img') ?? null;
+        if (!this.img)
+            return;
+        this.boundErrorHandler = () => this.handleImageError(this.img);
+        // Handle image load errors (404, network failure, etc.)
+        this.img.addEventListener('error', this.boundErrorHandler);
+        // Check if image already failed (error event fired before listener attached)
+        if (this.isImageBroken(this.img)) {
+            this.handleImageError(this.img);
+        }
+        else if (this.isFallbackImage(this.img)) {
+            this.applyColor(this.img);
+        }
+    }
+    disconnectedCallback() {
+        if (this.boundErrorHandler && this.img) {
+            this.img.removeEventListener('error', this.boundErrorHandler);
+        }
+        this.boundErrorHandler = undefined;
+        this.img = null;
+    }
+    isImageBroken(img) {
+        // Image is broken if loading completed but no actual image data loaded
+        // Skip check for data URIs (fallback SVGs) as they're always valid
+        return img.complete && img.naturalWidth === 0 && !img.src.startsWith('data:');
+    }
+    handleImageError(img) {
+        // Prevent infinite loop if fallback also fails
+        if (this.isFallbackImage(img))
+            return;
+        if (this.fallbackSrc) {
+            img.src = this.fallbackSrc;
+            this.applyColor(img);
+        }
+    }
+    applyColor(img) {
         // If either uniqueId or altText is missing, skip color customization so the SVG
         // keeps its default gray fill defined in the source and no color override is applied.
         if (!this.uniqueId || !this.altText)
             return;
-        const img = this.querySelector('img[src^="data:image/svg+xml"]');
-        if (!img)
-            return;
-        // Generate consistent color based on uniqueId and altText (hash must match OP Core)
         const text = `${this.uniqueId}${this.altText}`;
         const hue = this.valueHash(text);
         const color = `hsl(${hue}, 50%, 30%)`;
@@ -49,6 +83,9 @@ let AvatarFallbackElement = class AvatarFallbackElement extends HTMLElement {
             // to avoid breaking the component.
         }
     }
+    isFallbackImage(img) {
+        return img.src === this.fallbackSrc;
+    }
 };
 __decorate([
     attr
@@ -56,6 +93,9 @@ __decorate([
 __decorate([
     attr
 ], AvatarFallbackElement.prototype, "altText", void 0);
+__decorate([
+    attr
+], AvatarFallbackElement.prototype, "fallbackSrc", void 0);
 AvatarFallbackElement = __decorate([
     controller
 ], AvatarFallbackElement);

data/app/components/primer/open_project/avatar_fallback.ts

@@ -4,16 +4,57 @@ import {attr, controller} from '@github/catalyst'
 export class AvatarFallbackElement extends HTMLElement {
   @attr uniqueId = ''
   @attr altText = ''
+  @attr fallbackSrc = ''
+
+  private img: HTMLImageElement | null = null
+  private boundErrorHandler?: () => void
 
   connectedCallback() {
+    this.img = this.querySelector<HTMLImageElement>('img') ?? null
+    if (!this.img) return
+
+    this.boundErrorHandler = () => this.handleImageError(this.img!)
+
+    // Handle image load errors (404, network failure, etc.)
+    this.img.addEventListener('error', this.boundErrorHandler)
+
+    // Check if image already failed (error event fired before listener attached)
+    if (this.isImageBroken(this.img)) {
+      this.handleImageError(this.img)
+    } else if (this.isFallbackImage(this.img)) {
+      this.applyColor(this.img)
+    }
+  }
+
+  disconnectedCallback() {
+    if (this.boundErrorHandler && this.img) {
+      this.img.removeEventListener('error', this.boundErrorHandler)
+    }
+    this.boundErrorHandler = undefined
+    this.img = null
+  }
+
+  private isImageBroken(img: HTMLImageElement): boolean {
+    // Image is broken if loading completed but no actual image data loaded
+    // Skip check for data URIs (fallback SVGs) as they're always valid
+    return img.complete && img.naturalWidth === 0 && !img.src.startsWith('data:')
+  }
+
+  private handleImageError(img: HTMLImageElement) {
+    // Prevent infinite loop if fallback also fails
+    if (this.isFallbackImage(img)) return
+
+    if (this.fallbackSrc) {
+      img.src = this.fallbackSrc
+      this.applyColor(img)
+    }
+  }
+
+  private applyColor(img: HTMLImageElement) {
     // If either uniqueId or altText is missing, skip color customization so the SVG
     // keeps its default gray fill defined in the source and no color override is applied.
     if (!this.uniqueId || !this.altText) return
 
-    const img = this.querySelector<HTMLImageElement>('img[src^="data:image/svg+xml"]')
-    if (!img) return
-
-    // Generate consistent color based on uniqueId and altText (hash must match OP Core)
     const text = `${this.uniqueId}${this.altText}`
     const hue = this.valueHash(text)
     const color = `hsl(${hue}, 50%, 30%)`
@@ -46,4 +87,8 @@ export class AvatarFallbackElement extends HTMLElement {
       // to avoid breaking the component.
     }
   }
+
+  private isFallbackImage(img: HTMLImageElement): boolean {
+    return img.src === this.fallbackSrc
+  }
 }

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

@@ -21,7 +21,7 @@ module Primer
       #   - https://github.com/primer/css/blob/main/src/support/variables/typography.scss
       FONT_STACK = "-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'"
 
-      # @param src [String] The source url of the avatar image. When nil, renders a fallback with initials.
+      # @param src [String] The source url of the avatar image. When nil or a broken URL, it renders a fallback with initials.
       # @param alt [String] Alt text for the avatar. Used for accessibility and to generate initials when src is nil.
       # @param size [Integer] <%= one_of(Primer::Beta::Avatar::SIZE_OPTIONS) %>
       # @param shape [Symbol] Shape of the avatar. <%= one_of(Primer::Beta::Avatar::SHAPE_OPTIONS) %>
@@ -32,20 +32,20 @@ module Primer
         require_src_or_alt_arguments(src, alt)
 
         @unique_id = unique_id
-        @use_fallback = src.blank?
-        final_src = @use_fallback ? generate_fallback_svg(alt, size) : src
+        @fallback_svg = generate_fallback_svg(alt, size)
+        final_src = src.blank? ? @fallback_svg : src
 
         super(src: final_src, alt: alt, size: size, shape: shape, href: href, **system_arguments)
       end
 
       def call
         render(
-          Primer::ConditionalWrapper.new(
-            condition: @use_fallback,
+          Primer::BaseComponent.new(
             tag: :"avatar-fallback",
             data: {
               unique_id: @unique_id,
-              alt_text: @system_arguments[:alt]
+              alt_text: @system_arguments[:alt],
+              fallback_src: @fallback_svg
             }
           )
         ) { super }

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

@@ -0,0 +1,8 @@
+<% unless legend? %>
+  <% with_legend { @legend_text } # set the default %>
+<% end %>
+
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= legend %>
+  <%= content %>
+<% end %>

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

@@ -0,0 +1,66 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A low-level component for building fieldsets with unopinionated styling.
+    #
+    # This component is not designed to be used directly, but rather a primitive for
+    # authors of other components and form controls.
+    class Fieldset < Primer::Component
+      status :open_project
+
+      attr_reader :legend_text
+
+      renders_one :legend, ->(**system_arguments) {
+        LegendComponent.new(visually_hide_legend: @visually_hide_legend, **system_arguments)
+      }
+
+      # @param legend_text [String] A legend should be short and concise. The String will also be read by assistive technology.
+      # @param visually_hide_legend [Boolean] Controls if the legend is visible. If `true`, screen reader only text will be added.
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(legend_text: nil, visually_hide_legend: false, **system_arguments) # rubocop:disable Lint/MissingSuper
+        @legend_text = legend_text
+        @visually_hide_legend = visually_hide_legend
+        @system_arguments = deny_tag_argument(**system_arguments)
+        @system_arguments[:tag] = :fieldset
+
+        deny_aria_key(
+          :label,
+          "instead of `aria-label`, include `legend_text` and set `visually_hide_legend` to `true` on the component initializer.",
+          **@system_arguments
+        )
+      end
+
+      def render?
+        content? && (legend_text.present? || legend?)
+      end
+
+      class LegendComponent < Primer::Component
+        status :open_project
+
+        attr_reader :text
+
+        def initialize(text: nil, visually_hide_legend: false, **system_arguments) # rubocop:disable Lint/MissingSuper
+          @text = text
+
+          @system_arguments = deny_tag_argument(**system_arguments)
+          @system_arguments[:tag] = :legend
+          @system_arguments[:classes] = class_names(
+            @system_arguments[:classes],
+            { "sr-only" => visually_hide_legend }
+          )
+        end
+
+        def call
+          render(Primer::BaseComponent.new(**@system_arguments)) { legend_content }
+        end
+
+        private
+
+        def legend_content
+          @legend_content ||= content || text
+        end
+      end
+    end
+  end
+end

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

@@ -0,0 +1 @@
+.InlineMessage{align-items:start;color:var(--inline-message-fgColor);column-gap:.5rem;display:grid;font-size:var(--inline-message-fontSize);grid-template-columns:auto 1fr;line-height:var(--inline-message-lineHeight)}.InlineMessage[data-size=small]{--inline-message-fontSize:var(--text-body-size-small);--inline-message-lineHeight:var(--text-body-lineHeight-small,1.6666)}.InlineMessage[data-size=medium]{--inline-message-fontSize:var(--text-body-size-medium);--inline-message-lineHeight:var(--text-body-lineHeight-medium,1.4285)}.InlineMessage[data-variant=warning]{--inline-message-fgColor:var(--fgColor-attention)}.InlineMessage[data-variant=critical]{--inline-message-fgColor:var(--fgColor-danger)}.InlineMessage[data-variant=success]{--inline-message-fgColor:var(--fgColor-success)}.InlineMessage[data-variant=unavailable]{--inline-message-fgColor:var(--fgColor-muted)}.InlineMessageIcon{min-height:calc(var(--inline-message-lineHeight)*var(--inline-message-fontSize))}

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

@@ -0,0 +1,13 @@
+{
+  "name": "open_project/inline_message",
+  "selectors": [
+    ".InlineMessage",
+    ".InlineMessage[data-size=small]",
+    ".InlineMessage[data-size=medium]",
+    ".InlineMessage[data-variant=warning]",
+    ".InlineMessage[data-variant=critical]",
+    ".InlineMessage[data-variant=success]",
+    ".InlineMessage[data-variant=unavailable]",
+    ".InlineMessageIcon"
+  ]
+}

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

@@ -0,0 +1 @@
+{"version":3,"sources":["inline_message.pcss"],"names":[],"mappings":"AAAA,eAUE,iBAAkB,CAHlB,mCAAoC,CACpC,gBAAkB,CAPlB,YAAa,CAEb,wCAAyC,CAMzC,8BAA+B,CAJ/B,4CAgCF,CAzBE,gCACE,qDAAsD,CACtD,oEACF,CAEA,iCACE,sDAAuD,CACvD,qEACF,CAEA,qCACE,iDACF,CAEA,sCACE,8CACF,CAEA,qCACE,+CACF,CAEA,yCACE,6CACF,CAGF,mBACE,gFACF","file":"inline_message.css","sourcesContent":[".InlineMessage {\n  display: grid;\n  /* stylelint-disable-next-line primer/typography */\n  font-size: var(--inline-message-fontSize);\n  /* stylelint-disable-next-line primer/typography */\n  line-height: var(--inline-message-lineHeight);\n  /* stylelint-disable-next-line primer/colors */\n  color: var(--inline-message-fgColor);\n  column-gap: 0.5rem;\n  grid-template-columns: auto 1fr;\n  align-items: start;\n\n  &[data-size='small'] {\n    --inline-message-fontSize: var(--text-body-size-small);\n    --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);\n  }\n\n  &[data-size='medium'] {\n    --inline-message-fontSize: var(--text-body-size-medium);\n    --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);\n  }\n\n  &[data-variant='warning'] {\n    --inline-message-fgColor: var(--fgColor-attention);\n  }\n\n  &[data-variant='critical'] {\n    --inline-message-fgColor: var(--fgColor-danger);\n  }\n\n  &[data-variant='success'] {\n    --inline-message-fgColor: var(--fgColor-success);\n  }\n\n  &[data-variant='unavailable'] {\n    --inline-message-fgColor: var(--fgColor-muted);\n  }\n}\n\n.InlineMessageIcon {\n  min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));\n}"]}

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

@@ -0,0 +1,4 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= render(Primer::Beta::Octicon.new(**@icon_arguments)) %>
+  <%= content %>
+<% end %>

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

@@ -0,0 +1,42 @@
+.InlineMessage {
+  display: grid;
+  /* stylelint-disable-next-line primer/typography */
+  font-size: var(--inline-message-fontSize);
+  /* stylelint-disable-next-line primer/typography */
+  line-height: var(--inline-message-lineHeight);
+  /* stylelint-disable-next-line primer/colors */
+  color: var(--inline-message-fgColor);
+  column-gap: 0.5rem;
+  grid-template-columns: auto 1fr;
+  align-items: start;
+
+  &[data-size='small'] {
+    --inline-message-fontSize: var(--text-body-size-small);
+    --inline-message-lineHeight: var(--text-body-lineHeight-small, 1.6666);
+  }
+
+  &[data-size='medium'] {
+    --inline-message-fontSize: var(--text-body-size-medium);
+    --inline-message-lineHeight: var(--text-body-lineHeight-medium, 1.4285);
+  }
+
+  &[data-variant='warning'] {
+    --inline-message-fgColor: var(--fgColor-attention);
+  }
+
+  &[data-variant='critical'] {
+    --inline-message-fgColor: var(--fgColor-danger);
+  }
+
+  &[data-variant='success'] {
+    --inline-message-fgColor: var(--fgColor-success);
+  }
+
+  &[data-variant='unavailable'] {
+    --inline-message-fgColor: var(--fgColor-muted);
+  }
+}
+
+.InlineMessageIcon {
+  min-height: calc(var(--inline-message-lineHeight) * var(--inline-message-fontSize));
+}

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

@@ -0,0 +1,65 @@
+# frozen_string_literal: true
+
+module Primer
+  module OpenProject
+    # A simple component to render warning text.
+    #
+    # The warning text is rendered in the "attention" Primer color and
+    # uses a leading alert Octicon for additional emphasis. This component
+    # is designed to be used "inline", e.g. table cells, and in places
+    # where a Banner component might be overkill.
+    class InlineMessage < Primer::Component
+      status :open_project
+
+      SCHEME_ICON_MAPPINGS = {
+        warning: :alert,
+        critical: :alert,
+        success: :"check-circle",
+        unavailable: :alert
+      }.freeze
+      private_constant :SCHEME_ICON_MAPPINGS
+      SCHEME_OPTIONS = SCHEME_ICON_MAPPINGS.keys.freeze
+
+      SCHEME_SMALL_ICON_MAPPINGS = {
+        warning: :"alert-fill",
+        critical: :"alert-fill",
+        success: :"check-circle-fill",
+        unavailable: :"alert-fill"
+      }.freeze
+      private_constant :SCHEME_SMALL_ICON_MAPPINGS
+      DEFAULT_SIZE = :medium
+      SIZE_OPTIONS = [:small, DEFAULT_SIZE].freeze
+
+      # @param scheme [Symbol] <%= one_of(Primer::OpenProject::InlineMessage::SCHEME_OPTIONS) %>
+      # @param size [Symbol] <%= one_of(Primer::OpenProject::InlineMessage::SIZE_OPTIONS) %>
+      # @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
+      def initialize(scheme:, size: DEFAULT_SIZE, **system_arguments) # rubocop:disable Lint/MissingSuper
+        resolved_scheme = fetch_or_fallback(SCHEME_OPTIONS, scheme)
+        resolved_size   = fetch_or_fallback(SIZE_OPTIONS, size, DEFAULT_SIZE)
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] ||= :div
+        @system_arguments[:classes] = class_names(
+          @system_arguments[:classes],
+          "InlineMessage"
+        )
+        @system_arguments[:data] = merge_data(
+          @system_arguments,
+          { data: { size: resolved_size, variant: resolved_scheme } }
+        )
+
+        @icon_arguments = { classes: "InlineMessageIcon" }
+        if resolved_size == :small
+          @icon_arguments[:icon] = SCHEME_SMALL_ICON_MAPPINGS[resolved_scheme]
+          @icon_arguments[:size] = :xsmall
+        else
+          @icon_arguments[:icon] = SCHEME_ICON_MAPPINGS[resolved_scheme]
+        end
+      end
+
+      def render?
+        content.present?
+      end
+    end
+  end
+end

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

@@ -25,6 +25,8 @@ module Primer
       DEFAULT_PARENT_LINK_DISPLAY = [:block, :none].freeze
       BREADCRUMB_TRUNCATE_AT = 200
 
+      DEFAULT_BUTTON_ACTION_SIZE = :medium
+
       STATE_DEFAULT = :show
       STATE_EDIT = :edit
       STATE_OPTIONS = [STATE_DEFAULT, STATE_EDIT].freeze
@@ -68,6 +70,7 @@ module Primer
           system_arguments[:icon] = icon
           system_arguments[:"aria-label"] ||= label
           system_arguments = set_action_arguments(system_arguments, scheme: scheme)
+          system_arguments = enforce_consistent_button_size!(system_arguments)
 
           component = Primer::Beta::IconButton
           create_mobile_alternatives(component, mobile_icon, label, scheme, **system_arguments, &block)
@@ -78,6 +81,7 @@ module Primer
           deny_tag_argument(**system_arguments)
 
           system_arguments = set_action_arguments(system_arguments, scheme: scheme)
+          system_arguments = enforce_consistent_button_size!(system_arguments)
 
           component = Primer::Beta::Button
           create_mobile_alternatives(component, mobile_icon, mobile_label, scheme, **system_arguments, &block)
@@ -88,6 +92,7 @@ module Primer
           deny_tag_argument(**system_arguments)
 
           system_arguments = set_action_arguments(system_arguments, scheme: DEFAULT_ACTION_SCHEME)
+          system_arguments = enforce_consistent_button_size!(system_arguments)
 
           component = Primer::OpenProject::ZenModeButton
           create_mobile_alternatives(component, mobile_icon, mobile_label, DEFAULT_ACTION_SCHEME, **system_arguments, &block)
@@ -120,6 +125,7 @@ module Primer
 
             system_arguments[:button_arguments] ||= {}
             system_arguments[:button_arguments] = set_action_arguments(system_arguments[:button_arguments])
+            system_arguments[:button_arguments] = enforce_consistent_button_size!(system_arguments[:button_arguments])
 
             # Add the options individually to the mobile menu in the template
             @desktop_menu_block = block
@@ -138,6 +144,7 @@ module Primer
             system_arguments[:button_arguments] ||= {}
             system_arguments[:button_arguments][:id] = "dialog-show-#{system_arguments[:dialog_arguments][:id]}"
             system_arguments[:button_arguments] = set_action_arguments(system_arguments[:button_arguments])
+            system_arguments[:button_arguments] = enforce_consistent_button_size!(system_arguments[:button_arguments])
 
             component = Primer::OpenProject::PageHeader::Dialog
             create_mobile_alternatives(component, mobile_icon, mobile_label, :default, **system_arguments, &block)
@@ -293,7 +300,6 @@ module Primer
       def set_action_arguments(system_arguments, scheme: nil)
         system_arguments[:ml] ||= 2
         system_arguments[:display] = %i[none flex]
-        system_arguments[:size] = :medium
         system_arguments[:scheme] = scheme unless scheme.nil?
         system_arguments[:classes] = class_names(
           system_arguments[:classes],
@@ -304,6 +310,17 @@ module Primer
         system_arguments
       end
 
+      def enforce_consistent_button_size!(system_arguments)
+        size = system_arguments.fetch(:size, DEFAULT_BUTTON_ACTION_SIZE)
+        @page_header_button_action_size ||= size
+        unless size == @page_header_button_action_size
+          raise ArgumentError,
+                "PageHeader button actions must all use the same size. " \
+                  "Set the same `size:` for every button-like action (or omit it to use #{DEFAULT_BUTTON_ACTION_SIZE.inspect} everywhere)."
+        end
+        system_arguments.merge(size: @page_header_button_action_size)
+      end
+
       def create_mobile_alternatives(component, mobile_icon, mobile_label, scheme, **system_arguments, &block)
         # All actions should collapse into a single actionMenu on mobile
         add_option_to_mobile_menu(system_arguments, mobile_icon, mobile_label, scheme)

data/app/components/primer/primer.pcss

@@ -50,6 +50,7 @@
 @import "./open_project/drag_handle.pcss";
 @import "./open_project/border_grid.pcss";
 @import "./open_project/input_group.pcss";
+@import "./open_project/inline_message.pcss";
 @import "./open_project/sub_header.pcss";
 @import "./open_project/side_panel/section.pcss";
 @import "./open_project/border_box/collapsible_header.pcss";

data/app/lib/primer/forms/dsl/fieldset_group_input.rb

@@ -0,0 +1,35 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    module Dsl
+      # :nodoc:
+      class FieldsetGroupInput < Input
+        include Primer::Forms::Dsl::InputMethods
+        include InputMethods
+
+        attr_reader :builder, :form, :system_arguments
+
+        def initialize(builder:, form:, **system_arguments)
+          @builder = builder
+          @form = form
+          @system_arguments = system_arguments
+
+          yield(self) if block_given?
+        end
+
+        def to_component
+          FieldsetGroup.new(inputs: inputs, builder: builder, form: form, **@system_arguments)
+        end
+
+        def type
+          :group
+        end
+
+        def input?
+          true
+        end
+      end
+    end
+  end
+end

data/app/lib/primer/forms/dsl/form_object.rb

@@ -19,6 +19,10 @@ module Primer
         def group(**options, &block)
           add_input InputGroup.new(builder: @builder, form: @form, **options, &block)
         end
+
+        def fieldset_group(**options, &block)
+          add_input FieldsetGroupInput.new(builder: @builder, form: @form, **options, &block)
+        end
       end
     end
   end

data/app/lib/primer/forms/fieldset_group.html.erb

@@ -0,0 +1,10 @@
+<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
+  <%= render(Primer::OpenProject::Fieldset.new(**@fieldset_arguments)) do %>
+    <%=
+      render(Primer::Beta::Subhead.new) do |component|
+        component.with_heading(**@heading_arguments).with_content(@title)
+      end
+    %>
+    <%= render(Primer::Forms::Group.new(**@group_arguments)) %>
+  <% end %>
+<% end %>

data/app/lib/primer/forms/fieldset_group.rb

@@ -0,0 +1,54 @@
+# frozen_string_literal: true
+
+module Primer
+  module Forms
+    # :nodoc:
+    class FieldsetGroup < BaseComponent
+      ##
+      # @param title [String] The title displayed as the heading for the fieldset
+      # @param inputs [Array<Primer::Forms::Dsl::Input>] Array of form inputs to be grouped
+      # @param builder [ActionView::Helpers::FormBuilder] The form builder instance
+      # @param form [Primer::Forms::BaseForm] The form object
+      # @param layout [Symbol] Layout style for the input group (default: :default_layout)
+      # @param heading_arguments [Hash] Arguments passed to the heading component
+      # @option heading_arguments [String] :id The ID for the heading element
+      # @option heading_arguments [Symbol] :tag The HTML tag for the heading (default: :h3)
+      # @option heading_arguments [Symbol] :size The size of the heading (default: :medium)
+      # @param group_arguments [Hash] Arguments passed to the input group component
+      # @param system_arguments [Hash] Additional system arguments passed to the section wrapper
+      def initialize( # rubocop:disable Metrics/AbcSize
+        title:,
+        inputs:,
+        builder:,
+        form:,
+        layout: Primer::Forms::Group::DEFAULT_LAYOUT,
+        heading_arguments: {},
+        group_arguments: {},
+        **system_arguments
+      )
+        super()
+
+        @title = title
+
+        @heading_arguments = heading_arguments
+        @heading_arguments[:id] ||= "subhead-#{SecureRandom.uuid}"
+        @heading_arguments[:tag] ||= :h3
+        @heading_arguments[:size] ||= :medium
+
+        @fieldset_arguments = {
+          legend_text: @title,
+          visually_hide_legend: true,
+          aria: { labelledby: @heading_arguments[:id] }
+        }
+        @group_arguments = group_arguments.merge(inputs:, builder:, form:, layout:)
+
+        @system_arguments = system_arguments
+        @system_arguments[:tag] = :section
+        @system_arguments[:mb] ||= 4
+        @system_arguments[:aria] ||= {}
+        @system_arguments[:aria][:labelledby] = @heading_arguments[:id]
+        @system_arguments[:hidden] = :none if inputs.all?(&:hidden?)
+      end
+    end
+  end
+end

data/lib/primer/view_components/version.rb

@@ -5,7 +5,7 @@ module Primer
   module ViewComponents
     module VERSION
       MAJOR = 0
-      MINOR = 79
+      MINOR = 80
       PATCH = 0
 
       STRING = [MAJOR, MINOR, PATCH].join(".")

data/previews/primer/forms_preview/fieldset_group_form.html.erb

@@ -0,0 +1,40 @@
+<%
+  fieldset_group_form = Class.new(ApplicationForm) do
+    form do |f|
+      f.fieldset_group(
+        title: "Delivery preferences",
+        caption: "These settings affect how we contact you"
+      ) do |g|
+        g.text_field(
+          name: :ultimate_answer,
+          label: "Ultimate answer",
+          required: true,
+          caption: "The answer to life, the universe, and everything"
+        )
+
+        g.select_list(
+          name: :window,
+          label: "Delivery window",
+          include_blank: true
+        ) do |list|
+          list.option(label: "Morning", value: "morning")
+          list.option(label: "Afternoon", value: "afternoon")
+          list.option(label: "Evening", value: "evening")
+        end
+
+        g.text_field(
+          name: :hours,
+          label: "Hours",
+          type: :number,
+          required: true,
+          trailing_visual: { text: { text: "min" } },
+          input_width: :xsmall
+        )
+      end
+    end
+  end
+%>
+
+<%= primer_form_with(url: "/foo") do |f| %>
+  <%= render(fieldset_group_form.new(f)) %>
+<% end %>

data/previews/primer/forms_preview.rb

@@ -11,6 +11,9 @@ module Primer
 
     def custom_width_fields_form; end
 
+    # @snapshot
+    def fieldset_group_form; end
+
     # @snapshot
     def text_field_and_checkbox_form; end