fix(ui5-button): determine icon-only ignoring comment nodes (#1679)

We used to set icon-only if there are no childNodes, but in this case there are child nodes, because the comments are child nodes. Some styles, that rely on having a text are applied and the button does not look right, the icon is not centred as the button is wider than it should.
SAP · May 26, 2020 · ba1ee78 · ba1ee78
1 parent a00225c
commit ba1ee78
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 1 deletion.
diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
@@ -284,7 +284,7 @@ class Button extends UI5Element {
 			console.warn(`In order for the "submits" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
 		}
 
-		this.iconOnly = !this.childNodes.length;
+		this.iconOnly = !this.textContent;
 		this.hasIcon = !!this.icon;
 	}
 

diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html
@@ -29,6 +29,8 @@
 </head>
 
 <body style="background-color: var(--sapBackgroundColor);">
+
+	<ui5-button icon="home"><!----><!----></ui5-button>
 	<ui5-icon name="invalid_name"></ui5-icon>
 	<ui5-button design="Emphasized" icon="invalid_name">Press</ui5-button>