User label

[Spark450]

This issue was initially created in GitHub on June 13th, 2023 (submitted by @Benjamin Franck)

Acceptance criteria

Work with the development team to determine if this should be a design system “component” or just a few different examples

Connect with Ministries and teams to see examples of the data being displayed in “user labels”

As suggested by Benji, leave out Avatar and/or initials element for 1st iteration

Details from the initial GitHub issue below:

What is being submitted?

I’m submitting a new component: a standard format for displaying a user label. This component would be used in web applications that require user accounts.

The component would display the user's name along with secondary information. This data includes the user's role, email address, location, or team. The type of secondary information

The component could be enhanced with an avatar image or a popover with more user account information.

Figma design

Why are you submitting?

I've noticed that we display users in many places in our SCSS web applications. Some example scenarios include:

Showing who wrote a comment

Showing who is assigned to an item

Picking a user from a list

Creating this component will improve consistency across SCSS web apps. It also speeds up development of future features.

This component could also be used by other web apps in the DDD. Some examples include:

To do: find examples

This component will be useful to our government users because they use a similar component in their Office 365 apps. Microsoft has a “Persona” component in their design system: Persona

Other design systems have similar components:

Avatar - AtlasKit

Avatar - Polaris

Avatar - Lightning

Questions to consider

My assumption: having an avatar image will dramatically increase the complexity of this component. We would need to figure out how to process, store, and display the avatar. We could have a quicker initial release if we stick to text. How could we validate this assumption?

How many sizes do we need to consider? My team needs at least two sizes: one line and two lines high.

Do we define rules when and how to show secondary information? For example, when to show a role and when to show an email address.

Are there valid scenarios where we want to display users without using this component?

Out of scope

The following enhancements would be out of scope for the initial release:

Avatar image or initials

User profile popover

[Spark450]

Jira issue

[Spark450]

This need will be addressed through the work in the Workspace side menu