refactor(grid-toolbar): convert title and actions directives to components (#12230)

Author: damyanpetev

CHANGELOG.md

@@ -25,6 +25,8 @@ All notable changes for each version of this project will be documented in this
     - `dragGhostCustomTemplate` - Gets/Sets the custom template used for row drag.
     - `dragIndicatorIconTemplate` - Gets/Sets the custom template used for row drag indicator.
     - `detailTemplate` - Gets/Sets the master-detail template.
+- `IgxGridToolbar`
+    - **Breaking Change** - The `IgxGridToolbarTitleDirective` and `IgxGridToolbarActionsDirective` have been converted to components, keeping only the element selector. For apps using the preferred element markup of `<igx-grid-toolbar-title>` and `<igx-grid-toolbar-actions>` there should be no functional change. Apps using the `igxGridToolbarTitle` and `igxGridToolbarActions` directives on other elements will need to convert those to the mentioned elements instead.
 
     - **Behavioral Change** - When adding new row in grid with enabled batch editing, `rowChangesCount` displays the number of the defined columns.
 - `IgxGrid`, `IgxTreeGrid`, `IgxHierarchicalGrid`

projects/igniteui-angular/migrations/update-15_0_0/changes/classes.json

@@ -0,0 +1,13 @@
+{
+    "$schema": "../../common/schema/class.schema.json",
+    "changes": [
+        {
+            "name": "IgxGridToolbarTitleDirective",
+            "replaceWith": "IgxGridToolbarTitleComponent"
+        },
+        {
+            "name": "IgxGridToolbarActionsDirective",
+            "replaceWith": "IgxGridToolbarActionsComponent"
+        }
+    ]
+}

projects/igniteui-angular/migrations/update-15_0_0/index.spec.ts

@@ -149,6 +149,53 @@ describe(`Update to ${version}`, () => {
         );
     });
 
