🐛 Copy size does not scale in Avatar fallback

[LaurentDario]

All Avatar fallback seem to share the same 14px font-size.

Describe the bug

The font-size of the Avatar text fallback doesn't scale up from the medium size (14px).
It is scaling from 2xs to md.

Steps to reproduce

Reproducible in the documentation

(Notice that the size documentation seems to react strangely to all the SRC being empty, the first 3 avatars are not showing)

Expected results

According to Figma, the fonts should be as follow:

• xs: 10px
• sm: 12px
• md: 14px
• lg: 16px
• xl: 18px
• 2xl: 22px

[patricklafrance]

Thanks for the issue. Definitely have something to do the an empty src because with a src it does work, have a look at the following Chromatic test: https://sg-storybook.netlify.app/?path=/story/chromatic-avatar--initials

What your use case which result in having empty src ?

[LaurentDario]

The empty src were just to test the fallback, in cases where the src is invalid.
Just realized that the behavior of the font-size is different if the SRC is simply removed:

In Apricot it would be the case for an Avatar with an invalid SRC:

[LaurentDario]

Also wondering if that notion of and not being part of the initials would make sense to be addressed in Orbit or if it's something we should work on (if needed) in Apricot directly, so it shows GS in that case instead of Ga.

[patricklafrance]

The empty src were just to test the fallback, in cases where the src is invalid.
Just realized that the behavior of the font-size is different if the SRC is simply removed:

In Apricot it would be the case for an Avatar with an invalid SRC:

For the Avatar component, an empty src is not the same as an invalid src. When the underlying source is invalid, the native Image object will fire an error event which will be catched by the component and render an initials avatar as fallback.

[patricklafrance]

Also wondering if that notion of and not being part of the initials would make sense to be addressed in Orbit or if it's something we should work on (if needed) in Apricot directly, so it shows GS in that case instead of Ga.

Could you ellaborate on this please, I am not sure I fully understand what you mean.

[LaurentDario]

I don't think it belongs into the Orbit realm.
The initials used as placeholder (CH in the example of Chris Hadfield) is built off the name prop. This works well for users, but it doesn't always work for group names and teams names, where you could have all sorts of names like Greenfelder and Sons or Group-with-a-long-name.

In the example of Greenfelder and Sons, the expected initials should be GS instead of Ga. That means adding a logic to maybe ignore and in the way the initials are picked up.
That doesn't need to be addressed here, just opening the door to discussions. I realize that this can get tricky for other names we have in our Fake APIs.

To summarize this, here's a screenshot of the demo with some examples:

1st Avatar: Control, everything is fine
2nd Avatar: A name with an and
3rd Avatar: A name with a whole lot of words!
4th Avatar: A name with a dash
5th Avatar: The regular Avatar but with an invalid SRC, with its Placeholder with the wrong size.

[patricklafrance]

Oh, sorry I miss the fact that your example was for a group, thanks for the clarification.

Yes indeed, it's currently out of Orbit realm. We could eventually add some kind of GroupAvatar component, it's probably better if you keep it in Apricot for now.

Could be a great request :)

[LaurentDario]

Hopefully I gave enough context in the Request: #695
Something that isn't ideal for now with handling it on the Apricot side is that the name we pass down to pick the Initials is also the name used for the aria-label of the avatar.
This means that if we add a layer of regex to exclude, for example, and, the aria-label for the avatar of Jast and Sons will become Jast Sons.

[patricklafrance]

Hopefully I gave enough context in the Request: #695
Something that isn't ideal for now with handling it on the Apricot side is that the name we pass down to pick the Initials is also the name used for the aria-label of the avatar.
This means that if we add a layer of regex to exclude, for example, and, the aria-label for the avatar of Jast and Sons will become Jast Sons.

Sorry for the late reply, you can always provide an aria-label prop which will superceed the name prop but it's currently rendered on the div container instead of the img itself, I will fix that.