Migrate components to cds-icon

Tsvetan Emilov · Tsvetan Emilov · commit 80ad56cdde8c · 2023-12-04T14:30:58.000+01:00
Introduce a new `IconsModule` that register the `cds-icon` component using the provided by Clarity `CdsIconModule` and import all Clarity icons.

Testing Done:
Run e2e tests.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
         "@angular/platform-browser-dynamic": "^15.2.3",
         "@angular/router": "^15.2.3",
         "@cds/core": "^6.3.1",
+        "@cds/angular": "^6.3.1",
         "@clr/angular": "^15.0.3",
         "@clr/icons": "13.0.2",
         "@clr/ui": "^15.0.3",
diff --git a/projects/components/CHANGELOG.MD b/projects/components/CHANGELOG.MD
@@ -6,6 +6,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
+- Replace `clr-icon` with `cds-icon`
 
 ## [15.0.1-dev.13]
 ### Fixed
diff --git a/projects/components/src/action-menu/action-menu.component.html b/projects/components/src/action-menu/action-menu.component.html
@@ -98,7 +98,7 @@
         }}</ng-container>
 
         <a *ngIf="shouldShowIcon" role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
-            <clr-icon [attr.size]="'1em'" [attr.shape]="action.icon"></clr-icon>
+            <cds-icon [attr.size]="'1em'" [attr.shape]="action.icon"></cds-icon>
             <span class="tooltip-content" *ngIf="shouldShowTooltip">{{
                 action.isTranslatable === false ? action.textKey : (action.textKey | translate)
             }}</span>
diff --git a/projects/components/src/action-menu/action-menu.module.ts b/projects/components/src/action-menu/action-menu.module.ts
@@ -8,11 +8,12 @@ import { NgModule } from '@angular/core';
 import { ClarityModule } from '@clr/angular';
 import { I18nModule } from '@vcd/i18n';
 import { DropdownModule } from '../dropdown/dropdown.module';
