chore: add missing status attibutes to validate icons

This is a backport of 19a1250.
vmware-clarity · Sep 16, 2022 · 072bff8 · 072bff8
1 parent df26a02
commit 072bff8
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 49 deletions.
diff --git a/projects/angular/src/forms/input/input-container.ts b/projects/angular/src/forms/input/input-container.ts
@@ -24,6 +24,7 @@ import { NgControlService } from '../common/providers/ng-control.service';
           *ngIf="showInvalid"
           class="clr-validate-icon"
           shape="exclamation-circle"
+          status="danger"
           aria-hidden="true"
         ></cds-icon>
         <cds-icon

diff --git a/projects/angular/src/forms/styles/containers.spec.ts b/projects/angular/src/forms/styles/containers.spec.ts
@@ -26,7 +26,7 @@ import { ClrIconModule } from '../../icon/icon.module';
         >
           <div class="clr-input-wrapper">
             <input type="text" id="{{ layout }}-basic" placeholder="Enter value here" class="clr-input" />
-            <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+            <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
           </div>
           <span class="clr-subtext">Helper Text</span>
         </div>
@@ -74,7 +74,7 @@ import { ClrIconModule } from '../../icon/icon.module';
             <label for="{{ layout }}-checkbox3" class="clr-control-label">option 3</label>
           </div>
           <div class="clr-subtext-wrapper">
-            <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+            <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
             <span class="clr-subtext">Helper Text</span>
           </div>
         </div>
@@ -122,7 +122,7 @@ import { ClrIconModule } from '../../icon/icon.module';
             <label for="{{ layout }}-checkbox9" class="clr-control-label">option 3</label>
           </div>
           <div class="clr-subtext-wrapper">
-            <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+            <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
             <span class="clr-subtext">Helper Text</span>
           </div>
         </div>
@@ -170,7 +170,7 @@ import { ClrIconModule } from '../../icon/icon.module';
             <label for="{{ layout }}-toggle3" class="clr-control-label">option 3</label>
           </div>
           <div class="clr-subtext-wrapper">
-            <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+            <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
             <span class="clr-subtext">Helper Text</span>
           </div>
         </div>
@@ -218,7 +218,7 @@ import { ClrIconModule } from '../../icon/icon.module';
             <label for="{{ layout }}-toggle9" class="clr-control-label">option 3</label>
           </div>
           <div class="clr-subtext-wrapper">
-            <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+            <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
             <span class="clr-subtext">Helper Text</span>
           </div>
         </div>
@@ -266,7 +266,7 @@ import { ClrIconModule } from '../../icon/icon.module';
             <label for="{{ layout }}-radio3" class="clr-control-label">option 3</label>
           </div>
           <div class="clr-subtext-wrapper">
-            <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+            <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
             <span class="clr-subtext">Helper Text</span>
           </div>
         </div>
@@ -314,7 +314,7 @@ import { ClrIconModule } from '../../icon/icon.module';
             <label for="{{ layout }}-radio6" class="clr-control-label">option 3</label>
           </div>
           <div class="clr-subtext-wrapper">
-            <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+            <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
             <span class="clr-subtext">Helper Text</span>
           </div>
         </div>
@@ -337,7 +337,7 @@ import { ClrIconModule } from '../../icon/icon.module';
             <input #fileInput type="file" id="{{ layout }}-file" placeholder="Enter value here" class="clr-file" />
           </div>
           <!-- IMPORTANT DIFFERENCE IN STRUCTURE! ICON IS NOT PART OF THE INPUT WRAPPER -->
-          <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+          <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
           <span class="clr-subtext">Helper Text</span>
         </div>
       </div>
@@ -358,7 +358,7 @@ import { ClrIconModule } from '../../icon/icon.module';
             <input type="file" id="{{ layout }}-file" placeholder="Enter value here" />
           </div>
           <!-- IMPORTANT DIFFERENCE IN STRUCTURE! ICON IS NOT PART OF THE INPUT WRAPPER -->
-          <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+          <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
           <span class="clr-subtext">Helper Text</span>
         </div>
       </div>
@@ -382,7 +382,7 @@ import { ClrIconModule } from '../../icon/icon.module';
               placeholder="Enter value here"
               class="clr-textarea"
             ></textarea>
-            <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+            <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
           </div>
           <span class="clr-subtext">Helper Text</span>
         </div>
@@ -405,7 +405,7 @@ import { ClrIconModule } from '../../icon/icon.module';
               <option>Option 2</option>
               <option>Option 3</option>
             </select>
-            <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+            <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
           </div>
           <span class="clr-subtext">Helper Text</span>
         </div>
@@ -428,7 +428,7 @@ import { ClrIconModule } from '../../icon/icon.module';
               <option>Option 2</option>
               <option>Option 3</option>
             </select>
-            <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+            <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
           </div>
           <span class="clr-subtext">Helper Text</span>
         </div>

diff --git a/projects/demo/src/app/radios/radios.demo.html b/projects/demo/src/app/radios/radios.demo.html
@@ -257,7 +257,7 @@ <h4>Vertical</h4>
         <label for="vertical-radio3" class="clr-control-label">option 3</label>
       </div>
       <div class="clr-subtext-wrapper">
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
         <span class="clr-subtext">Helper Text</span>
       </div>
     </div>
@@ -279,7 +279,7 @@ <h4>Vertical</h4>
         <label for="vertical-radio6" class="clr-control-label">option 3</label>
       </div>
       <div class="clr-subtext-wrapper">
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
         <span class="clr-subtext">Helper Text</span>
       </div>
     </div>
@@ -301,7 +301,7 @@ <h4>Vertical</h4>
         <label for="vertical-radio9" class="clr-control-label">option 3</label>
       </div>
       <div class="clr-subtext-wrapper">
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
         <span class="clr-subtext">Helper Text</span>
       </div>
     </div>
