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

* ACS-7768 Style inputs in create from template dialog

* ACS-7768 Used globally configured outline appearance for inputs

* ACS-7768 Style inputs for profile page

* ACS-7768 Style inputs for library metadata form

* ACS-7768 Style inputs for folder rules dialog

* ACS-7768 Style inputs for manage rules page

* ACS-7768 Set outline appearance for input, fix small issue

* ACS-7768 Addressed comment

app/src/app/app.module.ts

@@ -64,6 +64,7 @@ import { ShellModule, SHELL_APP_SERVICE, SHELL_AUTH_TOKEN } from '@alfresco/adf-
 import { StoreDevtoolsModule } from '@ngrx/store-devtools';
 import { APP_ROUTES } from './app.routes';
 import { MatIconRegistry } from '@angular/material/icon';
+import { MAT_FORM_FIELD_DEFAULT_OPTIONS } from '@angular/material/form-field';
 
 registerLocaleData(localeFr);
 registerLocaleData(localeDe);
@@ -122,6 +123,12 @@ registerLocaleData(localeSv);
         name: 'app',
         source: 'assets'
       }
+    },
+    {
+      provide: MAT_FORM_FIELD_DEFAULT_OPTIONS,
+      useValue: {
+        appearance: 'outline'
+      }
     }
   ],
   declarations: [AppComponent],

projects/aca-content/folder-rules/src/rule-details/actions/rule-action.ui-component.scss

@@ -8,13 +8,13 @@
       margin-top: -15px;
 
       .adf-property-list {
-        padding: 8px;
+        padding: 15px 8px 8px;
         background: unset;
       }
 
       .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
         display: inline-block;
-        width: 300px;
+        width: 100%;
 
         .adf-textitem-clickable {
           padding-top: 0;

projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.html

@@ -7,7 +7,7 @@
     class="aca-rule-composite-condition__form__row"
     *ngFor="let control of conditionFormControls; let i = index">
 
-    <mat-form-field *ngIf="i === 0" appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field *ngIf="i === 0" appearance="outline" subscriptSizing="dynamic" class="aca-rule-composite-condition-form-field">
       <mat-select
         [formControl]="invertedControl"
         [disabled]="readOnly">
@@ -16,7 +16,7 @@
       </mat-select>
     </mat-form-field>
 
-    <mat-form-field *ngIf="i > 0" appearance="outline" subscriptSizing="dynamic">
+    <mat-form-field *ngIf="i > 0" appearance="outline" subscriptSizing="dynamic" class="aca-rule-composite-condition-form-field">
       <mat-select
         [formControl]="booleanModeControl">
         <mat-option value="and">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LOGIC_OPERATORS.AND' | translate }}</mat-option>

projects/aca-content/folder-rules/src/rule-details/conditions/rule-composite-condition.ui-component.scss

@@ -40,6 +40,10 @@
       & > :nth-child(2) {
         flex: 1;
       }
+
+      .aca-rule-composite-condition-form-field {
+        min-width: unset;
+      }
     }
   }
 }

projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.html

@@ -53,7 +53,7 @@
     </aca-rule-action-list>
   </div>
 
-  <div class="aca-rule-details__form__row" *ngIf="showOptionsSection">
+  <div class="aca-rule-details__form__row aca-rule-details__form__options" *ngIf="showOptionsSection">
     <div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</div>
     <aca-rule-options
       formControlName="options"

projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss

@@ -6,6 +6,7 @@
       padding: 8px 20px;
       width: 100%;
       box-sizing: border-box;
+      overflow-x: auto;
 
       &.aca-rule-details__form__description {
         padding-top: 0;
@@ -16,7 +17,6 @@
 
     &__row {
       display: flex;
-      align-items: baseline;
       gap: 8px;
 
       & > label,
@@ -28,6 +28,10 @@
         padding: 0.75em 0;
       }
 
+      & > label {
+        margin-top: 11px;
+      }
+
       & > div {
         flex-grow: 1;
       }
@@ -41,6 +45,19 @@
           min-height: 4em;
         }
       }
