[ADF-5103] FE - Process/task filter - Backporting the components styles to ADF (#5614)

* * New Filters style

* * Improved css

* * Fixed wrong css selector

* * Fixed failing unit tests

* * Fixed failing tests
ests

* * FIXED E2E PROCESS-SERVICE TESTS

* * Fixed failing e2e

* * FIxed process-service cloud e2e

* * Removed xpath locator

* * New Filters style

* * Improved css

e2e/pages/adf/demo-shell/process-services/task-filters-demo.page.ts

@@ -21,11 +21,11 @@ import { TaskFiltersPage } from '../../process-services/task-filters.page';
 
 export class TaskFiltersDemoPage {
 
-    myTasks: ElementFinder = element(by.css('span[data-automation-id="My Tasks_filter"]'));
-    queuedTask: ElementFinder = element(by.css('span[data-automation-id="Queued Tasks_filter"]'));
-    completedTask: ElementFinder = element(by.css('span[data-automation-id="Completed Tasks_filter"]'));
-    involvedTask: ElementFinder = element(by.css('span[data-automation-id="Involved Tasks_filter"]'));
-    activeFilter: ElementFinder = element(by.css("mat-list-item[class*='active']"));
+    myTasks: ElementFinder = element(by.css('button[data-automation-id="My Tasks_filter"]'));
+    queuedTask: ElementFinder = element(by.css('button[data-automation-id="Queued Tasks_filter"]'));
+    completedTask: ElementFinder = element(by.css('button[data-automation-id="Completed Tasks_filter"]'));
+    involvedTask: ElementFinder = element(by.css('button[data-automation-id="Involved Tasks_filter"]'));
+    activeFilter: ElementFinder = element(by.css('adf-task-filters .adf-active'));
 
     myTasksFilter(): TaskFiltersPage {
         return new TaskFiltersPage(this.myTasks);
@@ -44,7 +44,7 @@ export class TaskFiltersDemoPage {
     }
 
     customTaskFilter(filterName): TaskFiltersPage {
-        return new TaskFiltersPage(element(by.css(`span[data-automation-id="${filterName}_filter"]`)));
+        return new TaskFiltersPage(element(by.css(`button[data-automation-id="${filterName}_filter"]`)));
     }
 
     async checkActiveFilterActive(): Promise<string> {

e2e/pages/adf/process-services/filters.page.ts

@@ -20,7 +20,7 @@ import { by, element, ElementFinder } from 'protractor';
 
 export class FiltersPage {
 
-    activeFilter: ElementFinder = element(by.css('mat-list-item[class*="active"]'));
+    activeFilter: ElementFinder = element(by.css('.adf-active'));
     dataTable: DataTableComponentPage = new DataTableComponentPage();
 
     async getActiveFilter(): Promise<string> {
@@ -29,7 +29,7 @@ export class FiltersPage {
 
     async goToFilter(filterName): Promise<void> {
         await BrowserActions.closeMenuAndDialogs();
-        await BrowserActions.clickExecuteScript(`span[data-automation-id="${filterName}_filter"]`);
+        await BrowserActions.clickExecuteScript(`button[data-automation-id="${filterName}_filter"]`);
     }
 
     async sortByName(sortOrder: string): Promise<void> {
@@ -41,7 +41,7 @@ export class FiltersPage {
     }
 
     async checkFilterIsHighlighted(filterName: string): Promise<void> {
-        const highlightedFilter: ElementFinder = element(by.css(`mat-list-item.adf-active span[data-automation-id='${filterName}_filter']`));
+        const highlightedFilter: ElementFinder = element(by.css(`.adf-active button[data-automation-id='${filterName}_filter']`));
         await BrowserVisibility.waitUntilElementIsVisible(highlightedFilter);
     }
 }

e2e/pages/adf/process-services/process-filters.page.ts

@@ -21,9 +21,9 @@ import { by, element, ElementFinder, Locator } from 'protractor';
 export class ProcessFiltersPage {
 
     dataTable = new DataTableComponentPage();
-    runningFilter: ElementFinder = element(by.css('span[data-automation-id="Running_filter"]'));
-    completedFilter: ElementFinder = element(by.css('div[class="mat-list-text"] > span[data-automation-id="Completed_filter"]'));
-    allFilter: ElementFinder = element(by.css('span[data-automation-id="All_filter"]'));
+    runningFilter: ElementFinder = element(by.css('button[data-automation-id="Running_filter"]'));
+    completedFilter: ElementFinder = element(by.css('button[data-automation-id="Completed_filter"]'));
+    allFilter: ElementFinder = element(by.css('button[data-automation-id="All_filter"]'));
     createProcessButton: ElementFinder = element(by.css('.app-processes-menu button[data-automation-id="create-button"] > span'));
     newProcessButton: ElementFinder = element(by.css('div > button[data-automation-id="btn-start-process"]'));
     processesPage: ElementFinder = element(by.css('div[class="app-grid"] > div[class="app-grid-item app-processes-menu"]'));
@@ -33,7 +33,7 @@ export class ProcessFiltersPage {
     rows: Locator = by.css('adf-process-instance-list div[class="adf-datatable-body"] adf-datatable-row[class*="adf-datatable-row"]');
     tableBody: ElementFinder = element.all(by.css('adf-datatable div[class="adf-datatable-body"]')).first();
     nameColumn: Locator = by.css('div[class*="adf-datatable-body"] adf-datatable-row[class*="adf-datatable-row"] div[title="Name"] span');
-    processIcon: Locator = by.xpath('ancestor::div[@class="mat-list-item-content"]/mat-icon');
+    processIcon = by.css('adf-icon[data-automation-id="adf-filter-icon"]');
 
     async startProcess(): Promise<StartProcessPage> {
         await this.clickCreateProcessButton();
@@ -78,7 +78,7 @@ export class ProcessFiltersPage {
     }
 
     async checkFilterIsHighlighted(filterName): Promise<void> {
-        const processNameHighlighted: ElementFinder = element(by.css(`mat-list-item.adf-active span[data-automation-id='${filterName}_filter']`));
+        const processNameHighlighted: ElementFinder = element(by.css(`adf-process-instance-filters .adf-active button[data-automation-id='${filterName}_filter']`));
         await BrowserVisibility.waitUntilElementIsVisible(processNameHighlighted);
     }
 
@@ -104,25 +104,25 @@ export class ProcessFiltersPage {
     }
 
     async checkFilterIsDisplayed(name): Promise<void> {
-        const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`));
+        const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`));
         await BrowserVisibility.waitUntilElementIsVisible(filterName);
     }
 
     async checkFilterHasNoIcon(name): Promise<void> {
-        const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`));
+        const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`));
         await BrowserVisibility.waitUntilElementIsVisible(filterName);
         await BrowserVisibility.waitUntilElementIsNotVisible(filterName.element(this.processIcon));
     }
 
     async getFilterIcon(name): Promise<string> {
-        const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`));
+        const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`));
         await BrowserVisibility.waitUntilElementIsVisible(filterName);
         const icon = filterName.element(this.processIcon);
         return BrowserActions.getText(icon);
     }
 
     async checkFilterIsNotDisplayed(name): Promise<void> {
-        const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`));
+        const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`));
         await BrowserVisibility.waitUntilElementIsNotVisible(filterName);
     }
 

e2e/pages/adf/process-services/task-filters.page.ts

@@ -15,13 +15,13 @@
  * limitations under the License.
  */
 
-import { by, ElementFinder, Locator } from 'protractor';
+import { by, ElementFinder } from 'protractor';
 import { BrowserVisibility, BrowserActions } from '@alfresco/adf-testing';
 
 export class TaskFiltersPage {
 
     filter;
-    taskIcon: Locator = by.xpath("ancestor::div[@class='mat-list-item-content']/mat-icon");
+    taskIcon = by.css('adf-icon[data-automation-id="adf-filter-icon"]');
 
     constructor(filter: ElementFinder) {
         this.filter = filter;

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

@@ -1,17 +1,21 @@
-<div class="menu-container">
-  <mat-list class="adf-menu-list" *ngIf="filters$ | async as filterList; else loading">
-      <mat-list-item (click)="selectFilterById(filter.id)" *ngFor="let filter of filterList"
-                     class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
-          <mat-icon *ngIf="showIcons && filter.icon" matListIcon class="adf-filters__entry-icon">{{filter.icon}}
-          </mat-icon>
-          <span matLine [attr.data-automation-id]="filter.key + '_filter'">{{filter.name | translate}}</span>
-      </mat-list-item>
-  </mat-list>
-  <ng-template #loading>
+
+<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)="selectFilterById(filter.id)"
+          [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>
+<ng-template #loading>
     <ng-container>
         <div class="adf-app-list-spinner">
             <mat-spinner></mat-spinner>
         </div>
     </ng-container>
-  </ng-template>
-</div>
+</ng-template>

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

@@ -2,33 +2,31 @@
     $primary: map-get($theme, primary);
 
     .adf {
-
         &-filters__entry {
+            padding: 12px 0 !important;
+            height: 24px;
+            width: 100%;
             cursor: pointer;
-            font-size: 14px!important;
+            font-size: 14px !important;
             font-weight: bold;
             opacity: 0.54;
-            padding-left: 30px;
 
-            .mat-list-item-content {
-                height: 34px;
-            }
+            .adf-full-width {
+                display: flex;
+                width: 100%;
             }
 
-        &-filters__entry-icon {
-            padding-right: 12px !important;
-            padding-left: 0 !important;
+            .adf-filter-action-button .adf-filter-action-button__label {
+                padding-left: 20px;
+                margin: 0 8px !important;
+            }
         }
-
         &-filters__entry {
-            &.adf-active, &:hover {
+            &.adf-active,
+            &:hover {
                 color: mat-color($primary);
                 opacity: 1;
             }
         }
-
-        &-menu-list {
-            padding-top: 0 !important;
-        }
     }
 }

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

@@ -36,6 +36,7 @@ describe('ProcessFiltersCloudComponent', () => {
     const fakeGlobalFilter = [
         new ProcessFilterCloudModel({
             name: 'FakeAllProcesses',
+            key: 'FakeAllProcesses',
             icon: 'adjust',
             id: '10',
             status: ''
@@ -99,7 +100,7 @@ describe('ProcessFiltersCloudComponent', () => {
         fixture.whenStable().then(() => {
             fixture.detectChanges();
             expect(component.filters.length).toBe(3);
-            const filters = fixture.nativeElement.querySelectorAll('.adf-filters__entry-icon');
+            const filters = fixture.nativeElement.querySelectorAll('.adf-icon');
             expect(filters.length).toBe(3);
             expect(filters[0].innerText).toContain('adjust');
             expect(filters[1].innerText).toContain('inbox');
@@ -117,7 +118,7 @@ describe('ProcessFiltersCloudComponent', () => {
 
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon'));
+            const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
             expect(filters.length).toBe(0);
             done();
         });
@@ -131,7 +132,7 @@ describe('ProcessFiltersCloudComponent', () => {
         component.showIcons = true;
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            const filters = fixture.debugElement.queryAll(By.css('mat-list-item[class*="adf-filters__entry"]'));
+            const filters = fixture.debugElement.queryAll(By.css('.adf-filters__entry'));
             expect(component.filters.length).toBe(3);
             expect(filters.length).toBe(3);
             expect(filters[0].nativeElement.innerText).toContain('FakeAllProcesses');
@@ -274,11 +275,11 @@ describe('ProcessFiltersCloudComponent', () => {
         component.filterClick.subscribe((res) => {
             expect(res).toBeDefined();
             expect(component.currentFilter).toBeDefined();
-            expect(component.currentFilter.name).toEqual('FakeRunningProcesses');
+            expect(component.currentFilter.name).toEqual('FakeAllProcesses');
             done();
         });
 
-        const filterButton = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="FakeRunningProcesses_filter"]');
+        const filterButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${fakeGlobalFilter[0].key}_filter"]`);
         filterButton.click();
     });
 

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

@@ -175,4 +175,8 @@ export class ProcessFiltersCloudComponent implements OnInit, OnChanges, OnDestro
         this.onDestroy$.next(true);
         this.onDestroy$.complete();
     }
+
+    isActiveFilter(filter: any): boolean {
+        return this.currentFilter.name === filter.name;
+    }
 }

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

@@ -1,17 +1,20 @@
-<div class="menu-container">
-  <mat-list class="adf-menu-list" *ngIf="filters$ | async as filterList; else loading">
-      <mat-list-item (click)="selectFilterAndEmit({id: filter.id})" *ngFor="let filter of filterList"
-                     class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
-          <mat-icon *ngIf="showIcons && filter.icon" matListIcon class="adf-filters__entry-icon">{{filter.icon}}
-          </mat-icon>
-          <span matLine [attr.data-automation-id]="filter.key + '-filter'">{{filter.name | translate}}</span>
-      </mat-list-item>
-  </mat-list>
-  <ng-template #loading>
+<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)="selectFilterAndEmit(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>
+<ng-template #loading>
     <ng-container>
         <div class="adf-app-list-spinner">
             <mat-spinner></mat-spinner>
         </div>
     </ng-container>
-  </ng-template>
-</div>
+</ng-template>

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

@@ -2,33 +2,31 @@
     $primary: map-get($theme, primary);
 
     .adf {
-
         &-filters__entry {
+            padding: 12px 0 !important;
+            height: 24px;
+            width: 100%;
             cursor: pointer;
-            font-size: 14px!important;
+            font-size: 14px !important;
             font-weight: bold;
             opacity: 0.54;
-            padding-left: 30px;
 
-            .mat-list-item-content {
-                height: 34px;
-            }
+            .adf-full-width {
+                display: flex;
+                width: 100%;
             }
 
-        &-filters__entry-icon {
-            padding-right: 12px !important;
-            padding-left: 0 !important;
+            .adf-filter-action-button .adf-filter-action-button__label {
+                padding-left: 20px;
+                margin: 0 8px !important;
+            }
         }
-
         &-filters__entry {
-            &.adf-active, &:hover {
+            &.adf-active,
+            &:hover {
                 color: mat-color($primary);
                 opacity: 1;
             }
         }
-
-        &-menu-list {
-            padding-top: 0 !important;
-        }
     }
 }

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

@@ -76,7 +76,7 @@ describe('TaskFiltersCloudComponent', () => {
         fixture.whenStable().then(() => {
             fixture.detectChanges();
             expect(component.filters.length).toBe(3);
-            const filters = fixture.nativeElement.querySelectorAll('.adf-filters__entry-icon');
+            const filters = fixture.nativeElement.querySelectorAll('.adf-icon');
             expect(filters.length).toBe(3);
             expect(filters[0].innerText).toContain('adjust');
             expect(filters[1].innerText).toContain('done');
@@ -94,7 +94,7 @@ describe('TaskFiltersCloudComponent', () => {
 
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon'));
+            const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
             expect(filters.length).toBe(0);
             done();
         });
@@ -108,7 +108,7 @@ describe('TaskFiltersCloudComponent', () => {
         component.showIcons = true;
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            const filters = fixture.debugElement.queryAll(By.css('mat-list-item[class*="adf-filters__entry"]'));
+            const filters = fixture.debugElement.queryAll(By.css('.adf-filters__entry'));
             expect(component.filters.length).toBe(3);
             expect(filters.length).toBe(3);
             expect(filters[0].nativeElement.innerText).toContain('FakeInvolvedTasks');
@@ -262,9 +262,10 @@ describe('TaskFiltersCloudComponent', () => {
 
         fixture.detectChanges();
         spyOn(component, 'selectFilterAndEmit').and.stub();
-        const filterButton = fixture.debugElement.nativeElement.querySelector('span[data-automation-id="fake-my-tast1-filter"]');
+        const filterButton = fixture.debugElement.nativeElement.querySelector(`[data-automation-id="${fakeGlobalFilter[1].key}_filter"]`);
+
         filterButton.click();
-        expect(component.selectFilterAndEmit).toHaveBeenCalledWith({id: fakeGlobalFilter[1].id});
+        expect(component.selectFilterAndEmit).toHaveBeenCalledWith(fakeGlobalFilter[1]);
     }));
 
     it('should reload filters by appName on binding changes', () => {

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

@@ -1,9 +1,11 @@
-<div class="menu-container">
-    <mat-list class="adf-menu-list">
-        <mat-list-item (click)="selectFilter(filter)" *ngFor="let filter of filters"
-                        class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
-            <mat-icon *ngIf="showIcon" matListIcon class="adf-filters__entry-icon">{{getFilterIcon(filter.icon)}}</mat-icon>
-            <span matLine [attr.data-automation-id]="filter.name + '_filter'">{{filter.name}}</span>
-        </mat-list-item>
-    </mat-list>
+<div *ngFor="let filter of filters" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
+    <button (click)="selectFilter(filter)"
+      [attr.aria-label]="filter.name | translate"
+      [id]="filter.id"
+      [attr.data-automation-id]="filter.name + '_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="showIcon" [value]="getFilterIcon(filter.icon)"></adf-icon>
+      <span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
+    </button>
 </div>

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

@@ -2,30 +2,31 @@
     $primary: map-get($theme, primary);
 
     .adf {
-
         &-filters__entry {
+            padding: 12px 0 !important;
+            height: 24px;
+            width: 100%;
             cursor: pointer;
-            font-size: 14px!important;
+            font-size: 14px !important;
             font-weight: bold;
             opacity: 0.54;
-            padding-left: 30px;
 
-            .mat-list-item-content {
-                height: 34px;
+            .adf-full-width {
+                display: flex;
+                width: 100%;
             }
-            &.adf-active, &:hover {
+
+            .adf-filter-action-button .adf-filter-action-button__label {
+                padding-left: 20px;
+                margin: 0 8px !important;
+            }
+        }
+        &-filters__entry {
+            &.adf-active,
+            &:hover {
                 color: mat-color($primary);
                 opacity: 1;
             }
         }
-
-        &-filters__entry-icon {
-            padding-right: 12px !important;
-            padding-left: 0 !important;
-        }
-
-        &-menu-list {
-            padding-top: 0 !important;
-        }
     }
 }

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

@@ -287,7 +287,7 @@ describe('ProcessFiltersComponent', () => {
         fixture.whenStable().then(() => {
             fixture.detectChanges();
             expect(filterList.filters.length).toBe(3);
-            const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon'));
+            const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
             expect(filters.length).toBe(3);
             expect(filters[0].nativeElement.innerText).toContain('dashboard');
             expect(filters[1].nativeElement.innerText).toContain('shuffle');
@@ -304,7 +304,7 @@ describe('ProcessFiltersComponent', () => {
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon'));
+            const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
             expect(filters.length).toBe(0);
             done();
         });

lib/process-services/src/lib/process-list/components/process-filters.component.ts

@@ -69,6 +69,7 @@ export class ProcessFiltersComponent implements OnInit, OnChanges {
     currentFilter: ProcessInstanceFilterRepresentation;
 
     filters: UserProcessInstanceFilterRepresentation [] = [];
+    active = false;
 
     private iconsMDL: IconModel;
 
@@ -147,6 +148,7 @@ export class ProcessFiltersComponent implements OnInit, OnChanges {
      */
     selectFilter(filter: ProcessInstanceFilterRepresentation) {
         this.currentFilter = filter;
+        this.active = true;
         this.filterClick.emit(filter);
     }
 

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

@@ -1,9 +1,13 @@
-<div class="menu-container">
-    <mat-list class="adf-menu-list">
-        <mat-list-item (click)="selectFilterAndEmit(filter)" *ngFor="let filter of filters"
-                      class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
-            <mat-icon *ngIf="showIcon" matListIcon class="adf-filters__entry-icon">{{getFilterIcon(filter.icon)}}</mat-icon>
-            <span matLine [attr.data-automation-id]="filter.name + '_filter'">{{filter.name}}</span>
-        </mat-list-item>
-    </mat-list>
+<div *ngFor="let filter of filters" class="adf-filters__entry" [class.adf-active]="currentFilter === filter">
+    <button (click)="selectFilterAndEmit(filter)"
+      [attr.aria-label]="filter.name | translate"
+      [id]="filter.id"
+      [attr.data-automation-id]="filter.name + '_filter'"
+      mat-button
+      class="adf-filter-action-button adf-full-width" fxLayout="row" fxLayoutAlign="space-between center">
+      <ng-container *ngIf="showIcon">
+        <adf-icon data-automation-id="adf-filter-icon" [value]="getFilterIcon(filter.icon)"></adf-icon>
+      </ng-container>
+      <span data-automation-id="adf-filter-label" class="adf-filter-action-button__label">{{ filter.name | translate }}</span>
+    </button>
 </div>

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

@@ -2,33 +2,31 @@
     $primary: map-get($theme, primary);
 
     .adf {
-
         &-filters__entry {
+            padding: 12px 0 !important;
+            height: 24px;
+            width: 100%;
             cursor: pointer;
-            font-size: 14px!important;
+            font-size: 14px !important;
             font-weight: bold;
             opacity: 0.54;
-            padding-left: 30px;
 
-            .mat-list-item-content {
-                height: 34px;
-            }
+            .adf-full-width {
+                display: flex;
+                width: 100%;
             }
 
-        &-filters__entry-icon {
-            padding-right: 12px !important;
-            padding-left: 0 !important;
+            .adf-filter-action-button .adf-filter-action-button__label {
+                padding-left: 20px;
+                margin: 0 8px !important;
+            }
         }
-
         &-filters__entry {
-            &.adf-active, &:hover {
+            &.adf-active,
+            &:hover {
                 color: mat-color($primary);
                 opacity: 1;
             }
         }
-
-        &-menu-list {
-            padding-top: 0 !important;
-        }
     }
 }

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

@@ -321,7 +321,7 @@ describe('TaskFiltersComponent', () => {
         fixture.whenStable().then(() => {
             fixture.detectChanges();
             expect(component.filters.length).toBe(3);
-            const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon'));
+            const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
             expect(filters.length).toBe(3);
             expect(filters[0].nativeElement.innerText).toContain('format_align_left');
             expect(filters[1].nativeElement.innerText).toContain('check_circle');
@@ -338,7 +338,7 @@ describe('TaskFiltersComponent', () => {
         fixture.detectChanges();
         fixture.whenStable().then(() => {
             fixture.detectChanges();
-            const filters: any = fixture.debugElement.queryAll(By.css('.adf-filters__entry-icon'));
+            const filters: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
             expect(filters.length).toBe(0);
             done();
         });

lib/testing/src/lib/process-services-cloud/pages/process-filters-cloud-component.page.ts

@@ -15,18 +15,18 @@
  * limitations under the License.
  */
 
-import { by, element, ElementFinder, Locator } from 'protractor';
+import { by, element, ElementFinder } from 'protractor';
 import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { BrowserActions } from '../../core/utils/browser-actions';
 
 export class ProcessFiltersCloudComponentPage {
 
     filter: ElementFinder;
-    filterIcon: Locator = by.xpath("ancestor::div[@class='mat-list-item-content']/mat-icon");
+    filterIcon = by.css('adf-icon[data-automation-id="adf-filter-icon"]');
 
     processFilters: ElementFinder = element(by.css("mat-expansion-panel[data-automation-id='Process Filters']"));
 
-    activeFilter: ElementFinder = element(by.css("mat-list-item[class*='active'] span"));
+    activeFilter: ElementFinder = element(by.css('.adf-active [data-automation-id="adf-filter-label"]'));
     processFiltersList: ElementFinder = element(by.css('adf-cloud-process-filters'));
 
     async checkProcessFilterIsDisplayed(filterName: string): Promise<void> {
@@ -106,6 +106,6 @@ export class ProcessFiltersCloudComponentPage {
     }
 
     getProcessFilterLocatorByFilterName(filterName: string): ElementFinder {
-        return element(by.css(`span[data-automation-id="${filterName}_filter"]`));
+        return element(by.css(`button[data-automation-id="${filterName}_filter"]`));
     }
 }

lib/testing/src/lib/process-services-cloud/pages/task-filters-cloud-component.page.ts

@@ -23,7 +23,7 @@ export class TaskFiltersCloudComponentPage {
 
     filter: ElementFinder;
     taskFilters: ElementFinder = element(by.css(`mat-expansion-panel[data-automation-id='Task Filters']`));
-    activeFilter: ElementFinder = element(by.css("mat-list-item[class*='active'] span"));
+    activeFilter: ElementFinder = element(by.css('.adf-active [data-automation-id="adf-filter-label"]'));
 
     async checkTaskFilterIsDisplayed(filterName: string): Promise<void> {
         this.filter = this.getTaskFilterLocatorByFilterName(filterName);
@@ -51,7 +51,7 @@ export class TaskFiltersCloudComponentPage {
     }
 
     getTaskFilterLocatorByFilterName(filterName: string): ElementFinder {
-        return element(by.css(`span[data-automation-id="${filterName}-filter"]`));
+        return element(by.css(`button[data-automation-id="${filterName}_filter"]`));
     }
 
 }

lib/testing/src/lib/process-services/pages/filters.page.ts

@@ -17,13 +17,13 @@
 
 import { BrowserVisibility } from '../../core/utils/browser-visibility';
 import { BrowserActions } from '../../core/utils/browser-actions';
-import { by, element, ElementFinder, Locator } from 'protractor';
+import { by, element, ElementFinder } from 'protractor';
 
 export class FiltersPage {
 
     accordionMenu: ElementFinder = element(by.css('.app-processes-menu mat-accordion'));
     buttonWindow: ElementFinder = element(by.css('div > button[data-automation-id="btn-start-process"] > div'));
-    processIcon: Locator = by.xpath('ancestor::div[@class="mat-list-item-content"]/mat-icon');
+    processIcon = by.css('adf-icon[data-automation-id="adf-filter-icon"]');
 
     async clickFilterButton(filterElement: ElementFinder): Promise<void> {
         await BrowserActions.click(filterElement);
@@ -34,7 +34,7 @@ export class FiltersPage {
     }
 
     async isFilterHighlighted(filterName): Promise<boolean> {
-        const processNameHighlighted: ElementFinder = element(by.css(`mat-list-item.adf-active span[data-automation-id='${filterName}_filter']`));
+        const processNameHighlighted: ElementFinder = element(by.css(`.adf-active button[data-automation-id='${filterName}_filter']`));
         try {
             await BrowserVisibility.waitUntilElementIsVisible(processNameHighlighted);
             return true;
@@ -44,7 +44,7 @@ export class FiltersPage {
     }
 
     async isFilterDisplayed(name): Promise<boolean> {
-        const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`));
+        const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`));
         try {
             await BrowserVisibility.waitUntilElementIsVisible(filterName);
             return true;
@@ -54,13 +54,13 @@ export class FiltersPage {
     }
 
     async checkFilterHasNoIcon(name): Promise<void> {
-        const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`));
+        const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`));
         await BrowserVisibility.waitUntilElementIsVisible(filterName);
         await BrowserVisibility.waitUntilElementIsNotVisible(filterName.element(this.processIcon));
     }
 
     async getFilterIcon(name): Promise<string> {
-        const filterName: ElementFinder = element(by.css(`span[data-automation-id='${name}_filter']`));
+        const filterName: ElementFinder = element(by.css(`button[data-automation-id='${name}_filter']`));
         await BrowserVisibility.waitUntilElementIsVisible(filterName);
         const icon = filterName.element(this.processIcon);
         return BrowserActions.getText(icon);

lib/testing/src/lib/process-services/pages/process-filters.page.ts

@@ -22,9 +22,9 @@ export class ProcessFiltersPage {
 
     filtersPage = new FiltersPage();
 
-    runningFilter: ElementFinder = element(by.css('span[data-automation-id="Running_filter"]'));
-    completedFilter: ElementFinder = element(by.css('div[class="mat-list-text"] > span[data-automation-id="Completed_filter"]'));
-    allFilter: ElementFinder = element(by.css('span[data-automation-id="All_filter"]'));
+    runningFilter: ElementFinder = element(by.css('button[data-automation-id="Running_filter"]'));
+    completedFilter: ElementFinder = element(by.css('button[data-automation-id="Completed_filter"]'));
+    allFilter: ElementFinder = element(by.css('button[data-automation-id="All_filter"]'));
     accordionMenu: ElementFinder = element(by.css('.app-processes-menu mat-accordion'));
 
     async clickRunningFilterButton(): Promise<void> {

lib/testing/src/lib/process-services/pages/task-filters.page.ts

@@ -22,10 +22,10 @@ export class TaskFiltersPage {
 
     filtersPage = new FiltersPage();
 
-    myTasks: ElementFinder = element(by.css('span[data-automation-id="My Tasks_filter"]'));
-    queuedTask: ElementFinder = element(by.css('span[data-automation-id="Queued Tasks_filter"]'));
-    completedTask: ElementFinder = element(by.css('span[data-automation-id="Completed Tasks_filter"]'));
-    involvedTask: ElementFinder = element(by.css('span[data-automation-id="Involved Tasks_filter"]'));
+    myTasks: ElementFinder = element(by.css('button[data-automation-id="My Tasks_filter"]'));
+    queuedTask: ElementFinder = element(by.css('button[data-automation-id="Queued Tasks_filter"]'));
+    completedTask: ElementFinder = element(by.css('button[data-automation-id="Completed Tasks_filter"]'));
+    involvedTask: ElementFinder = element(by.css('button[data-automation-id="Involved Tasks_filter"]'));
     accordionMenu: ElementFinder = element(by.css('.app-processes-menu mat-accordion'));
 
     async clickMyTasksFilterButton(): Promise<void> {