fix: handle icononly and texticon segments correnctly

telekom · Jan 5, 2024 · a85870d · a85870d
1 parent 4fb3b0a
commit a85870d
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 24 deletions.
diff --git a/packages/components/src/components/segment/segment.css b/packages/components/src/components/segment/segment.css
@@ -92,23 +92,6 @@
   color: var(--color);
 }
 
-.segment--icon-only.segment--small .segment--mask {
-  /* padding-left: var(--telekom-spacing-composition-space-05);
-  padding-right: var(--telekom-spacing-composition-space-05); */
-  padding-left: 0.625rem;
-  padding-right: 0.625rem;  
-}
-
-.segment--icon-only.segment--medium .segment--mask {
-  padding-left: var(--telekom-spacing-composition-space-06);
-  padding-right: var(--telekom-spacing-composition-space-06);
-}
-
-.segment--icon-only.segment--large .segment--mask {
-  padding-left: var(--telekom-spacing-composition-space-07);
-  padding-right: var(--telekom-spacing-composition-space-07);
-}
-
 .segment--small .segment--mask {
   padding-left: 8px;
   padding-right: 12px;
@@ -143,12 +126,6 @@
   padding-right: var(--telekom-spacing-composition-space-07);
 }
 
-
-.segment--icon-only .segment--mask {
-  padding-left: var(--telekom-spacing-composition-space-05);
-  padding-right: var(--telekom-spacing-composition-space-05);
-}
-
 /* selected */
 
 .segment--selected {
@@ -321,4 +298,28 @@
 
 
 .segment--list-item--left-sibling-selected {
+}
+
+ /* icon only */
+
+ .segment--icon-only.segment--small .segment--mask {
+  /* padding-left: var(--telekom-spacing-composition-space-05);
+  padding-right: var(--telekom-spacing-composition-space-05); */
+  padding-left: 0.625rem;
+  padding-right: 0.625rem;  
+}
+
+.segment--icon-only.segment--medium .segment--mask {
+  padding-left: var(--telekom-spacing-composition-space-06);
+  padding-right: var(--telekom-spacing-composition-space-06);
+}
+
+.segment--icon-only.segment--large .segment--mask {
+  padding-left: var(--telekom-spacing-composition-space-07);
+  padding-right: var(--telekom-spacing-composition-space-07);
+}
+
+.segment--icon-only .segment--mask {
+  padding-left: var(--telekom-spacing-composition-space-05);
+  padding-right: var(--telekom-spacing-composition-space-05);
 }
diff --git a/packages/components/src/components/segment/segment.tsx b/packages/components/src/components/segment/segment.tsx
@@ -92,7 +92,12 @@ export class Segment {
 
   connectedCallback() { 
     const childNodes = Array.from(this.hostElement.childNodes);
-    const nodeNames = childNodes.map(el => el.nodeName.substring(0, 10))
+    let nodeNames = []
+    for (let el of childNodes) {
+      if ( (el.nodeValue && el.nodeValue.replace('\n', '\\n').trim() !== '\\n') || el.nodeType !== 3 ) {
+        nodeNames.push(el.nodeName.substring(0, 10))
+      }
+    }
     const hasText = nodeNames.includes('#text');
     const hasIcon = nodeNames.includes('SCALE-ICON')
     this.iconOnly = hasIcon && !hasText;