feat(core/tabs): enable shadowDOM (#594)

siemens · Jun 27, 2023 · 69e69c0 · 69e69c0
1 parent 8ed1301
commit 69e69c0
Show file tree

Hide file tree

Showing 12 changed files with 160 additions and 143 deletions.
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -6117,6 +6117,9 @@
         ],
         "ix-icon-button": [
           "ix-icon"
+        ],
+        "ix-tabs": [
+          "ix-icon"
         ]
       },
       "props": [
@@ -6767,6 +6770,9 @@
         ],
         "ix-icon-button": [
           "ix-icon"
+        ],
+        "ix-tabs": [
+          "ix-icon"
         ]
       },
       "props": [
@@ -8807,7 +8813,7 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "none",
+      "encapsulation": "shadow",
       "dependents": [
         "ix-menu-about",
         "ix-menu-settings"
@@ -8986,13 +8992,18 @@
       "usage": {},
       "docs": "",
       "docsTags": [],
-      "encapsulation": "none",
+      "encapsulation": "shadow",
       "dependents": [
         "ix-menu-about",
         "ix-menu-settings"
       ],
-      "dependencies": [],
+      "dependencies": [
+        "ix-icon"
+      ],
       "dependencyGraph": {
+        "ix-tabs": [
+          "ix-icon"
+        ],
         "ix-menu-about": [
           "ix-tabs"
         ],

diff --git a/packages/core/src/components/tab-item/tab-item.scss b/packages/core/src/components/tab-item/tab-item.scss
@@ -10,8 +10,10 @@
 @import 'common-variables';
 @import 'mixins/text-truncation';
 @import 'mixins/hover';
+@import 'mixins/shadow-dom/component';
 
-ix-tab-item {
+:host {
+  @include ix-component;
   position: relative;
   display: flex;
   align-items: center;
@@ -24,23 +26,7 @@ ix-tab-item {
   background-color: var(--theme-tab--background);
   color: var(--theme-tab--color);
 
-  &.circle {
-    height: 72px;
-  }
-
-  &.top {
-    &::after {
-      top: 0;
-    }
-  }
-
-  &.bottom {
-    &::after {
-      bottom: 0;
-    }
-  }
-
-  &::after {
+  ::after {
     content: '';
     position: absolute;
     background-color: var(--theme-tab-indicator--background);
@@ -49,12 +35,6 @@ ix-tab-item {
     left: 0;
   }
 
-  &.stretched {
-    flex-basis: 100%;
-    width: 100%;
-    @include ellipsis;
-  }
-
   .text {
     @include ellipsis;
 
@@ -66,74 +46,12 @@ ix-tab-item {
     vertical-align: middle;
   }
 
-  &:hover:not(.circle) {
-    background-color: var(--theme-tab--background--hover);
-    color: var(--theme-tab-color-hover);
-    cursor: pointer;
-
-    &::after {
-      background-color: var(--theme-tab-indicator--background--hover);
-    }
-  }
-
-  &:active:not(.circle) {
-    background-color: var(--theme-tab--background--active);
-    color: var(--theme-tab-color--active);
-
-    &::after {
-      background-color: var(--theme-tab-indicator--background--active);
-    }
-  }
-
-  &:focus-visible {
-    outline: 0px solid var(--focus--border-color);
-
-    .circle {
-      outline: 1px solid var(--focus--border-color);
-    }
-  }
-
-  &:focus-visible:not(.circle) {
-    outline: 1px solid var(--focus--border-color);
-  }
-
-  &.disabled {
-    color: var(--theme-tab--color--disabled);
-    background-color: var(--theme-tab--background--disabled);
-
-    &::after {
-      background-color: var(--theme-tab-indicator--background--disabled);
-    }
-  }
-
-  &.selected:not(.disabled) {
-    background-color: var(--theme-tab--background--selected);
-    color: var(--theme-tab--color--selected);
-
-    &::after {
-      background-color: var(--theme-tab-indicator--background--selected);
-    }
-  }
-
-  &.icon {
-    padding: $large-space $small-space;
-  }
-
-  &.small-tab {
-    height: 32px;
-    padding: $default-space;
-
-    &.icon {
-      padding: $default-space $tiny-space;
-    }
-  }
-
   .circle {
     display: flex;
     justify-content: center;
     align-items: center;
-    height: 48px;
-    width: 48px;
+    height: 3rem;
+    width: 3rem;
     background-color: var(--theme-animated-tab-indicator--background);
     border-radius: 50%;
     border: 2px solid var(--theme-animated-tab-circle--border-color);
@@ -185,20 +103,113 @@ ix-tab-item {
     padding-left: $tiny-space;
     padding-right: $tiny-space;
     font-size: 12px;
-    line-height: 16px;
+    line-height: 14px;
     color: var(--theme-pill-outline--color);
     cursor: pointer;
 
     &.selected {
       border-color: var(--theme-tab-pill--border-color--selected);
+
+      &::after {
+        display: none;
+      }
     }
 
     &.disabled {
       border-color: var(--theme-tab-pill--border-color--disabled);
     }
+
+    &::after {
+      display: none;
+    }
   }
 
   .hidden {
     display: none;
   }
 }
+
+:host(.circle) {
+  height: 72px;
+}
+
+:host(.top) {
+  ::after {
+    top: 0;
+  }
+}
+
+:host(.bottom) {
+  ::after {
+    bottom: 0;
+  }
+}
+
+:host(.stretched) {
+  flex-basis: 100%;
+  width: 100%;
+  @include ellipsis;
+}
+
+:host(:hover:not(.circle)) {
+  background-color: var(--theme-tab--background--hover);
+  color: var(--theme-tab-color-hover);
+  cursor: pointer;
+
+  ::after {
+    background-color: var(--theme-tab-indicator--background--hover);
+  }
+}
+
+:host(:active:not(.circle)) {
+  background-color: var(--theme-tab--background--active);
+  color: var(--theme-tab-color--active);
+
+  ::after {
+    background-color: var(--theme-tab-indicator--background--active);
+  }
+}
+
+:host(:focus-visible) {
+  outline: 0px solid var(--focus--border-color);
+
+  .circle {
+    outline: 1px solid var(--focus--border-color);
+  }
+}
+
+:host(:focus-visible:not(.circle)) {
+  outline: 1px solid var(--focus--border-color);
+}
+
+:host(.disabled) {
+  pointer-events: none;
+  color: var(--theme-tab--color--disabled);
+  background-color: var(--theme-tab--background--disabled);
+
+  ::after {
+    background-color: var(--theme-tab-indicator--background--disabled);
+  }
+}
+
+:host(.selected:not(.disabled)) {
+  background-color: var(--theme-tab--background--selected);
+  color: var(--theme-tab--color--selected);
+
+  ::after {
+    background-color: var(--theme-tab-indicator--background--selected);
+  }
+}
+
+:host(.icon) {
+  padding: $large-space $small-space;
+}
+
+:host(.small-tab) {
+  height: 32px;
+  padding: $default-space;
+}
+
+:host(.small-tab.icon) {
+  padding: $default-space $tiny-space;
+}
diff --git a/packages/core/src/components/tab-item/tab-item.tsx b/packages/core/src/components/tab-item/tab-item.tsx
@@ -12,7 +12,7 @@ import { Component, h, Host, Prop } from '@stencil/core';
 @Component({
   tag: 'ix-tab-item',
   styleUrl: 'tab-item.scss',
-  scoped: false,
+  shadow: true,
 })
 export class TabItem {
   /**

diff --git a/packages/core/src/components/tab-item/test/tab-item.spec.tsx b/packages/core/src/components/tab-item/test/tab-item.spec.tsx
diff --git a/packages/core/src/components/tabs/tabs.scss b/packages/core/src/components/tabs/tabs.scss
@@ -9,8 +9,10 @@
 
 @import 'common-variables';
 @import 'mixins/text-truncation';
+@import 'mixins/shadow-dom/component';
 
-ix-tabs {
+:host {
+  @include ix-component;
   width: auto;
   display: flex;
   align-items: center;
@@ -60,18 +62,32 @@ ix-tabs {
   }
 
   .overflow-shadow {
-    width: 50px;
-    height: 40px;
-    position: absolute;
-    left: 0;
-    top: 0;
-    background: linear-gradient(90deg, var(--theme-color-1) 50%, transparent);
-    z-index: 1;
+    display: block;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    pointer-events: all;
 
-    &.right {
-      left: auto;
-      right: 0;
-      background: linear-gradient(90deg, transparent, var(--theme-color-1) 50%);
+    &.shadow-left {
+      mask-image: linear-gradient(90deg, transparent 0px, black 45px);
+    }
+
+    &.shadow-right {
+      mask-image: linear-gradient(
+        90deg,
+        black calc(100% - 45px),
+        transparent 100%
+      );
+    }
+
+    &.shadow-both {
+      mask-image: linear-gradient(
+        90deg,
+        transparent 0px,
+        black 45px,
+        black calc(100% - 45px),
+        transparent 100%
+      );
     }
   }
 }