Fixed #9755, Fixed #9756, Fixed #9757

primefaces · Jan 13, 2021 · 96b00bd · 96b00bd
1 parent 3bff5fc
commit 96b00bd
Show file tree

Hide file tree

Showing 37 changed files with 1,509 additions and 2,346 deletions.
diff --git a/src/app/showcase/components/messages/messagesdemo.html b/src/app/showcase/components/messages/messagesdemo.html
@@ -48,7 +48,7 @@ <h5>Inline Message</h5>
         <h5>Form Layout</h5>
         <div class="p-field p-fluid">
             <label for="username">Username</label>
-            <input id="username" type="username" aria-describedby="username-help" class="p-invalid" pInputText />
+            <input id="username" type="username" aria-describedby="username-help" class="ng-invalid ng-dirty" pInputText />
             <small id="username-help" class="p-invalid">Username is not available.</small>
         </div>
     </div>    
@@ -456,7 +456,7 @@ <h5>Dependencies</h5>
 &lt;h5&gt;Form Layout&lt;/h5&gt;
 &lt;div class="p-field p-fluid"&gt;
     &lt;label for="username"&gt;Username&lt;/label&gt;
-    &lt;input id="username" type="username" aria-describedby="username-help" class="p-invalid" pInputText /&gt;
+    &lt;input id="username" type="username" aria-describedby="username-help" class="ng-invalid ng-dirty" pInputText /&gt;
     &lt;small id="username-help" class="p-invalid"&gt;Username is not available.&lt;/small&gt;
 &lt;/div&gt;
 </app-code>

diff --git a/src/app/showcase/components/steps/personaldemo.ts b/src/app/showcase/components/steps/personaldemo.ts
@@ -18,18 +18,18 @@ import { Router } from '@angular/router';
                     <div class="p-fluid">
                         <div class="p-field">
                             <label for="firstname">Firstname</label>
-                            <input #firstname="ngModel" id="firstname" type="text" required pInputText [(ngModel)]="personalInformation.firstname" [ngClass]="{'p-invalid': (firstname.invalid && submitted) || (firstname.dirty && firstname.invalid)}"> 
-                            <small *ngIf="(firstname.invalid && submitted) || (firstname.dirty && firstname.invalid)" class="p-error">Firstname is required.</small>
+                            <input #firstname="ngModel" id="firstname" type="text" required pInputText [(ngModel)]="personalInformation.firstname" [ngClass]="{'ng-dirty': (firstname.invalid && submitted) || (firstname.dirty && firstname.invalid)}"> 
+                            <small *ngIf="(firstname.invalid && submitted) || (firstname.dirty && firstname.invalid)" class="p-invalid">Firstname is required.</small>
                         </div>
                         <div class="p-field">
                             <label for="lastname">Lastname</label>
-                            <input #lastname="ngModel" id="lastname" type="text" required pInputText [(ngModel)]="personalInformation.lastname" [ngClass]="{'p-invalid': (lastname.invalid && submitted) || (lastname.dirty && lastname.invalid)}"> 
-                            <small class="p-error" *ngIf="(lastname.invalid && submitted )|| (lastname.dirty && lastname.invalid)">Lastname is required.</small>
+                            <input #lastname="ngModel" id="lastname" type="text" required pInputText [(ngModel)]="personalInformation.lastname" [ngClass]="{'ng-dirty': (lastname.invalid && submitted) || (lastname.dirty && lastname.invalid)}"> 
+                            <small class="p-invalid" *ngIf="(lastname.invalid && submitted )|| (lastname.dirty && lastname.invalid)">Lastname is required.</small>
                         </div>
                         <div class="p-field">
                             <label for="age">Age</label>
-                            <input #age="ngModel" id="age" type="number" required pInputText [(ngModel)]="personalInformation.age" [ngClass]="{'p-invalid': (age.invalid && submitted) || (age.dirty && age.invalid)}"> 
-                            <small class="p-error" *ngIf="(age.invalid && submitted) || (age.dirty && age.invalid)">Age is required.</small>
+                            <input #age="ngModel" id="age" type="number" required pInputText [(ngModel)]="personalInformation.age" [ngClass]="{'ng-dirty': (age.invalid && submitted) || (age.dirty && age.invalid)}"> 
+                            <small class="p-invalid" *ngIf="(age.invalid && submitted) || (age.dirty && age.invalid)">Age is required.</small>
                         </div>
                     </div>
                 </ng-template>

diff --git a/src/app/showcase/components/steps/stepsdemo.html b/src/app/showcase/components/steps/stepsdemo.html
@@ -235,18 +235,18 @@ <h5>Dependencies</h5>
             &lt;div class="p-fluid"&gt;
                 &lt;div class="p-field"&gt;
                     &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
