Badge Specification

Owned by

Team Name

Developer Name

Stefan Ivanov

Requires approval from

Peer Developer Name | Date:
Simeon Simeonov | Date:

Signed off by

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

Revision History

Version	Users	Date	Notes
1	Stefan Ivanov	5 Jul 2021	Update spec format

1. Overview

The badge is a small and rounded component with an indication showing that there is an update on a related item (such as avatar, navigation menu, list item, or anywhere else in an app where some active indication is required).

Objectives

igx-badge should be associated with other parent components in order to indicate status change. It should be highly customizable, providing capabilities like vertical and horizontal align, type changing, assigning the different type of values, using of material icons.

Acceptance criteria

Have a badge that shows a value
Have a badge that shows an icon
The badge should adapt its width to fit the content
The badge should have a type indicating its importance e.g. informational or error
The badge should have an outline
The badge should provide a way to set the roundedness
The badge should be positioned in relation to another element e.g. in the top-right corner of the avatar

2. User Stories

Developer stories:

Story 1: As a developer, I want to use the badge with other components like avatar, navigation menus, list items etc.
Story 2: As a developer, I want to manipulate the position of the badge.
Story 3: As a developer, I want to use different visual representation types like success badge or warning badge.
Story 4: As a developer, I want to set different values like text, number, or icon.

<igx-avatar initials="ZK" roundShape="true">
    <igx-badge type="error" value="6" position="bottom-left"></igx-badge>
</igx-avatar>

<igx-avatar src="https://unsplash.it/60/60?image=55" roundShape="true">
    <igx-badge icon="link" position="bottom-left"></igx-badge>
</igx-avatar>

Story 5: As a developer, I want to set the badge fill and outline color.

End-user stories:

Story 1: As an end-user, I want to be able to notice and determine the status of an element based on the badge attached to it and its color and value.

3. Functionality

3.1 End-User Experience igx-badge should always display little circular-shaped component with text/number/icon content and different color based on badge type. The end-user interface consists of:

Circular notification image.
Different colors based on badge type.
Different values used as notifications.

3.2 Developer Experience type: Type of the badge. Possible options default, info, success, warning, error. Will change the background color of the badge.

position: Set the position of the badge relative to its parent container to either top-right, top-left, bottom-right or bottom-left.

value: Displayed value inside the badge.

icon: Set an icon for the badge from the material icons set.

3.3. Globalization/Localization

3.4 API

Options

Name	Description	Type	Valid values
`type`	Changes the background color of the badge according to the values set in the default theme	string	default, info, success, warning or error
`position`	Sets the position of the badge relative to its parent container		top-right, top-left, bottom-right or bottom-left
`value`	Sets the value to be displayed inside the badge	string or number
`icon`	Sets an icon for the badge from the material icons set. Will not be displayed if value for the badge is already set	string