+
+      &.aca-rule-details__form__actions {
+        .aca-label {
+          margin-top: 14px;
+        }
+      }
+
+      &.aca-rule-details__form__triggers,
+      &.aca-rule-details__form__options {
+        .aca-label {
+          padding-top: 2px;
+        }
+      }
     }
 
     &:not(:nth-child(1)) {

projects/aca-content/src/lib/components/info-drawer/library-metadata-tab/library-metadata-form.component.html

@@ -2,12 +2,12 @@
   <mat-card-content>
     <form [formGroup]="form" autocomplete="off">
       <mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field">
+        <mat-label>{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}</mat-label>
         <input
           matInput
           [cdkTrapFocusAutoCapture]="form.enabled"
           [cdkTrapFocus]="form.enabled"
           required
-          placeholder="{{ 'LIBRARY.DIALOG.FORM.NAME' | translate }}"
           formControlName="title"
           [errorStateMatcher]="matcher"
         />
@@ -18,11 +18,13 @@
       </mat-form-field>
 
       <mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper" class="app-library-metadata-form-field">
-        <input matInput placeholder="{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}" formControlName="id" />
+        <mat-label>{{ 'LIBRARY.DIALOG.FORM.SITE_ID' | translate }}</mat-label>
+        <input matInput formControlName="id" />
       </mat-form-field>
 
       <mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper" class="app-library-metadata-form-field">
-        <mat-select placeholder="{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}" formControlName="visibility">
+        <mat-label>{{ 'LIBRARY.DIALOG.FORM.VISIBILITY' | translate }}</mat-label>
+        <mat-select formControlName="visibility">
           <mat-option [value]="type.value" *ngFor="let type of libraryType">
             {{ type.label | translate }}
           </mat-option>
@@ -30,9 +32,9 @@
       </mat-form-field>
 
       <mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field">
+        <mat-label>{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}</mat-label>
         <textarea
           matInput
-          placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"
           rows="3"
           formControlName="description"
           [errorStateMatcher]="matcher"

projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html

@@ -9,6 +9,7 @@
     <mat-icon class="app-search-input-control-icon app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
   </button>
   <mat-form-field class="app-input-form-field" floatLabel="auto">
+    <mat-label>{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-label>
     <input
       matInput
       #searchInput
@@ -19,7 +20,6 @@
       (ngModelChange)="inputChange($event)"
       (keyup.enter)="searchSubmit($event)"
       class="app-input-form-field-input"
-      [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
       autocomplete="off"
     />
     <div matSuffix class="app-suffix-search-icon-wrapper">

projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss

@@ -9,11 +9,6 @@
     font-size: 24px;
     cursor: pointer;
   }
-
-  .app-clear-icon {
-    font-size: 18px;
-    margin: 3px;
-  }
 }
 
 .app-search-container {
@@ -30,7 +25,6 @@
 
   .app-input-form-field {
     letter-spacing: -0.7px;
-    font-size: 16px;
     width: calc(100% - 56px);
 
     &-input {
@@ -44,23 +38,12 @@
         display: none;
       }
     }
-
-    /* stylelint-disable selector-class-pattern */
-    .mat-mdc-form-field-icon-suffix {
-      position: relative;
-      right: -14px;
-    }
   }
 
   .mat-mdc-form-field-flex {
     background: #fff;
   }
 
-  .mat-mdc-text-field-wrapper {
-    height: 44px;
-    padding-left: 0;
-  }
-
   .app-input-form-field-readonly {
     .mat-mdc-text-field-wrapper,
     .mat-mdc-form-field-flex {
@@ -74,6 +57,7 @@
     &-icon {
       font-size: 24px;
       padding-right: 0;
+      margin-top: -10px;
     }
   }
 }

projects/aca-content/src/lib/components/search/search-input/search-input.component.html

@@ -7,7 +7,8 @@
   <button mat-icon-button class="app-search-button" (click)="searchByOption()" [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
     <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
   </button>
-  <mat-form-field class="app-input-form-field app-input-form-field-readonly" [floatLabel]="'auto'">
+  <mat-form-field class="app-input-form-field app-input-form-field-readonly" [floatLabel]="'auto'" appearance="fill">
+    <mat-label>{{ 'SEARCH.INPUT.PLACEHOLDER' | translate }}</mat-label>
     <input
       matInput
       [attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
@@ -15,7 +16,6 @@
       [type]="'text'"
       [readonly]="true"
       [value]="searchedWord"
-      [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
     />
 
     <div matSuffix class="app-suffix-search-icon-wrapper app-icon-arrow">

projects/aca-content/src/lib/components/search/search-input/search-input.component.scss

@@ -36,12 +36,6 @@ $top-margin: 12px;
       caret-color: var(--theme-text-color);
     }
   }
-
-  &:focus-within {
-    label {
-      display: none;
-    }
-  }
 }
 
 /* stylelint-disable-next-line */
@@ -86,6 +80,7 @@ $top-margin: 12px;
   font-size: 16px;
   letter-spacing: -0.7px;
   margin-bottom: -8px;
+  margin-top: 23px;
 
   /* stylelint-disable-next-line */
  .mat-mdc-checkbox {

projects/aca-content/src/lib/components/view-profile/view-profile.component.html

@@ -43,35 +43,56 @@
         <div class="app-general-dropdown-details">
           <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.JOB_TITLE' | translate}}</h4>
           <p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.jobTitle}}</p>
