feat(chip): add outlined version

src/components/chip/chip.spec.ts

@@ -61,6 +61,20 @@ describe('Chip', () => {
     expect(chip).dom.to.equal('<igc-chip></igc-chip>', DIFF_OPTIONS);
   });
 
+  it('should toggle the outlined property successfully', async () => {
+    const chip = await fixture<IgcChipComponent>(html`<igc-chip></igc-chip>`);
+
+    chip.outlined = true;
+    expect(chip.outlined).to.be.true;
+    await elementUpdated(chip);
+    expect(chip).dom.to.equal('<igc-chip outlined></igc-chip>', DIFF_OPTIONS);
+
+    chip.outlined = false;
+    expect(chip.outlined).to.be.false;
+    await elementUpdated(chip);
+    expect(chip).dom.to.equal('<igc-chip></igc-chip>', DIFF_OPTIONS);
+  });
+
   it('should toggle the selectable property successfully', async () => {
     const chip = await fixture<IgcChipComponent>(html`<igc-chip></igc-chip>`);
 

src/components/chip/chip.ts

@@ -74,6 +74,14 @@ export default class IgcChipComponent extends EventEmitterMixin<
   @property({ type: Boolean, reflect: true })
   public removable = false;
 
+  /**
+   * Defines if the chip is outlined or not.
+   *
+   * @attr
+   */
+  @property({ type: Boolean, reflect: true })
+  public outlined = false;
+
   /**
    * Defines if the chip is selectable or not.
    * @attr

src/components/chip/themes/chip.base.scss

@@ -13,7 +13,7 @@
     display: inline-flex;
     place-items: center;
     font-family: var(--ig-font-family);
-    border: rem(1px) solid;
+    border: none;
     box-shadow: none;
     cursor: pointer;
     padding: 0 pad-inline(rem(2px), rem(6px), rem(12px));
@@ -23,85 +23,63 @@
     }
 }
 
-:host([variant='primary']) button,
-:host([selected][variant='primary']) button:not([disabled]) {
-    background: color(primary, 500);
-    color: contrast-color(primary, 500);
-
-    &:focus {
-        background: color(primary, 800);
-        color: contrast-color(primary, 800);
-    }
-
-    &:hover {
-        background: color(primary, 600);
-        color: contrast-color(primary, 600);
-    }
-}
-
-:host([variant='info']) button,
-:host([selected][variant='info']) button:not([disabled]) {
-    background: color(info, 500);
-    color: contrast-color(info, 500);
-
-    &:focus {
-        background: color(info, 800);
-        color: contrast-color(info, 800);
+@mixin chip-variants($variant, $variant-color) {
+    :host([variant='#{$variant}']) button,
+    :host([selected][variant='#{$variant}']) button:not([disabled]) {
+        background: color($variant-color, 500);
+        color: contrast-color($variant-color, 500);
+
+        &:focus {
+            background: color($variant-color, 800);
+            color: contrast-color($variant-color, 800);
+        }
+
+        &:hover {
+            background: color($variant-color, 600);
+            color: contrast-color($variant-color, 600);
+        }
     }
 
-    &:hover {
-        background: color(info, 600);
-        color: contrast-color(info, 600);
+    :host([variant='#{$variant}']) button[disabled],
+    :host([selected][variant='#{$variant}']) button[disabled] {
+        background: color(gray, 200);
+        color: color(gray, 500);
     }
 }
 
-:host([variant='success']) button,
-:host([selected][variant='success']) button:not([disabled]) {
-    background: color(success, 500);
-    color: contrast-color(success, 500);
-
-    &:focus {
-        background: color(success, 800);
-        color: contrast-color(success, 800);
-    }
+@include chip-variants('primary', primary);
+@include chip-variants('info', info);
+@include chip-variants('success', success);
+@include chip-variants('warning', warn);
+@include chip-variants('danger', error);
 
-    &:hover {
-        background: color(success, 600);
-        color: contrast-color(success, 600);
-    }
-}
+@mixin outlined-variant($variant, $variant-color) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        background: transparent;
 
-:host([variant='warning']) button,
-:host([selected][variant='warning']) button:not([disabled]) {
-    background: color(warn, 500);
-    color: contrast-color(warn, 500);
+        &:focus {
+            background: color($variant-color, 800, .30);
+        }
 
-    &:focus {
-        background: color(warn, 800);
-        color: contrast-color(warn, 800);
+        &:hover {
+            background: color($variant-color, 600, .16);
+        }
     }
 
-    &:hover {
-        background: color(warn, 600);
-        color: contrast-color(warn, 600);
+    :host([outlined][variant='#{$variant}']) button[disabled],
+    :host([selected][outlined][variant='#{$variant}']) button[disabled] {
+        background: color(gray, 200, .30);
+        color: color(gray, 500);
+        border-color: color(gray, 500, .30);
     }
 }
 
-:host([variant='danger']) button,
-:host([selected][variant='danger']) button:not([disabled]) {
-    background: color(error, 500);
-    color: contrast-color(error, 500);
-
-    &:focus {
-        background: color(error, 800);
-        color: contrast-color(error, 800);
-    }
-
-    &:hover {
-        background: color(error, 600);
-        color: contrast-color(error, 600);
-    }
-}
+@include outlined-variant('primary', primary);
+@include outlined-variant('info', info);
+@include outlined-variant('success', success);
+@include outlined-variant('warning', warn);
+@include outlined-variant('danger', error);
 
 [part='prefix'],
 [part='suffix'] {

src/components/chip/themes/dark/chip.bootstrap.scss

@@ -7,3 +7,17 @@ $theme: $bootstrap;
 :host {
     @include css-vars-from-theme(diff(light.$base, $theme));
 }
+
+@mixin chip-outlined-variants-dark($variant, $variant-color, $border-shade) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, $border-shade);
+        color: contrast-color(gray, 100);
+    }
+}
+
+@include chip-outlined-variants-dark('primary', primary, 300);
+@include chip-outlined-variants-dark('info', info, 600);
+@include chip-outlined-variants-dark('success', success, 200);
+@include chip-outlined-variants-dark('warning', warn, 500);
+@include chip-outlined-variants-dark('danger', error, 400);

src/components/chip/themes/dark/chip.fluent.scss

@@ -7,3 +7,25 @@ $theme: $fluent;
 :host {
     @include css-vars-from-theme(diff(light.$base, $theme));
 }
+
+@mixin chip-outlined-variants-dark($variant, $variant-color, $border-shade, $color-shade) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, $border-shade);
+        color: contrast-color($variant-color, $color-shade);
+
+        &:focus {
+            background: color($variant-color, 800, .50);
+        }
+
+        &:hover {
+            background: color($variant-color, 600, .20);
+        }
+    }
+}
+
+@include chip-outlined-variants-dark('primary', primary, 200, 600);
+@include chip-outlined-variants-dark('info', info, 200, 500);
+@include chip-outlined-variants-dark('success', success, 100, 600);
+@include chip-outlined-variants-dark('warning', warn, 200, 500);
+@include chip-outlined-variants-dark('danger', error, 50, 600);

src/components/chip/themes/dark/chip.indigo.scss

@@ -36,14 +36,54 @@ $theme: $indigo;
     }
 }
 
+:host([variant='warning']) button[disabled],
+:host([selected][variant='warning']) button[disabled] {
+    color: color(gray, 50);
+}
+
 :host([variant='danger']) button,
 :host([selected][variant='danger']) button:not([disabled]) {
     &:focus {
         box-shadow: 0 0 0 rem(3px) color(error, 900);
     }
 }
 
-:host([selected]) button[disabled],
-:host([variant='primary']) button[disabled] {
+:host([variant='primary']) button[disabled],
+:host([selected][variant='primary']) button[disabled] {
     color: contrast-color(primary, 900, .2);
 }
+
+@mixin chip-outlined-variants-dark($variant, $variant-color, $border-shade) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, $border-shade);
+        color: contrast-color(gray, 100);
+
+        &:hover {
+            @if $variant == 'success' {
+                background: color($variant-color, 700, .30);
+            } @else if $variant == 'danger' {
+                background: color($variant-color, 500, .30);
+            } @else {
+                background: color($variant-color, 400, .30);
+            }
+        }
+
+        &:focus {
+            background: transparent;
+        }
+    }
+
+    :host([outlined][variant='#{$variant}']) button[disabled],
+    :host([selected][outlined][variant='#{$variant}']) button[disabled] {
+        background: transparent;
+        border-color: color($variant-color, $border-shade);
+        color: contrast-color(gray, 100);
+    }
+}
+
+@include chip-outlined-variants-dark('primary', primary, 400);
+@include chip-outlined-variants-dark('info', info, 300);
+@include chip-outlined-variants-dark('success', success, 500);
+@include chip-outlined-variants-dark('warning', warn, 300);
+@include chip-outlined-variants-dark('danger', error, 400);

src/components/chip/themes/dark/chip.material.scss

@@ -7,3 +7,17 @@ $theme: $material;
 :host {
     @include css-vars-from-theme(diff(light.$base, $theme));
 }
+
+@mixin chip-outlined-variants-dark($variant, $variant-color, $border-shade) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, $border-shade);
+        color: contrast-color(gray, 100);
+    }
+}
+
+@include chip-outlined-variants-dark('primary', primary, 200);
+@include chip-outlined-variants-dark('info', info, 200);
+@include chip-outlined-variants-dark('success', success, 300);
+@include chip-outlined-variants-dark('warning', warn, 300);
+@include chip-outlined-variants-dark('danger', error, 300);

src/components/chip/themes/light/chip.bootstrap.scss

@@ -6,3 +6,22 @@ $theme: $bootstrap;
 :host {
     @include css-vars-from-theme(diff($base, $theme));
 }
+
+@mixin chip-outlined-variants-light($variant, $variant-color) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        color: contrast-color($variant-color, 100);
+
+        @if $variant == 'warning' or $variant == 'info' {
+            border-color: color($variant-color, 900);
+        } @else {
+            border-color: color($variant-color, 600);
+        }
+    }
+}
+
+@include chip-outlined-variants-light('primary', primary);
+@include chip-outlined-variants-light('info', info);
+@include chip-outlined-variants-light('success', success);
+@include chip-outlined-variants-light('warning', warn);
+@include chip-outlined-variants-light('danger', error);

src/components/chip/themes/light/chip.fluent.scss

@@ -6,3 +6,25 @@ $theme: $fluent;
 :host {
     @include css-vars-from-theme(diff($base, $theme));
 }
+
+@mixin chip-outlined-variants-light($variant, $variant-color) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, 600);
+        color: contrast-color($variant-color, 100);
+
+        &:focus {
+            background: color($variant-color, 800, .30);
+        }
+
+        &:hover {
+            background: color($variant-color, 600, .16);
+        }
+    }
+}
+
+@include chip-outlined-variants-light('primary', primary);
+@include chip-outlined-variants-light('info', info);
+@include chip-outlined-variants-light('success', success);
+@include chip-outlined-variants-light('warning', warn);
+@include chip-outlined-variants-light('danger', error);

src/components/chip/themes/light/chip.indigo.scss

@@ -35,14 +35,52 @@ $theme: $indigo;
     }
 }
 
+:host([variant='warning']) button[disabled],
+:host([selected][variant='warning']) button[disabled] {
+    color: color(gray, 900);
+}
+
 :host([variant='danger']) button,
 :host([selected][variant='danger']) button:not([disabled]) {
     &:focus {
         box-shadow: 0 0 0 rem(3px) color(error, 100);
     }
 }
 
-:host([selected]) button[disabled],
-:host([variant='primary']) button[disabled] {
+:host([variant='primary']) button[disabled],
+:host([selected][variant='primary']) button[disabled] {
     color: contrast-color(primary, 900, .4);
 }
+
+@mixin chip-outlined-variants-light($variant, $variant-color, $border-shade) {
+    :host([outlined][variant='#{$variant}']) button,
+    :host([selected][outlined][variant='#{$variant}']) button:not([disabled]) {
+        border-color: color($variant-color, $border-shade);
+        color: color(gray, 900);
+
+        &:hover {
+            @if $variant == 'info' or $variant == 'warning' {
+                background: color($variant-color, 400, .30);
+            } @else {
+                background: color($variant-color, $border-shade, .30);
+            }
+        }
+
+        &:focus {
+            background: transparent;
+        }
+    }
+
+    :host([outlined][variant='#{$variant}']) button[disabled],
+    :host([selected][outlined][variant='#{$variant}']) button[disabled] {
+        background: transparent;
+        border-color: color($variant-color, $border-shade);
+        color: color(gray, 900);
+    }
+}
+
+@include chip-outlined-variants-light('primary', primary, 400);
+@include chip-outlined-variants-light('info', info, 500);
+@include chip-outlined-variants-light('success', success, 700);
+@include chip-outlined-variants-light('warning', warn, 600);
+@include chip-outlined-variants-light('danger', error, 500);