[ACA-2983] Changed the labels from the inputs name and type to always floating (#5593)

* changed the label from the label name and type to always floating and switched the position of them.

* fix the double space issue

* added unit tests & created and used custom theme for scss

* added custom theme for start-process component

* removed the styleurl

* changet mat_get to mat-color

* update for travis

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

@@ -1,24 +1,13 @@
 <div class="adf-start-process">
-    <div class="title" *ngIf="title">{{ title | translate}}</div>
+    <div class="adf-title" *ngIf="title">{{ title | translate}}</div>
     <div class="content" *ngIf="isProcessDefinitionEmpty()">
         <div class="subtitle" id="error-message" *ngIf="errorMessageId">
             {{errorMessageId|translate}}
         </div>
-        <mat-form-field class="adf-process-input-container">
+        <mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
-            <input
+            <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE' | translate}}</mat-label>
-                matInput
-                placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.NAME' | translate}}"
-                [formControl]="processNameInput"
-                id="processName"
-                required/>
-                <mat-error *ngIf="nameController.hasError('maxlength')">
-                    {{ 'ADF_PROCESS_LIST.START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxProcessNameLength } }}
-                </mat-error>
-        </mat-form-field>
-        <mat-form-field class="adf-process-input-container">
             <input
                 type="text"
-                placeholder="{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.TYPE'|translate}}"
                 matInput
                 [formControl]="processDefinitionInput"
                 [matAutocomplete]="auto"
@@ -44,6 +33,18 @@
             </div>
         </mat-form-field>
 
+        <mat-form-field class="adf-process-input-container" [floatLabel]="'always'">
+            <mat-label>{{'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.NAME' | translate}}</mat-label>
+            <input
+                matInput
+                [formControl]="processNameInput"
+                id="processName"
+                required/>
+            <mat-error *ngIf="nameController.hasError('maxlength')">
+                {{ 'ADF_PROCESS_LIST.START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxProcessNameLength } }}
+            </mat-error>
+        </mat-form-field>
+
         <adf-start-form
             #startForm
             *ngIf="hasStartForm()"

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

@@ -1,4 +1,5 @@
-.adf {
+@mixin adf-process-services-create-theme($theme) {
+    .adf {
         &-start-process {
             width: 96%;
             margin-left: auto;
@@ -14,6 +15,9 @@
                 width: 100%;
                 padding: 16px 0 0;
             }
+            .mat-form-field-label {
+                color: mat-color($mat-grey, A400);
+            }
             .mat-content-actions {
                 text-align: right;
             }
@@ -21,6 +25,9 @@
                 text-transform: uppercase !important;
             }
         }
+        &-title {
+            padding-bottom: 1.25em;
+        }
         &-process-input-container {
             mat-form-field {
                 width: 100%;
@@ -43,12 +50,12 @@
         &-start-form-actions {
             text-align: right !important;
         }
-}
+    }
-
+    @media (max-width: 600px) {
-@media (max-width: 600px) {
         .adf-start-process {
             width: 90%;
             margin-left: auto;
             margin-right: auto;
         }
+    }
 }

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

@@ -148,6 +148,22 @@ describe('StartFormComponent', () => {
                 });
             }));
 
+            it('should have labels for process name and type', async(() => {
+                component.processDefinitionInput.setValue('My Default Name');
+                component.processNameInput.setValue('claim');
+                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.processDefinitionInput.setValue('My Default Name');
+                component.processNameInput.setValue('claim');
+                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 load start form from service', async(() => {
                 fixture.detectChanges();
                 fixture.whenStable().then(() => {

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

@@ -37,7 +37,6 @@ import { MinimalNode, RelatedContentRepresentation } from '@alfresco/js-api';
 @Component({
     selector: 'adf-start-process',
     templateUrl: './start-process.component.html',
-    styleUrls: ['./start-process.component.scss'],
     encapsulation: ViewEncapsulation.None
 })
 export class StartProcessInstanceComponent implements OnChanges, OnInit, OnDestroy {

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

@@ -10,6 +10,7 @@
 @import '../app-list/apps-list.component';
 @import '../content-widget/attach-file-widget-dialog.component';
 @import '../form/start-form.component';
+@import '../process-list/components/start-process.component';
 
 @mixin adf-process-services-theme($theme) {
     @include adf-process-filters-theme($theme);
@@ -24,4 +25,5 @@
     @include adf-task-standalone-component-theme($theme);
     @include adf-attach-file-widget-dialog-component-theme($theme);
     @include adf-start-form-component-theme($theme);
+    @include adf-process-services-create-theme($theme);
  }