playbook_ui 14.25.0.pre.alpha.testingcss9700 → 14.25.0.pre.alpha.testingcss9713

data/app/pb_kits/playbook/pb_table/styles/_scroll.scss

@@ -33,33 +33,33 @@
                         -1px 0 0 0px $border_light
                 }
             }
-        &[class^=pb_table].table-sm.table-card thead tr th:first-child,
-        &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
+        &.pb_table.table-sm.table-card thead tr th:first-child,
+        &.pb_table.table-sm:not(.no-hover).table-card tbody tr td:first-child {
             border-left-width: 0px;
         }
 
-        &[class^=pb_table].table-md.table-card thead tr th:first-child,
-        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:first-child {
+        &.pb_table.table-md.table-card thead tr th:first-child,
+        &.pb_table.table-md:not(.no-hover).table-card tbody tr td:first-child {
             border-left-width: 0px;
         }
 
-        &[class^=pb_table].table-lg.table-card thead tr th:first-child,
-        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:first-child {
+        &.pb_table.table-lg.table-card thead tr th:first-child,
+        &.pb_table.table-lg:not(.no-hover).table-card tbody tr td:first-child {
             border-left-width: 0px;
         }
 
-        &[class^=pb_table].table-sm.table-card thead tr th:last-child,
-        &[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
+        &.pb_table.table-sm.table-card thead tr th:last-child,
+        &.pb_table.table-sm:not(.no-hover).table-card tbody tr td:last-child {
             border-right-width: 0px;
         }
 
-        &[class^=pb_table].table-md.table-card thead tr th:last-child,
-        &[class^=pb_table].table-md:not(.no-hover).table-card tbody tr td:last-child {
+        &.pb_table.table-md.table-card thead tr th:last-child,
+        &.pb_table.table-md:not(.no-hover).table-card tbody tr td:last-child {
             border-right-width: 0px;
         }
 
-        &[class^=pb_table].table-lg.table-card thead tr th:last-child,
-        &[class^=pb_table].table-lg:not(.no-hover).table-card tbody tr td:last-child {
+        &.pb_table.table-lg.table-card thead tr th:last-child,
+        &.pb_table.table-lg:not(.no-hover).table-card tbody tr td:last-child {
             border-right-width: 0px;
         }
     }

data/app/pb_kits/playbook/pb_table/styles/_side_highlight.scss

@@ -7,9 +7,9 @@ $pb_table_row_kit_side_highlight_colors: map-merge(map-merge($status_colors, $pr
   border-top: 0px;
 }
 
-[class^=pb_table] {
+.pb_table {
   tbody, .pb_table_tbody {
-    [class^=pb_table_row_kit] {
+    .pb_table_row_kit {
       @each $color_name, $color_value in $pb_table_row_kit_side_highlight_colors {
         &[class*=_side_highlight_#{$color_name}] {
           td, .pb_table_td {

data/app/pb_kits/playbook/pb_table/styles/_single-line.scss

@@ -1,4 +1,4 @@
-[class^=pb_table] {
+.pb_table {
   &.single-line {
     width: 100%;
     max-width: 100vw;

data/app/pb_kits/playbook/pb_table/styles/_striped.scss

@@ -1,4 +1,4 @@
-[class^=pb_table]:not(:has(colgroup)) {
+.pb_table:not(:has(colgroup)) {
   &.striped {
     tbody, .pb_table_tbody {
       tr:nth-child(odd):not(.pb_background_kit), .pb_table_tr:nth-child(odd):not(.pb_background_kit) {

data/app/pb_kits/playbook/pb_table/styles/_structure.scss

@@ -1,6 +1,6 @@
 @import "../../tokens/colors";
 
-[class^=pb_table] {
+.pb_table {
   display: table;
 
   @each $name, $value in $cell-pad-list {

data/app/pb_kits/playbook/pb_table/styles/_table-card.scss

@@ -1,4 +1,4 @@
-[class^=pb_table] {
+.pb_table {
   &.table-sm,
   &.table-md,
   &.table-lg {

data/app/pb_kits/playbook/pb_table/styles/_table-dark.scss

@@ -2,7 +2,7 @@
 
 $table-dark-card-bg: $card_dark;
 
-[class^=pb_table] {
+.pb_table {
   &.table-sm,
   &.table-md,
   &.table-lg {
@@ -46,7 +46,7 @@ $table-dark-card-bg: $card_dark;
 }
 
 @media only screen and (max-width: $screen-xs-max) {
-  [class^=pb_table] {
+  .pb_table {
     &.table-sm,
     &.table-md,
     &.table-lg {

data/app/pb_kits/playbook/pb_table/styles/_table_header.scss

@@ -9,9 +9,9 @@ $text_align_values: (
   match-parent: match-parent,
 );
 
-[class^=pb_table] {
+.pb_table {
   thead, .pb_table_thead {
-    [class^=pb_table_header_kit] {
+    .pb_table_header_kit {
       @each $align_name, $align_value in $text_align_values {
         &[class*=_align_#{$align_name}] {
           text-align: $align_value;
@@ -31,9 +31,9 @@ $text_align_values: (
   padding: $space_xxs;
 }
 
-[class^=pb_table] {
+.pb_table {
   thead, .pb_table_thead {
-    [class^=pb_th_active] {
+    .pb_th_active {
       color: $primary !important;
     }
   }

data/app/pb_kits/playbook/pb_table/styles/_tablet_collapse.scss

@@ -3,7 +3,7 @@
 @import "../../pb_caption/caption_mixin";
 
 @media only screen and (max-width: $screen-lg-min) {
-  [class^=pb_table] {
+  .pb_table {
     &.table-sm.table-collapse-md,
     &.table-md.table-collapse-md,
     &.table-lg.table-collapse-md {

data/app/pb_kits/playbook/pb_table/styles/_vertical_border.scss

@@ -1,4 +1,4 @@
-[class^=pb_table] {
+.pb_table {
   &.vertical-border {
     td, th, .pb_table_td, .pb_table_th {
       border-right: 1px solid $border_light !important;

data/app/pb_kits/playbook/pb_text_input/_text_input.scss

@@ -76,7 +76,7 @@
         .text_input {
           border-color: $error_dark;
         }
-        [class*=pb_body_kit_negative] {
+        .pb_body_kit_negative {
           color: $error_dark;
         }
       }

data/app/pb_kits/playbook/pb_text_input/text_input.rb

@@ -77,6 +77,7 @@ module Playbook
           name: mask.present? ? "" : name,
           pattern: validation_pattern || mask_pattern,
           placeholder: placeholder,
+          style: "cursor: #{cursor_style}",
           required: required,
           type: type,
           value: value,
@@ -84,6 +85,20 @@ module Playbook
         }.merge(input_options)
       end
 
+      def cursor_style
+        # If input is disabled, always use 'not-allowed'
+        return "not-allowed" if disabled
+
+        # If cursor prop is provided, convert it to kebab-case
+        if cursor.present?
+          # Convert camelCase (ex. notAllowed) to kebab-case (ex. not-allowed)
+          cursor.to_s.gsub(/([a-z\d])([A-Z])/, '\1-\2').downcase
+        else
+          # Default to 'pointer'
+          "pointer"
+        end
+      end
+
       def validation_message
         validation[:message] || ""
       end

data/app/pb_kits/playbook/pb_textarea/_textarea.scss

@@ -3,10 +3,10 @@
 @import "../tokens/spacing";
 @import "../tokens/titles";
 
-[class^=pb_textarea_kit] {
+.pb_textarea_kit {
   margin-bottom: $space_sm;
 
-  [class^=pb_caption_kit] {
+  .pb_caption_kit {
     margin-bottom: $space_xs;
     display: block;
   }
@@ -59,7 +59,7 @@
   }
 
   &.error {
-    [class*=pb_body_kit] {
+    .pb_body_kit {
       margin-top: $space_xs / 2;
     }
     textarea {

data/app/pb_kits/playbook/pb_time/_time.scss

@@ -4,16 +4,16 @@
 @import "../pb_body/body";
 @import "../pb_caption/caption";
 
-[class^=pb_time_kit] {
-  &[class*=_center]  {
+.pb_time_kit {
+  &._center  {
     text-align: center;
   }
 
-  &[class*=_right]  {
+  &._right  {
     text-align: right;
   }
 
-  [class^=pb_time_timezone] {
+  .pb_time_timezone {
     color: $text_lt_light;
     font-weight: $bold;
 
@@ -22,7 +22,7 @@
     }
   }
 
-  &[class*=dark] {
+  &.dark {
     & * {
       @include caption_dark;
     }

data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.scss

@@ -1,34 +1,34 @@
 
-[class^=pb_time_range_inline_kit] {
-  &[class*=_center]  {
-    & > [class^=pb_caption],
-    & > [class^=pb_body] {
+.pb_time_range_inline_kit {
+  &._center  {
+    & > .pb_caption,
+    & > .pb_body {
       text-align: center;
     }
-    & > [class*=pb_time_range_inline_wrapper] {
+    & > .pb_time_range_inline_wrapper {
       justify-content: center;
     }
   }
-  &[class*=_right] {
-    & > [class^=pb_caption],
-    & > [class^=pb_body] {
+  &._right {
+    & > .pb_caption,
+    & > .pb_body {
       text-align: right;
     }
-    & > [class*=pb_time_range_inline_wrapper] {
+    & > .pb_time_range_inline_wrapper {
       justify-content: flex-end;
     }
   }
-  [class^=pb_time_range_inline_wrapper] {
+  .pb_time_range_inline_wrapper {
     display: flex;
     align-items: center;
-    [class*=pb_time_range_inline_arrow] {
+    .pb_time_range_inline_arrow {
       margin-left: $space_xs/2;
       margin-right: $space_xs/2;
     }
-    [class*=pb_time_range_inline_timezone] {
+    .pb_time_range_inline_timezone {
       margin-left: $space_xs/2;
     }
-    [class*=pb_time_range_inline_icon] {
+    .pb_time_range_inline_icon {
       margin-right: $space_xs/2;
     }
   }

data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.scss

@@ -2,12 +2,12 @@
 @import "../pb_caption/caption";
 @import "../tokens/colors";
 
-[class^=pb_time_stacked_kit] {
- &[class*=_center]  {
+.pb_time_stacked_kit {
+ &._center  {
    text-align: center;
  }
 
- &[class*=_right]  {
+ &._right  {
    text-align: right;
  }
 

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -43,14 +43,14 @@ $gap_lg: $height_from_top + $space_lg;
     flex-direction: $flex_direction;
 }
 
-[class^=pb_timeline_kit] {
-    &[class*=_horizontal] {
+.pb_timeline_kit {
+    &._horizontal {
         @include flex_wrapper(row);
         width: 100%;
         >div {
             &:last-child {
                 flex-basis: auto !important;
-                [class^=pb_timeline_item_step] {
+                .pb_timeline_item_step {
                     [class=pb_timeline_item_connector] {
                         opacity: 0;
                     }
@@ -63,10 +63,10 @@ $gap_lg: $height_from_top + $space_lg;
                 }
             }
         }
-        [class*=pb_timeline_item_kit] {
-            &[class*=_solid] {
+        .pb_timeline_item_kit {
+            &._solid {
                 flex-basis: 100%;
-                [class^=pb_timeline_item_step] {
+                .pb_timeline_item_step {
                     @include flex_wrapper(row);
                     align-items: center;
                     margin-top: $space_xs;
@@ -76,9 +76,9 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                 }
             }
-            &[class*=_dotted] {
+            &._dotted {
                 flex-basis: 100%;
-                [class^=pb_timeline_item_step] {
+                .pb_timeline_item_step {
                     @include flex_wrapper(row);
                     align-items: center;
                     margin-top: $space_xs;
@@ -89,13 +89,13 @@ $gap_lg: $height_from_top + $space_lg;
                 }
             }
         }
-        &[class*=_with_date] {
+        &._with_date {
             @include flex_wrapper(row);
             width: 100%;
             >div {
                 &:last-child {
                     flex-basis: auto !important;
-                    [class^=pb_timeline_item_step] {
+                    .pb_timeline_item_step {
                         [class=pb_timeline_item_connector] {
                             opacity: 0;
                         }
@@ -108,8 +108,8 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                 }
             }
-            [class*=pb_timeline_item_kit] {
-                &[class*=_solid] {
+            .pb_timeline_item_kit {
+                &._solid {
                     flex-basis: 100%;
                     [class=pb_timeline_item_left_block] {
                         display: flex;
@@ -125,7 +125,7 @@ $gap_lg: $height_from_top + $space_lg;
                             }
                         }
                     }
-                    [class^=pb_timeline_item_step] {
+                    .pb_timeline_item_step {
                         @include flex_wrapper(row);
                         margin-top: $space_xs;
                         margin-bottom: $space_xs;
@@ -134,7 +134,7 @@ $gap_lg: $height_from_top + $space_lg;
                         }
                     }
                 }
-                &[class*=_dotted] {
+                &._dotted {
                     flex-basis: 100%;
                     [class=pb_timeline_item_left_block] {
                         height: 55px;
@@ -149,7 +149,7 @@ $gap_lg: $height_from_top + $space_lg;
                             }
                         }
                     }
-                    [class^=pb_timeline_item_step] {
+                    .pb_timeline_item_step {
                         @include flex_wrapper(row);
                         margin-top: $space_xs;
                         margin-bottom: $space_xs;
@@ -161,22 +161,22 @@ $gap_lg: $height_from_top + $space_lg;
             }
         }
     }
-    &[class*=_vertical] {
+    &._vertical {
         @include flex_wrapper(column);
         align-items: flex-start;
         align-self: auto;
         >div:last-child {
-            [class^=pb_timeline_item_step] {
+            .pb_timeline_item_step {
                 [class=pb_timeline_item_connector] {
                     opacity: 0;
                 }
             }
         }
-        [class*=pb_timeline_item_kit] {
+        .pb_timeline_item_kit {
             @include flex_wrapper(row);
-            &[class*=_solid] {
+            &._solid {
                 flex-basis: 100%;
-                [class^=pb_timeline_item_step] {
+                .pb_timeline_item_step {
                     @include flex_wrapper(column);
                     align-items: center;
                     align-content: flex-start;
@@ -195,9 +195,9 @@ $gap_lg: $height_from_top + $space_lg;
                     margin-bottom: $space_lg;
                 }
             }
-            &[class*=_dotted] {
+            &._dotted {
                 flex-basis: 100%;
-                [class^=pb_timeline_item_step] {
+                .pb_timeline_item_step {
                     @include flex_wrapper(column);
                     align-items: center;
                     margin-right: $space_sm;
@@ -216,22 +216,22 @@ $gap_lg: $height_from_top + $space_lg;
                 }
             }
         }
-        &[class*=_with_date] {
+        &._with_date {
             @include flex_wrapper(column);
             align-items: flex-start;
             align-self: auto;
             >div:last-child {
-                [class^=pb_timeline_item_step] {
+                .pb_timeline_item_step {
                     [class=pb_timeline_item_connector] {
                         opacity: 0;
                     }
                 }
             }
-            [class*=pb_timeline_item_kit] {
+            .pb_timeline_item_kit {
                 @include flex_wrapper(row);
-                &[class*=_solid] {
+                &._solid {
                     flex-basis: 100%;
-                    [class^=pb_timeline_item_step] {
+                    .pb_timeline_item_step {
                         @include flex_wrapper(column);
                         align-items: center;
                         align-content: flex-start;
@@ -250,9 +250,9 @@ $gap_lg: $height_from_top + $space_lg;
                         margin-bottom: $space_lg;
                     }
                 }
-                &[class*=_dotted] {
+                &._dotted {
                     flex-basis: 100%;
-                    [class^=pb_timeline_item_step] {
+                    .pb_timeline_item_step {
                         @include flex_wrapper(column);
                         align-items: center;
                         margin-right: $space_sm;
@@ -272,36 +272,36 @@ $gap_lg: $height_from_top + $space_lg;
                 }
             }
         }
-        &[class*=_gap_xs] {
-            [class*=pb_timeline_item_kit] {
-                [class^=pb_timeline_item_step] {
+        &._gap_xs {
+            .pb_timeline_item_kit {
+                .pb_timeline_item_step {
                     [class=pb_timeline_item_connector] {
                         height: $gap_xs !important;
                     }
                 }
             }
         }
-        &[class*=_gap_sm] {
-            [class*=pb_timeline_item_kit] {
-                [class^=pb_timeline_item_step] {
+        &._gap_sm {
+            .pb_timeline_item_kit {
+                .pb_timeline_item_step {
                     [class=pb_timeline_item_connector] {
                         height: $gap_sm !important;
                     }
                 }
             }
         }
-        &[class*=_gap_md] {
-            [class*=pb_timeline_item_kit] {
-                [class^=pb_timeline_item_step] {
+        &._gap_md {
+            .pb_timeline_item_kit {
+                .pb_timeline_item_step {
                     [class=pb_timeline_item_connector] {
                         height: $gap_md !important;
                     }
                 }
             }
         }
-        &[class*=_gap_lg] {
-            [class*=pb_timeline_item_kit] {
-                [class^=pb_timeline_item_step] {
+        &._gap_lg {
+            .pb_timeline_item_kit {
+                .pb_timeline_item_step {
                     [class=pb_timeline_item_connector] {
                         height: $gap_lg !important;
                     }

data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss

@@ -1,16 +1,16 @@
 @import "timestamp-mixins";
 @import "../tokens/colors";
 
-[class^=pb_timestamp_kit]{
+.pb_timestamp_kit{
   @include pb_timestamp;
 
-  &[class*=_center]  {
+  &._center  {
     text-align: center;
   }
-  &[class*=_right]  {
+  &._right  {
     text-align: right;
   }
-  &[class*=_dark] {
+  &._dark {
     color: $text_dk_default;
   }
 }

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -3,60 +3,60 @@
 @import "../tokens/screen_sizes";
 @import './title_mixin';
 
-[class^=pb_title_kit] {
-  &[class*=_1] {
+.pb_title_kit {
+  &._1 {
     @include pb_title_1;
     @include title_colors;
     @include pb_title_bold;
   }
 
-  &[class*=_2] {
+  &._2 {
     @include pb_title_2;
     @include title_colors;
     @include pb_title_bold;
   }
 
-  &[class*=_3] {
+  &._3 {
     @include pb_title_3;
     @include title_colors;
     @include pb_title_bold;
   }
 
-  &[class*=_4] {
+  &._4 {
     @include pb_title_4;
     @include title_colors;
   }
 
-  &[class*=_thin] {
+  &._thin {
     @include pb_title_thin;
   }
 
-  &[class*=_display] {
+  &._display {
     font-size: clamp(24px, calc(1.25vw + 5.3vw), 128px);
   }
 
-  &[class*=_dynamic] {
-    &[class*=_xs] {
+  &._dynamic {
+    &._xs {
       font-size: min(2vw, 80vw / 16); 
     }
   
-    &[class*=_sm] {
+    &._sm {
       font-size: min(2.5vw, 96vw / 16); 
     }
   
-    &[class*=_md] {
+    &._md {
       font-size: min(4vw, 160vw / 16);
     }
   
-    &[class*=_lg] {
+    &._lg {
       font-size: min(5vw, 192vw / 16);
     }
   
-    &[class*=_xl] {
+    &._xl {
       font-size: min(6vw, 224vw / 16);
     }
   
-    &[class*=_xxl] {
+    &._xxl {
       font-size: min(8vw, 256vw / 16);
     }
   }

data/app/pb_kits/playbook/pb_title_count/_title_count.scss

@@ -1,7 +1,7 @@
 @import "../pb_title/title";
 @import "../pb_body/body";
 
-[class^=pb_title_count_kit] {
+.pb_title_count_kit {
   display: flex;
   justify-content: flex-start;
   align-items: baseline;
@@ -10,11 +10,11 @@
     padding-right: $space-xs;
   }
 
-  &[class*=_center] {
+  &._center {
     justify-content: center;
   }
 
-  &[class*=_right] {
+  &._right {
     justify-content: flex-end;
   }
 }