[ACS-6212] Fix overlaping labels and incorrect color for warning (#9219)

This commit is contained in:
AleksanderSklorz 2024-01-18 14:53:15 +01:00 committed by GitHub
parent 7a40a614a4
commit b46d468f76
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
5 changed files with 30 additions and 9 deletions

View File

@ -31,7 +31,7 @@
[style.display]="isExpiryDateToggleChecked ? 'block' : 'none'" [style.display]="isExpiryDateToggleChecked ? 'block' : 'none'"
data-automation-id="adf-slide-toggle-checked" data-automation-id="adf-slide-toggle-checked"
class="adf-share-link__date-time-container"> class="adf-share-link__date-time-container">
<mat-form-field class="adf-full-width adf-float-label"> <mat-form-field class="adf-full-width" floatLabel="never" data-automation-id="adf-content-share-expiration-field">
<mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label> <mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label>
<mat-datepicker-toggle <mat-datepicker-toggle
[disabled]="time.disabled" [disabled]="time.disabled"
@ -73,7 +73,9 @@
</div> </div>
</div> </div>
<mat-form-field <mat-form-field
class="adf-full-width adf-float-label" class="adf-full-width"
floatLabel="never"
data-automation-id="adf-content-share-public-link-field"
[ngClass]="isLinkWithExpiryDate? 'adf-share-link__border-color' : ''"> [ngClass]="isLinkWithExpiryDate? 'adf-share-link__border-color' : ''">
<input <input
#sharedLinkInput #sharedLinkInput

View File

@ -1,7 +1,3 @@
.adf-float-label {
padding-top: 20px;
}
.adf-share-link-dialog { .adf-share-link-dialog {
.adf-share-link { .adf-share-link {
&__dialog-content { &__dialog-content {
@ -41,7 +37,7 @@
} }
&__warn { &__warn {
color: var(--theme-warn-color); color: var(--theme-warn-color-a700);
font-size: var(--theme-caption-font-size); font-size: var(--theme-caption-font-size);
} }
@ -91,7 +87,7 @@
} }
&__border-color { &__border-color {
border: 1px solid var(--theme-warn-color); border: 1px solid var(--theme-warn-color-a700);
} }
} }

View File

@ -293,6 +293,28 @@ describe('ShareDialogComponent', () => {
expect(fixture.nativeElement.querySelector('[data-automation-id="adf-slide-toggle-checked"]').style.display).toEqual('none'); expect(fixture.nativeElement.querySelector('[data-automation-id="adf-slide-toggle-checked"]').style.display).toEqual('none');
}); });
it('should not display floating label for expiration field', () => {
component.data = {
node,
baseShareUrl: 'some-url/'
};
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('[data-automation-id="adf-content-share-expiration-field"]'))
.componentInstance.floatLabel).toBe('never');
});
it('should not display floating label for public link field', () => {
component.data = {
node,
baseShareUrl: 'some-url/'
};
fixture.detectChanges();
expect(fixture.debugElement.query(By.css('[data-automation-id="adf-content-share-public-link-field"]'))
.componentInstance.floatLabel).toBe('never');
});
describe('datetimepicker type', () => { describe('datetimepicker type', () => {
beforeEach(() => { beforeEach(() => {
spyOn(sharedLinksApiService, 'createSharedLinks').and.returnValue(of()); spyOn(sharedLinksApiService, 'createSharedLinks').and.returnValue(of());

View File

@ -153,7 +153,7 @@ $alfresco-warn: (
A100: #ff8a80, A100: #ff8a80,
A200: #ff5252, A200: #ff5252,
A400: #ff1744, A400: #ff1744,
A700: #d50000, A700: #c95100,
contrast: ( contrast: (
50: $black-87-opacity, 50: $black-87-opacity,
100: $black-87-opacity, 100: $black-87-opacity,

View File

@ -37,6 +37,7 @@
--adf-theme-primary-900:mat.get-color-from-palette($primary, 900), --adf-theme-primary-900:mat.get-color-from-palette($primary, 900),
--theme-warn-color: mat.get-color-from-palette($warn), --theme-warn-color: mat.get-color-from-palette($warn),
--theme-warn-color-a700: mat.get-color-from-palette($warn, A700),
--theme-warn-color-default-contrast: mat.get-color-from-palette($warn, default-contrast), --theme-warn-color-default-contrast: mat.get-color-from-palette($warn, default-contrast),
--theme-accent-color: mat.get-color-from-palette($accent), --theme-accent-color: mat.get-color-from-palette($accent),