fix(ui5-dialog): add height to footer and samples achieving fiori foo…

…ter design (#5338) * fix(ui5-dialog): add height to footer and samples achieving fiori footer design * fix(ui5-dialog): resolve comments * fix(ui5-dialog): samples text is updated * fix(ui5-dialog): section name * fix(ui5-dialog): samples are the same * fix(ui5-dialog): dialog header text changed
SAP · Jun 20, 2022 · 03269f4 · 03269f4
1 parent bfbd23f
commit 03269f4
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 3 deletions.
diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css
@@ -72,4 +72,8 @@
 	inset-inline-end: var(--_ui5_dialog_resize_handle_right);
 	cursor: var(--_ui5_dialog_resize_cursor);
 	color: var(--_ui5_dialog_resize_handle_color);
+}
+
+:host ::slotted([slot="footer"]) {
+    height: var(--_ui5_dialog_footer_height);
 }
diff --git a/packages/main/src/themes/base/sizes-parameters.css b/packages/main/src/themes/base/sizes-parameters.css
@@ -34,6 +34,7 @@
 
 	/* Dialog */
 	--_ui5_dialog_content_min_height: 2.75rem;
+    --_ui5_dialog_footer_height: 2.75rem;
 
 	--_ui5_input_inner_padding: 0 0.625rem;
 	--_ui5_input_inner_padding_with_icon: 0 0.25rem 0 0.625rem;
@@ -80,7 +81,7 @@
 	--_ui5_switch_with_label_width: var(--_ui5_switch_with_label_width);
 
 	--_ui5_switch_root_outline_top: var(--_ui5_switch_root_outline_top);
-	--_ui5_switch_root_outline_bottom: var(--_ui5_switch_root_outline_bottom);	
+	--_ui5_switch_root_outline_bottom: var(--_ui5_switch_root_outline_bottom);
 
 	--_ui5_switch_track_width: var(--_ui5_switch_track_width);
 	--_ui5_switch_track_height: var(--_ui5_switch_track_height);
@@ -229,6 +230,7 @@
 
 	/* Dialog */
 	--_ui5_dialog_content_min_height: 2.5rem;
+    --_ui5_dialog_footer_height: 2.5rem;
 
 	/* Input */
 	--_ui5_input_height: var(--_ui5_input_compact_height);

diff --git a/packages/main/test/samples/Dialog.sample.html b/packages/main/test/samples/Dialog.sample.html
@@ -144,11 +144,11 @@ <h3>Draggable and Resizable Dialog</h3>
 			hasPopup: "dialog",
 			controls: dialog2.id,
 		}
-	
+
 		dialogOpener2.addEventListener("click", function() {
 			dialog2.show();
 		});
-	
+
 		dialogCloser2.addEventListener("click", function() {
 			dialog2.close();
 		});
@@ -158,4 +158,43 @@ <h3>Draggable and Resizable Dialog</h3>
 <ui5-dialog draggable resizable></ui5-dialog>
 	</xmp></pre>
 </section>
+
+<section>
+	<h3>Dialog with SAP Fiori Styled Footer</h3>
+	<div class="snippet">
+		<ui5-button id="fiori-footer">Open dialog</ui5-button>
+
+		<ui5-dialog id="fiori-footer-dialog" header-text="SAP Fiori Styled Footer">
+			<p>Adding custom styles to achieve the look and feel of a SAP Fiori footer</p>
+			<div slot="footer" style="display: flex; align-items: center; justify-content: end; width: 100%; box-sizing: border-box;">
+				<ui5-button design="Emphasized" style="min-width: 4rem;">OK</ui5-button>
+				<ui5-button id="fiori-close" style="margin: 0 0 0 0.5rem; min-width: 4rem;">Close</ui5-button>
+			</div>
+		</ui5-dialog>
+	</div>
+
+	<script>
+		var dialogOpener3 = document.getElementById("fiori-footer");
+		var dialog3 = document.getElementById("fiori-footer-dialog");
+		var dialogCloser3 = document.getElementById("fiori-close");
+
+		dialogOpener3.addEventListener("click", function() {
+			dialog3.show();
+		});
+
+		dialogCloser3.addEventListener("click", function() {
+			dialog3.close();
+		});
+	</script>
+
+	<pre class="highlight">{% highlight html %}
+		<ui5-dialog id="fiori-footer-dialog" header-text="SAP Fiori Styled Footer">
+			<p>Adding custom styles to achieve the look and feel of a SAP Fiori footer</p>
+			<div slot="footer" style="display: flex; align-items: center; justify-content: end; width: 100%; box-sizing: border-box;">
+				<ui5-button  design="Emphasized" style="min-width: 4rem;">OK</ui5-button>
+				<ui5-button style="margin: 0 0 0 0.5rem; min-width: 4rem;">Close</ui5-button>
+			</div>
+		</ui5-dialog>
+	{% endhighlight %}</pre>
+</section>
 <!-- JSDoc marker -->