playbook_ui_docs 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5728 → 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5738

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3af0ff71182babeb005dc738eaffeca12951d2663aaa3f5cc8c875c4c401b09a
-  data.tar.gz: 30f6df3ec10a18ed615b8a31aeb6b5f2407a67daa3239ab8f10e2ac30a848dae
+  metadata.gz: 2157a5705a89a2255f41b00ec03a170132064a685d54569e65986a30fbeded78
+  data.tar.gz: 28701af4872b652ee0ae94d98219d66b6ba31f2177648836d7f8ef5679cbc7c6
 SHA512:
-  metadata.gz: 8b4391f49afba440279c0351303438ce9837a8615d09bcfeb08777af702375e03b5ffdaff68fd8f6f2f358d3ca0fe3f1e4ad4f6b7fb35eebd2e449433e7ce006
-  data.tar.gz: 55f848fb3a82c882edaae29cb775d2a5da2b5be5692c9bf179b8e7937c4cc1819a1df8cc4b594e1f6f45a7dc293370663d9268390d52e0669cf0c24c2b9a1830
+  metadata.gz: f1093825873f938918776401eb41fecb72bdeef1e1d7f6a2458a409eb28e0943e9409fce1c0df605f047b2752a39c15098a98e5be89f1acbc86dad18efcef37d
+  data.tar.gz: 5bbc66925afa97af118d5850c816af55f3bc019e0e0f8ca456e0dbb85ff11f28ee4466df2c4a235cbc0e379bc97585ea300806f9326368b2c75e597adb7dccc9

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb

@@ -1,15 +1,5 @@
-<%= pb_rails("button", props: { text: "Show Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close" } }) %>
 <%= pb_rails("button", props: { text: "Show Closeable Auto Close Toast", variant: "secondary", data: { toast: "#toast-auto-close-closeable" } }) %>
 
-<%= pb_rails("fixed_confirmation_toast", props: {
-  auto_close: 3000,
-  id: "toast-auto-close",
-  text: "I will disappear in 3 seconds.",
-  status: "tip",
-  vertical: "top",
-  horizontal: "center"
-}) %>
-
 <%= pb_rails("fixed_confirmation_toast", props: {
   auto_close: 10000,
   closeable: true,
@@ -22,53 +12,22 @@
 
 <script>
   document.addEventListener('DOMContentLoaded', () => {
-    const toasts = {
-      '#toast-auto-close': document.querySelector("#toast-auto-close"),
-      '#toast-auto-close-closeable': document.querySelector("#toast-auto-close-closeable")
-    }
-    
-    const buttons = {
-      '#toast-auto-close': document.querySelector("button[data-toast='#toast-auto-close']"),
-      '#toast-auto-close-closeable': document.querySelector("button[data-toast='#toast-auto-close-closeable']")
-    }
+    const toast10SecCloseable = document.querySelector("#toast-auto-close-closeable")
+    const button10SecCloseable = document.querySelector("button[data-toast='#toast-auto-close-closeable']")
 
-    const hideAllToastsUponPageLoad = () => {
-      Object.values(toasts).forEach(toast => {
-        if (toast) toast.style.display = "none"
-      })
+    const originalToast = toast10SecCloseable.cloneNode(true)
+    
+    if (toast10SecCloseable) {
+      toast10SecCloseable.remove()
     }
 
-    const showAndAutoCloseToast = (toastId) => {
-      hideAllToastsUponPageLoad()
-      const toast = toasts[toastId]
-
-      if (toast) {
-        toast.style.display = "flex"  // Show the selected toast
-
-        const autoCloseClass = Array.from(toast.classList).find(cls => cls.startsWith('auto_close_'))
-        if (autoCloseClass) {
-          const duration = parseInt(autoCloseClass.split('_')[2]) || 0;  // Use 0 as fallback if parsing fails
-
-          if (toast.autoCloseTimeout) {
-            clearTimeout(toast.autoCloseTimeout)
-          }
-
-          toast.autoCloseTimeout = setTimeout(() => {
-            toast.style.display = "none"
-          }, duration)
-        }
+    if (button10SecCloseable) {
+      button10SecCloseable.onclick = () => {
+        const newToast = originalToast.cloneNode(true)
+        newToast.style.display = "flex"
+        
+        document.body.appendChild(newToast)
       }
     }
-
-    Object.keys(buttons).forEach((key) => {
-      const button = buttons[key]
-      if (button) {
-        button.onclick = () => {
-          showAndAutoCloseToast(key)
-        }
-      }
-    })
-
-    hideAllToastsUponPageLoad()
   })
-</script>
+</script>

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close_rails.md

@@ -1,3 +1,3 @@
-Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms.
+Auto close is used when you want the confirmation toast to close automatically after a certain time. `auto_close` property will be a delay number in ms. The `auto_close` property currently only works in rails when it is a closeable one (`closeable: true`).
 
-Script tag in code snippet is for demonstration purposes only. It provides the functionality needed to show and hide the toaster in response to user interaction, and hides them from appearing upon initial page load. In a typical production environment this functionality would be handled by a controller or a separate javascript file.
+The script tag in this code snippet is for demonstration purposes only. It clones the toast in order to have it appear with a button click prompt and not upon initial page load. In a typical production environment the event triggering a fixed confirmation toast to appear would be handled by a controller or a separate javascript file.

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui_docs
 version: !ruby/object:Gem::Version
-  version: 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5728
+  version: 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5738
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2025-01-29 00:00:00.000000000 Z
+date: 2025-01-30 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: playbook_ui