diff --git a/CHANGELOG.md b/CHANGELOG.md index 3c6cf4e59..52c0ec83b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -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) diff --git a/public/themes/arya-blue/theme.css b/public/themes/arya-blue/theme.css index 62b7689f6..e5c2ebad9 100644 --- a/public/themes/arya-blue/theme.css +++ b/public/themes/arya-blue/theme.css @@ -32,7 +32,7 @@ opacity: 0.4; } -.p-invalid { +.p-error { color: #ef9a9a; } diff --git a/public/themes/arya-green/theme.css b/public/themes/arya-green/theme.css index 660983bd7..aa9408dce 100644 --- a/public/themes/arya-green/theme.css +++ b/public/themes/arya-green/theme.css @@ -32,7 +32,7 @@ opacity: 0.4; } -.p-invalid { +.p-error { color: #ef9a9a; } diff --git a/public/themes/arya-orange/theme.css b/public/themes/arya-orange/theme.css index 8331740e2..764ad771d 100644 --- a/public/themes/arya-orange/theme.css +++ b/public/themes/arya-orange/theme.css @@ -32,7 +32,7 @@ opacity: 0.4; } -.p-invalid { +.p-error { color: #ef9a9a; } diff --git a/public/themes/arya-purple/theme.css b/public/themes/arya-purple/theme.css index 180570e86..f7b299e6a 100644 --- a/public/themes/arya-purple/theme.css +++ b/public/themes/arya-purple/theme.css @@ -32,7 +32,7 @@ opacity: 0.4; } -.p-invalid { +.p-error { color: #ef9a9a; } diff --git a/public/themes/bootstrap4-dark-blue/theme.css b/public/themes/bootstrap4-dark-blue/theme.css index 8f31ee3c6..c0949ae1b 100644 --- a/public/themes/bootstrap4-dark-blue/theme.css +++ b/public/themes/bootstrap4-dark-blue/theme.css @@ -32,7 +32,7 @@ opacity: 0.65; } -.p-invalid { +.p-error { color: #f19ea6; } diff --git a/public/themes/bootstrap4-dark-purple/theme.css b/public/themes/bootstrap4-dark-purple/theme.css index 287c2988e..ef53cb47a 100644 --- a/public/themes/bootstrap4-dark-purple/theme.css +++ b/public/themes/bootstrap4-dark-purple/theme.css @@ -32,7 +32,7 @@ opacity: 0.65; } -.p-invalid { +.p-error { color: #f19ea6; } diff --git a/public/themes/bootstrap4-light-blue/theme.css b/public/themes/bootstrap4-light-blue/theme.css index ab2bcdd66..283eefef6 100644 --- a/public/themes/bootstrap4-light-blue/theme.css +++ b/public/themes/bootstrap4-light-blue/theme.css @@ -32,7 +32,7 @@ opacity: 0.65; } -.p-invalid { +.p-error { color: #dc3545; } diff --git a/public/themes/bootstrap4-light-purple/theme.css b/public/themes/bootstrap4-light-purple/theme.css index 4e895e62f..fd7f1620c 100644 --- a/public/themes/bootstrap4-light-purple/theme.css +++ b/public/themes/bootstrap4-light-purple/theme.css @@ -32,7 +32,7 @@ opacity: 0.65; } -.p-invalid { +.p-error { color: #dc3545; } diff --git a/public/themes/fluent-light/theme.css b/public/themes/fluent-light/theme.css index 18d7f32e1..3ac2717eb 100644 --- a/public/themes/fluent-light/theme.css +++ b/public/themes/fluent-light/theme.css @@ -32,7 +32,7 @@ opacity: 0.6; } -.p-invalid { +.p-error { color: #a4252c; } diff --git a/public/themes/luna-amber/theme.css b/public/themes/luna-amber/theme.css index d1645e2e4..f0d638c2f 100644 --- a/public/themes/luna-amber/theme.css +++ b/public/themes/luna-amber/theme.css @@ -32,7 +32,7 @@ opacity: 0.5; } -.p-invalid { +.p-error { color: #e57373; } diff --git a/public/themes/luna-blue/theme.css b/public/themes/luna-blue/theme.css index 56a783027..1b41db997 100644 --- a/public/themes/luna-blue/theme.css +++ b/public/themes/luna-blue/theme.css @@ -32,7 +32,7 @@ opacity: 0.5; } -.p-invalid { +.p-error { color: #e57373; } diff --git a/public/themes/luna-green/theme.css b/public/themes/luna-green/theme.css index ca1f1785b..6608067e4 100644 --- a/public/themes/luna-green/theme.css +++ b/public/themes/luna-green/theme.css @@ -32,7 +32,7 @@ opacity: 0.5; } -.p-invalid { +.p-error { color: #e57373; } diff --git a/public/themes/luna-pink/theme.css b/public/themes/luna-pink/theme.css index ada10512a..5df7f1e11 100644 --- a/public/themes/luna-pink/theme.css +++ b/public/themes/luna-pink/theme.css @@ -32,7 +32,7 @@ opacity: 0.5; } -.p-invalid { +.p-error { color: #e57373; } diff --git a/public/themes/md-dark-deeppurple/theme.css b/public/themes/md-dark-deeppurple/theme.css index 5d50cce5d..f203f24e7 100644 --- a/public/themes/md-dark-deeppurple/theme.css +++ b/public/themes/md-dark-deeppurple/theme.css @@ -56,7 +56,7 @@ opacity: 0.38; } -.p-invalid { +.p-error { color: #f44435; } diff --git a/public/themes/md-dark-indigo/theme.css b/public/themes/md-dark-indigo/theme.css index dd303d43d..511c7f7f4 100644 --- a/public/themes/md-dark-indigo/theme.css +++ b/public/themes/md-dark-indigo/theme.css @@ -56,7 +56,7 @@ opacity: 0.38; } -.p-invalid { +.p-error { color: #f44435; } diff --git a/public/themes/md-light-deeppurple/theme.css b/public/themes/md-light-deeppurple/theme.css index 026aab42e..1cc707228 100644 --- a/public/themes/md-light-deeppurple/theme.css +++ b/public/themes/md-light-deeppurple/theme.css @@ -56,7 +56,7 @@ opacity: 0.38; } -.p-invalid { +.p-error { color: #B00020; } diff --git a/public/themes/md-light-indigo/theme.css b/public/themes/md-light-indigo/theme.css index bb6e38fc4..435f97ef3 100644 --- a/public/themes/md-light-indigo/theme.css +++ b/public/themes/md-light-indigo/theme.css @@ -56,7 +56,7 @@ opacity: 0.38; } -.p-invalid { +.p-error { color: #B00020; } diff --git a/public/themes/mdc-dark-deeppurple/theme.css b/public/themes/mdc-dark-deeppurple/theme.css index 623550b43..7c6eee2a7 100644 --- a/public/themes/mdc-dark-deeppurple/theme.css +++ b/public/themes/mdc-dark-deeppurple/theme.css @@ -56,7 +56,7 @@ opacity: 0.38; } -.p-invalid { +.p-error { color: #f44435; } diff --git a/public/themes/mdc-dark-indigo/theme.css b/public/themes/mdc-dark-indigo/theme.css index 277fdcd9f..71933d264 100644 --- a/public/themes/mdc-dark-indigo/theme.css +++ b/public/themes/mdc-dark-indigo/theme.css @@ -56,7 +56,7 @@ opacity: 0.38; } -.p-invalid { +.p-error { color: #f44435; } diff --git a/public/themes/mdc-light-deeppurple/theme.css b/public/themes/mdc-light-deeppurple/theme.css index aeb891640..841926e1d 100644 --- a/public/themes/mdc-light-deeppurple/theme.css +++ b/public/themes/mdc-light-deeppurple/theme.css @@ -56,7 +56,7 @@ opacity: 0.38; } -.p-invalid { +.p-error { color: #B00020; } diff --git a/public/themes/mdc-light-indigo/theme.css b/public/themes/mdc-light-indigo/theme.css index 8622d3ec3..7b2a5c75b 100644 --- a/public/themes/mdc-light-indigo/theme.css +++ b/public/themes/mdc-light-indigo/theme.css @@ -56,7 +56,7 @@ opacity: 0.38; } -.p-invalid { +.p-error { color: #B00020; } diff --git a/public/themes/nova-accent/theme.css b/public/themes/nova-accent/theme.css index 3cf0a7656..d8836704d 100644 --- a/public/themes/nova-accent/theme.css +++ b/public/themes/nova-accent/theme.css @@ -32,7 +32,7 @@ opacity: 0.5; } -.p-invalid { +.p-error { color: #a80000; } diff --git a/public/themes/nova-alt/theme.css b/public/themes/nova-alt/theme.css index a96e04f21..7aa6ddfe5 100644 --- a/public/themes/nova-alt/theme.css +++ b/public/themes/nova-alt/theme.css @@ -32,7 +32,7 @@ opacity: 0.5; } -.p-invalid { +.p-error { color: #a80000; } diff --git a/public/themes/nova-vue/theme.css b/public/themes/nova-vue/theme.css index e7cfd9f17..7da3a781b 100644 --- a/public/themes/nova-vue/theme.css +++ b/public/themes/nova-vue/theme.css @@ -32,7 +32,7 @@ opacity: 0.5; } -.p-invalid { +.p-error { color: #a80000; } diff --git a/public/themes/nova/theme.css b/public/themes/nova/theme.css index 5cb6234ab..8d520d257 100644 --- a/public/themes/nova/theme.css +++ b/public/themes/nova/theme.css @@ -32,7 +32,7 @@ opacity: 0.5; } -.p-invalid { +.p-error { color: #a80000; } diff --git a/public/themes/rhea/theme.css b/public/themes/rhea/theme.css index 057b144fc..b6824a734 100644 --- a/public/themes/rhea/theme.css +++ b/public/themes/rhea/theme.css @@ -32,7 +32,7 @@ opacity: 0.5; } -.p-invalid { +.p-error { color: #e7a3a3; } diff --git a/public/themes/saga-blue/theme.css b/public/themes/saga-blue/theme.css index 409bb57cd..1dee5f5a4 100644 --- a/public/themes/saga-blue/theme.css +++ b/public/themes/saga-blue/theme.css @@ -32,7 +32,7 @@ opacity: 0.6; } -.p-invalid { +.p-error { color: #f44336; } diff --git a/public/themes/saga-green/theme.css b/public/themes/saga-green/theme.css index 2c4be7061..a515afd3e 100644 --- a/public/themes/saga-green/theme.css +++ b/public/themes/saga-green/theme.css @@ -32,7 +32,7 @@ opacity: 0.6; } -.p-invalid { +.p-error { color: #f44336; } diff --git a/public/themes/saga-orange/theme.css b/public/themes/saga-orange/theme.css index db6f89425..e9eefed9c 100644 --- a/public/themes/saga-orange/theme.css +++ b/public/themes/saga-orange/theme.css @@ -32,7 +32,7 @@ opacity: 0.6; } -.p-invalid { +.p-error { color: #f44336; } diff --git a/public/themes/saga-purple/theme.css b/public/themes/saga-purple/theme.css index 9603af9d7..6f170d17f 100644 --- a/public/themes/saga-purple/theme.css +++ b/public/themes/saga-purple/theme.css @@ -32,7 +32,7 @@ opacity: 0.6; } -.p-invalid { +.p-error { color: #f44336; } diff --git a/public/themes/vela-blue/theme.css b/public/themes/vela-blue/theme.css index 26c4543ac..19553390c 100644 --- a/public/themes/vela-blue/theme.css +++ b/public/themes/vela-blue/theme.css @@ -32,7 +32,7 @@ opacity: 0.4; } -.p-invalid { +.p-error { color: #ef9a9a; } diff --git a/public/themes/vela-green/theme.css b/public/themes/vela-green/theme.css index b64cebcc7..a241d666d 100644 --- a/public/themes/vela-green/theme.css +++ b/public/themes/vela-green/theme.css @@ -32,7 +32,7 @@ opacity: 0.4; } -.p-invalid { +.p-error { color: #ef9a9a; } diff --git a/public/themes/vela-orange/theme.css b/public/themes/vela-orange/theme.css index acf3daeed..2327c17fd 100644 --- a/public/themes/vela-orange/theme.css +++ b/public/themes/vela-orange/theme.css @@ -32,7 +32,7 @@ opacity: 0.4; } -.p-invalid { +.p-error { color: #ef9a9a; } diff --git a/public/themes/vela-purple/theme.css b/public/themes/vela-purple/theme.css index 8712614fd..ff529c685 100644 --- a/public/themes/vela-purple/theme.css +++ b/public/themes/vela-purple/theme.css @@ -32,7 +32,7 @@ opacity: 0.4; } -.p-invalid { +.p-error { color: #ef9a9a; } diff --git a/src/views/datatable/DataTableCrudDemo.vue b/src/views/datatable/DataTableCrudDemo.vue index 888584fae..9f2abef16 100755 --- a/src/views/datatable/DataTableCrudDemo.vue +++ b/src/views/datatable/DataTableCrudDemo.vue @@ -73,7 +73,7 @@
- Name is required. + Name is required.
@@ -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> diff --git a/src/views/inputtext/InputTextDemo.vue b/src/views/inputtext/InputTextDemo.vue index 9335cb3bc..152f8b349 100755 --- a/src/views/inputtext/InputTextDemo.vue +++ b/src/views/inputtext/InputTextDemo.vue @@ -43,7 +43,7 @@
- Username is not available. + Username is not available.
Disabled
diff --git a/src/views/inputtext/InputTextDoc.vue b/src/views/inputtext/InputTextDoc.vue index d9d0988f2..4e2250842 100755 --- a/src/views/inputtext/InputTextDoc.vue +++ b/src/views/inputtext/InputTextDoc.vue @@ -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 {
- Username is not available. + Username is not available.
Disabled
diff --git a/src/views/steps/PersonalDemo.vue b/src/views/steps/PersonalDemo.vue index f5e74cd62..b24f0367b 100755 --- a/src/views/steps/PersonalDemo.vue +++ b/src/views/steps/PersonalDemo.vue @@ -12,12 +12,12 @@
- Firstname is required. + Firstname is required.
- Lastname is required. + Lastname is required.
diff --git a/src/views/steps/StepsDoc.vue b/src/views/steps/StepsDoc.vue index 2f96ae0aa..0ffb0731f 100755 --- a/src/views/steps/StepsDoc.vue +++ b/src/views/steps/StepsDoc.vue @@ -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> diff --git a/src/views/theming/Theming.vue b/src/views/theming/Theming.vue index 3baf1bdb1..743997587 100755 --- a/src/views/theming/Theming.vue +++ b/src/views/theming/Theming.vue @@ -106,10 +106,14 @@ html { p-link Renders a button as a link. + + + p-error + Indicates an error text. p-invalid - Applies the invalid theme color to a text or a form element. + Styles an form element as invalid. p-text-secondary