playbook_ui 14.3.0.pre.rc.4 → 14.3.0.pre.rc.6

data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb

@@ -1,7 +1,7 @@
 
 <%= pb_rails("rich_text_editor", props: { id: "content-preview-editor" }) %>
 <div id="card-obfuscation" style="display:none">
-  <%= pb_rails("card", props: { margin_top: "md" }) do %>
+  <%= pb_rails("card", props: { margin_top: "md", max_width: "md", padding: "sm" }) do %>
    <div id="content-preview" class="trix-content">
    </div>
   <% end %>
@@ -11,15 +11,25 @@
 <% end %>
 
 <script>
-  // Button event handler
-  const button = document.getElementById('preview-button');
-  button.addEventListener('click', function() {
-    const content = document.getElementById('content-preview-editor');
-    const previewArea = document.getElementById('content-preview');
-    const cardDiv = document.getElementById('card-obfuscation');
+  document.addEventListener('DOMContentLoaded', () => {
+    function handleButtonClick() {
+      const editorContainer = [...document.querySelectorAll('[data-react-props]')]
+        .find(element => element.getAttribute('data-react-props')?.includes('"id":"content-preview-editor"'))
 
-    previewArea.innerHTML = content.value;
-    cardDiv.classList.add('mt_md');
-    cardDiv.style.display = 'block';
-  });
+      const editorElement = editorContainer?.querySelector('trix-editor')
+      const inputId = editorElement?.getAttribute('input')
+      const inputElement = inputId && document.getElementById(inputId)
+      
+      const editorContent = inputElement?.value || '' 
+      const previewArea = document.getElementById('content-preview')
+      const cardDiv = document.getElementById('card-obfuscation')
+
+      if (previewArea && cardDiv) {
+        previewArea.innerHTML = editorContent 
+        cardDiv.style.display = 'block'
+      }
+    }
+
+    document.getElementById('preview-button')?.addEventListener('click', handleButtonClick)
+  })
 </script>

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -81,7 +81,7 @@
     display: block;
     &.error {
       [class*=pb_body_kit] {
-        margin-top: calc($space_xs / 2);
+        margin-top: $space_xs / 2;
       }
       > select:first-child {
         border-color: $error;

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -43,7 +43,7 @@ $pb_selectable_card_border: 2px;
       align-items: center;
       height: $pb_selectable_card_indicator_size;
       width: $pb_selectable_card_indicator_size;
-      border-radius: calc($pb_selectable_card_indicator_size/2) + calc($pb_selectable_card_border/2);
+      border-radius: $pb_selectable_card_indicator_size/2 + $pb_selectable_card_border/2;
       border-width: $pb_selectable_card_border;
       border-style: solid;
       border-color: $white;
@@ -52,8 +52,8 @@ $pb_selectable_card_border: 2px;
       font-size: $font_smaller;
       text-align: center;
       position: absolute;
-      top: -(calc($pb_selectable_card_indicator_size/2));
-      right: -(calc($pb_selectable_card_indicator_size/2));
+      top: -($pb_selectable_card_indicator_size/2);
+      right: -($pb_selectable_card_indicator_size/2);
       opacity: 0;
     }
   }

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -101,7 +101,7 @@
   &.error {
     .text_input_wrapper {
       [class*="pb_body_kit"] {
-        margin-top: calc($space_xs / 2);
+        margin-top: $space_xs / 2;
       }
       input,
       .text_input {

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -60,7 +60,7 @@
 
   &.error {
     [class*=pb_body_kit] {
-      margin-top: calc($space_xs / 2);
+      margin-top: $space_xs / 2;
     }
     textarea {
       border-color: $error;

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -22,14 +22,14 @@
     display: flex;
     align-items: center;
     [class*=pb_time_range_inline_arrow] {
-      margin-left: calc($space_xs/2);
-      margin-right: calc($space_xs/2);
+      margin-left: $space_xs/2;
+      margin-right: $space_xs/2;
     }
     [class*=pb_time_range_inline_timezone] {
-      margin-left: calc($space_xs/2);
+      margin-left: $space_xs/2;
     }
     [class*=pb_time_range_inline_icon] {
-      margin-right: calc($space_xs/2);
+      margin-right: $space_xs/2;
     }
   }
 }

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -4,9 +4,9 @@
 @import "../tokens/typography";
 
 $connector_width: 2px;
-$icon_margin: calc($space_xs/2);
+$icon_margin: $space_xs/2;
 $icon_height: 28px;
-$height_from_top: calc($icon_height/2) - calc($connector_width/2);
+$height_from_top: $icon_height/2 - $connector_width/2;
 
 @mixin pb_timeline_line_solid($width, $height, $margin) {
     width: $width;

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -8,7 +8,7 @@ $transition: .2s ease-in-out;
 [class^=pb_toggle_kit] {
   position: relative;
   $width: 44px;
-  $height: calc($width / 2);
+  $height: $width / 2;
   $border_success: 3px solid $color_checkbox_success;
   $border_default: 3px solid $color_checkbox_default;
 
@@ -27,7 +27,7 @@ $transition: .2s ease-in-out;
       &:after {
         transition: $transition;
         content: "";
-        width: calc($width / 2) - 4px;
+        width: $width / 2 - 4px;
         height: $height - 4px;
         background-color: $color_checkbox_default;
         border-radius: 50%;
@@ -68,7 +68,7 @@ $transition: .2s ease-in-out;
         background-color: $color_checkbox_success;
 
         &:after {
-          left: calc($width / 2) + 2px;
+          left: $width / 2 + 2px;
           background-color: $white;
         }
       }