playbook_ui 14.25.0.pre.alpha.testingcss9700 → 14.25.0.pre.alpha.testingcss9751

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

@@ -99,7 +99,25 @@
 }
 
 // Dialog Styles
-.pb_dialog {
+.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;
@@ -136,144 +154,250 @@
   animation-duration: $animation-duration;
   outline: none;
   animation-timing-function: $easeInOutQuint;
+}
 
-  &[class*="_left"] {
-    animation-name: modalFadeInLeft;
-    &[class*="_before_close"] {
-      animation-name: modalFadeOutLeft;
-      animation-duration: $animation-duration;
-      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;
   }
+}
 
-  &[class*="_right"] {
-    animation-name: modalFadeInRight;
-    &[class*="_before_close"] {
-      animation-name: modalFadeOutRight;
-      animation-duration: $animation-duration;
-      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;
   }
+}
 
-  &[class*="_status_size"] {
-    width: $status_size;
-  }
+// Size variations
+.pb_dialog_status_size_left,
+.pb_dialog_status_size_center,
+.pb_dialog_status_size_right {
+  width: 375px;
+}
 
-  &[class*="_sm"] {
-    width: $small;
-  }
+.pb_dialog_sm_left,
+.pb_dialog_sm_center,
+.pb_dialog_sm_right {
+  width: 300px;
+}
 
-  &[class*="_md"] {
-    width: $medium;
-  }
+.pb_dialog_md_left,
+.pb_dialog_md_center,
+.pb_dialog_md_right {
+  width: 500px;
+}
 
-  &[class*="_lg"] {
-    width: $large;
-  }
+.pb_dialog_lg_left,
+.pb_dialog_lg_center,
+.pb_dialog_lg_right {
+  width: 800px;
+}
 
-  &_body_open {
-    overflow: hidden;
-  }
+// Dialog state classes
+.pb_dialog_body_open {
+  overflow: hidden;
+}
 
-  &_after_open {
-    opacity: $opacity_visible;
-  }
+.pb_dialog_after_open {
+  opacity: 1;
+}
 
-  &[class*="_before_close"] {
-    animation-name: modalFadeOut;
-    animation-duration: $animation-duration;
-    opacity: $opacity_hidden;
-  }
+.pb_dialog_before_close {
+  animation-name: modalFadeOut;
+  animation-duration: .2s;
+  opacity: 0;
+}
 
-  &_close_icon {
-    cursor: pointer;
-    font-size: $font_base;
-    line-height: $lh_normal;
+.pb_dialog_close_icon {
+  cursor: pointer;
+  font-size: $font_base;
+  line-height: $lh_normal;
+}
+
+.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;
+        }
+      }
+    }
   }
 
-  &_overlay {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    display: flex;
-    align-items: center;
+  &.full_height_center {
     justify-content: center;
-    background-color: rgba($bg_dark, $opacity_4);
-    z-index: $z-index;
-    animation-name: overlayFade;
-    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"]{
-        justify-content: flex-start;
+    
+    .pb_dialog {
+      border-radius: 0;
+      height: 100%;
+      max-height: 100%;
+      max-width: none;
+      .dialog-pseudo-footer {
+        height: $space_xl * 2;
       }
-
-      &[class*="_center"]{
-        justify-content: center;
+      .dialog_footer {
+        position: fixed;
+        bottom: 0;
+        background-color: $white;
+        max-width: 100%;
       }
-
-      &[class*="_right"]{
-        justify-content: flex-end;
+      &.pb_dialog_sm_left,
+      &.pb_dialog_sm_center,
+      &.pb_dialog_sm_right {
+        width: 500px;
+        .dialog_footer {
+          width: 500px;
+        }
       }
-
-      .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;
+      &.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 {
-          position: fixed;
-          bottom: 0;
-          background-color: $white;
-          max-width: 100%;
+          width: 1150px;
         }
-        &[class*="_sm"] {
-          width: $medium;
-          .dialog_footer {
-            width: $medium;
-          }
+      }
+    }
+  }
+
+  &.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;
         }
-        &[class*="_md"] {
-          width: $large;
-          .dialog_footer {
-            width: $large;
-          }
+      }
+      &.pb_dialog_md_left,
+      &.pb_dialog_md_center,
+      &.pb_dialog_md_right {
+        width: 800px;
+        .dialog_footer {
+          width: 800px;
         }
-        &[class*="_lg"] {
-          width: $xlarge;
-          .dialog_footer {
-            width: $xlarge;
-          }
+      }
+      &.pb_dialog_lg_left,
+      &.pb_dialog_lg_center,
+      &.pb_dialog_lg_right {
+        width: 1150px;
+        .dialog_footer {
+          width: 1150px;
         }
       }
     }
   }
 }
 
