[AAE-11885] adjust task list and process list to make it stylable for hxp (#8437)

* [AAE-11885] adjust task list html and css to use material components

* [AAE-11885] adjust process list and tests

* [ci:force]

* [AAE-11885] add variable for spacing

* [ci:force]

lib/core/src/lib/styles/_index.scss

@@ -96,6 +96,9 @@
         --adf-theme-mat-grey-color-a200: mat.get-color-from-palette(mat.$grey-palette, A200),
         --adf-theme-mat-grey-color-a400: mat.get-color-from-palette(mat.$grey-palette, A400),
         --adf-theme-mat-grey-color-50: mat.get-color-from-palette(mat.$grey-palette, 50),
+
+        // spacing
+        --adf-theme-spacing: map-get($custom-css-variables, 'theme-adf-spacing')
     );
 
     // propagates SCSS variables into the CSS variables scope
@@ -114,5 +117,6 @@ $adf-custom-theme-sizes: (
     'theme-adf-icon-1-font-size': 17px,
     'theme-adf-picture-1-font-size': 18px,
     'theme-adf-task-footer-font-size': 18px,
-    'theme-adf-task-title-font-size': 18px
+    'theme-adf-task-title-font-size': 18px,
+    'theme-adf-spacing': 16px
 );

lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.html

@@ -1,17 +1,29 @@
 
-<ng-container *ngIf="filters$ | async as filterList; else loading">
+
-    <div *ngFor="let filter of filterList" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
+<mat-nav-list class="adf-process-filters" *ngIf="filters$ | async as filterList; else loading">
-        <button (click)="onFilterClick(filter)"
+    <button
+        *ngFor="let filter of filterList"
+        mat-list-item
+        (click)="onFilterClick(filter)"
         [attr.aria-label]="filter.name | translate"
         [id]="filter.id"
         [attr.data-automation-id]="filter.key + '_filter'"
-          mat-button
+        [class.adf-active]="currentFilter === filter"
-          class="adf-filter-action-button adf-full-width" fxLayout="row" fxLayoutAlign="space-between center">
+    >
-          <adf-icon data-automation-id="adf-filter-icon" *ngIf="showIcons" [value]="filter.icon"></adf-icon>
+        <div class="adf-process-filters__entry">
-          <span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
+            <adf-icon
-        </button>
+                data-automation-id="adf-filter-icon"
+                *ngIf="showIcons"
+                [value]="filter.icon">
+            </adf-icon>
+            <span
+                data-automation-id="adf-filter-label"
+                class="adf-filter-action-button__label">
+                {{ filter.name | translate }}
+            </span>
         </div>
-</ng-container>
+    </button>
+</mat-nav-list>
 <ng-template #loading>
     <ng-container>
         <div class="adf-app-list-spinner">

lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss

