feat(icon-button): implement component

CHANGELOG.md

@@ -2,6 +2,15 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## 17.1.0
+### New Features
+- New directive -  `igxIconButton` directive that provides a way to use an icon as a fully functional button has been added. The new `igxIconButton` comes in three types - flat, outlined and contained (default). All `igxButton`'s with type `icon` will be automatically migrated to the new `igxIconButton`'s with `ng update`.
+
+### General
+- `igxButton`:
+    - **Breaking Change** The `raised` type of the `igxButton` directive has been renamed to `contained`. Automatic migrations are available and will be applied on `ng update`.
+    - The `igxButtonColor` and `igxButtonBackground` input properties have been deprecated and will be removed in a future version.
+
 ## 17.0.0
 ### General
 - `IgxCard`

package.json

@@ -70,7 +70,7 @@
     "express": "^4.18.2",
     "fflate": "^0.7.3",
     "hammerjs": "^2.0.8",
-    "igniteui-theming": "^3.3.3",
+    "igniteui-theming": "^4.0.0-beta.2",
     "igniteui-trial-watermark": "^3.0.2",
     "lodash-es": "^4.17.21",
     "rxjs": "^6.6.7",

projects/igniteui-angular/migrations/migration-collection.json

@@ -160,6 +160,11 @@
             "version": "17.0.0",
             "description": "Updates Ignite UI for Angular from v16.1.x to v17.0.0",
             "factory": "./update-17_0_0"
+        },
+        "migration-33": {
+            "version": "17.1.0",
+            "description": "Updates Ignite UI for Angular from v17.0.x to v17.1.0",
+            "factory": "./update-17_1_0"
         }
     }
 }

projects/igniteui-angular/migrations/update-17_1_0/index.spec.ts

@@ -0,0 +1,116 @@
+import * as path from 'path';
+
+import { EmptyTree } from '@angular-devkit/schematics';
+import { SchematicTestRunner, UnitTestTree } from '@angular-devkit/schematics/testing';
+
+const version = '17.1.0';
+
+describe(`Update to ${version}`, () => {
+    let appTree: UnitTestTree;
+    const schematicRunner = new SchematicTestRunner('ig-migrate', path.join(__dirname, '../migration-collection.json'));
+
+    const configJson = {
+        projects: {
+            testProj: {
+                root: '/',
+                sourceRoot: '/testSrc'
+            }
+        },
+        schematics: {
+            '@schematics/angular:component': {
+                prefix: 'appPrefix'
+            }
+        }
+    };
+
+    beforeEach(() => {
+        appTree = new UnitTestTree(new EmptyTree());
+        appTree.create('/angular.json', JSON.stringify(configJson));
+    });
+
+    const migrationName = 'migration-33';
+
+    it('should rename raised to contained type in all components with igxButton="raised"', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <button type="button" igxButton="raised">
+            Read More
+        </button>
+        <span igxButton="raised">
+            Go Back
+        </span>
+        <div igxButton="raised">
+            Button
+        </div>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <button type="button" igxButton="contained">
+            Read More
+        </button>
+        <span igxButton="contained">
+            Go Back
+        </span>
+        <div igxButton="contained">
+            Button
+        </div>
+        `
+        );
+    });
+
+    it('should not rename outlined and flat type buttons', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <button type="button" igxButton="flat">
+            Flat Button
+        </button>
+        <button type="button" igxButton="outlined">
+            Outlined Button
+        </button>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <button type="button" igxButton="flat">
+            Flat Button
+        </button>
+        <button type="button" igxButton="outlined">
+            Outlined Button
+        </button>
+        `
+        );
+    });
+
+    it('should replace buttons of icon type with icon buttons of flat type ', async () => {
+        appTree.create(`/testSrc/appPrefix/component/test.component.html`,
+        `
+        <button igxButton="icon">
+            <igx-icon family="fa" name="fa-home"></igx-icon>
+        </button>
+        <span igxRipple igxButton="icon">
+            <igx-icon>favorite</igx-icon>
+        </span>
+        `
+        );
+
+        const tree = await schematicRunner.runSchematic(migrationName, {}, appTree);
+
+        expect(tree.readContent('/testSrc/appPrefix/component/test.component.html')).toEqual(
+        `
+        <button igxIconButton="flat">
+            <igx-icon family="fa" name="fa-home"></igx-icon>
+        </button>
+        <span igxRipple igxIconButton="flat">
+            <igx-icon>favorite</igx-icon>
+        </span>
+        `
+        );
+    });
+});

projects/igniteui-angular/migrations/update-17_1_0/index.ts

