fix(ui5-busy-indicator): height of the root element inherits the heig…

…ht of the Busy Indicator (#6805) Fixes #6668
SAP · Mar 28, 2023 · 3659ca0 · 3659ca0
1 parent 2c3d1d5
commit 3659ca0
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/packages/main/src/themes/BusyIndicator.css b/packages/main/src/themes/BusyIndicator.css
@@ -57,6 +57,7 @@
 	align-items: center;
 	position: relative;
 	background-color: inherit;
+	height: inherit;
 }
 
 .ui5-busy-indicator-busy-area {

diff --git a/packages/main/test/pages/BusyIndicator.html b/packages/main/test/pages/BusyIndicator.html
@@ -185,6 +185,29 @@
 		<ui5-button id="dialog-delayed-indicator-focus-stop">focus stop</ui5-button>
 	</ui5-dialog>
 
+	<br>
+	<br>
+    <div style="display: flex;">
+      <div style="border: 1px solid black;">
+        <ui5-busy-indicator active style="height: 100%;">
+          <div style="background-color: orange; width: 200px; height: 100%;">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nobis
+            quasi, minus ullam aut eaque dolorem eos rem itaque unde, veritatis
+            consequuntur numquam! Repellat sunt, dignissimos fugit voluptate
+            animi repudiandae placeat?
+          </div>
+        </ui5-busy-indicator>
+      </div>
+      <div style="border: 1px solid black;">
+        <ui5-busy-indicator id="busy-indicator-height"  active style="height: 100%;">
+          <div style="background-color: orange; width: 200px; height: 100%;">
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+          </div>
+        </ui5-busy-indicator>
+      </div>
+    </div>
+    <br />
+
 	<script>
 		document.getElementById("fetch-btn").addEventListener("click", function(event) {
 			var busyIndicator = document.getElementById("busy-container");

diff --git a/packages/main/test/specs/BusyIndicator.spec.js b/packages/main/test/specs/BusyIndicator.spec.js
@@ -105,4 +105,11 @@ describe("BusyIndicator general interaction", () => {
 
 		await browser.keys("Escape");
 	});
+
+	it("Height of the root element depends on the height of the Busy Indicator - issue 6668", async () => {
+		const busyIndicator = await browser.$("#busy-indicator-height");
+		const height = parseInt((await busyIndicator.shadow$(".ui5-busy-indicator-root").getCSSProperty("height")).value);
+
+		assert.equal(height, 144, "Height of the root element inherits the height of the Busy Indicator");
+	});
 });