vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

Restored p-error for error texts and p-invalid for invalid form elements

pull/864/head
Cagatay Civici 2021-01-13 18:20:46 +03:00
parent 0afaa3777a
commit 6f7880f633
41 changed files with 48 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
CHANGELOG.md
View File

@ -8,7 +8,6 @@
- New Viva Theme [\#856](https://github.com/primefaces/primevue/issues/856) - 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) - 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) - 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) - Touch support for Slider [\#757](https://github.com/primefaces/primevue/issues/757)

2
public/themes/arya-blue/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.4; opacity: 0.4;
} }
.p-invalid { .p-error {
color: #ef9a9a; color: #ef9a9a;
} }

2
public/themes/arya-green/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.4; opacity: 0.4;
} }
.p-invalid { .p-error {
color: #ef9a9a; color: #ef9a9a;
} }

2
public/themes/arya-orange/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.4; opacity: 0.4;
} }
.p-invalid { .p-error {
color: #ef9a9a; color: #ef9a9a;
} }

2
public/themes/arya-purple/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.4; opacity: 0.4;
} }
.p-invalid { .p-error {
color: #ef9a9a; color: #ef9a9a;
} }

2
public/themes/bootstrap4-dark-blue/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.65; opacity: 0.65;
} }
.p-invalid { .p-error {
color: #f19ea6; color: #f19ea6;
} }

2
public/themes/bootstrap4-dark-purple/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.65; opacity: 0.65;
} }
.p-invalid { .p-error {
color: #f19ea6; color: #f19ea6;
} }

2
public/themes/bootstrap4-light-blue/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.65; opacity: 0.65;
} }
.p-invalid { .p-error {
color: #dc3545; color: #dc3545;
} }

2
public/themes/bootstrap4-light-purple/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.65; opacity: 0.65;
} }
.p-invalid { .p-error {
color: #dc3545; color: #dc3545;
} }

2
public/themes/fluent-light/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.6; opacity: 0.6;
} }
.p-invalid { .p-error {
color: #a4252c; color: #a4252c;
} }

2
public/themes/luna-amber/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.5; opacity: 0.5;
} }
.p-invalid { .p-error {
color: #e57373; color: #e57373;
} }

2
public/themes/luna-blue/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.5; opacity: 0.5;
} }
.p-invalid { .p-error {
color: #e57373; color: #e57373;
} }

2
public/themes/luna-green/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.5; opacity: 0.5;
} }
.p-invalid { .p-error {
color: #e57373; color: #e57373;
} }

2
public/themes/luna-pink/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.5; opacity: 0.5;
} }
.p-invalid { .p-error {
color: #e57373; color: #e57373;
} }

2
public/themes/md-dark-deeppurple/theme.css
View File

@ -56,7 +56,7 @@
opacity: 0.38; opacity: 0.38;
} }
.p-invalid { .p-error {
color: #f44435; color: #f44435;
} }

2
public/themes/md-dark-indigo/theme.css
View File

@ -56,7 +56,7 @@
opacity: 0.38; opacity: 0.38;
} }
.p-invalid { .p-error {
color: #f44435; color: #f44435;
} }

2
public/themes/md-light-deeppurple/theme.css
View File

@ -56,7 +56,7 @@
opacity: 0.38; opacity: 0.38;
} }
.p-invalid { .p-error {
color: #B00020; color: #B00020;
} }

2
public/themes/md-light-indigo/theme.css
View File

@ -56,7 +56,7 @@
opacity: 0.38; opacity: 0.38;
} }
.p-invalid { .p-error {
color: #B00020; color: #B00020;
} }

2
public/themes/mdc-dark-deeppurple/theme.css
View File

@ -56,7 +56,7 @@
opacity: 0.38; opacity: 0.38;
} }
.p-invalid { .p-error {
color: #f44435; color: #f44435;
} }

2
public/themes/mdc-dark-indigo/theme.css
View File

@ -56,7 +56,7 @@
opacity: 0.38; opacity: 0.38;
} }
.p-invalid { .p-error {
color: #f44435; color: #f44435;
} }

2
public/themes/mdc-light-deeppurple/theme.css
View File

