feat(framework): implement stabledomref functionality (#1868)

Author: fifoosid

packages/base/src/UI5Element.js

@@ -589,6 +589,15 @@ class UI5Element extends HTMLElement {
 		}
 	}
 
+	/**
+	 * Use this method in order to get a reference to element in the shadow root of a web component
+	 * @public
+	 * @param {String} refName Defines the name of the stable DOM ref
+	 */
+	getStableDomRef(refName) {
+		return this.getDomRef().querySelector(`[data-ui5-stable=${refName}]`);
+	}
+
 	/**
 	 * Set the focus to the element, returned by "getFocusDomRef()" (marked by "data-sap-focus-ref")
 	 * @public

packages/fiori/src/ShellBar.hbs

@@ -19,6 +19,7 @@
 				@keydown="{{_logoKeydown}}"
 				@keyup="{{_logoKeyup}}"
 				tabindex="0"
+				data-ui5-stable="logo"
 			>
 				<slot name="logo"></slot>
 			</span>
@@ -62,7 +63,9 @@
 				title="{{_copilotText}}"
 				@keydown="{{_coPilotKeydown}}"
 				@keyup="{{_coPilotKeyup}}"
-				?active="{{coPilotActive}}">
+				?active="{{coPilotActive}}"
+				data-ui5-stable="copilot"
+			>
 				{{> coPilot}}
 			</div>
 		{{else}}
@@ -107,6 +110,7 @@
 					data-count="{{this.count}}"
 					data-ui5-notification-count="{{../notificationCount}}"
 					data-ui5-external-action-item-id="{{this.refItemid}}"
+					data-ui5-stable="{{stableDomRef}}"
 					@click={{this.press}}
 				></ui5-button>
 			{{/each}}
@@ -123,6 +127,7 @@
 				aria-label="{{_notificationsText}}"
 				title="{{_notificationsText}}"
 				._buttonAccInfo="{{accInfo.notifications}}"
+				data-ui5-stable="notifications"
 			></ui5-button>
 			{{/if}}
 
@@ -135,6 +140,7 @@
 				aria-label="{{_overflowText}}"
 				title="{{_overflowText}}"
 				._buttonAccInfo="{{accInfo.overflow}}"
+				data-ui5-stable="overflow"
 			></ui5-button>
 
 			{{#if hasProfile}}
@@ -146,10 +152,12 @@
 					aria-label="{{_profileText}}"
 					title="{{_profileText}}"
 					._buttonAccInfo="{{accInfo.profile}}"
-					class="ui5-shellbar-button ui5-shellbar-image-button">
-						<slot
-							name="profile"
-						></slot>
+					class="ui5-shellbar-button ui5-shellbar-image-button"
+					data-ui5-stable="profile"
+				>
+					<slot
+						name="profile"
+					></slot>
 				</ui5-button>
 			{{/if}}
 
@@ -164,6 +172,7 @@
 				aria-label="{{_productsText}}"
 				title="{{_productsText}}"
 				._buttonAccInfo="{{accInfo.products}}"
+				data-ui5-stable="product-switch"
 			></ui5-button>
 			{{/if}}
 		</div>

packages/fiori/src/ShellBar.js

@@ -761,6 +761,7 @@ class ShellBar extends UI5Element {
 					press: this._handleCustomActionPress.bind(this),
 					custom: true,
 					title: item.title,
+					stableDomRef: item.stableDomRef,
 				};
 			}),
 			{

packages/fiori/src/ShellBarItem.js

@@ -40,6 +40,15 @@ const metadata = {
 		count: {
 			type: String,
 		},
+
+		/**
+		 * Defines the stable selector that you can use via getStableDomRef method.
+		 * @public
+		 * @since 1.0.0-rc.8
+		 */
+		stableDomRef: {
+			type: String,
+		},
 	},
 
 	events: /** @lends sap.ui.webcomponents.fiori.ShellBarItem.prototype */ {

packages/main/src/Tab.js

@@ -102,6 +102,15 @@ const metadata = {
 			defaultValue: SemanticColor.Default,
 		},
 
+		/**
+		 * Defines the stable selector that you can use via getStableDomRef method.
+		 * @public
+		 * @since 1.0.0-rc.8
+		 */
+		stableDomRef: {
+			type: String,
+		},
+
 		/**
 		 * Specifies if the <code>ui5-tab</code> is selected.
 		 *

packages/main/src/TabInStrip.hbs

@@ -9,6 +9,7 @@
 	?aria-disabled="{{this.effectiveDisabled}}"
 	?disabled="{{this.effectiveDisabled}}"
 	aria-labelledby="{{this.ariaLabelledBy}}"
+	data-ui5-stable="{{this.stableDomRef}}"
 >
 
 	{{#if this.icon}}

packages/main/test/pages/TabContainer.html

@@ -55,7 +55,7 @@ <h1 class="header-title">ui5-tabcontainer</h1>
 	<section>
 		<h2>Tab Container</h2>
 		<ui5-tabcontainer id="tabContainer1" fixed collapsed show-overflow>
-			<ui5-tab text="Products" additional-text="125">
+			<ui5-tab stable-dom-ref="products-ref" text="Products" additional-text="125">
 			</ui5-tab>
 			<ui5-tab-separator></ui5-tab-separator>
 			<ui5-tab icon="sap-icon://menu2" text="Laptops" semantic-color="Positive" additional-text="25">