[ACS-6565] Should use declaration-no-important rule in the stylelint-…

…config.json file to avoid use of !important in ADF
Alfresco · Feb 13, 2024 · 9b429a5 · 9b429a5
1 parent 378b125
commit 9b429a5
Show file tree

Hide file tree

Showing 69 changed files with 443 additions and 441 deletions.
diff --git a/demo-shell/src/app/components/app-layout/user-info/user-info.component.html b/demo-shell/src/app/components/app-layout/user-info/user-info.component.html
@@ -1,21 +1,21 @@
 <ng-container>
-    <adf-content-user-info 
+    <adf-content-user-info
         *ngIf="mode === userInfoMode.CONTENT || mode === userInfoMode.CONTENT_SSO"
         [ecmUser]="ecmUser$ | async"
         [identityUser]="identityUser$ | async"
         [isLoggedIn]="isLoggedIn"
         [mode]="mode"
     ></adf-content-user-info>
-    <adf-identity-user-info 
+    <adf-identity-user-info
         *ngIf="mode === userInfoMode.SSO"
         [identityUser]="identityUser$ | async"
         [isLoggedIn]="isLoggedIn"
     ></adf-identity-user-info>
-    <adf-process-user-info 
+    <adf-process-user-info
         *ngIf="mode === userInfoMode.PROCESS || mode === userInfoMode.ALL"
         [bpmUser]="bpmUser$ | async"
         [ecmUser]="ecmUser$ | async"
         [isLoggedIn]="isLoggedIn"
         [mode]="mode"
     ></adf-process-user-info>
-</ng-container>
+</ng-container>
diff --git a/demo-shell/src/app/components/cloud/cloud-filters-demo.component.scss b/demo-shell/src/app/components/cloud/cloud-filters-demo.component.scss
@@ -1,4 +1,4 @@
 app-cloud-task-filters .app-filters__entry,
 app-cloud-process-filters .app-filters__entry {
-    padding-left: 0 !important;
+    padding-left: 0;
 }