-          <input type="text" value="" formControlName="jobTitle" *ngIf="!generalSectionButtonsToggle"
+          <mat-form-field *ngIf="!generalSectionButtonsToggle" class="app-general-dropdown-details-form-field">
-            class="app-profile-general-dropdown-input-details app-selected">
+            <input
+              matInput
+              type="text"
+              value=""
+              formControlName="jobTitle">
+          </mat-form-field>
         </div>
         <mat-divider class="app-general-dropdown-divider"></mat-divider>
         <div class="app-general-dropdown-details">
           <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.LOCATION' | translate}}</h4>
           <p class="app-profile-general-dropdown-details"  *ngIf="generalSectionButtonsToggle">{{personDetails?.location}}</p>
-          <input type="text" value="" formControlName="location" *ngIf="!generalSectionButtonsToggle"
+          <mat-form-field *ngIf="!generalSectionButtonsToggle">
-            class="app-profile-general-dropdown-input-details app-selected">
+            <input
+              matInput
+              type="text"
+              value=""
+              formControlName="location">
+          </mat-form-field>
         </div>
         <mat-divider class="app-general-dropdown-divider"></mat-divider>
         <div class="app-general-dropdown-details">
           <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
           <p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.telephone}}</p>
-          <input type="tel" name="Telephone" value="" formControlName="telephone" *ngIf="!generalSectionButtonsToggle"
+          <mat-form-field *ngIf="!generalSectionButtonsToggle" class="app-general-dropdown-details-form-field">
-            class="app-profile-general-dropdown-input-details app-selected">
+            <input
-          <mat-error class="app-error-message" *ngIf="profileForm.get('telephone').invalid">
+              matInput
-            {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
+              type="tel"
-          </mat-error>
+              name="Telephone"
+              value=""
+              formControlName="telephone">
+            <mat-error *ngIf="profileForm.get('telephone').invalid">
+              {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
+            </mat-error>
+          </mat-form-field>
         </div>
         <mat-divider class="app-general-dropdown-divider"></mat-divider>
         <div class="app-general-dropdown-details">
           <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.MOBILE' | translate}}</h4>
           <p class="app-profile-general-dropdown-details" *ngIf="generalSectionButtonsToggle">{{personDetails?.mobile}}</p>
-        <input type="tel" value="" formControlName="mobile" *ngIf="!generalSectionButtonsToggle"
+          <mat-form-field *ngIf="!generalSectionButtonsToggle" class="app-general-dropdown-details-form-field">
-          class="app-profile-general-dropdown-input-details app-selected">
+            <input
-        <mat-error class="app-error-message" *ngIf="profileForm.get('mobile').invalid">
+              matInput
-          {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
+              type="tel"
-        </mat-error>
+              value=""
+              formControlName="mobile">
+              <mat-error *ngIf="profileForm.get('mobile').invalid">
+                {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
+              </mat-error>
+          </mat-form-field>
         </div>
       </div>
     </div>
@@ -102,42 +123,67 @@
         <div class="app-general-dropdown-details">
           <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.NAME' | translate}}</h4>
           <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.organization}}</p>
-          <input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyName"
+          <mat-form-field *ngIf="!contactSectionButtonsToggle" class="app-general-dropdown-details-form-field">
-            class="app-profile-general-dropdown-input-details app-selected">
+            <input
+              matInput
+              type="text"
+              value=""
+              formControlName="companyName">
+          </mat-form-field>
         </div>
         <mat-divider class="app-general-dropdown-divider"></mat-divider>
         <div class="app-general-dropdown-details">
           <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.ADDRESS' | translate}}</h4>
           <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.address1}}</p>
