ClrControlContainer component use wrong icon color

[rbirkgit]

This is a bug report for the @clr Angular or UI versions of the design system.
For the web-component implementation of Clarity (@cds), visit vmware-clarity/core.

Describe the bug

ClrControlContainer component use wrong icon color. This is because it sets the icon status to "danger" which overrides the css for forms invalid color. Other container components don't set the status and why they work and use correct red color.

How to reproduce

Use the clr-control-container component as described here:
https://clarity.design/documentation/forms#:~:text=Custom%20and%20non%2DClarity%20Controls

Expected behavior

Error icon should have the same red color as the form invalid red, i.e. same red as the input control underline red.

Versions

Clarity version:

• v12.x
• v13.x
• Other:

Framework:

• Angular
• React
• Vue
• Other:

Framework version:
Angular 13

Additional notes

Here is part of the source code of it. As you can see it adds the status. That line should be removed. See the clr-input-container as example as that one works.

@Component({
  selector: 'clr-control-container',
  template: `
        ...
        <cds-icon
          *ngIf="showInvalid"
          class="clr-validate-icon"
          status="danger"
          shape="exclamation-circle"
          aria-hidden="true"
        ></cds-icon>

[ashleyryan]

CAn you please provide a stackblitz so we can see the visual discrepancies

[rbirkgit]

Here is what it looks like by default:

This is what it should be:

[rbirkgit]

Here you can see how the danger status overrides the correct color:

[kevinbuhmann]

That's not overriding the color of the icon. That's just setting the --color CSS variable which is not used in the .clr-validate-icon rules.

[github-actions]

🎉 This issue has been resolved in version 13.8.3 🎉

The release is available on:

• GitHub release
• v13.8.3

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 12.4.2 🎉

The release is available on:

• GitHub release
• v12.4.2

Your semantic-release bot 📦🚀

[github-actions]

Hi there 👋, this is an automated message. To help Clarity keep track of discussions, we automatically lock closed issues after 14 days. Please look for another open issue or open a new issue with updated details and reference this one as necessary.