Skip to content

Badge Specification

Jump to bottom
Simeon Simeonoff edited this page Jul 12, 2021 · 12 revisions

Badge Specification

Contents

  1. Overview
  2. User Stories
  3. Functionality
  4. Test Scenarios
  5. Accessibility
  6. Assumptions and Limitations
  7. References

Owned by

Team Name: Design and Web Development (DnD)

Developer Name: Simeon Simeonov (@simeonoff)

Designer 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
2 Simeon Simeonoff 12 Jul 2021 Update spec

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

The badge component should be associated with other parent components in order to indicate status change. It should be customizable, allowing changes to its variant and displayed value.

Acceptance criteria

  1. Have a badge that shows a value
  2. Have a badge that shows an icon
  3. The badge should adapt its width and height to fit the content
  4. The badge should have a variant indicating its importance e.g. informational or error
  5. The badge should have an optional outline
  6. The badge should provide a way to set its roundedness
  7. The badge should be positionable in relation to another element (e.g. in the top-right corner of an 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 variants like success, warning, error, or info.
  • Story 4: As a developer, I want to set different values like text, number, or icon.
<igc-avatar initials="ZK">
    <igc-badge variant="error" outlined>6</igc-badge>
</igc-avatar>
<igc-avatar src="https://unsplash.it/60/60?image=55">
    <igc-badge squared></igc-badge>
</igx-avatar>
  • Story 5: As a developer, I want to set the badge fill, text, and outline colors.

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 The badge component should always display little circular-shaped component with optional text/number/icon content and different colors based on its variant. The end-user interface consists of:

  • Circular notification.
  • Different colors based on badge variant.
  • Different values as content.

3.2 Developer Experience variant: Variant of the badge. Possible options primary, info, success, warning, danger. Will change the background color of the badge.

outlined: Adds an outline border around the badge.

squared: Determines if the badge is squared.

3.3. Globalization/Localization

3.4 API

Options

Name Description Type Default value Valid values
variant Changes the background color of the badge according to the values set in the default theme string default, info, success, warning or error
squared Sets the position of the badge relative to its parent container top-right, top-left, bottom-right or bottom-left
outlined Sets the value to be displayed inside the badge string or number

4. Test Scenarios

Automation

  • Scenario 1:
  • scenario 2:

5. Accessibility

ARIA Support

Clone this wiki locally