Platform: Object Status Component Technical Design - SAP/fundamental-ngx GitHub Wiki

Object Status

Summary

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

Platform vs. Core Implementation

  • The Platform component is implemented as a component as opposed to the directive approach that Core takes.

Example of Core implementation:

<span fd-object-status [status]="'negative'" [glyph]="'status-negative'"></span>
<span fd-object-status [status]="'critical'" [glyph]="'status-critical'"></span>
<span fd-object-status [status]="'positive'" [glyph]="'status-positive'"></span>

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]="'1'">Dark Red Status</fdp-object-status>
<fdp-object-status [color]="'2'">Red Status</fdp-object-status>
<fdp-object-status [color]="'3'">Yellow Status</fdp-object-status>

<!-- Status with Inverted style -->
<fd-object-status [inverted]="true" [status]="'negative'" >negative</fd-object-status>

<!-- Status with Inverted style with Icon -->
<fd-object-status [inverted]="true" [status]="'informative'" [glyph]="'hint'">Inverted Informative</fd-object-status>

<!-- Status with Inverted Large style -->
<fd-object-status [large]="true" [inverted]="true" [status]="'negative'" [glyph]="'status-negative'">Inverted Large</fd-object-status>

<!-- Status with Large style -->
<fd-object-status [large]="true" [status]="'negative'" [glyph]="'status-negative'">Negative</fd-object-status>

<!-- Status with clickable style -->
<fd-object-status [clickable]="true" [status]="'informative'" >informative</fd-object-status>
  <fd-object-status [large]="true" [clickable]="true" [inverted]="true" [color]="item">Inverted Informative</fd-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.

i18n

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

Special Usecase: No

  • fdp-object-status can be supported as:
<fdp-object-status i18n="@@critical" [status]="'critical'">Critical Status</fdp-object-status>

Redesign Required: No

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