playbook_ui 14.25.0.pre.alpha.testingcss10239 → 14.25.0.pre.rc.0

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -1,37 +1,23 @@
 @import "./body_mixins";
 @import "../tokens/titles";
 
-// Base body styles for all variants
-.pb_body_kit,
-.pb_body_kit_default,
-.pb_body_kit_light,
-.pb_body_kit_lighter,
-.pb_body_kit_link,
-.pb_body_kit_success,
-.pb_body_kit_error,
-.pb_body_kit_neutral,
-.pb_body_kit_positive,
-.pb_body_kit_negative,
-.pb_body_kit_default_neutral,
-.pb_body_kit_default_positive,
-.pb_body_kit_default_negative,
-.pb_body_kit_light_neutral,
-.pb_body_kit_light_positive,
-.pb_body_kit_light_negative,
-.pb_body_kit_lighter_neutral,
-.pb_body_kit_lighter_positive,
-.pb_body_kit_lighter_negative,
-.pb_body_kit_link_neutral,
-.pb_body_kit_link_positive,
-.pb_body_kit_link_negative,
-.pb_body_kit_success_neutral,
-.pb_body_kit_success_positive,
-.pb_body_kit_success_negative,
-.pb_body_kit_error_neutral,
-.pb_body_kit_error_positive,
-.pb_body_kit_error_negative {
+[class^="pb_body_kit"] {
   @include pb_body($text_lt_default);
-  
+  @each $color_name, $color_value in $pb_body_colors {
+    &[class*=_#{"" + $color_name}] {
+      @include pb_body($color_value);
+    }
+    @each $status_name, $status_value in $pb_body_status {
+      &[class*="_default_#{$status_name}"] {
+        @include pb_body($status_value);
+      }
+    }
+  }
+  @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
+    &[class*="_#{$dark_color_name}"][class*="dark"] {
+      @include pb_body($dark_color_value);
+    }
+  }
   b,
   strong {
     font-weight: $bold;
@@ -53,86 +39,27 @@
     font-size: $font_smaller;
     letter-spacing: $lspace_loose;
   }
-}
-
-// Color variants
-@each $color_name, $color_value in $pb_body_colors {
-  .pb_body_kit_#{$color_name},
-  .pb_body_kit_#{$color_name}_neutral,
-  .pb_body_kit_#{$color_name}_positive,
-  .pb_body_kit_#{$color_name}_negative {
-    @include pb_body($color_value);
-  }
-}
-
-// Status variants
-@each $status_name, $status_value in $pb_body_status {
-  .pb_body_kit_#{$status_name},
-  .pb_body_kit_default_#{$status_name},
-  .pb_body_kit_light_#{$status_name},
-  .pb_body_kit_lighter_#{$status_name},
-  .pb_body_kit_link_#{$status_name},
-  .pb_body_kit_success_#{$status_name},
-  .pb_body_kit_error_#{$status_name} {
-    @include pb_body($status_value);
-  }
-}
 
-// Dark theme base
-.pb_body_kit.dark,
-.pb_body_kit_default.dark,
-.pb_body_kit_light.dark,
-.pb_body_kit_lighter.dark,
-.pb_body_kit_link.dark,
-.pb_body_kit_success.dark,
-.pb_body_kit_error.dark,
-.pb_body_kit_neutral.dark,
-.pb_body_kit_positive.dark,
-.pb_body_kit_negative.dark,
-.pb_body_kit_default_neutral.dark,
-.pb_body_kit_default_positive.dark,
-.pb_body_kit_default_negative.dark,
-.pb_body_kit_light_neutral.dark,
-.pb_body_kit_light_positive.dark,
-.pb_body_kit_light_negative.dark,
-.pb_body_kit_lighter_neutral.dark,
-.pb_body_kit_lighter_positive.dark,
-.pb_body_kit_lighter_negative.dark,
-.pb_body_kit_link_neutral.dark,
-.pb_body_kit_link_positive.dark,
-.pb_body_kit_link_negative.dark,
-.pb_body_kit_success_neutral.dark,
-.pb_body_kit_success_positive.dark,
-.pb_body_kit_success_negative.dark,
-.pb_body_kit_error_neutral.dark,
-.pb_body_kit_error_positive.dark,
-.pb_body_kit_error_negative.dark {
-  @include pb_body_dark();
-  
-  a {
-    color: $active_dark;
+  @each $status_name, $status_value in $pb_body_status {
+    &[class*="#{$status_name}"] {
+      @include pb_body($status_value);
+    }
   }
-}
 
-// Dark color variants
-@each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
-  .pb_body_kit_#{$dark_color_name}.dark,
-  .pb_body_kit_#{$dark_color_name}_neutral.dark,
-  .pb_body_kit_#{$dark_color_name}_positive.dark,
-  .pb_body_kit_#{$dark_color_name}_negative.dark {
-    @include pb_body($dark_color_value);
+  &[class*="dark"] {
+    a {
+      color: $active_dark;
+    }
+    @include pb_body_dark();
+    @each $dark_color_name, $dark_color_value in $pb_dark_body_colors {
+      &[class*="_#{$dark_color_name}"][class*="dark"] {
+        @include pb_body($dark_color_value);
+      }
+    }
+    @each $status_name, $status_value in $pb_dark_body_status {
+      &[class*="_#{$status_name}"] {
+        @include pb_body($status_value);
+      }
+    }
   }
 }