@@ -327,7 +327,7 @@ <h4>Horizontal</h4>
         <label for="horizontal-radio3" class="clr-control-label">option 3</label>
       </div>
       <div class="clr-subtext-wrapper">
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
         <span class="clr-subtext">Helper Text</span>
       </div>
     </div>
@@ -349,7 +349,7 @@ <h4>Horizontal</h4>
         <label for="horizontal-radio6" class="clr-control-label">option 3</label>
       </div>
       <div class="clr-subtext-wrapper">
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
         <span class="clr-subtext">Helper Text</span>
       </div>
     </div>
@@ -371,7 +371,7 @@ <h4>Horizontal</h4>
         <label for="horizontal-radio9" class="clr-control-label">option 3</label>
       </div>
       <div class="clr-subtext-wrapper">
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
         <span class="clr-subtext">Helper Text</span>
       </div>
     </div>
@@ -397,7 +397,7 @@ <h4>Compact</h4>
         <label for="compact-radio3" class="clr-control-label">option 3</label>
       </div>
       <div class="clr-subtext-wrapper">
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
         <span class="clr-subtext">Helper Text</span>
       </div>
     </div>
@@ -419,7 +419,7 @@ <h4>Compact</h4>
         <label for="compact-radio6" class="clr-control-label">option 3</label>
       </div>
       <div class="clr-subtext-wrapper">
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
         <span class="clr-subtext">Helper Text</span>
       </div>
     </div>
@@ -441,7 +441,7 @@ <h4>Compact</h4>
         <label for="compact-radio9" class="clr-control-label">option 3</label>
       </div>
       <div class="clr-subtext-wrapper">
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
         <span class="clr-subtext">Helper Text</span>
       </div>
     </div>

diff --git a/projects/demo/src/app/selects/selects.demo.html b/projects/demo/src/app/selects/selects.demo.html
@@ -209,7 +209,7 @@ <h4>Vertical</h4>
           <option value="2">Two</option>
           <option value="3">Three</option>
         </select>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -224,7 +224,7 @@ <h4>Vertical</h4>
           <option value="2">Two</option>
           <option value="3">Three</option>
         </select>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -239,7 +239,7 @@ <h4>Vertical</h4>
           <option value="2">Two</option>
           <option value="3">Three</option>
         </select>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -254,7 +254,7 @@ <h4>Vertical</h4>
           <option value="2">Two</option>
           <option value="3">Three</option>
         </select>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -269,7 +269,7 @@ <h4>Vertical</h4>
           <option value="2">Two</option>
           <option value="3">Three</option>
         </select>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -288,7 +288,7 @@ <h4>Horizontal</h4>
           <option value="2">Two</option>
           <option value="3">Three</option>
         </select>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -303,7 +303,7 @@ <h4>Horizontal</h4>
           <option value="2">Two</option>
           <option value="3">Three</option>
         </select>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -318,7 +318,7 @@ <h4>Horizontal</h4>
           <option value="2">Two</option>
           <option value="3">Three</option>
         </select>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -333,7 +333,7 @@ <h4>Horizontal</h4>
           <option value="2">Two</option>
           <option value="3">Three</option>
         </select>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -352,7 +352,7 @@ <h4>Compact</h4>
           <option value="2">Two</option>
           <option value="3">Three</option>
         </select>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -367,7 +367,7 @@ <h4>Compact</h4>
           <option value="2">Two</option>
           <option value="3">Three</option>
         </select>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -382,7 +382,7 @@ <h4>Compact</h4>
           <option value="2">Two</option>
           <option value="3">Three</option>
         </select>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -397,7 +397,7 @@ <h4>Compact</h4>
           <option value="2">Two</option>
           <option value="3">Three</option>
         </select>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>

diff --git a/projects/demo/src/app/textarea/textarea.demo.html b/projects/demo/src/app/textarea/textarea.demo.html
@@ -97,7 +97,7 @@ <h4>Vertical</h4>
     <div class="clr-control-container">
       <div class="clr-textarea-wrapper">
         <textarea id="vertical-textarea-basic" placeholder="Enter value here" class="clr-textarea"></textarea>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -108,7 +108,7 @@ <h4>Vertical</h4>
     <div class="clr-control-container clr-error">
       <div class="clr-textarea-wrapper">
         <textarea id="vertical-textarea-basic-error" placeholder="Enter value here" class="clr-textarea"></textarea>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -123,7 +123,7 @@ <h4>Horizontal</h4>
     <div class="clr-control-container">
       <div class="clr-textarea-wrapper">
         <textarea id="horizontal-textarea-basic" placeholder="Enter value here" class="clr-textarea"></textarea>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -134,7 +134,7 @@ <h4>Horizontal</h4>
     <div class="clr-control-container clr-error">
       <div class="clr-textarea-wrapper">
         <textarea id="horizontal-textarea-basic-error" placeholder="Enter value here" class="clr-textarea"></textarea>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -149,7 +149,7 @@ <h4>Compact</h4>
     <div class="clr-control-container">
       <div class="clr-textarea-wrapper">
         <textarea id="compact-textarea-basic" placeholder="Enter value here" class="clr-textarea"></textarea>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>
@@ -160,7 +160,7 @@ <h4>Compact</h4>
     <div class="clr-control-container clr-error">
       <div class="clr-textarea-wrapper">
         <textarea id="compact-textarea-basic-error" placeholder="Enter value here" class="clr-textarea"></textarea>
-        <cds-icon class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
+        <cds-icon class="clr-validate-icon" shape="exclamation-circle" status="danger"></cds-icon>
       </div>
       <span class="clr-subtext">Helper Text</span>
     </div>