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>
2026-09-09 18:03:21 +00:00 · 2026-07-08 18:32:46 +00:00
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() {