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

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,11 +6,11 @@
       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,
-    [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
+    .pb_text_input_kit .text_input_wrapper .flatpickr-wrapper input::placeholder,
+    .pb_text_input_kit .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
       opacity: 1;
     }
     &:not(:hover) {
@@ -27,10 +27,10 @@
       }
     }
     &:hover {
-      [class^="pb_text_input_kit"] .text_input_wrapper input,
-      [class^="pb_text_input_kit"] .text_input_wrapper .text_input,
-      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
-      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
+      .pb_text_input_kit .text_input_wrapper input,
+      .pb_text_input_kit .text_input_wrapper .text_input,
+      .pb_text_input_kit .text_input_wrapper .flatpickr-wrapper input::placeholder,
+      .pb_text_input_kit .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
         color: $primary;
       }
       .date-picker-inline-angle-down.cal_icon_wrapper {
@@ -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 {
@@ -111,10 +111,10 @@
       }
     }
     &:hover {
-      [class^="pb_text_input_kit"] .text_input_wrapper input,
-      [class^="pb_text_input_kit"] .text_input_wrapper .text_input,
-      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
-      [class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
+      .pb_text_input_kit .text_input_wrapper input,
+      .pb_text_input_kit .text_input_wrapper .text_input,
+      .pb_text_input_kit .text_input_wrapper .flatpickr-wrapper input::placeholder,
+      .pb_text_input_kit .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
         color: $white;
       }
       .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,34 +1,40 @@
-[class^=pb_date_range_inline_kit] {
-  &[class*=_center]  {
-    & > [class^=pb_caption],
-    & > [class^=pb_body] {
-      text-align: center;
-    }
-    & > [class*=pb_date_range_inline_wrapper] {
-      justify-content: center;
-    }
-  }
-  &[class*=_right] {
-    & > [class^=pb_caption],
-    & > [class^=pb_body] {
-      text-align: right;
-    }
-    & > [class*=pb_date_range_inline_wrapper] {
-      justify-content: flex-end;
-    }
-  }
-  [class^=pb_date_range_inline_wrapper] {
+.pb_date_range_inline_kit,
+.pb_date_range_inline_kit_left,
+.pb_date_range_inline_kit_center,
+.pb_date_range_inline_kit_right,
+.pb_date_range_inline_kit_vertical {
+  .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;
     }
   }
 }
+
+.pb_date_range_inline_kit_center {
+  & > .pb_caption_kit,
+  & > .pb_body_kit {
+    text-align: center;
+  }
+  & > .pb_date_range_inline_wrapper {
+    justify-content: center;
+  }
+}
+
+.pb_date_range_inline_kit_right {
+  & > .pb_caption_kit,
+  & > .pb_body_kit {
+    text-align: right;
+  }
+  & > .pb_date_range_inline_wrapper {
+    justify-content: flex-end;
+  }
+}

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

@@ -10,7 +10,7 @@ import Caption from "../pb_caption/_caption";
 import Icon from "../pb_icon/_icon";
 
 type DateRangeInlineProps = {
-  align?: "left" | "center" | "vertical";
+  align?: "left" | "center" | "right";
   className?: string;
   dark?: boolean;
   data?: string;

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;
   }

data/app/pb_kits/playbook/pb_date_range_stacked/date_range_stacked.test.js

@@ -74,7 +74,7 @@ describe("DateRangeStacked Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const text = kit.querySelector('.pb_date_year_stacked_right>.pb_title_kit_size_4')
+        const text = kit.querySelector('.pb_date_year_stacked_right>.pb_title_kit.pb_title_4')
         expect(text.textContent).toEqual("18 JUN")
     })
 
@@ -104,7 +104,7 @@ describe("DateRangeStacked Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const text = kit.querySelector('.pb_date_year_stacked_left>.pb_title_kit_size_4')
+        const text = kit.querySelector('.pb_date_year_stacked_left>.pb_title_kit.pb_title_4')
         expect(text.textContent).toEqual("20 MAR")
     })
 

