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

data/app/pb_kits/playbook/pb_timeline/_timeline.scss

@@ -43,14 +43,14 @@ $gap_lg: $height_from_top + $space_lg;
     flex-direction: $flex_direction;
 }
 
-.pb_timeline_kit {
-    &._horizontal {
+[class^=pb_timeline_kit] {
+    &[class*=_horizontal] {
         @include flex_wrapper(row);
         width: 100%;
         >div {
             &:last-child {
                 flex-basis: auto !important;
-                .pb_timeline_item_step {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         opacity: 0;
                     }
@@ -63,10 +63,10 @@ $gap_lg: $height_from_top + $space_lg;
                 }
             }
         }
-        .pb_timeline_item_kit {
-            &._solid {
+        [class*=pb_timeline_item_kit] {
+            &[class*=_solid] {
                 flex-basis: 100%;
-                .pb_timeline_item_step {
+                [class^=pb_timeline_item_step] {
                     @include flex_wrapper(row);
                     align-items: center;
                     margin-top: $space_xs;
@@ -76,9 +76,9 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                 }
             }
-            &._dotted {
+            &[class*=_dotted] {
                 flex-basis: 100%;
-                .pb_timeline_item_step {
+                [class^=pb_timeline_item_step] {
                     @include flex_wrapper(row);
                     align-items: center;
                     margin-top: $space_xs;
@@ -89,13 +89,13 @@ $gap_lg: $height_from_top + $space_lg;
                 }
             }
         }
-        &._with_date {
+        &[class*=_with_date] {
             @include flex_wrapper(row);
             width: 100%;
             >div {
                 &:last-child {
                     flex-basis: auto !important;
-                    .pb_timeline_item_step {
+                    [class^=pb_timeline_item_step] {
                         [class=pb_timeline_item_connector] {
                             opacity: 0;
                         }
@@ -108,8 +108,8 @@ $gap_lg: $height_from_top + $space_lg;
                     }
                 }
             }
-            .pb_timeline_item_kit {
-                &._solid {
+            [class*=pb_timeline_item_kit] {
+                &[class*=_solid] {
                     flex-basis: 100%;
                     [class=pb_timeline_item_left_block] {
                         display: flex;
@@ -125,7 +125,7 @@ $gap_lg: $height_from_top + $space_lg;
                             }
                         }
                     }
-                    .pb_timeline_item_step {
+                    [class^=pb_timeline_item_step] {
                         @include flex_wrapper(row);
                         margin-top: $space_xs;
                         margin-bottom: $space_xs;
@@ -134,7 +134,7 @@ $gap_lg: $height_from_top + $space_lg;
                         }
                     }
                 }
-                &._dotted {
+                &[class*=_dotted] {
                     flex-basis: 100%;
                     [class=pb_timeline_item_left_block] {
                         height: 55px;
@@ -149,7 +149,7 @@ $gap_lg: $height_from_top + $space_lg;
                             }
                         }
                     }
-                    .pb_timeline_item_step {
+                    [class^=pb_timeline_item_step] {
                         @include flex_wrapper(row);
                         margin-top: $space_xs;
                         margin-bottom: $space_xs;
@@ -161,22 +161,22 @@ $gap_lg: $height_from_top + $space_lg;
             }
         }
     }
-    &._vertical {
+    &[class*=_vertical] {
         @include flex_wrapper(column);
         align-items: flex-start;
         align-self: auto;
         >div:last-child {
-            .pb_timeline_item_step {
+            [class^=pb_timeline_item_step] {
                 [class=pb_timeline_item_connector] {
                     opacity: 0;
                 }
             }
         }
-        .pb_timeline_item_kit {
+        [class*=pb_timeline_item_kit] {
             @include flex_wrapper(row);
-            &._solid {
+            &[class*=_solid] {
                 flex-basis: 100%;
-                .pb_timeline_item_step {
+                [class^=pb_timeline_item_step] {
                     @include flex_wrapper(column);
                     align-items: center;
                     align-content: flex-start;
@@ -195,9 +195,9 @@ $gap_lg: $height_from_top + $space_lg;
                     margin-bottom: $space_lg;
                 }
             }
-            &._dotted {
+            &[class*=_dotted] {
                 flex-basis: 100%;
-                .pb_timeline_item_step {
+                [class^=pb_timeline_item_step] {
                     @include flex_wrapper(column);
                     align-items: center;
                     margin-right: $space_sm;
@@ -216,22 +216,22 @@ $gap_lg: $height_from_top + $space_lg;
                 }
             }
         }
-        &._with_date {
+        &[class*=_with_date] {
             @include flex_wrapper(column);
             align-items: flex-start;
             align-self: auto;
             >div:last-child {
-                .pb_timeline_item_step {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         opacity: 0;
                     }
                 }
             }
-            .pb_timeline_item_kit {
+            [class*=pb_timeline_item_kit] {
                 @include flex_wrapper(row);
-                &._solid {
+                &[class*=_solid] {
                     flex-basis: 100%;
-                    .pb_timeline_item_step {
+                    [class^=pb_timeline_item_step] {
                         @include flex_wrapper(column);
                         align-items: center;
                         align-content: flex-start;
@@ -250,9 +250,9 @@ $gap_lg: $height_from_top + $space_lg;
                         margin-bottom: $space_lg;
                     }
                 }
-                &._dotted {
+                &[class*=_dotted] {
                     flex-basis: 100%;
-                    .pb_timeline_item_step {
+                    [class^=pb_timeline_item_step] {
                         @include flex_wrapper(column);
                         align-items: center;
                         margin-right: $space_sm;
@@ -272,36 +272,36 @@ $gap_lg: $height_from_top + $space_lg;
                 }
             }
         }
-        &._gap_xs {
-            .pb_timeline_item_kit {
-                .pb_timeline_item_step {
+        &[class*=_gap_xs] {
+            [class*=pb_timeline_item_kit] {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_xs !important;
                     }
                 }
             }
         }
-        &._gap_sm {
-            .pb_timeline_item_kit {
-                .pb_timeline_item_step {
+        &[class*=_gap_sm] {
+            [class*=pb_timeline_item_kit] {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_sm !important;
                     }
                 }
             }
         }
-        &._gap_md {
-            .pb_timeline_item_kit {
-                .pb_timeline_item_step {
+        &[class*=_gap_md] {
+            [class*=pb_timeline_item_kit] {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_md !important;
                     }
                 }
             }
         }
-        &._gap_lg {
-            .pb_timeline_item_kit {
-                .pb_timeline_item_step {
+        &[class*=_gap_lg] {
+            [class*=pb_timeline_item_kit] {
+                [class^=pb_timeline_item_step] {
                     [class=pb_timeline_item_connector] {
                         height: $gap_lg !important;
                     }

data/app/pb_kits/playbook/pb_timestamp/_timestamp.scss

@@ -1,16 +1,22 @@
 @import "timestamp-mixins";
 @import "../tokens/colors";
 
-.pb_timestamp_kit{
+.pb_timestamp_kit_left,
+.pb_timestamp_kit_center,
+.pb_timestamp_kit_right {
   @include pb_timestamp;
+}
+
+.pb_timestamp_kit_center {
+  text-align: center;
+}
+
+.pb_timestamp_kit_right {
+  text-align: right;
+}
 
-  &._center  {
-    text-align: center;
-  }
-  &._right  {
-    text-align: right;
-  }
-  &._dark {
-    color: $text_dk_default;
-  }
+.pb_timestamp_kit_left.dark,
+.pb_timestamp_kit_center.dark,
+.pb_timestamp_kit_right.dark {
+  color: $text_dk_default;
 }

data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx

@@ -49,10 +49,7 @@ const Timestamp = (props: TimestampProps): React.ReactElement => {
   const dataProps = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
   const classes = classnames(
-    buildCss('pb_timestamp_kit', align, {
-      dark: dark,
-      variant: variant,
-    }),
+    buildCss('pb_timestamp_kit', align),
     globalProps(props),
     className
   )

data/app/pb_kits/playbook/pb_timestamp/timestamp.rb

@@ -40,7 +40,7 @@ module Playbook
       SECS_PER_CENT = 100 * SECS_PER_YEAR # 3,153,600,000 seconds
 
       def classname
-        generate_classname("pb_timestamp_kit", variant_class, align)
+        generate_classname("pb_timestamp_kit", align)
       end
 
       def timestamp_text

data/app/pb_kits/playbook/pb_timestamp/timestamp.test.js

@@ -36,7 +36,7 @@ describe("Timestamp Kit", () => {
     );
 
     const kit = screen.getByTestId(testId);
-    expect(kit).toHaveClass("pb_timestamp_kit_left_variant");
+    expect(kit).toHaveClass("pb_timestamp_kit_left");
   });
 
   test("renders Timestamp time", () => {
@@ -79,7 +79,7 @@ describe("Timestamp Kit", () => {
     );
 
     const kit = screen.getByTestId(testId);
-    expect(kit).toHaveClass("pb_timestamp_kit_center_variant");
+    expect(kit).toHaveClass("pb_timestamp_kit_center");
   });
 
   test("renders Timestamp timezone", () => {

data/app/pb_kits/playbook/pb_title/_title.scss

@@ -1,73 +1,77 @@
 @import "../tokens/titles";
 @import "../tokens/colors";
+@import "../tokens/typography";
 @import "../tokens/screen_sizes";
 @import './title_mixin';
 
 .pb_title_kit {
-  &._1 {
+  // Base title styles - default to title 3 styling
+  @include pb_title_3;
+  
+  // Size-based styles (these will override the base)
+  &.pb_title_1 {
     @include pb_title_1;
-    @include title_colors;
     @include pb_title_bold;
   }
 
-  &._2 {
+  &.pb_title_2 {
     @include pb_title_2;
-    @include title_colors;
     @include pb_title_bold;
   }
 
-  &._3 {
+  &.pb_title_3 {
     @include pb_title_3;
-    @include title_colors;
     @include pb_title_bold;
   }
 
-  &._4 {
+  &.pb_title_4 {
     @include pb_title_4;
-    @include title_colors;
   }
 
-  &._thin {
+  &.pb_title_thin {
     @include pb_title_thin;
   }
 
-  &._display {
+  // Color classes
+  @include title_colors;
+
+  // Display sizes
+  &.pb_title_display {
     font-size: clamp(24px, calc(1.25vw + 5.3vw), 128px);
+    font-weight: $bold;
   }
 
-  &._dynamic {
-    &._xs {
-      font-size: min(2vw, 80vw / 16); 
-    }
-  
-    &._sm {
-      font-size: min(2.5vw, 96vw / 16); 
-    }
-  
-    &._md {
-      font-size: min(4vw, 160vw / 16);
-    }
-  
-    &._lg {
-      font-size: min(5vw, 192vw / 16);
-    }
-  
-    &._xl {
-      font-size: min(6vw, 224vw / 16);
-    }
-  
-    &._xxl {
-      font-size: min(8vw, 256vw / 16);
-    }
+  // Dynamic sizes
+  &.pb_title_dynamic_xs {
+    font-size: min(2vw, 80vw / 16); 
+  }
+
+  &.pb_title_dynamic_sm {
+    font-size: min(2.5vw, 96vw / 16); 
+  }
+
+  &.pb_title_dynamic_md {
+    font-size: min(4vw, 160vw / 16);
   }
-  
 
+  &.pb_title_dynamic_lg {
+    font-size: min(5vw, 192vw / 16);
+  }
+
+  &.pb_title_dynamic_xl {
+    font-size: min(6vw, 224vw / 16);
+  }
+
+  &.pb_title_dynamic_xxl {
+    font-size: min(8vw, 256vw / 16);
+  }
 
+  // Responsive breakpoint classes
   @each $size, $size_value in $breakpoints_grid {
     @for $title_size_value from 1 through 4 {
       $min_size: map-get($size_value, "min");
       $max_size: map-get($size_value, "max");
-      &[class*=_#{$size}_#{$title_size_value}] {
+      &.pb_title_#{$size}_#{$title_size_value} {
         @include break_on($min_size, $max_size) {
           @if $title_size_value == 1 { @include pb_title_1; }
           @else if $title_size_value == 2 { @include pb_title_2; }
@@ -83,9 +87,9 @@
   &.dark {
     @include title_dark;
     @each $name, $color in $pb_dark_title_colors {
-      &[class*="_#{$name}"] {
+      &.pb_title_#{$name} {
         color: $color;
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_title/_title.tsx

@@ -43,32 +43,41 @@ const Title = (props: TitleProps): React.ReactElement => {
   const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
   const dataProps: {[key: string]: string | number} = buildDataProps(data)
   const htmlProps = buildHtmlProps(htmlOptions)
-  const getBold = bold ? '' : 'thin'
   const isSizeNumberOrString = typeof size === "number" || typeof size === "string"
 
   const buildResponsiveSizeCss = () => {
-    let css = ''
+    const classes: string[] = []
 
     if (!isSizeNumberOrString) {
       Object.entries(size).forEach((sizeObj) => {
-        css += `pb_title_kit_${sizeObj[0]}_${sizeObj[1]} `
+        classes.push(`pb_title_${sizeObj[0]}_${sizeObj[1]}`)
       })
     }
 
-    return css.trim()
+    return classes
   }
 
   const buildDisplaySize = () => {
     if (displaySize) {
-      return `pb_title_kit_dynamic_${displaySize}`
+      return [`pb_title_dynamic_${displaySize}`]
     }
+    return []
   }
 
+  const titleClasses = ['pb_title_kit']
+  
+  if (isSizeNumberOrString) {
+    titleClasses.push(`pb_title_${size}`)
+  }
+  if (variant) titleClasses.push(`pb_title_${variant}`)
+  if (color) titleClasses.push(`pb_title_${color}`)
+  if (!bold) titleClasses.push('pb_title_thin')
+  titleClasses.push(...buildDisplaySize())
+  titleClasses.push(...buildResponsiveSizeCss())
+
   const classes = classnames(
-    buildCss('pb_title_kit', isSizeNumberOrString ? `size_${size}` : "", variant, color, getBold),
+    titleClasses.join(' '),
     globalProps(props),
-    buildDisplaySize(),
-    buildResponsiveSizeCss(),
     className
   )
   const Tag: React.ReactElement | any = `${tag}`

data/app/pb_kits/playbook/pb_title/_title_mixin.scss

@@ -20,7 +20,7 @@ $pb_dark_title_colors: (
 
 @mixin title_colors {
   @each $name, $color in $pb_title_colors {
-    &[class*=_#{$name}] {
+    &.pb_title_#{$name} {
       color: $color
     }
   }
@@ -28,4 +28,4 @@ $pb_dark_title_colors: (
 
 @mixin title_dark {
   color: $text_dk_default;
-}
+}

data/app/pb_kits/playbook/pb_title/title.rb

@@ -21,36 +21,46 @@ module Playbook
                           default: nil
 
       def classname
+        title_classes = ["pb_title_kit"]
+
         if is_size_responsive
-          generate_classname("pb_title_kit", variant, color, is_bold) + generate_responsive_size_classname
+          title_classes << "pb_title_#{variant}" if variant.present?
+          title_classes << "pb_title_#{color}" if color.present?
+          title_classes << "pb_title_#{is_bold}" if is_bold.present?
+          title_classes += generate_responsive_size_classes
         else
-          generate_classname("pb_title_kit", size, variant, color, is_bold) + generate_display_size
+          title_classes << "pb_title_#{size}" if size.present?
+          title_classes << "pb_title_#{variant}" if variant.present?
+          title_classes << "pb_title_#{color}" if color.present?
+          title_classes << "pb_title_#{is_bold}" if is_bold.present?
+          title_classes += generate_display_size_classes
         end
+
+        generate_classname(title_classes.compact.join(" "), separator: " ")
       end
 
       def is_bold
         bold ? nil : "thin"
       end
 
-      def generate_display_size
-        return "" if display_size.nil?
+      def generate_display_size_classes
+        return [] if display_size.nil?
 
-        " pb_title_kit_dynamic_#{display_size}"
+        ["pb_title_dynamic_#{display_size}"]
       end
 
       def is_size_responsive
         try(:size).is_a?(::Hash)
       end
 
-      def generate_responsive_size_classname
-        css = ""
+      def generate_responsive_size_classes
+        classes = []
         if is_size_responsive
           size.each do |key, value|
-            css += " pb_title_kit_#{key}_#{value}"
+            classes << "pb_title_#{key}_#{value}"
           end
         end
-
-        css unless css.blank?
+        classes
       end
     end
   end

data/app/pb_kits/playbook/pb_title/title.test.js

@@ -12,7 +12,7 @@ test('returns namespaced class name', () => {
     )
 
     const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit_size_3')
+    expect(kit).toHaveClass('pb_title_kit pb_title_3')
 })
 
 test('with thin font weight', () => {
@@ -25,7 +25,7 @@ test('with thin font weight', () => {
     )
 
     const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit_size_3_thin')
+    expect(kit).toHaveClass('pb_title_kit pb_title_3 pb_title_thin')
 })
 
 test('with colors', () => {
@@ -38,7 +38,7 @@ test('with colors', () => {
     )
 
     const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit_size_3_success')
+    expect(kit).toHaveClass('pb_title_kit pb_title_3 pb_title_success')
 })
 
 test('with responsive title', () => {
@@ -51,5 +51,5 @@ test('with responsive title', () => {
     )
 
     const kit = screen.getByTestId('primary-test')
-    expect(kit).toHaveClass('pb_title_kit pb_title_kit_xs_3 pb_title_kit_sm_2 pb_title_kit_md_1')
+    expect(kit).toHaveClass('pb_title_kit pb_title_xs_3 pb_title_sm_2 pb_title_md_1')
 })

data/app/pb_kits/playbook/pb_title_count/_title_count.scss

@@ -1,20 +1,31 @@
 @import "../pb_title/title";
 @import "../pb_body/body";
 
-.pb_title_count_kit {
+.pb_title_count_kit_left_lg,
+.pb_title_count_kit_left_sm,
+.pb_title_count_kit_center_lg,
+.pb_title_count_kit_center_sm,
+.pb_title_count_kit_right_lg,
+.pb_title_count_kit_right_sm {
   display: flex;
-  justify-content: flex-start;
   align-items: baseline;
 
   & > .pb_title_count_text {
     padding-right: $space-xs;
   }
+}
 
-  &._center {
-    justify-content: center;
-  }
+.pb_title_count_kit_left_lg,
+.pb_title_count_kit_left_sm {
+  justify-content: flex-start;
+}
 
-  &._right {
-    justify-content: flex-end;
-  }
+.pb_title_count_kit_center_lg,
+.pb_title_count_kit_center_sm {
+  justify-content: center;
 }
+
+.pb_title_count_kit_right_lg,
+.pb_title_count_kit_right_sm {
+  justify-content: flex-end;
+}

data/app/pb_kits/playbook/pb_title_detail/_title_detail.scss

@@ -1,17 +1,16 @@
 @import "../pb_title/title";
 @import "../pb_body/body";
 
-.pb_title_detail_kit{
-  &._center  {
-    & > .pb_title,
-    & > .pb_body {
-      text-align: center;
-    }
+.pb_title_detail_kit_center {
+  & > .pb_title_kit,
+  & > .pb_body_kit_light {
+    text-align: center;
   }
-  &._right  {
-    & > .pb_title,
-    & > .pb_body {
-      text-align: right;
-    }
+}
+
+.pb_title_detail_kit_right {
+  & > .pb_title_kit,
+  & > .pb_body_kit_light {
+    text-align: right !important;
   }
 }

data/app/pb_kits/playbook/pb_toggle/_toggle.scss

@@ -5,7 +5,10 @@ $color_checkbox_default: $border_light;
 $color_disabled: darken($border_light, 20%);
 $transition: .2s ease-in-out;
 
-.pb_toggle_kit {
+.pb_toggle_kit_sm_on,
+.pb_toggle_kit_sm_off,
+.pb_toggle_kit_md_on,
+.pb_toggle_kit_md_off {
   position: relative;
   $width: 44px;
   $height: $width / 2;