[AAE-13069]- Input fields label improvements (#8387)

* AAE-13069: Removing extra div inside mat label

* AAE-13069: Removing font size css rule and applying right class to the mat label

* AAE-13069: Refactoring text item component based on Angular Material

* AAE-13069: Updated unit test

* AAE-13069: Fixed lint issues

* AAE-13069: Fixed styles

* AAE-13069: Updated e2e tests

* AAE-13069: Updated e2e tests

e2e/core/pages/metadata-view.page.ts

@@ -213,7 +213,7 @@ export class MetadataViewPage {
     }
 
     async checkPropertyIsVisible(propertyName: string, type: string): Promise<void> {
-        const property = $('div[data-automation-id="card-' + type + '-label-' + propertyName + '"]');
+        const property = $('[data-automation-id="card-' + type + '-label-' + propertyName + '"]');
         await BrowserVisibility.waitUntilElementIsVisible(property);
     }
 

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html

@@ -1,10 +1,12 @@
 <div [ngSwitch]="templateType">
     <div *ngSwitchDefault>
         <mat-form-field class="adf-property-field adf-card-textitem-field"
-            [ngClass]="{ 'adf-property-read-only': !isEditable,'adf-property-field-has-error mat-form-field-invalid': isEditable && hasErrors }"
+            [ngClass]="{ 'adf-property-read-only': !isEditable, 'adf-property-field-has-error mat-form-field-invalid': isEditable && hasErrors }"
-            [floatLabel]="'never'">
+            [floatLabel]="'never'"
-            <ng-container *ngTemplateOutlet="label"></ng-container>
+            appearance="standard">
-            <div class="adf-property-field-content">
+            <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
+                {{ property.label | translate }}
+            </mat-label>
                 <input matInput
                     *ngIf="!property.multiline"
                     class="adf-property-value"
@@ -30,24 +32,21 @@
                     [attr.data-automation-id]="'card-textitem-value-' + property.key">
                 </textarea>
 
-                <button mat-button
+                <button
-                    matSuffix
-                    class="adf-property-clear-value"
                     *ngIf="isEditable"
-                    mat-icon-button
+                    matSuffix
+                    class="adf-textitem-clear-icon"
                     [attr.aria-label]="'CORE.METADATA.ACTIONS.CLEAR' | translate"
                     (click)="clearValue()">
                     <mat-icon>cancel</mat-icon>
                 </button>
-                <div matSuffix *ngIf="isEditable" class="adf-textitem-edit-value">
+                <button
-                    <mat-icon
+                    *ngIf="isEditable"
-                        *ngIf="isEditable"
+                    matSuffix
-                        mat-icon-button
+                    class="adf-textitem-edit-icon"
-                        [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate"
+                    [attr.title]="'CORE.METADATA.ACTIONS.EDIT' | translate">
-                        class="adf-textitem-edit-icon"
+                    <mat-icon>mode_edit</mat-icon>
-                    >mode_edit</mat-icon>
+                </button>
-                </div>
-            </div>
 
         </mat-form-field>
     </div>
@@ -65,7 +64,7 @@
             </mat-chip>
         </mat-chip-list>
 
-        <mat-form-field *ngIf="isEditable"
+        <mat-form-field *ngIf="isEditable" appearance="standard"
             class="adf-property-field adf-textitem-chip-list-input"
             [ngClass]="{ 'adf-property-read-only': !isEditable }"
             [floatLabel]="'never'">
@@ -91,9 +90,11 @@
         (click)="clicked()"
         fxLayout="row"
         fxLayoutAlign="space-between center">
-        <mat-form-field class="adf-property-field adf-card-textitem-field"
+        <mat-form-field class="adf-property-field adf-card-textitem-field" appearance="standard"
             [floatLabel]="'never'">
-            <ng-container *ngTemplateOutlet="label"></ng-container>
+            <mat-label *ngIf="showProperty || isEditable" [attr.data-automation-id]="'card-textitem-label-' + property.key" class="adf-property-label">
+                {{ property.label | translate }}
+            </mat-label>
             <input matInput
                 [type]=property.inputType
                 class="adf-property-value"
@@ -120,7 +121,6 @@
     </div>
 
     <div *ngSwitchCase="'emptyTemplate'">
-        <ng-container *ngTemplateOutlet="label"></ng-container>
         <span class="adf-textitem-default-value">{{ property.default | translate }}</span>
     </div>
 
@@ -132,14 +132,3 @@
         </ul>
     </mat-error>
 </div>
-
-<ng-template #label>
-    <mat-label>
-        <div class="adf-property-label"
-            [attr.data-automation-id]="'card-textitem-label-' + property.key"
-            *ngIf="showProperty || isEditable"
-        >
-        {{ property.label | translate }}
-        </div>
-    </mat-label>
-</ng-template>

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss

@@ -161,42 +161,41 @@
     &-textitem-multiline {
         display: block;
     }
+}
 
-    &-property-field .adf-property-clear-value {
+.mat-form-field {
-        display: none;
+    .mat-form-field-suffix {
-    }
+        .mat-icon {
-
-    &-property-field {
-        .adf-property-clear-value,
-        .adf-textitem-edit-value {
-            justify-content: center;
-            align-items: center;
             width: 30px;
             height: 30px;
         }
 
-        .adf-textitem-edit-value {
-            display: flex;
-        }
-
-        .adf-property-field-content {
-            display: flex;
-        }
-    }
-
-    &-property-field.adf-card-textitem-field:hover {
-        .adf-textitem-edit-value,
         .adf-textitem-edit-icon {
+            display: block;
+        }
+
+        .adf-textitem-clear-icon {
             display: none;
         }
 
-        .adf-property-clear-value {
+        .adf-textitem-edit-icon,
-            color: var(--adf-theme-foreground-text-color-025);
+        .adf-textitem-clear-icon {
-            display: flex;
+            background: transparent;
+            border: none;
+
+            &:hover {
+                cursor: pointer;
+            }
         }
 
-        .adf-property-clear-value:hover {
+        &:hover {
-            color: var(--adf-theme-foreground-text-color);
+            .adf-textitem-edit-icon {
+                display: none;
+            }
+
+            .adf-textitem-clear-icon {
+                display: block;
+            }
         }
     }
 }

lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts

@@ -460,7 +460,7 @@ describe('CardViewTextItemComponent', () => {
             fixture.detectChanges();
             await fixture.whenStable();
             fixture.detectChanges();
-            const clickEl = fixture.debugElement.query(By.css(`.adf-property-clear-value`));
+            const clickEl = fixture.debugElement.query(By.css(`.adf-textitem-clear-icon`));
             clickEl.triggerEventHandler('click', new MouseEvent('click'));
 
             fixture.detectChanges();

lib/core/src/lib/card-view/components/card-view/card-view.component.scss

@@ -7,12 +7,6 @@
             margin-top: 6px;
         }
 
-        .adf-property-read-only {
-            .mat-form-field-underline {
-                display: none;
-            }
-        }
-
         .adf-property-field {
             width: 100%;
             margin-bottom: -25px;
@@ -24,24 +18,6 @@
             .mat-form-field-label {
                 margin-top: 6px;
             }
-
-            .adf-property-read-only {
-                .mat-form-field-underline {
-                    display: none;
-                }
-            }
-        }
-
-        .adf-property-label {
-            font-size: var(--theme-caption-font-size);
-            color: var(--adf-theme-foreground-text-color-054);
-            word-wrap: break-word;
-        }
-
-        .adf-property-value,
-        .mat-form-field-label {
-            font-size: var(--theme-body-1-font-size);
-            color: var(--adf-theme-foreground-text-color-087);
         }
     }
 }

lib/core/src/lib/form/components/widgets/form.theme.scss

@@ -5,10 +5,6 @@ ul > li > form-field > .adf-focus {
     }
 }
 
-.mat-form-field-label {
-    color: var(--adf-theme-mat-grey-color-a200-dark) !important;
-}
-
 .adf {
     &-error-container {
         height: 20px;

lib/testing/src/lib/protractor/core/pages/card-view/card-view-text-item.page.ts

@@ -24,13 +24,13 @@ export class CardTextItemPage {
     saveButton = 'button[data-automation-id*="card-textitem-update"]';
     clearButton = 'button[data-automation-id*="card-textitem-reset"]';
     field = '[data-automation-id*="card-textitem-value"]';
-    labelLocator = 'div[data-automation-id*="card-textitem-label"]';
+    labelLocator = '[data-automation-id*="card-textitem-label"]';
     errorMessage = '.adf-textitem-editable-error';
     clickableElement = '.adf-textitem-clickable';
     readOnlyField = '.adf-property-read-only';
 
     constructor(label: string = 'assignee') {
-        this.rootElement = element(by.xpath(`//div[contains(@data-automation-id, "card-textitem-label-${label}")]//ancestor::adf-card-view-textitem`));
+        this.rootElement = element(by.xpath(`//mat-label[contains(@data-automation-id, "card-textitem-label-${label}")]//ancestor::adf-card-view-textitem`));
     }
 
     async getFieldValue(): Promise<string> {