From 3659ca08351f8dccfd7a7505e958f1b8b53c9795 Mon Sep 17 00:00:00 2001
From: Georgieva <lidiya.georgieva@sap.com>
Date: Tue, 28 Mar 2023 16:10:22 +0300
Subject: [PATCH] fix(ui5-busy-indicator): height of the root element inherits
 the height of the Busy Indicator (#6805)

Fixes #6668
---
 packages/main/src/themes/BusyIndicator.css    |  1 +
 packages/main/test/pages/BusyIndicator.html   | 23 +++++++++++++++++++
 .../main/test/specs/BusyIndicator.spec.js     |  7 ++++++
 3 files changed, 31 insertions(+)

diff --git a/packages/main/src/themes/BusyIndicator.css b/packages/main/src/themes/BusyIndicator.css
index f9b673db4eb9..3ad30f4a01dc 100644
--- 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
index 6fb15fe4bbcb..a2037aa6f61b 100644
--- 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
index b36b821e1299..46d41550a82f 100644
--- 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");
+	});
 });