feat(ui5-button): Add BusyIndicator

packages/main/cypress/specs/Button.cy.tsx

@@ -205,6 +205,29 @@ describe("Button general interaction", () => {
 			.should("not.called");
 	});
 
+	it("tests clicking on button with busy indicator", () => {
+		cy.mount(<Button loading></Button>);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.then(button => {
+				button.get(0).addEventListener("click", cy.stub().as("clicked"));
+			});
+
+		cy.get("@button")
+			.shadow()
+			.find("[ui5-busy-indicator]")
+			.should("be.visible");
+
+		cy.get("@button")
+			.realClick();
+
+		cy.get("@clicked")
+			.should("not.called");
+	});
+
 	it("tests button with text icon role", () => {
 		cy.mount(<Button design="Attention" icon="message-warning">Warning</Button>);
 
@@ -453,6 +476,18 @@ describe("Accessibility", () => {
 			.should("have.attr", "aria-controls", "registration-dialog");
 	});
 
+	it("aria-busy is properly applied on the button with busy indicator", () => {
+		cy.mount(<Button loading></Button>);
+
+		cy.get("[ui5-button]")
+			.as("button");
+
+		cy.get("@button")
+			.shadow()
+			.find("button")
+			.should("have.attr", "aria-busy", "true");
+	});
+
 	it("setting accessible-description is applied to button tag", () => {
 		cy.mount(<Button accessibleDescription="A long description."></Button>);
 

packages/main/src/Button.ts

@@ -313,7 +313,28 @@ class Button extends UI5Element implements IButton {
 	nonInteractive = false;
 
 	/**
-	 * The current title of the button, either the tooltip property or the icons tooltip. The tooltip property with higher prio.
+	 * Defines whether the button shows a loading indicator.
+	 *
+	 * **Note:** If set to `true`, a busy indicator component will be displayed on the related button.
+	 * @default false
+	 * @public
+	 * @since 2.13.0
+	 */
+	@property({ type: Boolean })
+	loading = false;
+
+	/**
+	 * Specifies the delay in milliseconds before the loading indicator appears within the associated button.
+	 * @default 1000
+	 * @public
+	 * @since 2.13.0
+	 */
+	@property({ type: Number })
+	loadingDelay = 1000;
+
+	/**
+	 * The button's current title is determined by either the `tooltip` property or the icon's tooltip, with the `tooltip`
+	 * property taking precedence if both are set.
 	 * @private
 	 */
 	@property({ noAttribute: true })
@@ -448,6 +469,11 @@ class Button extends UI5Element implements IButton {
 			return;
 		}
 
+		if (this.loading) {
+			e.preventDefault();
+			return;
+		}
+
 		const {
 			altKey,
 			ctrlKey,
@@ -491,7 +517,7 @@ class Button extends UI5Element implements IButton {
 	}
 
 	_ontouchend(e: TouchEvent) {
-		if (this.disabled) {
+		if (this.disabled || this.loading) {
 			e.preventDefault();
 			e.stopPropagation();
 		}
@@ -540,7 +566,7 @@ class Button extends UI5Element implements IButton {
 	_setActiveState(active: boolean) {
 		const eventPrevented = !this.fireDecoratorEvent("active-state-change");
 
-		if (eventPrevented) {
+		if (eventPrevented || this.loading) {
 			return;
 		}
 

packages/main/src/ButtonTemplate.tsx

@@ -1,5 +1,7 @@
 import type Button from "./Button.js";
 import Icon from "./Icon.js";
+import BusyIndicator from "./BusyIndicator.js";
+import BusyIndicatorSize from "./types/BusyIndicatorSize.js";
 
 export default function ButtonTemplate(this: Button, injectedProps?: {
 		ariaPressed?: boolean,
@@ -15,7 +17,7 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 				"ui5-button-root": true,
 				"ui5-button-badge-placement-end": this.badge[0]?.design === "InlineText",
 				"ui5-button-badge-placement-end-top": this.badge[0]?.design === "OverlayText",
-				"ui5-button-badge-dot": this.badge[0]?.design === "AttentionDot",
+				"ui5-button-badge-dot": this.badge[0]?.design === "AttentionDot"
 			}}
 			disabled={this.disabled}
 			data-sap-focus-ref
@@ -37,6 +39,7 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 			aria-haspopup={this._hasPopup}
 			aria-label={this.ariaLabelText}
 			aria-description={this.ariaDescriptionText}
+			aria-busy={this.loading ? "true" : undefined}
 			title={this.buttonTitle}
 			part="button"
 			role={this.effectiveAccRole}
@@ -69,5 +72,15 @@ export default function ButtonTemplate(this: Button, injectedProps?: {
 				<slot name="badge"/>
 			}
 		</button>
+		{this.loading &&
+			<BusyIndicator
+				id={`${this._id}-button-busy-indicator`}
+				class="ui5-button-busy-indicator"
+				size={this.iconOnly ? BusyIndicatorSize.S : BusyIndicatorSize.M}
+				active={true}
+				delay={this.loadingDelay}
+				inert={this.loading}
+			/>
+		}
 	</>);
 }

packages/main/src/themes/Button.css

@@ -108,7 +108,7 @@
 	pointer-events: none;
 }
 
-:host([desktop]:not([active])) .ui5-button-root:focus-within:after,
+:host([desktop]:not([loading])) .ui5-button-root:focus-within:after,
 :host(:not([active])) .ui5-button-root:focus-visible:after,
 :host([desktop][active][design="Emphasized"]) .ui5-button-root:focus-within:after,
 :host([active][design="Emphasized"]) .ui5-button-root:focus-visible:after,
@@ -337,4 +337,41 @@ bdi {
 :host(:state(has-overlay-badge)) {
 	overflow: visible;
 	margin-inline-end: 0.3125rem;
-}
+}
+
+:host([loading]){
+	position: relative;
+	pointer-events: unset;
+}
+
+:host([loading]) .ui5-button-root {
+	opacity: var(--sapContent_DisabledOpacity);
+}
+
+:host([loading][design="Emphasized"]) {
+	background-color: inherit;
+	border: inherit;
+}
+
+:host([design="Emphasized"][loading]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover),
+:host([design="Emphasized"][loading]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) {
+	background-color: inherit;
+	border: inherit;
+}
+
+:host([design="Emphasized"][loading]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]):hover) .ui5-button-root,
+:host([design="Emphasized"][loading]:not([active]):not([non-interactive]):not([_is-touch]):not([disabled]).ui5_hovered) .ui5-button-root {
+	background-color: var(--sapButton_Emphasized_Hover_Background);
+}
+
+:host([loading][design="Emphasized"]) .ui5-button-root {
+	background-color: var(--sapButton_Emphasized_Background);
+	border-color: var(--sapButton_Emphasized_BorderColor);
+}
+
+.ui5-button-busy-indicator {
+	position: absolute;
+	height: 100%;
+	width: 100%;
+	top:0;
+}

packages/main/test/pages/Button.html

@@ -265,6 +265,17 @@
 	<ui5-button icon="arrow-down" tooltip="Go down"></ui5-button>
 	<ui5-button icon="arrow-down" disabled tooltip="Go down"></ui5-button>
 
+	<br />
+	<br />
+	<ui5-title>Buttons with busy indicator</ui5-title>
+	<br />
+	<ui5-button tooltip="Button with busy indicator" icon="accept" loading="true"></ui5-button>
+	<ui5-button tooltip="Button with busy indicator" loading="true">Busy Indicator</ui5-button>
+	<ui5-button design="Transparent" tooltip="Button with busy indicator" loading="true">Busy Indicator</ui5-button>
+	<ui5-button tooltip="Button with busy indicator" icon="home" design="Emphasized" loading="true">Busy Indicator</ui5-button>
+	<ui5-button design="Positive" tooltip="Button with busy indicator" loading="true">Busy Indicator</ui5-button>
+	<ui5-button design="Negative" tooltip="Button with busy indicator" loading="true">Busy Indicator</ui5-button>
+	<ui5-button design="Attention" tooltip="Button with busy indicator" loading="true">Busy Indicator</ui5-button>
 
 	<br />
 	<br />

packages/website/docs/_components_pages/main/Button/Button.mdx

@@ -10,6 +10,7 @@ import EndIcon from "../../../_samples/main/Button/EndIcon/EndIcon.md";
 import CustomStyling from "../../../_samples/main/Button/CustomStyling/CustomStyling.md";
 import MenuButton from "../../../_samples/main/Button/MenuButton/MenuButton.md";
 import ButtonBadge from "../../../_samples/main/Button/ButtonBadge/ButtonBadge.md";
+import Loading from "../../../_samples/main/Button/Loading/Loading.md"
 
 <%COMPONENT_OVERVIEW%>
 
@@ -49,4 +50,7 @@ Achieve Menu Button functionality.
 ### Button with badge
 Add a badge to the button.
 
-<ButtonBadge />
+<ButtonBadge />
+
+### Button with Loading
+<Loading />

packages/website/docs/_samples/main/Button/Loading/Loading.md

@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />

packages/website/docs/_samples/main/Button/Loading/main.js

@@ -0,0 +1,4 @@
+import "@ui5/webcomponents/dist/Button.js";
+
+import "@ui5/webcomponents-icons/dist/edit.js";
+import "@ui5/webcomponents-icons/dist/employee.js";

packages/website/docs/_samples/main/Button/Loading/sample.html

@@ -0,0 +1,32 @@
+<!-- playground-fold -->
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sample</title>
+</head>
+
+<body style="background-color: var(--sapBackgroundColor)">
+    <!-- playground-fold-end -->
+    <div>
+        <br/>
+        <ui5-button icon="sap-icon://edit" tooltip="Accept terms & conditions" loading></ui5-button>
+        <ui5-button loading>Loading</ui5-button>
+        <ui5-button icon="sap-icon://employee" loading>Loading</ui5-button>
+        <ui5-button design="Transparent" loading>Loading</ui5-button>
+        <ui5-button icon="sap-icon://employee" design="Transparent" loading>Loading</ui5-button>
+        <ui5-button design="Emphasized" loading>Loading</ui5-button>
+        <ui5-button icon="sap-icon://employee" design="Emphasized" loading>Loading</ui5-button>
+        <ui5-button design="Positive" loading>Loading</ui5-button>
+        <ui5-button icon="sap-icon://employee" design="Positive" loading>Loading</ui5-button>
+        <ui5-button design="Negative" loading>Loading</ui5-button>
+        <ui5-button icon="sap-icon://employee" design="Negative" loading>Loading</ui5-button>
+    </div>
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->