Mimic Op core JS based color hash function for consistency

The hash function is not consistently portable between JS/Ruby due to different "integer overflow handling (!?)".
JS based coloring establishes consistency while we have both primer legacy (angular) component rendering avatar fallback

Mimic Op core JS based color hash function for consistency

The hash function is not consistently portable between JS/Ruby due to different "integer overflow handling (!?)".
JS based coloring establishes consistency while we have both primer legacy (angular) component rendering avatar fallback

Author: akabiru

app/components/primer/beta/avatar.rb

@@ -62,19 +62,34 @@ def initialize(src: nil, alt: nil, size: DEFAULT_SIZE, shape: DEFAULT_SHAPE, hre
         @system_arguments[:classes] = class_names(
           system_arguments[:classes],
           "avatar",
-          "avatar-small" => size < SMALL_THRESHOLD,
-          "circle" => shape == DEFAULT_SHAPE,
+          "avatar-small" => @size < SMALL_THRESHOLD,
+          "circle" => @shape == DEFAULT_SHAPE,
           "lh-0" => href # Addresses an overflow issue with linked avatars
         )
       end
 
       def call
-        if @href
-          render(Primer::Beta::Link.new(href: @href, classes: @system_arguments[:classes])) do
-            render(Primer::BaseComponent.new(**@system_arguments.except(:classes))) { content }
+        avatar_element =
+          if @href
+            render(Primer::Beta::Link.new(href: @href, classes: @system_arguments[:classes])) do
+              render(Primer::BaseComponent.new(**@system_arguments.except(:classes))) { content }
+            end
+          else
+            render(Primer::BaseComponent.new(**@system_arguments)) { content }
           end
+
+        # Wrap the avatar in an <avatar-fallback> custom element if the source
+        # is an SVG data URI (for client-side color correction)
+        if @system_arguments[:src]&.start_with?("data:image/svg+xml")
+          render(Primer::BaseComponent.new(
+            tag: :"avatar-fallback",
+            data: {
+              unique_id: @unique_id,
+              alt_text: @alt
+            }
+          )) { avatar_element }
         else
-          render(Primer::BaseComponent.new(**@system_arguments)) { content }
+          avatar_element
         end
       end
 
@@ -129,6 +144,15 @@ def generate_avatar_color
         "hsl(#{value_hash(text)}, 50%, 30%)"
       end
 
+      # Mimics OP Core's string hash function to ensure consistent color generation
+      #
+      # Note: Due to differences in integer overflow handling between JavaScript and Ruby,
+      #  the generated hash values differ, hence the color correction in the TS component.
+      #
+      # @see AvatarFallbackElement#valueHash in app/components/primer/beta/avatar_fallback.ts
+      #
+      # @param value [String] The input string
+      # @return [Integer] A hash value between 0 and 359
       def value_hash(value)
         return 0 if value.blank?
 

app/components/primer/beta/avatar_fallback.ts

@@ -0,0 +1,53 @@
+import {attr, controller} from '@github/catalyst'
+
+@controller
+export class AvatarFallbackElement extends HTMLElement {
+  @attr uniqueId = ''
+  @attr altText = ''
+
+  connectedCallback() {
+    if (!this.uniqueId || !this.altText) return
+
+    const img = this.querySelector('img[src^="data:image/svg+xml"]')
+    if (!img) return
+
+    const text = `${this.uniqueId}${this.altText}`
+    const hue = this.valueHash(text)
+    const color = `hsl(${hue}, 50%, 30%)`
+
+    this.updateSvgColor(img as HTMLImageElement, color)
+  }
+
+  /*
+   * Mimics OP Core's string hash function to ensure consistent color generation
+   * @see https://github.com/opf/openproject/blob/1b6eb3f9e45c3bdb05ce49d2cbe92995b87b4df5/frontend/src/app/shared/components/colors/colors.service.ts#L19-L26
+   */
+  private valueHash(value: string): number {
+    let hash = 0
+    for (let i = 0; i < value.length; i++) {
+      hash = value.charCodeAt(i) + ((hash << 5) - hash)
+    }
+    return hash % 360
+  }
+
+  private updateSvgColor(img: HTMLImageElement, color: string) {
+    const dataUri = img.src
+    const base64 = dataUri.replace('data:image/svg+xml;base64,', '')
+    const svg = atob(base64)
+
+    const updatedSvg = svg.replace(/fill="hsl\([^"]+\)"/, `fill="${color}"`)
+
+    img.src = `data:image/svg+xml;base64,${btoa(updatedSvg)}`
+  }
+}
+
+declare global {
+  interface Window {
+    AvatarFallbackElement: typeof AvatarFallbackElement
+  }
+}
+
+if (!window.customElements.get('avatar-fallback')) {
+  window.AvatarFallbackElement = AvatarFallbackElement
+  window.customElements.define('avatar-fallback', AvatarFallbackElement)
+}

app/components/primer/primer.ts

@@ -17,6 +17,7 @@ import './alpha/toggle_switch'
 import './alpha/tool_tip'
 import './alpha/x_banner'
 import './beta/auto_complete/auto_complete'
+import './beta/avatar_fallback'
 import './beta/clipboard_copy'
 import './beta/relative_time'
 import './alpha/tab_container'

previews/primer/beta/avatar_preview.rb

@@ -99,7 +99,7 @@ def shape_square
       # @label Fallback default
       # @snapshot
       def fallback_default
-        render(Primer::Beta::Avatar.new(alt: "OpenProject Admin", unique_id: 1))
+        render(Primer::Beta::Avatar.new(alt: "OpenProject Admin", unique_id: 4))
       end
 
       # @label Fallback single name

test/components/beta/avatar_test.rb

@@ -251,6 +251,23 @@ def test_raises_when_both_src_and_alt_are_blank
     assert_includes(error.message, "`src` or `alt` is required")
   end
 
+  def test_fallback_wrapped_in_catalyst_controller
+    render_inline(Primer::Beta::Avatar.new(src: nil, alt: "Test User", unique_id: 123))
+
+    # Should be wrapped in avatar-fallback element with data attributes
+    assert_selector("avatar-fallback[data-unique-id='123'][data-alt-text='Test User']") do
+      assert_selector("img.avatar[src^='data:image/svg+xml']")
+    end
+  end
+
+  def test_real_image_not_wrapped_in_catalyst_controller
+    render_inline(Primer::Beta::Avatar.new(src: "https://example.com/avatar.png", alt: "Test"))
+
+    # Real images should NOT be wrapped
+    refute_selector("avatar-fallback")
+    assert_selector("img.avatar[src='https://example.com/avatar.png']")
+  end
+
   def test_status
     assert_component_state(Primer::Beta::Avatar, :beta)
   end