playbook_ui 14.11.1.pre.alpha.PBNTR440enableglobalpropspbformwith5624 → 14.11.1.pre.alpha.PBNTR573datepickerinvestigation5355

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.html.erb

@@ -1 +1,12 @@
-<%= pb_rails("date_picker", props: { picker_id: "date-picker-default"}) %>
+<%= pb_rails("date_picker", props: { picker_id: "date-picker-default", custom_event_listener: "datePickerLoader" }) %>
+<%= pb_rails("button", props: { id: "date-picker-loader", text: "Load Custom Event" }) %>
+
+<script>
+    document.getElementById("date-picker-loader").addEventListener("click", () => {
+        window.document.dispatchEvent(
+            new CustomEvent("datePickerLoader", {
+                bubbles: true,
+            })
+        );
+    });
+</script>

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_date_picker/docs/example.yml

@@ -28,7 +28,6 @@ examples:
   - date_picker_time: Time Selection
   - date_picker_positions: Custom Positions
   - date_picker_positions_element: Custom Position (based on element)
-  - date_picker_turbo_frames: Within Turbo Frames
 
   react:
   - date_picker_default: Default

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_before_close {
-      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,21 +165,23 @@ body.PBDrawer__Body--close {
     max-width: $xlarge; 
   }
 
-  &[class*="_full_"] {
-    width: 100%;
-    max-width: 100%; 
+  &_body_open {
+    overflow: hidden;
+  }
+
+  &_after_open {
   }
 
-  &.drawer_border-full {
+  &.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;
   }
 
@@ -295,27 +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;
-    }
+    animation-name: overlayFade;
+    animation-duration: $animation-duration;
 
-    &[class*="_right"]{
-      justify-content: flex-end;
+    &_after_open {
     }
-    
     &_before_close {
-      animation: overlayFadeOut $animation-duration ease-in-out forwards;
-      opacity: 0;
-      // height: 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;
+          }
+        }
+      }
     }
   }
 
@@ -325,17 +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;
-    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 {
+      overflow: none; /* Ensure body remains scrollable */
+      pointer-events: none; /* Allow interaction inside the drawer itself */
+    }
     &_before_close {
-      height: 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;
+          }
+        }
+      }
     }
   }
 
+  [class*="drawer_body"] {
+    padding: $space_sm;
+  }
+
+  [class*="drawer_header"] {
+    padding: $space_sm;
+  }
 
-  &.pb_drawer_before_close {
-    transform: translateX(-100%);
+  [class*="drawer_footer"] {
+    padding: $space_sm;
   }
 }