playbook_ui 14.24.0 → 14.25.0.pre.alpha.PLAY2361datepickerarrownav10273

data/app/pb_kits/playbook/pb_section_separator/section_separator.rb

@@ -20,7 +20,13 @@ module Playbook
                         default: "solid"
 
       def classname
-        generate_classname("pb_section_separator_kit", variant, orientation, line_style == "dashed" ? "dashed" : nil, color != "default" ? "color_#{color}" : nil)
+        class_names = ["pb_section_separator_kit"]
+        class_names << "pb_section_separator_#{variant}"
+        class_names << "pb_section_separator_#{orientation}"
+        class_names << "pb_section_separator_#{line_style}"
+        class_names << "pb_section_separator_color_#{color}"
+
+        generate_classname(class_names.join(" "), separator: " ")
       end
 
     private

data/app/pb_kits/playbook/pb_select/_select.scss

@@ -4,7 +4,7 @@
 @import "../tokens/colors";
 @import "../tokens/spacing";
 
-[class^=pb_select] {
+.pb_select {
   select {
     @include pb_textarea_light;
     @include pb_body_light;
@@ -80,7 +80,7 @@
     position: relative;
     display: block;
     &.error {
-      [class*=pb_body_kit] {
+      > .pb_body_kit_negative {
         margin-top: $space_xs / 2;
       }
       > select:first-child {
@@ -157,7 +157,7 @@
   }
 }
 
-[class^=pb_select].dark {
+.pb_select.dark {
   select {
     @include pb_textarea_dark;
     @include pb_body_light_dark;
@@ -260,4 +260,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss

@@ -28,7 +28,11 @@ $pb_selectable_paddings: (
   py: ("padding-top", "padding-bottom")
 );
 
-[class^=pb_selectable_card_kit] {
+.pb_selectable_card_kit,
+.pb_selectable_card_kit_checked_disabled,
+.pb_selectable_card_kit_checked_enabled,
+.pb_selectable_card_kit_disabled,
+.pb_selectable_card_kit_enabled {
   display: block;
   margin-bottom: 0;
 
@@ -212,4 +216,4 @@ $pb_selectable_paddings: (
       background: $error;
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.scss

@@ -1,9 +1,13 @@
-[class^=pb_selectable_card_icon_kit] {
+.pb_selectable_card_icon_kit,
+.pb_selectable_card_icon_kit_checked_disabled,
+.pb_selectable_card_icon_kit_checked_enabled,
+.pb_selectable_card_icon_kit_disabled,
+.pb_selectable_card_icon_kit_enabled {
 
 	text-align: center;
 	user-select: none;
 
-  .buffer > [class*=pb_selectable_icon_kit]::before {
+  .buffer > .pb_selectable_icon_kit::before {
     content: '';
     position: absolute;
     width: 100%;
@@ -12,7 +16,7 @@
     left: 0;
   }
 
-  .buffer > [class*=pb_selectable_icon_kit] {
+  .buffer > .pb_selectable_icon_kit {
     @media (hover:hover) {
       &:hover * {
             transition: transform $transition_short ease;
@@ -42,7 +46,8 @@
       }
     }
 
-    &[class*=_disabled] {
+    &.pb_selectable_card_icon_kit_disabled,
+    &.pb_selectable_card_icon_kit_checked_disabled {
       opacity: $opacity_6;
       cursor: not-allowed;
 
@@ -79,15 +84,19 @@
     }
   }
 
-  [class^=pb_selectable_icon_kit] {
+  .pb_selectable_icon_kit {
     margin-bottom: 0px;
   }
 
-  [class^=pb_body_kit_light] {
+  .pb_body_kit_light {
     margin-top: $space_xs;
   }
 
-  [class^=pb_selectable_card_kit] {
+  .pb_selectable_card_kit,
+  .pb_selectable_card_kit_checked_disabled,
+  .pb_selectable_card_kit_checked_enabled,
+  .pb_selectable_card_kit_disabled,
+  .pb_selectable_card_kit_enabled {
     margin-bottom: 0px !important;
   }
-}
+}

data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.scss

@@ -1,6 +1,11 @@
 @import "../tokens/transition";
 
-[class^=pb_selectable_icon] {
+.pb_selectable_icon_kit,
+.pb_selectable_icon_kit_checked,
+.pb_selectable_icon_kit_enabled,
+.pb_selectable_icon_kit_disabled,
+.pb_selectable_icon_kit_checked_enabled,
+.pb_selectable_icon_kit_checked_disabled {
 
 	text-align: center;
 	cursor: pointer;
@@ -27,14 +32,6 @@
 		transition: color $transition_short ease;
 	}
 
-	&[class*=_disabled] {
-		opacity: $opacity_6;
-		cursor: not-allowed;
-		* {
-			cursor: not-allowed;
-		}
-	}
-	
 	input[type="checkbox"],
 	input[type="radio"] {
 		-webkit-appearance: none;
@@ -54,33 +51,46 @@
 
 		}
 	}
+}
 
+.pb_selectable_icon_kit_disabled,
+.pb_selectable_icon_kit_checked_disabled {
+	opacity: $opacity_6;
+	cursor: not-allowed;
+	* {
+		cursor: not-allowed;
+	}
+}
 
-	&.dark {
-		input[type="checkbox"],
-		input[type="radio"] {
-			-webkit-appearance: none;
-			-moz-appearance: none;
-			display: none;
-			appearance: none;
+.pb_selectable_icon_kit.dark,
+.pb_selectable_icon_kit_checked.dark,
+.pb_selectable_icon_kit_enabled.dark,
+.pb_selectable_icon_kit_disabled.dark,
+.pb_selectable_icon_kit_checked_enabled.dark,
+.pb_selectable_icon_kit_checked_disabled.dark {
+	input[type="checkbox"],
+	input[type="radio"] {
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		display: none;
+		appearance: none;
+		transition: color $transition_short ease;
+		
+		&:checked ~ label * {
 			transition: color $transition_short ease;
+			color: $active_dark !important;
+		}
 			
-			&:checked ~ label * {
-				transition: color $transition_short ease;
-				color: $active_dark !important;
-			}
-				
-			&:not(:checked) ~ label {
-				transition: color $transition_short ease;
-				color: $text_dk_lighter;
+		&:not(:checked) ~ label {
+			transition: color $transition_short ease;
+			color: $text_dk_lighter;
 
-				h4 {
-					transition: color $transition_short ease;
-					color: $text_dk_default;
-				}
+			h4 {
+				transition: color $transition_short ease;
+				color: $text_dk_default;
 			}
 		}
- 	}
+	}
 }
 
 

data/app/pb_kits/playbook/pb_selectable_list/_item.tsx

@@ -82,6 +82,7 @@ const SelectableListItem = ({
             <Checkbox
                 checked={checkedState}
                 id={id}
+                marginLeft="xs"
                 name={name}
                 onChange={handleChecked}
                 // eslint suppressor, text is needed to display on screen
@@ -98,6 +99,7 @@ const SelectableListItem = ({
         {variant == "radio" && (
           <>
             <Radio
+                className="ml_xs"
                 defaultChecked={defaultChecked}
                 id={id}
                 label={label}

data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss

@@ -1,20 +1,17 @@
 @import "../tokens/colors";
 @import "../tokens/spacing";
 
-[class^=pb_selectable_list]{
+.pb_selectable_list_kit {
   margin-bottom: 0px;
-  [class^=pb_item_kit] {
+  
+  .pb_item_kit,
+  .pb_item_kit_checked_item {
     &:hover {
       background-color: $bg_light;
     }
-    &[class*=checked_item] {
-      background-color: $active_light;
-    }
-  }
-  [class^=pb_radio_kit] {
-    margin-left: $space_xs;
   }
-  [class^=pb_checkbox_kit] {
-    margin-left: $space_xs;
+
+  .checked_item {
+    background-color: $active_light;
   }
-}
+}

data/app/pb_kits/playbook/pb_selectable_list/selectable_list.test.js

@@ -35,7 +35,6 @@ const SelectableListRadio = () => {
             value="1"
         />
         <SelectableList.Item
-            defaultChecked
             label="Medium"
             name="radio"
             value="2"
@@ -62,7 +61,7 @@ test("renders variant checkbox", () => {
 test("renders variant radio", () => {
     render(<SelectableListRadio />)
     const kit = screen.getByTestId("selectable-list-test")
-    const checkbox = kit.querySelector(".pb_radio_kit")
-    expect(checkbox).toBeInTheDocument()
+    const radio = kit.querySelector("input[type='radio']")
+    expect(radio).toBeInTheDocument()
 
 })

data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.html.erb

@@ -12,12 +12,12 @@
     </span>
   <% end %>
   <% if object.variant == "radio"%>
-    <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
+    <%= pb_rails("radio", props: { margin_left:"xs", text: object.text, checked: object.checked, input_options: object.input_options } ) %>
     <% if content.present? %>
       <%= content %>
     <% end %>
   <% else %>
-    <%= pb_rails("checkbox", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
+    <%= pb_rails("checkbox", props: { margin_left:"xs", text: object.text, checked: object.checked, input_options: object.input_options } ) %>
     <% if content.present? %>
       <%= content %>
     <% end %>

data/app/pb_kits/playbook/pb_source/_source.scss

@@ -1,29 +1,29 @@
 @import "../tokens/spacing";
 
-[class^=pb_source] {
-  [class^=pb__source_layout] {
+.pb_source_kit {
+  .pb__source_layout {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
   }
 
-  [class^=pb_icon_circle],
-  [class^=pb_avatar] {
+  .pb_icon_circle_kit_size_sm_default,
+  .pb_avatar_kit_size_sm {
     margin-right: $space-sm;
   }
 
-  [class^=pb__source_content] {
+  .pb__source_content {
     display: block;
     flex-grow: 1;
 
-    [class^=pb__source_value] {
+    .pb__source_value {
       display: flex;
       justify-content: flex-start;
       align-items: baseline;
 
-      [class^=pb_body] {
+      .pb_body_kit {
         margin-right: $space-xs;
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss

@@ -3,7 +3,7 @@
 @import "../tokens/spacing";
 
 
-[class*=pb_star_rating_kit] {
+.pb_star_rating_kit {
   display: flex;
   align-items: flex-end;
   justify-content: flex-start;

data/app/pb_kits/playbook/pb_star_rating/star_rating.test.js

@@ -65,7 +65,7 @@ describe("Star Rating Kit", () => {
     const stars = highlight.querySelectorAll(".pb_star_lg")
     const count = stars.length
 
-    expect(title.className).toBe("pb_title_kit_size_2_light_thin pr_sm pb_star_rating_number_lg")
+    expect(title.className).toBe("pb_title_kit pb_title_2 pb_title_light pb_title_thin pr_sm pb_star_rating_number_lg")
     expect(count).toBe(5)
   })
 })

data/app/pb_kits/playbook/pb_stat_value/_stat_value.scss

@@ -1,7 +1,7 @@
 @import "../pb_title/title";
 
-[class^=pb_stat_value_kit]{
-  [class^=pb_stat_value_wrapper] {
+.pb_stat_value_kit {
+  .pb_stat_value_wrapper {
     display: flex;
     justify-content: flex-start;
     align-items: baseline;

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

@@ -7,7 +7,7 @@
     thead tr:not(:first-child) th {
       border-right: 1px solid $border_light !important;
     }
-    
+
     @media screen and (min-width: $screen-xs-min) {
       tr:hover, .pb_table_tr:hover {
         td:last-child, .pb_table_td:last-child {
@@ -15,5 +15,53 @@
         }
       }
     }
+
+    // Firefox-specific fix for sticky elements
+    @-moz-document url-prefix() {
+      // Target sticky headers
+      &.sticky-header {
+        th:not(:last-child) {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_light !important;
+        }
+
+        .pb_advanced_table_body {
+          .pinned-row {
+            td:not(:first-child):not(:last-child) {
+              border-right: none !important;
+              box-shadow: 1px 0 0 0 $border_light !important;
+            }
+          }
+        }
+      }
+
+      // Target sticky left columns
+      &.sticky-left-column {
+        td[style="left"], th[style="left"] {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_light !important;
+        }
+      }
+
+      // Target sticky right columns
+      &.sticky-right-column {
+        td[style="right"], th[style="right"] {
+          border-right: none !important;
+          box-shadow: 1px 0 0 0 $border_light !important;
+        }
+      }
+
+      // Handle hover states in Firefox
+      @media screen and (min-width: $screen-xs-min) {
+        tr:hover, .pb_table_tr:hover {
+          td:last-child, .pb_table_td:last-child {
+            &[style="left"], &[style="right"] {
+              border-right: none !important;
+              box-shadow: 1px 0 0 0 darken($border_light, 10%) !important;
+            }
+          }
+        }
+      }
+    }
   }
 }

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

@@ -2,7 +2,7 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
 
-[class^="pb_text_input_kit"] {
+.pb_text_input_kit {
   .pb_text_input_kit_label {
     margin-bottom: $space_xs;
     display: block;
@@ -76,7 +76,7 @@
         .text_input {
           border-color: $error_dark;
         }
-        [class*=pb_body_kit_negative] {
+        .pb_body_kit_negative {
           color: $error_dark;
         }
       }
@@ -100,7 +100,7 @@
   }
   &.error {
     .text_input_wrapper {
-      [class*="pb_body_kit"] {
+      .pb_body_kit_negative {
         margin-top: $space_xs / 2;
       }
       // The `:not` here prevents error styling from affecting the country search input in the Phone Number Input Kit.
@@ -174,9 +174,9 @@
   }
 
   .text_input_wrapper_add_on {
-    & > [class^="pb_text_input_kit"]:not(:last-child) {
+    & > .pb_text_input_kit:not(:last-child) {
       .text_input_wrapper_add_on input,
-      [class^="pb_text_input_kit"] .text_input_wrapper_add_on .text_input {
+      .pb_text_input_kit .text_input_wrapper_add_on .text_input {
         border-bottom-right-radius: 0;
         border-top-right-radius: 0;
         border-right-width: 0;

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,11 +3,11 @@
 @import "../tokens/spacing";
 @import "../tokens/titles";
 
-[class^=pb_textarea_kit] {
+.pb_textarea_kit {
   margin-bottom: $space_sm;
 
-  [class^=pb_caption_kit] {
-    margin-bottom: $space_xs;
+  .pb_caption_kit_md {
+    margin-bottom: $space_xs !important;
     display: block;
   }
   textarea::placeholder,
@@ -59,8 +59,8 @@
   }
 
   &.error {
-    [class*=pb_body_kit] {
-      margin-top: $space_xs / 2;
+    .pb_body_kit_negative {
+      margin-top: $space_xs / 2 !important;
     }
     textarea {
       border-color: $error;
@@ -81,4 +81,4 @@
   .pb_caption_kit_xs {
     text-align: right;
   }
-}
+}

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

@@ -4,16 +4,20 @@
 @import "../pb_body/body";
 @import "../pb_caption/caption";
 
-[class^=pb_time_kit] {
-  &[class*=_center]  {
-    text-align: center;
-  }
-
-  &[class*=_right]  {
-    text-align: right;
-  }
+.pb_time_kit,
+.pb_time_kit_left,
+.pb_time_kit_center,
+.pb_time_kit_right,
+.pb_time_kit_sm,
+.pb_time_kit_md,
+.pb_time_kit_left_sm,
+.pb_time_kit_left_md,
+.pb_time_kit_center_sm,
+.pb_time_kit_center_md,
+.pb_time_kit_right_sm,
+.pb_time_kit_right_md {
 
-  [class^=pb_time_timezone] {
+  .pb_time_timezone {
     color: $text_lt_light;
     font-weight: $bold;
 
@@ -21,13 +25,36 @@
       content: " ";
     }
   }
+}
 
-  &[class*=dark] {
-    & * {
-      @include caption_dark;
-    }
-    .pb_time {
-      color: $text_dk_default;
-    }
-  }
+.pb_time_kit_center,
+.pb_time_kit_center_sm,
+.pb_time_kit_center_md {
+  text-align: center;
+}
+
+.pb_time_kit_right,
+.pb_time_kit_right_sm,
+.pb_time_kit_right_md {
+  text-align: right;
 }
+
+.pb_time_kit.dark,
+.pb_time_kit_left.dark,
+.pb_time_kit_center.dark,
+.pb_time_kit_right.dark,
+.pb_time_kit_sm.dark,
+.pb_time_kit_md.dark,
+.pb_time_kit_left_sm.dark,
+.pb_time_kit_left_md.dark,
+.pb_time_kit_center_sm.dark,
+.pb_time_kit_center_md.dark,
+.pb_time_kit_right_sm.dark,
+.pb_time_kit_right_md.dark {
+  & * {
+    @include caption_dark;
+  }
+  .pb_time {
+    color: $text_dk_default;
+  }
+}

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

@@ -1,35 +1,56 @@
 
-[class^=pb_time_range_inline_kit] {
-  &[class*=_center]  {
-    & > [class^=pb_caption],
-    & > [class^=pb_body] {
-      text-align: center;
-    }
-    & > [class*=pb_time_range_inline_wrapper] {
-      justify-content: center;
-    }
-  }
-  &[class*=_right] {
-    & > [class^=pb_caption],
-    & > [class^=pb_body] {
-      text-align: right;
-    }
-    & > [class*=pb_time_range_inline_wrapper] {
-      justify-content: flex-end;
-    }
-  }
-  [class^=pb_time_range_inline_wrapper] {
+@import "../tokens/spacing";
+
+// Base time range inline classes
+.pb_time_range_inline_kit_left,
+.pb_time_range_inline_kit_center,
+.pb_time_range_inline_kit_right,
+.pb_time_range_inline_kit_vertical {
+  .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;
     }
   }
 }
+
+// Center alignment
+.pb_time_range_inline_kit_center {
+  & > .pb_caption_kit,
+  & > .pb_body_kit {
+    text-align: center;
+  }
+  & > .pb_time_range_inline_wrapper {
+    justify-content: center;
+  }
+}
+
+// Right alignment
+.pb_time_range_inline_kit_right {
+  & > .pb_caption_kit,
+  & > .pb_body_kit {
+    text-align: right;
+  }
+  & > .pb_time_range_inline_wrapper {
+    justify-content: flex-end;
+  }
+}
+
+// Vertical alignment
+.pb_time_range_inline_kit_vertical {
+  & > .pb_caption_kit,
+  & > .pb_body_kit {
+    text-align: center;
+  }
+  & > .pb_time_range_inline_wrapper {
+    justify-content: center;
+  }
+}