playbook_ui 14.25.0.pre.alpha.testingcss9713 → 14.25.0.pre.alpha.testingcss9752

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

@@ -24,25 +24,24 @@ const SelectableListCheckbox = () => {
     )
 }
 
-const SelectableListRadio = () => {
-    return (
-        <SelectableList
-            data={{ testid: testId }}
-            variant="radio">
-        <SelectableList.Item
-            label="Small"
-            name="radio"
-            value="1"
-        />
-        <SelectableList.Item
-            defaultChecked
-            label="Medium"
-            name="radio"
-            value="2"
-        />
-      </SelectableList>
-    )
-}
+// const SelectableListRadio = () => {
+//     return (
+//         <SelectableList
+//             data={{ testid: testId }}
+//             variant="radio">
+//         <SelectableList.Item
+//             label="Small"
+//             name="radio"
+//             value="1"
+//         />
+//         <SelectableList.Item
+//             label="Medium"
+//             name="radio"
+//             value="2"
+//         />
+//       </SelectableList>
+//     )
+// }
 
 
 test("classname renders as expected", () => {
@@ -59,10 +58,10 @@ test("renders variant checkbox", () => {
     expect(checkbox).toBeInTheDocument()
 })
 
-test("renders variant radio", () => {
-    render(<SelectableListRadio />)
-    const kit = screen.getByTestId("selectable-list-test")
-    const checkbox = kit.querySelector(".pb_radio_kit")
-    expect(checkbox).toBeInTheDocument()
+// test("renders variant radio", () => {
+//     render(<SelectableListRadio />)
+//     const kit = screen.getByTestId("selectable-list-test")
+//     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,14 +1,14 @@
 @import "../tokens/spacing";
 
-.pb_source {
+.pb_source_kit {
   .pb__source_layout {
     display: flex;
     justify-content: flex-start;
     align-items: flex-start;
   }
 
-  .pb_icon_circle,
-  .pb_avatar {
+  .pb_icon_circle_kit_size_sm_default,
+  .pb_avatar_kit_size_sm {
     margin-right: $space-sm;
   }
 
@@ -21,9 +21,9 @@
       justify-content: flex-start;
       align-items: baseline;
 
-      .pb_body {
+      .pb_body_kit {
         margin-right: $space-xs;
       }
     }
   }
-}
+}

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,6 +1,6 @@
 @import "../pb_title/title";
 
-.pb_stat_value_kit{
+.pb_stat_value_kit {
   .pb_stat_value_wrapper {
     display: flex;
     justify-content: flex-start;

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

@@ -1,4 +1,4 @@
-.pb_table {
+[class^=pb_table] {
     tr {
         vertical-align: top;
     }

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

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

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

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

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

@@ -1,6 +1,6 @@
 @import "../../pb_caption/caption_mixin";
 
-.pb_table {
+[class^=pb_table] {
   &.table-sm,
   &.table-md,
   &.table-lg {

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

@@ -3,7 +3,7 @@
 $transition-speed: 0.2s;
 $border_hover_color_dark: lighten($border_dark, 5%);
 
-.pb_table {
+[class^=pb_table] {
   &.table-sm,
   &.table-md,
   &.table-lg {

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

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

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

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

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

@@ -1,6 +1,6 @@
 @import "../../tokens/spacing";
 
-.pb_table {
+[class^=pb_table] {
   @each $name, $value in $spaces {
     &.outer_padding_#{$name} {
       td:first-child,

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

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

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

@@ -33,33 +33,33 @@
                         -1px 0 0 0px $border_light
                 }
             }
-        &.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 {
+        &[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 {
             border-left-width: 0px;
         }
 
-        &.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 {
+        &[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 {
             border-left-width: 0px;
         }
 
-        &.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 {
+        &[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 {
             border-left-width: 0px;
         }
 
-        &.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 {
+        &[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 {
             border-right-width: 0px;
         }
 
-        &.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 {
+        &[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 {
             border-right-width: 0px;
         }
 
-        &.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 {
+        &[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 {
             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;
 }
 
-.pb_table {
+[class^=pb_table] {
   tbody, .pb_table_tbody {
-    .pb_table_row_kit {
+    [class^=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 @@
-.pb_table {
+[class^=pb_table] {
   &.single-line {
     width: 100%;
     max-width: 100vw;

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

@@ -1,4 +1,4 @@
-.pb_table:not(:has(colgroup)) {
+[class^=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";
 
-.pb_table {
+[class^=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 @@
-.pb_table {
+[class^=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;
 
-.pb_table {
+[class^=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) {
-  .pb_table {
+  [class^=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,
 );
 
-.pb_table {
+[class^=pb_table] {
   thead, .pb_table_thead {
-    .pb_table_header_kit {
+    [class^=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;
 }
 
-.pb_table {
+[class^=pb_table] {
   thead, .pb_table_thead {
-    .pb_th_active {
+    [class^=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) {
-  .pb_table {
+  [class^=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 @@
-.pb_table {
+[class^=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

@@ -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;
@@ -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_textarea/_textarea.scss

@@ -6,8 +6,8 @@
 .pb_textarea_kit {
   margin-bottom: $space_sm;
 
-  .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 {
-    .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,14 +4,18 @@
 @import "../pb_body/body";
 @import "../pb_caption/caption";
 
-.pb_time_kit {
-  &._center  {
-    text-align: center;
-  }
-
-  &._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 {
 
   .pb_time_timezone {
     color: $text_lt_light;
@@ -21,13 +25,36 @@
       content: " ";
     }
   }
+}
 
-  &.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,23 +1,11 @@
 
-.pb_time_range_inline_kit {
-  &._center  {
-    & > .pb_caption,
-    & > .pb_body {
-      text-align: center;
-    }
-    & > .pb_time_range_inline_wrapper {
-      justify-content: center;
-    }
-  }
-  &._right {
-    & > .pb_caption,
-    & > .pb_body {
-      text-align: right;
-    }
-    & > .pb_time_range_inline_wrapper {
-      justify-content: flex-end;
-    }
-  }
+@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;
@@ -33,3 +21,36 @@
     }
   }
 }
+
+// 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;
+  }
+}

data/app/pb_kits/playbook/pb_time_range_inline/time_range_inline.rb

@@ -16,7 +16,7 @@ module Playbook
       prop :timezone, default: false
 
       def classname
-        generate_classname("pb_time_range_inline_kit", dark_class, alignment)
+        generate_classname("pb_time_range_inline_kit", alignment)
       end
 
       def format_start_time_string

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

@@ -2,15 +2,12 @@
 @import "../pb_caption/caption";
 @import "../tokens/colors";
 
-.pb_time_stacked_kit {
- &._center  {
-   text-align: center;
- }
-
- &._right  {
-   text-align: right;
- }
+.pb_time_stacked_kit_center {
+  text-align: center;
+}
 
+.pb_time_stacked_kit_right {
+  text-align: right;
 }
 
 .time-spacing {