fix: correct responsive padding in some consumers of popups (#4926)

georgimkv · web-flow · commit b501153d6ba7 · 2022-03-28T14:50:43.000+03:00
Affected components: NotificationListItem NotificationListGroupItem SideNavigation Wizard Consumers of ResponsivePopover - footer padding is corrected Added left/center aligned titles to the Popover and Dialogs for the SAP Quartz (centered in Belize) themes when the property headerText is provided. Improved some samples. Part of #4870
diff --git a/packages/fiori/src/NotificationListItemBase.js b/packages/fiori/src/NotificationListItemBase.js
@@ -12,10 +12,10 @@ import "@ui5/webcomponents-icons/dist/message-warning.js";
 import "@ui5/webcomponents-icons/dist/overflow.js";
 
 // Templates
-import NotifactionOverflowActionsPopoverTemplate from "./generated/templates/NotifactionOverflowActionsPopoverTemplate.lit.js";
+import NotificationOverflowActionsPopoverTemplate from "./generated/templates/NotificationOverflowActionsPopoverTemplate.lit.js";
 
 // Styles
-import NotifactionOverflowActionsPopoverCss from "./generated/themes/NotifactionOverflowActionsPopover.css.js";
+import NotificationOverflowActionsPopoverCss from "./generated/themes/NotificationOverflowActionsPopover.css.js";
 
 /**
  * @public
@@ -145,11 +145,11 @@ class NotificationListItemBase extends ListItemBase {
 	}
 
 	static get staticAreaTemplate() {
-		return NotifactionOverflowActionsPopoverTemplate;
+		return NotificationOverflowActionsPopoverTemplate;
 	}
 
 	static get staticAreaStyles() {
-		return NotifactionOverflowActionsPopoverCss;
+		return NotificationOverflowActionsPopoverCss;
 	}
 
 	static priorityIconsMappings() {
diff --git a/packages/fiori/src/NotificationOverflowActionsPopover.hbs b/packages/fiori/src/NotificationOverflowActionsPopover.hbs
diff --git a/packages/fiori/src/themes/NotifactionOverflowActionsPopover.css b/packages/fiori/src/themes/NotifactionOverflowActionsPopover.css
diff --git a/packages/fiori/src/themes/NotificationOverflowActionsPopover.css b/packages/fiori/src/themes/NotificationOverflowActionsPopover.css
@@ -0,0 +1,8 @@
+.ui5-notification-overflow-list {
+	display: flex;
+	flex-direction: column;
+}
+
+.ui5-notification-overflow-popover::part(content) {
+	padding: var(--_ui5-notification-overflow-popover-padding);
+}
diff --git a/packages/fiori/src/themes/SideNavigationPopover.css b/packages/fiori/src/themes/SideNavigationPopover.css
@@ -7,3 +7,7 @@
 	border-bottom-left-radius: var(--_ui5_side_navigation_overflow_border_radius);
 	border-bottom-right-radius: var(--_ui5_side_navigation_overflow_border_radius);
 }
+
+.ui5-side-navigation-popover::part(content) {
+	padding: 0;
+}
diff --git a/packages/fiori/src/themes/WizardPopover.css b/packages/fiori/src/themes/WizardPopover.css
@@ -9,6 +9,13 @@
 	padding: 0;
 }
 
+.ui5-responsive-popover-footer {
+	display: flex;
+	justify-content: flex-end;
+	padding: 0.25rem 0;
+	width: 100%;
+}
+
 .ui5-wizard-popover .ui5-wizard-responsive-popover-list [ui5-button] {
 	width: 200px;
 }
diff --git a/packages/fiori/test/pages/NotificationListGroupItem.html b/packages/fiori/test/pages/NotificationListGroupItem.html
@@ -10,7 +10,6 @@
 	<script src="../../resources/bundle.esm.js" type="module"></script>
 	<script nomodule src="../../resources/bundle.es5.js"></script>
 
-	<script>// delete Document.prototype.adoptedStyleSheets;</script>
 <link rel="stylesheet" type="text/css" href="styles/NotificationListGroupItem.css">
 </head>
 
@@ -19,36 +18,6 @@
 	<ui5-shellbar id="shellbar" primary-title="Product Title" show-notifications>
 	</ui5-shellbar>
 
-	<br/><br/>
-
-	<h3>Properties</h3>
-	<ul>
-		<li>titleText</li>
-		<li>priority (default: "None")</li>
-		<li>collapsed (default: "false")</li>
-		<li>show-close (default: "false")</li>
-		<li>show-counter (default: "false")</li>
-		<li>read (default: "false")</li>
-	</ul>
-
-	<h3>Slots</h3>
-	<ul>
-		<li>items (default)</li>
-		<li>actions</li>
-	</ul>
-
-	<h3>Events</h3>
-	<ul>
-		<li>close</li>
-		<li>toggle</li>
-	</ul>
-
-	<h3>Events on ui5-list level</h3>
-	<ul>
-		<li>itemClose</li>
-		<li>itemToggle</li>
-	</ul>
-
 	<ui5-list id="notificationList" header-text="Notifications grouped">
 		<ui5-li-notification-group
 			show-close
@@ -331,8 +300,6 @@ <h3>Events on ui5-list level</h3>
 			}, 2000);
 		});
 
-
-
 		shellbar.addEventListener("ui5-notifications-click", function(event) {
 			event.preventDefault();
 			notificationsPopover.showAt(event.detail.targetRef);
diff --git a/packages/fiori/test/pages/NotificationListItem.html b/packages/fiori/test/pages/NotificationListItem.html
@@ -10,8 +10,6 @@
 	<script src="../../resources/bundle.esm.js" type="module"></script>
 	<script nomodule src="../../resources/bundle.es5.js"></script>
 
-	<script>// delete Document.prototype.adoptedStyleSheets;</script>
-
 	<link rel="stylesheet" type="text/css" href="styles/NotificationListItem.css">
 </head>
 
@@ -20,37 +18,6 @@
 	<ui5-shellbar id="shellbar" primary-title="Product Title" show-notifications>
 	</ui5-shellbar>
 
-	<br/><br/>
-
-	<h3>Properties</h3>
-	<ul>
-		<li>titleText</li>
-		<li>wrappingType (default: "None")</li>
-		<li>priority (default: "None")</li>
-		<li>read (default: "false")</li>
-		<li>show-close (default: "false")</li>
-	</ul>
-
-	<h3>Slots</h3>
-	<ul>
-		<li>default (description)</li>
-		<li>avatar</li>
-		<li>actions</li>
-		<li>footnotes</li>
-	</ul>
-
-	<h3>Events</h3>
-	<ul>
-		<li>click</li>
-		<li>close</li>
-	</ul>
-
-	<h3>Events on ui5-list level</h3>
-	<ul>
-		<li>itemClick</li>
-		<li>itemClose</li>
-	</ul>
-
 	<ui5-list id="notificationList" header-text="Notifications titleText and content 'truncates'">
 
 		<ui5-li-notification
diff --git a/packages/main/src/Popover.hbs b/packages/main/src/Popover.hbs
@@ -17,7 +17,7 @@
 {{#*inline "afterContent"}}
 	{{#if _displayFooter}}
 		{{#if footer.length }}
-			<footer class="ui5-popup-footer-root"  part="footer">
+			<footer class="ui5-popup-footer-root" part="footer">
 				<slot name="footer"></slot>
 			</footer>
 		{{/if}}
diff --git a/packages/main/src/themes/PopupsCommon.css b/packages/main/src/themes/PopupsCommon.css
@@ -64,9 +64,7 @@
     box-sizing: border-box;
 }
 
-
 :host([header-text]) .ui5-popup-header-text {
-    padding: 0 0.25rem;
     text-align: center;
     min-height: var(--_ui5_popup_default_header_height);
     max-height: var(--_ui5_popup_default_header_height);
@@ -78,6 +76,10 @@
     display: inline-block;
 }
 
+:host([header-text]) .ui5-popup-header-root {
+	justify-content: var(--_ui5_popup_header_prop_header_text_alignment);
+}
+
 :host(:not([header-text])) .ui5-popup-header-text {
     display: none;
 }
@@ -100,13 +102,8 @@
 	padding: 1rem var(--_ui5_popup_content_padding_xl);
 }
 
-.ui5-popup-footer-root {
-	justify-content: end;
-}
-
 .ui5-popup-header-root {
 	background: var(--sapPageHeader_Background);
-	justify-content: start;
 }
 
 /*** Responsive paddings for the Header and Footer ***/
diff --git a/packages/main/src/themes/ResponsivePopoverCommon.css b/packages/main/src/themes/ResponsivePopoverCommon.css
@@ -197,7 +197,7 @@
 .ui5-responsive-popover-footer {
 	display: flex;
 	justify-content: flex-end;
-	padding: 0.25rem;
+	padding: 0.25rem 0;
 	width: 100%;
 }
 
diff --git a/packages/main/src/themes/base/PopupsCommon-parameters.css b/packages/main/src/themes/base/PopupsCommon-parameters.css
@@ -7,4 +7,5 @@
 	--_ui5_popup_header_footer_padding_xl: 3rem;
 	--_ui5_popup_viewport_margin: 10px;
 	--_ui5_popup_header_footer_font_weight: 400;
+	--_ui5_popup_header_prop_header_text_alignment: flex-start;
 }
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -53,6 +53,9 @@
 	/* Popup subclasses */
 	--_ui5_popup_default_header_height: 2.75rem;
 