-                    &lt;input #firstname="ngModel" id="firstname" type="text" required pInputText [(ngModel)]="personalInformation.firstname" [ngClass]="&#123;'p-invalid': (firstname.invalid && submitted) || (firstname.dirty && firstname.invalid)&#125;"&gt; 
-                    &lt;small *ngIf="(firstname.invalid && submitted) || (firstname.dirty && firstname.invalid)" class="p-error"&gt;Firstname is required.&lt;/small&gt;
+                    &lt;input #firstname="ngModel" id="firstname" type="text" required pInputText [(ngModel)]="personalInformation.firstname" [ngClass]="&#123;'ng-dirty': (firstname.invalid && submitted) || (firstname.dirty && firstname.invalid)&#125;"&gt; 
+                    &lt;small *ngIf="(firstname.invalid && submitted) || (firstname.dirty && firstname.invalid)" class="p-invalid"&gt;Firstname is required.&lt;/small&gt;
                 &lt;/div&gt;
                 &lt;div class="p-field"&gt;
                     &lt;label for="lastname"&gt;Lastname&lt;/label&gt;
-                    &lt;input #lastname="ngModel" id="lastname" type="text" required pInputText [(ngModel)]="personalInformation.lastname" [ngClass]="&#123;'p-invalid': (lastname.invalid && submitted) || (lastname.dirty && lastname.invalid)&#125;"&gt; 
-                    &lt;small class="p-error" *ngIf="(lastname.invalid && submitted )|| (lastname.dirty && lastname.invalid)"&gt;Lastname is required.&lt;/small&gt;
+                    &lt;input #lastname="ngModel" id="lastname" type="text" required pInputText [(ngModel)]="personalInformation.lastname" [ngClass]="&#123;'ng-dirty': (lastname.invalid && submitted) || (lastname.dirty && lastname.invalid)&#125;"&gt; 
+                    &lt;small class="p-invalid" *ngIf="(lastname.invalid && submitted )|| (lastname.dirty && lastname.invalid)"&gt;Lastname is required.&lt;/small&gt;
                 &lt;/div&gt;
                 &lt;div class="p-field"&gt;
                     &lt;label for="age"&gt;Age&lt;/label&gt;
-                    &lt;input #age="ngModel" id="age" type="number" required pInputText [(ngModel)]="personalInformation.age" [ngClass]="&#123;'p-invalid': (age.invalid && submitted) || (age.dirty && age.invalid)&#125;"&gt; 
-                    &lt;small class="p-error" *ngIf="(age.invalid && submitted) || (age.dirty && age.invalid)"&gt;Age is required.&lt;/small&gt;
+                    &lt;input #age="ngModel" id="age" type="number" required pInputText [(ngModel)]="personalInformation.age" [ngClass]="&#123;'ng-dirty': (age.invalid && submitted) || (age.dirty && age.invalid)&#125;"&gt; 
+                    &lt;small class="p-invalid" *ngIf="(age.invalid && submitted) || (age.dirty && age.invalid)"&gt;Age is required.&lt;/small&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/ng-template&gt;

diff --git a/src/app/showcase/components/theming/theming.component.html b/src/app/showcase/components/theming/theming.component.html
@@ -122,13 +122,9 @@ <h5>Utility Classes</h5>
                     <td>p-link</td>
                     <td>Renders a button as a link.</td>
                 </tr>
-                <tr>
-                    <td>p-error</td>
-                    <td>Applies the invalid theme color to a text.</td>
-                </tr>
                 <tr>
                     <td>p-invalid</td>
-                    <td>Alias to p-error.</td>
+                    <td>Applies the invalid theme color to a text or a form element.</td>
                 </tr>
                 <tr>
                     <td>p-text-secondary</td>

diff --git a/src/assets/components/themes/arya-blue/theme.css b/src/assets/components/themes/arya-blue/theme.css
@@ -32,7 +32,7 @@
   opacity: 0.4;
 }
 
-.p-error, .p-invalid {
+.p-invalid {
   color: #ef9a9a;
 }
 
@@ -93,9 +93,6 @@
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
   margin-left: 0.5rem;
 }
-.p-autocomplete.p-error > .p-inputtext, .p-autocomplete.p-invalid > .p-inputtext {
-  border-color: #ef9a9a;
-}
 
 p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   border-color: #ef9a9a;
@@ -129,10 +126,6 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   background: rgba(100, 181, 246, 0.16);
 }
 
