[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,54 +1,61 @@
-.adf {
+@mixin adf-process-services-create-theme($theme) {
-    &-start-process {
+    .adf {
-        width: 96%;
+        &-start-process {
-        margin-left: auto;
+            width: 96%;
-        margin-right: auto;
+            margin-left: auto;
-        margin-top: 10px;
+            margin-right: auto;
-        .mat-select-trigger {
+            margin-top: 10px;
-            font-size: 14px !important;
+            .mat-select-trigger {
+                font-size: 14px !important;
+            }
+            mat-form-field {
+                width: 100%;
+            }
+            mat-select {
+                width: 100%;
+                padding: 16px 0 0;
+            }
+            .mat-form-field-label {
+                color: mat-color($mat-grey, A400);
+            }
+            .mat-content-actions {
+                text-align: right;
+            }
+            .mat-button {
+                text-transform: uppercase !important;
+            }
         }
-        mat-form-field {
+        &-title {
-            width: 100%;
+            padding-bottom: 1.25em;
         }
-        mat-select {
+        &-process-input-container {
-            width: 100%;
+            mat-form-field {
-            padding: 16px 0 0;
+                width: 100%;
+            }
         }
-        .mat-content-actions {
+        &-process-input-autocomplete {
-            text-align: right;
+            display: flex;
+            button {
+                position: absolute;
+                right: -14px;
+                top: 0;
+            }
         }
-        .mat-button {
+        &-start-form-container {
-            text-transform: uppercase !important;
+            .mat-card {
+                box-shadow: none !important;
+                padding: 0 !important;
+            }
+        }
+        &-start-form-actions {
+            text-align: right !important;
         }
     }
-    &-process-input-container {
+    @media (max-width: 600px) {
-        mat-form-field {
+        .adf-start-process {
-            width: 100%;
+            width: 90%;
+            margin-left: auto;
+            margin-right: auto;
         }
     }
-    &-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;
-    }
-}
-
-@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);
  }