@ -56,7 +56,7 @@
opacity: 0.38; opacity: 0.38;
} }
.p-invalid { .p-error {
color: #B00020; color: #B00020;
} }

2
public/themes/mdc-light-indigo/theme.css
View File

@ -56,7 +56,7 @@
opacity: 0.38; opacity: 0.38;
} }
.p-invalid { .p-error {
color: #B00020; color: #B00020;
} }

2
public/themes/nova-accent/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.5; opacity: 0.5;
} }
.p-invalid { .p-error {
color: #a80000; color: #a80000;
} }

2
public/themes/nova-alt/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.5; opacity: 0.5;
} }
.p-invalid { .p-error {
color: #a80000; color: #a80000;
} }

2
public/themes/nova-vue/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.5; opacity: 0.5;
} }
.p-invalid { .p-error {
color: #a80000; color: #a80000;
} }

2
public/themes/nova/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.5; opacity: 0.5;
} }
.p-invalid { .p-error {
color: #a80000; color: #a80000;
} }

2
public/themes/rhea/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.5; opacity: 0.5;
} }
.p-invalid { .p-error {
color: #e7a3a3; color: #e7a3a3;
} }

2
public/themes/saga-blue/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.6; opacity: 0.6;
} }
.p-invalid { .p-error {
color: #f44336; color: #f44336;
} }

2
public/themes/saga-green/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.6; opacity: 0.6;
} }
.p-invalid { .p-error {
color: #f44336; color: #f44336;
} }

2
public/themes/saga-orange/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.6; opacity: 0.6;
} }
.p-invalid { .p-error {
color: #f44336; color: #f44336;
} }

2
public/themes/saga-purple/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.6; opacity: 0.6;
} }
.p-invalid { .p-error {
color: #f44336; color: #f44336;
} }

2
public/themes/vela-blue/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.4; opacity: 0.4;
} }
.p-invalid { .p-error {
color: #ef9a9a; color: #ef9a9a;
} }

2
public/themes/vela-green/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.4; opacity: 0.4;
} }
.p-invalid { .p-error {
color: #ef9a9a; color: #ef9a9a;
} }

2
public/themes/vela-orange/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.4; opacity: 0.4;
} }
.p-invalid { .p-error {
color: #ef9a9a; color: #ef9a9a;
} }

2
public/themes/vela-purple/theme.css
View File

@ -32,7 +32,7 @@
opacity: 0.4; opacity: 0.4;
} }
.p-invalid { .p-error {
color: #ef9a9a; color: #ef9a9a;
} }

4
src/views/datatable/DataTableCrudDemo.vue
View File

@ -73,7 +73,7 @@
<div class="p-field"> <div class="p-field">
<label for="name">Name</label> <label for="name">Name</label>
<InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted && !product.name}" /> <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>
<div class="p-field"> <div class="p-field">
<label for="description">Description</label> <label for="description">Description</label>
@ -211,7 +211,7 @@
&lt;div class="p-field"&gt; &lt;div class="p-field"&gt;
&lt;label for="name"&gt;Name&lt;/label&gt; &lt;label for="name"&gt;Name&lt;/label&gt;
&lt;InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted &amp;&amp; !product.name}" /&gt; &lt;InputText id="name" v-model.trim="product.name" required="true" autofocus :class="{'p-invalid': submitted &amp;&amp; !product.name}" /&gt;
&lt;small class="p-invalid" v-if="submitted &amp;&amp; !product.name"&gt;Name is required.&lt;/small&gt; &lt;small class="p-error" v-if="submitted &amp;&amp; !product.name"&gt;Name is required.&lt;/small&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field"&gt; &lt;div class="p-field"&gt;
&lt;label for="description"&gt;Description&lt;/label&gt; &lt;label for="description"&gt;Description&lt;/label&gt;

2
src/views/inputtext/InputTextDemo.vue
View File

@ -43,7 +43,7 @@
<div class="p-field"> <div class="p-field">
<label for="username2">Username</label> <label for="username2">Username</label>
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" /> <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> </div>
<h5>Disabled</h5> <h5>Disabled</h5>

