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 <div
class="adf-inplace-input-container" 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"> <mat-form-field class="adf-inplace-input-mat-form-field">
<input <input
@@ -10,8 +10,12 @@
data-automation-id="adf-inplace-input" 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"> <mat-error data-automation-id="adf-inplace-input-error">
<ng-content></ng-content> <ng-content select="[error]"></ng-content>
</mat-error> </mat-error>
</mat-form-field> </mat-form-field>
</div> </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 { .adf-inplace-input-container {
.mat-form-field-underline { .mat-form-field-underline {
display: none; display: none;
@@ -8,8 +10,12 @@
border-top: 0; border-top: 0;
} }
.mat-form-field-label {
padding: $adf-inplace-input-padding;
}
&-error { &-error {
input { .adf-inplace-input {
border: 1px solid var(--theme-warn-color) !important; border: 1px solid var(--theme-warn-color) !important;
} }
} }
@@ -19,7 +25,7 @@
} }
.adf-inplace-input { .adf-inplace-input {
padding: 7px; padding: $adf-inplace-input-padding;
border: 1px solid transparent; border: 1px solid transparent;
border-radius: 4px; 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(); 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> </mat-form-field>
<adf-inplace-form-input [control]="processInstanceName"> <adf-inplace-form-input [control]="processInstanceName">
<span *ngIf="processInstanceName.hasError('required')"> <ng-container label>
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }} {{'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.FORM.LABEL.NAME' | translate}}
</span> </ng-container>
<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 } }} <ng-container error>
</span> <span *ngIf="processInstanceName.hasError('required')">
<span *ngIf="processInstanceName.hasError('pattern')"> {{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.PROCESS_NAME_REQUIRED' | translate }}
{{ 'ADF_CLOUD_PROCESS_LIST.ADF_CLOUD_START_PROCESS.ERROR.SPACE_VALIDATOR' | translate }} </span>
</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> </adf-inplace-form-input>
</form> </form>