playbook_ui 14.7.0.pre.alpha.dependabotnpmandyarnfloatinguireact026284532 → 14.7.0.pre.alpha.dependabotnpmandyarnintltelinput24704448

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 3391826fbd0c3888055975c30b9860c0854d9b935ab1689bf289f78fb0f7bd12
-  data.tar.gz: bd7823ce4a8a67ecc47829eb53a287f3151a013d44b879fed438f0476b05563b
+  metadata.gz: af27bbc68c5af9c78ae2a7ea4b8fec2f9dc7226d41a138c38ada6b3cb5e8b03b
+  data.tar.gz: 33704917fbbfc70e3ba6f1e5193085237b8ed7fd1c85e776dbbbacd3e3423e90
 SHA512:
-  metadata.gz: 184f858be149b3560998f7eec5864a0160250dd5521c83cc87200cd972ec1fad46bad83f1573fcf8661e125aff229bc7911fe0fa8938531ecfe7263ee07d526a
-  data.tar.gz: f416b02c84e76104077e711e06c0fbb530aac613104ae337bf8b1880d95d88a01e06f33d006a4327849eb7276b27c8cbe8ccb74d67e5ac2857a3ed252f503927
+  metadata.gz: edebbf85a4e8f8d4b87614225aaf4a0fa565739709ecd8b2b9bbe032e606184e4ef855d34a7e714d8ca5bf0afffa5ed2a5d9ae3f086b001c59c4e0726adaf434
+  data.tar.gz: 1ea48f5e83772d3f33682e8456fc1250a3fe4eeaf5d75937fe1d608578f52a53968f2c47976267f3ddbe9a0b7a02d7ee5b5e66d66d7a4ca387cc81a94b620e0d

data/app/pb_kits/playbook/pb_card/docs/_card_light.md

@@ -1 +1 @@
-Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>  
+Card can leverage the max-width property. Learn more in our <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">visual guidelines.</a>

data/app/pb_kits/playbook/pb_date/_date.scss

@@ -28,8 +28,5 @@
         [class^=pb_title_kit] {
             color: $text_dk_default !important;
         }
-        [class^=pb_body_kit], [class^=pb_caption_kit] {
-            color: $text_dk_light !important;
-        }
     }
 }

data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts

@@ -143,7 +143,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
 
     } else if (selectionType === "quickpick") {
       //------- QUICKPICK VARIANT PLUGIN -------------//
-      pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates, defaultDate as string))
+      pluginList.push(quickPickPlugin(thisRangesEndToday, customQuickPickDates))
     }
 
     // time selection

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

@@ -12,7 +12,6 @@ examples:
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
-  - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max
@@ -43,7 +42,6 @@ examples:
   - date_picker_quick_pick_range_limit: Range (Quick Pick w/ “This” Range limit)
   - date_picker_quick_pick_custom: Custom Quick Pick Dates
   - date_picker_quick_pick_custom_override: Custom Quick Pick Dates (append to defaults)
-  - date_picker_quick_pick_default_date: Range (Quick Pick w/ Default Date)
   - date_picker_format: Format
   - date_picker_disabled: Disabled Dates
   - date_picker_min_max: Min Max

data/app/pb_kits/playbook/pb_date_picker/docs/index.js

@@ -25,4 +25,3 @@ export { default as DatePickerQuickPickRangeLimit } from './_date_picker_quick_p
 export { default as DatePickerOnClose } from './_date_picker_on_close.jsx'
 export { default as DatePickerQuickPickCustom } from './_date_picker_quick_pick_custom'
 export { default as DatePickerQuickPickCustomOverride } from './_date_picker_quick_pick_custom_override'
-export { default as DatePickerQuickPickDefaultDate } from './_date_picker_quick_pick_default_date'

data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx

