Avatar specification

Avatar Specification

Owned by

Team Name

Silvia Ivanova

Stefan Ivanov

Requires approval from

Simeon Simeonov | Date:

Signed off by

Product Owner Name | Date:
Platform Architect Name | Date:

Revision History

Version	Users	Date	Notes
1	Stefan Ivanov	Date 29 Jun 2021	Update spec template

1. Overview

Avatar is used as a circular or square representation of the user identity typically in a user profile.

Objectives

It is providing API for the most common use cases, leaving maximum flexibility in developer hands. It follows the mobile-first approach and should be suitable for hybrid applications.

Acceptance criteria

Have avatar that shows image.
Have avatar that shows initials as image.
Have avatar that shows icon as image.
The avatar must have a size (small, medium, large) changing the width/height of the component.
The avatar must accept image href path for image representation.
The avatar should have the ability to set initials color.
The avatar should have the ability to set initials background color.
The avatar should have the ability to set rounded shape.

2. User Stories

Developer stories:

Story 1: As a developer, I want to be able to provide a way to display a certain image, initials, or icon as avatar. Using [ ] binding.

<igx-avatar initials="ZK" width="100" roundShape="true" bgColor="#ff6978">
</igx-avatar>

Story 2: As a developer, I want to be able to show avatars in different sizes e.g. larger ones for profile screens and smaller ones for list items and toolbars.
Story 3: As a developer, I want to be able to choose between the circular and square shapes of the avatar.
Story 4: As a developer, I want to be able to customize the avatar giving different combinations of colors for background and foreground elements.

End-user stories:

Story 1: As an end-user, I want to be shown a visual representation of me as a user via an image, initials, or icon.

3. Functionality

3.1. End-User Experience

The avatar should always display image, initials or icon. It comes in a circle or square shape with 3 different sizes (small, medium or large).

3.2. Developer Experience

initials: Set the initials that should be shown by the avatar.

roundShape: Change the type of the Avatar, by using roundShape the avatar will look like circle or square.

bgColor: Set the background color of the initials or icon avatars.

color: Set the color of the initials or icon avatars.

icon: Set the icon of the avatar. Currently all icons from the material icon set are supported.

src: Set the image source of the avatar.

size: Set the size of the avatar to either small, medium or large.

3.5. API

Options

You should be able to configure the igx-avatar by passing an Options object to it.

Name	Description	Type	Default value	Valid values
`src`	Set the image source of the avatar	string
`initials`	Set the initials of the avatar	string
`icon`	Set the icon of the avatar	string
`bgColor`	Set the background color of initials or icon avatars	string
`color`	Set the color of initilas or icon avatars	string
`roundShape`	Set the shape of the avatar to circle	boolean	false
`size`	Set the size of the avatar	string		small, medium or large