Badge Specification - IgniteUI/igniteui-webcomponents GitHub Wiki

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

  • Dyan Dimitrov | Date:

Signed off by

  • Radoslav Mirchev | Date:
  • Radoslav Karaivanov | Date: 13 July 2021

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-shaped component indicating a status 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 size to fit the content
  4. The badge should have a variant indicating its importance e.g. info, warning, or danger
  5. The badge should have an optional outline
  6. The badge should provide a quick way to set its shape
  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 avatars, 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 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 shape="square"></igc-badge>
</igc-avatar>
  • Story 5: As a developer, I want to set the badge background, 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 a small-shaped element with optional text/number/icon content and different colors based on its variant. The end-user interface consists of:

  • Different colors based on badge variant.
  • Different edge-rounding based ot badge shape.
  • 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.

shape: Determines if the badge is square or rounded.

Properties

You should be able to configure the igc-badge by setting properties on it.

Name Description Type Default value Reflected
shape Set the shape of the badge square, rounded rounded true
variant Set the variant of the badge primary, info, success, warning, danger primary true
outlined Specify if the badge should be outlined or not Boolean false true

Slots

Name Description
(default) The default wrapper slot.

CSS Parts

Name Description
base The base wrapper of the badge.

4. Test Scenarios

Automation

  • Scenario 1: Should set the badge variant correctly.
  • Scenario 2: Should set the badge shape correctly.
  • Scenario 2: Should set the badge outline correctly.
  • Scenario 4: Should display content placed between the opening and closing tags of the badge.

5. Accessibility

ARIA Support

⚠️ **GitHub.com Fallback** ⚠️