playbook_ui 14.25.0.pre.alpha.PLAY2361datepickerarrownav9708 → 14.25.0.pre.alpha.testingcss9713

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: f08b1d994601a8d48e2c7e675e51c754c7a7e3a940533d44ac84f7e8ef81beca
-  data.tar.gz: '092d0b623dfffaa567266bd1c59ec86273b505f002fe0b606af5560656052cc9'
+  metadata.gz: 2a873701f9e753bc22244e5376181533f04e356faf4fd5354ae2d9f74b8e0b62
+  data.tar.gz: e28e187057987616399ad70443bd140ec820d540029f4e908dd20f96925e66dc
 SHA512:
-  metadata.gz: 02ecb5228ad404fd6e156d8ab0b1aeb4249ee71c3cad1c0f53b4488f772ca648e2c2dc61ffdb21c925513b0669bd95e1ef333d9b4c55a499599508a61a9ef8cd
-  data.tar.gz: 9a9f402560b0b038da5907295c0f09fa321da13e9fe4e7f5559ebd6f91444e3364dd07b93ae8e6e08736636f65b4bfc5ec23363ff73f43ef8c870c90388953fb
+  metadata.gz: cba91cdf4269a6eaec42164bdd9697f797324df9b0d83c1c43023f78e593c513fc0121b436753b0249f1c3b3329161029aa693133fc8a8191d27992fc7f30751
+  data.tar.gz: 4f7f3707abef52dc9a6c0d3663496edf35e5e482c216e97e1c851dec6e279515b4574f6bbead99047c23c19ef3da1688e565a647e779bf54ab7bfd9f98218449

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_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,9 +4,9 @@
 @import "../tokens/spacing";
 @import "../tokens/typography";
 
-[class^=pb_badge_kit] {
-  $pb_badge_height_rounded: 16px;
+$pb_badge_height_rounded: 16px;
 
+.pb_badge_kit {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -21,43 +21,41 @@
     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);
-    }
+@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}.dark {
+    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_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;
+}
 
-  &[class*=_notification_error] {
-    background: $error;
-  }
+.pb_badge_kit_notification {
+  background: $primary;
+  color: $white;
+}
 
-  &.dark {
-    border-width: 0;
+.pb_badge_kit_notification_error {
+  background: $error;
+}
 
-    @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 {
+  background: $error_dark;
+  color: $white;
+}
 
-    &[class*=_notification_error]  {
-      background: $error_dark;
-      color: $white;
-    }
-  }
+.pb_badge_kit.dark {
+  border-width: 0;
 }

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;

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -11,7 +11,7 @@ $pb_button_sizes: (
   "lg":   ($font_large - 2px),
 );
 
