AAE-46057 Refine form field status spacing (#12196)

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

@@ -21,10 +21,10 @@
         width: auto;
     }
 
-    .adf-form-field-input:not(.adf-inplace-input-mat-form-field, .adf-people-cloud, .adf-cloud-group) {
+    .adf-form-field-status-slot {
-        #{ms.$mat-form-field-subscript-wrapper} {
+        display: block;
         height: 40px;
-        }
+        box-sizing: border-box;
     }
 }
 

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

@@ -10,7 +10,11 @@
         >
     </div>
     <div class="adf-amount-widget-container">
-        <mat-form-field class="adf-amount-widget__input adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
+        <mat-form-field
+            class="adf-amount-widget__input adf-form-field-input"
+            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(!enableDisplayBasedOnLocale) {
                 <span matTextPrefix class="adf-amount-widget__prefix-spacing">{{ currency }}&nbsp;</span>
@@ -32,12 +36,13 @@
                 (blur)="amountWidgetOnBlur()"
                 />
             @if (field.validationSummary?.message || (isInvalidFieldRequired() && isTouched())) {
-                <mat-error>
+                <mat-error class="adf-form-field-status-slot">
                     <mat-icon class="adf-error-icon">error_outline</mat-icon>
                     <span class="adf-error-text"
                         >@if (field.validationSummary?.message) {{{ field.validationSummary.message | translate:translateParameters }}} @else {{{ 'FORM.FIELD.REQUIRED' | translate }}}</span>
                 </mat-error>
             }
+            <mat-hint class="adf-form-field-status-slot" aria-hidden="true" />
         </mat-form-field>
     </div>
 </div>

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

@@ -10,6 +10,7 @@
     </div>
     <div class="adf-date-time-widget-container">
         <mat-form-field class="adf-date-time-widget adf-form-field-input"
+                        subscriptSizing="dynamic"
                         [class.adf-left-label-input-datepicker]="field.leftLabels"
                         [floatLabel]="field.placeholder ? 'always' : null">
             @if( (field.name || field?.required) && !field.leftLabels) {
@@ -38,11 +39,12 @@
                 [timeInterval]="5"
                 [disabled]="field.readOnly" />
             @if (datetimeInputControl.invalid && datetimeInputControl.touched && field.validationSummary?.message) {
-                <mat-error>
+                <mat-error class="adf-form-field-status-slot">
                     <mat-icon class="adf-error-icon">error_outline</mat-icon>
                     <span class="adf-error-text">{{ field.validationSummary.message | translate:translateParameters }}</span>
                 </mat-error>
             }
+            <mat-hint class="adf-form-field-status-slot" aria-hidden="true" />
         </mat-form-field>
     </div>
 </div>

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

@@ -1,7 +1,7 @@
 <div class="{{ field.className }} date-widget-container" id="data-widget"
      [class.adf-invalid]="dateInputControl.invalid && dateInputControl.touched"
      [class.adf-readonly]="field.readOnly">
-    <mat-form-field class="adf-date-widget adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
+    <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">
@@ -22,11 +22,12 @@
                         [startAt]="startAt"
                         [disabled]="field.readOnly" />
         @if (dateInputControl.invalid && dateInputControl.touched) {
-            <mat-error>
+            <mat-error class="adf-form-field-status-slot">
                 <mat-icon class="adf-error-icon">error_outline</mat-icon>
                 <span class="adf-error-text"
                     >@if (dateInputControl.hasError('required')) {{{ 'FORM.FIELD.REQUIRED' | translate }}} @else if (dateInputControl.hasError('matDatepickerParse')) {{{ 'FORM.FIELD.VALIDATOR.INVALID_DATE_FORMAT' | translate: { format: field.dateDisplayFormat || field.defaultDateTimeFormat } }}} @else if (dateInputControl.hasError('matDatepickerMin')) {{{ 'FORM.FIELD.VALIDATOR.NOT_LESS_THAN' | translate: { minValue: formattedMinDate } }}} @else if (dateInputControl.hasError('matDatepickerMax')) {{{ 'FORM.FIELD.VALIDATOR.NOT_GREATER_THAN' | translate: { maxValue: formattedMaxDate } }}}</span>
             </mat-error>
         }
+        <mat-hint class="adf-form-field-status-slot" aria-hidden="true" />
     </mat-form-field>
 </div>

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

@@ -9,7 +9,7 @@
     </div>
 
     <div class="adf-decimal-widget-container">
-        <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
+        <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> }
             <input matInput
                    class="adf-input"
@@ -25,12 +25,13 @@
                    [errorStateMatcher]="errorStateMatcher"
                    (blur)="onBlur()" />
             @if (field.validationSummary?.message || (isInvalidFieldRequired() && isTouched())) {
-                <mat-error>
+                <mat-error class="adf-form-field-status-slot">
                     <mat-icon class="adf-error-icon">error_outline</mat-icon>
                     <span class="adf-error-text"
                         >@if (field.validationSummary?.message) {{{ field.validationSummary.message | translate:translateParameters }}} @else {{{ 'FORM.FIELD.REQUIRED' | translate }}}</span>
                 </mat-error>
             }
+            <mat-hint class="adf-form-field-status-slot" aria-hidden="true" />
         </mat-form-field>
     </div>
 </div>

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

@@ -1,7 +1,6 @@
 .adf-hyperlink-widget {
     padding: 0.4375em 0;
-    border-top: 0.8438em solid transparent;
+    margin-bottom: 40px;
-    margin-bottom: 20px;
 
     a {
         color: var(--mat-sys-primary);

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

@@ -7,6 +7,7 @@
     <mat-form-field
         floatPlaceholder="never"
         class="adf-form-field-input"
+        subscriptSizing="dynamic"
         [class.adf-has-counter]="field.maxLength > 0"
         [floatLabel]="field.placeholder ? 'always' : null"
     >
@@ -31,14 +32,16 @@
         >
         </textarea>
         @if (field.validationSummary?.message || (isInvalidFieldRequired() && isTouched())) {
-            <mat-error>
+            <mat-error class="adf-form-field-status-slot">
                 @if (field.maxLength > 0) {<span class="adf-multiline-counter-block">{{ field?.value?.length || 0 }}/{{ field.maxLength }}</span>}
                 <mat-icon class="adf-error-icon">error_outline</mat-icon>
                 <span class="adf-error-text"
                     >@if (field.validationSummary?.message) {{{ field.validationSummary.message | translate:translateParameters }}} @else {{{ 'FORM.FIELD.REQUIRED' | translate }}}</span>
             </mat-error>
         } @else if (field.maxLength > 0) {
-            <mat-hint class="adf-multiline-hint">{{ field?.value?.length || 0 }}/{{ field.maxLength }}</mat-hint>
+            <mat-hint class="adf-multiline-hint adf-form-field-status-slot">{{ field?.value?.length || 0 }}/{{ field.maxLength }}</mat-hint>
+        } @else {
+            <mat-hint class="adf-form-field-status-slot" aria-hidden="true" />
         }
     </mat-form-field>
 </div>

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

@@ -9,7 +9,7 @@
         </label>
     </div>
     <div class="adf-number-widget-container">
-        <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
+        <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">
                 {{ field.name | translate }}
@@ -30,12 +30,13 @@
                    [errorStateMatcher]="errorStateMatcher"
                    (blur)="onBlur()">
             @if (field.validationSummary?.message || (isInvalidFieldRequired() && isTouched())) {
-                <mat-error>
+                <mat-error class="adf-form-field-status-slot">
                     <mat-icon class="adf-error-icon">error_outline</mat-icon>
                     <span class="adf-error-text"
                         >@if (field.validationSummary?.message) {{{ field.validationSummary.message | translate:translateParameters }}} @else {{{ 'FORM.FIELD.REQUIRED' | translate }}}</span>
                 </mat-error>
             }
+            <mat-hint class="adf-form-field-status-slot" aria-hidden="true" />
         </mat-form-field>
     </div>
 </div>

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

@@ -8,7 +8,11 @@
         </label>
     </div>
     <div class="adf-text-widget-container">
-        <mat-form-field class="adf-form-field-input" [floatLabel]="placeholder ? 'always' : null">
+        <mat-form-field
+            class="adf-form-field-input"
+            subscriptSizing="dynamic"
+            [floatLabel]="placeholder ? 'always' : null"
+        >
             @if ( (field.name || this.field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">
                 {{ field.name | translate }}
             </mat-label>
@@ -30,7 +34,7 @@
                    (paste)="onPaste($event)"
                    (blur)="onBlur()">
             @if (!fieldStatusTemplate && (maxLengthPasteError.isActive() || field.validationSummary?.message || (isInvalidFieldRequired() && isTouched()))) {
-                <mat-error>
+                <mat-error class="adf-form-field-status-slot">
                     <mat-icon class="adf-error-icon" adf-icon="error_outline" />
                     <span class="adf-error-text">
                         @if (maxLengthPasteError.isActive()) {
@@ -43,6 +47,9 @@
                     </span>
                 </mat-error>
             }
+            @if (!fieldStatusTemplate) {
+                <mat-hint class="adf-form-field-status-slot" aria-hidden="true" />
+            }
         </mat-form-field>
         <ng-container *ngTemplateOutlet="maxLengthPasteError.isActive() && fieldStatusTemplate ? maxLengthPasteErrorTemplate : (fieldStatusTemplate ?? null); context: { $implicit: this }" />
         <ng-template #maxLengthPasteErrorTemplate>

lib/core/src/lib/styles/_mat-selectors.scss

@@ -17,7 +17,6 @@ $mat-button: '.mat-mdc-button';
 $mat-button-label: '.mdc-button__label';
 $mat-form-field: '.mat-mdc-form-field';
 $mat-form-field-wrapper: '.mat-mdc-text-field-wrapper';
-$mat-form-field-subscript-wrapper: '.mat-mdc-form-field-subscript-wrapper';
 $mat-line-ripple: '.mdc-line-ripple';
 $mat-form-field-prefix: '.mat-mdc-form-field-text-prefix';
 $mat-form-field-suffix: '.mat-mdc-form-field-text-suffix';

lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.scss

@@ -1,11 +1,12 @@
 .adf-data-table-widget-failed-message {
     display: block;
-    margin: 10px;
 }
 
-.adf-preview-placeholder {
+.adf-data-table-widget-container {
+    .adf-preview-placeholder {
         height: 100%;
         width: 100%;
         min-height: 100px;
         margin-bottom: 10px;
+    }
 }

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

@@ -15,7 +15,11 @@
         >
     </div>
     <div class="adf-date-widget-container">
-        <mat-form-field class="adf-date-widget adf-form-field-input" [class.adf-left-label-input-datepicker]="field.leftLabels">
+        <mat-form-field
+            class="adf-date-widget adf-form-field-input"
+            subscriptSizing="dynamic"
+            [class.adf-left-label-input-datepicker]="field.leftLabels"
+        >
             @if ( (field.name || field?.required) && !field.leftLabels) {
                 <mat-label class="adf-label" [attr.for]="field.id">
                     {{field.name | translate }} ({{field.dateDisplayFormat}})
@@ -36,12 +40,13 @@
             <mat-datepicker-toggle matSuffix [for]="datePicker" [disabled]="field.readOnly" />
             <mat-datepicker #datePicker [startAt]="startAt" [disabled]="field.readOnly" />
             @if (dateInputControl.invalid && dateInputControl.touched) {
-                <mat-error>
+                <mat-error class="adf-form-field-status-slot">
                     <mat-icon class="adf-error-icon">error_outline</mat-icon>
                     <span class="adf-error-text"
                         >@if (dateInputControl.hasError('required')) {{{ 'FORM.FIELD.REQUIRED' | translate }}} @else if (dateInputControl.hasError('matDatepickerParse')) {{{ 'FORM.FIELD.VALIDATOR.INVALID_DATE_FORMAT' | translate: { format: field.dateDisplayFormat || field.defaultDateTimeFormat } }}} @else if (dateInputControl.hasError('matDatepickerMin')) {{{ 'FORM.FIELD.VALIDATOR.NOT_LESS_THAN' | translate: { minValue: formattedMinDate } }}} @else if (dateInputControl.hasError('matDatepickerMax')) {{{ 'FORM.FIELD.VALIDATOR.NOT_GREATER_THAN' | translate: { maxValue: formattedMaxDate } }}}</span>
                 </mat-error>
             }
+            <mat-hint class="adf-form-field-status-slot" aria-hidden="true" />
         </mat-form-field>
     </div>
 </div>

lib/process-services-cloud/src/lib/form/components/widgets/display-external-property/display-external-property.widget.html

@@ -11,7 +11,7 @@
     </div>
 
     <div>
-        <mat-form-field class="adf-form-field-input" [floatLabel]="field.placeholder ? 'always' : null">
+        <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>
             }
@@ -32,8 +32,9 @@
                 </span>
             </ng-container>
             @if (propertyLoadFailed && !previewState) {
-                <mat-error><mat-icon class="adf-error-icon">error_outline</mat-icon><span class="adf-error-text">{{ 'FORM.FIELD.EXTERNAL_PROPERTY_LOAD_FAILED' | translate }}</span></mat-error>
+                <mat-error class="adf-form-field-status-slot"><mat-icon class="adf-error-icon">error_outline</mat-icon><span class="adf-error-text">{{ 'FORM.FIELD.EXTERNAL_PROPERTY_LOAD_FAILED' | translate }}</span></mat-error>
             }
+            <mat-hint class="adf-form-field-status-slot" aria-hidden="true" />
         </mat-form-field>
     </div>
 </div>

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

@@ -12,7 +12,7 @@
         </div>
     }
     <div class="adf-dropdown-widget-container">
-        <mat-form-field class="adf-form-field-input">
+        <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>
             }
@@ -49,12 +49,13 @@
                 }
             </mat-select>
             @if ((dropdownControl.hasError('required') && !isRestApiFailed && !variableOptionsFailed) || (!previewState && !field.readOnly && (isRestApiFailed || variableOptionsFailed))) {
-                <mat-error>
+                <mat-error class="adf-form-field-status-slot">
                     <mat-icon class="adf-error-icon">error_outline</mat-icon>
                     <span class="adf-error-text"
                         >@if (dropdownControl.hasError('required') && !isRestApiFailed && !variableOptionsFailed) {{{ 'FORM.FIELD.REQUIRED' | translate }}} @else if (isRestApiFailed) {{{ 'FORM.FIELD.REST_API_FAILED' | translate: { hostname: restApiHostName } }}} @else if (variableOptionsFailed) {{{ 'FORM.FIELD.VARIABLE_DROPDOWN_OPTIONS_FAILED' | translate }}}</span>
                 </mat-error>
             }
+            <mat-hint class="adf-form-field-status-slot" aria-hidden="true" />
         </mat-form-field>
     </div>
 </div>

lib/process-services-cloud/src/lib/form/components/widgets/radio-buttons/radio-buttons-cloud.widget.scss

@@ -45,8 +45,4 @@
             word-break: break-word;
         }
     }
-
-    &-radio-group-error-message .adf-error-container {
-        margin-top: 5px;
-    }
 }

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

@@ -63,6 +63,7 @@
     }
 
     .adf-error {
+        padding-top: 3px;
         animation: slide-down-fade-in 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
     }
 }

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

