fix(core/blind): remove custom action from button tag (#876)

siemens · Nov 3, 2023 · f26ae57 · f26ae57
1 parent 28e73f5
commit f26ae57
Show file tree

Hide file tree

Showing 14 changed files with 211 additions and 130 deletions.
diff --git a/packages/core/src/components/blind/blind.scss b/packages/core/src/components/blind/blind.scss
@@ -11,11 +11,14 @@
 @import 'legacy/mixins/fonts';
 @import 'mixins/hover';
 @import 'mixins/text-truncation';
+@import 'mixins/shadow-dom/component';
 
 @mixin blind($variant: 'insight') {
   :host(.blind-#{$variant}) {
     @if $variant == 'outline' {
-      border: solid var(--theme-blind--border-thickness) var(--theme-blind-base--border-color);
+      border: solid
+        var(--theme-blind--border-thickness)
+        var(--theme-blind-base--border-color);
     }
 
     .blind-header {
@@ -26,20 +29,8 @@
       }
 
       @if $variant == 'insight' or $variant == 'outline' {
-        .blind-header-title-label {
-          color: var(--theme-color-std-text);
-        }
-        .blind-header-title-sublabel {
-          color: var(--theme-color-soft-text);
-        }
-
         @include ghost-hover-pressed;
       } @else {
-        .blind-header-title-label,
-        .blind-header-title-sublabel {
-          color: var(--theme-color-#{$variant}--contrast);
-        }
-
         @include hover {
           background-color: var(--theme-color-#{$variant}--hover);
         }
@@ -50,6 +41,20 @@
       }
     }
 
+    @if $variant == 'insight' or $variant == 'outline' {
+      .blind-header-title-label {
+        color: var(--theme-color-std-text);
+      }
+      .blind-header-title-sublabel {
+        color: var(--theme-color-soft-text);
+      }
+    } @else {
+      .blind-header-title-label,
+      .blind-header-title-sublabel {
+        color: var(--theme-color-#{$variant}--contrast);
+      }
+    }
+
     @if $variant == 'outline' {
       border-color: var(--theme-color-soft-bdr);
     } @else {
@@ -59,81 +64,119 @@
 }
 
 :host {
+  @include ix-component;
   display: flex;
   flex-direction: column;
   border-radius: var(--theme-blind--border-radius);
   overflow: hidden;
 
+  .blind-header-wrapper {
+    display: block;
+    position: relative;
+    width: 100%;
+    min-height: 3rem;
+    height: 3rem;
+    overflow: hidden;
+  }
+
+  .blind-header-content {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: flex-start;
+
+    width: 100%;
+    height: 100%;
+    z-index: 1;
+
+    pointer-events: none;
+    padding-left: 0.5rem;
+  }
+
+  .blind-header-title {
+    display: flex;
+    position: relative;
+    align-items: center;
+    flex-grow: 1;
+    flex-shrink: 0;
+    margin-right: 1rem;
+  }
+
   .blind-header {
     all: unset;
     @include ellipsis;
 
-    display: flex;
-    align-items: center;
+    display: block;
+    position: absolute;
+
+    top: 0px;
+    left: 0px;
+
+    pointer-events: all;
+
+    padding-left: 2.5rem;
     min-height: 3rem;
     height: 3rem;
+    width: calc(100% - 2 * var(--theme-blind--border-thickness));
     border: solid var(--theme-blind--border-thickness) transparent;
     border-radius: var(--theme-blind--border-radius)
       var(--theme-blind--border-radius) 0 0;
-    padding-right: $small-space;
     cursor: pointer;
 
-    z-index: 1;
-
-    .collapse-icon {
-      padding: $tiny-space $small-space;
-    }
-
-    .blind-header-title-col {
-      flex-grow: 1;
-      flex-basis: 0;
-      display: inline-flex;
-      align-items: center;
-      min-width: 0;
+    @include focus-visible {
+      border-color: var(--theme-color-focus-bdr);
+      outline: none;
     }
+  }
 
-    ix-typography {
-      flex-grow: 1;
-      @include ellipsis;
-    }
+  .blind-header-title-icon,
+  .collapse-icon {
+    margin-right: $small-space;
+  }
 
-    .blind-header-title-col:not(:first-of-type) {
-      justify-content: flex-end;
-    }
+  .blind-header-title-row {
+    display: flex;
+    flex-grow: 1;
+  }
 
-    .blind-header-title-label {
-      @include ellipsis;
-      padding-inline-end: 0.5rem;
-    }
+  .blind-header-title-col {
+    flex-grow: 1;
+    flex-basis: 0;
+    display: inline-flex;
+    align-items: center;
+    min-width: 0;
+  }
 
-    .blind-header-title-sublabel {
-      @include ellipsis;
-      padding-inline: 0.5rem;
-    }
+  .blind-header-title-col:not(:first-of-type) {
+    justify-content: flex-end;
+  }
+  ix-typography {
+    flex-grow: 1;
+    @include ellipsis;
+  }
 
-    .blind-header-title,
-    .blind-header-title-basic {
-      display: flex;
-      align-items: center;
-      flex-grow: 1;
-      height: 100%;
-      min-width: 0;
-    }
+  .blind-header-title-label {
+    @include ellipsis;
+    padding-inline-end: 0.5rem;
+  }
 
-    .blind-header-title-basic ix-icon {
-      margin-inline-end: $small-space;
-    }
+  .blind-header-title-sublabel {
+    @include ellipsis;
+    padding-inline: 0.5rem;
+  }
 
-    @include focus-visible {
-      border-color: var(--theme-color-focus-bdr);
-      outline: none;
-    }
+  .blind-header-title {
+    display: flex;
+    align-items: center;
+    flex-grow: 1;
+    height: 100%;
+    min-width: 0;
+  }
 
-    .blind-header-labels {
-      display: inline-flex;
-      flex-grow: 1;
-      min-width: 0;
-    }
+  .blind-header-labels {
+    display: inline-flex;
+    flex-grow: 1;
+    min-width: 0;
   }
 
   .blind-content {
@@ -149,6 +192,10 @@
       padding-bottom: 0px;
     }
   }
+
+  .header-actions {
+    pointer-events: all;
+  }
 }
 
 $blind-variants: (