@openui5/sap.m 1.100.0 → 1.102.1

package/src/sap/m/NavContainer.js

@@ -43,7 +43,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.102.1
 	 *
 	 * @constructor
 	 * @public
@@ -671,24 +671,24 @@ sap.ui.define([
 	 *
 	 * Calling this navigation method triggers first the (cancelable) "navigate" event on the NavContainer, then the "BeforeHide" pseudo event on the source page and "BeforeFirstShow" (if applicable) and"BeforeShow" on the target page. Later - after the transition has completed - the "AfterShow" pseudo event is triggered on the target page and "AfterHide" on the page which has been left. The given data object is available in the "BeforeFirstShow", "BeforeShow" and "AfterShow" event object as "data" property.
 	 *
-	 * @param {string} pageId
+	 * @param {string} vPageIdOrControl
 	 *         The screen to which drilldown should happen. The ID or the control itself can be given.
-	 * @param {string} [transitionName=slide]
+	 * @param {string} [sTransitionName=slide]
 	 *         The type of the transition/animation to apply. Options are "slide" (horizontal movement from the right), "baseSlide", "fade", "flip", and "show"
 	 *         and the names of any registered custom transitions.
 	 *
 	 *         None of the standard transitions is currently making use of any given transition parameters.
-	 * @param {object} [data={}]
+	 * @param {object} [oData={}]
 	 *         Since version 1.7.1. This optional object can carry any payload data which should be made available to the target page.
 	 *         The "BeforeShow" event on the target page will contain this data object as "data" property.
 
 	 *         Use case: in scenarios where the entity triggering the navigation can or should not directly initialize the target page, it can fill this object and the target page itself (or a listener on it) can take over the initialization, using the given data.
 	 *
-	 *         When the <code>oTransitionParameters</code> parameter is used, this <code>data</code> parameter must also be given (either as object or as <code>null</code> or <code>undefined</code>) in order to have a proper parameter order.
+	 *         When the <code>oTransitionParameters</code> parameter is used, this <code>oData</code> parameter must also be given (either as object or as <code>null</code> or <code>undefined</code>) in order to have a proper parameter order.
 	 * @param {object} [oTransitionParameters={}]
 	 *         Since version 1.7.1. This optional object can contain additional information for the transition function, like the DOM element which triggered the transition or the desired transition duration.
 	 *
-	 *         For a proper parameter order, the <code>data</code> parameter must be given when the <code>oTransitionParameters</code> parameter is used (it can be given as <code>null</code> or <code>undefined</code>).
+	 *         For a proper parameter order, the <code>oData</code> parameter must be given when the <code>oTransitionParameters</code> parameter is used (it can be given as <code>null</code> or <code>undefined</code>).
 	 *
 	 *         NOTE: it depends on the transition function how the object should be structured and which parameters are actually used to influence the transition.
 	 *         The "show", "slide", "baseSlide" and "fade" transitions do not use any parameter.
@@ -696,44 +696,44 @@ sap.ui.define([
 	 * @ui5-metamodel This method also will be described in the UI5 (legacy) designtime metamodel
 	 * @returns {this} The <code>sap.m.NavContainer</code> instance
 	 */
-	NavContainer.prototype.to = function (pageId, transitionName, data, oTransitionParameters, bFromQueue) {
-		if (pageId instanceof Control) {
-			pageId = pageId.getId();
+	NavContainer.prototype.to = function (vPageIdOrControl, sTransitionName, oData, oTransitionParameters, bFromQueue) {
+		if (vPageIdOrControl instanceof Control) {
+			vPageIdOrControl = vPageIdOrControl.getId();
 		}
 
 		// fix parameters
-		if (typeof (transitionName) !== "string") {
-			// transitionName is omitted, shift parameters
-			oTransitionParameters = data;
-			data = transitionName;
+		if (typeof (sTransitionName) !== "string") {
+			// sTransitionName is omitted, shift parameters
+			oTransitionParameters = oData;
+			oData = sTransitionName;
 		}
-		transitionName = transitionName || this.getDefaultTransitionName();
+		sTransitionName = sTransitionName || this.getDefaultTransitionName();
 		oTransitionParameters = oTransitionParameters || {};
-		data = data || {};
-		var oFromPageInfo = {id: pageId, transition: transitionName, data: data};
+		oData = oData || {};
+		var oFromPageInfo = {id: vPageIdOrControl, transition: sTransitionName, data: oData};
 
 		// make sure the initial page is on the stack
-		this._ensurePageStackInitialized(data);
+		this._ensurePageStackInitialized(oData);
 
 		//add to the queue before checking the current page, because this might change
 		if (this._bNavigating) {
-			Log.info(this.toString() + ": Cannot navigate to page " + pageId + " because another navigation is already in progress. - navigation will be executed after the previous one");
+			Log.info(this.toString() + ": Cannot navigate to page " + vPageIdOrControl + " because another navigation is already in progress. - navigation will be executed after the previous one");
 
 			this._aQueue.push(jQuery.proxy(function () {
-				this.to(pageId, transitionName, data, oTransitionParameters, true);
+				this.to(vPageIdOrControl, sTransitionName, oData, oTransitionParameters, true);
 			}, this));
 
 			return this;
 		}
 
-		// If to is called before rendering, remember the data so we can pass it to the events as soon as the navContainer gets rendered
+		// If to is called before rendering, remember the oData so we can pass it to the events as soon as the navContainer gets rendered
 		if (this._bNeverRendered) {
-			this._oToDataBeforeRendering = data;
+			this._oToDataBeforeRendering = oData;
 		}
 
 		var oFromPage = this.getCurrentPage();
-		if (oFromPage && (oFromPage.getId() === pageId)) { // cannot navigate to the page that is already current
-			Log.warning(this.toString() + ": Cannot navigate to page " + pageId + " because this is the current page.");
+		if (oFromPage && (oFromPage.getId() === vPageIdOrControl)) { // cannot navigate to the page that is already current
+			Log.warning(this.toString() + ": Cannot navigate to page " + vPageIdOrControl + " because this is the current page.");
 			if (bFromQueue) {
 				this._dequeueNavigation();
 			}
@@ -746,11 +746,11 @@ sap.ui.define([
 			return this;
 		}
 
-		var oToPage = this.getPage(pageId);
+		var oToPage = this.getPage(vPageIdOrControl);
 
 		if (oToPage) {
 			if (!oFromPage) {
-				Log.warning("Navigation triggered to page with ID '" + pageId + "', but the current page is not known/aggregated by " + this);
+				Log.warning("Navigation triggered to page with ID '" + vPageIdOrControl + "', but the current page is not known/aggregated by " + this);
 				return this;
 			}
 
@@ -758,8 +758,8 @@ sap.ui.define([
 				from: oFromPage,
 				fromId: oFromPage.getId(),
 				to: oToPage,
-				toId: pageId,
-				firstTime: !this._mVisitedPages[pageId],
+				toId: vPageIdOrControl,
+				firstTime: !this._mVisitedPages[vPageIdOrControl],
 				isTo: true,
 				isBack: false,
 				isBackToTop: false,
@@ -781,27 +781,27 @@ sap.ui.define([
 				// TODO: let one of the pages also cancel navigation?
 				var oEvent = jQuery.Event("BeforeHide", oNavInfo);
 				oEvent.srcControl = this; // store the element on the event (aligned with jQuery syntax)
-				// no data needed for hiding
+				// no oData needed for hiding
 				oFromPage._handleEvent(oEvent);
 
-				if (!this._mVisitedPages[pageId]) { // if this page has not been shown before
+				if (!this._mVisitedPages[vPageIdOrControl]) { // if this page has not been shown before
 					oEvent = jQuery.Event("BeforeFirstShow", oNavInfo);
 					oEvent.srcControl = this;
-					oEvent.data = data || {};
+					oEvent.data = oData || {};
 					oEvent.backData = {};
 					oToPage._handleEvent(oEvent);
 				}
 
 				oEvent = jQuery.Event("BeforeShow", oNavInfo);
 				oEvent.srcControl = this;
-				oEvent.data = data || {};
+				oEvent.data = oData || {};
 				oEvent.backData = {};
 				oToPage._handleEvent(oEvent);
 
 
 				this._pageStack.push(oFromPageInfo); // this actually causes/is the navigation
-				Log.info(this.toString() + ": navigating to page '" + pageId + "': " + oToPage.toString());
-				this._mVisitedPages[pageId] = true;
+				Log.info(this.toString() + ": navigating to page '" + vPageIdOrControl + "': " + oToPage.toString());
+				this._mVisitedPages[vPageIdOrControl] = true;
 
 				if (!this.getDomRef()) { // the wanted animation has been recorded, but when the NavContainer is not rendered, we cannot animate, so just return
 					Log.info("'Hidden' 'to' navigation in not-rendered NavContainer " + this.toString());
@@ -826,33 +826,33 @@ sap.ui.define([
 					oToPage.addStyleClass("sapMNavItemHidden").removeStyleClass("sapMNavItemRendering");
 				}
 
-				var oTransition = NavContainer.transitions[transitionName] || NavContainer.transitions["slide"];
+				var oTransition = NavContainer.transitions[sTransitionName] || NavContainer.transitions["slide"];
 				// Track proper invocation of the callback  TODO: only do this during development?
 				var iCompleted = this._iTransitionsCompleted;
 				var that = this;
 				window.setTimeout(function () {
 					if (that && (that._iTransitionsCompleted < iCompleted + 1)) {
-						Log.warning("Transition '" + transitionName + "' 'to' was triggered five seconds ago, but has not yet invoked the end-of-transition callback.");
+						Log.warning("Transition '" + sTransitionName + "' 'to' was triggered five seconds ago, but has not yet invoked the end-of-transition callback.");
 					}
 				}, fnGetDelay(5000));
 
 				this._bNavigating = true;
 
 				// check both params since they might have shifted
-				var sTransitionDirection = (data.safeBackToPage || oTransitionParameters.safeBackToPage) ? "back" : "to";
+				var sTransitionDirection = (oData.safeBackToPage || oTransitionParameters.safeBackToPage) ? "back" : "to";
 
-				this._cacheTransitionInfo(transitionName, sTransitionDirection);
+				this._cacheTransitionInfo(sTransitionName, sTransitionDirection);
 
 				oTransition[sTransitionDirection].call(this, oFromPage, oToPage, jQuery.proxy(function () {
-					this._afterTransitionCallback(oNavInfo, data);
+					this._afterTransitionCallback(oNavInfo, oData);
 				}, this), oTransitionParameters); // trigger the transition
 
 			} else {
-				Log.info("Navigation to page with ID '" + pageId + "' has been aborted by the application");
+				Log.info("Navigation to page with ID '" + vPageIdOrControl + "' has been aborted by the application");
 			}
 
 		} else {
-			Log.warning("Navigation triggered to page with ID '" + pageId + "', but this page is not known/aggregated by " + this);
+			Log.warning("Navigation triggered to page with ID '" + vPageIdOrControl + "', but this page is not known/aggregated by " + this);
 		}
 		return this;
 	};

package/src/sap/m/NewsContent.js

@@ -26,7 +26,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.102.1
 	 * @since 1.34
 	 *
 	 * @public

package/src/sap/m/NotificationList.js

@@ -27,7 +27,7 @@ function(
 	 * @extends sap.m.ListBase
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.102.1
 	 *
 	 * @constructor
 	 * @public

package/src/sap/m/NotificationListBase.js

@@ -9,6 +9,7 @@ sap.ui.define([
 		'sap/ui/core/Core',
 		'sap/ui/core/Element',
 		'sap/ui/Device',
+		'sap/ui/core/ResizeHandler',
 		'./ListItemBase',
 		'./Button',
 		'./ToolbarSeparator',
@@ -21,6 +22,7 @@ sap.ui.define([
 			  Core,
 			  Element,
 			  Device,
+			  ResizeHandler,
 			  ListItemBase,
 			  Button,
 			  ToolbarSeparator,
@@ -31,12 +33,18 @@ sap.ui.define([
 			  coreLibrary) {
 		'use strict';
 
+		var NLI_RANGE_SET = "NLIRangeSet";
+		Device.media.initRangeSet(NLI_RANGE_SET, [600], "px", ["S", "M"], true);
+
 		// shortcut for sap.ui.core.Priority
 		var Priority = coreLibrary.Priority;
 
 		// shortcut for sap.m.ButtonType
 		var ButtonType = library.ButtonType;
 
+		// shortcut for sap.m.ToolbarStyle
+		var ToolbarStyle = library.ToolbarStyle;
+
 		// shortcut for sap.m.OverflowToolbarPriority
 		var OverflowToolbarPriority = library.OverflowToolbarPriority;
 
@@ -78,7 +86,7 @@ sap.ui.define([
 		 * @extends sap.m.ListItemBase
 		 *
 		 * @author SAP SE
-		 * @version 1.100.0
+		 * @version 1.102.1
 		 *
 		 * @constructor
 		 * @public
@@ -183,8 +191,16 @@ sap.ui.define([
 			return '';
 		};
 
-		NotificationListBase.prototype.getButtons = function () {
+		/**
+		 * @override
+		 */
+		NotificationListBase.prototype.setProperty = function () {
+			this._resetButtonsOverflow();
 
+			return ListItemBase.prototype.setProperty.apply(this, arguments);
+		};
+
+		NotificationListBase.prototype.getButtons = function () {
 			var closeButton = this._getCloseButton(),
 				toolbarSeparator = this._getToolbarSeparator();
 
@@ -194,25 +210,25 @@ sap.ui.define([
 		};
 
 		NotificationListBase.prototype.addButton = function (oButton) {
-
 			var overflowToolbar = this._getOverflowToolbar(),
 				index = overflowToolbar.getContent().length;
 
-			if (Device.system.phone) {
+			if (this._getToolbarSeparator()) {
 				index -= 2;
 			}
 
 			overflowToolbar.insertContent(oButton, index);
 
+			this._resetButtonsOverflow();
 			this.invalidate();
 
 			return this;
 		};
 
 		NotificationListBase.prototype.insertButton = function (oButton, index) {
-
 			this._getOverflowToolbar().insertContent(oButton, index);
 
+			this._resetButtonsOverflow();
 			this.invalidate();
 
 			return this;
@@ -221,6 +237,7 @@ sap.ui.define([
 		NotificationListBase.prototype.removeButton = function (oButton) {
 			var result = this._getOverflowToolbar().removeContent(oButton.getId());
 
+			this._resetButtonsOverflow();
 			this.invalidate();
 
 			return result;
@@ -231,9 +248,10 @@ sap.ui.define([
 				buttons = this.getButtons();
 
 			buttons.forEach(function (button) {
-				overflowToolbar.removeContent(button.getId());
+				overflowToolbar.removeContent(button);
 			});
 
+			this._resetButtonsOverflow();
 			this.invalidate();
 
 			return this;
@@ -246,6 +264,7 @@ sap.ui.define([
 				button.destroy();
 			});
 
+			this._resetButtonsOverflow();
 			this.invalidate();
 
 			return this;
@@ -270,30 +289,13 @@ sap.ui.define([
 		};
 
 		NotificationListBase.prototype._getOverflowToolbar = function () {
-			var overflowToolbar = this.getAggregation('_overflowToolbar'),
-				toolbarSeparator,
-				oCloseButton;
+			var overflowToolbar = this.getAggregation('_overflowToolbar');
 
 			if (!overflowToolbar) {
-				overflowToolbar = new OverflowToolbar(this.getId() + '-overflowToolbar', {});
-
+				overflowToolbar = new OverflowToolbar(this.getId() + '-overflowToolbar', {
+					style: ToolbarStyle.Clear
+				});
 				this.setAggregation("_overflowToolbar", overflowToolbar, true);
-
-				if (Device.system.phone) {
-
-					oCloseButton = this._getCloseButton();
-					oCloseButton.setLayoutData(new OverflowToolbarLayoutData({
-						priority: OverflowToolbarPriority.AlwaysOverflow
-					}));
-
-					toolbarSeparator = new ToolbarSeparator();
-					toolbarSeparator.setLayoutData(new OverflowToolbarLayoutData({
-						priority: OverflowToolbarPriority.AlwaysOverflow
-					}));
-
-					overflowToolbar.addContent(toolbarSeparator);
-					overflowToolbar.addContent(oCloseButton);
-				}
 			}
 
 			return overflowToolbar;
@@ -306,67 +308,70 @@ sap.ui.define([
 				overflowToolbarContent,
 				closeButtonIndex;
 
-			if (Device.system.phone) {
-
-				overflowToolbar = this._getOverflowToolbar();
-				overflowToolbarContent = overflowToolbar.getContent();
+			overflowToolbar = this._getOverflowToolbar();
+			overflowToolbarContent = overflowToolbar.getContent();
 
-				if (overflowToolbar && overflowToolbarContent.length) {
-					closeButtonIndex = overflowToolbarContent.length - 1;
+			if (overflowToolbarContent.length) {
+				closeButtonIndex = overflowToolbarContent.length - 1;
+				closeButton = overflowToolbarContent[closeButtonIndex];
 
-					closeButton = overflowToolbarContent[closeButtonIndex];
+				if (closeButton.getId() !== this.getId() + "-closeButtonX") {
+					closeButton = null;
 				}
-			} else {
-				closeButton = this.getAggregation("_closeButton");
 			}
 
 			if (!closeButton) {
-				if (Device.system.phone) {
-					closeButton = new Button(this.getId() + '-closeButtonOverflow', {
-						text: this.isA("sap.m.NotificationListItem") ? closeText : closeAllText,
-						type: ButtonType.Default,
-						press: function () {
-							this.close();
-						}.bind(this)
-					});
-				} else {
-					closeButton = new Button(this.getId() + '-closeButtonX', {
-						icon: IconPool.getIconURI('decline'),
-						type: ButtonType.Transparent,
-						tooltip: this.isA("sap.m.NotificationListItem") ? closeText : closeAllText,
-						press: function () {
-							this.close();
-						}.bind(this)
-					});
-
-					this.setAggregation("_closeButton", closeButton);
-				}
+				closeButton = this.getAggregation("_closeButton");
 			}
 
 			return closeButton;
 		};
 
-		NotificationListBase.prototype._getToolbarSeparator = function () {
+		NotificationListBase.prototype._createCloseButton = function () {
+			var closeButton,
+				isNotificationListGroup = this.isA("sap.m.NotificationListGroup"),
+				isCollapsed = isNotificationListGroup && this.getCollapsed();
+
+			if (this._isSmallSize() && !isCollapsed) {
+				closeButton = new Button(this.getId() + '-closeButtonX', {
+					text: this.isA("sap.m.NotificationListItem") ? closeText : closeAllText,
+					type: ButtonType.Default,
+					press: function () {
+						this.close();
+					}.bind(this)
+				});
+			} else {
+				closeButton = new Button(this.getId() + '-closeButtonX', {
+					icon: IconPool.getIconURI('decline'),
+					type: ButtonType.Transparent,
+					tooltip: this.isA("sap.m.NotificationListItem") ? closeText : closeAllText,
+					press: function () {
+						this.close();
+					}.bind(this)
+				});
 
-			if (!Device.system.phone) {
-				return null;
+				this.setAggregation("_closeButton", closeButton);
 			}
 
+			return closeButton;
+		};
+
+		NotificationListBase.prototype._getToolbarSeparator = function () {
 			var toolbarSeparator,
 				overflowToolbar = this._getOverflowToolbar(),
 				overflowToolbarContent = overflowToolbar.getContent(),
 				toolbarSeparatorIndex;
 
-			if (overflowToolbar && overflowToolbarContent.length) {
+			if (overflowToolbarContent.length) {
 				toolbarSeparatorIndex = overflowToolbarContent.length - 2;
 				toolbarSeparator = overflowToolbarContent[toolbarSeparatorIndex];
 			}
 
-			return toolbarSeparator;
-		};
-
-		NotificationListBase.prototype.exit = function () {
+			if (toolbarSeparator && toolbarSeparator.isA("sap.m.ToolbarSeparator")) {
+				return toolbarSeparator;
+			}
 
+			return null;
 		};
 
 		NotificationListBase.prototype._hasActionButtons = function () {
@@ -374,14 +379,13 @@ sap.ui.define([
 		};
 
 		NotificationListBase.prototype._shouldRenderCloseButton = function () {
-			return !Device.system.phone && this.getShowCloseButton();
+			return !this._isSmallSize() && this.getShowCloseButton();
 		};
 
 		NotificationListBase.prototype._shouldRenderOverflowToolbar = function () {
-
 			var hasActionButtons = this._hasActionButtons();
 
-			if (Device.system.phone) {
+			if (this._isSmallSize()) {
 				return hasActionButtons || this.getShowCloseButton();
 			}
 
@@ -389,36 +393,108 @@ sap.ui.define([
 		};
 
 		NotificationListBase.prototype.onBeforeRendering = function () {
+			if (this._resizeListenerId) {
+				ResizeHandler.deregister(this._resizeListenerId);
+				this._resizeListenerId = null;
+			}
 
-			var buttons = this.getButtons(),
-				firstButtonOverflow,
-				button;
+			if (!this._sCurrentLayoutClassName) {
+				this._destroyCloseBtnAndSeparator();
+			}
+		};
+
+		NotificationListBase.prototype.onAfterRendering = function() {
+			if (this.getDomRef()) {
+				this._resizeListenerId = ResizeHandler.register(this.getDomRef(),  this._onResize.bind(this));
+			}
 
-			if (Device.system.phone) {
-				this._updatePhoneButtons();
+			this._onResize();
+		};
+
+		NotificationListBase.prototype.exit = function () {
+			if (this._resizeListenerId) {
+				ResizeHandler.deregister(this._resizeListenerId);
+				this._resizeListenerId = null;
+			}
+
+			this._sCurrentLayoutClassName = null;
+		};
+
+		NotificationListBase.prototype._onResize = function () {
+			var oDomRef = this.getDomRef(),
+				oMediaRange,
+				sClassName;
+
+			if (!oDomRef) {
+				return;
+			}
+
+			oMediaRange = Device.media.getCurrentRange(NLI_RANGE_SET, oDomRef.offsetWidth);
+			sClassName = "sapMNLIB-Layout" + oMediaRange.name;
+
+			if (this._sCurrentLayoutClassName === sClassName) {
 				return;
 			}
 
-			firstButtonOverflow = buttons.length > 1 ? OverflowToolbarPriority.AlwaysOverflow : OverflowToolbarPriority.NeverOverflow;
+			if (this._sCurrentLayoutClassName) {
+				this.removeStyleClass(this._sCurrentLayoutClassName);
+			}
+
+			this.addStyleClass(sClassName);
+
+			this._sCurrentLayoutClassName = sClassName;
+
+			this._arrangeButtons();
+		};
+
+		NotificationListBase.prototype._destroyCloseBtnAndSeparator = function () {
+			var closeButton = this._getCloseButton(),
+				toolbarSeparator = this._getToolbarSeparator();
+
+			if (closeButton) {
+				closeButton.destroy();
+			}
+
+			if (toolbarSeparator) {
+				toolbarSeparator.destroy();
+			}
+		};
+
+		NotificationListBase.prototype._arrangeButtons = function () {
+			this._destroyCloseBtnAndSeparator();
+
+			if (this._isSmallSize()) {
+				this._arrangeSSizeButtons();
+			} else {
+				this._arrangeMSizeButtons();
+			}
+		};
+
+		NotificationListBase.prototype._arrangeMSizeButtons = function () {
+			var button,
+				buttons = this.getButtons(),
+				buttonOverflowPriorityType = buttons.length > 1 ? OverflowToolbarPriority.AlwaysOverflow : OverflowToolbarPriority.NeverOverflow;
+
+			this._createCloseButton();
 
 			for (var i = 0; i < buttons.length; i++) {
 				button = buttons[i];
 
 				button.setLayoutData(new OverflowToolbarLayoutData({
-					priority: i === 0 ? firstButtonOverflow : OverflowToolbarPriority.AlwaysOverflow
+					priority: buttonOverflowPriorityType
 				}));
 			}
 		};
 
-		NotificationListBase.prototype._updatePhoneButtons = function () {
-
-			var closeButton = this._getCloseButton(),
+		NotificationListBase.prototype._arrangeSSizeButtons = function () {
+			var overflowToolbar = this._getOverflowToolbar(),
+				closeButton = this._createCloseButton(),
 				isNotificationListGroup = this.isA("sap.m.NotificationListGroup"),
 				buttonText = isNotificationListGroup ? closeAllText : closeText,
 				isCollapsed = isNotificationListGroup && this.getCollapsed(),
 				hasActionButtons = !isCollapsed && this._hasActionButtons(),
 				showCloseButton = this.getShowCloseButton(),
-				toolbarSeparator = this._getToolbarSeparator(),
+				toolbarSeparator = new ToolbarSeparator(),
 				priority;
 
 			this.getButtons().forEach(function (button) {
@@ -435,6 +511,17 @@ sap.ui.define([
 				}));
 			});
 
+			closeButton.setLayoutData(new OverflowToolbarLayoutData({
+				priority: OverflowToolbarPriority.AlwaysOverflow
+			}));
+
+			toolbarSeparator.setLayoutData(new OverflowToolbarLayoutData({
+				priority: OverflowToolbarPriority.AlwaysOverflow
+			}));
+
+			overflowToolbar.addContent(toolbarSeparator);
+			overflowToolbar.addContent(closeButton);
+
 			if (!showCloseButton) {
 				closeButton.setVisible(false);
 				toolbarSeparator.setVisible(false);
@@ -453,7 +540,6 @@ sap.ui.define([
 				}));
 
 				toolbarSeparator.setVisible(true);
-
 			} else {
 				closeButton.setText('');
 				closeButton.setTooltip(buttonText);
@@ -503,5 +589,15 @@ sap.ui.define([
 			return priorityIcon;
 		};
 
+		NotificationListBase.prototype._isSmallSize = function () {
+			return this._sCurrentLayoutClassName === "sapMNLIB-LayoutS";
+		};
+
+		NotificationListBase.prototype._resetButtonsOverflow = function () {
+			// with this line, the actions buttons will be re-arranged
+			// next time when the "_onResize" is called
+			this._sCurrentLayoutClassName = null;
+		};
+
 		return NotificationListBase;
 	});

package/src/sap/m/NotificationListGroup.js

@@ -66,7 +66,7 @@ function(
 	 * @extends sap.m.NotificationListBase
 	 *
 	 * @author SAP SE
-	 * @version 1.100.0
+	 * @version 1.102.1
 	 *
 	 * @constructor
 	 * @public
@@ -320,7 +320,6 @@ function(
 	 * @private
 	 */
 	NotificationListGroup.prototype.onBeforeRendering = function () {
-
 		NotificationListBase.prototype.onBeforeRendering.apply(this, arguments);
 
 		this._getCollapseButton().setVisible(this.getEnableCollapseButtonWhenEmpty() || this._getVisibleItemsCount() > 0);