fix(blind): provided ellipsis for blind header (#1186)

Co-authored-by: Demirci <[email protected]>
Co-authored-by: Daniel Leroux <[email protected]>

.changeset/curly-singers-complain.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core/blind): show ellipsis if text overflows

packages/core/src/components/blind/blind.scss

@@ -71,9 +71,7 @@
   overflow: hidden;
 
   .blind-header-wrapper {
-    display: block;
     position: relative;
-    width: 100%;
     min-height: 3rem;
     height: 3rem;
     overflow: hidden;
@@ -97,8 +95,7 @@
     position: relative;
     align-items: center;
     flex-grow: 1;
-    flex-shrink: 0;
-    margin-right: 1rem;
+    margin-right: 0.5rem;
   }
 
   .blind-header {
@@ -135,15 +132,15 @@
 
   .blind-header-title-row {
     display: flex;
-    flex-grow: 1;
+    width: 100%;
+    overflow: hidden;
   }
 
   .blind-header-title-col {
-    flex-grow: 1;
-    flex-basis: 0;
     display: inline-flex;
     align-items: center;
-    min-width: 0;
+    width: calc(100% - 1rem);
+    overflow: hidden;
   }
 
   .blind-header-title-col:not(:first-of-type) {
@@ -194,6 +191,7 @@
 
   .header-actions {
     pointer-events: all;
+    margin-left: auto;
   }
 }
 

packages/core/src/tests/blind/basic/index.html

@@ -51,6 +51,20 @@
     <ix-blind icon="bulb" variant="primary" label="primary" sublabel="sublabel">
       <div>Primary content</div>
     </ix-blind>
+    <ix-blind
+      icon="warning"
+      variant="warning"
+      label="A long asset name that does not fit to blind header"
+      subLabel="subLabel A long asset name that does not fit"
+      style="width: 300px"
+    >
+      <ix-icon-button
+        id="context-menu"
+        slot="header-actions"
+        ghost
+        icon="context-menu"
+      ></ix-icon-button>
+    </ix-blind>
     <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
   </body>
 </html>