-.p-calendar.p-error > .p-inputtext, .p-calendar.p-invalid > .p-inputtext {
-  border-color: #ef9a9a;
-}
-
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -362,9 +355,6 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
-  border-color: #ef9a9a;
-}
 
 .p-cascadeselect-panel {
   background: #1e1e1e;
@@ -404,6 +394,10 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   font-size: 0.875rem;
 }
 
+p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
+  border-color: #ef9a9a;
+}
+
 .p-input-filled .p-cascadeselect {
   background: #383838;
 }
@@ -450,9 +444,6 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   background: #2396f2;
   color: #212529;
 }
-.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
-  border-color: #ef9a9a;
-}
 
 p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
   border-color: #ef9a9a;
@@ -507,9 +498,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
   padding: 0;
   margin: 0;
 }
-.p-chips.p-error > .p-inputtext, .p-chips.p-invalid > .p-inputtext {
-  border-color: #ef9a9a;
-}
 
 p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #ef9a9a;
@@ -630,9 +618,6 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   background: #1e1e1e;
   font-weight: 600;
 }
-.p-dropdown-panel.p-error, .p-dropdown-panel.p-invalid {
-  border-color: #ef9a9a;
-}
 
 p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
   border-color: #ef9a9a;
@@ -855,9 +840,6 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
 .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
   background: #43a5f4;
 }
-.p-inputswitch.p-error, .p-inputswitch.p-invalid {
-  border-color: #ef9a9a;
-}
 
 p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
   border-color: #ef9a9a;
@@ -883,7 +865,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
   box-shadow: 0 0 0 1px #93cbf9;
   border-color: #64B5F6;
 }
-.p-inputtext.p-error, .p-inputtext.p-invalid, .p-inputtext.ng-dirty.ng-invalid {
+.p-inputtext.ng-dirty.ng-invalid {
   border-color: #ef9a9a;
 }
 .p-inputtext.p-inputtext-sm {
@@ -1015,9 +997,6 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.03);
 }
-.p-listbox.p-error, .p-listbox.p-invalid {
-  border-color: #ef9a9a;
-}
 
 p-listbox.ng-dirty.ng-invalid > .p-listbox {
   border-color: #ef9a9a;
@@ -1062,9 +1041,6 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-multiselect.p-error, .p-multiselect.p-invalid {
-  border-color: #ef9a9a;
-}
 
 .p-inputwrapper-filled .p-multiselect.p-multiselect-chip .p-multiselect-label {
   padding: 0.25rem 0.5rem;
@@ -1213,9 +1189,6 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background: #2396f2;
   color: #212529;
 }
-.p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
-  border-color: #ef9a9a;
-}
 
 p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
   border-color: #ef9a9a;
@@ -1302,9 +1275,6 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
 .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
   color: #212529;
 }
-.p-selectbutton.p-error > .p-button, .p-selectbutton.p-invalid > .p-button {
-  border-color: #ef9a9a;
-}
 
 p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
   border-color: #ef9a9a;
@@ -1399,9 +1369,6 @@ p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
 .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
   color: #212529;
 }
-.p-togglebutton.p-button.p-error, .p-togglebutton.p-button.p-invalid {
-  border-color: #ef9a9a;
-}
 
 p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-color: #ef9a9a;

diff --git a/src/assets/components/themes/arya-green/theme.css b/src/assets/components/themes/arya-green/theme.css
@@ -32,7 +32,7 @@
   opacity: 0.4;
 }
 
-.p-error, .p-invalid {
+.p-invalid {
   color: #ef9a9a;
 }
 
@@ -93,9 +93,6 @@
 .p-autocomplete .p-autocomplete-multiple-container .p-autocomplete-token .p-autocomplete-token-icon {
   margin-left: 0.5rem;
 }
-.p-autocomplete.p-error > .p-inputtext, .p-autocomplete.p-invalid > .p-inputtext {
-  border-color: #ef9a9a;
-}
 
 p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   border-color: #ef9a9a;
@@ -129,10 +126,6 @@ p-autocomplete.ng-dirty.ng-invalid > .p-autocomplete > .p-inputtext {
   background: rgba(129, 199, 132, 0.16);
 }
 
-.p-calendar.p-error > .p-inputtext, .p-calendar.p-invalid > .p-inputtext {
-  border-color: #ef9a9a;
-}
-
 p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-color: #ef9a9a;
 }
@@ -362,9 +355,6 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-cascadeselect.p-error, .p-cascadeselect.p-invalid {
-  border-color: #ef9a9a;
-}
 
 .p-cascadeselect-panel {
   background: #1e1e1e;
@@ -404,6 +394,10 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   font-size: 0.875rem;
 }
 
