playbook_ui 14.25.0.pre.alpha.testingcss9700 → 14.25.0.pre.alpha.testingcss9751

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -11,11 +11,13 @@ $pb_button_sizes: (
   "lg":   ($font_large - 2px),
 );
 
-[class*=pb_button_kit]{
+// Base button class
+.pb_button_kit {
   @include pb_button;
-  // Size =================
+  
+  // Size variants
   @each $name, $size in $pb_button_sizes {
-    &[class*=size_#{$name}] {
+    &.pb_button_size_#{$name} {
       font-size: $size;
       padding: $size / 2 $size * 2.42;
       @if $name == "sm" {
@@ -24,17 +26,24 @@ $pb_button_sizes: (
     }
   }
 
-  // Variants =================
-  &[class*=_primary]  {
+  // Variant styles
+  &.pb_button_primary {
     @include pb_button_primary;
   }
-  &[class*=_secondary]  {
+  
+  &.pb_button_secondary {
     @include pb_button_secondary;
   }
-  &[class*=_link]  {
+  
+  &.pb_button_link {
     @include pb_button_link;
   }
-  &[class*=_reaction] {
+  
+  &.pb_button_danger {
+    @include pb_button_danger;
+  }
+  
+  &.pb_button_reaction {
     background-color: $card_light;
     min-width: 40px;
     border-radius: $border_radius_rounded;
@@ -49,52 +58,51 @@ $pb_button_sizes: (
     &:hover {
       background-color: $bg_light;
     }
-    &.active {
+    &.pb_button_active {
       border-color:transparent;
       box-shadow: 0px 0px 0 2px $primary_action;
       &:hover {
         background-color: rgba($primary, 0.03);
       }
     }
+    
+    &.pb_button_reaction_default {
+      padding: ($space_xxs + 1) ($space_sm - 4);
+      color: $text_lt_lighter;
+    }
   }
 
-  &.reaction_default {
-    padding: ($space_xxs + 1) ($space_sm - 4);
-    color: $text_lt_lighter;
-  }
-
-  // Block ====================
-  &[class*=_block]  {
+  // Block (full width) style
+  &.pb_button_block {
     @include pb_button_block;
+    width: 100% !important;
   }
 
-  // Loading ==================
-  &[class*=_loading]  {
+  // Loading state
+  &.pb_button_loading {
     @include pb_button_loading(true);
   }
 
-  // Danger ===================
-  &[class*=_danger] {
-    @include pb_button_danger;
-  }
-
-  // Disabled =================
-  &[class*=_disabled]  {
+  // Disabled state
+  &.pb_button_disabled {
     @include pb_button_disabled;
   }
 
-  // Dark Variants =============
-  &.dark  {
-    &[class*=_primary]  {
+  // Dark theme variants
+  &.dark {
+    &.pb_button_primary {
       @include pb_button_primary_dark;
     }
-    &[class*=_secondary]  {
+    
+    &.pb_button_secondary {
       @include pb_button_secondary_dark;
     }
-    &[class*=_link]  {
+    
+    &.pb_button_link {
       @include pb_button_link_dark;
     }
-    &[class*=_disabled]  {
+    
+    &.pb_button_disabled {
       @include pb_button_disabled_dark;
     }
   }

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -53,18 +53,18 @@ const buttonClassName = (props: ButtonPropTypes) => {
     size = null,
   } = props
 
-  let className = 'pb_button_kit'
-
-  className += `${variant !== null ? `_${variant}` : ''}`
-  className += `${type !== null ? `_${type}` : ''}`
-  className += `${fullWidth ? '_block' : ''}`
-  className += disabled ? '_disabled' : '_enabled'
-  className += loading ? '_loading' : ''
-  className += `${size !== null ? ` size_${size}` : ''}`
-  className += `${variant === 'reaction' && !isValidEmoji(icon) ? ` reaction_default` : ''}`
-  className += `${variant === 'reaction' && highlight ? ` active` : ''}`
-
-  return className
+  const classNames = ['pb_button_kit']
+
+  if (variant) classNames.push(`pb_button_${variant}`)
+  if (type) classNames.push(`pb_button_${type}`)
+  if (fullWidth) classNames.push('pb_button_block')
+  classNames.push(disabled ? 'pb_button_disabled' : 'pb_button_enabled')
+  if (loading) classNames.push('pb_button_loading')
+  if (size) classNames.push(`pb_button_size_${size}`)
+  if (variant === 'reaction' && icon && !isValidEmoji(icon)) classNames.push('pb_button_reaction_default')
+  if (variant === 'reaction' && highlight) classNames.push('pb_button_active')
+
+  return classNames.join(' ')
 }
 const spinnerIcon = getAllIcons()["spinner"]
 

data/app/pb_kits/playbook/pb_button/_button_mixins.scss

@@ -233,4 +233,4 @@ $pb_button_border_width: 0px;
   $disabled_color: rgba($white, $opacity_5);
   @include pb_button_variant(rgba($slate, $opacity_5), $disabled_color);
   pointer-events: none;
-}
+}

data/app/pb_kits/playbook/pb_button/button.rb

@@ -74,8 +74,17 @@ module Playbook
       end
 
       def classname
-        button_class = generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
-        button_class + size_class + default_reaction_class + highlight_active
+        class_names = ["pb_button_kit"]
+        class_names << "pb_button_#{variant}" if variant
+        class_names << "pb_button_#{full_width_class}"
+        class_names << "pb_button_#{disabled_class}"
+        class_names << "pb_button_loading" if loading
+        class_names << "pb_button_size_#{size}" if size
+        class_names << "pb_button_reaction_default" if variant === "reaction" && icon && !valid_emoji(icon)
+        class_names << "pb_button_active" if variant === "reaction" && highlight
+
+        class_names.join(" ")
+        generate_classname(class_names.compact.join(" "), separator: " ")
       end
 
     private
@@ -88,22 +97,6 @@ module Playbook
         full_width ? "block" : "inline"
       end
 
-      def loading_class
-        loading ? "loading" : nil
-      end
-
-      def size_class
-        size ? " size_#{size}" : ""
-      end
-
-      def default_reaction_class
-        variant === "reaction" && !object.valid_emoji(object.icon) ? " reaction_default" : ""
-      end
-
-      def highlight_active
-        variant === "reaction" && object.highlight ? " active" : ""
-      end
-
       def spinner_path
         "app/pb_kits/playbook/utilities/icons/spinner.svg"
       end

data/app/pb_kits/playbook/pb_button/button.test.js

@@ -22,7 +22,7 @@ test('passes type, text, and value props to button', () => {
     const kit = screen.getByTestId('primary-test')
     const content = screen.getByText(text)
 
-    expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled')
+    expect(kit).toHaveClass('pb_button_kit pb_button_primary pb_button_inline pb_button_enabled')
     expect(kit).toHaveAttribute('type', htmlType)
     expect(kit).toHaveAttribute('value', value)
     expect(content).toHaveTextContent(text)
@@ -54,7 +54,7 @@ test('button with secondary variant', () => {
 
     const kit = screen.getByTestId('variant-test')
 
-    expect(kit).toHaveClass('pb_button_kit_secondary_inline_enabled')
+    expect(kit).toHaveClass('pb_button_kit pb_button_secondary pb_button_inline pb_button_enabled')
     expect(kit).toHaveAttribute('type', 'button')
 })
 
@@ -98,7 +98,7 @@ test('size prop', () => {
 
     const kit = screen.getByTestId('size-test')
 
-    expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled size_sm')
+    expect(kit).toHaveClass('pb_button_kit pb_button_primary pb_button_inline pb_button_enabled pb_button_size_sm')
 })
 
 test('should render target prop', () => {

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.scss

@@ -5,92 +5,101 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
 
-[class^=pb_button_toolbar]{
-
-  // Horizontal =============
-
-  &[class*=_horizontal] {
-    display: inline-flex;
-    flex-direction: row;
-    align-items: center;
-    justify-content: flex-start;
-    & > [class^=pb_button]  {
-      &:not(:last-child){
-        border-bottom-right-radius: 0;
-        border-top-right-radius: 0;
-        border-right-width: 0;
-      }
-      &:not(:first-child){
-        border-bottom-left-radius: 0;
-        border-top-left-radius: 0;
-        border-left-width: 0;
-      }
-    }
-    &[class*=_primary] {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(false, $primary_border)
-      }  
+// Horizontal toolbars
+.pb_button_toolbar_kit_horizontal_primary,
+.pb_button_toolbar_kit_horizontal_secondary {
+  display: inline-flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-start;
+  
+  & > .pb_button_kit {
+    &:not(:last-child){
+      border-bottom-right-radius: 0;
+      border-top-right-radius: 0;
+      border-right-width: 0;
     }
-    &[class*=_secondary] {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(false, $secondary_border)
-      }
+    &:not(:first-child){
+      border-bottom-left-radius: 0;
+      border-top-left-radius: 0;
+      border-left-width: 0;
     }
-    & > [class^=pb_button]:not(:first-child):hover::before,
-      [class^=pb_button]:hover + [class^=pb_button]::before {
-        opacity: 0
-      }
   }
+  
+  & > .pb_button_kit:not(:first-child):hover::before,
+  .pb_button_kit:hover + .pb_button_kit::before {
+    opacity: 0
+  }
+}
 
-  // Vertical =============
+.pb_button_toolbar_kit_horizontal_primary {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(false, $primary_border)
+  }  
+}
 
-  &[class*=_vertical] {
-    display: inline-flex;
-    flex-direction: column;
-    align-items: flex-start;
-    justify-content: center;
-    & > [class^=pb_button]  {
-      display: block;
-      flex-grow: 1;
-      flex-shrink: 1;
-      flex-basis: auto;
-      width: 100%;
-      &:not(:last-child){
-        border-bottom-right-radius: 0;
-        border-bottom-left-radius: 0;
-        border-bottom-width: 0;
-      }
-      &:not(:first-child){
-        border-top-right-radius: 0;
-        border-top-left-radius: 0;
-        border-top-width: 0;
-      }
-    }
-    &[class*=_primary] {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(true, $primary_border)
-      }
-    }
-    &[class*=_secondary] {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(true, $secondary_border)
-      }
+.pb_button_toolbar_kit_horizontal_secondary {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(false, $secondary_border)
+  }
+}
+
+// Vertical toolbars
+.pb_button_toolbar_kit_vertical_primary,
+.pb_button_toolbar_kit_vertical_secondary {
+  display: inline-flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: center;
+  
+  & > .pb_button_kit {
+    display: block;
+    flex-grow: 1;
+    flex-shrink: 1;
+    flex-basis: auto;
+    width: 100%;
+    &:not(:last-child){
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+      border-bottom-width: 0;
     }
-    & > [class^=pb_button]:not(:first-child):hover::before,
-    [class^=pb_button]:hover + [class^=pb_button]::before {
-      opacity: 0
+    &:not(:first-child){
+      border-top-right-radius: 0;
+      border-top-left-radius: 0;
+      border-top-width: 0;
     }
   }
-
-  // Hover =============
   
-  & > [class^=pb_button]  {
+  & > .pb_button_kit:not(:first-child):hover::before,
+  .pb_button_kit:hover + .pb_button_kit::before {
+    opacity: 0
+  }
+}
+
+.pb_button_toolbar_kit_vertical_primary {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(true, $primary_border)
+  }
+}
+
+.pb_button_toolbar_kit_vertical_secondary {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(true, $secondary_border)
+  }
+}
+
+// Button hover styles for all toolbars
+.pb_button_toolbar_kit_horizontal_primary,
+.pb_button_toolbar_kit_horizontal_secondary,
+.pb_button_toolbar_kit_vertical_primary,
+.pb_button_toolbar_kit_vertical_secondary {
+  & > .pb_button_kit {
     @media (hover:hover) {
       &:hover {
         background-color:darken($royal, 20%);
       }
     }
-    &[class*=secondary] {
+    &.pb_button_secondary {
       @media (hover:hover) {
         &:hover {
           background-color:rgba($primary_action, $opacity_3)
@@ -98,4 +107,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_dark.scss

@@ -2,51 +2,50 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
 
-[class^=pb_button_toolbar]{
-
-  // Vertical =============
+// Dark theme - Vertical toolbars
+.pb_button_toolbar_kit_vertical_primary.dark {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(true, $primary_dark)
+  }
+}
 
-  &[class*=_vertical] {
-    &[class*=_primary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(true, $primary_dark)
-      }
-    }
-    &[class*=_secondary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(true, $secondary_dark)
-      }
-    }
+.pb_button_toolbar_kit_vertical_secondary.dark {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(true, $secondary_dark)
   }
+}
 
-  // Horizontal =============
+// Dark theme - Horizontal toolbars  
+.pb_button_toolbar_kit_horizontal_primary.dark {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(false, $primary_dark)
+  }
+}
 
-  &[class*=_horizontal] {
-    &[class*=_primary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(false, $primary_dark)
-      }
-    }
-    &[class*=_secondary].dark {
-      & > [class^=pb_button]:not(:first-child)::before {
-        @include toolbar_border(false, $secondary_dark)
-      }
-    }
+.pb_button_toolbar_kit_horizontal_secondary.dark {
+  & > .pb_button_kit:not(:first-child)::before {
+    @include toolbar_border(false, $secondary_dark)
   }
-  & > [class^=pb_button]:not(:first-child):hover::before,
-  [class^=pb_button]:hover + [class^=pb_button]::before {
+}
+
+// Dark theme hover effects
+.pb_button_toolbar_kit_horizontal_primary.dark,
+.pb_button_toolbar_kit_horizontal_secondary.dark,
+.pb_button_toolbar_kit_vertical_primary.dark,
+.pb_button_toolbar_kit_vertical_secondary.dark {
+  & > .pb_button_kit:not(:first-child):hover::before,
+  .pb_button_kit:hover + .pb_button_kit::before {
     opacity: 0
   }
 
-  // Hover =============
-
-  [class^=pb_button].dark  {
+  // Dark button hover styles
+  .pb_button_kit.dark {
     @media (hover:hover) {
       &:hover {
         background-color:darken($royal, 20%);
       }
     }
-    &[class*=secondary] {
+    &.pb_button_secondary {
       @media (hover:hover) {
         &:hover {
           background-color:rgba($primary_action, $opacity_3)
@@ -54,4 +53,4 @@
       }
     }
   }
-}
+}

data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar_mixins.scss

@@ -24,4 +24,4 @@ $secondary_dark:      rgba($bg_dark, $opacity_2);
     position: relative;
     bottom: 0;
     display: block;
-}
+}

data/app/pb_kits/playbook/pb_button_toolbar/button_toolbar.test.js

@@ -20,7 +20,7 @@ test('default test', () => {
 
   expect(kit).toHaveClass('pb_button_toolbar_kit_horizontal_primary')
   expect(kit).toContainElement(child)
-  expect(child).toHaveClass('pb_button_kit_primary_inline_enabled')
+  expect(child).toHaveClass('pb_button_kit pb_button_primary pb_button_inline pb_button_enabled')
 })
 
 test('variant and orientation props', () => {
@@ -42,5 +42,5 @@ test('variant and orientation props', () => {
   const child = screen.getByTestId('child-button')
 
   expect(kit).toHaveClass('pb_button_toolbar_kit_vertical_secondary')
-  expect(child).toHaveClass('pb_button_kit_secondary_inline_enabled')
+  expect(child).toHaveClass('pb_button_kit pb_button_secondary pb_button_inline pb_button_enabled')
 })

data/app/pb_kits/playbook/pb_caption/_caption.scss

@@ -1,32 +1,115 @@
 @import "../tokens/colors";
 @import "caption_mixin";
 
-[class^="pb_caption_kit"] {
+// Base caption classes - all size combinations
+.pb_caption_kit,
+.pb_caption_kit_xs,
+.pb_caption_kit_sm, 
+.pb_caption_kit_md,
+.pb_caption_kit_base,
+.pb_caption_kit_lg,
+.pb_caption_kit_xl {
   @include caption;
-  &[class*="_link"] {
-    color: $primary;
+}
+
+// Apply caption mixin to all size+color combinations too
+@each $color_name, $color_value in $pb_caption_colors {
+  .pb_caption_kit_xs_#{$color_name},
+  .pb_caption_kit_sm_#{$color_name},
+  .pb_caption_kit_md_#{$color_name},
+  .pb_caption_kit_base_#{$color_name},
+  .pb_caption_kit_lg_#{$color_name},
+  .pb_caption_kit_xl_#{$color_name} {
+    @include caption;
   }
+}
 
-  &[class^="pb_caption_kit_lg"] {
+// Apply caption mixin to link variants too
+.pb_caption_kit_xs_link,
+.pb_caption_kit_sm_link,
+.pb_caption_kit_md_link,
+.pb_caption_kit_base_link,
+.pb_caption_kit_lg_link,
+.pb_caption_kit_xl_link {
+  @include caption;
+}
+
+// Size-specific styles
+.pb_caption_kit_lg,
+.pb_caption_kit_lg_default,
+.pb_caption_kit_lg_light,
+.pb_caption_kit_lg_lighter,
+.pb_caption_kit_lg_success,
+.pb_caption_kit_lg_error,
+.pb_caption_kit_lg_link {
+  @include caption_lg;
+}
+
+// Apply lg mixin to all lg color combinations
+@each $color_name, $color_value in $pb_caption_colors {
+  .pb_caption_kit_lg_#{$color_name} {
     @include caption_lg;
   }
+}
 
-  &[class^="pb_caption_kit_xs"] {
+.pb_caption_kit_xs,
+.pb_caption_kit_xs_default,
+.pb_caption_kit_xs_light,
+.pb_caption_kit_xs_lighter,
+.pb_caption_kit_xs_success,
+.pb_caption_kit_xs_error,
+.pb_caption_kit_xs_link {
+  @include caption_xs;
+}
+
+// Apply xs mixin to all xs color combinations
+@each $color_name, $color_value in $pb_caption_colors {
+  .pb_caption_kit_xs_#{$color_name} {
     @include caption_xs;
   }
-  
-  &[class*="link"] {
-    color: $primary;
+}
+
+// Color variants - generate all size/color combinations
+@each $color_name, $color_value in $pb_caption_colors {
+  .pb_caption_kit_xs_#{$color_name},
+  .pb_caption_kit_sm_#{$color_name},
+  .pb_caption_kit_md_#{$color_name},
+  .pb_caption_kit_base_#{$color_name},
+  .pb_caption_kit_lg_#{$color_name},
+  .pb_caption_kit_xl_#{$color_name} {
+    color: $color_value;
   }
+}
 
-  @include pb_caption_kit_colors;
+// Link variant (deprecated but still supported)
+.pb_caption_kit_xs_link,
+.pb_caption_kit_sm_link,
+.pb_caption_kit_md_link,
+.pb_caption_kit_base_link,
+.pb_caption_kit_lg_link,
+.pb_caption_kit_xl_link {
+  color: $primary;
+}
 
-  &.dark {
-    @include caption_dark;
-    @each $name, $color in $pb_dark_caption_colors {
-      &[class*="_#{$name}"] {
-        color: $color;
-      }
-    }
-  }
+// Dark theme variants
+.pb_caption_kit.dark,
+.pb_caption_kit_xs.dark,
+.pb_caption_kit_sm.dark,
+.pb_caption_kit_md.dark,
+.pb_caption_kit_base.dark,
+.pb_caption_kit_lg.dark,
+.pb_caption_kit_xl.dark {
+  @include caption_dark;
 }
+
+// Dark theme color variants
+@each $color_name, $color_value in $pb_dark_caption_colors {
+  .pb_caption_kit_xs_#{$color_name}.dark,
+  .pb_caption_kit_sm_#{$color_name}.dark,
+  .pb_caption_kit_md_#{$color_name}.dark,
+  .pb_caption_kit_base_#{$color_name}.dark,
+  .pb_caption_kit_lg_#{$color_name}.dark,
+  .pb_caption_kit_xl_#{$color_name}.dark {
+    color: $color_value;
+  }
+}

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -44,11 +44,4 @@ $pb_dark_caption_colors: (
 
 @mixin caption_dark {
   color: $text_dk_light;
-}
-@mixin pb_caption_kit_colors {
-  @each $name, $color in $pb_caption_colors {
-    &[class*="#{$name}"] {
-      color: $color
-    }
-  }
-}
+}