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

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

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>

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;

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();
});
});