-
-// Dark status variants
-@each $status_name, $status_value in $pb_dark_body_status {
-  .pb_body_kit_#{$status_name}.dark,
-  .pb_body_kit_default_#{$status_name}.dark,
-  .pb_body_kit_light_#{$status_name}.dark,
-  .pb_body_kit_lighter_#{$status_name}.dark,
-  .pb_body_kit_link_#{$status_name}.dark,
-  .pb_body_kit_success_#{$status_name}.dark,
-  .pb_body_kit_error_#{$status_name}.dark {
-    @include pb_body($status_value);
-  }
-}

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -74,4 +74,4 @@ $pb_dark_body_status: (
 
 @mixin pb_body_positive {
   @include pb_body($success);
-}
+}

data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.scss

@@ -3,7 +3,7 @@
 @import "../tokens/spacing";
 @import "../tokens/typography";
 
-.pb_bread_crumbs_kit {
+[class^=pb_bread_crumbs_kit] {
   $pb_badge_height: 18px;
 
   display: inline-flex;
@@ -14,22 +14,35 @@
   svg {
    margin-right: 8px;
   }
-  
-  .pb_bread_crumb_item {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-  }
-  
-  .pb_bread_crumb_item_kit {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+    .pb_bread_crumb_item {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+    }
+    .pb_bread_crumb_item_kit {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+    }
+    .pb_bread_crumb_item_kit:not(:last-child):after {
+      content: '/';
+      padding-left: 8px;
+      padding-right: 8px;
+    }
+
+  @each $color_name, $color_value in $status_colors {
+    &[class*=_#{$color_name}]  {
+      background: rgba($color_value, $opacity_1);
+      color: map-get($status_color_text, $color_name);
+    }
   }
-  
-  .pb_bread_crumb_item_kit:not(:last-child):after {
-    content: '/';
-    padding-left: 8px;
-    padding-right: 8px;
+
+  &.dark {
+    @each $color_name, $color_value in $status_colors {
+      &[class*=_#{$color_name}]  {
+        background: rgba(mix($bg_dark, $color_value, 10%), $opacity_2);
+      }
+    }
   }
 }

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

@@ -11,13 +11,11 @@ $pb_button_sizes: (
   "lg":   ($font_large - 2px),
 );
 
-// Base button class
-.pb_button_kit {
+[class*=pb_button_kit]{
   @include pb_button;
-  
-  // Size variants
+  // Size =================
   @each $name, $size in $pb_button_sizes {
-    &.pb_button_size_#{$name} {
+    &[class*=size_#{$name}] {
       font-size: $size;
       padding: $size / 2 $size * 2.42;
       @if $name == "sm" {
@@ -26,24 +24,17 @@ $pb_button_sizes: (
     }
   }
 
-  // Variant styles
-  &.pb_button_primary {
+  // Variants =================
+  &[class*=_primary]  {
     @include pb_button_primary;
   }
-  
-  &.pb_button_secondary {
+  &[class*=_secondary]  {
     @include pb_button_secondary;
   }
-  
-  &.pb_button_link {
+  &[class*=_link]  {
     @include pb_button_link;
   }
-  
-  &.pb_button_danger {
-    @include pb_button_danger;
-  }
-  
-  &.pb_button_reaction {
+  &[class*=_reaction] {
     background-color: $card_light;
     min-width: 40px;
     border-radius: $border_radius_rounded;
@@ -58,51 +49,52 @@ $pb_button_sizes: (
     &:hover {
       background-color: $bg_light;
     }
-    &.pb_button_active {
+    &.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;
-    }
   }
 
-  // Block (full width) style
-  &.pb_button_block {
+  &.reaction_default {
+    padding: ($space_xxs + 1) ($space_sm - 4);
+    color: $text_lt_lighter;
+  }
+
+  // Block ====================
+  &[class*=_block]  {
     @include pb_button_block;
-    width: 100% !important;
   }
 
-  // Loading state
-  &.pb_button_loading {
+  // Loading ==================
+  &[class*=_loading]  {
     @include pb_button_loading(true);
   }
 
-  // Disabled state
-  &.pb_button_disabled {
+  // Danger ===================
+  &[class*=_danger] {
+    @include pb_button_danger;
+  }
+
+  // Disabled =================
+  &[class*=_disabled]  {
     @include pb_button_disabled;
   }
 
-  // Dark theme variants
-  &.dark {
-    &.pb_button_primary {
+  // Dark Variants =============
+  &.dark  {
+    &[class*=_primary]  {
       @include pb_button_primary_dark;
     }
-    
-    &.pb_button_secondary {
+    &[class*=_secondary]  {
       @include pb_button_secondary_dark;
     }
-    
-    &.pb_button_link {
+    &[class*=_link]  {
       @include pb_button_link_dark;
     }
-    
-    &.pb_button_disabled {
+    &[class*=_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
 
-  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(' ')
+  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 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,17 +74,8 @@ module Playbook
       end
 
       def classname
-        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: " ")
+        button_class = generate_classname("pb_button_kit", variant, full_width_class, disabled_class, loading_class)
+        button_class + size_class + default_reaction_class + highlight_active
       end
 
     private
@@ -97,6 +88,22 @@ 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 pb_button_primary pb_button_inline pb_button_enabled')
+    expect(kit).toHaveClass('pb_button_kit_primary_inline_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 pb_button_secondary pb_button_inline pb_button_enabled')
+    expect(kit).toHaveClass('pb_button_kit_secondary_inline_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 pb_button_primary pb_button_inline pb_button_enabled pb_button_size_sm')
+    expect(kit).toHaveClass('pb_button_kit_primary_inline_enabled size_sm')
 })
 
 test('should render target prop', () => {

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

@@ -5,101 +5,92 @@
 @import "../tokens/colors";
 @import "../tokens/opacity";
 
-// 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;
-    }
-    &:not(:first-child){
-      border-bottom-left-radius: 0;
-      border-top-left-radius: 0;
-      border-left-width: 0;
-    }
-  }
-  
-  & > .pb_button_kit:not(:first-child):hover::before,
-  .pb_button_kit:hover + .pb_button_kit::before {
-    opacity: 0
-  }
-}
+[class^=pb_button_toolbar]{
 
-.pb_button_toolbar_kit_horizontal_primary {
-  & > .pb_button_kit:not(:first-child)::before {
-    @include toolbar_border(false, $primary_border)
-  }  
-}
+  // Horizontal =============
 
-.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*=_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;
+      }
     }
-    &: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(false, $primary_border)
+      }  
     }
+    &[class*=_secondary] {
+      & > [class^=pb_button]:not(:first-child)::before {
+        @include toolbar_border(false, $secondary_border)
+      }
+    }
+    & > [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
-  }
-}
 
-.pb_button_toolbar_kit_vertical_primary {
-  & > .pb_button_kit:not(:first-child)::before {
-    @include toolbar_border(true, $primary_border)
-  }
-}
+  // Vertical =============
 
-.pb_button_toolbar_kit_vertical_secondary {
-  & > .pb_button_kit:not(:first-child)::before {
-    @include toolbar_border(true, $secondary_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)
+      }
+    }
+    & > [class^=pb_button]:not(:first-child):hover::before,
+    [class^=pb_button]:hover + [class^=pb_button]::before {
+      opacity: 0
+    }
   }
-}
 
-// 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 {
+  // Hover =============
+  
+  & > [class^=pb_button]  {
     @media (hover:hover) {
       &:hover {
         background-color:darken($royal, 20%);
       }
     }
-    &.pb_button_secondary {
+    &[class*=secondary] {
       @media (hover:hover) {
         &:hover {
           background-color:rgba($primary_action, $opacity_3)
@@ -107,4 +98,4 @@
       }
     }
   }
-}
+}