playbook_ui 11.11.0.pre.alpha.dialog1 → 11.11.0.pre.alpha.dialog2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 75154344c3369be789e9fdeb6a2140baecde97c1a8f817008348c5635ce0b8dd
-  data.tar.gz: f9a48fef542601d8a685b3198c2f8bfe3342a47351cbf8c602cfe83917821928
+  metadata.gz: 6aefa801028f30170ea5d693cc2062bb8898282475fcc32c5437ac6e23a7a9cb
+  data.tar.gz: 8460114464053ed808a1c32d8d11a0adb458bddf5e5c12e35c0bf1b5b5db4408
 SHA512:
-  metadata.gz: 6bb37ea63470119137bcb870cf1aa00a35aba2c8d345011ee138f07bf7cd60ebb5007affdb89e81d3b8934fe1e0dc826873300b1f1ee67d27da04b5fcf5ad512
-  data.tar.gz: 1cbc92c01f4028755ceb6b68ea9cdb996d9d1cc6cc48758e5cfd5774c9d1128f4f71b61d5412c44cf18ba7481ee33416a42d87651970f4fd17182981963fdf96
+  metadata.gz: 0e44b3ebdbe70354baf021f710b215b757ad39c179d3c7548909f51af6387f0a95adf4058c058afe4247e696d32a692a9b417f780992abfa3cbdb9433bcbaf54
+  data.tar.gz: 92fcfdd0bf79e370b8aabeb42a1ef3f52502d05bee52e8f7ecd62a5db02f3e555e491ce7a73e3e2704e68a73d7a42c58b6cc2abae308fdc77894bd39d1fdd91b

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -80,7 +80,6 @@
 	animation-duration: $animation-duration;
 	outline: none;
 	animation-timing-function: $easeInOutQuint;
-	margin: auto;
 	
 	&[class*="_status_size"] {
 		width: $status_size;
@@ -178,6 +177,12 @@
 }
 
 .pb_dialog_wrapper_rails {
+	.pb_dialog_rails {
+		top: 0 !important;
+		padding: unset !important;
+		margin: auto;
+	
+	}
 	dialog::backdrop {
 		position: fixed;
 		top: 0;

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -19,4 +19,10 @@
             <% end %>
             <%= content %>
     <% end %>
-</div>
+</div>
+
+<%= javascript_tag do %>
+    window.addEventListener("DOMContentLoaded", () => {      
+        dialogHelper()
+    })
+  <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog.rb

@@ -12,7 +12,7 @@ module Playbook
       prop :cancel_button
 
       def classname
-        generate_classname("pb_dialog pb_dialog_#{size}")
+        generate_classname("pb_dialog pb_dialog_rails pb_dialog_#{size}")
       end
     end
   end

data/app/pb_kits/playbook/pb_dialog/dialogHelper.js

@@ -1,16 +1,21 @@
-document.addEventListener("DOMContentLoaded", function () {
-  const openTrigger = document.querySelectorAll('[data-open-dialog]');
-  const closeTrigger = document.querySelectorAll('[data-close-dialog]');
+const dialogHelper = () => {
+  const openTrigger = document.querySelectorAll("[data-open-dialog]");
+  const closeTrigger = document.querySelectorAll("[data-close-dialog]");
+
   openTrigger.forEach((open) => {
     open.addEventListener("click", () => {
-      var openTriggerData = open.dataset.openDialog
-      document.getElementById(openTriggerData).showModal()
+      var openTriggerData = open.dataset.openDialog;
+      if (document.getElementById(openTriggerData).open) return;
+      document.getElementById(openTriggerData).showModal();
     });
-  })
+  });
+
   closeTrigger.forEach((close) => {
     close.addEventListener("click", () => {
-      var closeTriggerData = close.dataset.closeDialog
-      document.getElementById(closeTriggerData).close()
-    })
-  })
-});
+      var closeTriggerData = close.dataset.closeDialog;
+      document.getElementById(closeTriggerData).close();
+    });
+  });
+};
+
+export default dialogHelper;

data/app/pb_kits/playbook/pb_dialog/dialog_footer.html.erb

@@ -6,7 +6,7 @@
         <%= pb_rails("button", props: { type: "submit", id: object.confirm_button_id }) do %>
             <%= object.confirm_button %>
         <% end %>
-        <%= pb_rails("button", props: { data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id}) do %>
+        <%= pb_rails("button", props: { data: {"close-dialog": "#{object.id}" }, id: object.cancel_button_id, variant: "link"}) do %>
             <%= object.cancel_button %>
         <% end %>
     <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -2,7 +2,7 @@
     id: object.id,
     data: object.data,
     aria: object.aria) do %>
-        <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm"}) do %>
+        <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
             
             <button class="dialog-button-class" data-close-dialog= <%= object.id %> >

data/lib/playbook/version.rb

@@ -2,5 +2,5 @@
 
 module Playbook
   PREVIOUS_VERSION = "11.11.0"
-  VERSION = "11.11.0.pre.alpha.dialog1"
+  VERSION = "11.11.0.pre.alpha.dialog2"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: playbook_ui
 version: !ruby/object:Gem::Version
-  version: 11.11.0.pre.alpha.dialog1
+  version: 11.11.0.pre.alpha.dialog2
 platform: ruby
 authors:
 - Power UX
@@ -9,7 +9,7 @@ authors:
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-11-08 00:00:00.000000000 Z
+date: 2022-11-11 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack