feat(ui5-popup): аdd default responsive paddings (#4567)

* feat(ui5-popup): Add default responsive paddings Default responsive paddings for the content are added for all popups. In the controls that they are not needed they are removed. In addition for Dialog's Header and Footer are added responsive paddings. Sample with way to remove the paddings by the user added in the test pages. Example with removed TabContainer's content paddings added. Fixes: #4402 * "part" atribute added to the Header and Footer of the Dialog * ViewSettingsDialog unwanted shadow removed Header styles of Dialog moved to PopupsCommon * ViewSettingsDialog.css - declaration moved * ValueStateMessage min height fixed * in CSS: some selectors changed from tag to attribute * - SuggestionPopover paddings on mobile fixed with experimental attribute "exportparts" - Test page for Popups fixed - ResizeHandlers reworked for Dialog and Popover - Min height removed for Header and Footer removed as it causes issues * Resizable Dialog positioning when resize fixed. * ViewSettingsDialog, Dialog and Suggestion popover styles adjusted * "no-padding" attribute removed since is not needed anymore * hash is edited * ResponsivePopover header fixed * Typo fixed * MultiInput's tokenizer's dialog paddings removed from header and footer (for mobile and desktop) * ColorPalettePopover and BarcodeScanner paddings in header and footer adjusted * - TokenizerPopover.css file created - Some styles and tests adjusted
SAP · Feb 15, 2022 · ddc1e39 · ddc1e39
1 parent cf45552
commit ddc1e39
Show file tree

Hide file tree

Showing 53 changed files with 402 additions and 92 deletions.
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/BarcodeScannerDialog.css b/packages/fiori/src/themes/BarcodeScannerDialog.css
@@ -14,11 +14,6 @@
     display: flex;
     justify-content: flex-end;
     width: 100%;
-    padding: 0 0.5rem 0 0;
-}
-
-[dir="rtl"] .ui5-barcode-scanner-dialog-footer {
-    padding: 0 0 0 0.5rem;
 }
 
 /* busy indicator */

diff --git a/packages/fiori/src/themes/ViewSettingsDialog.css b/packages/fiori/src/themes/ViewSettingsDialog.css
@@ -9,6 +9,11 @@
 
 .ui5-vsd-header > [ui5-bar] {
 	height: 4rem;
+	box-shadow: none;
+}
+
+.ui5-vsd-content {
+	margin: 0 -1rem;
 }
 
 .ui5-vsd-title {
@@ -54,3 +59,8 @@
 	overflow: hidden;
 }
 
+[ui5-dialog]::part(content) {
+	padding-top: 0;
+	padding-bottom: 0;
+}
+
diff --git a/packages/fiori/src/themes/WizardPopover.css b/packages/fiori/src/themes/WizardPopover.css
@@ -15,4 +15,4 @@
 
 .ui5-wizard-dialog .ui5-wizard-responsive-popover-list [ui5-button] {
 	width: 100%;
-}
+}
diff --git a/packages/fiori/test/pages/styles/Wizard_test.css b/packages/fiori/test/pages/styles/Wizard_test.css
@@ -56,3 +56,7 @@ html, body {
     background-color: red;
     display: none;
 }
+
+#dialog::part(content) {
+	padding: 0;
+}
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/ComboBoxPopover.hbs b/packages/main/src/ComboBoxPopover.hbs
@@ -102,7 +102,6 @@
 		skip-registry-update
 		_disable-initial-focus
 		prevent-focus-restore
-		no-padding
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		horizontal-align="{{_valueStatePopoverHorizontalAlign}}"

diff --git a/packages/main/src/DatePickerPopover.hbs b/packages/main/src/DatePickerPopover.hbs
@@ -5,7 +5,6 @@
 	horizontal-align="Left"
 	?disable-scrolling="{{_isIE}}"
 	hide-arrow
-	no-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();
 	}
 
@@ -281,15 +281,26 @@ class Dialog extends Popup {
 		this._detachResizeHandlers();
 	}
 
