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

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
SAP · Mar 2, 2021 · d834ec6 · d834ec6
1 parent 6895c16
commit d834ec6
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 3 deletions.
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");
-	})
+	});
 });