Initials calculation in the OnxyAvatar component

[bergser]

Currently initials for the avatar are calculated in this way:

const initials = computed(() => {
  const names = props.label.split(" ");
  const initials =
    names.length > 1 ? `${names[0].charAt(0)}${names[1].charAt(0)}` : names[0].substring(0, 2);
  return initials.toUpperCase();
});

which gives your following result:

• First Last => FN
• First Middle Last => FM
• First Second Last => FL

Playground

Should behaviour be like?:

• First Last => FL
• First Middle Last => FL
• First Second Last => FL

[JoCa96]

@bergser You opened Pandora's box with this one 😄 Internationally name ordering rules seem to be basically random: https://tvtropes.org/pmwiki/pmwiki.php/UsefulNotes/NameOrderConventions

As a simple approach, I would like to use the letter of the first and the last word with capitals. The assumption being, that these are the most important names.
An additional prop to overwrite the initials makes sense to have, too.

[bergser]

@JoCa96 yes I can agree this is very interesting topic. This feedback we received from our Bulgarian colleagues. They immediately spotted this because of the middle name.

Here is an example (check getInitials function) how this is managed in the fluent ui (https://fluent2.microsoft.design/components/web/react/avatar/usage)

https://stackblitz.com/edit/y1okbsgg?file=src%2Fexample.tsx

Microsoft implementation looks more complex and they also supporting different standards (see comments).

At least it should be possible to pass custom initials.

[JoCa96]

Thanks a lot for your research and valuable input! I created ticket #2454, feel free to give comments

[larsrickert]

I created a PR for this :) Note that you can currently already pass custom initials via the default slot.
I changed this in the PR to support a new initials property so we can also forward it in components like the OnyxUserMenu
@JoCa96 Please review: #2450