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
SAP · Nov 5, 2020 · 2caba59 · 2caba59
1 parent 8bf76f6
commit 2caba59
Show file tree

Hide file tree

Showing 8 changed files with 9 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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() {
-Original file line number
+Diff line change
@@ Expand Up / @@ -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 });
     	}
@@ Expand Down @@