+    it('should rename IgxGridToolbarTitleDirective and IgxGridToolbarActionsDirective', async () => {
+        appTree.create(
+            '/testSrc/appPrefix/component/test.component.ts',
+            `import { Component, ViewChild } from '@angular/core';
+        import { IgxGridToolbarTitleDirective, IgxGridToolbarComponent, IgxGridToolbarActionsDirective } from 'igniteui-angular';
+
+        @Component({
+            selector: 'test-component',
+            templateUrl: './test.component.html',
+            styleUrls: ['./test.component.scss']
+        })
+        export class TestComponent {
+            toolbar: IgxGridToolbarComponent;
+            @ViewChild(IgxGridToolbarTitleDirective)
+            public title: IgxGridToolbarTitleDirective;
+            @ViewChild(IgxGridToolbarActionsDirective)
+            public actions: IgxGridToolbarActionsDirective;
+        }
+        `);
+        const tree = await schematicRunner
+            .runSchematicAsync(migrationName, {}, appTree)
+            .toPromise();
+
+        const expectedContent = `import { Component, ViewChild } from '@angular/core';
+        import { IgxGridToolbarTitleComponent, IgxGridToolbarComponent, IgxGridToolbarActionsComponent } from 'igniteui-angular';
+
+        @Component({
+            selector: 'test-component',
+            templateUrl: './test.component.html',
+            styleUrls: ['./test.component.scss']
+        })
+        export class TestComponent {
+            toolbar: IgxGridToolbarComponent;
+            @ViewChild(IgxGridToolbarTitleComponent)
+            public title: IgxGridToolbarTitleComponent;
+            @ViewChild(IgxGridToolbarActionsComponent)
+            public actions: IgxGridToolbarActionsComponent;
+        }
+        `;
+
+        expect(
+            tree.readContent(
+                '/testSrc/appPrefix/component/test.component.ts'
+            )
+        ).toEqual(expectedContent);
+    });
+
     it('should remove the disabled property from the igx-radio-group', async () => {
         appTree.create(
             '/testSrc/appPrefix/component/test.component.html', `

projects/igniteui-angular/src/lib/grids/toolbar/common.ts

@@ -1,4 +1,4 @@
-import { Directive, HostBinding, TemplateRef } from '@angular/core';
+import { Component, Directive, HostBinding, TemplateRef } from '@angular/core';
 import { GridType } from '../common/grid.interface';
 
 
@@ -22,8 +22,8 @@ export class IgxCSVTextDirective { }
  * <igx-grid-toolbar-title>My custom title</igx-grid-toolbar-title>
  * ```
  */
-@Directive({ selector: '[igxGridToolbarTitle],igx-grid-toolbar-title' })
-export class IgxGridToolbarTitleDirective {
+@Component({ selector: 'igx-grid-toolbar-title', template: '<ng-content></ng-content>' })
+export class IgxGridToolbarTitleComponent {
     /**
      * Host `class.igx-grid-toolbar__title` binding.
      *
@@ -47,8 +47,8 @@ export class IgxGridToolbarTitleDirective {
  * </igx-grid-toolbar-actions>
  * ```
  */
-@Directive({ selector: '[igxGridToolbarActions],igx-grid-toolbar-actions' })
-export class IgxGridToolbarActionsDirective {
+@Component({ selector: 'igx-grid-toolbar-actions', template: '<ng-content></ng-content>' })
+export class IgxGridToolbarActionsComponent {
     /**
      * Host `class.igx-grid-toolbar__actions` binding.
      *
@@ -67,8 +67,8 @@ export interface IgxGridToolbarTemplateContext {
 export class IgxGridToolbarDirective {
     constructor(public template: TemplateRef<IgxGridToolbarTemplateContext>) {}
 
-    public static ngTemplateContextGuard(_dir: IgxGridToolbarDirective, 
-        ctx: unknown): ctx is IgxGridToolbarTemplateContext { 
+    public static ngTemplateContextGuard(_dir: IgxGridToolbarDirective,
+        ctx: unknown): ctx is IgxGridToolbarTemplateContext {
         return true
     };
 }

projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.component.ts

@@ -12,7 +12,7 @@ import { Subscription } from 'rxjs';
 import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../../core/displayDensity';
 import { IgxIconService } from '../../icon/public_api';
 import { pinLeft, unpinLeft } from '@igniteui/material-icons-extended';
-import { IgxGridToolbarActionsDirective } from './common';
+import { IgxGridToolbarActionsComponent } from './common';
 import { GridServiceType, GridType, IGX_GRID_SERVICE_BASE } from '../common/grid.interface';
 import { IgxToolbarToken } from './token';
 
@@ -69,8 +69,8 @@ export class IgxGridToolbarComponent extends DisplayDensityBase implements OnDes
      * @hidden
      * @internal
      */
-    @ContentChild(IgxGridToolbarActionsDirective)
-    public hasActions: IgxGridToolbarActionsDirective;
+    @ContentChild(IgxGridToolbarActionsComponent)
+    public hasActions: IgxGridToolbarActionsComponent;
 
     /**
      * @hidden

projects/igniteui-angular/src/lib/grids/toolbar/toolbar.module.ts

@@ -9,9 +9,9 @@ import { IgxGridToolbarPinningComponent } from './grid-toolbar-pinning.component
 import {
     IgxCSVTextDirective,
     IgxExcelTextDirective,
-    IgxGridToolbarActionsDirective,
+    IgxGridToolbarActionsComponent,
     IgxGridToolbarDirective,
-    IgxGridToolbarTitleDirective
+    IgxGridToolbarTitleComponent
 } from './common';
 export * from './grid-toolbar.component';
 export * from './common';
@@ -25,13 +25,13 @@ export * from './grid-toolbar-pinning.component';
     declarations: [
         IgxCSVTextDirective,
         IgxExcelTextDirective,
-        IgxGridToolbarActionsDirective,
+        IgxGridToolbarActionsComponent,
         IgxGridToolbarAdvancedFilteringComponent,
         IgxGridToolbarComponent,
         IgxGridToolbarExporterComponent,
         IgxGridToolbarHidingComponent,
         IgxGridToolbarPinningComponent,
-        IgxGridToolbarTitleDirective,
+        IgxGridToolbarTitleComponent,
         IgxGridToolbarDirective
     ],
     imports: [
@@ -41,13 +41,13 @@ export * from './grid-toolbar-pinning.component';
     exports: [
         IgxCSVTextDirective,
         IgxExcelTextDirective,
-        IgxGridToolbarActionsDirective,
+        IgxGridToolbarActionsComponent,
         IgxGridToolbarAdvancedFilteringComponent,
         IgxGridToolbarComponent,
         IgxGridToolbarExporterComponent,
         IgxGridToolbarHidingComponent,
         IgxGridToolbarPinningComponent,
-        IgxGridToolbarTitleDirective,
+        IgxGridToolbarTitleComponent,
         IgxGridToolbarDirective
     ]
 })