feat: update form validation states and messages (#2260)

* feat: update form validation states and messages * add PR review fixes
SAP · Apr 7, 2020 · d7c06dc · d7c06dc
1 parent 9e96c16
commit d7c06dc
Show file tree

Hide file tree

Showing 35 changed files with 119 additions and 79 deletions.
diff --git a/apps/docs/src/app/core/component-docs/checkbox/checkbox-docs.component.html b/apps/docs/src/app/core/component-docs/checkbox/checkbox-docs.component.html
@@ -86,7 +86,7 @@
     <ul>
         <li style="margin-bottom: .5rem;">
             Modifies visual appearance of checkbox <br>
-            <code>[state] = 'valid' | 'invalid' | 'information' | 'warning'</code>
+            <code>[state] = 'success' | 'error' | 'information' | 'warning'</code>
         </li>
         <li style="margin-bottom: .5rem;">
             Disables control <br>

diff --git a/apps/docs/src/app/core/component-docs/checkbox/examples/checkbox-states-example.component.ts b/apps/docs/src/app/core/component-docs/checkbox/examples/checkbox-states-example.component.ts
@@ -7,9 +7,9 @@ import {Component} from '@angular/core';
             States:
             <fd-checkbox [(ngModel)]="checkboxValue1" label="No state"></fd-checkbox>
             <fd-checkbox [(ngModel)]="checkboxValue2" state="information" label="Info state"></fd-checkbox>
-            <fd-checkbox [(ngModel)]="checkboxValue3" state="valid" label="Valid state"></fd-checkbox>
+            <fd-checkbox [(ngModel)]="checkboxValue3" state="success" label="Success state"></fd-checkbox>
             <fd-checkbox [(ngModel)]="checkboxValue4" state="warning" label="Warning state"></fd-checkbox>
-            <fd-checkbox [(ngModel)]="checkboxValue5" state="invalid" label="Invalid state"></fd-checkbox>
+            <fd-checkbox [(ngModel)]="checkboxValue5" state="error" label="Error state"></fd-checkbox>
         </div>
         <div>
             Disabled:

diff --git a/.../app/core/component-docs/date-picker/examples/date-picker-allow-null-example.component.ts b/.../app/core/component-docs/date-picker/examples/date-picker-allow-null-example.component.ts
@@ -4,7 +4,7 @@ import { DatePickerComponent, FdDate } from '@fundamental-ngx/core';
 @Component({
     selector: 'fd-date-picker-allow-null-example',
     template: `
-        <fd-date-picker [allowNull]="false" [type]="'single'" [(ngModel)]="date" [state]="isInvalid() ? 'invalid' : 'valid'"></fd-date-picker>
+        <fd-date-picker [allowNull]="false" [type]="'single'" [(ngModel)]="date" [state]="isInvalid() ? 'error' : 'success'"></fd-date-picker>
         <br/>
         <div>Selected Date: {{date ? date.toDateString() : 'null'}}</div>`
 })

diff --git a/...examples/date-picker-disable-func-example/date-picker-disable-func-example.component.html b/...examples/date-picker-disable-func-example/date-picker-disable-func-example.component.html
@@ -4,11 +4,11 @@
             <label fd-form-label>Date Picker</label>
             <fd-date-picker
                 [disableFunction]="disableFunction"
-                [state]="isValid() ? 'valid' : 'invalid'"
+                [state]="isValid() ? 'success' : 'error'"
                 formControlName="date">
             </fd-date-picker>
-            <fd-form-message *ngIf="isValid()" [type]="'success'">This is valid DatePicker</fd-form-message>
-            <fd-form-message *ngIf="!isValid()" [type]="'error'">This is invalid DatePicker</fd-form-message>
+            <fd-form-message *ngIf="isValid()" [type]="'success'">This is valid(success) DatePicker</fd-form-message>
+            <fd-form-message *ngIf="!isValid()" [type]="'error'">This is invalid(error) DatePicker</fd-form-message>
         </div>
         <br/>
         Touched: {{customForm.controls.date.touched}}<br/>

diff --git a/...cs/src/app/core/component-docs/date-picker/examples/date-picker-form-example.component.ts b/...cs/src/app/core/component-docs/date-picker/examples/date-picker-form-example.component.ts
@@ -10,11 +10,11 @@ import { FdDate } from '@fundamental-ngx/core';
                 <div fd-form-item>
                     <label fd-form-label>Date Picker</label>
                     <fd-date-picker 
-                            [state]="isValid() ? 'valid' : 'invalid'" 
+                            [state]="isValid() ? 'success' : 'error'" 
                             formControlName="date">
                     </fd-date-picker>
-                    <fd-form-message *ngIf="isValid()" [type]="'success'">This is valid DatePicker</fd-form-message>
-                    <fd-form-message *ngIf="!isValid()" [type]="'error'">This is invalid DatePicker</fd-form-message>
+                    <fd-form-message *ngIf="isValid()" [type]="'success'">This is valid(success) DatePicker</fd-form-message>
+                    <fd-form-message *ngIf="!isValid()" [type]="'error'">This is invalid(error) DatePicker</fd-form-message>
                 </div>
                 <br/>
                 Touched: {{customForm.controls.date.touched}}<br/>

diff --git a/...ples/date-picker-range-disabled-example/date-picker-range-disabled-example.component.html b/...ples/date-picker-range-disabled-example/date-picker-range-disabled-example.component.html
@@ -3,7 +3,7 @@
         <fd-date-picker
             type="range"
             formControlName="dates"
-            [state]="isValid() ? 'valid' : 'invalid'"
+            [state]="isValid() ? 'success' : 'error'"
             [disableRangeEndFunction]="disabledEndFunction"
             [disableRangeStartFunction]="disabledStartFunction"
         ></fd-date-picker>

diff --git a/...time-picker/examples/datetime-allow-null-example/datetime-allow-null-example.component.ts b/...time-picker/examples/datetime-allow-null-example/datetime-allow-null-example.component.ts
@@ -4,7 +4,7 @@ import { DatetimePickerComponent, FdDatetime } from '@fundamental-ngx/core';
 @Component({
     selector: 'fd-date-time-picker-allow-null-example',
     template: `
-        <fd-datetime-picker [allowNull]="false" [(ngModel)]="selectedDay" [state]="isValid() ? 'invalid' : 'valid'"></fd-datetime-picker>
+        <fd-datetime-picker [allowNull]="false" [(ngModel)]="selectedDay" [state]="isValid() ? 'error' : 'success'"></fd-datetime-picker>
         <span style="padding-left: 20px;">Selected Date: {{selectedDay?.toLocaleDateString()}}</span>
     `
 })

diff --git a/...-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.html b/...-docs/datetime-picker/examples/datetime-form-example/datetime-form-example.component.html
@@ -3,7 +3,7 @@
     <div fd-form-item>
         <label fd-form-label>Valid Date Picker</label>
         <fd-datetime-picker
-            [state]="isValid() ? 'valid' : 'invalid'"
+            [state]="isValid() ? 'success' : 'error'"
             formControlName="date"
             [disableFunction]="blockFunction">
         </fd-datetime-picker>

diff --git a/...input-group/examples/input-group-states-example/input-group-states-example.component.html b/...input-group/examples/input-group-states-example/input-group-states-example.component.html
@@ -1,12 +1,45 @@
-<label fd-form-label>Information</label>
-<fd-input-group [addOnText]="'Button'" [button]="true" [state]="'information'" [placeholder]="'Placeholder'"></fd-input-group>
+<div fd-form-item>
+    <label fd-form-label>Information</label>
+    <fd-form-input-message-group>
+        <fd-input-group fd-form-control [addOnText]="'Button'" [button]="true" [state]="'information'" [placeholder]="'Placeholder'"></fd-input-group>
+        <fd-form-message [type]="'information'">
+            Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
+        </fd-form-message>
+    </fd-form-input-message-group>
+</div>
+
 <br />
-<label fd-form-label>Success</label>
-<fd-input-group [addOnText]="'Button'" [button]="true" [state]="'valid'" [placeholder]="'Placeholder'"></fd-input-group>
+
+<div fd-form-item>
+    <label fd-form-label>Success</label>
+    <fd-form-input-message-group>
+        <fd-input-group fd-form-control [addOnText]="'Button'" [compact]="true" [button]="true" [state]="'success'" [placeholder]="'Placeholder'"></fd-input-group>
+        <fd-form-message [type]="'success'">
+            Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
+        </fd-form-message>
+    </fd-form-input-message-group>
+</div>
+
 <br />
-<label fd-form-label>Warning</label>
-<fd-input-group [addOnText]="'Button'" [button]="true" [state]="'warning'" [placeholder]="'Placeholder'"></fd-input-group>
-<br />
-<label fd-form-label>Invalid</label>
-<fd-input-group [addOnText]="'Button'" [button]="true" [state]="'invalid'" [placeholder]="'Placeholder'"></fd-input-group>
+
+<div fd-form-item>
+    <label fd-form-label>Warning</label>
+    <fd-form-input-message-group>
+        <fd-input-group fd-form-control [addOnText]="'Button'" [button]="true" [state]="'warning'" [placeholder]="'Placeholder'"></fd-input-group>
+        <fd-form-message [type]="'warning'">
+            Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
+        </fd-form-message>
+    </fd-form-input-message-group>
+</div>
+
 <br />
+
+<div fd-form-item>
+    <label fd-form-label>Error</label>
+    <fd-form-input-message-group>
+        <fd-input-group fd-form-control [addOnText]="'Button'" [button]="true" [state]="'error'" [placeholder]="'Placeholder'"></fd-input-group>
+        <fd-form-message [type]="'error'">
+            Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
+        </fd-form-message>
+    </fd-form-input-message-group>
+</div>
diff --git a/apps/docs/src/app/core/component-docs/input-group/input-group-docs.component.ts b/apps/docs/src/app/core/component-docs/input-group/input-group-docs.component.ts
@@ -54,7 +54,7 @@ export class InputGroupDocsComponent {
                     },
                     state: {
                         type: 'string',
-                        enum: ['valid', 'invalid', 'information', 'warning']
+                        enum: ['success', 'error', 'information', 'warning']
                     },
                 }
             },

