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

data/app/pb_kits/playbook/pb_card/_card.scss

@@ -1,100 +1,46 @@
 @import "card_mixin";
 @import "../utilities/colors";
 
-[class^=pb_card_kit] {
+// Main card selector - matches all pb_card_kit classes
+[class^="pb_card_kit"] {
   @include pb_card;
   padding: $space_md;
 
-  &[class*=_selected] {
+  // Selected state
+  &[class*="_selected"] {
     @include pb_card_selected;
   }
 
+  // Dark theme
   &.dark {
     @include pb_card_dark;
 
-    &[class*=_selected] {
+    &[class*="_selected"] {
       @include pb_card_selected_dark;
     }
   }
 
-  &[class*=_border_none] {
+  // Border none variants
+  &[class*="_border_none"] {
     border-width: 0px;
   }
 
-  @function ends-with($string, $suffix) {
-    $suffix-length: str-length($suffix);
-    @if $suffix-length == 0 {
-      @return true;
-    }
-    @return str-slice($string, -$suffix-length) == $suffix;
-  }
-
-  [class^=pb_card_header_kit] {
-    flex-grow: 0;
-    flex-shrink: 0;
-    flex-basis: auto;
-    min-height: 1px;
-    padding: $space_sm;
-    border: 0;
-    border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
-    @each $color_name, $color_value in $pb_card_header_colors {
-      @if not ends-with($color_name, '_subtle') {
-        &[class*="_#{$color_name}"] {
-          @include pb_card_header_color($color_value);
-          color: lightenText($color_value);
-        }
-      }
-    }
-    @each $color_name, $color_value in $pb_card_header_colors {
-      @if ends-with($color_name, '_subtle') {
-        &[class*="_#{$color_name}"] {
-          @include pb_card_header_color($color_value);
-          color: lightenText($color_value);
-        }
-      }
-    }
-    @each $color_name, $color_value in $pb_card_header_colors {
-      &[class*=_#{$color_name}_striped] {
-        @if ((type-of($color_value) == color)) {
-          background: repeating-linear-gradient(
-            45deg,
-            $color_value,
-            $color_value 10px,
-            lighten( $color_value, 5% ) 10px,
-            lighten( $color_value, 5% ) 20px
-          );
-        }
-      }
-    }
-    &[class*=_white] {
-      border-bottom: 1px solid $border_light;
-    }
-  }
-
-  [class^=pb_card_body_kit] {
-    flex-grow: 0;
-    flex-shrink: 0;
-    flex-basis: auto;
-    min-height: 1px;
-    border: 0;
-    padding: $space_md;
-  }
-
-  &[class*=_highlight] {
+  // Highlight variants
+  &[class*="_highlight"] {
     overflow: hidden;
   }
 
-  &[class*=_highlight_top] {
+  &[class*="_highlight_top"] {
     @each $color_name, $color_value in $pb_card_highlight_colors {
-      &[class*=_highlight_#{$color_name}]::before {
+      &[class*="_highlight_#{$color_name}"]::before {
         @include pb_card_highlight(100%, $pb_card_highlight_size, $color_value);
       }
     }
   }
 
-  &[class*=_highlight_side] {
+  &[class*="_highlight_side"] {
     @each $color_name, $color_value in $pb_card_highlight_colors {
-      &[class*=_highlight_#{$color_name}]::before {
+      &[class*="_highlight_#{$color_name}"]::before {
         @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
       }
     }
@@ -105,3 +51,68 @@
     color: $text_lt_light;
   }
 }
+
+@function ends-with($string, $suffix) {
+  $suffix-length: str-length($suffix);
+  @if $suffix-length == 0 {
+    @return true;
+  }
+  @return str-slice($string, -$suffix-length) == $suffix;
+}
+
+// Header styles
+[class^="pb_card_header_kit"] {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+  min-height: 1px;
+  padding: $space_sm;
+  border: 0;
+  border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
+  
+  @each $color_name, $color_value in $pb_card_header_colors {
+    @if not ends-with($color_name, '_subtle') {
+      &[class*="_#{$color_name}"] {
+        @include pb_card_header_color($color_value);
+        color: lightenText($color_value);
+      }
+    }
+  }
+  
+  @each $color_name, $color_value in $pb_card_header_colors {
+    @if ends-with($color_name, '_subtle') {
+      &[class*="_#{$color_name}"] {
+        @include pb_card_header_color($color_value);
+        color: lightenText($color_value);
+      }
+    }
+  }
+  
+  @each $color_name, $color_value in $pb_card_header_colors {
+    &[class*="_#{$color_name}_striped"] {
+      @if ((type-of($color_value) == color)) {
+        background: repeating-linear-gradient(
+          45deg,
+          $color_value,
+          $color_value 10px,
+          lighten( $color_value, 5% ) 10px,
+          lighten( $color_value, 5% ) 20px
+        );
+      }
+    }
+  }
+  
+  &[class*="_white"] {
+    border-bottom: 1px solid $border_light;
+  }
+}
+
+// Body styles
+[class^="pb_card_body_kit"] {
+  flex-grow: 0;
+  flex-shrink: 0;
+  flex-basis: auto;
+  min-height: 1px;
+  border: 0;
+  padding: $space_md;
+}

data/app/pb_kits/playbook/pb_card/_card_mixin.scss

@@ -52,19 +52,19 @@ $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $addition
   background-color: $white;
 
   @each $name, $color in $background_colors {
-    &[class*=background_#{$name}] {
+    &[class*="_background_#{$name}"] {
       background-color: $color;
     }
   };
 
   @each $name, $shadow in $box_shadows {
-    &[class^=_#{$name}] {
+    &[class*="_#{$name}"] {
       box-shadow: $shadow;
     }
   }
 
   @each $name, $radius in $border_radius {
-    &[class*=_#{$name}] {
+    &[class*="_border_radius_#{$name}"] {
       border-radius: $radius;
     }
   }
@@ -89,4 +89,4 @@ $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $addition
 
 @mixin pb_card_header_color($header_color) {
   background: $header_color;
-}
+}

data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss

@@ -3,7 +3,7 @@
 @import "../tokens/positioning";
 $transition: $transition_cubic;
 
-[class^=pb_checkbox_kit] {
+.pb_checkbox_kit {
   cursor: pointer;
   display: inline-flex;
   vertical-align: middle;

data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.scss

@@ -37,25 +37,25 @@ $pb_button_styles: (
   }
 }
 
-[class^=pb_circle_icon_button_kit] {
+.pb_circle_icon_button_kit {
   @each $style in $pb_button_styles {
-    [class^=pb_button_kit][class*=_#{$style}] {
+    .pb_button_kit[class*=_#{$style}] {
       @include pb_circle_icon_button;
     }
   }
   :first-child {
-    &[class*=_link]  {
+    &._link  {
       @include pb_circle_icon_button_active;
     }
     &.dark  {
-      &[class*=_link]  {
+      &._link  {
         @include pb_circle_icon_button_active_dark;
       }
     }
   }
   &.size_small {
     @each $style in $pb_button_styles {
-      [class^=pb_button_kit][class*=_#{$style}] {
+      .pb_button_kit[class*=_#{$style}] {
         width: 20px;
         height: 20px;
         min-height: 20px;

data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap

@@ -11,7 +11,7 @@ exports[`html structure is correct 1`] = `
     >
       <div>
         <div
-          class="pb_flex_kit_orientation_row_justify_content_left_align_items_center_spacing_between"
+          class="pb_flex_kit pb_flex_kit_orientation_row pb_flex_kit_justify_content_left pb_flex_kit_align_items_center pb_flex_kit_spacing_between"
         >
           <div
             class="pb_flex_item_kit"

data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss

@@ -1,7 +1,7 @@
 @import "tokens/colors";
 @import "tokens/spacing";
 
-[class^=pb_collapsible_kit] {
+.pb_collapsible_kit {
   padding: $space_md;
 
   .toggle-content {
@@ -28,10 +28,10 @@
   }
 }
 
-[class^=pb_collapsible_main_kit] {
+.pb_collapsible_main_kit {
   padding: $space_md;
 }
 
-[class^=pb_collapsible_content_kit] {
+.pb_collapsible_content_kit {
   padding: $space_md;
 }

data/app/pb_kits/playbook/pb_currency/_currency.scss

@@ -1,95 +1,95 @@
-[class^=pb_currency_kit] {
-  &[class*=_center]  {
-    & > [class^=pb_caption],
-    & > [class^=pb_title],
-    & > [class^=pb_body] {
+.pb_currency_kit {
+  &._center  {
+    & > .pb_caption,
+    & > .pb_title,
+    & > .pb_body {
       text-align: center;
     }
-    & > [class*=pb_currency_wrapper] {
+    & > .pb_currency_wrapper {
       justify-content: center;
     }
   }
 
-  &[class*=_right] {
-    & > [class^=pb_caption],
-    & > [class^=pb_title],
-    & > [class^=pb_body] {
+  &._right {
+    & > .pb_caption,
+    & > .pb_title,
+    & > .pb_body {
       text-align: right;
     }
-    & > [class*=pb_currency_wrapper] {
+    & > .pb_currency_wrapper {
       justify-content: flex-end;
     }
   }
 
-  [class^=pb_currency_wrapper] {
+  .pb_currency_wrapper {
     display: flex;
     align-items: baseline;
 
-    &[class*=_deemphasized] {
-      [class^=pb_body_kit], [class^=pb_body_kit] {
-        &:not([class*=dark]) {
+    &._deemphasized {
+      .pb_body_kit, .pb_body_kit {
+        &:not(.dark) {
           color: $text_lt_default;
         }
       }
 
-      [class^=pb_body_kit][class*=_light] {
+      .pb_body_kit._light {
         font-weight: $regular;
       }
 
-      [class^=pb_title_kit] {
+      .pb_title_kit {
         font-weight: $lighter;
       }
     }
 
-    &[class*=_light] {
-      [class^=pb_body_kit], [class^=pb_title_kit] {
+    &._light {
+      .pb_body_kit, .pb_title_kit {
         color: $text_lt_light;
         font-weight: $regular;
       }
 
-      [class^=pb_title_kit].dark {
+      .pb_title_kit.dark {
         color: $text_dk_light;
       }
     }
 
-    &[class*=_bold] {
-      [class^=pb_body_kit], [class^=_light]{
+    &._bold {
+      .pb_body_kit, ._light{
         color: $text_lt_default;
         font-weight: $bolder;
       }
     }
 
-    & > [class*=dollar_sign] {
+    & > .dollar_sign {
       display: flex;
       align-self: flex-start;
     }
-    & > [class*=unit] {
+    & > .unit {
       display: flex;
       align-items: flex-end;
     }
   }
 
-  &[class*=_sm] {
-    [class^=pb_currency_wrapper][class*=_deemphasized] {
-      [class^=pb_title_kit] {
+  &._sm {
+    .pb_currency_wrapper._deemphasized {
+      .pb_title_kit {
         font-weight: $regular;
       }
     }
   }
 
-  &[class*=_lg] [class^=pb_currency_wrapper] [class*=pb_currency_value] {
+  &._lg .pb_currency_wrapper .pb_currency_value {
     line-height: .9;
     padding-left: $space_xs - 7px;
     padding-right: $space_xs - 7px;
   }
 
-  &[class*=_md] [class^=pb_currency_wrapper] [class*=pb_currency_value] {
+  &._md .pb_currency_wrapper .pb_currency_value {
     line-height: 1.2;
     padding-left: $space_xs - 7px;
     padding-right: $space_xs - 7px;
   }
 
-  &[class*=_sm] [class^=pb_currency_wrapper] [class*=pb_currency_value] {
+  &._sm .pb_currency_wrapper .pb_currency_value {
     line-height: 1.4;
     padding-left: $space_xs - 7px;
     padding-right: $space_xs - 7px;

data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.scss

@@ -3,7 +3,7 @@
 @import "../pb_stat_change/stat_change";
 @import "../pb_body/body";
 
-[class^=pb_dashboard_value_kit]{
+.pb_dashboard_value_kit{
   @each $align_name, $align_value in $pb_dashboard_value_align {
     &[class*=_#{$align_name}]  {
       @include pb_dashboard_value($align_value);

data/app/pb_kits/playbook/pb_date/_date.scss

@@ -1,7 +1,7 @@
 @import "../pb_icon/icon";
 @import "../pb_title/title";
 
-[class^=pb_date_kit] {
+.pb_date_kit {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -9,7 +9,7 @@
         margin-right: 4px !important;
     }
 
-    &[class*=_center] {
+    &._center {
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -17,7 +17,7 @@
         margin-right: 4px !important;
     }
 
-    &[class*=_right] {
+    &._right {
         display: flex;
         flex-direction: row;
         align-items: center;
@@ -25,10 +25,10 @@
         margin-left: 4px !important;
     }
     &.dark {
-        [class^=pb_title_kit] {
+        .pb_title_kit {
             color: $text_dk_default !important;
         }
-        [class^=pb_body_kit], [class^=pb_caption_kit] {
+        .pb_body_kit, .pb_caption_kit {
             color: $text_dk_light !important;
         }
     }

data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss

@@ -8,7 +8,7 @@
 @import "./sass_partials/input_styles";
 @import "./sass_partials/quick_pick_styles";
 
-[class^=pb_date_picker_kit] {
+.pb_date_picker_kit {
   .input_wrapper {
     position: relative;
 

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -4,6 +4,7 @@ import classnames from 'classnames'
 import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
 import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
 import { getAllIcons } from "../utilities/icons/allicons"
+import { camelToSnakeCase } from '../utilities/text'
 
 import datePickerHelper from './date_picker_helper'
 import Icon from '../pb_icon/_icon'
@@ -114,6 +115,20 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
   const inputAriaProps = buildAriaProps(inputAria)
   const inputDataProps = buildDataProps(inputData)
 
+  // Convert cursor prop to CSS-style format to apply to input tag below
+  const getCursorStyle = (cursor?: string): string => {
+    // If input is disabled, always use 'not-allowed'
+    if (disableInput) return 'not-allowed'
+
+    // If cursor prop is provided, convert it to styling format
+    if (cursor) {
+      return camelToSnakeCase(cursor).replace(/_/g, '-')
+    }
+
+    // Default to 'pointer'
+    return 'pointer'
+  }
+
   useEffect(() => {
     datePickerHelper({
       allowInput,
@@ -149,6 +164,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       required: false,
     }, scrollContainer)
   }, initializeOnce ? [] : undefined)
+
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"
@@ -163,6 +179,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     error ? 'error' : null,
     className
   )
+
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
     if (dark) {
@@ -176,6 +193,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     }
     return base
   }
+
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   return (
@@ -206,6 +224,7 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
                   name={name}
                   onChange={inputOnChange}
                   placeholder={placeholder}
+                  style={{ cursor: getCursorStyle(filteredProps.cursor) }}
                   value={inputValue}
               />
 

data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb

@@ -10,6 +10,7 @@
       <%= pb_rails("text_input", props: {
         aria: object.input_aria,
         autocomplete: false,
+        cursor: object.cursor,
         dark: object.dark,
         data: object.input_data,
         disabled: object.disable_input,

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss

@@ -6,7 +6,7 @@
       Default - display grey caret icon
       Hover - display blue caret icon
   */
-[class^=pb_date_picker_kit] {
+.pb_date_picker_kit {
   /*Default - No value in date picker*/
   &.inline-date-picker {
     [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
@@ -95,7 +95,7 @@
 /*
   DARK MODE
 */
-[class^=pb_date_picker_kit].dark {
+.pb_date_picker_kit.dark {
   &.inline-date-picker {
     &:not(:hover) {
       .date-picker-inline-angle-down.cal_icon_wrapper {

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_input_styles.scss

@@ -1,6 +1,6 @@
 @import "../../pb_textarea/textarea_mixin";
 
-[class^=pb_date_picker_kit] {
+.pb_date_picker_kit {
 
   .pb_date_picker_kit_label {
     margin-bottom: $space_xs;
@@ -40,7 +40,7 @@
 
   &.error {
     .date_picker_input_wrapper {
-      [class*=pb_body_kit] {
+      .pb_body_kit {
         margin-top: $space_xs / 2;
       }
 

data/app/pb_kits/playbook/pb_date_picker/sass_partials/_time_selection_styles.scss

@@ -2,7 +2,7 @@
 @import "../../tokens/spacing";
 @import "../../tokens/colors";
 
-[class^=pb_date_picker_kit] {
+.pb_date_picker_kit {
   .pb_time_selection {
     color: inherit;
     text-align: left;
@@ -27,10 +27,10 @@
         }
       }
     }
-    [class^=pb_caption_kit_md], [class^=pb_caption_kit_xs] {
+    .pb_caption_kit_md, .pb_caption_kit_xs {
       line-height: $text_larger;
     }
-    [class^=pb_caption_kit_xs] {
+    .pb_caption_kit_xs {
       clear: both;
       display: block;
     }
@@ -41,7 +41,7 @@
       }
     }
     .meridiem {
-      [class^=pb_form_group_kit] {
+      .pb_form_group_kit {
         margin-left: $space_sm;
       }
 
@@ -52,7 +52,7 @@
         background: transparent;
       }
 
-      [class^=pb_selectable_card_kit] > label {
+      .pb_selectable_card_kit > label {
         padding: 0;
         margin: 0;
         width: 60px;

data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss

@@ -1,33 +1,33 @@
-[class^=pb_date_range_inline_kit] {
-  &[class*=_center]  {
-    & > [class^=pb_caption],
-    & > [class^=pb_body] {
+.pb_date_range_inline_kit {
+  &._center  {
+    & > .pb_caption,
+    & > .pb_body {
       text-align: center;
     }
-    & > [class*=pb_date_range_inline_wrapper] {
+    & > .pb_date_range_inline_wrapper {
       justify-content: center;
     }
   }
-  &[class*=_right] {
-    & > [class^=pb_caption],
-    & > [class^=pb_body] {
+  &._right {
+    & > .pb_caption,
+    & > .pb_body {
       text-align: right;
     }
-    & > [class*=pb_date_range_inline_wrapper] {
+    & > .pb_date_range_inline_wrapper {
       justify-content: flex-end;
     }
   }
-  [class^=pb_date_range_inline_wrapper] {
+  .pb_date_range_inline_wrapper {
     display: flex;
     align-items: center;
-    [class*=pb_date_range_inline_arrow] {
+    .pb_date_range_inline_arrow {
       margin-left: $space_xs/2;
       margin-right: $space_xs/2;
     }
-    [class*=pb_date_range_inline_timezone] {
+    .pb_date_range_inline_timezone {
       margin-left: $space_xs/2;
     }
-    [class*=pb_date_range_inline_icon] {
+    .pb_date_range_inline_icon {
       margin-right: $space_xs/2;
     }
   }

data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.scss

@@ -1,6 +1,6 @@
 @import "../tokens/spacing";
 
-[class^=pb_date_range_stacked] {
+.pb_date_range_stacked {
   .pb_date_range_stacked_arrow {
     margin: 0 ($space_sm - 3) 0;
   }