@@ -0,0 +1,64 @@
+import {
+    Rule,
+    SchematicContext,
+    Tree
+} from '@angular-devkit/schematics';
+import { UpdateChanges } from '../common/UpdateChanges';
+import { FileChange, findElementNodes, getAttribute, getSourceOffset, hasAttribute, parseFile } from '../common/util';
+import { nativeImport } from '../common/import-helper.js';
+import { Element } from '@angular/compiler';
+
+const version = '17.1.0';
+
+export default (): Rule => async (host: Tree, context: SchematicContext) => {
+    context.logger.info(`Applying migration for Ignite UI for Angular to version ${version}`);
+    const { HtmlParser } = await nativeImport('@angular/compiler') as typeof import('@angular/compiler');
+    const update = new UpdateChanges(__dirname, host, context);
+    const changes = new Map<string, FileChange[]>();
+    const tags = ['button', 'span', 'a', 'div', 'igx-prefix', 'igx-suffix']
+    const type = ['igxButton'];
+
+    const applyChanges = () => {
+        for (const [path, change] of changes.entries()) {
+          let buffer = host.read(path).toString();
+
+          change.sort((c, c1) => c.position - c1.position)
+            .reverse()
+            .forEach(c => buffer = c.apply(buffer));
+
+          host.overwrite(path, buffer);
+        }
+    };
+
+    const addChange = (path: string, change: FileChange) => {
+        if (changes.has(path)) {
+          changes.get(path).push(change);
+        } else {
+          changes.set(path, [change]);
+        }
+    };
+
+    for (const path of update.templateFiles) {
+        const components = findElementNodes(parseFile(new HtmlParser(), host, path), tags);
+        components
+          .filter(node => hasAttribute(node as Element, type))
+          .map(node => getSourceOffset(node as Element))
+          .forEach(offset => {
+            const { startTag, file, node } = offset;
+            const { name, value } = getAttribute(node, type)[0];
+            const repTxt = file.content.substring(startTag.start, startTag.end - 1);
+            const btn = `${name}="${value}"`;
+            const iconBtn = `igxIconButton="flat"`
+            if (value === 'raised') {
+                const renameType = repTxt.replace(`raised`, `contained`);
+                addChange(file.url, new FileChange(startTag.start, renameType, repTxt, 'replace'));
+            } else if (value === 'icon') {
+                const removePropTxt = repTxt.replace(btn, iconBtn);
+                addChange(file.url, new FileChange(startTag.start, removePropTxt, repTxt, 'replace'));
+            }
+        });
+    }
+
+    applyChanges();
+    update.applyChanges();
+};

projects/igniteui-angular/src/lib/action-strip/action-strip.component.html

@@ -3,7 +3,7 @@
     <ng-container *ngIf="menuItems.length > 0">
         <button
             type="button"
-            igxButton="icon"
+            igxIconButton="flat"
             igxRipple
             [igxToggleAction]="dropdown"
             [overlaySettings]="menuOverlaySettings"

projects/igniteui-angular/src/lib/action-strip/action-strip.component.ts

@@ -30,6 +30,7 @@ import { IgxRippleDirective } from '../directives/ripple/ripple.directive';
 import { IgxButtonDirective } from '../directives/button/button.directive';
 import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