diff --git a/apps/docs/src/app/core/component-docs/input/examples/input-state-example.component.html b/apps/docs/src/app/core/component-docs/input/examples/input-state-example.component.html
@@ -1,9 +1,9 @@
 <div fd-form-item>
     <label fd-form-label for="input-52">
-        Valid Input
+        Valid(Success) Input
     </label>
     <fd-form-input-message-group>
-        <input fd-form-control type="text" id="input-52" placeholder="Field placeholder text" [state]="'valid'"/>
+        <input fd-form-control type="text" id="input-52" placeholder="Field placeholder text" [state]="'success'"/>
         <fd-form-message [type]="'success'">
             Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
         </fd-form-message>
@@ -12,10 +12,10 @@
 
 <div fd-form-item>
     <label fd-form-label for="input-53">
-        Invalid Input - Message appears on hover
+        Invalid(Error) Input - Message appears on hover
     </label>
     <fd-form-input-message-group [triggers]="['mouseenter', 'mouseleave']">
-        <input fd-form-control type="text" id="input-53" placeholder="Field placeholder text" [state]="'invalid'"/>
+        <input fd-form-control type="text" id="input-53" placeholder="Field placeholder text" [state]="'error'"/>
         <fd-form-message [type]="'error'">
             Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
         </fd-form-message>