+	/* Notifications */
+	--_ui5-notification-overflow-popover-padding: 0.25rem 0.5rem;
+
 	--_ui5_year_picker_item_height: 3rem;
 	--_ui5_tokenizer_root_padding: 0.1875rem;
 	--_ui5_token_height: 1.625rem;
@@ -190,6 +193,9 @@
 	--_ui5_input_icon_padding: .25rem .5rem;
 	--_ui5_input_value_state_icon_padding: .1875rem .5rem;
 
+	/* Notifications */
+	--_ui5-notification-overflow-popover-padding: 0.25rem 0.5rem;
+
 	/* Popup subclasses */
 	--_ui5_popup_default_header_height: 2.5rem;
 
diff --git a/packages/main/src/themes/sap_belize/PopupsCommon-parameters.css b/packages/main/src/themes/sap_belize/PopupsCommon-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/PopupsCommon-parameters.css";
+
+:root {
+	--_ui5_popup_header_prop_header_text_alignment: center;
+}
diff --git a/packages/main/src/themes/sap_belize/parameters-bundle.css b/packages/main/src/themes/sap_belize/parameters-bundle.css
@@ -22,7 +22,7 @@
 @import "../base/MessageStrip-parameters.css";
 @import "../base/MonthPicker-parameters.css";
 @import "../base/Panel-parameters.css";
