inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-48227 replacing custom labels with mat-labels

Browse Source
This commit is contained in:
Isoumyajit
2026-09-08 17:07:15 +05:30
parent 27c700165c
commit 008d8ab6e2
30 changed files with 64 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/src/lib/form/components/form-renderer.component.html
+1 -1
View File
@@ -1,4 +1,4 @@
<div id="adf-form-renderer" class="{{ formDefinition.className }} adf-form-renderer"
<div id="adf-form-renderer" data-automation-id="adf-form-renderer" class="{{ formDefinition.className }} adf-form-renderer"
[ngClass]="{ 'adf-readonly-form': formDefinition.readOnly }">
@if (formDefinition.hasTabs()) {
@if (hasTabs()) {
lib/core/src/lib/form/components/widgets/amount/amount.widget.html
+2 -2
View File
@@ -15,7 +15,7 @@
subscriptSizing="dynamic"
[floatLabel]="placeholder ? 'always' : null"
>
@if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{field.name | translate }}</mat-label> }
@if ( (field.name || field?.required) && !field.leftLabels) { <mat-label data-automation-id="adf-amount-widget-label">{{field.name | translate }}</mat-label> }
@if(!enableDisplayBasedOnLocale) {
<span matTextPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}&nbsp;</span>
}
@@ -34,7 +34,7 @@
[errorStateMatcher]="errorStateMatcher"
(focus)="amountWidgetOnFocus()"
(blur)="amountWidgetOnBlur()"
/>
/>
@if (field.validationSummary?.message || (isInvalidFieldRequired() && isTouched())) {
<mat-error class="adf-form-field-status-slot">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts
+2 -2
View File
@@ -325,7 +325,7 @@ describe('AmountWidgetComponent - rendering', () => {
expect(inputField).toBeTruthy();
expect(await field.getPrefixText()).toBe('$');
const widgetLabel = testingUtils.getByCSS('.adf-label').nativeElement;
const widgetLabel = testingUtils.getByDataAutomationId('adf-amount-widget-label').nativeElement;
expect(widgetLabel.textContent.trim()).toBe('Test Amount');
expect(widget.field.isValid).toBe(false);
@@ -362,7 +362,7 @@ describe('AmountWidgetComponent - rendering', () => {
fixture.detectChanges();
await fixture.whenStable();
const widgetLabel = testingUtils.getByCSS('.adf-label').nativeElement;
const widgetLabel = testingUtils.getByDataAutomationId('adf-amount-widget-label').nativeElement;
expect(widgetLabel.textContent.trim()).toBe('Test Amount');
const field = await testingUtils.formField.get();
lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html
+1 -1
View File
@@ -14,7 +14,7 @@
[class.adf-left-label-input-datepicker]="field.leftLabels"
[floatLabel]="field.placeholder ? 'always' : null">
@if( (field.name || field?.required) && !field.leftLabels) {
<mat-label class="adf-label" [attr.for]="field.id">
<mat-label class="adf-label">
{{ field.name | translate }} ({{ field.dateDisplayFormat }})
</mat-label>
}
lib/core/src/lib/form/components/widgets/date/date.widget.html
+2 -6
View File
@@ -2,9 +2,7 @@
[class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched"
[class.adf-readonly]="field.readOnly">
<mat-form-field class="adf-date-widget adf-form-field-input" subscriptSizing="dynamic" [floatLabel]="field.placeholder ? 'always' : null">
<mat-label class="adf-label"
[id]="field.id + '-label'"
[attr.for]="field.id">
<mat-label data-automation-id="adf-date-widget-label">
{{ field.name | translate }} ({{ field.dateDisplayFormat }})
</mat-label>
<input matInput
@@ -18,9 +16,7 @@
[readonly]="field.readOnly"
/>
<mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" />
<mat-datepicker #datePicker
[startAt]="startAt"
[disabled]="field.readOnly" />
<mat-datepicker #datePicker [startAt]="startAt" [disabled]="field.readOnly" />
@if (dateInputControl.invalid && dateInputControl.touched) {
<mat-error class="adf-form-field-status-slot">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
lib/core/src/lib/form/components/widgets/decimal/decimal.component.html
+1 -1
View File
@@ -10,7 +10,7 @@
<div class="adf-decimal-widget-container">
<mat-form-field class="adf-form-field-input" subscriptSizing="dynamic" [floatLabel]="field.placeholder ? 'always' : null">
@if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label> }
@if ( (field.name || field?.required) && !field.leftLabels) { <mat-label class="adf-label">{{ field.name | translate }}</mat-label> }
<input matInput
class="adf-input"
type="text"
lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html
+1 -1
View File
@@ -12,7 +12,7 @@
[floatLabel]="field.placeholder ? 'always' : null"
>
@if(field.name || field.required) {
<mat-label class="adf-label" [attr.for]="field.id"> {{ field.name | translate }} </mat-label>
<mat-label class="adf-multiline-text-widget-label" data-automation-id="adf-multiline-text-widget-label"> {{ field.name | translate }} </mat-label>
}
<textarea
matInput
lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
+1 -1
View File
@@ -8,7 +8,7 @@
flex-direction: column;
position: relative;
.adf-label {
.adf-multiline-text-widget-label {
top: 20px;
}
lib/core/src/lib/form/components/widgets/number/number.widget.html
+1 -1
View File
@@ -11,7 +11,7 @@
<div class="adf-number-widget-container">
<mat-form-field class="adf-form-field-input" subscriptSizing="dynamic" [floatLabel]="field.placeholder ? 'always' : null">
@if( (field.name || this.field?.required) && !field.leftLabels) {
<mat-label class="adf-label" [attr.for]="field.id">
<mat-label class="adf-label">
{{ field.name | translate }}
</mat-label>
}
lib/core/src/lib/form/components/widgets/text/text.widget.html
+1 -1
View File
@@ -13,7 +13,7 @@
subscriptSizing="dynamic"
[floatLabel]="placeholder ? 'always' : null"
>
@if ( (field.name || this.field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">
@if ( (field.name || this.field?.required) && !field.leftLabels) { <mat-label data-automation-id="adf-text-widget-label">
{{ field.name | translate }}
</mat-label>
}
lib/process-services-cloud/src/lib/form/components/form-cloud.component.html
+1
View File
@@ -5,6 +5,7 @@
} @else {
<div
class="adf-cloud-form-container adf-cloud-form-{{ displayConfiguration?.options?.fullscreen ? 'fullscreen' : 'inline' }}-container"
data-automation-id="adf-cloud-form-container"
[style]="formStyle"
>
<div
lib/process-services-cloud/src/lib/form/components/form-cloud.component.scss
+2 -1
View File
@@ -135,7 +135,8 @@
}
}
.adf-label {
.adf-label,
.adf-display-external-property-widget-label {
white-space: normal;
}
}
lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html
+1 -1
View File
@@ -21,7 +21,7 @@
[class.adf-left-label-input-datepicker]="field.leftLabels"
>
@if ( (field.name || field?.required) && !field.leftLabels) {
<mat-label class="adf-label" [attr.for]="field.id">
<mat-label class="adf-label">
{{field.name | translate }} ({{field.dateDisplayFormat}})
</mat-label>
}
lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.html
+1 -1
View File
@@ -13,7 +13,7 @@
<div>
<mat-form-field class="adf-form-field-input" subscriptSizing="dynamic" [floatLabel]="field.placeholder ? 'always' : null">
@if( (field.name || field?.required) && !field.leftLabels) {
<mat-label class="adf-label" [attr.for]="field.id"> {{ field.name | translate }} </mat-label>
<mat-label class="adf-display-external-property-widget-label" data-automation-id="adf-display-external-property-widget-label"> {{ field.name | translate }} </mat-label>
}
<input
matInput
lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.scss
+1 -1
View File
@@ -4,7 +4,7 @@
&-display-external-property-widget {
width: 100%;
.adf-label {
.adf-display-external-property-widget-label {
top: 20px;
}
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html
+1 -1
View File
@@ -14,7 +14,7 @@
<div class="adf-dropdown-widget-container">
<mat-form-field class="adf-form-field-input" subscriptSizing="dynamic">
@if ( (field.name || this.field?.required) && !field.leftLabels) {
<mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label>
<mat-label class="adf-label">{{ field.name | translate }}</mat-label>
}
<mat-select
class="adf-select"
lib/process-services/src/lib/form/start-form/start-form.component.spec.ts
+7 -7
View File
@@ -191,7 +191,7 @@ describe('StartFormComponent', () => {
const formFields = component.form.getFormFields();
const labelField = formFields.find((field) => field.id === 'mocktext');
const textWidget = fixture.debugElement.nativeElement.querySelector('text-widget');
const textWidgetLabel = fixture.debugElement.nativeElement.querySelector('.adf-label');
const textWidgetLabel = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-text-widget-label"]');
expect(labelField.type).toBe('text');
expect(textWidget).toBeTruthy();
@@ -262,7 +262,7 @@ describe('StartFormComponent', () => {
const formFields = component.form.getFormFields();
const dropdownField = formFields.find((field) => field.id === 'mockTypeDropDown');
const dropdownWidget = fixture.debugElement.nativeElement.querySelector('dropdown-widget');
const dropdownLabel = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget .adf-label');
const dropdownLabel = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-dropdown-widget-label"]');
const selectElement = await loader.getHarness(MatSelectHarness);
await selectElement.open();
@@ -287,7 +287,7 @@ describe('StartFormComponent', () => {
const formFields = component.form.getFormFields();
const labelField = formFields.find((field) => field.id === 'date');
const dateWidget = fixture.debugElement.nativeElement.querySelector('date-widget');
const dateLabelElement = fixture.debugElement.nativeElement.querySelector('#data-widget .adf-label');
const dateLabelElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-date-widget-label"]');
expect(dateWidget).toBeTruthy();
expect(labelField.type).toBe('date');
@@ -320,11 +320,11 @@ describe('StartFormComponent', () => {
const formFieldsWidget = fixture.debugElement.nativeElement.querySelector('form-field');
const inputElement = fixture.debugElement.nativeElement.querySelector('.adf-input');
const inputLabelElement = fixture.debugElement.nativeElement.querySelector('.adf-label');
const inputLabelElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-text-widget-label"]');
const dateElement = fixture.debugElement.nativeElement.querySelector('#billdate');
const dateLabelElement = fixture.debugElement.nativeElement.querySelector('#data-widget .adf-label');
const dateLabelElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-date-widget-label"]');
const selectElement = fixture.debugElement.nativeElement.querySelector('#claimtype');
const selectLabelElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget > .adf-label');
const selectLabelElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-dropdown-widget-label"]');
expect(formFieldsWidget).toBeDefined();
expect(inputElement).toBeDefined();
@@ -348,7 +348,7 @@ describe('StartFormComponent', () => {
/* cspell:disable-next-line */
const selectElement = fixture.debugElement.nativeElement.querySelector('#claimtype');
const selectLabelElement = fixture.debugElement.nativeElement.querySelector('.adf-dropdown-widget > .adf-label');
const selectLabelElement = fixture.debugElement.nativeElement.querySelector('[data-automation-id="adf-dropdown-widget-label"]');
expect(refreshElement).toBeDefined();
expect(selectElement).toBeDefined();
expect(translate.instant(selectLabelElement.innerText)).toBe('ClaimType');
lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.html
+8 -4
View File
@@ -3,11 +3,15 @@
[class.adf-invalid]="dropdownControl.invalid && dropdownControl.touched"
[class.adf-readonly]="field.readOnly"
>
<label class="adf-label" [attr.for]="field.id"
>{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
>
<mat-form-field class="adf-form-field-input" subscriptSizing="dynamic">
<mat-select class="adf-select" [id]="field.id" [formControl]="dropdownControl">
<mat-label data-automation-id="adf-dropdown-widget-label">{{ field.name | translate }}</mat-label>
<mat-select
class="adf-select"
data-automation-id="adf-dropdown-widget-select"
[id]="field.id"
[formControl]="dropdownControl"
[required]="isRequired() && field.isVisible"
>
<mat-option *ngFor="let opt of field.options" [value]="opt" [id]="opt.id">{{opt.name}}</mat-option>
<mat-option id="readonlyOption" *ngIf="dropdownControl.disabled" [value]="field.value">{{field.value}}</mat-option>
</mat-select>
lib/process-services/src/lib/form/widgets/dropdown/dropdown.widget.spec.ts
+2 -3
View File
@@ -161,10 +161,9 @@ describe('DropdownWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
const dropdown = await loader.getHarness(MatSelectHarness.with({ selector: '[data-automation-id="adf-dropdown-widget-select"]' }));
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
expect(await dropdown.isRequired()).toBeTrue();
});
it('should be invalid if no default option after interaction', async () => {
lib/process-services/src/lib/form/widgets/dynamic-table/editors/amount/amount.editor.html
+1 -1
View File
@@ -1,6 +1,6 @@
<div class="adf-amount-editor">
<mat-form-field>
<label [attr.for]="column.id">{{displayName}}</label>
<mat-label>{{ displayName }}</mat-label>
<input matInput
type="number"
[value]="table.getCellValue(row, column)"
lib/process-services/src/lib/form/widgets/dynamic-table/editors/date/date.editor.html
+1 -1
View File
@@ -1,6 +1,6 @@
<div>
<mat-form-field class="adf-date-editor">
<label [attr.for]="column.id">{{column.name}} ({{DATE_FORMAT}})</label>
<mat-label>{{ column.name }} ({{ DATE_FORMAT }})</mat-label>
<input matInput
id="dateInput"
type="text"
lib/process-services/src/lib/form/widgets/dynamic-table/editors/datetime/datetime.editor.html
+1 -1
View File
@@ -1,6 +1,6 @@
<div>
<mat-form-field class="adf-date-editor">
<label [attr.for]="column.id">{{column.name}} {{DATE_TIME_FORMAT}}</label>
<mat-label>{{ column.name }} {{ DATE_TIME_FORMAT }}</mat-label>
<input matInput
[matDatetimepicker]="datetimePicker"
[(ngModel)]="value"
lib/process-services/src/lib/form/widgets/dynamic-table/editors/dropdown/dropdown.editor.html
+3 -2
View File
@@ -1,6 +1,6 @@
<div class="dropdown-editor">
<label [attr.for]="column.id">{{column.name}}</label>
<mat-form-field>
<mat-label>{{column.name}}</mat-label>
<mat-select
floatPlaceholder="never"
class="adf-dropdown-editor-select"
@@ -8,7 +8,8 @@
[(ngModel)]="value"
[required]="column.required"
[disabled]="!column.editable"
(selectionChange)="onValueChanged(row, column, $event)">
(selectionChange)="onValueChanged(row, column, $event)"
>
<mat-option />
<mat-option *ngFor="let opt of options" [value]="opt.name" [id]="opt.id">{{opt.name}}</mat-option>
</mat-select>
lib/process-services/src/lib/form/widgets/dynamic-table/editors/text/text.editor.html
+1 -1
View File
@@ -1,6 +1,6 @@
<div class="adf-text-editor">
<mat-form-field>
<label [attr.for]="column.id">{{displayName}}</label>
<mat-label>{{ displayName }}</mat-label>
<input matInput
type="text"
[value]="table.getCellValue(row, column)"
lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.html
+9 -9
View File
@@ -5,11 +5,9 @@
[class.adf-readonly]="field.readOnly"
id="functional-group-div"
>
<label class="adf-label" [attr.for]="field.id"
>{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
>
<mat-form-field class="adf-group-widget-field">
<mat-chip-grid #chipGrid>
<mat-label data-automation-id="adf-group-widget-label">{{ field.name | translate }}</mat-label>
<mat-chip-grid #chipGrid [required]="isRequired()">
<mat-chip-row
*ngFor="let group of selectedGroups"
(removed)="onRemove(group)"
@@ -49,11 +47,13 @@
</mat-option>
</mat-autocomplete>
@if (field.validationSummary?.message || (isInvalidFieldRequired() && isTouched())) {
<mat-error>
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<span class="adf-error-text"
>@if (field.validationSummary?.message) {{{ field.validationSummary.message | translate }}} @else {{{ 'FORM.FIELD.REQUIRED' | translate }}}</span>
</mat-error>
<mat-error>
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<span class="adf-error-text"
>@if (field.validationSummary?.message) {{{ field.validationSummary.message | translate }}} @else {{{ 'FORM.FIELD.REQUIRED' |
translate }}}</span
>
</mat-error>
}
</mat-form-field>
</div>
lib/process-services/src/lib/form/widgets/functional-group/functional-group.widget.spec.ts
+3 -6
View File
@@ -22,7 +22,7 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
import { PeopleProcessService } from '../../../services/people-process.service';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { HarnessLoader } from '@angular/cdk/testing';
import { MatChipRowHarness } from '@angular/material/chips/testing';
import { MatChipGridHarness, MatChipRowHarness } from '@angular/material/chips/testing';
import { MatAutocompleteHarness } from '@angular/material/autocomplete/testing';
describe('FunctionalGroupWidgetComponent', () => {
@@ -30,7 +30,6 @@ describe('FunctionalGroupWidgetComponent', () => {
let component: FunctionalGroupWidgetComponent;
let peopleProcessService: PeopleProcessService;
let getWorkflowGroupsSpy: jasmine.Spy;
let element: HTMLElement;
let loader: HarnessLoader;
let unitTestingUtils: UnitTestingUtils;
@@ -51,7 +50,6 @@ describe('FunctionalGroupWidgetComponent', () => {
unitTestingUtils = new UnitTestingUtils(fixture.debugElement);
loader = TestbedHarnessEnvironment.loader(fixture);
component.field = new FormFieldModel(new FormModel());
element = fixture.nativeElement;
fixture.detectChanges();
});
@@ -176,10 +174,9 @@ describe('FunctionalGroupWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
const chipGrid = await loader.getHarness(MatChipGridHarness);
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
expect(await chipGrid.isRequired()).toBeTrue();
});
});
lib/process-services/src/lib/form/widgets/people/people.widget.html
+2 -2
View File
@@ -2,11 +2,11 @@
[class.adf-invalid]="!field.isValid && isTouched()"
[class.adf-readonly]="field.readOnly"
id="people-widget-content">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label>
<mat-form-field
class="adf-people-widget-field">
<mat-label class="adf-people-widget-label" data-automation-id="adf-people-widget-label">{{ field.name | translate }}</mat-label>
<mat-chip-grid #chipGrid [attr.aria-label]="'ADF_PROCESS_LIST.START_PROCESS.FORM.LABEL.SELECTED_PEOPLE' | translate"
[ngModel]="selectedUsers" [errorStateMatcher]="errorStateMatcher">
[required]="isRequired()" [ngModel]="selectedUsers" [errorStateMatcher]="errorStateMatcher">
<mat-chip-row
*ngFor="let user of selectedUsers"
(removed)="onRemove(user)"
lib/process-services/src/lib/form/widgets/people/people.widget.spec.ts
+3 -4
View File
@@ -23,7 +23,7 @@ import { PeopleWidgetComponent } from './people.widget';
import { TranslateService } from '@ngx-translate/core';
import { PeopleProcessService } from '../../../services/people-process.service';
import { LightUserRepresentation } from '@alfresco/js-api';
import { MatChipHarness } from '@angular/material/chips/testing';
import { MatChipGridHarness, MatChipHarness } from '@angular/material/chips/testing';
import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
import { HarnessLoader } from '@angular/cdk/testing';
@@ -325,10 +325,9 @@ describe('PeopleWidgetComponent', () => {
fixture.detectChanges();
await fixture.whenStable();
const asterisk: HTMLElement = element.querySelector('.adf-asterisk');
const chipGrid = await loader.getHarness(MatChipGridHarness);
expect(asterisk).toBeTruthy();
expect(asterisk.textContent).toEqual('*');
expect(await chipGrid.isRequired()).toBeTrue();
});
});
lib/process-services/src/lib/form/widgets/typeahead/typeahead.widget.html
+1 -1
View File
@@ -5,7 +5,7 @@
[class.adf-readonly]="field.readOnly"
id="typehead-div">
<mat-form-field class="adf-form-field-input" subscriptSizing="dynamic">
<label class="adf-label" [attr.for]="field.id">{{field.name | translate }}</label>
<mat-label>{{ field.name | translate }}</mat-label>
<input matInput class="adf-input"
type="text"
[id]="field.id"
lib/process-services/src/lib/task-list/components/start-task/start-task.component.scss
+2 -2
View File
@@ -77,7 +77,7 @@ adf-start-task {
width: 100%;
}
.adf-label {
.adf-people-widget-label {
line-height: 0;
}
@@ -126,7 +126,7 @@ adf-start-task {
border-color: var(--mat-sys-error);
}
.adf-label {
.adf-people-widget-label {
color: var(--mat-sys-error);
&::after {