feat(core/filter-chip): enable shadow dom (#602)

Author: nuke-ellington

packages/core/component-doc.json

@@ -1318,7 +1318,7 @@
           "ix-icon"
         ],
         "ix-filter-chip": [
-          "ix-icon"
+          "ix-icon-button"
         ]
       },
       "props": [
@@ -4129,16 +4129,19 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [
         "ix-category-filter",
         "ix-select"
       ],
       "dependencies": [
-        "ix-icon"
+        "ix-icon-button"
       ],
       "dependencyGraph": {
         "ix-filter-chip": [
+          "ix-icon-button"
+        ],
+        "ix-icon-button": [
           "ix-icon"
         ],
         "ix-category-filter": [
@@ -4822,6 +4825,7 @@
         "ix-drawer",
         "ix-dropdown-button",
         "ix-expanding-search",
+        "ix-filter-chip",
         "ix-flip-tile",
         "ix-group-context-menu",
         "ix-map-navigation",
@@ -4864,6 +4868,9 @@
         "ix-expanding-search": [
           "ix-icon-button"
         ],
+        "ix-filter-chip": [
+          "ix-icon-button"
+        ],
         "ix-flip-tile": [
           "ix-icon-button"
         ],
@@ -7509,7 +7516,7 @@
           "ix-icon"
         ],
         "ix-filter-chip": [
-          "ix-icon"
+          "ix-icon-button"
         ]
       },
       "props": [
@@ -8030,7 +8037,7 @@
           "ix-icon"
         ],
         "ix-filter-chip": [
-          "ix-icon"
+          "ix-icon-button"
         ],
         "ix-icon-button": [
           "ix-icon"

packages/core/scss/mixins/_hover.scss

@@ -43,6 +43,38 @@
   }
 }
 
+@mixin host-hover() {
+  :host(:not(.disabled):not(:disabled)) {
+    cursor: pointer;
+  }
+
+  :host(:hover:not(.disabled):not(:disabled)) {
+      @content;
+  }
+}
+
+@mixin host-active() {
+  :host(:not(.disabled):not(:disabled)) {
+    cursor: pointer;
+  }
+
+  :host(:active:not(.disabled):not(:disabled)) {
+      @content;
+  }
+}
+
+@mixin host-focus() {
+  :host(:focus:not(.disabled):not(:disabled)) {
+    @content;
+  }
+}
+
+@mixin host-focus-visible() {
+  :host(:focus-visible:not(.disabled):not(:disabled)) {
+    @content;
+  }
+}
+
 @mixin ghost-hover-pressed {
   &:not(.disabled):not(:disabled) {
     &.hover,

packages/core/src/components/filter-chip/filter-chip.scss

@@ -10,8 +10,11 @@
 @import 'common-variables';
 @import 'mixins/hover';
 @import 'mixins/text-truncation';
+@import 'mixins/shadow-dom/component';
 
 :host {
+  @include ix-component;
+
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -22,23 +25,6 @@
   background-color: var(--theme-color-ghost);
   color: var(--theme-chip-primary-outline--color);
 
-  @include hover {
-    background-color: var(--theme-color-ghost-primary--hover);
-    border-color: var(--theme-chip-primary-outline--border-color--hover);
-    color: var(--theme-chip-primary-outline--color--hover);
-  }
-
-  @include active {
-    background-color: var(--theme-color-ghost-primary--active);
-    border-color: var(--theme-chip-primary-outline--border-color--active);
-    color: var(--theme-chip-primary-outline--color--active);
-  }
-
-  @include focus-visible {
-    outline: var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);
-    outline-offset: -0.125rem;
-  }
-
   .slot-container {
     @include ellipsis;
 
@@ -49,17 +35,29 @@
     }
   }
 
-  .btn-oval {
+  ix-icon-button {
     height: $large-space;
-    width: $large-space;
-    min-width: $large-space;
     margin-left: $tiny-space;
-    padding: 0;
-    vertical-align: top;
 
     @include focus-visible {
       outline: none;
-      border-color: #199fff;
     }
   }
 }
+
+@include host-hover {
+    background-color: var(--theme-color-ghost-primary--hover);
+    border-color: var(--theme-chip-primary-outline--border-color--hover);
+    color: var(--theme-chip-primary-outline--color--hover);
+  }
+
+  @include host-active {
+    background-color: var(--theme-color-ghost-primary--active);
+    border-color: var(--theme-chip-primary-outline--border-color--active);
+    color: var(--theme-chip-primary-outline--color--active);
+  }
+
+  @include host-focus-visible {
+    outline: var(--theme-color-focus-bdr) solid var(--theme-focus--border-thickness);
+    outline-offset: -0.125rem;
+  }

packages/core/src/components/filter-chip/filter-chip.tsx

@@ -20,7 +20,7 @@ import {
 @Component({
   tag: 'ix-filter-chip',
   styleUrl: 'filter-chip.scss',
-  scoped: true,
+  shadow: true,
 })
 export class FilterChip {
   @Element() el: HTMLIxFilterChipElement;
@@ -47,13 +47,16 @@ export class FilterChip {
         <div class="slot-container">
           <slot></slot>
         </div>
-        <button
+        <ix-icon-button
+          ghost
+          oval
+          icon="close-small"
+          size="16"
+          tabindex={this.disabled ? -1 : 0}
+          variant="Primary"
           disabled={this.disabled}
-          class="btn btn-invisible-primary btn-oval"
           onClick={(e) => this.onCloseClick(e)}
-        >
-          <ix-icon name="close-small" size="16"></ix-icon>
-        </button>
+        ></ix-icon-button>
       </Host>
     );
   }