-@import "../base/PopupsCommon-parameters.css";
+@import "./PopupsCommon-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "../base/RadioButton-parameters.css";
 @import "../base/SegmentedButtton-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcb/PopupsCommon-parameters.css b/packages/main/src/themes/sap_belize_hcb/PopupsCommon-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/PopupsCommon-parameters.css";
+
+:root {
+	--_ui5_popup_header_prop_header_text_alignment: center;
+}
diff --git a/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcb/parameters-bundle.css
@@ -22,7 +22,7 @@
 @import "./MonthPicker-parameters.css";
 @import "./MessageStrip-parameters.css";
 @import "./Panel-parameters.css";
-@import "../base/PopupsCommon-parameters.css";
+@import "./PopupsCommon-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "./RadioButton-parameters.css";
 @import "../base/SegmentedButtton-parameters.css";
diff --git a/packages/main/src/themes/sap_belize_hcw/PopupsCommon-parameters.css b/packages/main/src/themes/sap_belize_hcw/PopupsCommon-parameters.css
@@ -0,0 +1,5 @@
+@import "../base/PopupsCommon-parameters.css";
+
+:root {
+	--_ui5_popup_header_prop_header_text_alignment: center;
+}
diff --git a/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css b/packages/main/src/themes/sap_belize_hcw/parameters-bundle.css
@@ -22,7 +22,7 @@
 @import "./MonthPicker-parameters.css";
 @import "./MessageStrip-parameters.css";
 @import "./Panel-parameters.css";
