feat(ui5-busyindicator): implement text property (#1506)

Author: fifoosid

packages/main/src/BusyIndicator.hbs

@@ -1,12 +1,18 @@
 <div class="ui5-busyindicator-root">
-
-	{{#if active}}
-		<div class="ui5-busyindicator-dynamic-content" tabindex="0" role="progressbar" aria-valuemin="0" aria-valuemax="100" title="{{ariaTitle}}">
-			<div class="ui5-busyindicator-circle circle-animation-0"></div>
-			<div class="ui5-busyindicator-circle circle-animation-1"></div>
-			<div class="ui5-busyindicator-circle circle-animation-2"></div>
-		</div>
-	{{/if}}
+	<div class="ui5-busyindicator-wrapper">
+		{{#if active}}
+			<div class="ui5-busyindicator-dynamic-content" tabindex="0" role="progressbar" aria-valuemin="0" aria-valuemax="100" title="{{ariaTitle}}">
+				<div class="ui5-busyindicator-circle circle-animation-0"></div>
+				<div class="ui5-busyindicator-circle circle-animation-1"></div>
+				<div class="ui5-busyindicator-circle circle-animation-2"></div>
+			</div>
+		{{/if}}
+		{{#if text}}
+			<ui5-label class="ui5-busyindicator-text">
+				{{text}}
+			</ui5-label>
+		{{/if}}
+	</div>
 
 	<slot></slot>
 </div>

packages/main/src/BusyIndicator.js

@@ -2,6 +2,7 @@ import UI5Element from "@ui5/webcomponents-base/dist/UI5Element.js";
 import litRender from "@ui5/webcomponents-base/dist/renderer/LitRenderer.js";
 import { fetchI18nBundle, getI18nBundle } from "@ui5/webcomponents-base/dist/i18nBundle.js";
 import BusyIndicatorSize from "./types/BusyIndicatorSize.js";
+import Label from "./Label.js";
 
 // Template
 import BusyIndicatorTemplate from "./generated/templates/BusyIndicatorTemplate.lit.js";
@@ -30,6 +31,18 @@ const metadata = {
 		},
 	},
 	properties: /** @lends sap.ui.webcomponents.main.BusyIndicator.prototype */ {
+
+		/**
+		 * Defines text to be displayed below the busy indicator. It can be used to inform the user of the current operation.
+		 * @type {String}
+		 * @public
+		 * @defaultvalue ""
+		 * @since 1.0.0-rc.7
+		 */
+		text: {
+			type: String,
+		},
+
 		/**
 		 * Defines the size of the <code>ui5-busyindicator</code>.
 		 * <br><br>
@@ -101,7 +114,10 @@ class BusyIndicator extends UI5Element {
 	}
 
 	static async onDefine() {
-		await fetchI18nBundle("@ui5/webcomponents");
+		await Promise.all([
+			fetchI18nBundle("@ui5/webcomponents"),
+			Label.define(),
+		]);
 	}
 
 	get ariaTitle() {

packages/main/src/themes/BusyIndicator.css

@@ -2,6 +2,10 @@
 	display: inline-block;
 }
 
+:host(:not([active])) .ui5-busyindicator-wrapper {
+	display: none;
+}
+
 :host([active]) {
 	color: var(--sapContent_IconColor);
 	pointer-events: none;
@@ -20,6 +24,10 @@
 	min-height: .5rem;
 }
 
+:host([size="Small"][text]:not([text=""])) .ui5-busyindicator-root {
+	min-height: 1.75rem;
+}
+
 :host([size="Small"]) .ui5-busyindicator-circle {
 	width: .5rem;
 	height: .5rem;
@@ -31,6 +39,11 @@
 	min-height: 1rem;
 }
 
+:host(:not([size])[text]:not([text=""])) .ui5-busyindicator-root,
+:host([size="Medium"][text]:not([text=""])) .ui5-busyindicator-root {
+	min-height: 2.25rem;
+}
+
 :host(:not([size])) .ui5-busyindicator-circle,
 :host([size="Medium"])  .ui5-busyindicator-circle {
 	width: 1rem;
@@ -42,6 +55,10 @@
 	min-height: 2rem;
 }
 
+:host([size="Large"][text]:not([text=""])) .ui5-busyindicator-root {
+	min-height: 3.25rem;
+}
+
 :host([size="Large"]) .ui5-busyindicator-circle {
 	width: 2rem;
 	height: 2rem;
@@ -55,6 +72,12 @@
 	background-color: inherit;
 }
 
+.ui5-busyindicator-wrapper {
+	position: absolute;
+	z-index: 99;
+	width: 100%;
+}
+
 .ui5-busyindicator-circle {
 	display: inline-block;
 	background-color: currentColor;
@@ -69,9 +92,6 @@
 }
 
 .ui5-busyindicator-dynamic-content {
-	position: absolute;
-	z-index: 99;
-	width: 100%;
 	height: 100%;
 	display: flex;
 	justify-content: center;
@@ -98,6 +118,12 @@
 	animation-delay: 400ms;
 }
 
+.ui5-busyindicator-text {
+	width: 100%;
+	margin-top: .25rem;
+	text-align: center;
+}
+
 @keyframes grow {
 	0%, 50%, 100% {
 		-webkit-transform: scale(0.5);

packages/main/src/themes/Label.css

@@ -12,6 +12,7 @@
 }
 
 :host(:not([wrap])) .ui5-label-root {
+	width: 100%;
 	font-weight: inherit;
 	display: inline-block;
 	white-space: nowrap;

packages/main/test/pages/BusyIndicator.html

@@ -23,18 +23,24 @@
 </head>
 
 <body style="background-color: var(--sapBackgroundColor);">
-	<ui5-title>Default (Large) ui5-busyindicator</ui5-title>
-	<ui5-busyindicator active></ui5-busyindicator>
+	<ui5-title>Large ui5-busyindicator</ui5-title>
+	<ui5-busyindicator active size="Large"></ui5-busyindicator>
 	<br/>
 	<br/>
 
-	<ui5-title>Medium ui5-busyindicator</ui5-title>
+	<ui5-title>Default Medium ui5-busyindicator</ui5-title>
 	<ui5-busyindicator size="Medium" active id="indicator1"></ui5-busyindicator>
 
 	<br />
 	<br />
 	<ui5-busyindicator size="Medium" active id="indicator2"></ui5-busyindicator>
 
+	<ui5-title>ui5-busyindicator with text</ui5-title>
+
+	<br />
+	<br />
+	<ui5-busyindicator active id="indicator2" text="Loading" style="width: 10rem; border: 1px solid red"></ui5-busyindicator>
+
 	<br />
 	<br />
 
@@ -44,7 +50,7 @@
 
 	<br />
 	<br />
-	<ui5-busyindicator size="Medium" active>
+	<ui5-busyindicator size="Medium" active text="Loading">
 		<ui5-checkbox text="Hello World"></ui5-checkbox>
 	</ui5-busyindicator>
 
@@ -54,15 +60,15 @@
 	<ui5-button id="fetch-btn" style="width: 120px;">Fetch List Data</ui5-button>
 	<br>
 	<br>
-	<ui5-busyindicator id="busy-container" style="width: 520px" size="Medium">
+	<ui5-busyindicator id="busy-container" style="width: 520px" size="Medium" text="Loading">
 		<ui5-list id="fetch-list" no-data-text="No Data" header-text="Available Items" style="width: 100%"></ui5-list>
 	</ui5-busyindicator>
 
 
 	<br>
 	<br>
 	<br>
-	<br>
+	<br> 
 
 	<ui5-busyindicator size="Medium" active style="width: 500px; margin-left: 100px">
 		<ui5-list style="width: 100%; border: 1px solid black;">
@@ -72,7 +78,7 @@
 		</ui5-list>
 	</ui5-busyindicator>
 
-	<br>
+	 <br>
 	<br>
 	<br>