feat: add reset button for toast placement

twbs · Jan 23, 2025 · a727af5 · a727af5
1 parent 5708adc
commit a727af5
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 2 deletions.
diff --git a/site/assets/js/partials/snippets.js b/site/assets/js/partials/snippets.js
@@ -38,13 +38,24 @@ export default () => {
   // Used by 'Placement' example in docs or StackBlitz
   const toastPlacement = document.getElementById('toastPlacement')
   if (toastPlacement) {
-    document.getElementById('selectToastPlacement').addEventListener('change', function () {
+    const selectToastPlacement = document.getElementById('selectToastPlacement')
+    const toastPlacementResetBtn = document.getElementById('toastPlacementResetBtn')
+    const defaultSelectionIndex = 0
+
+    selectToastPlacement.addEventListener('change', function () {
       if (!toastPlacement.dataset.originalClass) {
         toastPlacement.dataset.originalClass = toastPlacement.className
       }
 
       toastPlacement.className = `${toastPlacement.dataset.originalClass} ${this.value}`
     })
+
+    toastPlacementResetBtn.addEventListener('click', event => {
+      event.preventDefault()
+
+      selectToastPlacement.selectedIndex = defaultSelectionIndex
+      selectToastPlacement.dispatchEvent(new Event('change'))
+    })
   }
 
   // Instantiate all toasts in docs pages only

diff --git a/site/content/docs/5.3/components/toasts.md b/site/content/docs/5.3/components/toasts.md
@@ -190,7 +190,11 @@ Place toasts with custom CSS as you need them. The top right is often used for n
 {{< example stackblitz_add_js="true" >}}
 <form>
   <div class="mb-3">
-    <label for="selectToastPlacement">Toast placement</label>
+    <div class="d-flex justify-content-between align-items-center">
+     <label for="selectToastPlacement">Toast placement</label>
+     <button class="btn btn-primary btn-sm" id="toastPlacementResetBtn" 
+      aria-label="Reset toast placement">Reset</button>
+    </div>
     <select class="form-select mt-2" id="selectToastPlacement">
       <option value="" selected>Select a position...</option>
       <option value="top-0 start-0">Top left</option>