playbook_ui 14.25.0.pre.alpha.testingcss9713 → 14.25.0.pre.alpha.testingcss9751

data/app/pb_kits/playbook/pb_radio/docs/_radio_react_hook.jsx

@@ -19,7 +19,6 @@ const RadioReactHook = () => {
           paddingRight="lg"
         >
         <Radio
-            alignment="left"
             label="Small"
             marginBottom='sm'
             name="size"
@@ -28,7 +27,6 @@ const RadioReactHook = () => {
         />
         <br />
         <Radio
-            alignment="left"
             label="Medium"
             marginBottom='sm'
             name="size"
@@ -37,7 +35,6 @@ const RadioReactHook = () => {
         />
         <br />
         <Radio
-            alignment="left"
             label="Large"
             marginBottom='sm'
             name="size"

data/app/pb_kits/playbook/pb_section_separator/_section_separator.scss

@@ -26,7 +26,7 @@ $section_colors_dark: (
   span {
     padding: 0;
     display: flex;
-    [class*="pb_caption_kit"] {
+    .pb_caption_kit_md {
       padding: 0 $space_xs;
     }
   }
@@ -42,96 +42,107 @@ $section_colors_dark: (
     flex: 1;
     @include section_separator_horizontal;
   }
-  @each $color_name, $color_value in $section_selector_colors {
-    &[class*="color_#{$color_name}"] {
-      &::before, &::after {
+}
+
+// Horizontal orientation (default)
+.pb_section_separator_horizontal {
+  justify-content: center;
+}
+
+// Vertical orientation
+.pb_section_separator_vertical {
+  margin-left: $space_xs;
+  margin-right: $space_xs;
+  &::before {
+    display: none;
+  }
+  &::after {
+    @include section_separator_vertical(false);
+  }
+}
+
+// Dashed line style
+.pb_section_separator_dashed {
+  &::before, &::after {
+    @include section_separator_dashed(false);
+  }
+}
+
+// Color variations
+@each $color_name, $color_value in $section_selector_colors {
+  .pb_section_separator_color_#{$color_name} {
+    &::before, &::after {
+      background: $color_value;
+    }
+
+    &.pb_section_separator_vertical {
+      &::after {
         background: $color_value;
       }
-
-      &._vertical {
-        &::after {
-          background: $color_value;
-        }
+    }
+    
+    &.pb_section_separator_dashed {
+      &::before, &::after {
+        border: 1px dashed $color_value;
+        background: none;
       }
-      &._dashed {
-        &::before, &::after {
+      &.pb_section_separator_vertical {
+        &::after {
           border: 1px dashed $color_value;
-        }
-        &._vertical {
-          &::after {
-            border: 1px dashed $color_value;
-            background: none;
-          }
+          background: none;
         }
       }
     }
   }
+}
 
-  &._horizontal {
-    justify-content: center;
+// Dark mode styles
+.pb_section_separator_kit.dark {
+  &::before {
+    @include section_separator_horizontal(true);
   }
-  &._vertical {
-    margin-left: $space_xs;
-    margin-right: $space_xs;
-    &::before {
-      display: none;
-    }
+  &::after {
+    @include section_separator_horizontal(true);
+  }
+  
+  &.pb_section_separator_vertical {
     &::after {
-      @include section_separator_vertical(false);
+      @include section_separator_vertical(true);
     }
   }
-
-  &._dashed {
+  
+  &.pb_section_separator_dashed {
     &::before, &::after {
-      @include section_separator_dashed(false);
+      @include section_separator_dashed(true);
     }
   }
+}
 
-  // Dark =========================
-
-  &.dark {
-    @each $color_name, $color_value in $section_selector_colors {
-      &[class*="color_#{$color_name}"] {
-        &::before, &::after {
-          background: $color_value;
-        }
-
-        &._vertical {
-          &::after {
-            @include section_separator_vertical(false);
-            background: $color_value;
-          }
-        }
-
-        &._dashed {
-          &::before, &::after {
-            border: 1px dashed $color_value;
-            background: none;
-          }
-          &._vertical {
-            &::after {
-              border: 1px dashed $color_value;
-              background: none;
-            }
-          }
-        }
-      }
-    }
-    &::before {
-      @include section_separator_horizontal(true);
-    }
-    &::after {
-      @include section_separator_horizontal(true);
+// Dark mode color variations
+@each $color_name, $color_value in $section_selector_colors {
+  .pb_section_separator_kit.dark.pb_section_separator_color_#{$color_name} {
+    &::before, &::after {
+      background: $color_value;
     }
-    &._vertical {
+
+    &.pb_section_separator_vertical {
       &::after {
-        @include section_separator_vertical(true);
+        @include section_separator_vertical(false);
+        background: $color_value;
       }
     }
-    &._dashed {
+
+    &.pb_section_separator_dashed {
       &::before, &::after {
-        @include section_separator_dashed(true);
+        border: 1px dashed $color_value;
+        background: none;
+      }
+      &.pb_section_separator_vertical {
+        &::after {
+          border: 1px dashed $color_value;
+          background: none;
+        }
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx

@@ -39,7 +39,15 @@ const SectionSeparator = (props: SectionSeparatorProps): React.ReactElement => {
   const ariaProps = buildAriaProps(aria)
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const classes = classnames(buildCss('pb_section_separator_kit', variant, orientation, lineStyle === "dashed" ? lineStyle : "", color !== "default" ? `color_${color}` : ''), globalProps(props), className)
+  const classes = classnames(
+    'pb_section_separator_kit',
+    `pb_section_separator_${variant}`,
+    `pb_section_separator_${orientation}`,
+    lineStyle === "dashed" ? 'pb_section_separator_dashed' : 'pb_section_separator_solid',
+    color !== "default" ? `pb_section_separator_color_${color}` : 'pb_section_separator_color_default',
+    globalProps(props),
+    className
+  )
   const dynamicInlineProps = globalInlineProps(props)
 
   return (

data/app/pb_kits/playbook/pb_section_separator/_section_separator_mixin.scss

@@ -30,4 +30,4 @@
         border: 1px dashed $border_dark;
         background: none;
     }
-}
+}

data/app/pb_kits/playbook/pb_section_separator/docs/_section_separator_color.jsx

@@ -5,7 +5,9 @@ import Detail from '../../pb_detail/_detail'
 import Icon from '../../pb_icon/_icon'
 
 const children = (
-  <Flex padding="xs">
+  <Flex alignItems="center"
+      padding="xs"
+  >
     <Icon color="primary"
         icon="arrow-down"
     />

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

@@ -80,7 +80,7 @@
     position: relative;
     display: block;
     &.error {
-      .pb_body_kit {
+      > .pb_body_kit_negative {
         margin-top: $space_xs / 2;
       }
       > select:first-child {
@@ -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")
 );
 
-.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,4 +1,8 @@
-.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;
@@ -42,7 +46,8 @@
       }
     }
 
-    &._disabled {
+    &.pb_selectable_card_icon_kit_disabled,
+    &.pb_selectable_card_icon_kit_checked_disabled {
       opacity: $opacity_6;
       cursor: not-allowed;
 
@@ -87,7 +92,11 @@
     margin-top: $space_xs;
   }
 
-  .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";
 
-.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;
 	}
 
-	&._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
@@ -101,6 +102,7 @@ const SelectableListItem = ({
                 defaultChecked={defaultChecked}
                 id={id}
                 label={label}
+                marginLeft="xs"
                 name={name}
                 onChange={onChange}
                 // eslint-disable-next-line @typescript-eslint/ban-ts-comment

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

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

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,
+  .pb_avatar_kit {
     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,