[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

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 {
-      width: 280px;
+    adf-card-view .adf-property-list .adf-property adf-card-view-item-dispatcher adf-card-view-textitem {
+      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 {
-          width: 100%;
-          max-width: 400px;
-          font-size: inherit;
+      &__field {
+        width: 100%;
+        max-width: 400px;
+        margin-top: -11px;
+        font-size: inherit;
 
-          .mat-form-field-infix {
-            border: none;
-          }
+        &__textarea {
+          min-height: 4em;
         }
       }
     }
@@ -55,17 +56,13 @@
     &__conditions {
       width: 100%;
 
-      & > .rule-details-error {
+      & > .aca-rule-details-error {
         margin-left: 16px;
         color: inherit;
       }
     }
 
-    textarea {
-      min-height: 4em;
-    }
-
-    .rule-details-error {
+    .aca-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 {
-    background: var(--theme-selected-button-bg-color);
+  &.aca-selected {
+    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;
       }