inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-09-10 14:11:42 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-36582 Fix forms misalignment in form renderer (#11062)

Browse Source
This commit is contained in:
Tomasz Nastaly
2025-08-04 10:04:16 +02:00
committed by GitHub
parent 83d0ac10ee
commit 3eead3917e
7 changed files with 56 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
lib/core/src/lib/form/components/form-renderer.component.html
View File

@@ -1,4 +1,4 @@
<div id="adf-form-renderer" class="{{ formDefinition.className }}"
<div id="adf-form-renderer" class="{{ formDefinition.className }} adf-form-renderer"
[ngClass]="{ 'adf-readonly-form': formDefinition.readOnly }">
<div *ngIf="formDefinition.hasTabs()">
<div *ngIf="hasTabs()" class="alfresco-tabs-widget">

24
lib/core/src/lib/form/components/form-renderer.component.scss
View File

@@ -13,6 +13,14 @@
height: 100%;
}
.adf-form-renderer {
// override Material styles, otherwise fields collapse on some screen widths
// related issue: https://hyland.atlassian.net/browse/AAE-36582
.mat-mdc-form-field-infix {
width: auto;
}
}
.alfresco-tabs-widget {
width: 100%;
@@ -256,6 +264,18 @@
line-height: 64px;
margin-right: 15px;
}
&-error-messages-container {
min-height: 35px;
}
&-error-messages-container-visible {
visibility: visible;
}
&-error-messages-container-hidden {
visibility: hidden;
}
}
form-field {
@@ -267,7 +287,3 @@ form-field {
line-height: normal;
}
}
.adf-error-messages-container {
min-height: 35px;
}

2
lib/core/src/lib/form/components/form-section/form-section.component.scss
View File

@@ -5,7 +5,7 @@
&-single-column {
display: flex;
flex-wrap: inherit;
align-items: baseline;
align-items: center;
gap: 1%;
@include flex.layout-bp(lt-md) {

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

@@ -13,29 +13,30 @@
<div>
<mat-form-field class="adf-form-field-input" [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"
type="text"
data-automation-id="adf-display-external-property-widget"
[id]="field.id"
[formControl]="propertyControl"
[required]="field.required"
>
<mat-label class="adf-label" [attr.for]="field.id"> {{ field.name | translate }} </mat-label>
}
<input
matInput
class="adf-input"
type="text"
data-automation-id="adf-display-external-property-widget"
[id]="field.id"
[formControl]="propertyControl"
[required]="field.required"
/>
<ng-container *ngIf="previewState">
<span class="adf-display-external-property-widget-preview"
data-automation-id="adf-display-external-property-widget-preview"
>
<span class="adf-display-external-property-widget-preview" data-automation-id="adf-display-external-property-widget-preview">
{{ field.params.externalPropertyLabel }}
</span>
</ng-container>
</mat-form-field>
<ng-container *ngIf="!previewState">
<div
class="adf-error-messages-container"
[ngClass]="!previewState ? 'adf-error-messages-container-visible' : 'adf-error-messages-container-hidden'"
>
<error-widget *ngIf="propertyLoadFailed" [required]="'FORM.FIELD.EXTERNAL_PROPERTY_LOAD_FAILED' | translate" />
</ng-container>
</div>
</div>
</div>

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

@@ -11,7 +11,8 @@
</div>
<div>
<mat-form-field class="adf-form-field-input">
@if ( (field.name || this.field?.required) && !field.leftLabels) { <mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label> }
@if ( (field.name || this.field?.required) && !field.leftLabels) {
<mat-label class="adf-label" [attr.for]="field.id">{{ field.name | translate }}</mat-label> }
<mat-select
class="adf-select"
[formControl]="dropdownControl"
@@ -29,12 +30,11 @@
<mat-option id="readonlyOption" *ngIf="isReadOnlyType" [value]="field.value">{{field.value}}</mat-option>
</mat-select>
</mat-form-field>
<div class="adf-error-messages-container" *ngIf="!previewState && !field.readOnly">
<error-widget
class="adf-dropdown-required-message"
*ngIf="showRequiredMessage"
required="{{ 'FORM.FIELD.REQUIRED' | translate }}"
/>
<div
class="adf-error-messages-container"
[ngClass]="!previewState && !field.readOnly ? 'adf-error-messages-container-visible' : 'adf-error-messages-container-hidden'"
>
<error-widget class="adf-dropdown-required-message" *ngIf="showRequiredMessage" required="{{ 'FORM.FIELD.REQUIRED' | translate }}" />
<error-widget
class="adf-dropdown-failed-message"
*ngIf="isRestApiFailed"

13
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.spec.ts
View File

@@ -215,11 +215,12 @@ describe('DropdownCloudWidgetComponent', () => {
widget.ngOnInit();
fixture.detectChanges();
const errorMessageElement = getErrorMessageElement();
expect(getRestWidgetDataSpy).toHaveBeenCalled();
expect(widget.isRestApiFailed).toBe(true);
expect(widget.field.options.length).toEqual(0);
expect(errorMessageElement).toBe(null);
const errorsMessagesElement = fixture.debugElement.query(By.css('.adf-error-messages-container'));
expect(errorsMessagesElement.nativeElement.classList.contains('adf-error-messages-container-hidden')).toBe(true);
});
});
@@ -1151,8 +1152,8 @@ describe('DropdownCloudWidgetComponent', () => {
spyOn(formCloudService, 'getPreviewState').and.returnValue(true);
fixture.detectChanges();
const failedErrorMsgElement = fixture.debugElement.query(By.css('.adf-dropdown-failed-message'));
expect(failedErrorMsgElement).toBeNull();
const errorsMessagesElement = fixture.debugElement.query(By.css('.adf-error-messages-container'));
expect(errorsMessagesElement.nativeElement.classList.contains('adf-error-messages-container-hidden')).toBe(true);
});
it('should NOT display errors if field is readonly', () => {
@@ -1166,8 +1167,8 @@ describe('DropdownCloudWidgetComponent', () => {
widget.field.readOnly = true;
fixture.detectChanges();
const failedErrorMsgElement = fixture.debugElement.query(By.css('.adf-dropdown-failed-message'));
expect(failedErrorMsgElement).toBeNull();
const errorsMessagesElement = fixture.debugElement.query(By.css('.adf-error-messages-container'));
expect(errorsMessagesElement.nativeElement.classList.contains('adf-error-messages-container-hidden')).toBe(true);
});
it('should update options when form variable changes', async () => {

3
lib/process-services-cloud/src/lib/form/components/widgets/dropdown/dropdown-cloud.widget.ts
View File

@@ -29,7 +29,7 @@ import {
SelectFilterInputComponent,
WidgetComponent
} from '@alfresco/adf-core';
import { AsyncPipe, NgFor, NgIf } from '@angular/common';
import { AsyncPipe, NgClass, NgFor, NgIf } from '@angular/common';
import { Component, DestroyRef, inject, OnInit, ViewEncapsulation } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { MatFormFieldModule } from '@angular/material/form-field';
@@ -59,6 +59,7 @@ export const HIDE_FILTER_LIMIT = 5;
imports: [
NgIf,
NgFor,
NgClass,
AsyncPipe,
ReactiveFormsModule,
MatFormFieldModule,