playbook_ui 14.25.0.pre.alpha.PLAY2414removedialoghelper10118 → 14.25.0.pre.alpha.PLAY2419dialogaccessibility10271

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

@@ -179,7 +179,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
             ariaHideApp={false}
             className={dialogClassNames}
             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/dialogHelper.js

@@ -0,0 +1,65 @@
+// Three places in Nitro depend on this function inside the window scope.
+// We will keep this file until we remove this dependency from Nitro.
+const dialogHelper = () => {
+  const openTrigger = document.querySelectorAll("[data-open-dialog]");
+  const closeTrigger = document.querySelectorAll("[data-close-dialog]");
+  const dialogs = document.querySelectorAll(".pb_dialog_rails")
+
+  const loadingButton = document.querySelector('[data-disable-with="Loading"]');
+  if (loadingButton) {
+    loadingButton.addEventListener("click", function() {
+      const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
+      const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
+      let currentClass = okayLoadingButton.className;
+      let cancelClass = cancelButton ? cancelButton.className : "";
+
+      let newClass = currentClass.replace("_enabled", "_disabled_loading");
+      let newCancelClass = cancelClass.replace("_enabled", "_disabled");
+
+      // Disable the buttons
+      okayLoadingButton.disabled = true;
+      if (cancelButton) cancelButton.disabled = true;
+
+      okayLoadingButton.className = newClass;
+      if (cancelButton) cancelButton.className = newCancelClass;
+    });
+  }
+
+
+  openTrigger.forEach((open) => {
+    open.addEventListener("click", () => {
+      var openTriggerData = open.dataset.openDialog;
+      var targetDialog = document.getElementById(openTriggerData)
+      if (targetDialog.open) return;
+      targetDialog.showModal();
+    });
+  });
+
+  closeTrigger.forEach((close) => {
+    close.addEventListener("click", () => {
+      var closeTriggerData = close.dataset.closeDialog;
+      document.getElementById(closeTriggerData).close();
+    });
+  });
+
+  // Close dialog box on outside click
+  dialogs.forEach((dialogElement) => {
+    dialogElement.addEventListener("mousedown", (event) => {
+      const dialogParentDataset = dialogElement.parentElement.dataset
+      if (dialogParentDataset.overlayClick === "overlay_close") return
+
+      const dialogModal = event.target.getBoundingClientRect()
+      const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
+                                        event.clientX > dialogModal.right ||
+                                        event.clientY < dialogModal.top ||
+                                        event.clientY > dialogModal.bottom
+
+      if (clickedOutsideDialogModal) {
+        dialogElement.close()
+        event.stopPropagation()
+      }
+    })
+  })
+};
+
+export default dialogHelper;

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;
+}