inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Alex Molodyh
2026-08-25 13:19:19 -07:00
committed by GitHub
parent 9f37f22702
commit f9940f0db8
19 changed files with 69 additions and 40 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/process-services-cloud/src/lib/form/components/widgets/data-table/data-table.widget.scss
+7 -6
View File
@@ -1,11 +1,12 @@
.adf-data-table-widget-failed-message {
display: block;
margin: 10px;
}
.adf-preview-placeholder {
height: 100%;
width: 100%;
min-height: 100px;
margin-bottom: 10px;
.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
+7 -2
View File
@@ -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
+3 -2
View File
@@ -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
+3 -2
View File
@@ -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
-4
View File
@@ -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
+1
View File
@@ -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
+4
View File
@@ -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);
}