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

projects/aca-content/assets/app.extensions.json

@@ -128,16 +128,6 @@
         }
       }
     ],
-    "icons": [
-      {
-        "id": "adf:join_library",
-        "value": "./assets/images/join-library.svg"
-      },
-      {
-        "id": "adf:move_file",
-        "value": "./assets/images/adf-move-file-24px.svg"
-      }
-    ],
     "create": [
       {
         "id": "app.create.folder",
@@ -588,7 +578,7 @@
             "id": "app.toolbar.move",
             "order": 600,
             "title": "APP.ACTIONS.MOVE",
-            "icon": "adf:move_file",
+            "icon": "drive_file_move",
             "actions": {
               "click": "MOVE_NODES"
             },
@@ -817,7 +807,7 @@
         "id": "app.context.menu.move",
         "title": "APP.ACTIONS.MOVE",
         "order": 1000,
-        "icon": "adf:move_file",
+        "icon": "drive_file_move",
         "actions": {
           "click": "MOVE_NODES"
         },
@@ -1100,7 +1090,7 @@
               "id": "app.viewer.move",
               "order": 500,
               "title": "APP.ACTIONS.MOVE",
-              "icon": "adf:move_file",
+              "icon": "drive_file_move",
               "actions": {
                 "click": "MOVE_NODES"
               },

projects/aca-content/assets/images/adf-move-file-24px.svg

@@ -1 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg width="100%" height="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:1.41421;"><g id="Artboard_1"><g id="Page_1"><rect id="Fill_1" x="0" y="0" width="24" height="24" style="fill:none;"/><path id="Fill_2" d="M20,20l-16,0c-1.097,0 -2,-0.903 -2,-2l0.01,-12c0,-1.093 0.897,-1.995 1.99,-2l6,0l2,2l8,0c1.097,0 2,0.903 2,2l0,10c0,1.097 -0.903,2 -2,2Zm-9,-9l0,4l4,0l0,2l4,-4l-4,-4l0,2l-4,0Z" style="fill-rule:nonzero;"/></g></g></svg>

projects/aca-content/assets/images/baseline-library_books-24px.svg

@@ -1,2 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-<path d="M0 0h24v24H0z" fill="none"/><path fill="#D9E021" d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm-1 9H9V9h10v2zm-4 4H9v-2h6v2zm4-8H9V5h10v2z"/></svg>

projects/aca-content/assets/images/baseline-lock-24px.svg

@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path d="M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z"/></svg>

projects/aca-content/assets/images/join-library.svg

@@ -1,32 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <defs>
-        <polygon id="path-1" points="0.0003 0 16 0 16 16 0.0003 16"></polygon>
-        <polygon id="path-3" points="0 0 15.9998 0 15.9998 16 0 16"></polygon>
-    </defs>
-    <g id="join-library" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" opacity="0.54">
-        <g id="systemicon/join_library">
-            <g id="Group" transform="translate(2.000000, 2.000000)">
-                <g id="Group-2">
-                    <g id="Group">
-                        <g id="Group-3" transform="translate(4.000000, 0.000000)">
-                            <mask id="mask-2" fill="white">
-                                <use xlink:href="#path-1"></use>
-                            </mask>
-                            <g id="Clip-2"></g>
-                            <path d="M14.0003,0 L2.0003,0 C0.9003,0 0.0003,0.9 0.0003,2 L0.0003,14 C0.0003,15.1 0.9003,16 2.0003,16 L14.0003,16 C15.1003,16 16.0003,15.1 16.0003,14 L16.0003,2 C16.0003,0.9 15.1003,0 14.0003,0" id="Fill-1" fill="#000000" mask="url(#mask-2)"></path>
-                        </g>
-                        <g id="Group-6" transform="translate(0.000000, 4.000000)">
-                            <mask id="mask-4" fill="white">
-                                <use xlink:href="#path-3"></use>
-                            </mask>
-                            <g id="Clip-5"></g>
-                            <path d="M1.9998,0 L-0.0002,0 L-0.0002,14 C-0.0002,15.1 0.8998,16 1.9998,16 L15.9998,16 L15.9998,14 L1.9998,14 L1.9998,0 Z" id="Fill-4" fill="#000000" mask="url(#mask-4)"></path>
-                        </g>
-                        <polygon id="Fill-7" fill="#FEFEFE" points="11 12 11 10 7 10 7 6 11 6 11 4 15 8"></polygon>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

projects/aca-content/src/lib/components/context-menu/context-menu-item.component.html

@@ -2,7 +2,7 @@
   <ng-container [ngSwitch]="actionRef.type">
     <ng-container *ngSwitchCase="'menu'">
       <button mat-menu-item [id]="actionRef.id" [matMenuTriggerFor]="childMenu">
-        <adf-icon [value]="actionRef.icon"></adf-icon>
+        <adf-icon [value]="actionRef.icon" class="app-context-menu-item--icon"></adf-icon>
         <span [attr.data-automation-id]="actionRef.id + '-label'">{{ actionRef.title | translate }}</span>
       </button>
 
@@ -22,8 +22,8 @@
     </ng-container>
 
     <ng-container *ngSwitchDefault>
-      <button mat-menu-item color="primary" [id]="actionRef.id" (click)="runAction()">
+      <button mat-menu-item [id]="actionRef.id" (click)="runAction()">
-        <adf-icon [value]="actionRef.icon"></adf-icon>
+        <adf-icon [value]="actionRef.icon" class="app-context-menu-item--icon"></adf-icon>
         <span [attr.data-automation-id]="actionRef.id + '-label'">{{ actionRef.title | translate }}</span>
       </button>
     </ng-container>

projects/aca-content/src/lib/components/context-menu/context-menu.component.html

@@ -5,7 +5,7 @@
     <ng-container *ngFor="let entry of actions; trackBy: trackByActionId" [ngSwitch]="entry.type">
       <ng-container *ngSwitchDefault>
         <button mat-menu-item [id]="entry.id" (click)="runAction(entry)">
-          <adf-icon [value]="entry.icon"></adf-icon>
+          <adf-icon [value]="entry.icon" class="app-context-menu-item--icon"></adf-icon>
           <span [attr.data-automation-id]="entry.id + '-label'">{{ entry.title | translate }}</span>
         </button>
       </ng-container>
@@ -16,7 +16,7 @@
 
       <ng-container *ngSwitchCase="'menu'">
         <button mat-menu-item [id]="entry.id" [matMenuTriggerFor]="childMenu">
-          <adf-icon [value]="entry.icon"></adf-icon>
+          <adf-icon [value]="entry.icon" class="app-context-menu-item--icon"></adf-icon>
           <span [attr.data-automation-id]="entry.id + '-label'">{{ entry.title | translate }}</span>
         </button>
 

projects/aca-content/src/lib/components/context-menu/context-menu.component.scss

@@ -0,0 +1,8 @@
+.aca-context-menu {
+  .app-context-menu-item {
+    &--icon {
+      display: inline-flex;
+      vertical-align: middle;
+    }
+  }
+}

projects/aca-content/src/lib/components/context-menu/context-menu.component.ts

@@ -52,6 +52,7 @@ import { OutsideEventDirective } from './context-menu-outside-event.directive';
   ],
   selector: 'aca-context-menu',
   templateUrl: './context-menu.component.html',
+  styleUrls: ['./context-menu.component.scss'],
   host: {
     class: 'aca-context-menu-holder'
   },

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

@@ -38,7 +38,6 @@ aca-search-results {
 
         /* stylelint-disable-next-line */
         .mdc-evolution-chip__text-label {
-          padding-top: 4px;
           color: var(--theme-selected-text-color);
         }
 

projects/aca-content/src/lib/components/toolbar/toggle-join-library/toggle-join-library-button.component.ts

@@ -51,7 +51,7 @@ import { NotificationService } from '@alfresco/adf-core';
       [attr.title]="(membership.isJoinRequested | async) ? ('APP.ACTIONS.CANCEL_JOIN' | translate) : ('APP.ACTIONS.JOIN' | translate)"
     >
       <mat-icon *ngIf="membership.isJoinRequested | async">cancel</mat-icon>
-      <mat-icon *ngIf="!(membership.isJoinRequested | async)" svgIcon="adf:join_library"></mat-icon>
+      <mat-icon *ngIf="!(membership.isJoinRequested | async)">library_add</mat-icon>
     </button>
   `,
   encapsulation: ViewEncapsulation.None,

projects/aca-content/src/lib/components/toolbar/toggle-join-library/toggle-join-library-menu.component.ts

@@ -44,8 +44,7 @@ import { MatMenuModule } from '@angular/material/menu';
       [isAdmin]="(profile$ | async).isAdmin"
       [attr.title]="(membership.isJoinRequested | async) ? ('APP.ACTIONS.CANCEL_JOIN' | translate) : ('APP.ACTIONS.JOIN' | translate)"
     >
-      <mat-icon *ngIf="membership.isJoinRequested | async">cancel</mat-icon>
+      <mat-icon>{{ membership.isJoinRequested ? 'cancel' : 'library_add' }}</mat-icon>
-      <mat-icon *ngIf="!(membership.isJoinRequested | async)" svgIcon="adf:join_library"></mat-icon>
       <span>{{ (membership.isJoinRequested | async) ? ('APP.ACTIONS.CANCEL_JOIN' | translate) : ('APP.ACTIONS.JOIN' | translate) }}</span>
     </button>
   `,

projects/aca-content/src/lib/ui/theme.scss

@@ -10,10 +10,6 @@ mat-toolbar {
   color: var(--adf-theme-foreground-text-color-054);
 }
 
-mat-icon {
-  vertical-align: middle;
-}
-
 .adf-name-location-cell-location.adf-datatable-cell-value {
   color: var(--theme-secondary-text);
 }
@@ -23,27 +19,6 @@ mat-icon {
   padding: 0;
 }
 
-#{$mat-button} > #{$mat-icon} {
-  padding: 0;
-}
-
-#{$mat-button} {
-  #{$mat-button-label} {
-    -webkit-font-smoothing: subpixel-antialiased;
-  }
-
-  &#{$mat-primary} {
-    #{$mat-button-label} {
-      -webkit-font-smoothing: initial;
-      font-weight: 500;
-    }
-  }
-}
-
-#{$mat-button}:active {
-  outline: none;
-}
-
 #{$mat-form-field-error-wrapper}:is(div) {
   padding: 0;
   font-size: 10px;
@@ -125,6 +100,7 @@ mat-slide-toggle {
 
   #{$mat-evolution-chip-text-label} {
     white-space: normal;
+    display: flex;
   }
 
   #{$mat-evolution-chip-action}#{$mat-chip-action} {

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} {
+.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 {