Avatar Component (Revised)

Technical Design: terra-avatar

Summary:

A discussion with UX has lead to a necessary redesign of the Avatar component. This revised tech design includes the following changes:

• only two avatar types (User/Facility)
• icon can no longer be provided as a prop (only the User and Facility icons are used)
• specifying that if an image or text is provided, it will display in place of the fallback icon.

See the outdated tech design.

Expected behavior:

Should be able to give the component an image or text which will display inside a circular wrapper. If neither of these are provided, then the default User or Facility icons display. Which icon is displayed is determined by the prop ‘type’.

Responsiveness:

The content within the avatar does not change, only the size. The size of the avatar is dictated by the component where it lives.

I18N / Bi-directionality:

These changes should make no changes to the existing ltr/rtl functionality.

Interaction States

Avatars will not have interaction states. The hover state shown on the callouts will be controlled by the parent component not the Avatar.

Accessibility

We’ll provide an aria-label to indicate that the component is an avatar.

React Props:

Props	Type	Default	Required?	Description
alt	string	undefined	No	The text content that specifies the alternative text for the image.
variant	string	user	No	The type of avatar. Either 'user' or 'facility'.
image	string	undefined	No	The image to display.
initials	string	undefined	No	The initials to display. Limited to 2 or 3 characters.

Themeable Styles:

• Background
  • color
  • opacity
• Border
  • width
  • style
  • color
• Box shadow
• Font size
• Font color
• Size
• Icon color
• Line height

[dm123455]

@ChaseSinclair I spoke with @neilpfeiffer and we do need to have the user variant as a default.

[neilpfeiffer]

The full design has additional types/variants that are not being coded for initial implementation: patient and provider, which may have unique icons in the future, dictating the current proposal and would be passive approach to grow into.