-[class*="dialog_body"] {
+.dialog_body {
   padding: $space_sm;
 }
 
-[class*="dialog_header"] {
+.dialog_header {
   padding: $space_sm;
 }
 
-[class*="dialog_footer"] {
+.dialog_footer {
   padding: $space_sm;
 }
 
@@ -288,32 +412,110 @@
     text-align: center;
   }
 
-  &[class*="full_height"] {
-    &[class*="_left"]{
-      .pb_dialog_rails {
-        margin: unset !important;
-        margin-right: auto !important;
-      }
+  &.full_height_left {
+    .pb_dialog_rails {
+      margin: unset !important;
+      margin-right: auto !important;
     }
-
-    &[class*="_center"]{
-      justify-content: center;
+    
+    .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;
+        }
+      }
     }
+  }
 
-    &[class*="_right"]{
-      .pb_dialog_rails {
-        margin: unset !important;
-        margin-left: auto !important;
+  &.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;
+        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;
+        }
       }
     }
+  }
 
+  &.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%;
-      // 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;
       }
@@ -323,19 +525,25 @@
         background-color: $white;
         max-width: 100%;
       }
-      &[class*="_sm"] {
+      &.pb_dialog_sm_left,
+      &.pb_dialog_sm_center,
+      &.pb_dialog_sm_right {
         width: $medium;
         .dialog_footer {
           width: $medium;
         }
       }
-      &[class*="_md"] {
+      &.pb_dialog_md_left,
+      &.pb_dialog_md_center,
+      &.pb_dialog_md_right {
         width: $large;
         .dialog_footer {
           width: $large;
         }
       }
-      &[class*="_lg"] {
+      &.pb_dialog_lg_left,
+      &.pb_dialog_lg_center,
+      &.pb_dialog_lg_right {
         width: $xlarge;
         .dialog_footer {
           width: $xlarge;
@@ -375,4 +583,3 @@
     cursor: pointer;
   }
 }
-

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";
 
-[class^=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;
     }
   }
-  &[class*=_sm] {
-    height: $small_bar;
-  }
-  &[class*=_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

@@ -287,4 +287,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -278,7 +278,7 @@ test("MultiSelect prop to allow multiple selections + add correct Form Pills", (
   const option = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
   fireEvent.click(option[0]); // Select first option
   fireEvent.click(option[1]); // Select second option
-  const formPills = kit.querySelectorAll(".pb_form_pill_kit_primary");
+  const formPills = kit.querySelectorAll(".pb_form_pill_kit.pb_form_pill_primary");
   expect(formPills.length).toBe(2);
   expect(formPills[0]).toHaveTextContent("United States");
   expect(formPills[1]).toHaveTextContent("Canada");
@@ -314,7 +314,7 @@ test("renders form pills inside trigger", () => {
   const kit = screen.getByTestId(testId)
   const option = kit.querySelector('.pb_dropdown_option_list')
   fireEvent.click(option)
-  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
+  const formPill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_primary")
   expect(formPill).toBeInTheDocument()
   })
 
@@ -333,7 +333,7 @@ test("multiSelect and autocomplete to work together", () => {
   expect(input).toBeInTheDocument()
     const option = kit.querySelector('.pb_dropdown_option_list')
   fireEvent.click(option)
-  const formPill = kit.querySelector(".pb_form_pill_kit_primary")
+  const formPill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_primary")
   expect(formPill).toBeInTheDocument()
 })
 
@@ -350,9 +350,9 @@ test("renders form pills with size and color", () => {
   const kit = screen.getByTestId(testId)
   const option = kit.querySelector('.pb_dropdown_option_list')
   fireEvent.click(option)
-  const formPill = kit.querySelector(".pb_form_pill_kit_neutral")
+  const formPill = kit.querySelector(".pb_form_pill_kit.pb_form_pill_neutral")
   expect(formPill).toBeInTheDocument()
-  expect(formPill).toHaveClass("small")
+  expect(formPill).toHaveClass("pb_form_pill_small")
   })
 
 test("defaultValue works with multiSelect", () => {
@@ -365,7 +365,7 @@ test("defaultValue works with multiSelect", () => {
       />
     )
     const kit = screen.getByTestId(testId)
-    expect(kit.querySelectorAll(".pb_form_pill_kit_primary")).toHaveLength(2)
+    expect(kit.querySelectorAll(".pb_form_pill_kit.pb_form_pill_primary")).toHaveLength(2)
     const option2 = Array.from(kit.querySelectorAll(".pb_dropdown_option_list"));
     const firstOpt = options[0].label
     expect(option2[0]).not.toHaveTextContent(firstOpt)

data/app/pb_kits/playbook/pb_empty_state/_empty_state.scss

@@ -37,9 +37,9 @@
   }
 
   &.dark {
-    [class*="pb_title_kit"],
-    [class*="pb_body_kit"],
-    [class*="pb_detail_kit"],
-    [class*="pb_button_kit_link"]:hover { color: $white; }
+    .pb_title_kit,
+    .pb_body_kit,
+    .pb_detail_kit,
+    .pb_button_kit_link:hover { color: $white; }
   }
 }