playbook_ui 14.25.0.pre.alpha.dialogfix10277 → 14.25.0.pre.alpha.play1986inlineloadingsolidvariant9963

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

@@ -99,25 +99,7 @@
 }
 
 // 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 {
+.pb_dialog {
 
   // Local Variables
   $gutter: $space_lg;
@@ -154,250 +136,144 @@
   animation-duration: $animation-duration;
   outline: none;
   animation-timing-function: $easeInOutQuint;
-}
 
-// 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*="_left"] {
+    animation-name: modalFadeInLeft;
+    &[class*="_before_close"] {
+      animation-name: modalFadeOutLeft;
+      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*="_right"] {
+    animation-name: modalFadeInRight;
+    &[class*="_before_close"] {
+      animation-name: modalFadeOutRight;
+      animation-duration: $animation-duration;
+      opacity: $opacity_hidden;
+    }
   }
-}
-
-// Size variations
-.pb_dialog_status_size_left,
-.pb_dialog_status_size_center,
-.pb_dialog_status_size_right {
-  width: 375px;
-}
-
-.pb_dialog_sm_left,
-.pb_dialog_sm_center,
-.pb_dialog_sm_right {
-  width: 300px;
-}
 
-.pb_dialog_md_left,
-.pb_dialog_md_center,
-.pb_dialog_md_right {
-  width: 500px;
-}
-
-.pb_dialog_lg_left,
-.pb_dialog_lg_center,
-.pb_dialog_lg_right {
-  width: 800px;
-}
+  &[class*="_status_size"] {
+    width: $status_size;
+  }
 
-// Dialog state classes
-.pb_dialog_body_open {
-  overflow: hidden;
-}
+  &[class*="_sm"] {
+    width: $small;
+  }
 
-.pb_dialog_after_open {
-  opacity: 1;
-}
+  &[class*="_md"] {
+    width: $medium;
+  }
 
-.pb_dialog_before_close {
-  animation-name: modalFadeOut;
-  animation-duration: .2s;
-  opacity: 0;
-}
+  &[class*="_lg"] {
+    width: $large;
+  }
 
-.pb_dialog_close_icon {
-  cursor: pointer;
-  font-size: $font_base;
-  line-height: $lh_normal;
-}
+  &_body_open {
+    overflow: hidden;
+  }
 
-.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;
+  &_after_open {
+    opacity: $opacity_visible;
   }
-  &.pb_dialog_overlay_before_close {
-    animation-name: overlayFadeOut;
-    animation-duration: .2s;
-    opacity: 0;
+
+  &[class*="_before_close"] {
+    animation-name: modalFadeOut;
+    animation-duration: $animation-duration;
+    opacity: $opacity_hidden;
   }
-  &.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;
-        }
-      }
-    }
+
+  &_close_icon {
+    cursor: pointer;
+    font-size: $font_base;
+    line-height: $lh_normal;
   }
 
