Platform: Object Status Component Technical Design

Object Status

Summary

The ObjectStatus component is used to highlight the status of an object by coloring the text.

Example

<!-- Basic statuses -->
<fdp-object-status [status]="'negative'">Negative Status</fdp-object-status>
<fdp-object-status [status]="'critical'">Critical Status</fdp-object-status>
<fdp-object-status [status]="'positive'">Positive Status</fdp-object-status>
<fdp-object-status [status]="'informative'">Informative Status</fdp-object-status>
<fdp-object-status [status]="'neutral'">Neutral Status</fdp-object-status>

<!-- Status with icon -->
<fdp-object-status [status]="'positive'" [icon]="'thumbs-up-icon'">Positive Status</fdp-object-status>

<!-- Status with predefined colors -->
<fdp-object-status [color]="'dark red'">Dark Red Status</fdp-object-status>
<fdp-object-status [color]="'red'">Red Status</fdp-object-status>
<fdp-object-status [color]="'yellow'">Yellow Status</fdp-object-status>

Design

Property Bindings

status: ObjectStatusValue

Sets status of component. Limited to valid ObjectStatusValues. The enclosed string and/or icon will be colored according to the status value. This property cannot be used with the color property.

export type ObjectStatusValue = 'negative' | 'critical' | 'positive' | 'informative' | 'neutral';

icon: string

Icon class string.

color: ObjectStatusColor

Sets color of ObjectStatus text and/or icon. This property cannot be used with the status property.

export type ObjectStatusColor = 'dark red' | 'red' | 'yellow' | 'green' |
    'blue' | 'teal' | 'purple' | 'pink';

Projected Content

The string content of the ObjectStatus component will be displayed.