inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2025-07-24 17:32:15 +00:00
Code Issues Packages Projects Releases Wiki Activity

[ADF-5472] Missing placeholder for inplace input (#7541)

Browse Source
This commit is contained in:
Bartosz Sekuła
2022-03-08 10:17:38 +01:00
committed by GitHub
parent 83951c64cd
commit 736ec5d92f
4 changed files with 41 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
lib/core/form/components/inplace-form-input/inplace-form-input.component.html
View File

@@ -1,6 +1,6 @@
<div
class="adf-inplace-input-container"
[ngClass]="{'adf-inplace-input-container-error': control.invalid}"
[ngClass]="{'adf-inplace-input-container-error': control.invalid && control.touched}"
>
<mat-form-field class="adf-inplace-input-mat-form-field">
<input
@@ -10,8 +10,12 @@
data-automation-id="adf-inplace-input"
>
<mat-label data-automation-id="adf-inplace-input-label">
<ng-content select="[label]"></ng-content>
</mat-label>
<mat-error data-automation-id="adf-inplace-input-error">
<ng-content></ng-content>
<ng-content select="[error]"></ng-content>
</mat-error>
</mat-form-field>
</div>

10
lib/core/form/components/inplace-form-input/inplace-form-input.component.scss
View File

@@ -1,3 +1,5 @@
$adf-inplace-input-padding: 7px;
.adf-inplace-input-container {
.mat-form-field-underline {
display: none;
@@ -8,8 +10,12 @@
border-top: 0;
}
.mat-form-field-label {
padding: $adf-inplace-input-padding;
}
&-error {
input {
.adf-inplace-input {
border: 1px solid var(--theme-warn-color) !important;
}
}
@@ -19,7 +25,7 @@
}
.adf-inplace-input {
padding: 7px;
padding: $adf-inplace-input-padding;
border: 1px solid transparent;
border-radius: 4px;

12
lib/core/form/components/inplace-form-input/inplace-form-input.component.spec.ts
View File

@@ -69,4 +69,16 @@ describe('InplaceFormInputComponent', () => {
expect(error).toBeTruthy();
});
it('should show label', () => {
formControl.setValue('');
fixture.detectChanges();
const error = fixture.nativeElement.querySelector(
'[data-automation-id="adf-inplace-input-label"]'
);
expect(error).toBeTruthy();
});
});

24
lib/process-services-cloud/src/lib/process/start-process/components/start-process-cloud.component.html
View File

@@ -42,15 +42,21 @@
</mat-form-field>
<adf-inplace-form-input [control]="processInstanceName">
<span *ngIf="processInstanceName.hasError('required')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
</span>
<span id="adf-start-process-maxlength-error" *ngIf="processInstanceName.hasError('maxlength')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxNameLength } }}
</span>
<span *ngIf="processInstanceName.hasError('pattern')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }}
</span>
<ng-container label>
{{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate}}
</ng-container>
<ng-container error>
<span *ngIf="processInstanceName.hasError('required')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
</span>
<span id="adf-start-process-maxlength-error" *ngIf="processInstanceName.hasError('maxlength')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.MAXIMUM_LENGTH' | translate : { characters : maxNameLength } }}
</span>
<span *ngIf="processInstanceName.hasError('pattern')">
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }}
</span>
</ng-container>
</adf-inplace-form-input>
</form>