Merge pull request #12770 from IgniteUI/mpopov/chip-discrepancy

Chip - fix discrepancy between WebC and Angular

Author: ChronosSF

CHANGELOG.md

@@ -51,7 +51,10 @@ import { IgxGridModule } from 'igniteui-angular';
     imports: [IgxGridModule, AsyncPipe]
 })
 ```
-
+- `IgxChip`
+    - **Behavioral Change** The `igxChip` styles have been revisited and the select container animaton has been removed when selecting/deselecting a chip.
+    - **Behavioral Change** The remove button behavior have been revisited, now when the chip is in `disabled` state the remove button is hidden.
+    - The `igxChip` have new input `variant` which can take any of the following values: `'primary'`, `'info'`, `'success'`, `'warning'`, `'danger'`
 ### New Features
 - `IgxExpansionPanel`:
     - `IgxExpansionPanelTitleDirective` and `IgxExpansionPanelDescriptionDirective` show tooltip of the provided text content.

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

@@ -14,27 +14,31 @@
     (over)="onChipOverHandler($event)"
     (dropped)="onChipDrop($event)">
 
-    <div #selectContainer [ngClass]="selectClass(selected)">
-        <ng-container *ngTemplateOutlet="selectIconTemplate"></ng-container>
-    </div>
+    <div class="igx-chip__start" #selectContainer>
+        <div *ngIf="selected" [ngClass]="selectClass(selected)">
+            <ng-container *ngTemplateOutlet="selectIconTemplate"></ng-container>
+        </div>
 
-    <ng-content select="igx-prefix,[igxPrefix]"></ng-content>
+        <ng-content select="igx-prefix,[igxPrefix]"></ng-content>
+    </div>
 
     <div class="igx-chip__content">
         <ng-content></ng-content>
     </div>
 
-    <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
+    <div class="igx-chip__end">
+        <ng-content select="igx-suffix,[igxSuffix]"></ng-content>
 
-    <div class="igx-chip__remove" *ngIf="removable"
-        [attr.tabIndex]="tabIndex"
-        (keydown)="onRemoveBtnKeyDown($event)"
-        (pointerdown)="onRemoveMouseDown($event)"
-        (mousedown)="onRemoveMouseDown($event)"
-        (click)="onRemoveClick($event)"
-        (touchmove)="onRemoveTouchMove()"
-        (touchend)="onRemoveTouchEnd($event)">
-        <ng-container *ngTemplateOutlet="removeButtonTemplate"></ng-container>
+        <div class="igx-chip__remove" *ngIf="removable"
+            [attr.tabIndex]="tabIndex"
+            (keydown)="onRemoveBtnKeyDown($event)"
+            (pointerdown)="onRemoveMouseDown($event)"
+            (mousedown)="onRemoveMouseDown($event)"
+            (click)="onRemoveClick($event)"
+            (touchmove)="onRemoveTouchMove()"
+            (touchend)="onRemoveTouchEnd($event)">
+            <ng-container *ngTemplateOutlet="removeButtonTemplate"></ng-container>
+        </div>
     </div>
 </div>
 

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

@@ -1,4 +1,4 @@
-import {
+import {
     Component,
     ChangeDetectorRef,
     EventEmitter,
@@ -16,14 +16,21 @@
 } from '@angular/core';
 import { IDisplayDensityOptions, DisplayDensityToken, DisplayDensityBase } from '../core/density';
 import { IgxDragDirective, IDragBaseEventArgs, IDragStartEventArgs, IDropBaseEventArgs, IDropDroppedEventArgs, IgxDropDirective } from '../directives/drag-drop/drag-drop.directive';
-import { IBaseEventArgs } from '../core/utils';
+import { IBaseEventArgs, mkenum } from '../core/utils';
 import { IChipResourceStrings } from '../core/i18n/chip-resources';
 import { CurrentResourceStrings } from '../core/i18n/resources';
-import { fromEvent, Subject } from 'rxjs';
-import { take, filter } from 'rxjs/operators';
+import { Subject } from 'rxjs';
 import { IgxIconComponent } from '../icon/icon.component';
 import { NgClass, NgTemplateOutlet, NgIf } from '@angular/common';
 
+export const IgxChipTypeVariant = mkenum({
+    PRIMARY: 'primary',
+    INFO: 'info',
+    SUCCESS: 'success',
+    WARNING: 'warning',
+    DANGER: 'danger'
+});
+
 export interface IBaseChipEventArgs extends IBaseEventArgs {
     originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent;
     owner: IgxChipComponent;
@@ -79,6 +86,21 @@ let CHIP_ID = 0;
     imports: [IgxDropDirective, IgxDragDirective, NgClass, NgTemplateOutlet, NgIf, IgxIconComponent]
 })
 export class IgxChipComponent extends DisplayDensityBase implements OnDestroy {
+
+    /**
+     * Sets/gets the variant of the chip.
+     *
+     * @remarks
+     * Allowed values are `primary`, `info`, `success`, `warning`, `danger`.
+     * Providing an invalid value won't change the chip.
+     *
+     * @example
+     * ```html
+     * <igx-chip [variant]="success"></igx-chip>
+     * ```
+     */
+    @Input()
+    public variant: string | typeof IgxChipTypeVariant;
     /**
      * An @Input property that sets the value of `id` attribute. If not provided it will be automatically generated.
      *
@@ -218,6 +240,13 @@ export class IgxChipComponent extends DisplayDensityBase implements OnDestroy {
     @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.
@@ -228,6 +257,7 @@ export class IgxChipComponent extends DisplayDensityBase implements OnDestroy {
      * <igx-chip [id]="chip.id" [disabled]="true"></igx-chip>
      * ```
      */