diff --git a/demo-shell/src/app/components/files/files.component.scss b/demo-shell/src/app/components/files/files.component.scss
@@ -1,5 +1,5 @@
-.app-container {
-    margin: 10px !important;
+.app-container.app-container {
+    margin: 10px;
 }
 
 .app-error-message {

diff --git a/docs/user-guide/theming.md b/docs/user-guide/theming.md
@@ -141,9 +141,6 @@ Any component with the  `add-dark-theme` class will use the dark theme, while ot
 ## Default reusable class
 
 ```css
-.adf-hide-small                 // Display none vieweport <960px
-.adf-hide-xsmall                // Display none vieweport <600px
-
 .accent-color                // Accent color
 .warn-color                  // Warn color
 .primary-contrast-text-color // Default contrast color for primary color

diff --git a/...content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss b/...content-services/src/lib/content-node-selector/content-node-selector-panel.component.scss
@@ -114,9 +114,9 @@ h2.adf-search-results-label {
                     fill: var(--theme-primary-color);
                 }
 
-                .adf-no-content-container {
+                .adf-no-content-container.adf-datatable-cell {
                     text-align: center;
-                    border: none !important;
+                    border: none;
                 }
 
                 .adf-datatable-cell {
@@ -167,8 +167,8 @@ h2.adf-search-results-label {
             }
 
             &-searchLayout {
-                .adf-datatable-list .adf-datatable-row {
-                    min-height: 65px !important;
+                .adf-datatable-list .adf-datatable-body .adf-datatable-row {
+                    min-height: 65px;
 
                     .adf-datatable-cell {
                         .adf-name-location-cell-location {

diff --git a/lib/content-services/src/lib/content-user-info/content-user-info.component.scss b/lib/content-services/src/lib/content-user-info/content-user-info.component.scss
@@ -131,6 +131,13 @@
     &-userinfo-detail {
         text-align: left;
     }
+
+    &-hide-small.adf-userinfo-profile-initials,
+    &-hide-small.adf-userinfo-profile-container {
+        @include layout-bp(lt-md) {
+            display: none;
+        }
+    }
 }
 
 @media only screen and (min-device-width: 480px) {

diff --git a/lib/content-services/src/lib/document-list/components/document-list.component.scss b/lib/content-services/src/lib/document-list/components/document-list.component.scss
@@ -109,7 +109,7 @@
 
 .adf-empty-list-header {
     height: 32px;
-    opacity: 0.26 !important;
+    opacity: 0.26;
     font-size: var(--theme-headline-font-size);
     line-height: 1.33;
     letter-spacing: -1px;
@@ -179,8 +179,8 @@
 }
 
 .adf-datatable-gallery-thumbnails {
-    .adf-datatable-card .adf-datatable-row {
-        height: 300px !important;
+    .adf-datatable-card .adf-datatable-row:is(adf-datatable-row) {
+        height: 300px;
 
         img {
             height: 130px;

diff --git a/...es/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss b/...es/src/lib/permission-manager/components/user-icon-column/user-icon-column.component.scss
@@ -1,43 +1,43 @@
 .adf {
-    &-people-initial {
+    &-people-initial#{&}-people-initial {
         background: var(--theme-primary-color);
         border-radius: 50%;
         display: flex;
         justify-content: center;
         align-items: center;
         width: 40px;
         height: 40px;
-        color: var(--theme-primary-color-default-contrast) !important;
+        color: var(--theme-primary-color-default-contrast);
         font-weight: bolder;
         font-size: var(--theme-adf-picture-1-font-size);
         text-transform: uppercase;
     }
 
-    &-group-icon {
-        height: 20px !important;
-        width: 20px !important;
+    &-group-icon.mat-icon {
+        height: 20px;
+        width: 20px;
         background: var(--theme-primary-color);
         border-radius: 50%;
         padding: 10px;
-        color: var(--theme-primary-color-default-contrast) !important;
+        color: var(--theme-primary-color-default-contrast);
         font-weight: bolder;
         font-size: var(--theme-title-font-size);
     }
 
-    &-people-select-icon {
-        margin: 0 !important;
+    &-datatable-selected {
+        height: 100%;
+        width: 100%;
+        margin-left: -2px;
+        margin-top: 2px;
+    }
+
+    &-people-select-icon.mat-icon  {
+        margin: 0;
 
         svg {
             fill: var(--theme-accent-color);
             width: 40px;
             height: 40px;
         }
     }
-
-    &-datatable-selected {
-        height: 100%;
-        width: 100%;
-        margin-left: -2px;
-        margin-top: 2px;
-    }
 }
diff --git a/.../src/lib/search/components/search-filter-container/search-filter-container.component.scss b/.../src/lib/search/components/search-filter-container/search-filter-container.component.scss
@@ -1,20 +1,20 @@
 .adf-filter {
-    &-button {
-        margin-left: -7px !important;
+    &-button#{&}-button {
+        margin-left: -7px;
 
         .adf-icon {
             opacity: 1;
             color: var(--adf-theme-foreground-icon-color);
 
-            &-active {
+            &.adf-icon-active {
                 color: var(--theme-primary-color);
 
                 span {
-                    border: 2px solid var(--adf-theme-background-card-color) !important;
+                    border: 2px solid var(--adf-theme-background-card-color);
                     width: 10px;
                     height: 10px;
-                    top: -3px !important;
-                    right: -6px !important;
+                    top: -3px;
+                    right: -6px;
                 }
             }
         }
@@ -24,7 +24,7 @@
         display: flex;
         flex-direction: column;
         padding: 15px 15px 10px;
-        color: var(--adf-theme-foreground-text-color-087) !important;
+        color: var(--adf-theme-foreground-text-color-087);
 
         .adf-facet-buttons {
             display: none;
@@ -35,7 +35,7 @@
         }
 
         input {
-            background: 2px solid var(--adf-theme-background-card-color) !important;
+            background: 2px solid var(--adf-theme-background-card-color);
         }
     }
 

diff --git a/...rvices/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss b/...rvices/src/lib/search/components/search-filter-tabbed/search-filter-tabbed.component.scss
@@ -5,6 +5,7 @@ adf-search-filter-tabbed {
 
     // The important tag is used here as a workaround for a bug in angular material, when MatTabs are used in conjunction with MatMenu
     // https://github.com/angular/components/issues/27426
+    /* stylelint-disable declaration-no-important */
     .adf-search-tab-content-active {
         & > div {
             visibility: visible !important;

diff --git a/lib/content-services/src/lib/social/rating.component.scss b/lib/content-services/src/lib/social/rating.component.scss
@@ -34,7 +34,7 @@ $adf-average-star-color: #808080;
 
     .adf-grey-star,
     .adf-average-star {
-        color: $adf-average-star-color !important;
+        color: $adf-average-star-color;
     }
 }
 

diff --git a/lib/content-services/src/lib/tag/tag-node-list.component.scss b/lib/content-services/src/lib/tag/tag-node-list.component.scss
@@ -49,13 +49,13 @@
         margin: -1px 0 0 10px;
     }
 
-    .adf-tag-chips-delete-icon {
+    .adf-tag-chips-delete-icon.mat-chip-remove {
         font-size: var(--theme-title-font-size);
         background-repeat: no-repeat;
         display: inline-block;
         fill: currentcolor;
         height: 20px;
         width: 20px;
-        color: var(--theme-primary-color-default-contrast) !important;
+        color: var(--theme-primary-color-default-contrast);
     }
 }
diff --git a/lib/content-services/src/lib/tree/components/tree.component.scss b/lib/content-services/src/lib/tree/components/tree.component.scss
@@ -80,11 +80,11 @@ $tree-header-font-size: 12px !default;
         font-weight: bold;
         line-height: 24px;
         letter-spacing: 0;
-        min-height: $tree-row-height !important;
+        min-height: $tree-row-height;
         font-size: $tree-header-font-size;
         color: var(--adf-theme-foreground-text-color);
         box-sizing: border-box;
-        padding-top: 12px !important;
+        padding-top: 12px;
 
         &:focus {
             outline-offset: -1px;

diff --git a/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.html b/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.html
@@ -56,6 +56,7 @@
     <section class="adf-upload-dialog__content"
         [class.adf-upload-dialog--padding]="isConfirmation">
         <adf-file-uploading-list
+            class="adf-file-uploading-list"
             [class.adf-upload-dialog--hide]="isConfirmation"
             #uploadList
             [files]="filesUploadingList">

diff --git a/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.scss b/lib/content-services/src/lib/upload/components/file-uploading-dialog.component.scss
@@ -12,8 +12,9 @@
         padding: 1em;
     }
 
-    &--hide {
-        display: none !important;
+    &--hide.adf-upload-dialog__confirmation,
+    &--hide.adf-file-uploading-list {
+        display: none;
     }
 
     &--minimized {
@@ -29,11 +30,11 @@
         display: flex;
         align-items: center;
 
-        button {
+        button.mat-button {
             min-width: 0;
             padding: 0;
             line-height: 0;
-            color: var(--adf-theme-foreground-text-color-054) !important;
+            color: var(--adf-theme-foreground-text-color-054);
         }
     }
 

diff --git a/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.scss b/lib/content-services/src/lib/upload/components/file-uploading-list-row.component.scss
@@ -23,11 +23,11 @@ adf-file-uploading-list-row:not(:first-child) {
         padding: 0 1em 0 0.5em;
     }
 
-    &__group,
-    &__block,
-    &__file-version {
+    &__group#{&}__group,
+    &__block#{&}__block,
+    &__file-version#{&}__file-version {
         min-width: 100px;
-        display: flex !important;
+        display: flex;
         justify-content: flex-end;
         line-height: 40px;
         height: 40px;

diff --git a/lib/content-services/src/lib/upload/components/upload-drag-area.component.scss b/lib/content-services/src/lib/upload/components/upload-drag-area.component.scss
@@ -7,8 +7,8 @@ $adf-upload-dragging-level1-border: 1px dashed #2196f3 !default;
 
 @mixin file-draggable-input-focus($text-color, $border) {
     color: $text-color;
-    border: $border !important;
-    margin-left: 0 !important;
+    border: $border;
+    margin-left: 0;
 }
 
 adf-upload-drag-area {
@@ -49,37 +49,37 @@ adf-upload-drag-area {
         color: $adf-upload-dragging-color;
     }
 
-    .adf-upload__dragging td {
-        border-top: $adf-upload-dragging-border !important;
-        border-bottom: $adf-upload-dragging-border !important;
+    .adf-upload__dragging.adf-upload__dragging td {
+        border-top: $adf-upload-dragging-border;
+        border-bottom: $adf-upload-dragging-border;
 
         &:first-child {
-            border-left: $adf-upload-dragging-border !important;
+            border-left: $adf-upload-dragging-border;
         }
 
         &:last-child {
-            border-right: $adf-upload-dragging-border !important;
+            border-right: $adf-upload-dragging-border;
         }
     }
 
     &:first-child {
         & > div {
             adf-upload-drag-area {
-                .adf-file-draggable-input-focus {
+                .adf-file-draggable-input-focus.adf-file-draggable-input-focus {
                     @include file-draggable-input-focus($adf-upload-dragging-color, $adf-upload-dragging-border);
                 }
             }
         }
 
-        .adf-upload-border {
-            vertical-align: inherit !important;
-            text-align: inherit !important;
+        .adf-upload-border.adf-upload-border {
+            vertical-align: inherit;
+            text-align: inherit;
         }
 
-        .adf-file-draggable-input-focus {
-            color: $adf-upload-dragging-level1-color !important;
-            border: $adf-upload-dragging-level1-border !important;
-            margin-left: 0 !important;
+        .adf-file-draggable-input-focus.adf-file-draggable-input-focus {
+            color: $adf-upload-dragging-level1-color;
+            border: $adf-upload-dragging-level1-border;
+            margin-left: 0;
 
             adf-upload-drag-area {
                 & > div {