ACS-8584: Fix for Search Input and icons

e2e/playwright/library-actions/src/tests/library-actions.e2e.ts

@@ -397,7 +397,7 @@ test.describe('Library actions ', () => {
       const libraryMenu = myLibrariesPage.matMenu;
 
       await myLibrariesHeader.searchButton.click();
-      await searchPage.searchInput.searchButton.click();
+      await searchPage.clickSearchButton();
       await searchPage.searchOverlay.searchLibrariesOption.click();
       await searchPage.searchOverlay.searchFor(adminLibrary4);
 
@@ -415,7 +415,7 @@ test.describe('Library actions ', () => {
       const libraryMenu = searchPage.matMenu;
 
       await searchHeader.searchButton.click();
-      await searchPage.searchInput.searchButton.click();
+      await searchPage.clickSearchButton();
       await searchPage.searchOverlay.searchLibrariesOption.click();
       await searchPage.searchOverlay.searchFor(user2Library4);
 

e2e/playwright/list-views/src/tests/empty-list.e2e.ts

@@ -57,7 +57,7 @@ test.describe('Empty list views', () => {
 
   test('[C290123] [C290031] Empty Search results - pagination controls not displayed', async ({ personalFiles, searchPage }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor('InvalidText');
     await searchPage.reload({ waitUntil: 'domcontentloaded' });

e2e/playwright/list-views/src/tests/permissions.e2e.ts

@@ -112,7 +112,7 @@ test.describe('Special permissions', () => {
 
     test('[C290122] on Search Results', async ({ personalFiles, searchPage }) => {
       await personalFiles.acaHeader.searchButton.click();
-      await searchPage.searchInput.searchButton.click();
+      await searchPage.clickSearchButton();
       await searchPage.searchOverlay.checkFilesAndFolders();
       await searchPage.searchOverlay.searchFor(fileName);
       await searchPage.dataTable.spinnerWaitForReload();
@@ -185,7 +185,7 @@ test.describe('Special permissions', () => {
 
     test('[C306868] on Search results', async ({ personalFiles, searchPage }) => {
       await personalFiles.acaHeader.searchButton.click();
-      await searchPage.searchInput.searchButton.click();
+      await searchPage.clickSearchButton();
       await searchPage.searchOverlay.checkFilesAndFolders();
       await searchPage.searchOverlay.searchFor(fileName);
       await searchPage.dataTable.spinnerWaitForReload();

e2e/playwright/navigation/src/tests/sidebar.e2e.ts

@@ -76,7 +76,7 @@ test.describe('Sidebar', () => {
 
   test('[C277224] sidenav returns to the default state when navigating away from the Search Results page', async ({ personalFiles, searchPage }) => {
     await personalFiles.navigate({ remoteUrl: `#/search;q=test` });
-    await searchPage.searchInput.getIconByName('close').click();
+    await searchPage.searchInput.searchCloseButton.click();
     await searchPage.sidenav.expandedSidenav.waitFor({ state: 'attached' });
     expect(await personalFiles.sidenav.isSidenavExpanded(), 'Sidebar not expanded').toBe(true);
   });

e2e/playwright/search/src/tests/search-input.e2e.ts

@@ -44,14 +44,14 @@ test.describe('Search - Input', () => {
 
   test('[C289847] Search icon is displayed in toolbar and clicking on it displays search input container', async ({ searchPage }) => {
     await searchPage.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
 
     await expect(searchPage.searchOverlay.searchInputControl).toBeVisible();
   });
 
   test('[C289848] Search options are displayed when clicking in the search input', async ({ searchPage }) => {
     await searchPage.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
 
     await expect(searchPage.searchOverlay.searchOptions).toBeVisible();
     await expect(searchPage.searchOverlay.searchFilesOption).toBeEnabled();
@@ -64,7 +64,7 @@ test.describe('Search - Input', () => {
 
   test('[C289849] Search options are correctly enabled / disabled', async ({ searchPage }) => {
     await searchPage.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
 
     await searchPage.searchOverlay.searchFilesOption.click();
     await expect(searchPage.searchOverlay.searchFoldersOption).toBeEnabled();

e2e/playwright/search/src/tests/search-results-general.e2e.ts

@@ -98,7 +98,7 @@ test.describe('Search Results - General', () => {
     expect(await searchPage.dataTable.isItemPresent(file)).toBeTruthy();
     expect(await searchPage.dataTable.isItemPresent(folder)).toBeFalsy();
 
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.searchFor(folder);
     await searchPage.dataTable.progressBarWaitForReload();
 

e2e/playwright/share-action/src/tests/share/unshare-file-search-results.e2e.ts

@@ -112,7 +112,7 @@ test.describe('Unshare a file from Search Results', () => {
 
   test('[C306995] Unshare dialog UI', async ({ personalFiles, searchPage }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor(file1);
 
@@ -133,7 +133,7 @@ test.describe('Unshare a file from Search Results', () => {
 
   test('[C306996] Unshare a file', async ({ personalFiles, searchPage, nodesApiAction, page }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor(file2);
 
@@ -152,7 +152,7 @@ test.describe('Unshare a file from Search Results', () => {
 
   test('[C306997] Cancel the Unshare action', async ({ personalFiles, searchPage }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor(file3);
 
@@ -170,7 +170,7 @@ test.describe('Unshare a file from Search Results', () => {
 
   test('[C306999] Unshare a file from the context menu', async ({ personalFiles, searchPage, nodesApiAction, page }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor(file4);
 
@@ -189,7 +189,7 @@ test.describe('Unshare a file from Search Results', () => {
 
   test('[C306998] Consumer - on Search Results - file shared by other user', async ({ personalFiles, searchPage, nodesApiAction }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor(fileSite1);
 
@@ -204,7 +204,7 @@ test.describe('Unshare a file from Search Results', () => {
 
   test('[C307000] Consumer - on Search Results - file shared by the user', async ({ personalFiles, searchPage, nodesApiAction, page }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor(fileSite2);
 

e2e/playwright/upload-download-actions/src/tests/version-actions.e2e.ts

@@ -186,7 +186,7 @@ test.describe('Version actions', () => {
     test.beforeEach(async ({ loginPage, searchPage }) => {
       await Utils.tryLoginUser(loginPage, username, username, 'beforeEach failed');
       await searchPage.navigate();
-      await searchPage.searchInput.searchButton.click();
+      await searchPage.clickSearchButton();
       await searchPage.searchOverlay.searchFor(filenameAfterUpdate);
       await viewFirstFileVersion(searchPage);
     });

e2e/playwright/viewer/src/tests/viewer.e2e.ts

@@ -141,7 +141,7 @@ test.describe('viewer file', () => {
 
   test('[C279175] Viewer opens for a file from Search Results', async ({ personalFiles, searchPage }) => {
     await personalFiles.acaHeader.searchButton.click();
-    await searchPage.searchInput.searchButton.click();
+    await searchPage.clickSearchButton();
     await searchPage.searchOverlay.checkFilesAndFolders();
     await searchPage.searchOverlay.searchFor(randomDocxName);
     await searchPage.reload({ waitUntil: 'domcontentloaded' });

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

@@ -1,14 +1,16 @@
 <div class="app-search-container">
-  <button
-    mat-icon-button
-    id="app-search-button"
-    class="app-search-button"
-    (click)="searchSubmit(searchTerm)"
-    [title]="'SEARCH.BUTTON.TOOLTIP' | translate"
-  >
-    <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-form-field class="app-input-form-field" appearance="outline">
+
+    <button
+      mat-icon-button
+      matPrefix
+      class="app-search-button"
+      (click)="searchSubmit(searchTerm)"
+      [title]="'SEARCH.BUTTON.TOOLTIP' | translate"
+    >
+      <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
+    </button>
+
     <input
       matInput
       #searchInput
@@ -18,12 +20,13 @@
       [(ngModel)]="searchTerm"
       (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">
-      <mat-icon *ngIf="searchTerm.length" (click)="clear()" class="app-search-input-control-icon app-clear-icon">clear</mat-icon>
+    <div matSuffix>
+      <button mat-icon-button (click)="clear()">
+        <mat-icon *ngIf="searchTerm.length" class="app-suffix-icon">clear</mat-icon>
+      </button>
     </div>
   </mat-form-field>
 </div>

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

@@ -1,78 +1,33 @@
-@import '@alfresco/adf-core/lib/styles/mat-selectors';
+$search-height: 64px;
 
-.app-suffix-search-icon-wrapper {
+.app-search-container {
+  font-size: 16px;
+  box-sizing: border-box;
+  height: $search-height;
   display: flex;
+  flex-direction: row;
   align-items: center;
-  margin: 14px 1px;
-  float: left;
 
-  .app-search-input-control-icon {
-    font-size: 24px;
-    cursor: pointer;
-  }
-
-  .app-clear-icon {
+  .app-suffix-icon {
+    width: 18px;
+    height: 18px;
     font-size: 18px;
-    margin: 3px;
   }
-}
 
-.app-search-container {
-  position: relative;
-  top: -5px;
-  font-size: 16px;
-  padding-left: 19px;
-  box-sizing: border-box;
-
-  .app-input-form-field-input + span {
-    cursor: text;
-    pointer-events: auto;
+  /* stylelint-disable-next-line selector-class-pattern */
+  .mdc-notched-outline {
+    display: none;
   }
 
   .app-input-form-field {
     letter-spacing: -0.7px;
     font-size: 16px;
-    width: calc(100% - 56px);
+    width: 100%;
+    height: $search-height;
+    line-height: calc($search-height / 2);
 
     &-input {
       letter-spacing: -0.7px;
     }
-
-    #{$mat-line-ripple} {
-      &::before,
-      &::after {
-        display: none;
-      }
-    }
-
-    #{$mat-form-field-icon-suffix} {
-      position: relative;
-      right: -14px;
-    }
-  }
-
-  #{$mat-form-field-flex} {
-    background: #fff;
-  }
-
-  #{$mat-form-field-wrapper} {
-    height: 44px;
-    padding-left: 0;
-  }
-
-  .app-input-form-field-readonly {
-    #{$mat-form-field-wrapper},
-    #{$mat-form-field-flex} {
-      background-color: var(--theme-search-background-color);
-    }
-  }
-
-  .app-search-button {
-    left: -12px;
-
-    &-icon {
-      font-size: 24px;
-      padding-right: 0;
-    }
   }
 }

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

@@ -1,30 +1,29 @@
-<div class="app-search-container app-search-menu-trigger"
+<div class="app-search-container"
   [matMenuTriggerFor]="searchOptionsMenu"
   (menuOpened)="onMenuOpened()"
   (menuClosed)="syncInputValues()"
 >
+  <mat-form-field class="app-input-form-field" appearance="outline">
+    <button class="aca-search-input--search-button" mat-icon-button matPrefix (click)="searchByOption()" [title]="'SEARCH.BUTTON.TOOLTIP' | translate">
+      <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
+    </button>
 
-  <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'">
     <input
       matInput
       [attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
-      class="app-input-form-field-input"
       [type]="'text'"
       [readonly]="true"
       [value]="searchedWord"
       [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
     />
 
-    <div matSuffix class="app-suffix-search-icon-wrapper app-icon-arrow">
-      <mat-icon>arrow_drop_down</mat-icon>
-    </div>
+    <div matSuffix>
+      <mat-icon class="app-suffix-icon">arrow_drop_down</mat-icon>
 
-    <button mat-icon-button matSuffix class="app-suffix-search-icon-wrapper app-close-button" (click)="exitSearch()">
-      <mat-icon class="app-close-icon">close</mat-icon>
-    </button>
+      <button class="aca-search-input--close-button" mat-icon-button (click)="exitSearch()">
+        <mat-icon class="app-suffix-icon">close</mat-icon>
+      </button>
+    </div>
   </mat-form-field>
 </div>
 
@@ -41,9 +40,7 @@
       <mat-hint *ngIf="hasLibrariesConstraint" class="app-search-hint">{{ 'SEARCH.INPUT.HINT' | translate }}</mat-hint>
 
       <div id="search-options" class="app-search-options">
-        <mat-checkbox
-          class="app-search-options-checkbox"
-          *ngFor="let option of searchOptions"
+        <mat-checkbox *ngFor="let option of searchOptions"
           id="{{ option.id }}"
           [(ngModel)]="option.value"
           [disabled]="option.shouldDisable()"