-[class*=pb_button_kit]{
+.pb_button_kit{
   @include pb_button;
   // Size =================
   @each $name, $size in $pb_button_sizes {
@@ -25,16 +25,16 @@ $pb_button_sizes: (
   }
 
   // Variants =================
-  &[class*=_primary]  {
+  &._primary  {
     @include pb_button_primary;
   }
-  &[class*=_secondary]  {
+  &._secondary  {
     @include pb_button_secondary;
   }
-  &[class*=_link]  {
+  &._link  {
     @include pb_button_link;
   }
-  &[class*=_reaction] {
+  &._reaction {
     background-color: $card_light;
     min-width: 40px;
     border-radius: $border_radius_rounded;
@@ -64,37 +64,37 @@ $pb_button_sizes: (
   }
 
   // Block ====================
-  &[class*=_block]  {
+  &._block  {
     @include pb_button_block;
   }
 
   // Loading ==================
-  &[class*=_loading]  {
+  &._loading  {
     @include pb_button_loading(true);
   }
 
   // Danger ===================
-  &[class*=_danger] {
+  &._danger {
     @include pb_button_danger;
   }
 
   // Disabled =================
-  &[class*=_disabled]  {
+  &._disabled  {
     @include pb_button_disabled;
   }
 
   // Dark Variants =============
   &.dark  {
-    &[class*=_primary]  {
+    &._primary  {
       @include pb_button_primary_dark;
     }
-    &[class*=_secondary]  {
+    &._secondary  {
       @include pb_button_secondary_dark;
     }
-    &[class*=_link]  {
+    &._link  {
       @include pb_button_link_dark;
     }
-    &[class*=_disabled]  {
+    &._disabled  {
       @include pb_button_disabled_dark;
     }
   }

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -52,7 +52,7 @@ $pb_button_border_width: 0px;
 
   @include focus;
 
-  &[class*=dark] {
+  &.dark {
     @include focus-dark
   }
 

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss

@@ -5,16 +5,16 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
 
-[class^=pb_button_toolbar]{
+.pb_button_toolbar{
 
   // Horizontal =============
 
-  &[class*=_horizontal] {
+  &._horizontal {
     display: inline-flex;
     flex-direction: row;
     align-items: center;
     justify-content: flex-start;
-    & > [class^=pb_button]  {
+    & > .pb_button  {
       &:not(:last-child){
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;
@@ -26,30 +26,30 @@
         border-left-width: 0;
       }
     }
-    &[class*=_primary] {
-      & > [class^=pb_button]:not(:first-child)::before {
+    &._primary {
+      & > .pb_button:not(:first-child)::before {
         @include toolbar_border(false, $primary_border)
       }  
     }
-    &[class*=_secondary] {
-      & > [class^=pb_button]:not(:first-child)::before {
+    &._secondary {
+      & > .pb_button:not(:first-child)::before {
         @include toolbar_border(false, $secondary_border)
       }
     }
-    & > [class^=pb_button]:not(:first-child):hover::before,
-      [class^=pb_button]:hover + [class^=pb_button]::before {
+    & > .pb_button:not(:first-child):hover::before,
+      .pb_button:hover + .pb_button::before {
         opacity: 0
       }
   }
 
   // Vertical =============
 
-  &[class*=_vertical] {
+  &._vertical {
     display: inline-flex;
     flex-direction: column;
     align-items: flex-start;
     justify-content: center;
-    & > [class^=pb_button]  {
+    & > .pb_button  {
       display: block;
       flex-grow: 1;
       flex-shrink: 1;
@@ -66,31 +66,31 @@
         border-top-width: 0;
       }
     }
-    &[class*=_primary] {
-      & > [class^=pb_button]:not(:first-child)::before {
+    &._primary {
+      & > .pb_button:not(:first-child)::before {
         @include toolbar_border(true, $primary_border)
       }
     }
-    &[class*=_secondary] {
-      & > [class^=pb_button]:not(:first-child)::before {
+    &._secondary {
+      & > .pb_button:not(:first-child)::before {
         @include toolbar_border(true, $secondary_border)
       }
     }
-    & > [class^=pb_button]:not(:first-child):hover::before,
-    [class^=pb_button]:hover + [class^=pb_button]::before {
+    & > .pb_button:not(:first-child):hover::before,
+    .pb_button:hover + .pb_button::before {
       opacity: 0
     }
   }
 
   // Hover =============
   
-  & > [class^=pb_button]  {
+  & > .pb_button  {
     @media (hover:hover) {
       &:hover {
         background-color:darken($royal, 20%);
       }
     }
-    &[class*=secondary] {
+    &.secondary {
       @media (hover:hover) {
         &:hover {
           background-color:rgba($primary_action, $opacity_3)

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss

@@ -2,18 +2,18 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
 
-[class^=pb_button_toolbar]{
+.pb_button_toolbar{
 
   // Vertical =============
 
-  &[class*=_vertical] {
-    &[class*=_primary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
+  &._vertical {
+    &._primary.dark {
+      & > .pb_button:not(:first-child)::before {
         @include toolbar_border(true, $primary_dark)
       }
     }
-    &[class*=_secondary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
+    &._secondary.dark {
+      & > .pb_button:not(:first-child)::before {
         @include toolbar_border(true, $secondary_dark)
       }
     }
@@ -21,32 +21,32 @@
 
   // Horizontal =============
 
-  &[class*=_horizontal] {
-    &[class*=_primary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
+  &._horizontal {
+    &._primary.dark {
+      & > .pb_button:not(:first-child)::before {
         @include toolbar_border(false, $primary_dark)
       }
     }
-    &[class*=_secondary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
+    &._secondary.dark {
+      & > .pb_button:not(:first-child)::before {
         @include toolbar_border(false, $secondary_dark)
       }
     }
   }
-  & > [class^=pb_button]:not(:first-child):hover::before,
-  [class^=pb_button]:hover + [class^=pb_button]::before {
+  & > .pb_button:not(:first-child):hover::before,
+  .pb_button:hover + .pb_button::before {
     opacity: 0
   }
 
   // Hover =============
 
-  [class^=pb_button].dark  {
+  .pb_button.dark  {
     @media (hover:hover) {
       &:hover {
         background-color:darken($royal, 20%);
       }
     }
-    &[class*=secondary] {
+    &.secondary {
       @media (hover:hover) {
         &:hover {
           background-color:rgba($primary_action, $opacity_3)

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -1,7 +1,7 @@
 @import "../tokens/colors";
 @import "caption_mixin";
 
-[class^="pb_caption_kit"] {
+.pb_caption_kit{
   @include caption;
   &[class*="_link"] {
     color: $primary;