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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aec463948b11956605eac8d7948dacb76988c6cd29646210829d5b435bad5c12
-  data.tar.gz: ae7982aad6131c0417c69ee9ce9a0e8b3a8fc8759c1f6a70362994f68999e276
+  metadata.gz: 0ee315a459262d17524d4034ee8ee267a36cb55a6bff5ab517eded1823079b82
+  data.tar.gz: 214124df5701381babad6d1c668e2d821852a12ea69e76c654b80142005b86ef
 SHA512:
-  metadata.gz: 4c0682c780ecd1eb15c043a685275656c0147f791e091283cd24ef77a3212b6de2d94ad102eff915accf311dde2d9292e70533d60f5120e4db42b84a04de0b1a
-  data.tar.gz: 400ccea6d280ad3cf74b21856547b3d8ccb5a3487bb4a3c0db1bb36ba2ef9148d1766169d55e3d6abe1b3ba634ad00993d8f139c15ee6aaae4cf72b631abc2c5
+  metadata.gz: c809a3b70d4575e569eb8651e363753b1ddf1d8b655158d1c0028eeee1510007c2c029d4e425571b9dd27258573f07344b2b8bb4880cf0a1a48e98cdfdf8010a
+  data.tar.gz: c36c53928fcc035ce43a88d6f3523b71895d49eae26ab8231984df5517a18724fa9801c0e130f20f31545e31c2ba3d666080b74ba7f53c73d1af83487aa77bad

data/app/pb_kits/playbook/_playbook.scss

@@ -31,6 +31,7 @@
 @import 'pb_dialog/dialog';
 @import 'pb_distribution_bar/distribution_bar';
 @import 'pb_draggable/draggable';
+@import 'pb_drawer/drawer';
 @import 'pb_dropdown/dropdown';
 @import 'pb_file_upload/file_upload';
 @import 'pb_filter/filter';

data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss

@@ -1012,16 +1012,16 @@
   background-color: $bg_light;
 }
 // Removes borders when Wrapped inside the Card Kit
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_body .last-cell,
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_header .last-header-cell,
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_body tr td:last-child,
-.pb_card_kit > .pb_advanced_table .pb_advanced_table_header tr th:last-child {
+[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_body .last-cell,
+[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_header .last-header-cell,
+[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_body tr td:last-child,
+[class^=pb_card_kit] > .pb_advanced_table .pb_advanced_table_header tr th:last-child {
     border-right: none !important;
 }
 
 //  Removes borders when Wrapped inside the Card Kit
-.pb_card_kit > .pb_advanced_table tr:last-child, 
-.pb_card_kit > .pb_advanced_table .last-row-cell {
+[class^=pb_card_kit] > .pb_advanced_table tr:last-child, 
+[class^=pb_card_kit] > .pb_advanced_table .last-row-cell {
   td {
     border-bottom: none !important; 
   }

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -443,7 +443,7 @@ test("sort button exists and sorts column data", () => {
 
   const kit = screen.getByTestId(testId)
 
-  const sortButton= kit.querySelector(".pb_flex_kit.pb_flex_kit_orientation_row.pb_flex_kit_justify_content_between.pb_flex_kit_align_items_top.pb_flex_kit_spacing_none.pl_xxs.cursor_pointer.header-sort-button.pb_th_link.false")
+  const sortButton= kit.querySelector(".pb_flex_kit_orientation_row_justify_content_between_align_items_top_spacing_none.pl_xxs.cursor_pointer.header-sort-button.pb_th_link")
   expect(sortButton).toBeInTheDocument()
 
   const row1 = kit.getElementsByTagName('tr')[1]

data/app/pb_kits/playbook/pb_avatar/_avatar.scss

@@ -12,83 +12,88 @@ $avatar-sizes: (
   "xl":   100px,
 );
 
-@each $name, $size in $avatar-sizes {
-  .pb_avatar_kit_size_#{$name},
-  .pb_avatar_kit_size_#{$name}_thumb {
-    width: $size;
-    height: $size;
-    object-fit: cover;
-    position: relative;
-    flex-shrink: 0;
-    flex-grow: 0;
-    flex-basis: $size;
+[class^=pb_avatar_kit] {
+  position: relative;
 
-    > .pb_flex_kit {
-      .pb_card_kit {
-        padding: 2px;
-      }
-      .pb_card_kit.overlay_bottom_center,
-      .pb_card_kit.overlay_top_center {
-        left: 50%;
-        transform: translateX(-50%);
-      }
-      .pb_card_kit.overlay_left_center,
-      .pb_card_kit.overlay_right_center {
-        top: 50%;
-        transform: translateY(-50%);
-      }
-    }
-
-    .avatar_wrapper {
+  @each $name, $size in $avatar-sizes {
+    &[class*=_size_#{$name}],
+    &[class*=_size_#{$name}_thumb] {
       width: $size;
       height: $size;
       object-fit: cover;
-      border-radius: $border-rad-mega;
-      background: $slate;
-      overflow: hidden;
       position: relative;
       flex-shrink: 0;
       flex-grow: 0;
       flex-basis: $size;
 
-      .dark & {
-        background: $text_dk_light;
-      }
+      & > [class^=pb_flex_kit] {
+        [class^=pb_card_kit] {
+          padding: 2px;
+        }
+        [class^=pb_card_kit].overlay_bottom_center,
+        [class^=pb_card_kit].overlay_top_center {
+          left: 50%;
+          transform: translateX(-50%);
+        }
 
-      &::before {
-        content: attr(data-initials);
-        width: 100%;
-        height: 100%;
-        display: block;
-        color: $white;
-        text-align: center;
-        font-size: $size * 0.38;
-        line-height: $size;
-        text-transform: uppercase;
-        position: relative;
+        [class^=pb_card_kit].overlay_left_center,
+        [class^=pb_card_kit].overlay_right_center {
+          top: 50%;
+          transform: translateY(-50%);
+        }
       }
 
-      img {
-        width: 100%;
-        height: 100%;
-        position: absolute;
-        top: 0;
-        left: 0;
-        border-radius: $border-rad-mega;
+      .avatar_wrapper {
+        width: $size;
+        height: $size;
         object-fit: cover;
-        display: block;
-      }
+        border-radius: $border-rad-mega;
+        background: $slate;
+        overflow: hidden;
+        position: relative;
+        flex-shrink: 0;
+        flex-grow: 0;
+        flex-basis: $size;
+
+        .dark & {
+          background: $text_dk_light;
+        }
 
-      .grayscale {
-        filter: grayscale(1);
+        &::before {
+          content: attr(data-initials);
+          width: 100%;
+          height: 100%;
+          display: block;
+          color: $white;
+          text-align: center;
+          font-size: $size * 0.38;
+          line-height: $size;
+          text-transform: uppercase;
+          position: relative;
+        }
+
+        img {
+          width: 100%;
+          height: 100%;
+          position: absolute;
+          top: 0;
+          left: 0;
+          border-radius: $border-rad-mega;
+          object-fit: cover;
+          display: block;
+        }
+
+        .grayscale {
+          filter: grayscale(1);
+        }
       }
     }
   }
-}
 
-.pb_avatar_kit_dark {
-  .pb_card_kit {
-    position: absolute;
-    padding: 2px;
+  &.dark {
+    [class^=pb_card_kit] {
+      position: absolute;
+      padding: 2px;
+    }
   }
 }

data/app/pb_kits/playbook/pb_avatar/avatar.test.js

@@ -103,7 +103,7 @@ test('renders with online status', () => {
   );
 
   const onlineStatusAvatar = screen.getByTestId(testId);
-  const onlineStatus = onlineStatusAvatar.querySelector('.pb_online_status_kit')
+  const onlineStatus = onlineStatusAvatar.querySelector('.pb_online_status_kit_online_size_md')
   expect(onlineStatus).toBeInTheDocument();
 });
 

data/app/pb_kits/playbook/pb_background/_background.scss

@@ -18,7 +18,7 @@ $merge_kits6: map-merge($merge_kits5, $data_colors);
 $merge_kits7: map-merge($merge_kits6, $border_colors);
 $background_colors: map-merge($additional_colors, $merge_kits7);
 
-.pb_background_kit {
+[class^=pb_background_kit] {
   max-width: 100%;
   max-height: 100%;
   background-size: cover;
@@ -27,7 +27,7 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
     &.pb_background_color_#{$name} {
       background: $color;
     }
-  }
+  };
 
   &.fade {
     opacity: 0;
@@ -56,7 +56,7 @@ $background_colors: map-merge($additional_colors, $merge_kits7);
     }
   }
 
-  &.imageoverlay {
+  &[class*=imageoverlay] {
     position: relative;
 
     &:before {

data/app/pb_kits/playbook/pb_badge/_badge.scss

@@ -4,15 +4,7 @@
 @import "../tokens/spacing";
 @import "../tokens/typography";
 
-// Base badge class and all variants
-.pb_badge_kit,
-.pb_badge_kit_rounded,
-.pb_badge_kit_notification,
-.pb_badge_kit_notification_rounded,
-.pb_badge_kit_notification_error,
-.pb_badge_kit_notification_error_rounded,
-.pb_badge_kit_success_sm,
-.pb_badge_kit_success_sm_rounded {
+[class^=pb_badge_kit] {
   $pb_badge_height_rounded: 16px;
 
   display: inline-flex;
@@ -29,141 +21,43 @@
     font-size: $font_smaller - 1;
     font-weight: $bolder;
   }
-}
-
-// Add base styles to all status color variants too
-@each $color_name, $color_value in $status_colors {
-  .pb_badge_kit_#{$color_name},
-  .pb_badge_kit_#{$color_name}_rounded {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: $border_rad_light;
-    padding: 0 $space_xs/2;
-    border-width: 1px;
-    border-color: $card_light;
-    white-space: nowrap;
 
-    span {
-      display: inline-block;
-      font-size: $font_smaller - 1;
-      font-weight: $bolder;
+  @each $color_name, $color_value in $status_colors {
+    &[class*=_#{$color_name}]  {
+      background: rgba($color_value, $opacity_1);
+      color: map-get($status_color_text, $color_name);
     }
   }
-}
 
-// Generate all status color variants (with and without rounded)
-@each $color_name, $color_value in $status_colors {
-  .pb_badge_kit_#{$color_name} {
-    background: rgba($color_value, $opacity_1);
-    color: map-get($status_color_text, $color_name);
+  &[class*=_rounded] {
+    height: $pb_badge_height_rounded;
+    min-height: $pb_badge_height_rounded;
+    min-width: $pb_badge_height_rounded;
+    border-radius: $pb_badge_height_rounded / 2;
   }
-  
-  .pb_badge_kit_#{$color_name}_rounded {
-    background: rgba($color_value, $opacity_1);
-    color: map-get($status_color_text, $color_name);
-    height: 16px !important;
-    min-height: 16px !important;
-    min-width: 16px !important;
-    border-radius: 8px !important;
-  }
-}
-
-// Special success_sm variant (since component maps "success" to "success_sm")
-.pb_badge_kit_success_sm {
-  background: rgba(map-get($status_colors, "success"), $opacity_1);
-  color: map-get($status_color_text, "success");
-}
-
-.pb_badge_kit_success_sm_rounded {
-  background: rgba(map-get($status_colors, "success"), $opacity_1);
-  color: map-get($status_color_text, "success");
-  height: 16px !important;
-  min-height: 16px !important;
-  min-width: 16px !important;
-  border-radius: 8px !important;
-}
-
-// Rounded variant (base)
-.pb_badge_kit_rounded {
-  height: 16px !important;
-  min-height: 16px !important;
-  min-width: 16px !important;
-  border-radius: 8px !important;
-}
-
-// Notification variants
-.pb_badge_kit_notification {
-  background: $primary;
-  color: $white;
-}
-
-.pb_badge_kit_notification_rounded {
-  background: $primary;
-  color: $white;
-  height: 16px !important;
-  min-height: 16px !important;
-  min-width: 16px !important;
-  border-radius: 8px !important;
-}
-
-.pb_badge_kit_notification_error {
-  background: $error;
-  color: $white;
-}
 
-.pb_badge_kit_notification_error_rounded {
-  background: $error;
-  color: $white;
-  height: 16px !important;
-  min-height: 16px !important;
-  min-width: 16px !important;
-  border-radius: 8px !important;
-}
-
-// Dark theme variants
-@each $color_name, $color_value in $status_colors {
-  .pb_badge_kit_#{$color_name}.dark {
-    border-width: 0;
-    background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
-    color: map-get($status_color_text_dark, $color_name);
-  }
-  
-  .pb_badge_kit_#{$color_name}_rounded.dark {
-    border-width: 0;
-    background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
-    color: map-get($status_color_text_dark, $color_name);
+  &[class*=_notification] {
+    background: $primary;
+    color: $white;
   }
-}
-
-.pb_badge_kit_success_sm.dark {
-  border-width: 0;
-  background: rgba(mix($bg_dark, map-get($status_colors, "success"), 10%), $opacity_2);
-  color: map-get($status_color_text_dark, "success");
-}
 
-.pb_badge_kit_success_sm_rounded.dark {
-  border-width: 0;
-  background: rgba(mix($bg_dark, map-get($status_colors, "success"), 10%), $opacity_2);
-  color: map-get($status_color_text_dark, "success");
-}
+  &[class*=_notification_error] {
+    background: $error;
+  }
 
-.pb_badge_kit_notification.dark {
-  border-width: 0;
-}
+  &.dark {
+    border-width: 0;
 
-.pb_badge_kit_notification_rounded.dark {
-  border-width: 0;
-}
+    @each $color_name, $color_value in $status_colors {
+      &[class*=_#{$color_name}]  {
+        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+        color: map-get($status_color_text_dark, $color_name);
+      }
+    }
 
-.pb_badge_kit_notification_error.dark {
-  border-width: 0;
-  background: $error_dark;
-  color: $white;
+    &[class*=_notification_error]  {
+      background: $error_dark;
+      color: $white;
+    }
+  }
 }
-
-.pb_badge_kit_notification_error_rounded.dark {
-  border-width: 0;
-  background: $error_dark;
-  color: $white;
-}

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -1,37 +1,23 @@
 @import "./body_mixins";
 @import "../tokens/titles";
 
-// Base body styles for all variants
-.pb_body_kit,
-.pb_body_kit_default,
-.pb_body_kit_light,
-.pb_body_kit_lighter,
-.pb_body_kit_link,
-.pb_body_kit_success,
-.pb_body_kit_error,
-.pb_body_kit_neutral,
-.pb_body_kit_positive,
-.pb_body_kit_negative,
-.pb_body_kit_default_neutral,
-.pb_body_kit_default_positive,
-.pb_body_kit_default_negative,
-.pb_body_kit_light_neutral,
-.pb_body_kit_light_positive,
-.pb_body_kit_light_negative,
-.pb_body_kit_lighter_neutral,
-.pb_body_kit_lighter_positive,
-.pb_body_kit_lighter_negative,
-.pb_body_kit_link_neutral,
-.pb_body_kit_link_positive,
-.pb_body_kit_link_negative,
-.pb_body_kit_success_neutral,
-.pb_body_kit_success_positive,
-.pb_body_kit_success_negative,
-.pb_body_kit_error_neutral,
-.pb_body_kit_error_positive,
-.pb_body_kit_error_negative {
+[class^="pb_body_kit"] {
   @include pb_body($text_lt_default);
-  
+  @each $color_name, $color_value in $pb_body_colors {
+    &[class*=_#{"" + $color_name}] {
+      @include pb_body($color_value);
+    }
+    @each $status_name, $status_value in $pb_body_status {
+      &[class*="_default_#{$status_name}"] {
+        @include pb_body($status_value);
+      }
+    }
+  }
+  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
+    &[class*="_#{$dark_color_name}"][class*="dark"] {
+      @include pb_body($dark_color_value);
+    }
+  }
   b,
   strong {
     font-weight: $bold;
@@ -53,86 +39,27 @@
     font-size: $font_smaller;
     letter-spacing: $lspace_loose;
   }
-}
-
-// Color variants
-@each $color_name, $color_value in $pb_body_colors {
-  .pb_body_kit_#{$color_name},
-  .pb_body_kit_#{$color_name}_neutral,
-  .pb_body_kit_#{$color_name}_positive,
-  .pb_body_kit_#{$color_name}_negative {
-    @include pb_body($color_value);
-  }
-}
-
-// Status variants
-@each $status_name, $status_value in $pb_body_status {
-  .pb_body_kit_#{$status_name},
-  .pb_body_kit_default_#{$status_name},
-  .pb_body_kit_light_#{$status_name},
-  .pb_body_kit_lighter_#{$status_name},
-  .pb_body_kit_link_#{$status_name},
-  .pb_body_kit_success_#{$status_name},
-  .pb_body_kit_error_#{$status_name} {
-    @include pb_body($status_value);
-  }
-}
 
-// Dark theme base
-.pb_body_kit.dark,
-.pb_body_kit_default.dark,
-.pb_body_kit_light.dark,
-.pb_body_kit_lighter.dark,
-.pb_body_kit_link.dark,
-.pb_body_kit_success.dark,
-.pb_body_kit_error.dark,
-.pb_body_kit_neutral.dark,
-.pb_body_kit_positive.dark,
-.pb_body_kit_negative.dark,
-.pb_body_kit_default_neutral.dark,
-.pb_body_kit_default_positive.dark,
-.pb_body_kit_default_negative.dark,
-.pb_body_kit_light_neutral.dark,
-.pb_body_kit_light_positive.dark,
-.pb_body_kit_light_negative.dark,
-.pb_body_kit_lighter_neutral.dark,
-.pb_body_kit_lighter_positive.dark,
-.pb_body_kit_lighter_negative.dark,
-.pb_body_kit_link_neutral.dark,
-.pb_body_kit_link_positive.dark,
-.pb_body_kit_link_negative.dark,
-.pb_body_kit_success_neutral.dark,
-.pb_body_kit_success_positive.dark,
-.pb_body_kit_success_negative.dark,
-.pb_body_kit_error_neutral.dark,
-.pb_body_kit_error_positive.dark,
-.pb_body_kit_error_negative.dark {
-  @include pb_body_dark();
-  
-  a {
-    color: $active_dark;
+  @each $status_name, $status_value in $pb_body_status {
+    &[class*="#{$status_name}"] {
+      @include pb_body($status_value);
+    }
   }
-}
 
-// Dark color variants
-@each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
-  .pb_body_kit_#{$dark_color_name}.dark,
-  .pb_body_kit_#{$dark_color_name}_neutral.dark,
-  .pb_body_kit_#{$dark_color_name}_positive.dark,
-  .pb_body_kit_#{$dark_color_name}_negative.dark {
-    @include pb_body($dark_color_value);
+  &[class*="dark"] {
+    a {
+      color: $active_dark;
+    }
+    @include pb_body_dark();
+    @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
+      &[class*="_#{$dark_color_name}"][class*="dark"] {
+        @include pb_body($dark_color_value);
+      }
+    }
+    @each $status_name, $status_value in $pb_dark_body_status {
+      &[class*="_#{$status_name}"] {
+        @include pb_body($status_value);
+      }
+    }
   }
 }
-
-// Dark status variants
-@each $status_name, $status_value in $pb_dark_body_status {
-  .pb_body_kit_#{$status_name}.dark,
-  .pb_body_kit_default_#{$status_name}.dark,
-  .pb_body_kit_light_#{$status_name}.dark,
-  .pb_body_kit_lighter_#{$status_name}.dark,
-  .pb_body_kit_link_#{$status_name}.dark,
-  .pb_body_kit_success_#{$status_name}.dark,
-  .pb_body_kit_error_#{$status_name}.dark {
-    @include pb_body($status_value);
-  }
-}

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -74,4 +74,4 @@ $pb_dark_body_status: (
 
 @mixin pb_body_positive {
   @include pb_body($success);
-}
+}

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss

@@ -3,7 +3,7 @@
 @import "../tokens/spacing";
 @import "../tokens/typography";
 
-.pb_bread_crumbs_kit {
+[class^=pb_bread_crumbs_kit] {
   $pb_badge_height: 18px;
 
   display: inline-flex;
@@ -14,22 +14,35 @@
   svg {
    margin-right: 8px;
   }
-  
-  .pb_bread_crumb_item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  
-  .pb_bread_crumb_item_kit {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+    .pb_bread_crumb_item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+    }
+    .pb_bread_crumb_item_kit {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+    .pb_bread_crumb_item_kit:not(:last-child):after {
+      content: '/';
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+
+  @each $color_name, $color_value in $status_colors {
+    &[class*=_#{$color_name}]  {
+      background: rgba($color_value, $opacity_1);
+      color: map-get($status_color_text, $color_name);
+    }
   }
-  
-  .pb_bread_crumb_item_kit:not(:last-child):after {
-    content: '/';
-    padding-left: 8px;
-    padding-right: 8px;
+
+  &.dark {
+    @each $color_name, $color_value in $status_colors {
+      &[class*=_#{$color_name}]  {
+        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+      }
+    }
   }
 }