Restored p-error for error texts and p-invalid for invalid form elements
Cagatay Civici
parent
0afaa3777a
commit
6f7880f633
|
|
@ -8,7 +8,6 @@
|
|||
|
||||
- New Viva Theme [\#856](https://github.com/primefaces/primevue/issues/856)
|
||||
- Improve invalid validation visuals on material themes [\#855](https://github.com/primefaces/primevue/issues/855)
|
||||
- Remove p-error in favor of p-invalid [\#854](https://github.com/primefaces/primevue/issues/854)
|
||||
- New Lazy DataTable Demo with Remote Source [\#841](https://github.com/primefaces/primevue/issues/841)
|
||||
- Touch support for Slider [\#757](https://github.com/primefaces/primevue/issues/757)
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #ef9a9a;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #ef9a9a;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #ef9a9a;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #ef9a9a;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #f19ea6;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #f19ea6;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.65;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #dc3545;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #a4252c;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #e57373;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #f44435;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #f44435;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #B00020;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #B00020;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #f44435;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #f44435;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #B00020;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -56,7 +56,7 @@
|
|||
opacity: 0.38;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #B00020;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #a80000;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #a80000;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #a80000;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #a80000;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.5;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #e7a3a3;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #f44336;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #ef9a9a;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #ef9a9a;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #ef9a9a;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.p-invalid {
|
||||
.p-error {
|
||||
color: #ef9a9a;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -73,7 +73,7 @@
|
|||
<div class="p-field">
|
||||
<label for="name">Name</label>
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" />
|
||||
<small class="p-invalid" v-if="submitted && !product.name">Name is required.</small>
|
||||
<small class="p-error" v-if="submitted && !product.name">Name is required.</small>
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="description">Description</label>
|
||||
|
|
@ -211,7 +211,7 @@
|
|||
<div class="p-field">
|
||||
<label for="name">Name</label>
|
||||
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" />
|
||||
<small class="p-invalid" v-if="submitted && !product.name">Name is required.</small>
|
||||
<small class="p-error" v-if="submitted && !product.name">Name is required.</small>
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="description">Description</label>
|
||||
|
|
|
|||
|
|
@ -43,7 +43,7 @@
|
|||
<div class="p-field">
|
||||
<label for="username2">Username</label>
|
||||
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
|
||||
<small id="username2-help" class="p-invalid">Username is not available.</small>
|
||||
<small id="username2-help" class="p-error">Username is not available.</small>
|
||||
</div>
|
||||
|
||||
<h5>Disabled</h5>
|
||||
|
|
|
|||
|
|
@ -193,7 +193,7 @@ import InputText from 'primevue/inputtext';
|
|||
<div class="p-field">
|
||||
<label for="username2">Username</label>
|
||||
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
|
||||
<small id="username2-help" class="p-invalid">Username is not available.</small>
|
||||
<small id="username2-help" class="p-error">Username is not available.</small>
|
||||
</div>
|
||||
|
||||
<h5>Disabled</h5>
|
||||
|
|
@ -273,7 +273,7 @@ export default {
|
|||
<div class="p-field">
|
||||
<label for="username2">Username</label>
|
||||
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" />
|
||||
<small id="username2-help" class="p-invalid">Username is not available.</small>
|
||||
<small id="username2-help" class="p-error">Username is not available.</small>
|
||||
</div>
|
||||
|
||||
<h5>Disabled</h5>
|
||||
|
|
|
|||
|
|
@ -12,12 +12,12 @@
|
|||
<div class="p-field">
|
||||
<label for="firstname">Firstname</label>
|
||||
<InputText id="firstname" v-model="firstname" :class="{'p-invalid': validationErrors.firstname && submitted}" />
|
||||
<small v-show="validationErrors.firstname && submitted" class="p-invalid">Firstname is required.</small>
|
||||
<small v-show="validationErrors.firstname && submitted" class="p-error">Firstname is required.</small>
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="lastname">Lastname</label>
|
||||
<InputText id="lastname" v-model="lastname" :class="{'p-invalid': validationErrors.lastname && submitted}" />
|
||||
<small v-show="validationErrors.lastname && submitted" class="p-invalid">Lastname is required.</small>
|
||||
<small v-show="validationErrors.lastname && submitted" class="p-error">Lastname is required.</small>
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="age">Age</label>
|
||||
|
|
|
|||
|
|
@ -208,12 +208,12 @@ export default {
|
|||
<div class="p-field">
|
||||
<label for="firstname">Firstname</label>
|
||||
<InputText id="firstname" v-model="firstname" :class="{'p-invalid': validationErrors.firstname && submitted}" />
|
||||
<small v-show="validationErrors.firstname && submitted" class="p-invalid">Firstname is required.</small>
|
||||
<small v-show="validationErrors.firstname && submitted" class="p-error">Firstname is required.</small>
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="lastname">Lastname</label>
|
||||
<InputText id="lastname" v-model="lastname" :class="{'p-invalid': validationErrors.lastname && submitted}" />
|
||||
<small v-show="validationErrors.lastname && submitted" class="p-invalid">Lastname is required.</small>
|
||||
<small v-show="validationErrors.lastname && submitted" class="p-error">Lastname is required.</small>
|
||||
</div>
|
||||
<div class="p-field">
|
||||
<label for="age">Age</label>
|
||||
|
|
|
|||
|
|
@ -106,10 +106,14 @@ html {
|
|||
<tr>
|
||||
<td>p-link</td>
|
||||
<td>Renders a button as a link.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-error</td>
|
||||
<td>Indicates an error text.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-invalid</td>
|
||||
<td>Applies the invalid theme color to a text or a form element.</td>
|
||||
<td>Styles an form element as invalid.</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>p-text-secondary</td>
|
||||
|
|
|
|||
Loading…
Reference in New Issue