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

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
SAP · Mar 28, 2022 · b501153 · b501153
1 parent a85fd1e
commit b501153
Show file tree

Hide file tree

Showing 24 changed files with 94 additions and 140 deletions.
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/...src/NotifactionOverflowActionsPopover.hbs → ...rc/NotificationOverflowActionsPopover.hbs b/...src/NotifactionOverflowActionsPopover.hbs → ...rc/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>