fix: ignore empty text nodes while setting icon-position attribute in…

… button (#390)

Co-authored-by: Christian Pajung <christian.pajung@telekom.de>
Co-authored-by: Arturo Castillo Delgado <ac@iconstorm.com>

packages/components/src/components/button/__snapshots__/button.spec.ts.snap

@@ -22,13 +22,25 @@ exports[`Button should handle click 2`] = `
 </scale-button>
 `;
 
-exports[`Button should handle more than 1 node 1`] = `
+exports[`Button should handle icon after 1`] = `
 <scale-button icon-position="after" size="small">
   <mock:shadow-root>
     <button class="button button--icon-after button--size-small button--variant-primary" part="base variant-primary after">
       <slot></slot>
     </button>
   </mock:shadow-root>
+  Label
+  <scale-icon-action-search size="16"></scale-icon-action-search>
+</scale-button>
+`;
+
+exports[`Button should handle icon before 1`] = `
+<scale-button icon-position="before" size="small">
+  <mock:shadow-root>
+    <button class="button button--icon-before button--size-small button--variant-primary" part="base variant-primary before">
+      <slot></slot>
+    </button>
+  </mock:shadow-root>
   <scale-icon-action-search size="16">
     Label
   </scale-icon-action-search>

packages/components/src/components/button/button.spec.ts

@@ -38,12 +38,27 @@ describe('Button', () => {
     expect(element.getCssClassMap()).toContain('button--disabled');
   });
 
-  it('should handle more than 1 node', async () => {
+  it('should handle icon before', async () => {
     const page = await newSpecPage({
       components: [Button],
       html: `    
       <scale-button size="small">
-        <scale-icon-action-search size="16" /> Label
+        <scale-icon-action-search size="16" /> 
+        Label
+      </scale-button>
+      `,
+    });
+    expect(page.rootInstance.iconPosition).toBe('before');
+    expect(page.root).toMatchSnapshot();
+  });
+
+  it('should handle icon after', async () => {
+    const page = await newSpecPage({
+      components: [Button],
+      html: `    
+      <scale-button size="small">
+        Label 
+        <scale-icon-action-search size="16" />
       </scale-button>
       `,
     });

packages/components/src/components/button/button.tsx

@@ -85,7 +85,10 @@ export class Button {
    * If so, it's probably an icon, so we set `iconPosition` to `after`.
    */
   setIconPositionProp() {
-    const nodes = Array.from(this.hostElement.childNodes);
+    const nodes = Array.from(this.hostElement.childNodes).filter((node) => {
+      // ignore empty text nodes, which are probably due to formatting
+      return !(node.nodeType === 3 && node.nodeValue.trim() === '');
+    });
     if (nodes.length < 2) {
       return;
     }