[terra-avatar] Allow Fallback to Initials Display

[RLRickard]

Feature Request

Description

Currently, the image fallback logic of the avatar displays a generic icon. However, this fallback does not differentiate between different 'Avatars' if multiple images fail to load.
If the image fails to load and initials are provided - the avatar should fallback to the initials display instead (or at least be optional).

[bb3284]

This may be a blocker to our consuming Terra Avatar in Connect.

[yuderekyu]

That makes sense to me, but this needs UX input. UX requirements specify that if the photo fails to load, a generic icon is used. If a photo is not provided, initials are used.

cc @neilpfeiffer

[neilpfeiffer]

(edit: removed incorrect statements, the fallback is working correctly per the original requirements: {image (if provided || is not invalid) > generic icon} or {initials (if provided)}).
I also was able to break it by giving the image non-image file types, so we may need to spike on testing corrupt images and valid-but-not-image files.

.

the avatar should fallback to the initials display instead (or at least be optional).

The option to fallback to initials should be including the prop or not (edit: if requirements are updated)

@RLRickard I'm not quite sure what you mean by

this fallback does not differentiate between different 'Avatars' if multiple images fail to load.

If you could better explain what you meant by that, since a single User Avatar should only receive one image. And the Facility avatar only has the fallback to the icon, no initials. Do you mean if multiple avatars on a given view all are failing to load (broken service, etc.) that they collectively have a fallback? Or please better explain, Thanks.

[RLRickard]

@neilpfeiffer - I meant that if multiple avatars in the same view fail to load, that they all show the same generic icon instead of the User's initials when that data is available.

[neilpfeiffer]

Thanks @RLRickard, that's what I assumed you meant, how a field/list of avatars with failures could appear all similar even with the individual colors. Adding the 'bug' tag so we can correct fixing the initials to display as primary fallback when provided. Edit: We will need to check with UX on alteration of fallback strategy per original requirements @yuderekyu referenced:

Special Implementation note for others implementing Avatar: unless your design team has given you special instructions to have the avatars all have the same color or specific color, it is recommended that the full person's name be provided as the alt prop, and by providing a UserID, GUID, MRN or other common identifier as the hashValue will keep the avatar color consistent across multiple applications.

[neilpfeiffer]

Blocking -- awaiting final OCS direction to change the API for the fallback from Image > Initials (> Icon) and then changing the Shared User to a Generic with variants.

[bb3284]

Please escalate the design on this issue. CareAware Connect needs this completed in order to be able to consume Terra-avatar which is required as part of our OCS project.

[jeremyfuksa]

Design Update:

After some discussion, here is how we need to move forward with avatar:
The initials prop becomes required. The icon fallback is removed so that there is only the image (if provided) with fallback to initials.

---

Code Updates:

[terra-avatar] src/common/Avatar.module.scss

• Do not delete the icon SVG #L56-L60. Needed in [terra-avatar] Provider Variant #2026.

[terra-avatar] src/variants/Avatar.jsx

• Alter fallback logic to make initials always load below, and then image overlays if a valid object is detected #L88-L95

---

Theme Updates:

Provider icon will need to be verified in all themes

• cerner-clinical-theme, cerner-consumer-theme, ti-clinical-lowlight-theme, orion-fusion-theme

[supreethmr]

Just Curious to know about design before Implementation.
why do we need to keep initials prop as required. while we can add the fallback to initials without making it as required only on when it is provided and fall-back to default user Icon when it is not provided.

[bjankord]

We should try to group the release of this with #2026

[jeremyfuksa]

while we can add the fallback to initials without making it as required only on when it is provided and fall-back to default user Icon when it is not provided.

That works for me. Go ahead and ignore the required suggestion.

[jeremyfuksa]

@neilpfeiffer and I were discussing, and the initials do need to be required because we're moving the icons into the generic variant of this component. So, the standard avatar is either initials or an overlay image. There is no icon fallback.

So, this raises a new question: What should the standard variant do when sending the initials fails? Of course, if there's a complete failure of the service to send data, that's just not going to render anything, but what if the initials are malformed (e.g. > 2 initials)?

Does the avatar render as a blank color circle? Or does it not render? The designer in me says that the blank circle at least keeps consistency with any other avatars in a list, but not rendering it would at least make it obvious that something went wrong. Is there a precedent with other components that would guide this decision?

[supreethmr]

@neilpfeiffer and I were discussing, and the initials do need to be required because we're moving the icons into the generic variant of this component. So, the standard avatar is either initials or an overlay image. There is no icon fallback.

So, this raises a new question: What should the standard variant do when sending the initials fails? Of course, if there's a complete failure of the service to send data, that's just not going to render anything, but what if the initials are malformed (e.g. > 2 initials)?

Does the avatar render as a blank color circle? Or does it not render? The designer in me says that the blank circle at least keeps consistency with any other avatars in a list, but not rendering it would at least make it obvious that something went wrong. Is there a precedent with other components that would guide this decision?

or when Initials are > 2 can we reduce it 2 by default and render the initials with reduced initials instead of rendering blank circle or adding datatype validation for initials to render nothing on invalid input.

[jeremyfuksa]

We just discussed this in leadership sync. Let's check the string and trim to a length of 2.

Also, add text-transform: uppercase to .avatar > .initials, please.