diff --git a/...ocs/multi-input/examples/multi-input-form-example/multi-input-form-example.component.html b/...ocs/multi-input/examples/multi-input-form-example/multi-input-form-example.component.html
@@ -1,17 +1,17 @@
 <form [formGroup]="customForm">
     <fieldset fd-fieldset>
         <div fd-form-item>
-            <label fd-form-label>Valid Localization Editor</label>
+            <label fd-form-label>Valid Multi Input</label>
             <fd-multi-input
-                [state]="isValid() ? 'valid' : 'invalid'"
+                [state]="isValid() ? 'success' : 'error'"
                 formControlName="selectedValues"
                 [dropdownValues]="['Apple', 'Banana', 'Pineapple', 'Tomato']"
                 [placeholder]="'Search Here...'"
             >
             </fd-multi-input>
         </div>
         <div fd-form-item>
-            <label fd-form-label>Disabled Localization Editor</label>
+            <label fd-form-label>Disabled Multi Input</label>
             <fd-multi-input
                 formControlName="disabledSelectedValues"
                 [dropdownValues]="['Apple', 'Banana', 'Pineapple', 'Tomato']"

diff --git a/apps/docs/src/app/core/component-docs/radio/examples/radio-example.component.html b/apps/docs/src/app/core/component-docs/radio/examples/radio-example.component.html
@@ -87,11 +87,11 @@
             <fd-radio-button
                 id="radio-10"
                 name="radio-name-4"
