playbook_ui 14.25.0.pre.alpha.testingcss10239 → 14.25.0.pre.rc.0

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb

@@ -1,14 +1,5 @@
 <%= pb_content_tag do %>
-  <%= pb_rails("button", props: {
-    type: object.type, 
-    loading: object.loading, 
-    link: object.link, 
-    new_window: object.new_window, 
-    variant: object.variant, 
-    target: object.target, 
-    disabled: object.disabled, 
-    dark: object.dark
-  }.merge(object.input_options)) do %>
+  <%= pb_rails("button", props: {type: object.type, loading: object.loading, link: object.link, new_window:object.new_window, variant: object.variant, target: object.target, disabled: object.disabled, dark: object.dark}) do %>
     <%= pb_rails("icon", props: {icon: object.icon, fixed_width: true, dark: object.dark}) %>
   <% end %>
 <% end %>

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.rb

@@ -21,8 +21,6 @@ module Playbook
       prop :size, type: Playbook::Props::Enum,
                   values: %w[default sm],
                   default: "default"
-      prop :input_options, type: Playbook::Props::HashProp,
-                           default: {}
 
       def classname
         generate_classname("pb_circle_icon_button_kit") + size_class

data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.test.js

@@ -26,7 +26,7 @@ test('passes loading prop to button', () => {
   )
 
   const kit = screen.getByTestId('loading-test')
-  const button = kit.querySelector('.pb_button_kit.pb_button_primary.pb_button_inline.pb_button_enabled.pb_button_loading')
+  const button = kit.querySelector('.pb_button_kit_primary_inline_enabled_loading')
   
   expect(button).toBeInTheDocument()
 })

data/app/pb_kits/playbook/pb_circle_icon_button/docs/example.yml

@@ -5,7 +5,6 @@ examples:
   - circle_icon_button_link: Link
   - circle_icon_button_loading: Loading
   - circle_icon_button_size: Size
-  - circle_icon_button_input_options: Input Options
   
   react:
   - circle_icon_button_default: Default

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 pb_flex_kit_orientation_row pb_flex_kit_justify_content_left pb_flex_kit_align_items_center pb_flex_kit_spacing_between"
+          class="pb_flex_kit_orientation_row_justify_content_left_align_items_center_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";
 
