inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-06-30 18:15:11 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source 
* [ADF-5223] Fix Amount widget styling

* Fix unit test

* Fix e2e test

* Fix e2e test
This commit is contained in:
davidcanonieto 2020-11-05 14:00:15 +00:00 committed by GitHub
parent a7510b9800
commit 91b7458bee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 27 additions and 36 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
e2e/process-services/widgets/amount-widget.e2e.ts
View File

@ -74,7 +74,8 @@ describe('Amount Widget', () => {
await expect(await taskPage.formFields().isCompleteFormButtonEnabled()).toEqual(false); 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().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().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 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'); await expect(await widget.amountWidget().getErrorMessage(app.FIELD.amount_input_id)).toBe('Can\'t be less than 5');

16
lib/core/form/components/widgets/amount/amount.widget.html
View File

@ -1,7 +1,10 @@
<div class="adf-amount-widget__container adf-amount-widget {{field.className}}" [class.adf-invalid]="!field.isValid" [class.adf-readonly]="field.readOnly"> <div class="adf-amount-widget__container adf-amount-widget {{field.className}}"
<mat-form-field class="adf-amount-widget__input" floatLabel="never"> [class.adf-invalid]="!field.isValid"
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span *ngIf="isRequired()">*</span></label> [class.adf-readonly]="field.readOnly">
<span matPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}</span> <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 <input matInput
[matTooltip]="field.tooltip" [matTooltip]="field.tooltip"
matTooltipPosition="above" matTooltipPosition="above"
@ -16,6 +19,7 @@
(ngModelChange)="onFieldChanged(field)" (ngModelChange)="onFieldChanged(field)"
[disabled]="field.readOnly"> [disabled]="field.readOnly">
</mat-form-field> </mat-form-field>
<error-widget [error]="field.validationSummary" ></error-widget> <error-widget [error]="field.validationSummary"></error-widget>
<error-widget *ngIf="isInvalidFieldRequired()" required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget> <error-widget *ngIf="isInvalidFieldRequired()"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"></error-widget>
</div> </div>

18
lib/core/form/components/widgets/amount/amount.widget.scss
View File

@ -6,20 +6,11 @@
.adf { .adf {
&-amount-widget { &-amount-widget {
width: 100%; width: 100%;
margin-top: 15px;
.mat-input-element {
margin-left: 13px;
margin-right: 13px;
}
}
&-amount-widget__container .mat-form-field-label-wrapper {
top: 17px;
left: 12px;
right: 12px;
} }
&-amount-widget__input { &-amount-widget__input {
margin-top: -15px;
.mat-focused { .mat-focused {
transition: none; transition: none;
@ -31,10 +22,5 @@
} }
} }
} }
&-amount-widget__prefix-spacing {
position: absolute;
top: 12px;
}
} }
} }

2
lib/core/form/components/widgets/amount/amount.widget.spec.ts
View File

@ -126,7 +126,7 @@ describe('AmountWidgetComponent - rendering', () => {
const widgetLabel = fixture.nativeElement.querySelector('label.adf-label'); const widgetLabel = fixture.nativeElement.querySelector('label.adf-label');
expect(widgetLabel.textContent).toBe('Test Amount*'); expect(widgetLabel.textContent).toBe('Test Amount*');
const widgetPrefix = fixture.nativeElement.querySelector('div.mat-form-field-prefix'); 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); expect(widget.field.isValid).toBe(false);
const widgetById: HTMLInputElement = fixture.nativeElement.querySelector('#TestAmount1'); const widgetById: HTMLInputElement = fixture.nativeElement.querySelector('#TestAmount1');
expect(widgetById).toBeDefined(); expect(widgetById).toBeDefined();