playbook_ui 14.26.0.pre.rc.0 → 15.0.0.pre.alpha.PLAY1981sectionseparatorverticalchildren10469

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/_dialog.tsx

@@ -73,8 +73,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria);
    const dataProps = buildDataProps(data)
    const htmlProps = buildHtmlProps(htmlOptions);
-  const dialogClassNames = {
-    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
+  const classes = {
+    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement), globalProps(props), className),
     afterOpen: "pb_dialog_after_open",
     beforeClose: "pb_dialog_before_close",
   };
@@ -93,10 +93,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
 
   const dynamicInlineProps = globalInlineProps(props); 
 
-  const classes = classnames(
+  const wrapperClasses = classnames(
     buildCss("pb_dialog_wrapper"),
-    globalProps(props),
-    className
   );
 
   const [triggerOpened, setTriggerOpened] = useState(false),
@@ -173,13 +171,13 @@ const Dialog = (props: DialogProps): React.ReactElement => {
           {...ariaProps} 
           {...dataProps}
           {...htmlProps} 
-          className={classes}
+          className={wrapperClasses}
       >
         <Modal
             ariaHideApp={false}
-            className={dialogClassNames}
+            className={classes}
             closeTimeoutMS={200}
-            contentLabel="Minimal Modal Example"
+            contentLabel="Dialog"
             id={id}
             isOpen={modalIsOpened}
             onRequestClose={onClose}

data/app/pb_kits/playbook/pb_dialog/dialog.html.erb

@@ -12,7 +12,7 @@
         data-cancel-button-id="<%= object.cancel_button_id %>"
     <% end %>
 >
-    <%= pb_content_tag(:dialog) do %>
+    <%= pb_content_tag(:dialog, role: "dialog", "aria-modal": "true", "aria-label": "Dialog") do %>
             <% if object.status === "" && object.title %>
                 <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
             <% end %>

data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb

@@ -2,8 +2,8 @@
         <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
             <%= content.presence || object.title %>
 
-            <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> >
-                <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
+            <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> aria-label="Close Dialog" >
+                <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon), aria: { hidden: true } }) %>
             </button>
         <% end %>
         <%= pb_rails("section_separator") %>

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_draggable/draggable.test.jsx

@@ -235,7 +235,7 @@ test("generated dragHandle with Card", () => {
   render(<DraggableKitWithCard />);
   const kit = screen.getByTestId(testId);
 
-  const card = kit.querySelector(".pb_card_kit_deselected_border_radius_md");
+  const card = kit.querySelector(".pb_card_kit");
   expect(card).toBeInTheDocument();
   const dragHandle = card.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();

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

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