playbook_ui 14.11.1 → 14.12.0.pre.alpha.PBNTR456fixedconftoastrailsautoclose5728

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

@@ -28,6 +28,7 @@ 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_cards_rails.html.erb

@@ -7,8 +7,7 @@
 <%= pb_rails("draggable", props: {initial_items: initial_items}) do %>
   <%= pb_rails("draggable/draggable_container") do %>
     <% initial_items.each do |item| %>
-      <%= pb_rails("draggable/draggable_item", props:{drag_id: item[:id]}) do %>
-        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs"}) do %>
+        <%= pb_rails("card", props: {highlight: {position: "side", color:"primary"}, margin_bottom: "xs", padding: "xs", drag_id: item[:id], draggable_item: true }) do %>
           <%= pb_rails("flex", props:{align_items: "stretch", flex_direction:"column"}) do %>
             <%= pb_rails("flex", props:{gap: "xs"}) do %>
               <%= pb_rails("title", props: { text: item[:name], tag: "h4", size: 4 }) %>
@@ -32,7 +31,6 @@
             <% end %>
           <% end %>
         <% end %>
-      <% end %>
     <% end %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_cards_rails.md

@@ -0,0 +1,7 @@
+For a simplified version of the Draggable API for the Card kit, you can do the following:
+
+Use the `draggable` kit and manage state as shown.
+
+`draggable/draggable_container` kit creates the container within which the cards can be dragged and dropped.
+
+The Card kit is optimized to work with the draggable kit. To enable drag, use the `draggable_item` and `drag_id` props on the Card kit as shown. An additional optional boolean prop (set to true by default) of `drag_handle` is also available to show the drag handle icon.

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

@@ -6,14 +6,8 @@
 
 ] %>
 
-<%= 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 %>
+<%= 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 %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_list_rails.md

@@ -0,0 +1,5 @@
+For a simplified version of the Draggable API for the List kit, you can do the following:
+
+The List kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on List kit with an array of the included items AND `drag_id` prop on ListItems. You will also need to include the `items` prop containing your array of listed items for the Draggable API.
+
+An additional optional boolean prop (set to true by default) of `drag_handle` is also available on ListItem kit to show the drag handle icon.

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

@@ -0,0 +1,38 @@
+<%= pb_rails("selectable_list",
+        props: {
+          enable_drag: true,
+          variant: "radio",
+          items: [
+            { drag_id: "41",
+              text: "Task 1",
+              input_options: {
+                value: "1",
+                name: "radio-name",
+              }
+            },
+            { drag_id: "42",
+              text: "Task 2",
+              checked: true,
+              input_options: {
+                value: "2",
+                name: "radio-name",
+              }
+            },
+            { drag_id: "43",
+              text: "Task 3",
+              input_options: {
+                value: "3",
+                name: "radio-name",
+              }
+            },
+            { drag_id: "44",
+              text: "Task 4",
+              input_options: {
+                value: "4",
+                name: "radio-name",
+              }
+            }
+          ]
+        }
+    )
+%>

data/app/pb_kits/playbook/pb_draggable/docs/_draggable_with_selectable_list_rails.md

@@ -0,0 +1,3 @@
+For a simplified version of the Draggable API for the SelectableList kit, you can do the following:
+
+The SelectableList kit is optimized to work with the draggable kit. To enable drag, use the `enable_drag` prop on SelectableList kit AND `drag_id` prop within the SelectableList kit prop. An additional optional boolean prop (set to true by default) of `drag_handle` is also available on SelectableList kit to show the drag handle icon.

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

@@ -11,6 +11,7 @@ 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,10 +13,9 @@ $small: 200px;
 $medium: 250px;
 $large: 300px;
 $xlarge: 365px;
-$animation-duration: 0.4s;
+$animation-duration: .25s;
 $z-index: $z_7;
 
-// Drawer animations
 @keyframes modalFadeInLeft {
   from {
     transform: translateX(-100%);
@@ -71,6 +70,62 @@ $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;
 }
@@ -94,34 +149,53 @@ body.PBDrawer__Body--close {
 
 // Drawer Styles
 .pb_drawer {
-   will-change: transform;
-   backface-visibility: hidden;
+  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;
+  }
 
   .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;
   }
@@ -129,17 +203,40 @@ 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;
@@ -165,23 +262,21 @@ body.PBDrawer__Body--close {
     max-width: $xlarge; 
   }
 
-  &_body_open {
-    overflow: hidden;
-  }
-
-  &_after_open {
+  &[class*="_full_"] {
+    width: 100%;
+    max-width: 100%; 
   }
 
-  &.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;
   }
 
@@ -200,78 +295,27 @@ 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;
-    animation-name: overlayFade;
-    animation-duration: $animation-duration;
+    opacity: 0;
+    animation: overlayFade $animation-duration ease-in-out forwards;
+    
+    &[class*="_left"]{
+      justify-content: flex-start;
+    }
 
-    &_after_open {
+    &[class*="_center"]{
+      justify-content: center;
     }
-    &_before_close {
-      animation-name: overlayFadeOut;
-      animation-duration: $animation-duration;
+
+    &[class*="_right"]{
+      justify-content: flex-end;
     }
-    &[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;
-          }
-        }
-      }
+    
+    &_before_close {
+      animation: overlayFadeOut $animation-duration ease-in-out forwards;
+      opacity: 0;
+      // height: 0;
     }
   }
 
@@ -281,99 +325,17 @@ body.PBDrawer__Body--close {
     left: 0;
     right: 0;
     bottom: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
     z-index: $z-index;
-    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 */
-    }
+    opacity: 1;
+    pointer-events: none;
 
-    &_after_open {
-      overflow: none; /* Ensure body remains scrollable */
-      pointer-events: none; /* Allow interaction inside the drawer itself */
-    }
     &_before_close {
-      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;
-          }
-        }
-      }
+      height: 0;
     }
   }
 
-  [class*="drawer_body"] {
-    padding: $space_sm;
-  }
-
-  [class*="drawer_header"] {
-    padding: $space_sm;
-  }
 
-  [class*="drawer_footer"] {
-    padding: $space_sm;
+  &.pb_drawer_before_close {
+    transform: translateX(-100%);
   }
 }