-.pb_collapsible_kit {
+[class^=pb_collapsible_kit] {
   padding: $space_md;
 
   .toggle-content {
@@ -28,10 +28,10 @@
   }
 }
 
-.pb_collapsible_main_kit {
+[class^=pb_collapsible_main_kit] {
   padding: $space_md;
 }
 
-.pb_collapsible_content_kit {
+[class^=pb_collapsible_content_kit] {
   padding: $space_md;
-}
+}

data/app/pb_kits/playbook/pb_copy_button/copy_button.test.jsx

@@ -52,7 +52,7 @@ test('passes text and tooltip props to button', () => {
   expect(content).toHaveTextContent("text")
 
   const kit = screen.getByTestId('text-test')
-  const button = kit.querySelector('.pb_button_kit.pb_button_primary.pb_button_inline.pb_button_enabled')
+  const button = kit.querySelector('.pb_button_kit_primary_inline_enabled')
   expect(button).toBeInTheDocument()
 
   fireEvent.click(button)

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

@@ -1,182 +1,97 @@
-.pb_currency_kit,
-.pb_currency_kit_left_sm,
-.pb_currency_kit_left_md,
-.pb_currency_kit_left_lg,
-.pb_currency_kit_center_sm,
-.pb_currency_kit_center_md,
-.pb_currency_kit_center_lg,
-.pb_currency_kit_right_sm,
-.pb_currency_kit_right_md,
-.pb_currency_kit_right_lg {
-  
-  // Center alignment styles
-  &.pb_currency_kit_center_sm,
-  &.pb_currency_kit_center_md,
-  &.pb_currency_kit_center_lg {
-    text-align: center;
-    & > .pb_caption_kit,font-weight
-    & > .pb_title_kit,
-    & > .pb_body_kit {
+[class^=pb_currency_kit] {
+  &[class*=_center]  {
+    & > [class^=pb_caption],
+    & > [class^=pb_title],
+    & > [class^=pb_body] {
       text-align: center;
     }
-    & > .pb_currency_wrapper,
-    & > .pb_currency_wrapper_deemphasized,
-    & > .pb_currency_wrapper_light,
-    & > .pb_currency_wrapper_bold {
+    & > [class*=pb_currency_wrapper] {
       justify-content: center;
     }
   }
 
-  // Right alignment styles
-  &.pb_currency_kit_right_sm,
-  &.pb_currency_kit_right_md,
-  &.pb_currency_kit_right_lg {
-    text-align: right;
-    & > .pb_caption_kit,
-    & > .pb_title_kit,
-    & > .pb_body_kit {
+  &[class*=_right] {
+    & > [class^=pb_caption],
+    & > [class^=pb_title],
+    & > [class^=pb_body] {
       text-align: right;
     }
-    & > .pb_currency_wrapper,
-    & > .pb_currency_wrapper_deemphasized,
-    & > .pb_currency_wrapper_light,
-    & > .pb_currency_wrapper_bold {
+    & > [class*=pb_currency_wrapper] {
       justify-content: flex-end;
     }
   }
 
-  .pb_currency_wrapper,
-  .pb_currency_wrapper_deemphasized,
-  .pb_currency_wrapper_light,
-  .pb_currency_wrapper_bold {
+  [class^=pb_currency_wrapper] {
     display: flex;
     align-items: baseline;
 
-    &.pb_currency_wrapper_deemphasized {
-      .pb_body_kit {
-        &:not(.dark) {
+    &[class*=_deemphasized] {
+      [class^=pb_body_kit], [class^=pb_body_kit] {
+        &:not([class*=dark]) {
           color: $text_lt_default;
         }
       }
 
-      .pb_body_kit.pb_body_light {
+      [class^=pb_body_kit][class*=_light] {
         font-weight: $regular;
       }
 
-      .pb_title_kit {
+      [class^=pb_title_kit] {
         font-weight: $lighter;
       }
     }
 
-    &.pb_currency_wrapper_light {
-      .pb_body_kit, 
-      .pb_title_kit {
+    &[class*=_light] {
+      [class^=pb_body_kit], [class^=pb_title_kit] {
         color: $text_lt_light;
         font-weight: $regular;
       }
 
-      .pb_title_kit.dark {
+      [class^=pb_title_kit].dark {
         color: $text_dk_light;
       }
     }
 
-    &.pb_currency_wrapper_bold {
-      .pb_body_kit,
-      .pb_body_kit_light {
+    &[class*=_bold] {
+      [class^=pb_body_kit], [class^=_light]{
         color: $text_lt_default;
         font-weight: $bolder;
       }
-      
-      .pb_title_kit {
-        font-weight: $bolder;
-      }
     }
 
-    & > .dollar_sign {
+    & > [class*=dollar_sign] {
       display: flex;
       align-self: flex-start;
     }
-    & > .unit {
+    & > [class*=unit] {
       display: flex;
       align-items: flex-end;
     }
   }
 
-  // Small size specific styles
-  &.pb_currency_kit_sm,
-  &.pb_currency_kit_left_sm,
-  &.pb_currency_kit_center_sm,
-  &.pb_currency_kit_right_sm {
-    .pb_currency_wrapper_deemphasized {
-      .pb_title_kit {
+  &[class*=_sm] {
+    [class^=pb_currency_wrapper][class*=_deemphasized] {
+      [class^=pb_title_kit] {
         font-weight: $regular;
       }
     }
-    
-    .pb_currency_wrapper,
-    .pb_currency_wrapper_deemphasized,
-    .pb_currency_wrapper_light,
-    .pb_currency_wrapper_bold {
-      .pb_currency_value {
-        line-height: 1.4;
-        padding-left: $space_xs - 7px;
-        padding-right: $space_xs - 7px;
-      }
-    }
   }
 
-  // Medium size specific styles
-  &.pb_currency_kit_md,
-  &.pb_currency_kit_left_md,
-  &.pb_currency_kit_center_md,
-  &.pb_currency_kit_right_md {
-    .pb_currency_wrapper,
-    .pb_currency_wrapper_deemphasized,
-    .pb_currency_wrapper_light,
-    .pb_currency_wrapper_bold {
-      .pb_currency_value {
-        line-height: 1.2;
-        padding-left: $space_xs - 7px;
-        padding-right: $space_xs - 7px;
-      }
-    }
+  &[class*=_lg] [class^=pb_currency_wrapper] [class*=pb_currency_value] {
+    line-height: .9;
+    padding-left: $space_xs - 7px;
+    padding-right: $space_xs - 7px;
   }
 
-  // Large size specific styles
-  &.pb_currency_kit_lg,
-  &.pb_currency_kit_left_lg,
-  &.pb_currency_kit_center_lg,
-  &.pb_currency_kit_right_lg {
-    .pb_currency_wrapper,
-    .pb_currency_wrapper_deemphasized,
-    .pb_currency_wrapper_light,
-    .pb_currency_wrapper_bold {
-      .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] {
+    line-height: 1.2;
+    padding-left: $space_xs - 7px;
+    padding-right: $space_xs - 7px;
   }
-}
 
-// Bold variant - apply bold styling to all caption labels in currency components with bold wrappers
-.pb_currency_kit .pb_caption_kit {
-  &:has(~ .pb_currency_wrapper_bold) {
-    font-weight: $bolder;
+  &[class*=_sm] [class^=pb_currency_wrapper] [class*=pb_currency_value] {
+    line-height: 1.4;
+    padding-left: $space_xs - 7px;
+    padding-right: $space_xs - 7px;
   }
 }
-
-.pb_currency_kit_left_sm .pb_caption_kit,
-.pb_currency_kit_left_md .pb_caption_kit,
-.pb_currency_kit_left_lg .pb_caption_kit,
-.pb_currency_kit_center_sm .pb_caption_kit,
-.pb_currency_kit_center_md .pb_caption_kit,
-.pb_currency_kit_center_lg .pb_caption_kit,
-.pb_currency_kit_right_sm .pb_caption_kit,
-.pb_currency_kit_right_md .pb_caption_kit,
-.pb_currency_kit_right_lg .pb_caption_kit {
-  &:has(~ .pb_currency_wrapper_bold) {
-    font-weight: $bolder;
-  }
-}

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

@@ -3,20 +3,10 @@
 @import "../pb_stat_change/stat_change";
 @import "../pb_body/body";
 
-.pb_dashboard_value_kit,
-.pb_dashboard_value_kit_left,
-.pb_dashboard_value_kit_center,
-.pb_dashboard_value_kit_right {
-  display: flex;
-  justify-content: flex-start;
-  align-items: flex-start;
-  flex-direction: column;
-}
-
-.pb_dashboard_value_kit_center {
-  align-items: center;
-}
-
-.pb_dashboard_value_kit_right {
-  align-items: flex-end;
+[class^=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,10 +1,7 @@
 @import "../pb_icon/icon";
 @import "../pb_title/title";
 
-.pb_date_kit,
-.pb_date_kit_left,
-.pb_date_kit_center,
-.pb_date_kit_right {
+[class^=pb_date_kit] {
     display: flex;
     flex-direction: row;
     align-items: center;
@@ -12,22 +9,27 @@
         margin-right: 4px !important;
     }
 
+    &[class*=_center] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: center;
+        margin-right: 4px !important;
+    }
+
+    &[class*=_right] {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        justify-content: flex-end;
+        margin-left: 4px !important;
+    }
     &.dark {
-        .pb_title_kit {
+        [class^=pb_title_kit] {
             color: $text_dk_default !important;
         }
-        .pb_body_kit, .pb_caption_kit {
+        [class^=pb_body_kit], [class^=pb_caption_kit] {
             color: $text_dk_light !important;
         }
     }
-}
-
-.pb_date_kit_center {
-    justify-content: center;
-    margin-right: 4px !important;
-}
-
-.pb_date_kit_right {
-    justify-content: flex-end;
-    margin-left: 4px !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";
 
-.pb_date_picker_kit {
+[class^=pb_date_picker_kit] {
   .input_wrapper {
     position: relative;
 

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

@@ -4,7 +4,6 @@ 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'
@@ -115,20 +114,6 @@ 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,
@@ -164,7 +149,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       required: false,
     }, scrollContainer)
   }, initializeOnce ? [] : undefined)
-
   const filteredProps = {...props}
   if (filteredProps.marginBottom === undefined) {
     filteredProps.marginBottom = "sm"
@@ -179,7 +163,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     error ? 'error' : null,
     className
   )
-
   const iconWrapperClass = () => {
     let base = 'cal_icon_wrapper'
     if (dark) {
@@ -193,7 +176,6 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
     }
     return base
   }
-
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
   return (
@@ -224,7 +206,6 @@ 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,7 +10,6 @@
       <%= 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
   */
-.pb_date_picker_kit {
+[class^=pb_date_picker_kit] {
   /*Default - No value in date picker*/
   &.inline-date-picker {
-    .pb_text_input_kit .text_input_wrapper .flatpickr-wrapper input::placeholder,
-    .pb_text_input_kit .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
+    [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 {
       opacity: 1;
     }
     &:not(:hover) {
@@ -27,10 +27,10 @@
       }
     }
     &:hover {
-      .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 {
+      [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 {
         color: $primary;
       }
       .date-picker-inline-angle-down.cal_icon_wrapper {
@@ -95,7 +95,7 @@
 /*
   DARK MODE
 */
-.pb_date_picker_kit.dark {
+[class^=pb_date_picker_kit].dark {
   &.inline-date-picker {
     &:not(:hover) {
       .date-picker-inline-angle-down.cal_icon_wrapper {
@@ -111,10 +111,10 @@
       }
     }
     &:hover {
-      .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 {
+      [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 {
         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";
 
-.pb_date_picker_kit {
+[class^=pb_date_picker_kit] {
 
   .pb_date_picker_kit_label {
     margin-bottom: $space_xs;
@@ -40,7 +40,7 @@
 
   &.error {
     .date_picker_input_wrapper {
-      .pb_body_kit {
+      [class*=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";
 
-.pb_date_picker_kit {
+[class^=pb_date_picker_kit] {
   .pb_time_selection {
     color: inherit;
     text-align: left;
@@ -27,10 +27,10 @@
         }
       }
     }
-    .pb_caption_kit_md, .pb_caption_kit_xs {
+    [class^=pb_caption_kit_md], [class^=pb_caption_kit_xs] {
       line-height: $text_larger;
     }
-    .pb_caption_kit_xs {
+    [class^=pb_caption_kit_xs] {
       clear: both;
       display: block;
     }
@@ -41,7 +41,7 @@
       }
     }
     .meridiem {
-      .pb_form_group_kit {
+      [class^=pb_form_group_kit] {
         margin-left: $space_sm;
       }
 
@@ -52,8 +52,7 @@
         background: transparent;
       }
 
-      .pb_selectable_card_kit_enabled > label,
-      .pb_selectable_card_kit_checked_enabled > label {
+      [class^=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,40 +1,34 @@
-.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 {
+[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] {
     display: flex;
     align-items: center;
-    .pb_date_range_inline_arrow {
+    [class*=pb_date_range_inline_arrow] {
       margin-left: $space_xs/2;
       margin-right: $space_xs/2;
     }
-    .pb_date_range_inline_timezone {
+    [class*=pb_date_range_inline_timezone] {
       margin-left: $space_xs/2;
     }
-    .pb_date_range_inline_icon {
+    [class*=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" | "right";
+  align?: "left" | "center" | "vertical";
   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";
 
-.pb_date_range_stacked {
+[class^=pb_date_range_stacked] {
   .pb_date_range_stacked_arrow {
     margin: 0 ($space_sm - 3) 0;
   }