inteligr8/alfresco-ng2-components
1
0
Fork 0
mirror of https://github.com/Alfresco/alfresco-ng2-components.git synced 2026-09-09 18:03:21 +00:00
Code Issues Packages Projects Releases Wiki Activity

AAE-41330 Unify adf-icon use in adf-core (#11527)

Browse Source 
* AAE-41330 Unify adf-icon use in adf-core

* AAE-41330 Fix icon names
This commit is contained in:
Diogo Bastos
2026-01-14 16:13:11 +00:00
committed by GitHub
parent e01cd40b1f
commit 304216b36b
11 changed files with 72 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files
lib/core/breadcrumbs/src/_stories/demo-breadcrumb.component.ts
+3 -3
View File
@@ -18,10 +18,10 @@
import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatMenuModule } from '@angular/material/menu';
import { MatIconModule } from '@angular/material/icon';
import { BreadcrumbItemComponent } from '../components/breadcrumb-item/breadcrumb-item.component';
import { BreadcrumbComponent } from '../components/breadcrumb/breadcrumb.component';
import { NgIf } from '@angular/common';
import { IconModule } from '@alfresco/adf-core';
@Component({
selector: 'adf-demo-breadcrumb',
@@ -51,7 +51,7 @@ import { NgIf } from '@angular/common';
<div>
Current Page
<button mat-icon-button [matMenuTriggerFor]="menu" aria-label="Menu">
<mat-icon>menu_open</mat-icon>
<mat-icon adf-icon="menu_open" />
</button>
<mat-menu #menu="matMenu">
@@ -63,7 +63,7 @@ import { NgIf } from '@angular/common';
</adf-breadcrumb>
`,
standalone: true,
imports: [MatButtonModule, MatMenuModule, MatIconModule, BreadcrumbItemComponent, BreadcrumbComponent, NgIf]
imports: [MatButtonModule, MatMenuModule, IconModule, BreadcrumbItemComponent, BreadcrumbComponent, NgIf]
})
export class DemoBreadcrumbComponent {
compact = false;
lib/core/feature-flags/src/lib/components/flags/flags.component.html
+3 -3
View File
@@ -21,8 +21,8 @@
</th>
<td mat-cell class="adf-icon-col" *matCellDef="let element">
<button mat-icon-button *ngIf="element.fictive; else flagFromApi" class="adf-fictive-flag-button" (click)="onDelete(element.flag)">
<mat-icon class="material-icons-outlined adf-custom-flag-icon" fontIcon="memory" />
<mat-icon class="material-icons-outlined adf-trash-icon" fontIcon="delete" />
<mat-icon class="material-icons-outlined adf-custom-flag-icon" adf-icon="memory" />
<mat-icon class="material-icons-outlined adf-trash-icon" adf-icon="delete" />
</button>
</td>
</ng-container>
@@ -40,7 +40,7 @@
<th mat-header-cell class="adf-val-col header-cell" *matHeaderCellDef>
<div class="adf-input-field-buttons-container">
<button *ngIf="showPlusButton$ | async" mat-icon-button title="{{'CORE.FEATURE-FLAGS.ADD_NEW' | translate}}" color="accent" (click)="onAddButtonClick()">
<mat-icon class="material-icons-outlined" fontIcon="add_circle" />
<mat-icon class="material-icons-outlined" adf-icon="add_circle" />
</button>
<button *ngIf="inputValue" matSuffix mat-icon-button aria-label="Clear" (click)="onClearInput()" class="adf-clear-button">
<mat-icon adf-icon="cancel" />
lib/core/src/lib/info-drawer/info-drawer.component.stories.ts
+5 -5
View File
@@ -20,7 +20,7 @@ import { InfoDrawerComponent, InfoDrawerTabComponent } from './info-drawer.compo
import { InfoDrawerButtonsDirective, InfoDrawerContentDirective, InfoDrawerTitleDirective } from './info-drawer-layout.component';
import { mockTabText, mockCardText } from './mock/info-drawer.mock';
import { provideStoryCore } from '../stories/core-story.providers';
import { MatIconModule } from '@angular/material/icon';
import { IconModule } from '../icon/icon.module';
type InfoDrawerStoryArgs = InfoDrawerComponent & {
showSecondTab?: boolean;
@@ -48,7 +48,7 @@ const meta: Meta<InfoDrawerStoryArgs> = {
InfoDrawerTitleDirective,
InfoDrawerButtonsDirective,
InfoDrawerContentDirective,
MatIconModule
IconModule
]
}),
applicationConfig({
@@ -240,7 +240,7 @@ export const TabLayoutWithTextLabels: Story = {
props: args,
template: `<adf-info-drawer title="{{ title }}" [showHeader]="showHeader" (currentTab)="currentTab($event)" selectedIndex="{{ selectedIndex }}">
<div info-drawer-buttons>
<mat-icon>clear</mat-icon>
<mat-icon adf-icon="clear" />
</div>
<adf-info-drawer-tab [label]="label1" [icon]="[icon1]">
@@ -276,7 +276,7 @@ export const TabLayoutWithIconLabels: Story = {
props: args,
template: `<adf-info-drawer title="{{ title }}" [showHeader]="showHeader" (currentTab)="currentTab($event)" selectedIndex="{{ selectedIndex }}">
<div info-drawer-buttons>
<mat-icon>clear</mat-icon>
<mat-icon adf-icon="clear" />
</div>
<adf-info-drawer-tab [label]="label1" [icon]="[icon1]">
@@ -314,7 +314,7 @@ export const SingleLayout: Story = {
<div info-drawer-title>File info</div>
<div info-drawer-buttons>
<mat-icon>clear</mat-icon>
<mat-icon adf-icon="clear" />
</div>
<div info-drawer-content>
lib/core/src/lib/language-menu/language-menu.component.stories.ts
+5 -11
View File
@@ -22,14 +22,14 @@ import { LanguageServiceMock } from '../mock/language.service.mock';
import { provideStoryCore } from '../stories/core-story.providers';
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { IconModule } from '../icon/icon.module';
const meta: Meta<LanguageMenuComponent> = {
component: LanguageMenuComponent,
title: 'Core/Language Menu/Language Menu',
decorators: [
moduleMetadata({
imports: [LanguageMenuComponent, MatMenuModule, MatButtonModule, MatIconModule],
imports: [LanguageMenuComponent, MatMenuModule, MatButtonModule, IconModule],
providers: [{ provide: LanguageService, useClass: LanguageServiceMock }]
}),
applicationConfig({
@@ -66,9 +66,7 @@ export const AsMainMenu: Story = {
componentWrapperDecorator(
(story) => `
<button mat-icon-button [matMenuTriggerFor]="langMenu">
<mat-icon>
language
</mat-icon>
<mat-icon adf-icon="language" />
</button>
<mat-menu #langMenu="matMenu">
${story}
@@ -86,15 +84,11 @@ export const AsNestedMenu: Story = {
componentWrapperDecorator(
(story) => `
<button mat-icon-button [matMenuTriggerFor]="profileMenu">
<mat-icon>
more_vert
</mat-icon>
<mat-icon adf-icon="more_vert" />
</button>
<mat-menu #profileMenu="matMenu">
<button mat-menu-item [matMenuTriggerFor]="langMenu">
<mat-icon>
language
</mat-icon>
<mat-icon adf-icon="language" />
Language
</button>
</mat-menu>
lib/core/src/lib/language-menu/language-picker.component.stories.ts
+3 -3
View File
@@ -22,14 +22,14 @@ import { LanguageServiceMock } from '../mock/language.service.mock';
import { provideStoryCore } from '../stories/core-story.providers';
import { MatMenuModule } from '@angular/material/menu';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { IconModule } from '../icon/icon.module';
const meta: Meta<LanguagePickerComponent> = {
component: LanguagePickerComponent,
title: 'Core/Language Menu/Language Picker',
decorators: [
moduleMetadata({
imports: [LanguagePickerComponent, MatMenuModule, MatButtonModule, MatIconModule],
imports: [LanguagePickerComponent, MatMenuModule, MatButtonModule, IconModule],
providers: [{ provide: LanguageService, useClass: LanguageServiceMock }]
}),
applicationConfig({
@@ -65,7 +65,7 @@ export const AsNestedMenu: Story = {
componentWrapperDecorator(
(story) => `
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon>more_vert</mat-icon>
<mat-icon adf-icon="more_vert" />
</button>
<mat-menu #menu="matMenu">
${story}
lib/core/src/lib/layout/components/sidebar-action/sidebar-action-menu.component.spec.ts
+6 -6
View File
@@ -19,9 +19,9 @@ import { Component } from '@angular/core';
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { SidebarActionMenuComponent } from './sidebar-action-menu.component';
import { CommonModule } from '@angular/common';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { UnitTestingUtils } from '../../../testing/unit-testing-utils';
import { IconModule } from '../../../icon/icon.module';
describe('SidebarActionMenuComponent', () => {
let component: SidebarActionMenuComponent;
@@ -52,21 +52,21 @@ describe('SidebarActionMenuComponent', () => {
});
@Component({
imports: [CommonModule, SidebarActionMenuComponent, MatIconModule, MatMenuModule],
imports: [CommonModule, SidebarActionMenuComponent, IconModule, MatMenuModule],
// eslint-disable-next-line @alfresco/eslint-angular/no-angular-material-selectors
template: `
<adf-sidebar-action-menu [expanded]="expanded" [title]="title">
<mat-icon adf-sidebar-menu-title-icon>arrow_drop_down</mat-icon>
<mat-icon adf-sidebar-menu-title-icon adf-icon="arrow_drop_down" />
<div adf-sidebar-menu-expand-icon>
<mat-icon>queue</mat-icon>
<mat-icon adf-icon="queue" />
</div>
<div adf-sidebar-menu-options>
<button mat-menu-item>
<mat-icon>assignment</mat-icon>
<mat-icon adf-icon="assignment" />
<span>Option1</span>
</button>
<button mat-menu-item>
<mat-icon>assignment</mat-icon>
<mat-icon adf-icon="assignment" />
<span>Option2</span>
</button>
</div>
lib/core/src/lib/layout/components/sidenav-layout/sidenav-layout.component.stories.ts
+9 -9
View File
@@ -18,8 +18,8 @@
import { applicationConfig, Meta, StoryObj, moduleMetadata } from '@storybook/angular';
import { SidenavLayoutComponent } from './sidenav-layout.component';
import { MatListModule } from '@angular/material/list';
import { MatIconModule } from '@angular/material/icon';
import { provideStoryCore } from '../../../stories/core-story.providers';
import { IconModule } from '../../../icon/icon.module';
type SidenavLayoutStoryArgs = SidenavLayoutComponent & {
title?: string;
@@ -32,7 +32,7 @@ const meta: Meta<SidenavLayoutStoryArgs> = {
title: 'Core/Layout/Sidenav Layout',
decorators: [
moduleMetadata({
imports: [SidenavLayoutComponent, MatIconModule, MatListModule]
imports: [SidenavLayoutComponent, IconModule, MatListModule]
}),
applicationConfig({
providers: [...provideStoryCore()]
@@ -165,37 +165,37 @@ export const SidenavLayout: Story = {
<ng-template>
<mat-nav-list class="app-sidenav-linklist">
<mat-list-item class="app-sidenav-link">
<mat-icon matListItemIcon>home</mat-icon>
<mat-icon matListItemIcon adf-icon="home" />
<span matLine>Home</span>
</mat-list-item>
<mat-list-item class="app-sidenav-link">
<mat-icon matListItemIcon>device_hub</mat-icon>
<mat-icon matListItemIcon adf-icon="device_hub" />
<span matLine>Content Processes</span>
</mat-list-item>
<mat-list-item class="app-sidenav-link">
<mat-icon matListItemIcon>folder_open</mat-icon>
<mat-icon matListItemIcon adf-icon="folder_open" />
<span matLine>Files</span>
</mat-list-item>
<mat-list-item class="app-sidenav-link">
<mat-icon matListItemIcon>rowing</mat-icon>
<mat-icon matListItemIcon adf-icon="rowing" />
<span matLine>Quick Search</span>
</mat-list-item>
<mat-list-item class="app-sidenav-link">
<mat-icon matListItemIcon>cloud</mat-icon>
<mat-icon matListItemIcon adf-icon="cloud" />
<span matLine>Cloud</span>
</mat-list-item>
<mat-list-item class="app-sidenav-link">
<mat-icon matListItemIcon>settings</mat-icon>
<mat-icon matListItemIcon adf-icon="settings" />
<span matLine>Settings</span>
</mat-list-item>
<mat-list-item adf-logout class="app-sidenav-link" data-automation-id="Logout">
<mat-icon matListItemIcon>exit_to_app</mat-icon>
<mat-icon matListItemIcon adf-icon="exit_to_app" />
<span matLine>Logout</span>
</mat-list-item>
</mat-nav-list>
lib/core/src/lib/login/components/login.component.html
+25 -21
View File
@@ -36,7 +36,7 @@
id="login-error"
data-automation-id="login-error"
class="adf-error adf-error-message">
<mat-icon class="adf-error-icon">warning</mat-icon>
<mat-icon class="adf-error-icon" adf-icon="warning" />
<span class="adf-login-error-message">
{{errorMsg | translate }}
</span>
@@ -82,14 +82,16 @@
<mat-form-field
class="adf-full-width adf-login-form-field"
floatPlaceholder="never"
color="primary">
color="primary"
>
<input
matInput
placeholder="{{'LOGIN.LABEL.PASSWORD' | translate }}"
[type]="isPasswordShow ? 'text' : 'password'"
formControlName="password"
id="password"
data-automation-id="password">
data-automation-id="password"
/>
<button
matSuffix
mat-icon-button
@@ -97,10 +99,9 @@
[attr.aria-label]="(isPasswordShow ? 'LOGIN.ARIA-LABEL.HIDE-PASSWORD' : 'LOGIN.ARIA-LABEL.SHOW-PASSWORD') | translate"
(click)="toggleShowPassword($event)"
(keyup.enter)="toggleShowPassword($event)"
[attr.data-automation-id]="isPasswordShow ? 'hide_password' : 'show_password'">
<mat-icon class="adf-login-form-password-icon adf-login-password-icon">
{{ isPasswordShow ? 'visibility' : 'visibility_off' }}
</mat-icon>
[attr.data-automation-id]="isPasswordShow ? 'hide_password' : 'show_password'"
>
<mat-icon class="adf-login-form-password-icon adf-login-password-icon" [adf-icon]="isPasswordShow ? 'visibility' : 'visibility_off'" />
</button>
</mat-form-field>
<span
@@ -138,23 +139,26 @@
</span>
<div
*ngIf="actualLoginStep === LoginSteps.Checking"
class="adf-interactive-login-label">
<span class="adf-login-button-label">
{{ 'LOGIN.BUTTON.CHECKING' | translate}}
</span>
<div class="adf-login-spinner-container">
<mat-spinner
id="checking-spinner"
class="adf-login-checking-spinner"
[strokeWidth]="4"
[diameter]="25" />
</div>
class="adf-interactive-login-label"
>
<span class="adf-login-button-label">
{{ 'LOGIN.BUTTON.CHECKING' | translate}}
</span>
<div class="adf-login-spinner-container">
<mat-spinner
id="checking-spinner"
class="adf-login-checking-spinner"
[strokeWidth]="4"
[diameter]="25"
/>
</div>
</div>
<div
*ngIf="actualLoginStep === LoginSteps.Welcome"
class="adf-interactive-login-label">
<span class="adf-login-button-label">{{ 'LOGIN.BUTTON.WELCOME' | translate }}</span>
<mat-icon class="adf-welcome-icon">done</mat-icon>
class="adf-interactive-login-label"
>
<span class="adf-login-button-label">{{ 'LOGIN.BUTTON.WELCOME' | translate }}</span>
<mat-icon class="adf-welcome-icon" adf-icon="done" />
</div>
</button>
<div *ngIf="showRememberMe" class="adf-login__remember-me">
lib/core/src/lib/viewer/components/mock/adf-viewer-container-more-actions.component.mock.ts
+5 -5
View File
@@ -16,27 +16,27 @@
*/
import { Component } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { ViewerComponent } from '../viewer.component';
import { ViewerMoreActionsComponent } from '../viewer-more-actions.component';
import { IconModule } from '../../../icon/icon.module';
@Component({
selector: 'adf-viewer-container-more-actions',
imports: [ViewerComponent, MatIconModule, MatMenuModule, ViewerMoreActionsComponent],
imports: [ViewerComponent, IconModule, MatMenuModule, ViewerMoreActionsComponent],
template: `
<adf-viewer>
<adf-viewer-more-actions>
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<mat-icon adf-icon="dialpad" />
<span>Action One</span>
</button>
<button mat-menu-item [disabled]="true">
<mat-icon>voicemail</mat-icon>
<mat-icon adf-icon="voicemail" />
<span>Action Two</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<mat-icon adf-icon="notifications_off" />
<span>Action Three</span>
</button>
</adf-viewer-more-actions>
lib/core/src/lib/viewer/components/mock/adf-viewer-container-open-with.component.mock.ts
+5 -5
View File
@@ -16,27 +16,27 @@
*/
import { Component } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatMenuModule } from '@angular/material/menu';
import { ViewerComponent } from '../viewer.component';
import { ViewerOpenWithComponent } from '../viewer-open-with.component';
import { IconModule } from '../../../icon/icon.module';
@Component({
selector: 'adf-viewer-container-open-with',
imports: [ViewerComponent, MatIconModule, MatMenuModule, ViewerOpenWithComponent],
imports: [ViewerComponent, IconModule, MatMenuModule, ViewerOpenWithComponent],
template: `
<adf-viewer>
<adf-viewer-open-with>
<button mat-menu-item>
<mat-icon>dialpad</mat-icon>
<mat-icon adf-icon="dialpad" />
<span>Option 1</span>
</button>
<button mat-menu-item [disabled]="true">
<mat-icon>voicemail</mat-icon>
<mat-icon adf-icon="voicemail" />
<span>Option 2</span>
</button>
<button mat-menu-item>
<mat-icon>notifications_off</mat-icon>
<mat-icon adf-icon="notifications_off" />
<span>Option 3</span>
</button>
</adf-viewer-open-with>
lib/core/src/lib/viewer/components/mock/adf-viewer-container-toolbar-actions.component.mock.ts
+3 -3
View File
@@ -17,18 +17,18 @@
import { Component } from '@angular/core';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';
import { ViewerComponent } from '../viewer.component';
import { ViewerToolbarActionsComponent } from '../viewer-toolbar-actions.component';
import { IconModule } from '../../../icon/icon.module';
@Component({
selector: 'adf-viewer-container-toolbar-actions',
imports: [ViewerComponent, MatIconModule, MatButtonModule, ViewerToolbarActionsComponent],
imports: [ViewerComponent, IconModule, MatButtonModule, ViewerToolbarActionsComponent],
template: `
<adf-viewer>
<adf-viewer-toolbar-actions>
<button mat-icon-button id="custom-button">
<mat-icon>alarm</mat-icon>
<mat-icon adf-icon="alarm" />
</button>
</adf-viewer-toolbar-actions>
</adf-viewer>