data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.scss

@@ -2,34 +2,74 @@
 @import "../pb_caption/caption";
 @import "../tokens/colors";
 
+// Center alignment
+.pb_date_stacked_kit_center_sm,
+.pb_date_stacked_kit_center_md,
+.pb_date_stacked_kit_center_sm_dark,
+.pb_date_stacked_kit_center_md_dark,
+.pb_date_stacked_kit_center_sm_reverse,
+.pb_date_stacked_kit_center_md_reverse,
+.pb_date_stacked_kit_center_sm_dark_reverse,
+.pb_date_stacked_kit_center_md_dark_reverse {
+  & > * .pb_title_kit,
+  & > * .pb_caption_kit,
+  & > .pb_date_stacked_year_kit {
+    text-align: center;
+  }
+}
 
-[class^=pb_date_stacked_kit]{
-  &[class*=_center]  {
-    & > * [class^=pb_title_kit],
-    & > * [class^=pb_caption_kit],
-    & > [class^=pb_date_stacked_year_kit] {
-      text-align: center;
-    }
+// Right alignment
+.pb_date_stacked_kit_right_sm,
+.pb_date_stacked_kit_right_md,
+.pb_date_stacked_kit_right_sm_dark,
+.pb_date_stacked_kit_right_md_dark,
+.pb_date_stacked_kit_right_sm_reverse,
+.pb_date_stacked_kit_right_md_reverse,
+.pb_date_stacked_kit_right_sm_dark_reverse,
+.pb_date_stacked_kit_right_md_dark_reverse {
+  & > * .pb_title_kit,
+  & > * .pb_caption_kit,
+  & > .pb_date_stacked_year {
+    text-align: right;
   }
-  &[class*=_right]  {
-    & > * [class^=pb_title_kit],
-    & > * [class^=pb_caption_kit],
-    & > [class^=pb_date_stacked_year] {
-      text-align: right;
-    }
+}
+
+// Reverse layout
+.pb_date_stacked_kit_left_sm_reverse,
+.pb_date_stacked_kit_left_md_reverse,
+.pb_date_stacked_kit_center_sm_reverse,
+.pb_date_stacked_kit_center_md_reverse,
+.pb_date_stacked_kit_right_sm_reverse,
+.pb_date_stacked_kit_right_md_reverse,
+.pb_date_stacked_kit_left_sm_dark_reverse,
+.pb_date_stacked_kit_left_md_dark_reverse,
+.pb_date_stacked_kit_center_sm_dark_reverse,
+.pb_date_stacked_kit_center_md_dark_reverse,
+.pb_date_stacked_kit_right_sm_dark_reverse,
+.pb_date_stacked_kit_right_md_dark_reverse {
+  .pb_date_stacked_day_month {
+    display: flex;
+    flex-direction: column-reverse;
   }
-  &[class*=_reverse] {
-    .pb_date_stacked_day_month {
-      display: flex;
-      flex-direction: column-reverse;
-    }
+}
+
+// Dark mode
+.pb_date_stacked_kit_left_sm_dark,
+.pb_date_stacked_kit_left_md_dark,
+.pb_date_stacked_kit_center_sm_dark,
+.pb_date_stacked_kit_center_md_dark,
+.pb_date_stacked_kit_right_sm_dark,
+.pb_date_stacked_kit_right_md_dark,
+.pb_date_stacked_kit_left_sm_dark_reverse,
+.pb_date_stacked_kit_left_md_dark_reverse,
+.pb_date_stacked_kit_center_sm_dark_reverse,
+.pb_date_stacked_kit_center_md_dark_reverse,
+.pb_date_stacked_kit_right_sm_dark_reverse,
+.pb_date_stacked_kit_right_md_dark_reverse {
+  & > * .pb_title_kit {
+    color: $text_dk_default;
   }
-  &[class*=_dark] {
-    & > * [class^=pb_title_kit] {
-      color: $text_dk_default;
-    }
-    & > * [class^=pb_caption_kit] {
-      color: $text_dk_light;
-    }
+  & > * .pb_caption_kit {
+    color: $text_dk_light;
   }
-}
+}

data/app/pb_kits/playbook/pb_date_stacked/date_stacked.test.js

@@ -56,7 +56,7 @@ describe("DateStacked Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const text = kit.querySelector(".pb_title_kit_size_4")
+        const text = kit.querySelector(".pb_title_kit.pb_title_4")
         expect(text.textContent).toEqual("1")
     })
 
@@ -115,7 +115,7 @@ describe("DateStacked Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const text = kit.querySelector(".pb_title_kit_size_4")
+        const text = kit.querySelector(".pb_title_kit.pb_title_4")
         expect(text).toBeInTheDocument()
     })
 

data/app/pb_kits/playbook/pb_date_time/_date_time.scss

@@ -1,19 +1,12 @@
-[class^=pb_date_time] {
-  [class*=pb_date_kit] > div:last-child {
+.pb_date_time,
+.pb_date_time_sm,
+.pb_date_time_md {
+  .pb_date_kit > div:last-child {
     margin-right: 0 !important;
   }
-  &[class*=_center] {
-    display: flex;
-    justify-content: center;
-    text-align: center;
-  }
-  &[class*=_right]  {
-    display: flex;
-    justify-content: flex-end;
-    text-align: right;
-  }
-  &[class*=dark] {
-    [class^=pb_title_kit] {
+
+  &.dark {
+    .pb_title_kit {
         color: $text_dk_default !important;
     }
     & * {
@@ -23,4 +16,4 @@
       color: $text_dk_default;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss

@@ -1,18 +1,18 @@
-[class^=pb_date_time_stacked] {
+.pb_date_time_stacked_kit {
 
-  [class^=padding_month] {
+  .padding_month {
     padding-bottom: $space_xs + 2px !important;
     }
 
-  [class^=padding_day] {
+  .padding_day {
     padding-bottom: $space_xs + 2px !important;
   }
 
-  &[class*=_dark] {
-    & > * [class^=pb_title_kit] {
+  &.dark {
+    & > * .pb_title_kit {
       color: $text_dk_default;
     }
-    & > * [class^=pb_caption_kit] {
+    & > * .pb_caption_kit {
       color: $text_dk_light;
     }
   }
@@ -22,4 +22,3 @@
   padding-right: $space_xs / 2;
   padding-left: $space_xs / 2;
 }
-

data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.scss

@@ -1,17 +1,20 @@
-[class^=pb_date_year_stacked] {
-  &[class*=_left] {
-    & > [class^=pb_title], & > [class^=pb_body] {
-      text-align: left;
-    }
+.pb_date_year_stacked_left {
+  & > .pb_title_kit, 
+  & > .pb_body_kit_light {
+    text-align: left !important;
   }
-  &[class*=_center] {
-    & > [class^=pb_title], & > [class^=pb_body] {
-      text-align: center;
-    }
-  }
-  &[class*=_right]  {
-    & > [class^=pb_title], & > [class^=pb_body] {
-      text-align: right;
-    }
+}
+
+.pb_date_year_stacked_center {
+  & > .pb_title_kit, 
+  & > .pb_body_kit_light {
+    text-align: center !important;
   }
 }
+
+.pb_date_year_stacked_right {
+  & > .pb_title_kit, 
+  & > .pb_body_kit_light {
+    text-align: right !important;
+  }
+}

data/app/pb_kits/playbook/pb_date_year_stacked/date_year_stacked.test.js

@@ -38,7 +38,7 @@ describe("DateYearStacked Kit", () => {
     );
 
     const kit = screen.getByTestId(testId);
-    const text = kit.querySelector(".pb_title_kit_size_4");
+    const text = kit.querySelector(".pb_title_kit.pb_title_4");
     expect(text.textContent).toEqual("1 JAN");
   });
 

data/app/pb_kits/playbook/pb_detail/_detail.scss

@@ -2,29 +2,16 @@
 @import "../tokens/titles";
 @import "../tokens/typography";
 
-[class^=pb_detail_kit]{
+.pb_detail_kit,
+.pb_detail_kit_color_light,
+.pb_detail_kit_color_default,
+.pb_detail_kit_color_lighter,
+.pb_detail_kit_color_link,
+.pb_detail_kit_color_error,
+.pb_detail_kit_color_success {
   @include pb_detail;
 
-  @each $color_name, $color_value in $pb_detail_colors {
-    &[class*=color_#{$color_name}] {
-      @include pb_detail($color_value);
-    }
-  }
-
-  @each $dark_color_name, $dark_color_value in $pb_dark_detail_colors{
-    &[class*=color_#{$dark_color_name}][class*=dark]{
-      @include pb_detail($dark_color_value)
-    }
-  }
-
-  // Styles
-  &.bold,
-  &.bold.dark,
-  b,
-  strong {
-    font-weight: $bold;
-  }
-
+  // Base styles
   a {
     color: $primary;
     &:hover {
@@ -42,3 +29,81 @@
     letter-spacing: $lspace_loose;
   }
 }
+
+// Color variations - Light Mode
+.pb_detail_kit_color_light {
+  @include pb_detail($text_lt_light);
+}
+
+.pb_detail_kit_color_default {
+  @include pb_detail($text_lt_default);
+}
+
+.pb_detail_kit_color_lighter {
+  @include pb_detail($text_lt_lighter);
+}
+
+.pb_detail_kit_color_link {
+  @include pb_detail($primary);
+}
+
+.pb_detail_kit_color_error {
+  @include pb_detail($error);
+}
+
+.pb_detail_kit_color_success {
+  @include pb_detail($text_lt_success_sm);
+}
+
+// Color variations - Dark Mode
+.pb_detail_kit.dark.pb_detail_kit_color_light,
+.pb_detail_kit_color_light.dark {
+  @include pb_detail($text_dk_light);
+}
+
+.pb_detail_kit.dark.pb_detail_kit_color_default,
+.pb_detail_kit_color_default.dark {
+  @include pb_detail($text_dk_default);
+}
+
+.pb_detail_kit.dark.pb_detail_kit_color_lighter,
+.pb_detail_kit_color_lighter.dark {
+  @include pb_detail($text_dk_lighter);
+}
+
+.pb_detail_kit.dark.pb_detail_kit_color_link,
+.pb_detail_kit_color_link.dark {
+  @include pb_detail($active_dark);
+}
+
+.pb_detail_kit.dark.pb_detail_kit_color_error,
+.pb_detail_kit_color_error.dark {
+  @include pb_detail($error_dark);
+}
+
+.pb_detail_kit.dark.pb_detail_kit_color_success,
+.pb_detail_kit_color_success.dark {
+  @include pb_detail($text_dk_success_sm);
+}
+
+// Bold styles
+.pb_detail_kit.bold,
+.pb_detail_kit_color_light.bold,
+.pb_detail_kit_color_default.bold,
+.pb_detail_kit_color_lighter.bold,
+.pb_detail_kit_color_link.bold,
+.pb_detail_kit_color_error.bold,
+.pb_detail_kit_color_success.bold,
+.pb_detail_kit.bold.dark,
+.pb_detail_kit_color_light.bold.dark,
+.pb_detail_kit_color_default.bold.dark,
+.pb_detail_kit_color_lighter.bold.dark,
+.pb_detail_kit_color_link.bold.dark,
+.pb_detail_kit_color_error.bold.dark,
+.pb_detail_kit_color_success.bold.dark {
+  font-weight: $bold;
+  
+  b, strong {
+    font-weight: $bold;
+  }
+}