+p-cascadeselect.ng-dirty.ng-invalid > .p-cascadeselect {
+  border-color: #ef9a9a;
+}
+
 .p-input-filled .p-cascadeselect {
   background: #383838;
 }
@@ -450,9 +444,6 @@ p-calendar.ng-dirty.ng-invalid > .p-calendar > .p-inputtext {
   background: #54b358;
   color: #212529;
 }
-.p-checkbox.p-error > .p-checkbox-box, .p-checkbox.p-invalid > .p-checkbox-box {
-  border-color: #ef9a9a;
-}
 
 p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
   border-color: #ef9a9a;
@@ -507,9 +498,6 @@ p-checkbox.ng-dirty.ng-invalid > .p-checkbox > .p-checkbox-box {
   padding: 0;
   margin: 0;
 }
-.p-chips.p-error > .p-inputtext, .p-chips.p-invalid > .p-inputtext {
-  border-color: #ef9a9a;
-}
 
 p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   border-color: #ef9a9a;
@@ -630,9 +618,6 @@ p-chips.ng-dirty.ng-invalid > .p-chips > .p-inputtext {
   background: #1e1e1e;
   font-weight: 600;
 }
-.p-dropdown-panel.p-error, .p-dropdown-panel.p-invalid {
-  border-color: #ef9a9a;
-}
 
 p-dropdown.ng-dirty.ng-invalid > .p-dropdown {
   border-color: #ef9a9a;
@@ -855,9 +840,6 @@ p-inputnumber.ng-dirty.ng-invalid > .p-inputnumber > .p-inputtext {
 .p-inputswitch.p-inputswitch-checked:not(.p-disabled):hover .p-inputswitch-slider {
   background: #6abd6e;
 }
-.p-inputswitch.p-error, .p-inputswitch.p-invalid {
-  border-color: #ef9a9a;
-}
 
 p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
   border-color: #ef9a9a;
@@ -883,7 +865,7 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
   box-shadow: 0 0 0 1px #a7d8a9;
   border-color: #81C784;
 }
-.p-inputtext.p-error, .p-inputtext.p-invalid, .p-inputtext.ng-dirty.ng-invalid {
+.p-inputtext.ng-dirty.ng-invalid {
   border-color: #ef9a9a;
 }
 .p-inputtext.p-inputtext-sm {
@@ -1015,9 +997,6 @@ p-inputswitch.ng-dirty.ng-invalid > .p-inputswitch {
   color: rgba(255, 255, 255, 0.87);
   background: rgba(255, 255, 255, 0.03);
 }
-.p-listbox.p-error, .p-listbox.p-invalid {
-  border-color: #ef9a9a;
-}
 
 p-listbox.ng-dirty.ng-invalid > .p-listbox {
   border-color: #ef9a9a;
@@ -1062,9 +1041,6 @@ p-listbox.ng-dirty.ng-invalid > .p-listbox {
   border-top-right-radius: 3px;
   border-bottom-right-radius: 3px;
 }
-.p-multiselect.p-error, .p-multiselect.p-invalid {
-  border-color: #ef9a9a;
-}
 
 .p-inputwrapper-filled .p-multiselect.p-multiselect-chip .p-multiselect-label {
   padding: 0.25rem 0.5rem;
@@ -1213,9 +1189,6 @@ p-multiselect.ng-dirty.ng-invalid > .p-multiselect {
   background: #54b358;
   color: #212529;
 }
-.p-radiobutton.p-error > .p-radiobutton-box, .p-radiobutton.p-invalid > .p-radiobutton-box {
-  border-color: #ef9a9a;
-}
 
 p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
   border-color: #ef9a9a;
@@ -1302,9 +1275,6 @@ p-radiobutton.ng-dirty.ng-invalid > .p-radiobutton > .p-radiobutton-box {
 .p-selectbutton .p-button.p-highlight:hover .p-button-icon-right {
   color: #212529;
 }
-.p-selectbutton.p-error > .p-button, .p-selectbutton.p-invalid > .p-button {
-  border-color: #ef9a9a;
-}
 
 p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
   border-color: #ef9a9a;
@@ -1399,9 +1369,6 @@ p-selectbutton.ng-dirty.ng-invalid > .p-selectbutton > .p-button {
 .p-togglebutton.p-button.p-highlight:hover .p-button-icon-right {
   color: #212529;
 }
-.p-togglebutton.p-button.p-error, .p-togglebutton.p-button.p-invalid {
-  border-color: #ef9a9a;
-}
 
 p-togglebutton.ng-dirty.ng-invalid > .p-togglebutton.p-button {
   border-color: #ef9a9a;