-  &.full_height_center {
+  &_overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
     justify-content: center;
-    
-    .pb_dialog {
-      border-radius: 0;
-      height: 100%;
-      max-height: 100%;
-      max-width: none;
-      .dialog-pseudo-footer {
-        height: $space_xl * 2;
+    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;
       }
-      .dialog_footer {
-        position: fixed;
-        bottom: 0;
-        background-color: $white;
-        max-width: 100%;
+
+      &[class*="_center"]{
+        justify-content: center;
       }
-      &.pb_dialog_sm_left,
-      &.pb_dialog_sm_center,
-      &.pb_dialog_sm_right {
-        width: 500px;
-        .dialog_footer {
-          width: 500px;
-        }
+
+      &[class*="_right"]{
+        justify-content: flex-end;
       }
-      &.pb_dialog_md_left,
-      &.pb_dialog_md_center,
-      &.pb_dialog_md_right {
-        width: 800px;
-        .dialog_footer {
-          width: 800px;
+
+      .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_lg_left,
-      &.pb_dialog_lg_center,
-      &.pb_dialog_lg_right {
-        width: 1150px;
         .dialog_footer {
-          width: 1150px;
+          position: fixed;
+          bottom: 0;
+          background-color: $white;
+          max-width: 100%;
         }
-      }
-    }
-  }
-
-  &.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*="_sm"] {
+          width: $medium;
+          .dialog_footer {
+            width: $medium;
+          }
         }
-      }
-      &.pb_dialog_md_left,
-      &.pb_dialog_md_center,
-      &.pb_dialog_md_right {
-        width: 800px;
-        .dialog_footer {
-          width: 800px;
+        &[class*="_md"] {
+          width: $large;
+          .dialog_footer {
+            width: $large;
+          }
         }
-      }
-      &.pb_dialog_lg_left,
-      &.pb_dialog_lg_center,
-      &.pb_dialog_lg_right {
-        width: 1150px;
-        .dialog_footer {
-          width: 1150px;
+        &[class*="_lg"] {
+          width: $xlarge;
+          .dialog_footer {
+            width: $xlarge;
+          }
         }
       }
     }
   }
 }
 
-.dialog_body {
+[class*="dialog_body"] {
   padding: $space_sm;
 }
 
-.dialog_header {
+[class*="dialog_header"] {
   padding: $space_sm;
 }
 
-.dialog_footer {
+[class*="dialog_footer"] {
   padding: $space_sm;
 }
 
@@ -412,110 +288,32 @@
     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;
-        }
+  &[class*="full_height"] {
+    &[class*="_left"]{
+      .pb_dialog_rails {
+        margin: unset !important;
+        margin-right: 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;
-        }
-      }
+    &[class*="_center"]{
+      justify-content: center;
     }
-  }
 
-  &.full_height_right {
-    .pb_dialog_rails {
-      margin: unset !important;
-      margin-left: auto !important;
+    &[class*="_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;
       }
@@ -525,25 +323,19 @@
         background-color: $white;
         max-width: 100%;
       }
-      &.pb_dialog_sm_left,
-      &.pb_dialog_sm_center,
-      &.pb_dialog_sm_right {
+      &[class*="_sm"] {
         width: $medium;
         .dialog_footer {
           width: $medium;
         }
       }
-      &.pb_dialog_md_left,
-      &.pb_dialog_md_center,
-      &.pb_dialog_md_right {
+      &[class*="_md"] {
         width: $large;
         .dialog_footer {
           width: $large;
         }
       }
-      &.pb_dialog_lg_left,
-      &.pb_dialog_lg_center,
-      &.pb_dialog_lg_right {
+      &[class*="_lg"] {
         width: $xlarge;
         .dialog_footer {
           width: $xlarge;
@@ -583,3 +375,4 @@
     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 classes = {
-    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement), globalProps(props), className),
+  const dialogClassNames = {
+    base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
     afterOpen: "pb_dialog_after_open",
     beforeClose: "pb_dialog_before_close",
   };
@@ -93,8 +93,10 @@ const Dialog = (props: DialogProps): React.ReactElement => {
 
   const dynamicInlineProps = globalInlineProps(props); 
 
-  const wrapperClasses = classnames(
+  const classes = classnames(
     buildCss("pb_dialog_wrapper"),
+    globalProps(props),
+    className
   );
 
   const [triggerOpened, setTriggerOpened] = useState(false),
@@ -171,11 +173,11 @@ const Dialog = (props: DialogProps): React.ReactElement => {
           {...ariaProps} 
           {...dataProps}
           {...htmlProps} 
-          className={wrapperClasses}
+          className={classes}
       >
         <Modal
             ariaHideApp={false}
-            className={classes}
+            className={dialogClassNames}
             closeTimeoutMS={200}
             contentLabel="Minimal Modal Example"
             id={id}

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

@@ -21,27 +21,13 @@
         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.classList.remove("pb_button_loading");
-            okayLoadingButton.classList.remove("pb_button_disabled");
-            okayLoadingButton.classList.add("pb_button_enabled");
+            okayLoadingButton.className = currentClass.replace("_disabled_loading", "_enabled");
 
             if (cancelButton) {
             cancelButton.disabled = false;
-            cancelButton.classList.remove("pb_button_disabled");
-            cancelButton.classList.add("pb_button_enabled");
+            cancelButton.className = cancelClass.replace("_disabled", "_enabled");
             }
         }, 5000);
 

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

@@ -1,7 +1,6 @@
 @import "../tokens/colors";
 
-.pb_distribution_bar_lg,
-.pb_distribution_bar_sm {
+[class^=pb_distribution_bar] {
   $bar_colors: map-merge($data_colors, $status_colors);
   $small_bar: 8px;
   $large_bar: 36px;
@@ -28,12 +27,10 @@
       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");
+  const card = kit.querySelector(".pb_card_kit_deselected_border_radius_md");
   expect(card).toBeInTheDocument();
   const dragHandle = card.querySelector(".pb_custom_icon");
   expect(dragHandle).toBeInTheDocument();

data/app/pb_kits/playbook/pb_drawer/_close_icon.tsx

@@ -0,0 +1,25 @@
+import React from 'react'
+import Icon from '../pb_icon/_icon'
+
+import { getAllIcons } from "../utilities/icons/allicons"
+
+type CloseIconProps = {
+  onClose: () => void,
+}
+
+export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
+  const { onClose } = props
+  const timesIcon = getAllIcons()["times"]
+  return (
+    <div
+        className="pb_dialog_close_icon"
+        onClick={onClose}
+    >
+      <Icon
+          className="svg-inline--fa"
+          customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
+          fixedWidth
+      />
+    </div>
+  )
+}