chore(ui5-button): new nonInteractive property (#2942)

Added new nonInteractive private property which removes hover, active states and it can't be accessed thought Tab key and mouse.

Author: nnaydenow

packages/main/src/Button.js

@@ -195,7 +195,7 @@ const metadata = {
 		 * Indicates if the element if focusable
 		 * @private
 		 */
-		nonFocusable: {
+		nonInteractive: {
 			type: Boolean,
 		},
 
@@ -333,6 +333,9 @@ class Button extends UI5Element {
 	}
 
 	_onclick(event) {
+		if (this.nonInteractive) {
+			return;
+		}
 		event.isMarked = "button";
 		const FormSupport = getFeature("FormSupport");
 		if (FormSupport) {
@@ -341,6 +344,9 @@ class Button extends UI5Element {
 	}
 
 	_onmousedown(event) {
+		if (this.nonInteractive) {
+			return;
+		}
 		event.isMarked = "button";
 		this.active = true;
 		activeButton = this; // eslint-disable-line
@@ -365,11 +371,18 @@ class Button extends UI5Element {
 	}
 
 	_onfocusout(_event) {
+		if (this.nonInteractive) {
+			return;
+		}
 		this.active = false;
 		this.focused = false;
 	}
 
 	_onfocusin(event) {
+		if (this.nonInteractive) {
+			return;
+		}
+
 		event.isMarked = "button";
 		this.focused = true;
 	}
@@ -417,7 +430,7 @@ class Button extends UI5Element {
 			return tabindex;
 		}
 
-		return this.nonFocusable ? "-1" : this._tabIndex;
+		return this.nonInteractive ? "-1" : this._tabIndex;
 	}
 
 	get showIconTooltip() {

packages/main/src/themes/Button.css

@@ -61,7 +61,7 @@
 	line-height: inherit;
 }
 
-:host(:not([active]):hover),
+:host(:not([active]):not([non-interactive]):hover),
 :host(:not([hidden]).ui5_hovered) {
 	background: var(--sapButton_Hover_Background);
 }