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

2025-07-24 17:32:15 +00:00 · 2024-02-09 08:22:01 +01:00
parent 9343fe65a6
commit 6d93d011c9
137 changed files with 638 additions and 996 deletions
--- a/lib/core/src/lib/about/about-license-list/about-license-list.component.html
+++ b/lib/core/src/lib/about/about-license-list/about-license-list.component.html
@@ -3,7 +3,9 @@
    <mat-header-cell *matHeaderCellDef>
      {{ column.header | translate }}
    </mat-header-cell>
-    <mat-cell *matCellDef="let row" [innerHTML]="column.cell(row)"></mat-cell>
+    <mat-cell *matCellDef="let row"
+              class="adf-about-license-cell"
+              [innerHTML]="column.cell(row)"></mat-cell>
  </ng-container>

  <mat-header-row *matHeaderRowDef="displayedColumns"></mat-header-row>
--- a/lib/core/src/lib/about/about-license-list/about-license-list.component.scss
+++ b/lib/core/src/lib/about/about-license-list/about-license-list.component.scss
@@ -1,4 +1,4 @@
-mat-cell {
+.adf-about-license-cell {
    white-space: pre-line;
    line-height: 30px;
 }
--- a/lib/core/src/lib/form/components/form-renderer.component.scss
+++ b/lib/core/src/lib/form/components/form-renderer.component.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
@import 'styles/flex';

 .adf-hidden {
--- a/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss
+++ b/lib/core/src/lib/form/components/inplace-form-input/inplace-form-input.component.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 $adf-inplace-input-padding: 7px;

 .adf-inplace-input-container {
--- a/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/amount/amount.widget.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 .adf {
    &-amount-widget {
        width: 100%;
--- a/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/date-time/date-time.widget.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 .adf {
    &-date-time-widget {
        .mat-form-field-suffix {
--- a/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/multiline-text/multiline-text.widget.scss
@@ -2,7 +2,7 @@
    &-multiline-text-widget {
        width: 100%;

-        .mat-form-field-label-wrapper {
+        .adf-label {
            top: 20px;
        }
    }
--- a/lib/core/src/lib/form/components/widgets/number/number.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/number/number.widget.scss
@@ -2,7 +2,7 @@
    &-number-widget {
        width: 100%;

-        .mat-form-field-label-wrapper {
+        .adf-label {
            top: 20px;
        }
    }
--- a/lib/core/src/lib/form/components/widgets/text/text.widget.scss
+++ b/lib/core/src/lib/form/components/widgets/text/text.widget.scss
@@ -1,3 +1,4 @@
+/* stylelint-disable selector-class-pattern */
 .adf {
    &-text-widget {
        width: 100%;
--- a/lib/core/src/lib/identity-user-info/identity-user-info.component.html
+++ b/lib/core/src/lib/identity-user-info/identity-user-info.component.html
@@ -1,14 +1,12 @@
-<div 
-    id="userinfo_container" 
-    [class.adf-userinfo-name-right]="showOnRight" 
+<div *ngIf="isLoggedIn"
+    id="userinfo_container"
+    [class.adf-userinfo-name-right]="showOnRight"
    (keyup)="onKeyPress($event)"
-    class="adf-userinfo-container" 
-    *ngIf="isLoggedIn"
->
+    class="adf-userinfo-container">
    <span *ngIf="showName" id="adf-userinfo-identity-name-display" class="adf-userinfo-name">
        {{identityUser | fullName}}
    </span>
-    <button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button"
+    <button mat-button [matMenuTriggerFor]="menu" class="adf-userinfo-menu_button adf-identity-userinfo-button"
            data-automation-id="adf-user-profile">
        <div class="adf-userinfo-button-profile" id="user-profile">
            <div id="identity-user-image">
@@ -17,25 +15,20 @@
        </div>
    </button>
    <mat-menu #menu="matMenu" id="user-profile-lists" [xPosition]="menuPositionX" [yPosition]="menuPositionY"
-              [overlapTrigger]="false" class="adf-userinfo-menu">
-        <mat-tab-group id="tab-group-env" (click)="stopClosing($event)" selectedIndex="0" role="menuitem"
-                       class="adf-userinfo-tab adf-hide-tab">
-            <mat-tab id="identity-panel" role="dialog">
-                <mat-card class="adf-userinfo-card">
-                    <mat-card-header class="adf-userinfo-card-header"
-                                     [style.background-image]="'url(' + bpmBackgroundImage + ')'">
-                        <div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
-                    </mat-card-header>
-                    <mat-card-content>
-                        <div class="adf-userinfo-supporting-text">
-                            <h2 id="identity-full-name"
-                                  class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
-                            <span id="identity-email"> {{identityUser.email}} </span>
-                            <a href="#/profile"> {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
-                        </div>
-                    </mat-card-content>
-                </mat-card>
-            </mat-tab>
-        </mat-tab-group>
+              [overlapTrigger]="false" class="adf-userinfo-menu adf-identity-userinfo-menu">
+        <mat-card class="adf-userinfo-card adf-identity-userinfo-card">
+            <mat-card-header class="adf-userinfo-card-header"
+                             [style.background-image]="'url(' + bpmBackgroundImage + ')'">
+                <div class="mat-title" id="identity-username">{{identityUser | fullName}}</div>
+            </mat-card-header>
+            <mat-card-content>
+                <div class="adf-userinfo-supporting-text">
+                    <h2 id="identity-full-name"
+                        class="adf-userinfo__detail-title">{{identityUser | fullName}}</h2>
+                    <span id="identity-email"> {{identityUser.email}} </span>
+                    <a href="#/profile"> {{ 'USER_PROFILE.LABELS.MY_PROFILE' | translate }}</a>
+                </div>
+            </mat-card-content>
+        </mat-card>
    </mat-menu>
 </div>
--- a/lib/core/src/lib/identity-user-info/identity-user-info.component.scss
+++ b/lib/core/src/lib/identity-user-info/identity-user-info.component.scss
@@ -36,7 +36,7 @@
        display: inline-block;
    }

-    &-userinfo-menu_button.mat-button {
+    &-userinfo-menu_button.adf-identity-userinfo-button {
        margin-right: 0;
        border-radius: 90%;
        padding: 0;
@@ -44,21 +44,6 @@
        height: 40px;
    }

-    &-userinfo-tab .mat-tab-header {
-        align-self: center;
-        width: 100%;
-        min-width: 250px;
-    }
-
-    &-userinfo-tab .mat-tab-label {
-        flex: auto;
-        font-weight: 500;
-        font-size: var(--theme-body-1-font-size);
-        text-transform: uppercase;
-        line-height: 48px;
-        text-align: center;
-    }
-
    &-userinfo-card-header {
        align-items: center;
        display: flex;
@@ -68,7 +53,7 @@
        box-sizing: border-box;
    }

-    &-userinfo-card.mat-card {
+    &-userinfo-card.adf-identity-userinfo-card {
        padding: 0;
    }

@@ -103,14 +88,10 @@
        border: 0;
        vertical-align: middle;
    }
-
-    &-hide-tab .mat-tab-label-active {
-        display: none;
-    }
 }

@media only screen and (min-device-width: 480px) {
-    .mat-menu-panel.adf-userinfo-menu {
+    .adf-identity-userinfo-menu.adf-userinfo-menu {
        max-height: 450px;
        min-width: 450px;
        overflow: auto;
@@ -118,6 +99,6 @@
    }
 }

-.mat-menu-panel.adf-userinfo-menu .mat-menu-content {
+.adf-identity-userinfo-menu.adf-userinfo-menu > div {
    padding: 0;
 }
--- a/lib/core/src/lib/layout/components/header/header.component.html
+++ b/lib/core/src/lib/layout/components/header/header.component.html
@@ -12,7 +12,7 @@
        [attr.aria-expanded]="expandedSidenav"
        [attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
        <mat-icon
-            class="mat-icon material-icon"
+            class="adf-menu-icon-header"
            role="img"
            aria-hidden="true">{{ toggleIcon }}
        </mat-icon>
@@ -47,7 +47,7 @@
        [attr.aria-expanded]="expandedSidenav"
        [attr.aria-label]="'CORE.HEADER.ACCESSIBILITY.SIDEBAR_TOGGLE_BUTTON_ARIA_LABEL' | translate">
        <mat-icon
-            class="mat-icon material-icon"
+            class="adf-menu-icon-header"
            role="img"
            aria-hidden="true">{{ toggleIcon }}
        </mat-icon>
--- a/lib/core/src/lib/layout/components/header/header.component.scss
+++ b/lib/core/src/lib/layout/components/header/header.component.scss
@@ -1,6 +1,6 @@
@import 'styles/flex';

-adf-layout-header .mat-toolbar-single-row {
+adf-layout-header .adf-toolbar-container-row {
    color: var(--theme-header-text-color) !important;
    background-color: var(--theme-primary-color);
    position: relative;
@@ -10,7 +10,7 @@ adf-layout-header .mat-toolbar-single-row {
        position: relative;
        margin-right: 0;

-        .mat-icon {
+        .adf-menu-icon-header {
            font-size: 29px;
            padding: 0 5px 0 0;
        }
@@ -73,7 +73,7 @@ adf-layout-header .mat-toolbar-single-row {
    }
 }

-[dir='rtl'] adf-layout-header .mat-toolbar-single-row {
+[dir='rtl'] adf-layout-header .adf-toolbar-container-row {
    .adf-menu-icon {
        margin-right: -11px;
    }
@@ -99,7 +99,7 @@ adf-layout-header .mat-toolbar-single-row {
    }
 }

-[dir='ltr'] adf-layout-header .mat-toolbar-single-row {
+[dir='ltr'] adf-layout-header .adf-toolbar-container-row {
    .adf-menu-icon {
        margin-left: -11px;
    }
--- a/lib/core/src/lib/layout/components/layout-container/layout-container.component.html
+++ b/lib/core/src/lib/layout/components/layout-container/layout-container.component.html
@@ -1,5 +1,6 @@
-<mat-sidenav-container>
+<mat-sidenav-container class="adf-layout-container">
    <mat-sidenav
+        class="adf-layout-container-sidenav"
        [position]="position"
        [disableClose]="!isMobileScreenSize"
        [ngClass]="{ 'adf-sidenav--hidden': hideSidenav }"
--- a/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss
+++ b/lib/core/src/lib/layout/components/layout-container/layout-container.component.scss
@@ -23,19 +23,20 @@ adf-layout-container {
    opacity: 0 !important;
 }

-.mat-sidenav-container {
+.adf-layout-container {
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
 }

-.mat-sidenav {
+.adf-layout-container-sidenav {
    overflow: hidden;
    border-right: 1px solid var(--adf-theme-foreground-text-color-007);
    background-color: var(--theme-background-color);
 }

+/* stylelint-disable selector-class-pattern */
 mat-sidenav-content.mat-sidenav-content,
 .mat-drawer-transition .mat-drawer-content {
    margin-left: 0 !important;
--- a/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss
+++ b/lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.scss
@@ -2,7 +2,7 @@

 .adf {
    &-sidebar-action-menu {
-        & .mat-raised-button {
+        & .adf-sidebar-action-menu-button {
            width: 100%;
            display: block;
            box-shadow: none !important;
@@ -12,11 +12,6 @@
            color: var(--theme-primary-color-default-contrast) !important;
            border-radius: 4px;

-            & mat-icon {
-                width: 24px;
-                height: 25px;
-                color: var(--theme-primary-color-default-contrast) !important;
-            }
        }

        &-text {
@@ -40,17 +35,17 @@
        text-align: left;
        letter-spacing: -0.4px;

-        .mat-menu-item {
+        button {
            font-size: var(--theme-body-1-font-size);
            color: var(--adf-theme-foreground-text-color-087);
            text-align: left;
            line-height: 1.5;
            letter-spacing: -0.4px;
-        }

-        .mat-menu-item:hover {
-            color: var(--theme-primary-color);
-            opacity: inherit;
+            &:hover {
+                color: var(--theme-primary-color);
+                opacity: inherit;
+            }
        }
    }

--- a/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss
+++ b/lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.scss
@@ -25,12 +25,13 @@
    }

    @include flex.layout-bp(lt-sm) {
-        .mat-drawer {
+        .adf-layout-container {
            width: calc(-50px + 100vw) !important;
            max-width: 300px !important;
        }
    }

+    /* stylelint-disable-next-line selector-class-pattern */
    .mat-drawer-content {
        @include flex-column;

--- a/lib/core/src/lib/login/components/login-dialog-panel.component.scss
+++ b/lib/core/src/lib/login/components/login-dialog-panel.component.scss
@@ -1,5 +1,5 @@
 .adf-panel-login-dialog-component .adf-login-content {
-    .mat-card-actions,
+    .adf-login-dialog-content-actions,
    .adf-login-button,
    .adf-login__remember-me,
    .adf-copyright {
--- a/lib/core/src/lib/login/components/login-dialog.component.html
+++ b/lib/core/src/lib/login/components/login-dialog.component.html
@@ -9,9 +9,9 @@
    </adf-login-dialog-panel>
 </mat-dialog-content>

-<mat-dialog-actions align="end">
+<mat-dialog-actions class="adf-login-dialog-content-actions" align="end">
    <button
-        mat-button (click)="close()" 
+        mat-button (click)="close()"
        data-automation-id="login-dialog-actions-cancel">
            {{ 'LOGIN.DIALOG.CANCEL' | translate }}
    </button>
--- a/lib/core/src/lib/login/components/login.component.html
+++ b/lib/core/src/lib/login/components/login.component.html
@@ -8,7 +8,7 @@
                    [formGroup]="form"
                    autocomplete="off"
                    (submit)="onSubmit(form.value)">
-                    <mat-card-header>
+                    <mat-card-header class="adf-login-card-header-text">
                        <mat-card-title>
                            <div class="adf-alfresco-logo">
                                <!--HEADER TEMPLATE-->
@@ -51,7 +51,7 @@
                                class="adf-login__field"
                                [ngClass]="{'adf-is-invalid': isErrorStyle(form.controls.username)}">
                                <mat-form-field
-                                    class="adf-full-width"
+                                    class="adf-full-width adf-login-form-field"
                                    floatPlaceholder="never"
                                    color="primary">
                                    <input
@@ -81,7 +81,7 @@
                            <!--PASSWORD FIELD-->
                            <div class="adf-login__field">
                                <mat-form-field
-                                    class="adf-full-width"
+                                    class="adf-full-width adf-login-form-field"
                                    floatPlaceholder="never"
                                    color="primary">
                                        <input
@@ -99,7 +99,7 @@
                                            (click)="toggleShowPassword($event)"
                                            (keyup.enter)="toggleShowPassword($event)"
                                            [attr.data-automation-id]="isPasswordShow ? 'hide_password' : 'show_password'">
-                                                <mat-icon class="adf-login-password-icon">
+                                                <mat-icon class="adf-login-form-password-icon adf-login-password-icon">
                                                    {{ isPasswordShow ? 'visibility' : 'visibility_off' }}
                                                </mat-icon>
                                        </button>
@@ -165,7 +165,9 @@
                                    class="adf-login-remember-me"
                                    [checked]="rememberMe"
                                    (change)="rememberMe = !rememberMe">
+                                    <div class="adf-login-remember-me-label">
                                        {{ 'LOGIN.LABEL.REMEMBER' | translate }}
+                                    </div>
                                </mat-checkbox>
                            </div>
                        </div>
--- a/lib/core/src/lib/login/components/login.component.scss
+++ b/lib/core/src/lib/login/components/login.component.scss
@@ -95,7 +95,7 @@
        margin-right: 10px;
    }

-    .mat-card-header-text {
+    .adf-login-card-header-text {
        margin: 0 auto;
    }

@@ -120,10 +120,6 @@
        box-shadow: none;
    }

-    .adf-login-button .mat-button-wrapper {
-        display: inline-flex;
-    }
-
    .adf-login-button-label {
        color: var(--theme-accent-color-default-contrast);
    }
@@ -195,20 +191,20 @@
        opacity: 0.54;
    }

-    .mat-form-field .adf-login-password-icon.mat-icon {
+    .adf-login-form-field .adf-login-password-icon.adf-login-form-password-icon {
        color: var(--adf-theme-foreground-text-color);
    }

-    .adf-login__field .mat-form-field-wrapper {
+    .adf-login__field {
        margin: 1em 0 0;
        font-size: var(--theme-subheading-2-font-size);
-    }

-    .adf-login__field input:-webkit-autofill {
-        /* stylelint-disable */
-        -webkit-box-shadow: 0 0 0 1000px var(--adf-theme-background-dialog-color) inset;
-        -webkit-text-fill-color: var(--adf-theme-foreground-text-color) !important;
-        /* stylelint-enable */
+        & input:-webkit-autofill {
+            /* stylelint-disable */
+            -webkit-box-shadow: 0 0 0 1000px var(--adf-theme-background-dialog-color) inset;
+            -webkit-text-fill-color: var(--adf-theme-foreground-text-color) !important;
+            /* stylelint-enable */
+        }
    }

    .adf-login-validation {
@@ -233,7 +229,7 @@
        padding-top: 22px;
    }

-    .adf-login__remember-me .mat-checkbox-label {
+    .adf-login__remember-me .adf-login-remember-me-label {
        opacity: 0.87;
    }

--- a/lib/core/src/lib/sorting-picker/sorting-picker.component.html
+++ b/lib/core/src/lib/sorting-picker/sorting-picker.component.html
@@ -7,7 +7,7 @@
    </mat-select>
 </mat-form-field>

-<button *ngIf="selected" mat-icon-button (click)="toggleSortDirection()" aria-label="'CORE.SEARCH.TOGGLE_ASC_DESC_ORDER' | translate">
+<button *ngIf="selected" class="adf-sorting-picker-button" mat-icon-button (click)="toggleSortDirection()" aria-label="'CORE.SEARCH.TOGGLE_ASC_DESC_ORDER' | translate">
    <mat-icon *ngIf="ascending">arrow_upward</mat-icon>
    <mat-icon *ngIf="!ascending">arrow_downward</mat-icon>
 </button>
--- a/lib/core/src/lib/toolbar/toolbar.component.html
+++ b/lib/core/src/lib/toolbar/toolbar.component.html
@@ -1,4 +1,4 @@
-<mat-toolbar [color]="color">
+<mat-toolbar class="adf-toolbar-container adf-toolbar-container-row" [color]="color">
    <span class="adf-toolbar-title" *ngIf="title">{{ title | translate }}</span>
    <ng-content select="adf-toolbar-title"></ng-content>
    <ng-content></ng-content>
--- a/lib/core/src/lib/toolbar/toolbar.component.scss
+++ b/lib/core/src/lib/toolbar/toolbar.component.scss
@@ -9,25 +9,17 @@
        width: 100%;
    }

-    .mat-toolbar {
-        min-height: 48px;
+    .adf-toolbar-container.adf-toolbar-container-row {
        border: 1px solid var(--adf-theme-foreground-text-color-007);
        color: var(--adf-theme-foreground-text-color-054);
-    }
-
-    .mat-toolbar-row {
-        height: 48px;
+        height: 64px;
        font-size: var(--theme-body-1-font-size);
        white-space: normal;
-    }
-
-    .mat-toolbar-single-row {
        padding: 0 16px;
-        height: 64px;
    }

    &.adf-toolbar--inline {
-        .mat-toolbar {
+        .adf-toolbar-container {
            background-color: inherit;
            border: none;
            padding: 0;