From 5ab6dc2e9d4431051bfc9a186b08ea4093e6c51c Mon Sep 17 00:00:00 2001 From: Ehsan Rezaei Date: Mon, 20 Mar 2023 20:25:13 +0100 Subject: [PATCH] [AAE-13069]- Input fields label improvements (#8387) * AAE-13069: Removing extra div inside mat label * AAE-13069: Removing font size css rule and applying right class to the mat label * AAE-13069: Refactoring text item component based on Angular Material * AAE-13069: Updated unit test * AAE-13069: Fixed lint issues * AAE-13069: Fixed styles * AAE-13069: Updated e2e tests * AAE-13069: Updated e2e tests --- e2e/core/pages/metadata-view.page.ts | 2 +- .../card-view-textitem.component.html | 53 ++++++++----------- .../card-view-textitem.component.scss | 49 +++++++++-------- .../card-view-textitem.component.spec.ts | 2 +- .../card-view/card-view.component.scss | 24 --------- .../form/components/widgets/form.theme.scss | 4 -- .../card-view/card-view-text-item.page.ts | 4 +- 7 files changed, 49 insertions(+), 89 deletions(-) diff --git a/e2e/core/pages/metadata-view.page.ts b/e2e/core/pages/metadata-view.page.ts index 99b5e4c88c..fab2de84a4 100644 --- a/e2e/core/pages/metadata-view.page.ts +++ b/e2e/core/pages/metadata-view.page.ts @@ -213,7 +213,7 @@ export class MetadataViewPage { } async checkPropertyIsVisible(propertyName: string, type: string): Promise { - const property = $('div[data-automation-id="card-' + type + '-label-' + propertyName + '"]'); + const property = $('[data-automation-id="card-' + type + '-label-' + propertyName + '"]'); await BrowserVisibility.waitUntilElementIsVisible(property); } diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html index a5593d0fb3..5e7faaef5b 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.html @@ -1,10 +1,12 @@
- -
+ [ngClass]="{ 'adf-property-read-only': !isEditable, 'adf-property-field-has-error mat-form-field-invalid': isEditable && hasErrors }" + [floatLabel]="'never'" + appearance="standard"> + + {{ property.label | translate }} + - -
- mode_edit -
-
+
@@ -65,7 +64,7 @@ - @@ -91,9 +90,11 @@ (click)="clicked()" fxLayout="row" fxLayoutAlign="space-between center"> - - + + {{ property.label | translate }} +
- {{ property.default | translate }}
@@ -132,14 +132,3 @@
- - - -
- {{ property.label | translate }} -
- - diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss index c2ff07dff2..4c79e56e1c 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss @@ -161,42 +161,41 @@ &-textitem-multiline { display: block; } +} - &-property-field .adf-property-clear-value { - display: none; - } - - &-property-field { - .adf-property-clear-value, - .adf-textitem-edit-value { - justify-content: center; - align-items: center; +.mat-form-field { + .mat-form-field-suffix { + .mat-icon { width: 30px; height: 30px; } - .adf-textitem-edit-value { - display: flex; - } - - .adf-property-field-content { - display: flex; - } - } - - &-property-field.adf-card-textitem-field:hover { - .adf-textitem-edit-value, .adf-textitem-edit-icon { + display: block; + } + + .adf-textitem-clear-icon { display: none; } - .adf-property-clear-value { - color: var(--adf-theme-foreground-text-color-025); - display: flex; + .adf-textitem-edit-icon, + .adf-textitem-clear-icon { + background: transparent; + border: none; + + &:hover { + cursor: pointer; + } } - .adf-property-clear-value:hover { - color: var(--adf-theme-foreground-text-color); + &:hover { + .adf-textitem-edit-icon { + display: none; + } + + .adf-textitem-clear-icon { + display: block; + } } } } diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts index 526c181109..0649245d7d 100644 --- a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts +++ b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.spec.ts @@ -460,7 +460,7 @@ describe('CardViewTextItemComponent', () => { fixture.detectChanges(); await fixture.whenStable(); fixture.detectChanges(); - const clickEl = fixture.debugElement.query(By.css(`.adf-property-clear-value`)); + const clickEl = fixture.debugElement.query(By.css(`.adf-textitem-clear-icon`)); clickEl.triggerEventHandler('click', new MouseEvent('click')); fixture.detectChanges(); diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss index ff3fd00a19..212165a444 100644 --- a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss +++ b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss @@ -7,12 +7,6 @@ margin-top: 6px; } - .adf-property-read-only { - .mat-form-field-underline { - display: none; - } - } - .adf-property-field { width: 100%; margin-bottom: -25px; @@ -24,24 +18,6 @@ .mat-form-field-label { margin-top: 6px; } - - .adf-property-read-only { - .mat-form-field-underline { - display: none; - } - } - } - - .adf-property-label { - font-size: var(--theme-caption-font-size); - color: var(--adf-theme-foreground-text-color-054); - word-wrap: break-word; - } - - .adf-property-value, - .mat-form-field-label { - font-size: var(--theme-body-1-font-size); - color: var(--adf-theme-foreground-text-color-087); } } } diff --git a/lib/core/src/lib/form/components/widgets/form.theme.scss b/lib/core/src/lib/form/components/widgets/form.theme.scss index d218d69613..1bd8d5673c 100644 --- a/lib/core/src/lib/form/components/widgets/form.theme.scss +++ b/lib/core/src/lib/form/components/widgets/form.theme.scss @@ -5,10 +5,6 @@ ul > li > form-field > .adf-focus { } } -.mat-form-field-label { - color: var(--adf-theme-mat-grey-color-a200-dark) !important; -} - .adf { &-error-container { height: 20px; diff --git a/lib/testing/src/lib/protractor/core/pages/card-view/card-view-text-item.page.ts b/lib/testing/src/lib/protractor/core/pages/card-view/card-view-text-item.page.ts index 47ca16fe19..7e2e08494a 100644 --- a/lib/testing/src/lib/protractor/core/pages/card-view/card-view-text-item.page.ts +++ b/lib/testing/src/lib/protractor/core/pages/card-view/card-view-text-item.page.ts @@ -24,13 +24,13 @@ export class CardTextItemPage { saveButton = 'button[data-automation-id*="card-textitem-update"]'; clearButton = 'button[data-automation-id*="card-textitem-reset"]'; field = '[data-automation-id*="card-textitem-value"]'; - labelLocator = 'div[data-automation-id*="card-textitem-label"]'; + labelLocator = '[data-automation-id*="card-textitem-label"]'; errorMessage = '.adf-textitem-editable-error'; clickableElement = '.adf-textitem-clickable'; readOnlyField = '.adf-property-read-only'; constructor(label: string = 'assignee') { - this.rootElement = element(by.xpath(`//div[contains(@data-automation-id, "card-textitem-label-${label}")]//ancestor::adf-card-view-textitem`)); + this.rootElement = element(by.xpath(`//mat-label[contains(@data-automation-id, "card-textitem-label-${label}")]//ancestor::adf-card-view-textitem`)); } async getFieldValue(): Promise {