-
Notifications
You must be signed in to change notification settings - Fork 161
Avatar specification
- Overview
- User Stories
- Functionality
- Test Scenarios
- Accessibility
- Assumptions and Limitations
- References
Team Name
Silvia Ivanova
Stefan Ivanov
- Simeon Simeonov | Date:
- Product Owner Name | Date:
- Platform Architect Name | Date:
| Version | Users | Date | Notes |
|---|---|---|---|
| 1 | Stefan Ivanov | Date 29 Jun 2021 | Update spec template |
Avatar is used as a circular or square representation of the user identity typically in a user profile.
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.
- 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.
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.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
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 |
| Name | Description | Return type | Parameters |
|---|---|---|---|
generateInitials() |
Create canvas element | ||
isRounded() |
Check the rounded property | Boolean |
Automation
- Scenario 1:
- scenario 2:
-
Roles: - role="img". https://www.w3.org/TR/wai-aria/roles#img
-
Attributes: - aria-label="avatar". https://www.w3.org/TR/wai-aria/states_and_properties#aria-label
- aria-roledescription="roleDescription". https://www.w3.org/TR/wai-aria-1.1/#aria-roledescription