SAP · LidiyaGeorgieva · Feb 15, 2022 · Jan 12, 2022 · Jan 13, 2022 · Jan 13, 2022
diff --git a/packages/fiori/src/WizardPopover.hbs b/packages/fiori/src/WizardPopover.hbs
@@ -6,7 +6,6 @@
 	@ui5-after-close={{_afterClosePopover}}
 	content-only-on-desktop
 	prevent-focus-restore
-	with-padding
 	_hide-header
 >
 	<ul class="ui5-wizard-responsive-popover-list">

diff --git a/packages/fiori/src/themes/ViewSettingsDialog.css b/packages/fiori/src/themes/ViewSettingsDialog.css
@@ -9,6 +9,7 @@
 
 .ui5-vsd-header > [ui5-bar] {
 	height: 4rem;
+	box-shadow: none;
 }
 
 .ui5-vsd-title {
@@ -54,3 +55,8 @@
 	overflow: hidden;
 }
 
+ui5-dialog::part(content) {
+	margin-left: -1rem;
+	margin-right: -1rem;
+}
+
diff --git a/packages/main/src/BreadcrumbsPopover.hbs b/packages/main/src/BreadcrumbsPopover.hbs
@@ -3,7 +3,6 @@
 	content-only-on-desktop
 	placement-type="Bottom"
 	horizontal-align="Left"
-	with-padding
 	_hide-header
 	@keydown="{{_onkeydown}}">
 	<ui5-list mode="SingleSelect"

diff --git a/packages/main/src/DatePickerPopover.hbs b/packages/main/src/DatePickerPopover.hbs
@@ -6,7 +6,6 @@
 	horizontal-align="Left"
 	?disable-scrolling="{{_isIE}}"
 	hide-arrow
-	with-padding
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"
 	@ui5-after-close="{{onResponsivePopoverAfterClose}}"

diff --git a/packages/main/src/Dialog.hbs b/packages/main/src/Dialog.hbs
@@ -7,7 +7,8 @@
 			id="ui5-popup-header"
 			tabindex="{{_headerTabIndex}}"
 			@keydown="{{_onDragOrResizeKeyDown}}"
