docs(ui5-dialog): improve basic sample (SAP#9876)

The samples now showcase achieving a confirmation dialog with two buttons like in opneui5, by using ui5-toolbar and ui5-toolbar-buttons. BGSOFUIRODOPI-3324
kineticjs · Sep 17, 2024 · a211dd2 · a211dd2
1 parent ceb3642
commit a211dd2
Show file tree

Hide file tree

Showing 8 changed files with 79 additions and 10 deletions.
diff --git a/packages/main/src/themes/Dialog.css b/packages/main/src/themes/Dialog.css
@@ -150,6 +150,10 @@
 	box-shadow: none;
 }
 
+::slotted([slot="footer"][ui5-toolbar]) {
+	border: 0;
+}
+
 :host::backdrop {
 	background-color: var(--_ui5_popup_block_layer_background);
 	opacity: var(--_ui5_popup_block_layer_opacity);

diff --git a/packages/main/test/pages/Dialog.html b/packages/main/test/pages/Dialog.html
@@ -615,6 +615,43 @@
 		<input />
 		<ui5-button autofocus id="btnDialogAutofocusClose">Close</ui5-button>
 	</ui5-dialog>
+	<br>
+	<br>
+	<ui5-button id="btnConfirmationDialog">Confirmation dialog with Toolbar</ui5-button>
+    <ui5-dialog id="confirmationDialog" draggable resizable header-text="Register Form">
+        <section style="display: flex;flex-direction: column;justify-content: space-evenly;	align-items: center;margin: 3rem 6rem;">
+            <div style="display: grid;width: 15rem;margin-bottom: .5rem;">
+                <ui5-label for="username" required show-colon>Username</ui5-label>
+                <ui5-input id="username"></ui5-input>
+            </div>
+            <div style="display: grid;width: 15rem;margin-bottom: .5rem;">
+                <ui5-label for="password" required show-colon>Password</ui5-label>
+                <ui5-input id="password" type="Password" value-state="Negative"></ui5-input>
+            </div>
+            <div style="display: grid;width: 15rem;margin-bottom: .5rem;">
+                <ui5-label for="email" type="Email" required show-colon>Email</ui5-label>
+                <ui5-input id="email"></ui5-input>
+            </div>
+            <div style="display: grid;width: 15rem;margin-bottom: .5rem;">
+                <ui5-label for="address" show-colon>Address</ui5-label>
+                <ui5-input id="address"></ui5-input>
+            </div>
+        </section>
+		<ui5-toolbar slot="footer">
+            <ui5-toolbar-button
+                id="btnConfirmationDialogSubmit"
+                design="Emphasized"
+                text="SubmitSubmitSubmitSubmitSubmit"
+            >
+            </ui5-toolbar-button>
+            <ui5-toolbar-button
+                id="btnConfirmationDialogCancel"
+                text="CancelCancelCancelCancelCancelCancel"
+                design="Transparent"
+            >
+            </ui5-toolbar-button>
+        </ui5-toolbar>
+    </ui5-dialog>
 	<br>
 	<br>
 	<div>
@@ -863,6 +900,18 @@
 			window["dialogAutofocus"].open = false;
 		});
 
+		window["btnConfirmationDialog"].addEventListener("click", function () {
+			window["confirmationDialog"].open = true;
+		});
+
+		window["btnConfirmationDialogSubmit"].addEventListener("click", function () {
+			window["confirmationDialog"].open = false;
+		})
+
+		window["btnConfirmationDialogCancel"].addEventListener("click", function () {
+			window["confirmationDialog"].open = false;
+		})
+
 		document.getElementById("theme-switch").addEventListener("ui5-selection-change", event => {
 			window["sap-ui-webcomponents-bundle"].configuration.setTheme(event.detail.selectedItems[0].getAttribute("data-ui5-theme-name"));
 		});

diff --git a/packages/website/docs/_samples/main/Dialog/Basic/main.js b/packages/website/docs/_samples/main/Dialog/Basic/main.js
@@ -3,6 +3,8 @@ import "@ui5/webcomponents/dist/Button.js";
 import "@ui5/webcomponents/dist/Input.js";
 import "@ui5/webcomponents/dist/Link.js";
 import "@ui5/webcomponents/dist/Label.js";
