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

data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx

@@ -13,7 +13,7 @@ test('should render classname', () => {
     )
 
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass('pb_form_pill_kit_primary none')
+    expect(kit).toHaveClass('pb_form_pill_kit pb_form_pill_primary pb_form_pill_none')
 });
 
 test('displays text content', () => {
@@ -37,7 +37,7 @@ test('displays color variant', () => {
         />
     )
     const kit = screen.getByTestId(testId)
-    expect(kit).toHaveClass(`pb_form_pill_kit_neutral none`)
+    expect(kit).toHaveClass(`pb_form_pill_kit pb_form_pill_neutral pb_form_pill_none`)
 });
 
 test('displays size variant', () => {
@@ -49,7 +49,7 @@ test('displays size variant', () => {
         />
     )
     const kit = screen.getByTestId('formpill')
-    expect(kit).toHaveClass(`pb_form_pill_kit_primary small none`)
+    expect(kit).toHaveClass(`pb_form_pill_kit pb_form_pill_small pb_form_pill_primary pb_form_pill_none`)
 });
 
 test('displays icon', () => {
@@ -60,5 +60,5 @@ test('displays icon', () => {
         />
     )
     const kit = screen.getByTestId('formpill')
-    expect(kit).toHaveClass(`pb_form_pill_kit_primary_icon none`)
+    expect(kit).toHaveClass(`pb_form_pill_kit_icon pb_form_pill_primary pb_form_pill_none`)
 });

data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx

@@ -48,7 +48,7 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
     icon = "",
   } = props
 
-  const iconClass = icon ? "_icon" : ""
+  const iconClass = icon ? "icon" : ""
   const closeIconSize = size === "small" ? "xs" : "sm"
   const wrappedClass = wrapped ? "wrapped" : ""
 
@@ -56,12 +56,13 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
   delete filteredProps.truncate
 
   const css = classnames(
-    `pb_form_pill_kit_${color}${iconClass}`,
-    globalProps(filteredProps),
-    wrappedClass,
-    className,
-    size === 'small' ? 'small' : null,
-    textTransform,
+    icon ? 'pb_form_pill_kit_icon' : 'pb_form_pill_kit',
+    wrapped ? 'pb_form_pill_wrapped' : null,
+    size === 'small' ? 'pb_form_pill_small' : null,
+    `pb_form_pill_${color}`,
+    `pb_form_pill_${textTransform}`,
+     globalProps(filteredProps),
+     className,
   )
 
   const dataProps = buildDataProps(data)

data/app/pb_kits/playbook/pb_form_pill/form_pill.rb

@@ -20,7 +20,14 @@ module Playbook
                      default: false
 
       def classname
-        generate_classname("pb_form_pill_kit", color, icon_class, name, text, text_transform, wrapped_class)
+        classes = []
+        classes << (icon ? "pb_form_pill_kit_icon" : "pb_form_pill_kit")
+        classes << "pb_form_pill_wrapped" if wrapped
+        classes << "pb_form_pill_small" if size == "small"
+        classes << "pb_form_pill_#{color}"
+        classes << "pb_form_pill_#{text_transform}"
+        classes.join(" ")
+        generate_classname(classes.join(" "), separator: " ")
       end
 
       def display_text
@@ -32,7 +39,7 @@ module Playbook
       end
 
       def icon_class
-        icon ? "icon" : nil
+        icon ? "icon" : ""
       end
 
       def close_icon_size

data/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js

@@ -38,14 +38,14 @@ function HomeAdressStreetTest(props) {
 
   test("emphasize street by not setting a prop", () => {
     const { container } = render(<HomeAdressStreetTest />);
-    expect(container.getElementsByClassName("pb_title_kit_size_4 pb_home_address_street_address")[0]).toHaveTextContent(address);
+    expect(container.querySelector(".pb_title_kit.pb_title_4.pb_home_address_street_address")).toHaveTextContent(address);
 
     cleanup()
   });
 
   test("emphasize city", () => {
     const { container } = render(<HomeAdressStreetTest emphasis="city" />);
-    expect(container.getElementsByClassName("pb_title_kit_size_4 pb_home_address_street_address")[0]).toHaveTextContent(city);
+    expect(container.querySelector(".pb_title_kit.pb_title_4.pb_home_address_street_address")).toHaveTextContent(city);
 
     cleanup()
   });

data/app/pb_kits/playbook/pb_icon_button/_icon_button.scss

@@ -15,7 +15,7 @@ $icon_colors: (
   height: fit-content;
 
   &:hover {
-    [class*="pb_button_kit"] {
+    .pb_button_kit {
       background-color: $bg_light;
     }
     .icon_button_icon {
@@ -24,7 +24,7 @@ $icon_colors: (
   }
 
   &:active {
-    [class*="pb_button_kit"] {
+    .pb_button_kit {
       background-color: $bg_light;
     }
     .icon_button_icon {
@@ -33,7 +33,7 @@ $icon_colors: (
   }
 
   &:hover:active {
-    [class*="pb_button_kit"] {
+    .pb_button_kit {
       background-color: $bg_light;
     }
     .icon_button_icon {
@@ -46,7 +46,7 @@ $icon_colors: (
     border-radius: 8px;
   }
 
-  [class*="pb_button_kit"] {
+  .pb_button_kit {
     min-height: 0;
     background: none;
     position: relative;

data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.scss

@@ -14,55 +14,56 @@ $pb_icon_circle_sizes: (
   "xl":   100px,
 );
 
-.pb_icon_circle_kit {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  object-fit: cover;
-  overflow: hidden;
-  position: relative;
-// font-family set to sans-serif ONLY for emojis.
-//Needed to fix misalignment issue caused by Proxima font
-  .icon_circle_emoji {
-    font-family: monospace;
-  }
-
-  i,
-  svg {
-    &.pb_icon_kit {
-      width: 100%;
-      height: 100%;
-      display: block;
-      text-align: center;
-      text-transform: uppercase;
+// All icon circle variations with complete styling
+@each $size_name, $size_value in $pb_icon_circle_sizes {
+  @each $color_name, $color_value in $colors {
+    .pb_icon_circle_kit_size_#{$size_name}_#{$color_name} {
+      // Base styles
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      object-fit: cover;
+      overflow: hidden;
       position: relative;
-      z-index: 0;
-    }
-  }
-
-  @each $name, $size in $pb_icon_circle_sizes {
-    &[class*=_size_#{$name}] {
-      width: $size;
-      height: $size;
-      border-radius: $size/2;
+      
+      // Size-specific styles
+      width: $size_value;
+      height: $size_value;
+      border-radius: $size_value/2;
       background: $silver;
       color: $text_lt_light;
-      font-size: if($name == "xxs", $size - 6px, $size * 0.38);
-      line-height: $size;
+      font-size: if($size_name == "xxs", $size_value - 6px, $size_value * 0.38);
+      line-height: $size_value;
       flex-shrink: 0;
       flex-grow: 0;
-      flex-basis: $size;
-    }
-  }
-
-  @each $color_name, $color_value in $colors {
-    &[class*=_#{"" + $color_name}] {
+      flex-basis: $size_value;
+      
+      // Color/variant-specific styles
       color: $color_value;
       background: rgba(mix($bg_dark, $color_value, 10%), $opacity_1);
+      
+      // font-family set to sans-serif ONLY for emojis.
+      // Needed to fix misalignment issue caused by Proxima font
+      .icon_circle_emoji {
+        font-family: monospace;
+      }
+
+      i,
+      svg {
+        &[class^=pb_icon_kit] {
+          width: 100%;
+          height: 100%;
+          display: block;
+          text-align: center;
+          text-transform: uppercase;
+          position: relative;
+          z-index: 0;
+        }
+      }
+      
       &.dark {
         background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
       }
     }
   }
 }
-

data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb

@@ -11,7 +11,7 @@ module Playbook
                   default: "md"
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default royal blue orange purple teal red yellow green orange lighter],
-                     default: "lighter"
+                     default: "default"
 
       def classname
         generate_classname("pb_icon_circle_kit", "size_#{size}", variant)

data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss

@@ -3,50 +3,50 @@
 @import "../tokens/spacing";
 @import "../pb_icon_circle/icon_circle";
 
-.pb_icon_stat_value_kit{
+[class^=pb_icon_stat_value_kit]{
   display: flex;
   align-items: baseline;
 
-  &._vertical  {
+  &[class*=_vertical]  {
     flex-direction: column;
 
-    &._center  {
+    &[class*=_center]  {
       align-items: center;
 
-      .pb_title,
-      .pb_body,
-      .pb_caption {
+      [class^=pb_title],
+      [class^=pb_body],
+      [class^=pb_caption] {
         text-align: center;
       }
     }
 
-    &._right  {
+    &[class*=_right]  {
       align-items: flex-end;
 
-      .pb_title,
-      .pb_body,
-      .pb_caption {
+      [class^=pb_title],
+      [class^=pb_body],
+      [class^=pb_caption] {
         text-align: right;
       }
     }
 
-    .pb_icon_circle {
+    [class^=pb_icon_circle] {
       margin-bottom: $space-xs;
     }
   }
 
-  &._horizontal  {
+  &[class*=_horizontal]  {
     align-items: center;
 
-    &._center  {
+    &[class*=_center]  {
       justify-content: center;
     }
 
-    &._right  {
+    &[class*=_right]  {
       justify-content: flex-end;
     }
 
-    .pb_icon_circle {
+    [class^=pb_icon_circle] {
       margin-right: $space-sm;
     }
   }

data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js

@@ -81,7 +81,7 @@ describe("IconStatValue Kit", () => {
         )
 
         const kit = screen.getByTestId(testId)
-        const value = kit.querySelector(".pb_title_kit_size_3")
+        const value = kit.querySelector(".pb_title_kit.pb_title_3")
         expect(value.textContent).toEqual("64.18")
     })
 

data/app/pb_kits/playbook/pb_icon_value/_icon_value.scss

@@ -3,33 +3,34 @@
 @import "../pb_icon/icon";
 @import "../pb_body/body";
 
-.pb_icon_value_kit {
+.pb_icon_value_kit_left,
+.pb_icon_value_kit_center,
+.pb_icon_value_kit_right {
   display: flex;
   align-items: center;
 
-  .pb_body_kit {
+  .pb_body_kit_light {
     font-size: $font-small !important;
     display: inline-flex;
     justify-content: flex-start;
     align-items: center;
 
-    .pb_icon_kit {
+    svg {
       font-size: $font-large !important;
       margin-right: $space-xs !important;
       flex-shrink: 0;
     }
-    &.dark {
-      
-    }
   }
+}
 
-  &._left {
-    justify-content: flex-start;
-  }
-  &._center {
-    justify-content: center;
-  }
-  &._right {
-    justify-content: flex-end;
-  }
+.pb_icon_value_kit_left {
+  justify-content: flex-start;
+}
+
+.pb_icon_value_kit_center {
+  justify-content: center;
 }
+
+.pb_icon_value_kit_right {
+  justify-content: flex-end;
+}

data/app/pb_kits/playbook/pb_image/_image.scss

@@ -9,50 +9,55 @@ $image-sizes: (
   "xl": 140px,
 );
 
-.pb_image_kit {
+.pb_image_kit,
+.pb_image_kit_size_xs,
+.pb_image_kit_size_sm,
+.pb_image_kit_size_md,
+.pb_image_kit_size_lg,
+.pb_image_kit_size_xl {
   position: relative;
   object-fit: cover;
 
-  @each $name, $size in $image-sizes {
-    &[class*=size_#{$name}] {
-      width: $size;
-      height: $size;
-      object-fit: cover;
-      position: relative;
-      flex-shrink: 0;
-      flex-grow: 0;
-      flex-basis: $size;
-    }
-
-    &[class*= rounded] {
-      border-radius: $border-rad-heaviest;
-    }
+  &.rounded {
+    border-radius: $border-rad-heaviest;
+  }
 
-    &.fade {
-      opacity: 0;
-      &.lazyloaded {
-        opacity: 1;
-        transition: opacity 300ms ease-in;
-      }
+  &.fade {
+    opacity: 0;
+    &.lazyloaded {
+      opacity: 1;
+      transition: opacity 300ms ease-in;
     }
+  }
 
-    &.blur {
-      filter: blur(5px);
-      &.lazyloaded {
-        -webkit-filter: blur(0);
-        filter: blur(0);
-        transition: filter 300ms ease-in;
-      }
+  &.blur {
+    filter: blur(5px);
+    &.lazyloaded {
+      -webkit-filter: blur(0);
+      filter: blur(0);
+      transition: filter 300ms ease-in;
     }
+  }
 
-    &.scale {
-      opacity: 0;
-      transform: scale(0.9);
-      &.lazyloaded {
-        opacity: 1;
-        transform: scale(1);
-        transition: 700ms ease-in;
-      }
+  &.scale {
+    opacity: 0;
+    transform: scale(0.9);
+    &.lazyloaded {
+      opacity: 1;
+      transform: scale(1);
+      transition: 700ms ease-in;
     }
   }
 }
+
+@each $name, $size in $image-sizes {
+  .pb_image_kit_size_#{$name} {
+    width: $size;
+    height: $size;
+    object-fit: cover;
+    position: relative;
+    flex-shrink: 0;
+    flex-grow: 0;
+    flex-basis: $size;
+  }
+}

data/app/pb_kits/playbook/pb_label_value/_label_value.scss

@@ -1,7 +1,8 @@
 @import "../tokens/spacing";
 
-.pb_label_value_kit {
-  .pb_caption_kit  {
+.pb_label_value_kit,
+.pb_label_value_kit_details {
+  .pb_caption_kit_md  {
     margin-bottom: $space-xs/1.5;
   }
 }

data/app/pb_kits/playbook/pb_label_value/label_value.test.js

@@ -71,7 +71,7 @@ describe("LabelValue Kit", () => {
             />
         )
         const kit = screen.getByTestId(testId)
-        const text = kit.querySelector(".pb_title_kit_size_4")
+        const text = kit.querySelector(".pb_title_kit.pb_title_4")
         expect(text.textContent).toEqual("JD Installations LLC")
     })
 
@@ -103,7 +103,7 @@ describe("LabelValue Kit", () => {
             />
         )
         const kit = screen.getByTestId(testId)
-        const activeProp = kit.querySelector(".pb_title_kit_size_4_link")
+        const activeProp = kit.querySelector(".pb_title_kit.pb_title_4.pb_title_link")
         expect(activeProp).toBeInTheDocument()
     })
 })

data/app/pb_kits/playbook/pb_legend/_legend.scss

@@ -9,26 +9,76 @@
   background: $color;
 }
 
-@mixin indicator-colors($colors-list) {
-  @each $name, $color in $colors-list {
-    &[class*=#{$name}] {
-      .pb_legend_indicator_circle {
-        @include pb_button($color);
-      }
+// Base class for custom colors (no color suffix)
+.pb_legend_kit {
+  .pb_legend_indicator_circle_custom {
+    display: inline-block;
+    width: 10px;
+    height: 10px;
+    border-radius: 5px;
+  }
+}
+
+// Data colors
+@each $name, $color in $data_colors {
+  .pb_legend_kit_#{$name} {
+    .pb_legend_indicator_circle {
+      @include pb_button($color);
+    }
+    
+    .pb_legend_indicator_circle_custom {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 5px;
     }
   }
 }
 
-.pb_legend_kit {
-  @include indicator-colors($data_colors);
-  @include indicator-colors($status_colors);
-  @include indicator-colors($product_colors);
-  @include indicator-colors($category_colors);
+// Status colors
+@each $name, $color in $status_colors {
+  .pb_legend_kit_#{$name} {
+    .pb_legend_indicator_circle {
+      @include pb_button($color);
+    }
+    
+    .pb_legend_indicator_circle_custom {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 5px;
+    }
+  }
+}
 
-  .pb_legend_indicator_circle_custom {
-  display: inline-block;
-  width: 10px;
-  height: 10px;
-  border-radius: 5px;
+// Product colors
+@each $name, $color in $product_colors {
+  .pb_legend_kit_#{$name} {
+    .pb_legend_indicator_circle {
+      @include pb_button($color);
+    }
+    
+    .pb_legend_indicator_circle_custom {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 5px;
+    }
   }
 }
+
+// Category colors
+@each $name, $color in $category_colors {
+  .pb_legend_kit_#{$name} {
+    .pb_legend_indicator_circle {
+      @include pb_button($color);
+    }
+    
+    .pb_legend_indicator_circle_custom {
+      display: inline-block;
+      width: 10px;
+      height: 10px;
+      border-radius: 5px;
+    }
+  }
+}

data/app/pb_kits/playbook/pb_legend/legend.test.js

@@ -39,7 +39,7 @@ test('prefixText prop renders', () => {
   )
 
   const kit = screen.getByTestId('primary-test')
-  const prefix = kit.querySelector(".pb_title_kit_size_4")
+  const prefix = kit.querySelector(".pb_title_kit.pb_title_4")
   expect(prefix).toBeInTheDocument()
 })
 

data/app/pb_kits/playbook/pb_lightbox/lightbox.scss

@@ -66,18 +66,18 @@ $lightbox-z-index-floor: $z_10 !default;
   width: 100%;
   z-index: $lightbox-z-index-floor + 1;
 
-  [class^="react-transform-wrapper"] {
+  .react-transform-wrapper {
     flex-shrink: 0;
     width: 100%;
     height: 100%;
   }
 
-  [class^="react-transform-content"] {
+  .react-transform-content {
     width: 100%;
     height: 100%;
   }
 
-  [class^="react-transform-component"] {
+  .react-transform-component {
     width: 100%;
     height: 100%;
     img {
@@ -164,4 +164,4 @@ $lightbox-z-index-floor: $z_10 !default;
   align-items: center;
   background-color: white;
   box-shadow: 0 0 6px white;
-}
+}

data/app/pb_kits/playbook/pb_lightbox/lightbox.test.jsx

@@ -113,7 +113,7 @@ test('Closes on close button', async () => {
   )
 
   const kit = screen.getByTestId(testId)
-  const closeIcon = kit.getElementsByClassName('pb_button_kit_link_inline_enabled')[0]
+  const closeIcon = kit.querySelector('.pb_button_kit.pb_button_link.pb_button_inline.pb_button_enabled')
 
   fireEvent(
     closeIcon,