playbook_ui 14.25.0.pre.alpha.testingcss9713 → 14.25.0.pre.alpha.testingcss9751

data/app/pb_kits/playbook/pb_dialog/_dialog.scss

@@ -5,49 +5,121 @@
 @import "../tokens/border_radius";
 @import "../tokens/spacing";
 @import "../tokens/animation-curves";
+@import "../tokens/positioning";
 
 // Dialog animations
+// Dialog animations for fading in and out from the center
 @keyframes modalFadeIn {
-  from { transform: translate3d(0, -100%, 0); opacity: 0; }
-  to { transform: translate3d(0, 0, 0); opacity: 1; }
+  from {
+    transform: translate3d(0, -100%, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
 }
 
 @keyframes modalFadeOut {
-  from { transform: translate3d(0, 0, 0); opacity: 1; }
-  to { transform: translate3d(0, -50%, 0); opacity: 0; }
+  from {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(0, -50%, 0);
+    opacity: 0;
+  }
 }
 
+// Dialog animations for fading in and out from the left side
 @keyframes modalFadeInLeft {
-  from { transform: translate3d(-100%, 0, 0); opacity: 0; }
-  to { transform: translate3d(0, 0, 0); opacity: 1; }
+  from {
+    transform: translate3d(-100%, 0, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
 }
 
 @keyframes modalFadeOutLeft {
-  from { transform: translate3d(0, 0, 0); opacity: 1; }
-  to { transform: translate3d(-50%, 0, 0); opacity: 0; }
+  from {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(-50%, 0, 0);
+    opacity: 0;
+  }
 }
 
+
+// Dialog animations for fading in and out from the right side
 @keyframes modalFadeInRight {
-  from { transform: translate3d(100%, 0, 0); opacity: 0; }
-  to { transform: translate3d(0, 0, 0); opacity: 1; }
+  from {
+    transform: translate3d(100%, 0, 0);
+    opacity: 0;
+  }
+  to {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
 }
 
 @keyframes modalFadeOutRight {
-  from { transform: translate3d(0, 0, 0); opacity: 1; }
-  to { transform: translate3d(50%, 0, 0); opacity: 0; }
+  from {
+    transform: translate3d(0, 0, 0);
+    opacity: 1;
+  }
+  to {
+    transform: translate3d(50%, 0, 0);
+    opacity: 0;
+  }
 }
 
 @keyframes overlayFade {
-  from { opacity: 0; transform: translateY(0); }
-  to { opacity: 1; transform: translateY(0); }
+  from {
+    opacity: 0;
+    transform: translateY(0);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
 
 @keyframes overlayFadeOut {
-  from { opacity: 1; }
-  to { opacity: 0; }
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
 }
 
-.pb_dialog {
+// Dialog Styles
+.pb_dialog,
+.pb_dialog_sm_left,
+.pb_dialog_sm_center,
+.pb_dialog_sm_right,
+.pb_dialog_md_left,
+.pb_dialog_md_center,
+.pb_dialog_md_right,
+.pb_dialog_lg_left,
+.pb_dialog_lg_center,
+.pb_dialog_lg_right,
+.pb_dialog_xl_left,
+.pb_dialog_xl_center,
+.pb_dialog_xl_right,
+.pb_dialog_status_size_left,
+.pb_dialog_status_size_center,
+.pb_dialog_status_size_right,
+.pb_dialog_content_left,
+.pb_dialog_content_center,
+.pb_dialog_content_right {
+
+  // Local Variables
   $gutter: $space_lg;
   $small: 300px;
   $status_size: 375px;
@@ -59,6 +131,18 @@
   $opacity_visible: 1;
   $opacity_hidden: 0;
 
+  .dialog_sticky_header {
+    position: sticky;
+    top: 0;
+    background-color: $white;
+    z-index: $z_8;
+  }
+
+  .dialog_status_text_align {
+    text-align: center;
+  }
+
+  // @include pb_card;
   background-color: $white;
   box-shadow: $shadow_deepest;
   border: 0;
@@ -70,101 +154,415 @@
   animation-duration: $animation-duration;
   outline: none;
   animation-timing-function: $easeInOutQuint;
+}
 
-  &.pb_dialog_left { animation-name: modalFadeInLeft; }
-  &.pb_dialog_left.pb_dialog_before_close { animation-name: modalFadeOutLeft; opacity: $opacity_hidden; }
+// Left placement animations
+.pb_dialog_sm_left,
+.pb_dialog_md_left,
+.pb_dialog_lg_left,
+.pb_dialog_xl_left,
+.pb_dialog_status_size_left,
+.pb_dialog_content_left {
+  animation-name: modalFadeInLeft;
+  &.pb_dialog_before_close {
+    animation-name: modalFadeOutLeft;
+    animation-duration: .2s;
+    opacity: 0;
+  }
+}
 
-  &.pb_dialog_right { animation-name: modalFadeInRight; }
-  &.pb_dialog_right.pb_dialog_before_close { animation-name: modalFadeOutRight; opacity: $opacity_hidden; }
+// Right placement animations
+.pb_dialog_sm_right,
+.pb_dialog_md_right,
+.pb_dialog_lg_right,
+.pb_dialog_xl_right,
+.pb_dialog_status_size_right,
+.pb_dialog_content_right {
+  animation-name: modalFadeInRight;
+  &.pb_dialog_before_close {
+    animation-name: modalFadeOutRight;
+    animation-duration: .2s;
+    opacity: 0;
+  }
+}
 
-  &.pb_dialog_status_size { width: $status_size; }
-  &.pb_dialog_sm { width: $small; }
-  &.pb_dialog_md { width: $medium; }
-  &.pb_dialog_lg { width: $large; }
+// Size variations
+.pb_dialog_status_size_left,
+.pb_dialog_status_size_center,
+.pb_dialog_status_size_right {
+  width: 375px;
+}
 
-  &.pb_dialog_body_open { overflow: hidden; }
-  &.pb_dialog_after_open { opacity: $opacity_visible; }
-  &.pb_dialog_before_close { animation-name: modalFadeOut; opacity: $opacity_hidden; }
+.pb_dialog_sm_left,
+.pb_dialog_sm_center,
+.pb_dialog_sm_right {
+  width: 300px;
+}
 
-  &_close_icon { cursor: pointer; font-size: $font_base; line-height: $lh_normal; }
+.pb_dialog_md_left,
+.pb_dialog_md_center,
+.pb_dialog_md_right {
+  width: 500px;
+}
 
-  &_overlay {
-    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);
-    z-index: $z-index;
-    animation-name: overlayFade;
-    animation-duration: $animation-duration;
+.pb_dialog_lg_left,
+.pb_dialog_lg_center,
+.pb_dialog_lg_right {
+  width: 800px;
+}
 
-    &.pb_dialog_overlay_after_open { opacity: $opacity_visible; }
-    &.pb_dialog_overlay_before_close { animation-name: overlayFadeOut; opacity: $opacity_hidden; }
+// Dialog state classes
+.pb_dialog_body_open {
+  overflow: hidden;
+}
+
+.pb_dialog_after_open {
+  opacity: 1;
+}
 
-    &.full_height {
-      &.pb_dialog_left { justify-content: flex-start; }
-      &.pb_dialog_center { justify-content: center; }
-      &.pb_dialog_right { justify-content: flex-end; }
+.pb_dialog_before_close {
+  animation-name: modalFadeOut;
+  animation-duration: .2s;
+  opacity: 0;
+}
 
-      .pb_dialog {
-        border-radius: 0;
-        height: 100%; max-height: 100%; max-width: none;
+.pb_dialog_close_icon {
+  cursor: pointer;
+  font-size: $font_base;
+  line-height: $lh_normal;
+}
 
-        .dialog-pseudo-footer { height: $space_xl * 2; }
+.pb_dialog_overlay {
+  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);
+  z-index: 100;
+  animation-name: overlayFade;
+  animation-duration: .2s;
+
+  &.pb_dialog_overlay_after_open {
+    opacity: 1;
+  }
+  &.pb_dialog_overlay_before_close {
+    animation-name: overlayFadeOut;
+    animation-duration: .2s;
+    opacity: 0;
+  }
+  &.full_height_left {
+    justify-content: flex-start;
+    
+    .pb_dialog {
+      border-radius: 0;
+      height: 100%;
+      max-height: 100%;
+      max-width: none;
+      // This empty div only has height when dialog is full height
+      // Fix for dialog body content disappearing behind sticky footer
+      .dialog-pseudo-footer {
+        height: $space_xl * 2;
+      }
+      .dialog_footer {
+        position: fixed;
+        bottom: 0;
+        background-color: $white;
+        max-width: 100%;
+      }
+      &.pb_dialog_sm_left,
+      &.pb_dialog_sm_center,
+      &.pb_dialog_sm_right {
+        width: 500px;
+        .dialog_footer {
+          width: 500px;
+        }
+      }
+      &.pb_dialog_md_left,
+      &.pb_dialog_md_center,
+      &.pb_dialog_md_right {
+        width: 800px;
+        .dialog_footer {
+          width: 800px;
+        }
+      }
+      &.pb_dialog_lg_left,
+      &.pb_dialog_lg_center,
+      &.pb_dialog_lg_right {
+        width: 1150px;
+        .dialog_footer {
+          width: 1150px;
+        }
+      }
+    }
+  }
 
+  &.full_height_center {
+    justify-content: center;
+    
+    .pb_dialog {
+      border-radius: 0;
+      height: 100%;
+      max-height: 100%;
+      max-width: none;
+      .dialog-pseudo-footer {
+        height: $space_xl * 2;
+      }
+      .dialog_footer {
+        position: fixed;
+        bottom: 0;
+        background-color: $white;
+        max-width: 100%;
+      }
+      &.pb_dialog_sm_left,
+      &.pb_dialog_sm_center,
+      &.pb_dialog_sm_right {
+        width: 500px;
+        .dialog_footer {
+          width: 500px;
+        }
+      }
+      &.pb_dialog_md_left,
+      &.pb_dialog_md_center,
+      &.pb_dialog_md_right {
+        width: 800px;
         .dialog_footer {
-          position: fixed; bottom: 0;
-          background-color: $white; max-width: 100%;
+          width: 800px;
         }
+      }
+      &.pb_dialog_lg_left,
+      &.pb_dialog_lg_center,
+      &.pb_dialog_lg_right {
+        width: 1150px;
+        .dialog_footer {
+          width: 1150px;
+        }
+      }
+    }
+  }
 
-        &.pb_dialog_sm .dialog_footer { width: $medium; }
-        &.pb_dialog_md .dialog_footer { width: $large; }
-        &.pb_dialog_lg .dialog_footer { width: $xlarge; }
+  &.full_height_right {
+    justify-content: flex-end;
+    
+    .pb_dialog {
+      border-radius: 0;
+      height: 100%;
+      max-height: 100%;
+      max-width: none;
+      .dialog-pseudo-footer {
+        height: $space_xl * 2;
+      }
+      .dialog_footer {
+        position: fixed;
+        bottom: 0;
+        background-color: $white;
+        max-width: 100%;
+      }
+      &.pb_dialog_sm_left,
+      &.pb_dialog_sm_center,
+      &.pb_dialog_sm_right {
+        width: 500px;
+        .dialog_footer {
+          width: 500px;
+        }
+      }
+      &.pb_dialog_md_left,
+      &.pb_dialog_md_center,
+      &.pb_dialog_md_right {
+        width: 800px;
+        .dialog_footer {
+          width: 800px;
+        }
+      }
+      &.pb_dialog_lg_left,
+      &.pb_dialog_lg_center,
+      &.pb_dialog_lg_right {
+        width: 1150px;
+        .dialog_footer {
+          width: 1150px;
+        }
       }
     }
   }
 }
 
-.dialog_body, .dialog_header, .dialog_footer {
+.dialog_body {
   padding: $space_sm;
 }
 
-.pb_dialog_wrapper_rails {
-  $medium: 500px; $large: 800px; $xlarge: 1150px;
+.dialog_header {
+  padding: $space_sm;
+}
 
-  .dialog_status_text_align { text-align: center; }
+.dialog_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 dialog used to create this
+.pb_dialog_wrapper_rails {
+  $medium: 500px;
+  $large: 800px;
+  $xlarge: 1150px;
 
-  &.full_height {
-    &.pb_dialog_left .pb_dialog_rails { margin-right: auto !important; }
-    &.pb_dialog_center { justify-content: center; }
-    &.pb_dialog_right .pb_dialog_rails { margin-left: auto !important; }
+  .dialog_status_text_align {
+    text-align: center;
+  }
 
+  &.full_height_left {
+    .pb_dialog_rails {
+      margin: unset !important;
+      margin-right: auto !important;
+    }
+    
     .pb_dialog {
       border-radius: 0;
       height: 100% !important;
       max-height: 100% !important;
       max-width: 100%;
+      // This empty div only has height when dialog is full height.
+      // Fix for dialog body content disappearing behind sticky footer
+      .dialog-pseudo-footer {
+        height: $space_xl * 2;
+      }
+      .dialog_footer {
+        position:fixed;
+        bottom: 0;
+        background-color: $white;
+        max-width: 100%;
+      }
+      &.pb_dialog_sm_left,
+      &.pb_dialog_sm_center,
+      &.pb_dialog_sm_right {
+        width: $medium;
+        .dialog_footer {
+          width: $medium;
+        }
+      }
+      &.pb_dialog_md_left,
+      &.pb_dialog_md_center,
+      &.pb_dialog_md_right {
+        width: $large;
+        .dialog_footer {
+          width: $large;
+        }
+      }
+      &.pb_dialog_lg_left,
+      &.pb_dialog_lg_center,
+      &.pb_dialog_lg_right {
+        width: $xlarge;
+        .dialog_footer {
+          width: $xlarge;
+        }
+      }
+    }
+  }
 
-      .dialog-pseudo-footer { height: $space_xl * 2; }
-
+  &.full_height_center {
+    justify-content: center;
+    
+    .pb_dialog {
+      border-radius: 0;
+      height: 100% !important;
+      max-height: 100% !important;
+      max-width: 100%;
+      .dialog-pseudo-footer {
+        height: $space_xl * 2;
+      }
       .dialog_footer {
-        position: fixed;
+        position:fixed;
         bottom: 0;
         background-color: $white;
         max-width: 100%;
       }
+      &.pb_dialog_sm_left,
+      &.pb_dialog_sm_center,
+      &.pb_dialog_sm_right {
+        width: $medium;
+        .dialog_footer {
+          width: $medium;
+        }
+      }
+      &.pb_dialog_md_left,
+      &.pb_dialog_md_center,
+      &.pb_dialog_md_right {
+        width: $large;
+        .dialog_footer {
+          width: $large;
+        }
+      }
+      &.pb_dialog_lg_left,
+      &.pb_dialog_lg_center,
+      &.pb_dialog_lg_right {
+        width: $xlarge;
+        .dialog_footer {
+          width: $xlarge;
+        }
+      }
+    }
+  }
 
-      &.pb_dialog_sm .dialog_footer { width: $medium; }
-      &.pb_dialog_md .dialog_footer { width: $large; }
-      &.pb_dialog_lg .dialog_footer { width: $xlarge; }
+  &.full_height_right {
+    .pb_dialog_rails {
+      margin: unset !important;
+      margin-left: auto !important;
+    }
+    
+    .pb_dialog {
+      border-radius: 0;
+      height: 100% !important;
+      max-height: 100% !important;
+      max-width: 100%;
+      .dialog-pseudo-footer {
+        height: $space_xl * 2;
+      }
+      .dialog_footer {
+        position:fixed;
+        bottom: 0;
+        background-color: $white;
+        max-width: 100%;
+      }
+      &.pb_dialog_sm_left,
+      &.pb_dialog_sm_center,
+      &.pb_dialog_sm_right {
+        width: $medium;
+        .dialog_footer {
+          width: $medium;
+        }
+      }
+      &.pb_dialog_md_left,
+      &.pb_dialog_md_center,
+      &.pb_dialog_md_right {
+        width: $large;
+        .dialog_footer {
+          width: $large;
+        }
+      }
+      &.pb_dialog_lg_left,
+      &.pb_dialog_lg_center,
+      &.pb_dialog_lg_right {
+        width: $xlarge;
+        .dialog_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_dialog_rails {
     position: fixed !important;
     top: 0 !important;
     padding: unset !important;
     margin: auto;
+
   }
 
+  // Overlay for rails kit
   dialog::backdrop {
     position: fixed;
     top: 0;

data/app/pb_kits/playbook/pb_dialog/docs/_dialog_loading.html.erb

@@ -21,13 +21,27 @@
         let currentClass = okayLoadingButton.className;
         let cancelClass = cancelButton ? cancelButton.className : "";
 
+        okayLoadingButton.disabled = true;
+        okayLoadingButton.classList.add("pb_button_loading");
+        okayLoadingButton.classList.remove("pb_button_enabled");
+        okayLoadingButton.classList.add("pb_button_disabled");
+
+        if (cancelButton) {
+            cancelButton.disabled = true;
+            cancelButton.classList.remove("pb_button_enabled");
+            cancelButton.classList.add("pb_button_disabled");
+        }
+
         setTimeout(function() {
             okayLoadingButton.disabled = false;
-            okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
+            okayLoadingButton.classList.remove("pb_button_loading");
+            okayLoadingButton.classList.remove("pb_button_disabled");
+            okayLoadingButton.classList.add("pb_button_enabled");
 
             if (cancelButton) {
             cancelButton.disabled = false;
-            cancelButton.className = cancelClass.replace("_disabled", "_enabled");
+            cancelButton.classList.remove("pb_button_disabled");
+            cancelButton.classList.add("pb_button_enabled");
             }
         }, 5000);
 

data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.scss

@@ -1,6 +1,7 @@
 @import "../tokens/colors";
 
-.pb_distribution_bar {
+.pb_distribution_bar_lg,
+.pb_distribution_bar_sm {
   $bar_colors: map-merge($data_colors, $status_colors);
   $small_bar: 8px;
   $large_bar: 36px;
@@ -27,10 +28,12 @@
       border-bottom-right-radius: $large_bar;
     }
   }
-  &._sm {
-    height: $small_bar;
-  }
-  &._lg {
-    height: $large_bar;
-  }
 }
+
+.pb_distribution_bar_sm {
+  height: 8px;
+}
+
+.pb_distribution_bar_lg {
+  height: 36px;
+}

data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss

@@ -141,7 +141,7 @@
     }
 
     &.error {
-      .pb_body_kit {
+      [class*=pb_body_kit] {
         margin-top: $space_xs / 2;
       }
 
@@ -287,4 +287,4 @@
       }
     }
   }
-}
+}