feat(core/event-list): enable shadow dom (#565)

Co-authored-by: Bergwein, Christopher (RC-AT DI PA SW) <christopher.bergwein@siemenes.com> Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>
siemens · Jun 15, 2023 · 898ae23 · 898ae23
1 parent 3301a0d
commit 898ae23
Show file tree

Hide file tree

Showing 12 changed files with 254 additions and 204 deletions.
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -3768,7 +3768,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "scoped",
+      "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [],
       "dependencyGraph": {},
@@ -3867,10 +3867,16 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "none",
+      "encapsulation": "shadow",
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {},
+      "dependencies": [
+        "ix-icon"
+      ],
+      "dependencyGraph": {
+        "ix-event-list-item": [
+          "ix-icon"
+        ]
+      },
       "props": [
         {
           "name": "chevron",
@@ -3894,8 +3900,13 @@
           "mutable": false,
           "attr": "color",
           "reflectToAttr": false,
-          "docs": "Color of the status indicator.\nAllowed values are all Core UI color names.",
-          "docsTags": [],
+          "docs": "Color of the status indicator.\nYou can find a list of all available colors in our documentation.\nExample values are `--theme-color-alarm` or `color-alarm`",
+          "docsTags": [
+            {
+              "name": "see",
+              "text": "https://ix.siemens.io/docs/theming/colors/"
+            }
+          ],
           "values": [
             {
               "type": "string"

diff --git a/packages/core/scss/mixins/shadow-dom/_host-disabled.scss b/packages/core/scss/mixins/shadow-dom/_host-disabled.scss
@@ -0,0 +1,14 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@mixin host-disabled {
+  :host(.disabled) {
+    pointer-events: none;
+  }
+}
diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -759,7 +759,8 @@ export namespace Components {
          */
         "chevron": boolean;
         /**
-          * Color of the status indicator. Allowed values are all Core UI color names.
+          * Color of the status indicator. You can find a list of all available colors in our documentation. Example values are `--theme-color-alarm` or `color-alarm`
+          * @see https://ix.siemens.io/docs/theming/colors/
          */
         "color": string;
         /**
@@ -3512,7 +3513,8 @@ declare namespace LocalJSX {
          */
         "chevron"?: boolean;
         /**
-          * Color of the status indicator. Allowed values are all Core UI color names.
+          * Color of the status indicator. You can find a list of all available colors in our documentation. Example values are `--theme-color-alarm` or `color-alarm`
+          * @see https://ix.siemens.io/docs/theming/colors/
          */
         "color"?: string;
         /**

diff --git a/packages/core/src/components/event-list-item/event-list-item.scss b/packages/core/src/components/event-list-item/event-list-item.scss
@@ -9,104 +9,123 @@
 
 @import 'mixins/text-truncation';
 @import 'mixins/hover';
+@import 'mixins/shadow-dom/component';
+@import 'mixins/shadow-dom/host-disabled';
 @import 'common-variables';
 
-$height-single-line: 2.5rem;
-
-.ix-event-list-item {
-  display: flex;
-  align-items: center;
-  position: relative;
-  height: $height-single-line;
-  max-height: $height-single-line;
-  border-radius: $default-border-radius;
-  background-color: var(--theme-event-item--background);
-  overflow: hidden;
-  transition: $default-time;
-  cursor: pointer;
-
-  .indicator {
-    height: 100%;
-    width: $small-space;
-    max-width: $small-space;
-    min-width: $small-space;
-    border-top-left-radius: $default-border-radius;
-    border-bottom-left-radius: $default-border-radius;
-  }
-
-  .indicator-empty {
-    border: var(--theme-weak-bdr-1);
-    border-right: none;
-  }
+$default-event-list-item-height: 2.5rem;
 
-  .event-list-item-container {
-    @include ellipsis;
+:host {
+  @include ix-component;
 
+  .event-list-item {
     display: flex;
-    flex-grow: 1;
-    width: calc(100% - (#{$default-space} + #{$small-space}));
-    height: 100%;
-    border: 0.062rem solid;
-    border-color: var(--theme-event-item--border);
-    border-top-left-radius: 0;
-    border-top-right-radius: $default-border-radius;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: $default-border-radius;
-    border-left: none;
-    padding-left: $default-space;
-  }
-
-  &:not(.selected) {
-    @include hover {
-      background-color: var(--theme-event-item--background--hover);
+    align-items: center;
+    position: relative;
+    height: var(--event-list-item-height, $default-event-list-item-height);
+    max-height: var(--event-list-item-height, $default-event-list-item-height);
+    border-radius: var(--event-list-item-border-radius, $default-border-radius);
+    background-color: var(--theme-event-item--background);
+    overflow: hidden;
+    transition: $default-time;
+    cursor: pointer;
+    margin-bottom: var(--event-list-item-margin-bottom, $small-space);
+
+    .indicator {
+      height: 100%;
+      width: $small-space;
+      max-width: $small-space;
+      min-width: $small-space;
+      border-top-left-radius: var(
+        --event-list-item-border-radius,
+        $default-border-radius
+      );
+      border-bottom-left-radius: var(
+        --event-list-item-border-radius,
+        $default-border-radius
+      );
     }
 
-    @include active {
-      background-color: var(--theme-event-item--background--active);
+    .indicator-empty {
+      border: var(--theme-weak-bdr-1);
+      border-right: none;
     }
 
     .event-list-item-container {
+      @include ellipsis;
+
+      display: flex;
+      flex-grow: 1;
+      width: calc(100% - (#{$default-space} + #{$small-space}));
+      height: 100%;
+      border: 0.062rem solid;
+      border-color: var(--theme-event-item--border);
+      border-top-left-radius: 0;
+      border-top-right-radius: var(
+        --event-list-item-border-radius,
+        $default-border-radius
+      );
+      border-bottom-left-radius: 0;
+      border-bottom-right-radius: var(
+        --event-list-item-border-radius,
+        $default-border-radius
+      );
+      border-left: none;
+      padding-left: $default-space;
+    }
+
+    .event-content {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      height: var(--event-list-item-height, 100%);
+      max-height: var(--event-list-item-height, 100%);
+      white-space: var(--event-list-item-content-white-space, inherit);
+      overflow: hidden;
+    }
+
+    .chevron-icon {
+      margin-left: auto;
+      margin-right: $small-space;
+      opacity: 0.6;
+      align-self: center;
+    }
+
+    &:not(.selected) {
       @include hover {
-        border-color: var(--theme-event-item--border--hover);
+        background-color: var(--theme-event-item--background--hover);
       }
 
       @include active {
-        border-color: var(--theme-event-item--border--active);
+        background-color: var(--theme-event-item--background--active);
+      }
+
+      .event-list-item-container {
+        @include hover {
+          border-color: var(--theme-event-item--border--hover);
+        }
+
+        @include active {
+          border-color: var(--theme-event-item--border--active);
+        }
       }
     }
-  }
 
-  &.selected {
-    .event-list-item-container {
+    &.selected .event-list-item-container {
       background-color: var(--theme-event-item--background--selected);
       border-color: var(--theme-event-item--border--selected);
     }
-  }
 
-  &[disabled],
-  &.disabled {
-    pointer-events: none;
+    &[disabled],
+    &.disabled {
+      pointer-events: none;
 
-    .event-list-item-container {
-      background-color: var(--theme-event-item--background--disabled);
-      border-color: var(--theme-event-item--border--disabled);
+      .event-list-item-container {
+        background-color: var(--theme-event-item--background--disabled);
+        border-color: var(--theme-event-item--border--disabled);
+      }
     }
   }
-
-  .chevron-icon {
-    margin-left: auto;
-    margin-right: $small-space;
-    opacity: 0.6;
-    align-self: center;
-  }
-
-  .event-content {
-    display: flex;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-  }
-
-  margin-bottom: $small-space;
 }
+
+@include host-disabled;
diff --git a/packages/core/src/components/event-list-item/event-list-item.tsx b/packages/core/src/components/event-list-item/event-list-item.tsx
@@ -9,25 +9,26 @@
 
 import {
   Component,
-  Element,
   Event,
   EventEmitter,
   h,
+  Host,
   Listen,
   Prop,
 } from '@stencil/core';
 
 @Component({
   tag: 'ix-event-list-item',
   styleUrl: 'event-list-item.scss',
-  scoped: false,
+  shadow: true,
 })
 export class EventListItem {
-  @Element() el!: HTMLIxEventListItemElement;
-
   /**
    * Color of the status indicator.
-   * Allowed values are all Core UI color names.
+   * You can find a list of all available colors in our documentation.
+   * Example values are `--theme-color-alarm` or `color-alarm`
+   *
+   * @see https://ix.siemens.io/docs/theming/colors/
    */
   @Prop() color: string;
 
@@ -65,35 +66,45 @@ export class EventListItem {
   }
 
   render() {
+    const color = this.color?.startsWith('--theme')
+      ? `var(${this.color})`
+      : `var(--theme-${this.color})`;
+
     return (
-      <div
+      <Host
         class={{
-          'ix-event-list-item': true,
-          selected: this.selected,
           disabled: this.disabled,
         }}
       >
         <div
-          class={`indicator ${!this.color ? 'indicator-empty' : ''}`}
-          style={{
-            'background-color': this.color
-              ? `var(--theme-${this.color})`
-              : 'inherit',
-            opacity: `${this.disabled ? 0.4 : this.opacity}`,
+          class={{
+            'event-list-item': true,
+            selected: this.selected,
+            disabled: this.disabled,
           }}
-        ></div>
+        >
+          <div
+            class={`indicator ${!this.color ? 'indicator-empty' : ''}`}
+            style={{
+              'background-color': this.color ? color : 'inherit',
+              opacity: `${this.disabled ? 0.4 : this.opacity}`,
+            }}
+          ></div>
 
-        <div class="event-list-item-container">
-          <div class="event-content">
-            <slot></slot>
+          <div class="event-list-item-container">
+            <div class="event-content">
+              <slot></slot>
+            </div>
+            {this.chevron && (
+              <ix-icon
+                name="chevron-right"
+                size="16"
+                class="chevron-icon"
+              ></ix-icon>
+            )}
           </div>
-          {this.chevron ? (
-            <i class="glyph glyph-16 glyph-chevron-right chevron-icon"></i>
-          ) : (
-            ''
-          )}
         </div>
-      </div>
+      </Host>
     );
   }
 }