openproject-primer_view_components 0.79.1 → 0.80.1

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

@@ -1,15 +1,28 @@
+/**
+ * AvatarFallbackElement implements "fallback first" loading pattern:
+ * 1. Fallback SVG is rendered immediately as <img> src
+ * 2. Real avatar URL is test-loaded in background using new Image()
+ * 3. On success, swaps to real image; on failure, fallback stays visible
+ *
+ * This approach prevents flicker by never showing a broken image state.
+ * Inspired by OpenProject's Angular PrincipalRendererService.
+ *
+ * Note: We read attributes directly via getAttribute() instead of using @attr
+ * due to a Catalyst bug where @attr accessors aren't properly initialized
+ * when elements have pre-existing attribute values.
+ */
 export declare class AvatarFallbackElement extends HTMLElement {
-    uniqueId: string;
-    altText: string;
-    fallbackSrc: string;
     private img;
-    private boundErrorHandler?;
+    private testImage;
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private isImageBroken;
-    private handleImageError;
+    /**
+     * Test-loads the real avatar URL in background.
+     * On success, swaps the visible img to the real URL.
+     * On failure, does nothing - fallback stays visible.
+     */
+    private testLoadImage;
     private applyColor;
     private valueHash;
     private updateSvgColor;
-    private isFallbackImage;
 }

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

@@ -4,57 +4,70 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
     else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
     return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-import { attr, controller } from '@github/catalyst';
+import { controller } from '@github/catalyst';
+/**
+ * AvatarFallbackElement implements "fallback first" loading pattern:
+ * 1. Fallback SVG is rendered immediately as <img> src
+ * 2. Real avatar URL is test-loaded in background using new Image()
+ * 3. On success, swaps to real image; on failure, fallback stays visible
+ *
+ * This approach prevents flicker by never showing a broken image state.
+ * Inspired by OpenProject's Angular PrincipalRendererService.
+ *
+ * Note: We read attributes directly via getAttribute() instead of using @attr
+ * due to a Catalyst bug where @attr accessors aren't properly initialized
+ * when elements have pre-existing attribute values.
+ */
 let AvatarFallbackElement = class AvatarFallbackElement extends HTMLElement {
     constructor() {
         super(...arguments);
-        this.uniqueId = '';
-        this.altText = '';
-        this.fallbackSrc = '';
         this.img = null;
+        this.testImage = 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);
+        const uniqueId = this.getAttribute('data-unique-id') || '';
+        const altText = this.getAttribute('data-alt-text') || '';
+        const avatarSrc = this.getAttribute('data-avatar-src') || '';
+        // Apply hashed color to fallback SVG immediately
+        this.applyColor(this.img, uniqueId, altText);
+        // Test-load real avatar URL in background
+        if (avatarSrc) {
+            this.testLoadImage(avatarSrc);
         }
     }
     disconnectedCallback() {
-        if (this.boundErrorHandler && this.img) {
-            this.img.removeEventListener('error', this.boundErrorHandler);
+        // Clean up test image and its event handler to prevent memory leaks
+        if (this.testImage) {
+            this.testImage.onload = null;
+            this.testImage = null;
         }
-        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);
-        }
+    /**
+     * Test-loads the real avatar URL in background.
+     * On success, swaps the visible img to the real URL.
+     * On failure, does nothing - fallback stays visible.
+     */
+    testLoadImage(url) {
+        this.testImage = new Image();
+        this.testImage.onload = () => {
+            // Success - swap to real image
+            if (this.img) {
+                this.img.src = url;
+            }
+        };
+        // On error: do nothing, fallback stays visible (no flicker)
+        this.testImage.src = url;
     }