-			@mousedown="{{_onDragMouseDown}}">
+			@mousedown="{{_onDragMouseDown}}"
+			part="header">
 			{{#if header.length }}
 				<slot name="header"></slot>
 			{{else}}
@@ -19,7 +20,7 @@
 
 {{#*inline "afterContent"}}
 	{{#if footer.length }}
-		<footer class="ui5-popup-footer-root">
+		<footer class="ui5-popup-footer-root" part="footer">
 			<slot name="footer"></slot>
 		</footer>
 	{{/if}}

diff --git a/packages/main/src/Dialog.js b/packages/main/src/Dialog.js
@@ -269,10 +269,10 @@ class Dialog extends Popup {
 		this._isRTL = this.effectiveDir === "rtl";
 		this.onPhone = isPhone();
 		this.onDesktop = isDesktop();
-		this._detachResizeHandlers();
 	}
 
-	onAfterRendering() {
+	onEnterDOM() {
+		super.onEnterDOM();
 		this._attachResizeHandlers();
 	}
 

diff --git a/packages/main/src/Popover.hbs b/packages/main/src/Popover.hbs
@@ -4,7 +4,7 @@
 	<span class="ui5-popover-arrow" style="{{styles.arrow}}"></span>
 
 	{{#if _displayHeader}}
-		<header class="ui5-popup-header-root" id="ui5-popup-header">
+		<header class="ui5-popup-header-root" id="ui5-popup-header" part="header">
 			{{#if header.length }}
 				<slot name="header"></slot>
 			{{else}}
@@ -17,7 +17,7 @@
 {{#*inline "afterContent"}}
 	{{#if _displayFooter}}
 		{{#if footer.length }}
-			<footer class="ui5-popup-footer-root">
+			<footer class="ui5-popup-footer-root"  part="footer">
 				<slot name="footer"></slot>
 			</footer>
 		{{/if}}

diff --git a/packages/main/src/Popover.js b/packages/main/src/Popover.js
@@ -285,10 +285,12 @@ class Popover extends Popup {
 	}
 
 	onEnterDOM() {
+		super.onEnterDOM();
 		ResizeHandler.register(this, this._handleResize);
 	}
 
 	onExitDOM() {
+		super.onExitDOM();
 		ResizeHandler.deregister(this, this._handleResize);
 	}
 

diff --git a/packages/main/src/Popup.hbs b/packages/main/src/Popup.hbs
@@ -16,7 +16,7 @@
 
 	{{> beforeContent}}
 
-	<div style="{{styles.content}}" class="{{classes.content}}"  @scroll="{{_scroll}}">
+	<div style="{{styles.content}}" class="{{classes.content}}"  @scroll="{{_scroll}}" part="content">
 		<slot></slot>
 	</div>
 

diff --git a/packages/main/src/Popup.js b/packages/main/src/Popup.js
@@ -7,6 +7,8 @@ import { getEffectiveAriaLabelText } from "@ui5/webcomponents-base/dist/util/Ari
 import { hasStyle, createStyle } from "@ui5/webcomponents-base/dist/ManagedStyles.js";
 import { isTabPrevious } from "@ui5/webcomponents-base/dist/Keys.js";
 import { getNextZIndex, getFocusedElement, isFocusedElementWithinNode } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
+import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
+import MediaRange from "@ui5/webcomponents-base/dist/MediaRange.js";
 import PopupTemplate from "./generated/templates/PopupTemplate.lit.js";
 import PopupBlockLayer from "./generated/templates/PopupBlockLayerTemplate.lit.js";
 import { addOpenedPopup, removeOpenedPopup } from "./popup-utils/OpenedPopupsRegistry.js";
@@ -94,6 +96,16 @@ const metadata = {
 			defaultValue: "",
 		},
 
+		/**
+		 * Defines the current media query size.
+		 *
+		 * @type {string}
+		 * @private
+		 */
+		 mediaRange: {
+			type: String,
+		},
+
 		/**
 		 * @private
 		 */
@@ -200,6 +212,12 @@ const bodyScrollingBlockers = new Set();
  * @public
  */
 class Popup extends UI5Element {
+	constructor() {
+		super();
+
+		this._resizeHandler = this._resize.bind(this);
+	}
+
 	static get metadata() {
 		return metadata;
 	}
@@ -228,19 +246,27 @@ class Popup extends UI5Element {
 		if (!this.isOpen()) {
 			this._blockLayerHidden = true;
 		}
+
+		ResizeHandler.register(this, this._resizeHandler);
 	}
 
 	onExitDOM() {
 		if (this.isOpen()) {
 			Popup.unblockBodyScrolling(this);
 			this._removeOpenedPopup();
 		}
+
+		ResizeHandler.deregister(this, this._resizeHandler);
 	}
 
 	get _displayProp() {
 		return "block";
 	}
 
+	_resize() {
+		this.mediaRange = MediaRange.getCurrentRange(MediaRange.RANGESETS.RANGE_4STEPS, this.getDomRef().offsetWidth);
+	}
+
 	/**
 	 * Prevents the user from interacting with the content under the block layer
 	 */

diff --git a/packages/main/src/ResponsivePopover.hbs b/packages/main/src/ResponsivePopover.hbs
@@ -2,7 +2,6 @@
 	<ui5-dialog
 		accessible-name={{accessibleName}}
 		accessible-name-ref={{accessibleNameRef}}
-		?with-padding={{withPadding}}
 		stretch
 		_disable-initial-focus
 		@ui5-before-open="{{_propagateDialogEvent}}"

diff --git a/packages/main/src/ResponsivePopover.js b/packages/main/src/ResponsivePopover.js
@@ -18,15 +18,6 @@ import ResponsivePopoverCss from "./generated/themes/ResponsivePopover.css.js";
 const metadata = {
 	tag: "ui5-responsive-popover",
 	properties: /** @lends sap.ui.webcomponents.main.ResponsivePopover.prototype */ {
-
-		/**
-		 * Defines if padding would be added around the content.
-		 * @private
-		 */
-		withPadding: {
-			type: Boolean,
-		},
-
 		/**
 		 * Defines if only the content would be displayed (without header and footer) in the popover on Desktop.
 		 * By default both the header and footer would be displayed.

diff --git a/packages/main/src/TabContainer.hbs b/packages/main/src/TabContainer.hbs
@@ -65,7 +65,7 @@
 </div>
 
 {{#*inline "contentArea"}}
-	<div class="{{classes.content}}">
+	<div class="{{classes.content}}" part="content">
 		{{#each items}}
 			{{#unless this.isSeparator}}
 				<div

diff --git a/packages/main/src/themes/ColorPalettePopover.css b/packages/main/src/themes/ColorPalettePopover.css
@@ -13,4 +13,8 @@
 	margin: 0.1875rem 1rem;
 	margin-left: 0.5rem;
 	margin-right: 0.5rem;
-}
+}
+
+ui5-responsive-popover::part(content) {
+	padding: 0;
+}
diff --git a/packages/main/src/themes/DatePickerPopover.css b/packages/main/src/themes/DatePickerPopover.css
@@ -3,3 +3,7 @@
 	display: flex;
 	justify-content: center;
 }
+
+ui5-responsive-popover::part(content) {
+    padding: 0;
+}
diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css
@@ -20,10 +20,6 @@
 	border-radius: 0;
 }
 
-.ui5-popup-header-root {
-	background: var(--sapPageHeader_Background);
-}
-
 :host([draggable]) .ui5-popup-header-root,
 :host([draggable]) ::slotted([slot="header"]) {
 	cursor: move;
@@ -67,4 +63,5 @@
 	left: -0.25rem;
 	right: unset;
 	cursor: sw-resize;
-}
+}
+
diff --git a/packages/main/src/themes/MultiComboBox.css b/packages/main/src/themes/MultiComboBox.css
@@ -4,7 +4,6 @@
 
 :host(:not([hidden])) {
 	display: inline-block;
-	--_ui5_popup_content_padding: 0;
 }
 
 .ui5-multi-combobox-root {

diff --git a/packages/main/src/themes/Popover.css b/packages/main/src/themes/Popover.css
@@ -99,4 +99,4 @@
 
 .ui5-popover-root {
 	min-width: 6.25rem;
-}
+}
diff --git a/packages/main/src/themes/PopupsCommon.css b/packages/main/src/themes/PopupsCommon.css
@@ -57,7 +57,6 @@
     overflow: auto;
 
     /* Consider how to make this top level */
-    padding: var(--_ui5_popup_content_padding);
     box-sizing: border-box;
 }
 
@@ -85,3 +84,49 @@
 :host([disable-scrolling]) .ui5-popup-content {
     overflow: hidden;
 }
+
+/*** Responsive paddings for the content***/
+:host([media-range="S"]) .ui5-popup-content {
+	padding: 1rem var(--_ui5_popup_content_padding_s);
+}
+
+:host([media-range="M"]) .ui5-popup-content,
+:host([media-range="L"]) .ui5-popup-content {
+	padding: 1rem var(--_ui5_popup_content_padding_m_l);
+}
+
+:host([media-range="XL"]) .ui5-popup-content {
+	padding: 1rem var(--_ui5_popup_content_padding_xl);
+}
+
+.ui5-popup-footer-root {
+	min-height: 2.5rem;
+	justify-content: end;
+}
+
+.ui5-popup-header-root {
+	background: var(--sapPageHeader_Background);
+	min-height: 2.5rem;
+	justify-content: start;
+}
+
+/*** Responsive paddings for the Header and Footer ***/
+:host([media-range="S"]) .ui5-popup-header-root,
+:host([media-range="S"]) .ui5-popup-footer-root {
+	padding-left: var(--_ui5_popup_header_footer_padding_s);
+	padding-right: var(--_ui5_popup_header_footer_padding_s);
+}
+
+:host([media-range="M"]) .ui5-popup-header-root,
+:host([media-range="L"]) .ui5-popup-header-root,
+:host([media-range="M"]) .ui5-popup-footer-root,
+:host([media-range="L"]) .ui5-popup-footer-root {
+	padding-left: var(--_ui5_popup_header_footer_padding_m_l);
+	padding-right: var(--_ui5_popup_header_footer_padding_m_l);
+}
+
+:host([media-range="XL"]) .ui5-popup-header-root,
+:host([media-range="XL"]) .ui5-popup-footer-root {
+	padding-left: var(--_ui5_popup_header_footer_padding_xl);
+	padding-right: var(--_ui5_popup_header_footer_padding_xl);
+}
diff --git a/packages/main/src/themes/ResponsivePopover.css b/packages/main/src/themes/ResponsivePopover.css
@@ -4,10 +4,6 @@
 	min-height: 2rem;
 }
 
-:host(:not([with-padding])) {
-	--_ui5_popup_content_padding: 0;
-}
-
 :host([opened]) {
 	display: inline-block;
 }

diff --git a/packages/main/src/themes/ResponsivePopoverCommon.css b/packages/main/src/themes/ResponsivePopoverCommon.css
@@ -205,3 +205,5 @@
 	position: absolute;
 	right: 1rem;
 }
+
+
diff --git a/packages/main/src/themes/SelectPopover.css b/packages/main/src/themes/SelectPopover.css
@@ -7,4 +7,8 @@
 .ui5-select-popover [ui5-li]:last-child::part(native-li)::after {
 	border-bottom-left-radius: var(--_ui5_select_option_focus_border_radius);
 	border-bottom-right-radius: var(--_ui5_select_option_focus_border_radius);
-}
+}
+
+.ui5-select-popover::part(content) {
+	padding: 0;
+}
diff --git a/packages/main/src/themes/Suggestions.css b/packages/main/src/themes/Suggestions.css
@@ -11,4 +11,8 @@
 .ui5-tokenizer-list [ui5-li][focused]:last-child::part(native-li)::after {
 	border-bottom-left-radius: var(--_ui5_suggestions_item_focus_border_radius);
 	border-bottom-right-radius: var(--_ui5_suggestions_item_focus_border_radius);
-}
+}
+
+.ui5-suggestions-popover::part(content) {
+	padding: 0;
+}
diff --git a/packages/main/src/themes/TabInOverflow.css b/packages/main/src/themes/TabInOverflow.css
@@ -58,4 +58,8 @@
 .ui5-tab-container-responsive-popover [ui5-li-custom][focused]:last-child::part(native-li)::after {
 	border-bottom-left-radius: var(--_ui5_tc_overflowItem_focus_border);
 	border-bottom-right-radius: var(--_ui5_tc_overflowItem_focus_border);
-}
+}
+
+.ui5-tab-container-responsive-popover::part(content) {
+	padding: 0;
+}
diff --git a/packages/main/src/themes/TimePickerPopover.css b/packages/main/src/themes/TimePickerPopover.css
@@ -9,3 +9,7 @@
 	margin: 1%;
 	min-width: 20%;
 }
+
+.ui5-time-picker-popover::part(content) {
+	padding: 0;
+}
diff --git a/packages/main/src/themes/ValueStateMessage.css b/packages/main/src/themes/ValueStateMessage.css
@@ -74,3 +74,16 @@
 	outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor);
 	border-radius: var(--_ui5_value_state_message_focus_border_radius);
 }
+
+.ui5-valuestatemessage-popover::part(header),
+.ui5-valuestatemessage-popover::part(content) {
+	padding: 0; 
+}
+
+.ui5-valuestatemessage-popover::part(header) {
+	min-height: 0;
+}
+
+.ui5-valuestatemessage-popover::part(footer) {
+	min-height: 0;
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -99,4 +99,4 @@ @@
     .ui5-popover-root {
     	min-width: 6.25rem;
-    }
+    }
Original file line number	Diff line number	Diff line change
Expand Up		@@ -205,3 +205,5 @@
		position: absolute;
		right: 1rem;
		}