[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
2025-07-24 17:32:15 +00:00 · 2020-05-13 19:13:05 +05:30
parent b76bb750dc
commit 2b7943919d
23 changed files with 183 additions and 167 deletions
--- a/e2e/pages/adf/demo-shell/process-services/task-filters-demo.page.ts
+++ b/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> {
--- a/e2e/pages/adf/process-services/filters.page.ts
+++ b/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);
    }
 }
--- a/e2e/pages/adf/process-services/process-filters.page.ts
+++ b/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);
    }

--- a/e2e/pages/adf/process-services/task-filters.page.ts
+++ b/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;
--- 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,12 +1,17 @@
-<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-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">
@@ -14,4 +19,3 @@
        </div>
    </ng-container>
 </ng-template>
-</div>
--- 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
@@ -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-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;
-        }
    }
 }
--- 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
@@ -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();
    });

--- a/lib/process-services-cloud/src/lib/process/process-filters/components/process-filters-cloud.component.ts
+++ b/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;
+    }
 }
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.html
+++ b/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.html
@@ -1,12 +1,16 @@
-<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-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">
@@ -14,4 +18,3 @@
        </div>
    </ng-container>
 </ng-template>
-</div>
--- a/lib/process-services-cloud/src/lib/task/task-filters/components/task-filters-cloud.component.scss
+++ b/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-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;
-        }
    }
 }
--- 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
@@ -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', () => {
--- a/lib/process-services/src/lib/process-list/components/process-filters.component.html
+++ b/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>
--- a/lib/process-services/src/lib/process-list/components/process-filters.component.scss
+++ b/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-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;
-        }
    }
 }
--- a/lib/process-services/src/lib/process-list/components/process-filters.component.spec.ts
+++ b/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();
        });
--- a/lib/process-services/src/lib/process-list/components/process-filters.component.ts
+++ b/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);
    }

--- a/lib/process-services/src/lib/task-list/components/task-filters.component.html
+++ b/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>
--- a/lib/process-services/src/lib/task-list/components/task-filters.component.scss
+++ b/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-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;
-        }
    }
 }
--- a/lib/process-services/src/lib/task-list/components/task-filters.component.spec.ts
+++ b/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();
        });
--- a/lib/testing/src/lib/process-services-cloud/pages/process-filters-cloud-component.page.ts
+++ b/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"]`));
    }
 }
--- a/lib/testing/src/lib/process-services-cloud/pages/task-filters-cloud-component.page.ts
+++ b/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"]`));
    }

 }
--- a/lib/testing/src/lib/process-services/pages/filters.page.ts
+++ b/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);
--- a/lib/testing/src/lib/process-services/pages/process-filters.page.ts
+++ b/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> {
--- a/lib/testing/src/lib/process-services/pages/task-filters.page.ts
+++ b/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> {