refactor(grid): Host class binding refactor (#12749)

* refactor(grid): cleanup host class binding

* refactor(action-strip): host class binding

* refactor(chip): host class binding

* refactor(chip-area): host class binding

* refactor(column-actions): host class binding

* chore(lint): add attr.class hostbinding rule

---------

Co-authored-by: Konstantin Dinev <[email protected]>
Co-authored-by: Deyan Kamburov <[email protected]>

Author: 3 people

projects/igniteui-angular/.eslintrc.json

@@ -41,7 +41,14 @@
         ],
         "id-blacklist": "off",
         "id-match": "off",
-        "no-underscore-dangle": "off"
+        "no-underscore-dangle": "off",
+        "no-restricted-syntax": [
+          "error",
+          {
+            "selector": "Decorator[expression.callee.name=HostBinding] Literal[value='attr.class']",
+            "message": "Do not use `attr.class` HostBinding in public-facing components"
+          }
+        ]
       }
     },
     {

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

@@ -99,6 +99,26 @@ describe('igxActionStrip', () => {
             const asQuery = fixture.debugElement.query(By.css('igx-action-strip'));
             expect(asQuery.nativeElement.style.display).toBe('none');
         });
+
+        it('should change displayDensity runtime correctly', () => {
+            // density with custom class applied
+            actionStripElement.nativeElement.classList.add('custom');
+            fixture.detectChanges();
+
+            expect(actionStripElement.nativeElement.classList).toEqual(jasmine.arrayWithExactContents(['custom', 'igx-action-strip']));
+
+            actionStrip.displayDensity = 'cosy';
+            fixture.detectChanges();
+            expect(actionStripElement.nativeElement.classList).toEqual(
+                jasmine.arrayWithExactContents(['custom', 'igx-action-strip', 'igx-action-strip--cosy'])
+            );
+
+            actionStrip.displayDensity = 'compact';
+            fixture.detectChanges();
+            expect(actionStripElement.nativeElement.classList).toEqual(
+                jasmine.arrayWithExactContents(['custom', 'igx-action-strip', 'igx-action-strip--compact'])
+            );
+        });
     });
 
     describe('render content as menu', () => {

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

@@ -107,15 +107,6 @@ export class IgxActionStripComponent extends DisplayDensityBase implements After
         return this._hidden;
     }
 
-    /**
-     * Host `class.igx-action-strip` binding.
-     *
-     * @hidden
-     * @internal
-     */
-    @Input('class')
-    public hostClass: string;
-
     /**
      * Gets/Sets the resource strings.
      *
@@ -136,7 +127,7 @@ export class IgxActionStripComponent extends DisplayDensityBase implements After
 
     /**
      * Hide or not the Action Strip based on if it is a menu.
-     * 
+     *
      * @hidden
      * @internal
      */
@@ -180,34 +171,6 @@ export class IgxActionStripComponent extends DisplayDensityBase implements After
         super(_displayDensityOptions);
     }
 
