fix: apply size "compact" for StaticArea items (#1204)

packages/base/src/StaticAreaItem.js

@@ -47,6 +47,23 @@ class StaticAreaItem {
 		}
 	}
 
+	/**
+	 * @protected
+	 */
+	_updateContentDensity(isCompact) {
+		if (!this.staticAreaItemDomRef) {
+			return;
+		}
+
+		if (isCompact) {
+			this.staticAreaItemDomRef.classList.add("sapUiSizeCompact");
+			this.staticAreaItemDomRef.classList.add("ui5-content-density-compact");
+		} else {
+			this.staticAreaItemDomRef.classList.remove("sapUiSizeCompact");
+			this.staticAreaItemDomRef.classList.remove("ui5-content-density-compact");
+		}
+	}
+
 	/**
 	 * @protected
 	 * Returns reference to the DOM element where the current fragment is added.

packages/base/src/UI5Element.js

@@ -22,6 +22,7 @@ const IDMap = new Map();
 
 const elementTimeouts = new Map();
 
+const GLOBAL_CONTENT_DENSITY_CSS_VAR = "--_ui5_content_density";
 /**
  * Base class for all UI5 Web Components
  *
@@ -590,6 +591,16 @@ class UI5Element extends HTMLElement {
 		return this[slotName].reduce(reducer, []);
 	}
 
+	get isCompact() {
+		return getComputedStyle(this).getPropertyValue(GLOBAL_CONTENT_DENSITY_CSS_VAR) === "compact";
+	}
+
+	updateStaticAreaItemContentDensity() {
+		if (this.staticAreaItem) {
+			this.staticAreaItem._updateContentDensity(this.isCompact);
+		}
+	}
+
 	/**
 	 * Used to duck-type UI5 elements without using instanceof
 	 * @returns {boolean}

packages/fiori/src/ShellBar.js

@@ -385,6 +385,7 @@ class ShellBar extends UI5Element {
 					this.menuItems.forEach(item => {
 						this._menuPopoverItems.push(item.textContent);
 					});
+					this.updateStaticAreaItemContentDensity();
 					menuPopover.openBy(this.shadowRoot.querySelector(".ui5-shellbar-menu-button"));
 				}
 			},
@@ -628,6 +629,7 @@ class ShellBar extends UI5Element {
 	_toggleActionPopover() {
 		const popover = this.getStaticAreaItemDomRef().querySelector(".ui5-shellbar-overflow-popover");
 		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
+		this.updateStaticAreaItemContentDensity();
 		popover.openBy(overflowButton);
 	}
 

packages/fiori/test/pages/ShellBar.html

@@ -126,6 +126,22 @@
     <ui5-li slot="menuItems">Application 5</ui5-li>
 </ui5-shellbar>
 
+<section class="ui5-content-density-compact">
+	<h3>ShellBar in Compact</h3>
+	<div>
+		<ui5-shellbar primary-title="Product Title" show-notifications>
+			<ui5-button icon="nav-back" slot="startButton" id="start-button"></ui5-button>
+			<ui5-shellbar-item id="disc" icon="disconnected" text="Disconnect"></ui5-shellbar-item>
+			<ui5-shellbar-item id="call" icon="incoming-call" text="Incoming Calls"></ui5-shellbar-item>
+			<ui5-li id="menu-item-1" slot="menuItems">Application 1</ui5-li>
+			<ui5-li id="menu-item-2" slot="menuItems">Application 2</ui5-li>
+			<ui5-li slot="menuItems">Application 3</ui5-li>
+			<ui5-li slot="menuItems">Application 4</ui5-li>
+			<ui5-li slot="menuItems">Application 5</ui5-li>
+		</ui5-shellbar>
+	</div>
+</section>
+
 <ui5-popover id="popover" placement-type="Bottom">
     <div class="popover-header">
         <ui5-title style="padding: 0.25rem 1rem 0rem 1rem">John Doe</ui5-title>

packages/main/src/ComboBox.js

@@ -334,9 +334,9 @@ class ComboBox extends UI5Element {
 
 	_toggleRespPopover() {
 		if (this._respPopover.opened) {
-			this._respPopover.close();
+			this._closeRespPopover();
 		} else {
-			this._respPopover.open(this);
+			this._openRespPopover();
 		}
 	}
 
@@ -363,7 +363,7 @@ class ComboBox extends UI5Element {
 		this.filterValue = value;
 		this.fireEvent("input");
 
-		this._respPopover.open(this);
+		this._openRespPopover();
 	}
 
 	_startsWithMatchingItems(str) {
@@ -382,14 +382,19 @@ class ComboBox extends UI5Element {
 
 	_click(event) {
 		if (isPhone() && !this.readonly) {
-			this._respPopover.open(this);
+			this._openRespPopover();
 		}
 	}
 
 	_closeRespPopover() {
 		this._respPopover.close();
 	}
 
+	_openRespPopover() {
+		this.updateStaticAreaItemContentDensity();
+		this._respPopover.open(this);
+	}
+
 	_filterItems(str) {
 		return (Filters[this.filter] || Filters.StartsWithPerTerm)(str, this.items);
 	}
@@ -440,7 +445,7 @@ class ComboBox extends UI5Element {
 		});
 
 		this._inputChange();
-		this._respPopover.close();
+		this._closeRespPopover();
 	}
 
 	get _filteredItems() {

packages/main/src/DatePicker.js

@@ -637,6 +637,7 @@ class DatePicker extends UI5Element {
 		if (this.isOpen()) {
 			this.closePicker();
 		} else if (this._canOpenPicker()) {
+			this.updateStaticAreaItemContentDensity();
 			this.openPicker();
 		}
 	}

packages/main/src/Input.js

@@ -397,6 +397,7 @@ class Input extends UI5Element {
 		if (!this.firstRendering && !isPhone() && this.Suggestions) {
 			const shouldOpenSuggestions = this.shouldOpenSuggestions();
 
+			this.updateStaticAreaItemContentDensity();
 			this.Suggestions.toggle(shouldOpenSuggestions);
 
 			if (!isPhone() && shouldOpenSuggestions) {
@@ -476,6 +477,7 @@ class Input extends UI5Element {
 
 	_click(event) {
 		if (isPhone() && !this.readonly && this.Suggestions) {
+			this.updateStaticAreaItemContentDensity();
 			this.Suggestions.open(this);
 		}
 	}

packages/main/src/MultiComboBox.js

@@ -391,6 +391,7 @@ class MultiComboBox extends UI5Element {
 			if (filteredItems.length === 0) {
 				this._getRespPopover().close();
 			} else {
+				this.updateStaticAreaItemContentDensity();
 				this._getRespPopover().open(this);
 			}
 		}
@@ -502,6 +503,8 @@ class MultiComboBox extends UI5Element {
 		const popover = this._getRespPopover(isMorePopover);
 		const otherPopover = this._getRespPopover(!isMorePopover);
 
+		this.updateStaticAreaItemContentDensity();
+
 		if (popover && popover.opened) {
 			return popover.close();
 		}
@@ -521,6 +524,7 @@ class MultiComboBox extends UI5Element {
 
 	_click(event) {
 		if (isPhone() && !this.readonly && !this._showMorePressed) {
+			this.updateStaticAreaItemContentDensity();
 			this._getRespPopover().open(this);
 		}
 
@@ -567,6 +571,7 @@ class MultiComboBox extends UI5Element {
 
 	onAfterRendering() {
 		if (this.open && !this._getRespPopover().opened) {
+			this.updateStaticAreaItemContentDensity();
 			this._getRespPopover().open(this);
 			// Set initial focus to the native input
 			this._innerInput.focus();

packages/main/src/Select.js

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

packages/main/src/TabContainer.js

@@ -330,6 +330,7 @@ class TabContainer extends UI5Element {
 	}
 
 	_onOverflowButtonClick(event) {
+		this.updateStaticAreaItemContentDensity();
 		this._respPopover.open(event.target);
 	}
 

packages/main/src/themes/base/sizes-parameters.css

@@ -1,4 +1,5 @@
 :root {
+	--_ui5_content_density: cozy;
 	--_ui5_calendar_header_height: 3rem;
 	--_ui5_calendar_header_arrow_button_width: 2.5rem;
 	--_ui5_calendar_header_padding: 0.25rem 0;
@@ -50,6 +51,7 @@
 [data-ui5-compact-size],
 .ui5-content-density-compact,
 .sapUiSizeCompact {
+	--_ui5_content_density: compact;
 	--_ui5_button_base_height: 1.625rem;
 	--_ui5_button_base_padding: 0.4375rem;
 	--_ui5_button_base_min_width: 2rem;

packages/main/test/pages/ComboBox.html

@@ -130,7 +130,19 @@
 				<ui5-combobox-item text="Canada"></ui5-combobox-item>
 				<ui5-combobox-item text="Germany"></ui5-combobox-item>
 			</ui5-combobox>
+	</div>
+
+	<section class="ui5-content-density-compact">
+		<h3>ComboBox in Compact</h3>
+		<div>
+			<ui5-combobox>
+				<ui5-combobox-item text="Argentina"></ui5-combobox-item>
+				<ui5-combobox-item text="United States of America"></ui5-combobox-item>
+				<ui5-combobox-item text="Canada"></ui5-combobox-item>
+				<ui5-combobox-item text="Germany"></ui5-combobox-item>
+			</ui5-combobox>
 		</div>
+	</section>
 
 	<script>
 		document.getElementById("combo").addEventListener("ui5-change", event => {

packages/main/test/pages/DatePicker.html

@@ -99,6 +99,14 @@ <h3>3 months range</h3>
 		<ui5-datepicker id="minMax3" value="5/6/2020" min-date="6/1/2020" max-date="5/1/2021" format-pattern="dd/MM/yyyy"></ui5-datepicker>
 		<h3>1 year range</h3>
 		<ui5-datepicker id="minMax4" value="5 Feb 2021" min-date="5 Jan 2020" max-date="5 Jan 2021"></ui5-datepicker>
+
+		<section class="ui5-content-density-compact">
+			<h3>DatePicker in Compact</h3>
+			<div>
+				<ui5-datepicker></ui5-datepicker>
+			</div>
+		</section>
+
 	</div>
 	<script>
 		var dp = document.getElementById('dp5');

packages/main/test/pages/Input.html

@@ -21,11 +21,23 @@ <h3> Input with suggestions: type 'a'</h3>
 	<ui5-label id="myLabelSubmit">Event [submit] :: N/A</ui5-label><br/>
 	<ui5-label id="myLabelLiveChange">Event [input] :: N/A</ui5-label><br/>
 
-	<ui5-input id="myInput"
-		style="width: 500px"
-		show-suggestions
-		placeholder="Search for a country ...">
-	</ui5-input>
+	<div>
+		<h3>Input in Cozy</h3>
+		<ui5-input id="myInput"
+			style="width: 500px"
+			show-suggestions
+			placeholder="Search for a country ...">
+		</ui5-input>
+	</div>
+
+	<div class="sapUiSizeCompact">
+		<h3>Input in Compact</h3>
+		<ui5-input id="inputCompact"
+			style="width: 500px"
+			show-suggestions
+			placeholder="Search for a country ...">
+		</ui5-input>
+	</div>
 
 	<h3> Input with suggestions</h3>
 	<ui5-input id="myInput2" show-suggestions style="width: 100%">
@@ -143,8 +155,9 @@ <h3> Input with multiple icons</h3>
 		var labelLiveChange = document.getElementById('myLabelLiveChange');
 		var labelSubmit = document.getElementById('myLabelSubmit');
 
-		input.addEventListener("ui5-input", function (event) {
-			var value = event.target.value;
+		var suggest = function (event) {
+			var input = event.target;
+			var value = input.value;
 			var suggestionItems = [];
 
 			if (value) {
@@ -165,7 +178,10 @@ <h3> Input with multiple icons</h3>
 			});
 
 			labelLiveChange.innerHTML = "Event [input] :: " + value;
-		});
+		};
+
+		input.addEventListener("ui5-input", suggest);
+		inputCompact.addEventListener("ui5-input", suggest);
 
 		input.addEventListener("ui5-suggestionItemSelect", function (event) {
 			var item = event.detail.item;

packages/main/test/pages/MultiComboBox.html

@@ -253,6 +253,18 @@
 	</div>
 
 
+	<section class="ui5-content-density-compact">
+		<h3>MultiComboBox in Compact</h3>
+		<div>
+			<ui5-multi-combobox placeholder="Some initial text">
+				<ui5-li type="Active">Cosy</ui5-li>
+				<ui5-li type="Active">Compact</ui5-li>
+				<ui5-li type="Active">Condensed</ui5-li>
+				<ui5-li type="Active">Longest word in the world</ui5-li>
+			</ui5-multi-combobox>
+		</div>
+	</section>
+
 	<script>
 		const eventNameInput = document.getElementById("events-input");
 		const eventParamsInput = document.getElementById("events-parameters");

packages/main/test/pages/Select.html

@@ -62,6 +62,17 @@ <h2>Selection not cycling</h2>
 
 	<h2> Change event counter holder</h2>
 	<ui5-input id="inputResult"></ui5-input>
+
+	<section class="ui5-content-density-compact">
+		<h3>Select in Compact</h3>
+		<div>
+			<ui5-select>
+				<ui5-option selected>Cozy</ui5-option>
+				<ui5-option selected>Compact</ui5-option>
+				<ui5-option selected>Condensed</ui5-option>
+			</ui5-select>
+		</div>
+	</section>
 </body>
 <script>
 	var countries =  [{ key: "Aus", text: "Australia" }, { key: "Aruba", text: "Aruba" }, { key: "Antigua", text: "Antigua and Barbuda" }, { key: "Bel", text: "Belgium" }, { key: "Bg", text: "Bulgaria" }, { key: "Bra", text: "Brazil" }];