fix(ui5-shellbar): fix overlapping of the search box over icons (#2155)

Now, when there is not enough space for the search field it is expanded to full width within the ui5-shellbar
and the search filed does not overlap any other elements in the ui5-shellbar any more.

FIXES: #2044

Author: nnaydenow

packages/fiori/src/ShellBar.hbs

@@ -74,20 +74,30 @@
 		{{/if}}
 	</div>
 
-	<div id="{{_id}}-searchfield-wrapper"
-		class="ui5-shellbar-search-field"
-		style="{{styles.searchField}}"
-	>
-		{{#if searchField.length}}
-			<slot name="searchField"></slot>
-		{{/if}}
-	</div>
-
 	<div class="ui5-shellbar-overflow-container ui5-shellbar-overflow-container-right">
-
 		<div class="ui5-shellbar-overflow-container-right-child">
 
 			{{#if hasSearchField}}
+				{{#if _fullWidthSearch}}
+					<div class="ui5-shellbar-search-full-width-wrapper" style="{{styles.searchField}}">
+						<div class="ui5-shellbar-search-full-field">
+							<slot name="searchField"></slot>
+						</div>
+						<ui5-button
+							@click={{_handleCancelButtonPress}}
+							class="ui5-shellbar-button"
+						>
+							Cancel
+						</ui5-button>
+					</div>
+				{{/if}}
+
+				<div class="ui5-shellbar-search-field" style="{{styles.searchField}}">
+					{{#unless _fullWidthSearch}}
+							<slot name="searchField"></slot>
+					{{/unless}}
+				</div>
+
 				<ui5-button
 					id="{{this._id}}-item-1"
 					class="{{classes.items.search}} ui5-shellbar-button ui5-shellbar-search-button"

packages/fiori/src/ShellBar.js

@@ -20,6 +20,7 @@ import {
 	SHELLBAR_LOGO,
 	SHELLBAR_COPILOT,
 	SHELLBAR_NOTIFICATIONS,
+	SHELLBAR_CANCEL,
 	SHELLBAR_PROFILE,
 	SHELLBAR_PRODUCTS,
 	SHELLBAR_SEARCH,
@@ -144,10 +145,6 @@ const metadata = {
 			type: Object,
 		},
 
-		_searchField: {
-			type: Object,
-		},
-
 		_header: {
 			type: Object,
 		},
@@ -164,6 +161,10 @@ const metadata = {
 			type: Boolean,
 			noAttribute: true,
 		},
+		_fullWidthSearch: {
+			type: Boolean,
+			noAttribute: true,
+		},
 	},
 	managedSlots: true,
 	slots: /** @lends sap.ui.webcomponents.fiori.ShellBar.prototype */ {
@@ -376,7 +377,7 @@ class ShellBar extends UI5Element {
 
 	static get FIORI_3_BREAKPOINTS() {
 		return [
-			559,
+			599,
 			1023,
 			1439,
 			1919,
@@ -386,7 +387,7 @@ class ShellBar extends UI5Element {
 
 	static get FIORI_3_BREAKPOINTS_MAP() {
 		return {
-			"559": "S",
+			"599": "S",
 			"1023": "M",
 			"1439": "L",
 			"1919": "XL",
@@ -429,10 +430,6 @@ class ShellBar extends UI5Element {
 			},
 		};
 
-		this._searchField = {
-			left: 0,
-		};
-
 		this._handleResize = async event => {
 			await this._getResponsivePopover();
 			this.overflowPopover.close();
@@ -527,15 +524,19 @@ class ShellBar extends UI5Element {
 			const isHidden = (info.classes.indexOf("ui5-shellbar-hidden-button") !== -1);
 			const isSet = info.classes.indexOf("ui5-shellbar-invisible-button") === -1;
 			const isOverflowIcon = info.classes.indexOf("ui5-shellbar-overflow-button") !== -1;
+			const isImageIcon = info.classes.indexOf("ui5-shellbar-image-button") !== -1;
+			const shouldStayOnScreen = isOverflowIcon || (isImageIcon && this.hasProfile);
 
-			return isHidden && isSet && !isOverflowIcon;
+			return isHidden && isSet && !shouldStayOnScreen;
 		});
 
 		this._observeMenuItems();
 	}
 
 	onAfterRendering() {
 		this._overflowActions();
+
+		this._fullWidthSearch = this._showFullWidthSearch;
 	}
 
 	/**
@@ -582,10 +583,16 @@ class ShellBar extends UI5Element {
 
 	_handleActionsOverflow() {
 		const rightContainerRect = this.shadowRoot.querySelector(".ui5-shellbar-overflow-container-right").getBoundingClientRect();
-		const icons = this.shadowRoot.querySelectorAll(".ui5-shellbar-button:not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-invisible-button)");
+		let overflowSelector = ".ui5-shellbar-button:not(.ui5-shellbar-overflow-button):not(.ui5-shellbar-invisible-button)";
+
+		if (this.showSearchField) {
+			overflowSelector += ",.ui5-shellbar-search-field";
+		}
+
+		const elementsToOverflow = this.shadowRoot.querySelectorAll(overflowSelector);
 		const isRTL = this.effectiveDir === "rtl";
 
-		let overflowCount = [].filter.call(icons, icon => {
+		let overflowCount = [].filter.call(elementsToOverflow, icon => {
 			const iconRect = icon.getBoundingClientRect();
 
 			if (isRTL) {
@@ -597,7 +604,7 @@ class ShellBar extends UI5Element {
 
 		overflowCount = overflowCount.length;
 
-		const items = this._getAllItems(!!overflowCount);
+		const items = this._getAllItems(!!overflowCount).filter(item => item.show);
 
 		const itemsByPriority = items.sort((item1, item2) => {
 			if (item1.priority > item2.priority) {
@@ -653,26 +660,7 @@ class ShellBar extends UI5Element {
 			return;
 		}
 
-		const searchField = this.shadowRoot.querySelector(`#${this._id}-searchfield-wrapper`);
-		const triggeredByOverflow = event.target.tagName.toLowerCase() === "ui5-li";
-		const overflowButton = this.shadowRoot.querySelector(".ui5-shellbar-overflow-button");
-		const overflowButtonRect = overflowButton.getBoundingClientRect();
-		const isRTL = this.effectiveDir === "rtl";
-		let right = "";
-
-		if (isRTL) {
-			right = `${(triggeredByOverflow ? overflowButton.offsetLeft : event.target.offsetLeft) + overflowButtonRect.width}px`;
-		} else {
-			right = `calc(100% - ${triggeredByOverflow ? overflowButton.offsetLeft : event.target.offsetLeft}px)`;
-		}
-
-		this._searchField = Object.assign({}, this._searchField, {
-			"right": right,
-		});
-
-
-		const inputSlot = searchField.children[0];
-		const input = inputSlot && inputSlot.assignedNodes()[0];
+		const input = this.searchField[0];
 
 		// update the state immediately
 		if (input) {
@@ -719,6 +707,10 @@ class ShellBar extends UI5Element {
 		});
 	}
 
+	_handleCancelButtonPress() {
+		this.showSearchField = false;
+	}
+
 	_handleProductSwitchPress(event) {
 		const buttonRef = this.shadowRoot.querySelector(".ui5-shellbar-button-product-switch");
 
@@ -744,6 +736,7 @@ class ShellBar extends UI5Element {
 				style: `order: ${this.searchField.length ? 1 : -10}`,
 				id: `${this._id}-item-${1}`,
 				press: this._handleSearchIconPress.bind(this),
+				show: !!this.searchField.length,
 			},
 			...this.items.map((item, index) => {
 				return {
@@ -893,10 +886,6 @@ class ShellBar extends UI5Element {
 
 	get styles() {
 		return {
-			searchField: {
-				[this.effectiveDir === "rtl" ? "left" : "right"]: this._searchField.right,
-				"top": `${parseInt(this._searchField.top)}px`,
-			},
 			items: {
 				notification: {
 					"order": this.isIconHidden("bell") ? "-1" : "3",
@@ -911,9 +900,24 @@ class ShellBar extends UI5Element {
 					"order": this.isIconHidden("grid") ? "-1" : "6",
 				},
 			},
+			searchField: {
+				"display": this.correctSearchFieldStyles,
+			},
 		};
 	}
 
+	get correctSearchFieldStyles() {
+		if (this.showSearchField) {
+			if (this._fullWidthSearch) {
+				return "flex";
+			}
+
+			return "block";
+		}
+
+		return "none";
+	}
+
 	get customItemsInfo() {
 		return this._itemsInfo.filter(itemInfo => !!itemInfo.custom);
 	}
@@ -982,6 +986,17 @@ class ShellBar extends UI5Element {
 		return this.i18nBundle.getText(SHELLBAR_NOTIFICATIONS, this.notificationCount);
 	}
 
+	get _cancelBtnText() {
+		return this.i18nBundle.getText(SHELLBAR_CANCEL);
+	}
+
+	get _showFullWidthSearch() {
+		const size = this._handleBarBreakpoints();
+		const searchBtnHidden = !!this.shadowRoot.querySelector(".ui5-shellbar-search-button.ui5-shellbar-hidden-button");
+
+		return ((size === "S") || searchBtnHidden);
+	}
+
 	get _profileText() {
 		return this.i18nBundle.getText(SHELLBAR_PROFILE);
 	}

packages/fiori/src/i18n/messagebundle.properties

@@ -114,8 +114,11 @@ SHELLBAR_SEARCH = Search
 #XACT: ARIA announcement for the more button
 SHELLBAR_OVERFLOW = More
 
+#XACT: ARIA announcement for the cancel button
+SHELLBAR_CANCEL = Cancel
+
 #XACT: ARIA announcement for roledescription attribute of Wizard navigation header
 WIZARD_NAV_ARIA_ROLE_DESCRIPTION = Wizard
 
 #XACT: WizardProgressNavigator predefined text for step
-WIZARD_NAV_STEP_DEFAULT_HEADING=Step
+WIZARD_NAV_STEP_DEFAULT_HEADING=Step

packages/fiori/src/themes/ShellBar.css

@@ -170,15 +170,19 @@ slot[name="profile"] {
 	padding: 0.25rem 1rem;
 }
 
+:host([breakpoint-size="S"]) .ui5-shellbar-search-full-width-wrapper {
+	padding: 0.25rem 1rem;
+}
+
 :host([breakpoint-size="S"]) ::slotted([ui5-button][slot="startButton"]) {
 	margin-right: 0;
 }
 
-:host([breakpoint-size="S"]) .ui5-shellbar-search-field {
-	width: 200px;
+:host([breakpoint-size="M"]) .ui5-shellbar-root {
+	padding: 0.25rem 2rem;
 }
 
-:host([breakpoint-size="M"]) .ui5-shellbar-root {
+:host([breakpoint-size="M"]) .ui5-shellbar-search-full-width-wrapper {
 	padding: 0.25rem 2rem;
 }
 
@@ -263,10 +267,13 @@ slot[name="profile"] {
 	overflow: hidden;
 	box-sizing: border-box;
 	white-space: nowrap;
-	margin-left: 8rem;
 	flex: 1;
 }
 
+:host(:not([show-search-field])) .ui5-shellbar-overflow-container-right {
+	margin-left: 8rem;
+}
+
 .ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
 	display: flex;
 	float: right;
@@ -307,11 +314,6 @@ slot[name="profile"] {
 	cursor: pointer;
 }
 
-:host(:not([show-search-field])) .ui5-shellbar-search-field {
-	display: none;
-}
-
-
 :host([breakpoint-size="L"]) .ui5-shellbar-with-searchfield .ui5-shellbar-overflow-container-right {
 	margin-left: 1rem;
 }
@@ -358,18 +360,39 @@ slot[name="profile"] {
 }
 
 .ui5-shellbar-search-field {
-	z-index: 101;
-	position: absolute;
 	width: 240px;
-	top: 0.25rem;
+	min-width: 240px;
+	margin-left: 0.5rem;
+}
+
+.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-search-full-field {
 	height: 2.25rem;
+	width: 100%;
+}
+
+.ui5-shellbar-search-full-width-wrapper {
+	position: absolute;
+	top: 0;
+	left: 0;
+	background: var(--sapShellColor);
+	height: 100%;
+	width: 100%;
+	z-index: 100;
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+}
+
+.ui5-shellbar-search-full-width-wrapper .ui5-shellbar-button {
+	width: auto;
 }
 
 ::slotted([ui5-input]) {
 	background-color: var(--sapShellColor);
 	border: 1px solid var(--sapShell_InteractiveBorderColor);
 	color: var(--sapShell_TextColor);
 	height: 100%;
+	width: 100%;
 }
 
 ::slotted([ui5-input][focused]) {
@@ -451,11 +474,15 @@ slot[name="profile"] {
 	margin-left: 0;
 }
 
-[dir="rtl"] .ui5-shellbar-overflow-container-right {
+:host(:not([show-search-field])) [dir="rtl"] .ui5-shellbar-overflow-container-right {
 	margin-right: 8rem;
 	margin-left: 0;
 }
 
+[dir="rtl"] .ui5-shellbar-overflow-container-right {
+	margin-left: 0;
+}
+
 [dir="rtl"] .ui5-shellbar-overflow-container-right .ui5-shellbar-overflow-container-right-child {
 	float: left;
 }