[ACA-3020] Start process on process cloud updated the labels (always floating) (#5603)

* unit tests for always floating labels. updated the styling to match the UX. created a new theme.

* update travis

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html

@@ -1,6 +1,6 @@
 <mat-card class="adf-start-process">
 
-    <mat-card-title>{{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate}}
+    <mat-card-title class="adf-title">{{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.TITLE' | translate}}
     </mat-card-title>
 
     <mat-card-content *ngIf="!isProcessDefinitionsEmpty(); else emptyProcessDefinitionsList">
@@ -9,21 +9,7 @@
         </mat-card-subtitle>
 
         <form [formGroup]="processForm">
-            <mat-form-field class="adf-process-input-container">
+            <mat-form-field class="adf-process-input-container"  [floatLabel]="'always'">
-                <mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }}</mat-label>
-                <input
-                    matInput
-                    formControlName="processInstanceName"
-                    id="processName">
-                <mat-error id="adf-start-process-required-error" *ngIf="processInstanceName.hasError('required')">
-                    {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
-                </mat-error>
-                <mat-error id="adf-start-process-maxlength-error" *ngIf="processInstanceName.hasError('maxlength')">
-                    {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxNameLength } }}
-                </mat-error>
-            </mat-form-field>
-
-            <mat-form-field class="adf-process-input-container">
                 <mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.TYPE' | translate }}</mat-label>
                 <input
                     #inputAutocomplete
@@ -42,10 +28,24 @@
                         <mat-icon>arrow_drop_down</mat-icon>
                     </button>
                 </div>
-                <mat-error *ngIf="processDefinition.hasError('required')">
+                <mat-error *ngIf="processDefinition.hasError('required')" class="adf-error-pb">
                         {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_DEFINITION_REQUIRED' | translate }}
                     </mat-error>
             </mat-form-field>
+
+            <mat-form-field class="adf-process-input-container"  [floatLabel]="'always'">
+                <mat-label>{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate }}</mat-label>
+                <input
+                    matInput
+                    formControlName="processInstanceName"
+                    id="processName">
+                <mat-error id="adf-start-process-required-error" *ngIf="processInstanceName.hasError('required')">
+                    {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
+                </mat-error>
+                <mat-error id="adf-start-process-maxlength-error" *ngIf="processInstanceName.hasError('maxlength')">
+                    {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxNameLength } }}
+                </mat-error>
+            </mat-form-field>
         </form>
 
         <ng-container *ngIf="hasForm() else taskFormCloudButtons">

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.scss

@@ -1,42 +1,61 @@
-.adf {
+@mixin adf-cloud-start-service-theme($theme) {
-    &-start-process {
+    .adf {
-        .mat-select-trigger {
+        &-start-process {
-            font-size: 14px !important;
+            .mat-select-trigger {
-        }
+                font-size: 14px !important;
-        mat-form-field {
+            }
-            width: 100%;
+
-        }
+            mat-form-field {
-        mat-select {
+                width: 100%;
-            width: 100%;
+            }
-            padding: 16px 0 0;
+
-        }
+            mat-select {
-        mat-card-actions {
+                width: 100%;
-            text-align: right;
+                padding: 16px 0 0;
-            .mat-button {
+            }
-                text-transform: uppercase !important;
+
+            .mat-form-field-label {
+                color: mat-color($mat-grey, A400);
+            }
+
+            mat-card-actions {
+                text-align: right;
+
+                .mat-button {
+                    text-transform: uppercase !important;
+                }
             }
         }
-    }
+        &-title {
-    &-process-input-container {
+            padding-bottom: 1.25em;
-        mat-form-field {
+        }
-            width: 100%;
+
+        &-process-input-container {
+            mat-form-field {
+                width: 100%;
+            }
+        }
+
+        &-process-input-autocomplete {
+            display: flex;
+
+            button {
+                position: absolute;
+                right: -14px;
+                top: 0;
+            }
+        }
+
+        &-start-form-container {
+            .mat-card {
+                box-shadow: none !important;
+                padding: 0 !important;
+            }
+        }
+
+        &-start-form-actions {
+            text-align: right !important;
         }
     }
-    &-process-input-autocomplete {
+
-        display: flex;
-        button {
-            position: absolute;
-            right: -14px;
-            top: 0;
-        }
-    }
-    &-start-form-container {
-        .mat-card {
-            box-shadow: none !important;
-            padding: 0 !important;
-        }
-    }
-    &-start-form-actions {
-        text-align: right !important;
-    }
 }

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.spec.ts

@@ -386,6 +386,26 @@ describe('StartProcessCloudComponent', () => {
             });
         }));
 
+        it('should have labels for process name and type', async(() => {
+            component.appName = 'myApp';
+            component.processDefinitionName = 'NewProcess 2';
+            component.ngOnChanges({});
+            fixture.detectChanges();
+            const inputLabelsNodes = document.querySelectorAll('.adf-start-process .adf-process-input-container mat-label');
+            expect(inputLabelsNodes.length).toBe(2);
+        }));
+
+        it('should have floating labels for process name and type', async(() => {
+            component.appName = 'myApp';
+            component.processDefinitionName = 'NewProcess 2';
+            component.ngOnChanges({});
+            fixture.detectChanges();
+            const inputLabelsNodes = document.querySelectorAll('.adf-start-process .adf-process-input-container');
+            inputLabelsNodes.forEach(labelNode => {
+                expect(labelNode.getAttribute('ng-reflect-float-label')).toBe('always');
+            });
+        }));
+
         it('should reload processes when appName input changed', async(() => {
             component.ngOnChanges({ appName: change });
             fixture.detectChanges();

lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.ts

@@ -34,7 +34,6 @@ import { TaskVariableCloud } from '../../../form/models/task-variable-cloud.mode
 @Component({
     selector: 'adf-cloud-start-process',
     templateUrl: './start-process-cloud.component.html',
-    styleUrls: ['./start-process-cloud.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class StartProcessCloudComponent implements OnChanges, OnInit, OnDestroy {

lib/process-services-cloud/src/lib/styles/_index.scss

@@ -8,6 +8,7 @@
 @import './../task/start-task/components/start-task-cloud.component.scss';
 @import './../task/task-filters/components/edit-task-filter-cloud.component.scss';
 @import './../task/task-filters/components/task-filters-cloud.component.scss';
+@import './../process/start-process/components/start-process-cloud.component';
 
 
 @mixin adf-process-services-cloud-theme($theme) {
@@ -21,4 +22,5 @@
     @include adf-cloud-people-theme($theme);
     @include adf-cloud-group-theme($theme);
     @include adf-cloud-task-form-theme($theme);
+    @include adf-cloud-start-service-theme($theme);
 }