From 3a5483d1cc75e01a2944ff30629b20c487b60c5b Mon Sep 17 00:00:00 2001
From: Kasia Biernat <1268696+kathrine0@users.noreply.github.com>
Date: Tue, 4 Apr 2023 12:07:00 +0200
Subject: [PATCH] [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           |  6 +-
 .../process-filters-cloud.component.html      | 38 ++++++---
 .../process-filters-cloud.component.scss      | 36 ++++----
 .../process-filters-cloud.component.spec.ts   |  2 +-
 .../base-task-filters-cloud.component.html    | 54 ++++++------
 .../base-task-filters-cloud.component.scss    | 83 +++++++------------
 .../task-filters-cloud.component.spec.ts      |  2 +-
 7 files changed, 109 insertions(+), 112 deletions(-)

diff --git a/lib/core/src/lib/styles/_index.scss b/lib/core/src/lib/styles/_index.scss
index a0f7cc3720..aafe2ae587 100644
--- a/lib/core/src/lib/styles/_index.scss
+++ b/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
 );
diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.html b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.html
index 715bf0efec..2f1f3e6fc7 100644
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.html
+++ b/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">
-        <button (click)="onFilterClick(filter)"
-          [attr.aria-label]="filter.name | translate"
-          [id]="filter.id"
-          [attr.data-automation-id]="filter.key + '_filter'"
-          mat-button
-          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>
-          <span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
-        </button>
-    </div>
-</ng-container>
+
+<mat-nav-list class="adf-process-filters" *ngIf="filters$ | async as filterList; else loading">
+    <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'"
+        [class.adf-active]="currentFilter === filter"
+    >
+        <div class="adf-process-filters__entry">
+            <adf-icon
+                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>
+    </button>
+</mat-nav-list>
 <ng-template #loading>
     <ng-container>
         <div class="adf-app-list-spinner">
diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss
index 0d8940e62e..a6a625ff63 100644
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.scss
@@ -1,27 +1,23 @@
-.adf {
-    &-filters__entry {
-        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-process-filters {
+    margin-right: calc(-1 * var(--adf-theme-spacing));
 
-        .adf-full-width {
-            display: flex;
-            width: 100%;
-        }
+    &__entry {
+        font-size: var(--theme-body-1-font-size);
+        color: var(--adf-theme-foreground-text-color-054);
+        display: flex;
+        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);
         }
     }
 }
diff --git a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts
index fe2dbe6e29..b1df4d9d4a 100644
--- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.spec.ts
+++ b/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');
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.html b/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.html
index c234fad5b4..3702cb778c 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.html
+++ b/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"
-         class="adf-task-filters__entry">
-        <button (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>
-            <span data-automation-id="adf-filter-label"
-                  class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
+
+<mat-nav-list class="adf-task-filters" *ngIf="filters$ | async as filterList; else loading">
+        <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'"
+            [class.adf-active]="currentFilter === filter"
+        >
+            <div class="adf-task-filters__entry">
+                <div class="adf-task-filters__entry-label">
+                    <adf-icon data-automation-id="adf-filter-icon"
+                        *ngIf="showIcons"
+                        [value]="filter.icon"
+                    ></adf-icon>
+                    <span data-automation-id="adf-filter-label">
+                        {{ filter.name | translate }}
+                    </span>
+                </div>
+                <span *ngIf="counters$[filter.key]"
+                    [attr.data-automation-id]="filter.key + '_filter-counter'"
+                    class="adf-task-filters__entry-counter"
+                    [class.adf-active]="wasFilterUpdated(filter.key)">
+                    {{ counters$[filter.key] | async }}
+                </span>
+            </div>
         </button>
-        <span *ngIf="counters$[filter.key]"
-              [attr.data-automation-id]="filter.key + '_filter-counter'"
-              class="adf-filter-action-button__counter"
-              [class.adf-active]=wasFilterUpdated(filter.key)>
-            {{ counters$[filter.key] | async }}
-        </span>
-    </div>
-</ng-container>
+    </mat-nav-list>
 <ng-template #loading>
     <ng-container>
         <div class="adf-app-list-spinner">
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.scss b/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.scss
index 3705e5213b..29c26cd7a6 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.scss
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/base-task-filters-cloud.component.scss
@@ -1,58 +1,39 @@
-.adf {
-    &-task-filters__entry {
+.adf-task-filters {
+    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;
-        height: 24px;
-        width: 100%;
-        font-size: var(--theme-body-1-font-size) !important;
-        font-weight: bold;
-        opacity: 1;
-
-        .adf-full-width {
-            display: flex;
-            width: 100%;
-        }
-
-        .adf-filter-action-button {
-            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;
-                background-color: var(--theme-accent-color);
-                color: var(--adf-theme-mat-grey-color-50);
-                font-size: smaller;
-            }
-        }
+        justify-content: space-between;
+        align-items: center;
+        flex: 1;
+        height: 100%;
 
         &:hover {
             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;
         }
     }
+
+    &__entry-label {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        gap: var(--adf-theme-spacing);
+    }
+
+    &__entry-counter {
+        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;
+        }
+    }
+
+    .adf-active .adf-task-filters__entry-label {
+        color: var(--theme-primary-color);
+    }
 }
diff --git a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts
index e9dc17e7af..045b61dcb2 100644
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.spec.ts
+++ b/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');