@@ -66,6 +66,10 @@
         @include mixins.adf-error-icon;
     }
 
+    .adf-error {
+        padding-top: 3px;
+    }
+
     .adf-error-animate {
         animation: adf-people-cloud-slide-in-down 300ms cubic-bezier(0.55, 0, 0.55, 0.2);
     }

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

@@ -6,17 +6,18 @@
     <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">
+    <mat-form-field class="adf-form-field-input" subscriptSizing="dynamic">
         <mat-select class="adf-select" [id]="field.id" [formControl]="dropdownControl">
             <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>
         @if (!isReadOnlyField && dropdownControl.touched && (field.validationSummary?.message || dropdownControl.hasError('required'))) {
-            <mat-error data-automation-id="adf-dropdown-error">
+            <mat-error class="adf-form-field-status-slot" data-automation-id="adf-dropdown-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-hint class="adf-form-field-status-slot" aria-hidden="true" />
     </mat-form-field>
 </div>

lib/process-services/src/lib/form/widgets/typeahead/typeahead.widget.html

@@ -4,7 +4,7 @@
         [class.adf-invalid]="!field.isValid"
         [class.adf-readonly]="field.readOnly"
         id="typehead-div">
-        <mat-form-field class="adf-form-field-input">
+        <mat-form-field class="adf-form-field-input" subscriptSizing="dynamic">
             <label class="adf-label" [attr.for]="field.id">{{field.name | translate }}</label>
             <input matInput class="adf-input"
                    type="text"
@@ -23,12 +23,13 @@
                 </mat-option>
             </mat-autocomplete>
             @if (field.validationSummary?.message || isInvalidFieldRequired()) {
-                <mat-error>
+                <mat-error class="adf-form-field-status-slot">
                     <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-hint class="adf-form-field-status-slot" aria-hidden="true" />
         </mat-form-field>
     </div>
 </div>