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

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5a1eeaf2f62d7b4fd094d05bede8f832f9021bf561d33cd0ac02fcd03e8e700f
-  data.tar.gz: 251d98bd7c327124c0e179dbcfc37f10d65728418a0b6c6a5bee775cdce5b3ab
+  metadata.gz: 230cb771b16126875e87e626e53cd633a26cbe4b65e0e9100405e72dd53a4f87
+  data.tar.gz: 7f513c46accbd0f95a5092ce5f1c60ca2cdec020e413407bfae0ec11ba0d5574
 SHA512:
-  metadata.gz: e7d20ec1e7dccd4947ed03b7f50e74809c4e8c18a30fc9fb075c4ede04c6053d86cbc7397fa443fdfb6abdfa62b8ad5a77d65a607fe8b4f9d5bb97dcde98bac3
-  data.tar.gz: d2ad121581858362b9250eb43eafb4d30e38b066bb46de721a6a1a6be3746279a2fb5d7f05fa2025cd764c30c938e00700841d74e602a4ea8981bee79e2df297
+  metadata.gz: 24028e6570bc44e5665a2f6dd2c4b034fbc2dc6fc0d28fa664714540893c344e1246b013d9ee78fb281d503e76440879ceeecdb90c794986b658c03e07b3b2d9
+  data.tar.gz: 889ea6030813ab4ad291437fb20841beb46eb742c46fed355f74b730ed14f76c1c36bac0004c489c54b6b839806d9fc1de0122b6129d8720160ee58a76017c52

data/app/pb_kits/playbook/_playbook.scss

@@ -31,7 +31,6 @@
 @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
-[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 {
+.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 {
     border-right: none !important;
 }
 
 //  Removes borders when Wrapped inside the Card Kit
-[class^=pb_card_kit] > .pb_advanced_table tr:last-child, 
-[class^=pb_card_kit] > .pb_advanced_table .last-row-cell {
+.pb_card_kit > .pb_advanced_table tr:last-child, 
+.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_orientation_row_justify_content_between_align_items_top_spacing_none.pl_xxs.cursor_pointer.header-sort-button.pb_th_link")
+  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")
   expect(sortButton).toBeInTheDocument()
 
   const row1 = kit.getElementsByTagName('tr')[1]

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

@@ -12,88 +12,83 @@ $avatar-sizes: (
   "xl":   100px,
 );
 
-[class^=pb_avatar_kit] {
-  position: relative;
+@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;
 
-  @each $name, $size in $avatar-sizes {
-    &[class*=_size_#{$name}],
-    &[class*=_size_#{$name}_thumb] {
+    > .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 {
       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;
 
-      & > [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%);
-        }
-
-        [class^=pb_card_kit].overlay_left_center,
-        [class^=pb_card_kit].overlay_right_center {
-          top: 50%;
-          transform: translateY(-50%);
-        }
+      .dark & {
+        background: $text_dk_light;
       }
 
-      .avatar_wrapper {
-        width: $size;
-        height: $size;
-        object-fit: cover;
-        border-radius: $border-rad-mega;
-        background: $slate;
-        overflow: hidden;
+      &::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;
-        flex-shrink: 0;
-        flex-grow: 0;
-        flex-basis: $size;
-
-        .dark & {
-          background: $text_dk_light;
-        }
-
-        &::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;
-        }
+      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);
-        }
+      .grayscale {
+        filter: grayscale(1);
       }
     }
   }
+}
 
-  &.dark {
-    [class^=pb_card_kit] {
-      position: absolute;
-      padding: 2px;
-    }
+.pb_avatar_kit_dark {
+  .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_online_size_md')
+  const onlineStatus = onlineStatusAvatar.querySelector('.pb_online_status_kit')
   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);
 
-[class^=pb_background_kit] {
+.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);
     }
   }
 
-  &[class*=imageoverlay] {
+  &.imageoverlay {
     position: relative;
 
     &:before {

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

@@ -4,7 +4,15 @@
 @import "../tokens/spacing";
 @import "../tokens/typography";
 
-[class^=pb_badge_kit] {
+// 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 {
   $pb_badge_height_rounded: 16px;
 
   display: inline-flex;
@@ -21,43 +29,141 @@
     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;
 
-  @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);
+    span {
+      display: inline-block;
+      font-size: $font_smaller - 1;
+      font-weight: $bolder;
     }
   }
+}
 
-  &[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;
+// 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*=_notification] {
-    background: $primary;
-    color: $white;
+  
+  .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;
   }
+}
 
-  &[class*=_notification_error] {
-    background: $error;
-  }
+// 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");
+}
 
-  &.dark {
-    border-width: 0;
+.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;
+}
 
-    @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);
-      }
-    }
+// Rounded variant (base)
+.pb_badge_kit_rounded {
+  height: 16px !important;
+  min-height: 16px !important;
+  min-width: 16px !important;
+  border-radius: 8px !important;
+}
 
-    &[class*=_notification_error]  {
-      background: $error_dark;
-      color: $white;
-    }
+// 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);
+  }
+}
+
+.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");
+}
+
+.pb_badge_kit_notification.dark {
+  border-width: 0;
+}
+
+.pb_badge_kit_notification_rounded.dark {
+  border-width: 0;
+}
+
+.pb_badge_kit_notification_error.dark {
+  border-width: 0;
+  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,23 +1,37 @@
 @import "./body_mixins";
 @import "../tokens/titles";
 
-[class^="pb_body_kit"] {
+// 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 {
   @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;
@@ -39,27 +53,86 @@
     font-size: $font_smaller;
     letter-spacing: $lspace_loose;
   }
+}
 
-  @each $status_name, $status_value in $pb_body_status {
-    &[class*="#{$status_name}"] {
-      @include pb_body($status_value);
-    }
+// 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);
   }
+}
 
-  &[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);
-      }
-    }
+// 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;
   }
 }
+
+// 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);
+  }
+}
+
+// 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";
 
-[class^=pb_bread_crumbs_kit] {
+.pb_bread_crumbs_kit {
   $pb_badge_height: 18px;
 
   display: inline-flex;
@@ -14,35 +14,22 @@
   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_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 {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
   }
-
-  &.dark {
-    @each $color_name, $color_value in $status_colors {
-      &[class*=_#{$color_name}]  {
-        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
-      }
-    }
+  
+  .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;
   }
 }