+import { IconsModule } from '../icons';
 import { ShowClippedTextDirectiveModule } from '../lib/directives/show-clipped-text.directive.module';
 import { ActionMenuComponent } from './action-menu.component';
 
 @NgModule({
-    imports: [ClarityModule, CommonModule, I18nModule, DropdownModule, ShowClippedTextDirectiveModule],
+    imports: [ClarityModule, CommonModule, I18nModule, DropdownModule, ShowClippedTextDirectiveModule, IconsModule],
     declarations: [ActionMenuComponent],
     providers: [],
     exports: [ActionMenuComponent],
diff --git a/projects/components/src/data-exporter/data-exporter.component.html b/projects/components/src/data-exporter/data-exporter.component.html
@@ -41,14 +41,15 @@ <h3 class="modal-title">{{ dialogHeader | lazyString }}</h3>
                     <label [attr.data-ui]="DataUi.selectAllToggleLabel">{{ exportAllText | lazyString }}</label>
                 </clr-checkbox-wrapper>
                 <clr-dropdown [clrCloseMenuOnItemClick]="false">
-                    <clr-icon
-                        [attr.shape]="isDropdownOpen ? 'caret up' : 'caret down'"
-                        size="24"
+                    <cds-icon
+                        shape="caret"
+                        size="md"
+                        [attr.direction]="isDropdownOpen ? 'up' : 'down'"
                         clrDropdownTrigger
                         class="dropdown-button"
                         [attr.data-ui]="DataUi.columnCheckboxArrow"
                         *ngIf="!this.selectAllControl.value"
-                    ></clr-icon>
+                    ></cds-icon>
                     <clr-dropdown-menu clrPosition="bottom" [formGroup]="formGroup" *clrIfOpen #dropdownMenu>
                         <ul>
                             <li
@@ -75,7 +76,7 @@ <h3 class="modal-title">{{ dialogHeader | lazyString }}</h3>
             </div>
 
             <span
-                class="x-button label"
+                class="label"
                 *ngFor="let column of selectedColumns"
                 [attr.data-ui]="DataUi.columnSelectionBubbles"
                 [ngStyle]="{ visibility: shouldShowBubbles ? 'visible' : 'hidden' }"
@@ -88,7 +89,7 @@ <h3 class="modal-title">{{ dialogHeader | lazyString }}</h3>
                     (click)="selectColumn(column, false)"
                     [attr.data-ui]="DataUi.columnBubblesX"
                 >
-                    <clr-icon shape="close" class="badge badge-info"> </clr-icon>
+                    <cds-icon shape="close" size="sm"> </cds-icon>
                 </button>
             </span>
         </div>
diff --git a/projects/components/src/data-exporter/data-exporter.component.scss b/projects/components/src/data-exporter/data-exporter.component.scss
@@ -40,8 +40,8 @@ clr-dropdown-menu {
     overflow: auto;
 }
 
-.x-button.label {
-    padding: 0 0.1rem 0.02rem;
+.label:has(> button) {
+    padding-right: var(--cds-global-space-3);
 }
 
 button.btn-link.remove-col-button {
diff --git a/projects/components/src/data-exporter/data-exporter.module.ts b/projects/components/src/data-exporter/data-exporter.module.ts
@@ -8,11 +8,12 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { ClarityModule } from '@clr/angular';
 import { I18nModule } from '@vcd/i18n';
+import { IconsModule } from '../icons';
 import { DataExporterComponent } from './data-exporter.component';
 
 @NgModule({
     declarations: [DataExporterComponent],
-    imports: [CommonModule, ReactiveFormsModule, ClarityModule, I18nModule],
+    imports: [CommonModule, ReactiveFormsModule, ClarityModule, I18nModule, IconsModule],
     exports: [DataExporterComponent],
 })
 export class VcdDataExporterModule {}
diff --git a/projects/components/src/dropdown/dropdown.component.html b/projects/components/src/dropdown/dropdown.component.html
@@ -14,9 +14,9 @@
     >
         <ng-container *ngIf="dropdownTriggerBtnTxt">
             {{ dropdownTriggerBtnTxt }}
-            <clr-icon *ngIf="!isNestedDropdown" shape="caret down"></clr-icon>
+            <cds-icon *ngIf="!isNestedDropdown" shape="caret" direction="down"></cds-icon>
         </ng-container>
-        <clr-icon *ngIf="!dropdownTriggerBtnTxt" [attr.shape]="dropdownTriggerBtnIcon"></clr-icon>
+        <cds-icon *ngIf="!dropdownTriggerBtnTxt" [attr.shape]="dropdownTriggerBtnIcon"></cds-icon>
     </button>
 
     <ng-container *ngIf="!isDropdownDisabled">
@@ -90,7 +90,7 @@
                         }}</ng-container>
 
                         <a *ngIf="shouldShowIcon" role="tooltip" aria-haspopup="true" class="tooltip tooltip-sm">
-                            <clr-icon size="1em" [attr.shape]="item.icon"></clr-icon>
+                            <cds-icon size="md" [attr.shape]="item.icon"></cds-icon>
                             <span class="tooltip-content" *ngIf="shouldShowTooltip">{{
                                 item.textKey | translate
                             }}</span>
diff --git a/projects/components/src/dropdown/dropdown.module.ts b/projects/components/src/dropdown/dropdown.module.ts
@@ -8,14 +8,22 @@ import { NgModule } from '@angular/core';
 import { ReactiveFormsModule } from '@angular/forms';
 import { ClarityModule } from '@clr/angular';
 import { I18nModule } from '@vcd/i18n';
+import { IconsModule } from '../icons';
 import { ShowClippedTextDirectiveModule } from '../lib/directives/show-clipped-text.directive.module';
 import { DropdownFocusHandlerDirective } from './dropdown.component';
 import { DropdownComponent } from './dropdown.component';
 import { DynamicDropdownPositionDirective } from './dynamic-dropdown-position.directive';
 
 @NgModule({
     declarations: [DropdownComponent, DynamicDropdownPositionDirective, DropdownFocusHandlerDirective],
-    imports: [CommonModule, ReactiveFormsModule, ClarityModule, I18nModule, ShowClippedTextDirectiveModule],
+    imports: [
+        CommonModule,
+        ReactiveFormsModule,
+        ClarityModule,
+        I18nModule,
+        ShowClippedTextDirectiveModule,
+        IconsModule,
+    ],
     exports: [DropdownComponent, DynamicDropdownPositionDirective, DropdownFocusHandlerDirective],
 })
 export class DropdownModule {}
diff --git a/projects/components/src/dropdown/dynamic-dropdown-position.directive.ts b/projects/components/src/dropdown/dynamic-dropdown-position.directive.ts
@@ -32,7 +32,7 @@ const MENU_BUFFER_SPACE = 150;
  * <clr-dropdown vcdDropdown>
  *     <button class="btn btn-link vm-power-link" clrDropdownTrigger>
  *         {{ 'vm.actions' | translate }}
- *         <clr-icon shape="caret down"></clr-icon>
+ *         <cds-icon shape="caret" direction="down"></cds-icon>
  *         </button>
  *     <clr-dropdown-menu *clrIfOpen>
  *         <label class="dropdown-header">Dropdown header</label>
diff --git a/projects/components/src/form/form-checkbox/form-checkbox.component.html b/projects/components/src/form/form-checkbox/form-checkbox.component.html
@@ -16,7 +16,7 @@
                     [formControl]="formControl"
                 />
                 <label class="clr-control-label" [for]="id">
-                    <clr-icon *ngIf="iconShape" [attr.shape]="iconShape"></clr-icon>
+                    <cds-icon *ngIf="iconShape" [attr.shape]="iconShape"></cds-icon>
                     {{ text }}
                 </label>
                 <clr-signpost *ngIf="hint">
diff --git a/projects/components/src/form/form-input/form-input.component.html b/projects/components/src/form/form-input/form-input.component.html
@@ -28,7 +28,7 @@
                     (keyup.enter)="enterClicked.emit(true)"
                     (keyup.escape)="escapeClicked.emit(true)"
                 />
-                <clr-icon *ngIf="showErrors && !hint" class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
+                <cds-icon *ngIf="showErrors && !hint" class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
                 <ng-content select="aside"></ng-content>
                 <clr-signpost *ngIf="hint">
                     <clr-signpost-content [clrPosition]="hintPosition" *clrIfOpen>
diff --git a/projects/components/src/form/form-select/form-select.component.html b/projects/components/src/form/form-select/form-select.component.html
@@ -24,7 +24,7 @@
                         {{ option.isTranslatable ? (option.display | translate) : option.display }}
                     </option>
                 </select>
-                <clr-icon *ngIf="showErrors" class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
+                <cds-icon *ngIf="showErrors" class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
             </div>
 
             <ng-content select="aside"></ng-content>
diff --git a/projects/components/src/form/form-select/form-select.component.spec.ts b/projects/components/src/form/form-select/form-select.component.spec.ts
@@ -28,8 +28,8 @@ export class VcdFormSelectWidgetObject extends WidgetObject<FormSelectComponent>
     /**
      * Returns the 'shape' attribute if defined, returns empty string if undefined
      */
-    get clrIconShape(): string {
-        const clrIconDebugEl = this.findElement('clr-icon');
+    get cdsIconShape(): string {
+        const clrIconDebugEl = this.findElement('cds-icon');
         return clrIconDebugEl?.nativeElement.getAttribute('shape') || '';
     }
 
@@ -131,15 +131,15 @@ describe('FormSelectComponent', () => {
 
     describe('validation', () => {
         it('does not show error icon before user selects value', () => {
-            expect(selectInput.clrIconShape).toEqual('');
+            expect(selectInput.cdsIconShape).toEqual('');
         });
         it('shows error icon when a invalid value is selected', () => {
             selectInput.select(0);
-            expect(selectInput.clrIconShape).toEqual('exclamation-circle');
+            expect(selectInput.cdsIconShape).toEqual('exclamation-circle');
         });
         it('does not show error icon when a valid value is selected', () => {
             selectInput.select(1);
-            expect(selectInput.clrIconShape).toEqual('');
+            expect(selectInput.cdsIconShape).toEqual('');
         });
 
         it('validator can return key/value where the value is an array to be passed to translation service', () => {
diff --git a/projects/components/src/form/form.module.ts b/projects/components/src/form/form.module.ts
@@ -8,6 +8,7 @@ import { NgModule } from '@angular/core';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { ClarityModule } from '@clr/angular';
 import { I18nModule } from '@vcd/i18n';
+import { IconsModule } from '../icons';
 import { AlternativeTextModule } from '../lib/directives/alternative-text/alternative-text.module';
 import { ResponsiveInputDirectiveModule } from '../lib/directives/responsive-input/responsive-input.module';
 import { UnitFormatter } from '../utils/unit/unit-formatter';
@@ -29,6 +30,7 @@ const declarations = [FormInputComponent, FormSelectComponent, FormCheckboxCompo
         I18nModule,
         ResponsiveInputDirectiveModule,
         AlternativeTextModule,
+        IconsModule,
     ],
     declarations,
     providers: [UnitFormatter],
diff --git a/projects/components/src/form/number-with-unit-input/number-with-unit-form-input.component.html b/projects/components/src/form/number-with-unit-input/number-with-unit-form-input.component.html
@@ -51,7 +51,7 @@
                         </select>
                     </div>
                 </ng-container>
-                <clr-icon *ngIf="showErrors" class="clr-validate-icon" shape="exclamation-circle"></clr-icon>
+                <cds-icon *ngIf="showErrors" class="clr-validate-icon" shape="exclamation-circle"></cds-icon>
                 <clr-signpost *ngIf="hint">
                     <clr-signpost-content [clrPosition]="hintPosition" *clrIfOpen>
                         <p>{{ hint }}</p>
diff --git a/projects/components/src/icons/icons.module.ts b/projects/components/src/icons/icons.module.ts
@@ -0,0 +1,40 @@
+/*!
+ * Copyright 2021 VMware, Inc.
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+import { NgModule } from '@angular/core';
+import { CdsIconModule } from '@cds/angular';
+import {
+    ClarityIcons,
+    loadChartIconSet,
+    loadCommerceIconSet,
+    loadCoreIconSet,
+    loadEssentialIconSet,
+    loadMediaIconSet,
+    loadMiniIconSet,
+    loadSocialIconSet,
+    loadTechnologyIconSet,
+    loadTextEditIconSet,
+    loadTravelIconSet,
+} from '@cds/core/icon';
+
+@NgModule({
+    imports: [CdsIconModule],
+    exports: [CdsIconModule],
+})
+export class IconsModule {
+    constructor() {
+        // Add all icons from Clarity
+        loadChartIconSet();
+        loadCommerceIconSet();
+        loadCoreIconSet();
+        loadEssentialIconSet();
+        loadMediaIconSet();
+        loadMiniIconSet();
+        loadTechnologyIconSet();
+        loadSocialIconSet();
+        loadTextEditIconSet();
+        loadTravelIconSet();
+    }
+}
diff --git a/projects/components/src/icons/index.ts b/projects/components/src/icons/index.ts
@@ -0,0 +1,6 @@
+/*!
+ * Copyright 2019 VMware, Inc.
+ * SPDX-License-Identifier: BSD-2-Clause
+ */
+
+export * from './icons.module';
diff --git a/projects/components/src/lib/directives/alternative-text/alternative-text.directive.spec.ts b/projects/components/src/lib/directives/alternative-text/alternative-text.directive.spec.ts
@@ -6,6 +6,7 @@
 import { Component } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ClarityModule } from '@clr/angular';
+import { IconsModule } from '../../../icons';
 import { WidgetObject } from '../../../utils/test/widget-object';
 import { ALTERNATIVE_TEXT } from './alternative-text.directive';
 import { AlternativeTextModule } from './alternative-text.module';
@@ -17,15 +18,15 @@ interface TestContext {
 
 @Component({
     template: `
-        <clr-icon shape="home" [vcdAlternativeText]="altText">
+        <cds-icon shape="home" [vcdAlternativeText]="altText">
             <svg></svg>
-        </clr-icon>
-        <clr-icon shape="check">
+        </cds-icon>
+        <cds-icon shape="check">
             <svg></svg>
-        </clr-icon>
-        <clr-icon shape="times" [vcdAlternativeText]="'Times icon'">
+        </cds-icon>
+        <cds-icon shape="times" [vcdAlternativeText]="'Times icon'">
             <svg alt="pre-set text"></svg>
-        </clr-icon>
+        </cds-icon>
     `,
 })
 export class TestHostComponent {
@@ -34,14 +35,14 @@ export class TestHostComponent {
 
 class ComponentTestWidget extends WidgetObject<TestHostComponent> {
     public getAlternativeText(shape: string): string {
-        return this.findElement(`clr-icon[shape="${shape}"] svg`).nativeElement.getAttribute(ALTERNATIVE_TEXT);
+        return this.findElement(`cds-icon[shape="${shape}"] svg`).nativeElement.getAttribute(ALTERNATIVE_TEXT);
     }
 }
 
 describe('AlternativeTextDirective', () => {
     beforeEach(async () => {
         await TestBed.configureTestingModule({
-            imports: [ClarityModule, AlternativeTextModule],
+            imports: [ClarityModule, AlternativeTextModule, IconsModule],
             declarations: [TestHostComponent],
         }).compileComponents();
     });
diff --git a/projects/components/src/lib/directives/alternative-text/alternative-text.directive.ts b/projects/components/src/lib/directives/alternative-text/alternative-text.directive.ts
@@ -12,7 +12,7 @@ export const ALTERNATIVE_TEXT = 'alt';
  */
 @Directive({
     // eslint-disable-next-line @angular-eslint/directive-selector
-    selector: 'clr-icon',
+    selector: 'cds-icon',
 })
 export class AlternativeTextDirective implements AfterViewInit {
     @Input() vcdAlternativeText: string = '';
diff --git a/projects/components/src/quick-search/quick-search.component.html b/projects/components/src/quick-search/quick-search.component.html
@@ -1,6 +1,6 @@
 <ng-template #sectionTitle let-searchSection>
     <div class="section-title-wrapper">
-        <clr-icon *ngIf="searchSection.icon" [attr.shape]="searchSection.icon" size="20"> </clr-icon>
+        <cds-icon *ngIf="searchSection.icon" [attr.shape]="searchSection.icon" size="md"> </cds-icon>
         <div *ngIf="searchSection.hasPartialResult; let partial; else: partial">
             {{
                 'vcd.cc.quickSearch.partialResultTitle'
@@ -37,7 +37,7 @@
                     [attr.aria-label]="'vcd.cc.search.filterBy.btn.label' | translate: filter.dropdownText"
                 >
                     {{ filter.dropdownText }}
-                    <clr-icon shape="caret down"></clr-icon>
+                    <cds-icon shape="caret" direction="down"></cds-icon>
                 </button>
                 <clr-dropdown-menu clrPosition="bottom" *clrIfOpen #dropdownMenu>
                     <li
@@ -80,7 +80,7 @@
                     "
                     (click)="searchService.selectFilter(filter.id, [option.key], false)"
                 >
-                    <clr-icon shape="close" class="badge badge-info"> </clr-icon>
+                    <cds-icon shape="close"> </cds-icon>
                 </button>
             </span>
         </ng-container>
@@ -121,7 +121,7 @@
 <ng-template #quickSearchInterior>
     <div class="search-input-container" data-ui="search-input-container">
         <div class="search-icon-container">
-            <clr-icon shape="search" size="20" *ngIf="!searchService.isLoading"></clr-icon>
+            <cds-icon shape="search" *ngIf="!searchService.isLoading"></cds-icon>
             <clr-spinner
                 [clrSmall]="true"
                 [clrInline]="true"
@@ -147,7 +147,7 @@
             [attr.aria-pressed]="searchService.isPinned"
             (click)="togglePinned()"
         >
-            <clr-icon shape="pin" size="20" [ngClass]="this.searchService.isPinned ? 'is-solid' : ''"> </clr-icon>
+            <cds-icon shape="pin" size="md" [attr.solid]="this.searchService.isPinned"> </cds-icon>
         </button>
     </div>
     <clr-control-helper class="input-helper">{{ helper }}</clr-control-helper>
diff --git a/projects/components/src/quick-search/quick-search.component.scss b/projects/components/src/quick-search/quick-search.component.scss
diff --git a/projects/components/src/quick-search/quick-search.module.ts b/projects/components/src/quick-search/quick-search.module.ts
diff --git a/projects/components/src/quick-search/quick-search.wo.ts b/projects/components/src/quick-search/quick-search.wo.ts
diff --git a/projects/components/src/sharing-modal/sharing-modal.module.ts b/projects/components/src/sharing-modal/sharing-modal.module.ts
diff --git a/projects/components/src/sharing-modal/tabs/sharing-modal-tab.component.html b/projects/components/src/sharing-modal/tabs/sharing-modal-tab.component.html
diff --git a/projects/components/src/sharing-modal/users-groups-orgs-sharing-modal.directive.ts b/projects/components/src/sharing-modal/users-groups-orgs-sharing-modal.directive.ts
diff --git a/projects/examples/src/app/app.component.html b/projects/examples/src/app/app.component.html

Original file line number	Diff line number	Diff line change
`@@ -40,8 +40,8 @@ clr-dropdown-menu {`
`40`	`40`	`overflow: auto;`
`41`	`41`	`}`
`42`	`42`
`43`		`-.x-button.label {`
`44`		`- padding: 0 0.1rem 0.02rem;`
	`43`	`+.label:has(> button) {`
	`44`	`+ padding-right: var(--cds-global-space-3);`
`45`	`45`	`}`
`46`	`46`
`47`	`47`	`button.btn-link.remove-col-button {`