Adding custom style property to status-badge works only when property is not defined for the selected severity

[ceisipeik]

What happened?

Tried adding a custom border-color for the status-badge component with a warning serverity. Custom border-color was overwritten by the warning severity's border-color defined in the statusBadgeCustomPropertyGroups.

Custom border-color could be added for the status-badge with a info severity, because border-color is not defined for the info severity in the statusBadgeCustomPropertyGroups.

Reproduction steps

Could be reproduced in the angular sandbox app (ria).

Add status-badge with the warning severity and add a red border:

<cvi-ng-status-badge
    style="--border-color: red"
    [severity]="'warning'"
    [label]="'warn'"
></cvi-ng-status-badge>

Border stays yellow.

Add status-badge with the info severity and add a red border:

<cvi-ng-status-badge
    style="--border-color: red"
    [severity]="'info'"
    [label]="'info'"
></cvi-ng-status-badge>

Border is changed to red.

Package

Angular

Version

1.31.1

[certainlyakey]

Thanks, confirmed. Ideally we should refactor the use of CSS variables inside of the Sass component in such a way that a variable used outside to apply a custom color should be renamed and scoped appropriately (eg --cvi-status-badge--border-color).