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

ilhan007 · web-flow · commit ba1ee7815e72 · 2020-05-26T09:50:39.000+03:00
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.
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>
 

Original file line number	Diff line number	Diff line change
`@@ -284,7 +284,7 @@ class Button extends UI5Element {`
`284`	`284`	console.warn(`In order for the "submits" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
`285`	`285`	`}`
`286`	`286`
`287`		`- this.iconOnly = !this.childNodes.length;`
	`287`	`+ this.iconOnly = !this.textContent;`
`288`	`288`	`this.hasIcon = !!this.icon;`
`289`	`289`	`}`
`290`	`290`