[PBNTR-456] Fixed Confirmation Toast - Enable "auto close" for RAILS (#…

…4179)

**What does this PR do?** A clear and concise description with your
runway ticket url.
[PBNTR-456](https://runway.powerhrg.com/backlog_items/PBNTR-456)
requested creation of an `auto_close` prop for the Rails Fixed
Confirmation Toast; investigation revealed that
[PBNTR-475](https://runway.powerhrg.com/backlog_items/PLAY-475) actually
created both React and Rails versions of the prop, but only displayed a
doc example for the React side. It is already being used in Nitro in a
few places [see
here](https://github.com/search?q=repo%3Apowerhome%2Fnitro-web+pb_rails%28%22fixed_confirmation_toast%22+auto_close&type=code).

This PR adds the rails doc example and updates the PbEnhancedElement
file to ensure autoclosing works as expected for standard and closeable
(has X to close) toasts. An initial overhaul of the PbEnhancedElement
was too much and failed [alpha
testing](powerhome/nitro-web#45684) (which
revealed that the previously only closeable autoclose fixed confirmation
toasts worked in nitro at all) - this PR contains a minimally updated
version that works for both closeable and default autoclose toasts in
rails.

**Screenshots:** Screenshots to visualize your addition/change
<img width="1337" alt="for PR 3 seconds both work in alpha"
src="https://github.com/user-attachments/assets/02c73452-54e8-47ce-96cf-8ecdc90ca5d5"
/>
<img width="1333" alt="for PR 10 seconds both work in alpha"
src="https://github.com/user-attachments/assets/703aacee-7a85-47fe-aa3e-24744f70b08a"
/>


**How to test?** Steps to confirm the desired behavior:
1. Go to the [rails autoclose doc
example](https://pr4179.playbook.beta.px.powerapp.cloud/kits/fixed_confirmation_toast#click-to-show-auto-close).
2. Click on buttons to trigger autocloseable toasts.


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [x] **TESTS** I have added test coverage to my code.

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

@@ -0,0 +1,58 @@
+<%= 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,
+  classname: "toast-to-hide",
+  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,
+  id: "toast-auto-close-closeable",
+  text: "I will disappear in 10 seconds.",
+  status: "tip",
+  vertical: "top",
+  horizontal: "center"
+}) %>
+
+<script>
+document.addEventListener('DOMContentLoaded', () => {
+  // Initialize toast elements and buttons
+  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']")
+  }
+
+  // Store original toasts and remove them from DOM
+  const originalToasts = {}
+  Object.entries(toasts).forEach(([id, toast]) => {
+    if (toast) {
+      originalToasts[id] = toast.cloneNode(true)
+      toast.remove()
+    }
+  })
+
+  // Set up button click handlers
+  Object.keys(buttons).forEach((toastId) => {
+    const button = buttons[toastId]
+    if (button) {
+      button.onclick = () => {
+        const newToast = originalToasts[toastId].cloneNode(true)
+        newToast.style.display = "flex"
+        document.body.appendChild(newToast)
+      }
+    }
+  })
+})
+</script>

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

@@ -0,0 +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.
+
+The script tag in this code snippet is for demonstration purposes only. It clones the toasts 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.

playbook/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/example.yml

@@ -5,6 +5,7 @@ examples:
   - fixed_confirmation_toast_multi_line: Multi Line
   - fixed_confirmation_toast_close: Click to Close
   - fixed_confirmation_toast_positions: Click to Show Positions
+  - fixed_confirmation_toast_auto_close: Click to Show Auto Close
   - fixed_confirmation_toast_children: Children
   - fixed_confirmation_toast_custom_icon: Custom Icon
 

playbook/app/pb_kits/playbook/pb_fixed_confirmation_toast/index.js

@@ -2,16 +2,18 @@ import PbEnhancedElement from '../pb_enhanced_element'
 
 export default class PbFixedConfirmationToast extends PbEnhancedElement {
   static get selector() {
-    return '.remove_toast'
+    return '[class*="pb_fixed_confirmation_toast_kit"]'
   }
 
   connect() {
     this.self = this.element
     this.autoCloseToast(this.self)
 
-    this.self.addEventListener('click', () => {
-      this.removeToast(this.self)
-    })
+    if (this.self.classList.contains('remove_toast')) {
+      this.self.addEventListener('click', () => {
+        this.removeToast(this.self)
+      })
+    }
   }
 
   removeToast(elem) {
@@ -32,4 +34,4 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
       }, autoCloseIntValue)
     }
   }
-}
+}

playbook/spec/pb_kits/playbook/kits/fixed_confirmation_toast_spec.rb

@@ -22,6 +22,7 @@
       .with_default(nil)
       .with_values(nil, "top", "bottom")
   }
+  it { is_expected.to define_prop(:auto_close).of_type(Playbook::Props::Number) }
 
   describe "#show_text?" do
     it "returns true if text is present", :aggregate_failures do
@@ -56,6 +57,14 @@
     end
   end
 
+  describe "#auto_close" do
+    it "returns auto close class with duration when auto_close is present" do
+      expect(subject.new({}).auto_close_class).to eq ""
+      expect(subject.new(auto_close: 3000).auto_close_class).to eq " auto_close_3000"
+      expect(subject.new(auto_close: 10000).auto_close_class).to eq " auto_close_10000"
+    end
+  end
+
   describe "#classname" do
     it "returns namespaced class name", :aggregate_failures do
       text = "Test text"
@@ -70,6 +79,7 @@
       expect(subject.new(text: text, status: "neutral", vertical: "top").classname).to eq "pb_fixed_confirmation_toast_kit_neutral"
       expect(subject.new(text: text, status: "neutral", vertical: "top", horizontal: "center").classname).to eq "pb_fixed_confirmation_toast_kit_neutral positioned_toast top center"
       expect(subject.new(text: text, status: "tip", icon: "arrow-down").classname).to eq "pb_fixed_confirmation_toast_kit_tip custom_icon"
+      expect(subject.new(text: text, status: "tip", auto_close: 3000).classname).to eq "pb_fixed_confirmation_toast_kit_tip auto_close_3000"
     end
   end
 end