Platform: Counter Component Technical Design

Counter

Summary

The counter is used to identify the count of a set of objects. It usually used along side a button.

The requirements for this component most closely related to the "Badge on Button" specification here: https://wiki.wdf.sap.corp/wiki/pages/viewpage.action?pageId=2208784109

Example

<fdp-counter count="99" label="Number of apples"></fdp-counter>
<fdp-counter count="99" label="Number of apples" isNotification="true"></fdp-counter>

Property Bindings

count: Number

Number to display.

label: String

Text used for aria-label.

isNotification: Boolean

Toggles whether to display counter in "notification" mode.

Template

<span class="fd-counter"
    [attr.aria-label]="label"
    [ngClass]="{'fd-counter--notification': isNotification}">{{count | counterFormatter }}</span>

counterFormatter is a pipe function which formats thes display of count. Depending on size of number, the display may need to be altered. For example a count of "12,000" may need to be shortend to "999+" or "12k".

---

i18n

Link to general support for i18n: Supporting internationalization in ngx/platform

Special Usecase: No

• label can be supported with string binding:

<fdp-counter count="99" i18n-label="@@label" label="Number of apples"></fdp-counter>

Redesign Required: No

---

#Notes: Manju: Fiori3, under notifications, has following components - badge, icon, iconandbadge,banner, group(expand/collapse). Event binding is required.