AAE-41496 Deprecate icon component (#11550)

* AAE-41496 Deprecate icon component * AAE-41496 Improve template * AAE-41496 Fix tests
2026-09-09 18:03:21 +00:00 · 2026-01-21 11:34:54 +00:00
parent 69b73c8490
commit d838d93abc
39 changed files with 211 additions and 255 deletions
@@ -11,10 +11,11 @@
        [attr.aria-label]="isActive() ? getTooltipTranslation(col?.title) + ' (' + ('SEARCH.SEARCH_HEADER.ACTIVE_FILTER' | translate) + ')' : getTooltipTranslation(col?.title)"
        [title]="getTooltipTranslation(col?.title)"
    >
-        <adf-icon
-            [value]="isActive() ? 'adf:custom_filter_filled' : 'adf:custom_filter'"
-            [ngClass]="{ 'adf-icon-active': isActive() || menuTrigger.menuOpen }"
+        <mat-icon
+            [svgIcon]="isActive() ? 'adf:custom_filter_filled' : 'adf:custom_filter'"
+            [ngClass]="{ 'adf-filter-icon-active': isActive() || menuTrigger.menuOpen }"
            class="adf-filter-icon"
+            aria-hidden="true"
        />
    </button>

@@ -4,22 +4,14 @@
 .adf-filter {
    &-button:has(.adf-filter-icon) {
        margin-left: -7px;
+    }

-        .adf-icon {
-            opacity: 1;
-            color: var(--adf-theme-foreground-icon-color);
+    &-icon {
+        opacity: 1;
+        color: var(--adf-theme-foreground-icon-color);

-            &.adf-icon-active {
-                color: var(--theme-primary-color);
-
-                span {
-                    border: 2px solid var(--adf-theme-background-card-color);
-                    width: 10px;
-                    height: 10px;
-                    top: -3px;
-                    right: -6px;
-                }
-            }
+        &-active {
+            color: var(--theme-primary-color);
        }
    }

@@ -28,8 +28,9 @@ import { MatMenuHarness } from '@angular/material/menu/testing';
 import { MatButtonHarness } from '@angular/material/button/testing';
 import { MatInputHarness } from '@angular/material/input/testing';
 import { provideRouter } from '@angular/router';
-import { IconComponent, UnitTestingUtils } from '@alfresco/adf-core';
+import { UnitTestingUtils } from '@alfresco/adf-core';
 import { MatIconRegistry } from '@angular/material/icon';
+import { MatIconHarness } from '@angular/material/icon/testing';

 const mockCategory: SearchCategory = {
    id: 'queryName',
@@ -149,18 +150,20 @@ describe('SearchFilterContainerComponent', () => {
        expect(eventRaised).toBe(true);
    });

-    it('should display correct icon based on active state of the filter', () => {
+    it('should display correct icon based on active state of the filter', async () => {
        component.isActive = () => false;
        fixture.detectChanges();

-        const inactiveIcon: IconComponent = unitTestingUtils.getByCSS('.adf-filter-icon').componentInstance;
-        expect(inactiveIcon.value).toBe('adf:custom_filter');
+        const icon = await loader.getHarnessOrNull(MatIconHarness.with({ selector: '.adf-filter-icon' }));
+
+        expect(await icon.getNamespace()).toBe('adf');
+        expect(await icon.getName()).toBe('custom_filter');

        component.isActive = () => true;
        fixture.detectChanges();

-        const activeIcon: IconComponent = unitTestingUtils.getByCSS('.adf-filter-icon').componentInstance;
-        expect(activeIcon.value).toBe('adf:custom_filter_filled');
+        expect(await icon.getNamespace()).toBe('adf');
+        expect(await icon.getName()).toBe('custom_filter_filled');
    });

    it('should register custom icons when component is initialized', () => {
@@ -17,7 +17,7 @@

 import { Component, ElementRef, EventEmitter, Input, OnInit, Output, ViewChild, ViewEncapsulation } from '@angular/core';
 import { ConfigurableFocusTrap, ConfigurableFocusTrapFactory } from '@angular/cdk/a11y';
-import { DataColumn, IconComponent, TranslationService } from '@alfresco/adf-core';
+import { DataColumn, TranslationService } from '@alfresco/adf-core';
 import { SearchWidgetContainerComponent } from '../search-widget-container/search-widget-container.component';
 import { SearchHeaderQueryBuilderService } from '../../services/search-header-query-builder.service';
 import { SearchCategory } from '../../models/search-category.interface';
@@ -28,11 +28,19 @@ import { MatButtonModule } from '@angular/material/button';
 import { TranslatePipe } from '@ngx-translate/core';
 import { MatDialogModule } from '@angular/material/dialog';
 import { DomSanitizer } from '@angular/platform-browser';
-import { MatIconRegistry } from '@angular/material/icon';
+import { MatIconModule, MatIconRegistry } from '@angular/material/icon';

@Component({
    selector: 'adf-search-filter-container',
-    imports: [CommonModule, MatButtonModule, MatMenuModule, IconComponent, SearchWidgetContainerComponent, TranslatePipe, MatDialogModule],
+    imports: [
+        CommonModule,
+        MatButtonModule,
+        MatMenuModule,
+        MatIconModule,
+        SearchWidgetContainerComponent,
+        TranslatePipe,
+        MatDialogModule
+    ],
    templateUrl: './search-filter-container.component.html',
    styleUrls: ['./search-filter-container.component.scss'],
    encapsulation: ViewEncapsulation.None
@@ -22,9 +22,10 @@
                            color="primary"
                            mode="indeterminate"
                            [diameter]="24"
-                            *ngIf="node.isLoading; else loadMoreIcon" />
+                            *ngIf="node.isLoading; else loadMoreIcon"
+                        />
                        <ng-template #loadMoreIcon>
-                            <adf-icon [value]="'chevron_right'" />
+                            <mat-icon adf-icon="chevron_right" aria-hidden="true" />
                        </ng-template>
                    </button>
                </div>
@@ -46,19 +47,23 @@
                matTreeNodePadding
                [adf-context-menu]="contextMenuOptions"
                [adf-context-menu-enabled]="!!contextMenuOptions"
-                (contextmenu)="contextMenuSource = node">
+                (contextmenu)="contextMenuSource = node"
+            >
                <div class="adf-tree-expand-collapse-container">
-                    <button *ngIf="node.hasChildren"
-                            class="adf-tree-expand-collapse-button"
-                            (click)="expandCollapseNode(node)"
-                            mat-icon-button>
+                    <button 
+                        *ngIf="node.hasChildren"
+                        class="adf-tree-expand-collapse-button"
+                        (click)="expandCollapseNode(node)"
+                        mat-icon-button
+                    >
                        <mat-progress-spinner
                            color="primary"
                            mode="indeterminate"
                            [diameter]="24"
-                            *ngIf="node.isLoading; else expandCollapseIcon" />
+                            *ngIf="node.isLoading; else expandCollapseIcon"
+                        />
                        <ng-template #expandCollapseIcon>
-                            <adf-icon [value]="expandCollapseIconValue(node)" />
+                            <mat-icon [adf-icon]="expandCollapseIconValue(node)" aria-hidden="true" />
                        </ng-template>
                    </button>
                </div>
@@ -30,6 +30,7 @@ import { HarnessLoader } from '@angular/cdk/testing';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
 import { MatProgressSpinnerHarness } from '@angular/material/progress-spinner/testing';
 import { MatCheckboxHarness } from '@angular/material/checkbox/testing';
+import { MatIconHarness } from '@angular/material/icon/testing';

 describe('TreeComponent', () => {
    let fixture: ComponentFixture<TreeComponent<TreeNode>>;
@@ -141,18 +142,17 @@ describe('TreeComponent', () => {
        expect(matSpinnerElement).not.toBeNull();
    });

-    it('should show provided expand/collapse icons', () => {
+    it('should show provided expand/collapse icons', async () => {
        component.treeService.treeNodes = Array.from(treeNodesMockExpanded);
        component.expandIcon = 'folder';
        component.collapseIcon = 'chevron_left';
        component.treeService.collapseNode(component.treeService.treeNodes[0]);
        fixture.detectChanges();
-        let nodeIcons: any = fixture.debugElement.queryAll(By.css('.adf-icon'));
-        expect(nodeIcons[0].nativeElement.innerText).toContain('folder');
+        const icon = await loader.getHarnessOrNull(MatIconHarness.with({ ancestor: '.adf-tree-expand-collapse-button' }));
+        expect(await icon.getName()).toContain('folder');
        spyOn(component.treeService.treeControl, 'isExpanded').and.returnValue(true);
        fixture.detectChanges();
-        nodeIcons = fixture.debugElement.queryAll(By.css('.adf-icon'));
-        expect(nodeIcons[0].nativeElement.innerText).toContain('chevron_left');
+        expect(await icon.getName()).toContain('chevron_left');
    });

    it('when node has more items to load loadMore node should appear', () => {
@@ -31,7 +31,7 @@ import {
 import { BehaviorSubject, merge, Observable, Subject } from 'rxjs';
 import { TreeNode, TreeNodeType } from '../models/tree-node.interface';
 import { TreeService } from '../services/tree.service';
-import { ContextMenuDirective, IconComponent, IconModule, PaginationModel, UserPreferencesService } from '@alfresco/adf-core';
+import { ContextMenuDirective, IconModule, PaginationModel, UserPreferencesService } from '@alfresco/adf-core';
 import { SelectionChange, SelectionModel } from '@angular/cdk/collections';
 import { TreeResponse } from '../models/tree-response.interface';
 import { MatCheckbox, MatCheckboxModule } from '@angular/material/checkbox';
@@ -52,7 +52,6 @@ import { MatMenuModule } from '@angular/material/menu';
        MatTreeModule,
        MatProgressSpinnerModule,
        MatButtonModule,
-        IconComponent,
        ContextMenuDirective,
        MatCheckboxModule,
        MatMenuModule,
@@ -1,7 +1,7 @@
 <div class="adf-file-uploading-row" [attr.aria-label]="file.name + ' ' + file.status">
    <mat-icon *ngIf="mimeType === 'default'" matListItemIcon class="adf-file-uploading-row__type" adf-icon="insert_drive_file" />

-    <adf-icon *ngIf="mimeType !== 'default'" value="adf:{{ mimeType }}" />
+    <mat-icon *ngIf="mimeType !== 'default'" svgIcon="adf:{{ mimeType }}" aria-hidden="true" />

    <span
        class="adf-file-uploading-row__name"
@@ -19,7 +19,7 @@ import { FileModel, FileUploadStatus } from '../../common/models/file.model';
 import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { MatListModule } from '@angular/material/list';
-import { FileSizePipe, IconComponent, IconModule } from '@alfresco/adf-core';
+import { FileSizePipe, IconModule } from '@alfresco/adf-core';
 import { MatChipsModule } from '@angular/material/chips';
 import { TranslatePipe } from '@ngx-translate/core';
 import { ToggleIconDirective } from '../directives/toggle-icon.directive';
@@ -32,7 +32,6 @@ import { FileUploadErrorPipe } from '../pipes/file-upload-error.pipe';
        CommonModule,
        IconModule,
        MatListModule,
-        IconComponent,
        MatChipsModule,
        TranslatePipe,
        ToggleIconDirective,