playbook_ui 15.7.0.pre.alpha.play258013248 → 15.7.0.pre.alpha.play270013252

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: a57b87c794ebb9c526328411d074cf50c56b92e554eea530bc34ab79f009b9d7
-  data.tar.gz: 14aa366eb5f3af416b537e4d51cc70fcec656cfb5b7be7fa754f0fdf45e54cf0
+  metadata.gz: 376b8279c977490a4630a713a32566b7e224a0ca42be51cf3949f20392da4ea2
+  data.tar.gz: ae97fa5f2057d626806241917e275b50020a20ee16eebf9fcdd169232e70e087
 SHA512:
-  metadata.gz: 6b3ec5d9f16652c8cd619e3410315d7ce5559cebf78811127ebd624d33bc7987c0846fcc6c26b8daada7438c9896894b0fb4abb81816eeb98a664d725778da0d
-  data.tar.gz: d24a169b7c3712bdeb27dff6a886128a0c4c5b94f4d91a6d9beb45eaa33d9f459a262d9b80582a0e3f9d16f38f0db76586a9a26de71dfb5bf286766aeb6931bf
+  metadata.gz: af768bd436f08b54004697ed544a8fb2369f5fcd98174e2edf5abedbe5ec774ac44615ec34ed45d7b70df61d44074ee9e071c8003bc490b0b8876a426e1b9cf2
+  data.tar.gz: 3065180d3b67cb7c760a31c76abed33a1683d0df6374c9719de7de18eda1a798e538bf1e91eeb646d8cdcd29f47b20ded768117cbed994c0880d05ef18474a79

data/app/pb_kits/playbook/_playbook.scss

@@ -2,7 +2,6 @@
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
 @import 'pb_badge/badge';
-@import 'pb_bar_graph/bar_graph';
 @import 'pb_body/body';
 @import 'pb_bread_crumbs/bread_crumbs';
 @import 'pb_button/button';
@@ -10,7 +9,6 @@
 @import 'pb_caption/caption';
 @import 'pb_card/card';
 @import 'pb_checkbox/checkbox';
-@import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
 @import 'pb_contact/contact';
@@ -38,7 +36,6 @@
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
-@import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
@@ -53,7 +50,6 @@
 @import 'pb_layout/layout';
 @import 'pb_legend/legend';
 @import 'pb_lightbox/lightbox';
-@import 'pb_line_graph/line_graph';
 @import 'pb_link/link';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';

data/app/pb_kits/playbook/pb_fixed_confirmation_toast/fixed_confirmation_toast.rb

@@ -30,6 +30,10 @@ module Playbook
         closeable.present? ? " remove_toast" : ""
       end
 
+      def auto_close_class
+        auto_close.present? ? " auto_close_#{auto_close}" : ""
+      end
+
       def position_class
         horizontal && vertical ? " positioned_toast #{vertical} #{horizontal}" : ""
       end
@@ -38,14 +42,6 @@ module Playbook
         multi_line.present? ? "multi_line" : nil
       end
 
-      def auto_close_attribute
-        auto_close.present? ? { "pb-auto-close": auto_close } : {}
-      end
-
-      def data
-        Hash(prop(:data)).merge(auto_close_attribute)
-      end
-
       def icon_value
         icon || case status
                 when "success"
@@ -65,7 +61,9 @@ module Playbook
 
       def classname
         default_z_index = z_index.present? ? "" : " z_index_max"
-        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index
+        # IMPORTANT: the AutoClose class must be the last class in the string for JS to read it correctly
+        # Changing the order will break the auto_close functionality
+        generate_classname("pb_fixed_confirmation_toast_kit", status, multi_line_class) + close_class + position_class + icon_class + default_z_index + auto_close_class
       end
     end
   end

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

@@ -21,12 +21,17 @@ export default class PbFixedConfirmationToast extends PbEnhancedElement {
   }
 
   autoCloseToast(element) {
-    const autoCloseDataAttr = element.getAttribute('data-pb-auto-close')
+    const classListValues = element.classList.value
+    const hasAutoCloseClass = classListValues.includes('auto_close')
+
+    if (hasAutoCloseClass) {
+      const classList = classListValues.split(' ')
+      const autoCloseValue = classList[classList.length - 1].split('_')[2]
+      const autoCloseIntValue = parseInt(autoCloseValue)
 
-    if (autoCloseDataAttr) {
       setTimeout(() => {
         this.removeToast(element)
-      }, parseInt(autoCloseDataAttr))
+      }, autoCloseIntValue)
     }
   }
 }