Implement OnyxAvatar with locale sensitive Initials

[JoCa96]

Why?

The OnyxAvatar should also work with names that use characters that rely on multiple code-points.

Acceptance criteria

General:

• props.label is deprecated
• props.username is added and supersedes the props.label
  • It has a new type DisplayName which supports passing a locale, as shown in the implementation details

Algorithm:

• If an image props.src was provided, it is shown
• If not provided, while loading and on error, the user's initials are shown. These are determined as follows:
  • If the props.username includes unsupported characters (see fluent-ui) don't show initials, use Fallback.
  • The locale is determined: Either taken from the DisplayName type, otherwise from the injected i18n
  • Using this locale, the first glyph of the first and last word are determined using the Intl.Segmenter API
  • If no locale is defined for the name, the injected locale is used
  • If there is only a single word, the first two characters are used
• Fallback: If no initials can be determined, the person icon is shown instead.

Aria:

• The accessible name for the avatar component must be Avatar of ${props.username}

Implementation details

• We can make use of Intl.Segmenter to determine words and single glyphs. It will consider writing direction, word, and glyph separator for the locale.

type DisplayName = string | {
  name: string;
  // the locale for the given name
  locale: string;
}

Fallback content for the image loading and on error can be shown without JS, using the <object> element:

  <template>
     <object class="onyx-avatar__content" :data="props.src" :aria-label="`Avatar of ${props.username}`">
      <div class="onyx-avatar__initials">
        <slot>{{ initials }}</slot>
      </div>
    </object>
  </template>

Reference implementations

• FluentUI

Definition of Done

• Should be covered by tests:

  • functional tests (Playwright or unit test)
  • visual tests (Playwright screenshots)

• Make sure, that

  • follow-up tickets were created if necessary
  • updated version + documentation is deployed
  • Storybook can show the feature
  • Storybook code snippet of new/changed examples are checked that they are generated correctly
  • Namings are aligned with Figma

Approval

Storybook

• Checked and approved by
  • designer
  • dev