From 9454ab77228bbfdf8fad45ab6062ef2f64d59eed Mon Sep 17 00:00:00 2001
From: ilhan orhan <ilhan.myumyun@sap.com>
Date: Mon, 17 Aug 2020 11:06:51 +0300
Subject: [PATCH] fix(components): fix setting contentDensity styles (#2094)

Fixes
TimePicker was never considering contentDensity and did not update the styles of its popover so far.
DatePicker and DateTimePicker used to call updateStaticAreaItemContentDensity before the staticAreaItem DOM is available.
Solution:
Handle setting the contentDensity on framework level when possible and remove updateStaticAreaItemContentDensity calls from ShellBar, ComboBox, Select, Input, MultiCombobox. The updateStaticAreaItemContentDensity method exists and used in the TabContainer only, because the component does not invalidate on overflow popover open/close and needs to force the contentDensity update.

FIXES #2093
---
 packages/base/src/StaticAreaItem.js      | 1 +
 packages/fiori/src/ShellBar.js           | 2 --
 packages/main/src/ComboBox.js            | 1 -
 packages/main/src/DatePicker.js          | 1 -
 packages/main/src/Input.js               | 2 --
 packages/main/src/MultiComboBox.js       | 3 ---
 packages/main/src/Select.js              | 2 --
 packages/main/test/pages/TimePicker.html | 8 ++++++++
 8 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/packages/base/src/StaticAreaItem.js b/packages/base/src/StaticAreaItem.js
index c4199093e686..2bf751ed1ddf 100644
--- a/packages/base/src/StaticAreaItem.js
+++ b/packages/base/src/StaticAreaItem.js
@@ -36,6 +36,7 @@ class StaticAreaItem {
 			this._rendered = true;
 		}
 
+		this._updateContentDensity(this.ui5ElementContext.isCompact);
 		this.ui5ElementContext.constructor.render(renderResult, this.staticAreaItemDomRef.shadowRoot, stylesToAdd, { eventContext: this.ui5ElementContext });
 	}
 
diff --git a/packages/fiori/src/ShellBar.js b/packages/fiori/src/ShellBar.js
index b70e5c7e7f26..bd30a1d9a5c6 100644
--- a/packages/fiori/src/ShellBar.js
+++ b/packages/fiori/src/ShellBar.js
@@ -423,7 +423,6 @@ class ShellBar extends UI5Element {
 				this._updateClonedMenuItems();
 
 				if (this.hasMenuItems) {
-					this.updateStaticAreaItemContentDensity();
 					const menuPopover = await this._getMenuPopover();
 					menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
 				}
@@ -635,7 +634,6 @@ class ShellBar extends UI5Element {
 
 	_toggleActionPopover() {
 		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
-		this.updateStaticAreaItemContentDensity();
 		this.overflowPopover.openBy(overflowButton);
 	}
 
diff --git a/packages/main/src/ComboBox.js b/packages/main/src/ComboBox.js
index 6523760ab7d7..28365a604513 100644
--- a/packages/main/src/ComboBox.js
+++ b/packages/main/src/ComboBox.js
@@ -531,7 +531,6 @@ class ComboBox extends UI5Element {
 	}
 
 	_openRespPopover() {
-		this.updateStaticAreaItemContentDensity();
 		this.responsivePopover.open(this);
 	}
 
diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
index 276374f08ea6..4f07ec838863 100644
--- a/packages/main/src/DatePicker.js
+++ b/packages/main/src/DatePicker.js
@@ -778,7 +778,6 @@ class DatePicker extends UI5Element {
 		if (this.isOpen()) {
 			this.closePicker();
 		} else if (this._canOpenPicker()) {
-			this.updateStaticAreaItemContentDensity();
 			this.openPicker();
 		}
 	}
diff --git a/packages/main/src/Input.js b/packages/main/src/Input.js
index 4bfca853078d..6a7d4f00b9d5 100644
--- a/packages/main/src/Input.js
+++ b/packages/main/src/Input.js
@@ -551,7 +551,6 @@ class Input extends UI5Element {
 		if (!this.firstRendering && !isPhone() && this.Suggestions) {
 			const shouldOpenSuggestions = this.shouldOpenSuggestions();
 
-			this.updateStaticAreaItemContentDensity();
 			this.Suggestions.toggle(shouldOpenSuggestions, {
 				preventFocusRestore: !this.hasSuggestionItemSelected,
 			});
@@ -657,7 +656,6 @@ class Input extends UI5Element {
 
 	_click(event) {
 		if (isPhone() && !this.readonly && this.Suggestions) {
-			this.updateStaticAreaItemContentDensity();
 			this.Suggestions.open(this);
 			this.isRespPopoverOpen = true;
 		}
diff --git a/packages/main/src/MultiComboBox.js b/packages/main/src/MultiComboBox.js
index 8bd958ce3034..05d4b2828e79 100644
--- a/packages/main/src/MultiComboBox.js
+++ b/packages/main/src/MultiComboBox.js
@@ -386,7 +386,6 @@ class MultiComboBox extends UI5Element {
 			if (filteredItems.length === 0) {
 				this.allItemsPopover.close();
 			} else {
-				this.updateStaticAreaItemContentDensity();
 				this.allItemsPopover.open(this);
 			}
 		}
@@ -514,13 +513,11 @@ class MultiComboBox extends UI5Element {
 	}
 
 	_toggleRespPopover() {
-		this.updateStaticAreaItemContentDensity();
 		this.allItemsPopover.toggle(this);
 	}
 
 	_click(event) {
 		if (isPhone() && !this.readonly && !this._showMorePressed) {
-			this.updateStaticAreaItemContentDensity();
 			this.allItemsPopover.open(this);
 		}
 
diff --git a/packages/main/src/Select.js b/packages/main/src/Select.js
index f4de6132693d..5dc2f56c0fac 100644
--- a/packages/main/src/Select.js
+++ b/packages/main/src/Select.js
@@ -300,8 +300,6 @@ class Select extends UI5Element {
 			return;
 		}
 
-		this.updateStaticAreaItemContentDensity();
-
 		if (this._isPickerOpen) {
 			this.responsivePopover.close();
 		} else {
diff --git a/packages/main/test/pages/TimePicker.html b/packages/main/test/pages/TimePicker.html
index ed86d08b2d8f..779d5a32ade9 100644
--- a/packages/main/test/pages/TimePicker.html
+++ b/packages/main/test/pages/TimePicker.html
@@ -55,6 +55,14 @@
 		</ui5-time-picker>
 		<ui5-button id="testBtn">btn for testing</ui5-button>
 
+
+		<section class="ui5-content-density-compact">
+			<h3>TimePicker in Compact</h3>
+			<div>
+				<ui5-time-picker></ui5-time-picker>
+			</div>
+		</section>
+
 		<script>
 				var counter = 0;
 				timepickerChange.addEventListener("ui5-change", function() {