Vuetify: status‐label (StatusLabelComponent)

General

StatusLabelComponent has been made more generic and renamed to DisplayFieldComponent.

• Swap <status-label> for <DisplayFieldComponent>.
  • Add name="Status" prop.
  • Swap status="X" prop for value="X".
  • Swap variant="success" prop for value-class="text-success".
  • Swap variant="danger" prop for value-class="text-error".

Example Code

<DisplayFieldComponent
    name="Status"
    value="Verified"
    value-class="text-success"
    data-testid="emailStatusVerified"
/>
<DisplayFieldComponent
    name="Status"
    value="Opted Out"
    value-class="text-medium-emphasis"
    data-testid="emailStatusOptedOut"
/>
<DisplayFieldComponent
    name="Status"
    value="Not Verified"
    value-class="text-error"
    data-testid="emailStatusNotVerified"
/>

Example Output