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

Author: LidiyaGeorgieva

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">

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 */

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;
+}
+

packages/fiori/src/themes/WizardPopover.css

@@ -15,4 +15,4 @@
 
 .ui5-wizard-dialog .ui5-wizard-responsive-popover-list [ui5-button] {
 	width: 100%;
-}
+}

packages/fiori/test/pages/styles/Wizard_test.css

@@ -56,3 +56,7 @@ html, body {
     background-color: red;
     display: none;
 }
+
+#dialog::part(content) {
+	padding: 0;
+}

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"

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}}"

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}}"

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}}

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;
 		}