+	/**
+	 * @override
+	 */
+	_resize() {
+		super._resize();
+
+		if (this._resizeHandlersAttached) {
+			this._center();
+		}
+	}
+
 	_attachResizeHandlers() {
-		ResizeHandler.register(this, this._screenResizeHandler);
-		ResizeHandler.register(document.body, this._screenResizeHandler);
-		this._resizeHandlersAttached = true;
+		if (!this._resizeHandlersAttached) {
+			ResizeHandler.register(document.body, this._screenResizeHandler);
+			this._resizeHandlersAttached = true;
+		}
 	}
 
 	_detachResizeHandlers() {
 		if (this._resizeHandlersAttached) {
-			ResizeHandler.deregister(this, this._screenResizeHandler);
 			ResizeHandler.deregister(document.body, this._screenResizeHandler);
 			this._resizeHandlersAttached = false;
 		}

diff --git a/packages/main/src/FileUploaderPopover.hbs b/packages/main/src/FileUploaderPopover.hbs
@@ -2,7 +2,6 @@
 	skip-registry-update
 	_disable-initial-focus
 	prevent-focus-restore
-	no-padding
 	hide-arrow
 	class="ui5-valuestatemessage-popover"
 	placement-type="Bottom"

diff --git a/packages/main/src/InputPopover.hbs b/packages/main/src/InputPopover.hbs
@@ -69,7 +69,6 @@
 			skip-registry-update
 			_disable-initial-focus
 			prevent-focus-restore
-			no-padding
 			hide-arrow
 			class="ui5-valuestatemessage-popover"
 			placement-type="Bottom"

diff --git a/packages/main/src/MultiComboBoxPopover.hbs b/packages/main/src/MultiComboBoxPopover.hbs
@@ -96,7 +96,6 @@
 		skip-registry-update
 		_disable-initial-focus
 		prevent-focus-restore
-		no-padding
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"

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
@@ -1,6 +1,5 @@
 import Integer from "@ui5/webcomponents-base/dist/types/Integer.js";
 import { isIOS } from "@ui5/webcomponents-base/dist/Device.js";
-import ResizeHandler from "@ui5/webcomponents-base/dist/delegate/ResizeHandler.js";
 import { getClosedPopupParent } from "@ui5/webcomponents-base/dist/util/PopupUtils.js";
 import clamp from "@ui5/webcomponents-base/dist/util/clamp.js";
 import Popup from "./Popup.js";
@@ -264,8 +263,6 @@ const metadata = {
 class Popover extends Popup {
 	constructor() {
 		super();
-
-		this._handleResize = this.handleResize.bind(this);
 	}
 
 	static get metadata() {
@@ -288,14 +285,6 @@ class Popover extends Popup {
 		return 6; // px
 	}
 
-	onEnterDOM() {
-		ResizeHandler.register(this, this._handleResize);
-	}
-
-	onExitDOM() {
-		ResizeHandler.deregister(this, this._handleResize);
-	}
-
 	isOpenerClicked(event) {
 		const target = event.target;
 		return target === this._opener || (target.getFocusDomRef && target.getFocusDomRef() === this._opener) || event.composedPath().indexOf(this._opener) > -1;
@@ -365,7 +354,12 @@ class Popover extends Popup {
 			&& openerRect.right === 0;
 	}
 
-	handleResize() {
+	/**
+	 * @override
+	 */
+	_resize() {
+		super._resize();
+
 		if (this.opened) {
 			this.reposition();
 		}

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,20 +2,20 @@
 	<ui5-dialog
 		accessible-name={{accessibleName}}
 		accessible-name-ref={{accessibleNameRef}}
-		?with-padding={{withPadding}}
 		stretch
 		_disable-initial-focus
 		@ui5-before-open="{{_propagateDialogEvent}}"
 		@ui5-after-open="{{_afterDialogOpen}}"
 		@ui5-before-close="{{_propagateDialogEvent}}"
 		@ui5-after-close="{{_afterDialogClose}}"
+		exportparts="content, header, footer"
 	>
 		{{!-- forward slot header to inner dialog slot header --}}
 		{{#unless _hideHeader}}
 			{{#if header.length}}
 				<slot slot="header" name="header"></slot>
 			{{else}}
-				<header class="{{classes.header}}">
+				<div class="{{classes.header}}" slot="header">
 					{{#if headerText }}
 						<ui5-title level="H2" class="ui5-popup-header-text ui5-responsive-popover-header-text">{{headerText}}</ui5-title>
 					{{/if}}
@@ -28,7 +28,7 @@
 						>
 						</ui5-button>
 					{{/unless}}
-				</header>
+				</div>
 			{{/if}}
 		{{/unless}}
 

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/SelectPopover.hbs b/packages/main/src/SelectPopover.hbs
@@ -66,7 +66,6 @@
 		skip-registry-update
 		_disable-initial-focus
 		prevent-focus-restore
-		no-padding
 		hide-arrow
 		class="ui5-valuestatemessage-popover"
 		placement-type="Bottom"

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/TextAreaPopover.hbs b/packages/main/src/TextAreaPopover.hbs
@@ -2,7 +2,6 @@
 	<ui5-popover
 		skip-registry-update
 		prevent-focus-restore
-		no-padding
 		hide-arrow
 		_disable-initial-focus
 		class="ui5-valuestatemessage-popover"

diff --git a/packages/main/src/Tokenizer.js b/packages/main/src/Tokenizer.js
@@ -34,6 +34,7 @@ import {
 
 // Styles
 import styles from "./generated/themes/Tokenizer.css.js";
+import TokenizerPopoverCss from "./generated/themes/TokenizerPopover.css.js";
 import ResponsivePopoverCommonCss from "./generated/themes/ResponsivePopoverCommon.css.js";
 import ValueStateMessageCss from "./generated/themes/ValueStateMessage.css.js";
 
@@ -138,7 +139,7 @@ class Tokenizer extends UI5Element {
 	}
 
 	static get staticAreaStyles() {
-		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss];
+		return [ResponsivePopoverCommonCss, ValueStateMessageCss, SuggestionsCss, TokenizerPopoverCss];
 	}
 
 	static get staticAreaTemplate() {
-Original file line number
+Diff line change
@@ Expand Up / @@ -15,4 +15,4 @@ @@
     .ui5-wizard-dialog .ui5-wizard-responsive-popover-list [ui5-button] {
     	width: 100%;
-    }
+    }