+import { IgxIconButtonDirective } from '../directives/button/icon-button.directive';
 
 @Directive({
     selector: '[igxActionStripMenuItem]',
@@ -71,6 +72,7 @@ export class IgxActionStripMenuItemDirective {
         NgFor,
         NgTemplateOutlet,
         IgxButtonDirective,
+        IgxIconButtonDirective,
         IgxRippleDirective,
         IgxToggleActionDirective,
         IgxDropDownItemNavigationDirective,

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.html

@@ -1,5 +1,5 @@
 <ng-container *ngIf="!asMenuItem">
-    <button type="button" [title]="labelText" igxButton="icon" igxRipple (click)="handleClick($event)" (mousedown)="preventEvent($event)">
+    <button type="button" [title]="labelText" igxIconButton="flat" igxRipple (click)="handleClick($event)" (mousedown)="preventEvent($event)">
         <igx-icon *ngIf="iconSet" [family]="iconSet" [name]="iconName">{{iconName}}</igx-icon>
         <igx-icon *ngIf="!iconSet" >{{iconName}}</igx-icon>
     </button>

projects/igniteui-angular/src/lib/action-strip/grid-actions/grid-action-button.component.ts

@@ -3,11 +3,12 @@ import { IgxIconComponent } from '../../icon/icon.component';
 import { IgxRippleDirective } from '../../directives/ripple/ripple.directive';
 import { IgxButtonDirective } from '../../directives/button/button.directive';
 import { NgIf } from '@angular/common';
+import { IgxIconButtonDirective } from '../../directives/button/icon-button.directive';
 @Component({
     selector: 'igx-grid-action-button',
     templateUrl: 'grid-action-button.component.html',
     standalone: true,
-    imports: [NgIf, IgxButtonDirective, IgxRippleDirective, IgxIconComponent]
+    imports: [NgIf, IgxButtonDirective, IgxRippleDirective, IgxIconComponent, IgxIconButtonDirective]
 })
 
 export class IgxGridActionButtonComponent {

projects/igniteui-angular/src/lib/banner/banner.component.spec.ts

@@ -506,7 +506,7 @@ export class IgxBannerEmptyComponent {
             <igx-banner>
                 You have lost connection to the internet.
                 <igx-banner-actions>
-                    <button igxButton="raised">TURN ON WIFI</button>
+                    <button igxButton="contained">TURN ON WIFI</button>
                 </igx-banner-actions>
             </igx-banner>
         </div>
@@ -527,8 +527,8 @@ export class IgxBannerOneButtonComponent {
                 <igx-icon>error</igx-icon>
                 Unfortunately, the credit card did not go through, please try again.
                 <igx-banner-actions>
-                    <button igxButton="raised" (click)="banner.close()">UPDATE</button>
-                    <button igxButton="raised" (click)="banner.close()">DISMISS</button>
+                    <button igxButton="contained" (click)="banner.close()">UPDATE</button>
+                    <button igxButton="contained" (click)="banner.close()">DISMISS</button>
                 </igx-banner-actions>
             </igx-banner>
         </div>

projects/igniteui-angular/src/lib/banner/banner.component.ts

@@ -44,8 +44,8 @@ export interface BannerCancelEventArgs extends BannerEventArgs, CancelableEventA
  * <igx-banner #banner>
  *   Our privacy settings have changed.
  *  <igx-banner-actions>
- *      <button type="button" igxButton="raised">Read More</button>
- *      <button type="button" igxButton="raised">Accept and Continue</button>
+ *      <button type="button" igxButton="contained">Read More</button>
+ *      <button type="button" igxButton="contained">Accept and Continue</button>
  *  </igx-banner-actions>
  * </igx-banner>
  * ```

projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts

@@ -31,7 +31,7 @@ class Button {
     private icon: string;
 
     constructor(obj?: IButton) {
-        this.type = obj.type || 'raised';
+        this.type = obj.type || 'contained';
         this.ripple = obj.ripple || 'orange';
         this.label = obj.label || 'Button label';
         this.selected = obj.selected || false;

projects/igniteui-angular/src/lib/card/card-actions.component.html

@@ -1,9 +1,9 @@
 <div #buttons class="igx-card-actions__start">
-    <ng-content select="[igxStart], [igxButton]:not([igxButton='icon']):not([igxEnd])"></ng-content>
+    <ng-content select="[igxStart], [igxButton]:not([igxEnd])"></ng-content>
 </div>
 
 <ng-content></ng-content>
 
 <div class="igx-card-actions__end">
-    <ng-content select="[igxEnd], [igxButton='icon']:not([igxStart]), igx-icon:not([igxStart])"></ng-content>
+    <ng-content select="[igxEnd], [igxIconButton]:not([igxStart]), igx-icon:not([igxStart])"></ng-content>
 </div>

projects/igniteui-angular/src/lib/card/card.spec.ts

@@ -16,6 +16,7 @@ import {
 import { configureTestSuite } from '../test-utils/configure-suite';
 import { IgxButtonDirective } from '../directives/button/button.directive';
 import { IgxIconComponent } from '../icon/icon.component';
+import { IgxIconButtonDirective } from '../directives/button/icon-button.directive';
 
 describe('Card', () => {
     configureTestSuite();
@@ -302,7 +303,7 @@ class CardWithHeaderComponent { }
 
         <igx-card-actions>
             <button igxButton igxStart>Test</button>
-            <button igxButton="icon" igxEnd>
+            <button igxIconButton="flat" igxEnd>
                 <igx-icon>home</igx-icon>
             </button>
         </igx-card-actions>
@@ -318,7 +319,8 @@ class CardWithHeaderComponent { }
         IgxCardContentDirective,
         IgxCardActionsComponent,
         IgxButtonDirective,
-        IgxIconComponent
+        IgxIconComponent,
+        IgxIconButtonDirective
     ]
 })
 class VerticalCardComponent {
@@ -330,13 +332,13 @@ class VerticalCardComponent {
     <igx-card [horizontal]="true">
         <igx-card-actions>
             <button igxButton igxStart>Test</button>
-            <button igxButton="icon" igxEnd>
+            <button igxIconButton="flat" igxEnd>
                 <igx-icon>home</igx-icon>
             </button>
         </igx-card-actions>
     </igx-card>`,
     standalone: true,
-    imports: [IgxCardComponent, IgxCardActionsComponent, IgxButtonDirective, IgxIconComponent]
+    imports: [IgxCardComponent, IgxCardActionsComponent, IgxButtonDirective, IgxIconComponent, IgxIconButtonDirective]
 })
 class HorizontalCardComponent {
     @ViewChild(IgxCardComponent, { static: true }) public card: IgxCardComponent;

projects/igniteui-angular/src/lib/combo/combo.common.ts

@@ -633,7 +633,7 @@ export abstract class IgxComboBaseDirective extends DisplayDensityBase implement
      *  <igx-combo #combo>
      *      ...
      *      <ng-template igxComboAddItem>
-     *          <button type="button" igxButton="raised" class="combo__add-button">
+     *          <button type="button" igxButton="contained" class="combo__add-button">
      *              Click to add item
      *          </button>
      *      </ng-template>

projects/igniteui-angular/src/lib/core/styles/components/_index.scss

@@ -27,6 +27,7 @@
 @forward 'grid-toolbar/grid-toolbar-theme';
 @forward 'highlight/highlight-theme.scss';
 @forward 'icon/icon-theme';
+@forward 'icon-button/icon-button-theme';
 @forward 'input/input-group-theme';
 @forward 'label/label-theme';
 @forward 'list/list-theme';