Class: Primer::OpenProject::AvatarWithFallback

Inherits:
Beta::Avatar show all
Defined in:
app/components/primer/open_project/avatar_with_fallback.rb

Overview

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).

This component follows the “extension over mutation” pattern - it extends Primer::Beta::Avatar without modifying its interface, ensuring compatibility with upstream changes.

Constant Summary collapse

FONT_STACK =

See Also:

  • https://primer.style/foundations/typography/ - https://github.com/primer/css/blob/main/src/support/variables/typography.scss
"-apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'"

Constants inherited from Beta::Avatar

Beta::Avatar::DEFAULT_SHAPE, Beta::Avatar::DEFAULT_SIZE, Beta::Avatar::SHAPE_OPTIONS, Beta::Avatar::SIZE_OPTIONS, Beta::Avatar::SMALL_THRESHOLD

Constants inherited from Component

Component::INVALID_ARIA_LABEL_TAGS

Constants included from Status::Dsl

Status::Dsl::STATUSES

Constants included from ViewHelper

ViewHelper::HELPERS

Constants included from TestSelectorHelper

TestSelectorHelper::TEST_SELECTOR_TAG

Constants included from FetchOrFallbackHelper

FetchOrFallbackHelper::InvalidValueError

Constants included from AttributesHelper

AttributesHelper::PLURAL_ARIA_ATTRIBUTES, AttributesHelper::PLURAL_DATA_ATTRIBUTES

Instance Method Summary collapse

Methods inherited from Component

deprecated?, generate_id

Methods included from JoinStyleArgumentsHelper

#join_style_arguments

Methods included from TestSelectorHelper

#add_test_selector

Methods included from FetchOrFallbackHelper

#fetch_or_fallback, #fetch_or_fallback_boolean, #silence_deprecations?

Methods included from ClassNameHelper

#class_names

Methods included from AttributesHelper

#aria, #data, #extract_data, #merge_aria, #merge_data, #merge_prefixed_attribute_hashes

Methods included from ExperimentalSlotHelpers

included

Methods included from ExperimentalRenderHelpers

included

Constructor Details

#initialize(src: nil, alt: nil, size: DEFAULT_SIZE, shape: DEFAULT_SHAPE, href: nil, unique_id: nil, **system_arguments) ⇒ AvatarWithFallback

Returns a new instance of AvatarWithFallback.

Parameters:

  • src (String) (defaults to: nil) —

    The source url of the avatar image. When nil or a broken URL, it renders a fallback with initials.

  • alt (String) (defaults to: nil) —

    Alt text for the avatar. Used for accessibility and to generate initials when src is nil.

  • size (Integer) (defaults to: DEFAULT_SIZE) —

    <%= one_of(Primer::Beta::Avatar::SIZE_OPTIONS) %>

  • shape (Symbol) (defaults to: DEFAULT_SHAPE) —

    Shape of the avatar. <%= one_of(Primer::Beta::Avatar::SHAPE_OPTIONS) %>

  • href (String) (defaults to: nil) —

    The URL to link to. If used, component will be wrapped by an ‘<a>` tag.

  • unique_id (String, Integer) (defaults to: nil) —

    Unique identifier for generating consistent avatar colors across renders.

  • system_arguments (Hash) —

    <%= link_to_system_arguments_docs %>



31
32
33
34
35
36
37
38
39
 
# File 'app/components/primer/open_project/avatar_with_fallback.rb', line 31

def initialize(src: nil, alt: nil, size: DEFAULT_SIZE, shape: DEFAULT_SHAPE, href: nil, unique_id: nil, **system_arguments)
  require_src_or_alt_arguments(src, alt)

  @unique_id = unique_id
  @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

Instance Method Details

#call ⇒ Object 



41
42
43
44
45
46
47
48
49
50
51
52
 
# File 'app/components/primer/open_project/avatar_with_fallback.rb', line 41

def call
  render(
    Primer::BaseComponent.new(
      tag: :"avatar-fallback",
      data: {
        unique_id: @unique_id,
        alt_text: @system_arguments[:alt],
        fallback_src: @fallback_svg
      }
    )
  ) { super }
end