fix(ui5-button): set icon-only attribute (#2567) (#2824)

xpr0gamers · web-flow · commit d834ec6d2967 · 2021-03-02T14:06:42.000+02:00
Issue: When a ui5-button is created with blank text inside the component, for example <ui5-button icon="message-information"> </ui5-button>, the attribute "icon-only" isn't set correctly. Solution: Trim the node value when node is type of "TEXT_NODE" and check the length of the trimmed value. FIXES: #2567
diff --git a/packages/main/src/Button.js b/packages/main/src/Button.js
@@ -379,7 +379,10 @@ class Button extends UI5Element {
 	}
 
 	get isIconOnly() {
-		return !Array.from(this.childNodes).filter(node => node.nodeType !== Node.COMMENT_NODE).length;
+		return !Array.from(this.childNodes).filter(node => {
+		    return node.nodeType !== Node.COMMENT_NODE
+            && ( node.nodeType !== Node.TEXT_NODE || node.nodeValue.trim().length !== 0)
+        }).length;
 	}
 
 	get accInfo() {
diff --git a/packages/main/test/pages/Button.html b/packages/main/test/pages/Button.html
@@ -29,7 +29,8 @@
 </head>
 
 <body style="background-color: var(--sapBackgroundColor);">
-	<ui5-button icon="home"><!----><!----></ui5-button>
+	<ui5-button icon="home" id="icon-only-comment"><!----><!----></ui5-button>
+	<ui5-button icon="text" id="icon-only-blank-text"> </ui5-button>
 	<ui5-button>
 		<ui5-avatar
 			id="btnImage"
diff --git a/packages/main/test/specs/Button.spec.js b/packages/main/test/specs/Button.spec.js
@@ -26,6 +26,14 @@ describe("Button general interaction", () => {
 		assert.strictEqual(btnImage.isDisplayed(), true, "Btn image is rendered");
 	});
 
+    it("tests button's icon only rendering", () => {
+        const oButtonIconOnlyComment = browser.$("#icon-only-comment");
+        const oButtonIconOnlyBlankText = browser.$("#icon-only-blank-text");
+
+        assert.strictEqual(oButtonIconOnlyComment.getAttribute("icon-only"), "", "Button comment has attribute icon-only");
+        assert.strictEqual(oButtonIconOnlyBlankText.getAttribute("icon-only"), "", "Button blank text has attribute icon-only");
+    });
+
 	it("tests click event", () => {
 		const button = browser.$("#button1");
 		const field = browser.$("#click-counter");
@@ -92,5 +100,5 @@ describe("Button general interaction", () => {
 		button.removeAttribute("aria-expanded");
 
 		assert.strictEqual(innerButton.getAttribute("aria-expanded"), null, "Attribute is reflected");
-	})
+	});
 });

Original file line number	Diff line number	Diff line change
`@@ -379,7 +379,10 @@ class Button extends UI5Element {`
`379`	`379`	`}`
`380`	`380`
`381`	`381`	`get isIconOnly() {`
`382`		`- return !Array.from(this.childNodes).filter(node => node.nodeType !== Node.COMMENT_NODE).length;`
	`382`	`+ return !Array.from(this.childNodes).filter(node => {`
	`383`	`+ return node.nodeType !== Node.COMMENT_NODE`
	`384`	`+ && ( node.nodeType !== Node.TEXT_NODE \|\| node.nodeValue.trim().length !== 0)`
	`385`	`+ }).length;`
`383`	`386`	`}`
`384`	`387`
`385`	`388`	`get accInfo() {`