[ACS-6081] Reduce references to internal Angular material CSS classes (#3534)

* [ACS-6081] Reduce references to internal Angular material CSS classes

* [ACS-6081] rollback default scrollable value [ci:force]

* [ACS-6081] linting

* [ACS-6081] fix e2es

* [ACS-6081] cr fix

* [ACS-6081] remove adf-cli logger from e2es

app/src/app/app.component.html

@@ -1,2 +1,2 @@
-<h1 class="sr-only" title="{{pageHeading | async | translate}}">{{ pageHeading | async | translate }}</h1>
+<h1 class="aca-sr-only" title="{{pageHeading | async | translate}}">{{ pageHeading | async | translate }}</h1>
 <router-outlet></router-outlet>

app/src/app/app.component.scss

@@ -2,7 +2,7 @@ app-root {
   display: flex;
   flex: 1;
 
-  .sr-only {
+  .aca-sr-only {
     position: absolute;
     width: 1px;
     height: 1px;

e2e/playwright/actions/src/tests/create-folder.spec.ts

@@ -33,7 +33,6 @@ import {
   errorStrings,
   test
 } from '@alfresco/playwright-shared';
-import { logger } from '@alfresco/adf-cli/scripts/logger';
 
 test.describe('Create folders', () => {
   const apiClientFactory = new ApiClientFactory();
@@ -56,7 +55,7 @@ test.describe('Create folders', () => {
       nodesApi = await NodesApi.initialize(username, username);
       await nodesApi.createFolder(commonFolderName);
     } catch (error) {
-      logger.error(`beforeAll failed : ${error}`);
+      console.error(`beforeAll failed : ${error}`);
     }
   });
 
@@ -77,7 +76,7 @@ test.describe('Create folders', () => {
       await personalFiles.navigate();
       await personalFiles.selectCreateFolder();
     } catch (error) {
-      logger.error(`beforeEach failed : ${error}`);
+      console.error(`beforeEach failed : ${error}`);
     }
   });
 
@@ -85,7 +84,7 @@ test.describe('Create folders', () => {
     try {
       await nodesApi.deleteCurrentUserNodes();
     } catch (error) {
-      logger.error(`afterAll failed : ${error}`);
+      console.error(`afterAll failed : ${error}`);
     }
   });
 

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

@@ -35,7 +35,6 @@ import {
   Breadcrumb,
   TrashcanApi
 } from '@alfresco/playwright-shared';
-import { logger } from '@alfresco/adf-cli/scripts/logger';
 
 test.describe('Create Libraries ', () => {
   const apiClientFactory = new ApiClientFactory();
@@ -70,7 +69,7 @@ test.describe('Create Libraries ', () => {
       await sitesApi.createSite(commonTrashLibraryName);
       await sitesApi.deleteSites([commonTrashLibraryName], false);
     } catch (error) {
-      logger.error(`beforeAll failed : ${error}`);
+      console.error(`beforeAll failed : ${error}`);
     }
   });
 
@@ -91,7 +90,7 @@ test.describe('Create Libraries ', () => {
       await myLibrariesPage.navigate();
       await myLibrariesPage.selectCreateLibrary();
     } catch (error) {
-      logger.error(`beforeEach failed : ${error}`);
+      console.error(`beforeEach failed : ${error}`);
     }
   });
 
@@ -101,7 +100,7 @@ test.describe('Create Libraries ', () => {
       const trashcanApi = await TrashcanApi.initialize(username, username);
       await trashcanApi.emptyTrashcan();
     } catch (error) {
-      logger.error(`afterAll failed : ${error}`);
+      console.error(`afterAll failed : ${error}`);
     }
   });
 

projects/aca-content/about/src/about.component.html

@@ -6,7 +6,7 @@
     <h1>{{ 'APP.BROWSE.ABOUT.TITLE' | translate }}</h1>
   </div>
 
-  <div class="aca-page-layout-content scrollable">
+  <div class="aca-page-layout-content aca-scrollable">
     <adf-about>
       <adf-about-panel *ngIf="dev" [label]="'ABOUT.SERVER_SETTINGS.TITLE' | translate">
         <ng-template>

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.html

@@ -10,7 +10,7 @@
   </div>
 
   <div class="aca-page-layout-content">
-    <div class="main-content">
+    <div class="aca-main-content">
 
       <ng-container *ngIf="((ruleSetsLoading$ | async) && (inheritedRuleSets$ | async).length === 0) || (actionsLoading$ | async); else onLoaded">
         <mat-progress-bar color="primary" mode="indeterminate"></mat-progress-bar>
@@ -27,6 +27,7 @@
 
             <mat-slide-toggle
               data-automation-id="manage-rules-inheritance-toggle-button"
+              class="aca-manage-rules__actions-bar__toggle"
               [checked]="isInheritanceEnabled"
               (change)="onInheritanceToggleChange($event)"
               [disabled]="isInheritanceToggleDisabled"
@@ -34,7 +35,7 @@
               {{ 'ACA_FOLDER_RULES.MANAGE_RULES.TOOLBAR.ACTIONS.INHERIT_RULES' | translate }}
             </mat-slide-toggle>
 
-            <mat-divider vertical class="vertical-divider"></mat-divider>
+            <mat-divider vertical class="aca-manage-rules__actions-bar__vertical-divider"></mat-divider>
 
             <div class="aca-manage-rules__actions-bar__buttons">
               <button

projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.scss

@@ -19,12 +19,12 @@
       gap: 12px;
     }
 
-    .mat-slide-toggle-label {
+    &__toggle {
       font-weight: 600;
       font-size: 14px;
     }
 
-    .vertical-divider {
+    &__vertical-divider {
       height: 50%;
       margin: 0 12px;
     }

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

@@ -4,8 +4,9 @@
     flex-direction: row;
     gap: 20px;
 
-    adf-card-view .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem .mat-form-field .mat-form-field-infix {
+    adf-card-view .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
-      width: 280px;
+      display: inline-block;
+      width: 300px;
     }
   }
 

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

@@ -2,11 +2,11 @@
   display: block;
   border-radius: 8px;
 
-  &.childCompositeCondition {
+  &.aca-childCompositeCondition {
     padding: 8px 16px;
     background-color: hsl(0deg, 0%, 100%);
 
-    &.secondaryBackground {
+    &.aca-secondaryBackground {
       background-color: hsl(0deg, 0%, 95%);
     }
   }

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

@@ -62,10 +62,10 @@ import { RuleSimpleConditionUiComponent } from './rule-simple-condition.ui-compo
   ]
 })
 export class RuleCompositeConditionUiComponent implements ControlValueAccessor, OnDestroy, OnChanges {
-  @HostBinding('class.secondaryBackground')
+  @HostBinding('class.aca-secondaryBackground')
   @Input()
   secondaryBackground = false;
-  @HostBinding('class.childCompositeCondition')
+  @HostBinding('class.aca-childCompositeCondition')
   @Input()
   childCondition = false;
 

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

@@ -11,7 +11,7 @@
     </mat-select>
   </mat-form-field>
 
-  <mat-form-field class="aca-rule-simple-condition__form__comparator-input" [class]="{ hidden: isComparatorHidden }" data-automation-id="comparator-form-field">
+  <mat-form-field class="aca-rule-simple-condition__form__comparator-input" [class]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
     <mat-select formControlName="comparator" data-automation-id="comparator-select">
       <mat-option
         *ngFor="let comparator of selectedFieldComparators"

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

@@ -10,7 +10,7 @@
     }
 
     &__comparator-input {
-      &.hidden {
+      &.aca-hidden {
         display: none;
       }
     }

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

@@ -1,16 +1,14 @@
 .aca-edit-rule-dialog-container {
   --edit-rule-dialog-padding: 8px 20px;
-
-  .mat-dialog-container {
-    padding: 0;
-  }
 }
 
 .aca-edit-rule-dialog {
+  margin: -24px;
+
   &__header {
     display: flex;
     align-items: center;
-    margin: 0;
+    margin: -43px -24px 0;
     padding: var(--edit-rule-dialog-padding);
     box-sizing: border-box;
     border-bottom: 1px solid var(--theme-border-color);
@@ -29,7 +27,7 @@
   }
 
   &__content {
-    margin: 0;
+    margin: 0 -24px;
     padding: 0;
 
     &__spinner {
@@ -41,7 +39,7 @@
   }
 
   &__footer {
-    margin: 0;
+    margin: 0 -24px -43px;
     padding: var(--edit-rule-dialog-padding);
     box-sizing: border-box;
     border-top: 1px solid var(--theme-border-color);

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

@@ -3,6 +3,7 @@
     <mat-checkbox
       formControlName="isAsynchronous"
       (change)="toggleErrorScriptDropdown($event)"
+      class="aca-rule-options__checkbox"
       data-automation-id="rule-option-checkbox-asynchronous">
       {{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.IS_ASYNCHRONOUS' | translate }}
     </mat-checkbox>
@@ -10,7 +11,7 @@
     <mat-form-field
       data-automation-id="rule-option-form-field-errorScript"
       floatLabel="always"
-      [ngClass]="{ 'hide-error-script-dropdown': hideErrorScriptDropdown }">
+      [ngClass]="{ 'aca-hide-error-script-dropdown': hideErrorScriptDropdown }">
 
       <mat-select
         formControlName="errorScript"
@@ -31,6 +32,7 @@
   <div class="aca-rule-options__option" *ngIf="!readOnly || isInheritableChecked">
     <mat-checkbox
       formControlName="isInheritable"
+      class="aca-rule-options__checkbox"
       data-automation-id="rule-option-checkbox-inheritable">
       {{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.IS_INHERITABLE' | translate }}
     </mat-checkbox>
@@ -39,6 +41,7 @@
   <div class="aca-rule-options__option" *ngIf="!readOnly">
     <mat-checkbox
       formControlName="isDisabled"
+      class="aca-rule-options__checkbox"
       data-automation-id="rule-option-checkbox-disabled">
       {{ 'ACA_FOLDER_RULES.RULE_DETAILS.OPTIONS.DISABLE_RULE' | translate }}
     </mat-checkbox>

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

@@ -8,11 +8,11 @@
     flex-direction: column;
   }
 
-  &.read-only .mat-checkbox-inner-container {
+  &.aca-read-only &__checkbox label > span:first-child {
     display: none;
   }
 
-  .hide-error-script-dropdown {
+  .aca-hide-error-script-dropdown {
     visibility: hidden;
   }
 }

projects/aca-content/folder-rules/src/rule-details/options/rule-options.ui-component.spec.ts

@@ -45,11 +45,11 @@ describe('RuleOptionsUiComponent', () => {
   const testErrorScriptFormFieldVisibility = (isVisible: boolean) => {
     if (isVisible) {
       expect((getByDataAutomationId('rule-option-form-field-errorScript').nativeElement as HTMLElement).classList).not.toContain(
-        'hide-error-script-dropdown'
+        'aca-hide-error-script-dropdown'
       );
     } else {
       expect((getByDataAutomationId('rule-option-form-field-errorScript').nativeElement as HTMLElement).classList).toContain(
-        'hide-error-script-dropdown'
+        'aca-hide-error-script-dropdown'
       );
     }
   };

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

@@ -74,7 +74,7 @@ export class RuleOptionsUiComponent implements ControlValueAccessor, OnChanges,
   @Input()
   errorScriptConstraint: ActionParameterConstraint;
 
-  @HostBinding('class.read-only')
+  @HostBinding('class.aca-read-only')
   readOnly = false;
 
   onChange: (options: RuleOptions) => void = () => undefined;

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

@@ -1,10 +1,10 @@
-<form class="aca-rule-details__form" [ngClass]="{ 'read-only': readOnly }" [formGroup]="form">
+<form class="aca-rule-details__form" [ngClass]="{ 'aca-read-only': readOnly }" [formGroup]="form">
 
   <ng-container *ngIf="!preview">
     <div class="aca-rule-details__form__row aca-rule-details__form__name">
       <label for="rule-details-name-input">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.NAME' | translate }}</label>
       <div>
-        <mat-form-field floatLabel='never'>
+        <mat-form-field floatLabel='never' class="aca-rule-details__form__row__field">
           <input
             id="rule-details-name-input"
             matInput type="text" formControlName="name" data-automation-id="rule-details-name-input"
@@ -17,8 +17,9 @@
     <div class="aca-rule-details__form__row aca-rule-details__form__description">
       <label for="rule-details-description-textarea">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.DESCRIPTION' | translate }}</label>
       <div>
-        <mat-form-field floatLabel='never'>
+        <mat-form-field floatLabel='never' class="aca-rule-details__form__row__field">
         <textarea
+          class="aca-rule-details__form__row__field__textarea"
           id="rule-details-description-textarea"
           matInput formControlName="description" data-automation-id="rule-details-description-textarea"
           [placeholder]="descriptionPlaceHolder | translate">
@@ -29,20 +30,20 @@
   </ng-container>
 
   <div class="aca-rule-details__form__row aca-rule-details__form__triggers">
-    <div class="label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.WHEN' | translate }}</div>
+    <div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.WHEN' | translate }}</div>
     <div>
       <aca-rule-triggers formControlName="triggers" data-automation-id="rule-details-triggers-component"></aca-rule-triggers>
-      <mat-error class="rule-details-error" *ngIf="triggers.hasError('required')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.INSUFFICIENT_TRIGGERS_SELECTED' | translate }}</mat-error>
+      <mat-error class="aca-rule-details-error" *ngIf="triggers.hasError('required')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.INSUFFICIENT_TRIGGERS_SELECTED' | translate }}</mat-error>
     </div>
   </div>
 
   <div class="aca-rule-details__form__conditions">
     <aca-rule-composite-condition formControlName="conditions"></aca-rule-composite-condition>
-    <mat-error class="rule-details-error" *ngIf="conditions.hasError('ruleCompositeConditionInvalid')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.RULE_COMPOSITE_CONDITION_INVALID' | translate }}</mat-error>
+    <mat-error class="aca-rule-details-error" *ngIf="conditions.hasError('ruleCompositeConditionInvalid')">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.ERROR.RULE_COMPOSITE_CONDITION_INVALID' | translate }}</mat-error>
   </div>
 
   <div class="aca-rule-details__form__row aca-rule-details__form__actions">
-    <div class="label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.PERFORM_ACTIONS' | translate }}</div>
+    <div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.PERFORM_ACTIONS' | translate }}</div>
     <aca-rule-action-list
       formControlName="actions"
       [actionDefinitions]="actionDefinitions"
@@ -53,7 +54,7 @@
   </div>
 
   <div class="aca-rule-details__form__row" *ngIf="showOptionsSection">
-    <div class="label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</div>
+    <div class="aca-label">{{ 'ACA_FOLDER_RULES.RULE_DETAILS.LABEL.OPTIONS' | translate }}</div>
     <aca-rule-options
       formControlName="options"
       data-automation-id="rule-details-options-component"

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

@@ -25,7 +25,7 @@
       gap: 8px;
 
       & > label,
-      & > .label {
+      & > .aca-label {
         font-weight: bold;
         width: 20%;
         min-width: 100px;
@@ -35,15 +35,16 @@
 
       & > div {
         flex-grow: 1;
+      }
 
-        mat-form-field {
+      &__field {
         width: 100%;
         max-width: 400px;
+        margin-top: -11px;
         font-size: inherit;
 
-          .mat-form-field-infix {
+        &__textarea {
-            border: none;
+          min-height: 4em;
-          }
         }
       }
     }
@@ -55,17 +56,13 @@
     &__conditions {
       width: 100%;
 
-      & > .rule-details-error {
+      & > .aca-rule-details-error {
         margin-left: 16px;
         color: inherit;
       }
     }
 
-    textarea {
+    .aca-rule-details-error {
-      min-height: 4em;
-    }
-
-    .rule-details-error {
       font-size: 75%;
       height: 1em;
     }
@@ -76,7 +73,7 @@
       }
     }
 
-    &.read-only,
+    &.aca-read-only,
     .mat-form-field-disabled {
       .mat-form-field-underline,
       .mat-select-arrow-wrapper {

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

@@ -15,7 +15,7 @@
     <div
       *ngIf="item.type === 'load-more-rules'; else loadMoreRuleSets"
       tabindex="0"
-      class="aca-rule-list-grouping__non-rule-item load-more"
+      class="aca-rule-list-grouping__non-rule-item aca-load-more"
       matRipple matRippleColor="hsla(0,0%,0%,0.05)"
       (click)="onClickLoadMoreRules(item.ruleSet)"
       (keyup.enter)="onClickLoadMoreRules(item.ruleSet)">
@@ -27,7 +27,7 @@
     <div
       *ngIf="item.type === 'load-more-rule-sets'; else loadingRules"
       tabindex="0"
-      class="aca-rule-list-grouping__non-rule-item load-more"
+      class="aca-rule-list-grouping__non-rule-item aca-load-more"
       matRipple matRippleColor="hsla(0,0%,0%,0.05)"
       (click)="onClickLoadMoreRuleSets()"
       (keyup.enter)="onClickLoadMoreRuleSets()">
@@ -40,7 +40,7 @@
       tabindex="0"
       class="aca-rule-list-grouping__non-rule-item"
       matRipple matRippleColor="hsla(0,0%,0%,0.05)">
-      <mat-spinner mode="indeterminate" [diameter]="16"></mat-spinner>
+      <mat-spinner mode="indeterminate" [diameter]="16" class="aca-spinner"></mat-spinner>
       {{ 'ACA_FOLDER_RULES.RULE_LIST.LOADING_RULES' | translate }}
     </div>
   </ng-template>

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

@@ -12,7 +12,7 @@
     text-align: center;
     padding: 0.5em 0;
 
-    &.load-more {
+    &.aca-load-more {
       cursor: pointer;
     }
 
@@ -20,7 +20,7 @@
       border-bottom: 1px solid var(--theme-border-color);
     }
 
-    .mat-spinner {
+    .aca-spinner {
       margin-right: 0.5em;
     }
   }

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

@@ -34,7 +34,7 @@
     text-overflow: ellipsis;
   }
 
-  &.selected {
+  &.aca-selected {
-    background: var(--theme-selected-button-bg-color);
+    background: var(--adf-theme-background-selected-button-color);
   }
 }

projects/aca-content/folder-rules/src/rule-list/rule-list-item/rule-list-item.ui-component.ts

@@ -40,7 +40,7 @@ export class RuleListItemUiComponent {
   @Input()
   rule: Rule;
   @Input()
-  @HostBinding('class.selected')
+  @HostBinding('class.aca-selected')
   isSelected: boolean;
   @Input()
   showEnabledToggle = false;

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

@@ -2,7 +2,7 @@
   *ngIf="inheritedRuleSetGroupingItems.length > 0"
   class="aca-rule-list__item"
   data-automation-id="rule-list-item"
-  [ngClass]="{ expanded: inheritedRuleSetsExpanded }">
+  [ngClass]="{ 'aca-expanded': inheritedRuleSetsExpanded }">
 
   <div
     tabindex="0"
@@ -13,7 +13,7 @@
 
     <span class="aca-rule-list__item__header__title">
       {{ 'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES' | translate }}
-      <mat-icon [matTooltip]="'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES_WILL_BE_RUN_FIRST' | translate">
+      <mat-icon class="aca-rule-list__item__header__title__mat-icon" [matTooltip]="'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES_WILL_BE_RUN_FIRST' | translate">
         info
       </mat-icon>
     </span>
@@ -38,7 +38,7 @@
   *ngIf="mainRuleSetGroupingItems.length > 0 || isMainRuleSetLinked"
   class="aca-rule-list__item"
   data-automation-id="rule-list-item"
-  [ngClass]="{ expanded: mainRuleSetExpanded }">
+  [ngClass]="{ 'aca-expanded': mainRuleSetExpanded }">
 
   <div
     tabindex="0"

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

@@ -35,13 +35,13 @@
         justify-content: flex-start;
         flex: 1;
 
-        .mat-icon {
+        &__mat-icon {
           transform: scale(0.8);
         }
       }
     }
 
-    &.expanded {
+    &.aca-expanded {
       .aca-rule-list__item__header {
         border-bottom: 1px solid var(--theme-border-color);
       }

projects/aca-content/folder-rules/src/rule-set-picker/rule-set-picker.smart-component.html

@@ -3,7 +3,7 @@
     {{ 'ACA_FOLDER_RULES.LINK_RULES_DIALOG.TITLE' | translate }}
   </div>
   <button mat-icon-button mat-dialog-close class="aca-rule-set-picker__header__close" tabindex="-1">
-    <mat-icon>close</mat-icon>
+    <mat-icon class="aca-rule-set-picker__header__close__icon">close</mat-icon>
   </button>
 </div>
 
@@ -17,7 +17,7 @@
     (siteChange)="setFolderLoading(true)">
   </adf-content-node-selector-panel>
 
-  <div class="aca-rule-set-picker__content__rule-list" [ngClass]="{ justify: rulesLoading$ | async }">
+  <div class="aca-rule-set-picker__content__rule-list" [ngClass]="{ 'aca-justify': rulesLoading$ | async }">
     <ng-container *ngIf="rulesLoading$ | async; else rulesLoaded">
       <mat-progress-spinner color="primary" mode="indeterminate"></mat-progress-spinner>
     </ng-container>

projects/aca-content/folder-rules/src/rule-set-picker/rule-set-picker.smart-component.scss

@@ -1,7 +1,7 @@
 .aca-rule-set-picker-container {
   --rule-set-picker-padding: 8px 20px;
 
-  .mat-dialog-container {
+  & > * {
     padding: 0;
   }
 }
@@ -22,7 +22,7 @@
     }
 
     &__close {
-      & mat-icon {
+      &__icon {
         font-size: 18px;
       }
     }
@@ -50,7 +50,7 @@
       overflow-y: auto;
       overflow-x: hidden;
 
-      &.justify {
+      &.aca-justify {
         align-items: center;
         justify-content: center;
       }

projects/aca-content/preview/src/lib/components/preview.component.html

@@ -1,7 +1,7 @@
 <ng-container *ngIf="nodeId">
   <adf-alfresco-viewer
     [ngClass]="{
-      'right_side--hide': !showRightSide
+      'aca-right_side--hide': !showRightSide
     }"
     [nodeId]="nodeId"
     [allowNavigate]="navigateMultiple"

projects/aca-content/preview/src/lib/components/preview.component.scss

@@ -18,10 +18,10 @@
 }
 
 // todo: remove this when viewer supports extensions
-.adf-viewer-toolbar .mat-toolbar > button:last-child {
+.adf-viewer-toolbar > * > button:last-child {
   display: none;
 }
 
-.adf-alfresco-viewer.right_side--hide .adf-viewer__sidebar__right {
+.adf-alfresco-viewer.aca-right_side--hide .adf-viewer__sidebar__right {
   width: 0;
 }

projects/aca-content/src/lib/components/details/details.component.html

@@ -5,12 +5,12 @@
   </div>
 
   <div class="aca-page-layout-content">
-    <div class="acs-details-container">
+    <div class="aca-details-container">
-      <div class="acs-details-title">
+      <div class="aca-details-title">
-        <div class="acs-details-breadcrumb" role="heading" aria-level="2" *ngIf="node">
+        <div class="aca-details-breadcrumb" role="heading" aria-level="2" *ngIf="node">
-          <span class="acs-details-breadcrumb-library"> {{ node.name }} </span>
+          <span class="aca-details-breadcrumb-library"> {{ node.name }} </span>
           -
-          <span class="acs-details-breadcrumb-item">{{ 'APP.INFO_DRAWER.TITLE' | translate }}</span>
+          <span class="aca-details-breadcrumb-item">{{ 'APP.INFO_DRAWER.TITLE' | translate }}</span>
         </div>
         <button
           class="aca-close-details-button"

projects/aca-content/src/lib/components/details/details.component.scss

@@ -18,7 +18,7 @@ app-details-manager {
   }
 }
 
-.acs-details-container {
+.aca-details-container {
   background-color: var(--theme-card-background-color);
   width: 100%;
 }
@@ -31,27 +31,27 @@ app-details-manager {
     height: 100%;
   }
 
-  .mat-tab-labels {
+  mat-tab-header {
     text-transform: uppercase;
   }
 }
 
-.acs-details-title {
+.aca-details-title {
   width: 100%;
   display: flex;
   align-items: center;
   justify-content: space-between;
 }
 
-.acs-details-breadcrumb {
+.aca-details-breadcrumb {
   font-size: 18px;
   margin-left: 20px;
 
-  .acs-details-breadcrumb-library {
+  &-library {
     font-weight: 900;
   }
 
-  .acs-details-breadcrumb-item {
+  &-item {
     font-weight: 100;
   }
 }

projects/aca-content/src/lib/components/dl-custom-components/name-column/name-column.component.scss

@@ -17,14 +17,14 @@
     overflow: hidden;
     text-overflow: ellipsis;
 
-    aca-locked-by {
+    .aca-locked-by {
       display: flex;
       align-items: center;
       color: rgba(0, 0, 0, 0.54);
       max-width: 100%;
-      padding: 0 10px;
+      padding-right: 10px;
 
-      .locked_by--name {
+      &--name {
         overflow: hidden;
         text-overflow: ellipsis;
       }

projects/aca-content/src/lib/components/favorite-libraries/favorite-libraries.component.html

@@ -5,7 +5,7 @@
   </div>
 
   <div class="aca-page-layout-content">
-    <div class="main-content">
+    <div class="aca-main-content">
       <adf-document-list
         #documentList
         acaDocumentList

projects/aca-content/src/lib/components/favorites/favorites.component.html

@@ -5,7 +5,7 @@
   </div>
 
   <div class="aca-page-layout-content">
-    <div class="main-content">
+    <div class="aca-main-content">
       <adf-document-list
         #documentList
         acaDocumentList

projects/aca-content/src/lib/components/files/files.component.html

@@ -9,7 +9,7 @@
   </div>
 
   <div class="aca-page-layout-content">
-    <div class="main-content" *ngIf="!(showLoader$ | async)">
+    <div class="aca-main-content" *ngIf="!(showLoader$ | async)">
       <adf-upload-drag-area [rootFolderId]="node?.id" [disabled]="!canUpload" (updateFileVersion)="onUploadNewVersion($event)">
         <adf-document-list
           #documentList

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

@@ -1,7 +1,7 @@
 <mat-card *ngIf="node">
   <mat-card-content>
     <form [formGroup]="form" autocomplete="off">
-      <mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper">
+      <mat-form-field floatLabel="auto" data-automation-id="library-name-properties-wrapper" class="app-library-metadata-form-field">
         <input
           matInput
           [cdkTrapFocusAutoCapture]="form.enabled"
@@ -17,11 +17,11 @@
         </mat-error>
       </mat-form-field>
 
-      <mat-form-field floatLabel="auto" data-automation-id="library-id-properties-wrapper">
+      <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-form-field>
 
-      <mat-form-field floatLabel="auto" data-automation-id="library-visibility-properties-wrapper">
+      <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-option [value]="type.value" *ngFor="let type of libraryType">
             {{ type.label | translate }}
@@ -29,7 +29,7 @@
         </mat-select>
       </mat-form-field>
 
-      <mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper">
+      <mat-form-field floatLabel="auto" data-automation-id="library-description-properties-wrapper" class="app-library-metadata-form-field">
         <textarea
           matInput
           placeholder="{{ 'LIBRARY.DIALOG.FORM.DESCRIPTION' | translate }}"

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

@@ -1,24 +1,5 @@
 app-library-metadata-form {
-  .mat-form-field {
+  .app-library-metadata-form-field {
     width: 100%;
   }
-
-  .mat-form-field-infix {
-    position: relative;
-    width: 180px;
-
-    .mat-form-field-label-wrapper {
-      position: absolute;
-      width: 100%;
-      pointer-events: none;
-
-      .mat-form-field-label {
-        position: absolute;
-        white-space: nowrap;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        transform-origin: 0 0;
-      }
-    }
-  }
 }

projects/aca-content/src/lib/components/libraries/libraries.component.html

@@ -5,7 +5,7 @@
   </div>
 
   <div class="aca-page-layout-content">
-    <div class="main-content">
+    <div class="aca-main-content">
       <adf-document-list
         #documentList
         acaDocumentList

projects/aca-content/src/lib/components/recent-files/recent-files.component.html

@@ -5,7 +5,7 @@
   </div>
 
   <div class="aca-page-layout-content">
-    <div class="main-content">
+    <div class="aca-main-content">
       <adf-document-list
         #documentList
         acaDocumentList

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

@@ -6,7 +6,7 @@
     (click)="searchSubmit(searchTerm)"
     [title]="'SEARCH.BUTTON.TOOLTIP' | translate"
   >
-    <mat-icon [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
+    <mat-icon class="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]="'never'">
     <input
@@ -18,6 +18,7 @@
       [(ngModel)]="searchTerm"
       (ngModelChange)="inputChange($event)"
       (keyup.enter)="searchSubmit($event)"
+      class="app-input-form-field-input"
       [placeholder]="'SEARCH.INPUT.PLACEHOLDER' | translate"
       autocomplete="off"
     />

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

@@ -5,7 +5,7 @@ $top-margin: 12px;
   margin: 14px 1px;
   float: left;
 
-  .mat-icon {
+  mat-icon {
     font-size: 24px;
     cursor: pointer;
   }
@@ -24,10 +24,6 @@ $top-margin: 12px;
   box-sizing: border-box;
   margin-bottom: 12px;
 
-  .mat-form-field {
-    font-size: 16px;
-  }
-
   .mat-form-field-underline {
     display: none;
   }
@@ -37,7 +33,7 @@ $top-margin: 12px;
   }
 
   // fixes pointer event on FF
-  &.searchMenuTrigger .mat-form-field-label-wrapper {
+  &.app-search-menu-trigger .mat-form-field-label-wrapper {
     pointer-events: auto;
   }
 
@@ -45,16 +41,16 @@ $top-margin: 12px;
     letter-spacing: -0.7px;
     width: calc(100% - 56px);
 
-    .mat-input-element {
+    &-input {
       letter-spacing: -0.7px;
     }
   }
 
-  .app-search-button.mat-icon-button {
+  .app-search-button {
     top: -2px;
     left: -8px;
 
-    .mat-icon {
+    &-icon {
       font-size: 24px;
       padding-right: 0;
     }

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

@@ -1,4 +1,4 @@
-<div class="app-search-container searchMenuTrigger"
+<div class="app-search-container app-search-menu-trigger"
   [matMenuTriggerFor]="searchOptionsMenu"
   (menuOpened)="onMenuOpened()"
   (menuClosed)="syncInputValues()"
@@ -11,6 +11,7 @@
     <input
       matInput
       [attr.aria-label]="'SEARCH.INPUT.ARIA-LABEL' | translate"
+      class="app-input-form-field-input"
       [type]="'text'"
       [disabled]="true"
       [value]="searchedWord"
@@ -21,8 +22,8 @@
       <mat-icon>arrow_drop_down</mat-icon>
     </div>
 
-    <button mat-icon-button matSuffix class="app-suffix-search-icon-wrapper app-close-icon" (click)="exitSearch()">
+    <button mat-icon-button matSuffix class="app-suffix-search-icon-wrapper app-close-button" (click)="exitSearch()">
-      <mat-icon>close</mat-icon>
+      <mat-icon class="app-close-icon">close</mat-icon>
     </button>
   </mat-form-field>
 </div>
@@ -39,8 +40,9 @@
       </app-search-input-control>
       <mat-hint *ngIf="hasLibrariesConstraint" class="app-search-hint">{{ 'SEARCH.INPUT.HINT' | translate }}</mat-hint>
 
-      <div id="search-options">
+      <div id="search-options" class="app-search-options">
         <mat-checkbox
+          class="app-search-options-checkbox"
           *ngFor="let option of searchOptions"
           id="{{ option.id }}"
           [(ngModel)]="option.value"

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

@@ -10,10 +10,6 @@ $top-margin: 12px;
   max-width: $search-width;
   height: $search-height + $top-margin;
 
-  &.mat-menu-trigger {
-    margin: 0;
-  }
-
   .app-search-button {
     width: 32px;
     height: 32px;
@@ -23,18 +19,16 @@ $top-margin: 12px;
   }
 
   .app-input-form-field {
-    .app-close-icon {
+    .app-suffix-search-icon-wrapper.app-close-button {
       height: 6px;
 
-      &.app-suffix-search-icon-wrapper {
+      .app-close-icon {
-        .mat-icon {
         font-size: 18px;
         line-height: 28px;
       }
     }
-    }
 
-    .mat-input-element {
+    &-input {
       caret-color: var(--theme-text-color);
 
       &:disabled {
@@ -43,30 +37,19 @@ $top-margin: 12px;
     }
   }
 
-  .mat-focused label.mat-form-field-label {
+  &:focus-within {
+    label {
       display: none;
     }
   }
+}
 
 .app-search-options-menu {
-  &.mat-menu-panel {
   background-color: var(--theme-dialog-background-color);
   width: $search-width;
   max-width: unset;
   border-radius: $search-border-radius;
-    margin-top: $top-margin;
+  margin-top: 3px;
-  }
-
-  .mat-menu-content:not(:empty) {
-    padding-top: 0;
-    padding-bottom: 0;
-  }
-}
-
-mat-checkbox {
-  .mat-checkbox-frame {
-    border-color: var(--theme-text-color);
-  }
 }
 
 .aca-search-input {
@@ -77,20 +60,25 @@ mat-checkbox {
   height: $search-height;
   margin-bottom: 0;
   padding-bottom: 26px;
+
+  .app-search-container {
+    margin: 0;
+  }
 }
 
 .app-search-control {
   margin-top: -$top-margin;
 }
 
-#search-options {
+.app-search-options {
   color: var(--theme-text-color);
   border-top: 1px solid var(--theme-divider-color);
   padding: 20px 0;
   font-size: 16px;
   letter-spacing: -0.7px;
+  margin-bottom: -8px;
 
-  mat-checkbox {
+  &-checkbox {
     padding: 3px 24px 3px 19px;
 
     .mat-checkbox-inner-container {
@@ -105,7 +93,7 @@ mat-checkbox {
     }
   }
 
-  .mat-checkbox-layout {
+  .app-search-options-checkbox label {
     max-width: 155px;
   }
 }
@@ -128,10 +116,8 @@ mat-checkbox {
   }
 
   .app-search-options-menu {
-    &.mat-menu-panel {
     width: $search-width-small;
   }
-  }
 
   #search-options {
     padding-left: 20px;
@@ -144,7 +130,7 @@ mat-checkbox {
       }
     }
 
-    .mat-checkbox-layout {
+    label {
       max-width: 105px;
     }
   }
@@ -162,13 +148,10 @@ mat-checkbox {
   }
 
   .app-search-options-menu {
-    &.mat-menu-panel {
     width: $search-width-xsmall;
-      margin-top: 9px;
-    }
   }
 
-  #search-options .mat-checkbox-layout {
+  #search-options label {
     max-width: 180px;
   }
 }

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

@@ -6,12 +6,12 @@
   </div>
 
   <div class="aca-page-layout-content">
-    <div class="main-content">
+    <div class="aca-main-content">
       <div class="adf-search-results">
         <div class="adf-search-results__content">
           <mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate"></mat-progress-bar>
-          <div class="adf-search-results__content-header content" *ngIf="data?.list.entries.length">
+          <div class="adf-search-results__content-header aca-content" *ngIf="data?.list.entries.length">
-            <div class="content__side--left">
+            <div class="aca-content__side--left">
               <div class="adf-search-results--info-text" *ngIf="totalResults !== 1">
                 {{ 'APP.BROWSE.SEARCH_LIBRARIES.FOUND_RESULTS' | translate: { number: totalResults } }}
               </div>

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

@@ -28,11 +28,7 @@ aca-search-results {
       color: rgba(0, 0, 0, 0.54);
     }
 
-    .text--bold {
+    .aca-content {
-      font-weight: 600;
-    }
-
-    .content {
       @include flex-row;
 
       flex: unset;

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

@@ -1,12 +1,12 @@
 <div class="search-file-name">
-  <span tabindex="0" role="link" *ngIf="isFile" (click)="showPreview($event)" (keyup.enter)="showPreview($event)" class="link">
+  <span tabindex="0" role="link" *ngIf="isFile" (click)="showPreview($event)" (keyup.enter)="showPreview($event)" class="aca-link">
     {{ name$ | async }}
   </span>
-  <span tabindex="0" role="link" *ngIf="!isFile" (click)="navigate($event)" (keyup.enter)="navigate($event)" class="bold link">
+  <span tabindex="0" role="link" *ngIf="!isFile" (click)="navigate($event)" (keyup.enter)="navigate($event)" class="bold aca-link">
     {{ name$ | async }}
   </span>
   <span>{{ title$ | async }}</span>
 </div>
-<div class="result-location">
+<div class="aca-result-location">
   <aca-location-link [context]="context" [showLocation]="true"></aca-location-link>
 </div>

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

@@ -1,10 +1,10 @@
 .aca-search-results-row {
-  .result-location {
+  .aca-result-location {
     height: 15px;
     padding-top: 3px;
   }
 
-  .link {
+  .aca-link {
     text-decoration: none;
     color: var(--theme-text-bold-color);
   }
@@ -14,13 +14,13 @@
     color: var(--theme-foreground-text-color);
   }
 
-  .link:hover,
+  .aca-link:hover,
   .aca-location-link .adf-datatable-cell-value:hover {
     color: var(--theme-primary-color);
     text-decoration: underline;
   }
 
-  .adf-is-selected .link:not(:hover),
+  .adf-is-selected .aca-link:not(:hover),
   .adf-is-selected .adf-datatable-cell-value:not(:hover) {
     color: var(--theme-primary-color);
   }

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

@@ -6,7 +6,7 @@
   </div>
 
   <div class="aca-page-layout-content">
-    <div class="main-content">
+    <div class="aca-main-content">
       <div class="adf-search-results">
         <div class="adf-search-results__content">
           <mat-progress-bar *ngIf="isLoading" color="primary" mode="indeterminate" aria-live="polite"> </mat-progress-bar>

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

@@ -30,16 +30,9 @@ aca-search-results {
     border-top: 1px solid var(--theme-border-color);
     border-bottom: 1px solid var(--theme-border-color);
 
+    .aca-content__advanced-filters {
       .adf-search-filter-chip,
       .adf-search-filter-chip-tabbed {
-      &[disabled] {
-        &.mat-chip {
-          background-color: var(--theme-disabled-chip-background-color);
-          color: var(--theme-search-chip-icon-color);
-        }
-      }
-
-      &.mat-chip {
         background-color: var(--theme-dropdown-color);
         color: var(--theme-selected-text-color);
 
@@ -48,6 +41,11 @@ aca-search-results {
           background-color: var(--theme-grey-background-hover);
         }
 
+        &[disabled] {
+          background-color: var(--theme-disabled-chip-background-color);
+          color: var(--theme-search-chip-icon-color);
+        }
+
         mat-icon {
           color: var(--theme-search-chip-icon-color);
         }

projects/aca-content/src/lib/components/shared-files/shared-files.component.html

@@ -5,7 +5,7 @@
   </div>
 
   <div class="aca-page-layout-content">
-    <div class="main-content">
+    <div class="aca-main-content">
       <adf-document-list
         #documentList
         acaDocumentList

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

@@ -1,14 +1,14 @@
 <ng-container *ngIf="!item.children">
-  <div class="item">
+  <div class="aca-expansion-panel-item">
     <button
-      acaActiveLink="action-button--active"
+      acaActiveLink="aca-action-button--active"
       [action]="item"
       [attr.aria-label]="item.title | translate"
       [id]="item.id"
       [attr.data-automation-id]="item.id"
       [attr.title]="item.description | translate"
       mat-button
-      class="action-button full-width"
+      class="aca-action-button aca-full-width"
     >
       <adf-icon *ngIf="item.icon" [value]="item.icon"></adf-icon>
       <span class="action-button__label">{{ item.title | translate }}</span>
@@ -18,41 +18,43 @@
 
 <ng-container *ngIf="item.children && item.children.length">
   <mat-expansion-panel
+    class="aca-expansion-panel"
     [expanded]="true"
     [acaExpansionPanel]="item"
     [@.disabled]="true"
   >
-    <mat-expansion-panel-header expandedHeight="32px" collapsedHeight="32px" role="group">
+    <mat-expansion-panel-header expandedHeight="32px" collapsedHeight="32px" role="group" class="aca-expansion-panel-header">
-      <mat-panel-title>
+      <mat-panel-title class="aca-expansion-panel-header-title">
-        <div class="item">
+        <div class="aca-expansion-panel-item">
           <span
             [attr.aria-label]="item.title | translate"
             [id]="item.id"
             [attr.title]="item.description | translate"
             [attr.data-automation-id]="item.id"
-            class="action-button full-width"
+            class="aca-action-button aca-full-width"
           >
             <adf-icon *ngIf="item.icon" [value]="item.icon"></adf-icon>
-            <span class="action-button__label">{{ item.title | translate }}</span>
+            <span class="aca-action-button__label">{{ item.title | translate }}</span>
           </span>
         </div>
       </mat-panel-title>
     </mat-expansion-panel-header>
-
+    <div class="aca-expansion-panel-body">
-    <div *ngFor="let child of item.children; trackBy: trackById" class="item">
+      <div *ngFor="let child of item.children; trackBy: trackById" class="aca-expansion-panel-item">
         <button
-        acaActiveLink="action-button--active"
+          acaActiveLink="aca-action-button--active"
           [action]="child"
           [attr.aria-label]="child.title | translate"
           [id]="child.id"
           [attr.data-automation-id]="child.id"
           [attr.title]="child.description | translate"
           mat-button
-        class="action-button full-width"
+          class="aca-action-button aca-full-width"
         >
           <adf-icon *ngIf="child.icon" [value]="child.icon"></adf-icon>
-        <span class="action-button__label">{{ child.title | translate }}</span>
+          <span class="aca-action-button__label">{{ child.title | translate }}</span>
         </button>
       </div>
+    </div>
   </mat-expansion-panel>
 </ng-container>

projects/aca-content/src/lib/components/sidenav/components/sidenav-header.component.html

@@ -1,6 +1,6 @@
-<div class="sidenav-header">
+<div class="aca-sidenav-header">
-  <div class="sidenav-header-title">
+  <div class="aca-sidenav-header-title">
-    <div class="sidenav-header-title-logo"
+    <div class="aca-sidenav-header-title-logo"
       tabindex=0
       (click)="toggleNavBar.emit()"
       (keypress)="toggleNavBar.emit()">
@@ -10,7 +10,7 @@
         alt="{{ 'CORE.HEADER.LOGO_ARIA' | translate }}" />
     </div>
 
-    <div class="sidenav-header-title-text" [routerLink]="landingPage">
+    <div class="aca-sidenav-header-title-text" [routerLink]="landingPage">
       {{ appName$ | async | translate }}
     </div>
 

projects/aca-content/src/lib/components/sidenav/sidenav.component.html

@@ -1,8 +1,8 @@
-<div class="sidenav">
+<div class="aca-sidenav">
     <app-sidenav-header (toggleNavBar)="toggleClick()"></app-sidenav-header>
 
-    <div class="section-sub-actions">
+    <div class="aca-sidenav__section">
-      <div *ngFor="let group of groups; trackBy: trackByGroupId" class="section">
+      <div *ngFor="let group of groups; trackBy: trackByGroupId" class="aca-sidenav__section__actions">
           <mat-list-item *ngFor="let item of group.items; trackBy: trackByLinkId">
             <ng-container *ngIf="!item.component">
               <app-expand-menu [item]="item"></app-expand-menu>

projects/aca-content/src/lib/components/sidenav/sidenav.component.scss

@@ -1,4 +1,4 @@
-.sidenav {
+.aca-sidenav {
   display: flex;
   flex: 1;
   flex-direction: column;
@@ -38,14 +38,10 @@
     }
   }
 
-  .section:last-child {
+  &__section {
-    border-bottom: 0;
-  }
-
-  .section-sub-actions {
     overflow-y: auto;
 
-    .mat-expansion-panel {
+    .aca-expansion-panel {
       width: 100%;
       background-color: unset;
       box-shadow: none;
@@ -56,52 +52,26 @@
         display: flex;
         align-items: center;
         border: none;
+
+        span::after {
+          transform: rotate(226deg);
         }
 
-      &-header-title {
+        &-title {
           display: flex;
           flex-direction: row;
 
-        .mat-button {
+          .aca-action-button__label {
-          line-height: 32px;
-          align-items: center;
-          border: none;
-        }
-
-        .action-button__label {
             font-size: var(--theme-caption-font-size);
           }
         }
-
-      &-body {
-        padding: 0 0 16px;
-        font-size: var(--theme-body-1-font-size);
-
-        .mat-button {
-          line-height: 32px;
-          align-items: center;
-
-          .mat-button-wrapper {
-            display: flex;
-          }
-        }
       }
 
-      .mat-expansion-indicator {
+      .aca-expansion-panel-header:hover {
-        display: flex;
-        align-content: center;
-      }
-
-      .mat-expansion-indicator::after {
-        transform: rotate(226deg);
-      }
-    }
-
-    .mat-expansion-panel-header:hover {
         background: var(--adf-theme-background-hover-color);
       }
 
-    .item {
+      &-item {
         flex-direction: row;
         display: flex;
         align-items: center;
@@ -109,27 +79,42 @@
         width: 100%;
         user-select: none;
 
-      &:hover .action-button__label {
+        &:hover .aca-action-button__label {
           color: var(--theme-selected-text-color);
         }
       }
 
-    .action-button {
+      &-body {
+        margin: 0 -24px 16px;
+        font-size: var(--theme-body-1-font-size);
+
+        button {
+          line-height: 32px;
+          align-items: center;
+        }
+      }
+    }
+
+    .aca-action-button {
       color: var(--theme-action-button-text-color);
       height: 32px;
       padding: 0 24px;
       border-radius: 0;
       line-height: 32px;
-    }
 
-    .full-width {
+      &--active {
-      display: flex;
-      width: 100%;
-    }
-
-    .action-button--active {
         color: var(--theme-selected-text-color);
         background: var(--theme-selected-background-color);
       }
     }
+
+    .aca-full-width {
+      display: flex;
+      width: 100%;
+    }
+
+    &__actions:last-child {
+      border-bottom: 0;
+    }
+  }
 }

projects/aca-content/src/lib/components/trashcan/trashcan.component.html

@@ -5,7 +5,7 @@
   </div>
 
   <div class="aca-page-layout-content">
-    <div class="main-content">
+    <div class="aca-main-content">
       <adf-document-list
         #documentList
         acaDocumentList

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

@@ -1,5 +1,5 @@
-<h2 mat-dialog-title [innerHTML]="title"></h2>
+<h2 mat-dialog-title [innerHTML]="title" class="app-create-from-template-title"></h2>
-<div mat-dialog-content>
+<div mat-dialog-content class="app-create-from-template-content">
   <form [formGroup]="form" novalidate>
     <mat-form-field class="app-create-from-template-field">
       <input
@@ -41,12 +41,12 @@
     </mat-form-field>
   </form>
 </div>
-<div mat-dialog-actions>
+<div mat-dialog-actions class="app-create-from-template-footer">
   <button mat-button mat-dialog-close data-automation-id="create-from-template-dialog-cancel-button">
     {{ 'NODE_FROM_TEMPLATE.CANCEL' | translate }}
   </button>
   <button
-    class="create"
+    class="app-create-from-template-footer-create-button"
     [disabled]="form.invalid"
     mat-button
     (click)="onSubmit()"

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

@@ -4,7 +4,8 @@ app-create-from-template-dialog {
   margin-left: -24px;
   margin-right: -24px;
 
-  .mat-dialog-title {
+  .app-create-from-template {
+    &-title {
       margin-left: 24px;
       margin-right: 24px;
       font-size: 20px;
@@ -22,7 +23,7 @@ app-create-from-template-dialog {
       }
     }
 
-  .app-create-from-template-field {
+    &-field {
       width: 100%;
 
       &:not(:last-of-type) {
@@ -30,12 +31,12 @@ app-create-from-template-dialog {
       }
     }
 
-  .mat-dialog-content {
+    &-content {
       margin: 0 2px;
       overflow: hidden;
     }
 
-  .mat-dialog-actions {
+    &-footer {
       padding: 8px 22px;
       display: flex;
       justify-content: flex-end;
@@ -46,12 +47,13 @@ app-create-from-template-dialog {
         font-weight: normal;
       }
 
-    .create[disabled] {
+      &-create-button[disabled] {
         opacity: 0.6;
       }
 
-    .create:enabled {
+      &-create-button:enabled {
         color: var(--theme-accent-color);
       }
     }
   }
+}

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

@@ -19,7 +19,7 @@ body {
   }
 }
 
-[dir='rtl'] .mat-icon {
+[dir='rtl'] mat-icon {
   transform: scale(-1, 1);
 }
 

projects/aca-content/src/lib/ui/overrides/adf-pagination.theme.scss

@@ -26,7 +26,7 @@
       .adf-pagination__actualinfo-block {
         padding-right: 12px;
 
-        .mat-menu-trigger {
+        button {
           display: none;
         }
       }

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

@@ -4,7 +4,7 @@
 @import 'variables/variables';
 @include custom-theme($custom-theme);
 
-.mat-toolbar {
+mat-toolbar {
   color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
 }
 
@@ -48,11 +48,6 @@ mat-toolbar.mat-toolbar.mat-toolbar-single-row {
   }
 }
 
-.mat-chip.mat-standard-chip {
-  background-color: #efefef;
-  color: var(--theme-contrast-gray);
-}
-
 .adf-property-field {
   .adf-textitem-edit-icon.mat-icon {
     color: var(--theme-contrast-gray);

projects/aca-content/viewer/src/lib/components/viewer/viewer.component.html

@@ -1,7 +1,7 @@
 <ng-container *ngIf="nodeId">
   <adf-alfresco-viewer
     [ngClass]="{
-      'right_side--hide': !showRightSide
+      'aca-right_side--hide': !showRightSide
     }"
     [maxRetries]="'viewer.maxRetries' | adfAppConfig"
     [nodeId]="nodeId"

projects/aca-content/viewer/src/lib/components/viewer/viewer.component.scss

@@ -17,11 +17,11 @@
   }
 
   // todo: remove this when viewer supports extensions
-  .adf-viewer-toolbar .mat-toolbar > button:last-child {
+  .adf-viewer-toolbar > * > button:last-child {
     display: none;
   }
 
-  .adf-alfresco-viewer.right_side--hide .adf-viewer__sidebar__right {
+  .adf-alfresco-viewer.aca-right_side--hide .adf-viewer__sidebar__right {
     width: 0;
   }
 }

projects/aca-playwright-shared/src/api/api-client-factory.ts

@@ -41,7 +41,6 @@ import {
   TrashcanApi,
   PersonEntry
 } from '@alfresco/js-api';
-import { logger } from '@alfresco/adf-cli/scripts/logger';
 import { ActionTypes, Rule } from './rules-api';
 import { users } from '../base-config';
 import { Person, PersonModel } from './people-api-models';
@@ -145,7 +144,7 @@ export class ApiClientFactory {
     try {
       e = await this.alfrescoApi.login(user, userPassword);
     } catch (error) {
-      logger.error(`[API Client Factory] Log in user ${user} failed ${e}`);
+      console.error(`[API Client Factory] Log in user ${user} failed ${e}`);
       throw error;
     }
   }
@@ -155,7 +154,7 @@ export class ApiClientFactory {
     try {
       e = await this.alfrescoApi.login(user.username, user.password);
     } catch (error) {
-      logger.error(`[API Client Factory] Log in user ${user.username} failed ${e}`);
+      console.error(`[API Client Factory] Log in user ${user.username} failed ${e}`);
       throw error;
     }
   }
@@ -167,7 +166,7 @@ export class ApiClientFactory {
     try {
       return peopleApi.createPerson(person);
     } catch (error) {
-      logger.error('[API Client Factory] createUser failed : ', error);
+      console.error('[API Client Factory] createUser failed : ', error);
       return null;
     }
   }
@@ -178,7 +177,7 @@ export class ApiClientFactory {
     try {
       return peopleApi.updatePerson(username, { password: newPassword });
     } catch (error) {
-      logger.error('[API Client Factory] changePassword failed : ', error);
+      console.error('[API Client Factory] changePassword failed : ', error);
       return null;
     }
   }

projects/aca-playwright-shared/src/api/nodes-api.ts

@@ -24,7 +24,6 @@
 
 import { ApiClientFactory } from './api-client-factory';
 import { NodeChildAssociationPaging, NodeEntry, NodePaging } from '@alfresco/js-api';
-import { logger } from '@alfresco/adf-cli/scripts/logger';
 import { NodeContentTree, flattenNodeContentTree } from './node-content-tree';
 
 export class NodesApi {
@@ -51,7 +50,7 @@ export class NodesApi {
     try {
       return await this.createNode('cm:folder', name, parentId, title, description, null, author, null, aspectNames);
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.createFolder.name}`, error);
+      console.error(`${this.constructor.name} ${this.createFolder.name}`, error);
       return null;
     }
   }
@@ -68,7 +67,7 @@ export class NodesApi {
     try {
       return await this.createNode('cm:content', name, parentId, title, description, null, author, majorVersion, aspectNames);
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.createFile.name}`, error);
+      console.error(`${this.constructor.name} ${this.createFile.name}`, error);
       return null;
     }
   }
@@ -77,7 +76,7 @@ export class NodesApi {
     try {
       return await this.createContent({ files: names }, relativePath);
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.createFiles.name}: ${error}`);
+      console.error(`${this.constructor.name} ${this.createFiles.name}: ${error}`);
       return null;
     }
   }
@@ -116,7 +115,7 @@ export class NodesApi {
         majorVersion
       });
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.createNode.name}`, error);
+      console.error(`${this.constructor.name} ${this.createNode.name}`, error);
       return null;
     }
   }
@@ -125,7 +124,7 @@ export class NodesApi {
     try {
       return this.apiService.nodes.updateNode(nodeId, { name: newName });
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.renameNode.name}`, error);
+      console.error(`${this.constructor.name} ${this.renameNode.name}`, error);
       return null;
     }
   }
@@ -141,7 +140,7 @@ export class NodesApi {
         await this.apiService.nodes.deleteNode(nodeId, { permanent });
       }
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.deleteNodes.name}`, error);
+      console.error(`${this.constructor.name} ${this.deleteNodes.name}`, error);
     }
   }
 
@@ -155,7 +154,7 @@ export class NodesApi {
       const userNodesIds = userNodes.map((nodeChild) => nodeChild.entry.id);
       await this.deleteNodes(userNodesIds);
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.deleteCurrentUserNodes.name}`, error);
+      console.error(`${this.constructor.name} ${this.deleteCurrentUserNodes.name}`, error);
     }
   }
 
@@ -165,7 +164,7 @@ export class NodesApi {
         await this.apiService.nodes.lockNode(nodeId, { type: lockType });
       }
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.lockNodes.name}`, error);
+      console.error(`${this.constructor.name} ${this.lockNodes.name}`, error);
     }
   }
 
@@ -173,7 +172,7 @@ export class NodesApi {
     try {
       return await this.apiService.nodes.createNode('-my-', flattenNodeContentTree(content, relativePath) as any);
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.createContent.name}`, error);
+      console.error(`${this.constructor.name} ${this.createContent.name}`, error);
       return null;
     }
   }
@@ -182,7 +181,7 @@ export class NodesApi {
     try {
       return await this.apiService.nodes.getNode(id);
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.getNodeById.name}`, error);
+      console.error(`${this.constructor.name} ${this.getNodeById.name}`, error);
       return null;
     }
   }
@@ -192,7 +191,7 @@ export class NodesApi {
       const children = (await this.getNodeChildren(parentId)).list.entries;
       return children.find((elem) => elem.entry.name === name).entry.id || '';
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.getNodeIdFromParent.name}`, error);
+      console.error(`${this.constructor.name} ${this.getNodeIdFromParent.name}`, error);
       return '';
     }
   }
@@ -204,7 +203,7 @@ export class NodesApi {
       };
       return await this.apiService.nodes.listNodeChildren(nodeId, opts);
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.getNodeChildren.name}`, error);
+      console.error(`${this.constructor.name} ${this.getNodeChildren.name}`, error);
       return null;
     }
   }
@@ -213,7 +212,7 @@ export class NodesApi {
     try {
       await this.apiService.nodes.deleteNode(id, { permanent });
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.deleteNodeById.name}`, error);
+      console.error(`${this.constructor.name} ${this.deleteNodeById.name}`, error);
     }
   }
 
@@ -225,7 +224,7 @@ export class NodesApi {
         await this.deleteNodeById(nodeId);
       }
     } catch (error) {
-      logger.error('Admin Actions - cleanupNodeTemplatesItems failed : ', error);
+      console.error('Admin Actions - cleanupNodeTemplatesItems failed : ', error);
     }
   }
 
@@ -237,7 +236,7 @@ export class NodesApi {
         await this.deleteNodeById(nodeId);
       }
     } catch (error) {
-      logger.error('Admin Actions - cleanupSpaceTemplatesFolder failed : ', error);
+      console.error('Admin Actions - cleanupSpaceTemplatesFolder failed : ', error);
     }
   }
 
@@ -245,7 +244,7 @@ export class NodesApi {
     try {
       return this.getNodeIdFromParent('Node Templates', await this.getDataDictionaryId());
     } catch (error) {
-      logger.error('Admin Actions - getNodeTemplatesFolderId failed : ', error);
+      console.error('Admin Actions - getNodeTemplatesFolderId failed : ', error);
       return '';
     }
   }
@@ -254,14 +253,14 @@ export class NodesApi {
     try {
       return this.getNodeIdFromParent('Space Templates', await this.getDataDictionaryId());
     } catch (error) {
-      logger.error('Admin Actions - getSpaceTemplatesFolderId failed : ', error);
+      console.error('Admin Actions - getSpaceTemplatesFolderId failed : ', error);
       return '';
     }
   }
 
   private async getDataDictionaryId(): Promise<string> {
     return this.getNodeIdFromParent('Data Dictionary', '-root-').catch((error) => {
-      logger.error('Admin Actions - getDataDictionaryId failed : ', error);
+      console.error('Admin Actions - getDataDictionaryId failed : ', error);
       return '';
     });
   }
@@ -282,7 +281,7 @@ export class NodesApi {
     try {
       return await this.apiService.nodes.updateNode(nodeId, data);
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.setGranularPermission.name}`, error);
+      console.error(`${this.constructor.name} ${this.setGranularPermission.name}`, error);
       return null;
     }
   }
@@ -294,7 +293,7 @@ export class NodesApi {
 
       return this.setInheritPermissions(nodeId, false);
     } catch (error) {
-      logger.error('Admin Actions - removeUserAccessOnNodeTemplate failed : ', error);
+      console.error('Admin Actions - removeUserAccessOnNodeTemplate failed : ', error);
       return null;
     }
   }
@@ -306,7 +305,7 @@ export class NodesApi {
 
       return this.setInheritPermissions(nodeId, false);
     } catch (error) {
-      logger.error('Admin Actions - removeUserAccessOnSpaceTemplate failed : ', error);
+      console.error('Admin Actions - removeUserAccessOnSpaceTemplate failed : ', error);
       return null;
     }
   }
@@ -321,7 +320,7 @@ export class NodesApi {
     try {
       return await this.apiService.nodes.updateNode(nodeId, data);
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.setInheritPermissions.name}`, error);
+      console.error(`${this.constructor.name} ${this.setInheritPermissions.name}`, error);
       return null;
     }
   }
@@ -330,7 +329,7 @@ export class NodesApi {
     try {
       return this.apiService.nodes.updateNode(nodeId, { aspectNames });
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.addAspects.name}`, error);
+      console.error(`${this.constructor.name} ${this.addAspects.name}`, error);
       return null;
     }
   }
@@ -350,7 +349,7 @@ export class NodesApi {
       await this.addAspects(originalNodeId, ['app:linked']);
       return link;
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.createFileLink.name}`, error);
+      console.error(`${this.constructor.name} ${this.createFileLink.name}`, error);
       return null;
     }
   }
@@ -373,7 +372,7 @@ export class NodesApi {
       await this.addAspects(originalNodeId, ['app:linked']);
       return link;
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.createFolderLink.name}`, error);
+      console.error(`${this.constructor.name} ${this.createFolderLink.name}`, error);
       return null;
     }
   }
@@ -386,7 +385,7 @@ export class NodesApi {
 
       return this.createFileLink(nodeId, destinationParentId);
     } catch (error) {
-      logger.error('Admin Actions - createLinkToFileName failed : ', error);
+      console.error('Admin Actions - createLinkToFileName failed : ', error);
       return null;
     }
   }
@@ -398,7 +397,7 @@ export class NodesApi {
       const nodeId = await this.getNodeIdFromParent(originalFolderName, originalFolderParentId);
       return this.createFolderLink(nodeId, destinationParentId);
     } catch (error) {
-      logger.error('Admin Actions - createLinkToFolderName failed : ', error);
+      console.error('Admin Actions - createLinkToFolderName failed : ', error);
       return null;
     }
   }

projects/aca-playwright-shared/src/api/shared-links-api.ts

@@ -22,7 +22,6 @@
  * along with Alfresco. If not, see <http://www.gnu.org/licenses/>.
  */
 
-import { logger } from '@alfresco/adf-cli/scripts/logger';
 import { ApiClientFactory } from './api-client-factory';
 import { SharedLinkEntry, SharedLinkPaging } from '@alfresco/js-api';
 import { Utils } from '../utils';
@@ -61,7 +60,7 @@ export class SharedLinksApi {
         }
       }
     } catch (error) {
-      logger.error(`SharedLinksApi shareFilesByIds : catch : `, error);
+      console.error(`SharedLinksApi shareFilesByIds : catch : `, error);
     }
     return sharedLinks;
   }
@@ -73,7 +72,7 @@ export class SharedLinksApi {
       };
       return await this.apiService.share.listSharedLinks(opts);
     } catch (error) {
-      logger.error(`SharedLinksApi getSharedLinks : catch : `, error);
+      console.error(`SharedLinksApi getSharedLinks : catch : `, error);
       return new SharedLinkPaging;
     }
   }
@@ -92,8 +91,8 @@ export class SharedLinksApi {
 
       return Utils.retryCall(sharedFile);
     } catch (error) {
-      logger.error(`SharedLinksApi waitForFilesToBeShared :  catch : ${error}`);
+      console.error(`SharedLinksApi waitForFilesToBeShared :  catch : ${error}`);
-      logger.error(`\tWait timeout reached waiting for files to be shared`);
+      console.error(`\tWait timeout reached waiting for files to be shared`);
     }
   }
 }

projects/aca-playwright-shared/src/api/sites-api.ts

@@ -24,7 +24,6 @@
 
 import { ApiClientFactory } from './api-client-factory';
 import { Site, SiteBodyCreate, SiteEntry, SiteMemberEntry, SiteMembershipBodyCreate, SiteMembershipBodyUpdate } from '@alfresco/js-api';
-import { logger } from '@alfresco/adf-cli/scripts/logger';
 
 export class SitesApi {
   private apiService: ApiClientFactory;
@@ -49,7 +48,7 @@ export class SitesApi {
     try {
       return await this.apiService.sites.createSite(site);
     } catch (error) {
-      logger.error(`SitesApi createSite : catch : `, error);
+      console.error(`SitesApi createSite : catch : `, error);
       return null;
     }
   }
@@ -58,7 +57,7 @@ export class SitesApi {
     try {
       return (await this.apiService.sites.listSiteContainers(siteId)).list.entries[0].entry.id;
     } catch (error) {
-      logger.error(`SitesApi getDocLibId : catch : `, error);
+      console.error(`SitesApi getDocLibId : catch : `, error);
       return null;
     }
   }
@@ -76,7 +75,7 @@ export class SitesApi {
         }
       }
     } catch (error) {
-      logger.error(`${this.constructor.name} ${this.deleteSites.name}`, error);
+      console.error(`${this.constructor.name} ${this.deleteSites.name}`, error);
     }
   }
 
@@ -88,7 +87,7 @@ export class SitesApi {
     try {
       return await this.apiService.sites.updateSiteMembership(siteId, userId, siteRole);
     } catch (error) {
-      logger.error(`SitesApi updateSiteMember : catch : `, error);
+      console.error(`SitesApi updateSiteMember : catch : `, error);
       return new SiteMemberEntry;
     }
   }
@@ -105,7 +104,7 @@ export class SitesApi {
       if (error.status === 409) {
         return this.updateSiteMember(siteId, userId, role);
       } else {
-        logger.error(`SitesApi addSiteMember : catch : `, error);
+        console.error(`SitesApi addSiteMember : catch : `, error);
         return new SiteMemberEntry;
       }
     }

projects/aca-playwright-shared/src/api/trashcan-api.ts

@@ -23,7 +23,6 @@
  */
 
 import { ApiClientFactory } from './api-client-factory';
-import { logger } from '@alfresco/adf-cli/scripts/logger';
 
 export class TrashcanApi {
   private apiService = new ApiClientFactory();
@@ -51,7 +50,7 @@ export class TrashcanApi {
           }
         }
       } catch (error) {
-        logger.error('User Actions - emptyTrashcan failed : ', error);
+        console.error('User Actions - emptyTrashcan failed : ', error);
       }
     }
 

projects/aca-playwright-shared/src/page-objects/components/sidenav.component.ts

@@ -37,7 +37,7 @@ export class SidenavComponent extends BaseComponent {
   private recentFiles = this.getChild(`[data-automation-id='app.navbar.recentFiles']`);
   private favorites = this.getChild(`[data-automation-id='app.navbar.favorites']`);
   private trash = this.getChild(`[data-automation-id='app.navbar.trashcan']`);
-  private sidenavToggle = this.getChild(`.sidenav-header-title-logo`);
+  private sidenavToggle = this.getChild(`.aca-sidenav-header-title-logo`);
   private sidenavExpand = this.page.getByTitle('Expand navigation menu');
   public expandedSidenav = this.page.locator(`[data-automation-id='expanded']`);
 

projects/aca-playwright-shared/src/utils/exclude-tests.ts

@@ -6,16 +6,14 @@
  * agreement is prohibited.
  */
 
-import { logger } from '@alfresco/adf-cli/scripts/logger';
-
 export const getExcludedTestsRegExpArray = (excludedJson: any, projectName: string) => {
     const prefix = `[ 🎭 Playwright Excludes - ${projectName} ]`;
     const objectKeys = Object.keys(excludedJson);
 
     if (!objectKeys.length) {
-        logger.info(`${prefix} ✅ No excluded tests 🎉 `);
+        console.info(`${prefix} ✅ No excluded tests 🎉 `);
     } else {
-        logger.warn(`${prefix} ❌ Tests excluded because of 🐛 : ${objectKeys}`);
+        console.warn(`${prefix} ❌ Tests excluded because of 🐛 : ${objectKeys}`);
     }
 
     return objectKeys.map((key) => new RegExp(key));

projects/aca-shared/src/lib/components/locked-by/locked-by.component.scss

@@ -3,14 +3,14 @@
   align-items: center;
   color: var(--theme-text-color, rgba(0, 0, 0, 0.54));
 
-  .locked_by--icon {
+  &--icon {
     font-size: 14px;
     width: 14px;
     height: 14px;
   }
 
-  .locked_by--label,
+  &--label,
-  .locked_by--name {
+  &--name {
     font-size: 12px;
     padding: 0 2px;
   }

projects/aca-shared/src/lib/components/locked-by/locked-by.component.ts

@@ -32,9 +32,9 @@ import { MatIconModule } from '@angular/material/icon';
   imports: [TranslateModule, MatIconModule],
   selector: 'aca-locked-by',
   template: `
-    <mat-icon class="locked_by--icon">lock</mat-icon>
+    <mat-icon class="aca-locked-by--icon">lock</mat-icon>
-    <span class="locked_by--label">{{ 'APP.LOCKED_BY' | translate }}</span>
+    <span class="aca-locked-by--label">{{ 'APP.LOCKED_BY' | translate }}</span>
-    <span class="locked_by--name">{{ text }}</span>
+    <span class="aca-locked-by--name">{{ text }}</span>
   `,
   styleUrls: ['./locked-by.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,

projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.html

@@ -1,18 +1,18 @@
-<div class="alfresco-mobile-application-container">
+<div class="aca-mobile-application-container">
   <span>{{ 'APP.DIALOGS.MOBILE_APP.OPEN_ALFRESCO_MOBILE_APP' | translate }}</span>
-  <button mat-button class="cross-button" (click)="onCloseDialog()">
+  <button mat-button class="aca-cross-button" (click)="onCloseDialog()">
-    <mat-icon class="cross-icon">close</mat-icon>
+    <mat-icon class="aca-cross-button-icon">close</mat-icon>
   </button>
 </div>
 
-<div class="open-in-app-container">
+<div class="aca-open-in-app-container">
-  <button mat-button (click)="openInApp()" data-automation-id="open-in-app-button" class="open-in-app" cdkFocusInitial>
+  <button mat-button (click)="openInApp()" data-automation-id="open-in-app-button" class="aca-open-in-app-container-button" cdkFocusInitial>
     <span>{{ 'APP.DIALOGS.MOBILE_APP.MOBILE_APP_BUTTON_LABEL' | translate }}</span>
   </button>
 </div>
 
-<div class="download-app-container" *ngIf="appStoreUrl">
+<div class="aca-download-app-container" *ngIf="appStoreUrl">
-  <button mat-button data-automation-id="download-app-button" class="download-app-button" (click)="downloadIosApp()">
+  <button mat-button data-automation-id="download-app-button" class="aca-download-app-container-button" (click)="downloadIosApp()">
     <span>{{ 'APP.DIALOGS.MOBILE_APP.DOWNLOAD_APP_BUTTON_LABEL' | translate }}</span>
   </button>
 </div>

projects/aca-shared/src/lib/components/open-in-app/open-in-app.component.scss

@@ -1,5 +1,5 @@
 aca-open-in-app {
-  .open-in-app-container {
+  .aca-open-in-app-container {
     display: flex;
     place-content: center;
     padding: 0;
@@ -7,9 +7,8 @@ aca-open-in-app {
     background-color: var(--theme-primary-color);
     color: var(--theme-about-panel-background-color);
     margin-top: 12px;
-  }
 
-  .open-in-app {
+    &-button {
       overflow-x: hidden;
       font-size: 16px;
       width: 100%;
@@ -21,14 +20,21 @@ aca-open-in-app {
         border-radius: unset;
       }
     }
+  }
 
-  .download-app-container {
+  .aca-download-app-container {
     display: flex;
     place-content: center;
     margin-top: 12px;
+
+    &-button {
+      background: var(--theme-dialog-background-color);
+      color: var(--theme-primary-color);
+      font-size: 14px;
+    }
   }
 
-  .alfresco-mobile-application-container {
+  .aca-mobile-application-container {
     display: flex;
     flex-direction: row;
     justify-content: space-between;
@@ -37,28 +43,18 @@ aca-open-in-app {
     padding: 6px 0;
   }
 
-  .cross-button {
+  .aca-cross-button {
     padding-right: 0;
 
     &:focus-visible {
       outline: none;
       border-radius: unset;
     }
-  }
 
-  .cross-icon {
+    &-icon {
       font-weight: bold;
       font-size: 21px;
       height: 21px;
     }
-
-  .download-app-button {
-    background: var(--theme-dialog-background-color);
-    color: var(--theme-primary-color);
-    font-size: 14px;
-  }
-
-  .mat-dialog-container {
-    padding: 8px 24px 24px;
   }
 }

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

@@ -35,6 +35,6 @@ import { Component, ViewEncapsulation, ChangeDetectionStrategy, Input, HostBindi
 })
 export class PageLayoutContentComponent {
   @Input()
-  @HostBinding('class.scrollable')
+  @HostBinding('class.aca-scrollable')
   scrollable = false;
 }

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

@@ -24,7 +24,7 @@
     }
 
     .aca-toolbar-action {
-      .mat-button-base {
+      button {
         display: flex;
         justify-content: center;
         align-items: center;
@@ -43,27 +43,27 @@
     @include flex-row;
   }
 
-  .main-content {
+  .aca-main-content {
     @include flex-column;
   }
 
-  .scrollable {
+  .aca-scrollable {
     overflow: auto;
 
-    .main-content {
+    .aca-main-content {
       overflow: auto;
     }
   }
 }
 
 [dir='rtl'] .aca-page-layout {
-  .main-content {
+  .aca-main-content {
     border-left: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.07));
   }
 }
 
 [dir='ltr'] .aca-page-layout {
-  .main-content {
+  .aca-main-content {
     border-right: 1px solid var(--theme-border-color, rgba(0, 0, 0, 0.07));
   }
 }

projects/aca-shared/src/lib/components/page-layout/page-layout.md

@@ -56,13 +56,13 @@ Displayed only when an error is detected by the parent container component.
 ## Layout Content
 
 You can provide any Angular component or HTML element as the main content.
-In addition, you can use `scrollable` class to make the content scroll.
+In addition, you can use `aca-scrollable` class to make the content scroll.
 
 The content is displayed only when there are no errors detected.
 
 ```html
 <aca-page-layout>
-  <div class="aca-page-layout-content scrollable">
+  <div class="aca-page-layout-content aca-scrollable">
     <!-- Main Content -->
   </div>
 </aca-page-layout>

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

@@ -1,4 +1,4 @@
-<mat-toolbar>
+<mat-toolbar class="aca-toolbar">
   <ng-container *ngFor="let item of items; trackBy: trackByActionId">
     <aca-toolbar-action [actionRef]="item"></aca-toolbar-action>
   </ng-container>

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

@@ -1,5 +1,5 @@
 aca-toolbar {
-  .mat-toolbar {
+  .aca-toolbar {
     min-height: 48px;
     color: var(--adf-theme-foreground-text-color-054);
     background-color: inherit;
@@ -7,16 +7,6 @@ aca-toolbar {
     padding: 0;
   }
 
-  .mat-toolbar-row {
-    height: 48px;
-    font-size: var(--theme-body-1-font-size);
-    white-space: normal;
-  }
-
-  .mat-toolbar-single-row {
-    height: 64px;
-  }
-
   .aca-toolbar-divider {
     height: 24px;
     width: 1px;

projects/aca-testing-shared/src/components/data-table/data-table.ts

@@ -213,7 +213,7 @@ export class DataTable extends Component {
   async getLockOwner(itemName: string, location: string = ''): Promise<string> {
     if (await this.hasLockOwnerInfo(itemName, location)) {
       const row = this.getRowByName(itemName, location);
-      return row.$(DataTable.selectors.lockOwner).$('.locked_by--name').getText();
+      return row.$(DataTable.selectors.lockOwner).$('.aca-locked-by--name').getText();
     }
     return '';
   }
@@ -425,7 +425,7 @@ export class DataTable extends Component {
   }
 
   private getSearchResultNameLink(itemName: string, location: string = ''): ElementFinder {
-    return this.getSearchResultsRowByName(itemName, location).$('.link');
+    return this.getSearchResultsRowByName(itemName, location).$('.aca-link');
   }
 
   async hasLinkOnSearchResultName(itemName: string, location: string = ''): Promise<boolean> {

projects/aca-testing-shared/src/components/header/header.ts

@@ -32,7 +32,7 @@ import { BrowserActions } from '@alfresco/adf-testing';
 
 export class Header extends Component {
   userMenuButton = this.byCss(`.aca-user-menu-button`);
-  sidenavToggle = this.byCss(`.sidenav-header-title-logo`);
+  sidenavToggle = this.byCss(`.aca-sidenav-header-title-logo`);
 
   menu = new Menu();
   toolbar = new Toolbar();

projects/aca-testing-shared/src/components/info-drawer/info-drawer.ts

@@ -42,7 +42,7 @@ export class InfoDrawer extends Component {
   tabActiveContent = this.byCss('.mat-tab-body-active .mat-tab-body-content adf-dynamic-tab');
   expandDetailsButton = TestElement.byCss(`button[title='Expand']`);
   selectedTab = TestElement.byCss(`.mat-tab-list [aria-selected='true'] div`);
-  expandedDetailsPermissionsTab = TestElement.byText('.acs-details-container .mat-tab-label-content', 'Permissions');
+  expandedDetailsPermissionsTab = TestElement.byText('.aca-details-container .mat-tab-label-content', 'Permissions');
   previewButton = TestElement.byCss(`button[title='Preview File']`);
   toolbar = new Toolbar('adf-info-drawer');
 

projects/aca-testing-shared/src/components/sidenav/sidenav.ts

@@ -39,7 +39,7 @@ export class Sidenav extends Component {
   recentFiles = this.byCss(`[data-automation-id='app.navbar.recentFiles']`);
   favorites = this.byCss(`[data-automation-id='app.navbar.favorites']`);
   trash = this.byCss(`[data-automation-id='app.navbar.trashcan']`);
-  sidenavToggle = this.byCss(`.sidenav-header-title-logo`);
+  sidenavToggle = this.byCss(`.aca-sidenav-header-title-logo`);
 
   menu: Menu = new Menu();