[ACS-6140] - Remove references to internal Angular Material CSS classes

Alfresco · Feb 9, 2024 · 4a5cc24 · 4a5cc24
1 parent e4dade1
commit 4a5cc24
Show file tree

Hide file tree

Showing 19 changed files with 44 additions and 47 deletions.
diff --git a/.stylelintrc.json b/.stylelintrc.json
@@ -5,7 +5,7 @@
     "alpha-value-notation": "number",
     "function-name-case": "lower",
     "selector-class-pattern": [
-      "^_?(adf|adf-|aca-|app|app-|cdk-||mat-|material-)",
+      "^_?(adf|adf-|aca-|app|app-)",
       {
         "resolveNestedSelectors": true
       }

diff --git a/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.html b/projects/aca-content/folder-rules/src/manage-rules/manage-rules.smart-component.html
@@ -108,7 +108,6 @@ <h2 class="aca-page-title">{{ (folderInfo$ | async).name }}:{{'ACA_FOLDER_RULES.
                 <aca-rule-details
                   [actionDefinitions]="actionDefinitions$ | async"
                   [parameterConstraints]="parameterConstraints$ | async"
-                  [readOnly]="true"
                   [preview]="true"
                   [value]="selectedRule"
                   [nodeId]="nodeId">

diff --git a/...-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html b/...-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]="{ 'aca-hidden': isComparatorHidden }" data-automation-id="comparator-form-field">
+  <mat-form-field class="aca-rule-simple-condition__form__field-input 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"
@@ -21,7 +21,7 @@
     </mat-select>
   </mat-form-field>
 
-  <mat-form-field class="aca-rule-simple-condition__form__parameter-input" [ngSwitch]="selectedField.type">
+  <mat-form-field class="aca-rule-simple-condition__form__field-input aca-rule-simple-condition__form__parameter-input" [ngSwitch]="selectedField.type">
     <mat-select formControlName="parameter" data-automation-id="simple-condition-value-select" *ngSwitchCase="'mimeType'">
       <mat-option *ngFor="let mimeType of mimeTypes"
         [value]="mimeType.value">

diff --git a/...-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.scss b/...-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.scss
@@ -4,7 +4,7 @@
     flex-direction: row;
     gap: 8px;
 
-    mat-form-field {
+    .aca-rule-simple-condition__form__field-input {
       flex: 2;
       font-size: inherit;
     }

diff --git a/projects/aca-content/folder-rules/src/rule-details/edit-rule-dialog.ui-component.html b/projects/aca-content/folder-rules/src/rule-details/edit-rule-dialog.ui-component.html
@@ -3,7 +3,7 @@
     {{ title | translate }}
   </div>
   <button mat-icon-button mat-dialog-close class="aca-edit-rule-dialog__header__close" tabindex="-1">
-    <mat-icon>close</mat-icon>
+    <mat-icon class="aca-edit-rule-dialog__header__icon">close</mat-icon>
   </button>
 </div>
 

diff --git a/projects/aca-content/folder-rules/src/rule-details/edit-rule-dialog.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/edit-rule-dialog.ui-component.scss
@@ -20,7 +20,7 @@
     }
 
     &__close {
-      & mat-icon {
+      & .aca-edit-rule-dialog__header__icon {
         font-size: 18px;
       }
     }

diff --git a/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss b/projects/aca-content/folder-rules/src/rule-details/rule-details.ui-component.scss
@@ -73,6 +73,7 @@
       }
     }
 
+    /* stylelint-disable selector-class-pattern */
     &.aca-read-only,
     .mat-form-field-disabled {
       .mat-form-field-underline,

diff --git a/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.html b/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.html
@@ -13,7 +13,7 @@
 
     <span class="aca-rule-list__item__header__title">
       {{ 'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES' | 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">
+      <mat-icon class="aca-rule-list__item__header__title__icon" [matTooltip]="'ACA_FOLDER_RULES.RULE_LIST.INHERITED_RULES_WILL_BE_RUN_FIRST' | translate">
         info
       </mat-icon>
     </span>

diff --git a/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.scss b/projects/aca-content/folder-rules/src/rule-list/rule-list/rule-list.ui-component.scss
@@ -35,7 +35,7 @@
         justify-content: flex-start;
         flex: 1;
 
-        &__mat-icon {
+        &__icon {
           transform: scale(0.8);
         }
       }

diff --git a/projects/aca-content/src/lib/components/details/details.component.html b/projects/aca-content/src/lib/components/details/details.component.html
@@ -12,7 +12,7 @@
             <img class="aca-details-breadcrumb-icon" alt="{{ 'APP.INFO_DRAWER.ICON' | translate }}" src="{{ nodeIcon }}">
             {{ node.name }} </span>
         </div>
-        <div class="acs-details-buttons">
+        <div class="aca-details-buttons">
           <aca-toolbar [items]="aspectActions" info-drawer-buttons></aca-toolbar>
           <button
                 class="aca-close-details-button"

diff --git a/projects/aca-content/src/lib/components/details/details.component.scss b/projects/aca-content/src/lib/components/details/details.component.scss
@@ -1,5 +1,5 @@
 app-details-manager {
-  .acs-details-buttons {
+  .aca-details-buttons {
     display: flex;
 
     .aca-close-details-button {
@@ -26,21 +26,19 @@ app-details-manager {
   margin-top: 40px;
   height: calc(100% - 136px);
 
-  .mat-tab-body-wrapper {
+  > div {
     height: 100%;
   }
 
-  .mat-tab-list {
-    margin-left: 50px;
-
-    .mat-tab-labels {
-      .mat-tab-label {
-        padding: 0 12px;
-        min-width: 95px;
-        letter-spacing: 0.25px;
-        height: 32px;
-      }
+  div[role='tab'] {
+    &:first-of-type {
+      margin-left: 50px;
     }
+
+    padding: 0 12px;
+    min-width: 95px;
+    letter-spacing: 0.25px;
+    height: 32px;
   }
 }
 

diff --git a/...ontent/src/lib/components/search/search-input-control/search-input-control.component.html b/...ontent/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 class="app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
+    <mat-icon class="app-search-input-control-icon app-search-button-icon" [attr.aria-label]="'SEARCH.BUTTON.ARIA-LABEL' | translate">search</mat-icon>
   </button>
   <mat-form-field class="app-input-form-field" [floatLabel]="'never'">
     <input
@@ -23,7 +23,7 @@
       autocomplete="off"
     />
     <div matSuffix class="app-suffix-search-icon-wrapper">
-      <mat-icon *ngIf="searchTerm.length" (click)="clear()" class="app-clear-icon">clear</mat-icon>
+      <mat-icon *ngIf="searchTerm.length" (click)="clear()" class="app-search-input-control-icon app-clear-icon">clear</mat-icon>
     </div>
   </mat-form-field>
 </div>
diff --git a/...ontent/src/lib/components/search/search-input-control/search-input-control.component.scss b/...ontent/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 {
+  .app-search-input-control-icon {
     font-size: 24px;
     cursor: pointer;
   }
@@ -24,16 +24,13 @@ $top-margin: 12px;
   box-sizing: border-box;
   margin-bottom: 12px;
 
+  /* stylelint-disable-next-line selector-class-pattern */
   .mat-form-field-underline {
     display: none;
   }
 
-  .mat-form-field-label-wrapper {
+  label {
     cursor: text;
-  }
-
-  // fixes pointer event on FF
-  &.app-search-menu-trigger .mat-form-field-label-wrapper {
     pointer-events: auto;
   }
 

diff --git a/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss b/projects/aca-content/src/lib/components/search/search-input/search-input.component.scss
@@ -78,24 +78,26 @@ $top-margin: 12px;
   letter-spacing: -0.7px;
   margin-bottom: -8px;
 
+  .app-search-options-checkbox label {
+    max-width: 155px;
+  }
+
   &-checkbox {
     padding: 3px 24px 3px 19px;
 
+    /* stylelint-disable-next-line selector-class-pattern */
     .mat-checkbox-inner-container {
       height: 18px;
       width: 18px;
     }
 
-    .mat-checkbox-label {
+    /* stylelint-disable-next-line no-descending-specificity */
+    label {
       padding: 0 0 0 11px;
       overflow: hidden;
       text-overflow: ellipsis;
     }
   }
-
-  .app-search-options-checkbox label {
-    max-width: 155px;
-  }
 }
 
 .app-search-hint {
@@ -122,17 +124,17 @@ $top-margin: 12px;
   #search-options {
     padding-left: 20px;
 
-    mat-checkbox {
+    label {
+      max-width: 105px;
+    }
+
+    .app-search-options-checkbox {
       padding: 3px 20px 3px 0;
 
-      .mat-checkbox-label {
+      label {
         padding: 0;
       }
     }
-
-    label {
-      max-width: 105px;
-    }
   }
 }
 

diff --git a/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss b/projects/aca-content/src/lib/components/search/search-results/search-results.component.scss
@@ -46,7 +46,7 @@ aca-search-results {
           color: var(--theme-search-chip-icon-color);
         }
 
-        mat-icon {
+        .adf-search-filter-chip-icon {
           color: var(--theme-search-chip-icon-color);
         }
       }

diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.html b/projects/aca-content/src/lib/components/view-profile/view-profile.component.html
@@ -27,7 +27,7 @@ <h4 class="app-general-title">{{'APP.EDIT_PROFILE.GENERAL' | translate}}</h4>
           (click)="onSaveGeneralData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</button>
       </div>
     </div>
-    <mat-divider class="app-mat-divider" *ngIf="generalSectionDropdown"></mat-divider>
+    <mat-divider class="app-divider" *ngIf="generalSectionDropdown"></mat-divider>
     <div *ngIf="generalSectionDropdown">
       <div class="app-general-dropdown">
         <div class="app-general-dropdown-details">
@@ -96,7 +96,7 @@ <h4 class="app-general-title">{{'APP.EDIT_PROFILE.COMPANY_DETAILS' | translate}}
           (click)="onSaveCompanyData(profileForm)">{{'APP.EDIT_PROFILE.SAVE' | translate}}</button>
       </div>
     </div>
-    <mat-divider class="app-mat-divider" *ngIf="contactSectionDropdown"></mat-divider>
+    <mat-divider class="app-divider" *ngIf="contactSectionDropdown"></mat-divider>
     <div *ngIf="contactSectionDropdown">
       <div class="app-general-dropdown">
         <div class="app-general-dropdown-details">

diff --git a/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss b/projects/aca-content/src/lib/components/view-profile/view-profile.component.scss
@@ -75,7 +75,7 @@ app-view-profile {
     text-align: end;
   }
 
-  .app-mat-divider {
+  .app-divider {
     border-top-width: 2px;
     border-top-color: var(--theme-grey-background-color);
     padding-left: -1px;

diff --git a/projects/aca-shared/src/lib/components/generic-error/generic-error.component.html b/projects/aca-shared/src/lib/components/generic-error/generic-error.component.html
@@ -1,4 +1,4 @@
-<mat-icon>error</mat-icon>
+<mat-icon class="generic-error__icon">error</mat-icon>
 <p class="generic-error__title">
   {{ text | translate }}
 </p>
diff --git a/projects/aca-shared/src/lib/components/generic-error/generic-error.component.scss b/projects/aca-shared/src/lib/components/generic-error/generic-error.component.scss
@@ -11,7 +11,7 @@
     font-size: 16px;
   }
 
-  mat-icon {
+  &__icon {
     color: var(--theme-warn-color, #f44336);
     font-size: 52px;
     height: 52px;