playbook_ui 14.11.1.pre.alpha.PLAY17445539 → 14.11.1.pre.alpha.hfhbrakemanplaybook5370

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: fc87bec1a3c8f7ff6d6e2ba75803628c9e58603b3cdeb99e594fbe848eef5744
-  data.tar.gz: 6ff0f99215db0507635fde51c622a3b958b5c7b838b7bc3ddc33dc274956263a
+  metadata.gz: 259282b2e2f9943f189c92148ccc724649be5679f5c6704adc2456b7ca43604d
+  data.tar.gz: f710de54b6c1695917dbbc553911c316f9c64429f9d6c1b5f028800bd013b6e2
 SHA512:
-  metadata.gz: 166e0a325c792b7ca130740893dbb9e77af28360afb2371b88a240b3692fcff92f6a1499fff7c943b900c00a788e1db1605c94401b55377ace1ffd0e7d742af9
-  data.tar.gz: ac0c4fb79a12b76a1915ae45a5d3a6936003c5b40127fe1cc34f51b4f03e2831588f9baa3f3caaeaa7a09dd29ce85fde825e4ed3ae6002656c0431f88e14154b
+  metadata.gz: 3f33c26851a92b56250bcc84f12ad93edd4b7f0454d58c55bd26bfe7a83b4d205fab1f3319941e4bfc9afe5c774c28e68b7cb4108795385d850bda38f2b0e0ae
+  data.tar.gz: 4fa4ec45bb0d50f82a261724eba15fd18290693540e91c8ab89f4101aa2eb7c315375fb3fa24dccb481a2f3da1a44ba48a130e5916f765fe60eb0a71c58f4e00

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort_control.md

