[ADF-5223] Fix Amount widget styling (#6302)

* [ADF-5223] Fix Amount widget styling * Fix unit test * Fix e2e test * Fix e2e test
Alfresco · Nov 5, 2020 · 91b7458 · 91b7458
1 parent a7510b9
commit 91b7458
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 36 deletions.
diff --git a/e2e/process-services/widgets/amount-widget.e2e.ts b/e2e/process-services/widgets/amount-widget.e2e.ts
@@ -74,7 +74,8 @@ describe('Amount Widget', () => {
         await expect(await taskPage.formFields().isCompleteFormButtonEnabled()).toEqual(false);
         await expect(await widget.amountWidget().getAmountFieldLabel(app.FIELD.amount_input_id)).toContain('Amount');
         await expect(await widget.amountWidget().getPlaceholder(app.FIELD.amount_input_id)).toContain('Type amount');
-        await expect(await widget.amountWidget().getAmountFieldCurrency(app.FIELD.amount_input_id)).toBe('$');
+        const fieldCurrency = await widget.amountWidget().getAmountFieldCurrency(app.FIELD.amount_input_id);
+        await expect(fieldCurrency.trim()).toBe('$');
 
         await widget.amountWidget().setFieldValue(app.FIELD.amount_input_id, 4);
         await expect(await widget.amountWidget().getErrorMessage(app.FIELD.amount_input_id)).toBe('Can\'t be less than 5');

diff --git a/lib/core/form/components/widgets/amount/amount.widget.html b/lib/core/form/components/widgets/amount/amount.widget.html
@@ -1,21 +1,25 @@
-<div class="adf-amount-widget__container adf-amount-widget {{field.className}}" [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly">
-    <mat-form-field class="adf-amount-widget__input"  floatLabel="never">
-        <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
-        <span matPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}</span>
+<div class="adf-amount-widget__container adf-amount-widget {{field.className}}"
+     [class.adf-invalid]="!field.isValid"
+     [class.adf-readonly]="field.readOnly">
+    <label class="adf-label"
+           [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label>
+    <mat-form-field class="adf-amount-widget__input">
+        <span matPrefix class="adf-amount-widget__prefix-spacing">{{ currency }} &nbsp;</span>
         <input matInput
-                [matTooltip]="field.tooltip"
-                matTooltipPosition="above"
-                matTooltipShowDelay="1000"
-                class="adf-input"
-                type="text"
-                [id]="field.id"
-                [required]="isRequired()"
-                [placeholder]="placeholder"
-                [value]="field.value"
-                [(ngModel)]="field.value"
-                (ngModelChange)="onFieldChanged(field)"
-                [disabled]="field.readOnly">
+               [matTooltip]="field.tooltip"
+               matTooltipPosition="above"
+               matTooltipShowDelay="1000"
+               class="adf-input"
+               type="text"
+               [id]="field.id"
+               [required]="isRequired()"
+               [placeholder]="placeholder"
+               [value]="field.value"
+               [(ngModel)]="field.value"
+               (ngModelChange)="onFieldChanged(field)"
+               [disabled]="field.readOnly">
     </mat-form-field>
-    <error-widget [error]="field.validationSummary" ></error-widget>
-    <error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
+    <error-widget [error]="field.validationSummary"></error-widget>
+    <error-widget *ngIf="isInvalidFieldRequired()"
+                  required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
 </div>
diff --git a/lib/core/form/components/widgets/amount/amount.widget.scss b/lib/core/form/components/widgets/amount/amount.widget.scss
@@ -6,20 +6,11 @@
     .adf {
         &-amount-widget {
             width: 100%;
-
-            .mat-input-element {
-                margin-left: 13px;
-                margin-right: 13px;
-            }
-        }
-
-        &-amount-widget__container .mat-form-field-label-wrapper {
-            top: 17px;
-            left: 12px;
-            right: 12px;
+            margin-top: 15px;
         }
 
         &-amount-widget__input {
+            margin-top: -15px;
 
             .mat-focused {
                 transition: none;
@@ -31,10 +22,5 @@
                 }
             }
         }
-
-        &-amount-widget__prefix-spacing {
-            position: absolute;
-            top: 12px;
-        }
     }
 }
diff --git a/lib/core/form/components/widgets/amount/amount.widget.spec.ts b/lib/core/form/components/widgets/amount/amount.widget.spec.ts
@@ -126,7 +126,7 @@ describe('AmountWidgetComponent - rendering', () => {
         const widgetLabel = fixture.nativeElement.querySelector('label.adf-label');
         expect(widgetLabel.textContent).toBe('Test Amount*');
         const widgetPrefix = fixture.nativeElement.querySelector('div.mat-form-field-prefix');
-        expect(widgetPrefix.textContent).toBe('$');
+        expect(widgetPrefix.textContent.trim()).toBe('$');
         expect(widget.field.isValid).toBe(false);
         const widgetById: HTMLInputElement = fixture.nativeElement.querySelector('#TestAmount1');
         expect(widgetById).toBeDefined();