-@import "../base/PopupsCommon-parameters.css";
+@import "./PopupsCommon-parameters.css";
 @import "./ProgressIndicator-parameters.css";
 @import "./RadioButton-parameters.css";
 @import "../base/SegmentedButtton-parameters.css";
diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html
@@ -125,7 +125,7 @@
 		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
 			That´s OpenUI5.</p>
 
-		<div slot="footer" class="dialog2auto">
+		<div slot="footer" class="dialogFooter">
 			<ui5-button design="Emphasized">OK</ui5-button>
 		</div>
 	</ui5-dialog>
@@ -230,17 +230,12 @@
 		<ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
 		</ui5-textarea>
 
-		<div slot="footer" class="dialog4auto">
-			<div class="dialog5auto"></div>
+		<div slot="footer" class="dialogFooter">
 			<ui5-button id="btnCloseDialog">Close</ui5-button>
 		</div>
 	</ui5-dialog>
 
-	<ui5-dialog id="dialogNoPaddings" stretch class="noContentPaddingsDialog">
-		<div slot="header">
-			<ui5-title level="H2">No content paddings</ui5-title>
-		</div>
-
+	<ui5-dialog id="dialogNoPaddings" header-text="No content paddings" stretch class="noContentPaddingsDialog">
 		<div class="dialog3auto">
 			<ui5-title level="H3">Hello World!</ui5-title>
 		</div>
@@ -290,8 +285,7 @@
 		<ui5-textarea placeholder="Type some text" max-length="2" show-exceeded-text>
 		</ui5-textarea>
 
-		<div slot="footer" class="dialog4auto">
-			<div class="dialog5auto"></div>
+		<div slot="footer" class="dialogFooter">
 			<ui5-button id="btnCloseDialogNoPaddings">Close</ui5-button>
 		</div>
 
@@ -301,7 +295,7 @@
 	<ui5-dialog id="prevent-dialog" header-text="Message dialog">
 		<p>Prevent closing the dialog.</p>
 
-		<div slot="footer" class="dialog2auto">
+		<div slot="footer" class="dialogFooter">
 			<ui5-button design="Emphasized">OK</ui5-button>
 		</div>
 	</ui5-dialog>
@@ -329,7 +323,7 @@
 		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
 			That´s OpenUI5.</p>
 
-		<div slot="footer" class="dialog2auto">
+		<div slot="footer" class="dialogFooter">
 			<ui5-button design="Emphasized">OK</ui5-button>
 		</div>
 	</ui5-dialog>
@@ -349,7 +343,7 @@
 		<p>Build enterprise-ready web applications, responsive to all devices and running on the browser of your choice.
 			That´s OpenUI5.</p>
 
-		<div slot="footer" class="dialog2auto">
+		<div slot="footer" class="dialogFooter">
 			<ui5-button design="Emphasized">OK</ui5-button>
 		</div>
 	</ui5-dialog>
@@ -360,7 +354,7 @@
 		<p>Move this dialog around the screen by dragging it by its header or use the arrow keys.</p>
 		<p>This feature is available only on Desktop.</p>
 
-		<div slot="footer" class="dialog2auto">
+		<div slot="footer" class="dialogFooter">
 			<ui5-button id="draggable-close" design="Emphasized">OK</ui5-button>
 		</div>
 	</ui5-dialog>
@@ -369,7 +363,7 @@
 		<p>Resize this dialog by dragging it by its resize handle or use shift+arrow keys.</p>
 		<p>This feature is available only on Desktop.</p>
 
-		<div slot="footer" class="dialog2auto">
+		<div slot="footer" class="dialogFooter">
 			<ui5-button id="resizable-close" design="Emphasized">OK</ui5-button>
 		</div>
 	</ui5-dialog>