@@ -1,3 +1,3 @@
-`sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc.
+`sortControl` is an optional prop that can be used to gain greater control over the sort state of the Advanced Table. Tanstack handles sort itself, however it does provide for a way to handle the state manually if needed. Usecases for this include needing to store the sort state so it persists on page reload, set an initial sort state, etc. 
 
-The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort direction is `desc: true`.
+The sort state must be an object with a single key/value pair, with the key being "desc" and the value being a boolean. The default for sort directino is `desc: true`.

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -1,5 +1,6 @@
-<%= pb_content_tag(object.tag,
-                object.tag == "button" ? object.options : object.link_options) do %>
+<%= content_tag(object.tag,
+                object.tag == "button" ? object.options : object.link_options,
+                **combined_html_options) do %>
     <% if object.variant === "reaction" %>
         <% if icon && object.valid_emoji(object.icon) %>
             <%= pb_rails("flex", props:{ align: "center" }) do %>

data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb

@@ -1,4 +1,9 @@
-<%= pb_content_tag(:label) do %>
+<%= content_tag(:label, aria: object.aria,
+                        id: object.id,
+                        data: object.data,
+                        class: object.classname,
+                        **combined_html_options
+                ) do %>
   <%= content.presence || object.input %>
   <% if object.indeterminate %>
     <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -1,5 +1,9 @@
-<%= pb_content_tag(:div,
-    class: object.classname + object.error_class) do %>
+<%= content_tag(:div,
+    aria: object.aria,
+    class: object.classname + object.error_class,
+    data: object.data,
+    id: object.id,
+    **combined_html_options) do %>
   <div class="input_wrapper">
     <% if content.present? %>
       <%= content %>

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default_date.md

@@ -2,4 +2,4 @@ The `defaultDate`/`default_date` prop has a null or empty string value by defaul
 
 If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor).  See [this GitHub issue for more information](https://github.com/powerhome/playbook/issues/1167) and the anti-pattern examples below.
 
-You can leverage the `defaultDate`/`default_date` prop with custom logic in your filter or controller files where the determination of the default value changes based on user interaction. The page can load with an initial default date picker value or placeholder text, then after filter submission save the submitted values as the "new default" (via state or params).
+

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.html.erb

@@ -6,8 +6,14 @@
 
 ] %>
 
-<%= pb_rails("list", props: { enable_drag: true, items: initial_items }) do %>
-  <% initial_items.each do |item| %>
-    <%= pb_rails("list/item", props:{drag_id: item[:id]}) do %><%= item[:name] %><% end %>
+<%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
+  <%= pb_rails("draggable/draggable_container") do %>
+    <%= pb_rails("list", props: {ordered: false}) do %>
+        <% initial_items.each do |item| %>
+            <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
+                <%= pb_rails("list/item") do %><%= item[:name] %><% end %>
+            <% end %>
+        <% end %>
+    <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_draggable/docs/example.yml

@@ -11,7 +11,6 @@ examples:
   rails:
   - draggable_default_rails: Default
   - draggable_with_list_rails: Draggable with List Kit
-  - draggable_with_selectable_list_rails: Draggable with SelectableList Kit
   - draggable_with_cards_rails: Draggable with Cards
 
 

data/app/pb_kits/playbook/pb_drawer/_drawer.scss

@@ -13,9 +13,10 @@ $small: 200px;
 $medium: 250px;
 $large: 300px;
 $xlarge: 365px;
-$animation-duration: .25s;
+$animation-duration: 0.4s;
 $z-index: $z_7;
 
+// Drawer animations
 @keyframes modalFadeInLeft {
   from {
     transform: translateX(-100%);
@@ -70,62 +71,6 @@ $z-index: $z_7;
   }
 }
 
-@keyframes overlayFade {
-  from {
-    opacity: 0;
-    transform: translateY(0);
-  }
-  to {
-    opacity: 1;
-    transform: translateY(0);
-  }
-}
-
-@keyframes overlayFadeOut {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes modalFadeDownIn {
-  from {
-    transform: translateY(-100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes modalFadeDownOut {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(-100%);
-  }
-}
-
-@keyframes modalFadeUpIn {
-  from {
-    transform: translateY(100%);
-  }
-  to {
-    transform: translateY(0);
-  }
-}
-
-@keyframes modalFadeUpOut {
-  from {
-    transform: translateY(0);
-  }
-  to {
-    transform: translateY(100%);
-  }
-}
-
 body.PBDrawer__Body--open {
   transition: margin-left $animation-duration ease-in, margin-right $animation-duration ease-in;
 }
@@ -149,53 +94,34 @@ body.PBDrawer__Body--close {
 
 // Drawer Styles
 .pb_drawer {
-  background-color: $white;
-  z-index: $z-index;
-  border: 0;
-  height: 100%;
-  overflow: auto;
-  animation-duration: $animation-duration;
-  outline: none;
-
-  &.pb_drawer_within_element {
-    position: relative;
-    width: 100%;
-    display: block;
-    background-color: $white;
-    overflow: hidden;
-    transition: height $animation-duration ease-in-out;
-    height: var(--drawer-height);
-    z-index: 1;
-    
-    &.pb_drawer_collapsing {
-      height: 0;
-    }
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background-color: inherit;
-      z-index: -1;
-    }
-  }
-
-  .toggle-content.is-visible {
-    display: block;
-    height: auto;
-  }
+   will-change: transform;
+   backface-visibility: hidden;
 
   .drawer {
     position: sticky;
     will-change: transform;
+    backface-visibility: hidden;
     top: 0;
     background-color: $white;
     z-index: $z_9;
   }
 
+  // @include pb_card;
+  background-color: $white;
+  border: 0;
+  box-shadow: $shadow_deepest; // border class here
+  max-height: calc(100vh - #{$gutter * 2});
+  max-width: calc(100vw - #{$gutter * 2});
+  overflow: auto;
+  animation-duration: $animation-duration;
+  outline: none;
+
+  // General _before_close styles
+  &[class*="_before_close"] {
+    animation-name: modalFadeOut;
+    animation-duration: $animation-duration;
+  }
+
   &[class*="_left"] {
     animation-name: modalFadeInLeft;
   }
@@ -203,40 +129,17 @@ body.PBDrawer__Body--close {
   &[class*="_left"][class*="_before_close"] {
     animation-name: modalFadeOutLeft;
     animation-duration: $animation-duration;
-    transform: translateX(-100%);
   }
 
   &[class*="_right"] {
     animation-name: modalFadeInRight;
-    justify-content: flex-end;
   }
 
   &[class*="_right"][class*="_before_close"] {
     animation-name: modalFadeOutRight;
     animation-duration: $animation-duration;
-    transform: translateX(100%);
-  }
-
-  &[class*="_bottom"] {
-    animation: none;
-    transform: none;
-  }
-
-  &[class*="_bottom"][class*="_before_close"] {
-    animation: none;
-    transform: none;
-  }
-
-  &[class*="_top"] {
-    animation-name: modalFadeUpIn;
   }
 
-  &[class*="_top"][class*="_before_close"] {
-    animation-name: modalFadeUpOut;
-    animation-duration: $animation-duration;
-  }
-
-
   &[class*="_xs_"] {
     width: $xsmall;
     max-width: $xsmall;
@@ -262,25 +165,23 @@ body.PBDrawer__Body--close {
     max-width: $xlarge; 
   }
 
-  &[class*="_full_"] {
-    width: 100%;
-    max-width: 100%; 
-  }
-
   &_body_open {
     overflow: hidden;
   }
 
-  &.drawer_border-full {
+  &_after_open {
+  }
+
+  &.drawer_border_full {
     box-shadow: none;
     border: 2px solid #f3f7fb;
   }
 
-  &.drawer_border-right {
+  &.drawer_border_right {
     border-right: 2px solid #f3f7fb;
   }
 
-  &.drawer_border-left {
+  &.drawer_border_left {
     border-left: 2px solid #f3f7fb;
   }
 
@@ -299,30 +200,78 @@ body.PBDrawer__Body--close {
     right: 0;
     bottom: 0;
     display: flex;
+    align-items: center;
+    justify-content: center;
     background-color: rgba($bg_dark, $opacity_4);
     z-index: $z-index;
-    opacity: 0;
-    animation: overlayFade $animation-duration ease-in-out forwards;
-    
-    &[class*="_left"]{
-      justify-content: flex-start;
-    }
-
-    &[class*="_center"]{
-      justify-content: center;
-    }
-
-    &[class*="_right"]{
-      justify-content: flex-end;
-    }
+    animation-name: overlayFade;
+    animation-duration: $animation-duration;
 
     &_after_open {
-      opacity: 1;
     }
-    
     &_before_close {
-      animation: overlayFadeOut $animation-duration ease-in-out forwards;
-      opacity: 0;
+      animation-name: overlayFadeOut;
+      animation-duration: $animation-duration;
+    }
+    &[class*="full_height"] {
+      &[class*="_left"]{
+        justify-content: flex-start;
+      }
+
+      &[class*="_center"]{
+        justify-content: center;
+      }
+
+      &[class*="_right"]{
+        justify-content: flex-end;
+      }
+
+      .pb_drawer {
+        height: 100%;
+        max-height: 100%;
+        max-width: none;
+        // This empty div only has height when drawer is full height
+        // Fix for drawer body content disappearing behind sticky footer
+        .drawer-pseudo-footer {
+          height: $space_xl * 2;
+        }
+        .drawer_footer {
+          position: fixed;
+          bottom: 0;
+          background-color: $white;
+          max-width: 100%;
+        }
+        &[class*="_xs_"] {
+          width: $xsmall;
+          .dialog_footer {
+            width: $xsmall;
+          }
+        }
+        &[class*="_sm_"] {
+          width: $small;
+          .dialog_footer {
+            width: $small;
+          }
+        }
+        &[class*="_md_"] {
+          width: $medium;
+          .dialog_footer {
+            width: $medium;
+          }
+        }
+        &[class*="_lg_"] {
+          width: $large;
+          .dialog_footer {
+            width: $large;
+          }
+        }
+        &[class*="_xl_"] {
+          width: $xlarge;
+          .dialog_footer {
+            width: $xlarge;
+          }
+        }
+      }
     }
   }
 
@@ -332,25 +281,99 @@ body.PBDrawer__Body--close {
     left: 0;
     right: 0;
     bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     z-index: $z-index;
-    opacity: 1;
-    animation: overlayFade $animation-duration ease-in-out forwards;
-    pointer-events: none;
+    animation-name: overlayFade;
+    animation-duration: $animation-duration;
+    overflow: none; /* Ensure body remains scrollable */
+    pointer-events: none; /* Allow interaction inside the drawer itself */
+
+    body.PBDrawer--open {
+      overflow: none; /* Ensure body remains scrollable */
+      pointer-events: none; /* Allow interaction inside the drawer itself */
+    }
 
     &_after_open {
-      opacity: 1;
+      overflow: none; /* Ensure body remains scrollable */
+      pointer-events: none; /* Allow interaction inside the drawer itself */
     }
-    
     &_before_close {
-      animation: overlayFadeOut $animation-duration ease-in-out forwards;
+      animation-name: overlayFadeOut;
+      animation-duration: $animation-duration;
+    }
+    &[class*="full_height"] {
+      &[class*="_left"]{
+        justify-content: flex-start;
+      }
+
+      &[class*="_center"]{
+        justify-content: center;
+      }
+
+      &[class*="_right"]{
+        justify-content: flex-end;
+      }
+
+      .pb_drawer {
+        height: 100%;
+        max-height: 100%;
+        max-width: none;
+        // This empty div only has height when drawer is full height
+        // Fix for drawer body content disappearing behind sticky footer
+        .drawer-pseudo-footer {
+          height: $space_xl * 2;
+        }
+        .drawer_footer {
+          position: fixed;
+          bottom: 0;
+          background-color: $white;
+          max-width: 100%;
+        }
+        &[class*="_xs_"] {
+          width: $xsmall;
+          .dialog_footer {
+            width: $xsmall;
+          }
+        }
+        &[class*="_sm_"] {
+          width: $small;
+          .dialog_footer {
+            width: $small;
+          }
+        }
+        &[class*="_md_"] {
+          width: $medium;
+          .dialog_footer {
+            width: $medium;
+          }
+        }
+        &[class*="_lg_"] {
+          width: $large;
+          .dialog_footer {
+            width: $large;
+          }
+        }
+        &[class*="_xl_"] {
+          width: $xlarge;
+          .dialog_footer {
+            width: $xlarge;
+          }
+        }
+      }
     }
   }
 
-  &.pb_drawer_after_open {
-    transform: translateX(0);
+  [class*="drawer_body"] {
+    padding: $space_sm;
   }
 
-  &.pb_drawer_before_close {
-    transform: translateX(-100%);
+  [class*="drawer_header"] {
+    padding: $space_sm;
+  }
+
+  [class*="drawer_footer"] {
+    padding: $space_sm;
   }
 }