search

e-gov / cvi

Common Visual Identity components built upon the original Veera Design System for Open Source usage.
https://e-gov.github.io/cvi/
MIT License
8 stars 22 forks source link

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

Open ceisipeik opened 1 year ago

ceisipeik commented 1 year ago

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 commented 12 months ago

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).