feat(ui5-busy-indicator): added property text-placement (#8471)

* feat(ui5-busy-indicator): added new property text-placement * feat(ui5-busy-indicator): added property text-placement added example and additional test * feat(ui5-busy-indicator): added property text-placement added example and additional test * feat(ui5-busy-indicator): added property text-placement updated sample * feat(ui5-busy-indicator): added property text-placement texts are updated
SAP · Mar 20, 2024 · a494473 · a494473
1 parent 93b074d
commit a494473
Show file tree

Hide file tree

Showing 10 changed files with 133 additions and 11 deletions.
diff --git a/packages/main/src/BusyIndicator.hbs b/packages/main/src/BusyIndicator.hbs
@@ -11,22 +11,30 @@
 			aria-labelledby="{{labelId}}"
 			data-sap-focus-ref
 		>
+			{{#if textPosition.top}}
+				{{> busy-text}}
+			{{/if}}
 			<div class="ui5-busy-indicator-circles-wrapper">
 				<div class="ui5-busy-indicator-circle circle-animation-0"></div>
 				<div class="ui5-busy-indicator-circle circle-animation-1"></div>
 				<div class="ui5-busy-indicator-circle circle-animation-2"></div>
 			</div>
-			{{#if text}}
-				<ui5-label id="{{_id}}-label" class="ui5-busy-indicator-text" wrapping-type="Normal">
-					{{text}}
-				</ui5-label>
+			{{#if textPosition.bottom}}
+				{{> busy-text}}
 			{{/if}}
 		</div>
 	{{/if}}
-
 	<slot></slot>
 
 	{{#if _isBusy}}
 		<span data-ui5-focus-redirect tabindex="0" @focusin="{{_redirectFocus}}"></span>
 	{{/if}}
-</div>
+</div>
+
+{{#*inline "busy-text"}}
+	{{#if text}}
+		<ui5-label id="{{_id}}-label" class="ui5-busy-indicator-text {{classes.textPosition}}" wrapping-type="Normal">
+			{{text}}
+		</ui5-label>
+	{{/if}}
+{{/inline}}
diff --git a/packages/main/src/BusyIndicator.ts b/packages/main/src/BusyIndicator.ts
@@ -8,6 +8,7 @@ import { isTabNext } from "@ui5/webcomponents-base/dist/Keys.js";
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import type { Timeout } from "@ui5/webcomponents-base/dist/types.js";
 import BusyIndicatorSize from "./types/BusyIndicatorSize.js";
+import BusyIndicatorTextPlacement from "./types/BusyIndicatorTextPlacement.js";
 import Label from "./Label.js";
 
 // Template
@@ -98,6 +99,15 @@ class BusyIndicator extends UI5Element {
 	@property({ validator: Integer, defaultValue: 1000 })
 	delay!: number;
 
+	/**
+	 * Defines the placement of the text.
+	 *
+	 * @default "Bottom"
+	 * @public
+	 */
+	@property({ type: BusyIndicatorTextPlacement, defaultValue: BusyIndicatorTextPlacement.Bottom })
+	textPlacement!: `${BusyIndicatorTextPlacement}`;
+
 	/**
 	 * Defines if the component is currently in busy state.
 	 * @private
@@ -154,6 +164,16 @@ class BusyIndicator extends UI5Element {
 			root: {
 				"ui5-busy-indicator-root": true,
 			},
+			textPosition: {
+				"ui5-busy-indicator-text-placement-top ": this.textPlacement === BusyIndicatorTextPlacement.Top,
+				"ui5-busy-indicator-text-placement-bottom ": this.textPlacement === BusyIndicatorTextPlacement.Bottom,
+			},
+		};
+	}
+	get textPosition() {
+		return {
+			top: this.text && this.textPlacement === BusyIndicatorTextPlacement.Top,
+			bottom: this.text && this.textPlacement === BusyIndicatorTextPlacement.Bottom,
 		};
 	}
 

diff --git a/packages/main/src/themes/BusyIndicator.css b/packages/main/src/themes/BusyIndicator.css
@@ -128,10 +128,17 @@
 
 .ui5-busy-indicator-text {
 	width: 100%;
-	margin-top: .25rem;
 	text-align: center;
 }
 
+.ui5-busy-indicator-text-placement-top {
+	margin-bottom: 0.5rem
+}
+
+.ui5-busy-indicator-text-placement-bottom {
+	margin-top: 0.5rem;
+}
+
 @keyframes grow {
 	0%, 50%, 100% {
 		-webkit-transform: scale(0.5);
@@ -140,7 +147,7 @@
 	}
 	25% {
 		-webkit-transform: scale(1);
-		-moz-transform: scale(1);
+		-moz-transform: scale(1);   
 		transform: scale(1);
 	}
 }
diff --git a/packages/main/src/types/BusyIndicatorTextPlacement.ts b/packages/main/src/types/BusyIndicatorTextPlacement.ts
@@ -0,0 +1,20 @@
+/**
+ * Different BusyIndicator text placements.
+ *
+ * @public
+ */
+enum BusyIndicatorTextPlacement {
+	/**
+	 * The text will be displayed on top of the busy indicator.
+	 * @public
+	 */
+	Top = "Top",
+
+	/**
+	 * The text will be displayed at the bottom of the busy indicator.
+	 * @public
+	 */
+	Bottom = "Bottom",
+}
+
+export default BusyIndicatorTextPlacement;
diff --git a/packages/main/test/pages/BusyIndicator.html b/packages/main/test/pages/BusyIndicator.html
@@ -21,6 +21,7 @@
 
 
 <link rel="stylesheet" type="text/css" href="./styles/BusyIndicator.css">
+<link rel="stylesheet" type="text/css" href="./styles/Dialog.css">
 </head>
 
 <body class="busyindicator1auto">
@@ -40,8 +41,8 @@
 
 	<br />
 	<br />
-	<ui5-busy-indicator active text="Loading" class="busyindicator2auto"></ui5-busy-indicator>
-
+	<ui5-busy-indicator id="busy-indicator-text-placement-bottom" active text="Loading" class="busyindicator2auto"></ui5-busy-indicator>
+	<ui5-busy-indicator id="busy-indicator-text-placement-top" text="Loading" text-placement="Top" active class="busyindicator2auto"></ui5-busy-indicator>
 	<br />
 	<br />
 
@@ -172,6 +173,15 @@
 		</div>
 	</ui5-dialog>
 
+	<ui5-button id="open-dialog-loading-text">Open Dialog with loading text indicator</ui5-button>
+	<ui5-dialog id="dialog-loading-text"  header-text="Loading Data" initial-focus="btnOk">
+			<ui5-busy-indicator style="display: block;" active text="Loading data from backend server" text-placement="Top">
+			</ui5-busy-indicator>
+			<div slot="footer" class="dialogFooter">
+				<ui5-button id="btnOk" design="Emphasized">OK</ui5-button>
+			</div>
+	</ui5-dialog>
+
 	<br>
 	<br>
 	<span>Indicator with delay</span>
@@ -208,6 +218,7 @@
     </div>
     <br />
 
+
 	<script>
 		document.getElementById("fetch-btn").addEventListener("click", function(event) {
 			var busyIndicator = document.getElementById("busy-container");
@@ -270,6 +281,11 @@
 			document.getElementById("dialog-delayed-indicator-indicator").active = true;
 			document.getElementById("dialog-delayed-indicator").show();
 		});
+
+		document.getElementById("open-dialog-loading-text").addEventListener("click", function () {
+			document.getElementById("dialog-loading-text").show();
+		});
+
 	</script>
 </body>
 

diff --git a/packages/main/test/specs/BusyIndicator.spec.js b/packages/main/test/specs/BusyIndicator.spec.js
@@ -112,4 +112,18 @@ describe("BusyIndicator general interaction", () => {
 
 		assert.equal(height, 144, "Height of the root element inherits the height of the Busy Indicator");
 	});
+
+	it("test busy indicators text-placement=top property", async () => {
+		const busyIndicator = await browser.$("#busy-indicator-text-placement-top");
+		const busyIndicatorTopLabel = await busyIndicator.shadow$(".ui5-busy-indicator-text-placement-top");
+
+		assert.isOk(busyIndicatorTopLabel, "The text is displayed on top of the busy indicator");
+	});
+
+	it("test busy indicators text-placement=bottom property", async () => {
+		const busyIndicator = await browser.$("#busy-indicator-text-placement-bottom");
+		const busyIndicatorTopLabel = await busyIndicator.shadow$(".ui5-busy-indicator-text-placement-bottom");
+
+		assert.isOk(busyIndicatorTopLabel, "The text is displayed at the bottom of the busy indicator");
+	});
 });
diff --git a/packages/website/docs/_components_pages/main/BusyIndicator.mdx b/packages/website/docs/_components_pages/main/BusyIndicator.mdx
@@ -5,6 +5,7 @@ slug: ../BusyIndicator
 import Basic from "../../_samples/main/BusyIndicator/Basic/Basic.md";
 import WithComponent from "../../_samples/main/BusyIndicator/WithComponent/WithComponent.md";
 import Sizes from "../../_samples/main/BusyIndicator/Sizes/Sizes.md";
+import TextPlacement from "../../_samples/main/BusyIndicator/TextPlacement/TextPlacement.md";
 
 
 <%COMPONENT_OVERVIEW%>
@@ -14,13 +15,18 @@ import Sizes from "../../_samples/main/BusyIndicator/Sizes/Sizes.md";
 
 <%COMPONENT_METADATA%>
 
-## More Samples
+## More Samples 
 
 ### Sizes
 The BusyIndicator comes in several sizes - Small, Medium and Large.
 
 <Sizes />
 
+### Text Placement with display text
+The BusyIndicator can display text either above (via text-placement="Top") or below the animated dots (by default).
+
+<TextPlacement />
+
 ### Busy component
 The BusyIndicator can be placed over another web component.
 

diff --git a/packages/website/docs/_samples/main/BusyIndicator/TextPlacement/TextPlacement.md b/packages/website/docs/_samples/main/BusyIndicator/TextPlacement/TextPlacement.md
@@ -0,0 +1,4 @@
+import html from '!!raw-loader!./sample.html';
+import js from '!!raw-loader!./main.js';
+
+<Editor html={html} js={js} />
diff --git a/packages/website/docs/_samples/main/BusyIndicator/TextPlacement/main.js b/packages/website/docs/_samples/main/BusyIndicator/TextPlacement/main.js
@@ -0,0 +1 @@
+import "@ui5/webcomponents/dist/BusyIndicator.js";
diff --git a/packages/website/docs/_samples/main/BusyIndicator/TextPlacement/sample.html b/packages/website/docs/_samples/main/BusyIndicator/TextPlacement/sample.html
@@ -0,0 +1,26 @@
+<!-- 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 -->
+
+    <ui5-busy-indicator text="Loading data from backend server.." active>
+        <div style="height: 200px; width: 200px;"></div>
+    </ui5-busy-indicator>
+    <ui5-busy-indicator text="Loading data from backend server..." text-placement="Top" active>
+        <div style="height: 200px; width: 200px;"></div>
+    </ui5-busy-indicator>
+
+    <!-- playground-fold -->
+    <script type="module" src="main.js"></script>
+</body>
+
+</html>
+<!-- playground-fold-end -->