@@ -26,7 +26,7 @@ type customQuickPickDatesType = {
 
 let activeLabel = ""
 
-const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: customQuickPickDatesType | undefined, defaultDate: string) => {
+const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: customQuickPickDatesType | undefined) => {
   return function (fp: FpTypes & any): any {
     const today = new Date()
     const yesterday = DateTime.getYesterdayDate(new Date())
@@ -185,8 +185,6 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
     return {
       // onReady is a hook from flatpickr that runs when calendar is in a ready state
       onReady(selectedDates: Array<Date>) {
-        let defaultDateRange
-
         // loop through the ranges and create an anchor tag for each range and add an event listener to set the date when user clicks on a date range
         for (const [label, range] of Object.entries(pluginData.ranges)) {
           addRangeButton(label).addEventListener('click', function () {
@@ -203,14 +201,6 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
               fp.close();
             }
           });
-
-          // check if there is a default date and set the default date range and label for quick pick
-          if (defaultDate) {
-            if (label.toLowerCase() === defaultDate.toLowerCase()) {
-              activeLabel = label
-              defaultDateRange = range
-            }
-          }
         }
         // conditional to check if there is a dropdown to add it to the calendar container and get it the classes it needs
         if (pluginData.rangesNav.children.length > 0) {
@@ -226,12 +216,6 @@ const quickPickPlugin = (thisRangesEndToday: boolean, customQuickPickDates: cust
           // function to give the active button the active class
           selectActiveRangeButton(selectedDates);
         }
-
-        // set the default date range if there is one and select the active button
-        if (defaultDateRange) {
-          fp.setDate(defaultDateRange, false);
-          selectActiveRangeButton(defaultDateRange);
-        }
       },
       onValueUpdate(selectedDates: Array<Date>) {
         selectActiveRangeButton(selectedDates)

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

@@ -8,10 +8,4 @@ examples:
   - draggable_with_cards: Draggable with Cards
   - draggable_multiple_containers: Dragging Across Multiple Containers
   
-  rails:
-  - draggable_default_rails: Default
-  - draggable_with_list_rails: Draggable with List Kit
-  - draggable_with_cards_rails: Draggable with Cards
-
-
   

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

@@ -7,76 +7,54 @@
 @import "../tokens/animation-curves";
 @import "../tokens/positioning";
 
-$gutter: $space_lg;
-$xsmall: 64px;
-$small: 200px;
-$medium: 250px;
-$large: 300px;
-$xlarge: 365px;
-$animation-duration: 0.4s;
-$z-index: $z_7;
-
 // Drawer animations
-@keyframes modalFadeInLeft {
-  from {
-    transform: translateX(-100%);
-  }
-  to {
-    transform: translateX(0);
-  }
-}
-
-@keyframes modalFadeOutLeft {
+// Drawer animations for fading in and out from the center
+@keyframes modalFadeIn {
   from {
-    transform: translateX(0);
+    transform: translate3d(0, -100%, 0);
+    opacity: 0;
   }
   to {
-    transform: translateX(-100%);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
   }
 }
 
-@keyframes modalFadeInRight {
+@keyframes modalFadeOut {
   from {
-    transform: translateX(100%);
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
   }
   to {
-    transform: translateX(0);
+    transform: translate3d(0, -50%, 0);
+    opacity: 0;
   }
 }
 
-@keyframes modalFadeOutRight {
-  from {
-    transform: translateX(0);
-  }
-  to {
-    transform: translateX(100%);
-  }
-}
+// Drawer animations for fading in and out from the right side
 
-@keyframes modalFadeIn {
+@keyframes overlayFade {
   from {
-    transform: translateY(-100%);
+    opacity: 0;
+    transform: translateY(0);
   }
   to {
+    opacity: 1;
     transform: translateY(0);
   }
 }
 
-@keyframes modalFadeOut {
+@keyframes overlayFadeOut {
   from {
-    transform: translateY(0);
+    opacity: 1;
   }
   to {
-    transform: translateY(-100%);
+    opacity: 0;
   }
 }
 
-body.PBDrawer__Body--open {
-  transition: margin-left $animation-duration ease-in, margin-right $animation-duration ease-in;
-}
-
-body.PBDrawer__Body--close {
-  transition: margin-left $animation-duration ease-out, margin-right $animation-duration ease-out;
+body.ReactModal__Body--open {
+  transition: margin-left 0.3s ease-in-out, margin-right 0.3s ease-in-out;
 }
 
 .pb_drawer_lg_left.pb_drawer {
@@ -88,21 +66,28 @@ body.PBDrawer__Body--close {
 }
 
 .pb_drawer.pb_drawer_after_open {
-  transform: translate3d(0, 0, 0);
+  transform: translateX(0); /* Slide in */
 }
-
 // Drawer Styles
 .pb_drawer {
-   will-change: transform;
-   backface-visibility: hidden;
+
+  // Local Variables
+  $gutter: $space_lg;
+  $xsmall: 64px;
+  $small: 200px;
+  $medium: 250px;
+  $large: 300px;
+  $xlarge: 365px;
+  $animation-duration: .2s;
+  $z-index: 100;
+  $opacity_visible: 1;
+  $opacity_hidden: 0;
 
   .drawer {
     position: sticky;
-    will-change: transform;
-    backface-visibility: hidden;
     top: 0;
     background-color: $white;
-    z-index: $z_9;
+    z-index: $z_8;
   }
 
   // @include pb_card;
@@ -112,31 +97,41 @@ body.PBDrawer__Body--close {
   max-height: calc(100vh - #{$gutter * 2});
   max-width: calc(100vw - #{$gutter * 2});
   overflow: auto;
+  animation-name: modalFadeIn;
   animation-duration: $animation-duration;
   outline: none;
+  animation-timing-function: $easeInOutQuint;
+  transition: transform 0.3s ease-in-out;
 
-  // General _before_close styles
-  &[class*="_before_close"] {
-    animation-name: modalFadeOut;
-    animation-duration: $animation-duration;
+  &.drawer_border_full {
+    box-shadow: none;
+    border: 2px solid #f3f7fb;
   }
 
-  &[class*="_left"] {
-    animation-name: modalFadeInLeft;
+  &.drawer_border_right {
+    border-right: 2px solid #f3f7fb;
   }
 
-  &[class*="_left"][class*="_before_close"] {
-    animation-name: modalFadeOutLeft;
-    animation-duration: $animation-duration;
+  &.drawer_border_left {
+    border-left: 2px solid #f3f7fb;
   }
 
-  &[class*="_right"] {
-    animation-name: modalFadeInRight;
+  &[class*="_left"] {
+    animation-name: modalFadeInLeft;
+    &[class*="_before_close"] {
+      animation-name: modalFadeOutLeft;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
   }
 
-  &[class*="_right"][class*="_before_close"] {
-    animation-name: modalFadeOutRight;
-    animation-duration: $animation-duration;
+  &[class*="_right"] {
+    animation-name: modalFadeInRight;
+    &[class*="_before_close"] {
+      animation-name: modalFadeOutRight;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
   }
 
   &[class*="_xs_"] {
@@ -169,25 +164,19 @@ body.PBDrawer__Body--close {
   }
 
   &_after_open {
-  }
-
-  &.drawer_border_full {
-    box-shadow: none;
-    border: 2px solid #f3f7fb;
-  }
-
-  &.drawer_border_right {
-    border-right: 2px solid #f3f7fb;
-  }
-
-  &.drawer_border_left {
-    border-left: 2px solid #f3f7fb;
+    opacity: $opacity_visible;
   }
 
   &.no-background {
     background-color: transparent; 
   }
 
+  &[class*="_before_close"] {
+    animation-name: modalFadeOut;
+    animation-duration: $animation-duration;
+    opacity: $opacity_hidden;
+  }
+
   &_close_icon {
     cursor: pointer;
   }
@@ -207,10 +196,12 @@ body.PBDrawer__Body--close {
     animation-duration: $animation-duration;
 
     &_after_open {
+      opacity: $opacity_visible;
     }
     &_before_close {
       animation-name: overlayFadeOut;
       animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
     }
     &[class*="full_height"] {
       &[class*="_left"]{
@@ -267,12 +258,12 @@ body.PBDrawer__Body--close {
         &[class*="_xl_"] {
           width: $xlarge;
           .dialog_footer {
-            width: $xlarge;
-          }
+          width: $xlarge;
         }
       }
     }
   }
+}
 
   &_no_overlay {
     position: fixed;
@@ -289,18 +280,20 @@ body.PBDrawer__Body--close {
     overflow: none; /* Ensure body remains scrollable */
     pointer-events: none; /* Allow interaction inside the drawer itself */
 
-    body.PBDrawer--open {
+    body.ReactModal__Body--open {
       overflow: none; /* Ensure body remains scrollable */
       pointer-events: none; /* Allow interaction inside the drawer itself */
     }
 
     &_after_open {
+      opacity: $opacity_visible;
       overflow: none; /* Ensure body remains scrollable */
       pointer-events: none; /* Allow interaction inside the drawer itself */
     }
     &_before_close {
       animation-name: overlayFadeOut;
       animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
     }
     &[class*="full_height"] {
       &[class*="_left"]{
@@ -357,22 +350,116 @@ body.PBDrawer__Body--close {
         &[class*="_xl_"] {
           width: $xlarge;
           .dialog_footer {
-            width: $xlarge;
-          }
+          width: $xlarge;
         }
       }
     }
   }
+}
+
+[class*="drawer_body"] {
+  padding: $space_sm;
+}
+
+[class*="drawer_header"] {
+  padding: $space_sm;
+}
+
+[class*="drawer_footer"] {
+  padding: $space_sm;
+}
+
+//styles specific to rails version of kit
+// rails version has own wrapper because of the way the overlay functions for the HTML drawer used to create this
+.pb_drawer_wrapper_rails {
+  $medium: 500px;
+  $large: 800px;
+  $xlarge: 1150px;
+
+  &[class*="full_height"] {
+    &[class*="_left"]{
+      .pb_drawer_rails {
+        margin: unset !important;
+        margin-right: auto !important;
+      }
+    }
+
+    &[class*="_center"]{
+      justify-content: center;
+    }
+
+    &[class*="_right"]{
+      .pb_drawer_rails {
+        margin: unset !important;
+        margin-left: auto !important;
+      }
+    }
+
+    .pb_drawer {
+      height: 100% !important;
+      max-height: 100% !important;
+      max-width: 100%;
+      // 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*="_sm"] {
+        width: $medium;
+        .drawer_footer {
+          width: $medium;
+        }
+      }
+      &[class*="_md"] {
+        width: $large;
+        .drawer_footer {
+          width: $large;
+        }
+      }
+      &[class*="_lg"] {
+        width: $xlarge;
+        .drawer_footer {
+          width: $xlarge;
+        }
+      }
+    }
+  }
+
+  // Fixes for stylesheets in nitro that were conflicting with our kit. DO NOT REMOVE.
+  // Conflicts were only apparent in nitro, not in playbook local env
+  .pb_drawer_rails {
+    position: fixed !important;
+    top: 0 !important;
+    padding: unset !important;
+    margin: auto;
 
-  [class*="drawer_body"] {
-    padding: $space_sm;
   }
 
-  [class*="drawer_header"] {
-    padding: $space_sm;
+  // Overlay for rails kit
+  drawer::backdrop {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: rgba($bg_dark, $opacity_4);
+    animation-name: overlayFade;
+    animation-duration: 0.2s;
   }
 
-  [class*="drawer_footer"] {
-    padding: $space_sm;
+  .drawer-button-class {
+    background-color: unset;
+    border: none;
+    cursor: pointer;
   }
 }
+}