-    /**
-     * Getter for the 'display' property of the current `IgxActionStrip`
-     *
-     * @hidden
-     * @internal
-     */
-    @HostBinding('style.display')
-    public get display(): string {
-        return this._hidden ? 'none' : 'flex';
-    }
-
-    /**
-     * Host `attr.class` binding.
-     *
-     * @hidden
-     * @internal
-     */
-    @HostBinding('attr.class')
-    public get hostClasses(): string {
-        const classes = [this.getComponentDensityClass('igx-action-strip')];
-        // The custom classes should be at the end.
-        if (!classes.includes('igx-action-strip')) {
-            classes.push('igx-action-strip');
-        }
-        classes.push(this.hostClass);
-        return classes.join(' ');
-    }
-
     /**
      * Menu Items list.
      *
@@ -227,6 +190,28 @@ export class IgxActionStripComponent extends DisplayDensityBase implements After
         return [... this._menuItems.toArray(), ...actions];
     }
 
+
+    /**
+     * Getter for the 'display' property of the current `IgxActionStrip`
+     */
+     @HostBinding('style.display')
+     private get display(): string {
+         return this._hidden ? 'none' : 'flex';
+     }
+
+     /**
+      * Host `attr.class` binding.
+      */
+     @HostBinding('class')
+     private get hostClasses(): string {
+         let hostClass = this.getComponentDensityClass('igx-action-strip');
+         if (hostClass !== 'igx-action-strip') {
+             // action strip requires the base class to be always present:
+             hostClass = `igx-action-strip ${hostClass}`;
+         }
+         return hostClass;
+     }
+
     /**
      * @hidden
      * @internal

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -219,13 +219,6 @@ export class IgxChipComponent extends DisplayDensityBase {
     @Input()
     public selectIcon: TemplateRef<any>;
 
-    /**
-     * @hidden
-     * @internal
-     */
-    @Input()
-    public class = '';
-
     /**
      * An @Input property that defines if the `IgxChipComponent` is disabled. When disabled it restricts user interactions
      * like focusing on click or tab, selection on click or Space, dragging.
@@ -464,26 +457,6 @@ export class IgxChipComponent extends DisplayDensityBase {
     @Output()
     public dragDrop = new EventEmitter<IChipEnterDragAreaEventArgs>();
 
-    /**
-     * @hidden
-     * @internal
-     */
-    @HostBinding('attr.class')
-    public get hostClass(): string {
-        const classes = [this.getComponentDensityClass('igx-chip')];
-
-        // Add the base class first for each density
-        if (!classes.includes('igx-chip')) {
-            classes.unshift('igx-chip');
-        }
-
-        classes.push(this.disabled ? 'igx-chip--disabled' : '');
-
-        // The custom classes should be at the end.
-        classes.push(this.class);
-        return classes.join(' ').toString().trim();
-    }
-
     /**
      * Property that contains a reference to the `IgxDragDirective` the `IgxChipComponent` uses for dragging behavior.
      *
@@ -574,6 +547,20 @@ export class IgxChipComponent extends DisplayDensityBase {
         super(_displayDensityOptions);
     }
 
+    @HostBinding('class')
+    private get hostClass(): string {
+        const classes = [this.getComponentDensityClass('igx-chip')];
+
+        // Add the base class first for each density
+        if (!classes.includes('igx-chip')) {
+            classes.unshift('igx-chip');
+        }
+
+        classes.push(this.disabled ? 'igx-chip--disabled' : '');
+
+        return classes.join(' ').toString().trim();
+    }
+
     /**
      * @hidden
      * @internal

projects/igniteui-angular/src/lib/chips/chip.spec.ts

@@ -1,5 +1,5 @@
 import { Component, ViewChild, ViewChildren, QueryList, ChangeDetectorRef } from '@angular/core';
-import { TestBed, waitForAsync } from '@angular/core/testing';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 import { IgxIconModule } from '../icon/public_api';
@@ -17,7 +17,7 @@ import { ControlsFunction } from '../test-utils/controls-functions.spec';
 @Component({
     template: `
         <igx-chips-area #chipsArea>
-            <igx-chip #chipElem *ngFor="let chip of chipList"
+            <igx-chip #chipElem *ngFor="let chip of chipList" class="custom"
             [id]="chip.id" [draggable]="chip.draggable"
             [removable]="chip.removable" [selectable]="chip.selectable"
             [displayDensity]="chip.density" (remove)="chipRemoved($event)">
@@ -93,14 +93,15 @@ class TestChipsLabelAndSuffixComponent {
 
 
 describe('IgxChip', () => {
-    const CHIP_TEXT_CLASS = '.igx-chip__text';
-    const CHIP_CLASS = '.igx-chip';
-    const CHIP_COMPACT_CLASS = '.igx-chip--compact';
-    const CHIP_COSY_CLASS = '.igx-chip--cosy';
-    const CHIP_ITEM_CLASS = '.igx-chip__item';
+    const CHIP_TEXT_CLASS = 'igx-chip__text';
+    const CHIP_CLASS = 'igx-chip';
+    const CHIP_DISABLED_CLASS = 'igx-chip--disabled';
+    const CHIP_COMPACT_CLASS = 'igx-chip--compact';
+    const CHIP_COSY_CLASS = 'igx-chip--cosy';
+    const CHIP_ITEM_CLASS = 'igx-chip__item';
     const CHIP_GHOST_COMP_CLASS = 'igx-chip__ghost--compact';
 
-    let fix;
+    let fix: ComponentFixture<TestChipComponent | TestChipsLabelAndSuffixComponent>;
     let chipArea;
 
     configureTestSuite();
@@ -149,12 +150,12 @@ describe('IgxChip', () => {
 
         it('should set text in chips correctly', () => {
             const chipElements = chipArea[0].queryAll(By.directive(IgxChipComponent));
-            const firstChipTextElement = chipElements[0].queryAllNodes(By.css(CHIP_TEXT_CLASS));
+            const firstChipTextElement = chipElements[0].queryAllNodes(By.css(`.${CHIP_TEXT_CLASS}`));
             const firstChipText = firstChipTextElement[0].nativeNode.innerHTML;
 
             expect(firstChipText).toContain('Country');
 
-            const secondChipTextElement = chipElements[1].queryAllNodes(By.css(CHIP_TEXT_CLASS));
+            const secondChipTextElement = chipElements[1].queryAllNodes(By.css(`.${CHIP_TEXT_CLASS}`));
             const secondChipText = secondChipTextElement[0].nativeNode.innerHTML;
 
             expect(secondChipText).toContain('City');
@@ -177,11 +178,21 @@ describe('IgxChip', () => {
             expect(secondComponent.componentInstance.displayDensity).toEqual(DisplayDensity.comfortable);
 
             // Assert default css class is applied
-            const comfortableComponents = fix.debugElement.queryAll(By.css(CHIP_CLASS));
+            const comfortableComponents = fix.debugElement.queryAll(By.css(`.${CHIP_CLASS}`));
 
             expect(comfortableComponents.length).toEqual(9);
             expect(comfortableComponents[0].nativeElement).toBe(firstComponent.nativeElement);
             expect(comfortableComponents[1].nativeElement).toBe(secondComponent.nativeElement);
+
+            expect(comfortableComponents[0].nativeElement.classList).toEqual(
+                jasmine.arrayWithExactContents(['custom', CHIP_CLASS])
+            );
+
+            firstComponent.componentInstance.disabled = true;
+            fix.detectChanges();
+            expect(comfortableComponents[0].nativeElement.classList).toEqual(
+                jasmine.arrayWithExactContents(['custom', CHIP_CLASS, CHIP_DISABLED_CLASS])
+            );
         });
 
         it('should make chip compact when density is set to compact', () => {
@@ -191,10 +202,14 @@ describe('IgxChip', () => {
             expect(thirdComponent.componentInstance.displayDensity).toEqual(DisplayDensity.compact);
 
             // Assert compact css class is added
-            const compactComponents = fix.debugElement.queryAll(By.css(CHIP_COMPACT_CLASS));
+            const compactComponents = fix.debugElement.queryAll(By.css(`.${CHIP_COMPACT_CLASS}`));
 
             expect(compactComponents.length).toEqual(1);
             expect(compactComponents[0].nativeElement).toBe(thirdComponent.nativeElement);
+
+            expect(compactComponents[0].nativeElement.classList).toEqual(
+                jasmine.arrayWithExactContents(['custom', CHIP_CLASS, CHIP_COMPACT_CLASS])
+            );
         });
 
         it('should make chip cosy when density is set to cosy', () => {
@@ -204,18 +219,22 @@ describe('IgxChip', () => {
             expect(fourthComponent.componentInstance.displayDensity).toEqual(DisplayDensity.cosy);
 
             // Assert cosy css class is added
-            const cosyComponents = fix.debugElement.queryAll(By.css(CHIP_COSY_CLASS));
+            const cosyComponents = fix.debugElement.queryAll(By.css(`.${CHIP_COSY_CLASS}`));
 
             expect(cosyComponents.length).toEqual(1);
             expect(cosyComponents[0].nativeElement).toBe(fourthComponent.nativeElement);
+
+            expect(cosyComponents[0].nativeElement.classList).toEqual(
+                jasmine.arrayWithExactContents(['custom', CHIP_CLASS, CHIP_COSY_CLASS])
+            );
         });
 
         it('should set correctly color of chip when color is set through code', () => {
             const chipColor = 'rgb(255, 0, 0)';
 
             const components = fix.debugElement.queryAll(By.directive(IgxChipComponent));
             const firstComponent = components[0];
-            const chipAreaElem = firstComponent.queryAll(By.css(CHIP_ITEM_CLASS))[0];
+            const chipAreaElem = firstComponent.queryAll(By.css(`.${CHIP_ITEM_CLASS}`))[0];
 
             firstComponent.componentInstance.color = chipColor;
 

projects/igniteui-angular/src/lib/chips/chips-area.component.ts

@@ -66,25 +66,6 @@ export interface IChipsAreaSelectEventArgs extends IBaseChipsAreaEventArgs {
 })
 export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy {
 
-    /**
-     * @hidden
-     * @internal
-     */
-    @Input()
-    public class = '';
-
-    /**
-     * @hidden
-     * @internal
-     */
-    @HostBinding('attr.class')
-    public get hostClass() {
-        const classes = ['igx-chip-area'];
-        classes.push(this.class);
-
-        return classes.join(' ');
-    }
-
     /**
      * Returns the `role` attribute of the chips area.
      *
@@ -204,6 +185,9 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
 
     protected destroy$ = new Subject<boolean>();
 
+    @HostBinding('class')
+    private hostClass = 'igx-chip-area';
+
     private modifiedChipsArray: IgxChipComponent[];
     private _differ: IterableDiffer<IgxChipComponent> | null = null;
 

projects/igniteui-angular/src/lib/chips/chips-area.spec.ts

@@ -102,7 +102,7 @@ describe('IgxChipsArea ', () => {
     const CHIP_REMOVE_BUTTON = 'igx-chip__remove';
     const CHIP_SELECT_ICON = 'igx-chip__select';
     const CHIP_SELECT_ICON_HIDDEN = 'igx-chip__select--hidden';
-    const TEST_CHIP_AREA_CLASS = 'igx-chip-area customClass';
+    const CHIP_AREA_CLASS = 'igx-chip-area';
 
     let fix;
     let chipArea: IgxChipsAreaComponent;
@@ -127,7 +127,7 @@ describe('IgxChipsArea ', () => {
         });
 
         it('should add chips when adding data items ', () => {
-            expect(chipAreaElement.nativeElement.className).toEqual(TEST_CHIP_AREA_CLASS);
+            expect(chipAreaElement.nativeElement.classList).toEqual(jasmine.arrayWithExactContents(['customClass', CHIP_AREA_CLASS]));
             expect(chipAreaElement.nativeElement.children.length).toEqual(2);
 
             fix.componentInstance.chipList.push({ id: 'Town', text: 'Town', removable: true, selectable: true, draggable: true });

projects/igniteui-angular/src/lib/grids/column-actions/column-actions.component.ts

@@ -62,7 +62,7 @@ export class IgxColumnActionsComponent implements DoCheck {
      * this.columnHidingUI.cssClass = 'column-chooser';
      * ```
      */
-    @HostBinding('attr.class')
+    @HostBinding('class')
     public cssClass = 'igx-column-actions';
     /**
      * Gets/sets the max height of the columns area.