-          <input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyAddress"
+          <mat-form-field *ngIf="!contactSectionButtonsToggle" class="app-general-dropdown-details-form-field">
-            class="app-profile-general-dropdown-input-details app-selected">
+            <input
+              matInput
+              type="text"
+              value=""
+              formControlName="companyAddress">
+          </mat-form-field>
         </div>
         <mat-divider class="app-general-dropdown-divider"></mat-divider>
         <div class="app-general-dropdown-details">
           <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.POSTCODE' | translate}}</h4>
           <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.postcode}}</p>
-          <input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyPostCode"
+          <mat-form-field *ngIf="!contactSectionButtonsToggle" class="app-general-dropdown-details-form-field">
-            class="app-profile-general-dropdown-input-details app-selected">
+            <input
+              matInput
+              type="text"
+              value=""
+              formControlName="companyPostCode">
+          </mat-form-field>
         </div>
         <mat-divider class="app-general-dropdown-divider"></mat-divider>
         <div class="app-general-dropdown-details">
           <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.TELEPHONE' | translate}}</h4>
           <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.telephone}}</p>
-          <input type="tel" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyTelephone"
+          <mat-form-field *ngIf="!contactSectionButtonsToggle" class="app-general-dropdown-details-form-field">
-            class="app-profile-general-dropdown-input-details app-selected">
+            <input
-          <mat-error class="app-error-message" *ngIf="profileForm.get('companyTelephone').invalid">
+              matInput
-            {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
+              type="tel"
-          </mat-error>
+              value=""
+              formControlName="companyTelephone">
+            <mat-error *ngIf="profileForm.get('companyTelephone').invalid">
+              {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
+            </mat-error>
+          </mat-form-field>
         </div>
         <mat-divider class="app-general-dropdown-divider"></mat-divider>
-        <div class="app-general-dropdown-details">
+        <div class="app-general-dropdown-details" >
           <h4 class="app-profile-general-dropdown-heading">{{'APP.EDIT_PROFILE.EMAIL' | translate}}</h4>
           <p class="app-profile-general-dropdown-details" *ngIf="contactSectionButtonsToggle">{{personDetails?.company?.email}}</p>
-          <input type="text" value="" *ngIf="!contactSectionButtonsToggle" formControlName="companyEmail"
+          <mat-form-field *ngIf="!contactSectionButtonsToggle" class="app-general-dropdown-details-form-field">
-            class="app-profile-general-dropdown-input-details app-selected">
+            <input
-          <mat-error class="app-error-message" *ngIf="profileForm.get('companyEmail').invalid">
+              matInput
-            {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
+              type="text"
-          </mat-error>
+              value=""
+              formControlName="companyEmail">
+              <mat-error *ngIf="profileForm.get('companyEmail').invalid">
+                {{ 'APP.EDIT_PROFILE.INVALID_INPUT' | translate }}
+              </mat-error>
+          </mat-form-field>
         </div>
       </div>
     </div>

projects/aca-content/src/lib/components/view-profile/view-profile.component.scss

@@ -106,13 +106,6 @@ app-view-profile {
     padding-right: 1px;
   }
 
-  .app-selected:focus {
-    border: 2px solid var(--theme-blue-button-color);
-    border-radius: 6px;
-    outline: none;
-    box-shadow: 0 0 2px var(--theme-blue-button-color);
-  }
-
   .app-general-edit:hover {
     background: var(--theme-grey-hover-background-color);
   }
@@ -127,6 +120,14 @@ app-view-profile {
 
   .app-general-dropdown-details {
     display: flex;
+    align-items: center;
+    min-height: 90.5px;
+
+    .app-general-dropdown-details-form-field {
+      position: relative;
+      top: 13px;
+      padding-bottom: 3px;
+    }
   }
 
   .app-profile-general-dropdown-heading {
@@ -141,14 +142,6 @@ app-view-profile {
     letter-spacing: 0.5px;
   }
 
-  .app-profile-general-dropdown-input-details {
-    width: 24%;
-    height: 25px;
-    border: none;
-    margin-top: 1.3rem;
-    background-color: var(--theme-dropdown-color);
-  }
-
   .app-profile-login-row {
     margin: 2rem 0 0 2rem;
     width: 70%;
@@ -185,9 +178,4 @@ app-view-profile {
     border: 1px solid var(--theme-grey-background-color);
     border-radius: 1rem;
   }
-
-  .app-error-message {
-    padding-top: 2rem;
-    padding-left: 0.5rem;
-  }
 }

projects/aca-content/src/lib/components/view-profile/view-profile.component.ts

@@ -36,10 +36,11 @@ import { MatIconModule } from '@angular/material/icon';
 import { TranslateModule } from '@ngx-translate/core';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
   standalone: true,
-  imports: [CommonModule, TranslateModule, ReactiveFormsModule, MatButtonModule, MatIconModule, MatDividerModule, MatFormFieldModule],
+  imports: [CommonModule, TranslateModule, ReactiveFormsModule, MatButtonModule, MatIconModule, MatDividerModule, MatFormFieldModule, MatInputModule],
   selector: 'app-view-profile',
   templateUrl: './view-profile.component.html',
   styleUrls: ['./view-profile.component.scss'],

projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.html

@@ -2,9 +2,9 @@
 <div mat-dialog-content class="app-create-from-template-content">
   <form [formGroup]="form" novalidate>
     <mat-form-field class="app-create-from-template-field">
+      <mat-label>{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.NAME' | translate }}</mat-label>
       <input
         cdkFocusInitial
-        placeholder="{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.NAME' | translate }}"
         matInput
         formControlName="name"
         required
@@ -16,8 +16,8 @@
     </mat-form-field>
 
     <mat-form-field class="app-create-from-template-field">
+      <mat-label>{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.TITLE' | translate }}</mat-label>
       <input
-        placeholder="{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.TITLE' | translate }}"
         matInput
         formControlName="title"
       />
@@ -28,9 +28,9 @@
     </mat-form-field>
 
     <mat-form-field class="app-create-from-template-field">
+      <mat-label>{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.DESCRIPTION' | translate }}</mat-label>
       <textarea
         matInput
-        placeholder="{{ 'NODE_FROM_TEMPLATE.FORM.PLACEHOLDER.DESCRIPTION' | translate }}"
         rows="2"
         formControlName="description"
       ></textarea>