feat(chip): add outlined version

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

@@ -224,6 +224,19 @@ export class IgxChipComponent implements OnInit, OnDestroy {
     @Input()
     public removeIcon: TemplateRef<any>;
 
+    /**
+     * Sets/gets whether the chip is outlined.
+     * Default value is `false`.
+     *
+     * @example
+     * ```html
+     * <igx-chip outlined></igx-chip>
+     * ```
+     */
+    @Input({transform: booleanAttribute})
+    @HostBinding('class.igx-chip--outlined')
+    public outlined = false;
+
     /**
      * Defines if the chip can be selected on click or through navigation,
      * By default it is set to false.

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

@@ -153,6 +153,18 @@ describe('IgxChip', () => {
             expect(igxChip.nativeElement).toHaveClass('igx-chip--danger');
         });
 
+        it('should apply igx-chip--outlined class when outlined is set to true', () => {
+            const fixture = TestBed.createComponent(IgxChipComponent);
+            const igxChip = fixture.componentInstance;
+            igxChip.id = 'root-outlined';
+
+            igxChip.outlined = true;
+            fixture.detectChanges();
+
+            expect(igxChip.outlined).toBeTrue();
+            expect(igxChip.nativeElement).toHaveClass('igx-chip--outlined');
+        });
+
         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}`));

projects/igniteui-angular/core/src/core/styles/components/chip/_chip-component.scss

@@ -35,6 +35,10 @@
             @extend %igx-chip__item--selected !optional;
         }
 
+        @include m(outlined) {
+            @extend %igx-chip--outlined !optional;
+        }
+
         @include m(primary) {
             @extend %igx-chip--primary !optional;