-                [state]="'valid'"
+                [state]="'success'"
                 [value]="'val1'"
                 [(ngModel)]="optionFourVariable"
             >
-                Valid Option
+                Valid(Success) Option
             </fd-radio-button>
         </div>
         <div fd-form-item [isCheck]="true">
@@ -110,10 +110,10 @@
                 name="radio-name-4"
                 id="radio-12"
                 [value]="'val3'"
-                [state]="'invalid'"
+                [state]="'error'"
                 [(ngModel)]="optionFourVariable"
             >
-                Invalid Option
+                Invalid(Error) Option
             </fd-radio-button>
         </div>
         <div fd-form-item [isCheck]="true">
@@ -147,12 +147,12 @@
         <div fd-form-item [isCheck]="true">
             <fd-radio-button
                 name="radio-name-5"
-                [state]="'valid'"
+                [state]="'success'"
                 [value]="'val1'"
                 [compact]="true"
                 [(ngModel)]="optionFiveVariable"
             >
-                Valid Option
+                Valid(Success) Option
             </fd-radio-button>
         </div>
         <div fd-form-item [isCheck]="true">
@@ -170,11 +170,11 @@
             <fd-radio-button
                 name="radio-name-5"
                 [value]="'val3'"
-                [state]="'invalid'"
+                [state]="'error'"
                 [compact]="true"
                 [(ngModel)]="optionFiveVariable"
             >
-                Invalid Option
+                Invalid(Error) Option
             </fd-radio-button>
         </div>
         <div fd-form-item [isCheck]="true">
@@ -209,13 +209,13 @@
         <div fd-form-item [isCheck]="true">
             <fd-radio-button
                 name="radio-name-6"
-                [state]="'valid'"
+                [state]="'success'"
                 [value]="'val1'"
                 [compact]="true"
                 [disabled]="true"
                 [(ngModel)]="optionSixVariable"
             >
-                Valid Option
+                Valid(Success) Option
             </fd-radio-button>
         </div>
         <div fd-form-item [isCheck]="true">
@@ -234,12 +234,12 @@
             <fd-radio-button
                 name="radio-name-6"
                 [value]="'val3'"
-                [state]="'invalid'"
+                [state]="'error'"
                 [compact]="true"
                 [disabled]="true"
                 [(ngModel)]="optionSixVariable"
             >
-                Invalid Option
+                Invalid(Error) Option
             </fd-radio-button>
         </div>
         <div fd-form-item [isCheck]="true">

diff --git a/...app/core/component-docs/select-native/examples/select-native-state-example.component.html b/...app/core/component-docs/select-native/examples/select-native-state-example.component.html
@@ -11,19 +11,19 @@
 </div>
 <div fd-form-item>
     <label fd-form-label for="select-52">
-        Valid select
+        Valid(Success) select
     </label>
-    <select fd-form-control id="select-52" name="" [state]="'valid'">
+    <select fd-form-control id="select-52" name="" [state]="'success'">
         <option value="1">Duis malesuada odio volutpat elementum</option>
         <option value="2">Suspendisse ante ligula</option>
         <option value="3">Sed bibendum sapien at posuere interdum</option>
     </select>
 </div>
 <div fd-form-item>
     <label fd-form-label for="select-53">
-        Invalid select
+        Invalid(Error) select
     </label>
-    <select fd-form-control id="select-53" name="" [state]="'invalid'">
+    <select fd-form-control id="select-53" name="" [state]="'error'">
         <option value="1">Duis malesuada odio volutpat elementum</option>
         <option value="2">Suspendisse ante ligula</option>
         <option value="3">Sed bibendum sapien at posuere interdum</option>

