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

…config.json file to avoid use of !important in ADF
Alfresco · Mar 4, 2024 · 1a6fa9c · 1a6fa9c
1 parent f7d8319
commit 1a6fa9c
Show file tree

Hide file tree

Showing 79 changed files with 543 additions and 561 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:has(.app-document-list-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 {
+.adf-cell-value {
+    .adf-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;
+    .adf-group-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;
+    .adf-datatable-selected {
+        height: 100%;
+        width: 100%;
+        margin-left: -2px;
+        margin-top: 2px;
+    }
+
+    .adf-people-select-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.html b/.../src/lib/search/components/search-filter-container/search-filter-container.component.html
@@ -12,6 +12,7 @@
             [matTooltip]="getTooltipTranslation(col?.title)">
         <adf-icon value="filter_list"
                   [ngClass]="{ 'adf-icon-active': isActive() || menuTrigger.menuOpen }"
+                  class="adf-filter-icon"
                   matBadge="filter"
                   matBadgeColor="warn"
                   [matBadgeHidden]="!isActive()">

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:has(.adf-filter-icon) {
+        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
@@ -32,9 +32,9 @@ $adf-average-star-color: #808080;
         color: $adf-rated-star-color;
     }
 
-    .adf-grey-star,
-    .adf-average-star {
-        color: $adf-average-star-color !important;
+    .adf-colored-star.adf-grey-star,
+    .adf-colored-star.adf-average-star {
+        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
diff --git a/lib/content-services/src/lib/tree/components/tree.component.scss b/lib/content-services/src/lib/tree/components/tree.component.scss
@@ -72,19 +72,19 @@ $tree-header-font-size: 12px !default;
     min-width: 100%;
     box-sizing: border-box;
 
-    .adf-tree-cell-header {
+    .adf-tree-cell-header:has(.adf-tree-cell-value) {
         cursor: pointer;
         position: relative;
         vertical-align: bottom;
         text-overflow: ellipsis;
         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
@@ -8,6 +8,7 @@
     <header class="adf-upload-dialog__header">
         <button
             mat-button
+            class="adf-upload-dialog__header-button"
             [attr.data-automation-id]="'adf-upload-dialog__toggle-minimize'"
             [attr.aria-label]="(isDialogMinimized ?
                 'ADF_FILE_UPLOAD.ARIA-LABEL.DIALOG_MAXIMIZE':
@@ -16,6 +17,7 @@
             [attr.aria-expanded]="!isDialogMinimized"
             (click)="toggleMinimized()">
             <mat-icon
+                class="adf-upload-dialog__header-button-icon"
                 mat-list-icon
                 title="{{ (isDialogMinimized ? 'ADF_FILE_UPLOAD.BUTTON.MAXIMIZE': 'ADF_FILE_UPLOAD.BUTTON.MINIMIZE') | translate }}">
                     {{ isDialogMinimized ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}
@@ -56,6 +58,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:is(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 {
+    .adf-file-uploading-row__group,
+    .adf-file-uploading-row__block,
+    .adf-file-uploading-row__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
@@ -1,4 +1,4 @@
-/* stylelint-disable no-descending-specificity */
+/* stylelint-disable no-descending-specificity declaration-no-important*/
 $adf-upload-dragging-color: #2196f3 !default;
 $adf-upload-dragging-border: 1px dashed #2196f3 !default;
 $adf-upload-dragging-background: #e3f2fd !default;

diff --git a/lib/content-services/src/lib/version-manager/version-manager.component.scss b/lib/content-services/src/lib/version-manager/version-manager.component.scss
@@ -1,16 +1,16 @@
 adf-version-manager {
-    .adf-version-list .adf-version-list-item {
-        height: auto !important;
-        width: 100% !important;
-        padding: 16px 0 !important;
+    .adf-version-list .adf-version-list-item:has(.adf-version-list-item-line) {
+        height: auto;
+        width: 100%;
+        padding: 16px 0;
     }
 }
 
 .adf-version-list-item-comment.adf-version-list-item-line {
     height: 100%;
     word-break: break-all;
-    white-space: unset !important;
-    overflow: unset !important;
+    white-space: unset;
+    overflow: unset;
 }
 
 .adf-button.adf-upload-new-version {
@@ -21,17 +21,22 @@ adf-version-manager {
     position: relative;
 }
 
-.adf-new-version-uploader-container {
-    padding: 16px 0;
-    width: 100%;
-    height: 0;
-    float: left !important;
-    position: relative;
-}
-
 .adf-new-version-container {
     height: inherit;
     overflow: hidden;
+
+    .adf-new-version-uploader-container {
+        padding: 16px 0;
+        width: 100%;
+        height: 0;
+        float: left;
+        position: relative;
+    }
+
+    .adf-version-list.adf-version-list-element {
+        width: 100%;
+        float: left;
+    }
 }
 
 .adf-version-list-table {
@@ -42,7 +47,3 @@ adf-version-manager {
     width: 100%;
 }
 
-.adf-version-list {
-    width: 100% !important;
-    float: left !important;
-}