playbook_ui 14.11.1.pre.alpha.PLAY1750pbcontenttagkitbutton5341 → 14.11.1.pre.alpha.PLAY17445539

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d4151d717eddca9843cbee0cfc1bb9749f739689a6b2e59dc4008a54f93abeba
-  data.tar.gz: 96d539dc7f12d61d3a1ef76e6018731f7f244ef9972e21d81c404e85a292405d
+  metadata.gz: fc87bec1a3c8f7ff6d6e2ba75803628c9e58603b3cdeb99e594fbe848eef5744
+  data.tar.gz: 6ff0f99215db0507635fde51c622a3b958b5c7b838b7bc3ddc33dc274956263a
 SHA512:
-  metadata.gz: c4ca0515955bc7b8f7b2e1b235e3361e6e9cfe8ef38e7e2969aa99196439399ba473b0e7d75cab6ad617813bff735c00d9782762d57090cbf45d2b13efa2dd18
-  data.tar.gz: 26428d2ec5528dcdf8b5d7efb8935e4efe7726c848502bc54847f1bc251ac06d30df8de8a1b32567b7f851a73789c57a51f4141dbc7f2179f00a2b6f67084c9c
+  metadata.gz: 166e0a325c792b7ca130740893dbb9e77af28360afb2371b88a240b3692fcff92f6a1499fff7c943b900c00a788e1db1605c94401b55377ace1ffd0e7d742af9
+  data.tar.gz: ac0c4fb79a12b76a1915ae45a5d3a6936003c5b40127fe1cc34f51b4f03e2831588f9baa3f3caaeaa7a09dd29ce85fde825e4ed3ae6002656c0431f88e14154b

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 directino 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 direction is `desc: true`.

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,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_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;
+  }
 
   .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,25 @@ body.PBDrawer__Body--close {
     max-width: $xlarge; 
   }
 
-  &_body_open {
-    overflow: hidden;
+  &[class*="_full_"] {
+    width: 100%;
+    max-width: 100%; 
   }
 
-  &_after_open {
+  &_body_open {
+    overflow: hidden;
   }
 
-  &.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 +299,30 @@ 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;
+    }
+
+    &[class*="_center"]{
+      justify-content: center;
+    }
+
+    &[class*="_right"]{
+      justify-content: flex-end;
+    }
 
     &_after_open {
+      opacity: 1;
     }
+    
     &_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;
-          }
-        }
-      }
+      animation: overlayFadeOut $animation-duration ease-in-out forwards;
+      opacity: 0;
     }
   }
 
@@ -281,99 +332,25 @@ 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;
+    animation: overlayFade $animation-duration ease-in-out forwards;
+    pointer-events: none;
 
     &_after_open {
-      overflow: none; /* Ensure body remains scrollable */
-      pointer-events: none; /* Allow interaction inside the drawer itself */
+      opacity: 1;
     }
+    
     &_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;
-          }
-        }
-      }
+      animation: overlayFadeOut $animation-duration ease-in-out forwards;
     }
   }
 
-  [class*="drawer_body"] {
-    padding: $space_sm;
-  }
-
-  [class*="drawer_header"] {
-    padding: $space_sm;
+  &.pb_drawer_after_open {
+    transform: translateX(0);
   }
 
-  [class*="drawer_footer"] {
-    padding: $space_sm;
+  &.pb_drawer_before_close {
+    transform: translateX(-100%);
   }
 }