[ACS-7768] unify inputs and selects across the app (#9687)

* Changed ng version before material migration * migration for material' * Fixed most of unit tests failing * [affected:*][ci:force] Fixing rebase * [affected:*][ci:force] attempt to fix mat-selectors importing * [affected:*][ci:force] Fixing the styles - check * AAE-21392 Fix dropdown form widget style (#9605) * ACS-7768 Applied new styles for inputs * ACS-7768 Align icon * ACS-7768 Input colors based on input state * ACS-7768 Corrected spaces * ACS-7768 Styles for selectboxes * ACS-7768 Fixed label jumping on hovering * ACS-7768 Style inputs for add permission panel, user role column and comments, styles for inputs without label * ACS-7768 Style inputs in search filters * ACS-7768 Set appearance for inputs globally to outline * ACS-7768 Style inputs for share dialog and login page * ACS-7768 Style inputs in properties panel * ACS-7768 Fixed white background when disabled field * ACS-7768 Moved setting outline appearance for inputs to ACA, fix issue for inputs in permission container * Revert "[affected:*][ci:force] Fixing the styles - check" This reverts commit 80d971f. * Revert "[affected:*][ci:force] attempt to fix mat-selectors importing" This reverts commit 821d9e1. * Revert "[affected:*][ci:force] Fixing rebase" This reverts commit 378c6c2. * Revert "Fixed most of unit tests failing" This reverts commit 44948e0. * ACS-7768 Reverted unwanted changes --------- Co-authored-by: Vito Albano <[email protected]> Co-authored-by: Diogo Bastos <[email protected]>
Alfresco · May 17, 2024 · 7cfb5ea · 7cfb5ea
1 parent af3edf5
commit 7cfb5ea
Show file tree

Hide file tree

Showing 42 changed files with 424 additions and 513 deletions.
diff --git a/...tent-services/src/lib/category/categories-management/categories-management.component.html b/...tent-services/src/lib/category/categories-management/categories-management.component.html
@@ -1,15 +1,15 @@
 <div class="adf-categories-management">
-    <div *ngIf="categoryNameControlVisible" class="adf-category-name-field">
+    <mat-form-field *ngIf="categoryNameControlVisible" class="adf-category-name-field">
+        <mat-label>{{ 'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}</mat-label>
         <input #categoryNameInput
             matInput
             autocomplete="off"
             [formControl]="categoryNameControl"
             (keyup.enter)="addCategory()"
-            placeholder="{{'CATEGORIES_MANAGEMENT.CATEGORIES_SEARCH_PLACEHOLDER' | translate }}"
             adf-auto-focus
             />
         <mat-error *ngIf="categoryNameControl.invalid">{{ categoryNameErrorMessageKey | translate }}</mat-error>
-    </div>
+    </mat-form-field>
     <div class="adf-categories-list" [class.adf-categories-list-fixed]="!categoryNameControlVisible">
         <span
             *ngFor="let category of categories"

diff --git a/...tent-services/src/lib/category/categories-management/categories-management.component.scss b/...tent-services/src/lib/category/categories-management/categories-management.component.scss
@@ -1,18 +1,6 @@
 .adf-categories-management {
     .adf-category-name-field {
-        justify-content: space-between;
         width: 100%;
-        color: var(--adf-metadata-property-panel-text-color);
-        background: var(--adf-metadata-buttons-background-color);
-        height: 32px;
-        border-radius: 12px;
-        align-items: center;
-
-        input {
-            background-color: transparent;
-            padding: 7px 8px 8px;
-            width: 100%;
-        }
     }
 
     .adf-assigned-categories {

diff --git a/...ices/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss b/...ices/src/lib/content-metadata/components/content-metadata/content-metadata.component.scss
@@ -9,22 +9,6 @@ $panel-properties-height: 56px !default;
             border: 1px solid var(--adf-metadata-property-panel-border-color);
             border-radius: 12px;
             margin: 12px;
-
-            .adf-property-list .adf-property .adf-property-field {
-                .adf-property-value:not(.adf-card-view-selectitem .adf-property-value) {
-                    margin-top: 10px;
-                    height: 32px;
-
-                    &:is(textarea) {
-                        padding-top: 6px;
-                    }
-                }
-
-                label {
-                    font-size: 19px;
-                    line-height: 20px;
-                }
-            }
         }
 
         .adf-metadata-properties-header {
@@ -39,15 +23,6 @@ $panel-properties-height: 56px !default;
 
         #{$mat-expansion-panel-body} {
             padding-top: 16px;
-
-            input {
-                border-color: transparent;
-                width: 100%;
-
-                &:focus-visible {
-                    outline: none;
-                }
-            }
         }
 
         .adf-edit-icon-buttons {

diff --git a/...content-services/src/lib/content-node-selector/content-node-selector-panel.component.html b/...content-services/src/lib/content-node-selector/content-node-selector-panel.component.html
@@ -1,6 +1,5 @@
 <div class="adf-content-node-selector-content">
     <mat-form-field floatPlaceholder="never"
-                    appearance="outline"
                     class="adf-content-node-selector-content-input"
                     subscriptSizing="dynamic"
                     *ngIf="showSearch">

diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.html
@@ -31,13 +31,13 @@
                     [style.display]="isExpiryDateToggleChecked ? 'block' : 'none'"
                     data-automation-id="adf-slide-toggle-checked"
                     class="adf-share-link__date-time-container">
-                    <mat-form-field class="adf-full-width" subscriptSizing="dynamic" data-automation-id="adf-content-share-expiration-field">
+                    <mat-form-field class="adf-full-width" data-automation-id="adf-content-share-expiration-field">
                         <mat-label>{{ 'SHARE.EXPIRATION-PLACEHOLDER' | translate }}</mat-label>
                         <mat-datepicker-toggle
                             [disabled]="time.disabled"
                             [for]="datePicker"
                             matSuffix
-                            class="adf-share-link__icon adf-share-link__calender-icon">
+                            class="adf-share-link__icon">
                         </mat-datepicker-toggle>
                         <mat-datepicker
                             #datePicker
@@ -75,16 +75,16 @@
                 <mat-form-field
                     subscriptSizing="dynamic"
                     floatLabel="always"
-                    class="adf-full-width adf-share-link__form--field"
+                    class="adf-full-width"
                     data-automation-id="adf-content-share-public-link-field"
                     [ngClass]="isLinkWithExpiryDate? 'adf-share-link__border-color' : ''">
+                    <mat-label>{{ 'SHARE.PUBLIC-LINK' | translate }}</mat-label>
                     <input
                         #sharedLinkInput
                         data-automation-id="adf-share-link"
                         class="adf-share-link__input"
                         matInput
                         cdkFocusInitial
-                        placeholder="{{ 'SHARE.PUBLIC-LINK' | translate }}"
                         [attr.aria-label]="'SHARE.PUBLIC-LINK' | translate"
                         formControlName="sharedUrl"
                         readonly="readonly">

diff --git a/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss b/lib/content-services/src/lib/content-node-share/content-node-share.dialog.scss
@@ -34,15 +34,6 @@
 
         &__form {
             padding-top: 8px;
-
-            #{$mat-form-field-infix}:has(.adf-share-link__input) {
-                border-top: 0.9375em solid transparent;
-                height: 16px;
-            }
-
-            &--field {
-                padding-bottom: 16px;
-            }
         }
 
         &__public-content {
@@ -64,12 +55,12 @@
             margin: 8px 0;
 
             &-sharable {
-                margin-bottom: 0;
+                margin-bottom: 14px;
             }
         }
 
         &--sharable-container {
-            margin-bottom: 0;
+            margin-bottom: 14px;
         }
 
         &--header {
@@ -116,23 +107,30 @@
             font-size: 22px;
         }
 
-        &__calender-icon {
-            top: 12px;
-            position: relative;
-            right: -6px;
-
-            svg {
-                height: 18px;
-                width: 18px;
-            }
-        }
-
         &__date-time-container {
-            padding-bottom: 20px;
+            padding-bottom: 2px;
         }
 
         &__border-color {
-            border: 1px solid var(--theme-warn-color-a700);
+            &.adf-full-width {
+                &#{$mat-form-field} {
+                    &#{$mat-form-field-label-always-float} {
+                        &#{$mat-form-field-appearance-outline} {
+                            #{$mat-text-field-outlined}, #{$mat-text-field-outlined}:hover {
+                                #{$mat-notched-outline-leading}, #{$mat-notched-outline-trailing}, #{$mat-notched-outline-notch} {
+                                    border-color: var(--theme-warn-color-a700);
+                                    border-width: 2px;
+                                }
+
+                                #{$mat-notched-outline-notch} {
+                                    border-left: none;
+                                    border-left-width: 0;
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         }
     }
 

diff --git a/lib/content-services/src/lib/dialogs/folder.dialog.html b/lib/content-services/src/lib/dialogs/folder.dialog.html
@@ -4,7 +4,7 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
 
 <mat-dialog-content class="adf-folder-dialog-content">
     <form [formGroup]="form" (submit)="submit()">
-        <mat-form-field class="adf-full-width" appearance="outline">
+        <mat-form-field class="adf-full-width">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.LABEL' | translate }}</mat-label>
             <input
                 id="adf-folder-name-input"
@@ -15,18 +15,18 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
                 adf-auto-focus
             />
 
-            <mat-hint *ngIf="form.controls['name'].dirty">
+            <mat-error *ngIf="form.controls['name'].dirty">
                 <span *ngIf="form.controls['name'].errors?.required">
                     {{ 'CORE.FOLDER_DIALOG.FOLDER_NAME.ERRORS.REQUIRED' | translate }}
                 </span>
 
                 <span *ngIf="!form.controls['name'].errors?.required && form.controls['name'].errors?.message">
                     {{ form.controls['name'].errors?.message | translate }}
                 </span>
-            </mat-hint>
+            </mat-error>
         </mat-form-field>
 
-        <mat-form-field class="adf-full-width" appearance="outline">
+        <mat-form-field class="adf-full-width">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_TITLE.LABEL' | translate }}</mat-label>
             <input
                 id="adf-folder-title-input"
@@ -36,7 +36,7 @@ <h2 data-automation-id="adf-folder-dialog-title" class="adf-folder-dialog-title"
             />
         </mat-form-field>
 
-        <mat-form-field class="adf-full-width" appearance="outline">
+        <mat-form-field class="adf-full-width">
             <mat-label>{{ 'CORE.FOLDER_DIALOG.FOLDER_DESCRIPTION.LABEL' | translate }}</mat-label>
             <textarea
                 id="adf-folder-description-input"

diff --git a/lib/content-services/src/lib/dialogs/library/library.dialog.html b/lib/content-services/src/lib/dialogs/library/library.dialog.html
@@ -2,7 +2,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
 
 <mat-dialog-content class="adf-library-dialog-content">
   <form novalidate [formGroup]="form" (submit)="submit()">
-    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
+    <mat-form-field class="adf-library-dialog-form-field">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
       <input
         required
@@ -28,7 +28,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
+    <mat-form-field class="adf-library-dialog-form-field">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
       <input
         required
@@ -46,7 +46,7 @@ <h2 mat-dialog-title>{{ createTitle | translate }}</h2>
       </mat-error>
     </mat-form-field>
 
-    <mat-form-field class="adf-library-dialog-form-field" appearance="outline">
+    <mat-form-field class="adf-library-dialog-form-field">
       <mat-label>{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
       <textarea
         matInput

diff --git a/lib/content-services/src/lib/i18n/en.json b/lib/content-services/src/lib/i18n/en.json
@@ -433,10 +433,7 @@
         "WEEKS": "In the last {{value}} weeks",
         "MONTHS": "In the last {{value}} months"
       },
-      "BETWEEN_PLACEHOLDERS": {
-        "START_DATE": "Start Date",
-        "END_DATE": "End Date"
-      },
+      "BETWEEN_PLACEHOLDER": "Start Date - End Date",
       "ERROR": {
         "IN_LAST": "Value required",
         "START_DATE": {

diff --git a/lib/content-services/src/lib/material.module.ts b/lib/content-services/src/lib/material.module.ts
@@ -88,5 +88,4 @@ import { MatBadgeModule } from '@angular/material/badge';
         MatBadgeModule
     ]
 })
-export class MaterialModule {
-}
+export class MaterialModule {}
diff --git a/.../src/lib/permission-manager/components/add-permission/add-permission-panel.component.html b/.../src/lib/permission-manager/components/add-permission/add-permission-panel.component.html
@@ -1,11 +1,11 @@
-<mat-form-field appearance="outline" floatPlaceholder="never" class="adf-permission-search-input">
+<mat-form-field class="adf-permission-search-input">
+    <mat-label>{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}</mat-label>
     <input
         matInput
         id="searchInput"
         [formControl]="searchInput"
         type="text"
         title="{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}"
-        placeholder="{{ 'PERMISSION_MANAGER.ADD-PERMISSION.SEARCH' | translate }}"
         [value]="searchedWord"
     />
 

diff --git a/...ib/permission-manager/components/permission-container/permission-container.component.scss b/...ib/permission-manager/components/permission-container/permission-container.component.scss
@@ -10,6 +10,10 @@
             position: relative;
         }
 
+        .adf-datatable-row {
+            min-height: 85px;
+        }
+
         .adf-delete-permission-column {
             min-width: 80px;
 

diff --git a/...ices/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts b/...ices/src/lib/permission-manager/components/user-role-column/user-role-column.component.ts
@@ -45,13 +45,8 @@ import { RoleModel } from '../../models/role.model';
         `
             .adf-role-selector-field.mat-mdc-form-field {
                 width: 100%;
-                height: 40px;
                 max-width: 200px;
 
-                .mat-mdc-form-field-infix {
-                    padding-top: 8px;
-                }
-
                 .mat-mdc-form-field-subscript-wrapper {
                     display: none;
                 }

diff --git a/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html b/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.html
@@ -1,4 +1,5 @@
-<mat-form-field class="adf-chip-list" appearance="outline">
+<mat-form-field class="adf-chip-list">
+    <mat-label>{{ placeholder | translate }}</mat-label>
     <mat-chip-grid #chipList [attr.aria-label]="'SEARCH.FILTER.ARIA-LABEL.OPTIONS-SELECTION' | translate">
         <mat-chip-row
             class="adf-option-chips adf-autocomplete-added-option-chips"
@@ -16,7 +17,6 @@
             </button>
         </mat-chip-row>
         <input
-            placeholder="{{ placeholder | translate }}"
             aria-controls="adf-search-chip-autocomplete"
             #optionInput
             [formControl]="formCtrl"

diff --git a/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss b/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
@@ -4,28 +4,24 @@
 adf-search-chip-autocomplete-input {
     .adf-chip-list {
         width: 100%;
+
+        mat-chip-grid {
+            padding-left: 9px;
+        }
+
+        .adf-search-properties-file-input {
+            margin-left: 0;
+        }
     }
 
     .adf-chip-list:has(#{$mat-notched-outline}) {
-        margin-top: 4px;
+        margin-top: 2px;
     }
 
     #{$mat-form--text-field-infix} {
         border: none;
     }
 
-    .adf-chip-list#{$mat-form-field} {
-        #{$mat-form-field-infix} {
-            padding-top: 14px;
-            padding-bottom: 14px;
-            min-height: unset;
-        }
-    }
-
-    .adf-search-properties-file-input {
-        margin-left: 3px;
-    }
-
     .adf-autocomplete-added-option-chips.adf-option-chips {
         border: 1px solid var(--theme-text-color);
         border-radius: 10px;

diff --git a/...ch/components/search-date-range-tabbed/search-date-range/search-date-range.component.html b/...ch/components/search-date-range-tabbed/search-date-range/search-date-range.component.html
@@ -28,12 +28,19 @@
       <mat-radio-button [value]="DateRangeType.BETWEEN" data-automation-id="date-range-between">
         {{ 'SEARCH.DATE_RANGE_ADVANCED.OPTIONS.BETWEEN' | translate }}
       </mat-radio-button>
-      <mat-form-field class="adf-search-date-range-form-field" subscriptSizing="dynamic">
+      <mat-form-field class="adf-search-date-range-form-field">
+        <mat-label>{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDER' | translate }}</mat-label>
         <mat-date-range-input [rangePicker]="$any(picker)" [max]="convertedMaxDate">
-          <input matStartDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.START_DATE' | translate }}"
-                 data-automation-id="date-range-between-start-input" [formControl]="betweenStartDateFormControl" (change)="dateChanged($event, betweenStartDateFormControl)">
-          <input matEndDate placeholder="{{ 'SEARCH.DATE_RANGE_ADVANCED.BETWEEN_PLACEHOLDERS.END_DATE' | translate }}"
-                 data-automation-id="date-range-between-end-input" [formControl]="betweenEndDateFormControl" (change)="dateChanged($event, betweenEndDateFormControl)">
+          <input
+              matStartDate
+              data-automation-id="date-range-between-start-input"
+              [formControl]="betweenStartDateFormControl"
+              (change)="dateChanged($event, betweenStartDateFormControl)">
+          <input
+              matEndDate
+              data-automation-id="date-range-between-end-input"
+              [formControl]="betweenEndDateFormControl"
+              (change)="dateChanged($event, betweenEndDateFormControl)">
         </mat-date-range-input>
         <mat-datepicker-toggle matSuffix [for]="picker" data-automation-id="date-range-between-datepicker-toggle"></mat-datepicker-toggle>
         <mat-date-range-picker #picker></mat-date-range-picker>