feat: stable-dom-ref supported for abstract items (#4604)

Author: vladitasev

packages/base/hash.txt

@@ -1 +1 @@
-9Cw2r3iroIa9+t3zf9W9NFHa8/I=
+lg+vUkF4ZlVbMOpRYDqgaTP5Rvc=

packages/fiori/src/ShellBarItem.js

@@ -82,7 +82,7 @@ class ShellBarItem extends UI5Element {
 	}
 
 	get stableDomRef() {
-		return `${this._id}-stable-dom-ref`;
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
 }
 

packages/fiori/test/pages/ShellBar.html

@@ -54,8 +54,8 @@
 			secondary-title="Second Title"
 			id="shellbarwithitems"
 	>
-		<ui5-shellbar-item icon="accelerated" text="Hello World!" title="Schedule"></ui5-shellbar-item>
-		<ui5-shellbar-item id="accept" icon="accept" text="Hello World!" title="Approve"></ui5-shellbar-item>
+		<ui5-shellbar-item icon="accelerated" text="Hello World!" title="Schedule" stable-dom-ref="schedule"></ui5-shellbar-item>
+		<ui5-shellbar-item id="accept" icon="accept" text="Hello World!" title="Approve" stable-dom-ref="accept"></ui5-shellbar-item>
 		<ui5-shellbar-item id="warning" icon="alert" text="Hello World!" title="Warning"></ui5-shellbar-item>
 		<ui5-shellbar-item icon="discussion" text="Hello World!" count="42" title="42 Messages"></ui5-shellbar-item>
 		<ui5-shellbar-item icon="error" text="Hello World!" title="Attention"></ui5-shellbar-item>

packages/fiori/test/specs/ShellBar.spec.js

@@ -57,6 +57,13 @@ describe("Component Behavior", () => {
 
 
 	describe("ui5-shellbar-item", async () => {
+		it("tests the stable-dom-ref attribute", async () => {
+			const shellbar = await browser.$("#shellbarwithitems");
+			const innerButtonWithStableDomRef = await shellbar.shadow$(`[data-ui5-stable="schedule"]`);
+
+			assert.ok(await innerButtonWithStableDomRef.isExisting(), "There is indeed an element in the Shellbar's shadow root with an attribute, matching the stable dom ref");
+		});
+
 		it("tests count property", async () => {
 			const shellbar = await browser.$("#shellbarwithitems");
 			const icon = await shellbar.shadow$("ui5-button[data-count]");

packages/main/src/BreadcrumbsItem.js

@@ -94,7 +94,7 @@ class BreadcrumbsItem extends UI5Element {
 	}
 
 	get stableDomRef() {
-		return `${this._id}-stable-dom-ref`;
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
 }
 

packages/main/src/MultiComboBoxItem.js

@@ -34,7 +34,7 @@ class MultiComboBoxItem extends ComboBoxItem {
 	}
 
 	get stableDomRef() {
-		return `${this._id}-stable-dom-ref`;
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
 }
 

packages/main/src/Option.js

@@ -117,7 +117,7 @@ class Option extends UI5Element {
 	}
 
 	get stableDomRef() {
-		return `${this._id}-stable-dom-ref`;
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
 }
 

packages/main/src/Tab.js

@@ -196,7 +196,7 @@ class Tab extends UI5Element {
 	}
 
 	get stableDomRef() {
-		return `${this._id}-stable-dom-ref`;
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
 
 	/**

packages/main/src/TabSeparator.js

@@ -63,7 +63,7 @@ class TabSeparator extends UI5Element {
 	}
 
 	get stableDomRef() {
-		return `${this._id}-stable-dom-ref`;
+		return this.getAttribute("stable-dom-ref") || `${this._id}-stable-dom-ref`;
 	}
 
 	get stripPresentation() {

packages/theming/hash.txt

@@ -1 +1 @@
-CQhk8M6oN0XzkZBkgImthR2kdTs=
+rZnyMTmoc2CFM82C+7zGHcw3GGY=