Improvement/AAE-43974 Refactoring form fields (#11945)

* AAE-43974 Refactoring form fields with mat-error

* AAE-43974 Removed adf-error redundant class from all available places

* AAE-43974 Followed code flow syntax

* AAE-43974 Refactored based on review comments

* AAE-43974 Added dummy test lable

* AAE-43974 Added dummy error message for amount field

* AAE-43974 Refactored multiline widget based on reviewer's comment

* AAE-43974 Error icon style added by mixins

* AAE-43974 Missing Conditions added

* AAE-43974 Added Missing conditions

* AAE-43974 Consistent conditions added and dummy error message added

* AAE-43974 Added subscriptsizing dynamic for testing

* AAE-43974 Reverted Subscriptsizing

* AAE-43974 Added spacing between form fields in mobile view

* AAE-43974 Dummy error message changed

* AAE-43974 Changed error icon allignment for testing

* AAE-43974 Added dummy error message

* AAE-43974 Added form field gap in mobile view and dummy erro message

* AAE-43974 Refactored based on review coemments and changed the error icon allignment

* AAE-43974 Fixed the mixin path

* AAE-43974 Removed dummy error message for amount widget

* AAE-43974 Added adf-error-text class to mat-error for e2e fix

* AAE-43974 adf-error-text class added inside mat-error

* AAE-43974 Whitespace issue resolved

* AAE-43974 Whiespace issue fix

* AAE-43974 Added context pushing logic in text widget

* AAE-43974 Added margin-bottom for regression fix

* AAE-43974 Trying with different margin-bottom

* AAE-43974 Testing regression issue

* AAE-43974 Testing for regression failure

* AAE-43974 Testing Regression failures

* AAE-43974 Test Regression failure

* AAE-43974 Testing multiline Regression failure

* AAE-43974 Testing fix regarding regression failure related to multiline-text widget

* AAE-43974 Test Regression failure for multiline-text widget

* AAE-43974 Testing regression failure for multiline-text

* AAE-43974 Testing regression failure for multi-line

* AAE-43974 Testing regression failure

* AAE-43974 Testing Regression failure

* AAE-43974 Testing regression failure

* AAE-43974 Removed the commented code

* [ci:force] re-trigger CI

---------

Co-authored-by: Ehsan Rezaei <ehsan.rezaei@hyland.com>
This commit is contained in:
Anamika Dey
2026-07-08 18:32:46 +00:00
committed by GitHub
co-authored by Ehsan Rezaei
parent 23f0392c12
commit b0dc85422c
75 changed files with 756 additions and 445 deletions
@@ -0,0 +1,7 @@
@mixin adf-error-icon {
font-size: 16px;
width: 16px;
height: 16px;
margin-right: 4px;
vertical-align: text-bottom;
}
@@ -16,20 +16,10 @@
/>
@if (form.controls['name'].dirty && form.controls['name'].invalid) {
<mat-error>
@if (form.controls['name'].hasError('required')) {
<span>
{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.ERRORS.REQUIRED' | translate }}
</span>
}
@else if (form.controls['name'].hasError('message')) {
<span>
{{ form.controls['name'].errors?.message | translate }}
</span>
}
<span class="adf-error-text"
>@if (form.controls['name'].errors?.required) {{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.ERRORS.REQUIRED' | translate }}} @else if (form.controls['name'].errors?.message) {{{ form.controls['name'].errors?.message | translate }}}</span>
</mat-error>
}
</mat-form-field>
<mat-form-field class="adf-full-width adf-folder-dialog-form-field">
@@ -24,8 +24,14 @@
type="text"
(keypress)="cleanErrorMsg()"
[(ngModel)]="newTagName"
[errorStateMatcher]="tagErrorStateMatcher"
/>
<mat-hint data-automation-id="errorMessage" *ngIf="error" [ngStyle]="{ color: 'red' }" align="start">{{ errorMsg }} </mat-hint>
@if (errorMsg) {
<mat-error data-automation-id="errorMessage">
<mat-icon class="adf-error-icon">error_outline</mat-icon>
<span class="adf-error-text">{{ errorMsg }}</span>
</mat-error>
}
</mat-form-field>
</td>
<td>
@@ -1,3 +1,5 @@
@use '../../_mixins' as mixins;
.adf-tag-node-actions-list {
.adf-full-width {
width: 100%;
@@ -18,3 +20,7 @@
height: 20px;
}
}
.adf-full-width .adf-error-icon {
@include mixins.adf-error-icon;
}
@@ -16,6 +16,8 @@
*/
import { IconModule, TranslationService } from '@alfresco/adf-core';
import { ErrorStateMatcher } from '@angular/material/core';
import { MatIconModule } from '@angular/material/icon';
import { Component, DestroyRef, EventEmitter, inject, Input, OnChanges, OnInit, Output, ViewEncapsulation } from '@angular/core';
import { TagService } from '../services/tag.service';
import { TagPaging } from '@alfresco/js-api';
@@ -35,7 +37,17 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
@Component({
selector: 'adf-tag-node-actions-list',
imports: [CommonModule, MatListModule, IconModule, MatFormFieldModule, MatInputModule, TranslatePipe, FormsModule, MatButtonModule],
imports: [
CommonModule,
MatListModule,
IconModule,
MatIconModule,
MatFormFieldModule,
MatInputModule,
TranslatePipe,
FormsModule,
MatButtonModule
],
templateUrl: './tag-actions.component.html',
styleUrls: ['./tag-actions.component.scss'],
encapsulation: ViewEncapsulation.None,
@@ -66,6 +78,10 @@ export class TagActionsComponent implements OnChanges, OnInit {
errorMsg: string;
disableAddTag: boolean = true;
tagErrorStateMatcher: ErrorStateMatcher = {
isErrorState: () => !!this.errorMsg
};
private readonly destroyRef = inject(DestroyRef);
ngOnInit() {