+import "@ui5/webcomponents/dist/Toolbar.js"
+import "@ui5/webcomponents/dist/ToolbarButton.js"
 
 var dialogOpener = document.getElementById("dialogOpener");
 var dialog = document.getElementById("dialog");

diff --git a/packages/website/docs/_samples/main/Dialog/Basic/sample.html b/packages/website/docs/_samples/main/Dialog/Basic/sample.html
@@ -33,10 +33,20 @@
                 <ui5-input id="address"></ui5-input>
             </div>
         </section>
-        <div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; align-items: center">
-            <div style="flex: 1;"></div>
-            <ui5-button class="dialogCloser" design="Emphasized">Register</ui5-button>
-        </div>
+        <ui5-toolbar slot="footer">
+            <ui5-toolbar-button
+                class="dialogCloser"
+                design="Emphasized"
+                text="Submit"
+            >
+            </ui5-toolbar-button>
+            <ui5-toolbar-button
+                class="dialogCloser"
+                design="Transparent"
+                text="Cancel"
+            >
+            </ui5-toolbar-button>
+        </ui5-toolbar>
     </ui5-dialog>
     <!-- playground-fold -->
     <script type="module" src="main.js"></script>

diff --git a/packages/website/docs/_samples/main/Dialog/DraggableAndResizable/main.js b/packages/website/docs/_samples/main/Dialog/DraggableAndResizable/main.js
@@ -1,5 +1,7 @@
 import "@ui5/webcomponents/dist/Dialog.js";
 import "@ui5/webcomponents/dist/Button.js";
+import "@ui5/webcomponents/dist/Toolbar.js";
+import "@ui5/webcomponents/dist/ToolbarButton.js";
 
 var dialogOpener = document.getElementById("dialogOpener");
 var dialog = document.getElementById("dialog");

diff --git a/packages/website/docs/_samples/main/Dialog/DraggableAndResizable/sample.html b/packages/website/docs/_samples/main/Dialog/DraggableAndResizable/sample.html
@@ -17,9 +17,9 @@
         <p>Move this dialog around the screen by dragging it by its header.</p>
         <p>Resize this dialog by dragging it by its resize handle.</p>
         <p>These features are available only on Desktop.</p>
-        <div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; align-items: center">
-            <ui5-button class="dialogCloser" design="Emphasized">OK</ui5-button>
-        </div>
+        <ui5-toolbar slot="footer">
+            <ui5-toolbar-button class="dialogCloser" design="Emphasized" text="OK"></ui5-toolbar-button>
+        </ui5-toolbar>
     </ui5-dialog>
     <!-- playground-fold -->
     <script type="module" src="main.js"></script>

diff --git a/packages/website/docs/_samples/main/Dialog/WithState/main.js b/packages/website/docs/_samples/main/Dialog/WithState/main.js
@@ -1,6 +1,8 @@
 import "@ui5/webcomponents/dist/Dialog.js";
 import "@ui5/webcomponents/dist/Button.js";
 import "@ui5/webcomponents/dist/Text.js";
+import "@ui5/webcomponents/dist/Toolbar.js";
+import "@ui5/webcomponents/dist/ToolbarButton.js";
 
 var dialogOpener = document.getElementById("dialogOpener");
 var dialog = document.getElementById("dialog"); 

diff --git a/packages/website/docs/_samples/main/Dialog/WithState/sample.html b/packages/website/docs/_samples/main/Dialog/WithState/sample.html
@@ -15,9 +15,9 @@
 
     <ui5-dialog id="dialog" state="Negative" header-text="State :: Negative">
         <ui5-text>Dialog with state</ui5-text>
-        <div slot="footer" style="display: flex; justify-content: flex-end; width: 100%; align-items: center">
-            <ui5-button class="dialogCloser">Close</ui5-button>
-        </div>
+        <ui5-toolbar slot="footer">
+            <ui5-toolbar-button class="dialogCloser" text="Close"></ui5-toolbar-button>
+        </ui5-toolbar>
     </ui5-dialog>
     <!-- playground-fold -->
     <script type="module" src="main.js"></script>