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

Author: ilhan007

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 });
 	}
 

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);
 	}
 

packages/main/src/ComboBox.js

@@ -531,7 +531,6 @@ class ComboBox extends UI5Element {
 	}
 
 	_openRespPopover() {
-		this.updateStaticAreaItemContentDensity();
 		this.responsivePopover.open(this);
 	}
 

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();
 		}
 	}

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;
 		}

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);
 		}
 

packages/main/src/Select.js

@@ -300,8 +300,6 @@ class Select extends UI5Element {
 			return;
 		}
 
-		this.updateStaticAreaItemContentDensity();
-
 		if (this._isPickerOpen) {
 			this.responsivePopover.close();
 		} else {

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() {