Improvement/AAE-19176-reapply-selector-changes (#9424)

* AAE-19510 remove selector variable * AAE-19510 poc for card view using variable selectors * AAE-19176 rename mat selectors file * AAE-19176 add missing style imports * AAE-19176 remove remaining mat selectors * AAE-19176 replaced todo material selectors with variables * AAE-19176 changes made in meantime * AAE-19176 conflict fixes
Alfresco · Jun 24, 2024 · 09baf41 · 09baf41
1 parent 885585f
commit 09baf41
Show file tree

Hide file tree

Showing 57 changed files with 366 additions and 234 deletions.
diff --git a/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.scss b/demo-shell/src/app/components/app-layout/cloud/form-demo/cloud-form-demo.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .app-form-container {
     padding: 10px;
 }
@@ -31,7 +33,7 @@
 }
 
 .app-form-editor-buttons {
-    & > .mat-mdc-raised-button {
+    & > #{$mat-raised-button} {
         margin-right: 5px;
     }
 }

diff --git a/demo-shell/src/app/components/cloud/cloud-layout.component.scss b/demo-shell/src/app/components/cloud/cloud-layout.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .app-cloud-layout-overflow {
     overflow: auto;
 }

diff --git a/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss b/...h/components/search-chip-autocomplete-input/search-chip-autocomplete-input.component.scss
@@ -1,10 +1,12 @@
 /* stylelint-disable selector-class-pattern */
