AAE-34482 Fixing label and alignment issues in forms (#10898)

* AAE-34482 fixing label and alignment issues in forms

* AAE-34482 fixing margin issues

* AAE-34482 adding span inside mat-label

* AAE-34482 fixing units

* AAE-34482 removing unwanted unit

* AAE-34482 fixing unit

* AAE-34482 fixing native element class in unit tests

lib/core/src/lib/form/components/form-renderer.component.scss

@@ -16,6 +16,10 @@
 .alfresco-tabs-widget {
     width: 100%;
 
+    .adf-form-tab-content {
+        margin-top: 1em;
+    }
+
     .adf-form-tab-group {
         width: 100%;
     }

lib/core/src/lib/form/components/widgets/amount/amount.widget.html

@@ -10,9 +10,9 @@
         >
     </div>
     <div>
-        <mat-form-field class="adf-amount-widget__input" [hideRequiredMarker]="true">
+        <mat-form-field class="adf-amount-widget__input" [hideRequiredMarker]="true" [floatLabel]="placeholder ? 'always' : 'auto'">
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
+            <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
-                >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
+                >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></mat-label
             >
             <span matTextPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}&nbsp;</span>
             <input

lib/core/src/lib/form/components/widgets/amount/amount.widget.scss

@@ -24,6 +24,10 @@
             align-self: flex-end;
         }
 