+    @HostBinding('class.igx-chip--disabled')
     @Input()
     public disabled = false;
 
@@ -456,6 +486,44 @@ export class IgxChipComponent extends DisplayDensityBase implements OnDestroy {
     @Output()
     public dragDrop = new EventEmitter<IChipEnterDragAreaEventArgs>();
 
+    @HostBinding('class.igx-chip')
+    protected defaultClass = 'igx-chip';
+
+    @HostBinding('class.igx-chip--primary')
+    protected get isPrimary() {
+        return this.variant === IgxChipTypeVariant.PRIMARY;
+    }
+
+    @HostBinding('class.igx-chip--info')
+    protected get isInfo() {
+        return this.variant === IgxChipTypeVariant.INFO;
+    }
+
+    @HostBinding('class.igx-chip--success')
+    protected get isSuccess() {
+        return this.variant === IgxChipTypeVariant.SUCCESS;
+    }
+
+    @HostBinding('class.igx-chip--warning')
+    protected get isWarning() {
+        return this.variant === IgxChipTypeVariant.WARNING;
+    }
+
+    @HostBinding('class.igx-chip--danger')
+    protected get isDanger() {
+        return this.variant === IgxChipTypeVariant.DANGER;
+    }
+
+    @HostBinding('class.igx-chip--cosy')
+    protected get isCosy() {
+        return this.displayDensity === 'cosy';
+    }
+
+    @HostBinding('class.igx-chip--compact')
+    protected get isCompact() {
+        return this.displayDensity === 'compact';
+    }
+
     /**
      * Property that contains a reference to the `IgxDragDirective` the `IgxChipComponent` uses for dragging behavior.
      *
@@ -479,13 +547,6 @@ export class IgxChipComponent extends DisplayDensityBase implements OnDestroy {
     @ViewChild('chipArea', { read: ElementRef, static: true })
     public chipArea: ElementRef;
 
-    /**
-     * @hidden
-     * @internal
-     */
-    @ViewChild('selectContainer', { read: ElementRef, static: true })
-    public selectContainer: ElementRef;
-
     /**
      * @hidden
      * @internal
@@ -505,7 +566,9 @@ export class IgxChipComponent extends DisplayDensityBase implements OnDestroy {
      * @internal
      */
     public get removeButtonTemplate() {
-        return this.removeIcon || this.defaultRemoveIcon;
+        if(!this.disabled) {
+            return this.removeIcon || this.defaultRemoveIcon;
+        }
     }
 
     /**
@@ -552,20 +615,6 @@ export class IgxChipComponent extends DisplayDensityBase implements OnDestroy {
         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
@@ -836,10 +885,6 @@ export class IgxChipComponent extends DisplayDensityBase implements OnDestroy {
             cancel: false
         };
 
-        fromEvent(this.selectContainer.nativeElement, 'transitionend')
-            .pipe(filter<TransitionEvent>(event => event.propertyName === 'width'), take(1))
-            .subscribe(event => this.onSelectTransitionDone(event));
-
         if (newValue && !this._selected) {
             onSelectArgs.selected = true;
             this.selectedChanging.emit(onSelectArgs);
@@ -848,6 +893,10 @@ export class IgxChipComponent extends DisplayDensityBase implements OnDestroy {
                 this.renderer.addClass(this.chipArea.nativeElement, this._selectedItemClass);
                 this._selected = newValue;
                 this.selectedChange.emit(this._selected);
+                this.selectedChanged.emit({
+                    owner: this,
+                    originalEvent: srcEvent
+                });
             }
         } else if (!newValue && this._selected) {
             this.selectedChanging.emit(onSelectArgs);
@@ -856,6 +905,10 @@ export class IgxChipComponent extends DisplayDensityBase implements OnDestroy {
                 this.renderer.removeClass(this.chipArea.nativeElement, this._selectedItemClass);
                 this._selected = newValue;
                 this.selectedChange.emit(this._selected);
+                this.selectedChanged.emit({
+                    owner: this,
+                    originalEvent: srcEvent
+                });
             }
         }
     }

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

@@ -128,24 +128,33 @@ describe('IgxChip', () => {
         });
 
         it('should render prefix element inside the chip before the content', () => {
-            const chipElems = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+            const igxChip = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+            const igxChipItem = igxChip[1].nativeElement;
 
-            // For this first chip there are 2 elements. The prefix and content span.
-            expect(chipElems[0].nativeElement.children[0].children.length).toEqual(3);
-            expect(chipElems[0].nativeElement.children[0].children[0].offsetWidth).toEqual(0);
-            expect(chipElems[0].nativeElement.children[0].children[1].tagName).toEqual('IGX-ICON');
-            expect(chipElems[0].nativeElement.children[0].children[1].hasAttribute('igxprefix')).toEqual(true);
+            expect(igxChipItem.children[0].children[0].children[0].hasAttribute('igxprefix')).toEqual(true);
         });
 
         it('should render remove button when enabled after the content inside the chip', () => {
-            const chipElems = fix.debugElement.queryAll(By.directive(IgxChipComponent));
-            const chipRemoveButton = ControlsFunction.getChipRemoveButton(chipElems[1].nativeElement);
+            const igxChip = fix.debugElement.queryAll(By.directive(IgxChipComponent));
+            const igxChipItem = igxChip[1].nativeElement;
+            const chipRemoveButton = ControlsFunction.getChipRemoveButton(igxChipItem);
 
-            // For this second chip there are 3 elements. The prefix, content span and the remove button icon .
-            expect(chipElems[1].nativeElement.children[0].children.length).toEqual(4);
+            expect(igxChipItem.children[0].children[2].children[0]).toHaveClass('igx-chip__remove');
             expect(chipRemoveButton).toBeTruthy();
         });
 
+        it('should change chip variant', () => {
+            const fixture = TestBed.createComponent(IgxChipComponent);
+            const igxChip = fixture.componentInstance;
+
+            igxChip.variant = 'danger';
+
+            fixture.detectChanges();
+
+            expect(igxChip.variant).toMatch('danger');
+            expect(igxChip.nativeElement).toHaveClass('igx-chip--danger');
+        });
+
         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}`));
@@ -351,7 +360,7 @@ describe('IgxChip', () => {
             UIInteractions.triggerKeyDownEvtUponElem(' ', secondChipComp.chipArea.nativeElement, true);
             fix.detectChanges();
             expect(secondChipComp.selectedChanging.emit).toHaveBeenCalled();
-            expect(secondChipComp.selectedChanged.emit).not.toHaveBeenCalled();
+            expect(secondChipComp.selectedChanged.emit).toHaveBeenCalled();
             expect(secondChipComp.selectedChanging.emit).not.toHaveBeenCalledWith({
                 originalEvent: null,
                 owner: secondChipComp,

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

@@ -105,7 +105,6 @@ describe('IgxChipsArea ', () => {
     configureTestSuite();
     const CHIP_REMOVE_BUTTON = 'igx-chip__remove';
     const CHIP_SELECT_ICON = 'igx-chip__select';
-    const CHIP_SELECT_ICON_HIDDEN = 'igx-chip__select--hidden';
     const CHIP_AREA_CLASS = 'igx-chip-area';
 
     let fix;
@@ -325,22 +324,14 @@ describe('IgxChipsArea ', () => {
             fix = TestBed.createComponent(TestChipComponent);
             fix.detectChanges();
 
-            const selectedChip = fix.componentInstance.chipsArea.chipsList.toArray()[0];
-            const unselectedChip = fix.componentInstance.chipsArea.chipsList.toArray()[1];
-            selectedChip.selected = true;
+            const igxChip = fix.componentInstance.chipsArea.chipsList.toArray()[0];
+            const igxChipItem = igxChip.nativeElement.children[0]; // Return igx-chip__item
+
+            igxChip.selected = true;
             fix.detectChanges();
 
-            const selectedChipIconContainer = selectedChip.nativeElement.children[0].children[0];
-            const unselectedChipIconContainer = unselectedChip.nativeElement.children[0].children[0];
-            expect(selectedChip.selected).toBe(true);
-            expect(selectedChipIconContainer.children.length).toEqual(1);
-            expect(selectedChipIconContainer.children[0].tagName).toEqual('IGX-ICON');
-            // expect(selectedChip.elementRef.nativeElement.children[0].children[0].offsetWidth).not.toEqual(0);
-            expect(selectedChip.nativeElement.children[0].children[0].className).toEqual(CHIP_SELECT_ICON);
-            expect(selectedChip.nativeElement.children[0].children[0].className).not.toEqual(CHIP_SELECT_ICON_HIDDEN);
-            expect(unselectedChipIconContainer.children.length).toEqual(1);
-            expect(unselectedChipIconContainer.children[0].tagName).toEqual('IGX-ICON');
-            expect(unselectedChip.nativeElement.children[0].children[0].offsetWidth).toEqual(0);
+            expect(igxChip.selected).toBe(true);
+            expect(igxChipItem).toHaveClass(`igx-chip__item--selected`);
         });
 
         it('should fire only onSelection event for chip area when selecting a chip using spacebar', () => {