+@import 'styles/mat-selectors';
+
 adf-search-chip-autocomplete-input {
     .adf-chip-list {
         width: 100%;
     }
 
-    .mat-mdc-form-field-infix {
+    #{$mat-form-field-infix} {
         border: none;
     }
 

diff --git a/...ent-services/src/lib/search/components/search-properties/search-properties.component.scss b/...ent-services/src/lib/search/components/search-properties/search-properties.component.scss
@@ -1,4 +1,6 @@
 /* stylelint-disable selector-class-pattern */
+@import 'styles/mat-selectors';
+
 adf-search-properties {
     .adf-search-properties-file-size-label {
         display: block;
@@ -19,14 +21,14 @@ adf-search-properties {
 
     .adf-search-properties-file-size-operator,
     .adf-search-properties-file-size-unit {
-        .mat-mdc-form-field-infix {
+        #{$mat-form-field-infix} {
             border: 1px solid var(--adf-theme-mat-grey-color-a400);
             border-radius: 5px;
             padding: 9px;
         }
 
-        &.mat-focused {
-            .mat-mdc-form-field-infix {
+        &#{$mat-focused} {
+            #{$mat-form-field-infix} {
                 outline: 2px auto -webkit-focus-ring-color;
             }
         }
@@ -39,33 +41,31 @@ adf-search-properties {
     adf-search-chip-autocomplete-input {
         display: block;
 
-        .mdc-text-field--outlined {
-            .mdc-text-field--outlined {
-                &-start,
-                &-end {
-                    border-top: 1px solid var(--adf-theme-mat-grey-color-a400);
-                    border-bottom: 1px solid var(--adf-theme-mat-grey-color-a400);
-                }
+        #{$mat-text-field-outlined} {
+            &-start,
+            &-end {
+                border-top: 1px solid var(--adf-theme-mat-grey-color-a400);
+                border-bottom: 1px solid var(--adf-theme-mat-grey-color-a400);
+            }
 
-                &-start {
-                    border-left: 1px solid var(--adf-theme-mat-grey-color-a400);
-                }
+            &-start {
+                border-left: 1px solid var(--adf-theme-mat-grey-color-a400);
+            }
 
-                &-end {
-                    border-right: 1px solid var(--adf-theme-mat-grey-color-a400);
-                }
+            &-end {
+                border-right: 1px solid var(--adf-theme-mat-grey-color-a400);
             }
         }
 
-        .mat-focused {
-            .mdc-text-field--outlined {
+        #{$mat-focused} {
+            #{$mat-text-field-outlined} {
                 outline: 2px auto -webkit-focus-ring-color;
             }
         }
 
-        .mat-form-field-appearance-outline {
-            .mdc-text-field--outlined-thick {
-                .mdc-text-field--outlined {
+        #{$mat-form-field-appearance-outline} {
+            #{$mat-text-field-outlined-thick} {
+                #{$mat-text-field-outlined} {
                     &-start,
                     &-end {
                         border-width: 1px;

diff --git a/lib/content-services/src/lib/version-manager/version-list.component.scss b/lib/content-services/src/lib/version-manager/version-list.component.scss
@@ -1,4 +1,6 @@
 /* stylelint-disable selector-class-pattern */
+@import 'styles/mat-selectors';
+
 .adf-version-list {
     &-viewport {
         height: 100%;

diff --git a/lib/core/src/lib/buttons-menu/buttons-menu.component.html b/lib/core/src/lib/buttons-menu/buttons-menu.component.html
@@ -17,4 +17,4 @@
 
 <ng-template #desktop>
     <ng-content></ng-content>
-</ng-template>
+</ng-template>
diff --git a/lib/core/src/lib/buttons-menu/buttons-menu.component.scss b/lib/core/src/lib/buttons-menu/buttons-menu.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-buttons-menu {
     margin-right: 10px;
 
@@ -21,7 +23,7 @@
             display: none;
         }
 
-        button > mat-icon.mat-icon.material-icons {
+        button > #{$material-icons} {
             color: black;
             margin: 0 10px;
         }

diff --git a/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss b/lib/core/src/lib/card-view/components/card-view-arrayitem/card-view-arrayitem.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf {
     &-array-item-icon {
         font-size: var(--theme-subheading-2-font-size);
@@ -21,16 +23,15 @@
     }
 
     &-array-item-more-chip-container {
-        &.mat-mdc-card {
+        &#{$mat-card} {
             box-shadow: none;
             max-height: 300px;
             overflow-y: auto;
         }
     }
 
     &-property-value {
-        /* TODO(mdc-migration): The following rule targets internal classes of chips that may no longer apply for the MDC version. */
-        .mat-chip-list {
+        #{$mat-chip-list} {
             padding-top: 6px;
         }
     }
@@ -46,7 +47,7 @@
         border-color: var(--adf-card-view-array-item-border-color);
         border-radius: var(--adf-card-view-array-item-border-radius);
 
-        .mat-mdc-chip:hover {
+        #{$mat-chip}:hover {
             cursor: pointer;
         }
     }

diff --git a/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss b/lib/core/src/lib/card-view/components/card-view-dateitem/card-view-dateitem.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-card-view-dateitem {
     .adf-property-value {
         padding: 6px 0;
@@ -43,13 +45,13 @@
             justify-content: space-between;
             padding-bottom: 6px;
 
-            button.mat-mdc-icon-button {
+            button#{$mat-icon-button} {
                 line-height: 20px;
                 height: 20px;
                 width: 20px;
             }
 
-            mat-icon {
+            #{$mat-icon} {
                 width: 16px;
                 height: 16px;
                 opacity: 0.5;

diff --git a/...rd-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss b/...rd-view/components/card-view-keyvaluepairsitem/card-view-keyvaluepairsitem.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-card-view-key-value-pairs-item {
     .adf-property-col-key {
         width: 50%;
@@ -26,19 +28,19 @@
                 justify-content: center;
             }
 
-            &__add-btn.mat-mdc-button {
+            &__add-btn#{$mat-button} {
                 margin-bottom: 20px;
             }
 
             &__read-only {
                 padding-bottom: 20px;
 
-                .mat-mdc-table {
+                #{$mat-table} {
                     box-shadow: none;
                 }
 
-                .mat-mdc-header-row,
-                .mat-mdc-row {
+                #{$mat-header-row},
+                #{$mat-row} {
                     padding: 0;
                 }
             }

diff --git a/...ore/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss b/...ore/src/lib/card-view/components/card-view-selectitem/card-view-selectitem.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-card-view-selectitem {
     .adf-property-value {
         width: 100%;
@@ -19,8 +21,7 @@
             margin-top: 0;
             border-radius: 6px;
 
-            /* TODO(mdc-migration): The following rule targets internal classes of select that may no longer apply for the MDC version. */
-            .mat-mdc-select-value {
+            #{$mat-select-value} {
                 color: var(--adf-metadata-action-button-clear-color);
             }
         }

diff --git a/...ew/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss b/...ew/components/card-view-selectitem/select-filter-input/select-filter-input.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 $select-filter-height: 4em !default;
 
 .adf-select-filter-input {
@@ -16,12 +18,12 @@ $select-filter-height: 4em !default;
         background: var(--adf-theme-background-card-color);
     }
 
-    .mat-mdc-form-field {
+    #{$mat-form-field} {
         width: 100%;
     }
 }
 
-.mat-mdc-select-panel.adf-select-filter {
+#{$mat-select-panel}.adf-select-filter {
     transform: none !important;
     overflow-x: hidden !important;
     max-height: calc(256px + #{$select-filter-height});

diff --git a/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss b/lib/core/src/lib/card-view/components/card-view-textitem/card-view-textitem.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-card-view-textitem {
     .adf-property-field {
         padding-top: 15px;
@@ -32,8 +34,7 @@
     }
 
     .adf-textitem-chip-list-container {
-        /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
-        .mat-form-field-label {
+        #{$mat-form-field-label} {
             margin-top: 6px;
         }
     }
@@ -47,7 +48,7 @@
         }
 
         .adf-property-field {
-            .mat-mdc-input-element {
+            #{$mat-input-element} {
                 color: var(--theme-primary-color);
                 cursor: pointer;
             }

diff --git a/lib/core/src/lib/card-view/components/card-view/card-view.component.scss b/lib/core/src/lib/card-view/components/card-view/card-view.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 .adf-property-list {
     background: var(--adf-card-view-background);
     border: var(--adf-card-view-border);
@@ -27,51 +29,45 @@
         .adf-property-field {
             width: 100%;
 
-            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
-            .mat-form-field-underline {
+            #{mat-form-field-underline} {
                 display: none;
             }
 
-            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
-            .mat-mdc-input-element {
+            #{mat-input-element} {
                 text-overflow: ellipsis;
                 color: var(--adf-metadata-property-panel-title-color);
                 padding: 6px 0;
                 line-height: 20px;
             }
 
             .adf-card-view__key-value-pairs__row {
-                .mat-mdc-input-element {
+                #{$mat-input-element} {
                     margin-top: 0;
                     padding-left: 12px;
                 }
             }
-            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
-            .mat-mdc-form-field-infix {
+
+            #{$mat-form-field-infix} {
                 border-top-width: 0;
                 padding: 0;
             }
 
-            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
-            .mat-form-field-flex {
+            #{$mat-form-field-flex} {
                 padding-top: 0;
             }
 
-            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
-            .mat-form-field-wrapper {
+            #{$mat-form-field-wrapper} {
                 padding-bottom: 0;
             }
 
-            /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
-            .mat-form-field-label {
+            #{$mat-form-field-label} {
                 padding: 0;
                 justify-content: center;
                 display: flex;
                 flex-direction: column;
                 height: 20px;
 
-                /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version. */
-                &.mat-form-field-empty {
+                &.adf-property-field-label--empty {
                     transform: translateY(-1.3437em) scale(1);
              }
             }
@@ -86,7 +82,7 @@
             background-color: var(--adf-metadata-buttons-background-color);
             border-radius: 6px;
 
-            &.mat-mdc-input-element {
+            #{$mat-input-element} {
                 color: var(--adf-metadata-action-button-clear-color);
                 padding: 6px 0 6px 12px;
                 margin: 5px 0 0;
@@ -96,7 +92,7 @@
         &.adf-property-readonly-value {
             color: var(--adf-metadata-property-panel-label-color);
 
-            &.mat-mdc-input-element {
+            #{$mat-input-element} {
                 color: var(--adf-metadata-property-panel-label-color);
             }
         }

diff --git a/lib/core/src/lib/comments/comments.component.scss b/lib/core/src/lib/comments/comments.component.scss
@@ -1,3 +1,5 @@
+@import 'styles/mat-selectors';
+
 adf-comments {
     .adf-comments-container {
         height: 100%;
@@ -24,7 +26,7 @@ adf-comments {
             resize: vertical;
         }
 
-        .mat-mdc-form-field {
+        #{$mat-form-field} {
             width: 100%;
         }
     }

diff --git a/lib/core/src/lib/datatable/components/datatable/datatable.component.scss b/lib/core/src/lib/datatable/components/datatable/datatable.component.scss
@@ -1,6 +1,7 @@
 /* stylelint-disable no-descending-specificity */
 @use '@angular/material' as mat;
 @import '../../../styles/mixins';
+@import 'styles/mat-selectors';
 
 $data-table-header-font-size: var(--theme-caption-font-size) !default;
 $data-table-header-sort-icon-size: var(--theme-subheading-2-font-size) !default;