ACS-8498] [ACA] Testing Angular 15 - Toolbar buttons layout is broken (#3995)

projects/aca-shared/src/lib/components/document-base-page/document-base-page.component.ts

@@ -171,11 +171,11 @@ export abstract class PageComponent implements OnInit, OnDestroy, OnChanges {
   imageResolver(row: ShareDataRow): string | null {
     if (row) {
       if (isLocked(row.node)) {
-        return 'assets/images/baseline-lock-24px.svg';
+        return 'material-icons://lock';
       }
 
       if (isLibrary(row.node)) {
-        return 'assets/images/baseline-library_books-24px.svg';
+        return 'material-icons://library_books';
       }
     }
 

projects/aca-shared/src/lib/components/document-base-page/document-base-page.spec.ts

@@ -290,7 +290,7 @@ describe('Info Drawer state', () => {
       }
     };
 
-    expect(component.imageResolver(row)).toBe('assets/images/baseline-lock-24px.svg');
+    expect(component.imageResolver(row)).toBe('material-icons://lock');
   });
 
   it('should resolve custom image for a library', () => {
@@ -302,7 +302,7 @@ describe('Info Drawer state', () => {
       }
     };
 
-    expect(component.imageResolver(row)).toBe('assets/images/baseline-library_books-24px.svg');
+    expect(component.imageResolver(row)).toBe('material-icons://library_books');
   });
 
   it('should track elements by action id ', () => {

projects/aca-shared/src/lib/components/page-layout/page-layout.component.scss

@@ -29,12 +29,7 @@
 
     .aca-toolbar-action {
       button {
-        display: flex;
-        justify-content: center;
-        align-items: center;
         border-radius: 6px;
-        height: 32px;
-        line-height: 32px;
       }
     }
   }

projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.html

@@ -1,9 +1,9 @@
 <ng-container [ngSwitch]="actionRef.type">
-  <div *ngSwitchCase="'default'" class="aca-toolbar-action-container">
+  <div *ngSwitchCase="'default'">
     <app-toolbar-button [type]="type" [actionRef]="actionRef" [color]="color"> </app-toolbar-button>
   </div>
 
-  <div *ngSwitchCase="'button'" class="aca-toolbar-action-container">
+  <div *ngSwitchCase="'button'">
     <app-toolbar-button [type]="data?.buttonType || type" [actionRef]="actionRef" [color]="color" [data]="actionRef.data"> </app-toolbar-button>
   </div>
 
@@ -13,7 +13,7 @@
     <app-toolbar-menu [actionRef]="actionRef" [color]="color" [data]="actionRef.data"></app-toolbar-menu>
   </ng-container>
 
-  <div *ngSwitchCase="'custom'" class="aca-toolbar-action-container">
+  <div *ngSwitchCase="'custom'">
     <adf-dynamic-component [data]="actionRef.data" [id]="actionRef.component"></adf-dynamic-component>
   </div>
 </ng-container>

projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.scss

@@ -1,11 +0,0 @@
-.aca-toolbar-action {
-  margin: 0 5px;
-
-  button {
-    -webkit-font-smoothing: subpixel-antialiased;
-  }
-}
-
-.aca-toolbar-action-container {
-  margin-top: 1px;
-}

projects/aca-shared/src/lib/components/toolbar/toolbar-action/toolbar-action.component.ts

@@ -34,7 +34,6 @@ import { ToolbarMenuComponent } from '../toolbar-menu/toolbar-menu.component';
   imports: [CommonModule, ToolbarButtonComponent, ToolbarMenuComponent, DynamicExtensionComponent],
   selector: 'aca-toolbar-action',
   templateUrl: './toolbar-action.component.html',
-  styleUrls: ['./toolbar-action.component.scss'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: { class: 'aca-toolbar-action' }

projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.html

@@ -31,7 +31,7 @@
       [attr.title]="(actionRef.disabled ? actionRef['description-disabled'] : actionRef.description || actionRef.title) | translate"
       (click)="runAction()"
     >
-      <adf-icon [value]="actionRef.icon"></adf-icon>
+      <adf-icon [value]="actionRef.icon" class="app-toolbar-menu-item--icon"></adf-icon>
       <span data-automation-id="menu-item-title">{{ actionRef.title | translate }}</span>
     </button>
   </ng-container>

projects/aca-shared/src/lib/components/toolbar/toolbar-menu-item/toolbar-menu-item.component.scss

@@ -1,5 +1,12 @@
 @import '@alfresco/adf-core/lib/styles/mat-selectors';
 
-.app-toolbar-menu-item:last-child > #{$mat-divider-horizontal} {
-  display: none;
+.app-toolbar-menu-item {
+  &:last-child > #{$mat-divider-horizontal} {
+    display: none;
+  }
+
+  &--icon {
+    display: inline-flex;
+    vertical-align: middle;
+  }
 }

projects/aca-shared/src/lib/components/toolbar/toolbar.component.scss

@@ -5,6 +5,7 @@ aca-toolbar {
     background-color: inherit;
     border: none;
     padding: 0;
+    column-gap: 5px;
   }
 
   .aca-toolbar-divider {