4
src/views/inputtext/InputTextDoc.vue
View File

@ -193,7 +193,7 @@ import InputText from 'primevue/inputtext';
&lt;div class="p-field"&gt; &lt;div class="p-field"&gt;
&lt;label for="username2"&gt;Username&lt;/label&gt; &lt;label for="username2"&gt;Username&lt;/label&gt;
&lt;InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" /&gt; &lt;InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" /&gt;
&lt;small id="username2-help" class="p-invalid"&gt;Username is not available.&lt;/small&gt; &lt;small id="username2-help" class="p-error"&gt;Username is not available.&lt;/small&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;h5&gt;Disabled&lt;/h5&gt; &lt;h5&gt;Disabled&lt;/h5&gt;
@ -273,7 +273,7 @@ export default {
<div class="p-field"> <div class="p-field">
<label for="username2">Username</label> <label for="username2">Username</label>
<InputText id="username2" type="username" aria-describedby="username2-help" class="p-invalid" /> <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> </div>
<h5>Disabled</h5> <h5>Disabled</h5>

4
src/views/steps/PersonalDemo.vue
View File

@ -12,12 +12,12 @@
<div class="p-field"> <div class="p-field">
<label for="firstname">Firstname</label> <label for="firstname">Firstname</label>
<InputText id="firstname" v-model="firstname" :class="{'p-invalid': validationErrors.firstname && submitted}" /> <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>
<div class="p-field"> <div class="p-field">
<label for="lastname">Lastname</label> <label for="lastname">Lastname</label>
<InputText id="lastname" v-model="lastname" :class="{'p-invalid': validationErrors.lastname && submitted}" /> <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>
<div class="p-field"> <div class="p-field">
<label for="age">Age</label> <label for="age">Age</label>

4
src/views/steps/StepsDoc.vue
View File

@ -208,12 +208,12 @@ export default {
&lt;div class="p-field"&gt; &lt;div class="p-field"&gt;
&lt;label for="firstname"&gt;Firstname&lt;/label&gt; &lt;label for="firstname"&gt;Firstname&lt;/label&gt;
&lt;InputText id="firstname" v-model="firstname" :class="{'p-invalid': validationErrors.firstname && submitted}" /&gt; &lt;InputText id="firstname" v-model="firstname" :class="{'p-invalid': validationErrors.firstname && submitted}" /&gt;
&lt;small v-show="validationErrors.firstname && submitted" class="p-invalid"&gt;Firstname is required.&lt;/small&gt; &lt;small v-show="validationErrors.firstname && submitted" class="p-error"&gt;Firstname is required.&lt;/small&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field"&gt; &lt;div class="p-field"&gt;
&lt;label for="lastname"&gt;Lastname&lt;/label&gt; &lt;label for="lastname"&gt;Lastname&lt;/label&gt;
&lt;InputText id="lastname" v-model="lastname" :class="{'p-invalid': validationErrors.lastname && submitted}" /&gt; &lt;InputText id="lastname" v-model="lastname" :class="{'p-invalid': validationErrors.lastname && submitted}" /&gt;
&lt;small v-show="validationErrors.lastname && submitted" class="p-invalid"&gt;Lastname is required.&lt;/small&gt; &lt;small v-show="validationErrors.lastname && submitted" class="p-error"&gt;Lastname is required.&lt;/small&gt;
&lt;/div&gt; &lt;/div&gt;
&lt;div class="p-field"&gt; &lt;div class="p-field"&gt;
&lt;label for="age"&gt;Age&lt;/label&gt; &lt;label for="age"&gt;Age&lt;/label&gt;

6
src/views/theming/Theming.vue
View File

@ -106,10 +106,14 @@ html {
<tr> <tr>
<td>p-link</td> <td>p-link</td>
<td>Renders a button as a link.</td> <td>Renders a button as a link.</td>
</tr>
<tr>
<td>p-error</td>
<td>Indicates an error text.</td>
</tr> </tr>
<tr> <tr>
<td>p-invalid</td> <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>
<tr> <tr>
<td>p-text-secondary</td> <td>p-text-secondary</td>