-    applyColor(img) {
+    applyColor(img, uniqueId, altText) {
         // 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)
+        if (!uniqueId || !altText)
             return;
-        const text = `${this.uniqueId}${this.altText}`;
+        const text = `${uniqueId}${altText}`;
         const hue = this.valueHash(text);
         const color = `hsl(${hue}, 50%, 30%)`;
         this.updateSvgColor(img, color);
@@ -72,6 +85,8 @@ let AvatarFallbackElement = class AvatarFallbackElement extends HTMLElement {
     }
     updateSvgColor(img, color) {
         const dataUri = img.src;
+        if (!dataUri.startsWith('data:image/svg+xml;base64,'))
+            return;
         const base64 = dataUri.replace('data:image/svg+xml;base64,', '');
         try {
             const svg = atob(base64);
@@ -83,19 +98,7 @@ let AvatarFallbackElement = class AvatarFallbackElement extends HTMLElement {
             // to avoid breaking the component.
         }
     }
-    isFallbackImage(img) {
-        return img.src === this.fallbackSrc;
-    }
 };
-__decorate([
-    attr
-], AvatarFallbackElement.prototype, "uniqueId", void 0);
-__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

@@ -1,61 +1,74 @@
-import {attr, controller} from '@github/catalyst'
-
+import {controller} from '@github/catalyst'
+
+/**
+ * AvatarFallbackElement implements "fallback first" loading pattern:
+ * 1. Fallback SVG is rendered immediately as <img> src
+ * 2. Real avatar URL is test-loaded in background using new Image()
+ * 3. On success, swaps to real image; on failure, fallback stays visible
+ *
+ * This approach prevents flicker by never showing a broken image state.
+ * Inspired by OpenProject's Angular PrincipalRendererService.
+ *
+ * Note: We read attributes directly via getAttribute() instead of using @attr
+ * due to a Catalyst bug where @attr accessors aren't properly initialized
+ * when elements have pre-existing attribute values.
+ */
 @controller
 export class AvatarFallbackElement extends HTMLElement {
-  @attr uniqueId = ''
-  @attr altText = ''
-  @attr fallbackSrc = ''
-
   private img: HTMLImageElement | null = null
-  private boundErrorHandler?: () => void
+  private testImage: HTMLImageElement | null = null
 
   connectedCallback() {
     this.img = this.querySelector<HTMLImageElement>('img') ?? null
     if (!this.img) return
 
-    this.boundErrorHandler = () => this.handleImageError(this.img!)
+    const uniqueId = this.getAttribute('data-unique-id') || ''
+    const altText = this.getAttribute('data-alt-text') || ''
+    const avatarSrc = this.getAttribute('data-avatar-src') || ''
 
-    // Handle image load errors (404, network failure, etc.)
-    this.img.addEventListener('error', this.boundErrorHandler)
+    // Apply hashed color to fallback SVG immediately
+    this.applyColor(this.img, uniqueId, altText)
 
-    // 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)
+    // Test-load real avatar URL in background
+    if (avatarSrc) {
+      this.testLoadImage(avatarSrc)
     }
   }
 
   disconnectedCallback() {
-    if (this.boundErrorHandler && this.img) {
-      this.img.removeEventListener('error', this.boundErrorHandler)
+    // Clean up test image and its event handler to prevent memory leaks
+    if (this.testImage) {
+      this.testImage.onload = null
+      this.testImage = null
     }
-    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)
+  /**
+   * Test-loads the real avatar URL in background.
+   * On success, swaps the visible img to the real URL.
+   * On failure, does nothing - fallback stays visible.
+   */
+  private testLoadImage(url: string) {
+    this.testImage = new Image()
+
+    this.testImage.onload = () => {
+      // Success - swap to real image
+      if (this.img) {
+        this.img.src = url
+      }
     }
+
+    // On error: do nothing, fallback stays visible (no flicker)
+    this.testImage.src = url
   }
 
-  private applyColor(img: HTMLImageElement) {
+  private applyColor(img: HTMLImageElement, uniqueId: string, altText: string) {
     // 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
+    if (!uniqueId || !altText) return
 
-    const text = `${this.uniqueId}${this.altText}`
+    const text = `${uniqueId}${altText}`
     const hue = this.valueHash(text)
     const color = `hsl(${hue}, 50%, 30%)`
 
@@ -76,6 +89,8 @@ export class AvatarFallbackElement extends HTMLElement {
 
   private updateSvgColor(img: HTMLImageElement, color: string) {
     const dataUri = img.src
+    if (!dataUri.startsWith('data:image/svg+xml;base64,')) return
+
     const base64 = dataUri.replace('data:image/svg+xml;base64,', '')
 
     try {
@@ -87,8 +102,4 @@ 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

@@ -5,14 +5,12 @@ module Primer
     # OpenProject-specific Avatar component that extends Primer::Beta::Avatar
     # to support fallback rendering with initials when no image source is provided.
     #
-    # When `src` is nil, this component renders an SVG with initials extracted from
-    # the alt text. The AvatarFallbackElement web component then enhances it client-side
-    # by applying a consistent background color based on the user's unique_id (using the
-    # same hash function as OP Core for consistency).
+    # Uses a "fallback first" pattern for flicker-free loading:
+    # 1. Always renders fallback SVG as initial <img> src (visible immediately)
+    # 2. Client-side JS test-loads the real URL in background
+    # 3. On success, swaps to real image; on failure, fallback stays visible
     #
-    # This component follows the "extension over mutation" pattern - it extends
-    # Primer::Beta::Avatar without modifying its interface, ensuring compatibility
-    # with upstream changes.
+    # This approach is inspired by OpenProject's Angular PrincipalRendererService.
     class AvatarWithFallback < Primer::Beta::Avatar
       status :open_project
 
@@ -21,8 +19,8 @@ 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 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 src [String] The source URL of the avatar image. When provided, JavaScript will test-load it in the background and swap to it on success. When nil or blank, only the fallback SVG is displayed.
+      # @param alt [String] Alt text for the avatar. Used for accessibility and to generate initials for the fallback SVG.
       # @param size [Integer] <%= one_of(Primer::Beta::Avatar::SIZE_OPTIONS) %>
       # @param shape [Symbol] Shape of the avatar. <%= one_of(Primer::Beta::Avatar::SHAPE_OPTIONS) %>
       # @param href [String] The URL to link to. If used, component will be wrapped by an `<a>` tag.
@@ -32,10 +30,11 @@ module Primer
         require_src_or_alt_arguments(src, alt)
 
         @unique_id = unique_id
+        @avatar_src = src.presence
         @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)
+        # Always render fallback first - JS will swap to real image on successful load
+        super(src: @fallback_svg, alt: alt, size: size, shape: shape, href: href, **system_arguments)
       end
 
       def call
@@ -45,7 +44,7 @@ module Primer
             data: {
               unique_id: @unique_id,
               alt_text: @system_arguments[:alt],
-              fallback_src: @fallback_svg
+              avatar_src: @avatar_src
             }
           )
         ) { 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";