[ACS-6140] - Remove references to internal Angular Material CSS classes (#3620)

2025-07-24 17:31:52 +00:00 · 2024-02-13 13:22:57 +01:00
parent 8e567cd483
commit 184ad17baf
25 changed files with 88 additions and 90 deletions
--- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.html
+++ b/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]="{ '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">
--- a/projects/aca-content/folder-rules/src/rule-details/conditions/rule-simple-condition.ui-component.scss
+++ b/projects/aca-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;
    }
--- 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>

--- 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;
      }
    }
--- 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,
--- 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>
--- 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);
        }
      }
--- 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"
--- 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;
  }
 }

--- a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.html
+++ b/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 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>
--- a/projects/aca-content/src/lib/components/search/search-input-control/search-input-control.component.scss
+++ b/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 {
+  .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;
  }

--- 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 {
-      padding: 3px 20px 3px 0;
-
-      .mat-checkbox-label {
-        padding: 0;
-      }
-    }
-
    label {
      max-width: 105px;
    }
+
+    .app-search-options-checkbox {
+      padding: 3px 20px 3px 0;
+
+      label {
+        padding: 0;
+      }
+    }
  }
 }

--- 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
@@ -45,10 +45,10 @@ aca-search-results {
            color: var(--theme-search-chip-icon-color);
          }

-          mat-icon {
-            color: var(--theme-search-chip-icon-color);
-          }
+        .adf-search-filter-chip-icon {
+          color: var(--theme-search-chip-icon-color);
        }
+      }

        .adf-search-filter-placeholder {
          color: var(--theme-selected-text-color);
--- 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 @@
          (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 @@
          (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">
--- 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;
--- a/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.scss
+++ b/projects/aca-content/src/lib/dialogs/node-template/create-from-template.dialog.scss
@@ -17,10 +17,6 @@ app-create-from-template-dialog {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
-
-      .bold {
-        font-weight: 600;
-      }
    }

    &-field {
--- a/projects/aca-content/src/lib/ui/overrides/adf-about.theme.scss
+++ b/projects/aca-content/src/lib/ui/overrides/adf-about.theme.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
@mixin adf-about-theme($theme) {
  adf-about {
    /* custom ADF About Component Theme */
--- a/projects/aca-content/src/lib/ui/overrides/adf-pagination.theme.scss
+++ b/projects/aca-content/src/lib/ui/overrides/adf-pagination.theme.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
@mixin adf-pagination-theme($theme) {
  adf-pagination {
    &.adf-pagination {
--- a/projects/aca-content/src/lib/ui/overrides/ay11.scss
+++ b/projects/aca-content/src/lib/ui/overrides/ay11.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
@mixin ay11-theme() {
  .mat-icon-button,
  .mat-button,
--- a/projects/aca-content/src/lib/ui/theme.scss
+++ b/projects/aca-content/src/lib/ui/theme.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
@use '@angular/material' as mat;
@import '@alfresco/adf-core/theming';
@import 'custom-theme';
--- 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>
--- 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;