@@ -379,7 +373,7 @@
 		<p>Resize this dialog by dragging it by its resize handle or use shift+arrow keys.</p>
 		<p>This feature is available only on Desktop.</p>
 
-		<div slot="footer" class="dialog2auto">
+		<div slot="footer" class="dialogFooter">
 			<ui5-button id="draggable-and-resizable-close" design="Emphasized">Close</ui5-button>
 		</div>
 	</ui5-dialog>
diff --git a/packages/main/test/pages/Popover.html b/packages/main/test/pages/Popover.html
@@ -54,7 +54,7 @@
 	<ui5-button id="btn">Click me !</ui5-button>
 
 
-	<ui5-popover header-text="My Heading" id="pop" class="popover6auto" placement-type="Top" accessible-name="This popover is important">
+	<ui5-popover id="pop" class="popover6auto" placement-type="Top" accessible-name="This popover is important">
 		<div slot="header">
 			<ui5-button id="first-focusable">I am in the header</ui5-button>
 		</div>
diff --git a/packages/main/test/pages/styles/Dialog.css b/packages/main/test/pages/styles/Dialog.css
diff --git a/packages/main/test/pages/styles/ResponsivePopover.css b/packages/main/test/pages/styles/ResponsivePopover.css
diff --git a/packages/playground/assets/css/api.css b/packages/playground/assets/css/api.css

Original file line number	Diff line number	Diff line change
`@@ -7,3 +7,7 @@`
`7`	`7`	`border-bottom-left-radius: var(--_ui5_side_navigation_overflow_border_radius);`
`8`	`8`	`border-bottom-right-radius: var(--_ui5_side_navigation_overflow_border_radius);`
`9`	`9`	`}`
	`10`	`+`
	`11`	`+.ui5-side-navigation-popover::part(content) {`
	`12`	`+ padding: 0;`
	`13`	`+}`
Original file line number	Diff line number	Diff line change
`@@ -9,6 +9,13 @@`
`9`	`9`	`padding: 0;`
`10`	`10`	`}`
`11`	`11`
	`12`	`+.ui5-responsive-popover-footer {`
	`13`	`+ display: flex;`
	`14`	`+ justify-content: flex-end;`
	`15`	`+ padding: 0.25rem 0;`
	`16`	`+ width: 100%;`
	`17`	`+}`
	`18`	`+`
`12`	`19`	`.ui5-wizard-popover .ui5-wizard-responsive-popover-list [ui5-button] {`
`13`	`20`	`width: 200px;`
`14`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -64,9 +64,7 @@`
`64`	`64`	`box-sizing: border-box;`
`65`	`65`	`}`
`66`	`66`
`67`		`-`
`68`	`67`	`:host([header-text]) .ui5-popup-header-text {`
`69`		`- padding: 0 0.25rem;`
`70`	`68`	`text-align: center;`
`71`	`69`	`min-height: var(--_ui5_popup_default_header_height);`
`72`	`70`	`max-height: var(--_ui5_popup_default_header_height);`
`@@ -78,6 +76,10 @@`
`78`	`76`	`display: inline-block;`
`79`	`77`	`}`
`80`	`78`
	`79`	`+:host([header-text]) .ui5-popup-header-root {`
	`80`	`+ justify-content: var(--_ui5_popup_header_prop_header_text_alignment);`
	`81`	`+}`
	`82`	`+`
`81`	`83`	`:host(:not([header-text])) .ui5-popup-header-text {`
`82`	`84`	`display: none;`
`83`	`85`	`}`
`@@ -100,13 +102,8 @@`
`100`	`102`	`padding: 1rem var(--_ui5_popup_content_padding_xl);`
`101`	`103`	`}`
`102`	`104`
`103`		`-.ui5-popup-footer-root {`
`104`		`- justify-content: end;`
`105`		`-}`
`106`		`-`
`107`	`105`	`.ui5-popup-header-root {`
`108`	`106`	`background: var(--sapPageHeader_Background);`
`109`		`- justify-content: start;`
`110`	`107`	`}`
`111`	`108`
`112`	`109`	`/* Responsive paddings for the Header and Footer */`