diff --git a/.../docs/src/app/core/component-docs/textarea/examples/textarea-state-example.component.html b/.../docs/src/app/core/component-docs/textarea/examples/textarea-state-example.component.html
@@ -1,9 +1,9 @@
 <div fd-form-item>
     <label fd-form-label for="input-52">
-        Valid Textarea
+        Valid(Success) Textarea
     </label>
     <fd-form-input-message-group>
-        <textarea fd-form-control id="textarea-52" placeholder="Field placeholder text" [state]="'valid'"></textarea>
+        <textarea fd-form-control id="textarea-52" placeholder="Field placeholder text" [state]="'success'"></textarea>
         <fd-form-message [type]="'success'"
             >Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
         </fd-form-message>
@@ -12,10 +12,10 @@
 
 <div fd-form-item>
     <label fd-form-label for="input-53">
-        Invalid Textarea
+        Invalid(Error) Textarea
     </label>
     <fd-form-input-message-group>
-        <textarea fd-form-control id="textarea-53" placeholder="Field placeholder text" [state]="'invalid'"></textarea>
+        <textarea fd-form-control id="textarea-53" placeholder="Field placeholder text" [state]="'error'"></textarea>
         <fd-form-message [type]="'error'"
             >Pellentesque metus lacus commodo eget justo ut rutrum varius nunc
         </fd-form-message>
@@ -35,14 +35,15 @@
 
 <div fd-form-item>
     <label fd-form-label for="input-55">
-        Invalid Textarea
+        Information Textarea
     </label>
     <fd-form-input-message-group>
         <textarea
             fd-form-control
             id="textarea-55"
             placeholder="Field placeholder text"
             [state]="'information'"
+            [compact]="true"
         ></textarea>
         <fd-form-message [type]="'information'"
             >Pellentesque metus lacus commodo eget justo ut rutrum varius nunc

diff --git a/libs/core/src/lib/checkbox/checkbox/checkbox.component.spec.ts b/libs/core/src/lib/checkbox/checkbox/checkbox.component.spec.ts
@@ -72,12 +72,12 @@ describe('CheckboxComponent', () => {
     });
 
     it('should add state class', async () => {
-        checkbox.state = 'valid';
+        checkbox.state = 'success';
         fixture.detectChanges();
 
         await fixture.whenStable();
         const input = fixture.nativeElement.querySelector('input');
-        expect(input).toHaveClass('is-valid')
+        expect(input).toHaveClass('is-success')
     });
 
     it('should display input label', async () => {

diff --git a/libs/core/src/lib/checkbox/checkbox/checkbox.component.ts b/libs/core/src/lib/checkbox/checkbox/checkbox.component.ts
@@ -38,7 +38,7 @@ export class CheckboxComponent implements ControlValueAccessor {
 
     /** State of control, changes visual appearance of control. */
     @Input()
-    state: 'valid' | 'invalid' | 'info' | 'warning';
+    state: 'success' | 'error' | 'info' | 'warning';
 
     /** Sets [name] property of input. */
     @Input()

diff --git a/libs/core/src/lib/combobox/combobox.component.ts b/libs/core/src/lib/combobox/combobox.component.ts
@@ -105,7 +105,7 @@ export class ComboboxComponent implements ControlValueAccessor, OnInit, OnChange
 
     /**
      *  The state of the form control - applies css classes.
-     *  Can be `valid`, `invalid`, `warning`, `information` or blank for default.
+     *  Can be `success`, `error`, `warning`, `information` or blank for default.  
      */
     @Input()
     state: FormStates;

diff --git a/libs/core/src/lib/date-picker/date-picker.component.html b/libs/core/src/lib/date-picker/date-picker.component.html
@@ -12,7 +12,7 @@
                 (ngModelChange)="handleInputChange($event)"
                 (click)="openCalendar()"
                 [compact]="compact"
-                [ngClass]="{ 'is-invalid': isInvalidDateInput && useValidation }"
+                [ngClass]="{ 'is-error': isInvalidDateInput && useValidation }"
             />
             <span fd-input-group-addon [button]="true" [compact]="compact">
                 <button