fix positioning of custom text

SAP · Mar 31, 2021 · 8b5513c · 8b5513c
1 parent bd72fd3
commit 8b5513c
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 40 deletions.
diff --git a/packages/main/src/BusyIndicator.hbs b/packages/main/src/BusyIndicator.hbs
@@ -1,27 +1,27 @@
 <div class="{{classes.root}}">
-	<div class="ui5-busyindicator-wrapper">
-		{{#if active}}
-			<div
-				class="ui5-busyindicator-dynamic-content"
-				title="{{ariaTitle}}"
-				tabindex="0"
-				role="progressbar"
-				aria-valuemin="0"
-				aria-valuemax="100"
-				aria-valuetext="Busy"
-				aria-labelledby="{{_id}}-label"
-			>
+	{{#if active}}
+		<div
+			class="ui5-busyindicator-busy-area"
+			title="{{ariaTitle}}"
+			tabindex="0"
+			role="progressbar"
+			aria-valuemin="0"
+			aria-valuemax="100"
+			aria-valuetext="Busy"
+			aria-labelledby="{{_id}}-label"
+		>
+			<div class="ui5-busyindicator-circles-wrapper">
 				<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 id="{{_id}}-label" class="ui5-busyindicator-text">
-				{{text}}
-			</ui5-label>
-		{{/if}}
-	</div>
+			{{#if text}}
+				<ui5-label id="{{_id}}-label" class="ui5-busyindicator-text">
+					{{text}}
+				</ui5-label>
+			{{/if}}
+		</div>
+	{{/if}}
 
 	<slot tabindex="{{slotTabIndex}}"></slot>
 </div>
diff --git a/packages/main/src/themes/BusyIndicator.css b/packages/main/src/themes/BusyIndicator.css
@@ -2,10 +2,6 @@
 	display: inline-block;
 }
 
-:host(:not([active])) .ui5-busyindicator-wrapper {
-	display: none;
-}
-
 :host([active]) {
 	color: var(--sapContent_IconColor);
 }
@@ -74,13 +70,27 @@
 	background-color: inherit;
 }
 
-.ui5-busyindicator-wrapper {
+.ui5-busyindicator-busy-area {
 	position: absolute;
 	z-index: 99;
 	left: 0;
 	right: 0;
 	top: 0;
 	bottom: 0;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	background-color: inherit;
+	flex-direction: column;
+}
+
+.ui5-busyindicator-busy-area:focus {
+	outline: 1px dotted var(--sapContent_FocusColor);
+	outline-offset: -2px;
+}
+
+.ui5-busyindicator-circles-wrapper {
+	line-height: 0;
 }
 
 .ui5-busyindicator-circle {
@@ -96,19 +106,6 @@
 	border-radius: 100%;
 }
 
-.ui5-busyindicator-dynamic-content {
-	height: 100%;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	background-color: inherit;
-}
-
-.ui5-busyindicator-dynamic-content:focus {
-	outline: 1px dotted var(--sapContent_FocusColor);
-	outline-offset: -2px;
-}
-
 .circle-animation-0 {
 	animation: grow 1.6s infinite cubic-bezier(0.32, 0.06, 0.85, 1.11);
 }

diff --git a/packages/main/test/pages/BusyIndicator.html b/packages/main/test/pages/BusyIndicator.html
@@ -3,7 +3,7 @@
 
 <head>
 	<meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
 	<meta charset="utf-8">
 
 	<title>Busy Indicator</title>
@@ -79,6 +79,14 @@
 		</ui5-list>
 	</ui5-busyindicator>
 
+	<ui5-busyindicator size="Medium" active style="width: 500px; margin-left: 100px" text="Custom loading text">
+		<ui5-list style="width: 100%; border: 1px solid black;">
+			<ui5-li>Item 1</ui5-li>
+			<ui5-li>Item 2</ui5-li>
+			<ui5-li>Item 3</ui5-li>
+		</ui5-list>
+	</ui5-busyindicator>
+
 	 <br>
 	<br>
 	<br>

diff --git a/packages/main/test/specs/BusyIndicator.spec.js b/packages/main/test/specs/BusyIndicator.spec.js
@@ -27,13 +27,13 @@ describe("BusyIndicator general interaction", () => {
 
 		innerFocusElement = $(innerFocusElement);
 
-		assert.strictEqual(innerFocusElement.getAttribute("class"), "ui5-busyindicator-dynamic-content", "The correct inner element is focused");
+		assert.strictEqual(innerFocusElement.getAttribute("class"), "ui5-busyindicator-busy-area", "The correct inner element is focused");
 	});
 
 	it("tests internal focused element attributes", () => {
 		const busyIndicator = browser.$("#indicator1");
 		busyIndicator.click();
-		const innerFocusElement = busyIndicator.shadow$(".ui5-busyindicator-dynamic-content");
+		const innerFocusElement = busyIndicator.shadow$(".ui5-busyindicator-busy-area");
 
 		assert.strictEqual(innerFocusElement.getAttribute("role"), "progressbar", "Correct 'role' is set");
 		assert.strictEqual(innerFocusElement.getAttribute("tabindex"), "0", "Correct 'tabindex' is set");