feat(core/chip): enable shadow dom (#603)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
siemens · Jul 19, 2023 · 53e9fe6 · 53e9fe6
1 parent d022941
commit 53e9fe6
Show file tree

Hide file tree

Showing 9 changed files with 216 additions and 112 deletions.
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -1682,13 +1682,19 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
+        "ix-icon-button",
         "ix-icon"
       ],
       "dependencyGraph": {
         "ix-chip": [
+          "ix-icon-button",
+          "ix-icon"
+        ],
+        "ix-icon-button": [
+          "ix-spinner",
           "ix-icon"
         ]
       },
@@ -4997,6 +5003,7 @@
         "ix-burger-menu",
         "ix-card-list",
         "ix-category-filter",
+        "ix-chip",
         "ix-content-header",
         "ix-date-picker",
         "ix-drawer",
@@ -5036,6 +5043,9 @@
         "ix-category-filter": [
           "ix-icon-button"
         ],
+        "ix-chip": [
+          "ix-icon-button"
+        ],
         "ix-content-header": [
           "ix-icon-button"
         ],

diff --git a/packages/core/src/components/chip/chip-mixin.scss b/packages/core/src/components/chip/chip-mixin.scss
@@ -140,53 +140,4 @@ $border-radius: 100px;
   }
 
   @include chip-variant($interaction: $interaction);
-
-  &[variant='custom'] {
-    @if $interaction {
-      &:hover::after {
-        content: '';
-        display: block;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, var(--theme-l-hover));
-        left: 0;
-        border-radius: $border-radius;
-        pointer-events: none;
-      }
-
-      &.active::after,
-      &:active::after {
-        content: '';
-        display: block;
-        position: absolute;
-        width: 100%;
-        height: 100%;
-        background-color: rgba(0, 0, 0, var(--theme-l-active));
-        left: 0;
-        border-radius: $border-radius;
-        pointer-events: none;
-      }
-
-      &:focus-visible {
-        outline: 1px solid #199fff;
-        outline-offset: var(--theme-btn--focus--outline-offset);
-      }
-    }
-  }
-
-  &[variant='custom'].outline {
-    border: solid 1px transparent;
-    background-color: transparent;
-
-    @if $interaction {
-      &:hover {
-        background-color: rgba(0, 0, 0, var(--theme-l-hover));
-      }
-
-      &:active {
-        background-color: rgba(0, 0, 0, var(--theme-l-active));
-      }
-    }
-  }
 }
diff --git a/packages/core/src/components/chip/chip.scss b/packages/core/src/components/chip/chip.scss
@@ -6,20 +6,34 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-
-@import './chip-mixin';
+@import 'mixins/shadow-dom/component';
 @import 'common-variables';
 @import 'mixins/text-truncation';
 
 $border-radius: 100px;
+$predefined-chips: alarm, critical, warning, info, neutral, success;
 
 :host {
+  @include ix-component;
+  display: inline-block;
+  position: relative;
+  height: 2rem;
+  max-height: 2rem;
+  margin-left: $tiny-space;
+}
+
+:host(.inactive) {
+  pointer-events: none;
+}
+
+.container {
   display: inline-flex;
-  width: fit-content;
+  width: inherit;
+  box-sizing: border-box;
   position: relative;
   align-items: center;
   border-radius: $border-radius;
-  padding: $small-space $medium-space;
+  padding: 0.5rem;
 
   height: $default-control-height;
   max-height: $default-control-height;
@@ -35,31 +49,144 @@ $border-radius: 100px;
     margin-right: 0px;
   }
 
-  margin-left: $tiny-space;
-
   .close-button-container {
     display: inline-flex;
-    flex-grow: 1;
     margin-left: $medium-space;
   }
 
+  .slot-container {
+    flex-grow: 1;
+
+    @include ellipsis;
+  }
+}
+
+.container.icon {
+  padding-left: 0.75rem;
+  padding-right: 0.75rem;
+}
+
+.container.closable {
+  padding-right: 0.25rem;
+}
+
+.container.primary {
+  background-color: var(--theme-color-primary);
+  color: var(--theme-chip-primary--color);
+
   .close-button {
-    position: relative;
-    width: $default-space;
-    height: $default-space;
-    min-width: unset;
-    min-height: unset;
-    margin-left: auto;
-    margin-right: 0;
+    color: var(--theme-chip-primary--color);
+    --ix-icon-button-color: var(--theme-chip-primary--color);
+    pointer-events: auto;
   }
 
-  @include chip();
+  &:hover {
+    background-color: var(--theme-chip-primary--background--hover);
+  }
 
-  .slot-container {
-    @include ellipsis;
+  &:active {
+    background-color: var(--theme-chip-primary--background--active);
+  }
+
+  &:focus-visible {
+    outline: 1px solid #199fff;
+    outline-offset: var(--theme-btn--focus--outline-offset);
   }
 }
 
-:host(.inactive) {
-  pointer-events: none;
+.container.primary.outline {
+  color: var(--theme-chip-primary-outline--color);
+  background-color: transparent;
+  border: solid 1px var(--theme-chip-primary-outline--border-color);
+
+  .close-button {
+    color: var(--theme-chip-primary-outline--color);
+    --ix-icon-button-color: var(--theme-chip-primary-outline--color);
+  }
+
+  &:hover {
+    background-color: var(--theme-chip-primary-outline--background--hover);
+  }
+
+  &:active {
+    background-color: var(--theme-chip-primary-outline--background--active);
+  }
+}
+
+@each $color in $predefined-chips {
+  .container.#{$color} {
+    color: var(--theme-color-#{$color}--contrast);
+
+    &:hover::after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.05);
+      left: 0;
+      border-radius: $border-radius;
+      pointer-events: none;
+    }
+
+    &.active::after,
+    &:active::after {
+      content: '';
+      display: block;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.1);
+      left: 0;
+      border-radius: $border-radius;
+      pointer-events: none;
+    }
+
+    &:not(.outline) {
+      background-color: var(--theme-color-#{$color});
+
+      .close-button {
+        color: var(--theme-color-#{$color}--contrast);
+        --ix-icon-button-color: var(--theme-color-#{$color}--contrast);
+      }
+
+      &:hover::after {
+        content: '';
+        background-color: rgba(0, 0, 0, 0.05);
+      }
+
+      &.active::after,
+      &:active::after {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+    }
+
+    &.outline {
+      color: var(--theme-chip-outline--color);
+      border: solid 1px var(--theme-color-#{$color});
+
+      &:hover::after {
+        display: none;
+      }
+
+      &:hover {
+        background-color: var(--theme-chip-outline--background--hover);
+      }
+
+      &.active::after,
+      &:active::after {
+        display: none;
+      }
+
+      &.active,
+      &:active {
+        background-color: var(--theme-chip-outline--background--active);
+      }
+    }
+
+    &:focus-visible {
+      outline: 1px solid #199fff;
+      outline-offset: var(--theme-btn--focus--outline-offset);
+    }
+  }
 }