+        .adf-input {
+            margin-top: 3px;
+        }
+
         &:not(#{ms.$mat-focused}):not(#{ms.$mat-form-field-invalid}) {
             .adf-amount-widget__prefix-spacing {
                 color: var(--adf-theme-foreground-secondary-text-color);

lib/core/src/lib/form/components/widgets/amount/amount.widget.spec.ts

@@ -192,7 +192,7 @@ describe('AmountWidgetComponent - rendering', () => {
         expect(inputField).toBeTruthy();
         expect(await field.getPrefixText()).toBe('$');
 
-        const widgetLabel = testingUtils.getByCSS('label.adf-label').nativeElement;
+        const widgetLabel = testingUtils.getByCSS('.adf-label').nativeElement;
         expect(widgetLabel.textContent.trim()).toBe('Test Amount*');
         expect(widget.field.isValid).toBe(false);
 
@@ -228,7 +228,7 @@ describe('AmountWidgetComponent - rendering', () => {
         fixture.detectChanges();
         await fixture.whenStable();
 
-        const widgetLabel = testingUtils.getByCSS('label.adf-label').nativeElement;
+        const widgetLabel = testingUtils.getByCSS('.adf-label').nativeElement;
         expect(widgetLabel.textContent.trim()).toBe('Test Amount*');
 
         const field = await testingUtils.getMatFormField();

lib/core/src/lib/form/components/widgets/date-time/date-time.widget.html

@@ -11,9 +11,9 @@
         <mat-form-field class="adf-date-time-widget"
                         [class.adf-left-label-input-datepicker]="field.leftLabels"
                         [hideRequiredMarker]="true">
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
+            <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
                 {{ field.name | translate }} ({{ field.dateDisplayFormat }})<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
-            </label>
+            </mat-label>
             <input matInput
                    [matDatetimepicker]="datetimePicker"
                    [id]="field.id"

lib/core/src/lib/form/components/widgets/decimal/decimal.component.html

@@ -10,9 +10,9 @@
 
     <div>
         <mat-form-field [hideRequiredMarker]="true">
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
+            <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
                 {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
-            </label>
+            </mat-label>
 
             <input matInput
                    class="adf-input"

lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.html

@@ -2,9 +2,9 @@
      [class.adf-invalid]="!field.isValid && isTouched()"
      [class.adf-readonly]="field.readOnly">
     <mat-form-field floatPlaceholder="never" [hideRequiredMarker]="true">
-        <label class="adf-label" [attr.for]="field.id">
+        <mat-label class="adf-label" [attr.for]="field.id">
             {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
-        </label>
+        </mat-label>
         <textarea matInput
                   class="adf-input"
                   [cdkTextareaAutosize]="true"

lib/core/src/lib/form/components/widgets/number/number.widget.html

@@ -10,9 +10,9 @@
     </div>
     <div>
         <mat-form-field [hideRequiredMarker]="true">
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
+            <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id">
                 {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
-            </label>
+            </mat-label>
             <input matInput
                    class="adf-input"
                    type="text"

lib/core/src/lib/form/components/widgets/text/text.widget.html

@@ -9,9 +9,9 @@
     </div>
     <div>
         <mat-form-field [hideRequiredMarker]="true">
-            <label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
+            <mat-label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
                 {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
-            </label>
+            </mat-label>
             <input matInput
                    class="adf-input"
                    type="text"

lib/process-services-cloud/src/lib/form/components/widgets/date/date-cloud.widget.html

@@ -15,13 +15,12 @@
     </div>
     <div>
         <mat-form-field class="adf-date-widget" [class.adf-left-label-input-datepicker]="field.leftLabels" [hideRequiredMarker]="true">
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
+            <mat-label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id"
                 >{{field.name | translate }} ({{field.dateDisplayFormat}})<span
                     class="adf-asterisk"
                     [style.visibility]="isRequired() ? 'visible' : 'hidden'"
                     >*</span
-                ></label
+                ></mat-label>
-            >
             <input
                 matInput
                 [matDatepicker]="datePicker"

lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.html

@@ -11,9 +11,9 @@
     </div>
     <div>
         <mat-form-field>
-            <label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
+            <mat-label *ngIf="!field.leftLabels" class="adf-label" [attr.for]="field.id">
                 {{ field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span>
-            </label>
+            </mat-label>
             <mat-select
                 class="adf-select"
                 [formControl]="dropdownControl"

lib/process-services-cloud/src/lib/form/components/widgets/group/group-cloud.widget.html

@@ -22,11 +22,8 @@
             [preSelectGroups]="preSelectGroup"
             (blur)="markAsTouched()"
             [attr.title]="field.tooltip"
-        >
+            [label] = "field.name | translate"
-            <label class="adf-label" *ngIf="!field.leftLabels" [attr.for]="field.id" label
+        />
-                >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label
-            >
-        </adf-cloud-group>
         <error-widget [error]="field.validationSummary" />
         <error-widget
             class="adf-dropdown-required-message"

lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.html

@@ -19,12 +19,8 @@
             [groupsRestriction]="groupsRestriction"
             (blur)="markAsTouched()"
             [attr.title]="field.tooltip"
-        >
+            [label]="field.name | translate"
-            <label class="adf-label"
+        />
-                   *ngIf="!field.leftLabels"
-                   [attr.for]="field.id" label
-            >{{field.name | translate }}<span class="adf-asterisk" [style.visibility]="isRequired() ? 'visible' : 'hidden'">*</span></label>
-        </adf-cloud-people>
         <error-widget [error]="field.validationSummary" />
         <error-widget
             class="adf-dropdown-required-message"

lib/process-services-cloud/src/lib/form/components/widgets/people/people-cloud.widget.ts

@@ -26,13 +26,14 @@ import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { CommonModule } from '@angular/common';
 import { TranslateModule } from '@ngx-translate/core';
 import { PeopleCloudComponent } from '../../../../people/components/people-cloud.component';
+import { MatFormFieldModule } from '@angular/material/form-field';
 
 /* eslint-disable @angular-eslint/component-selector */
 
 @Component({
     selector: 'people-cloud-widget',
     standalone: true,
-    imports: [CommonModule, TranslateModule, ErrorWidgetComponent, PeopleCloudComponent],
+    imports: [CommonModule, TranslateModule, ErrorWidgetComponent, PeopleCloudComponent, MatFormFieldModule],
     templateUrl: './people-cloud.widget.html',
     host: {
         '(click)': 'event($event)',

lib/process-services-cloud/src/lib/group/components/group-cloud.component.html

@@ -1,6 +1,9 @@
 <form>
     <mat-form-field class="adf-cloud-group" [class.adf-invalid]="hasError() && isDirty()">
-        <ng-content select="[label]" />
+        <mat-label>
+            <span>{{label}}</span>
+            <span class="adf-asterisk" [style.visibility]="required ? 'visible' : 'hidden'">*</span>
+        </mat-label>
         <mat-chip-grid #groupChipList data-automation-id="adf-cloud-group-chip-list">
             <mat-chip-row
                 *ngFor="let group of selectedGroups"

lib/process-services-cloud/src/lib/group/components/group-cloud.component.ts

@@ -75,6 +75,10 @@ import { IdentityGroupService } from '../services/identity-group.service';
     encapsulation: ViewEncapsulation.None
 })
 export class GroupCloudComponent implements OnInit, OnChanges {
+    /** Label for the user selection component. */
+    @Input()
+    label: string;
+
     /** Name of the application. If specified this shows the groups who have access to the app. */
     @Input()
     appName: string;

lib/process-services-cloud/src/lib/people/components/people-cloud.component.html

@@ -5,8 +5,12 @@
         class="adf-people-cloud"
         [class.adf-invalid]="hasError() && isDirty()"
     >
-        <ng-content *ngIf="!title" select="[label]" />
+        <mat-label *ngIf="!title">
+            <span>{{label}}</span>
+            <span class="adf-asterisk" [style.visibility]="required ? 'visible' : 'hidden'">*</span>
+        </mat-label>
         <mat-label *ngIf="title">{{ title | translate }}</mat-label>
+
         <mat-chip-grid #userMultipleChipList data-automation-id="adf-cloud-people-chip-list">
             <mat-chip-row
                 *ngFor="let user of selectedUsers"

lib/process-services-cloud/src/lib/people/components/people-cloud.component.spec.ts

@@ -100,14 +100,6 @@ describe('PeopleCloudComponent', () => {
         expect(await inputField.getLabel()).toEqual('TITLE_KEY');
     });
 
-    it('should not populate label when title is not present', async () => {
-        fixture.detectChanges();
-
-        const inputField = await loader.getHarness(MatFormFieldHarness.with({ selector: '.adf-people-cloud' }));
-
-        expect(await inputField.getLabel()).toBeNull();
-    });
-
     describe('Search user', () => {
         beforeEach(() => {
             fixture.detectChanges();

lib/process-services-cloud/src/lib/people/components/people-cloud.component.ts

@@ -80,6 +80,10 @@ import { MatTooltipModule } from '@angular/material/tooltip';
     encapsulation: ViewEncapsulation.None
 })
 export class PeopleCloudComponent implements OnInit, OnChanges, AfterViewInit {
+    /** Label for the user selection component. */
+    @Input()
+    label: string;
+
     /** Name of the application. If specified, this shows the users who have access to the app. */
     @Input()
     appName: string;