fix: adding stable selectors for tab container and shellbar

[codefactor]

Thank you for your contribution! 👏

To get it merged faster, kindly review the checklist below:

Pull Request Checklist

• Reviewed the Contributing Guidelines
  • Especially the How to Contribute section
• Correct commit message style

[stoehr]

suggestion (non-blocking):

Suggested change

	data-ui5-stable="searchButton"
	data-ui5-stable="search"

[codefactor]

This one at least should say button, because I think the search itself has "search" and this is just the magnifying glass icon.

[stoehr]

suggestion (non-blocking): Should we be using kebab case for the "tabsLeft", "tabsRight", and "tabsOverflow" values of the newly introduced data-ui5-stable attributes in this file?

[stoehr]

suggestion (non-blocking): If we want to distinguish the button that executes the search, with the field that is used for the search input, then how about having this data-ui5-stable attribute be "execute-search" instead of "search-button" or "search", so that it is similar to the "cancel-search" button, in that the "button" role isn't actually used in the name?

[fifoosid]

The internal way of how StableDomRef concept works is now changed.

In order to make this work, you should create getters for all of the data-ui5-stable attributes that you have added.

You can take a look at how is the logo getter implemented:

In ShellBar.js:

/**
* Returns the <code>logo</code> DOM ref.
* @type { HTMLElement }
* @public
* @readonly
* @since 1.0.0-rc.16
*/
get logoDomRef() {
	return this.shadowRoot.querySelector(`*[data-ui5-stable="logo"]`);
}

Shellbar.hbs:

<span
        ...
	data-ui5-stable="logo"
>
	<slot name="logo"></slot>
</span>

[stoehr]

The internal way of how StableDomRef concept works is now changed.

In order to make this work, you should create getters for all of the data-ui5-stable attributes that you have added.

You can take a look at how is the logo getter implemented:

In ShellBar.js:

/**
* Returns the <code>logo</code> DOM ref.
* @type { HTMLElement }
* @public
* @readonly
* @since 1.0.0-rc.16
*/
get logoDomRef() {
	return this.shadowRoot.querySelector(`*[data-ui5-stable="logo"]`);
}

Shellbar.hbs:

<span
        ...
	data-ui5-stable="logo"
>
	<slot name="logo"></slot>
</span>

As we discussed in a meeting, this good feedback should be done in a separate PR, since this PR needs to have a more basic solution that can be patched in a version that pre-dates 1.0.x.

This change is not downported