@@ -1,27 +1,23 @@
-.adf {
+.adf-process-filters {
-    &-filters__entry {
+    margin-right: calc(-1 * var(--adf-theme-spacing));
-        padding: 12px 0 !important;
-        height: 24px;
-        width: 100%;
-        cursor: pointer;
-        font-size: var(--theme-body-1-font-size) !important;
-        font-weight: bold;
-        opacity: 1;
 
-        .adf-full-width {
+    &__entry {
+        font-size: var(--theme-body-1-font-size);
+        color: var(--adf-theme-foreground-text-color-054);
         display: flex;
-            width: 100%;
+        align-items: center;
-        }
+        flex: 1;
+        height: 100%;
+        gap: var(--adf-theme-spacing);
 
-        .adf-filter-action-button .adf-filter-action-button__label {
-            padding-left: 20px;
-            margin: 0 8px !important;
-        }
-
-        &.adf-active,
         &:hover {
             color: var(--theme-primary-color);
-            opacity: 1;
+        }
+    }
+
+    .adf-active {
+        .adf-process-filters__entry {
+            color: var(--theme-primary-color);
         }
     }
 }

lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts

@@ -102,7 +102,7 @@ describe('ProcessFiltersCloudComponent', () => {
         fixture.detectChanges();
         await fixture.whenStable();
 
-        const filters = fixture.debugElement.queryAll(By.css('.adf-filters__entry'));
+        const filters = fixture.debugElement.queryAll(By.css('.adf-process-filters__entry'));
         expect(component.filters.length).toBe(3);
         expect(filters.length).toBe(3);
         expect(filters[0].nativeElement.innerText).toContain('FakeAllProcesses');

lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.html

@@ -1,29 +1,33 @@
-<ng-container *ngIf="filters$ | async as filterList; else loading">
+
-    <div *ngFor="let filter of filterList"
+<mat-nav-list class="adf-task-filters" *ngIf="filters$ | async as filterList; else loading">
-         class="adf-task-filters__entry">
+        <button
-        <button (click)="onFilterClick(filter)"
+            *ngFor="let filter of filterList"
+            mat-list-item
+            (click)="onFilterClick(filter)"
             [attr.aria-label]="filter.name | translate"
             [id]="filter.id"
             [attr.data-automation-id]="filter.key + '_filter'"
-                mat-button
             [class.adf-active]="currentFilter === filter"
-                class="adf-filter-action-button adf-full-width"
+        >
-                fxLayout="row"
+            <div class="adf-task-filters__entry">
-                fxLayoutAlign="space-between center">
+                <div class="adf-task-filters__entry-label">
                     <adf-icon data-automation-id="adf-filter-icon"
                         *ngIf="showIcons"
-                      [value]="filter.icon"></adf-icon>
+                        [value]="filter.icon"
-            <span data-automation-id="adf-filter-label"
+                    ></adf-icon>
-                  class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
+                    <span data-automation-id="adf-filter-label">
-        </button>
+                        {{ filter.name | translate }}
+                    </span>
+                </div>
                 <span *ngIf="counters$[filter.key]"
                     [attr.data-automation-id]="filter.key + '_filter-counter'"
-              class="adf-filter-action-button__counter"
+                    class="adf-task-filters__entry-counter"
-              [class.adf-active]=wasFilterUpdated(filter.key)>
+                    [class.adf-active]="wasFilterUpdated(filter.key)">
                     {{ counters$[filter.key] | async }}
                 </span>
             </div>
-</ng-container>
+        </button>
+    </mat-nav-list>
 <ng-template #loading>
     <ng-container>
         <div class="adf-app-list-spinner">

lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.scss

@@ -1,58 +1,39 @@
-.adf {
+.adf-task-filters {
-    &-task-filters__entry {
+    margin-right: calc(-1 * var(--adf-theme-spacing));
+
+    &__entry {
+        font-size: var(--theme-body-1-font-size);
+        color: var(--adf-theme-foreground-text-color-054);
         display: flex;
-        padding: 12px 0 !important;
+        justify-content: space-between;
-        height: 24px;
+        align-items: center;
-        width: 100%;
+        flex: 1;
-        font-size: var(--theme-body-1-font-size) !important;
+        height: 100%;
-        font-weight: bold;
-        opacity: 1;
 
-        .adf-full-width {
+        &:hover {
+            color: var(--theme-primary-color);
+        }
+    }
+
+    &__entry-label {
         display: flex;
-            width: 100%;
+        flex: 1;
+        align-items: center;
+        gap: var(--adf-theme-spacing);
     }
 
-        .adf-filter-action-button {
+    &__entry-counter {
-            opacity: 0.54;
-            padding: 16px;
-            cursor: pointer;
-
-            .adf-filter-action-button__label {
-                padding-left: 20px;
-                margin: 0 8px !important;
-            }
-        }
-
-        .adf-filter-action-button__counter {
-            opacity: 0.54;
-            margin-left: 10px;
-            margin-top: 6px;
-            padding: 0 5px;
-
-            &.adf-active {
-                margin-left: 8px;
-                margin-top: 5px;
         padding: 0 5px;
         border-radius: 15px;
+
+        &.adf-active {
             background-color: var(--theme-accent-color);
             color: var(--adf-theme-mat-grey-color-50);
             font-size: smaller;
         }
     }
 
-        &:hover {
+    .adf-active .adf-task-filters__entry-label {
         color: var(--theme-primary-color);
-
-            .adf-filter-action-button__counter,
-            .adf-filter-action-button {
-                opacity: 1;
-            }
-        }
-
-        .adf-active {
-            color: var(--theme-primary-color);
-            opacity: 1;
-        }
     }
 }

lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts

@@ -276,7 +276,7 @@ describe('TaskFiltersCloudComponent', () => {
         fixture.detectChanges();
         await fixture.whenStable();
 
-        const filterCounters = fixture.debugElement.queryAll(By.css('.adf-filter-action-button__counter'));
+        const filterCounters = fixture.debugElement.queryAll(By.css('.adf-task-filters__entry-counter'));
         expect(component.filters.length).toBe(3);
         expect(filterCounters.length).toBe(1);
         expect(filterCounters[0].nativeElement.innerText).toContain('11');